/*
 * Estilos de las calculadoras. Se cargan DESPUÉS de base.css y blog.css.
 *
 * De base.css salen la paleta, la tipografía, la cabecera y el pie. De blog.css
 * salen las migas de pan, la columna de lectura y el cuerpo del texto largo
 * (.post-body) y las tarjetas del listado (.post-card). Aquí solo está lo que
 * una calculadora necesita y no existía: el formulario, el resultado grande,
 * la barra del 100 %, la tabla del coste y el gráfico.
 *
 * ── Las tres decisiones de color ──
 * 1. Los impuestos van en una RAMPA DE UN SOLO TONO. Cotización de empresa,
 *    cotización del trabajador e IRPF hacen todos el mismo trabajo —salen del
 *    mismo dinero y van al mismo sitio—, así que cambia la intensidad, no el
 *    color. Darle un tono propio a cada uno sugeriría que son cosas distintas.
 * 2. El VERDE es solo del usuario. Es el único color que no es un impuesto y
 *    por eso es el único que rompe la rampa: el ojo lo encuentra sin leyenda.
 * 3. El tono de la rampa es el ámbar de la landing (--amber), para que la
 *    página no parezca de otra web.
 */

:root {
    /* Rampa de impuestos, de menor a mayor intensidad. */
    --calc-t2: var(--amber);      /* IRPF */
    --calc-t3: #e2820a;           /* Seguridad Social del trabajador */
    --calc-t4: #b45309;           /* Seguridad Social de la empresa */
    /* Lo único que se queda el usuario. */
    --calc-neto: var(--green);
}

/* ── Rejilla ──────────────────────────────────────────────────────────────── */
/* Algo más ancha que la columna del blog: aquí hay una tabla de cuatro
   columnas y un gráfico, no solo texto. El texto largo de abajo sigue usando
   .post-body, que se estrecha solo. */
.calc-wrap { max-width: 820px; margin: 0 auto; }
.calc-wrap .post-body { max-width: 720px; }

.calc-header { margin-bottom: 28px; }
.calc-header h1 {
    font-size: clamp(1.9rem, 4.5vw, 2.9rem); font-weight: 900;
    line-height: 1.15; letter-spacing: -1px; margin-bottom: 14px;
}
.calc-header h1 .gradient-text { display: block; }
.calc-lead { font-size: 1.05rem; color: var(--text2); line-height: 1.7; max-width: 62ch; }

