/* Tu plan de jubilación — estilos de la calculadora y tokens comunes. Mobile-first; tokens con tema claro y oscuro. */

/* .tema-claro-forzado: contenedor oculto donde se dibujan las gráficas del PDF, siempre con los tokens claros
   (las reglas del tema oscuro solo se aplican a :root, así que este elemento conserva los valores claros). */
:root,
.tema-claro-forzado {
  color-scheme: light;
  --fondo: #f9f9f7;
  --superficie: #fcfcfb;
  --superficie-elevada: #ffffff;
  --superficie-hundida: #f0efec;
  --texto: #0b0b0b;
  --texto-secundario: #52514e;
  --texto-tenue: #6b6a65;
  --borde: rgba(11, 11, 11, 0.12);
  --rejilla: #e1e0d9;
  --eje: #c3c2b7;
  --eje-fuerte: #898781;
  --acento: #2a78d6;
  --acento-texto: #ffffff;
  --acento-suave: #e3eefb;
  --foco-halo: rgba(42, 120, 214, 0.18);
  --error: #c0392b;
  --aviso-fondo: #fff6e0;
  --aviso-borde: #eda100;
  --exito: #157a52;
  --exito-suave: #e1f3ea;

  /* Escenarios (categórico 1-5 en orden fijo; en la gráfica de capital van además con trazo distinto) */
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --serie-4: #eda100;
  --serie-5: #e87ba4;
  /* Flujos (categórico en orden fijo 1-6; el 6, verde, es igual en los dos temas) */
  --flujo-1: #2a78d6;
  --flujo-2: #eb6834;
  --flujo-3: #1baf7a;
  --flujo-4: #eda100;
  --flujo-5: #e87ba4;
  --flujo-6: #008300;

  --radio: 10px;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo: #0d0d0d;
    --superficie: #1a1a19;
    --superficie-elevada: #242422;
    --superficie-hundida: #121211;
    --texto: #f0efec;
    --texto-secundario: #c3c2b7;
    --texto-tenue: #9d9b93;
    --borde: rgba(255, 255, 255, 0.12);
    --rejilla: #2c2c2a;
    --eje: #383835;
    --eje-fuerte: #898781;
    --acento: #3987e5;
    --acento-suave: #18263a;
    --foco-halo: rgba(57, 135, 229, 0.28);
    --error: #ef6b5e;
    --aviso-fondo: #2b2310;
    --aviso-borde: #c98500;
    --exito: #3fbf8a;
    --exito-suave: #11291f;
    --serie-1: #3987e5;
    --serie-2: #d95926;
    --serie-3: #199e70;
    --serie-4: #c98500;
    --serie-5: #d55181;
    --flujo-1: #3987e5;
    --flujo-2: #d95926;
    --flujo-3: #199e70;
    --flujo-4: #c98500;
    --flujo-5: #d55181;
    --flujo-6: #008300;
    --sombra: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo: #0d0d0d;
  --superficie: #1a1a19;
  --superficie-elevada: #242422;
  --superficie-hundida: #121211;
  --texto: #f0efec;
  --texto-secundario: #c3c2b7;
  --texto-tenue: #9d9b93;
  --borde: rgba(255, 255, 255, 0.12);
  --rejilla: #2c2c2a;
  --eje: #383835;
  --eje-fuerte: #898781;
  --acento: #3987e5;
  --acento-suave: #18263a;
  --foco-halo: rgba(57, 135, 229, 0.28);
  --error: #ef6b5e;
  --aviso-fondo: #2b2310;
  --aviso-borde: #c98500;
  --exito: #3fbf8a;
  --exito-suave: #11291f;
  --serie-1: #3987e5;
  --serie-2: #d95926;
  --serie-3: #199e70;
  --serie-4: #c98500;
  --serie-5: #d55181;
  --flujo-1: #3987e5;
  --flujo-2: #d95926;
  --flujo-3: #199e70;
  --flujo-4: #c98500;
  --flujo-5: #d55181;
  --flujo-6: #008300;
  --sombra: none;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 1.15rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; margin-bottom: 0.5rem; }
