/* reclamacion.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. */

/* ==========================================================================
   Herramienta 4 — Documento de reclamación (burofax, derecho de petición,
   carta documento, carta notarial, carta de reclamación).

   Va AL FINAL de herramientas.css. No reescribe ninguna regla de arriba: todo
   lo que es igual que en días hábiles se usa con sus clases lt-herr__* tal cual
   (pasos, tarjetas de opción, controles, −/+, botón principal, avisos, nota,
   CTA oscuro, guía, barra fija). Aquí solo hay piezas nuevas, con prefijo
   lt-herr-reclamacion__, hechas con las mismas variables --herr-* (que salen de
   los --lt-*). Ningún color nuevo.

   El contenedor de la página lleva las tres clases:
   <div class="lt-herr lt-herr--pagina lt-herr-reclamacion">
   ========================================================================== */

/* Destinos del desplazamiento guiado: igual que los de días hábiles */
.lt-herr-reclamacion__pregunta, .lt-herr-reclamacion__parte, .lt-herr-reclamacion__consentimiento,
.lt-herr-reclamacion__cargando, .lt-herr-reclamacion__listo, .lt-herr-reclamacion__editable,
.lt-herr-reclamacion__envio, .lt-herr-reclamacion__tipo-elegido {
  scroll-margin-top: calc(var(--lt-header-h-effective, 0px) + 12px);
  scroll-margin-bottom: calc(var(--herr-dock-h, 0px) + 12px);
}
.lt-herr-reclamacion textarea { font-family: inherit; }
.lt-herr-reclamacion textarea, .lt-herr-reclamacion input[type="checkbox"] { touch-action: manipulation; }

/* --------------------------------------------------------------------------
   0. Tipo de reclamación
   En la raíz del país: las tarjetas .lt-herr__tipo son ENLACES a la landing de
   cada tipo (o a ?tipo=… si no tiene landing). Así funciona sin JS. Con JS se
   pide el formulario del tipo y se cambia en el sitio.
   En una landing de tipo: una fila con el tipo ya elegido y «Cambiar».
   -------------------------------------------------------------------------- */
a.lt-herr__tipo.lt-herr-reclamacion__tipo-enlace,
a.lt-herr__tipo.lt-herr-reclamacion__tipo-enlace:link,
a.lt-herr__tipo.lt-herr-reclamacion__tipo-enlace:visited { color: var(--herr-ink); text-decoration: none; }
a.lt-herr__tipo.lt-herr-reclamacion__tipo-enlace:focus-visible { outline: 3px solid var(--herr-primary); outline-offset: 2px; border-radius: 14px; }
.lt-herr-reclamacion__tipo-enlace[aria-current="page"] {
  border-color: var(--herr-ink); background: var(--herr-surface); box-shadow: 0 12px 24px -16px rgba(22, 32, 46, .45);
}
/* H25: los enlaces llevan flecha y «Abre el formulario…», no el punto de los radios; el actual, «Este». */
.lt-herr-reclamacion__tipo-flecha { color: var(--herr-primary); font-weight: 700; line-height: 1; }
.lt-herr-reclamacion__tipo-este {
  flex: none; padding: 2px 8px; border-radius: 999px; background: var(--herr-ink); color: var(--herr-surface);
  font-size: 12px; font-weight: 700; line-height: 1.5;
}
.lt-herr-reclamacion__tipo-abre { font-size: 13px; font-weight: 600; color: var(--herr-primary); }

.lt-herr-reclamacion__tipo-elegido {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 12px 12px 12px 16px; border: 1.5px solid var(--herr-border); border-radius: 14px; background: var(--herr-canvas);
}
.lt-herr-reclamacion__tipo-elegido p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--herr-text-2); }
.lt-herr-reclamacion__tipo-elegido strong { display: block; font-size: 15px; font-weight: 700; color: var(--herr-ink); }

/* --------------------------------------------------------------------------
   1. Paso 01: las dos partes (tú y a quién reclamas)
   -------------------------------------------------------------------------- */
.lt-herr-reclamacion__partes { display: grid; gap: 22px; }
@media (min-width: 768px) {
  .lt-herr-reclamacion__partes { grid-template-columns: 1fr 1fr; gap: 28px; }
  .lt-herr-reclamacion__parte + .lt-herr-reclamacion__parte { padding-left: 28px; border-left: 1px solid var(--herr-divider); }
}
.lt-herr-reclamacion__parte { display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.lt-herr-reclamacion__parte-titulo {
  display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; padding: 0;
  font-family: var(--herr-font-head); font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--herr-ink);
}
.lt-herr-reclamacion__parte-titulo small { font-family: var(--herr-font-body); font-size: 13px; font-weight: 500; color: var(--herr-muted); }
.lt-herr-reclamacion__parte .lt-herr__campos { grid-template-columns: 1fr; }
@media (min-width: 480px) {
  .lt-herr-reclamacion__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
}
.lt-herr-reclamacion__fila { display: grid; gap: 14px; }

/* «(opcional)» dentro de la etiqueta, y la ayuda bajo el control */
.lt-herr-reclamacion__opcional { font-weight: 500; color: var(--herr-muted); }
.lt-herr-reclamacion__ayuda-campo { margin: 0; font-size: 13px; line-height: 1.45; color: var(--herr-muted); }

/* Campo con error: el borde también, no solo el texto rojo (el texto dice qué pasa) */
.lt-herr__campo:has(.lt-herr__error) .lt-herr__control,
.lt-herr__campo:has(.lt-herr__error) .lt-herr-reclamacion__importe,
.lt-herr-reclamacion__relato-caja:has(.lt-herr__error) .lt-herr-reclamacion__relato { border-color: var(--herr-error-ink); }

/* --------------------------------------------------------------------------
   2. Paso 02: preguntas cerradas, importes y relato
   -------------------------------------------------------------------------- */
.lt-herr-reclamacion__preguntas { display: flex; flex-direction: column; gap: 24px; }
.lt-herr-reclamacion__pregunta { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.lt-herr-reclamacion__pregunta-titulo { margin: 0; padding: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--herr-ink); }
/* 20-10: 180 px (antes 200) para que cinco opciones quepan en una fila y la quinta no quede sola */
.lt-herr-reclamacion__pregunta .lt-herr__tipos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; }
.lt-herr-reclamacion__pregunta .lt-herr__tipo--mini { min-height: 52px; justify-content: center; }

