/* =============================================================
   Calculoteca — hoja de estilos única.
   1. Tokens · 2. Reset · 3. Utilidades · 4. Tipografía
   5. Componentes · 6. Secciones · 7. Efectos · 8. Responsive
   9. Reduced-motion · 10. Impresión · 11. Porcentajes · 12. Regla de tres
   13. Ecuación de segundo grado · 14. Agua diaria · 15. Números romanos
   16. Conversor de temperatura
   17. Calculadora de sueldo neto · 18. Calculadora de interés compuesto
   19. Test de ping y latencia · 20. Calculadora de IMC
   21. Calorías diarias que necesitas · 22. Zonas de frecuencia cardíaca
   23. El buscador · 24. Portada por familias
   25. Calculadora de edad biológica · 26. Esperanza de vida
   27. Percentil de tu sueldo · 28. Tiempo de vida en el móvil
   29. Calculadora de finiquito · 30. Cuota de autonomo
   31. Calculadora de IVA · 32. Días entre dos fechas
   33. Calculadora de edad · 34. Tu edad en otros planetas
   35. Conversor de unidades y tallas
   36. Ritmo de carrera y predicción de marca
   37. Calculadora de 1RM · 38. Calculadora de grasa corporal
   39. El coste real de fumar · 40. Cual es mi IP
   41. Paginas de respuesta (planetas, conversiones)
   42. Tablas largas de esas paginas
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:            #f7f6f2;
  --surface:       #ffffff;
  --surface-2:     #f1efe9;
  --ink:           #14201c;
  --ink-soft:      #55635d;
  /* Ojo con aclarar este gris: es el color de las pistas, los pies de campo
     y los avisos pequenos, que es justo el texto que mas cuesta leer. Con el
     #8b968f de antes daba 2,83:1 sobre el fondo y 2,66:1 sobre --surface-2,
     por debajo del 4,5:1 que pide la WCAG AA para texto normal. Ahora da
     4,96:1 y 4,67:1. */
  --ink-faint:     #636d67;
  --line:          #e2ded4;
  --line-strong:   #cec9bc;

  --accent:        #0f5c47;
  --accent-bright: #158a68;
  --accent-tint:   #e6f1ec;
  /* #b4531b se quedaba en 4,40:1 sobre su propio tinte, justo por debajo del
     minimo; con este da 4,98:1. */
  --warm:          #a94b16;
  --warm-tint:     #fbeee5;

  --radius:   14px;
  --radius-s: 9px;
  --gutter:   clamp(1.15rem, 4vw, 2.5rem);
  --maxw:     1060px;

  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --shadow-card: 0 1px 2px rgba(20, 32, 28, .05), 0 12px 32px -18px rgba(20, 32, 28, .28);

  /* El texto que va ENCIMA del acento. En claro el acento es verde oscuro y
     el blanco contrasta 7,95:1; en oscuro el acento es verde claro y el
     blanco se queda en 2,28:1, ilegible. Por eso es un token y no un #fff
     escrito a mano en cada sitio. */
  --on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #101512;
    --surface:     #171e1a;
    --surface-2:   #1e2723;
    --ink:         #eaeee9;
    --ink-soft:    #a3b1a9;
    /* 3,81:1 sobre --surface-2 con el #74827a de antes; ahora 5,11:1. */
    --ink-faint:   #8b9891;
    --line:        #2a352f;
    --line-strong: #3a4841;

    --accent:        #4fbf96;
    --accent-bright: #63d3a9;
    --accent-tint:   #17302a;
    --warm:          #e08b52;
    --warm-tint:     #2e2118;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -20px rgba(0, 0, 0, .8);

    --on-accent: #0b1512;
  }
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select { font: inherit; color: inherit; }
/* Sin esto, un [hidden] sobre algo con display propio (flex o grid) no oculta
   nada: la regla del autor gana a la del navegador. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.12; letter-spacing: -0.02em; }
::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   3. Utilidades
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  padding: .6rem 1rem; border-radius: 8px; font-weight: 600;
  background: var(--accent); color: var(--on-accent);
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   4. Tipografía
   ============================================================= */
h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.85rem, 6.2vw, 2.9rem);
  letter-spacing: -0.025em;
}

h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.35rem, 3.6vw, 1.85rem);
}

h3 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lede {
  margin-top: .55rem;
  color: var(--ink-soft);
  font-size: clamp(.97rem, 2.4vw, 1.08rem);
  max-width: 46ch;
}

.section-lede {
  margin-top: .35rem;
  color: var(--ink-soft);
  font-size: .94rem;
  max-width: 56ch;
}

/* =============================================================
   5. Componentes
   ============================================================= */

/* --- Header --- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;            /* el buscador baja a su propia fila en móvil */
  gap: .7rem 1rem; min-height: 3.5rem;
  padding-block: .5rem;
}
.logo { display: inline-flex; align-items: center; gap: .5rem; color: var(--accent); }
.logo-mark { flex: none; }
.logo-text {
  font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: -0.02em; color: var(--ink);
}
.header-nav { display: none; gap: 1.35rem; font-size: .9rem; color: var(--ink-soft); }
.header-nav a { transition: color .25s var(--ease-out); }
.header-nav a:hover { color: var(--accent); }

/* --- Botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; padding: .55rem 1rem;
  border-radius: 999px; font-size: .87rem; font-weight: 600;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.btn--ghost {
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  background: var(--surface);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* La acción de verdad de una página, no una secundaria como «imprimir»:
   por ahora solo el buzón de peticiones la necesita. */
.btn--primary {
  border: 1px solid var(--accent);
  color: var(--on-accent);
  background: var(--accent);
}
.btn--primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); }

/* --- Tool card --- */
.tool-card {
  margin-top: 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(1rem, 3.5vw, 1.6rem);
}

.tool-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem 1rem;
}
.field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.field--wide { grid-column: 1 / -1; }

.field label {
  font-size: .82rem; font-weight: 600;
  color: var(--ink-soft); letter-spacing: .005em;
}
.label-soft { font-weight: 400; color: var(--ink-faint); }

.input-wrap {
  display: flex; align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.input-wrap input {
  flex: 1 1 auto; min-width: 0;
  padding: .62rem .3rem .62rem .75rem;
  border: 0; background: none; outline: none;
  font-size: 1.05rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.input-wrap.is-invalid { border-color: var(--warm); }

/* Desplegables: mismo hueco que un campo de texto, con la flecha dibujada
   en el .unit de al lado para no depender de imágenes ni de fuentes. */
.input-wrap select {
  flex: 1 1 auto; min-width: 0;
  padding: .62rem .3rem .62rem .75rem;
  border: 0; background: none; outline: none;
  font-size: 1.05rem; font-weight: 600;
  letter-spacing: -0.01em; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  text-overflow: ellipsis;
}

/* --- La lista que se abre al pulsar un desplegable -------------------
   Hasta ahora el sitio no le decía al navegador de qué color es, así que
   la lista, el calendario de los campos de fecha y las barras de scroll
   salían siempre en blanco, incluso con la página en oscuro. Eso es lo
   que hacía que el desplegable se viese ajeno al resto.

   Se arregla en tres capas, de más compatible a menos:

   1. `color-scheme` (esta regla): funciona en TODOS los navegadores y
      basta para que la lista salga oscura cuando la página lo está.
   2. Color propio en las `option` (abajo): Chrome y Firefox en Windows
      y Linux dibujan la lista ellos mismos y sí lo respetan. En macOS
      la pinta el sistema y esto se ignora sin romper nada.
   3. `appearance: base-select` (más abajo): Chrome y Edge modernos dejan
      dar estilo a la lista entera. Ahí es donde se pone verde de verdad.

   Las tres se apilan: quien no soporte la 3 se queda con la 2, y quien
   no soporte la 2 se queda con la 1, que ya es correcta. */
:root { color-scheme: light dark; }

select option, select optgroup { background: var(--surface); color: var(--ink); }
select optgroup { font-weight: 600; color: var(--ink-soft); }

/* --- Y aquí, donde el navegador lo permite, la lista de la casa ------
   `base-select` es lo que abre a CSS el desplegable nativo. Todo lo de
   dentro va en un @supports porque en un navegador que no lo entienda la
   mitad de estas reglas no significan nada y la otra mitad dejarían el
   campo sin fondo ni borde.

   Solo se aplica a los desplegables que van dentro de un .input-wrap, que
   son todos menos los de nota-pau. Esos usan .campo, donde el borde va
   sobre el propio <select> y no hay .unit con la flecha, y ahí base-select
   rompe dos cosas: cuando el botón lo fabrica el navegador, el elemento
   que lleva el texto elegido vive en su shadow tree, no lo alcanza ningún
   selector del sitio y por tanto no se le puede pedir que encoja. Con una
   etiqueta larga —«Públicas y privadas»— o parte el campo en dos líneas o
   se come la flecha. Se quedan nativos, que para eso las dos primeras
   capas ya les quitan el blanco. */
@supports (appearance: base-select) {

  .input-wrap select {
    appearance: base-select;
    /* base-select vuelve a poner el botón del navegador: centra su
       contenido y le devuelve borde, fondo y relleno propios. */
    display: flex; align-items: center; text-align: left;
    border: 0; background: none; outline: none;
    padding: .62rem .3rem .62rem .75rem;
    /* Y el texto elegido pasa a poder partirse en dos líneas, cosa que un
       desplegable nativo nunca hace: en el móvil, «Al mes» dejaba su campo
       al doble de alto que el de al lado. Va aquí y no en el
       <selectedcontent> porque, cuando el botón lo fabrica el navegador,
       ese elemento vive en su shadow tree y no lo alcanza ningún selector
       del sitio; `white-space` sí se hereda hasta allí. Aquí es inofensivo
       recortar: la flecha no va dentro del <select>, va en el .unit. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* La flecha ya está dibujada en el .unit de al lado. */
  .input-wrap select::picker-icon { display: none; }

  .input-wrap select::picker(select) {
    appearance: base-select;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-card);
    padding: .3rem;
    margin-top: .35rem;
    /* Una lista larga —los 15 tramos de autónomos, las escalas del IRPF—
       no puede tapar la página entera. */
    max-height: 17rem; overflow-y: auto;
    min-width: anchor-size(width);
  }
  /* La lista se ancla al hueco ENTERO y no al <select>, que dentro del
     hueco es más estrecho porque la flecha va aparte en el .unit. Anclada
     al <select> saldría un par de rem más corta que el campo y cantaría. */
  .input-wrap {
    anchor-name: --hueco-campo;
    /* `anchor-scope` no es opcional: en una página con varios campos todos
       los huecos comparten el mismo nombre de ancla y, sin acotarlo, gana
       el último del documento. La lista de «Comunidad» se abría debajo de
       «Hijos». Con esto cada nombre solo vale dentro de su propio hueco. */
    anchor-scope: --hueco-campo;
  }
  .input-wrap select::picker(select) { position-anchor: --hueco-campo; }

  .input-wrap select option {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .7rem;
    border-radius: 7px;
    font-size: .98rem; font-weight: 500;
    color: var(--ink);
    background: none;
    cursor: pointer;
  }
  /* :hover para el ratón y :focus para el teclado: las flechas mueven el
     foco sin pasar el ratón por encima, y sin esto no se vería nada. */
  .input-wrap select option:hover,
  .input-wrap select option:focus {
    background: var(--accent-tint);
    color: var(--ink);
    outline: none;
  }
  .input-wrap select option:checked { font-weight: 700; color: var(--accent); }

  /* La marca de la opción elegida: un punto, no un icono. Ocupa su sitio
     esté marcada o no, para que el texto no baile al recorrer la lista. */
  .input-wrap select option::checkmark {
    content: "";
    width: .5rem; height: .5rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--line-strong);
  }
  .input-wrap select option:checked::checkmark { background: var(--accent); }
}

.unit {
  padding-right: .75rem;
  font-size: .85rem; font-weight: 500;
  color: var(--ink-faint); white-space: nowrap;
}
.unit svg { display: block; }

/* Un textarea dentro de .input-wrap: el único campo que crece en vez de
   pesarse en una línea. Solo lo usa el buzón de peticiones por ahora. */
.input-wrap textarea {
  width: 100%; resize: vertical;
  min-height: 5.5rem;
  padding: .62rem .75rem;
  border: 0; background: none; outline: none;
  font: inherit; font-size: .96rem; line-height: 1.5;
  color: var(--ink);
}

.hint { font-size: .76rem; color: var(--ink-faint); line-height: 1.4; }

/* --- Slider --- */
.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 18px; margin: 0;
  background: none; cursor: pointer;
}
.slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px; background: var(--line-strong);
}
.slider::-moz-range-track {
  height: 4px; border-radius: 999px; background: var(--line-strong);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -6px;
  border-radius: 50%; background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  transition: transform .18s var(--ease-out);
}
.slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.slider:hover::-webkit-slider-thumb { transform: scale(1.15); }
.slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

/* --- Error --- */
.tool-error {
  margin-top: .9rem; padding: .6rem .8rem;
  border-radius: var(--radius-s);
  background: var(--warm-tint);
  border: 1px solid color-mix(in srgb, var(--warm) 35%, transparent);
  color: var(--warm);
  font-size: .86rem; font-weight: 500;
}

/* --- Resultado --- */
.result {
  display: block;
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.result-main { display: flex; flex-direction: column; gap: .1rem; }
.result-label {
  font-size: .8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-faint);
}
.result-figure {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.1rem, 8vw, 3.1rem);
  line-height: 1.05; letter-spacing: -0.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.result-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .5rem; margin-top: .9rem;
}
.result-stats div {
  padding: .55rem .65rem;
  background: var(--surface-2);
  border-radius: var(--radius-s);
  min-width: 0;
}
.result-stats dt {
  font-size: .72rem; color: var(--ink-faint);
  line-height: 1.3; margin-bottom: .1rem;
}
.result-stats dd {
  font-size: .98rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

/* --- Bloque opcional: amortización extra + ahorro --- */
/* Va DESPUÉS del resultado a propósito: en móvil la cifra de la cuota
   tiene que verse sin hacer scroll, y este campo es una mejora, no un
   requisito para usar la calculadora. */
.extra-block {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px dashed var(--line);
}
.extra-block .field { max-width: 24rem; }
/* Dos campos pequeños en fila (los tipos del impuesto) con su pista debajo. */
.extra-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .8rem; }
.extra-col .hint { margin-top: .5rem; max-width: 34rem; }

.savings {
  margin-top: .9rem; padding: .75rem .9rem;
  border-radius: var(--radius-s);
  background: var(--accent-tint);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.savings-title { font-size: .85rem; color: var(--ink-soft); }
.savings-title strong { color: var(--ink); }
.savings-list {
  list-style: none; padding: 0; margin-top: .5rem;
  display: grid; gap: .35rem;
}
.savings-list li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; font-size: .88rem; color: var(--ink-soft);
}
.savings-list strong {
  font-size: 1.02rem; color: var(--accent);
  font-variant-numeric: tabular-nums; letter-spacing: -0.015em;
}
.savings .btn { margin-top: .7rem; }

/* --- El bloque del euríbor (hipoteca) --- */
.hip-titulo {
  font-family: var(--sans);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* Una sola columna, como .ic-real: son tres filas y las etiquetas son frases
   («Un punto más (4,10 %)»), así que en dos columnas se aprietan y una fila
   se queda coja al ser tres sobre una rejilla pensada para dos. */
.hip-euribor .savings-list { grid-template-columns: 1fr; }

.noscript-msg {
  margin-top: 1rem; padding: .8rem .9rem;
  border-radius: var(--radius-s);
  background: var(--warm-tint); color: var(--warm);
  font-size: .88rem; font-weight: 500;
}

/* --- Avisos bajo la tarjeta --- */
.privacy-badge {
  margin-top: 1rem;
  font-size: .87rem; color: var(--ink-soft);
  max-width: 62ch;
}
.privacy-badge strong { color: var(--ink); }
.disclaimer {
  margin-top: .45rem;
  font-size: .78rem; color: var(--ink-faint);
  max-width: 68ch; line-height: 1.5;
}

/* --- Anuncios (placeholders vacíos) --- */
.ad-slot {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-s);
  color: var(--ink-faint);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}
.ad-slot--leaderboard { min-height: 96px; margin: 2.25rem 0; }
.ad-slot--incontent { min-height: 250px; margin: 2rem 0 0; }

