/**
 * Calculadoras fiscales · lenguaje visual común.
 *
 * Las cuatro calculadoras (funcionarios UE, pensiones ONU, Ley Beckham y
 * sueldo o dividendo) venían de Víctor con estilos propios y muy distintos
 * entre sí. Este fichero es el que las iguala, y lo hace con los tokens del
 * tema y no con una paleta nueva.
 *
 * TIPOGRAFÍA: la misma que las internas de la web (ver .ss-hero__h1 en
 * servicios.css). El titular va en Newsreader a 64px con peso 500 y
 * letter-spacing -.03em, la cursiva naranja es el ÚNICO título en cursiva, y la
 * entradilla a 18px/1.62. Antes esto usaba la escala --t-* con peso 400 y se
 * leía como de otra web.
 *
 * CONTRASTE: el cuerpo pequeño va en --text (#444) y no en --text-2 (#6b6b6b).
 * Con 11-12px sobre crema, el gris claro se perdía; los tamaños mínimos suben a
 * 12-13px por el mismo motivo.
 *
 * Namespace `.calc-`. Se carga solo en las páginas de calculadora.
 *
 * @package Riera
 */

.calc-page {
	background: var(--cream);
	/* Radio propio de las calculadoras. El resto de la web va a 2px, pero aquí
	   son cajas grandes con muchos datos dentro y a 2px quedaban duras; a
	   petición de Mariano se redondean para darles calidez. Dos valores: el
	   grande para los bloques y el pequeño para los controles, que con el
	   mismo radio que la caja se ven desproporcionados. */
	--calc-r: 10px;
	--calc-r-s: 5px;

	/* Colores de estado de las obligaciones. Sobrios a propósito: el verde y el
	   rojo saturados pelean con el naranja de marca, así que van apagados y
	   siempre con su fondo claro detrás. */
	--calc-ok: #1F6B47;
	--calc-ok-bg: #E9F1EC;
	--calc-warn: #8A5A08;
	--calc-warn-bg: #FBF0DA;
	--calc-no: #A02A22;
	--calc-no-bg: #F9E9E7;
}

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

/* 64px arriba y no 120: el header ya ocupa su alto y con más margen el titular
   se quedaba flotando en una franja vacía. */
.calc-hero { padding: 64px 24px 44px; }
.calc-hero__i { max-width: 1400px; margin: 0 auto; }
.calc-hero__eyebrow {
	font-family: var(--sans); font-size: 12px; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase; color: var(--orange);
	margin-bottom: 18px;
}
/* Sin max-width: el titular y la entradilla ocupan el ancho de la caja. */
.calc-hero__t {
	font-family: var(--serif); font-size: 64px; font-weight: 500;
	line-height: 1; letter-spacing: -.03em; color: var(--ink);
	text-wrap: balance;
}
.calc-hero__t em { font-style: italic; color: var(--orange); }
.calc-hero__sub {
	font-family: var(--sans); font-size: 18px; line-height: 1.62;
	color: var(--text); margin-top: 24px;
}

/* ---------- Rejilla: pasos a la izquierda, resultado a la derecha ---------- */

.calc { padding: 12px 24px 100px; }
.calc__i {
	max-width: 1400px; margin: 0 auto;
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px;
	align-items: start;
}

/* ---------- Pasos ---------- */

.calc-steps { display: flex; flex-direction: column; gap: 18px; }

.calc-step { background: var(--white); border: 1px solid var(--line); border-radius: var(--calc-r); }
.calc-step__head {
	width: 100%; display: flex; align-items: center; gap: 14px;
	padding: 22px 24px; background: none; border: 0; cursor: pointer; text-align: left;
	font-family: inherit;
}
.calc-step__n {
	flex: 0 0 28px; height: 28px; display: grid; place-items: center;
	border-radius: 50%; background: var(--orange); color: var(--white);
	font-family: var(--sans); font-size: 13px; font-weight: 600;
}
.calc-step__t {
	flex: 1 1 auto; font-family: var(--serif); font-size: 22px;
	font-weight: 500; color: var(--ink); letter-spacing: -.02em; line-height: 1.2;
}
.calc-step__sum {
	font-family: var(--sans); font-size: 13px; color: var(--text); text-align: right;
}
.calc-step__body { padding: 0 24px 26px; display: none; }
.calc-step.is-open .calc-step__body { display: block; }
.calc-step.is-open .calc-step__head { padding-bottom: 14px; }

/* ---------- Campos ---------- */

.calc-field + .calc-field { margin-top: 24px; }
.calc-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.calc-grid2 .calc-field + .calc-field { margin-top: 0; }

.calc-field__l {
	display: block; font-family: var(--sans); font-size: 13px; font-weight: 500;
	color: var(--text); margin-bottom: 10px;
}
/* min-width 0: un <select> mide por defecto lo que su opción más larga, y en
   una rejilla eso ensanchaba la columna. En móvil las páginas de calculadora
   se maquetaban a 486px en pantallas de 390 (25-sep-2026). */
.calc-field { min-width: 0; }
.calc-field__in {
	min-width: 0; max-width: 100%;
	width: 100%; padding: 12px 14px; background: var(--white);
	border: 1px solid rgba(0,0,0,.18); border-radius: var(--calc-r-s);
	font-family: var(--sans); font-size: 15px; color: var(--ink);
}
.calc-field__in:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.calc-field__note {
	font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--text);
	margin-top: 12px;
}