/* ── Tarjeta del formulario ───────────────────────────────────────────────── */
.calc-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; padding: 24px 22px;
}
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.calc-field label {
    display: block; font-size: 0.8rem; color: var(--text2);
    margin-bottom: 6px; font-weight: 500;
}
.calc-field input, .calc-field select {
    width: 100%; background: var(--surface2); border: 1px solid var(--glass-border);
    color: var(--text); border-radius: 10px; padding: 11px 12px;
    font-size: 1rem; font-family: inherit; line-height: 1.3;
}
.calc-field input:focus, .calc-field select:focus {
    outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
.calc-hint { font-size: 0.74rem; color: var(--text3); margin-top: 5px; line-height: 1.45; }

/* ── El resultado principal: el neto ──────────────────────────────────────── */
.neto-box {
    margin-top: 24px; padding: 26px 22px; text-align: center;
    background: linear-gradient(145deg, rgba(52,211,153,0.06), rgba(52,211,153,0.02));
    border: 1px solid rgba(52,211,153,0.18); border-radius: 14px;
}
.neto-box .big {
    font-size: clamp(2.6rem, 10vw, 4.2rem); font-weight: 800; line-height: 1;
    letter-spacing: -3px; font-variant-numeric: tabular-nums; color: var(--calc-neto);
}
.neto-box .cap { color: var(--text2); font-size: 0.95rem; margin-top: 10px; }
.neto-box .cap b { color: var(--text); }

/* Una cifra de quince dígitos no cabe en 375 px por mucho que se aprieten las
   letras, y en la calculadora de interés compuesto se llega tecleando millones
   a sesenta años: la fuente tiene que bajar por tramos o el número se sale del
   lienzo por los dos lados. Lo pone el JS, que es el único que sabe cuántos
   caracteres ha acabado teniendo el importe. */
.neto-box .big.largo { font-size: clamp(1.9rem, 7vw, 3.2rem); letter-spacing: -2px; }
.neto-box .big.muylargo { font-size: clamp(1.4rem, 5.2vw, 2.4rem); letter-spacing: -1px; }

/* ── Cuando el número grande es un COSTE ──────────────────────────────────── */
/* En la calculadora de deuda lo que sale arriba es lo que acabas devolviendo:
   dinero que se va, no dinero que se queda. Viste el ámbar de la rampa de
   costes en vez del verde del neto, para que no haya que leer la frase de
   debajo para saber de qué lado está la cifra. El verde sigue siendo solo del
   usuario, y por eso el bloque del coste de oportunidad —lo que ese mismo
   dinero le habría rendido a él— sí se queda en verde. */
.neto-box.coste {
    background: linear-gradient(145deg, rgba(251,191,36,0.06), rgba(251,191,36,0.02));
    border-color: rgba(251,191,36,0.18);
}
.neto-box.coste .big { color: var(--amber); }

/* Y cuando la deuda no se salda nunca, el aviso ocupa el sitio del resultado.
   Es el único estado de todas las calculadoras que usa el rosa: no es un coste
   más alto, es que no hay resultado. */
.neto-box.imposible {
    background: linear-gradient(145deg, rgba(251,113,133,0.07), rgba(251,113,133,0.02));
    border-color: rgba(251,113,133,0.22);
}
.neto-box.imposible .big { color: var(--rose); }
.neto-box.imposible .cap { text-align: left; }

/* ── La segunda cifra: la tasa de retención ───────────────────────────────── */
/* Va DEBAJO del total y no al lado. En dos columnas las dos cifras competirían,
   y esta solo significa algo después de haber leído la otra: primero cuánto ha
   pasado por tus manos, y solo entonces qué parte sigue ahí.
   Viste el acento y no el verde del neto. El verde es del dinero del usuario y
   lo lleva la cifra de arriba, que son euros suyos; esto es un porcentaje —la
   respuesta de la página, no un importe más— y se distingue por el color. */
.retencion {
    margin-top: 14px; padding: 20px 18px; text-align: center;
    background: var(--accent-soft); border: 1px solid var(--accent);
    border-radius: 14px;
}
.retencion .rot {
    font-size: 0.72rem; color: var(--text3); text-transform: uppercase;
    letter-spacing: 0.05em; font-weight: 700;
}
.retencion .big {
    font-size: clamp(2rem, 7vw, 2.8rem); font-weight: 800; letter-spacing: -1.5px;
    margin-top: 6px; line-height: 1.1; color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.retencion .lectura {
    font-size: 0.92rem; color: var(--text2); line-height: 1.55;
    margin: 10px auto 0; max-width: 44ch;
}

/* Flujo bruto → SS → IRPF → neto */
.flujo { display: grid; grid-template-columns: 1fr auto; margin-top: 20px; font-size: 0.95rem; }
.flujo div { padding: 11px 4px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.flujo div:nth-child(even) { text-align: right; }
.flujo .neg { color: var(--text2); }
.flujo .fin { font-weight: 700; color: var(--text); border-bottom: none; border-top: 2px solid var(--glass-border); }
.flujo .tipo { color: var(--text3); font-size: 0.85em; }
/* La última fila nunca lleva raya debajo. En casi todas las calculadoras la
   última fila ES la del total y .fin ya se la quita, pero en la de interés
   compuesto el total y su traducción a euros de hoy van las dos al final y la
   que manda es la que elige el interruptor: unas veces es la de arriba. */
.flujo div:nth-last-child(-n+2) { border-bottom: none; }

/* Cuadradito de color que acompaña a cada concepto. */
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; flex-shrink: 0; }

/* ── Interruptor segmentado (euros de hoy / euros del futuro) ─────────────── */
/* Son radios de verdad, no botones con JavaScript: se recorren con las flechas,
   un lector de pantalla los anuncia como grupo y sin JS se ven igual. */
.modo-switch { border: 0; padding: 0; margin: 22px 0 0; }
.modo-switch legend { font-size: 0.8rem; color: var(--text2); font-weight: 500; margin-bottom: 8px; padding: 0; }
.segmentado {
    position: relative;
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    background: var(--bg2); border: 1px solid var(--glass-border);
    border-radius: 12px; padding: 4px;
}
/* El input se oculta pero sigue siendo enfocable: nada de display:none, que lo
   sacaría del orden de tabulación.
   `pointer-events: none` no sobra: sin él, ese recuadro de 1 px se queda encima
   del control y se traga los clics que caen justo ahí. Es invisible, así que el
   usuario solo ve que a veces no pasa nada al pulsar. */
.segmentado input {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0; overflow: hidden;
    clip-path: inset(50%); pointer-events: none;
}
.segmentado label {
    display: block; text-align: center; padding: 10px 8px; border-radius: 9px;
    font-size: 0.88rem; font-weight: 600; color: var(--text3);
    cursor: pointer; transition: background 0.2s, color 0.2s;
}
.segmentado label:hover { color: var(--text2); }
.segmentado input:checked + label { background: var(--surface2); color: var(--text); }
.segmentado input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px; }
.modo-nota { font-size: 0.78rem; color: var(--text3); margin-top: 8px; line-height: 1.5; }

/* ── Barra del 100 % y su leyenda ─────────────────────────────────────────── */
.bar100 {
    display: flex; height: 44px; border-radius: 8px; overflow: hidden;
    margin: 20px 0 12px; gap: 2px; background: var(--bg2);
}
.bar100 span { display: block; transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1); min-width: 2px; }
.leg { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.84rem; color: var(--text2); }
.leg span { display: flex; align-items: center; }
/* El porcentaje no se parte nunca: leer "23,5" y en la línea de abajo "%" no
   es leer un porcentaje. */
