/* =================================================================
   HUD DE NAVE - cian electrico sobre negro.

   Decisiones de Antonio que manda este fichero:
     · HUD de nave espacial, no consola cientifica ni cristal minimalista
     · Cian electrico como color de brillo
     · Esquinas cortadas en angulo, nunca redondeadas
     · El marco de cada panel se DIBUJA solo al aparecer
     · Reticula de fondo muy tenue sobre todo el visor
     · Grano fino + aberracion cromatica en los bordes
     · Brillo de neon "marcado pero controlado"
     · Titulos con efecto de resplandor
     · Arranque como un sistema encendiendose

   Fuentes del sistema a proposito: la web tiene que arrancar sin conexion.
   ================================================================= */

:root {
  /* --- Cian electrico, la familia entera --- */
  --cian:        #00e5ff;
  --cian-claro:  #7df9ff;
  --cian-medio:  rgba(0, 229, 255, 0.55);
  --cian-tenue:  rgba(0, 229, 255, 0.22);
  --cian-fantasma: rgba(0, 229, 255, 0.08);

  /* --- Negros. No negro puro: un azul muy profundo lee mejor --- */
  --fondo:       #01050c;
  --vidrio:      rgba(2, 12, 22, 0.72);
  --vidrio-solido: rgba(2, 12, 22, 0.94);

  /* --- Texto --- */
  --tinta:       #d6f6ff;
  --tinta-media: rgba(214, 246, 255, 0.62);
  --tinta-tenue: rgba(214, 246, 255, 0.34);

  /* --- Semaforo: separado del acento, como manda el buen diseno de datos --- */
  --alerta:      #ff5c4d;
  --aviso:       #ffb340;
  --ok:          #4dffa6;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
          "Roboto Mono", Menlo, Consolas, "Courier New", monospace;

  /* Corte de las esquinas en angulo */
  --corte: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =================================================================
   Lienzo 3D
   ================================================================= */

#lienzo {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

#lienzo.arrastrando { cursor: grabbing; }
#lienzo.sobre-cuerpo { cursor: crosshair; }

/* =================================================================
   Capas de efecto sobre el visor.
   Todas con pointer-events:none: son cristal, no interfaz.
   ================================================================= */

.capa-visor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

/* --- Reticula de fondo muy tenue (pregunta 7) --- */
#reticula {
  background-image:
    linear-gradient(to right, var(--cian-fantasma) 1px, transparent 1px),
    linear-gradient(to bottom, var(--cian-fantasma) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.45;
  /* Se desvanece hacia el centro: el borde del visor se lee, el centro queda
     limpio para mirar el espacio. */
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 34%, #000 96%);
  mask-image: radial-gradient(ellipse at center, transparent 34%, #000 96%);
}

/* --- Grano fino (pregunta 15) --- */
/* ⚠️ Antonio, 31-ago: "se ve como la presentacion con ese granulado o ruido".
 *
 * Habia DOS granos sumandose sin saberlo el uno del otro: este, de CSS, y el
 * de la cadena de cine en `js/main.js`. Ninguno de los dos molestaba solo.
 *
 * Y de los dos, el que se veia era este, por la animacion: un grano quieto
 * casi no se nota, pero uno que SALTA tres veces por segundo sobre un fondo
 * negro se lee como suciedad en movimiento. Se queda muy flojo y quieto. */
#grano {
  opacity: 0.014;
  mix-blend-mode: overlay;
  background-repeat: repeat;
  background-size: 180px 180px;
}

/* --- Vinetа y aberracion cromatica en los bordes (pregunta 15) --- */
#vineta {
  box-shadow:
    inset 0 0 220px 40px rgba(0, 0, 0, 0.85),
    inset 0 0 60px rgba(0, 229, 255, 0.05);
}

#aberracion {
  opacity: 0.5;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(255, 0, 60, 0.055) 100%),
    radial-gradient(ellipse at 49.4% 50%, transparent 62%, rgba(0, 140, 255, 0.055) 100%);
  mix-blend-mode: screen;
}

/* --- Marcas de encuadre en las esquinas del visor --- */
#encuadre::before, #encuadre::after,
#encuadre > span::before, #encuadre > span::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid var(--cian-tenue);
}
#encuadre::before        { top: 14px; left: 14px;   border-right: none; border-bottom: none; }
#encuadre::after         { top: 14px; right: 14px;  border-left: none;  border-bottom: none; }
#encuadre > span::before { bottom: 14px; left: 14px;  border-right: none; border-top: none; }
#encuadre > span::after  { bottom: 14px; right: 14px; border-left: none;  border-top: none; }

/* =================================================================
   PANELES
   Esquinas cortadas en angulo + marco que se dibuja solo al aparecer.
   ================================================================= */

.panel {
  position: fixed;
  z-index: 10;
  background: var(--vidrio);
  backdrop-filter: blur(10px) saturate(1.25);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  padding: 13px 15px;
  /* El corte en angulo de las cuatro esquinas: la firma del HUD */
  clip-path: polygon(
    var(--corte) 0, 100% 0,
    100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%,
    0 100%, 0 var(--corte)
  );
  transition: opacity 0.3s;
}

