/* =====================================================================
   main.css

   Los colores viven todos aquí arriba como variables, y el modo oscuro
   es una elección deliberada de tonos —no una inversión automática—,
   porque los tres colores de la gráfica tienen que seguir siendo
   distinguibles con daltonismo sobre el fondo oscuro, no sólo bonitos.
   ===================================================================== */

:root {
  color-scheme: light;

  --plano: #eef1f5;
  --superficie: #ffffff;
  --superficie-2: #f6f8fb;
  --tinta: #10141b;
  --tinta-2: #525a68;
  --tinta-3: #79808e;
  --linea: #e1e5ec;
  --linea-fuerte: #c9cfda;
  --acento: #2a78d6;
  --acento-tinta: #1d5ba6;
  --acento-tenue: #eef4fd;
  --error: #b42318;
  --error-fondo: #fef3f2;

  /* Paleta categórica de la gráfica, validada para daltonismo y
     contraste sobre el blanco de la tarjeta. */
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;

  --sombra: 0 1px 2px rgba(16, 20, 27, .05), 0 8px 24px -16px rgba(16, 20, 27, .18);
  --radio: 12px;
  --radio-chico: 8px;
}

/* Los mismos papeles, con pasos elegidos para el fondo oscuro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --plano: #0c0e12;
    --superficie: #171a21;
    --superficie-2: #1e222b;
    --tinta: #f1f3f7;
    --tinta-2: #b4bbc8;
    --tinta-3: #868e9c;
    --linea: #272c36;
    --linea-fuerte: #39404d;
    --acento: #3987e5;
    --acento-tinta: #8fbaf3;
    --acento-tenue: #182436;
    --error: #ff9b91;
    --error-fondo: #2c1614;
    --serie-1: #3987e5;
    --serie-2: #d95926;
    --serie-3: #199e70;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -16px rgba(0, 0, 0, .8);
  }
}

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --plano: #0c0e12;
  --superficie: #171a21;
  --superficie-2: #1e222b;
  --tinta: #f1f3f7;
  --tinta-2: #b4bbc8;
  --tinta-3: #868e9c;
  --linea: #272c36;
  --linea-fuerte: #39404d;
  --acento: #3987e5;
  --acento-tinta: #8fbaf3;
  --acento-tenue: #182436;
  --error: #ff9b91;
  --error-fondo: #2c1614;
  --serie-1: #3987e5;
  --serie-2: #d95926;
  --serie-3: #199e70;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -16px rgba(0, 0, 0, .8);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--plano);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

a { color: var(--acento-tinta); }

.envoltorio {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px;
}

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.salto {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 20;
  padding: 10px 16px;
  background: var(--superficie);
  border: 1px solid var(--acento);
  border-radius: var(--radio-chico);
  font-weight: 600;
  text-decoration: none;
}
.salto:focus { top: 12px; }

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- cabecera ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}

.cabecera-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  flex-wrap: wrap;
  padding-block: 8px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--tinta);
  text-decoration: none;
  font-size: .95rem;
}
.marca strong { font-weight: 650; }
.marca-icono { width: 26px; height: 26px; color: var(--acento); flex: none; }

.ajustes { display: flex; align-items: center; gap: 10px; }

.ajuste select {
  padding: 6px 8px;
  font-size: .85rem;
  max-width: 150px;
}

.tema {
  display: inline-flex;
  padding: 2px;
  background: var(--superficie-2);
  border: 1px solid var(--linea);
  border-radius: 999px;
}
.tema button {
  padding: 5px 11px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--tinta-2);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.tema button[aria-pressed="true"] {
  color: var(--superficie);
  background: var(--tinta);
}

/* ---------- portada ---------- */

.portada { padding: 36px 0 20px; max-width: 62ch; }

h1 {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 680;
  line-height: 1.15;
  letter-spacing: -.022em;
}

.entradilla { margin: 0; color: var(--tinta-2); font-size: 1.05rem; }

.aviso {
  margin: 0 0 20px;
  padding: 12px 14px;
  background: var(--error-fondo);
  border-radius: var(--radio-chico);
  color: var(--error);
}

/* ---------- pestañas ---------- */

.pestanas { margin-bottom: 16px; }

.pestanas [role="tablist"] {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--linea);
}
.pestanas [role="tablist"]::-webkit-scrollbar { display: none; }

.pestanas [role="tab"] {
  flex: none;
  padding: 10px 14px;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  color: var(--tinta-2);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
}
.pestanas [role="tab"]:hover { color: var(--tinta); }
.pestanas [role="tab"][aria-selected="true"] {
  color: var(--acento-tinta);
  border-bottom-color: var(--acento);
}

/* ---------- disposición del panel ---------- */

.panel {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding-bottom: 40px;
}
.panel[hidden] { display: none; }