/* Grupo de opciones. Sustituye a las píldoras del artefacto.
   El borde va a .18 y no al --line del tema (.08): con .08 los botones sin
   seleccionar no se leían como botones. */
.calc-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-seg__o {
	padding: 10px 15px; background: var(--white); border: 1px solid rgba(0,0,0,.18);
	border-radius: var(--calc-r-s); cursor: pointer;
	font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink);
	transition: border-color .18s var(--ease), background .18s var(--ease);
}
.calc-seg__o:hover { border-color: var(--ink); }
.calc-seg__o[aria-pressed="true"] {
	background: var(--orange); border-color: var(--orange); color: var(--white);
}
.calc-seg__o:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Casilla (reducción del 50 %, privacidad) */
.calc-check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; margin-top: 20px; position: relative; }
.calc-check__b {
	flex: 0 0 17px; width: 17px; height: 17px; margin-top: 2px;
	border: 1px solid rgba(0,0,0,.28); border-radius: 3px; background: var(--white);
	display: grid; place-items: center;
}
/* La casilla real va TRANSPARENTE ENCIMA de la dibujada, no reducida a cero:
   con width/height 0 el navegador no puede enfocarla y, si es `required`, se
   niega a enviar el formulario SIN decir por qué, que es lo que pasaba con la
   de privacidad. Con tamaño real, el aviso del navegador sale donde toca. */
.calc-check input {
	position: absolute; left: 0; top: 2px; width: 17px; height: 17px;
	margin: 0; opacity: 0; cursor: pointer;
}
.calc-check input:checked + .calc-check__b { background: var(--orange); border-color: var(--orange); }
.calc-check input:checked + .calc-check__b::after {
	content: ""; width: 8px; height: 4px; margin-top: -2px;
	border-left: 1.5px solid var(--white); border-bottom: 1.5px solid var(--white);
	transform: rotate(-45deg);
}
.calc-check input:focus-visible + .calc-check__b { outline: 2px solid var(--orange); outline-offset: 2px; }
.calc-check__l { font-family: var(--sans); font-size: 13px; line-height: 1.55; color: var(--text); }

/* Aviso normativo dentro de un paso */
.calc-nota {
	margin-top: 20px; padding: 15px 17px; background: var(--orange-50);
	border-radius: var(--calc-r-s);
	font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--text);
}
.calc-nota strong { color: var(--ink); }

/* ---------- Obligaciones ---------- */

.calc-ob { display: flex; flex-direction: column; gap: 8px; }
.calc-ob__r {
	display: flex; align-items: center; gap: 13px; padding: 14px 16px;
	background: var(--cream); border-radius: var(--calc-r-s);
}
.calc-ob__m { font-family: var(--serif); font-size: 17px; font-weight: 500; color: var(--ink); }
.calc-ob__n { flex: 1 1 auto; font-family: var(--sans); font-size: 13px; color: var(--text); }
.calc-ob__dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--text); }
.calc-ob__tag {
	font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .05em;
	text-transform: uppercase; padding: 5px 9px; border-radius: var(--calc-r-s);
	background: var(--white); color: var(--ink); border: 1px solid rgba(0,0,0,.2);
	white-space: nowrap;
}

/* Semáforo: rojo lo que hay que presentar, ámbar lo que depende del caso y
   verde lo que no toca. El color va en el punto y en la etiqueta, y la fila
   lleva solo un fondo muy claro: pintar la fila entera de rojo convertía la
   lista en una alarma. */
.calc-ob__r--si { background: var(--calc-no-bg); }
.calc-ob__r--si .calc-ob__dot { background: var(--calc-no); }
.calc-ob__r--si .calc-ob__tag {
	background: var(--calc-no); color: var(--white); border-color: var(--calc-no);
}

.calc-ob__r--rev { background: var(--calc-warn-bg); }
.calc-ob__r--rev .calc-ob__dot { background: var(--calc-warn); }
.calc-ob__r--rev .calc-ob__tag {
	background: var(--white); color: var(--calc-warn); border-color: var(--calc-warn);
}

.calc-ob__r--no { background: var(--calc-ok-bg); }
.calc-ob__r--no .calc-ob__dot { background: var(--calc-ok); }
.calc-ob__r--no .calc-ob__tag {
	background: var(--white); color: var(--calc-ok); border-color: var(--calc-ok);
}
.calc-ob__p { font-family: var(--sans); font-size: 12px; color: var(--text); white-space: nowrap; }

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

.calc-out { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 100px; }

.calc-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--calc-r); padding: 26px; }
.calc-card--main, .calc-card--dark { background: var(--ink); border-color: var(--ink); }
.calc-card--orange { background: var(--orange); border-color: var(--orange); }
/* Las notas y los títulos también se aclaran dentro de una tarjeta invertida:
   con el gris del cuerpo (#444) quedaban ilegibles sobre negro y sobre naranja. */
.calc-card--inv .calc-card__t { color: var(--white); }
.calc-card--inv .calc-field__note { color: rgba(255,255,255,.88); }
.calc-card--orange .calc-card__k { color: rgba(255,255,255,.9); }
.calc-card--orange .calc-field__note { color: rgba(255,255,255,.92); }
.calc-card__k {
	font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; color: var(--text); margin-bottom: 16px;
}
.calc-card--inv .calc-card__k { color: rgba(255,255,255,.78); }
.calc-card__t {
	font-family: var(--serif); font-size: 26px; font-weight: 500;
	color: var(--ink); letter-spacing: -.02em; line-height: 1.15; margin-bottom: 6px;
}