code { font-size: 0.9em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Botones */
.boton {
  font: inherit; font-size: 0.9rem; border-radius: 8px; padding: 0.45rem 0.8rem; cursor: pointer;
  border: 1px solid var(--borde); background: var(--superficie-elevada); color: var(--texto);
  min-height: 40px;
}
.boton:hover:not(:disabled) { border-color: var(--acento); }
.boton:disabled { opacity: 0.5; cursor: not-allowed; }
.boton-fantasma { background: transparent; border-color: transparent; color: var(--texto-secundario); }
.boton-primario { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
/* Acción destructiva (borra todos los escenarios): con borde como los demás y en rojo al pasar el ratón. */
.boton-peligro { background: transparent; color: var(--texto-secundario); }
.boton.boton-peligro:hover:not(:disabled) { border-color: var(--error); color: var(--error); }

/* Diálogo (Descargar PDF) */
.dialogo {
  width: min(440px, calc(100vw - 32px)); padding: 1.25rem; border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie-elevada); color: var(--texto); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.dialogo::backdrop { background: rgba(0, 0, 0, 0.45); }
.dialogo h2 { margin-bottom: 0.5rem; }
.dialogo fieldset { border: 0; margin: 0.75rem 0 0; padding: 0; }
.lista-escenarios-pdf { display: grid; gap: 0.5rem; }
.lista-escenarios-pdf label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; }
.lista-escenarios-pdf input { width: 18px; height: 18px; accent-color: var(--acento); }
.lista-escenarios-pdf .sin-datos { color: var(--texto-tenue); font-size: 0.82rem; }
.dialogo-acciones { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

/* Cabecera */
.barra {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between;
  padding: 0.75rem 16px; background: var(--superficie); border-bottom: 1px solid var(--borde);
}
.subtitulo { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--texto-tenue); }
.barra-acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Grupos: el informe, el fichero de escenarios y borrar todo. Desde tablet, separados por una línea fina. */
.grupo-acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media (min-width: 600px) {
  .barra-acciones { gap: 0.75rem; }
  .grupo-acciones + .grupo-acciones { padding-left: 0.75rem; border-left: 1px solid var(--borde); }
}

/* Pestañas */
scenario-tabs.contenedor-pestanas {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between;
  padding: 0.6rem 16px; background: var(--superficie); border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 5;
}
/* overflow-x recorta lo que sobresale: el padding (compensado con margen negativo) deja sitio al borde y al foco. */
.pestanas { display: flex; gap: 0.25rem; overflow-x: auto; max-width: calc(100% + 8px); padding: 4px; margin: -4px; }
/* La píldora (.pestana) envuelve el botón de la pestaña y su «×»: dos botones hermanos, no anidados. */
.pestana {
  display: inline-flex; align-items: center; flex: none; min-height: 40px; border-radius: 999px;
  border: 1px solid var(--borde); color: var(--texto-secundario);
}
.pestana.activa { background: var(--acento-suave); color: var(--texto); border-color: var(--acento); }
.pestana-nombre {
  font: inherit; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap;
  padding: 0.45rem 0.85rem; min-height: 38px; border-radius: 999px; cursor: pointer;
  border: 0; background: transparent; color: inherit;
}
.pestana.activa .pestana-nombre { font-weight: 600; }
.pestana:has(.pestana-cerrar) .pestana-nombre { padding-right: 0.25rem; }
.pestana-cerrar {
  font: inherit; font-size: 1.1rem; line-height: 1; width: 28px; height: 28px; margin-right: 6px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: 0; background: transparent; color: var(--texto-tenue);
}
.pestana-cerrar:hover { background: var(--superficie-hundida); color: var(--error); }
input.pestana-editar {
  font: inherit; font-size: 0.92rem; font-weight: 600; width: auto; min-height: 0; height: 30px; margin: 4px 6px 4px 10px; padding: 0 0.5rem;
  border-radius: 999px; border: 1px solid var(--acento); background: var(--superficie-elevada); color: var(--texto);
}
.acciones-pestanas { display: flex; gap: 0.25rem; }
.marca { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; margin-right: 0.35rem; vertical-align: baseline; }
.pestana .marca { margin-right: 0; }
.serie-1 { background: var(--serie-1); }
.serie-2 { background: var(--serie-2); }
.serie-3 { background: var(--serie-3); }
.serie-4 { background: var(--serie-4); }
.serie-5 { background: var(--serie-5); }

/* Disposición: móvil = una columna con cambio de vista */
scenario-tabs, scenario-form, results-summary, capital-chart, cashflow-chart, year-table { display: block; min-width: 0; }
.disposicion { padding: 12px 16px 88px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.panel, fieldset { min-width: 0; }
body[data-vista="datos"] .panel-resultados,
body[data-vista="resultados"] .panel-datos { display: none; }
.cambio-vista {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--superficie); border-top: 1px solid var(--borde);
}
.cambio-vista button, .segmentado button {
  font: inherit; font-size: 0.9rem; min-height: 40px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--borde); background: transparent; color: var(--texto-secundario);
}
.cambio-vista button[aria-pressed="true"], .segmentado button[aria-pressed="true"] {
  background: var(--acento); border-color: var(--acento); color: var(--acento-texto); font-weight: 600;
}

