/*
 * Astrolarius — estilo común de toda la app (unificación del diseño, fase 1).
 *
 * Todas las pantallas cargan este archivo. Aquí están:
 *   1. Las letras (guardadas en app/fuentes, funcionan sin conexión).
 *   2. Los colores como variables. NINGUNA otra hoja de estilo ni pantalla
 *      escribe colores a mano: todas usan estas variables, y así el modo
 *      rojo (una sola clase, html.modo-rojo) cambia la app entera.
 *   3. La base: texto de 18 px como mínimo, fondo, enlaces, foco.
 *   4. Los componentes comunes: botón (principal y secundario), tarjeta,
 *      etiqueta (chip), pestañas, aviso, campo de formulario y franja
 *      horaria.
 *
 * Tamaños mínimos: texto 18 px; botones 56 px de alto; cualquier zona que
 * se toque, 48 px.
 */

/* --- 1. Letras --- */
@font-face {
  font-family: "Lexend";
  src: url("../fuentes/Lexend/Lexend-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fuentes/AtkinsonHyperlegible/AtkinsonHyperlegible-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fuentes/AtkinsonHyperlegible/AtkinsonHyperlegible-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* --- 2. Colores --- */
:root {
  color-scheme: dark;
  --fondo: #060709; /* casi negro, como la web (24/10/2026; antes #17121C) */
  --cielo-profundo: #0B0810;
  --superficie: #221A29;
  --superficie-2: #2D2335;
  --borde: #3D3147;
  --borde-fuerte: #4A3D55;
  --texto: #F4EFE8;
  --texto-2: #C9BFD0;
  --texto-3: #9D90A8;
  --violeta: #7A48B3;
  --violeta-claro: #B79AE0;
  --texto-sobre-violeta: #FFFFFF;
  --coral: #F08C7A;
  --logo-coral-oscuro: #B85A45;
  --texto-sobre-coral: #1B1020;
  --azul: #7FB2E8;
  --ambar: #E8C27F;
  --verde: #8FD3A6;
  --sombra: #000000;
  /* Franja de la noche: la Luna, un bloque claro y liso; las nubes, rayas
     oscuras. Se distinguen por el color y por el dibujo, también en rojo. */
  --franja-luna: #EFE3B4;
  --luna-luz: #F1EBD9;
  --luna-mar: #A59D8A;
  --luna-sombra: #2A2433;
  --franja-nubes: #66748A;
  /* Lluvia posible: rayas verticales finas (gotas), azules. */
  --franja-lluvia: #7FB2E8;

  --f-titulo: "Lexend", "Segoe UI", system-ui, sans-serif;
  /* El texto, en Lexend fina como el Copiloto (23/10/2026; antes, Atkinson
     Hyperlegible: sus letras siguen arriba por si se vuelve a ella). */
  --f-texto: "Lexend", "Segoe UI", system-ui, sans-serif;
  --alto-boton: 56px;
  --alto-tactil: 48px;
  /* Apartados del menú (paso 16, petición de Fran): 44 px, más compactos
     (44 px es el tamaño AAA de WCAG 2.2). */
  --alto-menu: 44px;
  --radio: 14px;
  --radio-grande: 18px;
}

/* Modo rojo: rojos sobre negro para no perder la adaptación de la vista a
   la oscuridad. Redefine TODAS las variables de arriba, en la gama del rojo
   (verde y azul como mucho la mitad del rojo; lo comprueba
   app/js/estilo.test.js). */
html.modo-rojo {
  --fondo: #000000;
  --cielo-profundo: #050000;
  --superficie: #140000;
  --superficie-2: #200202;
  --borde: #3D0805;
  --borde-fuerte: #520B07;
  --texto: #FF5A48;
  --texto-2: #E8503A;
  --texto-3: #DD4030;
  --violeta: #600A04;
  --violeta-claro: #FF7461;
  --texto-sobre-violeta: #FF7A6A;
  --coral: #FF7563;
  --logo-coral-oscuro: #8A1A10;
  --texto-sobre-coral: #000000;
  --azul: #FF7A66;
  --ambar: #E8452E;
  --verde: #F25240;
  --sombra: #000000;
  --franja-luna: #FF7A6A;
  --luna-luz: #FF7A6A;
  --luna-mar: #B8402F;
  --luna-sombra: #200202;
  --franja-nubes: #7A1409;
  --franja-lluvia: #FF5A48;
}
/* Imágenes, vídeos y lienzos: a escala de rojos con el filtro SVG que añade
   app/js/apariencia.js (el rojo de cada punto pasa a ser su luminosidad). */
html.modo-rojo img,
html.modo-rojo video,
html.modo-rojo canvas {
  filter: url("#filtro-modo-rojo");
}

/* Tamaño de letra (Ajustes, js/apariencia.js): escala toda la pantalla por
   igual (letras, botones, márgenes), así el diseño no se rompe; las
   alturas de pantalla completa se corrigen para que sigan cabiendo. */
html.letra-grande { zoom: 1.15; }
html.letra-muy-grande { zoom: 1.3; }

/* --- 3. Base --- */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
/* Con el cielo animado (js/cielo_fondo.js, un canvas fijo detrás de todo),
   el fondo lo pone <html> y <body> se deja ver a través. */
html.con-cielo body { background: transparent; }
/* Las pantallas que el armazón abre en un marco dejan ver su cielo. */
html.con-cielo-marco, html.con-cielo-marco body { background: transparent; }
/* Letra fina (300); las negritas, a 500. Los campos, las tablas y los botones,
   a 400 (las cifras pequeñas se leen mejor); y en modo rojo todo a 400: los
   trazos finos en rojo sobre negro dan poca luz. */
b, strong { font-weight: 500; }
input, select, textarea, button, table { font-weight: 400; }
html.modo-rojo body { font-weight: 400; }
h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: 500; line-height: 1.25; margin: 0; text-wrap: balance; }
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 21px; }
p { margin: 0; }
/* Los enlaces, como en la web: sin subrayado; se distinguen por el color y,
   al pasar o con el foco, se iluminan (24/10/2026, petición de Fran). */