.leg b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; margin-left: 5px; white-space: nowrap; }

/* ── Tabla del coste ──────────────────────────────────────────────────────── */
.calc-tabla { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 0.93rem; }
.calc-tabla th, .calc-tabla td { text-align: right; padding: 9px 8px; border-bottom: 1px solid var(--border); }
.calc-tabla th:first-child, .calc-tabla td:first-child { text-align: left; color: var(--text2); }
.calc-tabla thead th {
    color: var(--text3); font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.07em; font-weight: 600;
}
.calc-tabla tbody td { font-variant-numeric: tabular-nums; color: var(--text2); }
.calc-tabla tr.total td {
    font-weight: 700; color: var(--text);
    border-top: 2px solid var(--glass-border); border-bottom: none;
}
/* Las dos estrategias de amortización llevan el mismo color en la cabecera de
   la tabla que en la curva del gráfico: verde reducir plazo, ámbar reducir
   cuota. Sin eso hay que leer la leyenda dos veces para saber cuál es cuál. */
.calc-tabla thead th.col-plazo { color: var(--green); }
.calc-tabla thead th.col-cuota { color: var(--amber); }
.calc-tabla td.neg { color: var(--text3); }
/* La cifra de la primera columna no se parte: leer "109" y en la línea de abajo
   "€" no es leer una cuota. Va en un <span> y no en el <td> entero a propósito:
   así la coletilla "· tuya" sí puede caer abajo, y la columna no reserva el
   ancho de las dos cosas juntas. A 375 px ese ancho de más no cabía. */
.calc-tabla.tabla-cuotas td:first-child > .cifra,
.calc-tabla.tabla-cuotas td:first-child > .tipo { white-space: nowrap; }
/* La fila de referencia de una tabla que compara varias: la cuota que el usuario
   ha escrito en la de deuda, la fila sin comisión en la de interés compuesto.
   Sin ella hay que buscar el número propio entre cinco filas iguales, que es
   justo lo contrario de lo que la tabla intenta hacer. */
.calc-tabla tr.tuya td { color: var(--text); background: var(--surface2); }
.calc-tabla tr.tuya td:first-child { font-weight: 600; }