/* El borde no puede ser un border normal: el clip-path lo recortaria.
   Se pinta con un pseudo-elemento que hereda la misma forma. */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--cian-medio) 0%,
    var(--cian-tenue) 40%,
    var(--cian-tenue) 60%,
    var(--cian-medio) 100%
  );
  clip-path: polygon(
    var(--corte) 0, 100% 0,
    100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%,
    0 100%, 0 var(--corte)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* --- Entrada del panel: el marco se dibuja y luego entra el contenido --- */
.panel.entrando {
  animation: panelEntra 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes panelEntra {
  0%   { opacity: 0; transform: translateY(6px) scaleY(0.4); filter: brightness(2.6); }
  55%  { opacity: 1; transform: translateY(0) scaleY(1); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* --- Barrido de escaneo al aparecer (pregunta 8) --- */
.panel.escaneando > .barrido {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 34%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 229, 255, 0.16) 55%,
    rgba(0, 229, 255, 0.30) 82%,
    transparent
  );
  animation: barrer 0.72s ease-out 1;
  pointer-events: none;
}

@keyframes barrer {
  from { transform: translateY(-120%); opacity: 1; }
  to   { transform: translateY(340%);  opacity: 0; }
}

/* ============ SOLO ESPACIO ============
   Antonio, 1-sep: "un boton para apagar el HUD y que solo se vea el espacio".

   ⚠️ Antes esto lo hacia la tecla H y NO incluia la barra de arriba ni los
   avisos, asi que "solo espacio" seguia teniendo media interfaz encima. */
body.interfaz-oculta .panel,
body.interfaz-oculta .capa-visor,
body.interfaz-oculta #pista,
body.interfaz-oculta #barra-superior,
body.interfaz-oculta #avisos,
body.interfaz-oculta #aviso-superficie,
body.interfaz-oculta #salir,
body.interfaz-oculta #capa-etiquetas {
  /* ⚠️ `!important` aqui SI esta justificado, y es de los pocos sitios donde
   * lo esta. La animacion de entrada de los paneles (`hud.animarPanel`) les
   * escribe la opacidad EN LINEA, y un estilo en linea gana a cualquier regla
   * de la hoja por especifica que sea. Medido: al pulsar SOLO ESPACIO, los dos
   * paneles seguian con opacidad 1,00.
   *
   * La alternativa seria que el JS fuera borrando estilos en linea uno a uno,
   * que es mas fragil: cualquier animacion nueva volveria a romperlo. */
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ⚠️ EL BOTON SE QUEDA. Es la puerta de vuelta.
   Si se apaga todo y no queda nada que pulsar, el unico camino de regreso es
   una tecla que nadie ha visto. Encogido y casi transparente en la esquina,
   se enciende al acercar el raton. */
body.interfaz-oculta #btn-limpio {
  position: fixed;
  top: 14px; right: 14px;
  z-index: 40;
  opacity: 0.18;
  pointer-events: auto;
  font-size: 8px;
  padding: 5px 8px;
  transition: opacity 0.25s ease;
}
body.interfaz-oculta #btn-limpio:hover,
body.interfaz-oculta #btn-limpio:focus-visible { opacity: 1; }

/* La puerta de vuelta de verdad. Ver el comentario del boton en index.html:
 * el de la barra no puede servir porque hereda la opacidad 0 de su padre.
 *
 * Discreto para no estorbar a la vista limpia —que es justo lo que se ha
 * pedido al pulsarlo— pero SIEMPRE visible: se ve sin buscarlo, y se enciende
 * del todo al acercar el raton. */
#btn-volver-interfaz {
  /* ⚠️ TIENE QUE VERSE. Antonio, 3-sep: *"¿ves el botón de ver paneles? yo no,
   * está muy apagado"*.
   *
   * Lo puse al 35% de opacidad para no estorbar a la vista limpia, y me pasé:
   * encima va sobre un cielo lleno de estrellas, que es un fondo con manchas
   * claras, así que un texto tenue se disuelve en él. Y este botón no es un
   * adorno — es la ÚNICA forma de recuperar la interfaz.
   *
   * Ahora se ve de entrada y sigue siendo discreto: fondo casi opaco para que
   * no dependa de lo que haya detrás, borde marcado y letra algo mayor. Al
   * acercar el ratón se enciende del todo. */
  position: fixed;
  top: 14px; right: 14px;
  z-index: 60;
  padding: 9px 14px;
  border: 1px solid var(--cian-medio);
  border-radius: 4px;
  background: rgba(6, 10, 18, .88);
  color: var(--cian-claro);
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.16em;
  cursor: pointer;
  opacity: 0.9;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  transition: opacity .25s ease, border-color .25s ease, background .25s ease;
}
#btn-volver-interfaz:hover,
#btn-volver-interfaz:focus-visible {
  opacity: 1;
  border-color: var(--cian-claro);
  background: rgba(10, 18, 30, .95);
}
@media (max-width: 820px) {
  /* En movil, mas grande: se pulsa con el dedo, no con el raton. */
  #btn-volver-interfaz { padding: 11px 16px; font-size: 10px; opacity: .5; }
}

/* =================================================================
   Tipografia del HUD
   ================================================================= */

.etiqueta {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--cian-medio);
  text-transform: uppercase;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Linea que se extiende a la derecha del titulo: detalle de HUD */
.etiqueta::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--cian-tenue), transparent);
}

.dato-grande {
  font-size: 17px;
  color: var(--tinta);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.dato-mono {
  font-size: 11px;
  color: var(--tinta-media);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Titulos con resplandor (pregunta 10) */
.titulo-brillo {
  color: var(--cian-claro);
  text-shadow:
    0 0 6px rgba(0, 229, 255, 0.75),
    0 0 20px rgba(0, 229, 255, 0.35);
  letter-spacing: 0.14em;
}

/* =================================================================
   Panel de tiempo (arriba izquierda)
   ================================================================= */


#reloj-fecha { font-size: 15px; letter-spacing: 0.06em; }
#reloj-hora  { font-size: 20px; color: var(--cian-claro); letter-spacing: 0.1em; margin-top: 2px; }

.fila-vel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--cian-fantasma);
}

.fila-vel span:first-child { font-size: 9px; letter-spacing: 0.16em; color: var(--cian-medio); }
#valor-velocidad { font-size: 12px; color: var(--tinta); }

.aviso-caja {
  margin-top: 9px;
  padding: 6px 8px;
  background: rgba(255, 92, 77, 0.1);
  border-left: 2px solid var(--alerta);
  color: var(--alerta);
  font-size: 10px;
  line-height: 1.4;
}

/* =================================================================
   Navegacion (derecha)
   ================================================================= */

/* La navegacion y la ficha comparten la columna derecha. Sin este tope, una
   ficha larga se comia la lista de destinos y no se podia pulsar el siguiente
   planeta: se detecto al intentar ir de la Tierra a Saturno y no responder. */
#panel-destinos {
  top: 22px; right: 22px;
  width: 196px;
  max-height: 44vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cian-tenue) transparent;
}

#panel-destinos::-webkit-scrollbar { width: 4px; }
#panel-destinos::-webkit-scrollbar-thumb { background: var(--cian-tenue); }

.grupo {
  font-size: 8.5px;
  letter-spacing: 0.2em;
  color: var(--cian-medio);
  margin: 13px 0 5px;
  padding-top: 8px;
  border-top: 1px solid var(--cian-fantasma);
}
.grupo:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.destino {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 5px 7px;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: var(--tinta-media);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.destino:hover, .destino:focus-visible {
  background: var(--cian-fantasma);
  color: var(--tinta);
  border-left-color: var(--cian-medio);
  outline: none;
}

.destino.activo {
  background: rgba(0, 229, 255, 0.14);
  color: var(--cian-claro);
  border-left-color: var(--cian);
}

.punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 7px currentColor;
}

/* =================================================================
   FICHA - los datos entran uno a uno (peticion central de Antonio)
   ================================================================= */

#panel-ficha {
  bottom: 22px; right: 22px;
  width: 312px;
  max-height: 50vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cian-tenue) transparent;
}

#panel-ficha::-webkit-scrollbar { width: 4px; }
#panel-ficha::-webkit-scrollbar-thumb { background: var(--cian-tenue); }

#ficha-nombre {
  margin: 3px 0 2px;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 0.16em;
}

#ficha-tipo { font-size: 9.5px; color: var(--cian-medio); letter-spacing: 0.16em; margin-bottom: 11px; }

.descripcion {
  margin: 0 0 13px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--tinta-media);
  padding-left: 9px;
  border-left: 1px solid var(--cian-tenue);
}

.datos { margin: 0; }

/* Cada fila arranca invisible y la anima el JS con su retraso.
   Es lo que produce el efecto de "entran uno a uno". */