a { color: var(--violeta-claro); text-decoration: none; transition: color 0.15s; }
a:hover, a:focus-visible { color: var(--texto); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--violeta-claro); outline-offset: 2px; }
.texto-secundario { color: var(--texto-2); }
.texto-tenue { color: var(--texto-3); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* --- 4. Componentes --- */

/* Botón: .boton + .boton-principal (violeta) o .boton-secundario. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--alto-boton);
  padding: 6px 20px;
  border-radius: var(--radio);
  border: 1px solid transparent;
  font-family: var(--f-titulo);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.boton-principal { background: var(--violeta); border-color: var(--violeta); color: var(--texto-sobre-violeta); }
.boton-secundario { background: var(--superficie-2); border-color: var(--borde-fuerte); color: var(--texto); }
.boton:disabled, .boton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.boton-ancho { width: 100%; }
.boton-grande { min-height: 64px; font-size: 20px; }

/* Tarjeta. */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  padding: 16px;
}

/* Etiqueta (chip): estática o botón de filtro con aria-pressed. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 2px 12px;
  border-radius: 999px;
  border: 1px solid var(--borde-fuerte);
  background: transparent;
  color: var(--texto-2);
  font-family: var(--f-titulo);
  font-size: 18px;
}
button.chip { min-height: var(--alto-boton); padding: 0 18px; background: var(--superficie); cursor: pointer; }
/* Un chip que no se pulsa (montaje, filtro…) es una etiqueta: plano, sin
   borde y con esquinas suaves, para que no parezca un botón. */
span.chip { border-color: transparent; background: var(--superficie-2); border-radius: 8px; }
button.chip[aria-pressed="true"] { border-color: var(--violeta-claro); background: var(--superficie-2); color: var(--texto); }
.chip-lineas { border-color: currentColor; color: var(--azul); }
.chip-ancha { border-color: currentColor; color: var(--ambar); }

/* Pestañas: .pestanas con botones .pestana (role="tab", aria-selected). */
/* Una al lado de otra; si no caben (móvil con letra grande), una debajo de otra. */
.pestanas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr)); gap: 10px; }
.pestana {
  min-height: 64px;
  padding: 6px 12px;
  border-radius: 16px;
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  color: var(--texto-2);
  font-family: var(--f-titulo);
  font-size: 20px;
  cursor: pointer;
}
.pestana[aria-selected="true"] { background: var(--violeta); border-color: var(--violeta); color: var(--texto-sobre-violeta); }

/* Aviso: recuadro con una franja de color a la izquierda. */
.aviso {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--superficie-2);
  border-left: 4px solid var(--violeta-claro);
}
.aviso-coral { border-left-color: var(--coral); }

/* Campo de formulario:
   <label class="campo"><span class="campo-etiqueta">Texto</span>
   <input class="campo-input"></label>. */
.campo { display: grid; gap: 6px; }
.campo-etiqueta { color: var(--texto-2); }
.campo-input {
  min-height: var(--alto-boton);
  padding: 0 16px;
  border-radius: var(--radio);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: 18px;
}
.campo-input::placeholder { color: var(--texto-3); }
textarea.campo-input { padding: 12px 16px; min-height: 120px; }