.calc-num {
	font-family: var(--serif); font-size: var(--t-num); font-weight: 500;
	line-height: 1; letter-spacing: -.03em; color: var(--ink);
}
.calc-card--inv .calc-num { color: var(--white); }
.calc-num__u {
	font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--text);
	margin-left: 10px; letter-spacing: 0;
}
.calc-card--inv .calc-num__u { color: rgba(255,255,255,.8); }

.calc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.calc-chip {
	font-family: var(--sans); font-size: 12px; padding: 6px 11px; border-radius: var(--calc-r-s);
	background: rgba(255,255,255,.16); color: #fff;
}
.calc-card:not(.calc-card--inv) .calc-chip { background: var(--cream); color: var(--text); }

.calc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 22px; }
.calc-split__c { padding: 16px; background: rgba(255,255,255,.09); border-radius: var(--calc-r-s); }
.calc-card:not(.calc-card--inv) .calc-split__c { background: var(--cream); }
.calc-split__k {
	font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; color: rgba(255,255,255,.78); margin-bottom: 9px;
}
.calc-card:not(.calc-card--inv) .calc-split__k { color: var(--text); }
.calc-split__v { font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--white); line-height: 1; letter-spacing: -.02em; }
.calc-card:not(.calc-card--inv) .calc-split__v { color: var(--ink); }
.calc-split__s { font-family: var(--sans); font-size: 12px; color: rgba(255,255,255,.8); margin-top: 9px; }
.calc-card:not(.calc-card--inv) .calc-split__s { color: var(--text); }

/* Tramos de la escala */
.calc-tr { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.calc-tr__r { display: grid; grid-template-columns: 58px 1fr auto; gap: 14px; align-items: center; }
.calc-tr__t { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--orange); }
.calc-tr__bar { height: 7px; background: var(--cream); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.calc-tr__bar span { display: block; height: 100%; background: var(--orange); }
.calc-tr__v { font-family: var(--sans); font-size: 13px; color: var(--ink); text-align: right; }
.calc-tr__rg { font-family: var(--sans); font-size: 12px; color: var(--text); margin-top: 5px; }

.calc-line {
	display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
	font-family: var(--sans); font-size: 14px; color: var(--text);
	padding: 14px 0; border-top: 1px solid var(--line);
}
.calc-line--total { font-weight: 600; color: var(--ink); }
.calc-line__v { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--ink); }

/* Leyenda de fuentes normativas, centrada y con ancho de lectura: a los 1400px
   del contenedor era una línea kilométrica pegada al margen izquierdo. */
.calc-foot {
	max-width: 900px; margin: 0 auto; padding: 0 24px 90px;
	font-family: var(--sans); font-size: 12px; line-height: 1.7; color: var(--text);
	text-align: center; text-wrap: pretty;
}

/* ---------- Comparación de resultados (los tres escenarios juntos) ---------- */

/* Contenedor con su título: los tres escenarios son UNA lectura, no tres
   tarjetas sueltas, y agrupados se entiende que hay que compararlos. */