.fila-dato {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 11px;
  padding: 5px 0;
  border-bottom: 1px solid var(--cian-fantasma);
  opacity: 0;
  transform: translateX(14px);
}

.fila-dato.dentro {
  animation: filaEntra 0.34s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes filaEntra {
  0%   { opacity: 0; transform: translateX(14px); }
  40%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}

/* Destello breve del valor justo cuando termina de contar */
.fila-dato .valor.recien {
  animation: destelloValor 0.5s ease-out;
}

@keyframes destelloValor {
  0%   { color: #fff; text-shadow: 0 0 12px var(--cian); }
  100% { color: var(--tinta); text-shadow: none; }
}

.fila-dato dt {
  font-size: 9.5px;
  letter-spacing: 0.11em;
  color: var(--cian-medio);
  flex-shrink: 0;
}

.fila-dato dd {
  margin: 0;
  font-size: 12.5px;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  text-align: right;
  letter-spacing: 0.02em;
}

.unidad { color: var(--tinta-tenue); font-size: 10px; margin-left: 3px; }

.marca-calc {
  font-size: 8px;
  color: var(--aviso);
  opacity: 0.8;
  margin-left: 4px;
  vertical-align: 0.25em;
  letter-spacing: 0.06em;
}

.nota-fuente {
  margin-top: 11px;
  padding-top: 8px;
  border-top: 1px solid var(--cian-fantasma);
  font-size: 9px;
  color: var(--tinta-tenue);
  line-height: 1.45;
}

.cerrar {
  position: absolute;
  top: 9px; right: 12px;
  background: none;
  border: none;
  color: var(--cian-medio);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 3px 5px;
  font-family: inherit;
}
.cerrar:hover, .cerrar:focus-visible { color: var(--cian-claro); outline: none; }

/* =================================================================
   Controles (abajo izquierda)
   ================================================================= */

#panel-controles { bottom: 22px; left: 22px; width: 306px; }

.rejilla-botones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 11px;
}

/* El boton de idioma es de una palabra corta: ocupa media columna y deja que
   los demas respiren. */
.rejilla-botones #btn-idioma { grid-column: span 1; }

/* ---- REAL TIME: destacado sobre los demas (Antonio, 30-ago) ----
   Es el boton que explica el comportamiento raro de la web (que a ritmo real
   los planetas parezcan quietos), asi que tiene que verse a la primera. Se
   distingue por color propio ambar, ancho doble y un latido lento. */
.rejilla-botones #btn-real {
  grid-column: span 2;
  background: rgba(255, 179, 64, 0.14);
  border-color: rgba(255, 179, 64, 0.55);
  color: var(--aviso);
  font-weight: 500;
  letter-spacing: 0.14em;
  box-shadow: inset 0 0 14px rgba(255, 179, 64, 0.14),
              0 0 10px rgba(255, 179, 64, 0.16);
  animation: latidoReal 3.4s ease-in-out infinite;
}

.rejilla-botones #btn-real:hover,
.rejilla-botones #btn-real:focus-visible {
  background: rgba(255, 179, 64, 0.26);
  border-color: var(--aviso);
  color: #ffdca8;
  animation: none;
}

/* Cuando esta pulsado (simulacion a ritmo real) se queda encendido y quieto:
   el latido solo invita a probarlo, no acompaña al estado activo. */
.rejilla-botones #btn-real.activo {
  background: rgba(255, 179, 64, 0.32);
  border-color: var(--aviso);
  color: #12100a;
  animation: none;
  box-shadow: 0 0 16px rgba(255, 179, 64, 0.45);
}

@keyframes latidoReal {
  0%, 100% { box-shadow: inset 0 0 14px rgba(255, 179, 64, 0.14),
                         0 0 10px rgba(255, 179, 64, 0.16); }
  50%      { box-shadow: inset 0 0 18px rgba(255, 179, 64, 0.26),
                         0 0 18px rgba(255, 179, 64, 0.34); }
}

@media (prefers-reduced-motion: reduce) {
  .rejilla-botones #btn-real { animation: none; }
}

.btn {
  padding: 7px 3px;
  background: rgba(0, 229, 255, 0.06);
  border: 1px solid var(--cian-tenue);
  color: var(--tinta-media);
  font-family: inherit;
  font-size: 9.5px;
  letter-spacing: 0.11em;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.btn:hover, .btn:focus-visible {
  background: rgba(0, 229, 255, 0.15);
  color: var(--cian-claro);
  border-color: var(--cian-medio);
  outline: none;
}

.btn.activo {
  background: rgba(0, 229, 255, 0.2);
  color: var(--cian-claro);
  border-color: var(--cian);
  box-shadow: inset 0 0 12px rgba(0, 229, 255, 0.18);
}

/* --- Linea de tiempo arrastrable (pregunta 77) --- */
.bloque-control { margin-bottom: 11px; }

.cabecera-control {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--cian-medio);
}

.cabecera-control b { color: var(--tinta); font-weight: 400; font-size: 10.5px; }

input[type="range"] {
  width: 100%;
  height: 2px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--cian-tenue);
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 3px;
  height: 15px;
  background: var(--cian);
  cursor: pointer;
  box-shadow: 0 0 9px var(--cian);
  border: none;
  border-radius: 0;
}

input[type="range"]::-moz-range-thumb {
  width: 3px;
  height: 15px;
  background: var(--cian);
  cursor: pointer;
  box-shadow: 0 0 9px var(--cian);
  border: none;
  border-radius: 0;
}

input[type="range"]:focus-visible { box-shadow: 0 0 0 2px var(--cian-tenue); }

.marcas-tiempo {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  /* 8 px eran los extremos del deslizador de tiempo, que es donde se lee
     cuanto corre la simulacion. Subido a 9 en la auditoria del 1-sep. */
  font-size: 9px;
  color: var(--tinta-tenue);
  letter-spacing: 0.08em;
}

.fila-fecha { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.fila-fecha label { font-size: 9px; letter-spacing: 0.14em; color: var(--cian-medio); flex-shrink: 0; }

input[type="date"] {
  flex: 1;
  background: rgba(0, 229, 255, 0.06);
  border: 1px solid var(--cian-tenue);
  color: var(--tinta);
  font-family: inherit;
  font-size: 10.5px;
  padding: 4px 6px;
  color-scheme: dark;
}
input[type="date"]:focus-visible { outline: none; border-color: var(--cian); }

.rejilla-interruptores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 9px;
}

.interruptor {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  letter-spacing: 0.09em;
  color: var(--tinta-media);
  cursor: pointer;
  user-select: none;
}
.interruptor:hover { color: var(--tinta); }
.interruptor input { accent-color: var(--cian); cursor: pointer; margin: 0; width: 11px; height: 11px; }

.aviso-escala {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--cian-fantasma);
  font-size: 9.5px;
  line-height: 1.45;
  color: var(--tinta-tenue);
}
.aviso-escala b { color: var(--aviso); font-weight: 400; }
.aviso-escala.real { color: var(--aviso); }