/* La cuenta (js/cuenta.js): correo → código → entrar, en el alta y en Ajustes. */
.cuenta-paso { display: grid; gap: 14px; }
.cuenta-paso p { margin: 0; }
.campo-codigo { letter-spacing: 6px; font-variant-numeric: tabular-nums; }
/* El código de regalo en Ajustes › Tu cuenta (js/armazon.js). */
.cuenta-regalo { display: grid; gap: 10px; justify-items: start; }
.cuenta-regalo .campo { justify-self: stretch; max-width: 22rem; }
.cuenta-regalo [data-regalo-codigo] { text-transform: uppercase; letter-spacing: 1px; }
.cuenta-estado:empty { display: none; }
.cuenta-estado { margin: 0; color: var(--coral); }
.cuenta-pregunta .boton small { font-size: inherit; font-weight: normal; color: inherit; }
.cuenta-pregunta .boton { height: auto; padding-block: 10px; line-height: 1.3; }

/* Franja horaria: la noche (o un plan) de izquierda a derecha, en tramos
   colocados con left/width en %. */
.franja-horaria { position: relative; height: 40px; border-radius: 10px; overflow: hidden; background: var(--cielo-profundo); border: 1px solid var(--borde); }
.franja-horaria .tramo { position: absolute; top: 0; bottom: 0; }
.tramo-crepusculo { background: color-mix(in srgb, var(--violeta) 55%, var(--fondo)); }
.tramo-oscuridad { background: var(--cielo-profundo); }
.tramo-luna { background: var(--franja-luna); }
.tramo-nubes { background: repeating-linear-gradient(45deg, var(--franja-nubes) 0 6px, var(--cielo-profundo) 6px 10px); }
.tramo-lluvia { background: repeating-linear-gradient(90deg, var(--franja-lluvia) 0 2px, var(--cielo-profundo) 2px 6px); }
.tramo-tapado { background: repeating-linear-gradient(-45deg, var(--texto-3) 0 3px, transparent 3px 9px); opacity: 0.85; }

/* Gráfico de altura del objeto durante la noche (js/grafico_altura.js):
   el fondo usa los mismos tramos que la franja de la noche; curvas en SVG
   (grosor en píxeles reales: vector-effect) y letras en HTML, de 18 px. No
   depende solo del color: el rato útil es más grueso, la altura mínima va
   discontinua y la Luna, de puntos. */
.grafico-altura { margin: 0; display: grid; gap: 8px; min-width: 0; container: grafico / inline-size; }
.ga-zona { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; overflow: hidden; }
.grafico-altura-compacto .ga-zona { grid-template-columns: minmax(0, 1fr); }
.ga-eje-y { position: relative; grid-row: 1; width: 3.2em; font-size: 18px; color: var(--texto-2); }
.ga-eje-y span { position: absolute; right: 0; transform: translateY(-50%); line-height: 1; }
.ga-eje-y span:first-child { transform: none; }
.ga-eje-y span:last-child { transform: translateY(-100%); }
.ga-area { position: relative; grid-row: 1; height: 220px; border-radius: 10px; overflow: hidden; border: 1px solid var(--borde); background: var(--cielo-profundo); }
.grafico-altura-compacto .ga-area { height: 110px; }
.ga-fondo, .ga-svg, .ga-marcas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ga-fondo .tramo { position: absolute; top: 0; bottom: 0; }
.ga-svg { overflow: visible; }
.ga-svg polyline, .ga-svg line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ga-rejilla { stroke: var(--borde-fuerte); stroke-width: 1; }
.ga-minima { stroke: var(--ambar); stroke-width: 2; stroke-dasharray: 8 6; }
.ga-luna { stroke: var(--franja-luna); stroke-width: 1.5; stroke-dasharray: 1 5; opacity: 0.85; }
.ga-curva { stroke: var(--texto-2); stroke-width: 2; }
.ga-util { stroke: var(--violeta-claro); stroke-width: 6; }
.ga-culmina { stroke: var(--texto); stroke-width: 1; stroke-dasharray: 3 4; }
.ga-ahora { stroke: var(--coral); stroke-width: 3; }
.ga-punto { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--texto); border: 2px solid var(--cielo-profundo); transform: rotate(45deg); }
.ga-etiqueta { position: absolute; padding: 0 6px; font-size: 18px; line-height: 1.3; white-space: nowrap; color: var(--texto); background: var(--cielo-profundo); border-radius: 6px; }
.ga-etiqueta-ahora { color: var(--coral); font-weight: 700; }
.ga-etiqueta-minima { transform: translateY(-110%); color: var(--ambar); }
.ga-plan { position: absolute; bottom: 0; height: 26px; background: repeating-linear-gradient(135deg, var(--violeta) 0 4px, transparent 4px 8px); border-top: 2px solid var(--violeta-claro); }
.ga-plan span { position: absolute; left: 4px; bottom: 100%; font-size: 18px; color: var(--violeta-claro); background: var(--cielo-profundo); padding: 0 4px; border-radius: 4px; white-space: nowrap; }
.ga-eje-x { position: relative; grid-column: -2 / -1; height: 1.6em; font-size: 18px; color: var(--texto-2); }
.ga-eje-x span { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; display: none; }
/* Las horas que caben (cada una mide unos 50 px): solo la medianoche por
   debajo de 220 px; cada 6 h desde 220 px; cada 4 h desde 300 px; cada 2 h
   desde 500 px; todas desde 1000 px. */