.calc-comp {
	background: var(--white); border: 1px solid var(--line);
	border-radius: var(--calc-r); padding: 22px;
}
.calc-comp__t {
	font-family: var(--serif); font-size: 22px; font-weight: 500;
	letter-spacing: -.02em; color: var(--ink); line-height: 1.2;
	padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.calc-comp__l { display: flex; flex-direction: column; gap: 14px; }
/* Dentro del contenedor, radio menor y sin doble borde: una caja blanca con
   borde dentro de otra caja blanca con borde se lee como un error. */
.calc-comp .calc-card { border-radius: var(--calc-r-s); padding: 20px; }
.calc-comp .calc-card:not(.calc-card--inv) { background: var(--cream); border-color: transparent; }

/* ---------- Tabla comparativa (pensiones ONU) ---------- */

.calc-tabla { padding: 0 24px 60px; }
.calc-tabla__i { max-width: 1400px; margin: 0 auto; }
.calc-tabla__t {
	font-family: var(--serif); font-size: 26px; font-weight: 500;
	letter-spacing: -.02em; color: var(--ink); margin-bottom: 18px;
}
.calc-tabla__scroll {
	background: var(--white); border: 1px solid var(--line);
	border-radius: var(--calc-r); overflow-x: auto;
}
.calc-tabla__t2 {
	width: 100%; border-collapse: collapse;
	font-family: var(--sans); font-size: 13px; color: var(--text);
}
.calc-tabla__t2 thead th {
	font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: var(--text); text-align: right; padding: 16px 18px;
	border-bottom: 1px solid var(--line); white-space: nowrap;
}
.calc-tabla__t2 thead th:first-child { text-align: left; }
.calc-tabla__t2 tbody th {
	font-weight: 400; text-align: left; color: var(--text);
	padding: 13px 18px; border-bottom: 1px solid var(--line);
}
.calc-tabla__t2 tbody td {
	text-align: right; padding: 13px 18px; color: var(--ink);
	border-bottom: 1px solid var(--line); white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.calc-tabla__t2 tbody tr:last-child th,
.calc-tabla__t2 tbody tr:last-child td { border-bottom: 0; }
/* La cuota total, destacada: es la fila que se compara. */
.calc-tabla__t2 tbody tr.is-total { background: var(--orange-50); }
.calc-tabla__t2 tbody tr.is-total th { font-weight: 600; color: var(--ink); }
.calc-tabla__t2 tbody tr.is-total td { font-family: var(--serif); font-size: 16px; font-weight: 500; }

@media (max-width: 767px) {
	.calc-tabla { padding: 0 20px 44px; }
	.calc-tabla__t { font-size: 22px; }
	.calc-tabla__t2 { font-size: 12px; }
	.calc-tabla__t2 thead th, .calc-tabla__t2 tbody th, .calc-tabla__t2 tbody td { padding: 10px 12px; }
}

/* ---------- Cierre: informe y consulta ---------- */

.calc-cta { background: var(--white); border: 1px solid var(--line); border-radius: var(--calc-r); padding: 26px; }
.calc-cta__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.calc-cta__p {
	display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px;
	background: var(--orange); color: var(--white); border: 1px solid var(--orange);
	border-radius: var(--calc-r-s); cursor: pointer; text-decoration: none;
	font-family: var(--sans); font-size: 13px; font-weight: 600;
	letter-spacing: .04em; text-transform: uppercase;
	transition: background .18s var(--ease);
}
.calc-cta__p:hover { background: var(--orange-h); border-color: var(--orange-h); color: var(--white); }
.calc-cta__p[disabled] { opacity: .6; cursor: default; }
.calc-cta__g {
	display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px;
	background: none; color: var(--ink); border: 1px solid rgba(0,0,0,.25);
	border-radius: var(--calc-r-s); text-decoration: none;
	font-family: var(--sans); font-size: 13px; font-weight: 600;
	letter-spacing: .04em; text-transform: uppercase;
	transition: border-color .18s var(--ease);
}
.calc-cta__g:hover { border-color: var(--ink); color: var(--ink); }
.calc-cta__d { font-family: var(--sans); font-size: 12px; line-height: 1.65; color: var(--text); margin-top: 16px; }

/* ---------- Cierre: el informe, tras el desglose ---------- */

/* Va a ancho completo y al final, no en la columna de resultados: se ofrece
   el informe cuando ya se ha leído todo, no mientras se calcula. */
.calc-cierre { padding: 0 24px 70px; }
.calc-cierre__i { max-width: 1400px; margin: 0 auto; }
.calc-cierre .calc-cta {
	display: flex; align-items: center; justify-content: space-between;
	gap: 40px; flex-wrap: wrap; padding: 28px;
}
.calc-cierre .calc-cta__txt { flex: 1 1 520px; }
.calc-cierre .calc-cta__acts { margin-top: 0; flex: 0 0 auto; }

@media (max-width: 767px) {
	.calc-cierre { padding: 0 20px 48px; }
	.calc-cierre .calc-cta { gap: 22px; padding: 20px; }
	/* Los botones a lo ancho, y su caja también: con el `flex: 0 0 auto` de
	   escritorio no se estrechaba y ensanchaba la página a 486px en móvil. */
	.calc-cierre .calc-cta__acts { flex: 1 1 100%; }
	.calc-cierre .calc-cta__p, .calc-cierre .calc-cta__g { width: 100%; justify-content: center; }
}

/* ---------- Módulo de cierre: la revisión del despacho ---------- */

/* Banda oscura a sangre, el cierre que usa el resto del sitio (.bcta). El
   formulario estaba en la columna de resultados y ahí competía con la cuota. */
/* scroll-margin: el header es sticky, y sin esto el ancla deja el titular
   del modulo debajo de la barra. */
.calc-final { background: var(--ink); padding: 84px 24px; scroll-margin-top: 90px; }
.calc-final__i {
	max-width: 1400px; margin: 0 auto;
	display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: start;
}
.calc-final__t {
	font-family: var(--serif); font-size: 42px; font-weight: 500; line-height: 1.08;
	letter-spacing: -.03em; color: var(--white); text-wrap: balance;
}
.calc-final__t em { font-style: italic; color: var(--orange); }
.calc-final__sub {
	font-family: var(--sans); font-size: 17px; line-height: 1.62;
	color: rgba(255,255,255,.82); margin-top: 20px; max-width: 52ch;
}
.calc-final__form {
	background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
	border-radius: var(--calc-r); padding: 28px;
}
.calc-final__form .calc-field__l { color: rgba(255,255,255,.88); }
.calc-final__form .calc-field__in {
	background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: var(--white);
}
.calc-final__form .calc-field__in::placeholder { color: rgba(255,255,255,.45); }
.calc-final__form .calc-field__in:focus-visible { border-color: var(--orange); background: rgba(255,255,255,.1); }
.calc-final__form .calc-check__l { color: rgba(255,255,255,.82); }
.calc-final__form .calc-check__l a { color: var(--orange); }
.calc-final__form .calc-check__b { background: transparent; border-color: rgba(255,255,255,.4); }
.calc-final__msg {
	font-family: var(--sans); font-size: 13px; line-height: 1.6;
	color: rgba(255,255,255,.88); margin-top: 14px; min-height: 1px;
}

/* =========================================================
   LEY BECKHAM Y SUELDO O DIVIDENDO (25-sep-2026)
   Las dos calculadoras nuevas de Víctor venían en azul marino, Calibri y
   píldoras redondas. Se pasan a este mismo lenguaje: sus piezas propias
   (veredicto, barras comparadas, reparto, gráfica) usan los tokens de arriba
   y ningún color nuevo salvo el del semáforo, que ya existía.
========================================================= */

/* Cifras de entrada alineadas a la derecha, como en una hoja de cálculo. */
.calc-field__in--num { text-align: right; font-variant-numeric: tabular-nums; }

/* Veredicto de encaje en el régimen: el mismo semáforo que las obligaciones. */
.calc-verdict {
	margin-top: 24px; padding: 15px 17px; border-radius: var(--calc-r-s);
	border-left: 3px solid var(--text); background: var(--cream);
	font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--text);
}
.calc-verdict strong {
	display: block; margin-bottom: 4px;
	font-family: var(--serif); font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--ink);
}
.calc-verdict--ok { background: var(--calc-ok-bg); border-left-color: var(--calc-ok); }
.calc-verdict--ok strong { color: var(--calc-ok); }
.calc-verdict--warn { background: var(--calc-warn-bg); border-left-color: var(--calc-warn); }
.calc-verdict--warn strong { color: var(--calc-warn); }
.calc-verdict--no { background: var(--calc-no-bg); border-left-color: var(--calc-no); }
.calc-verdict--no strong { color: var(--calc-no); }

