/* ==========================================================================
   Sidera Cosmos — /eclipse-2027/
   Lo poco que esta pagina necesita y que no estaba ya en site.css, eclipse.css
   y eventos.css. Todos los colores salen de los tokens de css/site.css: ningun
   hex vive aqui, igual que en el resto de las hojas de la casa.
   ========================================================================== */

/* ------------------------------------------------------------ El mapa ---- */

/* Los dos paneles del mapa. En pantalla ancha van uno al lado del otro, con el
   general algo mas grande que el detalle; en telefono se apilan y cada uno
   ocupa el ancho entero, que es lo que hace que el rotulo mas pequeño llegue a
   los 12 px: el texto del SVG mide el 3.59 % del lado largo del lienzo, asi
   que a los 336.2 px que le quedan en un telefono cae en 12.07 px. */
.mapa-eclipse { margin: 1.8rem 0 0; }

.mapa-paneles {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
  .mapa-paneles { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
}

.mapa-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 0.9rem 1rem;
}
.mapa-panel h3 {
  font-size: 0.95rem;
  margin: 0 0 0.15rem;
}
.mapa-panel .note { margin: 0 0 0.7rem; }

.mapa-svg {
  display: block;
  width: 100%;
  height: auto;
}
/* En telefono el mapa se come el acolchado del recuadro y llega de borde a
   borde. No es estetica: el texto del SVG se mide en unidades del lienzo, asi
   que su tamaño en pantalla depende del ancho REAL que se le da al dibujo. Con
   el acolchado puesto, a 375 px el SVG se quedaba en 307 px y el rotulo bajaba
   a 10.9 px; sin el llega a 336.2 px y el rotulo mide 12.07 px, que es el suelo
   que se fijo. El titulo y la nota del recuadro conservan su margen.
   NINGUN texto del dibujo baja de 35.9 unidades de lienzo, que es lo que hace
   falta para llegar a esos 12 px; mapa_svg.py --comprobar lee esta hoja y mide
   uno por uno los <text> que salen del dibujo. */
@media (max-width: 46rem) {
  .mapa-svg {
    margin-inline: -0.9rem;
    width: calc(100% + 1.8rem);
  }
}

/* Mar, tierra y vecinos. El pais que cuenta va en la superficie de la casa;
   los vecinos, un peldaño por debajo, para que la costa española sea lo que
   se lee primero sin pintar de otro color a nadie. */
.mapa-mar     { fill: var(--bg); stroke: var(--border); stroke-width: 1; }
.mapa-vecino  { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.1; }
.mapa-tierra  { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.3; }

/* La franja de totalidad. Es el sujeto del mapa y por eso es lo unico que
   lleva el ambar de dato, en tinte de superficie y con su borde marcado. */
.mapa-franja {
  fill: var(--amber-tint);
  stroke: var(--amber);
  stroke-opacity: 0.55;
  stroke-width: 2;
}
/* La linea central, de trazos: no es una carretera, es el eje del cono de
   sombra, y el trazo evita que se lea como una frontera. */
.mapa-central {
  fill: none;
  stroke: var(--amber);
  stroke-opacity: 0.9;
  stroke-width: 2.4;
  stroke-dasharray: 12 9;
  stroke-linecap: round;
}

.mapa-punto-total {
  fill: var(--text);
  stroke: var(--bg);
  stroke-width: 2;
}
.mapa-punto-ref {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2;
}

.mapa-rotulos { pointer-events: none; }
.mapa-rotulo {
  font-family: var(--font-sidera);
  font-size: 35.9px;          /* 3.59 % del lienzo de 1000: 12.07 px a 336.2 px */
  font-weight: 600;
  fill: var(--text);
  paint-order: stroke fill;
  stroke: var(--bg);
  stroke-width: 5;
  stroke-linejoin: round;
}
.mapa-rotulo-fin { text-anchor: end; }

.mapa-guias {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.8;
}

