/* tasas.css — reglas propias de esta herramienta (fase 1, 20-10-2026: salieron de herramientas.css).
   Se carga DETRÁS de herramientas.css, que trae los tokens --herr-* y las piezas comunes .lt-herr__*.
   Solo esta herramienta toca este fichero. */

/* =====================================================================
   Tasas e intereses (9 páginas: ES alquiler, interés legal, demora; AR inflación,
   tasa activa BNA, UVA/CER; CL reajuste IPC, UF, tasa máxima convencional).

   Se pega AL FINAL de herramientas.css. TODA regla de este bloque va bajo .lt-herr-tasas (la raíz de la
   página, del embebible y de la tarjeta) o usa el prefijo lt-herr-tasas__: la calculadora de días hábiles y
   las demás herramientas que comparten las clases lt-herr__* no cambian (I-3; lo vigila
   test_tasas_final.CssAcotadoTests). Todo lo de aquí es nuevo: lo que ya existe
   (pasos, tarjetas con punto, segmentado, resultado, cifras, notas «i», guía, CTA, barra
   fija) se reutiliza tal cual con sus clases lt-herr__*.

   Mismas reglas que el resto de la hoja: tokens --herr-* (que ya llevan su reserva para
   el embebible) y NADA de estilos en línea (el CSP no tiene 'unsafe-inline'). Las dos
   piezas que dependen de un dato numérico (la línea del dato del mes y la regla del
   veredicto) son SVG con atributos calculados en el servidor, no style="width:…".
   ===================================================================== */

.lt-herr-tasas {
  /* Colores nuevos, sin token en la web */
  --tasas-mal-bg: #FBEDEB;
  --tasas-mal-borde: #EFCBC5;
  --tasas-mal-ink: #9B2C2C;          /* 6,9:1 sobre --tasas-mal-bg */
  --tasas-usado-bg: #FFF4E5;         /* celda/fila que ha usado el cálculo */
  --tasas-num: tabular-nums;
}

/* Cifras de tablas, importes y porcentajes: siempre con dígitos de ancho fijo para que
   las columnas cuadren y un abogado pueda leerlas en vertical. */
.lt-herr-tasas__tabla td, .lt-herr-tasas__tabla th, .lt-herr-tasas__dato-cifra,
.lt-herr-tasas__importe .lt-herr__control, .lt-herr-tasas__veredicto-datos dd,
.lt-herr-tasas .lt-herr__cifras dd, .lt-herr-tasas .lt-herr__cifra { font-variant-numeric: tabular-nums; }

.lt-herr-tasas__h2 {
  margin: 0; font-family: var(--herr-font-head); font-size: clamp(24px, 2.8vw, 34px); font-weight: 700;
  line-height: 1.1; letter-spacing: -.02em; color: var(--herr-ink); text-wrap: balance;
}
.lt-herr-tasas__h3 {
  margin: 0; font-family: var(--herr-font-head); font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--herr-ink);
}

/* ---------------------------------------------------------------------
   1. Cabecera con el DATO DEL MES
   Orden en el DOM (= orden en móvil): H1, dato, entradilla, chips.
   En escritorio el dato pasa a la columna derecha, a la altura del H1.
   --------------------------------------------------------------------- */
.lt-herr-tasas__cabecera { gap: 16px; }
@media (min-width: 992px) {
  .lt-herr-tasas__cabecera {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(330px, 1fr); column-gap: 48px; row-gap: 14px;
    grid-template-areas: "h1 dato" "entradilla dato" "chips dato"; align-items: start; margin-bottom: 32px;
  }
  .lt-herr-tasas__cabecera > .lt-herr__h1 { grid-area: h1; align-self: end; }
  .lt-herr-tasas__cabecera > .lt-herr__entradilla { grid-area: entradilla; }
  .lt-herr-tasas__cabecera > .lt-herr__chips { grid-area: chips; }
  .lt-herr-tasas__cabecera > .lt-herr-tasas__dato { grid-area: dato; }
}