/* --- Gráfico --- */
.chart-figure {
  margin-top: 1rem; padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.chart-legend {
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
  margin-bottom: .6rem;
  font-size: .8rem; color: var(--ink-soft);
}
.key { display: inline-flex; align-items: center; gap: .4rem; }
.key::before {
  content: ""; width: 14px; height: 3px; border-radius: 2px; flex: none;
}
.key--capital::before { background: var(--accent); }
.key--interes::before { background: var(--warm); }
.key--banco::before   { background: var(--line-strong); }
.key--entrada::before { background: var(--accent); }
.key--gastos::before  { background: var(--warm); }
.chart-figure canvas { width: 100%; height: auto; }
.chart-caption {
  margin-top: .55rem;
  font-size: .78rem; color: var(--ink-faint);
}

/* --- Tabla --- */
.table-head {
  display: flex; flex-direction: column; gap: .9rem;
  margin-bottom: 1rem;
}
.table-controls { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.switch {
  display: inline-flex; padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.switch button {
  padding: .38rem .85rem; border-radius: 999px;
  font-size: .84rem; font-weight: 600; color: var(--ink-soft);
  transition: background .25s var(--ease-out), color .25s var(--ease-out);
}
.switch button.is-active { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.amort-table {
  width: 100%; border-collapse: collapse;
  font-size: .87rem; font-variant-numeric: tabular-nums;
  min-width: 560px;
}
.amort-table th, .amort-table td {
  padding: .55rem .75rem; text-align: right; white-space: nowrap;
}
.amort-table th:first-child, .amort-table td:first-child { text-align: left; }
.amort-table thead th {
  position: sticky; top: 0;
  background: var(--surface-2);
  font-size: .76rem; font-weight: 600;
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--line);
}
.amort-table tbody tr + tr { border-top: 1px solid var(--line); }
.amort-table tbody tr:hover { background: var(--surface-2); }
.amort-table td.col-capital { color: var(--accent); font-weight: 600; }
.amort-table td.col-interes { color: var(--warm); }
.table-empty { text-align: center !important; color: var(--ink-faint); padding: 1.6rem !important; }

/* Variante de desglose: pocas filas, concepto explicado y una fila de total.
   Cabe en un móvil sin barra horizontal, así que no fuerza ancho mínimo. */
.amort-table--desglose { min-width: 0; }
/* 8rem es lo máximo que deja caber la tabla entera en un móvil de 375 px
   sin barra de desplazamiento lateral. */
.amort-table--desglose td:first-child { white-space: normal; min-width: 8rem; }
.amort-table--desglose .cell-note {
  display: block; margin-top: .15rem; max-width: 44ch;
  font-size: .76rem; font-weight: 400; line-height: 1.4;
  color: var(--ink-faint); white-space: normal;
}
.amort-table--desglose tr.row-total td {
  border-top: 2px solid var(--line-strong);
  font-weight: 700;
}

.table-more {
  display: flex; align-items: center; gap: .8rem;
  margin-top: .8rem; flex-wrap: wrap;
}
.table-count { font-size: .8rem; color: var(--ink-faint); }

/* --- Pasos --- */
.steps {
  list-style: none; padding: 0; margin-top: 1.2rem;
  display: grid; gap: 1rem;
}
.step {
  padding: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.step-icon { color: var(--accent); margin-bottom: .6rem; }
.step h3 { margin-bottom: .3rem; }
.step p { font-size: .89rem; color: var(--ink-soft); }

/* --- Prosa --- */
.prose { max-width: 66ch; }
.prose h2 { margin-bottom: .9rem; }
.prose h3 {
  margin-top: 1.8rem; margin-bottom: .5rem;
  font-size: 1.08rem; color: var(--ink);
}
.prose p { margin-bottom: .9rem; color: var(--ink-soft); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul { margin: 0 0 .9rem 1.1rem; padding: 0; color: var(--ink-soft); }
.prose li { margin-bottom: .3rem; }
.prose .lede { margin-bottom: 1.4rem; }
.prose h1 { margin-bottom: .3rem; }

/* --- FAQ --- */
.faq { margin-top: 1.1rem; display: grid; gap: .5rem; max-width: 70ch; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.faq summary {
  padding: .8rem 1rem; cursor: pointer;
  font-weight: 600; font-size: .93rem;
  list-style: none; position: relative; padding-right: 2.5rem;
  transition: color .2s var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 1rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem; font-weight: 400; color: var(--accent);
  transition: transform .3s var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--accent); }
.faq details p {
  padding: 0 1rem 1rem;
  font-size: .89rem; color: var(--ink-soft);
}

/* --- Migas de pan --- */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin-bottom: .7rem;
  font-size: .82rem; color: var(--ink-faint);
}
.breadcrumb a { color: var(--ink-soft); transition: color .2s var(--ease-out); }
.breadcrumb a:hover { color: var(--accent); }

/* --- Rejilla de herramientas (portada y bloque «Más herramientas») ---
   auto-fit se adapta solo a cualquier ancho: no hacen falta puntos de corte. */
.tool-grid {
  list-style: none; padding: 0; margin-top: 1rem;
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}
.tool-chip { list-style: none; display: flex; }

/* La caja es el enlace cuando la herramienta existe, y el propio <li>
   cuando no (la actual y las que están por hacer no llevan enlace). */
.tool-chip > a,
.tool-chip.is-current,
.tool-chip.is-soon {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: .18rem;
  padding: .95rem 1.05rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out),
              box-shadow .25s var(--ease-out);
}
.tool-chip > a:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.tool-chip-icon { color: var(--accent); margin-bottom: .4rem; }
.tool-chip strong { font-size: .95rem; font-weight: 600; letter-spacing: -0.01em; }
.tool-chip span { font-size: .8rem; color: var(--ink-soft); line-height: 1.45; }
.tool-chip.is-current { border-color: var(--accent); background: var(--accent-tint); }
.tool-chip.is-current strong { color: var(--accent); }
.tool-chip.is-current span { color: var(--ink-faint); }
.tool-chip.is-soon { opacity: .68; }
.tool-chip.is-soon .tool-chip-icon { color: var(--ink-faint); }

.tools-empty {
  margin-top: 1rem;
  font-size: .89rem; color: var(--ink-soft); max-width: 58ch;
}
.tools-empty a {
  color: var(--accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  transition: text-decoration-color .2s var(--ease-out);
}
.tools-empty a:hover { text-decoration-color: var(--accent); }

/* --- Portada --- */
.hub-hero { padding-top: clamp(2rem, 6vw, 3.2rem); }
.lede--hub { max-width: 54ch; }

.hub-tools { padding-top: clamp(1.6rem, 4vw, 2.2rem); }
.tool-group + .tool-group { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.tool-group-title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  letter-spacing: -0.02em;
}
.tool-group-lede {
  margin-top: .2rem;
  font-size: .88rem; color: var(--ink-soft); max-width: 54ch;
}

/* --- Footer --- */
.site-footer {
  margin-top: 3.5rem; padding: 1.8rem 0;
  border-top: 1px solid var(--line);
}
.footer-inner {
  display: flex; flex-direction: column; gap: .7rem;
  font-size: .85rem; color: var(--ink-soft);
}
.footer-brand strong { color: var(--ink); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.footer-nav a { transition: color .2s var(--ease-out); }
.footer-nav a:hover { color: var(--accent); }

/* --- Selector de idioma --- */
/* Va en el pie y no en la cabecera a proposito: el sitio es espanol y solo
   cinco herramientas estan traducidas, asi que poner tres banderas arriba
   prometeria un sitio trilingue que no existe. Abajo cumple lo que tiene que
   cumplir —que /en/ y /fr/ dejen de ser islas sin un solo enlace entrante—
   sin mentirle a nadie sobre lo que va a encontrar. */
.footer-idiomas {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .5rem .9rem;
  font-size: .82rem;
}
.footer-idiomas-rotulo {
  color: var(--ink-faint);
  /* Es una etiqueta, no un enlace: que no se confunda con los de al lado. */
  font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
}
.footer-idiomas a { transition: color .2s var(--ease-out); }
.footer-idiomas a:hover { color: var(--accent); }

@media print { .footer-idiomas { display: none; } }

/* =============================================================
   6. Secciones (ritmo vertical)
   ============================================================= */
.tool-section  { padding-top: clamp(1.6rem, 5vw, 2.6rem); }
.chart-section,
.table-section,
.steps-section,
.prose-section,
.faq-section,
.tools-section { padding-top: clamp(2.4rem, 7vw, 3.6rem); }

/* =============================================================
   7. Efectos
   Presupuesto de animación casi nulo: en una herramienta la velocidad
   ES la marca. Solo microtransiciones de hover y el pulso del resultado
   cuando cambia una cifra. Nada oculto por defecto: sin JavaScript, todo
   el contenido sigue visible.
   ============================================================= */
@keyframes figure-pulse {
  0%   { transform: translateY(2px); opacity: .45; }
  100% { transform: none; opacity: 1; }
}
.result-figure.is-updating { animation: figure-pulse .28s var(--ease-out); }

/* =============================================================
   8. Responsive
   ============================================================= */
@media (min-width: 540px) {
  .result-stats { gap: .7rem; }
  .savings-list { grid-template-columns: 1fr 1fr; gap: .35rem 1.2rem; }
}

@media (min-width: 720px) {
  .header-nav { display: flex; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .table-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 960px) {
  .tool-form { grid-template-columns: 1.4fr 1fr 1fr; }
  .field--wide { grid-column: auto; }
  .result-stats { max-width: 34rem; }
  .extra-block {
    display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: 1.4rem; align-items: start;
  }
  .extra-block .savings { margin-top: 1.55rem; }
}

@media (min-width: 1280px) {
  .result {
    display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 1.6rem; align-items: center;
  }
  .result-stats { margin-top: 0; }
}

/* =============================================================
   9. Reduced-motion (solo lo intrusivo)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .result-figure.is-updating { animation: none; }
}

/* =============================================================
   10. Impresión — la tabla, limpia y en blanco y negro
   ============================================================= */
@media print {
  :root { --ink: #000; --ink-soft: #333; --line: #bbb; --surface: #fff; --surface-2: #fff; --accent: #000; --warm: #444; }
  body { background: #fff; font-size: 11px; }
  .site-header, .header-nav, .ad-slot, .chart-section, .steps-section,
  .prose-section, .faq-section, .tools-section, .site-footer,
  .table-controls, .table-more, .skip-link, .slider, .hint,
  .privacy-badge, .extra-block, .tool-error, #comparativa { display: none !important; }
  /* Se imprime la tabla junto a los datos de partida y el resultado,
     que es lo que da sentido a la hoja. */
  .lede { display: none; }
  .tool-card { box-shadow: none; border: 0; padding: 0; }
  .table-scroll { overflow: visible; border: 0; }
  .amort-table { min-width: 0; font-size: 10px; }
  .amort-table thead th { position: static; background: #fff; }
  .amort-table tbody tr { break-inside: avoid; }
  .table-section { padding-top: 1rem; }
}

/* =============================================================
   11. Calculadora de porcentajes
   Las cuatro preguntas viven en la misma tarjeta, una debajo de otra y con
   su encabezado a la vista. Reutiliza .extra-block (el separador de puntos
   de la amortización extra de la hipoteca) y .result-stats; lo propio de
   aquí es el título de cada bloque y la línea de resultado pequeño.
   ============================================================= */

/* El encabezado de cada pregunta. Es un <h2>/<h3> de verdad, para que la
   página pueda posicionar por las cuatro búsquedas, pero con cuerpo de
   texto normal: compitiendo con el <h1> parecerían cuatro herramientas
   metidas en la misma página. */
.pct-q {
  font-family: var(--sans);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tool-card > .pct-q { margin-bottom: .7rem; }

/* Dos campos y se acabó: sin la tercera columna de .tool-form, que aquí
   dejaría un hueco vacío en las pantallas anchas. */
.tool-form--pct {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 32rem;
}

/* Cada bloque trae su encabezado a todo lo ancho, así que no puede partirse
   en dos columnas como el de la amortización extra. */
.extra-block.pct-block { display: block; }
.pct-block .extra-fields { max-width: 32rem; margin-top: .55rem; }
.pct-block > .hint { margin-top: .55rem; max-width: 64ch; }
.pct-block > .result-stats { margin-top: .75rem; }

/* El resultado pequeño de cada bloque: la frase entera con la cifra dentro.
   Se escribe completa («45 es el 25 % de 180») porque un «25 %» suelto, sin
   los dos números al lado, no dice de qué está hablando. */
.pct-result {
  margin-top: .75rem;
  font-size: .92rem;
  color: var(--ink-soft);
}
.pct-result strong {
  font-size: 1.12rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
/* Cuando una cuenta no se puede hacer (un total a cero), el aviso se queda
   dentro de su bloque: el resto de la calculadora sigue funcionando. */
.pct-result.is-warn,
.pct-result.is-warn strong { color: var(--warm); }

/* --- Tabla de referencia --- */
.amort-table td.col-es { color: var(--accent); font-weight: 600; }
.amort-table tr.row-actual { background: var(--accent-tint); }
.amort-table tbody tr.row-actual:hover { background: var(--accent-tint); }

/* En papel se imprimen las cuatro cuentas. La regla general esconde
   .extra-block porque en la hipoteca es un campo opcional que sobra en la
   hoja; aquí son tres de las cuatro preguntas de la página. */
@media print {
  .pct-block, .pct-block .hint { display: block !important; }
  .amort-table tr.row-actual { background: none; font-weight: 700; }
}

/* =============================================================
   12. Calculadora de regla de tres
   Las cuatro casillas van colocadas como el planteamiento de toda la vida
   —A → B arriba, C → D abajo— con la unidad de cada columna encima. La
   incógnita es la casilla que se deja vacía, así que las cuatro se pintan
   exactamente igual: ninguna lleva un tratamiento de «hueco del resultado».
   Reutiliza .switch (el «Por años / Mes a mes» de la hipoteca), .tool-form,
   .result y .amort-table--desglose; lo propio de aquí es la rejilla con la
   flecha en medio y el bloque del planteamiento.
   ============================================================= */

/* --- Conmutador directa / inversa --- */
/* La nota dice en cinco palabras qué significa el modo elegido. Va al lado
   del conmutador donde cabe y pasa sola a la línea de abajo en un móvil. */
.rt-modo {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .15rem .7rem; margin-bottom: .7rem;
}
.rt-modo-nota { font-size: .78rem; color: var(--ink-soft); }

/* --- La rejilla 2×2 --- */
.tool-form--rt {
  grid-template-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr);
  gap: .4rem .35rem;
  max-width: 30rem;
  align-items: end;
}
/* Las unidades son de la COLUMNA, no de la casilla: por eso hay dos campos
   y no cuatro, y por eso van colocados encima de su columna. */
.rt-unit--a { grid-column: 1; }
.rt-unit--b { grid-column: 3; }
.rt-unit { gap: .18rem; }
.rt-unit label { font-size: .7rem; line-height: 1.25; }
.rt-unit .input-wrap input {
  padding: .26rem .3rem .26rem .5rem;
  font-size: .84rem; font-weight: 500;
}
.rt-arrow {
  align-self: center; justify-self: center;
  color: var(--ink-faint); font-size: 1.05rem; line-height: 1;
}
/* La x del hueco vacío: gris y del mismo cuerpo que el resto. Es un dato que
   falta, no un error, así que no se pinta como una alarma. */
.tool-form--rt input::placeholder {
  color: var(--ink-faint); opacity: 1; font-weight: 600;
}

/* La cifra grande y el planteamiento tienen que caber sin scroll en un móvil
   de 375×812, así que el resultado arranca un poco más pegado que en las
   otras herramientas. Va acotado al formulario de la regla de tres. */
.tool-form--rt ~ .result { margin-top: .85rem; padding-top: .85rem; }

/* La pista cambia de texto pero nunca de altura: si apareciera y
   desapareciera, el resultado daría un salto cada vez que se borra un campo.
   Nunca es roja: quedarse con dos huecos no es equivocarse. */
.rt-pista { margin-top: .35rem; min-height: 1.35em; }
.rt-pista.is-aviso { color: var(--ink-soft); }

/* --- El planteamiento --- */
/* Texto de verdad y seleccionable, alineado con inline-block en vez de con
   flex o grid: así al copiarlo al cuaderno (o al portapapeles) sale en tres
   líneas legibles y no una palabra por renglón. */
.rt-desarrollo { margin-top: .55rem; max-width: 34rem; }
.rt-plan {
  padding: .55rem .75rem;
  background: var(--surface-2);
  border-radius: var(--radius-s);
  font-variant-numeric: tabular-nums;
}
.rt-plan-row { font-size: .95rem; line-height: 1.45; }
.rt-plan-val { display: inline-block; }
.rt-plan-row > .rt-plan-val:first-child { min-width: 5.5rem; text-align: right; }
.rt-plan-arrow {
  display: inline-block; width: 1.5rem;
  text-align: center; color: var(--ink-faint);
}
.rt-plan-eq {
  margin-top: .3rem; padding-top: .3rem;
  border-top: 1px solid var(--line);
  font-size: 1rem; font-weight: 600; color: var(--accent);
  overflow-wrap: anywhere;
}
.rt-frase { margin-top: .55rem; font-size: .88rem; color: var(--ink-soft); }
.rt-frase strong { color: var(--accent); font-variant-numeric: tabular-nums; }

@media (min-width: 1280px) {
  /* A dos columnas el planteamiento se pone al lado de la cifra grande. */
  .result .rt-desarrollo { margin-top: 0; }
}

/* El planteamiento es justo lo que se quiere en papel; el fondo gris, no. */
@media print {
  .rt-plan { background: none; padding: 0; }
}

/* =============================================================
   13. Calculadora de ecuación de segundo grado
   Tres campos —a, b y c— en una sola fila, con LA ECUACIÓN ESCRITA encima
   actualizándose al teclear: es lo que confirma al visitante que ha escrito
   lo que quería escribir. Debajo del resultado, el paso a paso en texto de
   verdad, que es lo que se copia al cuaderno.
   Reutiliza .tool-form, .result, .result-stats, .chart-figure y .btn--ghost;
   lo propio de aquí es la pantalla de la ecuación, la cifra grande partida en
   dos soluciones y el bloque del desarrollo.
   ============================================================= */

/* --- La ecuación escrita --- */
/* Hace de pantalla de la calculadora: va encima de los campos porque es lo
   primero que se mira al teclear. Centrada y con cifras tabulares para que no
   baile al cambiar un dígito. */
.eq-escrita {
  padding: .5rem .75rem;
  margin-bottom: .8rem;
  background: var(--surface-2);
  border-radius: var(--radius-s);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.25rem, 5vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* --- Los tres coeficientes, en una fila --- */
/* Tres columnas iguales a cualquier ancho: a, b y c se leen como la ecuación
   que hay encima, así que partirlos en dos filas rompería la lectura.
   justify-content en el campo alinea los tres recuadros aunque una etiqueta
   ocupe dos líneas y otra una. */
.tool-form--eq {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem .5rem;
  max-width: 30rem;
}
.tool-form--eq .field { justify-content: flex-end; }
.tool-form--eq label { font-size: .78rem; }
.tool-form--eq .label-soft { font-size: .72rem; }
.tool-form--eq .input-wrap input { padding-left: .6rem; padding-right: .35rem; }

/* La pista cambia de texto pero nunca de altura: si apareciera y desapareciera,
   el resultado daría un salto cada vez que se borra un campo. Nunca es roja:
   quedarse a medias escribiendo no es equivocarse. */
.eq-pista { margin-top: .4rem; min-height: 2.6em; }

/* --- La cifra grande: las dos soluciones --- */
/* Dos cifras donde las otras herramientas ponen una, así que arranca más
   pequeña que .result-figure y baja otro escalón cuando el número es largo
   (una compleja, un −1·10⁻⁸ o un millón). Así nunca se sale de la caja. */
.eq-figure {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  font-size: clamp(1.7rem, 6.6vw, 2.5rem);
}
.eq-figure.is-largo { font-size: clamp(1.1rem, 4.4vw, 1.55rem); }
.eq-sol { display: inline-flex; align-items: baseline; gap: .4rem; white-space: nowrap; }
.eq-sol-n {
  font-family: var(--sans);
  font-size: .48em;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: 0;
}

/* --- La forma exacta --- */
/* Solo aparece cuando aporta algo: coeficientes enteros y una solución que en
   decimal se quedaría en una foto aproximada (√2, 1/3, (3 ± √41)/4). */
.eq-exacta {
  margin-top: .5rem;
  font-size: .95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.eq-exacta-et {
  display: inline-block;
  margin-right: .4rem;
  padding: .08rem .45rem;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  vertical-align: 1px;
}

/* La frase del caso: la solución doble, las complejas, el a = 0. Va en gris de
   texto normal porque es una explicación, no una alarma. */
.eq-nota {
  margin-top: .5rem;
  font-size: .84rem;
  color: var(--ink-soft);
  max-width: 62ch;
}
.eq-nota strong { color: var(--ink); }

/* Cifras largas dentro de una columna estrecha: mejor partirlas que sacar una
   barra de desplazamiento en un móvil. */
.result-stats--eq dd { overflow-wrap: anywhere; }

/* --- El paso a paso --- */
/* Texto de verdad y seleccionable, nunca una imagen: quien busca «ecuación de
   segundo grado» viene a copiar el desarrollo, no a mirarlo. Se parte por los
   espacios que rodean a cada operador, así que en un móvil rompe por el signo
   y no en mitad de un número. */
.eq-bloque {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
}
.eq-bloque-titulo {
  font-family: var(--sans);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.eq-pasos {
  margin-top: .55rem;
  padding: .65rem .8rem;
  background: var(--surface-2);
  border-radius: var(--radius-s);
  font-variant-numeric: tabular-nums;
}
.eq-paso {
  font-size: .93rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}
.eq-paso + .eq-paso { margin-top: .2rem; }
.eq-paso--final {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.6rem;
  margin-top: .4rem;
  padding-top: .4rem;
  border-top: 1px solid var(--line);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--accent);
}
/* Las dos comprobaciones de Vieta, separadas de verdad: seguidas en la misma
   línea, el punto del producto (x₁ · x₂) se confunde con el separador. */
.eq-vieta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.3rem;
  margin-top: .5rem;
  font-size: .8rem;
  color: var(--ink-faint);
  overflow-wrap: break-word;
}

/* El aviso de la precisión. No es un error del visitante —es un mérito de la
   página—, así que va en el verde de la casa y no en el naranja de los avisos. */
.eq-aviso {
  margin-top: .6rem;
  padding: .5rem .7rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--accent-tint);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink-soft);
  overflow-wrap: break-word;
}

/* --- Los ejemplos de un clic --- */
/* Escritos como ecuaciones de verdad porque es como se buscan en Google, y
   elegidos para que se vean los tres casos del discriminante seguidos. */
.eq-ejemplos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-top: .9rem;
}
.eq-ejemplos-et { font-size: .8rem; color: var(--ink-faint); }
.eq-ejemplos .btn { font-variant-numeric: tabular-nums; }

/* --- Leyenda del gráfico --- */
.key--parabola::before { background: var(--accent); }
.key--cortes::before { background: var(--warm); }

/* En papel se quiere el desarrollo, no los fondos grises ni los botones. */
@media print {
  .eq-ejemplos { display: none !important; }
  .eq-escrita, .eq-pasos { background: none; padding: 0; }
  .eq-aviso { background: none; }
}

/* =============================================================
   14. Cuánta agua beber al día
   Tres campos —peso, minutos de ejercicio y clima— y una cifra grande en
   litros. Lo propio de aquí son tres cosas que las demás calculadoras no
   necesitan: la línea de resumen bajo la cifra (que le pone contexto cuando
   se lee sola o se imprime), el aviso naranja que solo aparece por encima de
   4 litros y el reparto del día. Reutiliza .tool-form, .result,
   .result-stats, .extra-block, .savings y .amort-table.
   ============================================================= */

/* --- La línea de contexto bajo la cifra --- */
/* «3,48 L» no dice de quién es ni con qué clima. Esta línea lo repite en
   pequeño, que es lo que hace falta al enseñar la pantalla a alguien o al
   sacar la página por la impresora. Vive dentro de .result-main y no suelta
   dentro de .result: a partir de 1280 px el resultado pasa a dos columnas
   contando con dos hijos, y un tercero deja las estadísticas en 72 px. */
.agua-resumen {
  margin-top: .3rem;
  font-size: .8rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* --- Los tres apoyos del resultado --- */
/* Dos de los tres valores son rangos («0,46–0,58 L»), que ocupan bastante más
   que un número suelto. En un móvil de 375 px, tres columnas los parten por la
   mitad; en dos columnas caben enteros y el importante —lo que hay que beber—
   se queda solo en su fila, que es donde se ve. */
@media (max-width: 539.98px) {
  .result-stats--agua { grid-template-columns: 1fr 1fr; }
  .result-stats--agua .agua-stat--beber { grid-column: 1 / -1; }
}
/* La cifra grande es el agua TOTAL del día; esta es la que se lleva a la
   botella. Va en el verde de la casa para que no se confundan. */
.agua-stat--beber dd { color: var(--accent); }

/* --- El aviso por encima de 4 litros --- */
/* En naranja y dentro de la tarjeta, pegado al resultado: es una advertencia
   sobre la propia cifra que se acaba de dar, no una nota al pie. */
.agua-aviso {
  margin-top: .9rem;
  padding: .65rem .85rem;
  border-left: 3px solid var(--warm);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--warm-tint);
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
}
.agua-aviso strong { display: block; color: var(--warm); }
.agua-aviso em { font-style: normal; font-weight: 600; color: var(--ink); }

/* --- El reparto del día --- */
/* Encabezado y texto a todo lo ancho, así que este .extra-block no puede
   partirse en dos columnas como el de la amortización extra de la hipoteca. */
.extra-block.agua-bloque { display: block; }
.agua-titulo {
  font-family: var(--sans);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.agua-lede { margin-top: .35rem; max-width: 64ch; }
.agua-lede strong { color: var(--accent); font-variant-numeric: tabular-nums; }
.agua-bloque .savings { margin-top: .75rem; }
/* Los dos huecos del entrenamiento se quedan en «—» cuando no hay minutos.
   La nota explica por qué, para que no parezca que falla algo. */
.agua-nota { margin-top: .6rem; }

/* --- Tabla por pesos --- */
.amort-table td.agua-col-l { color: var(--accent); font-weight: 600; }
/* Las celdas que pasan de 4 L al día: el mismo naranja del aviso, para que se
   lea como lo que es, un límite, y no como un objetivo al que aspirar. */
.amort-table td.agua-alto { color: var(--warm); }

/* En papel interesan el reparto y el aviso: son justo lo que uno se lleva a la
   nevera. La regla general esconde .extra-block porque en la hipoteca es un
   campo opcional que sobra en la hoja; aquí es media herramienta. */
@media print {
  .agua-bloque { display: block !important; }
  .agua-bloque .savings { background: none; border: 0; padding: 0; }
  .agua-aviso { background: none; }
}

/* =============================================================
   15. Números romanos
   Un solo campo, sin conmutador de modo: 1994 y MCMXCIV no se parecen en
   nada, así que la herramienta detecta sola hacia dónde convierte y no hace
   falta pedirle nada al visitante. Debajo de la cifra grande va la
   DESCOMPOSICIÓN —M (1000) + CM (900) + …—, que es lo que de verdad se
   viene a buscar: explica por qué ese montón de letras es 1994.
   Reutiliza .tool-form, .result, .result-figure y .amort-table--desglose;
   lo propio de aquí es el cuerpo de las letras romanas (que no son cifras y
   no se comportan como ellas), el bloque de la suma y la barra del vinculum.
   ============================================================= */

/* --- El campo único --- */
/* Una sola casilla, acotada: un campo a todo lo ancho de una pantalla grande
   para escribir «1994» se ve ridículo y encima invita a pegar párrafos. */
.tool-form--nr { grid-template-columns: minmax(0, 1fr); max-width: 22rem; }
.tool-form--nr .input-wrap input {
  padding-right: .75rem;
  font-size: 1.2rem;
  letter-spacing: .01em;
  text-transform: none;
}

/* La pista cambia de texto pero nunca de altura: si apareciera y
   desapareciera, el resultado daría un salto al vaciar el campo. Nunca es
   roja, porque el campo a medio escribir no es un error. */
.nr-pista { margin-top: .4rem; min-height: 2.8em; max-width: 34rem; }

/* La cifra grande y la descomposición tienen que caber sin scroll en un
   móvil de 375×812, así que el resultado arranca algo más pegado. */
.tool-form--nr ~ .result { margin-top: .9rem; padding-top: .9rem; }

/* --- La cifra grande --- */
/* Los romanos son LETRAS, no cifras: tabular-nums no les hace nada y el
   apretado de .result-figure (−0.03em) les junta las íes hasta confundir
   III con un solo trazo. Aquí se separan en vez de apretarse. */
.nr-figure {
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
/* MMMDCCCLXXXVIII son quince letras: al cuerpo de siempre no caben en un
   móvil de 375 px. A partir de once se baja un escalón. El overflow-wrap de
   arriba es la red por si alguna fuente se sale de la cuenta: mejor partir
   la palabra que sacar una barra de desplazamiento lateral. */
.nr-figure.is-largo { font-size: clamp(1.35rem, 5vw, 2rem); }

/* --- La descomposición --- */
/* Texto de verdad y seleccionable, nunca una imagen. Cada término va en un
   inline-block que no se parte: en un móvil rompe por los signos «+» y
   nunca en mitad de un «CM (900)». */
.nr-desglose { margin-top: .5rem; max-width: 36rem; }
/* El interlineado está ajustado al peor caso de todo el rango: 3888 son
   quince términos y en un móvil de 375 px ocupan cinco líneas. Con 1,7 la
   tarjeta se pasaba de los 700 px de alto útil; con 1,6 entra justa. */
.nr-suma {
  padding: .55rem .75rem;
  background: var(--surface-2);
  border-radius: var(--radius-s);
  font-size: .95rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.nr-suma-cab {
  display: inline-block;
  margin-right: .15rem;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.nr-term {
  display: inline-block;
  white-space: nowrap;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.nr-term b { font-weight: 700; color: var(--accent); letter-spacing: .02em; }
.nr-mas { color: var(--ink-faint); }

.nr-cuentas {
  margin-top: .45rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.nr-cuentas strong { color: var(--accent); }

/* --- Las tablas --- */
/* La columna de romanos, separada y en el verde de la casa: son el dato que
   se viene a copiar. Las letras van sueltas porque III pegado no se cuenta. */
.nr-col-romano {
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .04em;
}
/* La tercera columna de los siete símbolos es una frase, no una cifra: se
   parte en varias líneas en vez de estirar la tabla a lo ancho. */
.nr-simbolos td:last-child {
  white-space: normal;
  min-width: 11rem;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.nr-simbolos td:first-child { min-width: 0; font-size: 1rem; }
.nr-simbolos th:first-child, .nr-simbolos td:first-child { text-align: left; }
/* Dos columnas y nada más: el número a la izquierda y su romano a la
   derecha, como una lista de equivalencias. */
.nr-cerca td:first-child { min-width: 0; font-variant-numeric: tabular-nums; }
.nr-cerca td:last-child, .nr-cerca th:last-child { text-align: left; }

.nr-bloque-cerca { margin-top: clamp(1.8rem, 4vw, 2.4rem); }
.nr-titulo-cerca {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.8vw, 1.3rem);
  letter-spacing: -0.02em;
}
.nr-bloque-cerca .table-scroll { margin-top: .8rem; }

/* --- La barra del vinculum (en el texto) --- */
/* La barra que multiplica por mil no es un carácter: es una raya encima. Con
   overline se dibuja sin depender de combinadores Unicode, que en media
   docena de fuentes salen descolocados o directamente no salen. */
.nr-barra {
  text-decoration: overline;
  text-underline-offset: 0;
  font-weight: 600;
  color: var(--ink);
  padding-top: 1px;
}

@media (min-width: 1280px) {
  /* A dos columnas la descomposición se pone al lado de la cifra grande, y
     el margen que la separaba por debajo la descuadraría. */
  .result .nr-desglose { margin-top: 0; }
}

/* En papel se quiere la descomposición, no el fondo gris. */
@media print {
  .nr-suma { background: none; padding: 0; }
  .nr-bloque-cerca { display: none; }
}

/* =============================================================
   16. Conversor de temperatura
   Una casilla y dos desplegables en una sola fila, con el botón de invertir
   metido justo en medio, para que la cifra grande entre en la primera
   pantalla de un móvil. Reutiliza .tool-form, .result, .result-stats y
   .extra-block; lo propio de aquí es la fila «de ⇄ a», la cuenta escrita
   debajo del resultado y el bloque de las otras dos escalas.
   ============================================================= */

/* --- La fila: de ⇄ a --- */
/* Tres columnas a cualquier ancho: partir «de» y «a» en dos filas rompería la
   lectura de la frase y dejaría al botón sin su sitio, que es justo el hueco
   entre los dos desplegables. */
.tool-form--temp {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: .7rem .5rem;
  max-width: 34rem;
}
/* La casilla de la temperatura ocupa la fila entera también en pantallas
   anchas: es donde se escribe y lo primero que hay que ver. */
.tool-form--temp .field--wide { grid-column: 1 / -1; }
/* Los nombres de las escalas son largos («Fahrenheit») y la columna es
   estrecha en un móvil de 375 px. Bajar un punto el cuerpo evita que el
   navegador los recorte con puntos suspensivos. */
.tool-form--temp select { font-size: .95rem; padding-left: .6rem; }
.tool-form--temp .unit { padding-right: .5rem; }

/* El botón de invertir: redondo, sin texto y alineado con los desplegables,
   que llevan su etiqueta encima. A 375 px, un botón con la palabra
   «Invertir» se comería el ancho de los dos selectores; lo que hace lo
   cuentan su title y el paso 2 de «Cómo se usa». */
.temp-swap {
  align-self: end;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  color: var(--ink-faint);
}
.temp-swap svg { transition: transform .25s var(--ease-out); }
.temp-swap:hover svg { transform: rotate(180deg); }

/* La pista de la casilla vacía. Nunca es roja: quedarse a medias escribiendo
   no es equivocarse. De alto fijo, para que el resultado no dé un salto. */
.temp-pista { margin-top: .5rem; min-height: 1.35em; }

/* La cifra puede ser larga («−459,67 °F») y la columna de 15rem que el layout
   general le da al resultado en pantallas anchas la partiría en dos líneas.
   Aquí la cifra manda: se queda a lo ancho y la cuenta va debajo. */
@media (min-width: 1280px) {
  .temp-result { display: block; }
}

/* --- La cuenta, con los números dentro --- */
.temp-cuenta {
  margin-top: .35rem;
  font-size: .92rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  min-height: 1.4em;
  overflow-wrap: anywhere;
}

/* --- Las otras dos escalas --- */
/* Van debajo del resultado y no detrás de un desplegable: la gracia de un
   conversor de temperatura es ver las tres a la vez. Bloque entero, sin las
   dos columnas que .extra-block toma en pantallas anchas, porque el título es
   una frase que se lee encima de las dos cifras. */
.extra-block.temp-otras { display: block; }
.temp-otras-titulo { font-size: .85rem; color: var(--ink-soft); }
.temp-otras-titulo strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.temp-otras-grid {
  grid-template-columns: 1fr 1fr;
  max-width: 26rem;
  margin-top: .55rem;
}
.temp-otras-grid dd { font-size: 1.12rem; }

/* --- Tabla de equivalencias --- */
/* La columna de Fahrenheit, en color: es la que viene a mirar quien llega con
   una receta o con un parte del tiempo americano. */
.temp-tabla td.col-f { color: var(--accent); font-weight: 600; }
.temp-tabla th, .temp-tabla td { vertical-align: top; }
/* El encabezado sí puede partirse en dos líneas: con «FAHRENHEIT (°F)» de una
   pieza, la tabla se pasa veinte píxeles del ancho de un móvil de 375 y saca
   barra de desplazamiento para nada. */
.temp-tabla thead th { white-space: normal; }

/* En papel se quieren las tres escalas, no solo la elegida: aquí el bloque de
   las otras dos es contenido, no un campo opcional como el de la hipoteca. */
@media print {
  .temp-otras { display: block !important; }
  .temp-swap { display: none !important; }
}

/* --- Los cuatro campos de la tarjeta --- */
/* En un móvil de 375 px la cifra tiene que verse sin hacer scroll, y cada
   fila de campos que se añade se la come. Por eso los tres desplegables van
   en una sola fila: comunidad se lleva el ancho porque «Castilla-La Mancha»
   es lo más largo que hay que meter, y pagas e hijos caben con dos y con un
   carácter. El resto de campos —contrato, edad, discapacidad— viven en el
   plegable de abajo, que no cuenta para esta cuenta. */
/* Pagas e hijos se llevan lo justo —dos dígitos y uno— y todo lo que sobra
   se lo queda comunidad, que es la que tiene que enseñar «Comunidad
   Valenciana» entera sin que el desplegable la corte. */
.tool-form--sn {
  grid-template-columns: minmax(0, 1fr) 2.9rem 2.5rem;
  column-gap: .45rem;
}
.tool-form--sn select { font-size: .84rem; padding-left: .45rem; padding-right: .15rem; }
.tool-form--sn .unit { padding-right: .4rem; }
@media (min-width: 420px) {
  .tool-form--sn { grid-template-columns: minmax(0, 1fr) 3.05rem 2.65rem; column-gap: .55rem; }
  .tool-form--sn select { font-size: .95rem; }
}
@media (min-width: 540px) {
  .tool-form--sn { grid-template-columns: minmax(0, 2.2fr) 1fr .7fr; column-gap: 1rem; }
  .tool-form--sn select { font-size: 1.05rem; padding-left: .75rem; padding-right: .3rem; }
  .tool-form--sn .unit { padding-right: .75rem; }
}
@media (min-width: 960px) {
  /* Con sitio de sobra, la rejilla de la casa: el bruto ancho y los tres
     desplegables al lado. */
  .tool-form--sn { grid-template-columns: 1.3fr 1.5fr .65fr .55fr; }
}


/* =============================================================
   17. Calculadora de sueldo neto
   Cinco campos en la tarjeta y siete más en un plegable, porque la mitad de
   los datos del IRPF no los toca casi nadie y abiertos empujarían la cifra
   fuera de la pantalla de un móvil. Reutiliza .tool-form, .result,
   .result-stats, .extra-block y .amort-table--desglose; lo propio de aquí
   son el plegable, el aviso naranja de «esto es la retención, no el IRPF» y
   las dos filas de subtotal del desglose.
   ============================================================= */

/* --- La línea de contexto bajo la cifra --- */
/* «1.352,69 €» no dice de quién es. Esta línea lo repite en pequeño, que es
   lo que hace falta al enseñar la pantalla a alguien o al imprimir. Vive
   dentro de .result-main y no suelta dentro de .result: a partir de 1280 px
   el resultado pasa a dos columnas contando con dos hijos. */
.sn-resumen {
  margin-top: .25rem;
  font-size: .78rem;
  color: var(--ink-soft);
  line-height: 1.4;
  max-width: 34rem;
}

/* Esta línea de contexto son dos renglones más entre la cifra y sus tres
   apoyos, y en un móvil de 375 px esos dos renglones son justo los que dejan
   la última fila del resultado por debajo de los 700 px útiles. Se recupera
   apretando un poco el aire alrededor del resultado, como en la regla de tres. */
.tool-form--sn ~ .result { margin-top: .9rem; padding-top: .9rem; }
.tool-form--sn ~ .result .result-stats { margin-top: .65rem; }

/* --- El aviso que da sentido a toda la herramienta --- */
/* En naranja y encima del disclaimer gris: confundir la retención con el
   IRPF definitivo es EL error de este cálculo, y en gris claro no lo lee
   nadie. */
.sn-aviso {
  margin-top: .9rem;
  padding: .7rem .85rem;
  border-radius: var(--radius-s);
  background: var(--warm-tint);
  border: 1px solid color-mix(in srgb, var(--warm) 28%, transparent);
  color: var(--ink-soft);
  font-size: .85rem;
  line-height: 1.5;
  max-width: 68ch;
}
.sn-aviso strong { color: var(--warm); }

/* --- El bloque plegado de campos poco usados --- */
/* .extra-block se pone en dos columnas a partir de 960 px (campo + caja de
   ahorro); aquí dentro va una rejilla propia, así que se vuelve a bloque. */
.sn-plegable { display: block; }
.sn-summary {
  cursor: pointer;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem;
  font-size: .85rem; font-weight: 600;
  color: var(--accent);
  list-style: none;
}
.sn-summary::-webkit-details-marker { display: none; }
.sn-summary::before {
  content: "";
  width: .5rem; height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s var(--ease-out);
  margin-right: .15rem;
}
.sn-plegable[open] .sn-summary::before { transform: rotate(45deg); }
.sn-summary:hover { color: var(--ink); }
.sn-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
/* --ink-soft y no el --ink-faint de las pistas normales: esta frase es la que
   dice qué hay dentro del plegable, y si no se lee nadie lo abre. */
.sn-summary-hint { font-weight: 400; font-size: .78rem; color: var(--ink-soft); }

.sn-extra-grid {
  display: grid; grid-template-columns: 1fr;
  gap: .8rem 1rem;
  margin-top: .9rem;
}
/* Las etiquetas de estos desplegables son frases enteras («Casado y tu pareja
   gana menos de 1.500 €»), así que necesitan la fila entera hasta que hay
   sitio de sobra. */
.sn-extra-grid .field { max-width: none; }
.sn-plegable .hint { margin-top: .8rem; max-width: 72ch; }

@media (min-width: 640px) {
  .sn-extra-grid { grid-template-columns: 1fr 1fr; }
  .sn-extra-grid .field--wide { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .sn-extra-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- El desglose --- */
/* Tres subtotales (Seguridad Social, base de retención y cuota) parten la
   tabla en los tres bloques que tiene el cálculo de verdad. Sin ellos son
   catorce filas seguidas y no se ve dónde acaba una cosa y empieza otra. */
.amort-table tr.sn-row-inicio td { font-weight: 600; }
.amort-table tr.sn-row-sub td {
  background: var(--surface-2);
  font-weight: 600;
}
.amort-table tbody tr.sn-row-sub:hover td { background: var(--surface-2); }
.amort-table tr.sn-row-sub .cell-note { font-weight: 400; }

/* --- La tabla de brutos cercanos --- */
.amort-table--sn-cerca td:first-child { white-space: nowrap; }
.sn-tuyo {
  display: inline-block;
  margin-left: .35rem;
  padding: .05rem .35rem;
  border-radius: 999px;
  background: var(--accent);
  /* No #fff: en modo oscuro el verde de la casa se aclara y el blanco encima
     se queda en 2,3:1, ilegible. Este token ya trae el color correcto para
     cada tema. */
  color: var(--on-accent);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .02em;
  vertical-align: .05em;
}

/* En papel interesa el desglose junto al aviso de que esto es una retención:
   una hoja con las cifras y sin esa frase es justo la que se malinterpreta. */
@media print {
  .sn-aviso { display: block !important; border: 1px solid #999; color: #000; }
  .sn-aviso strong { color: #000; }
  .amort-table tr.sn-row-sub td { background: #fff; }
}

/* =============================================================
   18. Calculadora de interés compuesto
   Reutiliza todo lo común: .tool-card, .tool-form, .result,
   .result-stats, .extra-block, .savings, .chart-figure y .amort-table.
   Lo propio de aquí es el gráfico de área apilada, que se dibuja en SVG
   desde interes-compuesto.js sin ninguna librería. Los colores del SVG
   viven en estas reglas y no en atributos del propio SVG: así el modo
   oscuro funciona solo, sin tener que volver a dibujar nada.
   ============================================================= */

/* --- El formulario --- */
/* Seis campos: cuatro números y dos desplegables. En móvil caen en tres filas
   de dos. El hueco entre filas es algo menor que el de la casa porque son dos
   filas más que en la hipoteca y la cifra grande tiene que seguir cabiendo en
   los 700 px de alto que deja un móvil de 375×812 con la barra del navegador. */
.ic-form { gap: .7rem 1rem; }
/* La pista de la frecuencia va suelta bajo el formulario, no dentro de su
   campo: a lo ancho de la tarjeta cabe en una línea, y dentro de media
   columna se le van dos. Diecisiete píxeles importan aquí. */
.ic-hint-frecuencia { margin-top: .55rem; }

/* --- La cifra grande --- */
/* A 50 años y con un tipo alto la cifra se va a diez dígitos y no cabe a
   3,1rem en un móvil de 375 px. El .js pone --long cuando pasa de trece
   caracteres; el resto del tiempo la cifra manda como en las demás. */
.ic-figure { overflow-wrap: anywhere; }
.ic-figure--long { font-size: clamp(1.5rem, 6vw, 2.35rem); }

/* Lo que ponen los intereses va en naranja, el mismo color que la franja
   de arriba del gráfico y que las columnas de intereses de la tabla. Ese
   contraste con lo que pones tú es el argumento entero de la herramienta. */
.result-stats dd.ic-stat-interes { color: var(--warm); }

.ic-nota-tae {
  margin-top: .6rem;
  max-width: 58ch;
  min-height: 1.35em;          /* alto fijo: la cifra no da un salto al cambiar */
}

/* --- El bloque de la inflación y los impuestos --- */
/* Una sola columna: las etiquetas son frases («Al rescatarlo, después de
   impuestos») y en dos columnas se parten en tres líneas. */
.ic-real .savings-list { grid-template-columns: 1fr; }
.ic-real-nota { margin-top: .6rem; }

/* --- El gráfico --- */
/* Va en la sección de la tabla, nunca dentro de la tarjeta: en un móvil la
   herramienta tiene que verse entera sin hacer scroll y una curva se come
   media pantalla. */
.ic-chart { margin-bottom: 1.3rem; }
.ic-chart-canvas { width: 100%; min-height: 210px; }
.ic-svg { display: block; width: 100%; height: auto; }

.ic-grid { stroke: var(--line); stroke-width: 1; }

.ic-axis {
  fill: var(--ink-faint);
  font-family: var(--sans);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.ic-axis--y { text-anchor: end; dominant-baseline: middle; }
.ic-axis--x { text-anchor: middle; }

/* Las dos franjas apiladas. Abajo, en verde, el dinero que ha salido de tu
   bolsillo; encima, en naranja, los intereses. */
.ic-band--aportado  { fill: color-mix(in srgb, var(--accent) 20%, transparent); }
.ic-band--intereses { fill: color-mix(in srgb, var(--warm) 26%, transparent); }

.ic-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ic-line--aportado { stroke: var(--accent); stroke-width: 1.8; }
.ic-line--saldo    { stroke: var(--warm);   stroke-width: 2.2; }

/* El año en que los intereses adelantan a todo lo que has puesto tú. */
.ic-cruce-line { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.ic-cruce-punto { fill: var(--warm); stroke: var(--surface); stroke-width: 2; }

.ic-key--aportado::before  { background: var(--accent); }
.ic-key--intereses::before { background: var(--warm); }

/* --- La tabla --- */
/* Cinco columnas de importes que a 50 años llegan a diez dígitos. El ancho
   mínimo lo absorbe .table-scroll, que ya desplaza en horizontal dentro de
   su caja: la página nunca saca barra lateral. */
.ic-tabla { min-width: 620px; }

/* --- Impresión --- */
/* El gráfico se queda fuera del papel. En la hipoteca la regla general ya
   esconde .chart-section, pero aquí la curva vive dentro de la sección de
   la tabla, así que hay que decirlo a mano. */
@media print {
  .ic-chart { display: none !important; }
  .ic-tabla { min-width: 0; }
  /* En papel sí se quieren las dos cifras del final. Aquí el bloque no es un
     campo opcional como la amortización extra de la hipoteca: es la parte
     honesta del resultado. Y su nota va con ellas, porque sin el desglose del
     impuesto la cifra del neto no se sostiene sola. */
  .extra-block.ic-extra { display: block !important; }
  .ic-extra .hint { display: block !important; }
}

/* =============================================================
   19. Test de ping y latencia
   La primera herramienta de la casa que NO es una fórmula: no recalcula al
   teclear, hace mediciones reales durante unos diez segundos. Eso le da tres
   estados —en reposo, midiendo y con resultado— y obliga a cosas que ninguna
   calculadora necesita: un botón grande, una barra de progreso que no mueva
   la maquetación al aparecer, un veredicto y una gráfica.
   Reutiliza .tool-card, .result, .result-stats, .extra-block y .amort-table.
   Lo propio de aquí es todo lo que lleva prefijo .tp-.
   ============================================================= */

/* --- El botón y la línea de estado --- */
/* En una calculadora no hay botón: el resultado sale al teclear. Aquí sí, y
   es lo primero que se ve, así que va con el verde de la casa relleno y no
   como .btn--ghost, que es para acciones secundarias. */
.tp-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem 1rem;
}
.tp-boton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  flex: none;
  padding: .7rem 1.5rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: .95rem; font-weight: 600;
  cursor: pointer;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), opacity .25s var(--ease-out);
}
.tp-boton:hover:not(:disabled) { background: var(--accent-bright); border-color: var(--accent-bright); }
.tp-boton:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
/* Deshabilitado mientras mide: es lo que impide que dos toques seguidos
   solapen dos mediciones. Se ve apagado pero no desaparece, para que no
   parezca que la página se ha roto. */
.tp-boton:disabled { opacity: .55; cursor: progress; }
.tp-boton svg { flex: none; }

/* DOS LÍNEAS RESERVADAS, y el número está medido, no puesto a ojo: el texto
   en reposo ocupa dos líneas en un móvil de 375 px («Unos 10 segundos y 25
   muestras. No hace falta que hagas nada más.») y al empezar a medir pasa a
   una sola («Midiendo… muestra 7 de 25»). Reservando menos de dos líneas, la
   caja encoge 8 px en cuanto se pulsa el botón y arrastra hacia arriba la
   cifra, que en móvil está justo ahí, a la vista. 2 × 1,6 = 3,2em. */
.tp-estado {
  flex: 1 1 12rem;
  min-width: 0;
  line-height: 1.6;
  min-height: 3.2em;
  display: flex; align-items: center;
  font-size: .84rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* --- La barra de progreso --- */
/* Existe también en reposo, vacía. Si apareciera al empezar a medir empujaría
   hacia abajo el resultado justo cuando el visitante está mirándolo. */
.tp-progreso {
  margin-top: .8rem;
  height: 5px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.tp-progreso-barra {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width .3s var(--ease-out);
}

/* --- La línea de contexto bajo la cifra --- */
/* «23,4 ms» solo no dice cuántas muestras hay detrás ni cómo de estables
   fueron. Vive dentro de .result-main, no suelta dentro de .result: a partir
   de 1280 px el resultado pasa a dos columnas contando con dos hijos. */
/* Dos líneas reservadas, y esta es la que más se nota al REPETIR la medición:
   con un resultado en pantalla el resumen ocupa dos líneas, y al volver a
   pulsar «Medir» pasa a una («Las cifras aparecen al terminar»). Sin alto
   reservado, todo lo que hay debajo —gráfica incluida— pega un salto de 20 px
   hacia arriba justo cuando el visitante está mirándola. */
.tp-resumen {
  margin-top: .3rem;
  line-height: 1.6;
  min-height: 3.2em;
  font-size: .8rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* --- Los cuatro apoyos del resultado --- */
/* Cuatro, no tres: en móvil van dos y dos, y a partir de 540 px en una fila.
   Con la regla general de tres columnas, «Peticiones fallidas» se quedaría
   sola en una segunda fila ocupando un tercio y con hueco vacío al lado. */
.result-stats--tp { grid-template-columns: 1fr 1fr; }
@media (min-width: 540px) {
  .result-stats--tp { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 960px) {
  /* Un pelín más ancho que el máximo general: «Peticiones fallidas» y
     «0 de 25» no caben en 34rem partidos en cuatro sin romperse. */
  .result-stats--tp { max-width: 42rem; }
}

/* --- El veredicto --- */
/* El color lo pone el propio nivel, con dos variables locales para no repetir
   cinco veces las mismas reglas. Verde cuando la conexión va bien, gris
   cuando es del montón y naranja cuando se nota: nunca rojo, porque una
   latencia alta es una molestia, no una avería. */
.tp-veredicto {
  --tp-tono: var(--ink-faint);
  --tp-fondo: var(--surface-2);
  margin-top: 1rem;
  padding: .8rem .95rem;
  border-left: 3px solid var(--tp-tono);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--tp-fondo);
}
.tp-veredicto[data-nivel="excelente"],
.tp-veredicto[data-nivel="buena"]     { --tp-tono: var(--accent); --tp-fondo: var(--accent-tint); }
.tp-veredicto[data-nivel="aceptable"] { --tp-tono: var(--ink-soft); --tp-fondo: var(--surface-2); }
.tp-veredicto[data-nivel="notable"],
.tp-veredicto[data-nivel="mala"]      { --tp-tono: var(--warm); --tp-fondo: var(--warm-tint); }

.tp-veredicto-titulo {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tp-tono);
}
/* Alto reservado para tres líneas en móvil: el texto cambia de longitud según
   el nivel y sin esto la gráfica de abajo daría un salto al terminar. */
.tp-veredicto-texto {
  margin-top: .3rem;
  min-height: 4.2em;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 64ch;
}

/* --- Los tres usos --- */
/* Son los tres motivos reales por los que alguien mide esto. Cada uno lleva
   su explicación escrita en el HTML, así que el bloque ya ocupa su sitio
   antes de medir y al llegar el resultado no se mueve nada. */
.tp-usos {
  list-style: none;
  padding: 0;
  margin-top: .85rem;
  display: grid;
  gap: .7rem;
}
.tp-usos li {
  padding-top: .7rem;
  border-top: 1px solid color-mix(in srgb, var(--tp-tono) 22%, transparent);
}
.tp-uso-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem;
  font-size: .86rem;
  color: var(--ink-soft);
}
.tp-uso-cab strong {
  font-size: .92rem;
  font-weight: 700;
  text-align: right;
  color: var(--tp-tono);
}
.tp-uso-nota {
  margin-top: .25rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink-faint);
  max-width: 68ch;
}

@media (min-width: 960px) {
  .tp-usos { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
  .tp-usos li { border-top-width: 2px; }
}

/* --- La gráfica --- */
/* Va dentro de la tarjeta, así que no usa .chart-figure: dos bordes y dos
   fondos anidados quedan como una caja dentro de otra. Aquí basta con una
   línea de puntos que la separe del resultado. */
.tp-graf {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
}
.tp-graf-titulo {
  font-family: var(--sans);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tp-graf-leyenda {
  display: flex; flex-wrap: wrap;
  gap: .3rem 1rem;
  margin-top: .45rem;
  font-size: .76rem;
  color: var(--ink-soft);
}
.tp-key { display: inline-flex; align-items: center; gap: .4rem; }
.tp-key::before { content: ""; width: 14px; height: 3px; border-radius: 2px; flex: none; }
.tp-key--muestra::before { background: var(--accent); }
.tp-key--mediana::before { height: 0; border-top: 2px dashed var(--ink-faint); border-radius: 0; }
.tp-key--fallo::before { background: var(--warm); width: 3px; height: 12px; }

/* Alto reservado desde el primer momento: el SVG lo escribe el guion, y hasta
   que no hay ancho no existe. El hueco sí, para que al medir no se mueva nada
   de sitio. Coincide con el alto mínimo que calcula ping.js. */
.tp-graf-caja {
  margin-top: .55rem;
  min-height: 150px;
  line-height: 0;          /* sin esto el SVG deja unos píxeles de hueco debajo */
}
.tp-graf-caja svg { display: block; width: 100%; height: auto; }
/* Cuatro líneas reservadas por lo mismo que .tp-estado: el pie cambia de
   texto en cuanto entra la primera muestra, y el de reposo ocupa cuatro
   líneas en un móvil de 375 px. Con menos reservado, la gráfica entera daría
   un tirón hacia arriba al empezar a medir. */
.tp-graf-pie {
  margin-top: .5rem;
  line-height: 1.5;
  min-height: 6em;
  font-size: .78rem;
  color: var(--ink-faint);
  max-width: 68ch;
}

/* --- Dentro del SVG --- */
/* Los colores salen de aquí y no de getComputedStyle en el guion: así el tema
   claro/oscuro cambia solo, sin tener que redibujar al vuelo como hace el
   canvas de la hipoteca. */
.tp-svg-rejilla  { stroke: var(--line); stroke-width: 1; }
.tp-svg-eje      { fill: var(--ink-faint); font-size: 10px; font-family: var(--sans); }
.tp-svg-unidad   { font-size: 9px; }
.tp-svg-linea    { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tp-svg-punto    { fill: var(--accent); }
.tp-svg-mediana  { stroke: var(--ink-faint); stroke-width: 1.5; stroke-dasharray: 5 4; }
.tp-svg-etiqueta { fill: var(--ink-faint); font-size: 10px; font-family: var(--sans); }
/* La petición fallida se marca de arriba abajo y en naranja: es un hueco en
   la línea, y un hueco sin señalar parece un despiste del dibujo. */
.tp-svg-fallo    { stroke: var(--warm); stroke-width: 2; opacity: .45; }
.tp-svg-vacio    { fill: var(--ink-faint); font-size: 12px; font-family: var(--sans); }

/* --- Las tres descartadas --- */
/* Se enseñan en vez de esconderse: que la primera salga mucho más alta es
   justo lo que explica por qué no cuenta en la mediana. */
.tp-calentamiento {
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--line);
}
.tp-cal-linea {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .3rem .7rem;
  font-size: .82rem;
  color: var(--ink-soft);
}
.tp-cal-linea strong {
  font-size: .92rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tp-calentamiento .hint { margin-top: .35rem; max-width: 68ch; }

/* --- Lo que estima el navegador --- */
/* Bloque entero, sin las dos columnas que .extra-block toma en pantallas
   anchas: el aviso de que esto NO es una medición nuestra es una frase larga
   que tiene que leerse encima de las cifras, no al lado. */
.extra-block.tp-nav { display: block; }
.tp-nav-titulo {
  font-family: var(--sans);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tp-nav-lede { margin-top: .35rem; max-width: 72ch; }
.tp-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin-top: .7rem;
  max-width: 34rem;
}
@media (min-width: 540px) {
  .tp-nav-grid { grid-template-columns: repeat(3, 1fr); gap: .7rem; }
}
.tp-nav-grid > div {
  padding: .55rem .65rem;
  background: var(--surface-2);
  border-radius: var(--radius-s);
  min-width: 0;
}
.tp-nav-grid dt { font-size: .72rem; color: var(--ink-faint); line-height: 1.3; margin-bottom: .1rem; }
.tp-nav-grid dd {
  font-size: .98rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
/* El hueco vacío en Firefox y Safari se llena con la explicación, que no deja
   de ser información útil. */
.tp-nav-sin { margin-top: .7rem; max-width: 72ch; }

/* El nombre de un archivo o de una interfaz, en monoespaciada. Solo dentro de
   esta herramienta: es la única que tiene que nombrar cosas técnicas. */
.tp-nav code,
.privacy-badge code,
.disclaimer code {
  font-size: .92em;
  padding: .05em .3em;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

/* --- Tabla de rangos --- */
.amort-table td.tp-col-buena { color: var(--accent); font-weight: 600; }
.amort-table td.tp-col-mala  { color: var(--warm); }
/* Cuatro columnas de frases, no de cifras. Con el nowrap general la tabla se
   iría por encima de los 1.200 px y habría que arrastrarla media pantalla
   para leer la última columna; dejándolas partir en dos líneas se queda en
   los 560 px de siempre. */
.tp-tabla th, .tp-tabla td { white-space: normal; }
.tp-tabla td:first-child { min-width: 7rem; }

/* En papel interesan la cifra, el veredicto y la gráfica —que es media
   herramienta—, no el botón ni la barra de progreso. Los altos reservados
   también sobran: en una hoja no hay nada que pueda dar un salto. */
@media print {
  .tp-acciones, .tp-progreso { display: none !important; }
  .tp-veredicto { background: none; }
  .tp-veredicto-texto, .tp-graf-pie { min-height: 0; }
}

/* =============================================================
   20. Calculadora de IMC
   Dos casillas —peso y altura— y una cifra grande. Lo propio de aquí son
   cuatro cosas: la unidad de la altura, que es un desplegable dentro de la
   propia casilla; la categoría de la OMS bajo la cifra, escrita en gris a
   propósito; la caja del RANGO DE PESO, que es lo que se viene a buscar y
   por eso ocupa todo el ancho ella sola; y el bloque opcional de la cintura,
   que va después del resultado porque es una mejora, no un requisito.
   Reutiliza .tool-form, .result, .result-stats, .extra-block y .amort-table.
   ============================================================= */

/* --- El formulario: dos columnas a cualquier ancho --- */
/* La regla general pasa a tres columnas a partir de 960 px, y aquí solo hay
   dos campos: la tercera quedaría vacía y el formulario, descentrado. */
.tool-form--imc {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 30rem;
}

/* --- La unidad de la altura, dentro de la casilla --- */
/* Es un control, no una etiqueta como el «kg» de al lado, así que se pinta
   como una pastilla y no como texto muerto. Va con más peso de selector que
   `.input-wrap select` porque esa regla lo estiraría a media casilla. */
.imc-unidad-wrap {
  position: relative;
  display: inline-flex; align-items: center;
  flex: 0 0 auto;
  margin-right: .4rem;
}
.input-wrap .imc-unidad {
  flex: 0 0 auto;
  appearance: none; -webkit-appearance: none;
  padding: .2rem 1.5rem .2rem .6rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: .8rem; font-weight: 600; letter-spacing: 0;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.input-wrap .imc-unidad:hover { border-color: var(--accent); color: var(--accent); }
/* pointer-events: none para que la flecha no se coma el clic del desplegable
   que hay debajo: se pincha en cualquier punto de la pastilla. */
.imc-unidad-arrow {
  position: absolute; right: .5rem;
  pointer-events: none;
  color: var(--ink-faint);
}

/* --- La categoría de la OMS --- */
/* En gris y sin color de estado, a propósito. Verde el normopeso y rojo la
   obesidad convertiría una casilla estadística en un juicio sobre el cuerpo
   de quien está leyendo, y esto es una calculadora, no un veredicto. El
   único naranja de la página está en el aviso de cintura, que sí mide algo
   que predice riesgo. */
.imc-categoria {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .1rem .55rem;
  margin-top: .35rem;
}
.imc-cat-nombre {
  font-size: 1.02rem; font-weight: 700;
  letter-spacing: -0.015em; color: var(--ink);
}
.imc-cat-banda {
  font-size: .8rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* --- La línea de contexto bajo la cifra --- */
/* Igual que en agua-diaria: «22,9» solo no dice de quién es. Vive dentro de
   .result-main y no suelta dentro de .result, que a partir de 1280 px se
   coloca en dos columnas contando exactamente con dos hijos. */
.imc-resumen {
  margin-top: .3rem;
  font-size: .8rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* --- La caja del rango de peso --- */
/* Una sola, a todo lo ancho y con la cifra más grande que un apoyo normal:
   es la respuesta a «¿cuánto debería pesar para mi altura?», que es la
   pregunta que trae la gente. En dos columnas de 140 px, «56,7 – 76,6 kg»
   se parte por la mitad justo por donde se lee. */
.result-stats--imc {
  grid-template-columns: minmax(0, 1fr);
  max-width: 26rem;
}
.result-stats--imc dd { color: var(--accent); font-size: 1.15rem; }
/* La segunda línea dice si el peso de arriba cae dentro de ese rango y a
   cuántos kilos está del extremo. Es una resta, no un consejo: ni una
   palabra sobre qué hacer con ella. */
.imc-stat-sub {
  margin-top: .1rem;
  font-size: .8rem !important;
  font-weight: 500 !important;
  color: var(--ink-soft) !important;
}

/* --- El aviso del redondeo --- */
/* Solo sale cuando la cifra redondeada cae justo sobre una frontera que el
   valor exacto no cruza (24,96 → «25,0», pero sigue siendo normopeso).
   Explicarlo cuesta una línea; no explicarlo parece un error de cálculo. */
.imc-borde {
  margin-top: .6rem;
  padding-left: .7rem;
  border-left: 2px solid var(--line-strong);
  max-width: 62ch;
}

/* --- El bloque de la cintura --- */
/* Título y texto a todo lo ancho, así que este .extra-block no puede
   partirse en dos columnas como el de la amortización extra de la hipoteca. */
.extra-block.imc-cintura { display: block; }
.imc-titulo {
  font-family: var(--sans);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.imc-lede { margin-top: .35rem; max-width: 64ch; }
.imc-lede em { font-style: italic; }
.imc-cintura .tool-form { margin-top: .75rem; }
/* Alto fijo mínimo: la nota cambia de texto en cada tecleo y, si apareciera
   y desapareciera, el aviso de abajo daría un salto. Nunca es roja: dejar la
   casilla vacía es lo normal, no equivocarse. */
.imc-cintura-nota { margin-top: .7rem; max-width: 64ch; min-height: 1.35em; }

/* --- El aviso de cintura por encima del umbral --- */
/* Mismo tratamiento que el aviso de los 4 litros de agua-diaria: naranja y
   dentro de la tarjeta, pegado al dato que lo provoca. */
.imc-aviso {
  margin-top: .8rem;
  padding: .65rem .85rem;
  border-left: 3px solid var(--warm);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--warm-tint);
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
}
.imc-aviso strong { display: block; color: var(--warm); }

/* --- Tabla de pesos por altura --- */
/* Tres columnas cortas: sin ancho mínimo cabe entera en un móvil de 375 px
   y se ahorra la barra de desplazamiento lateral. */
.imc-tabla { min-width: 0; }
.amort-table td.imc-col-rango { color: var(--accent); font-weight: 600; }
/* Medido: con el aire normal de .amort-table la tabla pide 356 px y en un
   móvil de 375 solo caben 336, así que sacaba barra lateral por veinte
   píxeles. Cuatro píxeles menos por lado y por columna la dejan entera.
   Acotado a esta tabla: la de la hipoteca sí necesita desplazarse. */
@media (max-width: 419.98px) {
  .imc-tabla th, .imc-tabla td { padding-left: .5rem; padding-right: .5rem; }
}

/* En papel se quieren el rango y la lectura de la cintura: son justo lo que
   uno se lleva a la consulta. La regla general esconde .extra-block porque
   en la hipoteca es un campo opcional que sobra en la hoja; aquí es la mitad
   interesante de la herramienta. */
@media print {
  .imc-cintura { display: block !important; }
  .imc-aviso { background: none; }
  .imc-borde { border-left-color: #999; }
}

/* =============================================================
   21. Calorías diarias que necesitas
   Seis campos —sexo, edad, peso, altura, actividad y objetivo— y una cifra
   grande en kcal. Es la herramienta con el formulario más largo de la casa,
   así que casi todo lo propio de aquí existe para recuperar altura y que la
   cifra siga entrando en la primera pantalla de un móvil: título un punto más
   bajo, campos compactos y ni un solo deslizador. Lo demás son dos bloques
   que la herramienta no puede no tener: la horquilla del ±10 % y el tope de
   seguridad de 1.200 / 1.500 kcal. Reutiliza .tool-form, .result,
   .result-stats, .extra-block, .savings y .amort-table--desglose.
   ============================================================= */

/* --- La cabecera, un punto más baja --- */
/* Con seis campos, el presupuesto de 700 px de un móvil de 375×812 se agota
   antes de llegar a la cifra. Bajar el título y pegar más la entradilla
   devuelve unos 25 px, que son justo los que faltaban. */
.cal-h1 { font-size: clamp(1.55rem, 5.6vw, 2.55rem); }
.cal-lede { margin-top: .3rem; max-width: 42ch; }

/* --- El formulario: seis campos, ningún deslizador --- */
/* Las demás calculadoras enlazan cada casilla con una barra. Aquí seis barras
   serían 130 px y la cifra se iría de la pantalla; además, la edad, el peso y
   la altura son datos que uno sabe de memoria y escribe más rápido de lo que
   arrastra. */
.tool-form--cal { gap: .6rem; }
.tool-form--cal .field { gap: .25rem; }
.tool-form--cal label { font-size: .76rem; line-height: 1.3; }
.tool-form--cal .input-wrap input,
.tool-form--cal .input-wrap select {
  padding-top: .45rem; padding-bottom: .45rem;
  font-size: 1rem;
}
.tool-form--cal .unit { font-size: .8rem; padding-right: .6rem; }

/* Y la tarjeta entera se arrima un poco más al título y aprieta la costura
   entre el formulario y el resultado. Son 12 px sueltos, pero el presupuesto
   de esta herramienta se mide justo en esos. */
.tool-card.cal-card { margin-top: 1.05rem; }
.cal-card .result { margin-top: .9rem; padding-top: .9rem; }

/* En cuanto hay ancho, los cuatro datos de la fórmula se ponen en una fila y
   los dos desplegables largos ocupan media cada uno. La rejilla general pasa a
   tres columnas a los 960 px, y ahí «Moderado · 3-5 días por semana» se corta
   con puntos suspensivos: el texto de la opción ES la explicación del nivel,
   así que no puede recortarse. */
@media (min-width: 720px) {
  .tool-form--cal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tool-form--cal .field--wide { grid-column: span 2; }
}

/* --- La línea de contexto bajo la cifra --- */
/* «2.220 kcal» no dice de quién es, con qué actividad ni con qué déficit.
   Vive dentro de .result-main y no suelta dentro de .result: a partir de
   1280 px el resultado pasa a dos columnas contando con dos hijos. */
.cal-resumen {
  margin-top: .3rem;
  font-size: .78rem;
  /* Son dos líneas en un móvil de 375 px y no hay forma de que sean una sin
     quitarle datos. Apretar el interlineado devuelve los 8 px que costaba la
     segunda línea. */
  line-height: 1.35;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* --- Los tres apoyos del resultado --- */
/* Se quedan en tres columnas también en un móvil de 375 px, al revés que en
   la calculadora de agua: aquí los tres valores son cortos («1.755 kcal») y
   partirlos en dos filas costaría 65 px de los que no hay. Un punto menos de
   cuerpo es lo que hace que «Sin cambio» quepa en su celda. */
.result-stats--cal { margin-top: .75rem; }
/* Un punto menos de cuerpo y de relleno en las celdas: a 375 px, «1.755 kcal»
   con los tamaños generales se parte en dos líneas y el bloque crece 24 px. */
.result-stats--cal div { padding: .5rem; }
.result-stats--cal dt { font-size: .7rem; }
.result-stats--cal dd { font-size: .88rem; }
@media (min-width: 540px) {
  .result-stats--cal div { padding: .55rem .65rem; }
  .result-stats--cal dd { font-size: .98rem; }
}

/* A partir de 1280 px el resultado general se parte en dos columnas y le da
   15rem a la cifra. Aquí la cifra son cinco dígitos y la palabra «kcal»
   («2.720 kcal»), que a 49,6 px llenan esas 15rem exactas: sin un dedo de
   holgura, cualquier retoque tipográfico la partiría en dos líneas. Tres rem
   más y deja de ir al filo. */
@media (min-width: 1280px) {
  .cal-card .result { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }
}

/* --- La horquilla del ±10 % --- */
/* El dato más honesto de la página, y por eso va pegado a la cifra en lugar
   de enterrado en el texto. Siempre visible, nunca condicional: el margen no
   es una excepción que salte de vez en cuando, es la condición permanente de
   cualquier número que salga de una fórmula estadística. */
.cal-rango {
  margin-top: .9rem;
  padding: .6rem .8rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--accent-tint);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 64ch;
}
.cal-rango strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* --- El tope de seguridad --- */
/* En naranja y dentro de la tarjeta, como el aviso de exceso de agua: es una
   advertencia sobre la cifra que se acaba de dar, no una nota al pie. */
.cal-aviso {
  margin-top: .9rem;
  padding: .65rem .85rem;
  border-left: 3px solid var(--warm);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--warm-tint);
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
}
.cal-aviso strong { display: block; color: var(--warm); }
.cal-aviso span { font-variant-numeric: tabular-nums; }

/* --- El reparto de macronutrientes --- */
/* Título y nota a todo lo ancho, así que este .extra-block no puede partirse
   en dos columnas como el de la amortización extra de la hipoteca. */
.extra-block.cal-bloque { display: block; }
.cal-titulo {
  font-family: var(--sans);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cal-lede-macros { margin-top: .35rem; max-width: 64ch; }
.cal-lede-macros strong { color: var(--ink); }
.cal-bloque .savings { margin-top: .75rem; }
/* La nota de los rangos es la mitad del mensaje del bloque: si el reparto se
   enseñara sin ella, parecería que hay uno correcto. No se esconde nunca. */
.cal-nota { margin-top: .6rem; }
.cal-nota strong { color: var(--accent); font-variant-numeric: tabular-nums; }

/* --- Tabla de niveles de actividad --- */
/* Los encabezados sí pueden partirse en dos líneas: con «Hombre del ejemplo»
   de una pieza, la tabla se pasa del ancho de un móvil de 375 y saca barra de
   desplazamiento para nada. */
.cal-tabla thead th { white-space: normal; }
.cal-tabla td.cal-col-h { color: var(--accent); font-weight: 600; }

/* En papel interesan la horquilla, el aviso y el reparto: son justo lo que
   uno se lleva. La regla general esconde .extra-block porque en la hipoteca
   es un campo opcional que sobra en la hoja; aquí es contenido. */
@media print {
  .cal-bloque { display: block !important; }
  .cal-bloque .savings { background: none; border: 0; padding: 0; }
  .cal-rango, .cal-aviso { background: none; }
}

/* =============================================================
   22. Zonas de frecuencia cardíaca
   Dos campos —edad y pulso en reposo— y una tabla de cinco zonas que ES el
   producto de la página. Lo propio de aquí son dos cosas: el conmutador de
   método (Karvonen o porcentaje directo, que dan zonas separadas por más de
   20 lpm) y la tabla apretada, sin caja propia, con una columna que se
   cambia por otra en el móvil porque las cuatro no caben en 375 px.
   Reutiliza .tool-form, .switch, .result, .extra-block y .amort-table.
   ============================================================= */

/* --- Los dos campos --- */
/* Dos casillas y se acabó: sin la tercera columna de .tool-form, que aquí
   dejaría un hueco vacío en las pantallas anchas. */
.tool-form--zfc {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 32rem;
}

/* --- El conmutador de método --- */
/* La nota de al lado dice en una línea qué significa el método elegido; en un
   móvil pasa sola al renglón de abajo. */
.zfc-modo {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .15rem .7rem; margin-top: .6rem;
}
.zfc-modo-nota { font-size: .78rem; color: var(--ink-soft); }
/* Karvonen sin pulso en reposo: apagado pero pulsable, porque al pulsarlo
   lleva al campo que falta. Un [disabled] no se puede enfocar y entonces no
   hay manera de contar por qué no funciona. */
.zfc-switch button.is-off { color: var(--ink-faint); }
.zfc-switch button.is-off.is-active { background: none; box-shadow: none; }

/* --- El resultado --- */
/* La cifra grande y las cinco filas tienen que caber sin scroll en un móvil
   de 375×812, así que el resultado arranca más pegado que en las demás. */
.tool-form--zfc ~ .result { margin-top: .55rem; padding-top: .55rem; }
.zfc-resumen {
  margin-top: .2rem;
  font-size: .8rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  max-width: 62ch;
}

/* --- La tabla de zonas --- */
/* La cifra grande se queda a lo ancho también en pantallas grandes: la regla
   general parte .result en dos columnas contando con dos hijos (cifra y
   estadísticas), y aquí solo hay uno, así que dejaría la cifra en 240 px y
   662 px de hueco vacío al lado. */
@media (min-width: 1280px) {
  .zfc-result { display: block; }
}

/* La tabla no se estira a lo ancho de una pantalla grande: cuatro columnas
   cortas repartidas en 930 px se leen peor, no mejor. */
.zfc-zonas { margin-top: .5rem; max-width: 42rem; }
/* Sin ancho mínimo y sin caja: va dentro de la tarjeta, y cada borde que se
   le pusiera son cuatro píxeles que le faltan a las cifras.
   El interlineado está apretado a 1,35 y las celdas a .3rem porque son seis
   filas de una línea: con el 1,6 de .amort-table la tabla acababa 110 px por
   debajo del hueco útil de un móvil de 375×812. Medido, no supuesto. */
.zfc-tabla { min-width: 0; font-size: .82rem; line-height: 1.35; }
.zfc-tabla th, .zfc-tabla td { padding: .3rem .35rem; }
.zfc-tabla thead th {
  position: static;
  background: none;
  font-size: .66rem;
  letter-spacing: .04em;
  white-space: normal;
}
.zfc-tabla tbody th {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.zfc-tabla tbody tr:hover { background: var(--surface-2); }
/* El número de zona, delante del nombre: es por lo que se pregunta («voy en
   zona 2»), así que va destacado y no se pierde dentro de la frase. */
.zfc-z {
  display: inline-block;
  min-width: 1.55rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.zfc-tabla td.zfc-lpm {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.zfc-tabla td.zfc-col-otro { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.zfc-tabla td.zfc-col-para { color: var(--ink-soft); }

/* Sin pulso en reposo no hay segunda columna que enseñar en ningún ancho. */
.zfc-tabla[data-doble="no"] .zfc-col-otro { display: none; }

/* Por debajo de 375 px —el objetivo de la casa— la tabla ya no cabe ni con
   tres columnas: pide 300 px y solo hay 249. Antes que recortar la última
   columna contra el borde de la tarjeta, se deja que los nombres se partan en
   dos líneas. Sale más alta, pero entera. */
@media (max-width: 374.98px) {
  .zfc-tabla tbody th, .zfc-tabla td.zfc-col-para { white-space: normal; }
}

/* Cuatro columnas no caben en un móvil de 375 px: medido, no supuesto. Por
   debajo de 480 px se enseñan tres, y el botón cambia «para qué» por la
   segunda columna de lpm. Por encima caben las cuatro y el botón sobra. */
@media (max-width: 479.98px) {
  .zfc-tabla[data-comparar="no"] .zfc-col-otro { display: none; }
  .zfc-tabla[data-comparar="si"] .zfc-col-para { display: none; }
}
@media (min-width: 480px) {
  .zfc-comparar { display: none; }
}

/* El botón vive en la fila del conmutador, no debajo de la tabla: son el
   mismo tipo de control («cómo quiero ver esto») y una fila entera bajo la
   tabla se comía el presupuesto de alto del móvil. */
.zfc-comparar { padding: .28rem .7rem; font-size: .8rem; flex: none; }
.zfc-comparar[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

/* --- La comparación entre los dos métodos --- */
/* Es el motivo de que exista esta página, así que va dentro de la tarjeta y
   pegada a la tabla, no en el texto de más abajo. Bloque entero, sin las dos
   columnas que .extra-block toma en pantallas anchas. */
.extra-block.zfc-cmp { display: block; margin-top: .9rem; padding-top: .9rem; }
.zfc-cmp-texto {
  font-size: .86rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 64ch;
}
.zfc-margen { margin-top: .4rem; max-width: 64ch; }

/* --- Las tablas de referencia --- */
/* Sin ancho mínimo, y con los encabezados partidos en varias líneas: con
   «Tanaka (208 − 0,7 × edad)» de una pieza, la tabla pedía 600 px y sacaba
   media pantalla de desplazamiento lateral para cuatro columnas cortas. */
.zfc-tabla-edades { min-width: 0; }
.zfc-tabla-edades thead th { white-space: normal; }
.zfc-tabla-edades td.zfc-dif-cero { white-space: normal; }
.zfc-tabla-edades td.zfc-col-tanaka { color: var(--accent); font-weight: 600; }
/* La columna de la diferencia cuenta de un vistazo lo que le pasa a «220 −
   edad»: naranja cuando se desvía, y en verde en los 40, que es el único
   punto donde acierta. */
.zfc-tabla-edades td.zfc-dif-menos,
.zfc-tabla-edades td.zfc-dif-mas { color: var(--warm); }
.zfc-tabla-edades td.zfc-dif-cero { color: var(--accent); font-weight: 600; }

.zfc-bloque-habla { margin-top: clamp(1.8rem, 4vw, 2.4rem); }
.zfc-tabla-habla { min-width: 0; }
/* Las dos últimas columnas son frases, no cifras: se parten en varias líneas
   en vez de estirar la tabla y sacar barra lateral en un móvil. */
.zfc-tabla-habla td { white-space: normal; }
.zfc-tabla-habla td:nth-child(2) { min-width: 6.5rem; color: var(--ink-soft); }
@media (max-width: 479.98px) {
  .zfc-tabla-habla th:first-child { white-space: normal; }
}

/* En papel interesan las zonas y la comparación de los dos métodos: es justo
   lo que uno se lleva al bolsillo. La regla general esconde .extra-block
   porque en la hipoteca es un campo opcional que sobra en la hoja; aquí es la
   mitad del argumento de la página. */
@media print {
  .zfc-cmp { display: block !important; }
  .zfc-comparar, .zfc-modo { display: none !important; }
  .zfc-tabla .zfc-col-otro, .zfc-tabla .zfc-col-para { display: table-cell !important; }
  .zfc-tabla { font-size: 10px; }
  .amort-table tr.row-actual { background: none; font-weight: 700; }
}

/* =============================================================
   23. El buscador
   Vive en la cabecera de todas las páginas. En móvil ocupa su propia fila
   entera —debajo del logo— porque un campo de búsqueda estrecho no se usa; a
   partir de 960 px cabe en línea con la navegación de familias.
   El desplegable es un overlay absoluto: no empuja la página al abrirse, que
   es lo que hace que un buscador dé saltos mientras se teclea.
   ============================================================= */

.buscador { position: relative; flex: 1 1 100%; order: 3; min-width: 0; }

.buscador-form {
  display: flex; align-items: center; gap: .55rem;
  padding: .42rem .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.buscador-form:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.buscador-lupa { flex: none; color: var(--ink-faint); }
.buscador-form:focus-within .buscador-lupa { color: var(--accent); }

.buscador-input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; padding: 0;
  font: inherit; font-size: .9rem; color: var(--ink);
}
.buscador-input::placeholder { color: var(--ink-faint); }
.buscador-input:focus { outline: none; }   /* el anillo lo pinta el contenedor */

/* --- El desplegable de resultados --- */
.buscador-lista {
  position: absolute; z-index: 60;
  top: calc(100% + .45rem); left: 0; right: 0;
  list-style: none; margin: 0; padding: .35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-card);
  max-height: min(70vh, 26rem); overflow-y: auto;
}
.buscador-item { list-style: none; }
.buscador-item > a {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .5rem .65rem; border-radius: 7px;
}
/* is-activo lo pone el teclado y :hover el ratón: los dos se ven igual, que
   es lo que hace que las flechas y el ratón no se contradigan. */
.buscador-item.is-activo > a,
.buscador-item > a:hover { background: var(--accent-tint); }
.buscador-item strong {
  font-size: .92rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
}
.buscador-item mark {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: inherit; border-radius: 3px; padding: 0 .12em;
}
.buscador-meta { font-size: .76rem; color: var(--ink-faint); }

/* Las que aún no existen salen apagadas y llevan a su familia: se ven, pero
   no se hacen pasar por una página que se puede usar hoy. */
.buscador-item.is-soon strong { color: var(--ink-soft); font-weight: 500; }
.buscador-item.is-soon .buscador-meta { color: var(--warm); }

.buscador-vacio {
  list-style: none; padding: .65rem;
  font-size: .85rem; color: var(--ink-soft); line-height: 1.5;
}
.buscador-vacio a {
  color: var(--accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

@media (min-width: 960px) {
  .buscador { flex: 0 1 20rem; order: 2; margin-inline: auto; }
}

/* =============================================================
   24. Portada por familias
   La portada ya no lista las treinta y pico herramientas de golpe: un muro de
   tarjetas no es un índice. Enseña unas pocas destacadas —que son las que dan
   a Google enlaces directos a lo que más importa— y seis puertas. El buscador
   atraviesa, para quien ya sabe lo que viene a buscar.
   ============================================================= */

.hub-bloque-titulo {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  letter-spacing: -0.02em;
}
.hub-familias { margin-top: clamp(2rem, 5vw, 3rem); }

.familia-grid {
  list-style: none; padding: 0; margin-top: 1rem;
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}
.familia-chip { list-style: none; display: flex; }
.familia-chip > a {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: .18rem;
  padding: 1.05rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out),
              box-shadow .25s var(--ease-out);
}
.familia-chip > a:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.familia-chip-icon { color: var(--accent); margin-bottom: .45rem; }
.familia-chip strong {
  font-family: var(--display); font-weight: 600;
  font-size: 1.05rem; letter-spacing: -0.02em;
}
.familia-chip span { font-size: .82rem; color: var(--ink-soft); line-height: 1.45; }

/* El recuento dice lo que hay HOY. Prometer nueve y que se vean tres es la
   forma más tonta de perder a alguien en la primera pantalla. */
.familia-cuenta {
  margin-top: .5rem;
  font-size: .76rem !important; font-weight: 600;
  color: var(--accent) !important; letter-spacing: .01em;
}

/* --- La página de una familia --- */
.familia-hero { padding-top: clamp(1.6rem, 5vw, 2.6rem); }
.familia-otras { margin-top: clamp(2.2rem, 5vw, 3rem); }

/* En «las demás familias» sobra la descripción: ahí ya se sabe lo que se
   busca y lo que hace falta es saltar rápido. Solo nombre y cuántas hay. */
.familia-grid--compacta { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.familia-grid--compacta .familia-chip > a { padding: .8rem .9rem; }
.familia-grid--compacta .familia-chip strong { font-size: .95rem; }
.familia-grid--compacta .familia-cuenta { margin-top: .3rem; }

@media print {
  .buscador { display: none !important; }
  .familia-otras { display: none !important; }
}

/* =============================================================
   25. Calculadora de edad biológica
   El cuestionario tiene 10 campos: demasiados para una pantalla de 375 px
   sin scroll, así que se reparten en cuatro pasos (fieldset .eb-paso) dentro
   de la misma .tool-form, uno visible a la vez. Reutiliza .tool-card,
   .field, .input-wrap, .switch, .result, .extra-block y .savings-list;
   lo propio de aquí es la navegación por pasos y el botón de acción
   principal, que esta casa no tenía porque el resto de calculadoras
   recalculan solas y nunca necesitan un «Calcular» con peso visual.
   ============================================================= */

/* --- El progreso (encima del formulario) --- */
.eb-progreso {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .9rem; font-size: .82rem; color: var(--ink-faint);
}
.eb-dots { display: flex; gap: .4rem; }
.eb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line-strong);
  transition: background .2s var(--ease-out), transform .2s var(--ease-out);
}
.eb-dot.is-active { background: var(--accent); transform: scale(1.35); }
.eb-dot.is-hecho { background: var(--accent); opacity: .5; }

/* --- Los cuatro pasos --- */
/* .tool-form ya es grid de 2 columnas; aquí se reutiliza tal cual pero
   cada paso es SU PROPIO fieldset, no un hijo directo del grid, así que
   .eb-form pasa a bloque y cada .eb-paso monta su propio grid de 2
   columnas por dentro. Los .field--wide siguen funcionando igual. */
.eb-form.tool-form { display: block; }
.eb-paso {
  display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem;
  border: 0; margin: 0; padding: 0; min-width: 0;
}
.eb-paso-titulo {
  grid-column: 1 / -1;
  font-family: var(--display); font-weight: 600;
  font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink);
  padding: 0; margin-bottom: .1rem;
}
.eb-label {
  font-size: .82rem; font-weight: 600;
  color: var(--ink-soft); letter-spacing: .005em;
}

/* --- Los interruptores de sexo y tabaco --- */
/* .switch de la casa es un grupo de pastilla que se ajusta a su contenido
   (pensado para 2 botones sueltos junto a una tabla); aquí necesita ocupar
   todo el ancho del campo y repartir el espacio a partes iguales. */
.eb-switch {
  display: flex; width: 100%; margin-top: .1rem;
}
.eb-switch button {
  flex: 1 1 0; text-align: center;
}
.eb-switch--3 button {
  font-size: .8rem; padding: .38rem .3rem;
}

/* --- Navegación entre pasos --- */
.eb-nav {
  display: flex; gap: .6rem; margin-top: 1.1rem;
}
.eb-nav .btn { flex: 1 1 auto; }

/* El único botón «de acción» de toda la casa: el resto de calculadoras
   recalculan solas al escribir y nunca necesitan un botón con este peso.
   Se queda aquí, con prefijo propio, en vez de tocar la regla común .btn. */
.eb-btn-primary {
  background: var(--accent); color: var(--on-accent);
}
.eb-btn-primary:hover { background: var(--accent-bright); }

/* --- El resultado --- */
.eb-diff {
  font-size: 1.05rem; font-weight: 600; color: var(--ink-soft);
  margin-top: .15rem;
}
.eb-resumen {
  font-size: .84rem; color: var(--ink-faint); margin-top: .3rem;
}
.eb-factor-texto {
  margin-top: .9rem; padding: .7rem .85rem;
  border-radius: var(--radius-s);
  background: var(--accent-tint);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: .88rem; color: var(--ink-soft);
}
.eb-titulo {
  font-family: var(--display); font-weight: 600;
  font-size: 1.05rem; letter-spacing: -0.01em;
}
.eb-checklist strong { font-size: .88rem; font-weight: 700; }
.eb-checklist .eb-chk-si { color: var(--accent); }
.eb-checklist .eb-chk-no { color: var(--ink-faint); font-weight: 500; }
.eb-btn-editar { margin-top: 1rem; width: 100%; justify-content: center; }

/* En papel el cuestionario no aporta nada: solo interesa el resultado que
   ya se calculó. */
@media print {
  .eb-progreso, .eb-form, .eb-nav, .noscript-msg { display: none !important; }
}

/* =============================================================
   26. Esperanza de vida
   Dos campos (edad + sexo) y .result-stats de serie ya da tres columnas: no
   hace falta ningún modificador de rejilla propio, a diferencia de agua o
   temperatura. Lo propio de aquí es la línea de contexto bajo la cifra
   grande (igual que .agua-resumen) y la nota de «es una media, no una
   fecha», que va SIEMPRE visible junto al resultado y no escondida como
   letra pequeña al final.
   ============================================================= */

/* --- La línea de contexto bajo la cifra --- */
.esp-resumen {
  margin-top: .3rem;
  font-size: .8rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* --- La nota «es una media, no una fecha» --- */
/* Es el matiz que separa esta calculadora de un "death clock" de
   entretenimiento, así que no lleva el gris apagado de .hint: fondo propio,
   siempre a la vista, nunca oculta tras un resultado de error. */
.esp-nota-media {
  margin-top: .9rem;
  padding: .6rem .8rem;
  border-radius: var(--radius-s);
  background: var(--surface-2);
  font-size: .82rem;
  color: var(--ink-soft);
}
.esp-nota-media strong { color: var(--ink); }

/* La nota de qué ancla de Eurostat se ha usado (nacimiento/50/65): sí es
   .hint normal, porque es una aclaración metodológica, no el mensaje
   principal de la página. */
[data-nota-ancla] { margin-top: .5rem; }

/* =============================================================
   27. Percentil de tu sueldo
   Página propia, prefijo .ps-*
   Reutiliza .switch (el «Anual / Mensual»), .tool-form, .field, .result,
   .result-stats, .amort-table--desglose y .row-actual; lo propio de aquí es
   el resumen en prosa que va debajo de la cifra grande del percentil.
   ============================================================= */
.ps-figura-sub {
  display: block;
  margin-top: -.1rem;
  font-size: .78rem;
  color: var(--ink-faint);
  max-width: 34ch;
}
.ps-resumen {
  margin-top: .5rem;
  font-size: .88rem;
  color: var(--ink-soft);
  max-width: 42ch;
}
/* Solo dos cifras (mediana y media): con las tres columnas de .result-stats
   de serie, la tercera se quedaría vacía. El decil y su franja ya van en
   .ps-figura-sub, que no tiene el corsé de una columna estrecha. */
.ps-stats { grid-template-columns: 1fr 1fr; }

/* =============================================================
   28. Tiempo de vida en el móvil
   tiempo-vida-pantalla — cuántos años de vida en el móvil.
   Reutiliza .tool-form, .result, .result-stats, .extra-block y .savings
   tal cual; lo propio de aquí es la línea de resumen bajo la cifra (igual
   que .agua-resumen) y la aclaración de que es tiempo acumulado, no vida
   restada, que necesita algo más de peso que un .hint normal porque un
   malentendido aquí sería serio.
   ============================================================= */
.pantalla-resumen {
  margin-top: .3rem;
  font-size: .8rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.pantalla-aclaracion {
  margin-top: .7rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* =============================================================
   29. Calculadora de finiquito
   Ocho campos, que son muchos para una rejilla de dos columnas en una
   pantalla estrecha, y ninguno se puede quitar: el resultado cambia de
   verdad con todos. Se dejan en dos columnas y a los 640 px pasan a
   tres, que es donde el formulario deja de parecer un cuestionario.
   ============================================================= */
.tool-form--fin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Los campos de fecha traen su propio icono de calendario y su relleno:
   sin esto, el que dibuja el navegador se sale de la caja. */
.tool-form--fin input[type="date"] {
  flex: 1 1 auto; min-width: 0;
  padding: .62rem .75rem;
  border: 0; background: none; outline: none;
  font: inherit; font-size: 1rem; font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tool-form--fin input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .55;
  filter: grayscale(1);
}
.tool-form--fin input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* La línea de contexto bajo la cifra: quién eres, cuánto vale tu día y
   por qué te vas. Es lo que hace comprobable el número de arriba. */
.fin-resumen {
  margin-top: .3rem;
  font-size: .84rem; color: var(--ink-soft);
  line-height: 1.45;
}

/* En el desglose, el signo importa más que en ninguna otra calculadora:
   una línea en negativo son vacaciones disfrutadas de más, y se resta. */
.amort-table--desglose tr.row-total td { font-weight: 700; }

@media (min-width: 640px) {
  .tool-form--fin {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tool-form--fin .field--wide { grid-column: 1 / -1; }
}

/* =============================================================
   30. Cuota de autonomo
   ============================================================= */
.tool-form--aut { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* La linea de contexto bajo la cifra: que tabla, que tramo y entre que
   bases se puede mover. Es lo que hace comprobable la cuota de arriba. */
.aut-resumen {
  margin-top: .3rem;
  font-size: .84rem; color: var(--ink-soft);
  line-height: 1.45;
}

/* Una casilla en su propia linea, con el texto al lado y no encima: es una
   decision de si/no, no un campo con etiqueta. */
.casilla-linea {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .9rem; color: var(--ink-soft);
  cursor: pointer; user-select: none;
}
.casilla-linea input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem; flex: none;
  margin-top: .12rem;
  accent-color: var(--accent); cursor: pointer;
}
.casilla-linea:hover { color: var(--ink); }

/* Con la cuota reducida la base deja de decidir nada: el deslizador se
   apaga en vez de desaparecer, para que se vea que sigue ahi. */
.tool-form--aut .slider:disabled { opacity: .4; cursor: not-allowed; }

/* A los 960 px la rejilla comun pasa a tres columnas y deshace el
   .field--wide (linea 752). Aqui hacen falta las dos cosas: dos columnas y
   que el deslizador de la base siga ocupando el ancho entero, porque un
   deslizador de 300 px no se puede afinar con el raton. */
@media (min-width: 960px) {
  .tool-form--aut { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .tool-form--aut .field--wide,
  .tool-form--aut .hint.field--wide { grid-column: 1 / -1; }
}

/* =============================================================
   31. Calculadora de IVA
   ============================================================= */
.tool-form--iva { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.iva-resumen {
  margin-top: .3rem;
  font-size: .84rem; color: var(--ink-soft);
  line-height: 1.45;
}

/* El aviso del error clasico. Va en ambar y no en rojo a proposito: no es
   un error del visitante, es una advertencia sobre la cuenta que MUCHA
   gente hace mal. Solo aparece al quitar el IVA, que es donde se comete. */
.iva-aviso {
  margin-top: 1rem;
  padding: .7rem .9rem;
  border-left: 3px solid var(--warm);
  background: var(--warm-tint);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: .88rem; line-height: 1.55; color: var(--ink);
}
.iva-aviso strong { color: var(--warm); }

@media (min-width: 640px) {
  .tool-form--iva { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .tool-form--iva { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tool-form--iva .field--wide,
  .tool-form--iva .hint.field--wide { grid-column: 1 / -1; }
}

/* =============================================================
   32. Días entre dos fechas
   ============================================================= */

/* Un <input type="date"> no encoge: trae dentro tres huecos y el icono
   del calendario. A media casilla en un móvil de 375 px se sale, así que
   hasta 560 px va todo a una columna. */
.tool-form--fechas { grid-template-columns: minmax(0, 1fr); }

/* El «hoy» de al lado de la etiqueta. Es un atajo, no una acción
   principal: por eso va con el tamaño de la etiqueta y no como botón. */
.mini-boton {
  margin-left: .4rem;
  padding: .05rem .4rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .68rem; font-weight: 600; letter-spacing: .01em;
  color: var(--ink-faint);
  background: var(--surface);
  vertical-align: baseline;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.mini-boton:hover { color: var(--accent); border-color: var(--accent); }

.fechas-resumen {
  margin-top: .3rem;
  max-width: 62ch;
  font-size: .84rem; color: var(--ink-soft);
  line-height: 1.45;
}

/* En ámbar y no en rojo: no es un error de quien escribe, es el aviso de
   que a los laborables les faltan los festivos y de por qué faltan. */
.fechas-aviso {
  margin-top: 1rem;
  padding: .7rem .9rem;
  border-left: 3px solid var(--warm);
  background: var(--warm-tint);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: .88rem; line-height: 1.55; color: var(--ink);
  max-width: 68ch;
}
.fechas-aviso strong { color: var(--warm); }

/* Los campos del modo «sumar» son cortos —un número y dos desplegables—
   y en una sola columna dejarían la tarjeta larguísima. */
@media (min-width: 560px) {
  .tool-form--fechas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-form--fechas .field--wide { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .tool-form--fechas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tool-form--fechas .field--wide { grid-column: 1 / -1; }
}

/* =============================================================
   33. Calculadora de edad
   ============================================================= */
.tool-form--edad { grid-template-columns: minmax(0, 1fr); }

/* «25 años, 6 meses y 3 días» no cabe en el cuerpo de una cifra suelta:
   a 3,1 rem se come dos líneas y media en un móvil. Baja de tamaño y se
   equilibra a mano, que es texto y no un número. */
.result-figure--edad {
  font-size: clamp(1.6rem, 5.6vw, 2.5rem);
  text-wrap: balance;
  max-width: 20ch;
}

.edad-resumen {
  margin-top: .35rem;
  max-width: 62ch;
  font-size: .84rem; color: var(--ink-soft);
  line-height: 1.45;
}

/* Solo lo ve quien nacio un 29 de febrero. En ambar porque no es un
   error suyo: es una decision nuestra que tiene que poder discutir. */
.edad-aviso {
  margin-top: 1rem;
  padding: .7rem .9rem;
  border-left: 3px solid var(--warm);
  background: var(--warm-tint);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: .88rem; line-height: 1.55; color: var(--ink);
  max-width: 68ch;
}
.edad-aviso strong { color: var(--warm); }

/* Los cumpleanos que ya pasaron, apagados: la tabla se lee de arriba
   abajo y lo que importa es donde empieza lo que todavia no ha llegado. */
.amort-table--desglose tr.row-pasada td { color: var(--ink-faint); }

@media (min-width: 560px) {
  .tool-form--edad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-form--edad .field--wide { grid-column: 1 / -1; }
}

/* =============================================================
   34. Tu edad en otros planetas
   ============================================================= */
.tool-form--planetas { grid-template-columns: minmax(0, 1fr); }

/* «14,56 anos marcianos» es texto y no una cifra suelta: al tamano de
   .result-figure se parte en tres lineas en un movil. */
.result-figure--planeta {
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  text-wrap: balance;
  max-width: 18ch;
}

.planetas-resumen {
  margin-top: .35rem;
  max-width: 62ch;
  font-size: .84rem; color: var(--ink-soft);
  line-height: 1.45;
}

/* En verde y no en ambar: aqui no se avisa de nada, se cuenta una
   curiosidad. El ambar del resto del sitio significa «cuidado». */
.planetas-aviso {
  margin-top: 1rem;
  padding: .7rem .9rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: .88rem; line-height: 1.55; color: var(--ink);
  max-width: 68ch;
}
.planetas-aviso strong { color: var(--accent); }

/* Cinco columnas no caben en 375 px por mucho que se aprieten: la tabla
   se desplaza dentro de su .table-scroll y la primera columna, que es la
   que dice de que planeta se habla, se queda pegada al borde. */
.amort-table--planetas { min-width: 41rem; }
.amort-table--planetas th:not(:first-child),
.amort-table--planetas td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.amort-table--planetas td:first-child { min-width: 15rem; }

@media (min-width: 560px) {
  .tool-form--planetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================================
   35. Conversor de unidades y tallas
   ============================================================= */
.tool-form--conversor { grid-template-columns: minmax(0, 1fr); }

/* «62,1371192 mi» es una cifra larga con su simbolo pegado: al tamano de
   .result-figure se sale de la tarjeta en un movil. */
.result-figure--conversor {
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  text-wrap: balance;
  max-width: 18ch;
}

.conversor-resumen {
  margin-top: .35rem;
  max-width: 62ch;
  font-size: .84rem; color: var(--ink-soft);
  line-height: 1.45;
}

/* El aviso de las tallas solo sale en las categorias de tallas. En ambar
   porque es lo unico de esta pagina que NO es exacto, y la pagina entera
   presume de lo contrario: la advertencia tiene que verse. */
.conversor-aviso {
  margin-top: 1rem;
  padding: .7rem .9rem;
  border-left: 3px solid var(--warm);
  background: var(--warm-tint);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: .88rem; line-height: 1.55; color: var(--ink);
  max-width: 68ch;
}
.conversor-aviso strong { color: var(--warm); }

/* La fila de la unidad que ha escrito el visitante, marcada: en una tabla
   de nueve unidades hay que poder encontrar de donde se ha partido. */
.amort-table--desglose tr.row-origen td { background: var(--accent-tint); font-weight: 600; }

/* La tabla de tallas de ropa son seis columnas de dos digitos: caben
   apretadas, pero necesitan desplazarse en un movil. */
.amort-table--tallas { min-width: 34rem; }
.amort-table--tallas th:not(:first-child),
.amort-table--tallas td { text-align: right; font-variant-numeric: tabular-nums; }
.amort-table--tallas th[scope="row"] { text-align: left; font-weight: 600; white-space: nowrap; }

/* Tres campos —cuanto, de, a— mas la categoria arriba. En un movil van
   uno debajo de otro; a partir de 560 px caben en fila, que es como se
   lee «de X a Y» de un vistazo. */
@media (min-width: 560px) {
  .tool-form--conversor { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tool-form--conversor .field--wide { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .tool-form--conversor { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tool-form--conversor .field--wide { grid-column: 1 / -1; }
}

/* =============================================================
   36. Ritmo de carrera y prediccion de marca
   ============================================================= */
.tool-form--ritmo,
.tool-form--prediccion { grid-template-columns: minmax(0, 1fr); }

/* «4:59 min/km» es cifra mas unidad pegada: al tamano de .result-figure
   se sale de la tarjeta en un movil de 375. */
.result-figure--ritmo {
  font-size: clamp(1.8rem, 6.4vw, 2.7rem);
  text-wrap: balance;
  max-width: 16ch;
}

.carrera-resumen {
  margin-top: .35rem;
  max-width: 62ch;
  font-size: .84rem; color: var(--ink-soft);
  line-height: 1.45;
}

/* Las marcas notables dentro de una tabla de 42 kilometros. Sin esto hay
   que ir contando filas para encontrar la media maraton. */
.amort-table--desglose tr.row-hito td { background: var(--accent-tint); font-weight: 600; }

/* El aviso de que Riegel se sale de su propio rango. En ambar: no es un
   error de quien escribe, es una limitacion de la formula. */
.carrera-aviso {
  margin-top: 1rem;
  padding: .7rem .9rem;
  border-left: 3px solid var(--warm);
  background: var(--warm-tint);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: .88rem; line-height: 1.55; color: var(--ink);
  max-width: 68ch;
}
.carrera-aviso strong { color: var(--warm); }

@media (min-width: 560px) {
  .tool-form--ritmo,
  .tool-form--prediccion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-form--ritmo .field--wide,
  .tool-form--prediccion .field--wide { grid-column: 1 / -1; }
}

/* La tabla de la prediccion: tres columnas, la primera con nota. */
.amort-table--prediccion th:not(:first-child),
.amort-table--prediccion td:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums;
}
.amort-table--prediccion { min-width: 26rem; }

/* =============================================================
   37. Calculadora de 1RM
   ============================================================= */
.tool-form--rm { grid-template-columns: minmax(0, 1fr); }
.amort-table--rm th:not(:first-child),
.amort-table--rm td:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums;
}
.amort-table--rm { min-width: 24rem; }

@media (min-width: 560px) {
  .tool-form--rm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-form--rm .field--wide { grid-column: 1 / -1; }
}


/* ==========================================================================
   38. Calculadora de grasa corporal
   El formulario tiene seis campos cortos (contornos en centimetros), asi que
   en movil van en una sola columna y en cuanto hay sitio pasan a dos: son
   numeros de dos digitos y en una columna unica la pagina se hace larguisima.
   El campo de cadera se oculta con [hidden] desde el JS cuando el sexo es
   hombre, porque la formula masculina no lo usa.
   ========================================================================== */

.tool-form--grasa { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 520px) {
  .tool-form--grasa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================================
   39. El coste real de fumar
   Seis campos cortos, misma logica que la de grasa corporal: una columna en
   movil y dos en cuanto hay sitio. La tabla tiene cuatro columnas y en movil
   se desplaza dentro de .table-scroll, que ya existe.
   ========================================================================== */

.tool-form--fumar { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 520px) {
  .tool-form--fumar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================================
   40. Cual es mi IP
   La unica pagina del sitio que no es un formulario: no hay campos, hay un
   boton y unas tablas. El boton reutiliza .tp-boton, que ya existe para el
   test de ping y que es el otro sitio donde se toca la red.
   .ip-vacio es el «no lo dice»: se pinta apagado a proposito, porque es un
   hueco y no un valor, pero se lee, porque que falte tambien es informacion.
   ========================================================================== */

.ip-bloque { display: grid; gap: .85rem; justify-items: start; }

.ip-titulo {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.ip-explica { margin: 0; color: var(--ink-soft); max-width: 54ch; }

.ip-fallo:empty { display: none; }

.ip-caja {
  width: 100%;
  margin-top: .35rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--accent-tint);
}

/* La direccion es un dato para copiar, asi que va en monoespaciada y se
   parte por donde sea: una IPv6 no cabe en 375 px de ninguna manera. */
.ip-figura {
  display: block;
  margin: .2rem 0 .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.25rem, 6vw, 1.9rem);
  line-height: 1.25;
  word-break: break-all;
  user-select: all;
}

.ip-vacio { color: var(--ink-faint); font-style: italic; }

/* El user agent completo: una linea larguisima que no puede ensanchar la
   tabla ni empujar la pagina a scroll horizontal. */
.ip-largo span:first-child {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  line-height: 1.45;
  word-break: break-word;
}

/* Las filas son th + td, asi que la relajacion de --desglose (que solo
   toca td:first-child) no llega al valor y se queda en nowrap: un user
   agent completo empujaba la tabla a barra horizontal. */
[data-huella] .amort-table th,
[data-huella] .amort-table td { white-space: normal; }
[data-huella] .amort-table th[scope="row"] { min-width: 7.5rem; }
/* Aqui no hay cifras que alinear por la derecha: es una lista de «esto es
   lo que sabe de ti». A la izquierda se lee como lo que es, y la nota cae
   debajo del valor en vez de flotar por la derecha. */
[data-huella] .amort-table td { text-align: left; }
[data-huella] .amort-table .cell-note { max-width: 40ch; }

.ip-grupo {
  margin: 1.6rem 0 .55rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.ip-grupo:first-child { margin-top: 0; }


/* ==========================================================================
   41. Paginas de respuesta (edad-en-otros-planetas/venus/,
       conversor-unidades/pulgadas-a-centimetros/ y las que vengan)
   Un patron, no una pagina: quien llega buscando «mi edad en Venus» o
   «cuantos cm son 30 pulgadas» tiene que encontrar la respuesta YA HECHA,
   escrita en el HTML y sin JavaScript de por medio. De ahi que el bloque de
   respuesta vaya ANTES de la calculadora y pese mas visualmente que ella.
   Las clases van sin nombre de tema a proposito: las comparten todas.
   ========================================================================== */

.respuesta-bloque {
  margin: 0 0 1.6rem;
  padding: 1.15rem 1.25rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--accent-tint);
}

.respuesta-clave {
  margin: 0 0 .9rem;
  font-size: clamp(1.02rem, 3.6vw, 1.2rem);
  line-height: 1.45;
  color: var(--ink);
}
.respuesta-clave strong { color: var(--accent); }

.respuesta-pie {
  margin: .7rem 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* La tabla de la respuesta vive dentro del bloque tintado, asi que no
   necesita su propio fondo de tarjeta. */
.respuesta-bloque .table-scroll {
  background: var(--surface);
  border: 1px solid var(--line);
}

.respuesta-h2 {
  margin: 0 0 .7rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}

/* La lista de los otros planetas, al pie: enlaces gordos y faciles de dar
   con el pulgar, y en dos columnas en cuanto hay sitio. */
.respuesta-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 520px) {
  .respuesta-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.respuesta-lista a {
  display: block;
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.respuesta-lista a:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.respuesta-lista a:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}


/* ==========================================================================
   42. Tablas largas de las paginas de respuesta
   La de los anos son 151 filas y la del 1 al 100, cien. Enteras empujarian
   la explicacion y el conversor tan abajo que nadie llegaria. Se les pone
   alto maximo y barra propia: el contenido sigue estando en el HTML —Google
   lo lee igual, no es contenido oculto— y la pagina se recorre.
   ========================================================================== */

.nr-tabla-larga { min-width: 0; }

.table-scroll--larga {
  max-height: 30rem;
  overflow-y: auto;
}

/* La cabecera se queda pegada arriba mientras se recorre la tabla: con cien
   filas, a mitad de camino ya no se sabe que columna es cual. */
.nr-tabla-larga thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}


/* ==========================================================================
   43. Calculadora de nota media
   Una lista de filas que crece y mengua. En el movil cada fila es una
   tarjetita de dos lineas; a partir de 640 px pasa a ser una fila de verdad,
   con su cabecera de columnas encima, que es como se lee una lista de notas.
   Reutiliza .field, .input-wrap, .extra-block/.pct-block (el bloque de la
   segunda pregunta) y .amort-table--desglose.
   ========================================================================== */

.field--modo { max-width: 22rem; margin-bottom: 1rem; }

/* --- La cabecera de columnas --- */
/* Solo aparece cuando las filas van en horizontal: en el movil cada campo
   lleva su propio placeholder y una cabecera flotando arriba estorbaria. */
.nm-cabecera { display: none; }

.nm-filas {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .55rem;
  /* Una lista de notas no gana nada por estirarse hasta el borde de una
     pantalla ancha: el nombre acabaria a un palmo de su nota. */
  max-width: 38rem;
}

/* En el movil cada fila ocupa dos lineas y sin una raya de por medio no se
   ve donde acaba una nota y empieza la siguiente. */
.nm-fila + .nm-fila {
  border-top: 1px solid var(--line);
  padding-top: .55rem;
}

/* --- Una fila --- */
.nm-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.6rem 2rem;
  grid-template-areas:
    "etiqueta etiqueta quitar"
    "nota     peso     quitar";
  gap: .4rem .45rem;
  align-items: center;
}
.nm-campo-etiqueta { grid-area: etiqueta; }
.nm-campo-nota { grid-area: nota; }
.nm-campo-peso { grid-area: peso; }

.nm-fila .input-wrap input {
  width: 100%; min-width: 0;
  border: 0; background: none; color: inherit;
  font: inherit; padding: .5rem .6rem;
  font-variant-numeric: tabular-nums;
}
.nm-fila .input-wrap input:focus { outline: none; }
.nm-campo-etiqueta .input-wrap input { font-variant-numeric: normal; }
.nm-campo-peso .unit { padding-right: .5rem; font-size: .82rem; }

/* --- La cruz de quitar --- */
.nm-quitar {
  grid-area: quitar;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0;
  border: 0; border-radius: 999px;
  background: none; color: var(--ink-faint);
  cursor: pointer;
  transition: color .18s var(--ease-out), background .18s var(--ease-out);
}
.nm-quitar:hover:not(:disabled) { color: var(--warm); background: var(--surface-2); }
.nm-quitar:disabled { opacity: .3; cursor: default; }

/* --- Anadir otra --- */
.nm-anadir {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .75rem; padding: .45rem .8rem;
  border: 1px dashed var(--line); border-radius: var(--radius-s);
  background: none; color: var(--accent);
  font: inherit; font-size: .86rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out);
}
.nm-anadir:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-tint); }
.nm-anadir:disabled { opacity: .45; cursor: default; }

/* --- Los avisos --- */
/* Son hasta tres y cada uno va en su linea: los pesos que no suman 100, el
   4,95 que parece un 5 y la nota que mas tira hacia abajo. */
.nm-avisos {
  display: flex; flex-direction: column; gap: .4rem;
  margin-top: .9rem;
  font-size: .86rem; line-height: 1.5;
  color: var(--ink-soft);
}
.nm-avisos strong { color: var(--accent); }

@media (min-width: 640px) {
  .nm-cabecera {
    display: grid;
    max-width: 38rem;
    grid-template-columns: minmax(0, 1fr) 5.4rem 5.4rem 2rem;
    gap: .5rem;
    margin-bottom: .35rem; padding-right: 2rem;
    font-size: .78rem; font-weight: 600;
    color: var(--ink-soft);
  }
  .nm-cabecera > :last-child { grid-column: 3; }

  .nm-fila {
    grid-template-columns: minmax(0, 1fr) 5.4rem 5.4rem 2rem;
    grid-template-areas: "etiqueta nota peso quitar";
    gap: .5rem;
  }
  .nm-fila + .nm-fila { border-top: 0; padding-top: 0; }
}

/* En papel se imprimen las notas y la media, que es la hoja que alguien
   querria guardar; el boton de anadir y las cruces no pintan nada. */
@media print {
  .nm-anadir, .nm-quitar { display: none !important; }
  .nm-avisos { display: block !important; }
}


/* ==========================================================================
   44. Semanas de embarazo
   Tres grupos de campos que se turnan segun de donde salga la cuenta, una
   barra de avance y una tabla de calendario donde cada fila lleva su nota
   debajo del titulo. Reutiliza .tool-form, .result, .nm-avisos (los avisos
   de la nota media) y .amort-table--desglose.
   ========================================================================== */

.tool-form--emb { grid-template-columns: minmax(0, 1fr); max-width: 34rem; }

/* Los tres grupos ocupan el mismo sitio: solo uno esta visible a la vez. */
.emb-grupo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .8rem;
}
.emb-grupo[hidden] { display: none; }

/* --- La barra de avance --- */
/* No es decorativa: en un embarazo el «cuanto llevo» es media pregunta, y
   un 30 % se entiende de un vistazo mejor que «12 semanas de 40». */
.emb-barra {
  height: .5rem; margin-top: 1rem;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.emb-barra > span {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width .35s var(--ease-out);
}
.emb-barra-texto {
  margin-top: .4rem;
  font-size: .78rem; color: var(--ink-faint);
}

/* --- La nota de cada fila del calendario --- */
/* Va debajo del titulo y no en una cuarta columna: en un movil de 375 px
   una cuarta columna obliga a barrer la tabla en horizontal. */
.emb-nota {
  display: block;
  margin-top: .15rem;
  font-size: .76rem; font-weight: 400;
  color: var(--ink-faint);
}
/* Sin ancho minimo: con tres columnas y la nota debajo del titulo, la tabla
   cabe en 375 px envolviendo el texto. Barrerla en horizontal para leer
   trece fechas seria peor que leerlas en dos lineas. */
.emb-tabla { min-width: 0; }
.emb-tabla th, .emb-tabla td { white-space: normal; vertical-align: top; }
.emb-tabla td:first-child { font-variant-numeric: tabular-nums; }
.emb-tabla td:nth-child(2) { text-align: left; }

@media (min-width: 560px) {
  .emb-grupo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .emb-grupo .field--wide, .emb-grupo .hint { grid-column: 1 / -1; }
  .emb-grupo[data-grupo="eco"] { grid-template-columns: minmax(0, 1fr) 6rem 5rem; }
  .emb-grupo[data-grupo="concepcion"] { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .emb-barra > span { transition: none; }
}


/* ==========================================================================
   45. Peso ideal
   La tabla es lo propio de aqui: cada formula lleva su ano en pequeno al
   lado del nombre y para que se invento debajo, porque esa es la mitad de
   la informacion. Reutiliza .tool-form, .result, .nm-avisos y
   .amort-table--desglose.
   ========================================================================== */

.tool-form--pi {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 32rem;
}

/* La cifra de arriba es un rango («53,5 y 72,0 kg»), mas larga que un
   numero suelto: en 375 px necesita algo menos de cuerpo para no partirse. */
.tool-card .result-figure { overflow-wrap: break-word; }

/* --- La tabla de formulas --- */
.pi-tabla { min-width: 0; }
.pi-tabla th, .pi-tabla td { white-space: normal; vertical-align: top; }
.pi-tabla td:first-child { text-align: left; }

.pi-anio {
  font-size: .78rem; font-weight: 400;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.pi-para {
  display: block;
  margin-top: .15rem;
  font-size: .76rem; font-weight: 400; line-height: 1.45;
  color: var(--ink-faint);
}

/* Las que se salen del rango saludable se marcan: es el argumento entero
   de la pagina y tiene que verse sin leer. */
.pi-fuera {
  display: block;
  margin-top: .15rem;
  font-size: .72rem; font-weight: 600;
  color: var(--warm);
}
.amort-table tr.row-aviso td { background: var(--warm-tint); }

@media (min-width: 560px) {
  .tool-form--pi { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 44rem; }
}


/* ==========================================================================
   46. Calculadora de horas trabajadas
   Cuatro campos cortos en fila y una tabla de dos columnas donde cada
   concepto lleva su cuenta debajo. Reutiliza .tool-form, .result,
   .nm-avisos, .extra-block/.pct-block y .amort-table--desglose.
   ========================================================================== */

.tool-form--ch {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 32rem;
}
/* Las horas se leen en columna: tabulares y sin que el ancho baile al
   pasar de 9:00 a 17:30. */
.tool-form--ch input { font-variant-numeric: tabular-nums; }

.ch-tabla { min-width: 0; }
.ch-tabla th, .ch-tabla td { white-space: normal; vertical-align: top; }
.ch-tabla td:first-child { text-align: left; }

/* La cuenta de cada linea, en pequeno debajo del concepto: «1050 − 540»,
   «440 minutos ÷ 60». Es lo que convierte la tabla en una explicacion. */
.ch-detalle {
  display: block;
  margin-top: .15rem;
  font-size: .76rem; font-weight: 400; line-height: 1.45;
  color: var(--ink-faint);
}

@media (min-width: 560px) {
  .tool-form--ch { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 42rem; }
}


/* ==========================================================================
   47. Fechas en numeros romanos
   Tres campos cortos y, debajo, las tres formas listas para copiar. La
   cifra grande no es un numero: es una cadena de letras que hay que poder
   leer letra a letra antes de tatuarsela, asi que va con la tipografia
   monoespaciada y con el espaciado abierto. Reutiliza .tool-form, .result,
   .nm-avisos, .ch-tabla y .ch-detalle (de la calculadora de horas).
   ========================================================================== */

.tool-form--fr {
  grid-template-columns: 4.5rem 4.5rem minmax(0, 6rem);
  max-width: 26rem;
}
.tool-form--fr input { font-variant-numeric: tabular-nums; }

/* La cifra grande de ESTA pagina. Lleva clase propia y no [data-out-figura]
   a secas: ese atributo lo usan las treinta y tantas calculadoras del sitio,
   y con el selector ancho el «121,00 EUR» de la del IVA salia en
   monoespaciada. Comprobado en el navegador antes de acotarlo. */
.fr-cifra {
  font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}

/* --- Las tres formas, listas para copiar --- */
.fr-formas {
  display: grid; gap: .55rem;
  margin-top: 1rem;
  max-width: 30rem;
}
.fr-forma {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: .55rem .7rem;
  background: var(--surface-2);
}
.fr-forma-cab {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem;
  margin-bottom: .3rem;
}
.fr-forma-nombre { font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.fr-forma-nota { font-size: .72rem; color: var(--ink-faint); }

.fr-forma-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem;
}
.fr-valor {
  font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: 1rem; letter-spacing: .05em;
  color: var(--ink);
  overflow-wrap: anywhere;
  /* Se puede seleccionar con el dedo aunque el boton de copiar falle. */
  user-select: all;
}

.fr-copiar {
  flex: none;
  padding: .3rem .6rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: none; color: var(--accent);
  font: inherit; font-size: .78rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out),
              color .18s var(--ease-out);
}
.fr-copiar:hover { border-color: var(--accent); background: var(--accent-tint); }
.fr-copiar.is-ok { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }

/* En papel sobra el boton: el papel ya esta copiado. */
@media print { .fr-copiar { display: none; } }

@media (min-width: 480px) {
  .tool-form--fr { grid-template-columns: 5rem 5rem minmax(0, 7rem); }
}


/* ==========================================================================
   48. Consumo de electrodomesticos
   La calculadora cambia de campos segun lo que sepa el visitante, asi que lo
   propio de aqui es que los tres grupos ocupen el ancho entero y se alternen
   sin que la tarjeta pegue un salto. Lo demas —.field, .result-stats,
   .amort-table--desglose— es de la casa.
   ========================================================================== */
.tool-form--luz { grid-template-columns: minmax(0, 1fr); max-width: 34rem; }

/* Cada modo es una rejilla dentro de la rejilla: ocupa la fila entera del
   formulario y reparte sus propios campos por dentro. Es el mismo apaño que
   la de autonomos (seccion 33). */
.luz-grupo {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .9rem 1rem;
}
.luz-grupo[hidden] { display: none; }

/* El texto que sale al elegir aparato: que numero mirar en su etiqueta. No
   es un aviso de error, es la ayuda principal de la pagina, asi que se ve. */
.luz-ayuda {
  grid-column: 1 / -1;
  margin: 0;
  padding: .7rem .85rem;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-s);
  background: var(--accent-tint);
  font-size: .82rem; line-height: 1.5;
  color: var(--ink);
}
.luz-ayuda[hidden] { display: none; }
.luz-ayuda p { margin: 0; }
.luz-ayuda p + p { margin-top: .4rem; color: var(--ink-soft, var(--ink-faint)); }

/* Las dos tablas largas de la pagina. Los precios en columna se leen mejor
   con cifras de ancho fijo: asi el ojo compara febrero con agosto sin que
   las comas bailen. */
.luz-tabla td { font-variant-numeric: tabular-nums; }
.luz-tabla-eti th, .luz-tabla-eti td { white-space: normal; vertical-align: top; }
.luz-tabla-eti td:first-of-type { text-align: left; }
.luz-col-unidad { font-weight: 600; white-space: nowrap; }
.luz-col-norma { font-size: .78rem; color: var(--ink-faint); }

@media (min-width: 560px) {
  .tool-form--luz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .luz-grupo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .luz-grupo .hint { grid-column: 1 / -1; }
}
@media (min-width: 760px) {
  .luz-grupo[data-grupo="horas"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ==========================================================================
   49. Calculadora del paro
   Cinco campos que se leen en fila y una tabla de once tramos. Lo propio de
   aqui es que los importes se comparen en vertical: en la tabla de topes y
   en la de duracion el ojo va bajando por la columna, y con cifras de ancho
   variable esa lectura se rompe.
   ========================================================================== */
.tool-form--paro { max-width: 34rem; }
.tool-form--paro input { font-variant-numeric: tabular-nums; }

.paro-tabla td { font-variant-numeric: tabular-nums; }
.paro-tabla th[scope="row"] { white-space: normal; }

@media (min-width: 560px) {
  .tool-form--paro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .tool-form--paro { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 44rem; }
}


/* ==========================================================================
   50. Coste de un viaje en coche
   Seis campos, una casilla de ida y vuelta y una tabla de cincuenta filas.
   Lo propio de aqui son dos cosas: que la casilla de verificacion se lea
   como una frase y no como un formulario, y que la tabla de provincias
   compare precios en vertical, que es como se lee.
   ========================================================================== */
.tool-form--cv { max-width: 34rem; }
.tool-form--cv input { font-variant-numeric: tabular-nums; }

/* La casilla y su texto van juntos y se pulsan juntos: el area de toque es
   la frase entera, no el cuadradito de 13 pixeles. */
.cv-check label {
  display: flex; align-items: center; gap: .55rem;
  cursor: pointer;
  font-size: .9rem; font-weight: 600; color: var(--ink);
}
.cv-check input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem;
  accent-color: var(--accent);
  flex: none; cursor: pointer;
}

/* El boton que lleva el consumo medido al campo de arriba. Es un enlace
   disfrazado de boton: no navega, rellena. */
.cv-usar {
  margin-left: .5rem;
  padding: .18rem .55rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: none; color: var(--accent);
  font: inherit; font-size: .78rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out);
}
.cv-usar:hover { border-color: var(--accent); background: var(--accent-tint); }

.carb-tabla-prov td { font-variant-numeric: tabular-nums; }
.carb-tabla-prov th[scope="row"] { white-space: normal; text-align: left; }
.carb-col-dif { font-weight: 600; }
.carb-col-est { color: var(--ink-faint); font-size: .82rem; }

@media (min-width: 560px) {
  .tool-form--cv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .tool-form--cv { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 44rem; }
}


/* ==========================================================================
   51. Fracciones
   Lo propio de aqui es que una fraccion NO es un numero suelto: es dos
   numeros apilados con una raya en medio, y si no se dibuja asi no se
   entiende. Todo lo demas de la seccion existe para eso.

   La raya se hace con un borde superior en el denominador, no con un
   elemento aparte: asi crece sola con el numero mas ancho de los dos y
   no hay que medir nada.

   El periodo de un decimal (el 6 de 0,16666...) lleva overline de CSS y
   no el caracter combinante U+0305. El combinante se copia y se pega
   fatal, se rompe en la mitad de las fuentes y no se busca bien; el
   overline se ve igual y deja el texto siendo texto.
   ========================================================================== */

.frac-modo { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.1rem; }
.frac-modo .switch { align-self: flex-start; max-width: 100%; }
.frac-modo-nota { font-size: .86rem; color: var(--ink-soft); margin: 0; }

/* En 375 px los tres modos no caben con la tipografia normal del switch, y
   «Decimal a fraccion» se cortaba por la mitad. Se encogen un punto en vez
   de acortar el rotulo: el rotulo es lo que le dice al visitante que aqui
   se hace eso, y medio rotulo no dice nada.
   El scroll horizontal se queda de red de seguridad para los moviles mas
   estrechos todavia, y lo hace EL GRUPO, nunca la pagina: la regla de la
   casa es que el body no se desplaza en horizontal. */
.frac-modo .switch { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.frac-modo .switch button {
  white-space: nowrap; flex: none;
  padding: .38rem .6rem; font-size: .78rem;
}
@media (min-width: 420px) {
  .frac-modo .switch button { padding: .38rem .85rem; font-size: .84rem; }
}

.frac-form { display: flex; flex-direction: column; gap: 1rem; max-width: 34rem; }
.frac-form input { font-variant-numeric: tabular-nums; }

.frac-bloque { display: flex; flex-direction: column; gap: .5rem; }
.frac-bloque[hidden] { display: none; }
.frac-rotulo {
  font-size: .78rem; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink-faint);
}
/* El entero va centrado contra la PILA entera, no alineado abajo. Alineado
   abajo queda a la altura del denominador y se lee como si fuera parte de
   el; centrado se lee como lo que es, un numero mixto: 2 y un tercio. */
.frac-entrada { display: flex; align-items: center; gap: .7rem; }
.frac-entero { flex: 0 0 5.2rem; }
/* El numerador y el denominador van uno encima del otro, como en el
   cuaderno: es la forma que hace que no haga falta explicar cual es cual. */
.frac-nd { flex: 1 1 auto; display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.frac-nd .field { margin: 0; }

.frac-bloque--op { align-items: flex-start; }
.switch--ops button { min-width: 2.6rem; font-size: 1.05rem; line-height: 1; }

.frac-bloque--dec { display: grid; gap: 1rem; }

/* ---------- la fraccion dibujada ---------- */
.frac {
  display: inline-flex; flex-direction: column; align-items: center;
  vertical-align: middle; line-height: 1.05;
}
.frac-n { padding: 0 .28em .06em; }
.frac-d { padding: .06em .28em 0; border-top: .085em solid currentColor; }
.frac--entera { display: inline; }

/* La misma fraccion escrita en linea (3/4) para meterla dentro de un
   parrafo, donde la version apilada romperia el interlineado. */
.frac-inline { font-variant-numeric: tabular-nums; white-space: nowrap; }

.frac-periodo { text-decoration: overline; text-underline-offset: .1em; }

/* ---------- el resultado ---------- */
.result-figure .frac { font-size: .82em; }

.frac-expresion {
  margin: .5rem 0 0;
  font-variant-numeric: tabular-nums;
  font-size: 1.02rem; font-weight: 600; color: var(--ink);
  overflow-wrap: anywhere;
}
.frac-expresion[hidden] { display: none; }

.frac-equis {
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
  margin: .7rem 0 0; font-size: .88rem; color: var(--ink-soft);
}
.frac-equis strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.frac-nota { font-style: normal; color: var(--ink-faint); font-size: .82rem; }

/* ---------- el paso a paso ---------- */
/* Es lo que viene a buscar el visitante, asi que va como una lista
   numerada de verdad y con el texto seleccionable, no como una imagen
   ni como una tabla. */
.frac-pasos {
  margin: 1.1rem 0 0; padding: 0; list-style: none;
  counter-reset: paso;
  display: flex; flex-direction: column; gap: .55rem;
}
.frac-paso {
  counter-increment: paso;
  position: relative;
  padding: .6rem .8rem .6rem 2.4rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  display: flex; flex-direction: column; gap: .15rem;
}
.frac-paso::before {
  content: counter(paso);
  position: absolute; left: .7rem; top: .62rem;
  width: 1.25rem; height: 1.25rem; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent);
  font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.frac-paso strong { font-size: .88rem; color: var(--ink); }
.frac-paso span {
  font-size: .88rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.frac-comparar {
  margin: .8rem 0 0; font-size: .86rem; color: var(--ink-faint);
  overflow-wrap: anywhere;
}
.frac-comparar[hidden] { display: none; }

/* ---------- la tabla ---------- */
.row-periodica th[scope="row"] { color: var(--accent); }

@media (min-width: 560px) {
  .frac-form { max-width: 30rem; }
  .frac-entrada { gap: .9rem; }
}


/* ==========================================================================
   52. Dias fertiles y ovulacion
   Dos cosas propias de aqui. La primera, que el resultado no es un numero
   sino una FECHA LARGA («Martes, 15 de septiembre de 2026»), y la cifra
   gigante de .result-figure no vale: se sale de la caja en un movil.
   La segunda, la tira de los seis dias de la ventana, que es el resultado
   de verdad. En 375 px seis tarjetas en fila no caben, asi que van en dos
   filas de tres y no en un carrusel: aqui hay que verlos los seis a la vez.
   ========================================================================== */
/* .tool-form es de dos columnas SIEMPRE, tambien en el movil. Aqui no
   vale: «Primer dia de tu ultima regla» parte en dos lineas y las dos
   pistas de debajo quedan en columnas de tres renglones cada una. En 375
   px este formulario va en una sola columna y sube a tres en pantalla
   ancha, que es cuando de verdad caben. */
.tool-form--df { max-width: 34rem; grid-template-columns: 1fr; }
.tool-form--df input { font-variant-numeric: tabular-nums; }

/* Una fecha larga no es una cifra: se le baja el cuerpo y se le deja
   partir en dos lineas en vez de desbordar. */
.result-figure--fecha {
  font-size: clamp(1.2rem, 5.2vw, 1.75rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.df-aviso-ciclo {
  margin: .9rem 0 0;
  padding: .65rem .85rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  font-size: .86rem; color: var(--ink-soft);
}
.df-aviso-ciclo[hidden] { display: none; }

.df-ventana { margin: .7rem 0 0; font-size: .95rem; color: var(--ink-soft); }
.df-ventana strong { color: var(--ink); }

/* La tira de los seis dias. Es lo que se viene a ver, asi que va con
   peso visual propio y no como una linea de texto mas. */
.df-dias {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
  margin: .9rem 0 0; padding: 0; list-style: none;
}
.df-dia {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .5rem .4rem;
  text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface-2);
}
.df-dia-num { font-size: .72rem; font-weight: 700; color: var(--ink-faint); letter-spacing: .02em; }
.df-dia-fecha { font-size: .84rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.df-dia-nota { font-size: .68rem; color: var(--accent); font-weight: 600; }

/* El dia de la ovulacion es el ultimo de la ventana, no el del medio.
   Se marca porque es la parte que mas se malinterpreta. */
.df-dia.is-ovulacion {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.df-dia.is-ovulacion .df-dia-num { color: var(--accent); }

.df-regla, .df-situa {
  margin: .8rem 0 0; font-size: .9rem; color: var(--ink-soft);
}
.df-regla strong { color: var(--ink); }
.df-situa {
  padding: .55rem .8rem;
  border-radius: var(--radius-s);
  background: var(--surface-2);
  color: var(--ink);
}
.df-situa[hidden] { display: none; }

/* La nota del 30 %: es la frase que separa esta pagina de las demas, asi
   que no va en letra pequena de descargo sino dentro del resultado. */
.df-guia {
  margin: .8rem 0 0;
  font-size: .84rem; color: var(--ink-faint);
  border-top: 1px solid var(--line); padding-top: .8rem;
}

@media (min-width: 560px) {
  .tool-form--df { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .df-dias { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .tool-form--df { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 44rem; }
}


/* ==========================================================================
   53. Ciclos de sueno
   La lista de horas es el resultado, no una tabla auxiliar: se lee de un
   vistazo y de noche, muchas veces con el movil a un palmo de la cara y la
   luz baja. Asi que la hora va grande y en primer lugar, y todo lo demas
   —los ciclos, las horas de sueno, el margen— cuelga debajo en gris.
   El margen NO se esconde en una nota al pie: es la parte que esta pagina
   tiene y las demas no.
   ========================================================================== */
.cs-modo { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.1rem; }
.cs-modo .switch { align-self: flex-start; max-width: 100%; overflow-x: auto; }
.cs-modo .switch button { white-space: nowrap; flex: none; padding: .38rem .7rem; font-size: .8rem; }
.cs-modo-nota { font-size: .86rem; color: var(--ink-soft); margin: 0; }

.tool-form--cs { max-width: 30rem; }
.tool-form--cs input { font-variant-numeric: tabular-nums; }

.cs-nota { margin: .7rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.cs-nota strong { color: var(--ink); }

.cs-filas {
  margin: 1rem 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: .5rem;
}
.cs-fila {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "hora ciclos"
    "hora sueno"
    "margen margen";
  align-items: baseline;
  column-gap: .8rem; row-gap: .1rem;
  padding: .6rem .8rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface-2);
}
.cs-fila-hora {
  grid-area: hora;
  align-self: center;
  font-size: 1.45rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.cs-fila-ciclos { grid-area: ciclos; font-size: .84rem; font-weight: 600; color: var(--ink); }
.cs-fila-sueno { grid-area: sueno; font-size: .82rem; color: var(--ink-soft); }
.cs-fila-margen {
  grid-area: margen;
  margin-top: .35rem; padding-top: .35rem;
  border-top: 1px dashed var(--line);
  font-size: .76rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* La de cinco ciclos, que son las siete horas y media que casi todo el
   mundo viene buscando. */
.cs-fila.is-destacada {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.cs-fila.is-destacada .cs-fila-hora { color: var(--accent); }

.cs-horquilla {
  margin: 1rem 0 0;
  padding-top: .8rem; border-top: 1px solid var(--line);
  font-size: .84rem; color: var(--ink-faint);
}
.cs-horquilla strong { color: var(--ink-soft); }

@media (min-width: 560px) {
  .cs-modo .switch button { padding: .38rem .85rem; font-size: .84rem; }
  .cs-fila {
    grid-template-columns: auto auto 1fr;
    grid-template-areas: "hora ciclos margen" "hora sueno margen";
    column-gap: 1.1rem;
  }
  .cs-fila-margen {
    justify-self: end; align-self: center;
    margin-top: 0; padding-top: 0; border-top: 0;
    text-align: right;
  }
}


/* ==========================================================================
   54. m.c.m. y m.c.d.
   Dos resultados con el mismo peso, uno al lado del otro: la pagina existe
   justamente porque la gente los confunde, asi que ponerlos juntos con su
   regla debajo es media explicacion hecha.
   La tabla de factores tiene una columna por primo, o sea que su ancho
   depende de los numeros que se escriban: va SIEMPRE dentro de un
   contenedor con scroll propio para que la pagina no se desplace nunca.
   ========================================================================== */
.tool-form--mm { max-width: 34rem; grid-template-columns: 1fr; }
.tool-form--mm input { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Los ejemplos de un toque: en el movil es mucho mas comodo que teclear
   numeros separados por comas. */
.mm-ejemplos {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-top: .8rem;
}
.mm-ejemplos-rotulo {
  font-size: .78rem; font-weight: 600; color: var(--ink-faint);
  margin-right: .15rem;
}
.mm-ejemplos button {
  padding: .25rem .6rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: none; color: var(--ink-soft);
  font: inherit; font-size: .78rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out), color .18s var(--ease-out);
}
.mm-ejemplos button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }

.mm-dos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.mm-caja {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .75rem .8rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface-2);
  min-width: 0;
}
.mm-caja .result-figure { font-size: clamp(1.5rem, 7vw, 2.1rem); line-height: 1.05; }
.mm-caja-prod {
  font-size: .84rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
/* La regla, debajo de su propio resultado. Es la frase que la gente viene
   a buscar y aqui esta pegada al numero que produce, no en un parrafo
   trescientos pixeles mas abajo. */
.mm-caja-regla { margin-top: .25rem; font-size: .74rem; color: var(--ink-faint); line-height: 1.35; }
.mm-caja-regla strong { color: var(--ink-soft); }

.mm-coprimos, .mm-identidad {
  margin: .9rem 0 0; font-size: .86rem; color: var(--ink-soft);
}
.mm-coprimos[hidden] { display: none; }
.mm-identidad strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.mm-scroll { margin-top: 1rem; }
.mm-tabla { font-variant-numeric: tabular-nums; }
.mm-tabla th[scope="row"] { font-weight: 700; }
.mm-fila-mcd th, .mm-fila-mcd td,
.mm-fila-mcm th, .mm-fila-mcm td {
  border-top: 2px solid var(--line);
  background: var(--surface-2);
}
.mm-fila-mcd th[scope="row"], .mm-fila-mcm th[scope="row"] { color: var(--accent); }
.mm-vacia { padding: .8rem; margin: 0; font-size: .86rem; color: var(--ink-soft); }

.mm-euclides-bloque { margin-top: 1.2rem; }
.mm-euclides-bloque h3 { font-size: .95rem; margin: 0 0 .4rem; }
.mm-euclides-bloque p { font-size: .86rem; color: var(--ink-soft); margin: .4rem 0; }
.mm-euclides {
  margin: .6rem 0; padding: 0 0 0 1.3rem;
  font-variant-numeric: tabular-nums; font-size: .92rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.mm-euclides li { color: var(--ink-soft); }
.mm-euclides strong { color: var(--accent); }

@media (max-width: 419px) {
  /* Por debajo de 420 px las dos cajas se estrechan tanto que un m.c.m. de
     seis cifras se parte en dos lineas. Mejor una encima de la otra. */
  .mm-dos { grid-template-columns: 1fr; }
}


/* ==========================================================================
   55. Talla diana
   El intervalo NO es letra pequena: es el resultado. Una talla diana sin
   sus diecisiete centimetros de margen es el centro de una diana muy
   grande presentado como punteria, asi que aqui va en una caja con borde
   de acento, justo debajo de la cifra y antes que ninguna otra cosa.
   ========================================================================== */
.td-modo { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.1rem; }
.td-modo .switch { align-self: flex-start; }
.td-modo-nota { font-size: .86rem; color: var(--ink-soft); margin: 0; }

.tool-form--td { max-width: 30rem; }
.tool-form--td input { font-variant-numeric: tabular-nums; }

.td-metros { font-size: .9rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.td-cuenta {
  margin: .5rem 0 0;
  font-size: .88rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}

.td-intervalo {
  margin: .9rem 0 0;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  font-size: .88rem; color: var(--ink-soft);
}
.td-intervalo strong { color: var(--ink); }

.td-otro {
  margin: .9rem 0 0; padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-size: .84rem; color: var(--ink-faint);
}
.td-otro strong { color: var(--ink-soft); }

@media (min-width: 560px) {
  .tool-form--td { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   56. Cuanto dura el alcohol
   Esta pagina no tiene estado. No hay semaforo, ni barra que se llene, ni
   color que cambie al cruzar un umbral: ningun elemento visual puede
   codificar «ya estas bien», porque la pagina no sabe eso de nadie. Por eso
   el resultado se pinta en superficie neutra y el acento solo marca el
   borde de los bloques que hay que leer, nunca un estado.
   Y por eso los dos bloques que no pueden juntarse —velocidades de
   eliminacion y tasas legales— viven en secciones distintas: si comparten
   pantalla, la division la hace el lector.
   ========================================================================== */
.alc-card { display: block; }
.alc-card-titulo { margin: 0 0 .3rem; font-size: 1.05rem; }
.alc-card-sub {
  margin: 0 0 1rem; font-size: .88rem; color: var(--ink-soft);
}

.alc-tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.alc-tabla {
  width: 100%; border-collapse: collapse;
  font-size: .88rem; font-variant-numeric: tabular-nums;
}
.alc-tabla th, .alc-tabla td {
  padding: .38rem .3rem; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
.alc-tabla thead th {
  font-size: .74rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; color: var(--ink-faint); white-space: nowrap;
}
.alc-tabla tbody th { font-weight: 500; color: var(--ink); }
.alc-tabla tbody th label { cursor: pointer; }
.alc-tabla input {
  width: 100%; min-width: 3.4rem; max-width: 5.5rem;
  padding: .34rem .4rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  background: var(--surface); color: var(--ink);
  font: inherit; font-variant-numeric: tabular-nums;
}
.alc-tabla input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.alc-tabla td:last-child input { font-weight: 600; }

.alc-salida { margin-top: 1.1rem; }
.alc-cifras {
  display: flex; flex-wrap: wrap; gap: .6rem 1.8rem;
  padding: .85rem 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.alc-cifra { margin: 0; display: flex; flex-direction: column; gap: .1rem; }
.alc-cifra-valor {
  font-family: var(--display); font-size: 1.7rem; line-height: 1.1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.alc-cifra-rotulo { font-size: .78rem; color: var(--ink-faint); }

.alc-desglose {
  margin: .8rem 0 0; padding: 0; list-style: none;
  font-size: .84rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.alc-desglose li { padding: .16rem 0; overflow-wrap: anywhere; }

.alc-situacion { width: 100%; border-collapse: collapse; margin-top: .9rem; }
.alc-situacion caption {
  caption-side: top; text-align: left; margin-bottom: .5rem;
  font-size: .8rem; color: var(--ink-faint);
}
.alc-situacion th, .alc-situacion td {
  padding: .4rem .5rem .4rem 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line); font-size: .86rem;
}
.alc-situacion th { width: 6.5rem; font-weight: 600; color: var(--ink); }
.alc-situacion td { color: var(--ink-soft); }

.alc-ube-aviso {
  margin: 1.1rem 0 0; padding: .75rem .85rem;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-s); background: var(--surface-2);
  font-size: .86rem; color: var(--ink-soft);
}
.alc-ube-aviso strong { color: var(--ink); }

/* El bloque que acompana a cualquier cifra de la pagina. */
.alc-contexto {
  margin-top: 1.4rem; padding: 1rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface-2);
}
.alc-contexto h2 { margin: 0 0 .6rem; font-size: .95rem; }
.alc-contexto ol { margin: 0; padding-left: 1.15rem; }
.alc-contexto li {
  margin: .3rem 0; font-size: .86rem; color: var(--ink-soft); line-height: 1.5;
}
.alc-contexto strong { color: var(--ink); }

/* Tabla legal. Las filas de menores y noveles van arriba y con el mismo
   peso que el limite general: meterlas debajo es publicarlas mal. */
.alc-legal { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.alc-legal caption {
  caption-side: top; text-align: left; margin-bottom: .6rem;
  font-size: .8rem; color: var(--ink-faint);
}
.alc-legal th, .alc-legal td {
  padding: .55rem .5rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
  font-size: .9rem; font-variant-numeric: tabular-nums;
}
.alc-legal thead th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink-faint); font-weight: 600;
}
.alc-legal tbody th { font-weight: 600; color: var(--ink); }
.alc-legal tbody td { color: var(--ink); white-space: nowrap; }
.alc-nota-en-fila {
  display: block; margin-top: .2rem;
  font-size: .78rem; font-weight: 400; color: var(--ink-faint);
  white-space: normal;
}

.alc-aviso-fuerte {
  margin: 1.1rem 0; padding: .8rem .9rem;
  border: 1px solid var(--line-strong); border-left: 3px solid var(--warm);
  border-radius: var(--radius-s); background: var(--warm-tint);
  font-size: .88rem; color: var(--ink);
}

/* Un hueco declarado es contenido, no letra pequena: mismo tratamiento
   visual que los datos. */
.alc-huecos { margin: 1rem 0; padding-left: 1.15rem; }
.alc-huecos li { margin: .5rem 0; line-height: 1.55; }
.alc-huecos strong { color: var(--ink); }

/* Marca distinta para lo que hemos calculado nosotros. */
.alc-propio {
  display: inline-block; margin-top: .25rem;
  padding: .1rem .4rem; border-radius: 4px;
  background: var(--accent-tint); color: var(--accent);
  font-size: .78rem; font-weight: 500;
}

/* La cabecera va abreviada con <abbr> para que las tres columnas de
   numeros quepan: el titulo completo sigue ahi para quien use lector. */
.alc-tabla thead abbr { text-decoration: none; border-bottom: 1px dotted currentColor; }

@media (max-width: 420px) {
  /* A 375 px la columna que el visitante toca es la ultima, asi que se
     reparte a lo fijo en vez de dejar que los ml se coman el ancho y
     empujen «Cuantas» fuera de la pantalla. */
  .alc-tabla { font-size: .82rem; table-layout: fixed; }
  .alc-tabla col-consumicion { width: auto; }
  .alc-tabla th, .alc-tabla td { padding: .32rem .16rem; }
  .alc-tabla thead th { white-space: normal; text-align: center; }
  .alc-tabla thead th:first-child { text-align: left; }
  .alc-tabla tbody th { width: 38%; }
  .alc-tabla tbody td { width: 20.6%; }
  .alc-tabla input { min-width: 0; max-width: 100%; padding: .3rem .2rem; text-align: center; }
  .alc-cifra-valor { font-size: 1.45rem; }
  .alc-situacion th { width: 5rem; }
}

/* ==========================================================================
   57. Cuando pasar la ITV
   La fecha es el resultado, asi que va sola y grande. Y justo debajo, con
   caja propia, la ventana de los 30 dias: es lo unico de esta pagina que el
   visitante puede APROVECHAR, y en el resto de internet no aparece.
   ========================================================================== */
.tool-form--itv { grid-template-columns: 1fr; }
.tool-form--itv .field--ancho { grid-column: 1 / -1; }
.field-opcional {
  font-weight: 400; font-size: .8rem; color: var(--ink-faint);
  margin-left: .35rem;
}
.field-nota {
  margin: .35rem 0 0; font-size: .82rem; color: var(--ink-faint);
}
.itv-historico { padding-top: .2rem; }

.itv-salida { margin-top: 1.2rem; }

.itv-fecha {
  padding: 1rem 0 .9rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.itv-rotulo {
  margin: 0 0 .2rem; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint);
}
.itv-valor {
  margin: 0; font-family: var(--display);
  font-size: clamp(1.5rem, 5.5vw, 2rem); line-height: 1.15; color: var(--ink);
}
.itv-detalle {
  margin: .5rem 0 0; font-size: .9rem; color: var(--ink-soft);
}
.itv-tramo {
  margin: .45rem 0 0; font-size: .85rem; color: var(--ink-faint);
}

/* La ventana de los 30 dias. Acento a proposito: es lo aprovechable. */
.itv-ventana {
  margin-top: 1rem; padding: .85rem .95rem;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-s); background: var(--accent-tint);
  font-size: .89rem; color: var(--ink-soft);
}
.itv-ventana-titulo {
  margin: 0 0 .3rem; font-weight: 600; color: var(--accent);
  font-size: .82rem; text-transform: uppercase; letter-spacing: .05em;
}
.itv-ventana p:last-child { margin-bottom: 0; }

.itv-calendario { margin-top: 1.3rem; }
.itv-calendario h3 {
  margin: 0 0 .6rem; font-size: .95rem; color: var(--ink);
}

.itv-tabla {
  width: 100%; border-collapse: collapse;
  font-size: .88rem; font-variant-numeric: tabular-nums;
}
.itv-tabla caption {
  caption-side: top; text-align: left; margin-bottom: .55rem;
  font-size: .8rem; color: var(--ink-faint);
}
.itv-tabla th, .itv-tabla td {
  text-align: left; vertical-align: top;
  padding: .5rem .7rem .5rem 0;
  border-bottom: 1px solid var(--line);
}
.itv-tabla thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 600;
}
.itv-tabla tbody th { font-weight: 500; color: var(--ink); }
.itv-tabla tbody td { color: var(--ink-soft); }

/* Solo en el calendario: que «11 años» y «anual» no se partan. La tabla
   ancha del art. 6.1 SI parte, porque va dentro de su propio scroll. */
.itv-calendario .itv-tabla tbody td { white-space: nowrap; }

/* La tabla del art. 6.1 no cabe en 375 px: hace scroll DENTRO de su caja,
   no empujando la pagina. .tabla-envoltorio no existia en la hoja. */
.tabla-envoltorio {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.itv-tabla--ancha { min-width: 30rem; }
.itv-tabla--ancha tbody th { width: 38%; }
.itv-tabla--ancha tbody td { color: var(--ink); }
.itv-cat {
  display: block; font-size: .74rem; font-weight: 400;
  color: var(--ink-faint); font-variant-numeric: normal;
}

.itv-privacidad { margin-top: 1.1rem; }

@media (min-width: 34rem) {
  .tool-form--itv { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 30rem) {
  .itv-tabla { font-size: .82rem; }
  .itv-tabla th, .itv-tabla td { padding: .45rem .4rem .45rem 0; }
  .itv-tabla--ancha tbody th { width: 44%; }
}

/* ==========================================================================
   58. Dos clases compartidas que se usaban sin existir
   Las encontro la comprobacion de clases huerfanas de probar-cuando-pasar-
   la-itv.js. No daban error en ninguna parte: simplemente no hacian nada.
   · .tool-intro  — el parrafo de entrada que explica el angulo de la pagina.
                    Estaba en dos calculadoras cayendo a parrafo normal.
   · .fuente-nota — el pie que dice de donde sale el dato. Lo usan DIECIOCHO
                    paginas. Es justo el texto que sostiene la regla de la
                    casa (toda cifra con fuente) y se leia igual que el resto.
   ========================================================================== */
.tool-intro {
  font-size: 1.02rem; line-height: 1.65; color: var(--ink-soft);
  max-width: 62ch; margin-bottom: 1.4rem;
}
.tool-intro strong { color: var(--ink); font-weight: 600; }

.fuente-nota {
  margin-top: .9rem; padding-top: .7rem;
  border-top: 1px solid var(--line);
  font-size: .82rem; line-height: 1.55; color: var(--ink-faint);
}
.fuente-nota a { color: var(--ink-soft); }

/* ==========================================================================
   59. Sumar o restar dias a una fecha
   La pagina no tiene UN resultado, tiene cuatro, y la gracia es que se
   comparen de un vistazo: por eso van en tabla y no en tarjetas sueltas.
   El articulo va debajo del nombre de cada computo, porque es lo que
   convierte una fecha en una respuesta que se puede defender.

   De paso, dos cosas que faltaban en toda la hoja: .prose blockquote (las
   citas literales de normas se leian como parrafo normal en esta pagina y
   en la de la ITV) y .cita-fuente para firmarlas.
   ========================================================================== */
.tool-form--fechas { grid-template-columns: 1fr; }
.tool-form--fechas .field--ancho { grid-column: 1 / -1; }

.sf-salida { margin-top: 1.2rem; }

.sf-pregunta {
  margin: 0 0 .9rem; padding-bottom: .8rem;
  border-bottom: 1px solid var(--line);
  font-size: .95rem; color: var(--ink-soft);
}

.sf-tabla {
  width: 100%; border-collapse: collapse;
  font-size: .89rem;
}
.sf-tabla th, .sf-tabla td {
  text-align: left; vertical-align: top;
  padding: .65rem .8rem .65rem 0;
  border-bottom: 1px solid var(--line);
}
.sf-tabla thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 600;
}
.sf-tabla tbody th {
  font-weight: 600; color: var(--ink); width: 30%;
}
.sf-tabla tbody td { color: var(--ink); font-variant-numeric: tabular-nums; }

/* El articulo, debajo del nombre del computo. */
.sf-art {
  display: block; margin-top: .15rem;
  font-size: .74rem; font-weight: 400; color: var(--ink-faint);
  font-variant-numeric: normal;
}
.sf-quien { color: var(--ink-faint) !important; font-size: .82rem; }
.sf-hueco { color: var(--ink-faint); font-style: italic; }

.sf-tabla--ancha tbody th { width: 34%; font-weight: 500; }

/* Los festivos que se ha saltado la cuenta: sin esto, el numero de dias
   habiles hay que creerselo. */
.sf-festivos {
  margin-top: 1.1rem; padding: .85rem .95rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface-2);
}
.sf-festivos-titulo {
  margin: 0 0 .45rem; font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint);
}
.sf-festivos ul { margin: 0; padding-left: 1.1rem; }
.sf-festivos li { font-size: .87rem; color: var(--ink-soft); margin-bottom: .2rem; }
.sf-festivos-pie {
  margin: .55rem 0 0; font-size: .78rem; color: var(--ink-faint);
}

/* El hueco declarado. Acento calido: no es un error, es un limite. */
.sf-aviso {
  margin-top: 1.1rem; padding: .85rem .95rem;
  border: 1px solid var(--line); border-left: 3px solid var(--warm);
  border-radius: var(--radius-s);
  font-size: .87rem; color: var(--ink-soft);
}

/* Meses y anos: una sola fecha, asi que va grande. */
.sf-ff { padding: 1rem 0 .2rem; border-top: 1px solid var(--line); }
.sf-rotulo {
  margin: 0 0 .2rem; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint);
}
.sf-valor {
  margin: 0; font-family: var(--display);
  font-size: clamp(1.5rem, 5.5vw, 2rem); line-height: 1.15; color: var(--ink);
}
.sf-detalle { margin: .55rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.sf-ff-pie { margin: .6rem 0 0; font-size: .8rem; color: var(--ink-faint); }

.sf-privacidad { margin-top: 1.1rem; }

/* --- Las citas literales de las normas ------------------------------
   No tenian estilo en ninguna parte de la hoja, asi que un blockquote
   se leia igual que el parrafo de al lado. Justo lo contrario de lo que
   hace falta: la gracia de citar el BOE es que se vea que es el BOE. */
.prose blockquote {
  margin: 1.3rem 0; padding: .9rem 1.1rem;
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.prose blockquote p { margin: 0 0 .6rem; color: var(--ink-soft); }
.prose blockquote p:last-child { margin-bottom: 0; }
.cita-fuente {
  font-size: .8rem; color: var(--ink-faint);
  font-style: normal; letter-spacing: .01em;
}

@media (min-width: 34rem) {
  .tool-form--fechas { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 30rem) {
  .sf-tabla { font-size: .84rem; }
  .sf-tabla th, .sf-tabla td { padding: .55rem .5rem .55rem 0; }
  .sf-tabla tbody th { width: 36%; }
  .sf-tabla--ancha { min-width: 26rem; }
}

/* ==========================================================================
   60. Letra del DNI, del NIE, del CIF e IBAN
   La pagina responde una cosa (la letra, o si cuadra) y explica otra (el
   porque). Asi que hay un veredicto grande arriba, con color segun el
   estado, y debajo la explicacion en prosa. El documento completo va en
   monoespaciada y con las cifras separadas, que es como se lee un DNI.
   ========================================================================== */
.tool-form--dni { grid-template-columns: 1fr; }
.tool-form--dni .field--ancho { grid-column: 1 / -1; }
.tool-form--dni .input-wrap input {
  font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase;
}
.tool-form--dni .input-wrap input::placeholder {
  text-transform: none; letter-spacing: 0; font-size: .95rem;
}

.ld-salida { margin-top: 1.2rem; }

.ld-veredicto {
  padding: 1rem 0 .9rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ld-titulo {
  margin: 0 0 .35rem; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint); font-weight: 600;
}
.ld-completo {
  margin: 0; font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: clamp(1.35rem, 6vw, 1.9rem); line-height: 1.2;
  letter-spacing: .07em; color: var(--ink); word-break: break-all;
}
/* El color lo lleva el rotulo, no el numero: el numero tiene que leerse
   igual de bien acierte o falle. */
.ld-veredicto[data-estado="ok"] .ld-titulo { color: var(--accent); }
.ld-veredicto[data-estado="mal"] .ld-titulo { color: var(--warm); }

.ld-explica { margin-top: 1rem; }
.ld-explica p {
  margin: 0 0 .7rem; font-size: .92rem; line-height: 1.6; color: var(--ink-soft);
}
.ld-explica p:last-child { margin-bottom: 0; }
.ld-explica strong { color: var(--ink); }

/* La tabla de las 23 letras, cuando aparece dentro de una explicacion. */
.ld-tabla23 {
  font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  letter-spacing: .14em; color: var(--ink);
  background: var(--surface-2); padding: .1rem .35rem;
  border-radius: var(--radius-s);
}
.ld-tabla-larga { overflow-x: auto; white-space: nowrap; padding-bottom: .3rem; }

.ld-desglose {
  font-size: .85rem !important; color: var(--ink-faint) !important;
  padding-top: .5rem; border-top: 1px solid var(--line);
}
.ld-desglose strong {
  font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
}

/* Cuando lo escrito no coincide con lo calculado. */
.ld-aviso {
  margin-top: .8rem !important; padding: .7rem .85rem;
  border: 1px solid var(--line); border-left: 3px solid var(--warm);
  border-radius: var(--radius-s); font-size: .88rem !important;
}

.ld-norma {
  margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid var(--line);
  font-size: .78rem; color: var(--ink-faint);
}
.ld-privacidad { margin-top: 1.1rem; }

/* La tabla de las claves del CIF. */
.ld-tabla {
  width: 100%; border-collapse: collapse; font-size: .88rem;
}
.ld-tabla th, .ld-tabla td {
  text-align: left; vertical-align: top;
  padding: .55rem .8rem .55rem 0;
  border-bottom: 1px solid var(--line);
}
.ld-tabla thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 600;
}
.ld-tabla tbody th {
  width: 3.2rem; font-weight: 700; color: var(--accent);
  font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: 1rem;
}
.ld-tabla tbody td { color: var(--ink-soft); }
.ld-tabla--claves { min-width: 30rem; }
.ld-tabla--claves td:last-child { white-space: nowrap; color: var(--ink); }

@media (max-width: 30rem) {
  .ld-tabla { font-size: .83rem; }
  .ld-tabla th, .ld-tabla td { padding: .5rem .5rem .5rem 0; }
}

/* ==========================================================================
   61. Cafeina: cuanto dura en el cuerpo
   El argumento entero de la pagina es que la EFSA da tres semividas, no
   una, asi que las tres filas de resultado (rapida, media, lenta) tienen
   que leerse como una banda, no como tres numeros sueltos: por eso van en
   una lista compacta, alineadas, con el mismo tratamiento visual, y ninguna
   se destaca sobre las otras.
   ========================================================================== */
.caf-card { display: block; }
.caf-card-sub {
  margin: 0 0 .9rem; font-size: .88rem; color: var(--ink-soft);
}

.caf-bloque + .caf-bloque { margin-top: 0; }

.caf-campo { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.caf-campo label { font-size: .82rem; color: var(--ink-soft); }
.caf-campo select, .caf-campo input {
  padding: .5rem .6rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); background: var(--surface); color: var(--ink);
  font: inherit; font-variant-numeric: tabular-nums;
}
.caf-campo select:focus-visible, .caf-campo input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

.caf-fila-campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }

.caf-fracciones { margin-top: .3rem; flex-wrap: wrap; }

.caf-salida { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.caf-salida-titulo { margin: 0 0 .6rem; font-size: .92rem; font-weight: 600; color: var(--ink); }

.caf-filas { margin: 0; padding: 0; list-style: none; }
.caf-fila {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem;
  padding: .5rem 0; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.caf-fila:last-child { border-bottom: 0; }
.caf-fila-etiqueta { flex: 1 1 11rem; font-size: .85rem; color: var(--ink-soft); }
.caf-fila-valor { font-family: var(--display); font-size: 1.25rem; color: var(--ink); }
.caf-fila-porcentaje { font-size: .8rem; color: var(--ink-faint); }

/* El bloque que acompana a cualquier cifra de la pagina. */
.caf-contexto {
  margin-top: 1.4rem; padding: 1rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface-2);
}
.caf-contexto h2 { margin: 0 0 .6rem; font-size: .95rem; }
.caf-contexto ol { margin: 0; padding-left: 1.15rem; }
.caf-contexto li {
  margin: .3rem 0; font-size: .86rem; color: var(--ink-soft); line-height: 1.5;
}
.caf-contexto strong { color: var(--ink); }

.caf-tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.caf-tabla-contenido {
  width: 100%; border-collapse: collapse; margin-top: .8rem;
  font-size: .88rem;
}
.caf-tabla-contenido th, .caf-tabla-contenido td {
  padding: .5rem .6rem .5rem 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.caf-tabla-contenido thead th {
  font-size: .74rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; color: var(--ink-faint); white-space: nowrap;
}
.caf-tabla-contenido tbody th { font-weight: 500; color: var(--ink); white-space: nowrap; }
.caf-tabla-contenido tbody td:nth-child(2) {
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.caf-tabla-contenido tbody td:last-child { font-size: .8rem; color: var(--ink-faint); }

/* Un hueco declarado es contenido, no letra pequena. */
.caf-huecos { margin: 1rem 0; padding-left: 1.15rem; }
.caf-huecos li { margin: .5rem 0; line-height: 1.55; }
.caf-huecos strong { color: var(--ink); }

@media (max-width: 420px) {
  .caf-fila-campos { grid-template-columns: 1fr; }
  .caf-fila-valor { font-size: 1.1rem; }
  .caf-tabla-contenido { font-size: .82rem; }
}
/* ==========================================================================
   62. Hora extra
   Esta pagina existe para desmentir un numero (el 75% de recargo minimo,
   derogado desde 1995), asi que la respuesta va escrita ANTES del
   formulario, en texto plano, sin esperar a que cargue el JS: es lo que
   lee un buscador y es lo que tiene que ver alguien que solo quiere la
   cifra. El aviso de "por debajo del suelo legal" es el unico elemento de
   esta calculadora que se pinta como alerta de verdad: es la unica cifra
   de la pagina que significa "esto es ilegal", y tiene que distinguirse
   a simple vista del resto de avisos, que son solo informativos.
   ========================================================================== */
.he-respuesta {
  margin: 1.1rem 0 1.4rem;
  padding: .9rem 1.05rem;
  max-width: 68ch;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-s);
  background: var(--accent-tint);
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.6;
}
.he-respuesta strong { color: var(--ink); }

.he-resumen {
  margin: .35rem 0 0;
  font-size: .85rem;
  color: var(--ink-soft);
}

.he-comparacion {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: .92rem;
  color: var(--ink);
}

/* El aviso generico (informativo): mismo tono calido que el resto del
   sitio usa para "esto conviene saberlo", sin implicar ilegalidad. */
.he-aviso {
  margin-top: .7rem;
  padding: .7rem .85rem;
  border-radius: var(--radius-s);
  background: var(--warm-tint);
  border: 1px solid color-mix(in srgb, var(--warm) 28%, transparent);
  color: var(--ink-soft);
  font-size: .85rem;
  line-height: 1.5;
  max-width: 68ch;
}

/* El aviso de "por debajo del suelo legal" es el unico que dice "esto es
   ilegal", asi que lleva mas peso visual que un aviso informativo normal:
   borde entero, no solo un tono de fondo, para que no se confunda con el
   resto de notas de la pagina. */
.he-aviso--suelo {
  border-width: 2px;
  font-weight: 600;
  color: var(--warm);
}

.he-bloque-mes { margin-top: .9rem; }
.he-bloque-mes p { margin: .3rem 0; font-size: .88rem; color: var(--ink-soft); }

.he-aviso--jornada { margin: .9rem auto 0; }

/* AQUI IBA UN ESTILO DE .prose blockquote, y se ha quitado a proposito.
   El turno de noche lo escribio porque la hoja no tenia ninguno y el del
   navegador trae margenes de 40 px que desbordan a 375 px. Tenia razon,
   pero mientras tanto la seccion 59 anadio ese estilo para las citas del
   Codigo Civil y de la LEC. Como esta seccion va DESPUES en la cascada,
   dejarlo aqui le cambiaria el aspecto a las paginas de la ITV y de los
   plazos sin que nadie lo pidiera. Un mismo selector, un solo sitio. */

@media (max-width: 420px) {
  .he-respuesta { font-size: .89rem; padding: .8rem .9rem; }
}

/* ==========================================================================
   63. Descuentos, 3x2 y segunda unidad
   Tres modos en un solo formulario, y el resultado tiene siempre la misma
   forma: la cifra que se paga arriba y, debajo, el porcentaje REAL. El
   acento se reserva para el aviso, porque el mensaje de la pagina no es
   «pagas 40 €», es «no es un 70 %, es un 60 %».
   ========================================================================== */
.tool-form--desc { display: block; }
.tool-form--desc > .field--ancho { margin-bottom: .9rem; }
.tool-form--desc .switch { width: 100%; }
.tool-form--desc .switch button { flex: 1 1 auto; }
/* .tool-form es de dos columnas a TODOS los anchos, asi que hay que
   volverla de una a mano para el movil: si no, los campos salen en
   parejas a 375 px y las notas de debajo se quedan en una columna de
   nada. Es la misma trampa que ya mordio en la pagina de la ITV. */
.campos-modo .tool-form { margin: 0; grid-template-columns: 1fr; }
@media (min-width: 34rem) {
  .campos-modo .tool-form { grid-template-columns: 1fr 1fr; }
}

.ds-salida { margin-top: 1.2rem; }

.ds-cifra {
  padding: 1rem 0 .9rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ds-rotulo {
  margin: 0 0 .2rem; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint);
}
.ds-valor {
  margin: 0; font-family: var(--display);
  font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ds-sub { margin: .5rem 0 0; font-size: .92rem; color: var(--ink-soft); }
.ds-sub strong { color: var(--ink); }

/* El aviso es el mensaje de la pagina, no un adorno. */
.ds-aviso {
  margin-top: 1rem; padding: .85rem .95rem;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-s); background: var(--accent-tint);
  font-size: .89rem; color: var(--ink-soft);
}
.ds-aviso-titulo {
  margin: 0 0 .3rem; font-weight: 600; color: var(--accent);
  font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
}
.ds-aviso p:last-child { margin-bottom: 0; }

/* Cumple el cartel o no lo cumple: el borde lo dice de un vistazo. */
.ds-veredicto {
  margin-top: 1rem; padding: .85rem .95rem;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-s);
  font-size: .89rem; color: var(--ink-soft);
}
.ds-veredicto[data-cumple="no"] { border-left-color: var(--warm); }
.ds-veredicto p { margin: 0 0 .4rem; }
.ds-veredicto p:last-child { margin-bottom: 0; }
.ds-veredicto-cifra {
  font-size: 1rem; color: var(--ink);
}
.ds-veredicto-cifra strong {
  font-family: var(--display); font-size: 1.35rem; color: var(--accent);
}
.ds-veredicto[data-cumple="no"] .ds-veredicto-cifra strong { color: var(--warm); }

.ds-unidad { margin: .9rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.ds-pasos { margin-top: 1.3rem; }
.ds-pasos h3 { margin: 0 0 .6rem; font-size: .95rem; color: var(--ink); }
.ds-privacidad { margin-top: 1.1rem; }

.ds-tabla {
  width: 100%; border-collapse: collapse;
  font-size: .88rem; font-variant-numeric: tabular-nums;
}
.ds-tabla th, .ds-tabla td {
  text-align: left; vertical-align: top;
  padding: .5rem .8rem .5rem 0;
  border-bottom: 1px solid var(--line);
}
.ds-tabla thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 600;
}
.ds-tabla tbody th { font-weight: 600; color: var(--ink); }
.ds-tabla tbody td { color: var(--ink-soft); }

.ds-tabla--ofertas { min-width: 26rem; }
.ds-tabla--ofertas tbody th { width: 46%; font-weight: 500; }
.ds-tabla--ofertas tbody td { color: var(--ink); white-space: nowrap; }

/* La matriz de dos descuentos: columnas estrechas y todas iguales. */
.ds-tabla--matriz { min-width: 24rem; }
.ds-tabla--matriz th, .ds-tabla--matriz td { text-align: right; padding-right: .6rem; }
.ds-tabla--matriz thead th:first-child,
.ds-tabla--matriz tbody th { text-align: left; }
.ds-tabla--matriz tbody td { color: var(--ink); }

@media (max-width: 30rem) {
  .ds-tabla { font-size: .83rem; }
  .ds-tabla th, .ds-tabla td { padding: .45rem .5rem .45rem 0; }
  .tool-form--desc .switch { flex-wrap: wrap; }
  .tool-form--desc .switch button { font-size: .78rem; padding: .38rem .5rem; }
}

/* ==========================================================================
   64. Amortizar hipoteca: reducir cuota o reducir plazo
   La pagina se niega a recomendar, y eso tiene una consecuencia visual muy
   concreta: las dos opciones van EXACTAMENTE iguales. Mismo tamano, mismo
   color, mismo peso, mismo borde. Reducir plazo ahorra mas dinero casi
   siempre, y si se le pone el acento encima el diseno esta dando el consejo
   que el texto dice no dar. Por eso el acento se guarda para la caja de la
   comision, que es el dato que nadie mas publica bien.
   Al apilarse en movil la de arriba parece la principal, asi que ninguna
   lleva orden implicito en el texto: cada tarjeta se lee sola.
   ========================================================================== */
.tool-form--amort { grid-template-columns: 1fr; }
@media (min-width: 34rem) {
  .tool-form--amort { grid-template-columns: 1fr 1fr; }
}
.tool-form--amort input { font-variant-numeric: tabular-nums; }

.am-salida { margin-top: 1.2rem; }

.am-cabecera {
  margin: 0 0 1rem; padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
  font-size: .95rem; color: var(--ink-soft);
}
.am-cabecera strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Dos columnas iguales en cuanto caben; nunca una mas ancha que la otra. */
.am-opciones {
  display: grid; grid-template-columns: 1fr; gap: .8rem;
}
@media (min-width: 34rem) {
  .am-opciones { grid-template-columns: 1fr 1fr; }
}

.am-opcion {
  padding: .95rem 1rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface-2);
}
.am-opcion-titulo {
  margin: 0 0 .35rem; font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint);
}
.am-opcion-cifra {
  margin: 0; font-family: var(--display);
  font-size: clamp(1.55rem, 6.5vw, 2.05rem); line-height: 1.1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.am-opcion-sub { margin: .2rem 0 0; font-size: .84rem; color: var(--ink-soft); }

.am-opcion-detalle {
  margin: .75rem 0 0; padding: .7rem 0 0; list-style: none;
  border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--ink-soft);
}
.am-opcion-detalle li + li { margin-top: .3rem; }
.am-opcion-detalle strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.am-diferencia { margin: 1rem 0 0; font-size: .92rem; color: var(--ink-soft); }
.am-diferencia strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.am-nota { margin: .7rem 0 0; font-size: .87rem; color: var(--ink-faint); }

/* Aqui si va el acento: el techo de la comision es lo que la pagina aporta. */
.am-comision {
  margin-top: 1.1rem; padding: .9rem 1rem;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-s); background: var(--accent-tint);
  font-size: .89rem; color: var(--ink-soft);
}
.am-comision-titulo {
  margin: 0 0 .45rem; font-weight: 600; color: var(--accent);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
}
.am-comision p { margin: 0 0 .45rem; }
.am-comision p:last-child { margin-bottom: 0; }
.am-comision strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.am-comision ul { margin: 0 0 .45rem; padding-left: 1.1rem; }
.am-comision li + li { margin-top: .25rem; }
/* La lista de topes y la referencia al apartado las pinta el JS, asi que
   estas dos clases no aparecen en el HTML: se quedaron sin estilo una vez
   y la comprobacion de huerfanas no las vio. */
.am-topes { margin: 0 0 .45rem; padding-left: 1.1rem; }
.am-topes li + li { margin-top: .3rem; }
.am-topes strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.am-art { color: var(--ink-faint); font-size: .82rem; white-space: nowrap; }

.am-comision-pie {
  margin-top: .6rem; padding-top: .55rem;
  border-top: 1px solid var(--line-strong);
  font-size: .84rem; color: var(--ink-faint);
}
.am-comision-pie strong { color: var(--ink-soft); }

.am-privacidad { margin-top: 1.1rem; }

.am-tabla {
  width: 100%; border-collapse: collapse;
  font-size: .88rem; font-variant-numeric: tabular-nums;
}
.am-tabla th, .am-tabla td {
  text-align: left; vertical-align: top;
  padding: .5rem .8rem .5rem 0;
  border-bottom: 1px solid var(--line);
}
.am-tabla thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 600;
}
.am-tabla tbody th { font-weight: 600; color: var(--ink); }
.am-tabla tbody td { color: var(--ink-soft); }
.am-tabla--topes { min-width: 28rem; }

@media (max-width: 30rem) {
  .am-tabla { font-size: .83rem; }
  .am-tabla th, .am-tabla td { padding: .45rem .5rem .45rem 0; }
}

/* ==========================================================================
   65. Cuanto cobro estando de baja
   El argumento de la pagina es que la respuesta NO es una cifra: es un
   calendario. Asi que la tabla de tramos no es un anexo, es el resultado, y
   va con la misma jerarquia que la cifra grande. La columna de quien paga
   lleva su propio tono porque es la mitad de la respuesta que nadie da: del
   dia 4 al 15 paga la empresa y del 16 en adelante la Seguridad Social,
   aunque el dinero llegue igual en la nomina.
   El tramo que se cobra a cero se pinta apagado, no en rojo: no es un error,
   es la ley.
   ========================================================================== */
.tool-form--baja { grid-template-columns: 1fr; }
@media (min-width: 34rem) {
  .tool-form--baja { grid-template-columns: 1fr 1fr; }
}
.tool-form--baja .field--ancho { grid-column: 1 / -1; }
.tool-form--baja input { font-variant-numeric: tabular-nums; }

.cb-salida { margin-top: 1.2rem; }

.cb-resumen {
  margin: 0 0 1rem; font-size: .95rem; color: var(--ink-soft);
}
.cb-resumen strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.cb-cifra {
  padding: 1rem 0 .9rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cb-rotulo {
  margin: 0 0 .2rem; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint);
}
.cb-valor {
  margin: 0; font-family: var(--display);
  font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cb-sub { margin: .5rem 0 0; font-size: .92rem; color: var(--ink-soft); }
.cb-sub strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* El calendario es el resultado, no un anexo: por eso lleva titulo propio. */
.cb-titulo-tabla {
  margin: 1.4rem 0 .6rem; font-family: var(--display);
  font-size: 1.05rem; line-height: 1.2; color: var(--ink);
}

.cb-tabla {
  width: 100%; border-collapse: collapse; min-width: 32rem;
  font-size: .88rem; font-variant-numeric: tabular-nums;
}
.cb-tabla th, .cb-tabla td {
  text-align: left; vertical-align: top;
  padding: .55rem .8rem .55rem 0;
  border-bottom: 1px solid var(--line);
}
.cb-tabla thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 600;
}
.cb-tabla tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.cb-tabla tbody td { color: var(--ink-soft); }
.cb-tabla tbody td:first-child { color: var(--ink); }
.cb-tabla strong { color: var(--ink); white-space: nowrap; }

/* Los dias del tramo, debajo de la fecha y en pequeno: son contexto, no dato. */
.cb-dias {
  display: block; font-size: .76rem; color: var(--ink-faint);
  margin-top: .1rem;
}
/* Quien paga es la mitad de la respuesta que nadie da. */
.cb-paga { color: var(--ink) !important; }

.cb-tabla--ley { min-width: 30rem; }
.cb-tabla--ley tbody td:nth-child(2) { color: var(--ink); white-space: nowrap; }
.cb-tabla--ley tbody td:last-child { font-size: .82rem; color: var(--ink-faint); }

.cb-convenio {
  margin: 1.1rem 0 0; padding: .85rem .95rem;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-s); background: var(--accent-tint);
  font-size: .89rem; color: var(--ink-soft);
}
.cb-convenio strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.cb-avisos {
  margin-top: 1rem; padding: .85rem .95rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface-2);
  font-size: .87rem; color: var(--ink-soft);
}
.cb-avisos-titulo {
  margin: 0 0 .4rem; font-weight: 600; color: var(--ink-faint);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
}
.cb-avisos ul { margin: 0; padding-left: 1.1rem; }
.cb-avisos li + li { margin-top: .35rem; }
.cb-avisos strong { color: var(--ink); }

.cb-privacidad { margin-top: 1.1rem; }

@media (max-width: 30rem) {
  .cb-tabla { font-size: .82rem; }
  .cb-tabla th, .cb-tabla td { padding: .5rem .55rem .5rem 0; }
}

/* ==========================================================================
   66. Precio por kilo, por litro y por unidad
   Aqui se compara, y comparar exige que las cosas comparadas se vean IGUALES.
   Los cuatro productos van en cajas identicas, sin numero destacado ni color
   propio: el formulario no puede insinuar un ganador antes de que haya
   cifras. El unico acento de la pagina se guarda para la caja del vuelco,
   que es lo que no publica ningun otro comparador: que contando el envase
   entero ganaria otro producto. Si esa caja compitiera en color con el
   resto, el argumento se perderia entre cajas de aviso.
   Cinco campos por producto no se leen seguidos a 375 px, asi que cada
   producto es un fieldset con su rotulo y su propia rejilla interna: una
   columna en movil, dos en cuanto caben. El .tool-form del sitio es de dos
   columnas a todos los anchos, de modo que hay que devolverlo a una a mano.
   El peso escurrido ocupa la fila entera aunque sea un campo corto, porque
   es el campo que cambia el resultado y no puede parecer el ultimo detalle.
   La fila ganadora se marca con un borde a la izquierda y una etiqueta de
   texto, no solo con color: el color solo no se lee en escala de grises ni
   con daltonismo, y aqui el ganador es toda la respuesta.
   ========================================================================== */
.tool-form--pk { grid-template-columns: 1fr; gap: .8rem; }
@media (min-width: 34rem) {
  .tool-form--pk { grid-template-columns: 1fr 1fr; }
}
.tool-form--pk .field--wide { grid-column: 1 / -1; }
.tool-form--pk input { font-variant-numeric: tabular-nums; }

/* Cada producto, una caja igual que las demas. */
.pk-producto {
  margin: 0; padding: .8rem .9rem .95rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface-2);
  min-width: 0;
}
.pk-producto legend {
  padding: 0 .35rem; margin-left: -.35rem;
  font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-faint);
}
.pk-producto legend .label-soft { text-transform: none; letter-spacing: 0; }

.pk-campos {
  display: grid; grid-template-columns: 1fr; gap: .7rem .8rem;
}
@media (min-width: 30rem) {
  .pk-campos { grid-template-columns: 1fr 1fr; }
  .pk-campo-escurrido { grid-column: 1 / -1; }
}

.pk-salida { margin-top: 1.2rem; }

.pk-resumen { margin: 0 0 1rem; font-size: .95rem; color: var(--ink-soft); }
.pk-resumen strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.pk-cifra {
  padding: 1rem 0 .9rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pk-rotulo {
  margin: 0 0 .2rem; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint);
}
.pk-valor {
  margin: 0; font-family: var(--display);
  font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* El unico acento de la pagina: el ganador cambia al contar el escurrido. */
.pk-vuelco {
  margin-top: 1.1rem; padding: .9rem 1rem;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-s); background: var(--accent-tint);
  font-size: .89rem; color: var(--ink-soft);
}
.pk-vuelco-titulo {
  margin: 0 0 .45rem; font-weight: 600; color: var(--accent);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
}
.pk-vuelco p { margin: 0; }
.pk-vuelco strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.pk-titulo-tabla {
  margin: 1.4rem 0 .6rem; font-family: var(--display);
  font-size: 1.05rem; line-height: 1.2; color: var(--ink);
}

.pk-tabla {
  width: 100%; border-collapse: collapse; min-width: 32rem;
  font-size: .88rem; font-variant-numeric: tabular-nums;
}
.pk-tabla th, .pk-tabla td {
  text-align: left; vertical-align: top;
  padding: .55rem .8rem .55rem 0;
  border-bottom: 1px solid var(--line);
}
.pk-tabla thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 600;
}
.pk-tabla tbody th { font-weight: 600; color: var(--ink); }
.pk-tabla tbody td { color: var(--ink-soft); }
/* El precio por unidad de medida es la columna por la que se ha entrado. */
.pk-unitario { color: var(--ink) !important; font-weight: 600; }

/* El ganador: borde y palabra, no solo color. */
.pk-fila-mejor th { box-shadow: inset 3px 0 0 var(--accent); padding-left: .7rem; }
.pk-medalla {
  display: inline-block; margin-left: .3rem;
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--accent); white-space: nowrap;
}

/* El escurrido, debajo de la cantidad: es contexto de la cifra de al lado. */
.pk-esc {
  display: block; font-size: .76rem; color: var(--ink-faint);
  margin-top: .1rem;
}
.pk-esc--off { font-style: italic; }

.pk-dinero {
  margin: 1rem 0 0; padding: .85rem .95rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface-2);
  font-size: .89rem; color: var(--ink-soft);
}
.pk-dinero strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.pk-avisos {
  margin-top: 1rem; padding: .85rem .95rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface-2);
  font-size: .87rem; color: var(--ink-soft);
}
.pk-avisos-titulo {
  margin: 0 0 .4rem; font-weight: 600; color: var(--ink-faint);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
}
.pk-avisos ul { margin: 0; padding-left: 1.1rem; }
.pk-avisos li + li { margin-top: .35rem; }
.pk-avisos strong { color: var(--ink); }

.pk-privacidad { margin-top: 1.1rem; }

@media (max-width: 30rem) {
  .pk-tabla { font-size: .82rem; }
  .pk-tabla th, .pk-tabla td { padding: .5rem .55rem .5rem 0; }
}

/* ==========================================================================
   67. Edad del perro (y del gato) en anos humanos
   El problema de diseno de esta pagina es uno solo: ensenar un INTERVALO sin
   que se lea como un numero unico. Todo lo demas se ha subordinado a eso.
   - Los dos extremos van con EXACTAMENTE el mismo tamano, el mismo peso y el
     mismo color. En cuanto uno es mas grande que el otro, el ojo lo lee como
     «la» respuesta y al otro como una nota al pie, que es justo el error que
     esta pagina existe para no cometer.
   - Debajo de cada extremo va SU explicacion, distinta de la del otro. Dos
     numeros iguales con dos pies distintos no se pueden confundir con uno.
   - Entre los dos hay una «y», no un guion: un guion entre cifras se lee como
     un rango de tabla y se ignora; una palabra obliga a leer los dos lados.
   - La mediana y la cifra que dan las demas webs van DEBAJO y en cuerpo de
     texto, mas pequenas que el intervalo. Son contexto, no el resultado, y
     ponerlas grandes devolveria la pagina al numero unico.
   - En movil los dos extremos se apilan y la «y» se queda entre ellos como
     bisagra, con su propia linea, para que el apilado siga siendo una frase.
   .tool-form es de dos columnas a todos los anchos, asi que aqui se vuelve de
   una y solo se parte en dos a partir de 34rem. Las tablas llevan min-width y
   hacen scroll dentro de .tabla-envoltorio.
   ========================================================================== */
.tool-form--edad { grid-template-columns: 1fr; }
@media (min-width: 34rem) {
  .tool-form--edad { grid-template-columns: 1fr 1fr; }
}
.tool-form--edad .field--ancho { grid-column: 1 / -1; }
.tool-form--edad input { font-variant-numeric: tabular-nums; }

.ep-salida { margin-top: 1.2rem; }

.ep-resumen { margin: 0 0 1rem; font-size: .95rem; color: var(--ink-soft); }
.ep-resumen strong { color: var(--ink); }

/* El intervalo. Es el resultado entero de la pagina. */
.ep-rango {
  padding: 1rem 0 1.1rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ep-rotulo {
  margin: 0 0 .6rem; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint);
}
.ep-extremos {
  display: flex; flex-direction: column; gap: .5rem;
}
@media (min-width: 34rem) {
  .ep-extremos { flex-direction: row; align-items: flex-start; gap: 1rem; }
  /* Las dos mitades reparten el ancho a partes iguales: si una fuera mas
     ancha volveria a haber una principal y una secundaria. */
  .ep-extremos .ep-extremo { flex: 1 1 0; }
}
.ep-extremo { min-width: 0; }
.ep-num {
  margin: 0; font-family: var(--display);
  font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ep-quien {
  margin: .3rem 0 0; font-size: .85rem; line-height: 1.45; color: var(--ink-soft);
}
.ep-quien strong { color: var(--ink); }
/* La bisagra. En movil ocupa su linea; en escritorio se alinea con las
   cifras, no con los pies, que es donde el ojo la busca. */
.ep-union {
  margin: 0; font-size: .95rem; color: var(--ink-faint);
  align-self: flex-start; padding-top: .55rem;
}

/* Contexto, deliberadamente en cuerpo de texto. */
.ep-centro { margin: 1rem 0 0; font-size: .92rem; color: var(--ink-soft); }
.ep-centro strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.ep-otras {
  margin: .7rem 0 0; padding: .8rem .95rem;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-s); background: var(--accent-tint);
  font-size: .89rem; color: var(--ink-soft);
}
.ep-otras strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.ep-titulo-tabla {
  margin: 1.5rem 0 .6rem; font-family: var(--display);
  font-size: 1.05rem; line-height: 1.2; color: var(--ink);
}

.ep-tabla {
  width: 100%; border-collapse: collapse; min-width: 28rem;
  font-size: .88rem; font-variant-numeric: tabular-nums;
}
.ep-tabla th, .ep-tabla td {
  text-align: left; vertical-align: top;
  padding: .55rem .8rem .55rem 0;
  border-bottom: 1px solid var(--line);
}
.ep-tabla thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 600;
}
.ep-tabla tbody th { font-weight: 600; color: var(--ink); }
.ep-tabla tbody td { color: var(--ink-soft); white-space: nowrap; }
/* La columna de la equivalencia es la que se busca al bajar la vista. */
.ep-tabla .ep-eq { color: var(--ink); font-weight: 600; }

.ep-tabla--tallas { min-width: 34rem; }
.ep-tabla--razas { min-width: 30rem; }

.ep-avisos {
  margin-top: 1.1rem; padding: .85rem .95rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface-2);
  font-size: .87rem; color: var(--ink-soft);
}
.ep-avisos-titulo {
  margin: 0 0 .4rem; font-weight: 600; color: var(--ink-faint);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
}
.ep-avisos ul { margin: 0; padding-left: 1.1rem; }
.ep-avisos li + li { margin-top: .35rem; }
.ep-avisos strong { color: var(--ink); }

.ep-pie { margin: .9rem 0 0; font-size: .8rem; color: var(--ink-faint); }
.ep-privacidad { margin-top: 1.1rem; }

@media (max-width: 30rem) {
  .ep-tabla { font-size: .82rem; }
  .ep-tabla th, .ep-tabla td { padding: .5rem .55rem .5rem 0; }
}

/* ==========================================================================
   68. Modelo 130: el pago fraccionado del IRPF
   Aqui el problema de diseno no es ensenar una cifra: es que LA RESTA ES EL
   RESULTADO. La pregunta que trae a la gente ("me sale cero y he ganado
   dinero") no se contesta con un numero grande, se contesta ensenando de
   donde sale ese numero. Por eso la escalera y la cifra final son UN SOLO
   bloque: los pasos no van debajo del resultado como un anexo plegable, van
   encima y desembocan en el, separados por la misma raya doble que se usa
   en una suma a mano. Si la cifra grande flotara arriba y la resta quedara
   abajo, la pagina volveria a ser lo que ya hay en el buscador.
   Cada paso lleva su articulo en columna propia y en tono apagado: es lo
   que separa esta pagina de una hoja de calculo, y va en todas las lineas
   aunque se repita, porque el lector entra por cualquiera de ellas.
   La linea del rendimiento neto y la del 20 % van resaltadas: son las dos
   unicas que no son una resta, y sin ese contraste la escalera se lee como
   una lista plana de siete restas iguales.
   .tool-form es de dos columnas a todos los anchos, asi que aqui se vuelve
   de una a mano y solo se reparte a partir de 34rem. Los desplegables
   llevan letra mas pequena porque las opciones nombran la actividad entera
   ("Actividad profesional en estimacion directa") y truncarlas perderia
   justo la parte que decide si se restan las retenciones o no.
   ========================================================================== */
.tool-form--m130 { grid-template-columns: 1fr; }
@media (min-width: 34rem) {
  .tool-form--m130 { grid-template-columns: 1fr 1fr; }
}
.tool-form--m130 .field--ancho { grid-column: 1 / -1; }
.tool-form--m130 input { font-variant-numeric: tabular-nums; }
.tool-form--m130 select { font-size: .84rem; padding-left: .5rem; padding-right: .2rem; }
.tool-form--m130 .unit { padding-right: .45rem; }

/* El rotulillo que parte el formulario en dos: arriba lo que se calcula,
   abajo lo que solo sirve para saber si hay obligacion. Sin el, los cinco
   campos del final parecen parte de la cuenta y no lo son. */
.m130-grupo {
  margin: .35rem 0 0; padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-size: .74rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-faint);
}

.m130-salida { margin-top: 1.2rem; }

.m130-resumen { margin: 0 0 1rem; font-size: .95rem; color: var(--ink-soft); }
.m130-resumen strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.m130-titulo {
  margin: 1.3rem 0 .3rem; font-family: var(--display);
  font-size: 1.05rem; line-height: 1.2; color: var(--ink);
}

/* La escalera y la cifra final son el mismo bloque a proposito. */
.m130-escalera {
  border-top: 1px solid var(--line);
}
.m130-pasos { margin: 0; padding: 0; list-style: none; }

.m130-paso {
  display: grid;
  gap: .1rem .55rem;
  grid-template-columns: 1.1rem minmax(0, 1fr) auto;
  grid-template-areas:
    "signo concepto importe"
    ".     art      art";
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
}
@media (min-width: 34rem) {
  .m130-paso {
    grid-template-columns: 1.1rem minmax(0, 1fr) auto auto;
    grid-template-areas: "signo concepto art importe";
    align-items: baseline;
  }
}

.m130-signo {
  grid-area: signo;
  color: var(--ink-faint); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.m130-concepto { grid-area: concepto; color: var(--ink-soft); }
.m130-art {
  grid-area: art; color: var(--ink-faint);
  font-size: .78rem; white-space: nowrap;
}
@media (min-width: 34rem) {
  .m130-art { padding-right: .9rem; }
}
.m130-importe {
  grid-area: importe; text-align: right;
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* La nota de una linea concreta (por que no se restan las retenciones, que
   parte de la minoracion se arrastra). Va debajo del concepto, apagada. */
.m130-nota {
  display: block; margin-top: .15rem;
  font-size: .79rem; color: var(--ink-faint);
}

/* Las dos lineas que no son una resta: el neto y el 20 %. */
.m130-paso--total .m130-concepto,
.m130-paso--total .m130-importe { color: var(--ink); font-weight: 600; }

/* La raya doble de una suma a mano: aqui termina la resta y empieza el
   resultado, pero sin salirse del mismo bloque. */
.m130-final {
  padding: .95rem 0 .1rem;
  border-top: 2px solid var(--line-strong);
}
.m130-rotulo {
  margin: 0 0 .2rem; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint);
}
.m130-valor {
  margin: 0; font-family: var(--display);
  font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.m130-sub { margin: .5rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.m130-sub strong { color: var(--ink); }

/* La obligacion no es un aviso menor: es media respuesta, y va con acento
   propio porque contesta una pregunta distinta a la de la cifra. */
.m130-obligacion {
  margin-top: 1.2rem; padding: .9rem 1rem;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-s); background: var(--accent-tint);
  font-size: .89rem; color: var(--ink-soft);
}
.m130-obligacion-titulo {
  margin: 0 0 .45rem; font-weight: 600; color: var(--accent);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
}
.m130-obligacion p { margin: 0; }
.m130-obligacion strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.m130-avisos {
  margin-top: 1rem; padding: .85rem .95rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface-2);
  font-size: .87rem; color: var(--ink-soft);
}
.m130-avisos-titulo {
  margin: 0 0 .4rem; font-weight: 600; color: var(--ink-faint);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
}
.m130-avisos ul { margin: 0; padding-left: 1.1rem; }
.m130-avisos li + li { margin-top: .35rem; }
.m130-avisos strong { color: var(--ink); }

.m130-privacidad { margin-top: 1.1rem; }

/* Las tablas de la guia. Van dentro de .tabla-envoltorio, asi que el
   min-width no desborda la pagina: hace scroll dentro de su caja. */
.m130-tabla {
  width: 100%; border-collapse: collapse;
  font-size: .88rem; font-variant-numeric: tabular-nums;
}
.m130-tabla th, .m130-tabla td {
  text-align: left; vertical-align: top;
  padding: .55rem .8rem .55rem 0;
  border-bottom: 1px solid var(--line);
}
.m130-tabla thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 600;
}
.m130-tabla tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.m130-tabla tbody td { color: var(--ink-soft); white-space: nowrap; }
.m130-tabla--anual { min-width: 38rem; }
/* La columna del resultado es la que se va a mirar: se le da el tono del
   texto principal para que gane a las cuatro de al lado. */
.m130-tabla--anual tbody td:last-child { color: var(--ink); font-weight: 600; }
.m130-tabla--equilibrio { min-width: 38rem; }
.m130-tabla--equilibrio tbody td:last-child { color: var(--ink); font-weight: 600; }
.m130-tabla--minoracion { min-width: 22rem; }
.m130-tabla--minoracion tbody td { color: var(--ink); }

@media (max-width: 30rem) {
  .m130-tabla { font-size: .83rem; }
  .m130-tabla th, .m130-tabla td { padding: .5rem .55rem .5rem 0; }
}

/* ==========================================================================
   69. Calorias del alcohol: por que no vienen en la lata
   El problema de diseno aqui no es ensenar una cifra grande, es que LA CIFRA
   SOLA ES LA RESPUESTA EQUIVOCADA. Quien busca «calorias de una cerveza» ya
   ha visto diez paginas con un numero suelto; lo que no ha visto es que ese
   numero se parte en dos, y que la parte que no es alcohol es casi un tercio.
   Por eso la cifra grande y la tabla del desglose son UN SOLO bloque, sin
   raya ni caja entre medias: el numero desemboca en el reparto en vez de
   quedarse arriba como titular. Si el desglose fuera un plegable, la pagina
   volveria a ser lo que ya hay en el buscador.
   La columna del factor va en tono apagado y en versalitas de tamano menor:
   es la pieza de ley que hace el trabajo (× 7 kcal/g), tiene que verse en
   todas las filas porque es lo que distingue esta cuenta de una tabla
   nutricional cualquiera, pero no puede competir con los gramos ni con las
   kilocalorias, que son lo que se lee.
   La caja del regimen de etiquetado lleva acento propio y va DEBAJO del
   desglose, no arriba: contesta una pregunta distinta —por que esto no viene
   en el envase— y sus tres ramas son tres textos enteros, no un texto con una
   palabra cambiada, asi que necesita sitio para respirar. La fila del
   refresco se marca aparte porque es la unica del desglose que no sale de un
   factor del anexo XIV sino de la etiqueta de otro producto.
   Los huecos declarados van con el mismo peso tipografico que el resto de la
   guia y con una barra a la izquierda: son contenido, no letra pequena.
   .tool-form es de dos columnas a todos los anchos, asi que aqui se vuelve de
   una a mano y solo se reparte a partir de 34rem: a 375 px los siete campos
   en dos columnas dejarian «Proteinas por 100 ml» partido en tres lineas.
   Las cuatro tablas son anchas (la de BEDCA tiene siete columnas) y van
   dentro de .tabla-envoltorio: hacen scroll dentro de su caja, no empujando
   la pagina.
   ========================================================================== */
.tool-form--kcal { grid-template-columns: 1fr; }
@media (min-width: 34rem) {
  .tool-form--kcal { grid-template-columns: 1fr 1fr; }
}
.tool-form--kcal .field--ancho { grid-column: 1 / -1; }
.tool-form--kcal input { font-variant-numeric: tabular-nums; }
.tool-form--kcal select { font-size: .92rem; padding-left: .55rem; padding-right: .2rem; }
.tool-form--kcal .unit { padding-right: .5rem; font-size: .85rem; }

.kcal-salida { margin-top: 1.2rem; }

/* La cifra y el desglose son el mismo bloque a proposito. */
.kcal-cifra { padding-bottom: .2rem; }
.kcal-rotulo {
  margin: 0 0 .2rem; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint);
}
.kcal-valor {
  margin: 0; font-family: var(--display);
  font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.kcal-reparto { margin: .7rem 0 1rem; font-size: .95rem; color: var(--ink-soft); }
.kcal-reparto strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* --- Las tablas: la del desglose y las tres de la guia --- */
.kcal-tabla {
  width: 100%; border-collapse: collapse;
  font-size: .88rem; font-variant-numeric: tabular-nums;
}
.kcal-tabla th, .kcal-tabla td {
  text-align: left; vertical-align: top;
  padding: .55rem .8rem .55rem 0;
  border-bottom: 1px solid var(--line);
}
.kcal-tabla thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 600;
}
.kcal-tabla tbody th { font-weight: 600; color: var(--ink); }
.kcal-tabla tbody td { color: var(--ink-soft); white-space: nowrap; }
/* La columna de la derecha es la que se mira: gana a las de al lado. */
.kcal-tabla tbody td:last-child { color: var(--ink); font-weight: 600; }

/* El factor del anexo XIV. Se ve en todas las filas porque es lo que hace
   distinta a esta cuenta, pero no compite con las cifras. */
.kcal-factor {
  color: var(--ink-faint); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em;
}

/* La unica fila que no sale de un factor del reglamento: la escribe el
   visitante leyendo la lata del refresco. Se tine y se separa con raya
   discontinua para que se vea de un vistazo que esa cifra tiene otro
   origen que las tres de arriba. */
.kcal-fila-mezcla { background: var(--surface-2); }
.kcal-fila-mezcla th, .kcal-fila-mezcla td { border-top: 1px dashed var(--line); }

.kcal-tabla--bedca { min-width: 46rem; }
.kcal-tabla--consumiciones { min-width: 40rem; }
.kcal-tabla--factores { min-width: 20rem; }

.kcal-formula {
  margin: .9rem 0 0; font-size: .87rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.kcal-formula strong { color: var(--ink); }

/* El regimen de etiquetado: contesta otra pregunta, asi que lleva su propio
   acento. Sus tres ramas son tres textos enteros. */
.kcal-etiqueta {
  margin-top: 1.2rem; padding: .9rem 1rem;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-s); background: var(--accent-tint);
  font-size: .89rem; color: var(--ink-soft);
}
.kcal-etiqueta strong { color: var(--ink); }

.kcal-nota {
  margin-top: .9rem; padding: .7rem .9rem;
  border: 1px dashed var(--line); border-radius: var(--radius-s);
  font-size: .85rem; color: var(--ink-faint);
}
.kcal-nota p { margin: 0; }

.kcal-avisos {
  margin-top: 1rem; padding: .85rem .95rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface-2);
  font-size: .87rem; color: var(--ink-soft);
}
.kcal-avisos-titulo {
  margin: 0 0 .4rem; font-weight: 600; color: var(--ink-faint);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
}
.kcal-avisos ul { margin: 0; padding-left: 1.1rem; }
.kcal-avisos li + li { margin-top: .35rem; }
.kcal-avisos strong { color: var(--ink); }

.kcal-privacidad { margin-top: 1.1rem; }

/* Los huecos declarados: mismo peso que el resto de la guia y barra propia.
   Son contenido, no un descargo en gris al pie. */
.kcal-huecos { margin: 1rem 0 0; padding: 0; list-style: none; }
.kcal-huecos li {
  margin: 0 0 .7rem; padding-left: .9rem;
  border-left: 2px solid var(--line-strong);
}
.kcal-huecos strong { color: var(--ink); }

@media (max-width: 30rem) {
  .kcal-tabla { font-size: .83rem; }
  .kcal-tabla th, .kcal-tabla td { padding: .5rem .55rem .5rem 0; }
}

/* ==========================================================================
   70. IRPF del alquiler para el casero: la fecha parte el resultado en dos
   El formulario es secuencial, no una rejilla de campos sueltos: la fecha
   decide si el bloque de condiciones de la escala nueva tiene sentido, y ese
   bloque se oculta entero (no se deshabilita, se quita) cuando el contrato es
   de antes del 26 de mayo de 2023, porque mostrarlo sugeriria que esas
   casillas pueden cambiar un resultado que la disposicion transitoria ya ha
   fijado. Por eso una sola columna, de arriba abajo, en vez de las dos
   columnas habituales de .tool-form: aqui el orden de lectura importa mas que
   aprovechar el ancho.
   El caso de "zona gris" (contratos de entre el 26 de mayo y el 31 de
   diciembre de 2023) no reusa la caja de resultado normal a proposito: no es
   una variacion del mismo mensaje, es la pagina reconociendo que la ley se
   contradice y que no va a elegir por el visitante. Lleva su propio acento
   (el color de aviso, no el de acento normal) para que no se lea como un
   resultado mas.
   ========================================================================== */
.tool-form--irpf { grid-template-columns: 1fr; }

.irpf-condiciones {
  margin: 0; padding: .9rem 1rem; border: 1px solid var(--line);
  border-radius: var(--radius-s); background: var(--surface-2);
}
.irpf-condiciones legend {
  padding: 0 .3rem; font-size: .78rem; font-weight: 600;
  color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em;
}
.irpf-check {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .89rem; color: var(--ink-soft); cursor: pointer;
}
.irpf-check + .irpf-check { margin-top: .7rem; }
.irpf-check input { margin-top: .2rem; flex-shrink: 0; width: 1.05rem; height: 1.05rem; }

.irpf-salida { margin-top: 1.2rem; }
.irpf-fecha-rotulo { margin: 0 0 .6rem; font-size: .87rem; color: var(--ink-faint); }
.irpf-fecha-rotulo strong { color: var(--ink-soft); }

.irpf-cifra { display: flex; align-items: baseline; gap: .5rem; padding-bottom: .2rem; }
.irpf-valor {
  margin: 0; font-family: var(--display);
  font-size: clamp(2rem, 8vw, 2.8rem); line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.irpf-etiqueta { margin: 0; font-size: .95rem; color: var(--ink-faint); }

.irpf-motivo { margin: .6rem 0 0; font-size: .92rem; color: var(--ink-soft); }
.irpf-motivo strong { color: var(--ink); }

.irpf-euros {
  margin-top: 1rem; padding: .85rem .95rem;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-s); background: var(--accent-tint);
  font-size: .89rem; color: var(--ink-soft);
}
.irpf-euros p { margin: 0; }
.irpf-euros strong { color: var(--ink); }

.irpf-aviso {
  margin-top: 1rem; padding: .85rem .95rem;
  border: 1px solid var(--line); border-left: 3px solid var(--warm);
  border-radius: var(--radius-s); background: var(--surface-2);
  font-size: .89rem; color: var(--ink-soft);
}

/* El caso sin veredicto. Mismo peso visual que el resultado normal: no es
   un descargo pequeno al pie, es la respuesta que le toca a este contrato. */
.irpf-gris {
  padding: .95rem 1.05rem;
  border: 1px solid var(--line); border-left: 3px solid var(--warm);
  border-radius: var(--radius-s); background: var(--surface-2);
}
.irpf-gris p { margin: 0 0 .6rem; font-size: .92rem; color: var(--ink-soft); }
.irpf-gris ul { margin: 0 0 .6rem; padding-left: 1.1rem; }
.irpf-gris li { font-size: .89rem; color: var(--ink-soft); margin-bottom: .3rem; }
.irpf-gris strong { color: var(--ink); }
.irpf-gris .irpf-aviso { margin-top: 0; }
.irpf-gris > p:last-child { margin-bottom: 0; }

.irpf-privacidad { margin-top: 1.1rem; }

.irpf-tabla {
  width: 100%; border-collapse: collapse; font-size: .89rem; min-width: 34rem;
}
.irpf-tabla th, .irpf-tabla td {
  text-align: left; vertical-align: top;
  padding: .7rem .9rem .7rem 0; border-bottom: 1px solid var(--line);
}
.irpf-tabla thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 600;
}
.irpf-tabla tbody th {
  font-weight: 600; color: var(--ink); width: 14%;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.irpf-tabla tbody td { color: var(--ink-soft); }

@media (max-width: 30rem) {
  .irpf-tabla { font-size: .83rem; }
  .irpf-tabla th, .irpf-tabla td { padding: .55rem .5rem .55rem 0; }
}

/* ===================================================================

   71. Tiempo de carga de un coche electrico: enchufe, wallbox y rapido
   El motivo de la pagina es que EL LIMITANTE, no la cifra grande, es lo que
   hay que ensenar primero: casi toda la competencia divide kWh entre kW y
   calla que el coche puede ser el que frena, no la instalacion. Por eso la
   caja «Manda tu coche / manda la instalacion» va justo debajo de la cifra,
   con el mismo peso visual que ella, y no metida entre los avisos de abajo
   donde nadie la lee.
   El formulario reusa el patron de dos columnas de .tool-form (34rem), como
   el resto del sitio, con un campo ancho para el selector de modo porque sus
   seis opciones no caben en media columna a 375 px sin partirse.
   La nota bajo el selector (id="nota-potencia-punto") cambia de texto por
   JS segun el modo: en carga rapida no hay ITC-BT-52 que citar, hay un
   poste, y decir lo contrario seria la cifra inventada que esta casa
   prohibe. Por eso lleva su propio parrafo y no una frase fija en el HTML.
   ========================================================================== */
.tool-form--carga { grid-template-columns: 1fr; }
@media (min-width: 34rem) {
  .tool-form--carga { grid-template-columns: 1fr 1fr; }
}
.tool-form--carga .field--ancho { grid-column: 1 / -1; }
.tool-form--carga input { font-variant-numeric: tabular-nums; }
.tool-form--carga select { font-size: .92rem; padding-left: .55rem; padding-right: .2rem; }
.tool-form--carga .unit { padding-right: .5rem; font-size: .85rem; }

.carga-salida { margin-top: 1.2rem; }

.carga-cifra { padding-bottom: .2rem; }
.carga-rotulo {
  margin: 0 0 .2rem; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint);
}
.carga-valor {
  margin: 0; font-family: var(--display);
  font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.carga-cuenta {
  margin: .7rem 0 0; font-size: .87rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* La caja del limitante: contesta la pregunta de verdad («por que tarda
   esto») y por eso lleva el mismo acento que .kcal-etiqueta en la otra
   calculadora que tambien senala una norma por encima de la cifra. */
.carga-limitante {
  margin-top: 1rem; padding: .9rem 1rem;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-s); background: var(--accent-tint);
  font-size: .89rem; color: var(--ink-soft);
}
.carga-limitante strong { color: var(--ink); }

.carga-avisos {
  margin-top: 1rem; padding: .85rem .95rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface-2);
  font-size: .87rem; color: var(--ink-soft);
}
.carga-avisos-titulo {
  margin: 0 0 .4rem; font-weight: 600; color: var(--ink-faint);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
}
.carga-avisos ul { margin: 0; padding-left: 1.1rem; }
.carga-avisos li + li { margin-top: .35rem; }
.carga-avisos strong { color: var(--ink); }

.carga-privacidad { margin-top: 1.1rem; }

.carga-tabla {
  width: 100%; border-collapse: collapse;
  font-size: .88rem; font-variant-numeric: tabular-nums;
}
.carga-tabla th, .carga-tabla td {
  text-align: left; vertical-align: top;
  padding: .55rem .8rem .55rem 0;
  border-bottom: 1px solid var(--line);
}
.carga-tabla thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 600;
}
.carga-tabla tbody th { font-weight: 600; color: var(--ink); }
.carga-tabla tbody td { color: var(--ink-soft); white-space: nowrap; }
.carga-tabla tbody td:last-child { color: var(--ink); font-weight: 600; }
.carga-tabla--ejemplos { min-width: 38rem; }

.carga-huecos { margin: 1rem 0 0; padding: 0; list-style: none; }
.carga-huecos li {
  margin: 0 0 .7rem; padding-left: .9rem;
  border-left: 2px solid var(--line-strong);
}
.carga-huecos strong { color: var(--ink); }

@media (max-width: 30rem) {
  .carga-tabla { font-size: .83rem; }
  .carga-tabla th, .carga-tabla td { padding: .5rem .55rem .5rem 0; }
}

/* ==========================================================================
   72. Número de semana (ISO 8601)
   No hace falta casi nada propio: el formulario reutiliza .tool-form--fechas
   y .mini-boton de la sección 32 (días entre dos fechas), el resultado usa
   .result / .result-stats / .fechas-aviso tal cual, y el calendario de
   semanas del año es una .amort-table--desglose dentro de .table-scroll,
   igual que el desglose de esa misma calculadora. Lo único propio es marcar
   la fila de la semana actual, y eso ya lo hace .amort-table tr.row-actual.
   ========================================================================== */
@media (max-width: 420px) {
  /* Tres columnas de fecha larga («29 de diciembre de 2025») no caben a
     375 px sin encoger la tipografía: por debajo de eso la tabla haría
     scroll horizontal dentro de .table-scroll en vez de desbordar la
     página, pero se lee mejor si primero se prueba a encoger. */
  #calendario .amort-table--desglose { font-size: .8rem; }
  #calendario .amort-table--desglose th, #calendario .amort-table--desglose td {
    padding: .45rem .5rem;
  }
}

/* ==========================================================================
   73. Coste de cargar un coche eléctrico y coste por 100 km
   Seis campos —tres del lado eléctrico y tres del de comparación— así que
   se reutiliza el grid de dos columnas de .tool-form tal cual viene por
   defecto: a 375 px ya se ha probado en coste-viaje-coche con la misma
   cantidad de campos y no desborda. Lo único propio de esta página es
   ensancharla a tres columnas a partir de 760 px, igual que allí, y que la
   unidad de "consumo eléctrico" es más larga (kWh/100 km) y necesita algo
   más de sitio para no partirse.
   ========================================================================== */
.tool-form--cce { max-width: 40rem; }
.tool-form--cce input { font-variant-numeric: tabular-nums; }
.tool-form--cce .unit { font-size: .82rem; padding-right: .55rem; }

@media (min-width: 760px) {
  .tool-form--cce { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 48rem; }
}

/* ==========================================================================
   74. El indice de la portada: todas las calculadoras, en texto
   Debajo de las destacadas y de las seis puertas de familia hay una lista
   completa. No repite el trabajo de las tarjetas: las tarjetas venden y esto
   ordena, asi que va en texto pelado, en columnas, y ocupa poco. Se puso el
   12/9/2026 porque la portada enlazaba a catorce direcciones de las 171 del
   sitio y Google tenia 106 paginas descubiertas y sin rastrear.
   Las columnas se hacen con `columns` y no con grid a proposito: una lista
   de nombres de longitud desigual se reparte mejor por altura que por
   celdas, y a 375 px se queda en una sola columna sin ninguna media query.
   ========================================================================== */
.hub-indice { margin-top: 3rem; }

.indice-grupo { margin-top: 1.6rem; }

.indice-grupo-titulo {
  margin: 0 0 .6rem;
  font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft);
}
.indice-grupo-titulo a { color: inherit; text-decoration: none; }
.indice-grupo-titulo a:hover { color: var(--accent); text-decoration: underline; }

.indice-lista {
  margin: 0; padding: 0; list-style: none;
  columns: 14rem auto; column-gap: 2rem;
}
.indice-lista li {
  break-inside: avoid;
  margin: 0 0 .35rem;
  font-size: .92rem; line-height: 1.4;
}
.indice-lista a {
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.indice-lista a:hover,
.indice-lista a:focus-visible { color: var(--accent); border-bottom-color: currentColor; }

/* ==========================================================================
   75. Deficit calorico: en que fecha llegaras a tu peso
   Esta calculadora es hermana de calorias-diarias (mismo grupo salud, mismas
   constantes de TMB y de actividad) y reutiliza sus clases .cal-* tal cual:
   .cal-h1, .cal-card, .cal-resumen, .cal-rango, .cal-aviso, .cal-bloque,
   .cal-titulo, .cal-nota y las listas .savings-list del reparto. No hace
   falta una sola regla nueva porque el formulario tiene siete campos —uno
   mas que calorias-diarias— y el septimo (el deficit) ya es .field--wide,
   asi que cae solo en la fila siguiente tanto en el grid de 2 columnas de
   movil como en el de 4 columnas de escritorio (.tool-form--cal a partir de
   34rem): sexo/edad/peso/altura en la primera fila, objetivo/actividad y el
   deficit ocupando las dos columnas que le sobran en la segunda.
   Hay DOS avisos que pueden convivir a la vez —el suelo de seguridad y el
   peso inalcanzable—, y los dos son .cal-aviso: el margen superior de esa
   clase (.9rem) ya los separa uno de otro sin necesitar una regla mas.
   ========================================================================== */

/* ==========================================================================
   76. Dividir la cuenta: dos listas que crecen a la vez y se citan entre sí
   Esta calculadora tiene DOS listas dinámicas, no una: personas y gastos.
   Y no son independientes, porque cada gasto necesita elegir su pagador y
   sus participantes de ENTRE las personas actuales. La decisión de diseño
   es no mantener un modelo de JS aparte del DOM (que se podría
   desincronizar) sino reconstruir, en cada recálculo, el <select> de
   pagador y las casillas de participantes de cada gasto a partir de las
   personas que haya en ese momento, conservando lo que ya estaba marcado.
   Por eso las personas van en chips compactos en línea (caben muchas sin
   ocupar una tarjeta entera cada una) y los gastos van en tarjetas
   apiladas, porque cada uno lleva cuatro campos más su fila de casillas.
   A 375 px todo se apila en una columna; la fila de un gasto solo pasa a
   ser una línea horizontal a partir de 34rem, que es donde ya caben sin
   que la descripción se coma el importe.
   Reutiliza .field, .input-wrap, .tabla-envoltorio; el patrón de "cruz de
   quitar" y "botón añadir con borde discontinuo" es el mismo que la
   sección 43 (nota media), con prefijo .dc-* en vez de .nm-*.
   ========================================================================== */

.dc-bloque { margin-bottom: 1.5rem; max-width: 40rem; }
.dc-subtitulo {
  margin: 0 0 .6rem; font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint);
}

/* --- Las personas: chips en línea, no una tarjeta por persona --- */
.dc-lista-personas {
  list-style: none; margin: 0 0 .6rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.dc-persona {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2);
  padding-right: .15rem;
}
.dc-persona .field { margin: 0; }
.dc-persona .input-wrap { border: 0; background: none; }
.dc-persona input {
  width: 6.5rem; min-width: 0; border: 0; background: none; color: inherit;
  font: inherit; padding: .45rem .3rem .45rem .8rem;
}
.dc-persona input:focus { outline: none; }

/* --- Cruz de quitar y botón de añadir: compartidos por las dos listas --- */
.dc-quitar {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 1.8rem; height: 1.8rem; padding: 0;
  border: 0; border-radius: 999px;
  background: none; color: var(--ink-faint);
  cursor: pointer;
  transition: color .18s var(--ease-out), background .18s var(--ease-out);
}
.dc-quitar:hover:not(:disabled) { color: var(--warm); background: var(--surface); }
.dc-quitar:disabled { opacity: .3; cursor: default; }

.dc-anadir {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .1rem; padding: .45rem .8rem;
  border: 1px dashed var(--line); border-radius: var(--radius-s);
  background: none; color: var(--accent);
  font: inherit; font-size: .86rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out);
}
.dc-anadir:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-tint); }
.dc-anadir:disabled { opacity: .45; cursor: default; }

/* --- Los gastos: tarjetas apiladas, cada una con su fila de casillas --- */
.dc-lista-gastos { list-style: none; margin: 0 0 .7rem; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.dc-gasto {
  border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: .8rem .9rem; background: var(--surface);
}

.dc-gasto-linea { display: grid; grid-template-columns: 1fr; gap: .55rem; align-items: end; }
.dc-campo-desc, .dc-campo-importe, .dc-campo-pagador { margin: 0; }
.dc-gasto-linea .dc-quitar { justify-self: end; }

@media (min-width: 34rem) {
  .dc-gasto-linea {
    grid-template-columns: minmax(0, 1.3fr) 6.4rem minmax(0, 9rem) 2rem;
  }
}

/* Las casillas de "entre quiénes se reparte" se regeneran enteras en cada
   recálculo (ver el JS), así que no llevan más estado que el checked de
   cada una: no hace falta ningún estilo que dependa de su posición. */
.dc-participantes { border: 0; margin: .7rem 0 0; padding: .6rem 0 0; border-top: 1px dashed var(--line); }
.dc-participantes legend {
  padding: 0 0 .4rem; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-faint);
}
.dc-check { display: inline-flex; align-items: center; gap: .35rem; margin: 0 .9rem .4rem 0; font-size: .88rem; color: var(--ink-soft); }
.dc-check input { margin: 0; }

/* --- La salida: saldos y quién paga a quién --- */
.dc-salida { margin-top: 1.3rem; }
.dc-tabla { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.dc-tabla th, .dc-tabla td { text-align: left; padding: .55rem .8rem .55rem 0; border-bottom: 1px solid var(--line); }
.dc-tabla th { font-weight: 600; color: var(--ink); }
.dc-tabla td { color: var(--ink-soft); }

.dc-pagos { margin: .9rem 0; padding-left: 1.2rem; }
.dc-pagos li + li { margin-top: .4rem; }
.dc-pagos strong { color: var(--ink); }

.dc-garantia { margin: 0; font-size: .85rem; color: var(--ink-faint); }

/* En papel importan los saldos y los pagos, no los controles de edición. */
@media print { .dc-anadir, .dc-quitar { display: none !important; } }

@media (max-width: 30rem) {
  .dc-tabla { font-size: .85rem; }
  .dc-tabla th, .dc-tabla td { padding: .5rem .55rem .5rem 0; }
  .dc-gasto { padding: .7rem; }
}