/* ==========================================================================
   Sidera Cosmos — estilos de la calculadora de edad en otros planetas
   --------------------------------------------------------------------------
   Extiende css/site.css con clases NUEVAS; no redefine ninguna de las que ya
   existen allí ni en css/eclipse.css (de donde esta página reutiliza .hero,
   .toc, .faq y .cta tal cual, igual que hace la portada).
   Todos los colores salen de los tokens de la casa. Ningún hex vive aquí.
   ========================================================================== */

/* ------------------------------------------------------- Calculadora ---- */

.calc {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 1.2rem 1.15rem 1.35rem;
  margin-top: 1.9rem;
}

.calc-label {
  display: block;
  font-family: var(--font-sidera);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
}

.calc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}

/* El campo de fecha nativo: en teléfono abre el selector del sistema y en
   escritorio acepta escritura directa. Se le fija el color y el fondo porque
   varios navegadores lo pintan con su propio esquema claro. */
.calc-input {
  flex: 1 1 12rem;
  min-width: 11rem;
  font-family: var(--font-sidera);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.72rem 0.85rem;
  line-height: 1.2;
}
.calc-input:focus-visible { border-color: var(--line); }
/* El icono del selector nativo es negro sobre fondo oscuro en los navegadores
   basados en Chromium: se invierte para que se vea. */
.calc-input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.72; }

.calc-nota { margin: 0.85rem 0 0; }

/* Aviso de dato incorrecto. Estado resuelto con neutro y con el propio texto:
   el ámbar y el magenta tienen significado reservado en la casa. */
.calc-error {
  margin: 0.85rem 0 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.92rem;
}
.calc-error[hidden] { display: none; }

/* --------------------------------------------------------- Resultado ---- */

.resumen {
  margin: 1.9rem 0 0;
  font-size: clamp(1.05rem, 2.5vw, 1.22rem);
  color: var(--text-muted);
}

.planetas-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}
/* Cuatro y cuatro: son ocho planetas y el reparto en dos filas iguales es el
   único que no deja una fila coja. Con auto-fit salían cinco arriba y tres
   abajo en pantallas anchas. */
@media (min-width: 40rem) {
  .planetas-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.planeta-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.95rem 0.9rem 1rem;
  text-align: center;
}
/* La Tierra es la referencia de la que sale todo lo demás, así que se marca;
   se marca con la línea de la casa, no con ámbar: el presupuesto de ámbar de
   esta vista ya lo tienen el par de casa del h1 y el botón primario. */
.planeta-card[data-planeta="tierra"] { border-color: var(--border-strong); }

.planeta-dibujo {
  display: block;
  width: 4.1rem;
  height: 4.1rem;
  margin: 0 auto 0.55rem;
}

.planeta-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
  color: var(--text);
}