/* Tablet: ambos paneles apilados */
@media (min-width: 600px) {
  .disposicion { padding-bottom: 24px; }
  body[data-vista] .panel-datos, body[data-vista] .panel-resultados { display: block; }
  .cambio-vista { display: none; }
  .formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
}

/* Ordenador: formulario lateral y resultados a la derecha, con un único scroll de página.
   El top del sticky lo ajusta js/lateral-fijo.js para que un formulario largo se desplace con la página. */
@media (min-width: 1024px) {
  .disposicion { grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); align-items: start; padding: 16px 24px 32px; gap: 24px; }
  .panel-datos { position: sticky; top: var(--lateral-top, 72px); }
  .formulario { display: block; }
}

/* Formulario */
.grupo {
  margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); box-shadow: var(--sombra); min-width: 0;
}
.grupo > legend {
  font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-secundario);
  padding: 0 4px; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 22px;
}
.grupo > legend svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--acento); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.campo { margin-top: 20px; }
.campo:first-of-type { margin-top: 4px; }
.campo > label { display: block; font-size: 0.88rem; font-weight: 500; margin-bottom: 4px; }
.entrada { display: flex; align-items: stretch; }
.fecha-partes { display: grid; grid-template-columns: 3fr 2fr; gap: 8px; }
.dos-partes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
input[type="text"], input[type="number"], select {
  font: inherit; width: 100%; min-height: 40px; padding: 0.4rem 0.6rem; border-radius: 8px;
  border: 1px solid var(--borde); background: var(--superficie-elevada); color: var(--texto); min-width: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* Foco en los campos: borde de acento y halo suave pegado al campo, en lugar del contorno general
   (2px separado), que en un formulario resultaba demasiado fuerte. */
:is(input[type="text"], input[type="number"], select):focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--foco-halo); }
/* Campo con unidad: el halo envuelve campo + unidad, que se ven como un solo control. */
.entrada { border-radius: 8px; transition: box-shadow 0.15s; }
.entrada:focus-within { box-shadow: 0 0 0 3px var(--foco-halo); }
.entrada:focus-within input, .entrada:focus-within .unidad { border-color: var(--acento); }
.entrada input:focus { box-shadow: none; }
.entrada input { border-top-right-radius: 0; border-bottom-right-radius: 0; text-align: right; font-variant-numeric: tabular-nums; }
input::placeholder { color: var(--texto-tenue); opacity: 0.8; }
.opcional { font-weight: 400; color: var(--texto-tenue); }
/* Campos obligatorios: asterisco en el color de acento (el rojo queda para los errores). */
.marca-obligatorio, .campo.obligatorio > label::after { color: var(--acento); font-weight: 700; }
.campo.obligatorio > label::after { content: " *"; content: " *" / ""; }
.entrada input:only-child { border-radius: 8px; text-align: left; }
.unidad {
  display: flex; align-items: center; padding: 0 0.6rem; font-size: 0.85rem; color: var(--texto-secundario); white-space: nowrap;
  border: 1px solid var(--borde); border-left: 0; border-radius: 0 8px 8px 0; background: var(--superficie-hundida);
}
.unidad-radios { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 6px; }
.check { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9rem; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--acento); flex: none; }
.ayuda { margin: 4px 0 0; font-size: 0.8rem; color: var(--texto-tenue); }
.error { margin: 4px 0 0; font-size: 0.82rem; color: var(--error); }
.error:empty { display: none; }
.con-error input, .con-error select { border-color: var(--error); }
/* Con error, el borde sigue en rojo aunque el campo tenga el foco. */
.campo.con-error :is(input, select):focus, .campo.con-error .entrada:focus-within :is(input, .unidad) { border-color: var(--error); }
.avanzado { margin-top: 10px; }
.avanzado summary { cursor: pointer; font-size: 0.85rem; color: var(--texto); }

