@charset "UTF-8";

/* ==========================================================================
   MiRenta — hoja de estilos única.
   Tema oscuro por defecto, con variante clara automática según el sistema.
   ========================================================================== */

:root {
  --fondo: #0d1117;
  --fondo-panel: #161b22;
  --fondo-panel-alt: #1c2129;
  --borde: #262c36;
  --borde-suave: #21262d;
  --texto: #e6edf3;
  --texto-tenue: #8b949e;
  --acento: #58a6ff;
  --acento-suave: rgba(88, 166, 255, 0.14);
  --verde: #3fb950;
  --verde-suave: rgba(63, 185, 80, 0.14);
  --naranja: #f0883e;
  --rojo: #f85149;
  --morado: #a371f7;
  --amarillo: #d29922;
  --grafica-eje: #30363d;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.25);
  --radio: 12px;
  --radio-sm: 8px;

  --col-autonomo: #f0883e;
  --col-sl-nomina: #58a6ff;
  --col-sl-dividendos: #3fb950;
}

@media (prefers-color-scheme: light) {
  :root {
    --fondo: #f6f8fa;
    --fondo-panel: #ffffff;
    --fondo-panel-alt: #f6f8fa;
    --borde: #d8dee4;
    --borde-suave: #e6eaef;
    --texto: #1f2328;
    --texto-tenue: #636c76;
    --acento: #0969da;
    --acento-suave: rgba(9, 105, 218, 0.1);
    --verde: #1a7f37;
    --verde-suave: rgba(26, 127, 55, 0.1);
    --naranja: #bc4c00;
    --rojo: #cf222e;
    --morado: #8250df;
    --amarillo: #9a6700;
    --grafica-eje: #c8d1da;
    --sombra: 0 1px 2px rgba(31, 35, 40, 0.08), 0 8px 24px rgba(31, 35, 40, 0.06);

    --col-autonomo: #bc4c00;
    --col-sl-nomina: #0969da;
    --col-sl-dividendos: #1a7f37;
  }
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark light;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.25;
}

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  background: var(--fondo-panel-alt);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- Cabecera */

.cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--borde);
  background: var(--fondo-panel);
}

.cabecera-titulo h1 {
  font-size: 22px;
  letter-spacing: -0.02em;
}

.cabecera-titulo p {
  margin: 2px 0 0;
  color: var(--texto-tenue);
  font-size: 13px;
}

.cabecera-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 12px;
  color: var(--texto-tenue);
  background: var(--fondo-panel-alt);
}

/* Etiqueta solo para lectores de pantalla: el selector de comunidad se explica
   solo visualmente, pero sin texto no se sabe de que es. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Las comunidades que no se pueden elegir se ven, pero apagadas. */
select option:disabled {
  color: var(--texto-tenue);
}

/* Selector a la altura del resto de campos de la entrada. */
.campo-select {
  width: 100%;
  margin-top: 8px;
  padding: 9px 10px;
  font-size: 14px;
}

.chip-boton {
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}

.chip-boton:hover {
  color: var(--acento);
  border-color: var(--acento);
}

/* ------------------------------------------------------------------ Layout */

main {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 28px) clamp(16px, 4vw, 40px) 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel {
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px;
  box-shadow: var(--sombra);
}

.panel-cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.panel-cabecera h2 {
  font-size: 16px;
}

.sub {
  margin: 4px 0 0;
  color: var(--texto-tenue);
  font-size: 13px;
  max-width: 62ch;
}

/* --------------------------------------------------------------- Controles */

/* El panel de controles se fija arriba para poder mover sliders y ver los
   números cambiar sin perderlos de vista. Pero con el bloque del cónyuge
   desplegado pasa de ~230px a ~380px de alto y, en pantallas normales, taparía
   media comparativa y la gráfica. Así que solo se fija si la ventana da de sí. */
.controles {
  position: static;
}

@media (min-height: 900px) {
  .controles {
    position: sticky;
    top: 0;
    z-index: 20;
  }
}

.pista {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  font-size: 10px;
  cursor: help;
  text-transform: none;
  letter-spacing: 0;
}

/* El campo numérico es una entrada de pleno derecho, no una etiqueta: tiene que
   parecerlo. Caja visible en reposo, marcada al pasar por encima y resaltada al
   enfocar. */
.control-valor {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 10px;
}

/* Al enfocar, seleccionar todo de un golpe es el gesto habitual: se refuerza
   con el color de selección del acento. */
.control-valor input[type="number"]::selection {
  background: var(--acento);
  color: #fff;
}

.unidad {
  font-size: 17px;
  font-weight: 600;
  color: var(--texto-tenue);
}

/* Deslizadores */
.deslizador {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--borde);
  outline: none;
  cursor: pointer;
}

.etq-inline {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-tenue);
}

.segmentado {
  display: inline-flex;
  background: var(--fondo-panel-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  padding: 2px;
  gap: 2px;
}

.segmentado button {
  border: none;
  background: transparent;
  color: var(--texto-tenue);
  font: 500 13px/1 inherit;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.segmentado button:hover {
  color: var(--texto);
}

.segmentado button[aria-checked="true"] {
  background: var(--acento);
  color: #fff;
}

select,
input[type="text"] {
  background: var(--fondo-panel-alt);
  border: 1px solid var(--borde);
  color: var(--texto);
  border-radius: var(--radio-sm);
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
}

select:focus,
input[type="text"]:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--texto-tenue);
  cursor: pointer;
  white-space: nowrap;
}

.check input {
  accent-color: var(--acento);
}

/* Botones */
.btn-primario,
.btn-secundario,
.btn-peligro {
  border-radius: var(--radio-sm);
  font: 500 13px/1 inherit;
  padding: 9px 14px;
  cursor: pointer;
  border: 1px solid var(--borde);
  background: var(--fondo-panel-alt);
  color: var(--texto);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-primario {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

.btn-primario:hover {
  filter: brightness(1.1);
}

.btn-secundario:hover {
  border-color: var(--acento);
  color: var(--acento);
}

.btn-peligro:hover {
  border-color: var(--rojo);
  color: var(--rojo);
}

/* ---------------------------------------------------------------- Cónyuge */

.bloque-conyuge {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--borde-suave);
}

/* Interruptor tipo switch */
.interruptor {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.interruptor input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.interruptor-pista {
  position: relative;
  width: 38px;
  height: 21px;
  border-radius: 999px;
  background: var(--borde);
  transition: background 0.18s;
  flex-shrink: 0;
}

.interruptor-pista::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--fondo-panel);
  transition: transform 0.18s;
}

.interruptor input:checked + .interruptor-pista {
  background: var(--acento);
}

.interruptor input:checked + .interruptor-pista::after {
  transform: translateX(17px);
}

.interruptor input:focus-visible + .interruptor-pista {
  box-shadow: 0 0 0 3px var(--acento-suave);
}

.interruptor-etq {
  font-size: 13px;
  font-weight: 600;
}

.campo-compacto {
  width: 110px;
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  color: var(--texto);
  font: 600 14px/1 inherit;
  font-variant-numeric: tabular-nums;
  padding: 8px 10px;
  -moz-appearance: textfield;
}

.campo-compacto::-webkit-outer-spin-button,
.campo-compacto::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.campo-compacto:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

@media (max-width: 760px) {
}

/* ------------------------------------------------------------- Comparativa */

.grupo-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 8px 0 -4px;
}

.grupo-cabecera h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-tenue);
}

.grupo-delta {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.grupo-delta.positivo {
  color: var(--verde);
}

.grupo-delta.negativo {
  color: var(--rojo);
}

.grupo-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.tarjeta-conyuge {
  border-left: 1px solid var(--morado);
}

.metrica-conyuge b {
  color: var(--acento);
}

.tarjeta-pie-conyuge {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--borde-suave);
}

.comparativa {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tarjeta {
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-top: 3px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
  box-shadow: var(--sombra);
  transition: border-color 0.2s, transform 0.2s;
}

.tarjeta-autonomo {
  border-top-color: var(--col-autonomo);
}
.tarjeta-sl-nomina {
  border-top-color: var(--col-sl-nomina);
}
.tarjeta-sl-dividendos {
  border-top-color: var(--col-sl-dividendos);
}

.tarjeta-mejor {
  border-color: var(--verde);
  box-shadow: var(--sombra), 0 0 0 1px var(--verde-suave);
}

.tarjeta-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
}