@media (max-width: 860px) {
  .panel { grid-template-columns: minmax(0, 1fr); }

  /* En una pantalla estrecha, dejar el resultado detrás de todo el
     formulario obliga a recorrer diez campos para ver una cifra que ya
     está calculada. `display: contents` disuelve el contenedor de
     resultados y deja ordenar sus hijos junto al formulario, así que la
     cifra grande sube arriba del todo y el detalle se queda debajo. */
  .panel > .resultados { display: contents; }
  .panel > .formulario { order: 2; }
  .resultados > .destacado { order: 1; }
  .resultados > .fichas { order: 3; }
  .resultados > .figura { order: 4; }
  .resultados > .tabla-caja { order: 5; }
  .resultados > .acciones { order: 6; }
}

.formulario,
.resultados > .destacado,
.figura,
.tabla-caja {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.formulario { padding: 20px; position: sticky; top: 76px; }
@media (max-width: 860px) { .formulario { position: static; } }

.formulario-titulo {
  margin: 0 0 4px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.formulario-intro { margin: 0 0 16px; font-size: .9rem; color: var(--tinta-2); }
.formulario-titulo + .campo { margin-top: 16px; }

.campo { margin-bottom: 15px; }
.campo.doble { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }

label {
  display: block;
  margin-bottom: 5px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--tinta-2);
}

input, select {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-size: .98rem;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:hover, select:hover { border-color: var(--tinta-3); }
input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-tenue); outline: none; }
input[aria-invalid="true"] { border-color: var(--error); }

.ayuda { margin: 5px 0 0; font-size: .81rem; color: var(--tinta-3); }

.avanzado {
  margin: 4px 0 14px;
  border-top: 1px solid var(--linea);
  padding-top: 12px;
}
.avanzado > summary {
  font-size: .85rem;
  font-weight: 600;
  color: var(--acento-tinta);
  cursor: pointer;
  list-style: none;
}
.avanzado > summary::-webkit-details-marker { display: none; }
.avanzado > summary::before { content: "＋ "; font-weight: 400; }
.avanzado[open] > summary::before { content: "− "; }
.avanzado[open] > summary { margin-bottom: 14px; }

button {
  font: inherit;
  cursor: pointer;
  border-radius: var(--radio-chico);
}

.secundario {
  width: 100%;
  padding: 9px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--tinta-2);
  background: var(--superficie-2);
  border: 1px solid var(--linea);
}
.secundario:hover { color: var(--tinta); border-color: var(--linea-fuerte); }

.error {
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: .87rem;
  color: var(--error);
  background: var(--error-fondo);
  border-radius: var(--radio-chico);
}
.error[hidden] { display: none; }

/* ---------- resultados ---------- */

/* La columna tiene que poder encogerse por debajo del ancho mínimo de la
   tabla; si no, en el móvil la tabla estira toda la columna de resultados
   y la página entera se va hacia la derecha. */
.resultados {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}
.resultados > * { min-width: 0; }

.destacado { padding: 22px 24px; }

.destacado-etiqueta {
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--tinta-2);
}

.destacado-valor {
  margin: 2px 0 0;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.1rem);
  font-weight: 660;
  line-height: 1.08;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}

.destacado-nota { margin: 8px 0 0; font-size: .87rem; color: var(--tinta-2); }
.destacado-nota:empty { display: none; }

.fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.fichas li {
  padding: 14px 16px;
  background: var(--superficie);
}
.ficha-etiqueta {
  display: block;
  font-size: .78rem;
  color: var(--tinta-2);
}
.ficha-valor {
  display: block;
  margin-top: 2px;
  font-size: 1.16rem;
  font-weight: 640;
  letter-spacing: -.012em;
  overflow-wrap: anywhere;
}

/* ---------- gráfica ---------- */

.figura { margin: 0; padding: 18px; }

.figura > figcaption {
  margin-bottom: 12px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--tinta-2);
}

.grafico-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: .82rem;
  color: var(--tinta-2);
}
.grafico-leyenda[hidden] { display: none; }
.grafico-leyenda li { display: inline-flex; align-items: center; gap: 7px; }

.leyenda-muestra {
  width: 11px; height: 11px;
  border-radius: 3px;
  flex: none;
}