@container grafico (max-width: 219px) { .ga-eje-x .ga-h12 { display: block; } }
@container grafico (min-width: 220px) and (max-width: 299px) { .ga-eje-x .ga-h6 { display: block; } }
@container grafico (min-width: 300px) and (max-width: 499px) { .ga-eje-x .ga-h4 { display: block; } }
@container grafico (min-width: 500px) and (max-width: 999px) { .ga-eje-x .ga-h2 { display: block; } }
@container grafico (min-width: 1000px) { .ga-eje-x .ga-h1 { display: block; } }
/* En un gráfico estrecho, las etiquetas de dentro estorban: la culminación
   y la mínima ya están en la línea de debajo (queda la marca del punto). */
@container grafico (max-width: 419px) { .ga-etiqueta-culmina, .ga-etiqueta-minima { display: none; } }
.ga-linea { font-size: 18px; color: var(--texto); }
.ga-leyenda { margin: 0; font-size: 18px; color: var(--texto-2); }
.ga-nota-prevision { margin: 0; font-size: 18px; color: var(--texto-3); font-style: italic; }
/* «Próximas noches»: una lista comparada (GraficoAltura.htmlNoches). La
   mejor arriba; el eje de horas una vez, alineado con las barras; una fila
   por noche (día, etiqueta, barra, horas). En estrecho (el móvil), la barra
   a lo ancho y las horas debajo. Todo con las variables (también en modo
   rojo). */
.lst { display: grid; gap: 8px; container: lista-noches / inline-size; }
.lst-cabeza { margin: 0; font-size: 18px; color: var(--texto-2); }
.lst-cabeza b { color: var(--texto); font-family: var(--f-titulo); font-weight: 600; }
.lst-filas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lst-fila, .lst-eje { display: grid; grid-template-columns: 8.5em 7.5em minmax(0, 1fr) 9.5em; grid-template-areas: "dia etiqueta barra horas"; column-gap: 12px; align-items: center; }
.lst-fila { width: 100%; min-height: var(--alto-tactil); padding: 6px 10px; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--texto); font: inherit; font-size: 18px; text-align: left; cursor: pointer; }
.lst-fila:hover { border-color: var(--borde-fuerte); }
.lst-mejor { background: var(--superficie-2); border-color: var(--borde); }
.lst-eje { padding: 0 10px; border: 1px solid transparent; }
.lst-dia { grid-area: dia; white-space: nowrap; font-family: var(--f-titulo); }
.lst-etiqueta { grid-area: etiqueta; justify-self: start; padding: 2px 10px; border-radius: 8px; border: 1px solid currentColor; font-size: 18px; line-height: 1.3; white-space: nowrap; }
.lst-et-buena { color: var(--verde); }
.lst-et-regular { color: var(--ambar); }
.lst-et-mala { color: var(--coral); }
.lst-et-orientativa, .lst-et-sin { color: var(--texto-3); }
.lst-barra { grid-area: barra; position: relative; height: 22px; border-radius: 6px; overflow: hidden; background: var(--cielo-profundo); }
.lst-eje-horas { grid-area: barra; position: relative; height: 26px; color: var(--texto-3); font-size: 18px; font-variant-numeric: tabular-nums; }
.lst-eje-horas span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.lst-horas { grid-area: horas; display: grid; line-height: 1.25; }
.lst-horas b { font-family: var(--f-titulo); }
.lst-horas span { color: var(--texto-2); }
/* Los tramos: útil (morado sólido), nubes (gris rayado), bajo o tapado (gris
   oscuro), crepúsculo (algo más claro, en los extremos) y sin previsión (el
   rato útil posible, con borde discontinuo). */