.tarjeta-cabecera h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.insignia {
  background: var(--verde-suave);
  color: var(--verde);
  border: 1px solid var(--verde);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.cifra {
  margin: 14px 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.cifra-valor {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.cifra-etq {
  width: 100%;
  order: 3;
  font-size: 12px;
  color: var(--texto-tenue);
}

.cifra-delta {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cifra-delta.negativo {
  color: var(--rojo);
}
.cifra-delta.neutro {
  color: var(--texto-tenue);
}

/* Barra de composición */
.barra-composicion {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--fondo-panel-alt);
  margin-bottom: 14px;
}

.barra-seg {
  transition: width 0.25s ease;
}

.seg-neto {
  background: var(--verde);
}
.seg-retenido {
  background: var(--morado);
}
.seg-reta {
  background: var(--naranja);
}
.seg-is {
  background: var(--acento);
}
.seg-irpf {
  background: var(--rojo);
}
.seg-ahorro {
  background: var(--amarillo);
}

/* Métricas */
.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  padding: 12px;
  background: var(--fondo-panel-alt);
  border-radius: var(--radio-sm);
  margin-bottom: 14px;
}

.metricas div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.metricas span {
  font-size: 11px;
  color: var(--texto-tenue);
}

.metricas b {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.metrica-retenido b {
  color: var(--morado);
}

/* Desglose */
.desglose {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--borde-suave);
}

.linea:last-child {
  border-bottom: none;
}

.linea-etq {
  display: flex;
  flex-direction: column;
  color: var(--texto-tenue);
}

.linea-nota {
  font-size: 11px;
  font-style: normal;
  opacity: 0.75;
}

.linea-valor {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* EL CRITERIO, que antes no habia:
 *
 *   · La ETIQUETA siempre en gris. La columna izquierda se lee como una lista;
 *     no compite por atencion.
 *   · El COLOR DEL IMPORTE dice UNA sola cosa: adonde va ese dinero.
 *        entra          -> texto normal
 *        se va en costes-> gris (sale, pero es de la actividad)
 *        se va en impuestos y cotizaciones -> ROJO
 *        se queda dentro de la sociedad    -> morado (dinero tuyo sin tributar)
 *   · El PESO dice jerarquia, y solo eso: detalle < subtotal < resultado.
 *
 * Antes un ingreso y un gasto se pintaban IGUAL —solo los separaba el signo— y
 * en cambio el rojo distinguia "impuesto" de "gasto", que es una distincion
 * fiscal y no humana: para quien lee, la gestoria y la cuota de RETA son lo
 * mismo, dinero que se va. Ahora la escala de color va de lo que entra a lo que
 * se pierde, que es lo que la app quiere que se entienda. */

.linea-gasto .linea-valor {
  color: var(--texto-tenue);
}

.linea-impuesto .linea-valor {
  color: var(--rojo);
}

.linea-subtotal {
  font-weight: 600;
}

.linea-subtotal .linea-etq,
.linea-subtotal .linea-valor {
  color: var(--texto);
}

/* El dinero que se queda dentro es una categoria de verdad distinta: es tuyo
   pero todavia no ha pasado por tu IRPF. Ahora bien, con reparto del 100 % ese
   importe es SIEMPRE cero, y destacar un cero en el color mas raro de la
   pantalla era llamar la atencion sobre la unica linea que no dice nada. Solo
   se colorea cuando de verdad queda algo dentro. */
.linea-retenido .linea-valor {
  color: var(--texto-tenue);
}

.linea-retenido.tiene-retenido .linea-valor {
  color: var(--morado);
  font-weight: 600;
}

.linea-resultado {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 2px solid var(--borde);
  font-weight: 700;
  font-size: 15px;
}

.linea-resultado .linea-etq,
.linea-resultado .linea-valor {
  color: var(--verde);
}

.tarjeta-pie {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--texto-tenue);
  line-height: 1.45;
}

.aviso-tarjeta {
  margin: 10px 0 0;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--amarillo);
  background: rgba(210, 153, 34, 0.1);
  border: 1px solid rgba(210, 153, 34, 0.35);
  border-radius: var(--radio-sm);
}

/* Notas de lectura: mismo contenido de siempre, pero calladas. Van plegadas
   para que el amarillo quede reservado a lo que de verdad exige una decision. */
.notas-resultado {
  margin-top: 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--fondo-panel-alt);
}

.notas-resultado > summary {
  cursor: pointer;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-tenue);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* El triangulo por defecto se sustituye por uno propio, que gira al abrir. */
.notas-resultado > summary::-webkit-details-marker {
  display: none;
}

.notas-resultado > summary::before {
  content: '\203A';  /* › escapado: ver la nota de @charset */
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.notas-resultado[open] > summary::before {
  transform: rotate(90deg);
}

.notas-resultado > summary:hover {
  color: var(--texto);
}

.notas-cuenta {
  margin-left: auto;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-tenue);
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: 999px;
}

.nota-resultado {
  margin: 0;
  padding: 8px 14px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--texto-tenue);
  border-top: 1px solid var(--borde);
}

/* ----------------------------------------------------------------- Gráfica */

.grafica-contenedor {
  position: relative;
  height: clamp(280px, 38vh, 420px);
}

.grafica-contenedor canvas {
  display: block;
}

.tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--fondo-panel-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  padding: 10px 12px;
  font-size: 12px;
  box-shadow: var(--sombra);
  min-width: 210px;
  z-index: 5;
}

.tt-titulo {
  font-weight: 600;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--borde-suave);
}

.tt-fila {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
}

.tt-etq {
  flex: 1;
  color: var(--texto-tenue);
}

.tt-fila b {
  font-variant-numeric: tabular-nums;
}

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.leyenda-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 5px 11px;
  font: 500 12px/1 inherit;
  color: var(--texto);
  cursor: pointer;
  transition: opacity 0.15s;
}

.leyenda-item.apagada {
  opacity: 0.42;
}

.leyenda-color {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}

.cruce-resumen {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: var(--acento-suave);
  border-radius: var(--radio-sm);
  font-size: 13px;
  color: var(--texto);
}

/* ------------------------------------------------------------- Escenarios */

.guardar-form {
  display: flex;
  gap: 8px;
}

.lista-escenarios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.escenario {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--fondo-panel-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
}

.escenario-activo {
  border-color: var(--acento);
}

.escenario-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 240px;
}

.escenario-info span {
  font-size: 12px;
  color: var(--texto-tenue);
}

.escenario-acciones {
  display: flex;
  gap: 8px;
}

.vacio {
  color: var(--texto-tenue);
  font-size: 13px;
  padding: 12px 0;
}

/* ---------------------------------------------------------- Pie y diálogo */

.pie {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px) 40px;
  color: var(--texto-tenue);
  font-size: 12px;
  line-height: 1.6;
}

.pie p {
  margin: 0 0 4px;
}

.pie-meta {
  opacity: 0.75;
}

/* La advertencia general. Presente y legible, pero sin voz de aviso legal: no
   compite con nada porque no hay ninguna otra igual en toda la app. */
.pie-aviso {
  max-width: 78ch;
  line-height: 1.6;
  text-wrap: pretty;
}

.dialogo {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-panel);
  color: var(--texto);
  max-width: min(760px, 92vw);
  padding: 0;
  box-shadow: var(--sombra);
}

.dialogo::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.dialogo-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  background: var(--fondo-panel);
}

.dialogo-cabecera h2 {
  font-size: 16px;
}

.btn-cerrar {
  background: transparent;
  border: none;
  color: var(--texto-tenue);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.btn-cerrar:hover {
  color: var(--texto);
}

.dialogo-cuerpo {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
  font-size: 13px;
}

.dialogo-cuerpo h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-tenue);
  margin: 20px 0 8px;
}

.dialogo-cuerpo h3:first-child {
  margin-top: 0;
}

.dialogo-cuerpo ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--texto-tenue);
}

.lista-verificar {
  list-style: none;
  padding-left: 0;
}

.lista-verificar li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--fondo-panel-alt);
  border-left: 2px solid var(--amarillo);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
}

.lista-verificar code {
  font-size: 11px;
  color: var(--amarillo);
  background: transparent;
  padding: 0;
}

/* Aviso flotante */
.aviso-flotante {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--fondo-panel-alt);
  border: 1px solid var(--acento);
  color: var(--texto);
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13px;
  box-shadow: var(--sombra);
  z-index: 60;
}

.error {
  border-color: var(--rojo);
}

.error pre {
  background: var(--fondo-panel-alt);
  padding: 10px 12px;
  border-radius: var(--radio-sm);
  overflow-x: auto;
}

@media (max-width: 700px) {
  .controles {
    position: static;
  }
  .guardar-form {
    width: 100%;
  }
  .guardar-form input {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* --------------------------------------------------------- Fuentes del pie */

.pie-fuentes {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--borde);
}

.pie-fuentes h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto);
  margin-bottom: 6px;
}

.pie-intro {
  max-width: 78ch;
  margin: 0 0 16px;
}

.lista-fuentes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px 28px;
}

.lista-fuentes li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 11px;
  border-left: 2px solid var(--borde);
}

.fuente-titulo {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--acento);
  text-decoration: none;
}

a.fuente-titulo:hover {
  text-decoration: underline;
}

.fuente-sin-enlace {
  color: var(--texto);
}

.fuente-sostiene {
  font-size: 12px;
  line-height: 1.5;
  color: var(--texto-tenue);
}