.planeta-cifra {
  display: block;
  font-family: var(--font-sidera);
  font-weight: 700;
  font-size: clamp(1.5rem, 6.4vw, 1.95rem);
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.planeta-unidad {
  display: block;
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.planeta-anio {
  display: block;
  font-size: 0.73rem;
  color: var(--text-dim);
  line-height: 1.45;
  margin-top: 0.55rem;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}

/* Separación propia para la nota que va pegada a otra nota: sin ella, el pie
   del esquema y el apunte de Plutón se leen como un solo párrafo. */
.nota-extra { margin-top: 1.15rem; }

.figura-nota {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.55;
}

/* ------------------------------------------------ Próximo cumpleaños ---- */

.cumples-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 46rem) {
  .cumples-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cumple-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.1rem 1.15rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.cumple-dial { flex: none; width: 5.2rem; height: 5.2rem; }

/* El arco del progreso. El dasharray es la circunferencia completa del anillo
   (2·pi·40 = 251.33 en el sistema de coordenadas del SVG) y el offset lo
   mueve el JavaScript. Sin JavaScript el offset se queda en la longitud
   entera y el arco no se dibuja. */
.cumple-arco {
  stroke-dasharray: 251.33;
  stroke-dashoffset: 251.33;
  transition: stroke-dashoffset 0.6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .cumple-arco { transition: none; }
}

.cumple-texto { min-width: 0; }
.cumple-card h3 {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 0 0 0.3rem;
}
.cumple-fecha {
  display: block;
  font-family: var(--font-sidera);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.25;
  color: var(--text);
}
.cumple-detalle {
  display: block;
  font-size: 0.84rem;
  color: var(--text-dim);
  margin-top: 0.3rem;
}

/* --------------------------------------------------------- Compartir ---- */

.compartir {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
}
.compartir-estado {
  margin: 0.8rem 0 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  min-height: 1.4em;
}
/* Respaldo para el navegador sin API de portapapeles: el texto aparece en un
   campo seleccionable en vez de perderse. */
.compartir-texto {
  width: 100%;
  margin-top: 0.8rem;
  font-family: var(--font-sidera);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
  resize: vertical;
}
.compartir-texto[hidden] { display: none; }

/* ------------------------------------------------------------ Tabla ----- */

/* Contenedor propio con desplazamiento horizontal. No se reutiliza el de la
   página del eclipse porque aquel anuncia "desliza para ver más ciudades",
   texto que aquí sería mentira. */
.tabla-caja {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  margin-top: 1.6rem;
}
/* La caja se desplaza, así que también tiene que poder recibir el foco del
   teclado; el trazo del foco se mete hacia dentro para que no lo recorte el
   borde redondeado. */
.tabla-caja:focus-visible { outline-offset: -3px; }

/* Aviso de que la tabla sigue a la derecha. Solo por debajo de 46 rem, que es
   donde las cuatro columnas dejan de caber. */
@media (max-width: 46rem) {
  .tabla-caja::before {
    content: "Desliza la tabla para ver las cuatro columnas →";
    display: block;
    position: sticky;
    left: 0;
    z-index: 4;
    padding: 0.5rem 0.9rem;
    font-family: var(--font-sidera);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-strong);
  }
}

table.tabla-anios {
  width: 100%;
  min-width: 34rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

table.tabla-anios caption {
  caption-side: bottom;
  text-align: left;
  padding: 0.9rem 1rem 1rem;
  font-size: 0.84rem;
  color: var(--text-dim);
  line-height: 1.6;
}

table.tabla-anios th,
table.tabla-anios td {
  padding: 0.65rem 0.85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

table.tabla-anios thead th {
  background-color: var(--surface-2);
  font-family: var(--font-sidera);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-strong);
  white-space: normal;
}

table.tabla-anios tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: var(--surface-2);
  border-right: 1px solid var(--border-strong);
  font-weight: 600;
  color: var(--text);
}
table.tabla-anios thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  border-right: 1px solid var(--border-strong);
}
table.tabla-anios tbody tr:last-child th,
table.tabla-anios tbody tr:last-child td { border-bottom: 0; }
table.tabla-anios td { color: var(--text-muted); }

@media (max-width: 46rem) {
  table.tabla-anios { min-width: 25rem; font-size: 0.87rem; }
  table.tabla-anios th,
  table.tabla-anios td { padding: 0.55rem 0.6rem; }
  /* La última columna es la única con texto de verdad: se le deja envolver
     para que la tabla pida menos desplazamiento. La cifra nunca se parte. */
  table.tabla-anios td:last-child { white-space: normal; }
}

/* -------------------------------------------------- Dibujo de mundos ---- */

/* Los planetas son DIBUJO PURO: ni una fotografía dentro del esquema. El
   color no distingue mundos porque en la gramática visual de la casa el gris
   significa "lo propio", el sistema solar; lo que distingue a cada planeta es
   el dibujo (bandas, casquete, anillo, cráteres). Los rellenos van aquí y no
   en atributos del SVG para que ningún hex viaje en el HTML. */
.p-disco  { fill: var(--grey-own); }
.p-oscuro { fill: var(--bg); opacity: 0.34; }
.p-claro  { fill: var(--text); opacity: 0.30; }
.p-borde  { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.p-anillo { fill: none; stroke: var(--grey-own); stroke-width: 2; }

/* Anillo de progreso del próximo cumpleaños. Teal: es el color de la casa
   para series y estados, y aquí marca "lo ya recorrido" frente a la pista. */
.dial-pista { fill: none; stroke: var(--border-strong); stroke-width: 4; }
.cumple-arco {
  fill: none;
  stroke: var(--teal);
  stroke-width: 4;
  stroke-linecap: round;
}
.dial-marca { stroke: var(--text-dim); stroke-width: 2; }
.dial-punto { fill: var(--grey-own); }