.lst-t { position: absolute; top: 0; bottom: 0; display: block; }
.lst-t-util { background: var(--violeta-claro); }
.lst-t-nubes { background: repeating-linear-gradient(45deg, var(--franja-nubes) 0 6px, var(--cielo-profundo) 6px 10px); }
.lst-t-bajo { background: color-mix(in srgb, var(--texto-3) 35%, var(--cielo-profundo)); }
.lst-t-crepusculo { background: color-mix(in srgb, var(--violeta) 55%, var(--fondo)); }
.lst-t-posible { border: 2px dashed var(--violeta-claro); border-radius: 4px; background: color-mix(in srgb, var(--violeta-claro) 15%, transparent); }
.lst-leyenda { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 18px; color: var(--texto-2); }
.lst-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.lst-leyenda .lst-t { position: static; width: 22px; height: 14px; border-radius: 3px; }
@container lista-noches (max-width: 560px) {
  .lst-fila, .lst-eje { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dia etiqueta" "barra barra" "horas horas"; row-gap: 6px; }
  .lst-eje { grid-template-areas: "barra barra"; }
  .lst-dia { white-space: normal; }
  /* En estrecho, las horas del eje cada 4 (si no, se montan). */
  .lst-eje-horas span:not(.lst-h4) { display: none; }
  .lst-horas { grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; }
}
.ga-noche-elegida { margin: 0; font-family: var(--f-titulo); font-size: 20px; }
.ga-nota-luna { margin: 0; font-size: 18px; color: var(--texto-2); }
/* Los motivos de las zonas no útiles, en el centro de su tramo. */
/* Su franja, debajo del gráfico y encima de las horas: nunca tapan las etiquetas de la curva. */
.ga-franja-motivos { position: relative; grid-column: -2 / -1; height: 1.5em; margin-top: 2px; }
.ga-motivo { position: absolute; top: 0; bottom: 0; box-shadow: inset 1px 0 0 var(--borde); display: flex; justify-content: center; align-items: center; overflow: hidden; pointer-events: none; }
.ga-motivo > span { flex: none; padding: 0 6px; font-size: 18px; line-height: 1.3; white-space: nowrap; color: var(--texto-2); }
.ga-motivo.ga-no-cabe { visibility: hidden; }
/* En el gráfico grande, siempre escrito (puede asomar un poco fuera de su tramo). */
.grafico-altura:not(.grafico-altura-compacto) .ga-motivo { overflow: visible; }
.grafico-altura .ga-motivo.ga-no-cabe { overflow: hidden; }
.ga-pestanas { display: flex; gap: 8px; flex-wrap: wrap; }
.ga-pestanas button[aria-selected="true"] { background: var(--violeta); border-color: var(--violeta); color: var(--texto-sobre-violeta); }
.franja-escala { position: relative; height: 28px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.franja-escala span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
/* La leyenda común de los gráficos de bandas (js/leyenda.js): justo debajo
   del gráfico; cada muestra, con la misma clase que en él (color o trama). */
.leyenda { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 18px; color: var(--texto-2); }
.leyenda li { display: inline-flex; align-items: center; gap: 8px; }
.leyenda-muestra { position: relative; flex: none; display: inline-block; width: 28px; height: 18px; border-radius: 4px; overflow: hidden; background: var(--cielo-profundo); border: 1px solid var(--borde-fuerte); box-sizing: border-box; }
.leyenda-muestra .leyenda-relleno { position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; border-radius: 0; }
.leyenda-muestra .leyenda-raya { position: absolute; top: 0; bottom: 0; left: 50%; }
svg.leyenda-muestra { overflow: visible; fill: none; }

/* Mapa pequeño de un lugar (js/mapa.js). */
.mapa { position: relative; overflow: hidden; flex: none; max-width: 100%; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borde); }
.mapa img { position: absolute; width: 256px; height: 256px; max-width: none; }
.mapa-alfiler { position: absolute; transform: translate(-50%, -100%); }
.mapa-alfiler path { fill: var(--coral); stroke: var(--fondo); stroke-width: 1.5; }
.mapa-alfiler circle { fill: var(--fondo); }
.mapa-credito { position: absolute; right: 0; bottom: 0; padding: 0 8px; border-top-left-radius: 8px; background: var(--fondo); color: var(--texto); font-size: 18px; line-height: 1.4; }

/* Bortle: píldora coral con el número. */
.pildora-bortle-comun { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 12px; border-radius: 999px; background: var(--coral); color: var(--texto-sobre-coral); font-family: var(--f-titulo); font-size: 18px; }

/* Vigilancia de lluvia (js/vigilancia_lluvia.js): el interruptor «Vigilar
   la lluvia» (portada, Hoja y Copiloto) y la alarma a pantalla completa. */
.vigilancia-lluvia { display: grid; gap: 10px; }
.vigilancia-lluvia p { margin: 0; }
.vigilancia-lluvia .texto-ayuda { color: var(--texto-2); }
.vigilancia-lluvia-estado { color: var(--texto-2); }
.vigilancia-sonido { color: var(--coral); }
.interruptor { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: var(--alto-tactil); cursor: pointer; font-family: var(--f-titulo); font-size: 20px; }
.interruptor input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.interruptor-dibujo { position: relative; flex: none; width: 60px; height: 34px; border-radius: 999px; background: var(--superficie-2); border: 2px solid var(--borde-fuerte); }
.interruptor-dibujo::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--texto-2); }
.interruptor input:checked + .interruptor-dibujo { background: var(--violeta); border-color: var(--violeta-claro); }
.interruptor input:checked + .interruptor-dibujo::after { left: 29px; background: var(--texto); }
.interruptor input:focus-visible + .interruptor-dibujo { outline: 3px solid var(--violeta-claro); outline-offset: 2px; }
.alarma-lluvia { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--fondo); border: 8px solid var(--coral); }
.alarma-lluvia-caja { display: grid; gap: 20px; max-width: 640px; text-align: center; }
.alarma-lluvia-caja p { margin: 0; }
.alarma-lluvia-titulo { font-family: var(--f-titulo); font-size: 22px; color: var(--coral); text-transform: uppercase; letter-spacing: 0.06em; }
.alarma-lluvia-texto { font-family: var(--f-titulo); font-size: 32px; line-height: 1.25; color: var(--texto); text-wrap: balance; }
.alarma-lluvia-boton { min-height: 96px; font-size: 26px; width: 100%; }
.alarma-lluvia-ayuda { color: var(--texto-2); }
.alarma-lluvia-pregunta { display: grid; gap: 12px; }
.alarma-lluvia-que { font-family: var(--f-titulo); font-size: 22px; }
.alarma-lluvia-callada { color: var(--coral); }
.alarma-lluvia-opcion { min-height: 64px; width: 100%; font-size: 21px; }