.dialogo-cuerpo .lista-fuentes {
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Escenario inicial (pin) */
.btn-icono {
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  color: var(--texto-tenue);
  font-size: 15px;
  line-height: 1;
  padding: 8px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.btn-icono:hover {
  color: var(--amarillo);
  border-color: var(--amarillo);
}

.btn-icono.fijado {
  color: var(--amarillo);
  border-color: var(--amarillo);
}

.escenario-inicial {
  border-color: var(--amarillo);
}

.campo-mini {
  width: 62px;
  text-align: center;
}

.sufijo-inline {
  font-size: 12px;
  color: var(--texto-tenue);
  margin-left: -4px;
}

/* ------------------------------------------------- Revisión de la Renta */

.panel-revision {
  border-left: 3px solid var(--acento);
}

.revision-criterio {
  margin: 0 0 14px;
  max-width: 88ch;
  font-size: 13.5px;
  line-height: 1.6;
}

.revision-validacion {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--verde-suave);
  border: 1px solid var(--verde);
  border-radius: var(--radio-sm);
  font-size: 13px;
}

.revision-validacion b {
  color: var(--verde);
}

.revision-validacion span {
  color: var(--texto-tenue);
  line-height: 1.55;
}

.revision-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-hallazgo {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid currentColor;
}

.chip-correccion {
  color: var(--acento);
  background: var(--acento-suave);
}
.chip-aviso {
  color: var(--amarillo);
  background: rgba(210, 153, 34, 0.1);
}
.chip-planificacion {
  color: var(--morado);
  background: rgba(163, 113, 247, 0.1);
}
.chip-pendiente {
  color: var(--texto-tenue);
  background: var(--fondo-panel-alt);
}

.revision-detalle {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--borde-suave);
}

.revision-origen {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--texto-tenue);
}

.lista-hallazgos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hallazgo {
  padding: 14px 16px;
  background: var(--fondo-panel-alt);
  border-radius: var(--radio-sm);
  border-left: 3px solid var(--borde);
}

.hallazgo-correccion { border-left-color: var(--acento); }
.hallazgo-aviso { border-left-color: var(--amarillo); }
.hallazgo-planificacion { border-left-color: var(--morado); }
.hallazgo-pendiente { border-left-color: var(--texto-tenue); }

.hallazgo-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.hallazgo-cabecera b {
  font-size: 14px;
}

.hallazgo-importe {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hallazgo-detalle,
.hallazgo-uso {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--texto-tenue);
  max-width: 92ch;
}

.hallazgo-uso {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--borde);
}

.hallazgo-uso b {
  color: var(--texto);
}

/* ------------------------------------------------------------ Optimizador */

.panel-optimizador {
  border-left: 3px solid var(--verde);
}

.optimizador-topes {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  padding: 14px 16px;
  background: var(--fondo-panel-alt);
  border-radius: var(--radio-sm);
}

.optimizador-nota {
  margin: 0;
  font-size: 12px;
  color: var(--texto-tenue);
  flex: 1;
  min-width: 240px;
}

.optimizador-resultado {
  margin-top: 20px;
}

.opt-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: 12px;
}

.opt-cifra {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.opt-etq {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-tenue);
}

.opt-cifra b {
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.opt-cifra-mejor b {
  color: var(--verde);
}

.opt-flecha {
  font-size: 22px;
  color: var(--texto-tenue);
}

.opt-mejora {
  margin-left: auto;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--texto-tenue);
}

.opt-mejora.positiva {
  color: var(--verde);
}

.opt-mejora span {
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-tenue);
}

.opt-receta {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--verde-suave);
  border-radius: var(--radio-sm);
  font-size: 13.5px;
}

.tabla-scroll {
  overflow-x: auto;
  margin-top: 14px;
}

.tabla-opt {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 720px;
}

.tabla-opt th,
.tabla-opt td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--borde-suave);
  white-space: nowrap;
}

.tabla-opt th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-tenue);
  font-weight: 600;
}

.tabla-opt .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabla-opt .destacado {
  font-weight: 700;
}

.tabla-opt .fila-mejor {
  background: var(--verde-suave);
}

.btn-mini {
  padding: 5px 10px;
  font-size: 12px;
}

.opt-pie {
  margin: 12px 0 0;
  font-size: 11.5px;
  color: var(--texto-tenue);
}

/* Que es esta tabla: alternativas evaluadas, no una lista de cosas que elegir. */
.opt-intro {
  margin: 2px 0 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--texto-tenue);
  max-width: 82ch;
  text-wrap: pretty;
}

.opt-intro b {
  color: var(--texto);
  font-weight: 650;
}

.opt-subtitulo {
  margin: 20px 0 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-tenue);
}

/* ==========================================================================
   FLUJO NUEVO: entrada mínima -> resultado -> ajuste manual
   ========================================================================== */

.panel-entrada {
  border-left: 3px solid var(--acento);
}

/* Rejilla EXPLICITA, no auto-fit. Con auto-fit las columnas salian todas
   iguales aunque su contenido no lo es: la de gastos mide 200 px de alto
   —selector y ayuda incluidos— y la de ingresos 62, con lo que el panel quedaba
   lleno de hueco muerto. Ademas auto-fit generaba una columna vacia de 0 px.

   TRES columnas y dos filas, y no seis columnas en una: con el campo nuevo de
   «Tu situacion hoy» eran seis, a unos 200 px cada una, donde no cabe ni el
   segmentado ni el selector de comunidad. Ademas la reja de dos filas agrupa lo
   que va junto — arriba el dinero (ingresos, gastos, lo que necesitas sacar),
   abajo quien y donde (situacion, comunidad, familia) — que es el orden en el
   que se contestan las preguntas. */
.entrada-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 28px;
  align-items: start;
}

@media (max-width: 1100px) {
  .entrada-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 620px) {
  .entrada-grid {
    grid-template-columns: 1fr;
  }
}

.campo-grande label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-tenue);
}

.campo-destacado label {
  color: var(--acento);
}

.campo-valor {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.campo-valor input[type="number"] {
  width: 100%;
  max-width: 180px;
  background: var(--fondo-panel-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  color: var(--texto);
  font: 700 26px/1.2 inherit;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  padding: 8px 12px;
  -moz-appearance: textfield;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.campo-valor input[type="number"]::-webkit-outer-spin-button,
.campo-valor input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.campo-valor input[type="number"]:hover {
  border-color: var(--acento);
}

.campo-valor input[type="number"]:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

.campo-destacado .campo-valor input[type="number"] {
  border-color: var(--acento);
}

.campo-nota {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
}

/* Que entra y que no entra en los gastos. Va a la vista y no en el tooltip
   porque meter aqui la cuota de autonomos la contaria dos veces, y ese error
   no lo detecta nadie mirando el resultado. */
.campo-ayuda {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--texto-tenue);
}

.campo-ayuda b {
  color: var(--texto);
  font-weight: 600;
}

.campo-ayuda .ayuda-si,
.campo-ayuda .ayuda-no {
  font-weight: 600;
}

.campo-ayuda .ayuda-si {
  color: var(--verde, #2f7d52);
}

.campo-ayuda .ayuda-no {
  color: var(--rojo, #b3261e);
}

/* Selector de nivel de gasto, pegado bajo el campo de la entrada. Se deja
   discreto a proposito: es un atajo, no el dato. El dato es el importe. */
.selector-nivel {
  display: block;
  width: 100%;
  margin-top: 8px;
  font-size: 13px;
}

/* Los gastos estimados por porcentaje se marcan: son una suposicion de la app,
   no un dato del usuario, y tiene que notarse de un vistazo. */
.campo-nota.nota-estimada {
  color: var(--aviso-texto, #8a6d3b);
  font-style: italic;
}

.campo-familia {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.familia-campos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 6px;
}

.familia-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.interruptor-compacto .interruptor-etq {
  font-size: 12.5px;
  font-weight: 500;
}

/* Pie del panel de entrada: la ayuda de gastos y la nota de que se recalcula
   solo. Dos columnas para que ninguna de las dos se estire a 1.276 px, que a
   ese ancho un parrafo de 12 px es ilegible. */
.entrada-accion {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: start;
  gap: 14px 34px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--borde-suave);
}

.entrada-accion .estado-calculo {
  grid-column: 1 / -1;
}

@media (max-width: 820px) {
  .entrada-accion {
    grid-template-columns: 1fr;
  }
}

.btn-grande {
  padding: 13px 22px;
  font-size: 14.5px;
  font-weight: 600;
}

.entrada-nota {
  margin: 0;
  flex: 1;
  min-width: 260px;
  font-size: 12.5px;
  color: var(--texto-tenue);
  line-height: 1.55;
}

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

.panel-resultado {
  border-left: 3px solid var(--verde);
}

.res-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: 18px;
}

.res-cabecera h2 {
  font-size: 17px;
}

.res-cabecera-alerta h2 {
  color: var(--amarillo);
}

.res-titular {
  padding: 8px 14px;
  background: var(--verde-suave);
  border: 1px solid var(--verde);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--verde);
  white-space: nowrap;
}

.res-receta {
  margin: 0 0 20px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
}

.res-receta li::marker {
  color: var(--acento);
  font-weight: 700;
  /* Punto, no numero: la lista dejo de ser <ol> a proposito. */
  font-size: 1.1em;
}

/* El resultado de toda la app. Antes pesaba MENOS que los avisos amarillos que
   tenia debajo: caja gris, 24 px de cifra, contra 264 px de amarillo. Ahora
   lleva el acento verde a la izquierda y el cuerpo que le corresponde. */
.res-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px 28px;
  padding: 20px 22px;
  margin: 18px 0;
  background: var(--fondo-panel-alt);
  border-radius: var(--radio-sm);
  border-left: 3px solid var(--verde);
}

.res-cifra {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.res-cifra span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-tenue);
}

.res-cifra {
  min-width: 0;
}