.lt-herr-tasas__dato {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px;
  margin: 0; padding: 18px 20px 16px; border: 1px solid var(--herr-border); border-radius: var(--herr-r-card);
  background: var(--herr-surface); box-shadow: 0 30px 60px -48px rgba(22, 32, 46, .5);
}
/* Un hilo rojo a la izquierda: es «la cifra oficial», distinta de «tu resultado» (que va en rojo) */
.lt-herr-tasas__dato::before {
  content: ''; position: absolute; left: -1px; top: 22px; bottom: 22px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--herr-primary);
}
.lt-herr-tasas__dato-titulo {
  grid-column: 1 / -1; margin: 0; font-family: var(--herr-font-body); font-size: 14px; font-weight: 700; line-height: 1.35;
  color: var(--herr-ink-soft);
}
.lt-herr-tasas__dato-cifra {
  grid-column: 1 / -1; align-self: end; display: flex; align-items: baseline; gap: 6px; margin: 2px 0 0;
  font-family: var(--herr-font-head); font-weight: 700; font-size: clamp(54px, 15vw, 76px); line-height: .95;
  letter-spacing: -.035em; color: var(--herr-ink);
}
.lt-herr-tasas__dato-unidad { font-size: .42em; font-weight: 600; letter-spacing: 0; color: var(--herr-primary); }
.lt-herr-tasas__dato-delta {
  grid-column: 1; margin: 6px 0 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--herr-text-2);
}
.lt-herr-tasas__dato-delta b { font-family: var(--herr-font-head); font-weight: 700; color: var(--herr-ink); }
/* Línea de los últimos 12 periodos. SVG del servidor: viewBox 0 0 120 48 y un <polyline>. */
/* 20-10: la línea va en la fila de la variación, debajo de la cifra: al lado, «6.7559 %» o «$8.858722» la pisaban. */
.lt-herr-tasas__spark { grid-column: 2; grid-row: 3; align-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; }
.lt-herr-tasas__spark svg { display: block; width: 112px; height: 48px; overflow: visible; }
.lt-herr-tasas__spark-linea { fill: none; stroke: var(--herr-ink-soft); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lt-herr-tasas__spark-area { fill: var(--herr-hundido); stroke: none; }
.lt-herr-tasas__spark-punto { fill: var(--herr-primary); stroke: var(--herr-surface); stroke-width: 2; }
.lt-herr-tasas__spark figcaption { font-size: 11.5px; font-weight: 600; color: var(--herr-muted); }
.lt-herr-tasas__dato-meta {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 12px 0 0; padding-top: 12px;
  border-top: 1px solid var(--herr-divider); font-size: 13px; line-height: 1.45; color: var(--herr-muted);
}
.lt-herr-tasas__dato-meta a { color: var(--herr-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--herr-border-fuerte); text-underline-offset: 3px; }
.lt-herr-tasas__dato-meta a:hover { color: var(--herr-primary); }
/* Enlaces del pie del dato: en móvil van a 44 px de alto sin engordar la tarjeta */
.lt-herr-tasas__dato-meta a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
.lt-herr-tasas__dato-ir { margin-left: auto; }
/* La fecha de publicación en su línea; debajo, «Fuente» a la izquierda y «Ver la serie» a la derecha */
.lt-herr-tasas__dato-meta > span { flex-basis: 100%; }

/* Dato atrasado: la fecha prevista ya pasó y la fuente no ha publicado. */
.lt-herr-tasas__dato.is-atrasado::before { background: #C98A1B; }
.lt-herr-tasas__dato.is-atrasado .lt-herr-tasas__dato-titulo { color: var(--herr-banda-ink); }
.lt-herr-tasas__retraso {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; padding: 12px 16px;
  border: 1px solid var(--herr-banda-borde); border-radius: 12px; background: var(--herr-banda-bg);
  color: var(--herr-banda-ink); font-size: 14px; line-height: 1.5;
}
.lt-herr-tasas__retraso strong { font-weight: 700; }
.lt-herr-tasas__retraso .lt-herr__i { background: var(--herr-banda-ink); margin-top: 1px; }

/* Etiqueta «Cifra de ejemplo» (solo maquetas y entorno sin datos revisados) */
.lt-herr-tasas__ejemplo {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
  background: var(--herr-banda-bg); color: var(--herr-banda-ink); font-size: 11.5px; font-weight: 700; white-space: nowrap;
  vertical-align: middle;
}
.lt-herr-tasas__dato-titulo .lt-herr-tasas__ejemplo { margin-left: 6px; }

/* ---------------------------------------------------------------------
   2. Controles nuevos del formulario
   --------------------------------------------------------------------- */

/* 2a. Importe con su moneda: «$» delante (AR, CL), «€» / «UF» / «%» detrás (ES, CL, tasas).
   El <input> es type="text" inputmode="decimal": type=number se come los puntos de miles. */
.lt-herr-tasas__importe {
  display: flex; align-items: center; height: 50px; overflow: hidden; border: 1.5px solid var(--herr-border);
  border-radius: var(--herr-r-ctl); background: var(--herr-surface); transition: border-color .2s, box-shadow .2s;
}
.lt-herr-tasas__importe:focus-within { border-color: var(--herr-ink); box-shadow: 0 0 0 4px rgba(22, 32, 46, .08); }
.lt-herr-tasas__importe .lt-herr__control {
  flex: 1; min-width: 0; height: 100%; padding: 0 14px; border: 0; border-radius: 0; box-shadow: none; background: transparent;
  font-family: var(--herr-font-head); font-size: 22px; font-weight: 600; letter-spacing: -.01em;
}
.lt-herr-tasas__importe .lt-herr__control:focus { box-shadow: none; }
.lt-herr-tasas__importe .lt-herr__control::placeholder { color: var(--herr-muted); font-weight: 500; }   /* 4,78:1 (T10a, M11) */
.lt-herr-tasas__afijo {
  flex: none; display: flex; align-items: center; height: 100%; padding: 0 14px;
  font-family: var(--herr-font-head); font-size: 17px; font-weight: 600; color: var(--herr-muted); user-select: none;
}
.lt-herr-tasas__afijo--pre { padding-right: 0; }
.lt-herr-tasas__afijo--pre + .lt-herr__control { padding-left: 6px; }
.lt-herr-tasas__afijo--post { padding-left: 4px; }
.lt-herr__campo:has(.lt-herr__error) .lt-herr-tasas__importe,
.lt-herr-tasas .lt-herr__campo:has(.lt-herr__error) > .lt-herr__control { border-color: var(--herr-error-ink); }

/* Ayuda fija bajo un campo (no placeholder): «Lo que pagas hoy, sin gastos ni suministros». */
.lt-herr-tasas__nota-campo { margin: 0; font-size: 13px; line-height: 1.45; color: var(--herr-muted); }
.lt-herr-tasas__nota-campo a { color: var(--herr-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--herr-border-fuerte); text-underline-offset: 2px; }

/* Rejilla de campos de las tasas: auto-FILL (no auto-fit) para que un campo solo no se
   estire a 1.000 px en escritorio; una fecha o un importe miden lo que una columna. */
.lt-herr-tasas__campos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* Segmentado de DOS opciones (UF→$ / $→UF; «Pesos ↔ UVA» / «Actualizar por CER»).
   El .lt-herr__seg de la hoja base es de tres columnas. */
.lt-herr-tasas__seg-2 { grid-template-columns: 1fr 1fr; }

/* Etiqueta de un grupo de tarjetas que va DESPUÉS de otros campos del mismo paso
   (alquiler 01: fecha de firma y luego «Qué dice el contrato…»). */
.lt-herr-tasas__etiqueta-grupo { display: block; margin: 18px 0 10px; }
/* Campos que van DESPUÉS de las tarjetas en el mismo paso (CL 01: monto en UF) */
.lt-herr-tasas__campos-tras { margin-top: 14px; }

/* 2b. Selector de MES: dos <select> (mes + año) dentro de un fieldset.
   type=month no existe en Safari de escritorio y en Android abre un calendario de días.
   Los <option> traen solo meses con dato; el JS deshabilita los meses de un año que aún
   no tienen dato y el servidor valida igual. */
.lt-herr-tasas__mes-par { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 8px; }
.lt-herr-tasas__mes-par .lt-herr__control { padding-right: 34px; }
/* Un fieldset no es buen contenedor flex (la <legend> no recibe el gap): bloque normal y la
   legend con su margen, para que los selects queden a la misma altura que un input con label. */
.lt-herr-tasas__mes { display: block; }
.lt-herr-tasas__mes > legend { margin-bottom: 8px; }
/* El par mes + año necesita dos columnas de la rejilla para que «Septiembre» y «2026» no se corten */
@media (min-width: 768px) { .lt-herr-tasas__mes { grid-column: span 2; } }

/* 2c. Atajos («Últimos 12 meses», «Últimos 6», «Hoy»). Sin JS son botones submit con
   name="atajo": el servidor rellena las fechas y calcula. */
.lt-herr-tasas__atajos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.lt-herr-tasas__atajo {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--herr-border-fuerte);
  border-radius: 999px; background: var(--herr-surface); color: var(--herr-ink); font-size: 14px; font-weight: 700; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.lt-herr-tasas__atajo:hover { border-color: var(--herr-ink); }
.lt-herr-tasas__atajo[aria-pressed="true"] { border-color: var(--herr-ink); background: var(--herr-ink); color: #fff; }
.lt-herr-tasas__atajo:focus-visible { outline: 3px solid var(--herr-primary); outline-offset: 2px; }

/* 2d. Pregunta CONDICIONAL dentro de un paso (alquiler: «¿Tu renta supera el índice de
   referencia…?», solo si la fecha cae en el tope). Aparece con un fundido; sin JS se ve
   siempre y el servidor la ignora si no toca. */
.lt-herr-tasas__condicional {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px;
  border: 0; border-radius: 14px; background: var(--herr-canvas); box-shadow: inset 3px 0 0 var(--herr-ink);
  min-width: 0;
}
.lt-herr-tasas__condicional > legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; }
.lt-herr-tasas__condicional .lt-herr__etiqueta { font-size: 15px; font-weight: 700; color: var(--herr-ink); line-height: 1.35; }
.lt-herr-tasas__condicional .lt-herr__seg { max-width: 480px; background: var(--herr-hundido); clear: both; }
@media (prefers-reduced-motion: no-preference) {
  .lt-herr-tasas__condicional.is-entrando { animation: lt-herr-tasas-entra .28s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes lt-herr-tasas-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* 2e. Paso OPCIONAL plegado (alquiler 03: «¿Cuánto te piden?»). Un <details> que se
   titula como un paso más: número, nombre y «Opcional». */
.lt-herr-tasas__opcional { border-top: 1px solid var(--herr-divider); }
.lt-herr-tasas__opcional > summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 52px; padding: 14px 0 6px; cursor: pointer; list-style: none;
  font-family: var(--herr-font-head); font-size: clamp(20px, 2.2vw, 24px); font-weight: 600; letter-spacing: -.01em; color: var(--herr-ink);
}
.lt-herr-tasas__opcional > summary::-webkit-details-marker { display: none; }
.lt-herr-tasas__opcional > summary:focus-visible { outline: 3px solid var(--herr-primary); outline-offset: 2px; border-radius: 6px; }
.lt-herr-tasas__opcional > summary .lt-herr__mas { margin-left: auto; font-family: var(--herr-font-body); font-size: 15px; }
/* Móvil: «03 ¿Cuánto te piden?  (+)» y la pista debajo. Escritorio: la pista sigue al título y el (+) al final. */
.lt-herr-tasas__opcional-pista { order: 3; flex-basis: 100%; font-family: var(--herr-font-body); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--herr-muted); }
@media (min-width: 768px) {
  .lt-herr-tasas__opcional-pista { order: 1; flex-basis: auto; }
  .lt-herr-tasas__opcional > summary .lt-herr__mas { order: 2; }
}
.lt-herr-tasas__opcional-cuerpo { padding: 10px 0 4px; }

/* ---------------------------------------------------------------------
   3. Resultado (dentro del .lt-herr__resultado de siempre)
   --------------------------------------------------------------------- */

/* 3a. Importe protagonista. Hereda .lt-herr__cifra (rojo, Space Grotesk) y añade la moneda
   pequeña y una talla para importes largos (AR: «$ 1.861.420,35» no cabe a 64 px en 390). */
.lt-herr-tasas__res-importe { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; margin: 0; }
.lt-herr-tasas__moneda { font-family: var(--herr-font-head); font-size: .5em; font-weight: 600; letter-spacing: 0; }
.lt-herr-tasas__res-importe .lt-herr__cifra { white-space: nowrap; }
.lt-herr-tasas__res-importe--largo .lt-herr__cifra { font-size: clamp(34px, 8.4vw, 54px); }
.lt-herr-tasas__res-unidad { font-family: var(--herr-font-head); font-size: clamp(18px, 2.2vw, 22px); font-weight: 600; color: var(--herr-ink); }

/* Las tres cifras de debajo (.lt-herr__cifras) llevan aquí importes y porcentajes, más
   largos que los «20 / 30 / 10» de días hábiles: talla que encoge con la pantalla. Nunca
   nowrap aquí: con el overflow:hidden de .lt-herr__cifras, cortaba el total (T9b, F2; ver abajo). */
.lt-herr-tasas__cifras dd { font-size: clamp(19px, 5.2vw, 26px); letter-spacing: -.01em; }
.lt-herr-tasas__cifras .lt-herr__cifras-item { padding: 12px 10px; }
.lt-herr-tasas__cifras .is-mal dd { color: var(--tasas-mal-ink); }

/* 3b. VEREDICTO: «Te piden X € más de lo que permite la ley» / «Tu tasa supera el máximo».
   Dos estados: .is-supera (rojo claro) y .is-cumple (verde de «cuenta»). La regla es un SVG:
   pista, tramo permitido y exceso, con anchos calculados en el servidor. */
.lt-herr-tasas__veredicto {
  display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 16px; border-radius: 14px;
  border: 1px solid var(--tasas-mal-borde); background: var(--tasas-mal-bg); color: var(--tasas-mal-ink);
}
.lt-herr-tasas__veredicto.is-cumple { border-color: #C5DDCD; background: var(--herr-cuenta-bg); color: var(--herr-cuenta-ink); }
.lt-herr-tasas__veredicto-titulo {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; font-family: var(--herr-font-head); font-size: 19px;
  font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-wrap: pretty;
}
.lt-herr-tasas__veredicto-icono { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.lt-herr-tasas__regla { display: block; width: 100%; height: 14px; }
.lt-herr-tasas__regla-pista { fill: rgba(255, 255, 255, .85); }
.lt-herr-tasas__regla-ok { fill: var(--herr-ink-soft); }
.lt-herr-tasas__regla-exceso { fill: var(--herr-primary); }
.lt-herr-tasas__regla-tope { fill: var(--herr-ink); }
.is-cumple .lt-herr-tasas__regla-ok { fill: var(--herr-cuenta-ink); }
.lt-herr-tasas__veredicto-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0; }
.lt-herr-tasas__veredicto-datos div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; }
.lt-herr-tasas__veredicto-datos dt { font-size: 12.5px; font-weight: 600; color: var(--herr-text-2); }
.lt-herr-tasas__veredicto-datos dd { margin: 0; font-family: var(--herr-font-head); font-size: 20px; font-weight: 700; color: var(--herr-ink); }
.lt-herr-tasas__veredicto-datos .is-mal dd { color: var(--tasas-mal-ink); }
.lt-herr-tasas__veredicto-datos > div:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Veredicto como protagonista (CL tasa máxima): ocupa el sitio de la cifra grande. */
.lt-herr-tasas__veredicto--grande { padding: 18px; }
.lt-herr-tasas__veredicto--grande .lt-herr-tasas__veredicto-titulo { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.08; letter-spacing: -.02em; }
.lt-herr-tasas__veredicto--grande .lt-herr-tasas__veredicto-icono { width: 28px; height: 28px; margin-top: 2px; }
.lt-herr-tasas__veredicto--grande .lt-herr-tasas__veredicto-datos dd { font-size: clamp(24px, 2.6vw, 30px); }

/* 3c. Régimen aplicado (alquiler): una línea con la norma, por encima del desglose. */
.lt-herr-tasas__regimen {
  margin: 0; padding: 12px 14px; border-radius: 11px; background: var(--herr-surface); border: 1px solid var(--herr-border);
  font-size: 14px; line-height: 1.5; color: var(--herr-ink-soft);
}
.lt-herr-tasas__regimen strong { display: block; font-family: var(--herr-font-head); font-size: 15.5px; font-weight: 600; color: var(--herr-ink); }
.lt-herr-tasas__regimen a { color: inherit; text-decoration: underline; text-decoration-color: var(--herr-border-fuerte); text-underline-offset: 2px; }

/* ---------------------------------------------------------------------
   4. TABLA CITABLE (desglose del resultado, tabla del mes, histórico)
   Una sola tabla para todo: cabecera discreta, filas con raya, números a la derecha y en
   dígitos fijos, pie en negrita. Con «Copiar tabla» (texto con tabuladores + fuente) para
   pegarla en un escrito.
   --------------------------------------------------------------------- */
.lt-herr-tasas__desglose { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lt-herr-tasas__desglose-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.lt-herr-tasas__copiar { gap: 8px; }
.lt-herr-tasas__copiar svg { width: 16px; height: 16px; flex: none; }
.lt-herr-tasas__copiar.is-copiado { border-color: var(--herr-cuenta-ink); color: var(--herr-cuenta-ink); }

/* Por si una tabla no cabe (columnas largas en 360 px): se desplaza ELLA, no la página. */
.lt-herr-tasas__tabla-marco { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lt-herr-tasas__tabla-marco:focus-visible { outline: 3px solid var(--herr-primary); outline-offset: 2px; border-radius: 6px; }

.lt-herr-tasas__tabla { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; color: var(--herr-ink-soft); }
.lt-herr-tasas__tabla caption {
  caption-side: top; padding: 0 0 8px; text-align: left; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--herr-text-2);
}
.lt-herr-tasas__tabla th, .lt-herr-tasas__tabla td { padding: 10px 8px; border-bottom: 1px solid var(--herr-divider); text-align: left; vertical-align: top; }
.lt-herr-tasas__tabla th:first-child, .lt-herr-tasas__tabla td:first-child { padding-left: 0; }
.lt-herr-tasas__tabla th:last-child, .lt-herr-tasas__tabla td:last-child { padding-right: 0; }
.lt-herr-tasas__tabla thead th {
  padding-top: 0; border-bottom: 1.5px solid var(--herr-ink); font-size: 12px; font-weight: 700; line-height: 1.3;
  color: var(--herr-text-2); vertical-align: bottom;
}
.lt-herr-tasas__tabla tbody th { font-weight: 600; color: var(--herr-ink); }
.lt-herr-tasas__tabla .is-num { text-align: right; white-space: nowrap; font-family: var(--herr-font-body); font-weight: 600; color: var(--herr-ink); }
.lt-herr-tasas__tabla thead .is-num { font-weight: 700; color: var(--herr-text-2); }
.lt-herr-tasas__tabla .is-sub { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--herr-muted); }
.lt-herr-tasas__tabla tfoot th, .lt-herr-tasas__tabla tfoot td {
  border-top: 1.5px solid var(--herr-ink); border-bottom: 0; font-family: var(--herr-font-head); font-size: 16px; font-weight: 700; color: var(--herr-ink);
}
.lt-herr-tasas__tabla tfoot .is-num { font-family: var(--herr-font-head); font-size: 17px; color: var(--herr-primary); }
/* Fila o celda que el cálculo ha usado (el índice de septiembre, el tramo de tu crédito) */
.lt-herr-tasas__tabla tr.is-usado > * { background: var(--tasas-usado-bg); }
.lt-herr-tasas__tabla tr.is-usado > :first-child { box-shadow: inset 3px 0 0 var(--herr-primary); padding-left: 10px; }
.lt-herr-tasas__tabla tr.is-usado > :last-child { padding-right: 8px; }
.lt-herr-tasas__marca {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--herr-primary); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1.5; vertical-align: 1px; white-space: nowrap;
}
.lt-herr-tasas__tabla .is-mal { color: var(--tasas-mal-ink); }

/* Fechas dd-mm-aaaa: no se parten por el guion */
.lt-herr-tasas__dia { white-space: nowrap; }
/* Desglose del BNA (T9a): el rango va en una línea; 4 px menos de aire tras él y cabe hasta $ 1.000.000 en 390 px */
.lt-herr-tasas__tabla--bna tr > :first-child { padding-right: 4px; }

/* Fuente y fecha de consulta, debajo de cada tabla y del resultado */
.lt-herr-tasas__fuente { margin: 0; font-size: 13px; line-height: 1.5; color: var(--herr-muted); }
.lt-herr-tasas__fuente a { color: var(--herr-ink-soft); font-weight: 600; text-decoration: underline; text-decoration-color: var(--herr-border-fuerte); text-underline-offset: 2px; }
.lt-herr-tasas__fuente a:hover { color: var(--herr-primary); }

/* ---------------------------------------------------------------------
   5. CTA condicional
   - Discreto (por defecto): una franja clara, sin rojo de fondo.
   - Fuerte: el .lt-herr__cta oscuro de siempre (con --urgente).
   - Doble salida (deuda con fechas): dos botones en el CTA oscuro.
   --------------------------------------------------------------------- */
.lt-herr-tasas__cta-discreto {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 20px;
  padding: 16px 20px; border: 1px solid var(--herr-border); border-radius: 16px; background: var(--herr-surface);
}
.lt-herr-tasas__cta-discreto p { flex: 1 1 260px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--herr-ink-soft); }
.lt-herr-tasas__cta-discreto strong { color: var(--herr-ink); }
.lt-herr__cta .lt-herr-tasas__cta-cuerpo { flex: 1 1 320px; display: flex; flex-direction: column; gap: 8px; }
.lt-herr__cta .lt-herr-tasas__cta-cuerpo .lt-herr__cta-titulo { flex: none; }
.lt-herr-tasas__cta-texto { margin: 0; font-size: 15px; line-height: 1.55; color: var(--herr-on-dark); }
.lt-herr-tasas__cta-acciones { flex: none; display: flex; flex-wrap: wrap; gap: 10px; }
.lt-herr .lt-herr-tasas__cta-sec, .lt-herr .lt-herr-tasas__cta-sec:link, .lt-herr .lt-herr-tasas__cta-sec:visited {
  display: inline-flex; align-items: center; justify-content: center; min-height: 47px; padding: 0 22px; border-radius: 11px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none;
}
.lt-herr .lt-herr-tasas__cta-sec:hover { box-shadow: inset 0 0 0 1.5px #fff; color: #fff; text-decoration: none; }
.lt-herr-tasas__cta-sec:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 575.98px) {
  .lt-herr-tasas__cta-acciones { width: 100%; flex-direction: column; }
  .lt-herr-tasas__cta-acciones > a { width: 100%; }
}