/* Objetos de mucho contraste (paso 18b): «Importante, lee esto». */
.alto-contraste { margin-top: 12px; border: 2px solid var(--ambar); border-radius: var(--radio); background: var(--superficie-2); padding: 0 16px; font-size: 18px; min-width: 0; overflow-wrap: anywhere; }
.alto-contraste > summary { min-height: var(--alto-tactil); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; cursor: pointer; font-family: var(--f-titulo); font-weight: 600; color: var(--ambar); }
.alto-contraste[open] { padding-bottom: 12px; }
/* La etiqueta «HDR · 3 tandas» (Fran, 30/10/2026: una etiqueta y, al tocarla, la explicación). */
.hdr-etiqueta { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--ambar); color: var(--cielo-profundo); font-weight: 700; }
.alto-contraste > summary { color: var(--texto-2); font-weight: 500; }
.hdr-tandas b { color: var(--texto); }
.alto-contraste h4 { margin: 12px 0 4px; font-size: 18px; color: var(--texto); }
.alto-contraste p, .alto-contraste li { margin: 4px 0; line-height: 1.45; color: var(--texto-2); }
.alto-contraste ol, .alto-contraste ul { margin: 4px 0; padding-left: 24px; }
.alto-contraste-facil { font-weight: 600; color: var(--texto) !important; }

/* Ayuda «Explícamelo» (lote 1, js/ayuda.js). */
.boton-ayuda { display: inline-flex; align-items: center; min-height: var(--alto-tactil); padding: 0 12px; margin-left: 6px; border: 1px solid var(--borde-fuerte); border-radius: 999px; background: transparent; color: var(--violeta-claro); font: inherit; font-size: 18px; font-weight: 600; line-height: 1.2; cursor: pointer; vertical-align: middle; white-space: nowrap; }
.boton-ayuda:hover, .boton-ayuda:focus-visible { background: var(--superficie-2); }
.boton-ayuda:focus-visible { outline: 3px solid var(--violeta-claro); outline-offset: 2px; }
/* La tarjeta pequeña junto al botón (encargo «Aprende»): título, «En una
   frase», «Con tu equipo» y dos botones. */
.ayuda-tarjeta { position: absolute; z-index: 60; width: min(380px, calc(100vw - 32px)); box-sizing: border-box; display: grid; gap: 10px; padding: 18px; border: 2px solid var(--violeta-claro); border-radius: var(--radio); background: var(--superficie-2); color: var(--texto); font-size: 18px; line-height: 1.45; box-shadow: 0 12px 30px color-mix(in srgb, var(--sombra) 45%, transparent); }
.ayuda-tarjeta h2 { margin: 0; font-family: var(--f-titulo); font-size: 21px; }
.ayuda-tarjeta p { margin: 0; }
.ayuda-tuyo { color: var(--texto-2); }
.ayuda-tuyo b { color: var(--verde); }
.ayuda-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
html.letra-grande .ayuda-tarjeta { width: min(380px, calc((100vw - 32px) / 1.15)); }
html.letra-muy-grande .ayuda-tarjeta { width: min(380px, calc((100vw - 32px) / 1.3)); }