/* Casillas (respuesta múltiple): misma tarjeta que el radio, con cuadro en vez de punto */
.lt-herr-reclamacion__cuadro {
  flex: none; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border: 1.5px solid var(--herr-border-fuerte); border-radius: 6px; background: var(--herr-surface);
  transition: background .2s, border-color .2s;
}
.lt-herr-reclamacion__cuadro svg { opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.lt-herr__tipo:has(input:checked) .lt-herr-reclamacion__cuadro { border-color: var(--herr-ink); background: var(--herr-ink); color: #fff; }
.lt-herr__tipo:has(input:checked) .lt-herr-reclamacion__cuadro svg { opacity: 1; transform: scale(1); }

/* Importe: el número y la moneda en la misma caja (€, S/, $) */
.lt-herr-reclamacion__importe {
  display: flex; align-items: stretch; 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-reclamacion__importe:focus-within { border-color: var(--herr-ink); box-shadow: 0 0 0 4px rgba(22, 32, 46, .08); }
.lt-herr-reclamacion__importe .lt-herr__control {
  flex: 1; min-width: 0; height: 100%; border: 0; border-radius: 0; box-shadow: none;
  font-family: var(--herr-font-head); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.lt-herr-reclamacion__importe .lt-herr__control:focus { box-shadow: none; }
.lt-herr-reclamacion__moneda {
  flex: none; display: flex; align-items: center; padding: 0 14px; border-left: 1px solid var(--herr-divider);
  background: var(--herr-canvas); font-family: var(--herr-font-head); font-size: 16px; font-weight: 600; color: var(--herr-text-2);
}

/* Relato libre con contador */
.lt-herr-reclamacion__relato-caja { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lt-herr-reclamacion__relato {
  display: block; width: 100%; min-height: 148px; max-height: 60vh; padding: 12px 14px; resize: vertical;
  border: 1.5px solid var(--herr-border); border-radius: var(--herr-r-ctl); background: var(--herr-surface);
  font-size: 16px; line-height: 1.55; color: var(--herr-ink); field-sizing: content;
  transition: border-color .2s, box-shadow .2s;
}
.lt-herr-reclamacion__relato:focus { outline: none; border-color: var(--herr-ink); box-shadow: 0 0 0 4px rgba(22, 32, 46, .08); }
.lt-herr-reclamacion__relato::placeholder { color: var(--herr-muted); }
.lt-herr-reclamacion__relato-pie { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.lt-herr-reclamacion__relato-pie .lt-herr-reclamacion__ayuda-campo { flex: 1 1 220px; }
.lt-herr-reclamacion__contador {
  flex: none; margin: 0; font-family: var(--herr-font-head); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--herr-muted);
}
.lt-herr-reclamacion__contador.is-cerca { color: var(--herr-banda-ink); }
.lt-herr-reclamacion__contador.is-lleno { color: var(--herr-error-ink); }

/* --------------------------------------------------------------------------
   3. Paso 03: lo que pides
   -------------------------------------------------------------------------- */
.lt-herr-reclamacion__pides { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* Importe que calcula el servidor: se lee, no se escribe */
.lt-herr-reclamacion__calculado {
  display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 16px 18px;
  border-radius: 14px; background: var(--herr-canvas); border: 1px solid var(--herr-divider);
}
.lt-herr-reclamacion__calculado dt { font-size: 13px; font-weight: 600; color: var(--herr-text-2); }
.lt-herr-reclamacion__calculado dd { margin: 0; }
.lt-herr-reclamacion__cifra {
  display: block; font-family: var(--herr-font-head); font-size: clamp(30px, 4vw, 38px); font-weight: 700; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--herr-ink);
}
.lt-herr-reclamacion__cuenta { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--herr-muted); }

/* Plazo editable: .lt-herr__numero (−/+) de días hábiles, con la unidad y el rango debajo */
.lt-herr-reclamacion__plazo .lt-herr__numero .lt-herr__control { font-variant-numeric: tabular-nums; }
.lt-herr-reclamacion__plazo-unidad { margin: 0; font-size: 13px; line-height: 1.45; color: var(--herr-muted); }

/* Plazo legal (CO): un dato con su norma, sin control */
.lt-herr-reclamacion__dato-legal {
  display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 16px 18px;
  border-radius: 14px; background: var(--herr-canvas); border: 1px solid var(--herr-divider);
}
.lt-herr-reclamacion__dato-legal dt { font-size: 13px; font-weight: 600; color: var(--herr-text-2); }
.lt-herr-reclamacion__dato-legal dd { margin: 0; }
.lt-herr-reclamacion__dato-legal .lt-herr__norma { margin-top: 6px; }
.lt-herr-reclamacion__fijo {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--herr-text-2);
}

/* --------------------------------------------------------------------------
   4. Privacidad, consentimiento y envío del formulario
   -------------------------------------------------------------------------- */
.lt-herr-reclamacion__cierre { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding-top: 22px; border-top: 1px solid var(--herr-divider); }
.lt-herr-reclamacion__cierre > .lt-herr__calcular, .lt-herr-reclamacion__cierre > .lt-herr__orientativo { flex: none; }
@media (min-width: 768px) { .lt-herr-reclamacion__cierre > .lt-herr__calcular { align-self: flex-start; min-width: 340px; } }
.lt-herr-reclamacion__privacidad {
  margin: 0; max-width: 72ch; font-size: 14px; line-height: 1.6; color: var(--herr-ink-soft);
}
.lt-herr-reclamacion__privacidad a { color: var(--herr-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--herr-border-fuerte); text-underline-offset: 2px; }
.lt-herr-reclamacion__consentimiento {
  display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 12px 14px; cursor: pointer;
  border: 1.5px solid var(--herr-border); border-radius: var(--herr-r-ctl); background: var(--herr-canvas);
  font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--herr-ink); transition: border-color .2s, background .2s;
}
.lt-herr-reclamacion__consentimiento:has(input:checked) { border-color: var(--herr-ink); background: var(--herr-surface); }
.lt-herr-reclamacion__consentimiento:has(.lt-herr__error) { border-color: var(--herr-error-ink); }
.lt-herr-reclamacion__consentimiento input,
.lt-herr-reclamacion__cta-casilla input {
  flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--herr-ink); cursor: pointer;
}
.lt-herr-reclamacion__consentimiento input:focus-visible { outline: 3px solid var(--herr-primary); outline-offset: 2px; }
.lt-herr-reclamacion__consentimiento .lt-herr__error { margin-top: 6px; }

/* Botón «Redactar mi documento» mientras se redacta (con JS): mismo botón, sin saltos de tamaño */
.lt-herr__calcular.lt-herr-reclamacion--redactando,
.lt-herr__calcular.lt-herr-reclamacion--redactando:hover {
  background: var(--herr-ink); box-shadow: none; transform: none; cursor: progress;
}
.lt-herr-reclamacion__girando {
  flex: none; width: 18px; height: 18px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  border-radius: 999px; animation: lt-herr-reclamacion-girar .8s linear infinite;
}
@keyframes lt-herr-reclamacion-girar { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   5. Cargando (5–15 s, hasta 45): texto honesto, barra y la silueta del papel
   para que el documento aparezca en el mismo sitio, sin saltos.
   -------------------------------------------------------------------------- */
.lt-herr-reclamacion__cargando {
  display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 3vw, 34px);
  background: var(--herr-surface); border: 1px solid var(--herr-border); border-radius: var(--herr-r-card);
}
.lt-herr-reclamacion__cargando-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.lt-herr-reclamacion__cargando-h {
  margin: 0; font-family: var(--herr-font-head); font-size: clamp(20px, 2.2vw, 24px); font-weight: 600; color: var(--herr-ink);
}
.lt-herr-reclamacion__cargando-h:focus { outline: none; }
.lt-herr-reclamacion__segundos { margin: 0; font-family: var(--herr-font-head); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--herr-muted); }
.lt-herr-reclamacion__cargando-texto { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.55; color: var(--herr-ink-soft); }
.lt-herr-reclamacion__progreso { position: relative; height: 4px; overflow: hidden; border-radius: 4px; background: var(--herr-divider); }
.lt-herr-reclamacion__progreso span {
  position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 4px; background: var(--herr-primary);
  animation: lt-herr-reclamacion-ir 1.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes lt-herr-reclamacion-ir { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.lt-herr-reclamacion__silueta {
  display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 4vw, 40px);
  border: 1px solid var(--herr-divider); border-radius: 6px; background: var(--herr-canvas);
}
.lt-herr-reclamacion__silueta span { display: block; height: 10px; border-radius: 4px; background: var(--herr-hundido); }
.lt-herr-reclamacion__silueta span:nth-child(1) { width: 42%; }
.lt-herr-reclamacion__silueta span:nth-child(2) { width: 30%; margin-bottom: 14px; }
.lt-herr-reclamacion__silueta span:nth-child(3) { width: 96%; }
.lt-herr-reclamacion__silueta span:nth-child(4) { width: 88%; }
.lt-herr-reclamacion__silueta span:nth-child(5) { width: 92%; }
.lt-herr-reclamacion__silueta span:nth-child(6) { width: 60%; }

/* --------------------------------------------------------------------------
   6. Documento listo: cabecera, papel y columna de acciones
   Móvil: cabecera → papel → descargas → avisos.
   ≥ 992 px: papel a la izquierda; descargas y avisos a la derecha, fijas al bajar.
   -------------------------------------------------------------------------- */
.lt-herr-reclamacion__listo { display: flex; flex-direction: column; gap: 20px; }
.lt-herr-reclamacion__listo-cab { display: flex; flex-direction: column; gap: 8px; }
.lt-herr-reclamacion__listo-h {
  margin: 0; font-family: var(--herr-font-head); font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; line-height: 1.08;
  letter-spacing: -.02em; color: var(--herr-ink); text-wrap: balance;
}
.lt-herr-reclamacion__listo-h:focus { outline: none; }
.lt-herr-reclamacion__listo-h:focus-visible { outline: 3px solid var(--herr-primary); outline-offset: 3px; border-radius: 4px; }
.lt-herr-reclamacion__listo-texto { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.55; color: var(--herr-ink-soft); }

.lt-herr-reclamacion__documento { display: grid; gap: 20px; align-items: start; }
@media (min-width: 992px) {
  .lt-herr-reclamacion__documento { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
  .lt-herr-reclamacion__lateral { position: sticky; top: calc(var(--lt-header-h-effective, 0px) + 24px); }
}
.lt-herr-reclamacion__lateral { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Leyenda: qué es de la plantilla y qué se puede cambiar */
.lt-herr-reclamacion__leyenda { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.35; color: var(--herr-text-2); }
.lt-herr-reclamacion__leyenda li { display: flex; align-items: center; gap: 8px; }
.lt-herr-reclamacion__muestra { flex: none; width: 14px; height: 18px; border-radius: 2px; border: 1px solid var(--herr-border-fuerte); background: var(--herr-surface); } /* una hoja, no una casilla */
.lt-herr-reclamacion__muestra.is-editable { border-radius: 0 2px 2px 0; border: 0; background: var(--herr-canvas); box-shadow: inset 3px 0 0 var(--herr-primary); }

/* El papel. Radio pequeño a propósito: es una hoja, no una tarjeta. Texto a 16 px en móvil y
   sin zoom; la medida se limita a ~68 caracteres en escritorio. */
.lt-herr-reclamacion__papel-marco { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lt-herr-reclamacion__papel {
  position: relative; min-width: 0; padding: 26px 18px 22px;
  background: var(--herr-surface); border: 1px solid var(--herr-border); border-radius: 6px;
  box-shadow: 0 1px 0 var(--herr-border), 0 40px 70px -50px rgba(22, 32, 46, .45);
  font-size: 16px; line-height: 1.65; color: var(--herr-ink); overflow-wrap: anywhere;
}
@media (min-width: 768px) { .lt-herr-reclamacion__papel { padding: 52px clamp(36px, 6vw, 72px) 40px; font-size: 16.5px; } }
.lt-herr-reclamacion__papel > * { max-width: 68ch; }
.lt-herr-reclamacion__papel p { margin: 0 0 1em; }
.lt-herr-reclamacion__papel-partes { display: flex; flex-direction: column; gap: 14px; margin-bottom: 1.4em; }
.lt-herr-reclamacion__papel-partes p { margin: 0; }
.lt-herr-reclamacion__papel-lugar { text-align: right; }
.lt-herr-reclamacion__papel-asunto { font-weight: 700; }
/* Los epígrafes son texto de la plantilla («HECHOS», «PETICIÓN»…): se ven como en el PDF */
.lt-herr-reclamacion__papel-apartado {
  margin: 1.6em 0 .7em; font-family: var(--herr-font-head); font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--herr-ink);
}
.lt-herr-reclamacion__papel-firma { margin-top: 2em; }
.lt-herr-reclamacion__papel-firma p { margin: 0; }
.lt-herr-reclamacion__papel-firma .lt-herr-reclamacion__linea-firma { width: min(220px, 70%); height: 40px; border-bottom: 1px solid var(--herr-border-fuerte); margin-bottom: 6px; }
.lt-herr-reclamacion__papel-pie {
  margin: 2em 0 0; padding-top: 12px; border-top: 1px solid var(--herr-divider);
  font-size: 12.5px; line-height: 1.5; color: var(--herr-muted);
}
.lt-herr-reclamacion__papel .lt-herr-reclamacion__cita { text-decoration: underline; text-decoration-color: var(--herr-border-fuerte); text-underline-offset: 3px; }

/* Las dos secciones editables (Hechos y Petición). Se salen un poco del margen del papel para
   que la raya roja marque «esto es tuyo» sin estrechar el texto. El textarea crece con el texto:
   nunca hay un scroll dentro de otro. */
.lt-herr-reclamacion__editable {
  margin: 0 -10px 1em; padding: 10px 10px 12px 14px; border-radius: 0 10px 10px 0;
  background: var(--herr-canvas); box-shadow: inset 3px 0 0 var(--herr-primary);
}
@media (min-width: 768px) { .lt-herr-reclamacion__editable { margin: 0 -20px 1em; padding: 12px 16px 14px 20px; } }
.lt-herr-reclamacion__editable-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.lt-herr-reclamacion__editable-etiqueta {
  margin: 0; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--herr-text-2);
}
.lt-herr-reclamacion__editado {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--herr-cuenta-bg); color: var(--herr-cuenta-ink); font-size: 12.5px; font-weight: 700;
}
.lt-herr-reclamacion__editado[hidden] { display: none; }
.lt-herr-reclamacion__editable-texto {
  display: block; width: 100%; min-height: 8lh; padding: 10px 12px; resize: vertical;
  border: 1.5px dashed var(--herr-border-fuerte); border-radius: 8px; background: var(--herr-surface);
  font-size: inherit; line-height: inherit; color: var(--herr-ink); field-sizing: content;
  transition: border-color .2s, box-shadow .2s;
}
.lt-herr-reclamacion__editable-texto.is-corto { min-height: 4lh; }
.lt-herr-reclamacion__editable-texto:hover { border-style: solid; }
.lt-herr-reclamacion__editable-texto:focus { outline: none; border-style: solid; border-color: var(--herr-ink); box-shadow: 0 0 0 4px rgba(22, 32, 46, .08); }
.lt-herr-reclamacion__editable-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: 6px; }
.lt-herr-reclamacion__editable-pie p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--herr-muted); }
.lt-herr-reclamacion__restaurar {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: transparent;
  font-size: 13.5px; font-weight: 700; color: var(--herr-ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--herr-border-fuerte); cursor: pointer;
}
.lt-herr-reclamacion__restaurar:focus-visible { outline: 3px solid var(--herr-primary); outline-offset: 2px; border-radius: 4px; }
.lt-herr-reclamacion__restaurar[hidden] { display: none; }