/* ---------------------------------------------------------------------
   6. Serie HISTÓRICA
   Mensual: matriz mes × año (12 filas y 2–3 columnas = 24 periodos en el alto de 12; es
   como la publica el INE/INDEC y se lee en vertical). Anual o con varias columnas: lista.
   «Ver toda la serie» es un <details> con la tabla completa (sin JS funciona igual).
   --------------------------------------------------------------------- */
.lt-herr-tasas__historico {
  display: grid; gap: 18px; margin-top: 56px; padding: clamp(20px, 3vw, 34px); border: 1px solid var(--herr-border);
  border-radius: var(--herr-r-card); background: var(--herr-surface); scroll-margin-top: calc(var(--lt-header-h-effective, 0px) + 12px);
}
@media (min-width: 992px) {
  .lt-herr-tasas__historico { grid-template-columns: minmax(240px, 1fr) minmax(0, 1.7fr); column-gap: 52px; align-items: start; }
  .lt-herr-tasas__historico > .lt-herr-tasas__historico-cab { grid-row: 1 / span 3; position: sticky; top: calc(var(--lt-header-h-effective, 72px) + 24px); }
}
.lt-herr-tasas__historico-cab { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.lt-herr-tasas__historico-cab p { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--herr-text-2); }

.lt-herr-tasas__tabla--matriz td.is-num { font-weight: 500; color: var(--herr-ink-soft); }
.lt-herr-tasas__tabla--matriz tbody th { font-weight: 600; text-transform: capitalize; }
.lt-herr-tasas__tabla--matriz .is-vacio { color: var(--herr-faint); font-weight: 400; }
.lt-herr-tasas__tabla--matriz td.is-ultimo { font-weight: 800; color: var(--herr-ink); }
.lt-herr-tasas__tabla--matriz td.is-usado { background: var(--tasas-usado-bg); box-shadow: inset 0 -2px 0 var(--herr-primary); color: var(--herr-ink); font-weight: 800; }
.lt-herr-tasas__tabla--matriz tbody tr:hover > * { background: var(--herr-canvas); }
.lt-herr-tasas__leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--herr-text-2); }
.lt-herr-tasas__leyenda li { display: flex; align-items: center; gap: 7px; }
.lt-herr-tasas__muestra { flex: none; width: 14px; height: 14px; border-radius: 3px; background: var(--tasas-usado-bg); box-shadow: inset 0 -2px 0 var(--herr-primary); }
.lt-herr-tasas__muestra--periodo { background: var(--tasas-usado-bg); box-shadow: none; }
/* Rango del cálculo (AR inflación, CL reajuste: los meses que entran) */
.lt-herr-tasas__tabla--matriz td.is-periodo { background: var(--tasas-usado-bg); color: var(--herr-ink); }