/* Imágenes reales del cielo (DSS2, js/imagenes.js): debajo del dibujo, que se
   vuelve transparente cuando la imagen carga; el contorno del objeto, una
   línea fina. Si no carga, se queda el dibujo. */
.capa-foto { display: grid; gap: 4px; }
/* La foto y el dibujo, en el mismo recuadro cuadrado: la foto a su tamaño
   real en el cielo (estilo en línea, Imagenes.estilo); lo que no cubre, oscuro. */
.capa-foto-marco { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; background: var(--cielo-profundo); }
.capa-foto-marco > svg, .capa-foto-marco > [data-enc-svg], .capa-foto-marco > [data-enc-svg] > svg { position: relative; display: block; width: 100%; height: 100%; }
.foto-cielo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; opacity: 0; transition: opacity 0.3s; }
.foto-cielo.cargada { opacity: 1; }
/* El crédito de la foto («DSS2 · CDS / STScI»), pequeño: es una atribución, no
   información (Fran, 27/10/2026: salía mayor que el título). La única letra por
   debajo de 18 px, a propósito. */
.foto-credito { display: none; color: var(--texto-3); font-size: 12px; line-height: 1.3; letter-spacing: 0.02em; }
.con-foto .foto-credito { display: block; }
/* La ficha sin conexión y sin foto guardada (js/imagenes.js). */
.foto-sin-conexion { display: block; color: var(--texto-2); font-size: 18px; line-height: 1.3; }
.con-foto .cielo, .con-foto .estrella, .con-foto .enc-cielo { fill: transparent; }
.con-foto .forma-objeto, .con-foto .enc-objeto { fill: none; stroke-width: 0.5; }
.sin-contorno .enc-objeto { display: none; }
/* El campo, siempre visible sobre la foto: más grueso, con un trazo oscuro debajo. */
.enc-sombra { display: none; }
.con-foto .enc-sombra { display: inline; fill: none; stroke: var(--cielo-profundo); stroke-width: 7; stroke-opacity: 0.85; }
.con-foto .enc-campo { stroke-width: 3.5; }
.con-foto .enc-panel { stroke-width: 3; stroke-dasharray: none; fill-opacity: 0; }
.con-foto .marco-campo { stroke-width: 2; }
html.modo-rojo img.foto-cielo { filter: url("#filtro-modo-rojo") brightness(0.6); }
/* La miniatura limpia (HojaVista.miniatura: listas y planes): más luminosa,
   con un estirado suave (#filtro-realce, js/apariencia.js): las fotos DSS salen
   muy oscuras en pequeño. En modo rojo, como todas. */
html:not(.modo-rojo) .foto-limpia img.foto-cielo { filter: url("#filtro-realce") saturate(1.25); }
/* Brillantes (HojaVista.miniatura: cúmulos, planetarias, galaxias brillantes): más suave; planetas, natural. */
html:not(.modo-rojo) .foto-suave img.foto-cielo { filter: url("#filtro-realce-suave") saturate(1.1); }
html:not(.modo-rojo) .foto-natural img.foto-cielo { filter: none; }
/* «Otros formatos» (ficha del objeto y Copiloto): un enlace pequeño que abre
   los formatos de los otros controladores; la zona que se toca, de 48 px. */
.otros-formatos > summary { display: inline-flex; align-items: center; min-height: var(--alto-tactil); color: var(--texto-2); text-decoration: none; cursor: pointer; list-style: none; }
.otros-formatos > summary::-webkit-details-marker { display: none; }
.otros-formatos[open] { display: grid; gap: 8px; }