/* Aviso de orientativo + IA pegado al papel (no en otro sitio de la página) */
.lt-herr-reclamacion__aviso-doc { margin: 0; }
.lt-herr-reclamacion__aviso-doc strong { color: var(--herr-ink); }

/* Degradado sin IA: neutro, no es un error */
.lt-herr-reclamacion__degradado {
  display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 14px 16px; border-radius: 11px;
  background: var(--herr-hundido); box-shadow: inset 3px 0 0 var(--herr-ink);
  font-size: 14.5px; line-height: 1.55; color: var(--herr-ink-soft);
}
.lt-herr-reclamacion__degradado strong { display: block; color: var(--herr-ink); }

/* Columna de acciones */
.lt-herr-reclamacion__descargas {
  display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--herr-border);
  border-radius: 18px; background: var(--herr-surface);
}
.lt-herr-reclamacion__descargas-titulo { margin: 0; font-family: var(--herr-font-head); font-size: 17px; font-weight: 600; color: var(--herr-ink); }
.lt-herr-reclamacion__descargas-texto { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--herr-text-2); }
.lt-herr-reclamacion__descargas .lt-herr__calcular { flex: none; width: 100%; height: 54px; font-size: 16px; }
.lt-herr-reclamacion__descargas .lt-herr__boton-sec { width: 100%; min-height: 50px; font-size: 15px; }
.lt-herr-reclamacion__descargas form { margin: 0; }
.lt-herr-reclamacion__revision { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--herr-muted); }
.lt-herr-reclamacion__lateral .lt-herr__notas { gap: 8px; }
.lt-herr-reclamacion .lt-herr__nota a { color: var(--herr-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--herr-border-fuerte); text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   7. Bloqueado (caso penal / amenaza) y caducado (pasaron las 2 h)
   -------------------------------------------------------------------------- */
.lt-herr-reclamacion__estado {
  display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 3vw, 34px);
  background: var(--herr-surface); border: 1px solid var(--herr-border); border-radius: var(--herr-r-card);
}
.lt-herr-reclamacion__estado-h {
  margin: 0; font-family: var(--herr-font-head); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.12;
  letter-spacing: -.015em; color: var(--herr-ink);
}
.lt-herr-reclamacion__estado-h:focus { outline: none; }
.lt-herr-reclamacion__estado p { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.55; color: var(--herr-ink-soft); }
.lt-herr-reclamacion__estado .lt-herr__cta { margin-top: 8px; }
.lt-herr-reclamacion__estado-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* --------------------------------------------------------------------------
   8. Cómo se envía: aquí sí hay secuencia, así que los pasos van numerados
   -------------------------------------------------------------------------- */