.lt-herr-tasas__serie { border-top: 1px solid var(--herr-divider); }
.lt-herr-tasas__serie > summary {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 0; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 700; color: var(--herr-ink);
}
.lt-herr-tasas__serie > summary::-webkit-details-marker { display: none; }
.lt-herr-tasas__serie > summary:focus-visible { outline: 3px solid var(--herr-primary); outline-offset: 2px; border-radius: 6px; }
.lt-herr-tasas__serie-cuerpo { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 6px; }
/* La serie completa puede tener cientos de filas: alto limitado con desplazamiento propio
   SOLO en escritorio; en móvil se despliega entera (un scroll dentro de otro es peor). */
@media (min-width: 768px) { .lt-herr-tasas__serie .lt-herr-tasas__tabla-marco { max-height: 520px; overflow-y: auto; } }
.lt-herr-tasas__serie thead th { position: sticky; top: 0; background: var(--herr-surface); }

/* ---------------------------------------------------------------------
   7. FAQ dentro de la guía (mismo plegable que «días que no cuentan»)
   --------------------------------------------------------------------- */
.lt-herr-tasas__faq { padding: 26px 0 0; border-top: 1px solid var(--herr-border); }
.lt-herr-tasas__faq > h3 { margin: 0 0 6px; }
.lt-herr-tasas__pregunta { border-bottom: 1px solid var(--herr-divider); }
.lt-herr-tasas__pregunta > summary {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 0; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--herr-ink);
}
.lt-herr-tasas__pregunta > summary::-webkit-details-marker { display: none; }
.lt-herr-tasas__pregunta > summary .lt-herr__mas { margin-left: auto; order: 2; }
.lt-herr-tasas__pregunta > summary:focus-visible { outline: 3px solid var(--herr-primary); outline-offset: 2px; border-radius: 6px; }
.lt-herr-tasas__pregunta > p { margin: 0 0 16px; max-width: 66ch; font-size: 16px; line-height: 1.7; color: var(--herr-ink-soft); }