/* «¿Qué hiciste anoche?» y «Fin de la noche» (js/pantalla_anoche.js): portada, «Editar» del Historial y el Copiloto. */
.anoche { display: grid; gap: 14px; min-width: 0; }
.anoche-titulo { margin: 0; font-size: 24px; }
.anoche > p { margin: 0; }
.anoche-montajes { display: grid; gap: 14px; }
.anoche-montaje { display: grid; gap: 12px; min-width: 0; }
.anoche-montaje h3 { margin: 0; font-size: 21px; overflow-wrap: anywhere; }
.anoche-parte { display: grid; gap: 8px; }
.anoche-parte h4 { margin: 0; font-size: 19px; }
.anoche-campos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.anoche-campo { display: grid; gap: 4px; align-content: start; min-width: 0; }
/* Las casillas, dentro de su columna: nunca se salen ni se montan. */
.anoche .campo, .anoche .campo-input { width: 100%; min-width: 0; box-sizing: border-box; }
.anoche-pregunta { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.anoche-pregunta > p { margin: 0; }
.anoche-opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.anoche-opciones .boton[aria-pressed="true"] { background: var(--violeta); border-color: var(--violeta); color: var(--texto-sobre-violeta); }
/* Giro, filtro, enfoque o relevo: la línea de los flats, destacada. */
.anoche-destacado { border: 2px solid var(--coral); border-radius: 12px; padding: 12px; }
.anoche-aviso { margin: 0; color: var(--coral); font-weight: 700; }

.anoche-pendientes { margin: 0; padding-left: 22px; display: grid; gap: 6px; color: var(--coral); }
/* «Fin de la noche»: a esa hora, botones grandes y fáciles de acertar. */
.anoche-fin .anoche-opciones .boton { min-width: 120px; }

/* «Qué filtro usar» y «¿Te aviso?» (ficha del objeto), avisos de tu equipo y
   «¿Qué filtro me compro?» (Mi equipo): js/consejos_filtros.js. */
.que-filtro { display: grid; gap: 8px; }
.que-filtro h4 { margin: 0; font-size: 20px; }
.que-filtro-lista { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.que-filtro-lista li { overflow-wrap: anywhere; }
.te-aviso { display: grid; gap: 10px; padding: 12px; border: 2px solid var(--ambar); border-radius: 12px; }
.te-aviso p { margin: 0; }
.avisos-equipo { display: grid; gap: 8px; }
.avisos-equipo p { margin: 0; }
.aviso-equipo { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.que-comprar { display: grid; gap: 10px; }
.que-comprar p, .que-comprar h4 { margin: 0; }
.que-comprar-tipo { display: grid; gap: 4px; }
.enlace-boton { min-height: var(--alto-tactil); padding: 0 4px; background: none; border: 0; color: var(--violeta-claro); font: inherit; text-decoration: none; cursor: pointer; }
.enlace-boton:focus-visible { outline: 3px solid var(--violeta-claro); outline-offset: 2px; }

/* Encuadre: las dos opciones si no cabe, las zonas destacadas y comparar montajes (js/pantalla_buscar.js). */
.encuadre-opciones, .encuadre-zonas-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.encuadre-opciones .boton[aria-pressed="true"], .encuadre-zonas-botones .boton[aria-pressed="true"] { background: var(--violeta); border-color: var(--violeta); color: var(--texto-sobre-violeta); }
.encuadre-zonas { display: grid; gap: 8px; }
.encuadre-zonas p { margin: 0; }
.encuadre-miniaturas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.encuadre-mini { display: grid; gap: 4px; justify-items: center; min-width: 120px; padding: 6px; background: var(--superficie); border: 2px solid var(--borde); border-radius: 12px; color: var(--texto); font: inherit; cursor: pointer; }
.encuadre-mini[aria-pressed="true"] { border-color: var(--violeta-claro); }
.encuadre-mini:focus-visible { outline: 3px solid var(--violeta-claro); outline-offset: 2px; }
.encuadre-mini-dibujo { display: block; width: 110px; height: 110px; overflow: hidden; border-radius: 8px; }
.encuadre-mini-palabra { color: var(--texto-2); }

/* La Luna dibujada (js/luna_dibujo.js) */
.luna-dibujo { flex: none; display: block; }
.luna-luz { fill: var(--luna-luz); }
.luna-mar { fill: var(--luna-mar); opacity: 0.6; }
.luna-crater { fill: var(--luna-luz); }
.luna-sombra { fill: var(--luna-sombra); }
.luna-cenicienta { opacity: 0.12; }

/* El aviso de versión nueva (js/version_nueva.js) */
.version-nueva { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1000; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; width: min(560px, calc(100% - 24px)); padding: 14px 16px; border: 2px solid var(--violeta-claro); border-radius: var(--radio-grande); background: var(--superficie-2); color: var(--texto); box-shadow: 0 10px 30px var(--sombra); }
.version-nueva p { margin: 0; flex: 1 1 220px; font-size: 18px; font-family: var(--f-titulo); }


/* «(Setup)» junto a «Montaje»: más pequeño y sin peso (Fran, 27/10/2026). */
.setup { font-size: 14px; font-weight: 400; color: var(--texto-2); letter-spacing: 0.01em; white-space: nowrap; }

/* La demostración (js/demo.js): mientras carga la copia, en vez del alta, un aviso. */
.demo-cargando body > * { visibility: hidden; }
.demo-cargando body::after { content: "Abriendo la demostración…"; position: fixed; inset: 0; display: grid; place-items: center; color: var(--texto); font-size: 22px; }