/* ============================================================
     CSS del laboratorio de galaxias — un solo archivo plano, sin
     preprocesador ni build step (cargado con <link> directo desde el HTML
     principal, se ve reflejado con solo recargar la página). Orden de
     secciones de abajo hacia arriba en el documento:
       - reset base + lienzo a pantalla completa
       - #panel lateral (deslizable) + #togglePanel y los botones de
         acceso rápido fijos (⚡/▶/100/500) que viven FUERA del panel
       - tipografía y bloques genéricos del panel (h1/h2/nota)
       - .modo-toggle (Galaxia única / Campo de galaxias)
       - .control / .control-rango: el asa simple y el asa doble que
         arma crearControlSimple()/crearControlRango() (utilidades.js)
       - .capas-tabs / .capa-tab / .capa-panel: pestañas de capas del
         modo campo (arman crearTabCapa() + cada capa-XXX.js)
       - .presets-barra y accesorios (guardar/exportar/importar)
       - .nebulosa-slot (los <details> de Nebulosas simples)
       - #estado (línea de estado de WebGPU, abajo a la izquierda)
     Todos los selectores son por clase o atributo (data-modo,
     data-capa, data-seccion) — nunca por orden de hermanos salvo
     .presets-fila:first-child — así que a ningún capa-XXX.js le importa
     en qué orden real se construye su HTML por JS.
     ============================================================ */
  html, body { margin: 0; height: 100%; background: #08070c; overflow: hidden; font-family: system-ui, sans-serif; }
  canvas { display: block; width: 100%; height: 100%; }
  #panel {
    position: fixed; top: 0; right: 0; width: 620px; height: 100%;
    background: rgba(10, 8, 16, 0.92); color: #ddd; padding: 14px 20px;
    box-sizing: border-box; overflow-y: auto; overflow-x: hidden; font-size: 12.5px; backdrop-filter: blur(4px);
    transition: transform .22s ease;
  }
  #panel.oculto { transform: translateX(100%); }
  #togglePanel {
    position: fixed; top: 14px; right: 14px; z-index: 20; width: 34px; height: 34px;
    background: #1c1828; color: #eee; border: 1px solid #3a3450; border-radius: 4px;
    font-size: 16px; cursor: pointer;
  }
  #togglePanel:hover { background: #2a2440; }
  #aleatorizarMaestroRapido, #autoAleatorizarRapido, #muestras100Rapido, #muestras500Rapido {
    position: fixed; right: 14px; z-index: 20; width: 34px; height: 34px;
    background: #1c1828; color: #eee; border: 1px solid #3a3450; border-radius: 4px;
    font-size: 16px; cursor: pointer;
  }
  #aleatorizarMaestroRapido { top: 56px; }
  #autoAleatorizarRapido { top: 98px; }
  #muestras100Rapido { top: 140px; }
  #muestras500Rapido { top: 182px; }
  /* fuente chica y fija: durante la generación el texto pasa a mostrar
     progreso ("42/500", 7 caracteres) en vez de solo "100"/"500". */
  #muestras100Rapido, #muestras500Rapido { font-size: 9.5px; font-weight: 600; letter-spacing: -.02em; }
  #aleatorizarMaestroRapido:hover, #autoAleatorizarRapido:hover,
  #muestras100Rapido:hover, #muestras500Rapido:hover { background: #2a2440; }
  #autoAleatorizarRapido.activo { background: #3a2a4a; border-color: #5a3f78; }
  #autoAleatorizarRapido.activo:hover { background: #4a3560; }
  #aleatorizarMaestroRapido:disabled, #autoAleatorizarRapido:disabled,
  #muestras100Rapido:disabled, #muestras500Rapido:disabled {
    opacity: .5; cursor: not-allowed;
  }
  #panel h1 { font-size: 13px; margin: 0 0 3px; color: #fff; }
  #panel h2 { font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
    color: #7a7391; margin: 12px 0 1px; padding-top: 7px; border-top: 1px solid #2a2440; }
  #panel p.nota { color: #9a93ad; margin: 0 0 6px; line-height: 1.3; font-size: 11.5px; }
  #panel .columnas { display: flex; gap: 26px; align-items: flex-start; }
  #panel .col { flex: 1 1 0; min-width: 0; }
  #panel .control { margin-top: 6px; }
  #panel .control label { display: flex; align-items: center; gap: 6px; margin-top: 0; color: #c9c2da; line-height: 1.2; }
  #panel .control label .txt { flex: 1; }
  #panel .val { color: #8fd; font-variant-numeric: tabular-nums; }
  #panel .lock { width: 12px; height: 12px; accent-color: #8fd; cursor: pointer; flex-shrink: 0; }
  #panel input[type=range] { width: 100%; display: block; margin-top: 1px; }
  #panel select, #panel button {
    width: 100%; margin-top: 4px; padding: 5px; background: #1c1828; color: #eee;
    border: 1px solid #3a3450; border-radius: 4px; font-size: 11.5px;
  }
  #panel button { cursor: pointer; }
  #panel button:hover { background: #2a2440; }
  #panel .acciones { display: flex; gap: 8px; margin: 2px 0 8px; }
  #panel .acciones button { margin-top: 0; }
  #panel #aleatorizarUnica, #panel #aleatorizarCampo { background: #3a2a4a; border-color: #5a3f78; }
  #panel #aleatorizarUnica:hover, #panel #aleatorizarCampo:hover { background: #4a3560; }
  #panel #regenerarCampo { background: #2a3a4a; border-color: #3f5a78; }
  #panel #regenerarCampo:hover { background: #35486a; }
  #panel #actualizarGalaxias { background: #2a4a35; border-color: #3f7854; }
  #panel #actualizarGalaxias:hover { background: #35603f; }
  #panel .control-rango label .val { min-width: 32px; text-align: right; }
  #panel .control-rango .pista { position: relative; height: 4px; background: #3a3450; border-radius: 2px; margin-top: 10px; }
  #panel .control-rango .relleno { position: absolute; height: 4px; background: #8fd; border-radius: 2px; top: 0; }
  #panel .control-rango input.asa {
    position: absolute; top: -7px; left: 0; width: 100%; height: 18px; margin: 0;
    background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none;
  }
  #panel .control-rango input.asa::-webkit-slider-runnable-track { background: transparent; }
  #panel .control-rango input.asa::-moz-range-track { background: transparent; }
  #panel .control-rango input.asa::-webkit-slider-thumb {
    pointer-events: auto; -webkit-appearance: none; appearance: none;
    width: 12px; height: 12px; border-radius: 50%; background: #8fd; cursor: pointer;
  }
  #panel .control-rango input.asa::-moz-range-thumb {
    pointer-events: auto; width: 12px; height: 12px; border-radius: 50%; background: #8fd; border: none; cursor: pointer;
  }
  #panel .modo-toggle { display: flex; gap: 8px; margin: 10px 0 12px; }
  #panel .modo-btn { flex: 1; margin-top: 0; }
  #panel .modo-btn.activo { background: #3a2a4a; border-color: #5a3f78; }
  #panel .tipos-grid { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
  #panel .tipos-grid label { display: flex; align-items: center; gap: 6px; color: #c9c2da; font-size: 12px; }
  #panel .tipos-grid input[type=checkbox] { width: 13px; height: 13px; accent-color: #8fd; cursor: pointer; }
  #panel details.nebulosa-slot summary {
    display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
    font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #cfc8e0; padding: 3px 0;
  }
  #panel details.nebulosa-slot summary::-webkit-details-marker { display: none; }
  #panel details.nebulosa-slot summary .flecha { color: #7a7391; font-size: 9px; width: 8px; display: inline-block; }
  #panel details.nebulosa-slot[open] > summary .flecha { transform: rotate(90deg); }
  #panel details.nebulosa-slot summary .mostrarCapa {
    width: 13px; height: 13px; accent-color: #8fd; cursor: pointer; margin-left: auto;
  }
  #panel details.nebulosa-slot summary .mostrarCapa-txt {
    font-size: 9.5px; color: #7a7391; text-transform: none; letter-spacing: 0;
  }
  #panel details.nebulosa-slot { margin-top: 8px; border-top: 1px dashed #2a2440; padding-top: 4px; }
  #panel details.nebulosa-slot summary { font-size: 10.5px; color: #b0a8c5; }
  #panel[data-modo-activo="unica"] [data-modo="campo"] { display: none; }
  #panel[data-modo-activo="campo"] [data-modo="unica"] { display: none; }

  /* ---- pestañas de capas (modo campo) ---- */
  #panel .capas-campo { margin-top: 8px; }
  #panel .capas-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid #2a2440; padding-bottom: 6px; margin-bottom: 6px; }
  #panel .capa-tab {
    display: flex; align-items: center; justify-content: space-between; gap: 6px; flex: 1 1 auto; min-width: 0;
    padding: 5px 8px; background: #1c1828; border: 1px solid #3a3450; border-radius: 4px 4px 0 0;
    cursor: pointer; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: #a89fc0;
  }
  #panel .capa-tab:hover { background: #2a2440; }
  #panel .capa-tab.activa { background: #3a2a4a; border-color: #5a3f78; color: #fff; }
  #panel .capa-tab-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #panel .capa-tab-mostrar-wrap { display: flex; margin: 0; }
  #panel .capa-tab-mostrar-wrap input[type=checkbox] { width: 12px; height: 12px; accent-color: #8fd; cursor: pointer; }
  #panel .capa-panel { display: none; padding-top: 4px; }
  #panel .capas-campo[data-capa-activa="galaxias"] .capa-panel[data-capa="galaxias"],
  #panel .capas-campo[data-capa-activa="estrellasChicas"] .capa-panel[data-capa="estrellasChicas"],
  #panel .capas-campo[data-capa-activa="estrellasGrandes"] .capa-panel[data-capa="estrellasGrandes"],
  #panel .capas-campo[data-capa-activa="nebulosas"] .capa-panel[data-capa="nebulosas"],
  #panel .capas-campo[data-capa-activa="nebulosaCompleja"] .capa-panel[data-capa="nebulosaCompleja"],
  #panel .capas-campo[data-capa-activa="viaLactea"] .capa-panel[data-capa="viaLactea"] { display: block; }

  /* ---- barra de presets ---- */
  #panel .presets-barra { margin: 4px 0 10px; padding: 8px 10px; background: #15111f; border: 1px solid #2a2440; border-radius: 6px; }
  #panel .presets-fila { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
  #panel .presets-fila:first-child { margin-top: 0; }
  #panel .presets-fila-compartida { justify-content: space-between; }
  #panel .presets-titulo { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #7a7391; }
  /* flex-basis 0 explícito (no "auto") en ambos lados de cada fila mixta:
     "auto" hace que el <select>/<button> herede su width:100% de la regla
     general de arriba como base del cálculo de flex, lo que le daba toda la
     fila al select y dejaba "Cargar" aplastado a un hilo — con basis 0 en
     todos, el reparto lo decide solo el flex-grow (3 contra 1). */
  #panel .presets-select { flex: 3 1 0; min-width: 0; margin-top: 0; }
  #panel .presets-fila button { margin-top: 0; flex: 1 1 0; min-width: 0; white-space: nowrap; }
  #panel .presets-guardar-form.oculto { display: none; }
  #panel .presets-guardar-form input[type=text] {
    flex: 3 1 0; min-width: 0; background: #1c1828; color: #eee; border: 1px solid #3a3450; border-radius: 4px;
    padding: 5px; font-size: 11.5px;
  }
  #panel .btn-doble-confirmacion:disabled { opacity: .4; cursor: not-allowed; }
  #panel .btn-doble-confirmacion.armado { background: #4a2222; border-color: #7a3535; color: #ffd9d9; }
  #panel .btn-doble-confirmacion.armado:hover { background: #5c2a2a; }
  #panel .presets-importar-label {
    flex: 1 1 0; text-align: center; margin-top: 0; padding: 5px; background: #1c1828; color: #eee;
    border: 1px solid #3a3450; border-radius: 4px; font-size: 11.5px; cursor: pointer;
  }
  #panel .presets-importar-label:hover { background: #2a2440; }
  #panel .presets-indicador { font-size: 10.5px; }
  #panel .presets-indicador.sucio { color: #e0b84a; }
  #panel .presets-indicador.limpio { color: #7a7391; }

  #estado { position: fixed; left: 14px; bottom: 14px; color: #776f92; font-size: 11px; font-family: monospace; }