/* ============================================================================
   HERRAMIENTAS SPG — Suite de Calculadoras Educativas
   Estilos de calculadora bajo .herr-scope para no colisionar con main.css
   ============================================================================ */

/* ── Hero de página ───────────────────────────────────────────────────────── */
.herr-hero {
  background: #10233A;
  padding: var(--esp-24) var(--esp-16) 34px;
}
.herr-hero-inner {
  max-width: 660px;
  margin: 0 auto;
}
.herr-volver {
  display: inline-block;
  color: #C9D4E2;
  text-decoration: none;
  font-size: 14px;                 /* piso 14 (Tanda 2c) */
  /* ES: área táctil 44px sin mover el layout. EN: 44px hit, no shift. */
  padding-block: var(--esp-10);
  margin-block: -11px;
  margin-bottom: var(--esp-10);
  transition: color .15s;
}
.herr-volver:hover { color: #fff; }
.herr-h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  color: #fff;
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.18;
  text-wrap: balance;
  margin: 0;
}
.herr-sub {
  color: #C9D4E2;
  font-size: 15px;
  margin: var(--esp-8) 0 0;
}

/* ── Contenedor principal ─────────────────────────────────────────────────── */
.herr-main {
  background: #FAF6F0;
  min-height: 60vh;
  padding: 26px var(--esp-16) var(--esp-64);
}
.herr-wrap {
  max-width: 620px;
  margin: 0 auto;
}

/* ── Scope: todos los estilos de la suite ────────────────────────────────── */
.herr-scope {
  --navy:       #10233A;
  --navy-2:     #1B3350;
  --coral-dark: #E5532F;
  --cream:      #FAF6F0;
  --card:       #FFF;
  --ink:        #14202E;
  --muted:      #5C6B7C;
  --line:       #E7E1D6;
  --ok:         #2E9E6B;
  --ok-bg:      #EFF8F3;
  --gold:       #E8B54D;
  --radius:     18px;
  --shadow:     0 10px 30px rgba(16,35,58,.12);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  color: var(--ink);
}

/* ── Tarjeta base ── */
.herr-scope .card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px var(--esp-24);
}

/* ── Menú de entrada (index) ── */
.herr-scope .menu-item {
  display: flex;
  gap: var(--esp-12);
  align-items: center;
  width: 100%;
  text-align: left;
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: var(--radio-12);
  padding: var(--esp-16);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s, transform .08s;
  margin-bottom: var(--esp-12);
  text-decoration: none;
  color: var(--ink);
}
.herr-scope .menu-item:hover  { border-color: var(--coral); }
.herr-scope .menu-item:active { transform: scale(.99); }
.herr-scope .menu-item:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.herr-scope .mi-ico {
  font-size: 26px;
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--cream);
  border-radius: var(--radio-12);
}
.herr-scope .mi-t { font-weight: 700; font-size: 16.5px; }
.herr-scope .mi-d { color: var(--muted); font-size: 13.5px; margin-top: var(--esp-2); }
.herr-scope .mi-fl { margin-left: auto; color: var(--coral); font-weight: 700; }
.herr-scope .menu-seccion {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--esp-4) 0 var(--esp-4);
}
.herr-scope .promesa {
  display: flex;
  gap: var(--esp-8);
  background: var(--ok-bg);
  border-radius: var(--radio-12);
  padding: var(--esp-10) var(--esp-12);
  font-size: 13.5px;
  color: #20614A;
  margin-top: var(--esp-6);
  line-height: 1.45;
}

/* ── Progreso ── */
.herr-scope .progress {
  display: flex;
  gap: var(--esp-12);
  align-items: center;
  margin-bottom: var(--esp-20);
}
.herr-scope .casa { width: 24px; height: 24px; opacity: .22; transition: opacity .2s, transform .2s; }
.herr-scope .casa.act { opacity: 1; transform: scale(1.1); }
.herr-scope .plinea { flex: 1; height: 2px; background: var(--line); border-radius: 2px; }
.herr-scope .plinea i {
  display: block; height: 100%; width: 0;
  background: var(--coral); border-radius: 2px; transition: width .35s;
}

/* ── Pasos / wizard steps ── */
.herr-scope .paso     { display: none; }
.herr-scope .paso.act { display: block; animation: herr-entra .25s ease; }
@keyframes herr-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .herr-scope .paso.act { animation: none; } }

/* ── Pregunta + pista ── */
.herr-scope .pregunta {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(20px, 4vw, 25px);
  font-weight: 600;
  margin-bottom: var(--esp-8);
  text-wrap: balance;
}
.herr-scope .pista { color: var(--muted); font-size: 14px; margin-bottom: var(--esp-20); }

/* ── Aviso de rango BLANDO ────────────────────────────────────────────────
   ES: Advierte cuando una cifra escrita a mano se sale de lo habitual, SIN
       bloquear ni corregir: una cifra rara puede ser perfectamente real. Por
       eso usa el dorado de atención (--gold) y no un rojo de error, que daría
       a entender que el dato está mal. Lo inyecta calculadoras-shared.js
       debajo del campo. Piso de 14px cumplido.
   EN: SOFT out-of-range hint. Never blocks or rewrites — an unusual figure
       can be perfectly valid, so it uses the attention gold, not error red. */
.herr-scope .aviso-rango {
  display: flex;
  gap: var(--esp-8);
  color: var(--ink);
  background: rgba(232, 181, 77, .12);
  border-left: 3px solid var(--gold);
  border-radius: var(--radio-8);
  font-size: 14px;
  line-height: 1.45;
  padding: var(--esp-8) var(--esp-12);
  margin: var(--esp-8) 0 0;
}
.herr-scope .aviso-rango::before { content: '!'; font-weight: 700; color: var(--gold); }

/* ── Aviso de campo: ERROR, no advertencia ────────────────────────────────
   ES: Distinto del aviso de rango a propósito, y por una razón que no es
       estética: aquél advierte de una cifra rara que puede ser correcta y va
       en dorado; éste dice que hay algo que ARREGLAR, y va en el rojo de la
       marca. Que se distingan de un vistazo es lo que evita que la persona
       ignore el que sí requiere acción.
       Va pegado al campo —margen mínimo arriba— porque un aviso a diez
       píxeles de distancia parece referirse a otra cosa.
   EN: deliberately distinct from the soft range hint: that one flags an
       unusual but possibly correct figure and is gold; this one says
       something must be FIXED and takes the brand red. Telling them apart at
       a glance is what stops the actionable one being ignored. It hugs the
       field, since a message ten pixels away looks like it belongs to
       something else. */
.herr-scope .aviso-campo {
  display: flex;
  gap: var(--esp-8);
  color: #B83A2E;
  background: rgba(184, 58, 46, .07);
  border-left: 3px solid #B83A2E;
  border-radius: var(--radio-8);
  font-size: 14px;
  line-height: 1.45;
  padding: var(--esp-8) var(--esp-12);
  margin: var(--esp-4) 0 0;
}
.herr-scope .aviso-campo::before { content: '!'; font-weight: 700; flex: none; }
/* ES: el campo con error se marca también en su borde: quien llega por
       teclado ve dónde está el problema sin buscar el texto. */
.herr-scope [aria-invalid="true"] { outline: 2px solid #B83A2E; outline-offset: 1px; border-radius: var(--radio-4); }

/* ── Glosario de siglas — componente COMPARTIDO ───────────────────────────
   ES: La sigla se marca DENTRO del texto, discreta pero pulsable. Se subraya
       punteada —convención de "esto se explica"— en vez de pintarla de color,
       que la confundiría con un enlace y haría esperar una página nueva.
       Área táctil de 44px por el padding vertical del párrafo, sin romper la
       línea. 14px cumple el piso tipográfico móvil.
   EN: Inline acronym marker: dotted underline (the "explain me" convention)
       rather than link colour, so nobody expects to navigate away. */
.herr-scope .sigla {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0 1px;
  cursor: help;
  border-bottom: 1px dotted var(--muted);
  min-height: 0;
}
.herr-scope .sigla:hover { border-bottom-color: var(--coral); }
.herr-scope .sigla:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: var(--radio-4); }
.herr-scope .sigla[aria-expanded="true"] { border-bottom-color: var(--coral); font-weight: 600; }

.herr-scope .sigla-def {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-left: 3px solid var(--coral);
  border-radius: var(--radio-10);
  padding: var(--esp-10) var(--esp-12);
  margin: var(--esp-8) 0;
}