.lt-herr-reclamacion__envio {
  display: grid; gap: 20px; margin-top: 28px; padding: clamp(20px, 3vw, 34px);
  background: var(--herr-surface); border: 1px solid var(--herr-border); border-radius: var(--herr-r-card);
}
@media (min-width: 992px) { .lt-herr-reclamacion__envio { grid-template-columns: minmax(220px, 1fr) 2fr; gap: 40px; } }
.lt-herr-reclamacion__envio-cab { display: flex; flex-direction: column; gap: 10px; }
.lt-herr-reclamacion__envio-h { margin: 0; font-family: var(--herr-font-head); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.1; letter-spacing: -.015em; color: var(--herr-ink); }
.lt-herr-reclamacion__envio-texto { margin: 0; font-size: 15px; line-height: 1.55; color: var(--herr-ink-soft); }
.lt-herr-reclamacion__coste { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; }
.lt-herr-reclamacion__coste dt { font-size: 13px; font-weight: 600; color: var(--herr-text-2); }
.lt-herr-reclamacion__coste dd { margin: 0; font-family: var(--herr-font-head); font-size: 22px; font-weight: 600; color: var(--herr-ink); }
.lt-herr-reclamacion__coste dd small { display: block; font-family: var(--herr-font-body); font-size: 12.5px; font-weight: 500; color: var(--herr-muted); }
.lt-herr-reclamacion__pasos-envio { margin: 0; padding: 0; list-style: none; counter-reset: envio; }
.lt-herr-reclamacion__paso-envio {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0 0 20px 46px; counter-increment: envio;
}
.lt-herr-reclamacion__paso-envio::before {
  content: counter(envio); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px; background: var(--herr-ink); color: #fff;
  font-family: var(--herr-font-head); font-size: 14px; font-weight: 700;
}
/* El hilo entre pasos */
.lt-herr-reclamacion__paso-envio:not(:last-child)::after {
  content: ''; position: absolute; left: 14.5px; top: 36px; bottom: 6px; width: 1px; background: var(--herr-border);
}
.lt-herr-reclamacion__paso-envio:last-child { padding-bottom: 0; }
.lt-herr-reclamacion__paso-envio-h { margin: 3px 0 0; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--herr-ink); }
.lt-herr-reclamacion__paso-envio p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--herr-ink-soft); }
.lt-herr-reclamacion__canal { align-self: flex-start; margin-top: 8px; gap: 8px; }
.lt-herr-reclamacion__canal svg { flex: none; }