/* Resultados */
/* Cabecera de cada columna (Datos / Resultados): misma altura para que sus primeros bloques queden alineados. */
.barra-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; min-height: 40px; }
/* El borde de un fieldset se dibuja a media altura de su legend (min-height de 22px):
   se resta esa mitad para que el borde del primer grupo coincida con el de la primera tarjeta. */
.panel-datos .barra-panel { margin-bottom: 1px; }
.nota-obligatorios { margin: 0; font-size: 0.8rem; color: var(--texto-tenue); }
.segmentado { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.segmentado button { padding: 0 0.8rem; }
/* Botón de tema: muestra el sol en tema oscuro (pasar a claro) y la luna en tema claro (pasar a oscuro). */
.boton-tema {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; flex: none;
  border: 1px solid transparent; background: transparent; color: var(--texto-secundario);
}
.boton-tema:hover { border-color: var(--borde); color: var(--texto); }
.boton-tema svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icono-sol { display: none; }
:root[data-theme="dark"] .icono-sol { display: block; }
:root[data-theme="dark"] .icono-luna { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icono-sol { display: block; }
  :root:not([data-theme="light"]) .icono-luna { display: none; }
}
.unidades { display: flex; align-items: center; gap: 6px; }
.boton-ayuda {
  font: inherit; font-weight: 700; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; flex: none;
  border: 1px solid var(--borde); background: var(--superficie-elevada); color: var(--texto-secundario);
}
.boton-ayuda[aria-expanded="true"] { border-color: var(--acento); color: var(--acento); }
.ayuda-euros {
  margin: 0 0 16px; padding: 10px 14px; border-radius: 8px; font-size: 0.86rem; color: var(--texto-secundario);
  background: var(--acento-suave); border-left: 3px solid var(--acento);
}
.ayuda-euros p { margin: 0; }
.ayuda-euros p + p { margin-top: 6px; }
.vacio-inicial p { margin: 0 0 8px; color: var(--texto-secundario); font-size: 0.92rem; }
.vacio-inicial .pendientes-titulo { margin-top: 12px; font-weight: 600; color: var(--texto); }
.vacio-inicial ul { margin: 0; padding-left: 1.2rem; font-size: 0.9rem; }
.estado:empty { display: none; }
.estado { color: var(--error); }
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 14px; margin-bottom: 16px; box-shadow: var(--sombra); min-width: 0;
}
.nota { margin: 0 0 8px; font-size: 0.82rem; color: var(--texto-tenue); }
.grafico { position: relative; height: 300px; }
@media (min-width: 1024px) { .grafico { height: 360px; } }

/* Tablas */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: 0.86rem; }
th, td { padding: 0.45rem 0.6rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--rejilla); font-variant-numeric: tabular-nums; }
thead th { font-weight: 600; color: var(--texto-secundario); background: var(--superficie); position: sticky; top: 0; z-index: 1; }