/* ── Input dinero ── */
/* ES: TAMAÑO NORMAL DE FORMULARIO. La cifra iba a 30px y en negrita: el campo
       lucía en vez de servir. Un campo es para escribir, y una tipografía de
       titular dentro de una caja de entrada confunde lo que se teclea con lo
       que se ha calculado — que es justo la distinción que esta suite intenta
       enseñar.
       Baja a 17px, que sigue muy por encima del piso de 14 y se lee sin
       esfuerzo a los 60 años. El símbolo del dólar baja con él: a 22px al
       lado de un 17 quedaba más grande que la cifra que acompaña.
       El relleno vertical pasa de 12 a 4. NO se toca el min-height de 44px
       del input, que es el área táctil: la caja adelgaza por su relleno, no
       por el sitio donde se pulsa. De 76px a 56 — veinte por campo, y hay
       hasta tres campos en un paso.
   EN: NORMAL FORM SIZE. The figure was 30px bold — the field was showing off
       instead of working, and headline type inside an input blurs the very
       distinction this suite teaches: what you type versus what was computed.
       17px sits well above the 14px floor. The dollar sign follows it down;
       at 22px it dwarfed the number beside it. Vertical padding 12→4, while
       the input's 44px touch target is untouched: the box slims by its
       padding, never by where you can press. 76px → 56. */
.herr-scope .dinero {
  display: flex;
  align-items: center;
  gap: var(--esp-8);
  border: 1.5px solid var(--line);
  border-radius: var(--radio-12);
  padding: var(--esp-4) 15px;
  transition: border-color .15s;
}
.herr-scope .dinero:focus-within { border-color: var(--coral); }
.herr-scope .dinero b { font-size: 17px; color: var(--muted); }
.herr-scope .dinero input {
  border: 0; outline: 0;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  width: 100%;
  font-variant-numeric: tabular-nums;
  background: transparent;
}
/* ES: el texto de ayuda dentro del campo, en gris y sin negrita, para que no
       se confunda ni un segundo con una cifra ya escrita.
   EN: the in-field hint in grey and unbolded, so it can never be mistaken for
       a value already entered. */
.herr-scope .dinero input::placeholder { color: var(--muted); font-weight: 400; opacity: 1; }

/* ── Chips ── */
.herr-scope .chips { display: flex; gap: var(--esp-8); flex-wrap: wrap; margin-top: var(--esp-8); }
.herr-scope .chip {
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: var(--esp-8) var(--esp-12);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s;
}
.herr-scope .chip:hover { border-color: var(--coral); }
.herr-scope .chip.act   { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ── Label / etiqueta ── */
/* ES: BORDE EN TODAS LAS ETIQUETAS. Orden del dueño, y tiene efecto práctico:
       en un formulario de varias preguntas seguidas, el texto de una etiqueta
       y la pista de la anterior se parecen demasiado y la vista no encuentra
       dónde empieza cada bloque. El filete da ese punto de partida.

       UN SOLO ESTILO, del token del sitio: --line, el mismo filete que ya
       separa las filas del recibo y bordea las tarjetas. No un gris nuevo
       inventado para esto: un borde propio habría sido el undécimo valor
       suelto de la hoja.

       VA A LA IZQUIERDA, no alrededor. Una caja completa alrededor de cada
       etiqueta convertiría el formulario en una rejilla de cuadros dentro de
       cuadros — el campo ya tiene el suyo. El filete lateral marca el
       comienzo del bloque sin añadir otra caja.

       EL MARGEN SUPERIOR BAJA de 15 a 12 para compensar exactamente lo que
       añaden el relleno y el filete, de modo que la vertical de la rejilla no
       se mueva: eso ya estaba medido y no se toca.
   EN: BORDERS ON EVERY LABEL. Owner's call, with a practical effect: across
       several stacked questions, a label and the previous field's hint look
       alike and the eye loses where each block starts. The rule gives it a
       starting point. ONE style, from the site token --line — the same
       hairline that already separates receipt rows — rather than a new grey
       invented here, which would have been the eleventh loose value in the
       sheet. It sits on the LEFT rather than boxing the label: the field
       already has a box, and boxes inside boxes make a grid of frames. The
       top margin drops 15→12 to absorb exactly what the padding and rule add,
       so the measured vertical rhythm doesn't shift. */
.herr-scope label.eti {
  display: flex;
  align-items: center;
  gap: var(--esp-6);
  font-size: 14px;
  font-weight: 600;
  /* ES: TRES HUECOS Y NO MÁS en toda la tarjeta: 20 abre un bloque nuevo, 12
         separa dentro de él y 8 pega lo que pertenece al elemento de encima.
         La etiqueta ABRE bloque, así que lleva 20 arriba y 8 abajo — su campo
         es suyo, no un vecino.
         Antes había hasta SEIS huecos distintos en una misma pantalla, la
         mitad escritos a mano en la vista con style="margin-top:18px". Un
         formulario con seis ritmos verticales no se lee como una lista de
         preguntas: se lee como cosas amontonadas sin relación entre ellas.
     EN: THREE gaps and no more: 20 opens a block, 12 separates within it, 8
         attaches what belongs to the element above. The label opens a block,
         so 20 above and 8 below — its field belongs to it, it is not a
         neighbour. There used to be six different gaps on one screen, half
         hand-written in the view. */
  margin: var(--esp-20) 0 var(--esp-8);
  /* ES: --ink al 55%, NO --line. Medido con la fórmula de contraste: el
         filete cream daba 1.30 sobre blanco, es decir, prácticamente
         invisible — un borde que no se ve no separa nada, y el punto de este
         era marcar dónde empieza cada bloque. Al 55% da 3.77, por encima del
         3.0 que se pide a un elemento de interfaz, y sigue siendo gris: no
         compite con el texto ni con el coral de las acciones.
         Se deriva de --ink en vez de escribir un gris nuevo, para que siga al
         color de tinta del sitio si cambia.
     EN: --ink at 55%, not --line. Measured with the contrast formula: the
         cream hairline scored 1.30 on white — effectively invisible, and a
         border nobody sees separates nothing. At 55% it scores 3.77, above
         the 3.0 expected of a UI element, and stays grey so it competes with
         neither the text nor the coral actions. Derived from --ink rather
         than a new hand-picked grey. */
  border-left: 3px solid rgba(20, 32, 46, .55);
  padding-left: var(--esp-8);
}

/* ── Mini input (select, porcentaje) ── */
.herr-scope .mini {
  display: flex;
  align-items: center;
  gap: var(--esp-6);
  border: 1.5px solid var(--line);
  border-radius: var(--radio-12);
  padding: var(--esp-10) var(--esp-12);
  transition: border-color .15s;
}
.herr-scope .mini:focus-within { border-color: var(--coral); }
.herr-scope .mini input,
.herr-scope .mini select {
  border: 0; outline: 0;
  font: inherit;
  font-size: 16.5px;
  font-weight: 600;
  width: 100%;
  background: transparent;
}
.herr-scope .mini b { color: var(--muted); font-size: 14px; flex: none; }

/* ── Grid 2 col ── */
.herr-scope .dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-12); }
@media (max-width: 767px) { .herr-scope .dos { grid-template-columns: 1fr; } }

/* ── Texto estimado ── */
.herr-scope .estimado { font-size: 12.5px; color: var(--muted); margin-top: var(--esp-8); line-height: 1.45; }
.herr-scope .estimado b { color: var(--coral-dark); }