/* Ahorro negativo: el régimen general sale mejor. Se avisa sin alarmar. */
.calc-card--inv .calc-num .is-neg { color: #F4C3BC; }

/* Régimen general frente a Ley Beckham: dos barras en la misma escala. */
.calc-vs { display: flex; flex-direction: column; gap: 16px; }
.calc-vs__h {
	display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px;
	font-family: var(--sans); font-size: 13px; color: var(--text);
}
.calc-vs__v { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-vs__bar { height: 10px; background: var(--cream); border-radius: 999px; overflow: hidden; }
.calc-vs__fill { display: block; height: 100%; width: 0; background: var(--orange); border-radius: 999px; transition: width .35s var(--ease); }
.calc-vs__fill--gen { background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .calc-vs__fill, .calc-mix span { transition: none; } }

/* Reparto sueldo / dividendo en una barra. */
.calc-mix {
	display: flex; height: 8px; margin: 20px 0 8px; border-radius: 999px; overflow: hidden;
	background: rgba(255,255,255,.14);
}
.calc-mix span { display: block; height: 100%; transition: width .35s var(--ease); }
.calc-mix__s { background: rgba(255,255,255,.72); }
.calc-mix__d { background: var(--orange); }
.calc-mix__lab {
	display: flex; justify-content: space-between; gap: 12px;
	font-family: var(--sans); font-size: 12px; color: rgba(255,255,255,.8);
}

/* Curva de impuestos según el sueldo. */
.calc-chart { display: block; width: 100%; height: auto; margin-top: 4px; }
/* En unidades del viewBox (412 de ancho): el SVG se estira al ancho de la
   tarjeta, así que 8 acaba en unos 12px en pantalla. */
.calc-chart text { font-family: var(--sans); font-size: 8px; fill: var(--text); }
.calc-legend {
	display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px;
	font-family: var(--sans); font-size: 12px; color: var(--text);
}
.calc-legend i {
	display: inline-block; width: 10px; height: 10px; border-radius: 50%;
	margin-right: 7px; vertical-align: -1px;
}
.calc-legend__opt { background: var(--orange); }
.calc-legend__cur { background: var(--ink); }

/* Cómo leer el resultado: texto de lectura, a ancho de columna. */
.calc-lee { padding: 0 24px 60px; }
.calc-lee__i { max-width: 1400px; margin: 0 auto; }
.calc-lee__c {
	background: var(--white); border: 1px solid var(--line); border-radius: var(--calc-r);
	padding: 26px 28px; columns: 3 300px; column-gap: 40px;
}
.calc-lee__c p {
	font-family: var(--sans); font-size: 14px; line-height: 1.7; color: var(--text);
	margin: 0 0 14px; break-inside: avoid;
}
.calc-lee__c p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
	.calc-lee { padding: 0 20px 44px; }
	.calc-lee__c { padding: 20px; }
}

/* ---------- Móvil ---------- */

@media (max-width: 1080px) {
	.calc__i { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.calc-final__i { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.calc-out { position: static; }
	/* El resultado va PRIMERO: en una columna, lo que importa al tocar un dato
	   es la cuota, no volver a leer los campos. */
	.calc-out { order: -1; }
}

@media (max-width: 900px) {
	.calc-hero__t { font-size: 52px; }
}

@media (max-width: 767px) {
	.calc-hero { padding: 40px 20px 28px; }
	.calc-hero__t { font-size: 40px; }
	.calc-final { padding: 56px 20px; }
	.calc-final__t { font-size: 32px; }
	.calc-final__sub { font-size: 16px; }
	.calc-final__form { padding: 20px; }
	.calc-hero__sub { font-size: 16px; }
	.calc { padding: 12px 20px 70px; }
	.calc-grid2, .calc-split { grid-template-columns: minmax(0, 1fr); }
	.calc-step__head { flex-wrap: wrap; padding: 18px 18px; }
	.calc-step__body { padding: 0 18px 22px; }
	.calc-step__sum { flex: 1 0 100%; text-align: left; padding-left: 42px; }
	.calc-card, .calc-cta { padding: 20px; }
	.calc-ob__r { flex-wrap: wrap; }
	.calc-ob__p { flex: 1 0 100%; padding-left: 21px; }
}

/* ---------- Impresión: el informe que se descarga ---------- */

/* La cabecera con el logo y el bloque de datos solo existen en papel. */
.calc-print-head, .calc-doc { display: none; }

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

	/* Fuera el marco del sitio. Los nombres son los reales del tema (.hdr,
	   .ftr) y los ids del banner de cookies; con nombres inventados el informe
	   se llevaba el menú, el pie y el aviso de cookies por delante. */
	.ph, .hdr, .ftr, #cookieBanner, #cookieModal, .nlsec, .boletin,
	.calc-cta__acts, .calc-final, .mnav { display: none !important; }

	.calc-page { background: #fff; }

	/* Cabecera del informe: logo a la izquierda, de qué es y de cuándo a la
	   derecha. Se repite arriba de cada hoja no, solo en la primera: Chrome no
	   sabe repetir un bloque suelto y un thead falso complicaría el markup. */
	.calc-print-head {
		display: flex; align-items: flex-end; justify-content: space-between;
		gap: 24px; padding-bottom: 10px; margin-bottom: 18px;
		border-bottom: 2px solid var(--orange);
	}
	.calc-print-head__logo { width: 150px; height: auto; }
	.calc-print-head__meta {
		display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
		font-family: var(--sans); font-size: 9.5px; line-height: 1.4; color: #555;
		text-align: right;
	}

	/* UNA COLUMNA. A dos columnas las cajas se cortaban entre hojas y el
	   informe salía descuadrado. Y el resultado va primero: en papel interesa
	   la cuota antes que los datos de entrada. */
	.calc { padding: 0; }
	.calc__i { display: flex; flex-direction: column; gap: 10px; max-width: none; }
	.calc-out { display: flex; flex-direction: column; gap: 10px; position: static; order: -1; }
	.calc-steps { gap: 10px; }
	.calc-split { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }

	/* Nada se parte por la mitad. */
	.calc-card, .calc-step, .calc-cta, .calc-ob__r, .calc-tr__r {
		break-inside: avoid; page-break-inside: avoid;
	}
	.calc-card, .calc-step, .calc-cta {
		border: 1px solid #ccc; border-radius: 6px; padding: 14px 16px;
	}

	/* De los pasos solo se imprime el de obligaciones. Los demás son la
	   interfaz de entrada: impresos con sus campos y sus acordeones daban un
	   documento raro de cuatro hojas. Lo que se ha introducido se cuenta en
	   .calc-doc, que es una lista y ocupa un tercio. */
	.calc-step:not(.calc-step--ob) { display: none; }
	.calc-step__body { display: block !important; padding: 0 0 4px; }

	.calc-doc {
		display: block; border: 1px solid #ccc; border-radius: 6px;
		padding: 12px 16px; break-inside: avoid;
	}
	.calc-doc__t {
		font-family: var(--serif); font-size: 15px; font-weight: 500; color: #000;
		letter-spacing: -.02em; margin-bottom: 8px;
	}
	.calc-doc__l {
		display: grid; grid-template-columns: 1fr auto 1fr auto;
		column-gap: 14px; row-gap: 0; margin: 0;
		font-family: var(--sans); font-size: 10.5px;
	}
	.calc-doc__l dt { color: #555; padding: 3px 0; border-bottom: 1px solid #eee; }
	.calc-doc__l dd {
		margin: 0; color: #000; font-weight: 500; text-align: right;
		padding: 3px 0; border-bottom: 1px solid #eee;
	}
	.calc-step__head { padding: 0 0 8px; }
	.calc-step__t { font-size: 15px; }
	.calc-step__n { flex-basis: 20px; height: 20px; font-size: 10px; }
	.calc-step__sum { font-size: 11px; }
	.calc-field + .calc-field { margin-top: 12px; }
	.calc-grid2 { gap: 12px; }
	.calc-field__l { font-size: 10px; margin-bottom: 4px; }
	/* Los campos se leen como datos, no como formulario: en papel un input con
	   su caja y su borde parece un impreso a rellenar. */
	.calc-field__in {
		padding: 2px 0; font-size: 11.5px; background: none;
		border: 0; border-bottom: 1px solid #ddd; border-radius: 0; color: #000;
	}
	.calc-field__note, .calc-nota, .calc-check__l { font-size: 10px; line-height: 1.45; }
	.calc-nota { padding: 8px 10px; margin-top: 12px; }

	/* En papel no hay tinta que gastar en fondos oscuros. */
	.calc-card--inv { background: #fff; border-color: #999; }
	.calc-card--inv .calc-card__k, .calc-card--inv .calc-num,
	.calc-card--inv .calc-split__v, .calc-card--inv .calc-card__t { color: #000; }
	.calc-card--inv .calc-field__note { color: #333; }
	.calc-card--inv .calc-chip, .calc-card--inv .calc-split__c { background: #f4f4f4; color: #333; }
	.calc-card--inv .calc-split__k, .calc-card--inv .calc-split__s { color: #555; }
	.calc-card--inv .calc-num__u { color: #555; }
	.calc-card--orange { background: #fff; border-color: var(--orange); }
	.calc-card--orange .calc-num { color: var(--orange); }

	/* El titular de la web no hace falta dos veces: la cabecera ya dice qué es. */
	.calc-hero { padding: 0 0 14px; }
	.calc-hero__eyebrow { font-size: 9.5px; margin-bottom: 6px; }
	.calc-hero__t { font-size: 22px; }
	.calc-hero__sub { font-size: 10.5px; margin-top: 8px; }

	.calc-num { font-size: 30px; }
	.calc-card__k { font-size: 9.5px; margin-bottom: 8px; }
	.calc-card__t { font-size: 15px; }
	.calc-split__v { font-size: 16px; }
	.calc-chip { font-size: 10px; padding: 3px 7px; }
	.calc-ob__r { padding: 7px 10px; }
	.calc-ob__m { font-size: 12px; }
	.calc-ob__n, .calc-ob__p { font-size: 10px; }
	.calc-ob__tag { font-size: 9px; padding: 2px 6px; }
	.calc-tr { gap: 7px; }
	.calc-tr__t, .calc-tr__v { font-size: 10.5px; }
	.calc-tr__rg { font-size: 9.5px; }
	.calc-line { font-size: 11px; padding: 8px 0; }
	.calc-line__v { font-size: 13px; }
	.calc-foot { padding: 12px 0 0; font-size: 9px; }

	.calc-cierre { padding: 8px 0 0; }
	.calc-cierre .calc-cta { display: block; padding: 10px 14px; }

	.calc-comp { border: 0; padding: 0; }
	.calc-comp__t { font-size: 14px; padding-bottom: 6px; margin-bottom: 10px; }
	.calc-comp__l { gap: 10px; }
	.calc-comp .calc-card { border: 1px solid #ccc; }

	.calc-tabla { padding: 10px 0 0; }
	.calc-tabla__t { font-size: 14px; margin-bottom: 8px; }
	.calc-tabla__scroll { border: 1px solid #ccc; border-radius: 6px; overflow: visible; }
	.calc-tabla__t2 { font-size: 9.5px; }
	.calc-tabla__t2 thead th { font-size: 8.5px; padding: 7px 9px; }
	.calc-tabla__t2 tbody th, .calc-tabla__t2 tbody td { padding: 6px 9px; }
	.calc-tabla__t2 tbody tr { break-inside: avoid; }

	/* En el propio informe no tiene sentido ofrecer el informe: de esa tarjeta
	   se queda solo el aviso de que es una estimación. */
	.calc-cta .calc-card__t,
	.calc-cta .calc-field__note { display: none; }
	.calc-cta { padding: 10px 16px; }
	.calc-cta__d { margin-top: 0; }

	a[href]::after { content: ; }

	/* Piezas de Beckham y sueldo o dividendo. */
	.calc-verdict { margin-top: 10px; padding: 8px 10px; font-size: 10px; break-inside: avoid; }
	.calc-verdict strong { font-size: 12px; }
	.calc-vs { gap: 8px; }
	.calc-vs__h { font-size: 10px; margin-bottom: 4px; }
	.calc-vs__v { font-size: 12px; }
	.calc-vs__bar { border: 1px solid #ddd; background: #fff; }
	.calc-vs__fill, .calc-mix span, .calc-legend i {
		-webkit-print-color-adjust: exact; print-color-adjust: exact;
	}
	.calc-mix { background: #eee; border: 1px solid #ddd; }
	.calc-mix__s { background: #999; }
	.calc-mix__lab { color: #555; font-size: 10px; }
	.calc-chart { max-width: 360px; }
	.calc-legend { font-size: 10px; margin-top: 6px; }
	.calc-lee { padding: 10px 0 0; }
	.calc-lee__c { border: 1px solid #ccc; border-radius: 6px; padding: 10px 14px; columns: 1; }
	.calc-lee__c p { font-size: 10px; line-height: 1.5; margin-bottom: 6px; }
	.calc-card--inv .calc-num .is-neg { color: #000; }
}

/* ==== ONU simplificada (28-sep) ==== */
/* Los tres escenarios en barras (reutiliza .calc-vs de la Ley Beckham): el
   100 % en tinta, el 33 % en naranja y el 25 % en un naranja aclarado. Bajo
   cada barra, el tipo medio efectivo. */
.calc-onu-esc { margin-top: 18px; }
.calc-vs__fill--b { background: color-mix(in srgb, var(--orange) 45%, var(--white)); }
.calc-onu-esc__tipo { font-family: var(--sans); font-size: 12px; color: var(--text); margin-top: 6px; }

/* ==== Beckham simplificada (28-sep) ==== */

/* Tres preguntas numeradas: el número va apagado hasta que se contesta, como
   en la versión simple de Víctor, y se enciende en naranja al responder. */
.calc--bk .calc-step__n { background: rgba(0,0,0,.08); color: var(--text); transition: background .2s var(--ease), color .2s var(--ease); }
.calc--bk .calc-step.is-done .calc-step__n { background: var(--orange); color: var(--white); }
/* Las preguntas son frases largas: un punto menos que el título de paso habitual. */
.calc--bk .calc-step__t { font-size: 19px; }
.calc--bk .calc-verdict[hidden] { display: none; }
.calc--bk .calc-nota { margin-top: 0; }
/* En una columna van primero las tres preguntas, como en la versión de
   Víctor: arranca vacía y, con el resultado arriba, lo primero que se veía era
   un "0 €". Con tres datos el resultado queda a un pulgar de distancia. */
@media (max-width: 1080px) {
	.calc--bk .calc-out { order: 0; }
}
@media (max-width: 767px) {
	.calc--bk .calc-step__t { font-size: 17px; }
	/* El número al lado de la pregunta, no encima: aquí no hay resumen que
	   necesite la segunda línea. */
	.calc--bk .calc-step__head { flex-wrap: nowrap; align-items: flex-start; }
}
@media print {
	.calc--bk .calc-step__n { background: #eee; color: #000; }
	.calc--bk .calc-nota { display: none; }
}

/* ==== UE simplificada (28-sep) ==== */
/* Tres preguntas siempre abiertas, sin acordeón. El número va apagado hasta
   que la pregunta está contestada y entonces se enciende en naranja. */
.calc--ue .calc-step--q .calc-step__head { cursor: default; align-items: flex-start; padding-bottom: 12px; }
.calc--ue .calc-step--q .calc-step__t { display: block; font-size: 20px; cursor: default; }
.calc--ue .calc-step--q .calc-step__n {
	background: rgba(0,0,0,.08); color: var(--text); margin-top: 1px;
	transition: background .2s, color .2s;
}
.calc--ue .calc-step--q.is-done .calc-step__n { background: var(--orange); color: var(--white); }
.calc--ue .calc-step--q .calc-step__body { padding-left: 66px; }
.calc--ue .calc-q__help { font-family: var(--sans); font-size: 13px; line-height: 1.55; color: var(--text); margin: 0 0 12px; }
.calc--ue .calc-step--q .calc-field__in { font-size: 17px; }
.calc--ue .calc-nota { margin-top: 0; }
.calc--ue .calc-card--ob .calc-card__t { font-size: 22px; margin-bottom: 16px; }
@media (max-width: 767px) {
	.calc--ue .calc-step--q .calc-step__head { flex-wrap: nowrap; }
	.calc--ue .calc-step--q .calc-step__t { font-size: 18px; }
	.calc--ue .calc-step--q .calc-step__body { padding-left: 18px; }
}

/* ==== Sueldo o dividendo simplificada (28-sep) ==== */
/* Tres preguntas numeradas, mismo criterio que la UE y la Beckham: el número
   va apagado hasta que la pregunta está contestada. Las preguntas son frases
   largas, así que van un punto por debajo del título de paso habitual, y en
   móvil la cabecera no salta de línea (el número se quedaba solo arriba). El
   resumen de la cabecera sobra en móvil: el campo está justo debajo. */
.calc--sd .calc-step__n { background: rgba(0,0,0,.08); color: var(--text); transition: background .2s var(--ease), color .2s var(--ease); }
.calc--sd .calc-step.is-done .calc-step__n { background: var(--orange); color: var(--white); }
.calc--sd .calc-step__t { font-size: 20px; }
.calc--sd .calc-nota { margin-top: 0; }
@media (max-width: 767px) {
	.calc--sd .calc-step__head { flex-wrap: nowrap; align-items: flex-start; }
	.calc--sd .calc-step__n { margin-top: 1px; }
	.calc--sd .calc-step__t { font-size: 18px; }
	.calc--sd .calc-step__sum { display: none; }
}

/* ==== Comunes a las cuatro simplificadas (28-sep) ==== */
/* La ONU se apaga y enciende igual que las otras tres. */
.calc--onu .calc-step__n { background: rgba(0,0,0,.08); color: var(--text); transition: background .2s var(--ease), color .2s var(--ease); }
.calc--onu .calc-step.is-done .calc-step__n { background: var(--orange); color: var(--white); }
/* En una columna, primero las preguntas en las cuatro (ya lo hacía la Beckham):
   arrancan vacías y con el resultado arriba lo primero que se veía era "0 €". */
@media (max-width: 1080px) {
	.calc--ue .calc-out, .calc--onu .calc-out, .calc--sd .calc-out { order: 0; }
}
@media print {
	.calc--ue .calc-step__n, .calc--onu .calc-step__n, .calc--sd .calc-step__n { background: #eee; color: #000; }
}

/* ==== Puerta del resultado (28-sep, prueba en la ONU) ==== */
/* El resultado se enseña a cambio de nombre, teléfono y correo. La tarjeta
   ocupa el sitio del resultado, en blanco con el borde naranja para que se
   lea como el paso siguiente y no como un anuncio. */
.calc-gate { border-color: var(--orange); border-width: 1.5px; }
.calc-gate__ico { color: var(--orange); display: block; margin-bottom: 14px; }
.calc-gate .calc-card__t { margin-bottom: 8px; }
.calc-gate__sub { font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--text); margin: 0 0 18px; }
.calc-gate__form { display: flex; flex-direction: column; gap: 14px; }
.calc-gate__form .calc-field { margin: 0; }
.calc-gate__form .calc-field__in { margin-bottom: 0; }
.calc-gate__form .calc-check { margin-top: 4px; }
.calc-gate__btn { width: 100%; justify-content: center; margin-top: 6px; }
.calc-gate .calc-final__msg { color: var(--text); margin: 0; min-height: 0; font-size: 13px; }
.calc-gate .calc-final__msg:empty { display: none; }
.calc-res { display: flex; flex-direction: column; gap: 18px; }
.calc-res[hidden], .calc-gate[hidden], [data-calc-tras-puerta][hidden] { display: none; }
/* El formulario va desactivado hasta tener las tres respuestas. */
.calc-gate__fs { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; transition: opacity .2s var(--ease); }
.calc-gate__fs[disabled] { opacity: .45; }
.calc-gate__fs[disabled] .calc-check, .calc-gate__fs[disabled] button { cursor: not-allowed; }
.calc-gate:not(.is-listo) { border-color: var(--line); }
.calc-gate:not(.is-listo) .calc-gate__ico { color: var(--text-2); }
/* Confirmación encima del resultado. */
.calc-res__ok { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--calc-r); background: color-mix(in srgb, var(--orange) 10%, var(--white)); color: var(--ink); }
.calc-res__ok svg { flex: none; color: var(--orange); margin-top: 1px; }
.calc-res__ok p { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.55; }
@media print {
	.calc-gate, .calc-res__ok { display: none !important; }
}