/* ── Tablas que pueden no caber ───────────────────────────────────────────── */
/* Los importes no se parten nunca —leer "1.902" y debajo "€" no es leer una
   cifra—, así que una tabla de importes tiene un ancho mínimo que no se puede
   negociar. Con cifras normales cabe de sobra; con las que salen de teclear
   millones a sesenta años, no. Envolverla en un contenedor con scroll propio
   hace que ese exceso se quede DENTRO de la caja en vez de ensanchar el
   documento entero y descolocar la página.
   `overscroll-behavior-x: contain` evita que arrastrar la tabla hasta el final
   se convierta en el gesto de "atrás" del navegador. */
.tabla-scroll { overflow-x: auto; overscroll-behavior-x: contain; }

/* ── Bloques plegables ────────────────────────────────────────────────────── */
/* <details> nativo: se abren y se cierran sin una línea de JavaScript. */
.calc-details {
    margin-top: 14px; border: 1px solid var(--border); border-radius: 14px;
    background: var(--surface); overflow: hidden;
}
.calc-details summary {
    padding: 18px 22px; cursor: pointer; font-weight: 600;
    font-size: 0.98rem; color: var(--text); list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.calc-details summary::-webkit-details-marker { display: none; }
.calc-details summary::after {
    content: '+'; flex-shrink: 0; font-size: 1.2rem; font-weight: 400;
    color: var(--accent); line-height: 1;
}
.calc-details[open] summary::after { content: '−'; }
.calc-details summary:hover { background: var(--surface2); }
.calc-details summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.calc-details-body { padding: 0 22px 22px; }
.calc-details-body > p { font-size: 0.93rem; color: var(--text2); line-height: 1.65; }
.calc-details-body h3 {
    font-size: 1.05rem; font-weight: 700; color: var(--text);
    letter-spacing: -0.2px; margin: 32px 0 4px;
}
.calc-details-body .calc-sub { color: var(--text3); font-size: 0.88rem; margin-bottom: 14px; }

/* ── Gráfico ──────────────────────────────────────────────────────────────── */
.calc-figura { margin: 0; }
.calc-figura svg { display: block; width: 100%; height: auto; overflow: visible; }
.gridline { stroke: var(--border); stroke-width: 1; }
.axis { fill: var(--text3); font-size: 11px; }
.lbl { fill: var(--text); font-size: 12px; font-weight: 600; }

/* ── Tabla de las dos lecturas (vivir de rentas) ──────────────────────────── */
/* Las dos columnas pesan lo mismo a propósito: la gracia de la página es que se
   vean a la vez, no que una gane por tamaño. Lo que las distingue es el color
   de la cabecera, el mismo de cada curva del gráfico. */
.tabla-modos { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.93rem; }
.tabla-modos th, .tabla-modos td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: right; }
.tabla-modos th:first-child, .tabla-modos td:first-child { text-align: left; color: var(--text2); }
.tabla-modos thead th {
    font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}
.tabla-modos thead th.col-hoy { color: var(--green); }
.tabla-modos thead th.col-futuro { color: var(--amber); }
.tabla-modos tbody td { font-variant-numeric: tabular-nums; color: var(--text); }
.tabla-modos tr.total td {
    border-top: 2px solid var(--glass-border); border-bottom: none;
    font-weight: 700; color: var(--text);
}
.tabla-modos tr.total td:first-child { font-weight: 400; color: var(--text2); }

/* ── La casilla activa de la tabla de cuatro cifras (interés compuesto) ───── */
/* Ahí no se enfrentan dos columnas sino dos columnas por dos filas: la unidad y
   la lectura del tipo. Las cuatro se enseñan siempre —ese es el argumento de la
   página—, y lo único que hace el par de interruptores es decir cuál de las
   cuatro es la que se está leyendo en grande ahí arriba. Sin esta marca hay que
   recordar en qué estado están los dos interruptores para saber qué casilla
   mirar. */
.tabla-cuatro td.activa {
    background: var(--surface2); font-weight: 700; color: var(--text);
    box-shadow: inset 2px 0 0 var(--accent);
}

/* ── Tabla comparativa dentro del texto ───────────────────────────────────── */
/* blog.css alinea las tablas a la izquierda, que es lo correcto para texto.
   Esta es de importes: van a la derecha y con cifras de ancho fijo, para que
   las unidades queden en columna y se puedan comparar de un vistazo. */