/* ---------------------------------------------------------------------
   8. Otras herramientas del país
   --------------------------------------------------------------------- */
.lt-herr-tasas__otras { display: flex; flex-direction: column; gap: 16px; margin-top: 64px; }
.lt-herr-tasas__otras-lista { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); margin: 0; padding: 0; list-style: none; }
.lt-herr .lt-herr-tasas__otra, .lt-herr .lt-herr-tasas__otra:link, .lt-herr .lt-herr-tasas__otra:visited {
  display: flex; flex-direction: column; gap: 4px; height: 100%; min-height: 44px; padding: 15px 16px 16px; border: 1.5px solid var(--herr-border);
  border-radius: 14px; background: var(--herr-surface); color: var(--herr-ink); text-decoration: none; transition: border-color .2s;
}
.lt-herr .lt-herr-tasas__otra:hover { border-color: var(--herr-ink); color: var(--herr-ink); text-decoration: none; }
.lt-herr-tasas__otra:focus-visible { outline: 3px solid var(--herr-primary); outline-offset: 2px; }
.lt-herr-tasas__otra-nombre { font-weight: 700; font-size: 15px; line-height: 1.3; }
.lt-herr-tasas__otra-texto { font-size: 13px; line-height: 1.45; color: var(--herr-muted); }