.mapa-inset-caja {
  fill: var(--bg);
  stroke: var(--border-strong);
  stroke-width: 1.4;
}
/* El rotulo del recuadro de Canarias. Sube al suelo de 12 px como cualquier
   otro texto del dibujo; por eso el rotulo va corto y la otra mitad de la frase,
   la que dice que el archipielago queda fuera de la franja, vive en la nota del
   recuadro, en HTML, donde el tamaño no depende del lienzo. */
.mapa-inset-rotulo {
  font-family: var(--font-sidera);
  font-size: 36px;
  font-weight: 600;
  fill: var(--text-dim);
  letter-spacing: 0.04em;
}

.mapa-escala {
  stroke: var(--text-dim);
  stroke-width: 2;
  fill: none;
}
/* El numero de la barra de escala. Al subir al suelo de 12 px pasa a pisar el
   dibujo en el panel del Estrecho, asi que se le pone el mismo halo de fondo que
   llevan los rotulos de ciudad: se lee igual sobre mar, sobre tierra y sobre la
   franja. */
.mapa-escala-texto {
  font-family: var(--font-sidera);
  font-size: 36px;
  font-weight: 600;
  fill: var(--text-dim);
  text-anchor: middle;
  paint-order: stroke fill;
  stroke: var(--bg);
  stroke-width: 5;
  stroke-linejoin: round;
}

/* Leyenda de texto: la que lee quien no ve el SVG y la que hace falta para
   entender los tres trazos sin volver al dibujo. */
.mapa-leyenda {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  max-width: var(--maxw-prose);
}
.mapa-leyenda li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: start;
  gap: 0.7rem;
}
.mapa-leyenda .muestra {
  display: block;
  height: 1.05rem;
  border-radius: 3px;
  margin-top: 0.18rem;
}
.mapa-leyenda .muestra-franja {
  background: var(--amber-tint);
  border: 1px solid var(--amber);
}
.mapa-leyenda .muestra-central {
  height: 0;
  margin-top: 0.65rem;
  border-top: 3px dashed var(--amber);
}
.mapa-leyenda .muestra-punto {
  height: 0;
  margin-top: 0.5rem;
  border-top: 0.7rem dotted var(--text);
}

/* ------------------------------------------------------------- Cifras ---- */

/* Las cuatro cifras de cabecera. Misma caja que .cifras de eclipse.css pero
   sin depender de .eclipse-mayor, que aqui no existe. */
.cifras-clave {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 46rem) {
  .cifras-clave { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cifras-clave li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 0.9rem 0.9rem;
}
.cifras-clave .rotulo {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-dim);
  margin-bottom: 0.25rem;
}
.cifras-clave .cifra {
  display: block;
  font-family: var(--font-sidera);
  font-weight: 700;
  font-size: clamp(1.1rem, 3.6vw, 1.4rem);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.15;
}

/* ------------------------------------------------------------- Tablas ---- */

/* Esta pagina tiene tablas de seis y siete columnas, mas anchas que las dos de
   /eclipses/: se les sube el minimo para que ninguna celda parta una hora. */
table.horarios.horarios-anchas { min-width: 52rem; }
@media (max-width: 46rem) {
  table.horarios.horarios-anchas { min-width: 34rem; }
}

/* La marca de "el Sol ya se puso" de la tabla de 2028. Va en neutro apagado y
   con su propia nota en el pie de la tabla: es una advertencia, no un estado de
   exito. La clase la escribe armar_pagina.py en la CELDA, no en el <time>, y
   los dos selectores tienen que casar con lo que escribe: la version anterior
   de esta hoja pedia la clase en el td mientras el generador la ponia en el
   time, asi que la marca no se pintaba nunca. */
table.horarios td.ya-puesto,
table.horarios td.ya-puesto time { color: var(--text-dim); }

/* --------------------------------------------------------- Pie de metodo -- */

.metodo {
  border-left: 3px solid var(--border-strong);
  padding: 0.2rem 0 0.2rem 1.05rem;
  margin-top: 1.4rem;
  max-width: var(--maxw-prose);
}
.metodo p { font-size: 0.87rem; color: var(--text-dim); line-height: 1.62; }