/* --------------------------------------------------------------------------
   9. CTA oscuro con la casilla «Enviar mi documento al abogado»
   Es el .lt-herr__cta de siempre, convertido en <form> (POST con la casilla).
   -------------------------------------------------------------------------- */
.lt-herr__cta.lt-herr-reclamacion__cta { align-items: flex-end; margin-top: 28px; }
.lt-herr-reclamacion__cta-texto { flex: 1 1 340px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lt-herr-reclamacion__cta-texto .lt-herr__cta-titulo { flex: none; }
.lt-herr-reclamacion__cta-sub { margin: 0; font-size: 15px; line-height: 1.55; color: var(--herr-on-dark); }
.lt-herr-reclamacion__cta-casilla {
  display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 12px 14px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--herr-r-ctl);
  font-size: 15px; font-weight: 600; line-height: 1.4; color: #fff;
}
.lt-herr-reclamacion__cta-casilla small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--herr-on-dark); }
.lt-herr-reclamacion__cta-casilla input { accent-color: var(--herr-primary); }
.lt-herr-reclamacion__cta-casilla:has(input:checked) { border-color: rgba(255, 255, 255, .5); }
.lt-herr-reclamacion__cta-casilla input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lt-herr-reclamacion__cta button.lt-herr__cta-boton { border: 0; cursor: pointer; }
@media (max-width: 575.98px) {
  .lt-herr__cta.lt-herr-reclamacion__cta { padding: 22px 18px; }
  .lt-herr-reclamacion__cta .lt-herr__cta-boton { width: 100%; }
}

/* --------------------------------------------------------------------------
   10. Barra fija del móvil: el .lt-herr__dock de siempre con dos estados más
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .lt-herr__dock.lt-herr-reclamacion--dock-cargando .lt-herr__dock-estado strong { color: var(--herr-ink); }
  .lt-herr__dock.lt-herr-reclamacion--dock-cargando .lt-herr__dock-boton { background: var(--herr-ink); gap: 8px; cursor: progress; }
  .lt-herr__dock .lt-herr-reclamacion__dock-sec { background: var(--herr-surface); color: var(--herr-ink); box-shadow: inset 0 0 0 1.5px var(--herr-border-fuerte); }
  /* Con tres cosas en 360 px: el estado arriba a todo el ancho, los botones debajo y repartidos */
  .lt-herr__dock.lt-herr-reclamacion--dock-doble .lt-herr__dock-estado { flex-basis: 100%; }
  .lt-herr__dock.lt-herr-reclamacion--dock-doble .lt-herr__dock-acciones { flex: 1 1 100%; margin-left: 0; }
  .lt-herr__dock.lt-herr-reclamacion--dock-doble .lt-herr__dock-acciones > * { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lt-herr-reclamacion__progreso span { animation: none; width: 100%; opacity: .35; }
  .lt-herr-reclamacion__girando { animation: none; border-color: #fff; }
}

/* --------------------------------------------------------------------------
   11. Ajustes al HTML real (Task 10)
   -------------------------------------------------------------------------- */
/* «Cambiar» en la raíz con formulario: la fila es un <details> que abre las otras tarjetas (sin JS) */
details.lt-herr-reclamacion__tipo-elegido { display: block; padding: 0; }
details.lt-herr-reclamacion__tipo-elegido > summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 12px 12px 12px 16px; list-style: none; cursor: pointer; border-radius: 14px;
}
details.lt-herr-reclamacion__tipo-elegido > summary::-webkit-details-marker { display: none; }
details.lt-herr-reclamacion__tipo-elegido > summary:focus-visible { outline: 3px solid var(--herr-primary); outline-offset: 2px; }
details.lt-herr-reclamacion__tipo-elegido[open] > summary .lt-herr__boton-sec { border-color: var(--herr-ink); }
.lt-herr-reclamacion__otros-tipos { padding: 4px 12px 12px; }
.lt-herr-reclamacion__otros-tipos .lt-herr__tipo { background: var(--herr-surface); }

/* Pregunta con error: el borde de las tarjetas también */
.lt-herr-reclamacion__pregunta:has(> .lt-herr__error) .lt-herr__tipo { border-color: var(--herr-error-ink); }
.lt-herr-reclamacion__pregunta > .lt-herr-reclamacion__ayuda-campo { margin-top: -4px; }

/* Coste: en el país es una frase con la tarifa, no una cifra suelta */
.lt-herr-reclamacion__coste dd.lt-herr-reclamacion__coste-texto {
  font-family: var(--herr-font-body); font-size: 15px; font-weight: 600; line-height: 1.5;
}
.lt-herr-reclamacion__coste dd.lt-herr-reclamacion__coste-texto small { margin-top: 4px; }

/* Pasos del envío: cada paso es una frase */
.lt-herr-reclamacion__paso-envio .lt-herr-reclamacion__paso-envio-h {
  margin-top: 4px; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--herr-ink);
}