/* ---------------------------------------------------------------------
   9. Barra fija del móvil: variante con CTA
   Con «Hablar con un abogado» no caben cifra + «Ver» + CTA en 390 px. El resumen se
   vuelve el propio botón «Ver» (enlace al resultado, ≥44 px de alto) y el CTA queda a la
   derecha. Sin CTA se usa la barra de siempre (estado + botón «Ver»).
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .lt-herr__dock .lt-herr-tasas__dock-ver {
    flex: 1 1 0; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 1px;
    margin: -4px 0; padding: 4px 0; color: var(--herr-text-2); text-decoration: none; font-size: 13px; font-weight: 600; line-height: 1.25;
  }
  .lt-herr__dock .lt-herr-tasas__dock-ver strong {
    font-family: var(--herr-font-head); font-size: 17px; font-weight: 700; color: var(--herr-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Segunda línea: el dato se recorta con «…» si no cabe; «Ver» nunca */
  .lt-herr__dock .lt-herr-tasas__dock-ver > span { display: flex; gap: 6px; min-width: 0; }
  .lt-herr__dock .lt-herr-tasas__dock-ver > span > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lt-herr__dock .lt-herr-tasas__dock-ver u { flex: none; text-decoration-thickness: 1.5px; text-underline-offset: 2px; color: var(--herr-ink); }
  .lt-herr__dock .lt-herr-tasas__dock-ver u::before { content: '·'; display: inline-block; margin-right: 6px; color: var(--herr-muted); text-decoration: none; }
  .lt-herr__dock .lt-herr-tasas__dock-ver:focus-visible { outline: 3px solid var(--herr-ink); outline-offset: 2px; border-radius: 6px; }
  .lt-herr-tasas .lt-herr__dock .lt-herr__dock-cta { padding: 0 12px; font-size: 14px; }
  /* Las tablas de 4 columnas a 360: un punto menos de letra y menos aire lateral */
  .lt-herr-tasas__tabla { font-size: 13.5px; }
  .lt-herr-tasas__tabla th, .lt-herr-tasas__tabla td { padding: 9px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .lt-herr-tasas__condicional.is-entrando { animation: none; }
}

/* Ajustes de la integración (Tarea 7), fuera de tasas.css del diseño:
   - el aviso orientativo pegado debajo de la tarjeta del resultado;
   - lo que el JS oculta con `hidden` dentro de la barra fija (el enlace «Ver» de la variante con CTA
     lleva display:flex con más especificidad que `.lt-herr [hidden]`). */