.res-cifra b {
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

/* No todo lo que va en esta tira es una cifra. El regimen de IS es una ETIQUETA
   ("Microempresa 2026 (19 % / 21 %)"), y a 26 px de numero tabular se comia la
   fila entera y competia con los importes, que son lo que hay que leer. */
.res-cifra b.res-cifra-texto {
  font-size: 17px;
  font-variant-numeric: normal;
  line-height: 1.3;
}

/* La cifra que responde a la pregunta va mas grande que las de contexto. */
.res-cifra-principal b {
  font-size: 38px;
  line-height: 1.05;
}

.res-cifra em {
  font-size: 11.5px;
  font-style: normal;
  color: var(--texto-tenue);
  line-height: 1.4;
}

.res-cifra-principal b {
  color: var(--verde);
}

.res-cifra-total {
  border-left: 2px solid var(--verde);
  padding-left: 14px;
}

.res-cifra b.retenido {
  color: var(--morado);
}

.res-cifra b.negativo {
  color: var(--rojo);
}

/* ---------------------------------------------------------- Ajuste manual */

.panel-editar .controles-grid {
  margin-top: 4px;
}

.chip-selector {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px 3px 11px;
}

.chip-selector select {
  background: transparent;
  border: none;
  color: var(--texto);
  font: 600 12px/1 inherit;
  padding: 4px 2px;
  cursor: pointer;
}

.chip-selector select:focus {
  outline: none;
  box-shadow: none;
}

.editar-subtitulo {
  margin: 24px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--borde-suave);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-tenue);
}

/* Con una sola tarjeta no tiene sentido estirarla a todo el ancho. */
/* Una sola tarjeta: ocupa su columna entera. El tope de 560 px existia para
   que una tarjeta suelta no se estirase a lo ancho de la pantalla, pero dentro
   del detalle vive en una columna de ~920 px con los mandos al lado, asi que
   solo dejaba 364 px de hueco blanco a su derecha. */
.grupo-fila-solo {
  grid-template-columns: minmax(320px, 1fr);
}

.panel-detalle {
  border-left: 3px solid var(--acento);
}

.acciones-fila {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

/* -------------------------------------------- Detalle: tarjeta + mandos */

/* La tarjeta a la izquierda y los mandos a su derecha: se ve el mando y su
   efecto sin tener que desplazarse. */
/* Una sola columna. La segunda era el panel «Ajustar», que ya no existe: sus
   cifras se editan ahora en su propia linea del desglose y sus modos viven en
   una tira dentro de la ficha. El desglose se queda con todo el ancho, que es
   justo lo que le hacia falta para que las lineas largas no se partieran. */
.detalle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

/* En una columna estrecha todo se apila. */
.mandos .controles-grid,
.mandos .conyuge-campos,
.mandos .conyuge-opciones {
  grid-template-columns: 1fr;
  display: grid;
  gap: 16px;
}

@media (max-width: 980px) {
  .detalle-grid {
    grid-template-columns: 1fr;
  }
  /* En una sola columna, los mandos van DELANTE del desglose. Detras quedaban
     a 1.805 px de scroll y no llegaba nadie. */
  #bloque-editar {
    order: -1;
  }
  #comparativa {
    order: 1;
  }
}

/* «Ajustar» como <details>: el titular es la manija, y solo se comporta como
   tal cuando de verdad se puede plegar (en escritorio va siempre abierto). */
.mandos > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* En pantallas anchas el panel esta siempre abierto: la flecha solo confunde. */
@media (min-width: 981px) {
}

/* ------------------------------------------------- Tabla en pantalla estrecha */

/* Cinco columnas en 295 px visibles obligaban a arrastrar la tabla de lado,
   que en un movil no hace nadie. Se quedan las dos que deciden: el camino y lo
   que deja en casa. El resto del detalle esta a un toque, en el desglose. */
@media (max-width: 620px) {
  .tabla-opt .col-secundaria {
    display: none;
  }
  /* Y hay que soltar el ancho minimo: con 720 px forzados la tabla seguia
     arrastrandose de lado aunque solo quedasen dos columnas. */
  .tabla-opt {
    min-width: 0;
  }
  /* El `nowrap` mantiene alineadas las cifras en escritorio, pero aqui el
     nombre del camino («Autónomo · con colaborador · declaración individual»)
     no cabe de una pieza. Se deja envolver SOLO esa columna: los importes
     siguen sin partirse. */
  .tabla-opt td:first-child,
  .tabla-opt th:first-child {
    white-space: normal;
  }
  .tabla-opt th,
  .tabla-opt td {
    padding: 8px 6px;
  }
}

/* Filas de la tabla: el camino entero es el control */
.fila-camino {
  cursor: pointer;
  transition: background 0.12s;
}

.fila-camino:hover {
  background: var(--acento-suave);
}

.fila-camino:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}

.fila-camino.fila-activa {
  background: var(--acento-suave);
  box-shadow: inset 3px 0 0 var(--acento);
}

/* Ajustes para que los mandos quepan en la columna estrecha: varios bloques
   traían anchos y rellenos pensados para ocupar toda la página. */
.mandos .conyuge-campos {
  padding: 0;
  background: transparent;
  margin-top: 12px;
}

/* La nota "≈ x €/mes" pasa debajo en vez de empujar el campo fuera del panel. */
.mandos .mensual {
  margin-left: 0;
  width: 100%;
  order: 3;
}

.tabla-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: 20px;
}

.tabla-cabecera .opt-subtitulo {
  margin: 0;
}

/* Aviso informativo (no es una advertencia) */
.aviso-info {
  color: var(--acento);
  background: var(--acento-suave);
  border-color: var(--acento);
}

/* El atributo `hidden` viene del navegador con `display: none`, pero cualquier
   regla propia que declare `display` lo pisa (ocurría con `.control-inline`,
   que es flex). Esto lo blinda: si algo está hidden, no se ve. */
[hidden] {
  display: none !important;
}

/* Que el campo y su unidad quepan en la misma línea dentro de la columna
   estrecha, y que solo la nota "≈ x €/mes" baje debajo. */
.mandos .control-valor input[type='text'],
.mandos .control-valor input[type='number'] {
  flex: 1 1 auto;
  min-width: 0;
}

.etq-suelta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.res-nota {
  margin: -8px 0 18px;
  padding-left: 22px;
  font-size: 13px;
  color: var(--texto-tenue);
}

.segmentado-mini button {
  padding: 5px 10px;
  font-size: 12px;
}

.segmentado button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* Estado del cálculo automático (sustituye al botón «Recalcular») */
.estado-calculo {
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
}

.estado-calculo[data-estado='pendiente'],
.estado-calculo[data-estado='calculando'] {
  color: var(--acento);
}

.estado-calculo[data-estado='faltan'] {
  color: var(--amarillo);
  font-weight: 500;
}

.estado-calculo[data-estado='listo'] {
  display: none;
}

/* ------------------------------------------------------- Fuentes plegadas */

.pie-fuentes > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.pie-fuentes > summary::-webkit-details-marker {
  display: none;
}

.pie-fuentes > summary::before {
  content: '\203A';  /* › escapado: ver la nota de @charset */
  font-size: 18px;
  line-height: 1;
  color: var(--texto-tenue);
  transition: transform 0.15s ease;
}

.pie-fuentes[open] > summary::before {
  transform: rotate(90deg);
}

.pie-fuentes > summary h2 {
  display: inline;
  margin: 0;
}

/* Sin el recuento, un bloque cerrado no dice cuanto guarda dentro. */
.fuentes-cuenta {
  font-size: 12px;
  color: var(--texto-tenue);
}

/* ------------------------------------------------------- Cabecera estrecha */

/* Tres chips en tres lineas se comian 171 px de alto. Apilados a la izquierda
   y con el titulo mas contenido, la cabecera deja de ser una pantalla. */
@media (max-width: 620px) {
  .cabecera {
    gap: 10px;
    padding: 14px 16px;
  }

  .cabecera-titulo h1 {
    font-size: 19px;
  }

  .cabecera-titulo p {
    font-size: 12px;
  }

  .cabecera-meta {
    gap: 6px;
  }

  .chip {
    padding: 4px 9px;
    font-size: 11.5px;
  }
}

/* ==========================================================================
   PRODUCTO: potencial, estrategia, por que y «¿Y si...?»
   --------------------------------------------------------------------------
   El panel de resultado dejo de abrir con una receta y una tabla para abrir
   con el VALOR: cuanto se puede mejorar. Todo lo de aqui abajo sirve a ese
   orden de lectura — titular, estrategia, por que, avisos, simulaciones — y
   reutiliza las variables de :root, asi que el tema claro sale solo.
   ========================================================================== */

/* ----------------------------------------------------------------- Titular */

.titular {
  padding: 4px 0 20px;
  border-bottom: 1px solid var(--borde-suave);
  margin-bottom: 22px;
}

.titular-antetitulo {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-tenue);
}

.titular-oportunidad .titular-antetitulo {
  color: var(--verde);
}

/* La cifra es el elemento con mas peso de la pagina, y esa jerarquia es
   deliberada: es la respuesta a la unica pregunta que trae al usuario aqui.
   `clamp` para que a 390 px siga cabiendo en una linea. */