/* =================================================================
   Etiquetas y anillos sobre los cuerpos
   ================================================================= */

#capa-etiquetas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
  transition: opacity 0.3s;
}

/* Anillo con datos girando alrededor del cuerpo señalado (pregunta 6) */
.marcador {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: transform;
}

.marcador .aro {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--cian-medio);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.25);
}

.marcador .aro::before,
.marcador .aro::after {
  content: "";
  position: absolute;
  background: var(--cian);
  box-shadow: 0 0 6px var(--cian);
}
.marcador .aro::before { top: -3px; left: 50%; width: 1px; height: 7px; transform: translateX(-50%); }
.marcador .aro::after  { bottom: -3px; left: 50%; width: 1px; height: 7px; transform: translateX(-50%); }

.marcador .aro-gira { animation: giraAro 14s linear infinite; }
@keyframes giraAro { to { transform: translate(-50%, -50%) rotate(360deg); } }

.marcador .rotulo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--cian-claro);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 229, 255, 0.5);
}

.marcador .subrotulo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: var(--tinta-tenue);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.95);
}

/* Linea que conecta el cuerpo con su ficha (pregunta 11) */
#conector { position: fixed; inset: 0; pointer-events: none; z-index: 5; }

/* =================================================================
   Pista de controles
   ================================================================= */

/* La pista se solapaba con el panel de controles, que ha crecido al añadirle
   botones y el volumen. Se mueve ARRIBA del todo: ahi no hay nada que tapar y
   se lee igual de bien. */
#pista {
  position: fixed;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--cian-medio);
  background: var(--vidrio);
  border: 1px solid var(--cian-tenue);
  padding: 7px 20px;
  white-space: nowrap;
  transition: opacity 0.8s;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}

/* =================================================================
   ARRANQUE - "como un sistema encendiendose" (pregunta 16)
   ================================================================= */

#arranque {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1s;
}

#arranque.fuera { opacity: 0; pointer-events: none; }

.arranque-caja { width: min(430px, 84vw); }

.arranque-marca {
  /* "SOLAR SYSTEM LIVE" es mas largo que el nombre anterior: se reduce el
     espaciado entre letras para que siga cabiendo en una linea en movil. */
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.38em;
  color: var(--cian);
  text-shadow: 0 0 14px rgba(0, 229, 255, 0.65);
  margin-bottom: 30px;
  text-indent: 0.38em;
  text-align: center;
}

.arranque-lineas { min-height: 132px; margin-bottom: 20px; }

.arranque-linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--tinta-tenue);
  padding: 3px 0;
  opacity: 0;
}

.arranque-linea.visible { animation: lineaArranque 0.3s ease-out forwards; }

@keyframes lineaArranque {
  from { opacity: 0; transform: translateX(-9px); }
  to   { opacity: 1; transform: none; }
}

.arranque-linea .estado { color: var(--ok); font-size: 9px; letter-spacing: 0.16em; }

.arranque-barra { height: 1px; background: var(--cian-tenue); overflow: hidden; }
.arranque-progreso { height: 100%; width: 0%; background: var(--cian); box-shadow: 0 0 10px var(--cian); transition: width 0.35s; }

.arranque-pie {
  margin-top: 22px;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--tinta-tenue);
  text-align: center;
  line-height: 1.7;
}

/* =================================================================
   Error
   ================================================================= */

#aviso-error {
  position: fixed;
  top: 22px; left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  max-width: 540px;
  background: rgba(30, 4, 4, 0.96);
  border: 1px solid var(--alerta);
  padding: 13px 17px;
  color: #ffd9d4;
  font-size: 11.5px;
  line-height: 1.55;
}

/* =================================================================
   Utilidades
   ================================================================= */

.oculto { display: none !important; }

/* Vibracion de la interfaz al acelerar mucho el tiempo (pregunta 14) */
body.temblor .panel { animation: temblar 0.09s linear infinite; }

@keyframes temblar {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(0.6px, -0.4px); }
  50%  { transform: translate(-0.5px, 0.5px); }
  75%  { transform: translate(0.4px, 0.6px); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #grano { animation: none; }
  body.temblor .panel { animation: none; }
  .marcador .aro-gira { animation: none; }
}

/* =================================================================
   Movil
   ================================================================= */




/* =================================================================
   Fuente de las imagenes de superficie.
   Aparece solo al acercarse a Tierra, Marte o Luna, y dice de que
   mision salen las imagenes que estas viendo y a que resolucion.
   ================================================================= */

#aviso-superficie {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  background: var(--vidrio);
  border: 1px solid var(--cian-tenue);
  padding: 6px 16px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.11em;
  color: var(--tinta-tenue);
  white-space: nowrap;
  pointer-events: none;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

#aviso-superficie b { color: var(--cian-medio); font-weight: 400; }

body.interfaz-oculta #aviso-superficie { opacity: 0; }

@media (max-width: 820px) {
  #aviso-superficie { display: none; }
}

/* Aviso de giro ralentizado: es informativo, no una alarma, asi que va en
   ambar (aviso) y no en rojo (error). */
.aviso-caja.suave {
  background: rgba(255, 179, 64, 0.09);
  border-left-color: var(--aviso);
  color: var(--aviso);
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

/* ==========================================================================
 * VISITA GUIADA
 *
 * El cartel va abajo y CENTRADO, a proposito: el panel de control ocupa la
 * esquina inferior izquierda y la ficha del cuerpo la derecha, y con la visita
 * en marcha los tres estan abiertos a la vez. Cualquier otra posicion los
 * solaparia.
 * ========================================================================== */

.btn-tour {
  /* Ocupaba la fila entera cuando se llamaba "GUIDED TOUR" y no cabia al lado
     de nada. Con la etiqueta corta cabe en su columna como los demas, y la
     fila de VISTA queda en una sola linea. */
  grid-column: auto;
  border-color: var(--cian-medio) !important;
  color: var(--cian-claro) !important;
  letter-spacing: 0.18em;
}
.btn-tour:hover { background: rgba(0, 229, 255, 0.14) !important; }
.btn-tour.activo {
  background: rgba(0, 229, 255, 0.18) !important;
  border-color: var(--cian) !important;
}

#cartel-tour {
  position: fixed;
  left: 50%; bottom: 3vh;
  transform: translateX(-50%);
  width: min(46rem, 88vw);
  padding: 1rem 1.2rem 1.1rem;
  background: rgba(2, 10, 20, 0.90);
  border: 1px solid var(--cian-tenue);
  border-radius: 3px;
  backdrop-filter: blur(9px);
  z-index: 40;
}
#cartel-tour.oculto { display: none; }

.tour-cabecera {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.55rem;
}
#tour-paso {
  font-size: 0.6rem; letter-spacing: 0.22em;
  color: var(--tinta-tenue);
  font-variant-numeric: tabular-nums;
}
.tour-botones { display: flex; gap: 0.3rem; }
.tour-btn {
  background: transparent; border: 1px solid var(--cian-tenue);
  color: var(--cian-claro); cursor: pointer;
  width: 1.8rem; height: 1.55rem; line-height: 1;
  font-size: 0.62rem; border-radius: 2px;
  transition: background 0.15s;
}
.tour-btn:hover { background: rgba(0, 229, 255, 0.16); }
.tour-btn:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }

#tour-titulo {
  margin: 0 0 0.42rem;
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  letter-spacing: 0.1em;
  color: var(--cian-claro);
  font-weight: 400;
  text-wrap: balance;
}
#tour-texto {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.75;
  color: var(--tinta);
  /* ~65 caracteres por linea es lo que mejor se lee de un tiron; mas ancho y
     el ojo pierde el renglon al volver a la izquierda. */
  max-width: 62ch;
}
#tour-fuente {
  margin-top: 0.5rem;
  font-size: 0.55rem; letter-spacing: 0.08em;
  color: var(--tinta-tenue);
}
#tour-fuente:empty { display: none; }

.tour-barra {
  margin-top: 0.7rem; height: 1px;
  background: rgba(0, 229, 255, 0.14);
}
#tour-avance {
  height: 100%; width: 0%;
  background: var(--cian);
}

@media (max-width: 760px) {
  #cartel-tour { width: 94vw; bottom: 1.2vh; padding: 0.8rem 0.9rem; }
  #tour-texto { font-size: 0.7rem; line-height: 1.65; }
}

/* Quien haya pedido menos animacion no recibe la barra corriendo sola. */
@media (prefers-reduced-motion: reduce) {
  #tour-avance { transition: none !important; }
}

/* Nota del mirador en el modo cielo: donde estas y por que ese sitio. */
.nota-cielo {
  margin: 0.55rem 0 0;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--tinta-tenue);
}
.nota-cielo b { color: var(--cian-claro); font-weight: 600; }

/* =================================================================
   BARRA SUPERIOR

   ⚠️ Antonio, 31-ago: "quiero que se vea como una web de verdad; la parte de
   arriba esta desaprovechada y los menus empiezan a ser demasiado grandes".

   Las dos quejas eran el mismo problema. Cada cosa nueva se iba amontonando en
   el panel de abajo a la izquierda —nueve botones, cuatro bloques de control,
   seis casillas— mientras la franja de arriba, que ocupa el ancho ENTERO de la
   pantalla, solo llevaba una linea de ayuda.

   Esta barra se lleva lo que cualquier web pone arriba: la marca, la hora y
   las acciones de uso constante. El panel de la izquierda se queda solo con lo
   que de verdad es un ajuste.
   ================================================================= */
.barra {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 12;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 18px;
  background: linear-gradient(180deg,
    rgba(2, 12, 22, 0.94) 0%,
    rgba(2, 12, 22, 0.80) 72%,
    rgba(2, 12, 22, 0) 100%);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  /* Una sola linea de acento abajo: es lo que separa "barra" de "caja". */
  box-shadow: inset 0 -1px 0 var(--cian-tenue);
  transition: opacity 0.5s, transform 0.5s;
}
.barra.oculto { opacity: 0; transform: translateY(-100%); pointer-events: none; }

/* --- La marca --- */
.barra-marca { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.marca-punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cian);
  box-shadow: 0 0 10px var(--cian), 0 0 22px rgba(0, 229, 255, 0.5);
  /* Late despacio: la señal de que el sistema esta vivo. */
  animation: latido 3.4s ease-in-out infinite;
}
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.marca-texto {
  font-size: 11px; letter-spacing: 0.28em;
  color: var(--tinta-media); white-space: nowrap;
}
.marca-texto b { color: var(--cian-claro); font-weight: 600; margin-left: 0.45em; }

/* --- El reloj, en linea --- */
.barra-reloj {
  display: flex; align-items: baseline; gap: 14px;
  flex: 1 1 auto; min-width: 0;
  /* ⚠️ RED DE SEGURIDAD CONTRA EL SOLAPE.
   *
   * Todo lo de dentro lleva `white-space: nowrap` —el reloj no puede partirse
   * en dos lineas— pero el contenedor si puede encogerse (`min-width: 0`). El
   * resultado era que a anchos medios el texto SE SALIA por la derecha y se
   * pintaba ENCIMA de los botones PAUSA y AHORA: se leia "REALTIME NOW"
   * superpuesto a "TIME RATE". Visto a 1200 px en el recorrido del 3-sep.
   *
   * Con esto, si algun dia vuelve a no caber, se recorta limpio por su lado en
   * vez de invadir al vecino. Y para que no llegue a recortarse, la regla de
   * abajo esconde antes la parte prescindible. */
  overflow: hidden;
}

.reloj-fecha {
  font-size: 12px; letter-spacing: 0.1em; color: var(--tinta-media);
  white-space: nowrap;
}
.reloj-hora {
  font-size: 20px; letter-spacing: 0.09em; color: var(--cian-claro);
  /* Cifras de ancho fijo: sin esto el reloj BAILA cada segundo, porque el 1
     es mas estrecho que el 8 y toda la linea se recoloca. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.reloj-vel {
  display: flex; align-items: baseline; gap: 7px;
  padding-left: 14px; border-left: 1px solid var(--cian-fantasma);
  white-space: nowrap;
}
.reloj-vel i { font-style: normal; font-size: 9px; letter-spacing: 0.16em; color: var(--tinta-tenue); }
.reloj-vel b { font-size: 12px; color: var(--tinta); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Por debajo de 1400 px no caben el reloj entero y los siete botones. Lo
 * primero que sobra es la etiqueta de la velocidad, porque ese mismo dato se
 * ve —mas grande y con su deslizador— en el panel de ajustes. El reloj y la
 * fecha se quedan: eso no esta en ningun otro sitio.
 *
 * ⚠️ VA DESPUES DE `.reloj-vel`, Y ESO NO ES UN DETALLE. Se puso antes y no
 * hacia nada: a igual especificidad gana la ultima regla del fichero, asi que
 * el `display: flex` de arriba anulaba este `display: none` aunque estuviera
 * dentro de una media query. Medido a 1200 px: la etiqueta seguia saliendo,
 * cortada. Es la cuarta vez que esta cascada muerde en este proyecto. */
@media (max-width: 1400px) {
  .reloj-vel { display: none; }
}

/* Y un escalon mas: por debajo de 1150 px tampoco cabe el rotulo "TU RELOJ".
 * Se quita la etiqueta, no el reloj — sobran 90 px y la hora deja de salir
 * cortada ("01:19:"), que es como se veia a 1100 px. */
@media (max-width: 1150px) {
  .reloj-que { display: none; }
}

/* --- Las acciones --- */
.barra-acciones { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.barra-acciones .btn { margin: 0; padding: 7px 11px; font-size: 9.5px; }
.barra-sep { width: 1px; height: 20px; background: var(--cian-fantasma); margin: 0 5px; }

/* --- Avisos, bajo la barra --- */
#avisos {
  position: fixed; top: 62px; left: 18px;
  z-index: 11; max-width: 380px;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}

/* =================================================================
   PANEL COMPACTO

   Los controles pasan de ser una lista larga a GRUPOS con titulo. Antes eran
   nueve botones seguidos de cuatro bloques sin separacion: una lista plana en
   la que costaba encontrar nada porque nada indicaba de que iba cada cosa.
   ================================================================= */
#panel-controles.compacto {
  bottom: 18px; left: 18px; width: 268px;
  padding: 11px 13px 12px;
}