.lt-herr-tasas .lt-herr__orientativo--resultado { display: block; margin: 12px 0 0; }
.lt-herr-tasas .lt-herr__dock [hidden] { display: none; }
/* Ronda 1: barra con CTA sin dato de referencia (BNA, deudas): «Ver» junto a la cifra, sin «·» colgado. */
@media (max-width: 767.98px) {
  .lt-herr__dock .lt-herr-tasas__dock-ver.is-sin-sub { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
  .lt-herr__dock .lt-herr-tasas__dock-ver.is-sin-sub u::before,
  .lt-herr__dock .lt-herr-tasas__dock-ver > span > span:empty + u::before { content: none; }
  .lt-herr__dock .lt-herr-tasas__dock-ver > span > span:empty { display: none; }
}
/* Desglose de más de 12 filas: el resto, plegado debajo de la tabla. */
.lt-herr-tasas__resto { margin-top: 4px; }

/* ---------------------------------------------------------------------
   Tarea 9b: correcciones del recorrido en navegador (capturas_recorrido/INFORME.md)
   --------------------------------------------------------------------- */
/* F1. La leyenda del paso FLOTA (reboot de Bootstrap: `legend {float: left; width: 100%}` y
   `legend + * {clear: left}`). Si el primer hijo no la despeja (uno con position:absolute no lo hace), la
   rejilla siguiente, que es un contexto de formato propio, se encaja AL LADO de la leyenda y mide 0 px.
   Toda pieza del paso la despeja, sea cual sea el primer hijo. */
.lt-herr-tasas .lt-herr__paso > .lt-herr__tipos, .lt-herr-tasas .lt-herr__paso > .lt-herr__campos,
.lt-herr-tasas .lt-herr__paso > .lt-herr__etiqueta, .lt-herr-tasas .lt-herr__paso > .lt-herr-tasas__ancla { clear: both; }
/* La etiqueta del grupo de tarjetas, cuando abre el paso, va pegada al título. */
.lt-herr__paso-titulo + .lt-herr-tasas__etiqueta-grupo,
.lt-herr__paso-titulo + .lt-herr-tasas__ancla + .lt-herr-tasas__etiqueta-grupo { margin-top: 0; }

/* F2. Las tres cifras de debajo del resultado: nunca se cortan. Flex con salto de línea en vez de tres
   columnas fijas: cada cifra mide lo que su contenido (base = su ancho natural) y, si las tres no caben,
   bajan a otra fila y crecen hasta llenarla (no quedan huecos con el gris del separador). Una cifra más
   ancha que la caja entera (importes enormes en 320 px) se parte antes que cortarse. */
.lt-herr-tasas__cifras { display: flex; flex-wrap: wrap; }
.lt-herr-tasas__cifras .lt-herr__cifras-item { flex: 1 1 auto; min-width: 0; }
.lt-herr-tasas__cifras dd { white-space: normal; overflow-wrap: break-word; }

/* F3. «Hablar con un abogado» dentro del resultado: 48 px de alto aunque el .lt-btn de la web
   le recorte el relleno. */
.lt-herr-tasas a.lt-herr__cta-boton, .lt-herr-tasas button.lt-herr__cta-boton { min-height: 48px; line-height: 1.2; }

/* F5. Ancla del primer campo con error (envío sin JS): queda bajo la cabecera fija con aire para ver el
   título del paso o la etiqueta. */
.lt-herr-tasas__ancla {
  display: block; height: 0;
  scroll-margin-top: calc(var(--lt-header-h-effective, 0px) + 56px);
}

/* F7. Foco de fechas, selects e importes: el anillo rojo de 3 px del resto (DISENO, «Accesibilidad y móvil»). */
.lt-herr-tasas .lt-herr__control:focus-visible { outline: 3px solid var(--herr-primary); outline-offset: 2px; }
.lt-herr-tasas .lt-herr-tasas__importe .lt-herr__control:focus-visible { outline: none; }
.lt-herr-tasas .lt-herr-tasas__importe:focus-within { outline: 3px solid var(--herr-primary); outline-offset: 2px; }

/* F8. Tarjeta embebible: el enlace de atribución con la tinta y el subrayado discreto de la casa. */
.lt-herr-tasas--tarjeta .lt-herr-tasas__atribucion,
.lt-herr--embed .lt-herr-tasas__atribucion { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--herr-muted); }
.lt-herr .lt-herr-tasas__atribucion a, .lt-herr .lt-herr-tasas__atribucion a:link, .lt-herr .lt-herr-tasas__atribucion a:visited {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--herr-ink); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--herr-border-fuerte); text-underline-offset: 3px;
}
.lt-herr .lt-herr-tasas__atribucion a:hover { color: var(--herr-primary); }

/* F10. Tabla que se desplaza dentro de su marco: difuminado en el borde por el que queda tabla (lo marca
   tasas.js: is-desplazable, is-al-inicio, is-al-final). */
.lt-herr-tasas__tabla-marco.is-desplazable:not(.is-al-final) {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 32px);
  mask-image: linear-gradient(to left, transparent 0, #000 32px);
}
.lt-herr-tasas__tabla-marco.is-desplazable.is-al-final:not(.is-al-inicio) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px);
  mask-image: linear-gradient(to right, transparent 0, #000 32px);
}
.lt-herr-tasas__tabla-marco.is-desplazable:not(.is-al-inicio):not(.is-al-final) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}

/* ---------------------------------------------------------------------
   Tarea 10a: correcciones de la revisión de diseño (revision_diseno/REVISION.md)
   --------------------------------------------------------------------- */
/* I1. La norma bajo el eyebrow: una línea, un enlace. */
.lt-herr-tasas .lt-herr__norma { overflow-wrap: anywhere; }

/* C2. «No te pueden subir el alquiler»: la respuesta en palabras, encima de la cifra que se sigue pagando. */
.lt-herr-tasas__titular {
  margin: 0; font-family: var(--herr-font-head); font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; line-height: 1.08;
  letter-spacing: -.02em; color: var(--herr-ink); text-wrap: balance;
}
.lt-herr-tasas__resultado--sin_subida .lt-herr__cifra { color: var(--herr-ink); }
.lt-herr-tasas__causa { font-size: 14px; color: var(--herr-ink-soft); }