.titular-cifra {
  margin: 6px 0 0;
  font-size: clamp(38px, 8vw, 60px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.titular-oportunidad .titular-cifra {
  color: var(--verde);
}

.titular-cifra span {
  font-size: 0.42em;
  font-weight: 600;
  color: var(--texto-tenue);
  letter-spacing: 0;
}

.titular-apoyo {
  margin: 10px 0 0;
  max-width: 62ch;
  color: var(--texto);
  font-size: 14.5px;
  /* Es una frase de una o dos lineas bajo una cifra enorme, no un parrafo: con
     `balance` las lineas quedan del mismo largo y el corte se lee como
     intencionado en vez de como un texto truncado. Para los parrafos de abajo,
     que son mas largos, se usa `pretty`, que evita huerfanas sin igualar. */
  text-wrap: balance;
}

.titular-pie {
  text-wrap: pretty;
  margin: 12px 0 0;
  max-width: 70ch;
  color: var(--texto-tenue);
  font-size: 12.5px;
  line-height: 1.6;
}

/* Falta el dato de partida. NO es un error del usuario, es una pieza que la app
   necesita para poder prometer algo, asi que se pinta como una invitacion en
   azul y no como una advertencia en amarillo: el amarillo esta reservado a los
   avisos que exigen una decision fiscal. */
/* LINEA DE ACENTO A LA IZQUIERDA, NO UNA CAJA. La anchura corta es deliberada
   —70 caracteres, la medida de lectura de este cuerpo— pero encerrada en un
   marco quedaba un borde derecho cortado a media pagina, justo debajo de un
   comparador que ocupa el ancho entero: se leia como maquetacion sin terminar.
   Estirarla al ancho del comparador tampoco valia, porque a 13 px serian lineas
   de casi 200 caracteres. Sin borde que cerrar, la medida corta deja de parecer
   un recorte y pasa a ser lo que es. */
.titular-falta {
  text-wrap: pretty;
  margin: 16px 0 0;
  max-width: 70ch;
  padding: 2px 0 2px 14px;
  border-left: 3px solid color-mix(in srgb, var(--acento) 45%, transparent);
  color: var(--texto-tenue);
  font-size: 13px;
  line-height: 1.6;
}

.titular-falta b {
  color: var(--texto);
}

/* -------------------------------------------------------------- Comparador */

.comparador {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.comparador-lado {
  flex: 1 1 200px;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--fondo-panel-alt);
}

.comparador-lado-mejor {
  border-color: color-mix(in srgb, var(--verde) 45%, transparent);
  background: var(--verde-suave);
}

.comparador-etq {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-tenue);
}

.comparador-lado b {
  display: block;
  margin-top: 5px;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.comparador-lado-mejor b {
  color: var(--verde);
}

.comparador-lado em {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-style: normal;
  color: var(--texto-tenue);
}

.comparador-flecha {
  display: flex;
  align-items: center;
  font-size: 22px;
  color: var(--texto-tenue);
}

/* En columna la flecha tiene que girar, o apunta a la pared. */
@media (max-width: 620px) {
  .comparador-flecha {
    transform: rotate(90deg);
    justify-content: center;
    width: 100%;
  }
}

/* -------------------------------------------------------------- Estrategia */

.bloque-estrategia,
.bloque-porque,
.bloque-ysi {
  margin: 24px 0;
}

.bloque-cabecera {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.bloque-cabecera h3 {
  font-size: 16px;
  letter-spacing: -0.01em;
}

/* La combinacion recomendada. Estuvo como pastilla gris de 12 px en la esquina
   de la cabecera, con el peso de un metadato; y es el resumen de la seccion
   entera. Sube a subtitulo: mismo dato, jerarquia correcta. */
.estrategia-combinacion {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--texto);
  margin: -4px 0 4px;
  text-wrap: balance;
}

.estrategia-que-hace {
  font-size: 13px;
  line-height: 1.5;
  color: var(--texto-tenue);
  margin: 0 0 14px;
  max-width: 62ch;
  text-wrap: pretty;
}

/* Fichas: la estrategia de un vistazo. auto-fill con un minimo generoso para
   que nunca queden dos columnas raquiticas ni una sola muy ancha. */
.fichas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 10px;
}

.ficha {
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--fondo-panel-alt);
  min-width: 0;
}

.ficha-etq {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-tenue);
}

.ficha-valor {
  display: block;
  margin-top: 4px;
  font-size: 17px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.ficha-nota {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-style: normal;
  line-height: 1.45;
  color: var(--texto-tenue);
}

/* La ultima ficha es el resultado: se distingue sin gritar. */
.ficha:last-child {
  border-color: color-mix(in srgb, var(--acento) 40%, transparent);
  background: var(--acento-suave);
}

/* La receta va SIEMPRE abierta. Estuvo detras de un <details> y no tenia
   sentido: es la estrategia misma, escrita en frases, y quien baja hasta aqui
   viene a leerla. Es la misma decision que ya se tomo con el desglose paso a
   paso, y por el mismo motivo. */
.receta {
  margin-top: 14px;
  border-top: 1px solid var(--borde-suave);
  padding-top: 12px;
}

.receta-titulo {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-tenue);
}

/* ----------------------------------------------------------------- Por que */

.bloque-porque {
  padding: 16px 18px;
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-sm);
  background: var(--fondo-panel-alt);
}

.bloque-porque h3 {
  font-size: 15px;
  margin-bottom: 10px;
}

.lista-porque {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.lista-porque li {
  font-size: 13.5px;
  line-height: 1.6;
}

.lista-porque li::marker {
  color: var(--acento);
}

.porque-entrada {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--texto-tenue);
  text-wrap: pretty;
}

/* La solidez del veredicto no es una decision: es una comprobacion sobre el
   unico numero del calculo que no sale del BOE. Se separa de las decisiones y
   pierde la vineta, que la dejaba a media sangria entre dos formatos. */
.lista-porque li.razon-solidez {
  list-style: none;
  margin-left: -20px;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: var(--radio-sm);
  background: var(--fondo-panel-alt);
  font-size: 12.5px;
  color: var(--texto-tenue);
}

.lista-porque li.razon-solidez b {
  color: var(--texto);
}

/* Las decisiones. Dejan de ser vinetas de prosa: la decision a la izquierda, lo
   que vale a la derecha, y debajo con que se ha comparado. Se lee en columna sin
   tener que entrar en la frase. */
.lista-porque li.decision {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 2px;
  list-style: none;
  margin-left: -20px;
  padding: 9px 0;
  border-top: 1px solid var(--borde-suave);
}

.lista-porque li.decision:first-child {
  border-top: 0;
  padding-top: 0;
}

.decision-que {
  font-weight: 600;
}

.decision-cifra {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--verde);
  white-space: nowrap;
}

.decision-cifra i {
  font-style: normal;
  font-weight: 600;
  font-size: 0.8em;
  opacity: 0.75;
}

/* Cuando no hay alternativa viable no hay cifra que ensenar: la etiqueta ocupa
   su sitio, pero sin el peso ni el color de un importe. */
.decision-unica .decision-cifra {
  font-weight: 600;
  font-size: 12px;
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.decision-alt {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--texto-tenue);
}

.enlace-detalle {
  color: var(--acento);
  font-weight: 600;
}

.porque-cautela {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--borde-suave);
  font-size: 12px;
  line-height: 1.6;
  color: var(--texto-tenue);
}

/* --------------------------------------------------------------- ¿Y si...? */

.ysi-titulo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
  margin-bottom: 12px;
}

.ysi-titulo::-webkit-details-marker {
  display: none;
}

.ysi-titulo::before {
  content: "\25B8";
  color: var(--texto-tenue);
}

.bloque-ysi[open] > .ysi-titulo::before {
  content: "\25BE";
}

.ysi-titulo h3 {
  display: inline;
  font-size: 16px;
  letter-spacing: -0.01em;
}

/* El recuento en el titular: un <details> cerrado sin el no dice que hay
   dentro, y parece que no hay nada. Mismo criterio que el bloque de fuentes. */
.ysi-cuenta {
  font-size: 12px;
  color: var(--texto-tenue);
  background: var(--fondo-panel-alt);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 2px 9px;
}

.ysi-intro {
  margin: -4px 0 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--texto);
  max-width: 70ch;
}

.ysi-intro b {
  font-weight: 650;
}

/* El «como funciona» va detras y en un tono por debajo: importa, pero no es lo
   primero que hay que leer para entender la seccion. */
.ysi-intro-como {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--texto-tenue);
}

.ysi-botones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}

/* Cada boton es a la vez la pregunta y, una vez pulsado, su respuesta. Se
   queda en su sitio para poder comparar varias respuestas de un vistazo, en vez
   de sustituir una por otra en un panel unico. */
.ysi-boton {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--fondo-panel);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.ysi-boton:hover:not(:disabled) {
  border-color: var(--acento);
  background: var(--acento-suave);
}

.ysi-boton:disabled {
  cursor: progress;
  opacity: 0.75;
}

.ysi-boton:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.ysi-resuelta {
  background: var(--fondo-panel-alt);
}

.ysi-pregunta {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}

.ysi-pista {
  font-size: 12px;
  color: var(--texto-tenue);
}

.ysi-error {
  color: var(--naranja);
}

/* El neto del escenario y su diferencia con la base, uno debajo del otro. El
   neto manda —es donde acabas—; el delta le acompana en cuerpo menor. Antes solo
   estaba el delta, a 21 px, y la respuesta se quedaba a medias. */