/* ── Caja educativa ── */
.herr-scope .dato {
  display: flex;
  gap: var(--esp-8);
  align-items: flex-start;
  background: var(--ok-bg);
  border-radius: var(--radio-12);
  padding: var(--esp-10) var(--esp-12);
  font-size: 13.5px;
  color: #20614A;
  margin-top: var(--esp-12);
  line-height: 1.45;
}
.herr-scope .dato b { color: #14503B; }

/* ── Tooltip "?" ── */
.herr-scope .q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  /* ES: EL CÍRCULO SE VE DE 18px PERO PULSA 44x44. Esto ya estaba escrito en
         el comentario, pero el pseudo-elemento que lo hacía NO EXISTÍA, y
         encima `button { min-height: 44px }` de main.css estiraba el botón:
         el resultado era un óvalo de 18 de ancho por 44 de alto, no un
         círculo. Se veía en cada fila del desglose y ninguna medida de
         tamaño lo delataba, porque el área táctil SÍ medía 44 — solo que
         deformando el dibujo en vez de rodearlo. Apareció mirando la captura.
         `min-height: 0` devuelve el círculo; el ::after de abajo devuelve los
         44 de zona pulsable, que es como se cumple la regla táctil sin
         deformar nada. Mismo remedio que ya usa .sigla y .herr-volver.
     EN: the 18px circle with a 44x44 tap area was described in the comment
         but never built — and main.css's global `button { min-height: 44px }`
         stretched it into an 18x44 oval. Size measurements couldn't catch it:
         the tap area really was 44px, it just deformed the shape instead of
         surrounding it. min-height:0 restores the circle; the ::after below
         restores the tap area. Same remedy .sigla and .herr-volver use. */
  min-height: 0;
  position: relative;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
  color: var(--muted);
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  flex: none;
  padding: 0;
}
/* ES: el expansor. Un rectángulo transparente de 44x44 centrado sobre el
       círculo: se puede pulsar con el pulgar sin apuntar, y no ocupa espacio
       en el maquetado porque va en position absolute. El dedo tiene su área,
       el ojo tiene su círculo.
   EN: the expander — a transparent 44x44 box centred on the circle, so a
       thumb can hit it without aiming. Absolutely positioned, so it costs no
       layout space. The finger gets its target, the eye gets its circle. */
.herr-scope .q::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.herr-scope .q:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.herr-scope .tip {
  display: none;
  font-size: 13px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radio-10);
  padding: var(--esp-8) var(--esp-10);
  margin-top: var(--esp-8);
  line-height: 1.5;
}
.herr-scope .tip.abre { display: block; }

/* ── Botones ── */
.herr-scope .acciones { display: flex; gap: var(--esp-10); margin-top: var(--esp-20); flex-wrap: wrap; }
.herr-scope .btn {
  flex: 1;
  border: 0;
  border-radius: var(--radio-12);
  padding: var(--esp-12) var(--esp-16);
  font: inherit;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, transform .08s;
}
.herr-scope .btn:active      { transform: scale(.985); }
.herr-scope .btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.herr-scope .btn-coral       { background: var(--coral); color: #fff; }
.herr-scope .btn-coral:hover { background: var(--coral-dark); }
.herr-scope .btn-gris        { background: #EEF1F5; color: var(--ink); flex: 0 0 auto; padding-inline: var(--esp-16); }
.herr-scope a.btn-gris       { text-decoration: none; text-align: center; display: inline-flex; align-items: center; justify-content: center; }

/* ── Fila de acciones: Atrás · Siguiente · Imprimir ───────────────────────
   ES: DOS BOTONES DE VERDAD, DEL MISMO TAMAÑO. "Atrás" no es un adorno
       discreto: quien se equivoca al teclear lo necesita tanto como el que
       avanza. Mismo alto y MISMO ANCHO que "Siguiente"; lo único que los
       distingue es el color.

       REJILLA, NO FLEX, y esa es toda la clave. Con columnas iguales el mismo
       ancho y el mismo alto salen POR CONSTRUCCIÓN, no por un número que
       alguien afinó una tarde: las dos celdas de una fila de rejilla miden lo
       mismo aunque una etiqueta larga parta en dos líneas y la otra no. Con
       flex habría que fijar anchos a mano y volverían a descuadrarse en
       cuanto cambie un texto o se estreche la pantalla.

       EL PRIMER PASO NO TIENE "ATRÁS", Y "SIGUIENTE" NO SE ENSANCHA para
       llenar el hueco: al ser hijo único de una rejilla de dos columnas ocupa
       la primera y mide exactamente lo mismo que en los demás pasos. Sale
       gratis; con flex habría hecho falta una regla aparte para el paso 1.

       Y LOS DOS SON MÁS CHICOS QUE ANTES. El principal ya no se estiraba de
       lado a lado, pero seguía siendo el doble de ancho que su compañero.
       El tope de 420px es lo que impide que en un escritorio ancho la pareja
       crezca hasta parecer dos barras.

       El min-height de 44px cumple el área táctil. El borde de 1.5px lo
       llevan TODOS, transparente en los que no lo lucen: sin eso el que tiene
       borde mide 3px más y la fila queda desalineada por un motivo que nadie
       sabría explicar.
   EN: TWO REAL BUTTONS, SAME SIZE. Back is not a discreet accent — whoever
       mistypes needs it as much as the one moving forward. Same height AND
       width; only colour separates them.
       GRID, NOT FLEX: equal columns make equal width and height structural
       rather than a hand-tuned number — grid cells in a row match even when
       one label wraps and the other doesn't. Step 1 has no Back, and its
       Next does NOT widen to fill the gap: as the only child of a two-column
       grid it takes the first column and measures exactly the same. With flex
       that would have needed its own rule.
       The 420px cap stops the pair from growing into two bars on wide
       screens. 44px min-height covers the touch target; every button carries
       the same 1.5px border, transparent where unused, or the bordered one
       sits 3px taller for no visible reason. */
/* ES: EN MÓVIL SE APILAN, y no es una concesión: es la única forma de cumplir
       la regla. Medido con la fuente real, la etiqueta más larga
       ("Ver cuánto puedo comprar →") necesita 234px de botón. Dos de esos en
       paralelo piden 478px, y en una pantalla de 360 el interior de la
       tarjeta son ~296. Al lado no caben, así que el texto partía en dos y
       hasta tres líneas y el alto saltaba de 44 a 60 y a 78 según el paso —
       exactamente lo que la regla prohíbe.
       Apilados, cada botón ocupa los ~296 completos, la etiqueta más larga
       entra en UNA línea y los dos miden lo mismo, alto y ancho, en todos los
       pasos. El umbral de 560px no es redondo por gusto: es dónde el interior
       de la tarjeta pasa de 478.
   EN: STACKED ON MOBILE — the only way to satisfy the rule. Measured with the
       real font, the longest label needs a 234px button; two side by side
       need 478px, and a 360px screen leaves ~296px inside the card. Side by
       side the text wrapped to two and three lines and the height jumped
       44→60→78 depending on the step. Stacked, each button takes the full
       ~296px, the longest label fits on one line, and both match in every
       step. The 560px threshold is where the card's inner width passes 478. */
.herr-scope .acciones {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  /* ES: SIN tope de ancho: la fila mide lo mismo que la caja de los campos de
         arriba, así que sus bordes izquierdo y derecho caen sobre los de
         ellos. Lo que se limita es cada BOTÓN, no la fila.
     EN: no width cap — the row spans exactly the field box, so its left and
         right edges land on theirs. What is capped is each button, not the
         row. */
}
@media (min-width: 560px) {
  /* ES: DOS COLUMNAS DE 240 EMPUJADAS A LOS EXTREMOS. Los 240 salen de medir:
         la etiqueta más larga necesita 234 de botón, y sobran cuatro para que
         un texto más largo en el futuro aparezca partido en la prueba en vez
         de descuadrar la fila en silencio.
         space-between es lo que hace que el botón izquierdo quede a ras del
         borde izquierdo de los campos y el derecho a ras del derecho, sin que
         ninguno de los dos tenga que crecer hasta 280 para llegar.

         Y "SIGUIENTE" VIVE SIEMPRE EN LA COLUMNA 2. Sin esta línea, en el
         paso 1 —donde no hay "Atrás"— caería en la columna 1 y saltaría a la
         derecha al pasar al paso 2: el botón bailaría de sitio cada vez que
         alguien avanza o retrocede. Con la columna fijada, la primera queda
         vacía y el botón no se mueve un píxel en todo el recorrido.
     EN: TWO 240px COLUMNS PUSHED TO THE EDGES. 240 comes from measurement —
         the longest label needs 234 — leaving four spare so a future longer
         label surfaces as a wrap in the test instead of silently skewing the
         row. space-between puts the left button flush with the fields' left
         edge and the right one flush right, without either growing to 280.
         NEXT ALWAYS LIVES IN COLUMN 2: without this, step 1 (which has no
         Back) would place it in column 1 and it would jump right on step 2 —
         the button would dance every time someone moves back and forth. */
  .herr-scope .acciones { grid-template-columns: repeat(2, minmax(0, 240px)); justify-content: space-between; }
  .herr-scope .acciones .btn-avanzar { grid-column: 2; }
}
.herr-scope .acciones .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-8);
  border: 1.5px solid transparent;
  text-decoration: none;
  text-align: center;
  padding: var(--esp-10) var(--esp-12);
  font-size: 15px;
  line-height: 1.25;
}