.grafico-lienzo { position: relative; }
.grafico-lienzo svg { display: block; max-width: 100%; }
.grafico-lienzo svg:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.g-linea { stroke: var(--linea); stroke-width: 1; }
.g-base { stroke: var(--linea-fuerte); stroke-width: 1; }
.g-tick { fill: var(--tinta-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.g-eje-titulo { fill: var(--tinta-3); font-size: 11px; font-weight: 600; }
.g-directa { fill: var(--tinta); font-size: 12px; font-weight: 650; }
.g-realce { fill: var(--tinta); opacity: 0; }
.g-realce.activo { opacity: .055; }

.grafico-globo {
  position: absolute;
  top: 4px;
  z-index: 3;
  min-width: 170px;
  padding: 10px 12px;
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  box-shadow: 0 6px 24px -8px rgba(0, 0, 0, .3);
  pointer-events: none;
  font-size: .82rem;
}
.grafico-globo[hidden] { display: none; }
.globo-titulo { margin: 0 0 6px; font-weight: 650; color: var(--tinta-2); font-size: .78rem; }
.grafico-globo dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 14px;
  margin: 0;
  align-items: baseline;
}
.grafico-globo dt { color: var(--tinta-2); display: flex; align-items: center; gap: 7px; }
.grafico-globo dd {
  margin: 0;
  text-align: right;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
}
.grafico-globo .globo-total {
  padding-top: 5px;
  margin-top: 2px;
  border-top: 1px solid var(--linea);
  font-weight: 650;
  color: var(--tinta);
}
.globo-llave {
  width: 12px; height: 3px;
  border-radius: 2px;
  flex: none;
}

/* ---------- tablas ---------- */

.tabla-caja { padding: 4px 0 0; }
.tabla-caja > summary {
  padding: 14px 18px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--tinta-2);
  cursor: pointer;
}
.tabla-caja[open] > summary { border-bottom: 1px solid var(--linea); }

.tabla-scroll { max-height: 420px; overflow: auto; }

table { width: 100%; border-collapse: collapse; font-size: .87rem; }

th, td {
  padding: 8px 12px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--linea);
}
th:first-child, td:first-child { text-align: left; }
th[scope="col"]:nth-child(2):not(:last-child) { text-align: right; }

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--superficie-2);
  font-size: .76rem;
  font-weight: 650;
  color: var(--tinta-2);
  letter-spacing: .02em;
}

tbody td { font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--superficie-2); }
tbody tr.destaca td { font-weight: 650; }

#tabla-factores td:nth-child(2),
#tabla-factores td:nth-child(3) { text-align: left; white-space: normal; }
#tabla-factores td:nth-child(3) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }

/* ---------- acciones ---------- */

.acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.acciones button {
  padding: 8px 14px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--tinta-2);
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
}
.acciones button:hover { color: var(--tinta); border-color: var(--tinta-3); }

.brindis {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 50;
  padding: 10px 18px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--plano);
  background: var(--tinta);
  border-radius: 999px;
  box-shadow: 0 8px 30px -10px rgba(0, 0, 0, .5);
}
.brindis[hidden] { display: none; }

/* ---------- artículo ---------- */

.articulo {
  max-width: 68ch;
  padding: 8px 0 56px;
}

.articulo h2 {
  margin: 36px 0 12px;
  font-size: 1.4rem;
  font-weight: 660;
  letter-spacing: -.015em;
}
.articulo p { margin: 0 0 14px; color: var(--tinta-2); }
.articulo strong { color: var(--tinta); }

.formulas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin: 20px 0 8px;
}
.formula {
  padding: 14px 16px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
}
.formula-nombre {
  margin: 0 0 6px !important;
  font-size: .78rem;
  font-weight: 650;
  color: var(--tinta-3);
}
.formula-cuerpo {
  margin: 0 !important;
  color: var(--tinta) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .89rem;
  overflow-wrap: anywhere;
}

.lista { margin: 0 0 14px; padding-left: 20px; color: var(--tinta-2); }
.lista li { margin-bottom: 10px; }

.faq { display: grid; gap: 8px; }
.faq details {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
}
.faq summary {
  padding: 13px 16px;
  font-weight: 600;
  cursor: pointer;
}
.faq details[open] summary { border-bottom: 1px solid var(--linea); }
.faq details p { margin: 0; padding: 14px 16px; }

/* ---------- pie ---------- */

.pie {
  padding: 24px 0 40px;
  border-top: 1px solid var(--linea);
  font-size: .85rem;
  color: var(--tinta-3);
}
.pie p { margin: 0 0 6px; max-width: 68ch; }
.pie-legal { font-size: .8rem; }

/* ---------- respeto por las preferencias y por el papel ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .cabecera, .pestanas, .acciones, .formulario .secundario, .salto, .brindis { display: none !important; }
  body { background: #fff; }
  .panel { grid-template-columns: 1fr; }
  .formulario, .destacado, .figura, .tabla-caja { box-shadow: none; break-inside: avoid; }
  .tabla-scroll { max-height: none; overflow: visible; }
  .faq details, .tabla-caja, .avanzado { display: block; }
}

/* Mientras un dato está mal, el último resultado bueno se queda a la
   vista pero atenuado: así no desaparece todo por un campo a medio
   escribir, y a la vez se nota que no corresponde a lo que hay puesto. */
.resultados.desactualizado > *:not(.destacado) { opacity: .4; }
.resultados.desactualizado .destacado { opacity: .55; }