/* El botón del estado caducado puede ser un enlace (sin JS) */
.lt-herr-reclamacion a.lt-herr__calcular, .lt-herr-reclamacion a.lt-herr__calcular:link, .lt-herr-reclamacion a.lt-herr__calcular:visited { color: #fff; text-decoration: none; }
.lt-herr-reclamacion__estado-acciones .lt-herr__calcular { flex: 0 1 auto; }

/* El plazo legal sin cifra todavía (CO: depende de lo que pidas) */
.lt-herr-reclamacion__dato-legal .lt-herr-reclamacion__cuenta { margin-top: 0; }

/* Barra fija con dos botones: «Ver» en blanco y la acción principal en rojo, como en la maqueta */
@media (max-width: 767.98px) {
  .lt-herr__dock.lt-herr-reclamacion--dock-doble .lt-herr__dock-boton:not(.lt-herr-reclamacion__dock-sec) {
    background: var(--herr-primary); color: #fff; box-shadow: none;
  }
}

/* Columna de descargas en escritorio (20-10): se fija entera (descarga, CTA y enlace al envío). Antes se
   fijaba solo la caja de descarga y la CTA y los avisos pasaban por detrás; los avisos ahora van bajo el
   papel. Con poca altura de ventana no se fija, para que nada quede fuera de la pantalla. */
@media (min-width: 992px) {
  .lt-herr-reclamacion__lateral { position: static; }
}
@media (min-width: 992px) and (min-height: 780px) {
  .lt-herr-reclamacion__lateral { position: sticky; top: calc(var(--lt-header-h-effective, 0px) + 18px); }
}
@media (min-width: 992px) {
  .lt-herr-reclamacion__papel-marco { grid-column: 1; grid-row: 1; }
  .lt-herr-reclamacion__lateral { grid-column: 2; grid-row: 1 / span 2; }
  .lt-herr-reclamacion__documento > .lt-herr__notas { grid-column: 1; grid-row: 2; }
}

/* CTA oscuro dentro del estado «bloqueado»: el gris de los párrafos del estado no le aplica */
.lt-herr-reclamacion__estado .lt-herr__cta-titulo { color: #fff; max-width: none; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; }
.lt-herr-reclamacion__estado .lt-herr-reclamacion__cta-sub { color: var(--herr-on-dark); font-size: 15px; }

/* Ronda 1 de revisión (Task 10) */
/* El consentimiento: el error va fuera de la etiqueta (nombre accesible limpio); el borde rojo, igual */
.lt-herr-reclamacion__consentimiento-caja {
  display: flex; flex-direction: column; gap: 6px;
  scroll-margin-top: calc(var(--lt-header-h-effective, 0px) + 12px);
  scroll-margin-bottom: calc(var(--herr-dock-h, 0px) + 12px);
}
.lt-herr-reclamacion__consentimiento-caja:has(> .lt-herr__error) .lt-herr-reclamacion__consentimiento { border-color: var(--herr-error-ink); }
.lt-herr-reclamacion__consentimiento-caja > .lt-herr__error { margin: 0 0 0 14px; }

/* Muestra «texto de la plantilla» de la leyenda: una hoja con renglones, no una casilla */
.lt-herr-reclamacion__muestra:not(.is-editable) {
  border: 0; border-radius: 2px;
  background:
    linear-gradient(var(--herr-border-fuerte), var(--herr-border-fuerte)) 3px 4px / 8px 1.5px no-repeat,
    linear-gradient(var(--herr-border-fuerte), var(--herr-border-fuerte)) 3px 8px / 8px 1.5px no-repeat,
    linear-gradient(var(--herr-border-fuerte), var(--herr-border-fuerte)) 3px 12px / 5px 1.5px no-repeat,
    var(--herr-surface);
  box-shadow: 0 1px 3px rgba(22, 32, 46, .28);
}

/* Avisos con foco (reCAPTCHA, límite): el JS les da el foco al llegar */
.lt-herr-reclamacion [data-herr-mensaje]:focus { outline: none; }
.lt-herr-reclamacion [data-herr-mensaje]:focus-visible { outline: 3px solid var(--herr-primary); outline-offset: 2px; }

/* Ola final */
/* Barra con dos botones a 360-390 px: «Ver» a su ancho y la acción con el resto; si aun así no
   cabe, el texto pasa a dos líneas en vez de cortarse por los lados («ue lo revise un abogad»). */
@media (max-width: 767.98px) {
  .lt-herr__dock.lt-herr-reclamacion--dock-doble .lt-herr__dock-acciones > .lt-herr-reclamacion__dock-sec { flex: 0 0 auto; }
  .lt-herr__dock.lt-herr-reclamacion--dock-doble .lt-herr__dock-boton:not(.lt-herr-reclamacion__dock-sec) {
    flex: 1 1 auto; min-width: 0; white-space: normal; text-align: center; line-height: 1.2; padding: 6px 14px;
  }
}
/* Botón oscuro del CTA: 44 px de alto como mínimo, en móvil y en escritorio */
.lt-herr-reclamacion__cta button.lt-herr__cta-boton { min-height: 48px; line-height: 1.2; }

/* ==========================================================================
   Ronda de diseño (REVISION.md, 18-10-2026). Solo dentro de .lt-herr-reclamacion.
   ========================================================================== */
/* I5. Bordes de controles con contraste ≥ 3:1 (WCAG 1.4.11): #8C857C da 3,65:1 sobre blanco y 3,35:1
   sobre el canvas. Las tarjetas siguen con el filete suave; el círculo, el cuadro y el borde del
   campo son lo que hay que ver. Días hábiles usa el borde suave: unificar al integrar. */
.lt-herr-reclamacion { --herr-border-control: #8C857C; }
.lt-herr-reclamacion .lt-herr__control,
.lt-herr-reclamacion .lt-herr__numero,
.lt-herr-reclamacion .lt-herr-reclamacion__importe,
.lt-herr-reclamacion .lt-herr-reclamacion__relato,
.lt-herr-reclamacion .lt-herr__punto,
.lt-herr-reclamacion .lt-herr-reclamacion__cuadro { border-color: var(--herr-border-control); }
.lt-herr-reclamacion .lt-herr__numero .lt-herr__control,
.lt-herr-reclamacion .lt-herr-reclamacion__importe .lt-herr__control { border-color: transparent; }
.lt-herr-reclamacion .lt-herr__control:focus,
.lt-herr-reclamacion .lt-herr__numero:focus-within,
.lt-herr-reclamacion .lt-herr-reclamacion__importe:focus-within,
.lt-herr-reclamacion .lt-herr-reclamacion__relato:focus { border-color: var(--herr-ink); }
.lt-herr-reclamacion .lt-herr__campo:has(.lt-herr__error) .lt-herr__control,
.lt-herr-reclamacion .lt-herr__campo:has(.lt-herr__error) .lt-herr-reclamacion__importe { border-color: var(--herr-error-ink); }
.lt-herr-reclamacion .lt-herr-reclamacion__consentimiento input,
.lt-herr-reclamacion .lt-herr-reclamacion__cta-casilla input { outline-color: var(--herr-primary); }

/* C1. Ni el campo enfocado ni el contador del relato quedan bajo la barra fija: margen de
   desplazamiento con la altura de la barra (la mide el JS en --herr-dock-h). Unificar al integrar. */
html:has(.lt-herr-reclamacion) { scroll-padding-bottom: calc(var(--herr-dock-h, 0px) + 16px); }
.lt-herr-reclamacion :is(input, textarea, select) {
  scroll-margin-top: calc(var(--lt-header-h-effective, 0px) + 12px);
  scroll-margin-bottom: calc(var(--herr-dock-h, 0px) + 16px);
}
.lt-herr-reclamacion__relato { scroll-margin-bottom: calc(var(--herr-dock-h, 0px) + 56px); }

/* I2. Documento desfasado («Has cambiado los datos»): se ve que es de antes y no se descarga */
.lt-herr-reclamacion__desfasado { display: none; }
.lt-herr-reclamacion__listo.is-desfasado .lt-herr-reclamacion__desfasado {
  display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 12px 14px; border-radius: 11px;
  background: var(--herr-hundido); box-shadow: inset 3px 0 0 var(--herr-ink);
  font-size: 14.5px; line-height: 1.5; color: var(--herr-ink);
}
.lt-herr-reclamacion__listo.is-desfasado .lt-herr-reclamacion__papel { opacity: .55; }
.lt-herr-reclamacion__listo.is-desfasado .lt-herr-reclamacion__descargas button[aria-disabled="true"] {
  background: var(--herr-hundido); color: var(--herr-text-2); box-shadow: none; border-color: transparent; cursor: not-allowed;
  transform: none;
}
.lt-herr-reclamacion__nota-descarga { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--herr-ink); }
.lt-herr-reclamacion__nota-descarga[hidden] { display: none; }

/* I3. Barra en el estado de lectura: una sola línea compacta (≤ 64 px) */
@media (max-width: 767.98px) {
  .lt-herr__dock.lt-herr-reclamacion--dock-compacta { flex-wrap: nowrap; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .lt-herr__dock.lt-herr-reclamacion--dock-compacta .lt-herr__dock-estado { flex: 1 1 auto; }
  .lt-herr__dock.lt-herr-reclamacion--dock-compacta .lt-herr__dock-estado strong { display: inline; font-size: 16px; }
  .lt-herr__dock.lt-herr-reclamacion--dock-compacta .lt-herr__dock-boton {
    flex: 0 1 auto; min-height: 44px; white-space: normal; text-align: center; line-height: 1.2; padding: 6px 14px;
    background: var(--herr-primary); color: #fff; box-shadow: none;
  }
  /* Menor 11: el «Redactar» desactivado de la barra llega a 4,86:1 (#5B6472 sobre el hundido) */
  .lt-herr-reclamacion .lt-herr__dock-boton[aria-disabled="true"] { color: var(--herr-text-2); }
}

/* Menores */
/* Medida del papel en escritorio: ~68 caracteres por línea (la ch de Manrope es más ancha que su letra media) */
@media (min-width: 768px) {
  .lt-herr-reclamacion__papel > * { max-width: 31em; }
  .lt-herr-reclamacion__papel > .lt-herr-reclamacion__editable { max-width: calc(31em + 40px); }
}
/* El índice de la guía: objetivos de 44 px */
.lt-herr-reclamacion .lt-herr__indice a { min-height: 44px; align-items: center; }
/* El error del consentimiento, alineado con el resto */
.lt-herr-reclamacion__consentimiento-caja > .lt-herr__error { margin-left: 0; }
/* El canal oficial, dentro de su paso del envío */
.lt-herr-reclamacion__paso-envio .lt-herr-reclamacion__canal { margin-top: 10px; }

/* Última ronda de diseño (re-check de REVISION.md) */
/* Papel desfasado: 0,7 de opacidad y TODO su texto en tinta, para seguir ≥ 4,5:1 (medido: 6,2:1; el gris
   de las etiquetas y del pie bajaba a 2,9:1). */
.lt-herr-reclamacion__listo.is-desfasado .lt-herr-reclamacion__papel { opacity: .7; }
.lt-herr-reclamacion__listo.is-desfasado .lt-herr-reclamacion__papel,
.lt-herr-reclamacion__listo.is-desfasado .lt-herr-reclamacion__papel * { color: var(--herr-ink); }
/* Desfasado: la caja de descargas ya no promete «incluidos tus cambios» */
.lt-herr-reclamacion__listo.is-desfasado .lt-herr-reclamacion__descargas-texto { display: none; }
/* ≥ 992 px: la hoja mide lo que la columna de texto (31em) más sus márgenes; la columna lateral se queda
   con el resto, sin franja vacía dentro del papel. */
@media (min-width: 992px) {
  .lt-herr-reclamacion__documento { grid-template-columns: minmax(0, 660px) minmax(300px, 1fr); }
  .lt-herr-reclamacion__papel > * { max-width: none; }
  .lt-herr-reclamacion__papel > .lt-herr-reclamacion__editable { max-width: none; }
}

/* ==========================================================================
   Fase 2 (auditoría del 19-10-2026)
   ========================================================================== */

/* P1-9 (CLS): mientras se redacta, la salida ocupa la pantalla; lo de debajo no se ve ni salta. */
.lt-herr__salida.lt-herr-reclamacion--reservada { min-height: calc(100vh - var(--lt-header-h-effective, 0px)); }
/* La barra fija mide lo mismo leyendo que rellenando: cambiar de estado no la encoge. */
@media (max-width: 767.98px) {
  .lt-herr-reclamacion .lt-herr__dock { min-height: 68px; }
  .lt-herr-reclamacion .lt-herr__dock.lt-herr-reclamacion--dock-compacta { padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* P0-2: la CTA en la columna de las descargas. En escritorio la columna es estrecha: todo en columna. */
.lt-herr__cta.lt-herr-reclamacion__cta--lateral { margin-top: 0; flex-direction: column; align-items: stretch; gap: 14px; padding: 22px 20px; }
.lt-herr-reclamacion__cta--lateral .lt-herr-reclamacion__cta-texto { flex: none; }
.lt-herr-reclamacion__cta--lateral .lt-herr__cta-titulo { font-size: 19px; line-height: 1.25; }
.lt-herr-reclamacion__cta--lateral .lt-herr__cta-boton { width: 100%; }
.lt-herr-reclamacion__ir-envio { align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--herr-ink); text-decoration: underline; text-underline-offset: 3px; }
/* P0-2.3: «habla con un abogado» dentro de un aviso es un botón de la CTA con aspecto de enlace. */
.lt-herr-reclamacion__aviso-cta {
  display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 700;
  color: var(--herr-primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.lt-herr-reclamacion__aviso-cta:hover { color: var(--herr-primary-hover); }
.lt-herr-reclamacion__aviso-cta:focus-visible { outline: 3px solid var(--herr-primary); outline-offset: 2px; border-radius: 2px; }
/* P1-6 y pie de la landing: la CTA sin casilla */
.lt-herr__cta.lt-herr-reclamacion__cta--error { margin-top: 16px; }
.lt-herr__cta.lt-herr-reclamacion__cta--landing { margin-top: 56px; }

/* P0-1: el modelo en blanco */
.lt-herr-reclamacion__ejemplo { display: grid; gap: 24px; margin-top: 64px; scroll-margin-top: calc(var(--lt-header-h-effective, 0px) + 12px); }
@media (min-width: 992px) {
  .lt-herr-reclamacion__ejemplo { grid-template-columns: minmax(240px, 1fr) minmax(0, 660px); gap: 48px; align-items: start; }
  .lt-herr-reclamacion__ejemplo-cab { position: sticky; top: calc(var(--lt-header-h-effective, 0px) + 24px); }
}
.lt-herr-reclamacion__ejemplo-cab { display: flex; flex-direction: column; gap: 12px; }
.lt-herr-reclamacion__ejemplo-h { margin: 0; font-family: var(--herr-font-head); font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1.1; letter-spacing: -.015em; color: var(--herr-ink); }
.lt-herr-reclamacion__ejemplo-texto { margin: 0; font-size: 15px; line-height: 1.6; color: var(--herr-ink-soft); }
.lt-herr-reclamacion__ejemplo-acciones { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 4px; }
/* H49: las descargas del modelo en blanco son botones de 44 px, no dos enlaces de 19 px. */
.lt-herr-reclamacion__ejemplo-descargas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.lt-herr-reclamacion__ejemplo-descargas .lt-herr__boton-sec { gap: 8px; min-height: 44px; padding: 10px 14px; }
/* H12: el hub enseña una tarjeta por modelo. */
.lt-herr-reclamacion__modelos-lista { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .lt-herr-reclamacion__modelos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lt-herr-reclamacion__modelo {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1.5px solid var(--herr-border);
  border-radius: 14px; background: var(--herr-surface);
}
.lt-herr-reclamacion__modelo-h { margin: 0; font-size: 17px; line-height: 1.3; }
.lt-herr-reclamacion__modelo-h a { color: var(--herr-ink); text-decoration: underline; text-underline-offset: 3px; }
.lt-herr-reclamacion__modelo-extracto { flex: 1; margin: 0; font-size: 14px; line-height: 1.5; color: var(--herr-text-2); }
/* H30: el resumen de la guía en las variantes. */
.lt-herr-reclamacion__guia-resumen { margin: 32px 0; padding: 16px 18px; border-left: 3px solid var(--herr-primary); background: var(--herr-canvas); border-radius: 0 12px 12px 0; }
.lt-herr-reclamacion__guia-resumen-h { margin: 0 0 6px; font-size: 18px; }
.lt-herr-reclamacion__guia-resumen p { margin: 0; }
.lt-herr-reclamacion__guia-resumen a { font-weight: 700; color: var(--herr-ink); }
.lt-herr-reclamacion__papel--ejemplo { font-size: 15.5px; }
.lt-herr-reclamacion__hueco {
  margin: 0 -10px 1em !important; padding: 10px 12px 10px 14px; border-radius: 0 10px 10px 0;
  background: var(--herr-canvas); box-shadow: inset 3px 0 0 var(--herr-primary); color: var(--herr-ink-soft); font-style: italic;
}

/* P1-2: cuánto cuesta enviarlo (tabla con fuente y fecha) */
.lt-herr-reclamacion__envio { margin-top: 56px; scroll-margin-top: calc(var(--lt-header-h-effective, 0px) + 12px); }
.lt-herr-reclamacion__envio-cuerpo { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.lt-herr-reclamacion__costes { width: 100%; border-collapse: collapse; font-size: 15px; }
.lt-herr-reclamacion__costes caption { caption-side: top; padding: 0 0 8px; text-align: left; font-family: var(--herr-font-head); font-size: 18px; font-weight: 700; color: var(--herr-ink); }
.lt-herr-reclamacion__costes th, .lt-herr-reclamacion__costes td { padding: 10px 0; border-bottom: 1px solid var(--herr-divider); text-align: left; vertical-align: top; }
.lt-herr-reclamacion__costes thead th { font-size: 13px; font-weight: 600; color: var(--herr-text-2); }
.lt-herr-reclamacion__costes tbody th { font-weight: 500; color: var(--herr-ink-soft); padding-right: 12px; }
.lt-herr-reclamacion__costes td { font-family: var(--herr-font-head); font-weight: 700; color: var(--herr-ink); white-space: nowrap; text-align: right; }
.lt-herr-reclamacion__costes thead th:last-child { text-align: right; }
.lt-herr-reclamacion__costes-nota { margin: 0; font-size: 13px; line-height: 1.5; color: var(--herr-muted); }
.lt-herr-reclamacion__costes-nota a { color: inherit; text-decoration: underline; }

/* P2-3: otros modelos y herramientas relacionadas */
.lt-herr-reclamacion__relacionadas { margin-top: 56px; }
.lt-herr-reclamacion__relacionadas-h { margin: 0 0 14px; font-family: var(--herr-font-head); font-size: 22px; font-weight: 700; color: var(--herr-ink); }
.lt-herr-reclamacion__relacionadas-lista { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lt-herr-reclamacion__relacionadas-lista a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--herr-border);
  border-radius: 999px; background: var(--herr-surface); font-size: 15px; font-weight: 600; color: var(--herr-ink); text-decoration: none;
}
.lt-herr-reclamacion__relacionadas-lista a:hover { border-color: var(--herr-border-fuerte); text-decoration: underline; }
.lt-herr-reclamacion__ejemplo-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px;
  border: 0; border-radius: 14px; background: var(--herr-primary); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none;
}
.lt-herr a.lt-herr-reclamacion__ejemplo-boton:hover { background: var(--herr-primary-hover); color: #fff; text-decoration: none; }
.lt-herr a.lt-herr-reclamacion__ejemplo-boton, .lt-herr a.lt-herr-reclamacion__ejemplo-boton:visited { color: #fff; }