.comparativa th[scope="row"] { text-align: left; font-weight: 500; white-space: normal; min-width: 11rem; }
.comparativa thead th { text-align: right; }
.comparativa td.activa, .comparativa th.activa { background: var(--acento-suave); }
/* Mejor escenario (deja de trabajar antes): recuadro verde alrededor de toda la columna, hecho con
   sombras interiores en cada celda (lados en todas, arriba en la cabecera, abajo en la última fila). */
.comparativa .mejor { box-shadow: inset 2px 0 0 var(--exito), inset -2px 0 0 var(--exito); }
.comparativa thead th.mejor { box-shadow: inset 2px 0 0 var(--exito), inset -2px 0 0 var(--exito), inset 0 2px 0 var(--exito); border-radius: 8px 8px 0 0; }
.comparativa tbody tr:last-child td.mejor { box-shadow: inset 2px 0 0 var(--exito), inset -2px 0 0 var(--exito), inset 0 -2px 0 var(--exito); }
.nombre-escenario {
  font: inherit; font-weight: inherit; color: inherit; background: none; border: 0; padding: 2px 0; cursor: pointer;
  display: inline-flex; align-items: center; text-align: right; border-radius: 4px;
}
.nombre-escenario:hover { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.nombre-escenario[aria-pressed="true"] { cursor: default; text-decoration: none; color: inherit; }
.etiquetas-col { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-bottom: 6px; }
.etiqueta-col { font-size: 0.7rem; font-weight: 700; line-height: 1; padding: 4px 7px; border-radius: 999px; white-space: nowrap; }
.etiqueta-mejor { background: var(--exito-suave); color: var(--exito); border: 1px solid var(--exito); }
.comparativa td { font-weight: 600; white-space: normal; min-width: 8rem; }
.comparativa thead th { white-space: normal; vertical-align: bottom; }
@media (min-width: 1024px) {
  .comparativa th[scope="row"] { min-width: 10rem; }
  .comparativa td { min-width: 6.5rem; }
}
.comparativa th[scope="row"], .comparativa thead th:first-child { position: sticky; left: 0; background: var(--superficie); z-index: 2; }
@media (max-width: 599px) {
  .comparativa th[scope="row"] { min-width: 8rem; max-width: 9rem; }
  .comparativa td { min-width: 6.5rem; }
  .comparativa th, .comparativa td { padding: 0.45rem 0.4rem; }
  .ayuda-fila { display: none !important; }
}
.ayuda-fila { display: block; font-size: 0.75rem; font-weight: 400; color: var(--texto-tenue); }
.aviso-celda { color: var(--error); font-weight: 500; }
.avisos { list-style: none; margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--aviso-fondo); border-left: 3px solid var(--aviso-borde); font-size: 0.85rem; }
.avisos li + li { margin-top: 6px; }

.cabecera-tabla { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cabecera-tabla .nota { margin: 0; }
.tabla-anual { max-height: 520px; overflow: auto; border: 1px solid var(--rejilla); border-radius: 8px; }
.tabla-anual th[scope="row"], .tabla-anual thead th:nth-child(2) {
  position: sticky; left: 0; background: var(--superficie); z-index: 2; text-align: center;
}
.tabla-anual thead th:nth-child(2) { z-index: 3; }
.tabla-anual td.negativo { color: var(--error); font-weight: 600; }
.fase { font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; background: var(--superficie-hundida); color: var(--texto-secundario); }
.fase-trabajo { background: var(--acento-suave); }
.vacio { color: var(--texto-tenue); }

.notas-metodo summary { cursor: pointer; font-weight: 600; }
.notas-metodo ul { margin: 10px 0 0; padding-left: 1.2rem; font-size: 0.85rem; color: var(--texto-secundario); }
.notas-metodo li + li { margin-top: 6px; }
.notas-metodo .enlaces-notas { margin: 12px 0 0; font-size: 0.85rem; }
.vacio-inicial .primera-vez { margin-top: 14px; }