.grupo { padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--cian-fantasma); }
.grupo:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.grupo.sin-linea { border-top: 0; padding-top: 4px; }

.grupo-tit {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 8.5px; letter-spacing: 0.2em;
  color: var(--tinta-tenue);
  margin-bottom: 7px;
}
.grupo-tit b {
  font-size: 11px; letter-spacing: 0.06em; color: var(--cian-claro);
  font-weight: 500; font-variant-numeric: tabular-nums;
}

#panel-controles.compacto .rejilla-botones { margin-bottom: 0; gap: 4px; }
#panel-controles.compacto .btn { padding: 7px 4px; font-size: 9px; }
#panel-controles.compacto .btn.ancho { width: 100%; margin-top: 5px; }
#panel-controles.compacto .marcas-tiempo { margin-top: 4px; }
#panel-controles.compacto .fila-fecha { margin-top: 9px; }

/* Las casillas, en dos columnas y mas juntas: son seis y ocupaban media
   pantalla puestas en fila. */
#panel-controles.compacto .rejilla-interruptores {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px;
}
#panel-controles.compacto .interruptor { font-size: 10px; letter-spacing: 0.06em; }
.nota-escala {
  margin: 9px 0 0; font-size: 10px; line-height: 1.55;
  color: var(--tinta-tenue);
}

/* =================================================================
   PANEL DE FUENTES

   ⚠️ No es decoracion: tres de las licencias de este proyecto (CC BY 4.0)
   EXIGEN atribucion para poder usar el material. Hasta hoy las fuentes solo
   estaban en ficheros .md del repositorio, que nadie que use la web ve.
   ================================================================= */
#panel-fuentes {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 40px));
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  z-index: 30;
  padding: 20px 22px 18px;
}
#panel-fuentes.oculto { display: none; }

.fuentes-lista { margin-top: 12px; }
.fuente {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 14px;
  padding: 9px 0;
  border-top: 1px solid var(--cian-fantasma);
}
.fuente:first-child { border-top: 0; }
.fuente b {
  grid-column: 1; font-size: 11.5px; color: var(--cian-claro);
  letter-spacing: 0.06em; font-weight: 600;
}
.fuente i {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: center;
  font-style: normal; font-size: 8.5px; letter-spacing: 0.1em;
  color: var(--tinta-tenue); white-space: nowrap;
}
.fuente span {
  grid-column: 1; font-size: 10px; line-height: 1.5;
  color: var(--tinta-media);
}
.fuentes-nota {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--cian-fantasma);
  font-size: 9.5px; line-height: 1.6; color: var(--tinta-tenue);
}
.fuentes-nota b { color: var(--cian-claro); font-weight: 600; }

/* Nombre del reloj de la barra.
   Sin el, su fecha y la del campo de abajo se leen como una contradiccion
   cuando en realidad miden cosas distintas: aqui TU hora, alli la fecha que
   estan viviendo los planetas. */
.reloj-que {
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--tinta-tenue);
  margin-right: 8px;
  white-space: nowrap;
}

/* El enlace a la presentacion. Es un <a>, no un <button>, para que se pueda
   abrir en otra pestaña y para que un buscador lo siga. Se le da el mismo
   aspecto que a los botones y un toque de color: es la unica cosa de la barra
   que lleva a otro sitio. */
#btn-toma {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  border-color: var(--cian-medio);
  color: var(--cian-claro);
}
#btn-toma:hover { background: var(--cian-fantasma); }

/* =================================================================
   DESDE DONDE SE MIRA EL CIELO

   La latitud es lo que de verdad cambia lo que ves: desde Madrid no se ve la
   Cruz del Sur y desde Sídney no se ve la Osa Mayor. Por eso el selector va
   pegado a los botones de mundo y no escondido en un menú.
   ================================================================= */
#bloque-lugar { margin: 8px 0 4px; }
#bloque-lugar.oculto { display: none; }

#lugar-lista {
  width: 100%;
  background: var(--vidrio);
  border: 1px solid var(--cian-tenue);
  color: var(--tinta-media);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 6px 7px;
  outline: none;
}
#lugar-lista:focus-visible { border-color: var(--cian); }

.fila-lugar {
  display: grid;
  grid-template-columns: 1fr 52px 52px 34px;
  gap: 4px;
  margin-top: 5px;
}
.fila-lugar .btn { font-size: 8.5px; padding: 5px 4px; }
.fila-lugar input {
  background: var(--vidrio);
  border: 1px solid var(--cian-fantasma);
  color: var(--tinta-media);
  font-family: var(--mono);
  font-size: 9.5px;
  padding: 4px 5px;
  text-align: center;
  outline: none;
  /* Sin las flechitas: ocupan sitio y aquí no hacen falta. */
  -moz-appearance: textfield;
}
.fila-lugar input::-webkit-outer-spin-button,
.fila-lugar input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fila-lugar input:focus-visible { border-color: var(--cian-medio); }

/* =================================================================
   DESDE DONDE SE MIRA EL CIELO

   La latitud es lo que de verdad cambia lo que ves: desde Madrid no se ve la
   Cruz del Sur y desde Sídney no se ve la Osa Mayor. Por eso el selector va
   pegado a los botones de mundo y no escondido en un menú.
   ================================================================= */
#bloque-lugar { margin: 8px 0 4px; }
#bloque-lugar.oculto { display: none; }

#lugar-lista {
  width: 100%;
  background: var(--vidrio);
  border: 1px solid var(--cian-tenue);
  color: var(--tinta-media);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 6px 7px;
  outline: none;
}
#lugar-lista:focus-visible { border-color: var(--cian); }

.fila-lugar {
  display: grid;
  grid-template-columns: 1fr 52px 52px 34px;
  gap: 4px;
  margin-top: 5px;
}
.fila-lugar .btn { font-size: 8.5px; padding: 5px 4px; }
.fila-lugar input {
  background: var(--vidrio);
  border: 1px solid var(--cian-fantasma);
  color: var(--tinta-media);
  font-family: var(--mono);
  font-size: 9.5px;
  padding: 4px 5px;
  text-align: center;
  outline: none;
  /* Sin las flechitas: ocupan sitio y aquí no hacen falta. */
  -moz-appearance: textfield;
}
.fila-lugar input::-webkit-outer-spin-button,
.fila-lugar input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fila-lugar input:focus-visible { border-color: var(--cian-medio); }