.post-body .tabla-ccaa th:not(:first-child),
.post-body .tabla-ccaa td:not(:first-child) {
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── Las tres cifras enfrentadas (rentabilidad real) ──────────────────────── */
/* Las otras calculadoras tienen UNA cifra grande. Esta tiene tres y el orden es
   el argumento: primero la cuenta que trae el usuario en la cabeza, después la
   buena, y por último la buena descontada la inflación. Enseñar solo la correcta
   no le explica a nadie por qué el número que tenía era otro, así que la mala va
   delante y con el mismo tamaño.
   La del medio es la respuesta de la página y va marcada, pero solo con el borde
   y el fondo: hacerla más grande rompería la lectura de izquierda a derecha, que
   es lo único que hay que entender aquí. */
.trio {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    margin: 26px 0 4px;
}
.cifra-box {
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    padding: 18px 14px; text-align: center; min-width: 0;
}
.cifra-box.destacada { background: var(--accent-soft); border-color: var(--accent); }
.cifra-box .rot {
    font-size: 0.72rem; color: var(--text3); text-transform: uppercase;
    letter-spacing: 0.05em; font-weight: 700; line-height: 1.35; min-height: 2.7em;
}
/* clamp y no un tamaño fijo: "−100,00 %" en una caja de un tercio de 820 px a
   375 px no cabe de ninguna otra forma. */
.cifra-box .big {
    font-size: clamp(1.4rem, 5.2vw, 2.1rem); font-weight: 800; letter-spacing: -1px;
    margin-top: 8px; font-variant-numeric: tabular-nums; line-height: 1.1;
    color: var(--text);
}
.cifra-box.destacada .big { color: var(--accent); }
.cifra-box .big.negativa { color: var(--rose); }
.cifra-box .sub { font-size: 0.74rem; color: var(--text3); margin-top: 7px; line-height: 1.45; }

/* ── La tabla de aportaciones a mano ──────────────────────────────────────── */
/* Los campos van dentro de las celdas y ocupan el ancho entero: escribir una
   fecha y un importe en una tabla es rellenar un formulario, no leer datos. */
.tabla-flujos th:last-child, .tabla-flujos td:last-child { width: 44px; text-align: center; }
.tabla-flujos td { padding: 6px 6px; }
.tabla-flujos td:first-child { padding-left: 0; }
.tabla-flujos input {
    width: 100%; min-width: 130px; padding: 9px 10px; background: var(--surface2);
    border: 1px solid var(--border); border-radius: 8px; color: var(--text);
    font-size: 0.92rem; font-family: inherit; font-variant-numeric: tabular-nums;
}
.tabla-flujos input:focus { outline: none; border-color: var(--accent); }
.tabla-flujos .quitar {
    background: none; border: 0; color: var(--text3); cursor: pointer;
    font-size: 1.3rem; line-height: 1; padding: 6px 8px; border-radius: 8px;
}
.tabla-flujos .quitar:hover { color: var(--rose); background: var(--surface2); }
.tabla-flujos .quitar:focus-visible { outline: 2px solid var(--accent); }

.fila-acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.btn-fila {
    background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
    color: var(--text); padding: 9px 16px; font-size: 0.87rem; font-weight: 600;
    font-family: inherit; cursor: pointer; white-space: nowrap;
}
.btn-fila:hover { border-color: var(--accent); color: var(--accent); }
.btn-fila:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Para las etiquetas que solo tienen que existir para un lector de pantalla. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Avisos ───────────────────────────────────────────────────────────────── */
.calc-note {
    background: var(--accent-soft); border-left: 3px solid var(--accent);
    padding: 14px 16px; border-radius: 0 10px 10px 0; margin: 20px 0;
    font-size: 0.9rem; color: var(--text2); line-height: 1.6;
}
.calc-note b { color: var(--text); }
.calc-note:last-child { margin-bottom: 0; }
.calc-warn { background: rgba(251,191,36,0.09); border-left-color: var(--amber); }

.calc-foot {
    color: var(--text3); font-size: 0.8rem; line-height: 1.65;
    margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--border);
}
.calc-foot b { color: var(--text2); }
.calc-foot a { color: var(--text2); }