.ysi-cifras {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ysi-neto {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ysi-neto em {
  font-size: 0.55em;
  font-weight: 600;
  font-style: normal;
  color: var(--texto-tenue);
}

.ysi-respuesta {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ysi-respuesta i {
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  color: var(--texto-tenue);
  margin-left: 4px;
}

.ysi-respuesta.neutro {
  font-weight: 500;
  font-size: 11.5px;
  color: var(--texto-tenue);
}

/* Lo que se ha movido ademas de lo que anuncia la pregunta. */
.ysi-cambio {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  color: var(--texto-tenue);
}

.ysi-cambio i {
  font-style: normal;
  opacity: 0.85;
}

.ysi-respuesta.positivo {
  color: var(--verde);
}

.ysi-respuesta.negativo {
  color: var(--naranja);
}

.ysi-detalle {
  font-size: 11.5px;
  color: var(--texto-tenue);
  line-height: 1.4;
}

/* ----------------------------------------------------- Situacion de partida */

/* Tres opciones en fila, como los demas segmentados de la app (Casado/Soltero,
   Individual/Conjunta): apiladas en columna parecian un desplegable abierto y
   rompian la simetria del panel. Envuelve si no cabe, que es lo que pasa en la
   reja de dos columnas y en movil. */
.segmentado-envuelto {
  display: flex;
  flex-wrap: wrap;
}

.segmentado-envuelto button {
  flex: 1 1 auto;
  white-space: nowrap;
}

/* El dato falta, pero no es un error: se pinta en el azul de "esto te aporta
   algo", no en el amarillo de los avisos que exigen una decision fiscal. */
.campo-nota.nota-pendiente {
  color: var(--acento);
}

/* ------------------------------------------------------- Densidad en movil */

/* En una columna estrecha, las fichas de la estrategia y la tira de cifras se
   apilaban de una en una: 761 px de fichas y 214 de cifras entre el titular y
   el «por que». Son datos cortos —un importe, un porcentaje, una palabra— y
   caben perfectamente de dos en dos, que es la mitad de scroll para la misma
   informacion. Se baja el minimo de la columna, no se fija el numero: asi el
   navegador sigue decidiendo cuantas caben. */
@media (max-width: 620px) {
  .fichas {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }

  .ficha {
    padding: 10px 11px;
  }

  .ficha-valor {
    font-size: 15px;
  }

  .res-cifras {
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    padding: 16px 16px;
    gap: 12px 16px;
  }

  .res-cifra b {
    font-size: 22px;
  }

  .ysi-botones {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   EDICION DENTRO DE LA FICHA
   --------------------------------------------------------------------------
   Sustituye al panel «Ajustar». La idea es que no haya dos sitios: la cifra se
   edita donde se lee, en su linea del desglose. Lo unico que se sale de ahi son
   los modos, que no son cifras del calculo.
   ========================================================================== */

.btn-ajustar {
  background: transparent;
  border: 1px solid var(--borde);
  color: var(--texto-tenue);
  border-radius: 999px;
  padding: 4px 13px;
  font: 600 12px/1 inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.btn-ajustar:hover {
  border-color: var(--acento);
  color: var(--acento);
}

.btn-ajustar.activo {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

.btn-ajustar:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* ------------------------------------------------- Lineas editables */

/* La linea editable se marca con el acento a la izquierda: sin eso, en un
   desglose de 22 lineas no se ve cuales se pueden tocar. */
.linea-editable {
  border-left: 2px solid var(--acento);
  margin-left: -10px;
  padding-left: 8px;
  background: var(--acento-suave);
}

.linea-edicion {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.entrada-linea {
  width: 8.5em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 5px 8px;
  background: var(--fondo-panel);
  border: 1px solid var(--acento);
  border-radius: var(--radio-sm);
  color: var(--texto);
  font-size: 13px;
}

.entrada-linea:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

.linea-edicion .unidad {
  color: var(--texto-tenue);
  font-size: 12px;
}

/* El dividendo edita un % pero la linea vale euros: los dos a la vez. */
.linea-editable .linea-valor {
  min-width: 6em;
}

.linea-ayuda {
  color: var(--acento);
}

/* Red de seguridad: un editable que no encontro su linea. Se ve que algo no
   cuadra —a proposito— pero se puede seguir editando. */
.linea-huerfana {
  border-left-color: var(--naranja);
  background: transparent;
}

/* --------------------------------------------------------- Tira de modos */

.tira-modos {
  margin: 14px 0;
  padding: 13px 15px;
  border: 1px dashed var(--borde);
  border-radius: var(--radio-sm);
  background: var(--fondo-panel-alt);
}

.tira-modos-titulo {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-tenue);
}

.modos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px 16px;
}

.modo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.modo-etq {
  font-size: 11.5px;
  color: var(--texto-tenue);
  font-weight: 600;
}

.modo select {
  width: 100%;
  max-width: 100%;
}

.modo .segmentado {
  align-self: flex-start;
  max-width: 100%;
}

.modo-campo {
  display: flex;
  align-items: center;
  gap: 6px;
}

.modo-campo .entrada-linea {
  width: 7em;
}

/* ------------------------------------------- Ficha que ya no es la propuesta */

/* El aviso mas importante de esta pantalla: lo que ves abajo ya no es lo que
   dice el titular de arriba. Va en amarillo de decision porque exige una: o lo
   asumes, o vuelves a la recomendada. */
.ficha-modificada {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 11px 14px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--amarillo);
  background: color-mix(in srgb, var(--amarillo) 12%, transparent);
  font-size: 13px;
  line-height: 1.55;
}

.ficha-modificada .btn-secundario {
  flex-shrink: 0;
}

/* Y su eco junto al titular, para quien vuelve a subir. Texto fijo: la cifra
   exacta ya la da el aviso de la ficha, aqui solo hace falta la advertencia. */
body.ficha-editada .titular::after {
  content: "Has modificado la ficha del detalle: este resultado sigue siendo el que encontró la búsqueda, con la configuración original.";
  display: block;
  margin-top: 14px;
  padding: 9px 13px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--amarillo);
  background: color-mix(in srgb, var(--amarillo) 12%, transparent);
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 500;
}

/* ------------------------------------------------- Desglose plegable */

.desglose-plegable {
  margin-top: 14px;
}

.desglose-titulo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
  padding: 9px 0;
  border-top: 1px solid var(--borde-suave);
  font-size: 13px;
  font-weight: 600;
}

.desglose-titulo::-webkit-details-marker {
  display: none;
}

.desglose-titulo::before {
  content: "\25B8";
  color: var(--texto-tenue);
  font-weight: 400;
}

.desglose-plegable[open] > .desglose-titulo::before {
  content: "\25BE";
}

.desglose-cuenta {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--texto-tenue);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 2px 9px;
}

/* El total, siempre visible aunque el desglose este plegado: es el punto al
   que llega toda la cuenta, y plegado sin el no diria nada. */
.desglose-total {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

/* --------------------------------------------------- «Por que», plegable */

.porque-titulo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
}

.porque-titulo::-webkit-details-marker {
  display: none;
}

.porque-titulo::before {
  content: "\25B8";
  color: var(--acento);
}

.bloque-porque[open] > .porque-titulo::before {
  content: "\25BE";
}

.porque-titulo h3 {
  display: inline;
  font-size: 15px;
}

.porque-cuenta {
  font-size: 12px;
  color: var(--texto-tenue);
}

.bloque-porque[open] > .porque-titulo {
  margin-bottom: 10px;
}

/* -------------------------------------------------------- Movil estrecho */

@media (max-width: 620px) {
  /* En una sola columna, el campo y su valor no caben en la misma linea. */
  .linea-editable {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .entrada-linea {
    width: 7em;
  }

  .modos {
    grid-template-columns: 1fr;
  }

  .entrada-nota {
    font-size: 11.5px;
  }
}

/* La ayuda de gastos, plegable. Abierta en escritorio (lo pone ui.js), plegada
   en movil, donde son ~150 px justo antes del resultado. Nunca oculta: en
   tactil no hay hover, asi que mandarla a un `title` seria borrarla. */
.ayuda-gastos > summary {
  cursor: pointer;
  list-style: none;
  font-size: 11.5px;
  color: var(--texto-tenue);
}

.ayuda-gastos > summary::-webkit-details-marker {
  display: none;
}

.ayuda-gastos > summary::before {
  content: "\25B8 ";
}

.ayuda-gastos[open] > summary::before {
  content: "\25BE ";
}

.ayuda-gastos .campo-ayuda {
  margin-top: 6px;
}


/* --------------------------------------- Bloques del desglose */

/* Tres bolsillos distintos —la sociedad, tu parte y la del familiar— que antes
   se leian como una lista corrida de veintidos filas. Un encabezado suelto no
   bastaba: con la raya inferior que lleva cada fila, el titulo se leia como una
   fila mas. Asi que cada bloque es un GRUPO con su filete de color, su fondo y
   su aire alrededor.

   El encabezado solo aparece cuando hay mas de dos bloques: sin familiar la
   cadena se lee de un tiron y separarla seria ruido. */

.bloque {
  margin: 0 0 18px;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--borde);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  background: linear-gradient(to right, var(--fondo-panel-alt), transparent 55%);
}

.bloque:last-child {
  margin-bottom: 0;
}

.bloque-titulo {
  margin: 8px 0 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texto-tenue);
}

.bloque-lineas {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Dentro de un bloque las rayas sobran: la agrupacion ya separa. Se dejan solo
   las de los subtotales, que son los hitos de la cadena de calculo. */
.bloque-lineas .linea {
  border-bottom: none;
}

.bloque-lineas .linea-subtotal,
.bloque-lineas .linea-resultado {
  border-top: 1px solid var(--borde-suave);
  margin-top: 2px;
}

/* Cada bloque con el color que la app ya usa para esa idea: el acento para la
   sociedad, morado para el familiar, verde para el total del hogar. */
.bloque-empresa {
  border-left-color: var(--acento);
}

.bloque-empresa .bloque-titulo {
  color: var(--acento);
}

.bloque-titular {
  border-left-color: var(--texto-tenue);
}

.bloque-conyuge {
  border-left-color: var(--morado);
}

.bloque-conyuge .bloque-titulo {
  color: var(--morado);
}

/* El total del hogar no necesita encabezado ni caja: es el cierre. */
.bloque-hogar {
  border-left-color: var(--verde);
  background: var(--verde-suave);
  border-radius: var(--radio-sm);
  padding: 2px 14px;
}

.bloque-hogar .bloque-titulo {
  color: var(--verde);
}

.bloque-hogar .linea-resultado {
  border-top: none;
}


/* ------------------------------- La ficha, dentro del panel de detalle */

/* TRES CAJAS ANIDADAS ERAN DOS DE MAS. El panel ya es un contenedor con su
   filete; la tarjeta de dentro repetia borde, fondo y sombra, y dentro de ella
   los bloques ponian una tercera capa. Aqui la tarjeta deja de ser una caja: el
   panel la contiene, y la unica separacion que queda es la de los bloques, que
   es la que significa algo (tres bolsillos distintos).

   La tarjeta SIGUE siendo una caja en la comparativa de varios escenarios, donde
   si hace falta distinguir una de otra. Por eso la regla va acotada al panel de
   detalle y no toca .tarjeta en general. */
.panel-detalle .tarjeta {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Y el panel se queda con un solo filete, el suyo. El verde de "mejor opcion"
   ya lo dice la insignia. */
.panel-detalle .tarjeta-mejor {
  border: 0;
}

/* El titulo del desglose ya no es un <summary>: no hay nada que plegar. */
.desglose-titulo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 4px;
  padding: 9px 0 0;
  border-top: 1px solid var(--borde-suave);
  font-size: 13px;
  font-weight: 600;
  cursor: default;
}

.desglose-titulo::before {
  content: none;
}


/* ------------------------------------- La entrada, en cuatro bloques */

/* Antes era una rejilla de cinco campos sueltos que se leia como un formulario
   fiscal. Los mismos datos, agrupados por lo que le pasa al usuario —su
   negocio, su objetivo, su situacion, su familia— y con las etiquetas escritas
   como preguntas. Ninguna variable se ha quitado: todas las necesita el motor. */

.entrada-bloques {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr 1.05fr 0.95fr;
  gap: 20px 26px;
  align-items: start;
}

.bloque-entrada {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 0 0 0 14px;
  border: 0;
  border-left: 2px solid var(--borde);
}

.bloque-entrada > legend {
  padding: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texto-tenue);
}

/* El objetivo es la RESTRICCION del optimizador, no un dato mas: todo escenario
   tiene que cumplirlo. Se marca para que no se lea como un campo del monton. */
.bloque-destacado {
  border-left-color: var(--acento);
}

.bloque-destacado > legend {
  color: var(--acento);
}

.bloque-ayuda {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--texto-tenue);
  text-wrap: pretty;
}