/* =================================================================
   QUE CONSTELACIONES SE VEN DESDE AQUI

   Depende SOLO de la latitud, y es de lo mejor que puede enseñar esta vista:
   desde Madrid hay nueve constelaciones que no se ven jamas, por mucho que se
   espere. Va pegado al selector de sitio porque es su consecuencia directa.
   ================================================================= */
#visibles { margin-top: 8px; }
#visibles.oculto { display: none; }

.visibles-cab {
  width: 100%;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--cian-fantasma);
  color: var(--tinta-tenue);
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 8px 0 6px;
  cursor: pointer;
}
.visibles-cab:hover { color: var(--tinta-media); }
.visibles-cab b { color: var(--cian-claro); font-weight: 600; }

.visibles-lista {
  font-size: 9px;
  line-height: 1.65;
  color: var(--tinta-tenue);
  padding-bottom: 4px;
  max-height: 30vh;
  overflow-y: auto;
}
.visibles-lista.oculto { display: none; }
.visibles-lista h4 {
  margin: 6px 0 2px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--cian-medio);
}
.visibles-lista p { margin: 0; }

/* =================================================================
   QUE CIELO TIENES ENCIMA

   Antonio, 1-sep: "pon información de eso en la web cuando miren los cielos".
   Va justo debajo del sitio elegido, porque es su consecuencia directa: cambias
   de sitio y cambian estos números delante de ti.
   ================================================================= */
#informe-cielo {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--cian-fantasma);
  font-size: 9.5px;
  line-height: 1.7;
  color: var(--tinta-tenue);
}
#informe-cielo.oculto { display: none; }

.cielo-calidad {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
}
.cielo-calidad b {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--cian-claro);
  font-weight: 600;
}
.cielo-calidad i {
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: var(--tinta-tenue);
}

/* La barra: cuanto cielo se ve aqui, de 0 a lo mejor que hay en la Tierra.
   Un numero se lee; una barra se COMPARA de un vistazo. */
.cielo-barra {
  height: 3px;
  background: rgba(255,255,255,0.08);
  margin: 5px 0 7px;
  overflow: hidden;
}
.cielo-barra i {
  display: block;
  height: 100%;
  background: var(--cian);
  box-shadow: 0 0 8px var(--cian);
  transition: width 0.6s ease;
}

#informe-cielo .dato { color: var(--tinta-media); }
#informe-cielo .dato b { color: var(--cian-claro); font-weight: 600; }
#informe-cielo .compara {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--cian-fantasma);
  font-size: 9px;
  color: var(--tinta-tenue);
}
#informe-cielo .compara b { color: var(--tinta-media); font-weight: 600; }

/* Los dos botones que abren los paneles solo existen en movil: en escritorio
   los paneles ya estan siempre a la vista y un boton para abrirlos sobra.
   ⚠️ Esta regla va ANTES de la media query a proposito. Puesta despues gana
   ella (misma especificidad, mas abajo en el archivo) y los botones no
   aparecen nunca. Paso, y lo pillo la prueba al no poder pulsarlos. */
.solo-movil { display: none; }

/* =================================================================
   MOVIL
   =================================================================

   ⚠️ Este bloque se rehizo entero el 1-sep. El anterior colocaba
   `#panel-tiempo`, que dejo de existir cuando se puso la barra superior: la
   barra nueva se quedo sin ninguna regla para pantallas pequeñas y en un
   telefono de 390 px se solapaba consigo misma, mientras el panel de
   controles ocupaba 804 px de 844 de alto. El sistema solar no se veia.

   La idea es la contraria a la de escritorio: en un telefono NO caben dos
   paneles y la escena a la vez, asi que no se intenta. La pantalla es para el
   sistema solar; los paneles se abren cuando se piden, uno cada vez.
   ================================================================= */
@media (max-width: 820px) {
  :root { --corte: 10px; }
  body { font-size: 12px; }

  /* --- La barra: en dos filas, no apretada en una --- */
  #barra-superior {
    flex-wrap: wrap;
    height: auto;
    padding: 7px 10px 8px;
    gap: 5px 10px;
    row-gap: 6px;
  }
  .barra-marca { font-size: 11px; letter-spacing: 0.14em; }
  /* El reloj baja a su propia fila y ocupa el ancho: es lo que mas texto
     lleva, y arriba peleaba con la marca y con los botones. */
  .barra-reloj {
    order: 3; width: 100%;
    justify-content: flex-start;
    gap: 8px; font-size: 11px;
  }
  /* ⚠️ La fila de botones TIENE que poder partirse. Sin `flex-wrap` se salia
     por la derecha y el ultimo boton (el del idioma) quedaba cortado a la
     mitad — visto en la captura de un movil de 390 px, no deducido. */
  .barra-acciones {
    margin-left: 0; gap: 4px;
    flex-wrap: wrap;
    order: 2; width: 100%;
  }
  .barra-acciones .btn { font-size: 8.5px; padding: 5px 7px; }
  .barra-sep { display: none; }
  /* Estos tres caben en el panel: arriba solo lo que se usa a cada rato. */
  #btn-ahora, #btn-real, #btn-sonido { display: none; }
  /* La velocidad tambien esta en el panel de ajustes, con su deslizador al
     lado. Repetirla aqui obligaba a la fila del reloj a salirse. */
  .reloj-vel { display: none; }

  /* --- Los paneles: hojas que suben desde abajo --- */
  #panel-controles, #panel-controles.compacto, #panel-destinos {
    top: auto; bottom: 0; left: 0; right: 0;
    width: auto; margin: 0;
    max-height: 52vh;
    overflow-y: auto;
    border-radius: 0;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  }
  #panel-ficha {
    top: auto; bottom: 0; right: 0; left: 0;
    width: auto; max-height: 58vh;
  }
  #panel-fuentes { max-height: 74vh; }

  /* --- Los avisos, debajo de la barra y sin tapar la escena --- */
  #avisos {
    top: auto; left: 8px; right: 8px;
    max-width: none;
  }
  .aviso-caja { font-size: 9.5px; white-space: normal; }

  /* La pista habla de raton y de rueda: en un movil no aplica ni una palabra
     de ella, asi que estorbaria en vez de ayudar. */
  #pista { display: none; }

  #reticula { background-size: 40px 40px; }
  .solo-movil { display: inline-flex; }
}


/* ============ CREDITOS DE LAS FOTOS DE GALAXIAS ============
 *
 * Se abre al encender las galaxias. No es un extra: la licencia de ESA/Hubble,
 * ESO y NOIRLab permite usar las fotos gratis —incluso para vender— A CAMBIO
 * de que el credito se vea junto a la imagen. Esconderlo seria incumplirla.
 *
 * Va abajo a la izquierda y con scroll propio: son once creditos, algunos de
 * cuatro lineas, y no pueden empujar el resto de la interfaz. */