/* ES: TODAS LAS VARIANTES SE ESCRIBEN CON `.acciones` DELANTE, y no es
       cosmética del selector: el bloque común de arriba lleva
       `border: 1.5px solid transparent` y pesa tres clases. Sin el `.acciones`
       aquí, estas reglas pesan dos y PIERDEN — el color del borde nunca
       llegaba a pintarse y los botones salían sin marco. No lo vi en las
       medidas porque medía tamaños y posiciones; apareció al mirar la
       captura. Una regla que pierde por especificidad no avisa: se aplica en
       silencio la del otro.
   EN: every variant is written with `.acciones` in front — not selector
       cosmetics. The shared block above carries a transparent border at three
       classes of specificity; at two, these rules LOSE and the border colour
       never paints, leaving the buttons frameless. Size measurements can't
       catch that — the screenshot did. */
.herr-scope .acciones .btn-avanzar { background: var(--coral); color: #fff; border-color: var(--coral); }
.herr-scope .acciones .btn-avanzar:hover { background: var(--coral-dark); border-color: var(--coral-dark); }

/* ES: APAGADO MIENTRAS FALTE LA CIFRA. Se apaga con gris, no bajando la
       opacidad del coral: un coral al 40% sigue leyéndose como "pulsable, un
       poco apagado", mientras que el gris dice claramente que ahí todavía no
       hay nada que hacer. El cursor de "prohibido" lo confirma al pasar por
       encima, para quien use ratón.
       Se anula el :hover a propósito: un botón que reacciona al ratón invita
       a pulsarlo, y este no se puede pulsar todavía.
   EN: DIMMED UNTIL THERE IS A FIGURE. Greyed rather than a faded coral — a
       40% coral still reads as "clickable, just muted", grey says plainly
       that there is nothing to do here yet. The hover state is cancelled on
       purpose: a button that reacts invites a click it cannot accept. */
.herr-scope .acciones .btn-avanzar:disabled,
.herr-scope .acciones .btn-avanzar[aria-disabled="true"] {
  background: #E4E7EC;
  color: #98A2B3;
  border-color: #E4E7EC;
  cursor: not-allowed;
}
.herr-scope .acciones .btn-avanzar:disabled:hover,
.herr-scope .acciones .btn-avanzar[aria-disabled="true"]:hover {
  background: #E4E7EC;
  border-color: #E4E7EC;
}

/* ES: PÁGINA ANTERIOR Y AJUSTAR — secundarios: sin relleno, solo contorno.
       Del mismo tamaño exacto que el principal; lo que los distingue es el
       color. La flecha va en su propio span para ocultarla al lector de
       pantalla sin quitarla de la vista.
       El contorno es --ink al 22%, no la línea cream de los campos: sobre
       blanco, la cream se veía tan poco que el botón parecía no tener marco.
   EN: secondary — outline only, exactly the primary's size; colour is the
       only difference. The arrow sits in its own span so it can be hidden
       from screen readers while staying visible. The outline is --ink at 22%
       rather than the cream field line, which was almost invisible on white. */
.herr-scope .acciones .btn-atras {
  background: transparent;
  color: var(--muted);
  border-color: rgba(20, 32, 46, .22);
  font-weight: 600;
}
.herr-scope .acciones .btn-atras:hover { background: #F4F6F9; color: var(--ink); border-color: var(--ink); }
.herr-scope .btn-fl { font-size: 17px; line-height: 1; }

/* ES: "Ver propiedades" ocupa la celda que en el paso 1 quedaba vacía. Hereda
       .btn-atras entero —misma caja, mismo contorno, mismo alto— para que la
       fila no cambie de forma al pasar del paso 1 al 2: lo único que cambia
       es el texto de esa celda.
       Se declara aparte, aunque hoy no añada nada, porque es un enlace y no un
       botón: el día que se le dé un matiz propio, ya tiene dónde.
   EN: "Ver propiedades" fills the cell that step 1 left empty. It inherits
       .btn-atras entirely — same box, outline and height — so the row doesn't
       change shape between step 1 and 2; only that cell's text does. Declared
       separately because it is a link rather than a button, so any future
       nuance has somewhere to live. */
/* ES: EL MISMO NOMBRE Y EL MISMO DESTINO TIENEN QUE VERSE IGUAL. "Ver
       propiedades" aparece en dos sitios —la celda libre del paso 1 y la fila
       del resultado— y estaba con contorno en uno y con relleno gris en el
       otro. Dos aspectos para el mismo botón hacen dudar de si llevan al
       mismo lado. Se unifica al contorno, que es el que pidió el dueño.
   EN: THE SAME LABEL AND DESTINATION MUST LOOK THE SAME. "Ver propiedades"
       appears in two places and was outlined in one and grey-filled in the
       other; two looks for one button make people wonder whether they lead to
       the same place. Unified on the outline. */
.herr-scope .btn-ver-props { text-decoration: none; }
.herr-scope .acciones .btn-otras[href="/bienes-raices"] {
  background: transparent;
  color: var(--muted);
  border-color: rgba(20, 32, 46, .22);
  font-weight: 600;
}
.herr-scope .acciones .btn-otras[href="/bienes-raices"]:hover {
  background: #F4F6F9; color: var(--ink); border-color: var(--ink);
}

/* ES: LLEVARSE EL RESULTADO — icono ARRIBA y palabra DEBAJO, no en la misma
       línea. Apilado, el icono funciona como señal a distancia y la palabra
       confirma qué es: quien reconoce el dibujo no necesita leer, y quien no
       lo reconoce tiene la palabra justo debajo, no a un lado donde compite
       con ella. En una fila de cuatro acciones, dos apiladas se leen como un
       par —"lo que puedo hacer con esta hoja"— y se distinguen del resto sin
       una línea divisoria.
       El trazo del SVG hereda currentColor, así que cambia con el texto al
       pasar el ratón sin una regla más.
   EN: TAKE THE RESULT WITH YOU — icon ABOVE, word BELOW, never side by side.
       Stacked, the icon reads at a distance and the word confirms it right
       underneath instead of competing beside it. Two stacked buttons in a row
       of four read as a pair without needing a divider. The SVG stroke
       inherits currentColor, so it follows the text on hover for free. */
.herr-scope .acciones .btn-llevar {
  flex-direction: column;
  gap: var(--esp-4);
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.1;
  /* ES: apilar dos filas no cabe en 44: el alto sube, y sube para los CUATRO
         botones porque la rejilla iguala la fila entera. Se declara aquí para
         que el numero este a la vista y no salga de una suma accidental.
     EN: two stacked rows don't fit in 44px; the height rises for all four
         buttons since the grid equalises the row. Declared here so the number
         is visible rather than emerging from an accidental sum. */
  min-height: 62px;
  padding-block: var(--esp-8);
}
.herr-scope .acciones .btn-llevar:hover { background: var(--navy); color: #fff; }
.herr-scope .btn-ico { flex: none; }

.herr-scope .acciones .btn-otras { background: #EEF1F5; color: var(--ink); font-weight: 600; border-color: #EEF1F5; }
.herr-scope .acciones .btn-otras:hover { background: #E3E8EF; border-color: #E3E8EF; }

/* ES: EN EL RESULTADO hay tres o cuatro acciones, no dos, así que la rejilla
       reparte tantas columnas IGUALES como quepan y baja de fila cuando no
       caben. Sigue valiendo la misma regla: dentro de una fila, todas miden
       lo mismo — no hay una acción "grande" y dos pequeñas.
       Se separa un poco más de lo de arriba: viene de una cifra grande y
       necesita aire antes de pedir la siguiente acción.
   EN: the result row holds three or four actions, so the grid lays out as
       many EQUAL columns as fit and wraps when they don't — within a row,
       every button still measures the same. Extra air after the headline
       figure before offering the next action. */
.herr-scope .acciones-res {
  margin-top: var(--esp-24);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  max-width: 640px;
}

/* ── Campo propio de un grupo de opciones ────────────────────────────────
   ES: Va DEBAJO de los botones y en tamaño menor, porque es la salida para
       quien no está en ninguno, no la vía principal. Si compitiera en peso
       con los botones, todo el mundo se pondría a teclear lo que podía
       elegir de un toque.
       La caja es estrecha a propósito: aquí sólo caben dos o tres cifras, y
       un campo ancho invita a escribir una frase.
   EN: Sits BELOW the chips and smaller, because it is the way out for whoever
       fits none of them, not the main path — matched in weight, everyone
       would type what a single tap already offers. The box is deliberately
       narrow: two or three digits fit here, and a wide field invites a
       sentence. */
.herr-scope .opcion-libre-fila {
  display: flex; align-items: center; gap: var(--esp-8);
  margin-top: var(--esp-8);
}
.herr-scope .opcion-libre-etq { font-size: 13.5px; color: var(--muted); }
.herr-scope .opcion-libre-caja {
  display: flex; align-items: center; gap: var(--esp-4);
  border: 1.5px solid var(--line); border-radius: var(--radio-8);
  padding: 0 var(--esp-8); background: #fff;
}
.herr-scope .opcion-libre-caja:focus-within { border-color: var(--coral); }
.herr-scope .opcion-libre {
  border: 0; outline: 0; font: inherit; font-size: 15px; font-weight: 600;
  width: 4.5em; min-height: 44px; background: transparent;
  font-variant-numeric: tabular-nums;
}
.herr-scope .opcion-libre::placeholder { color: #9AA5B4; font-weight: 400; }
.herr-scope .opcion-libre-uni { font-size: 14px; color: var(--muted); }

/* ── Toggle 2 opciones ── */
.herr-scope .toggle2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-8); margin-top: var(--esp-8); }
.herr-scope .toggle2 .chip { text-align: center; padding: var(--esp-10); border-radius: var(--radio-12); }

/* ── Resultado ── */
.herr-scope .res-num { text-align: center; margin: var(--esp-2) 0; }
.herr-scope .res-eti {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.herr-scope .res-cifra {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(38px, 9vw, 52px);
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.herr-scope .dona-zona { display: flex; justify-content: center; margin: var(--esp-12) 0 var(--esp-4); }
.herr-scope .leyenda {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-6) var(--esp-12);
  margin: var(--esp-8) 0 var(--esp-12);
}
.herr-scope .leyenda div { display: flex; align-items: center; gap: var(--esp-8); font-size: 13px; color: var(--muted); }
.herr-scope .pt { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* ── Recibo / desglose ── */
/* ── Rectángulos con datos: BLANCO ────────────────────────────────────────
   ES: REGLA DEL DUEÑO — "donde van números no pongas cuadrados navy". El
       color dice qué TIPO de bloque es, y por eso es funcional y no estética:
       blanco significa "aquí están sus números", y el navy queda para lo que
       enseña o invita a llamar. Un cliente que hojea la hoja sabe dónde
       mirar sin leer un título.

       El fondo era #FFFDF9 —blanco roto, casi imperceptible contra el cream
       de la página— y el marco iba DISCONTINUO, que se lee como "provisional"
       o "aquí falta algo", justo lo contrario de lo que debe transmitir el
       cuadro donde están las cifras del cliente. Ahora: blanco puro, filete
       continuo y la sombra del sistema.

       LA SOMBRA SALE DEL TOKEN --shadow, no de un valor escrito aquí. Si
       mañana el sitio ajusta su profundidad, este cuadro la sigue sin que
       nadie se acuerde de venir a tocarlo.

       Las FILAS de dentro no llevan recuadro ni sombra propios: se separan
       con una línea fina y nada más. Una caja dentro de otra caja no ayuda a
       leer, solo añade ruido.
   EN: OWNER RULE — no navy boxes where numbers live. Colour signals the KIND
       of block: white means "your figures are here". The old off-white was
       invisible against the page cream and the DASHED frame read as
       provisional — the opposite of what the box holding someone's money
       should say. The shadow comes from the site token, so it follows any
       future change on its own. Rows inside get a hairline, never a box. */
.herr-scope .recibo {
  border: 1.5px solid var(--line);
  border-radius: var(--radio-12);
  padding: var(--esp-4) 15px;
  background: #fff;
  box-shadow: var(--shadow);
  margin-top: var(--esp-8);
  overflow-x: auto;
}

/* ES: las cuatro métricas de rentabilidad — mismo criterio, mismo blanco.
       Venían con su fondo, borde, radio y relleno escritos a mano dentro del
       JavaScript de la vista.
   EN: the four rentability metrics — same rule, same white; they used to
       carry hand-written background, border, radius and padding inside the
       view's own JavaScript. */
.herr-scope .metrica {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radio-12);
  box-shadow: var(--shadow);
  padding: var(--esp-12);
  text-align: center;
}
.herr-scope .metrica-t { font-size: 12px; color: var(--muted); margin-bottom: var(--esp-4); }
.herr-scope .metrica-v {
  font-size: 22px; font-weight: 700;
  font-family: 'Fraunces', Georgia, serif;
  font-variant-numeric: tabular-nums;
}
.herr-scope .metrica-n { font-size: 11px; color: var(--muted); margin-top: var(--esp-4); }

/* ES: el cartel de escalas cruza la rejilla entera de métricas: es una sola
       explicación para las cuatro, no la nota de una de ellas.
   EN: the scales disclosure spans the whole metrics grid — it explains all
       four, not any single card. */
.herr-scope .pleg-ancho { grid-column: 1 / -1; border-bottom: 0; }
.herr-scope .pleg-p { font-size: 13.5px; line-height: 1.5; margin-bottom: var(--esp-8); }
.herr-scope .pleg-p:last-child { margin-bottom: 0; }

/* ES: el bloque de aprendizaje va sobre NAVY, así que su cabecera plegable
       hereda ese fondo y necesita sus propios colores: en claro, no en el
       gris de las cabeceras sobre blanco, que ahí desaparecería.
       Sin filete inferior: dentro de un bloque de color, una línea más es
       ruido — el propio recuadro ya separa.
   EN: the learning block sits on NAVY, so its disclosure header needs light
       colours; the grey used on white would vanish. No bottom rule: inside a
       coloured block the box already does the separating. */
.herr-scope .pleg-aprende { border-bottom: 0; }
.herr-scope .pleg-aprende .pleg-cab { color: #fff; }
.herr-scope .pleg-aprende .pleg-nom { font-family: 'Fraunces', Georgia, serif; font-size: 16.5px; }
.herr-scope .pleg-aprende .pleg-mas { color: #C9D4E2; }
.herr-scope .pleg-aprende .pleg-cab:hover .pleg-mas { color: var(--gold); }
.herr-scope .pleg-aprende .pleg-cuerpo { padding-left: 0; padding-top: var(--esp-8); }
.herr-scope .grupo {
  font-size: 11.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--esp-12) 0 var(--esp-2);
  font-weight: 700;
}
/* ES: DOS NOMBRES PARA LA MISMA FILA. Siete herramientas generan .fila y tres
       —las que nacieron juntas en otro commit— generan .rec-row. .fila tenía
       su estilo desde el principio; .rec-row nunca lo tuvo, así que en esas
       tres la etiqueta y la cifra salían PEGADAS, sin un espacio:
       "Entrada requerida (10%)$35,200". No se perdió nada por el camino:
       nunca se escribió.
       Van juntas en un solo bloque a propósito. Con dos bloques gemelos, el
       día que alguien ajuste el espaciado lo hará en uno y volveremos a tener
       dos tablas distintas.
       tabular-nums es lo que alinea las cifras en columna: sin él, un 1 ocupa
       menos que un 8 y los importes bailan aunque estén todos a la derecha.
   EN: TWO NAMES FOR ONE ROW — .fila (7 tools, always styled) and .rec-row
       (3 tools, never styled), which is why label and figure ran together in
       those three. Merged into one block so a future spacing tweak can't
       drift them apart again. tabular-nums is what actually aligns the digits
       into a column. */
.herr-scope .fila,
.herr-scope .rec-row {
  display: flex;
  align-items: center;
  gap: var(--esp-8);
  padding: var(--esp-10) 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.herr-scope .fila:last-child,
.herr-scope .rec-row:last-child { border-bottom: 0; }
.herr-scope .fila .nom,
.herr-scope .rec-row > span   { display: flex; align-items: center; gap: var(--esp-6); flex: 1; }
.herr-scope .fila .val,
.herr-scope .rec-row > b      { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Plegable: la cabecera con su subtotal y lo que esconde ───────────────
   ES: La cabecera es UN botón entero, no un texto con un icono al lado que
       haya que acertar: el objetivo táctil es toda la fila. Dentro reparte
       nombre a la izquierda, importe a la derecha y la palabra con su flecha
       al final, que es el orden en que se lee.
       El cuerpo se oculta con display:none desde CSS y el texto sigue en el
       HTML — que es la condición que permite esconderlo del visitante sin
       esconderlo del buscador.
       La flecha gira al abrir: un cambio de estado que no se ve obliga a
       comprobarlo pulsando otra vez.
   EN: the header is one whole button — the tap target is the entire row, not
       a glyph you must hit. Name left, amount right, word and chevron last,
       in reading order. The body is hidden with CSS while the text stays in
       the HTML, which is what lets it hide from the visitor without hiding
       from the crawler. The chevron rotates so the state change is visible. */
.herr-scope .pleg { border-bottom: 1px solid var(--line); }
.herr-scope .pleg:last-child { border-bottom: 0; }
.herr-scope .pleg-cab {
  display: flex;
  align-items: center;
  gap: var(--esp-8);
  width: 100%;
  background: none;
  border: 0;
  padding: var(--esp-10) 0;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  min-height: 44px;
}
.herr-scope .pleg-cab:hover .pleg-mas { color: var(--coral); }
.herr-scope .pleg-cab:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.herr-scope .pleg-nom { flex: 1; font-weight: 600; }
.herr-scope .pleg-val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.herr-scope .pleg-mas {
  display: inline-flex; align-items: center; gap: var(--esp-4);
  color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.herr-scope .pleg-fl { transition: transform .18s; }
.herr-scope .pleg-cab[aria-expanded="true"] .pleg-fl { transform: rotate(180deg); }

/* ES: AQUÍ SE ESCONDE, y solo aquí. El contenido está escrito en el HTML.
   EN: hidden here and only here; the content is written in the HTML. */
/* ES: EL PLEGABLE DE LA DESCRIPCIÓN ABRE BLOQUE, igual que hacía el párrafo
       al que sustituyó: sin margen inferior quedaba pegado al campo de abajo
       —hueco de 0— y la pregunta, su explicación y el campo se leían como una
       sola masa. Y las filas de dos columnas también abren bloque.
       Ambos entran en la escala de tres: 20 para abrir, nada nuevo.
   EN: the description disclosure opens a block, exactly as the paragraph it
       replaced did; without a bottom margin it sat flush against the field
       below (a 0px gap) and question, explanation and field read as one mass.
       Two-column rows open a block too. Both use the existing 20. */
.herr-scope .pleg-texto { margin-bottom: var(--esp-20); }
.herr-scope .dos { margin-top: var(--esp-20); }

.herr-scope .pleg-cuerpo { display: none; padding-left: var(--esp-12); padding-bottom: var(--esp-8); }
.herr-scope .pleg-cab[aria-expanded="true"] + .pleg-cuerpo { display: block; }
@media (prefers-reduced-motion: reduce) { .herr-scope .pleg-fl { transition: none; } }

/* ES: SUBFILA — el desglose de una fila mayor (el PITI abierto en sus cuatro
       trozos). Se sangra y se achica para que se lea como "esto pertenece a
       la línea de arriba" sin necesidad de un título ni de otra caja.
       Antes iba en un style= copiado seis veces en la misma línea de código.
       No baja de 13px: por debajo deja de leerse en un móvil.
   EN: SUB-ROW — the breakdown of a parent line (PITI opened into its four
       parts). Indented and slightly smaller so it reads as belonging to the
       row above, with no extra heading or box. It used to be a style=
       attribute copy-pasted six times on one line. Never below 13px. */
.herr-scope .fila-sub {
  padding-left: var(--esp-12);
  font-size: 13px;
}
.herr-scope .fila-sub .nom { color: var(--muted); }

/* ES: separador entre grupos del recibo — aire, no una raya más. La fila que
       lo precede se queda sin su borde para no juntar dos líneas seguidas.
   EN: group separator — space, not another rule; the preceding row drops its
       border so two lines never stack. */
.herr-scope .rec-sep { height: var(--esp-10); }
.herr-scope .rec-row:has(+ .rec-sep) { border-bottom: 0; }

/* ES: el total. Manda por tamaño y peso, no por color de fondo.
   EN: the total — dominant by size and weight, not by a filled background. */
.herr-scope .rec-total {
  border-top: 1.5px solid var(--line);
  border-bottom: 0;
  padding-top: var(--esp-12);
  font-size: 15.5px;
}
.herr-scope .rec-total > b { font-size: 17px; }
.herr-scope .fila .val.resta  { color: #B4462B; }
.herr-scope .fila.total       { font-size: 16px; border-top: 2px solid var(--navy); margin-top: var(--esp-2); border-bottom: 0; }
.herr-scope .fila.total .val  { color: var(--coral-dark); }
.herr-scope .aviso            { font-size: 12.5px; color: var(--muted); margin-top: var(--esp-12); line-height: 1.5; }

/* ── Lecciones ── */
.herr-scope .aprendio {
  background: var(--navy);
  color: #EAF0F7;
  border-radius: var(--radio-12);
  padding: var(--esp-16) var(--esp-16) var(--esp-8);
  margin-top: var(--esp-16);
}
/* ES: el mismo desdoble que en las filas: siete herramientas ponen h3 + p y
       tres ponen .lec-h + .lec-lista, que no tenían ni una regla. Resultado:
       cuatro ideas distintas corriendo pegadas como un solo párrafo. Van
       juntas en un bloque para que no se separen otra vez.
   EN: same split as the rows — 7 tools emit h3+p, 3 emit .lec-h/.lec-lista
       with no rules at all, so four separate ideas ran together as one block.
       Merged so they can't drift apart again. */
.herr-scope .aprendio h3,
.herr-scope .aprendio .lec-h {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16.5px;
  color: #fff;
  margin-bottom: var(--esp-8);
}
.herr-scope .aprendio p  { font-size: 13.5px; line-height: 1.55; margin-bottom: var(--esp-8); }
.herr-scope .aprendio b  { color: var(--gold); }

/* ES: SEPARAR IDEAS, no decorarlas. Son cuatro cosas distintas que se leen de
       una en una, así que lo que hace falta es aire entre ellas y un punto que
       marque dónde empieza cada una — no una viñeta grande ni un icono. El
       punto va en ::before con position absolute para que la segunda línea
       alinee con la primera y no debajo del punto: un texto sangrado se lee
       como un bloque, y volveríamos a lo mismo.
   EN: SEPARATE the ideas rather than decorate them — air between them and a
       small dot marking each start. The dot is absolutely positioned so
       wrapped lines align with the first, since re-indented text reads as one
       block again. */
.herr-scope .aprendio .lec-lista { list-style: none; margin: 0; padding: 0; }
.herr-scope .aprendio .lec-lista li {
  position: relative;
  padding-left: var(--esp-16);
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: var(--esp-12);
}
.herr-scope .aprendio .lec-lista li:last-child { margin-bottom: var(--esp-8); }
.herr-scope .aprendio .lec-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* ── CTA final ── */
.herr-scope .cta {
  background: var(--navy);
  border-radius: var(--radio-12);
  padding: var(--esp-16);
  margin-top: var(--esp-12);
  color: #fff;
  text-align: center;
}
.herr-scope .cta p { font-family: 'Fraunces', Georgia, serif; font-size: 17px; margin-bottom: var(--esp-10); }
.herr-scope .cta a {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  font-size: 14.5px;
  padding: var(--esp-10) var(--esp-16);
  border-radius: 999px;
  margin: 0 var(--esp-4) var(--esp-6);
}
.herr-scope .cta .tel { background: var(--coral); color: #fff; }
.herr-scope .cta .wa  { background: #25D366; color: #fff; }
.herr-scope .legal    { font-size: 11.5px; color: var(--muted); margin-top: var(--esp-12); line-height: 1.5; text-align: center; }

/* ── Portal memoria ── */
.spg-mem { margin-top: var(--esp-10); }
.spg-mem-ok,
.spg-mem-anon {
  display: inline-block;
  font-size: 13px;
  padding: var(--esp-6) var(--esp-12);
  border-radius: var(--radio-8);
  margin: 0;
}
.spg-mem-ok   { background: #dcfce7; color: #14532d; }
/* ES: .spg-mem-anon quedó sin uso al retirarse la invitación a registrarse
       dentro de las herramientas. Se retira su regla en vez de dejarla:
       un estilo sin marcado que lo use es el borde número once de la hoja
       contando en las medidas y engañando a quien las lea.
   EN: .spg-mem-anon lost its markup when the registration prompt was
       removed from the tools. The rule goes too — an unused style is an
       extra border value in the audit and a lie to whoever reads it. */
.spg-mem-ok a, .spg-mem-anon a { color: inherit; font-weight: 700; }

/* ── Responsive ── */
@media (max-width: 767px) {
  .herr-scope .card   { padding: var(--esp-16) var(--esp-12); }
  .herr-scope .leyenda { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .herr-scope .toggle2 { grid-template-columns: 1fr; }
}

/* ES: expansor táctil del signo — área 44x44 invisible alrededor (Tanda 2b).
   EN: invisible 44x44 tap expander around the info sign. */
.herr-scope .q::after { content: ''; position: absolute; inset: -13px; }

/* ES: campos de las calculadoras — táctil 44 (Tanda 2b, ronda 2). */
.herr-scope input:not([type=hidden]):not([type=range]), .herr-scope select { min-height: 44px; box-sizing: border-box; }
.herr-scope input[type=range] { height: 44px; }  /* pista táctil alta, thumb igual */

/* ES: piso de 14px en móvil para chips y textos de apoyo (Tanda 2c). */
@media (max-width: 767px) {
  .herr-scope .chip, .herr-scope .pista, .herr-scope small { font-size: 14px; }
}

/* ES: línea de lectura ≤75ch (Tanda 2d). EN: reading caps. */
.herr-scope .pista, .herr-scope .dato { max-width: 70ch; }
.guia-seccion p, .sem-siguiente, .sem-lista li { max-width: 70ch; }

/* ES: restos de 13.5px disueltos (Tanda 2f): la nota .dato al piso móvil.
   EN: 13.5px leftovers dissolved — .dato note to the 14px mobile floor. */
@media (max-width: 767px) {
  .herr-scope .dato, .herr-scope .dato span, .herr-scope .dato b { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INFORME IMPRESO
   ES: En pantalla no existe. En papel es LO ÚNICO que existe.
       La primera versión copiaba el maquetado de la pantalla y salía una hoja
       con los cuadros de entrada impresos, el descargo ocupando el sitio de
       honor arriba y media página en blanco al final. Un informe tiene otra
       estructura: marca, título, qué se pidió en una línea, la cifra, el
       desglose, y el descargo discreto abajo.
       Sin bloques de color grandes: en papel son tinta y ruido.
   EN: Invisible on screen, the only thing on paper. The first version cloned
       the screen layout — empty input boxes printed, disclaimer hogging the
       top, half a blank page. A report has its own structure.
   ═════════════════════════════════════════════════════════════════════════ */
.informe { display: none; }

/* ES: EL BLOQUE DE IMPRESIÓN VIEJO, FUERA DE LA PANTALLA. Su partial se llama
       "solo-impresion" y su propio comentario promete que es invisible en
       pantalla — pero la regla que lo ocultaba nunca se escribió, así que la
       cabecera, el descargo y la fecha se pintaban EN MEDIO de 8 de las 10
       herramientas: 181px de bloque legal encima de la calculadora. Ese es el
       "2026 suelto" que vio el dueño.
       Se verificó en su día con grep, que confirmó que el marcado existía. Lo
       que grep no puede decir es dónde acaba pintado.
   EN: The print-only block was never actually hidden on screen — its rule was
       never written, so a 181px legal header/footer rendered in the middle of
       8 of the 10 tools. grep confirmed the markup existed; it cannot say
       where the markup ends up on screen. */
.solo-impresion { display: none; }

@media print {
  /* ES: 10mm es el LÍMITE DURO: por debajo la impresora doméstica recorta.
         Se baja de 15 a 10 para dar el espacio liberado al CUERPO, que es lo
         que la persona se lleva. Vale para A4 y para Carta.
     EN: 10mm hard floor — below that home printers clip. The reclaimed space
         goes to the body, which is what the reader keeps. */
  @page { margin: 10mm 12mm; }

  /* ES: fuera TODA la pantalla, pero REABRIENDO la cadena hasta el informe.
         Ocultar body > * a secas no basta: el informe vive dentro de esa rama
         (body > .herr-main > .herr-wrap > .herr-scope > .informe) y un
         ancestro en display:none lo anula por mucho !important que lleve —
         salía una hoja en blanco y el informe medía 0×0.
     EN: hide the whole screen but RE-OPEN the ancestor chain: a display:none
         ancestor nullifies the report no matter what, printing a blank page. */
  /* ES: TODA la cadena cuelga de :has(.informe), y esto NO es un adorno.
         Sin la condición, estas reglas apagan la página entera y reabren solo
         .informe — pero .informe existe hoy en 2 de las 10 vistas. En las
         otras 8 no quedaba nada encendido: hoja en blanco. Medido, no supuesto.
         Eso era peor que no tener hoja de impresión, porque antes de todo esto
         imprimir una herramienta al menos imprimía la página.
         Con la condición, una vista sin informe no entra en el apagado y se
         imprime como siempre. Cada herramienta pasa al informe el día que se
         le escribe el suyo, sin tocar esta regla y sin dejar a las demás en
         blanco por el camino.
     EN: the whole chain is gated on :has(.informe). Without it these rules
         black out the page and re-open only .informe — which exists in 2 of
         the 10 views, leaving the other 8 printing a blank sheet (measured).
         Gated, a view without a report simply prints as it always did, and
         each tool opts in the day its own report is written. */
  body:has(.informe) > * { display: none !important; }
  body:has(.informe) .herr-main  { display: block !important; padding: 0 !important; background: #fff !important; min-height: 0 !important; }
  body:has(.informe) .herr-main  > *:not(.herr-wrap)  { display: none !important; }
  body:has(.informe) .herr-wrap  { display: block !important; max-width: none !important; margin: 0 !important; }
  body:has(.informe) .herr-wrap  > *:not(.herr-scope) { display: none !important; }
  body:has(.informe) .herr-scope { display: block !important; }
  body:has(.informe) .herr-scope > *:not(.informe)    { display: none !important; }

  /* ES: en las vistas SIN informe, el bloque viejo vuelve a papel — que es
         para lo que se escribió. Es lo que impide que esas 8 se impriman
         desnudas, sin marca ni descargo, mientras les llega su informe.
     EN: on views without a report, the legacy print block returns to paper —
         its actual purpose — so those 8 don't print unbranded meanwhile. */
  .solo-impresion { display: block !important; }

  /* ES: los botones NO se imprimen. Un botón en papel es tinta que no hace
         nada y delata que la hoja es una captura de pantalla en vez de un
         documento. Incluye el propio botón de Imprimir, que sería el más
         absurdo de todos.
     EN: buttons never print — ink that does nothing, and a giveaway that the
         sheet is a screenshot rather than a document. Including the print
         button itself, which would be the most absurd of the lot. */
  .acciones { display: none !important; }

  /* ES: EN PAPEL, TODO ABIERTO. No se negocia: un papel no tiene botones, y
         un informe con las explicaciones escondidas no explica nada. Quien
         imprime la hoja se la lleva al banco o se la enseña a un familiar que
         nunca vio la pantalla — ahí es donde más falta hace el texto.
         Los botones que abren desaparecen: en papel serían tinta que no hace
         nada y delatarían que la hoja es una captura.
     EN: EVERYTHING PRINTS OPEN. Non-negotiable: paper has no buttons, and a
         sheet with its explanations hidden explains nothing — the person who
         prints it takes it to a bank or shows a relative who never saw the
         screen, which is exactly where the text matters most. The triggers
         themselves vanish: on paper they would be ink that does nothing. */
  .pleg-cuerpo { display: block !important; padding-left: 0 !important; }
  .pleg-cab .pleg-mas { display: none !important; }

  /* ES: EN PAPEL, TODO BLANCO Y SIN SOMBRAS. Dos razones distintas y las dos
         de peso: la tinta NO reproduce una sombra —sale una mancha gris
         sucia alrededor del cuadro— y un bloque navy a página completa se
         come media cartuchera de quien imprime en casa. La regla del color
         (blanco = sus números, navy = le enseño algo) es de PANTALLA: en
         papel la jerarquía la dan el tamaño y el espacio, que no cuestan
         tinta. Se fuerza el color del texto a negro porque un texto claro
         pensado para fondo navy sobre blanco desaparece.
     EN: ON PAPER EVERYTHING GOES WHITE AND FLAT. Ink cannot reproduce a
         shadow — it prints as a dirty grey smear — and a full-width navy
         block drains a home cartridge. The colour rule is a SCREEN rule; on
         paper hierarchy comes from size and space, which cost no ink. Text
         is forced to black because light text meant for navy would vanish. */
  .herr-scope *, .herr-scope {
    background-image: none !important;
    box-shadow: none !important;
  }
  .herr-scope .recibo, .herr-scope .metrica, .herr-scope .card,
  .herr-scope .aprendio, .herr-scope .cta, .herr-scope .aviso-rango {
    background: #fff !important;
    color: #000 !important;
    border-color: #999 !important;
  }
  .herr-scope .aprendio *, .herr-scope .cta * { color: #000 !important; }

  html, body {
    background: #fff !important; color: #000 !important;
    margin: 0 !important; padding: 0 !important;
  }

  .informe {
    display: block !important;
    font-family: 'Archivo', system-ui, sans-serif;
    color: #000;
    font-size: 11pt;
    line-height: 1.45;
  }

  /* ── 1. Cabecera: franja compacta. Lo que convierte el papel en tarjeta. ── */
  /* ES: CABECERA A DOS LÍNEAS: marca y contacto arriba, licencias debajo.
         Ocupa menos alto que la versión de tres líneas apiladas a la derecha y
         deja ese espacio al cuerpo. Una sola línea fina de separación: separar
         con espacio antes que con rayas.
     EN: Two-line header — brand+contact, then licences. One hairline rule. */
  .inf-marca {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 8mm; padding-bottom: 1.5mm;
  }
  .inf-logo { max-height: 11mm; width: auto; }
  .inf-wordmark b { display: block; font-size: 14pt; font-weight: 800; letter-spacing: .3pt; line-height: 1; }
  .inf-wordmark i { display: block; font-size: 7pt; font-style: normal; letter-spacing: 2.2pt; text-transform: uppercase; margin-top: .6mm; }
  .inf-contacto { text-align: right; font-size: 8pt; line-height: 1.35; }
  .inf-lic {
    border-bottom: .75pt solid #000;
    padding-bottom: 1.5mm; margin-bottom: 6mm;
    font-size: 7.5pt; color: #444; letter-spacing: .2pt;
  }

  /* ── 2. Título + fecha: una línea, sin bloque de color ── */
  .inf-titulo {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 8mm; margin-bottom: 3mm;
  }
  /* ES: F3 — El título del informe bajó de h1 a h2 para que la página no tenga
         DOS h1 (la hoja de impresión vive en el DOM aunque solo se vea en
         papel, y el rastreador la lee). Se cubren AMBOS selectores para que el
         papel salga idéntico: mismos 13pt, mismo peso, mismo margen cero.
     EN: F3 — the report title moved from h1 to h2 so the page has a single h1.
         Both selectors are matched so the printed sheet is pixel-identical. */
  .inf-titulo h1,
  .inf-titulo h2 { font-size: 13pt; font-weight: 700; margin: 0; }
  .inf-fecha { font-size: 8pt; color: #444; white-space: nowrap; }

  /* ── 3. Resumen de entradas: una línea de texto, NO los campos ── */
  .inf-resumen {
    font-size: 10pt; color: #222;
    border-left: 2.5pt solid #000; padding-left: 3.5mm;
    margin: 0 0 7mm;
  }

  /* ── 4. El resultado: domina la página. Es lo que se buscaba. ── */
  .inf-resultado { text-align: center; margin: 0 0 7mm; }
  .inf-res-etq { display: block; font-size: 10pt; letter-spacing: 1.4pt; text-transform: uppercase; color: #333; }
  .inf-res-val { display: block; font-size: 38pt; font-weight: 800; line-height: 1.1; margin-top: 1.5mm; }

  /* ── 5. Desglose: tabla limpia. Aquí es donde el papel enseña.
        ES: las líneas van a .5pt y en gris medio: a .3pt y #bbb la impresora
            doméstica las pierde y la tabla se lee como una lista suelta. La
            línea tiene que separar de verdad, sin convertirse en una reja.
        EN: .5pt mid-grey rules — .3pt/#bbb vanishes on home printers and the
            table stops reading as a table. ── */
  .inf-desglose { border-top: 1pt solid #000; }
  .inf-grupo {
    font-size: 8.5pt; letter-spacing: 1.1pt; text-transform: uppercase;
    color: #333; margin: 3.5mm 0 1.2mm;
  }
  .inf-fila {
    display: flex; justify-content: space-between; gap: 6mm;
    border-bottom: .5pt solid #999; padding: 1.7mm 0;
  }
  .inf-nom { font-size: 10.5pt; }
  .inf-val { font-size: 10.5pt; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .inf-fila:last-child { border-bottom: 0; }

  /* ── 6. Pie a UNA línea visual: descargo y marca, discretos, abajo ── */
  .inf-pie { margin-top: 7mm; border-top: .5pt solid #999; padding-top: 1.8mm; }
  .inf-descargo { font-size: 7pt; line-height: 1.4; color: #333; margin: 0 0 1mm; }
  .inf-web { font-size: 7pt; color: #555; margin: 0; }

  /* ── CUERPO A MEDIDA · HIPOTECA: reparto de la cuota ──────────────────
     ES: donut a la izquierda, leyenda a la derecha. El donut NO decora: este
         cálculo es un reparto, y ver la proporción dice algo que la tabla no
         dice. Tonos de gris graduados, nunca color: la hoja se tiene que
         entender impresa en blanco y negro, y cada porción lleva además su
         nombre, su porcentaje y su importe. Si dependiera del color, no
         serviría — y ese es el criterio.
     EN: donut + legend. The donut earns its place: this calculation is a
         split. Graduated greys, never colour — the sheet must read in B&W. */
  .inf-reparto { display: flex; align-items: center; gap: 9mm; margin-bottom: 5mm; }
  .inf-donut { width: 34mm; height: 34mm; flex: none; }
  .inf-leyenda { flex: 1; }
  .inf-leg {
    display: grid;
    grid-template-columns: 3.2mm 1fr auto auto;
    align-items: baseline; gap: 0 3mm;
    padding: 1.4mm 0; border-bottom: .5pt solid #ccc;
  }
  .inf-leg:last-child { border-bottom: 0; }
  .inf-swatch { width: 3.2mm; height: 3.2mm; border-radius: .6mm; }
  .inf-leg-n { font-size: 10pt; }
  .inf-leg-p { font-size: 8.5pt; color: #555; text-align: right; min-width: 11mm; font-variant-numeric: tabular-nums; }
  .inf-leg-v { font-size: 10.5pt; font-weight: 700; text-align: right; min-width: 20mm; font-variant-numeric: tabular-nums; }
  .inf-fila--suma { border-top: .75pt solid #000; border-bottom: 0; margin-top: 1mm; }

  /* ── "Lo que aprendió hoy" ────────────────────────────────────────────
     ES: es lo que hace que la persona guarde el papel. Se separa con AIRE y
         una línea fina, no con un recuadro: separar con espacio antes que con
         rayas. Sin fondo de color — gastaría tinta y abarataría la hoja.
     EN: separated by air and a hairline, never a box or a colour fill. */
  .inf-aprende { margin-top: 7mm; border-top: .5pt solid #ccc; padding-top: 3mm; }
  .inf-aprende:empty { display: none; }
  .inf-ap-tit {
    font-size: 8pt; font-weight: 700; letter-spacing: 1.3pt;
    text-transform: uppercase; color: #555; margin: 0 0 2mm;
  }
  .inf-ap { font-size: 9pt; line-height: 1.5; margin: 0 0 2mm; }
  .inf-ap:last-child { margin-bottom: 0; }
  .inf-ap b { font-weight: 700; }

  /* ── Que quepa en UNA página: si aprieta, aprieta el desglose ── */
  .inf-marca, .inf-titulo, .inf-resultado, .inf-pie,
  .inf-fila, .inf-resumen { break-inside: avoid; page-break-inside: avoid; }
  .inf-grupo { break-after: avoid; page-break-after: avoid; }
}