/* C1. «No lo sé»: dos escenarios con el MISMO peso (misma talla, misma tinta); ninguno es «la» cifra. */
.lt-herr-tasas__escenarios { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
@media (min-width: 480px) { .lt-herr-tasas__escenarios { grid-template-columns: 1fr 1fr; } }
.lt-herr-tasas__escenario {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1.5px solid var(--herr-border-fuerte);
  border-radius: 14px; background: var(--herr-surface);
}
.lt-herr .lt-herr-tasas__escenario p { margin: 0; }
.lt-herr-tasas__escenario-si { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--herr-ink); }
.lt-herr-tasas__escenario-cifra { font-size: 15px; line-height: 1.35; color: var(--herr-ink-soft); }
.lt-herr-tasas__escenario-cifra strong {
  display: block; font-family: var(--herr-font-head); font-size: clamp(26px, 7vw, 30px); font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; color: var(--herr-ink); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.lt-herr-tasas__escenario-sub { font-size: 13px; color: var(--herr-muted); }
.lt-herr-tasas__referencia { margin: 0; font-size: 14px; line-height: 1.5; color: var(--herr-ink-soft); }
.lt-herr-tasas__referencia a { color: var(--herr-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--herr-border-fuerte); text-underline-offset: 2px; }
.lt-herr-tasas__referencia a:hover { color: var(--herr-primary); }
/* Veredicto «depende» (te piden más que el escenario bajo, menos que el alto): ámbar, no rojo ni verde. */
.lt-herr-tasas__veredicto.is-duda { border-color: var(--herr-banda-borde); background: var(--herr-banda-bg); color: var(--herr-banda-ink); }

/* M6. La regla en verde marca también dónde cae lo que te piden; las dos marcas llevan su muestra en la leyenda. */
.is-cumple .lt-herr-tasas__regla-ok, .is-duda .lt-herr-tasas__regla-ok { fill: #9CC7AC; }
.is-duda .lt-herr-tasas__regla-ok { fill: #E2C48D; }
.lt-herr-tasas__regla-pedido { fill: var(--herr-cuenta-ink); }
.is-duda .lt-herr-tasas__regla-pedido { fill: var(--herr-banda-ink); }
.is-cumple .lt-herr-tasas__veredicto-datos dt::before, .is-duda .lt-herr-tasas__veredicto-datos dt::before {
  content: ''; display: inline-block; width: 3px; height: 11px; margin-right: 6px; border-radius: 1px; vertical-align: -1px;
  background: var(--herr-ink);
}
.is-cumple .lt-herr-tasas__veredicto-datos .is-pedido dt::before { background: var(--herr-cuenta-ink); }
.is-duda .lt-herr-tasas__veredicto-datos .is-pedido dt::before { background: var(--herr-banda-ink); }

/* I5. TMC: el tipo de crédito, en caja normal bajo el eyebrow, con el código de la CMF como sub-línea. */
.lt-herr-tasas__tipo-res { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--herr-ink); }
.lt-herr-tasas__tipo-codigo { display: block; font-size: 13px; font-weight: 500; color: var(--herr-muted); }

/* I3. Desglose de intereses en el móvil estrecho: la columna «Días» baja a la sub-línea del periodo y quedan
   Periodo / Tipo / Intereses, con menos aire entre columnas; el total ocupa tipo e intereses. */
.lt-herr-tasas__dias-sub { display: none; }
@media (max-width: 479.98px) {
  .lt-herr-tasas__tabla--tramos .is-dias { display: none; }
  .lt-herr-tasas__tabla--tramos .lt-herr-tasas__dias-sub { display: block; }
  .lt-herr-tasas__tabla--tramos th, .lt-herr-tasas__tabla--tramos td { padding-left: 4px; padding-right: 4px; }
}

/* M4. Atajos de meses: dos por fila en el móvil estrecho. */
@media (max-width: 479.98px) {
  .lt-herr-tasas__atajo { flex: 1 1 calc(50% - 4px); justify-content: center; padding: 0 10px; text-align: center; }
}

/* M7 y M8. Tarjeta embebible: no se estira sin límite en un iframe ancho. */
.lt-herr-tasas--tarjeta { max-width: 560px; }

/* M9. Avisos de página (RDL 29/2026, criterio judicial): una línea y «Más» desplegable. El <details> es la caja;
   el aviso de siempre va dentro, sin su propia caja. */
.lt-herr-tasas__aviso-plegable {
  margin: 0 0 16px; border-left: 3px solid #F79009; border-radius: 8px; background: #FFFAEB; font-size: 14px; line-height: 1.5;
}
.lt-herr-tasas__aviso-plegable > summary {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--herr-ink);
}
.lt-herr-tasas__aviso-plegable > summary::-webkit-details-marker { display: none; }
.lt-herr-tasas__aviso-plegable > summary:focus-visible { outline: 3px solid var(--herr-primary); outline-offset: 2px; border-radius: 8px; }
.lt-herr-tasas__aviso-mas { margin-left: auto; flex: none; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.lt-herr-tasas__aviso-plegable[open] .lt-herr-tasas__aviso-mas { display: none; }
.lt-herr-tasas__aviso-plegable > .lt-herr__aviso { margin: 0; padding: 0 16px 12px; border: 0; background: transparent; }
.lt-herr-tasas__dato-meta > span:empty { display: none; }
/* Cifra del dato larga (UF: «$ 41.178,64»): a todo el ancho y la línea de evolución debajo, sin pisarla. */
/* 20-10: «$41.189,24» no cabía en la tarjeta entre ~990 y 1.100 px (scroll horizontal): letra algo menor */
.lt-herr-tasas__dato-cifra--larga { font-size: clamp(48px, 6vw, 68px); }
/* Interés legal ES: desde diciembre, sin tasas_<año siguiente>.json, aviso en la cabecera del dato. */
.lt-herr-tasas__dato-aviso {
  grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 10px 12px;
  border: 1px solid var(--herr-banda-borde); border-radius: 10px; background: var(--herr-banda-bg);
  color: var(--herr-banda-ink); font-size: 13.5px; line-height: 1.45;
}
.lt-herr-tasas__dato-aviso .lt-herr__i { flex: none; background: var(--herr-banda-ink); margin-top: 1px; }

/* ---------------------------------------------------------------------
   Fase 2 (20-10-2026): cita del dato, paso opcional visible, pista hacia «¿Cuánto te piden?», salto al CTA,
   ejemplo resuelto y enlace al hub. Migas, «Datos actualizados», FAQ y fuentes son piezas comunes
   (.lt-herr-migas, .lt-herr-actualizado, .lt-herr-faq, .lt-herr-fuentes de herramientas.css).
   --------------------------------------------------------------------- */
.lt-herr-tasas .lt-herr-migas { margin-bottom: 12px; }
.lt-herr-tasas__cita { margin: 12px 0 0; max-width: 62ch; color: var(--herr-ink-soft); font-size: 15px; line-height: 1.5; }
.lt-herr-tasas__paso-opcional .lt-herr__campos { margin-top: 4px; }
.lt-herr-tasas__pista-pedida { margin: 12px 0 0; font-size: 15px; color: var(--herr-ink-soft); }
.lt-herr-tasas__pista-pedida a, .lt-herr-tasas__ir-cta a, .lt-herr-tasas__hub a { color: var(--herr-primary); font-weight: 600; }
.lt-herr-tasas__ir-cta { margin: 10px 0 0; font-size: 15px; }
.lt-herr-tasas__resuelto-res { margin: 8px 0; color: var(--herr-ink); }
.lt-herr-tasas__hub { margin: 0; font-size: 15px; }
.lt-herr-tasas .lt-herr-faq, .lt-herr-tasas .lt-herr-fuentes { margin-top: 56px; }
.lt-herr-tasas__resuelto p + p { margin-top: 10px; }