/* Dos columnas antes de apilar del todo: cuatro bloques en fila necesitan
   ~240 px cada uno, y por debajo de eso los campos se estrujan. */
@media (max-width: 1180px) {
  .entrada-bloques {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .entrada-bloques {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}




/* -------------------------------------- Antes de que haya resultado */

/* El estado inicial ocupa EL MISMO panel que el resultado. Por eso el panel
   pierde aqui su relleno normal y lo pone este bloque: asi el hueco que va a
   ocupar la respuesta es el que ya se esta mirando, y no aparece una seccion
   nueva de la nada al escribir el ultimo dato. */
.panel-vacio {
  padding: 0;
  background: none;
  box-shadow: none;
  /* Borde discontinuo y sin la franja verde del resultado: es un hueco a la
     espera, y tiene que leerse como tal antes de leer una sola palabra. */
  border: 1px dashed var(--borde);
}

.estado-vacio {
  padding: clamp(22px, 4vw, 38px);
  text-align: center;
  text-wrap: pretty;
}

.estado-vacio h2 {
  margin: 0 0 10px;
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.3;
}

.estado-vacio-que {
  margin: 0 auto 18px;
  max-width: 56ch;
  color: var(--texto-tenue);
  font-size: 13.5px;
  line-height: 1.6;
}

/* Lo que falta, destacado sobre la explicacion: es lo accionable de las dos
   cosas, y quien vuelve a esta pantalla ya ha leido la otra. */
.estado-vacio-faltan {
  margin: 0 auto 20px;
  max-width: 56ch;
  padding: 9px 13px;
  border-radius: var(--radio-sm);
  border: 1px solid color-mix(in srgb, var(--amarillo) 40%, transparent);
  background: color-mix(in srgb, var(--amarillo) 12%, transparent);
  font-size: 13px;
  line-height: 1.55;
}

.estado-vacio-accion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.estado-vacio-accion span {
  color: var(--texto-tenue);
  font-size: 12px;
}

/* -------------------------------------- Escenario de ejemplo */

/* LA MARCA VA ENCIMA DEL RESULTADO, y se ve como una banda, no como una nota al
   margen: al pie se leeria despues de haberse creido la cifra, que es tarde.
   Naranja y no azul —el color de los avisos informativos de la app— porque esto
   no informa de un matiz, dice que TODO lo de abajo es inventado. */
.marca-ejemplo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0 0 18px;
  padding: 11px 15px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--naranja);
  background: color-mix(in srgb, var(--naranja) 14%, transparent);
  text-wrap: pretty;
}

.marca-ejemplo-texto {
  min-width: 240px;
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
}

.marca-ejemplo-texto b {
  color: var(--naranja);
  letter-spacing: 0.04em;
  margin-right: 6px;
}

.marca-ejemplo-texto em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 12px;
  color: var(--texto-tenue);
}

/* El desglose queda MAS ABAJO que la banda, o sea fuera de pantalla en cuanto se
   baja a leerlo. Sin esto, un paso a paso de cifras inventadas sin una sola
   etiqueta. No repite la banda entera —seria la app cubierta de disclaimers—:
   una chapa junto al titulo del panel basta para no perder el contexto. */
body.viendo-ejemplo .panel-detalle .panel-cabecera h2::after {
  content: "EJEMPLO";
  display: inline-block;
  margin-left: 9px;
  padding: 2px 7px;
  vertical-align: middle;
  border-radius: 999px;
  border: 1px solid var(--naranja);
  background: color-mix(in srgb, var(--naranja) 14%, transparent);
  color: var(--naranja);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Lo que la app ha rellenado por su cuenta, en «Supuestos y avisos». */
.lista-supuestos-app {
  margin: 0 0 6px;
  padding-left: 18px;
}

.lista-supuestos-app li {
  margin-bottom: 8px;
}

.lista-supuestos-app span {
  display: block;
  color: var(--texto-tenue);
  font-size: 12.5px;
}

.sin-supuestos {
  color: var(--verde);
}


/* Qué es la cifra grande. Sin esto se puede leer como facturación, beneficio,
   sueldo o dividendo, que son cuatro cosas distintas y ninguna es esta. */
.titular-que-es {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-tenue);
}

/* El detalle fiscal que baja detrás del «por qué»: sigue disponible, pero ya no
   compite con el resultado. Más apagado que la tira de arriba. */
.res-cifras-detalle {
  border-left-color: var(--borde);
  background: none;
  border: 1px solid var(--borde);
  padding: 14px 18px;
}

.res-cifras-detalle .res-cifra b {
  font-size: 20px;
}


/* ======================================================================
   INFORME PARA EL ASESOR

   Vive oculto en la pagina y solo aparece al imprimir. Se maqueta como un
   documento, no como una pantalla: negro sobre blanco, medidas en puntos y
   milimetros, y jerarquia hecha con peso y espacio en vez de con color. Los
   grises finos de una interfaz desaparecen en papel.
   ====================================================================== */

.informe-envoltorio {
  display: none;
}

.informe {
  color: #111;
  background: #fff;
  font-size: 9.5pt;
  line-height: 1.45;
}

/* --- Cabecera ------------------------------------------------------------ */

.inf-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-bottom: 8px;
  border-bottom: 2.5px solid #111;
}