#creditos-galaxias {
  /* ⚠️ ABAJO A LA DERECHA, NO A LA IZQUIERDA.
   *
   * El primer sitio fue abajo a la izquierda y TAPABA los interruptores
   * (`#panel-controles` vive en `bottom: 22px; left: 22px`). Lo encontro la
   * prueba automatica al intentar marcar la casilla de las constelaciones:
   * "el panel de creditos intercepta el clic". A una persona le habria pasado
   * exactamente lo mismo, solo que sin decirlo.
   *
   * La derecha tampoco valia: ahi esta `#panel-ficha` (abajo) y
   * `#panel-destinos` (arriba). Las dos esquinas de abajo estan ocupadas, asi
   * que va CENTRADO abajo, que es el unico hueco libre de la interfaz. */
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  z-index: 40;
  width: min(560px, calc(100vw - 700px));
  min-width: 320px;
  /* ⚠️ Bajado de 46vh a 30vh despues de MIRAR una captura: ocupaba media
   * pantalla de cielo. El credito tiene que verse —lo exige la licencia— pero
   * verse no es taparlo todo: con esta altura entran tres creditos y el resto
   * se lee bajando, sin comerse la vista. */
  max-height: 30vh;
  overflow-y: auto;
  padding: .7rem .9rem .8rem;
  border-radius: 10px;
  background: rgba(8, 11, 22, .88);
  border: 1px solid rgba(120, 150, 210, .28);
  backdrop-filter: blur(6px);
  font-size: .68rem;
  line-height: 1.4;
  color: #b9c2da;
}
#creditos-galaxias h4 {
  margin: 0 0 .25rem;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #dfe6f8;
}
#creditos-galaxias p { margin: 0 0 .5rem; color: #8f9ab6; }
#creditos-galaxias ul { margin: 0; padding: 0; list-style: none; }
#creditos-galaxias li { margin: 0 0 .4rem; }
#creditos-galaxias b { color: #dfe6f8; font-weight: 600; }
#creditos-galaxias a { color: #9ab6e8; }
#cerrar-creditos {
  position: absolute; top: 4px; right: 6px;
  background: none; border: 0; cursor: pointer;
  color: #7d88a4; font-size: 1.1rem; line-height: 1;
}
#cerrar-creditos:hover { color: #dfe6f8; }
@media (max-width: 820px) {
  /* En movil la interfaz ya va justa: los creditos se quedan pero mas
   * pequenos y mas bajos, sin tapar los botones de abajo. */
  #creditos-galaxias {
    width: 92vw; min-width: 0; max-height: 26vh; bottom: 96px; font-size: .68rem;
  }
}


/* Con la vista limpia (el boton SOLO ESPACIO / tecla H) tambien se van los
 * creditos: si no hay interfaz, tampoco hay galaxias que acreditar en pantalla
 * — es el mismo cielo desnudo que pidio Antonio el 1-sep. */
body.interfaz-oculta #creditos-galaxias { display: none !important; }


/* El credito de la foto del suelo, bajo la nota del mirador. Pequeno pero
 * legible: la licencia de ESO pide que se vea, no que se esconda. */
.credito-suelo {
  display: block;
  margin-top: .35rem;
  font-size: .64rem;
  line-height: 1.35;
  color: #7f8aa6;
}


/* Aviso de hemisferio sin cartografiar, en la ficha del cuerpo.
 * En ambar apagado: es una advertencia sobre lo que se ve, no un dato mas. */
#aviso-sin-mapa {
  margin: .5rem 0 0;
  padding: .4rem .55rem;
  border-left: 2px solid rgba(224, 178, 92, .55);
  background: rgba(224, 178, 92, .07);
  font-size: .68rem;
  line-height: 1.45;
  color: #c6b490;
}

/* =================================================================
   EQUIPO Y BLOG — las dos secciones que se abren a propósito
   =================================================================

   Antonio, 3-sep: "botón para blog y botón para amazon, pero ponlo equipo y
   accesorios o algo así, y dentro del blog y de amazon los anuncios".

   ⚠️ Se abren ENCIMA de la vista 3D, y solo al pulsar su botón. Nunca
   comparten pantalla con el cielo: la web funciona porque se abre y enseña el
   sistema solar limpio, y meter una columna de productos al lado se lleva por
   delante justo eso. Cerradas no ocupan nada.
   ================================================================= */

.hoja-seccion {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: rgba(6, 9, 16, .93);
  backdrop-filter: blur(10px);
  animation: hoja-entra .22s ease-out;
}
.hoja-seccion.oculto { display: none; }

@keyframes hoja-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hoja-seccion { animation: none; }
}

.hoja-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 14px 20px;
  border-bottom: 1px solid var(--cian-fantasma);
  flex: 0 0 auto;
}
.hoja-barra h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cian-claro);
}
.hoja-barra .btn { font-size: 15px; line-height: 1; padding: 5px 11px; }

/* Scroll propio: la lista puede ser larga y el fondo no debe moverse. */
.hoja-cuerpo {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 22px 20px 60px;
}
/* ⚠️ La columna de lectura la marca el CONTENEDOR, no cada hijo.
 *
 * Estaba puesto como `.hoja-cuerpo > * { max-width: 760px; margin: auto }`, y
 * eso centra cada bloque por separado dentro de la pantalla entera: el texto
 * de "todavia no hay nada" (que es mas estrecho) salia flotando en mitad de
 * la pantalla, lejos del titulo de la izquierda. Con la columna en el
 * contenedor, todo lo de dentro empieza en el mismo margen. */
.hoja-interior { max-width: 760px; margin: 0 auto; }

/* El texto de "todavía no hay nada". Dice qué irá ahí en vez de dejar un
   hueco mudo, que se lee como una web rota. */
.hoja-vacia {
  color: var(--tinta-media);
  font-size: 12.5px;
  line-height: 1.7;
  max-width: 56ch;
  border-left: 2px solid var(--cian-fantasma);
  padding-left: 14px;
}

/* --- El blog --- */
.blog-cabecera h2 {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-tenue); font-weight: 500; margin: 0 0 4px;
}
.blog-lista { display: flex; flex-direction: column; gap: 34px; }
.blog-articulo { display: flex; flex-direction: column; gap: 9px; }
.blog-fecha {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-tenue);
}
.blog-articulo h3 {
  margin: 0; font-size: 19px; line-height: 1.3; color: var(--tinta);
  font-weight: 500; text-wrap: balance;
}
.blog-articulo p {
  margin: 0; color: var(--tinta-media); font-size: 14px; line-height: 1.75;
  max-width: 68ch;
}
.blog-entradilla { color: var(--tinta) !important; }
.blog-ver { align-self: flex-start; margin-top: 4px; }

/* --- El hueco de publicidad ---
   Sin anuncio configurado, `anuncios.js` lo deja oculto y aquí no se pinta ni
   un borde: un espacio reservado vacío se ve como una web a medio hacer. */
.anuncio { margin: 0 0 26px; }
.anuncio[hidden] { display: none !important; }
.anuncio-aviso {
  margin: 0 0 6px;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-tenue);
}

@media (max-width: 820px) {
  .hoja-barra { padding: 12px 14px; }
  .hoja-cuerpo { padding: 18px 14px 80px; }
  .blog-articulo h3 { font-size: 17px; }
}