/* ── Listado de calculadoras (/calculadoras/) ─────────────────────────────── */
.calc-lista {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px; margin-top: 32px;
}
/* Reutiliza .post-card del blog; solo añade el estado "próximamente", que no
   es un enlace y no debe invitar a pulsarlo. */
.calc-lista .post-card h2 { font-size: 1.1rem; }
.post-card.proximamente { opacity: 0.55; cursor: default; }
.post-card.proximamente:hover { background: var(--surface); border-color: var(--border); transform: none; }
.calc-badge {
    display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}
.calc-badge.activa { background: var(--green-soft); color: var(--green); }
.calc-badge.pronto { background: var(--surface2); color: var(--text3); }

/* ── Móvil ────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .calc-card { padding: 18px 16px; }
    .neto-box { padding: 22px 16px; }
    .neto-box .big { letter-spacing: -2px; }
    .bar100 { height: 38px; }
    /* Cuatro conceptos en 375 px no caben en fila sin partir los nombres por
       la mitad. En columna se leen, y la barra de arriba ya da la proporción.
       Y cada uno vuelve a ser texto corrido, no una caja flexible: con flex, el
       porcentaje de una etiqueta que ocupa dos líneas se queda flotando en el
       centro, lejos del concepto al que pertenece. */
    .leg { flex-direction: column; gap: 7px; }
    .leg span { display: block; }
    .leg .sw { position: relative; top: 1px; }
    /* La columna "al mes" se cae antes que dejar que un importe parta en dos
       líneas: leer "1.902" y debajo "€" no es leer una cifra. */
    .calc-tabla th:nth-child(3), .calc-tabla td:nth-child(3) { display: none; }
    .calc-tabla th, .calc-tabla td { padding: 9px 4px; }
    .calc-tabla td:not(:first-child) { white-space: nowrap; }
    .calc-tabla { font-size: 0.86rem; }
    /* ...salvo cuando la tercera columna ES el argumento. En la calculadora de
       hipoteca son "reducir plazo" y "reducir cuota" enfrentadas, y enseñar una
       sola deja la página sin comparación; en la tabla de la comisión, la
       tercera columna es el tope legal, que es el dato. Mismo criterio que en
       .tabla-modos: se aprieta el relleno, no se tira una columna. */
    .calc-tabla.tabla-comparada th:nth-child(3),
    .calc-tabla.tabla-comparada td:nth-child(3) { display: table-cell; }
    .calc-tabla.tabla-comparada { font-size: 0.8rem; }
    .calc-tabla.tabla-comparada th, .calc-tabla.tabla-comparada td { padding: 9px 3px; }
    .calc-details summary { padding: 16px; }
    .calc-details-body { padding: 0 16px 18px; }
    /* La tabla de las dos lecturas no pierde ninguna columna: las dos cifras a
       la vez son el argumento de la página. Se aprieta el relleno y se dejan
       los números sin partir. */
    .tabla-modos { font-size: 0.82rem; }
    .tabla-modos th, .tabla-modos td { padding: 9px 3px; }
    .tabla-modos td:not(:first-child) { white-space: nowrap; }
    /* Las tres cifras en fila a 375 px dejarían los rótulos en cinco líneas cada
       uno. En columna se pierde el "de izquierda a derecha", pero el orden es el
       mismo y el argumento se lee igual de arriba abajo. */
    .trio { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
    .cifra-box { padding: 14px 14px; }
    .cifra-box .rot { min-height: 0; }
    /* Y aquí la tercera columna NO se cae: es el botón de quitar la fila, y sin
       él la tabla de aportaciones a mano solo se puede llenar, no corregir. */
    .tabla-flujos th:nth-child(3), .tabla-flujos td:nth-child(3) { display: table-cell; }
    .tabla-flujos input { min-width: 0; font-size: 0.85rem; padding: 8px 7px; }
    .tabla-flujos th:last-child, .tabla-flujos td:last-child { width: 34px; }
    .tabla-flujos td { padding: 5px 3px; }
}