.inf-logo {
  display: block;
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.inf-cabecera h1 {
  margin: 1px 0 0;
  font-size: 17pt;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Los metadatos, en columnas rotuladas. Antes eran dos lineas de texto
   corrido y no se podia localizar el ejercicio de un vistazo, que es
   justamente el dato que un asesor comprueba primero. */
.inf-meta {
  display: flex;
  gap: 18px;
  margin: 0;
  text-align: right;
}

.inf-meta div {
  min-width: 0;
}

.inf-meta dt {
  font-size: 6.5pt;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #777;
}

.inf-meta dd {
  margin: 1px 0 0;
  font-size: 8.5pt;
  white-space: nowrap;
}

/* --- Portada: el resultado --------------------------------------------- */

/* La cifra a la izquierda y la receta a la derecha, separadas por una regla.
   Ocupa el ancho entero y es lo primero que se ve al abrir el documento. */
.inf-portada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 22px;
  margin: 14px 0 0;
  padding: 14px 0 16px;
  border-bottom: 1px solid #ddd;
  break-inside: avoid;
}

.inf-cifra-etq {
  margin: 0;
  font-size: 7pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #666;
}

.inf-cifra {
  margin: 2px 0 0;
  font-size: 30pt;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.inf-cifra-sub {
  margin: 5px 0 0;
  font-size: 9pt;
  color: #444;
}

.inf-combinacion {
  margin: 0;
  font-size: 12.5pt;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.inf-portada-nota {
  margin: 5px 0 0;
  font-size: 8pt;
  line-height: 1.45;
  color: #555;
}

.inf-delta {
  width: 100%;
  border-collapse: collapse;
  margin-top: 9px;
}

.inf-delta th,
.inf-delta td {
  padding: 2.5px 0;
  font-weight: 400;
  font-size: 8.5pt;
  text-align: left;
}

.inf-delta td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Avisos de cabecera -------------------------------------------------- */

.inf-cautela {
  margin: 12px 0 0;
  padding: 7px 10px;
  background: #f3f3f3;
  border-left: 2.5px solid #888;
  font-size: 8pt;
  line-height: 1.45;
  color: #333;
}

/* --- Secciones ----------------------------------------------------------- */

.inf-seccion {
  margin-top: 16px;
  break-inside: avoid;
}

.inf-seccion h2 {
  margin: 0 0 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid #111;
  font-size: 8pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Datos utilizados y Estrategia, en paralelo: son las dos mitades de «con qué
   se ha calculado», caben al lado y ahorran una pagina entera de recorrido. */
.inf-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

.inf-columnas .inf-seccion {
  margin-top: 16px;
}

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

.inf-tabla {
  width: 100%;
  border-collapse: collapse;
}

.inf-tabla th,
.inf-tabla td {
  padding: 3px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #ededed;
  font-weight: 400;
  font-size: 8.5pt;
  line-height: 1.4;
}

.inf-tabla th {
  padding-right: 12px;
  color: #555;
}

.inf-columnas .inf-tabla th {
  width: 48%;
}

.inf-tabla-cifras th {
  width: auto;
}

.inf-tabla-cifras td {
  width: 26%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* El resumen fiscal es UNA tabla con subtitulos dentro, no cuatro tablas
   sueltas: asi la columna de importes esta alineada de arriba abajo y el ojo
   puede recorrerla de un tiron. */
.inf-grupo th {
  padding: 11px 0 3px;
  border-bottom: 1px solid #111;
  font-size: 7pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #111;
}

.inf-fila-total th,
.inf-fila-total td {
  font-weight: 700;
  color: #111;
  border-bottom: 0;
  border-top: 1px solid #999;
  padding-top: 4px;
}

.inf-tabla-decisiones th {
  width: 34%;
  color: #111;
  font-weight: 600;
}

.inf-decision-cifra {
  width: 15%;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-right: 12px;
}

.inf-decision-cifra i {
  font-style: normal;
  font-weight: 600;
  font-size: 7.5pt;
  color: #666;
}

.inf-decision-alt {
  color: #555;
}

/* --- Listas -------------------------------------------------------------- */

.inf-nota {
  margin: 0 0 7px;
  font-size: 8pt;
  line-height: 1.45;
  color: #666;
}

.inf-validar ul,
.inf-supuestos {
  margin: 0;
  padding-left: 15px;
}

.inf-validar li,
.inf-supuestos li {
  margin-bottom: 5px;
  font-size: 8.5pt;
  line-height: 1.45;
  break-inside: avoid;
}

.inf-supuestos li {
  color: #444;
}

.inf-lista-fuentes {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 22px;
}

.inf-lista-fuentes li {
  margin-bottom: 6px;
  font-size: 7.5pt;
  line-height: 1.4;
  break-inside: avoid;
}

.inf-lista-fuentes span {
  display: block;
  color: #666;
}

.inf-pie {
  margin-top: 18px;
  padding-top: 6px;
  border-top: 1px solid #ccc;
  font-size: 7pt;
  color: #777;
}

/* --- La invitacion, dentro de la app ------------------------------------- */

.llevar-al-asesor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--fondo-panel-alt);
}

.llevar-al-asesor b {
  display: block;
  font-size: 13.5px;
}

.llevar-al-asesor span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--texto-tenue);
  max-width: 62ch;
}

/* --- Impresion ----------------------------------------------------------- */

@media print {
  /* Fuera TODO lo que no sea el informe. Un `display: none` sobre el resto de
     hijos del body es mas fiable que ir escondiendo secciones una a una: lo
     que se anada manana queda fuera por defecto, que es lo correcto. */
  body > *:not(.informe-envoltorio) {
    display: none !important;
  }

  .informe-envoltorio {
    display: block !important;
  }

  /* Los tokens de tema no valen aqui: el papel es blanco pase lo que pase. */
  body {
    background: #fff !important;
    color: #111 !important;
    margin: 0;
  }

  @page {
    margin: 14mm 13mm;
  }
}

/* ======================================================================
   LANDING

   Página aparte (index.html); el simulador vive en app.html. Comparte esta
   hoja para heredar los tokens y el manejo de tema: duplicarlos en un
   `landing.css` habría creado dos paletas que se desincronizan a la primera.
   Todo va bajo `.pagina-landing`, así que ni una regla de aquí puede alcanzar
   a la app.
   ====================================================================== */

.pagina-landing {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 clamp(18px, 5vw, 36px) 60px;
}

.lp-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
}

.lp-marca {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.lp-enlace-app {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--acento);
  text-decoration: none;
}

.lp-enlace-app:hover {
  text-decoration: underline;
}

/* --- Hero --------------------------------------------------------------- */

.lp-hero {
  padding: clamp(28px, 7vw, 64px) 0 clamp(24px, 5vw, 44px);
  border-bottom: 1px solid var(--borde-suave);
}

.lp-hero h1 {
  margin: 0;
  /* Escala con la ventana: en un titular de esta longitud, un tamaño fijo o
     desborda en móvil o se queda enano en escritorio. */
  font-size: clamp(30px, 5.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 20ch;
}

.lp-entradilla {
  margin: 18px 0 0;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.6;
  color: var(--texto-tenue);
  max-width: 62ch;
  text-wrap: pretty;
}

.lp-entradilla b {
  color: var(--texto);
  font-weight: 650;
}

.lp-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.lp-boton {
  display: inline-block;
  padding: 12px 22px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--fondo-panel);
  color: var(--texto);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.lp-boton:hover {
  border-color: var(--acento);
  background: var(--acento-suave);
}

.lp-boton-primario {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

.lp-boton-primario:hover {
  filter: brightness(1.08);
  background: var(--acento);
  color: #fff;
}

.lp-pie-hero {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--texto-tenue);
}

/* --- Secciones ---------------------------------------------------------- */

.lp-seccion {
  padding: clamp(28px, 5vw, 44px) 0;
  border-bottom: 1px solid var(--borde-suave);
}

.lp-seccion h2 {
  margin: 0 0 20px;
  font-size: clamp(19px, 2.4vw, 24px);
  letter-spacing: -0.02em;
}

.lp-pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px 26px;
  margin: 0;
  padding-left: 18px;
}

.lp-pasos li {
  padding-left: 4px;
}

.lp-pasos li::marker {
  color: var(--acento);
  font-weight: 700;
}

.lp-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-pasos b,
.lp-rejilla b {
  display: block;
  font-size: 14.5px;
  letter-spacing: -0.01em;
}

.lp-pasos span,
.lp-rejilla span {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--texto-tenue);
  text-wrap: pretty;
}

.lp-fuentes p {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--texto-tenue);
  max-width: 70ch;
  text-wrap: pretty;
}

/* --- Cierre y pie ------------------------------------------------------- */

.lp-cierre {
  padding: clamp(32px, 6vw, 52px) 0 clamp(28px, 5vw, 44px);
  text-align: center;
}

.lp-cierre h2 {
  margin: 0 0 8px;
  font-size: clamp(21px, 2.8vw, 28px);
  letter-spacing: -0.02em;
}

.lp-cierre p {
  margin: 0 auto 22px;
  max-width: 52ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--texto-tenue);
  text-wrap: pretty;
}

.lp-pie {
  padding-top: 22px;
  border-top: 1px solid var(--borde-suave);
  font-size: 12px;
  line-height: 1.6;
  color: var(--texto-tenue);
}

.lp-pie p {
  margin: 0;
  max-width: 78ch;
  text-wrap: pretty;
}

.lp-pie-enlaces {
  margin-top: 10px;
}

.lp-pie-enlaces a {
  color: var(--acento);
  font-weight: 600;
}