/* ============================================================
   Asistente de Pre-envío de Evidencia — Kushki
   Rediseño 2026: moderno, refrescante y animado.
   Identidad: azul Kushki #023365 · menta #00FCC1 · IBM Plex Sans.
   ============================================================ */

:root {
  --azul: #023365;
  --azul-900: #011f3f;
  --azul-700: #0a4a8f;
  --azul-500: #1a5fa4;
  --menta: #00fcc1;
  --menta-oscuro: #00c99a;
  --menta-suave: #d6fff6;
  --tinta: #0f2540;
  --texto: #3d5570;
  --texto-suave: #64748b;
  --fondo: #f4f8fd;
  --blanco: #ffffff;
  --linea: #dfe9f5;
  --celeste: #eef6ff;

  --ok: #059669;
  --ok-suave: #d9f6ec;
  --error: #e11d48;
  --error-suave: #ffe4ea;
  --ambar: #d97706;
  --ambar-suave: #fef3c7;
  /* Ámbar para TEXTO: el de arriba solo da 3,19:1 sobre blanco. */
  --ambar-texto: #b45309;
  --neutro: #64748b;
  --neutro-suave: #e2e8f0;

  --score-bajo: #e11d48;
  --score-medio: #d97706;
  --score-alto: #059669;

  --radio: 16px;
  --radio-sm: 10px;
  --sombra: 0 2px 4px rgba(2, 51, 101, 0.04), 0 12px 32px rgba(2, 51, 101, 0.08);
  --sombra-hover: 0 4px 8px rgba(2, 51, 101, 0.06), 0 20px 48px rgba(2, 51, 101, 0.14);
  --fuente: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  /* Dirección «El Expediente» (2026-08-21): Archivo SOLO en titulares. */
  --display: 'Archivo', 'IBM Plex Sans', -apple-system, sans-serif;
  /* Rojo sello: EXCLUSIVO del veredicto negativo. Nunca adorno. */
  --sello: #c8102e;
  --sello-suave: #fbe9ec;

  --transicion: 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
  --transicion-lenta: 420ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

* { box-sizing: border-box; }

/* El atributo hidden SIEMPRE gana, incluso sobre display:flex/grid de clases. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  background:
    radial-gradient(1200px 500px at 85% -100px, rgba(0, 252, 193, 0.07), transparent 60%),
    radial-gradient(900px 420px at -10% 10%, rgba(26, 95, 164, 0.06), transparent 55%),
    var(--fondo);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.contenedor {
  width: min(920px, calc(100% - 2.5rem));
  margin-inline: auto;
}

/* ---------- Animaciones base ---------- */

@keyframes aparecer {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes aparecer-suave {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-9px) rotate(var(--rot, 0deg)); }
}

@keyframes brillo-glow {
  0%, 100% { opacity: 0.55; transform: translate(0, 0) scale(1); }
  50% { opacity: 0.9; transform: translate(-4%, 6%) scale(1.08); }
}

@keyframes shimmer {
  from { background-position: -400px 0; }
  to { background-position: 400px 0; }
}

@keyframes laser {
  0%, 100% { top: 8%; opacity: 0.9; }
  50% { top: 86%; opacity: 1; }
}

@keyframes pulso {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}


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

.cabecera {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(720px 320px at 90% -40%, rgba(0, 252, 193, 0.22), transparent 60%),
    linear-gradient(130deg, var(--azul-900) 0%, var(--azul) 45%, var(--azul-700) 100%);
  color: var(--blanco);
  padding: 2.6rem 0 2.4rem;
}

.cabecera-glow {
  position: absolute;
  inset: -40% -20% auto auto;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(0, 252, 193, 0.16), transparent 65%);
  filter: blur(10px);
  animation: brillo-glow 9s ease-in-out infinite;
  pointer-events: none;
}

.cabecera::after {
  /* trama de puntos sutil sobre el hero */
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: linear-gradient(115deg, transparent 30%, black 85%);
  -webkit-mask-image: linear-gradient(115deg, transparent 30%, black 85%);
  pointer-events: none;
}

.cabecera-inner { position: relative; z-index: 1; }

.logo-kushki {
  font-weight: 700;
  letter-spacing: -0.4px;
  text-transform: none;
}

.marca-app {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--menta);
  animation: aparecer 0.5s var(--transicion) backwards;
}

.titulo-app {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: 'wdth' 116;
  font-size: clamp(1.8rem, 4.4vw, 2.6rem);
  font-weight: 850;
  letter-spacing: -0.015em;
  line-height: 1.06;
  text-wrap: balance;
  animation: aparecer 0.5s 60ms var(--transicion) backwards;
}

.subtitulo-app {
  margin: 0.7rem 0 0;
  max-width: 40rem;
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.78);
  animation: aparecer 0.5s 120ms var(--transicion) backwards;
}

.cabecera-stats {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.4rem;
  flex-wrap: wrap;
  animation: aparecer 0.5s 180ms var(--transicion) backwards;
}

.stat-pill {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
}

.stat-num {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--menta);
}

.stat-num.saltando { animation: pulso 0.5s ease; }

.stat-label {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.65);
}

/* ---------- Layout principal ---------- */

.principal {
  flex: 1;
  padding: 2rem 0 3.5rem;
}

.titulo-seccion {
  font-family: var(--display);
  font-variation-settings: 'wdth' 112;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--tinta);
  letter-spacing: -0.01em;
  margin: 0 0 0.3rem;
}

.titulo-seccion:focus { outline: none; }

/* ---------- Cards ---------- */

.card {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.6rem 1.7rem;
  margin-bottom: 1.3rem;
  animation: aparecer 0.45s var(--transicion) backwards;
  transition: box-shadow var(--transicion), transform var(--transicion);
}

.card-titulo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1.1rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 110;
  font-size: 1.06rem;
  font-weight: 800;
  color: var(--tinta);
}

.card-titulo > button { margin-left: auto; }

.num-paso {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--menta), #4de3c0);
  color: var(--azul-900);
  font-size: 0.92rem;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(0, 252, 193, 0.35);
}

/* ---------- Chips y badges ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.6rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip-tipo { background: var(--celeste); color: var(--azul-700); }
.chip-condicional { background: var(--ambar-suave); color: #92400e; }
.chip-marca { background: var(--neutro-suave); color: var(--texto); }
.chip-obligatorio { background: var(--azul); color: #fff; }
.chip-adicional { background: var(--celeste); color: var(--texto); }
.chip-opcional { background: var(--neutro-suave); color: var(--texto-suave); }
.chip-lake { background: var(--menta-suave); color: #065f46; }

.badge-estado {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-radius: var(--radio-sm);
  font-weight: 700;
  font-size: 0.95rem;
  margin-top: 0.9rem;
}

.badge-mini {
  display: inline-flex;
  padding: 0.14rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.badge-completo { background: var(--ok-suave); color: var(--ok); }
.badge-incompleto { background: var(--error-suave); color: var(--error); }
.badge-indeterminado { background: var(--ambar-suave); color: var(--ambar); }
.badge-sindoc { background: var(--ok-suave); color: var(--ok); }
.badge-noevaluado { background: var(--neutro-suave); color: var(--neutro); }
.badge-pendiente { background: var(--celeste); color: var(--azul-700); }
.badge-analizando { background: var(--menta-suave); color: #047857; }

/* ---------- Botones ---------- */

.btn {
  font-family: var(--fuente);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radio-sm);
  border: 1.5px solid transparent;
  padding: 0.62rem 1.25rem;
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion),
    background var(--transicion), color var(--transicion), border-color var(--transicion);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primario {
  background: linear-gradient(120deg, var(--azul) 10%, var(--azul-500));
  color: #fff;
  box-shadow: 0 6px 18px rgba(2, 51, 101, 0.28);
}

.btn-primario:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(2, 51, 101, 0.36);
}

.btn-primario:not(:disabled):active { transform: translateY(0) scale(0.985); }

.btn-secundario {
  background: var(--blanco);
  border-color: var(--linea);
  color: var(--azul);
}

.btn-secundario:not(:disabled):hover {
  border-color: var(--azul-500);
  background: var(--celeste);
  transform: translateY(-1px);
}

.btn-terciario {
  background: transparent;
  color: var(--texto-suave);
}

.btn-terciario:not(:disabled):hover { color: var(--azul); background: var(--celeste); }

.btn-grande { padding: 0.85rem 1.7rem; font-size: 1.03rem; border-radius: 14px; }

.btn-icono { font-size: 1.05em; }

.btn-volver { margin-bottom: 0.6rem; padding-left: 0.4rem; }

.btn-quitar {
  background: transparent;
  border: none;
  color: var(--texto-suave);
  font-family: var(--fuente);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.3rem 0.55rem;
  border-radius: 8px;
  transition: background var(--transicion), color var(--transicion);
}

.btn-quitar:hover { background: var(--error-suave); color: var(--error); }

/* ---------- Grid de casos (vista lote) ---------- */

.lote-encabezado { margin-bottom: 1.1rem; }

.lote-sub { margin: 0; color: var(--texto-suave); font-size: 0.95rem; }

.grid-casos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.caso-card {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.15rem 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  animation: aparecer 0.4s var(--transicion) backwards;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}

.caso-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-hover);
  border-color: #c9dcf2;
}

.caso-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: var(--radio) 0 0 var(--radio);
  background: var(--neutro-suave);
  transition: background var(--transicion);
}

.caso-card.estado-COMPLETO::before { background: var(--ok); }
.caso-card.estado-INCOMPLETO::before { background: var(--error); }
.caso-card.estado-INDETERMINADO::before { background: var(--ambar); }
.caso-card.estado-analizando::before {
  background: linear-gradient(180deg, var(--menta), var(--azul-500));
}

.caso-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.caso-num {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--texto-suave);
  letter-spacing: 0.06em;
}

.caso-titulo {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--tinta);
  line-height: 1.3;
}

.caso-desc {
  margin: 0;
  font-size: 0.82rem;
  color: var(--texto-suave);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}

.caso-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.78rem;
  color: var(--texto-suave);
}

.caso-score {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 0.9rem;
}

.caso-acciones {
  display: flex;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--linea);
}

.caso-acciones .btn { padding: 0.4rem 0.8rem; font-size: 0.83rem; }

.caso-spinner {
  width: 15px;
  height: 15px;
  border: 2.5px solid var(--menta-suave);
  border-top-color: var(--menta-oscuro);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

/* Tarjeta "agregar caso" */
.caso-agregar {
  border: 2px dashed #bfd4ec;
  border-radius: var(--radio);
  background: rgba(238, 246, 255, 0.5);
  min-height: 185px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--azul-700);
  font-family: var(--fuente);
  font-size: 0.95rem;
  font-weight: 600;
  transition: border-color var(--transicion), background var(--transicion), transform var(--transicion);
}

.caso-agregar:hover:not(:disabled) {
  border-color: var(--menta-oscuro);
  background: var(--menta-suave);
  transform: translateY(-2px);
}

.caso-agregar:disabled { opacity: 0.45; cursor: not-allowed; }

.caso-agregar .mas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--blanco);
  border: 1.5px solid var(--linea);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--azul);
  transition: transform var(--transicion), background var(--transicion);
}

.caso-agregar:hover:not(:disabled) .mas {
  transform: rotate(90deg) scale(1.08);
  background: var(--menta);
}

/* Estado vacío */
.lote-vacio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 1rem 0 0.4rem;
  color: var(--texto-suave);
  font-size: 0.92rem;
}

/* ---------- Intake masivo (arrastrar por ticket) ---------- */

.card-intake {
  background:
    radial-gradient(600px 200px at 90% -60px, rgba(0, 252, 193, 0.12), transparent),
    linear-gradient(160deg, var(--blanco) 60%, var(--menta-suave));
  border-color: #bfeee2;
}

.intake-ayuda { margin-bottom: 1rem; max-width: 60ch; }

.dropzone-lote { background: rgba(255, 255, 255, 0.6); }

.intake-manual {
  margin-top: 1rem;
  border-top: 1px dashed var(--linea);
  padding-top: 0.9rem;
}

.intake-manual summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--azul);
  list-style: none;
}

.intake-manual summary::-webkit-details-marker { display: none; }
.intake-manual summary::before { content: '＋ '; color: var(--menta-oscuro); }
.intake-manual[open] summary::before { content: '－ '; }

.intake-textarea {
  width: 100%;
  margin: 0.5rem 0;
  font-family: var(--mono);
  font-size: 0.85rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-sm);
  resize: vertical;
}

.intake-textarea:focus {
  outline: none;
  border-color: var(--azul-500);
  box-shadow: 0 0 0 4px rgba(26, 95, 164, 0.12);
}

.intake-progreso {
  margin-top: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--azul);
}

.intake-progreso .progreso-barra { flex: 1; max-width: 240px; }

.intake-novinculados:not(:empty) {
  margin-top: 0.9rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radio-sm);
  background: var(--ambar-suave);
  border: 1px solid #fcd679;
}

.intake-novinculados p { margin: 0 0 0.3rem; font-size: 0.85rem; color: #7c4a03; font-weight: 600; }
.intake-novinculados ul { margin: 0; padding-left: 1.1rem; font-size: 0.82rem; color: #7c4a03; }
.intake-novinculados code { font-family: var(--mono); font-size: 0.9em; }

/* Identificación autocompletada desde el lake (editor) */
.reason-autocompletado {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--menta-oscuro);
  border-radius: var(--radio-sm);
  background: var(--menta-suave);
  animation: aparecer 0.3s var(--transicion) backwards;
}

.reason-autocompletado .ra-icono { font-size: 1.2rem; flex: none; }
.reason-autocompletado .ra-cuerpo { flex: 1; }
.reason-autocompletado .ra-titulo { margin: 0; font-weight: 700; color: var(--tinta); font-size: 0.95rem; }
.reason-autocompletado .ra-sub { margin: 0.15rem 0 0; font-size: 0.82rem; color: #065f46; }
.reason-autocompletado .ra-cambiar {
  background: transparent;
  border: none;
  color: var(--azul);
  font-family: var(--fuente);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin-top: 0.35rem;
}

/* Con identificación autocompletada, se oculta la selección manual. */
#card-identifica.con-auto #reason-manual { display: none; }
#reason-auto:empty { display: none; }

/* ---------- Acciones del lote + resumen ---------- */

.lote-acciones {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.lote-acciones .ayuda { width: 100%; margin: 0.2rem 0 0; }

.resumen-lote {
  margin-top: 1.4rem;
  animation: aparecer 0.5s var(--transicion) backwards;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.85rem;
}

.kpi {
  background: linear-gradient(160deg, var(--blanco), var(--celeste));
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1rem 1.15rem;
  box-shadow: var(--sombra);
}

.kpi-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.kpi-valor {
  font-family: var(--mono);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--azul);
  line-height: 1.2;
}

.kpi-valor.ok { color: var(--ok); }
.kpi-valor.error { color: var(--error); }

/* ---------- Formulario del editor ---------- */

.campo { margin-bottom: 1.15rem; border: 0; padding: 0; }

fieldset.campo { margin-inline: 0; }

.etiqueta {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: 0.45rem;
  padding: 0;
}

.ayuda {
  font-size: 0.82rem;
  color: var(--texto-suave);
  margin: 0.4rem 0 0;
}

.ayuda-ambar { color: var(--ambar); font-weight: 500; }

/* Segmented de marcas */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.segmented-item { position: relative; cursor: pointer; }

.segmented-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented-item span {
  display: inline-flex;
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  border: 1.5px solid var(--linea);
  background: var(--blanco);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--texto);
  transition: all var(--transicion);
}

.segmented-item:hover span { border-color: var(--azul-500); color: var(--azul); }

.segmented-item input:checked + span {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
  box-shadow: 0 4px 14px rgba(2, 51, 101, 0.3);
  transform: translateY(-1px);
}

.segmented-item input:focus-visible + span {
  outline: 2px solid var(--menta-oscuro);
  outline-offset: 2px;
}

/* Combobox */
.combo { position: relative; }

.combo input,
.lake-busqueda input {
  width: 100%;
  font-family: var(--fuente);
  font-size: 0.95rem;
  color: var(--tinta);
  padding: 0.72rem 0.95rem;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-sm);
  background: var(--blanco);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.combo input:focus,
.lake-busqueda input:focus {
  outline: none;
  border-color: var(--azul-500);
  box-shadow: 0 0 0 4px rgba(26, 95, 164, 0.12);
}

.combo input:disabled { background: var(--celeste); color: var(--texto-suave); }

#lista-codigos {
  position: absolute;
  z-index: 30;
  inset: calc(100% + 6px) 0 auto;
  max-height: 21rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 14px;
  box-shadow: var(--sombra-hover);
  animation: aparecer 0.18s var(--transicion) backwards;
}

#lista-codigos li[role='option'] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: 9px;
  cursor: pointer;
  font-size: 0.88rem;
  transition: background 120ms ease;
}

#lista-codigos li[role='option']:hover,
#lista-codigos li[role='option'].activa {
  background: var(--celeste);
}

#lista-codigos li[aria-selected='true'] { background: var(--menta-suave); }

.grupo-listbox {
  padding: 0.55rem 0.7rem 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--texto-suave);
}

.sin-resultados { padding: 0.8rem 0.7rem; font-size: 0.85rem; color: var(--texto-suave); }

.opcion-principal { color: var(--tinta); }
.opcion-principal strong { color: var(--azul); }
.opcion-chips { display: inline-flex; gap: 0.3rem; flex: none; }

/* Radios */
.radios { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.radio-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.88rem;
  background: var(--blanco);
  transition: all var(--transicion);
}

.radio-item:hover { border-color: var(--azul-500); }

.radio-item:has(input:checked) {
  border-color: var(--azul);
  background: var(--celeste);
  font-weight: 600;
  color: var(--azul);
}

.radio-item input { accent-color: var(--azul); }

.pregunta-rama {
  animation: aparecer 0.35s var(--transicion) backwards;
  border-top: 1px dashed var(--linea) !important;
  padding-top: 1rem !important;
}

/* ---------- Lake lookup ---------- */

.card-lake {
  background: linear-gradient(150deg, var(--blanco) 55%, var(--menta-suave));
}

/* Pestaña pequeña, plegable, para buscar por ticket (respaldo opcional). */
.buscar-ticket {
  margin-top: 0.9rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-sm);
  background: var(--celeste);
  overflow: hidden;
}

.buscar-ticket > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--azul);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.buscar-ticket > summary::-webkit-details-marker { display: none; }

.buscar-ticket > summary::before {
  content: '🔎';
  font-size: 0.9rem;
}

.buscar-ticket[open] > summary { border-bottom: 1px solid var(--linea); }

.buscar-ticket > :not(summary) {
  padding: 0 0.85rem;
}

.buscar-ticket > .lake-busqueda { padding-bottom: 0.85rem; }

.buscar-ticket .ayuda { margin: 0.7rem 0 0; }

/* Estado de detección del contracargo bajo el dropzone. */
.deteccion-estado:empty { display: none; }

.deteccion-estado {
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

.deteccion-estado.buscando {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--azul);
}

.deteccion-estado.sin-match {
  border: 1px solid #fde68a;
  background: #fffbeb;
  border-radius: var(--radio-sm);
  padding: 0.75rem 0.9rem;
}

.deteccion-msg { margin: 0; color: #92400e; }

.deteccion-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  border-radius: var(--radio-sm);
}

.lake-busqueda {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

.lake-busqueda input { font-family: var(--mono); font-size: 0.88rem; }

.lake-resultado { margin-top: 0.75rem; }

.lake-card {
  border: 1.5px solid var(--menta-oscuro);
  background: var(--blanco);
  border-radius: var(--radio-sm);
  padding: 0.9rem 1rem;
  animation: aparecer 0.35s var(--transicion) backwards;
}

.lake-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.lake-ticket {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--azul);
}

.lake-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.45rem 1rem;
  font-size: 0.82rem;
}

.lake-dato .k {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.lake-dato .v { color: var(--tinta); font-weight: 600; }

.lake-stats {
  margin-top: 0.65rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--linea);
  font-size: 0.82rem;
  color: var(--texto-suave);
}

.lake-stats strong { color: var(--azul); }

.lake-nada {
  font-size: 0.86rem;
  color: var(--texto-suave);
  padding: 0.55rem 0.2rem;
}

.lake-buscando {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: var(--texto-suave);
}

/* ---------- Dropzone ---------- */

.dropzone {
  position: relative;
  border: 2px dashed #bfd4ec;
  border-radius: var(--radio);
  padding: 2rem 1.4rem 1.6rem;
  text-align: center;
  background: rgba(238, 246, 255, 0.45);
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion), transform var(--transicion);
  overflow: hidden;
}

.dropzone:hover { border-color: var(--azul-500); background: var(--celeste); }

.dropzone.arrastrando {
  border-color: var(--menta-oscuro);
  background: var(--menta-suave);
  transform: scale(1.01);
}

.dropzone-ilustracion {
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-size: 1.7rem;
  margin-bottom: 0.5rem;
}

.doc-flotante { display: inline-block; animation: flotar 4s ease-in-out infinite; }
.doc-flotante.d1 { --rot: -8deg; animation-delay: 0s; }
.doc-flotante.d2 { --rot: 0deg; animation-delay: 0.7s; font-size: 2rem; }
.doc-flotante.d3 { --rot: 8deg; animation-delay: 1.3s; }

.dropzone-texto { margin: 0; font-size: 1rem; color: var(--tinta); }
.dropzone-separador { margin: 0.3rem 0; color: var(--texto-suave); font-size: 0.85rem; }
.dropzone-limites { margin-top: 0.8rem; }

.lista-archivos {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.archivo-fila {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-sm);
  background: var(--blanco);
  font-size: 0.88rem;
  animation: aparecer 0.3s var(--transicion) backwards;
  transition: box-shadow var(--transicion), border-color var(--transicion);
}

.archivo-fila:hover { border-color: #c9dcf2; box-shadow: var(--sombra); }

.archivo-nombre {
  flex: 1;
  color: var(--tinta);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.archivo-tamano { color: var(--texto-suave); font-size: 0.8rem; flex: none; }

.avisos-archivos ul {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.avisos-archivos li {
  display: flex;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--texto-suave);
  padding: 0.4rem 0.6rem;
  background: var(--celeste);
  border-radius: 8px;
}

.confirmacion {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radio-sm);
  background: var(--celeste);
  font-size: 0.86rem;
  cursor: pointer;
  transition: background var(--transicion);
}

.confirmacion:hover { background: #e2effc; }

.confirmacion input {
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--azul);
  flex: none;
}

.zona-analizar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}

.hint-analizar { width: 100%; margin: 0.1rem 0 0; }

/* ---------- Vista cargando ---------- */

.card-cargando { text-align: center; padding: 2.6rem 1.6rem; }

.titulo-cargando { margin: 0 0 1.2rem; font-size: 1.3rem; color: var(--tinta); }

.progreso-lote { max-width: 26rem; margin: 0 auto 1.6rem; }

.progreso-barra {
  height: 10px;
  border-radius: 999px;
  background: var(--celeste);
  overflow: hidden;
}

.progreso-relleno {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--azul-500), var(--menta-oscuro), var(--menta));
  background-size: 250% 100%;
  animation: shimmer 1.8s linear infinite;
  transition: width 500ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.progreso-texto {
  margin: 0.5rem 0 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--texto-suave);
}

.escaner {
  position: relative;
  width: 84px;
  height: 104px;
  margin: 0 auto 1.3rem;
  border-radius: 10px;
  background:
    linear-gradient(var(--blanco), var(--blanco)) padding-box,
    linear-gradient(140deg, var(--azul-500), var(--menta)) border-box;
  border: 2px solid transparent;
  box-shadow: var(--sombra);
  overflow: hidden;
}

.escaner-doc {
  position: absolute;
  inset: 14px 12px;
  background: repeating-linear-gradient(var(--celeste) 0 5px, transparent 5px 12px);
  border-radius: 4px;
  opacity: 0.9;
}

.escaner-laser {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 3px;
  border-radius: 3px;
  background: var(--menta-oscuro);
  box-shadow: 0 0 12px 2px rgba(0, 252, 193, 0.75);
  animation: laser 2.4s ease-in-out infinite;
}

.mensaje-carga {
  min-height: 1.5rem;
  margin: 0 0 0.4rem;
  font-weight: 600;
  color: var(--azul);
}

.card-cargando .btn { margin-top: 1.2rem; }

/* ---------- Resultados ---------- */

.resultado-encabezado { position: relative; overflow: hidden; }

.resultado-meta {
  margin: 0 0 0.35rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--menta-oscuro);
  font-weight: 500;
}

.resultado-caso {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: 'wdth' 112;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--tinta);
  text-wrap: balance;
}

.resultado-rama, .resultado-docs {
  margin: 0.3rem 0 0;
  font-size: 0.86rem;
  color: var(--texto-suave);
}

.resultado-motivo { margin: 0.8rem 0 0; font-size: 0.9rem; }

/* Score ring */
.score-section {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--linea);
}

.score-container {
  position: relative;
  width: 128px;
  height: 128px;
  flex: none;
}

.score-ring { width: 100%; height: 100%; }

.score-ring .arco {
  transition: stroke-dashoffset 1.1s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.score-value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
}

.score-number {
  font-family: var(--mono);
  font-size: 1.65rem;
  font-weight: 500;
  color: var(--tinta);
  line-height: 1;
}

.score-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  text-align: center;
  max-width: 90px;
}

.score-breakdown {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.86rem;
}

.score-breakdown .dato { color: var(--texto); }
.score-breakdown .dato strong { color: var(--azul); font-family: var(--mono); font-weight: 500; }

.score-justificacion {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--texto-suave);
  font-style: italic;
}

.score-duo { display: flex; gap: 1.6rem; flex-wrap: wrap; }

/* Contracargo vinculado en resultados */
.card-contracargo {
  background: linear-gradient(150deg, var(--blanco) 60%, var(--menta-suave));
}

/* Héroe COMPLETO */
.hero-completo {
  text-align: center;
  background:
    radial-gradient(400px 160px at 50% -60px, rgba(0, 252, 193, 0.22), transparent),
    var(--blanco);
}

.hero-completo .hero-icono {
  display: inline-flex;
  font-size: 2.6rem;
  animation: pulso 2.4s ease-in-out infinite;
}

.hero-completo h3 { margin: 0.5rem 0 0.4rem; font-size: 1.25rem; color: var(--ok); }
.hero-completo p { margin: 0.3rem auto; max-width: 34rem; font-size: 0.92rem; }

/* Héroe SIN DOCUMENTACIÓN EXIGIDA. Reusa el patrón de .hero-completo —incluido
   var(--blanco), que el modo oscuro redefine— para no repetir la trampa de los
   fondos hardcodeados. */
.hero-sindoc {
  text-align: center;
  background:
    radial-gradient(400px 160px at 50% -60px, rgba(0, 252, 193, 0.16), transparent),
    var(--blanco);
}

.hero-sindoc .hero-icono { display: inline-flex; font-size: 2.6rem; }
.hero-sindoc h3 { margin: 0.5rem 0 0.4rem; font-size: 1.25rem; color: var(--ok); }
.hero-sindoc p { margin: 0.3rem auto; max-width: 36rem; font-size: 0.92rem; }

.lista-vias-sindoc {
  margin: 0.6rem auto;
  padding: 0;
  max-width: 36rem;
  list-style: none;
  text-align: left;
}

.lista-vias-sindoc li {
  padding: 0.55rem 0.7rem;
  border-left: 3px solid var(--ok);
  background: var(--ok-suave);
  border-radius: 0 6px 6px 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

.lista-vias-sindoc li + li { margin-top: 0.4rem; }
.lista-vias-sindoc strong { color: var(--tinta); }

/* Mejoras de la solidez: lo accionable, en una lista compacta */
.solidez-mejoras {
  margin: 0.35rem 0 0.5rem;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  color: var(--texto-suave);
}

.solidez-mejoras li { margin: 0.15rem 0; }

/* ---------- El resultado en 8 secciones fijas (F4, 2026-09-29) ----------
   Mismo esqueleto que el PDF individual y cada ficha del PDF de lote. Solo
   variables del tema: nada de fondos fijos (la trampa del modo oscuro). */
.seccion-vista {
  margin: 0 0 1.6rem;
}

.seccion-vista-titulo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--menta-oscuro);
  font-family: var(--display);
  font-variation-settings: 'wdth' 110;
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--tinta);
}

.seccion-vista--colapsable > summary {
  cursor: pointer;
  list-style: none;
}
.seccion-vista--colapsable > summary::-webkit-details-marker { display: none; }
.seccion-vista--colapsable > summary::after {
  content: '▾';
  margin-left: auto;
  font-size: 0.9rem;
  color: var(--texto-suave);
  transition: transform var(--transicion);
}
.seccion-vista--colapsable:not([open]) > summary::after { transform: rotate(-90deg); }
.seccion-vista--colapsable:not([open]) > summary { margin-bottom: 0; }

.seccion-vista-cuerpo > .card:last-child { margin-bottom: 0; }

.seccion-vista-placeholder {
  margin: 0 0 0.8rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--texto-suave);
}

.bloque-subtitulo {
  margin: 0.8rem 0 0.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--tinta);
}

.bloque-mejoras {
  margin: 0 0 1.1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radio-sm);
  border-left: 4px solid var(--ok);
  background: var(--ok-suave);
}
.bloque-mejoras .bloque-subtitulo { margin-top: 0; }
.bloque-mejoras .solidez-mejoras { color: var(--texto); margin-bottom: 0; }

.dictamen-riesgo,
.dictamen-nota {
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
}
.dictamen-riesgo { color: var(--ambar-texto); }
.dictamen-nota { color: var(--texto); }

.solidez-penalizaciones {
  margin: 0.2rem 0 0.4rem;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  color: var(--ambar-texto);
}

.traza-ids {
  margin: 0.9rem 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--texto-suave);
}

/* Faltantes */
.card-faltantes { border-left: 4px solid var(--error); }
.card-faltantes ul { list-style: none; margin: 0; padding: 0; }

.faltante-fila {
  padding: 0.7rem 0.2rem;
  border-bottom: 1px dashed var(--linea);
}

.faltante-fila:last-child { border-bottom: 0; }
.faltante-texto { margin: 0; font-weight: 600; color: var(--tinta); font-size: 0.92rem; }
.faltante-justificacion { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--texto-suave); }

.card-indeterminado { border-left: 4px solid var(--ambar); }
.card-no-evaluado { border-left: 4px solid var(--neutro); }

/* Checklist */
.checklist-fila {
  display: flex;
  gap: 0.7rem;
  padding: 0.6rem 0.3rem;
  border-bottom: 1px solid #ecf3fb;
  font-size: 0.9rem;
  align-items: flex-start;
}

.checklist-fila:last-child { border-bottom: 0; }

.check-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
  margin-top: 0.1rem;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 900;
}

.checklist-fila.cubierto .check-icono { background: var(--ok-suave); color: var(--ok); }
.checklist-fila.no-cubierto .check-icono { background: var(--error-suave); color: var(--error); }

.checklist-cuerpo { flex: 1; }
.checklist-texto { margin-right: 0.5rem; color: var(--tinta); }

.checklist-cuerpo details { margin-top: 0.25rem; }

.checklist-cuerpo summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--azul-500);
  font-weight: 600;
}

.checklist-cuerpo details p {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--texto-suave);
}

ul:has(> .checklist-fila) { list-style: none; margin: 0; padding: 0; }

.grupo-checklist {
  margin-top: 0.9rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-sm);
  background: #fbfdff;
}

/* `--azul` NO se redefine en modo oscuro: era navy #023365 sobre tarjeta
   #14212f, ~1.3:1 e ilegible. `--tinta` sí se redefine y sirve en los dos. */
.grupo-checklist-titulo { margin: 0; font-weight: 700; font-size: 0.88rem; color: var(--tinta); }
.grupo-checklist-nota { margin: 0.15rem 0 0.3rem; font-size: 0.78rem; color: var(--texto-suave); }
.grupo-checklist ul { list-style: none; margin: 0; padding: 0; }

/* Feedback */
.card-feedback { background: linear-gradient(160deg, var(--blanco) 70%, var(--celeste)); }

.feedback-texto {
  white-space: pre-wrap;
  font-size: 0.9rem;
  color: var(--texto);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-sm);
  padding: 1rem 1.1rem;
}

/* Consejos */
.consejo-fila {
  display: flex;
  gap: 0.55rem;
  padding: 0.45rem 0;
  font-size: 0.9rem;
  align-items: flex-start;
}

ul:has(> .consejo-fila) { list-style: none; margin: 0; padding: 0; }

/* Historial */
.historial-fila {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.2rem;
  border-bottom: 1px solid #ecf3fb;
  font-size: 0.88rem;
}

.historial-fila:last-child { border-bottom: 0; }
.historial-num { font-family: var(--mono); font-weight: 500; color: var(--azul); }
.historial-hora { color: var(--texto-suave); font-size: 0.8rem; }
.historial-faltantes { margin-left: auto; color: var(--texto-suave); font-size: 0.8rem; }

ul:has(> .historial-fila) { list-style: none; margin: 0; padding: 0; }

.cta-fila {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 1.4rem 0;
}

.disclaimer-resultado {
  font-size: 0.78rem;
  color: var(--texto-suave);
  border-top: 1px solid var(--linea);
  padding-top: 1rem;
}

/* ---------- Alerta de error ---------- */

.alerta-error {
  display: flex;
  gap: 0.7rem;
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
  border: 1.5px solid #fda4af;
  border-radius: var(--radio);
  background: var(--error-suave);
  animation: aparecer 0.3s var(--transicion) backwards;
}

.alerta-error:focus { outline: 2px solid var(--error); outline-offset: 2px; }
.alerta-texto { margin: 0 0 0.6rem; color: #9f1239; font-size: 0.92rem; font-weight: 500; }
.alerta-acciones { display: flex; gap: 0.5rem; }

/* ---------- Pie ---------- */

.pie {
  background: var(--azul-900);
  color: rgba(255, 255, 255, 0.6);
  padding: 1.4rem 0;
  font-size: 0.8rem;
}

.pie p { margin: 0.15rem 0; }
.pie-secundario { color: rgba(255, 255, 255, 0.4); }
.pie .logo-kushki { color: #fff; }

/* ---------- Utilidades ---------- */

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sin-js {
  padding: 1rem;
  text-align: center;
  background: var(--error-suave);
  color: #9f1239;
  font-weight: 600;
}

.spinner {
  width: 2.4rem;
  height: 2.4rem;
  margin: 0 auto 1rem;
  border: 4px solid var(--celeste);
  border-top-color: var(--azul-500);
  border-radius: 50%;
  animation: girar 0.9s linear infinite;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .cabecera { padding: 2rem 0 1.8rem; }
  .card { padding: 1.2rem 1.1rem; }
  .grid-casos { grid-template-columns: 1fr; }
  .lote-acciones .btn-grande { width: 100%; }
  .zona-analizar .btn { width: 100%; }
  .lake-busqueda { flex-direction: column; }
  .score-section { justify-content: center; text-align: center; }
  .score-breakdown { min-width: 100%; }
}

/* ---------- Puerta de acceso (auth por dominio) ---------- */

.vista-acceso {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(720px 320px at 80% -10%, rgba(0, 252, 193, 0.18), transparent 60%),
    linear-gradient(130deg, var(--azul-900) 0%, var(--azul) 50%, var(--azul-700) 100%);
}

/* Con la puerta puesta, el fondo no se desplaza ni se ve. */
body.con-puerta { overflow: hidden; }

.acceso-card {
  width: min(440px, 100%);
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-hover);
  padding: 2rem 1.9rem;
  animation: aparecer 0.45s var(--transicion) backwards;
}

.acceso-card .marca-app { color: var(--azul-700); }

.acceso-titulo {
  margin: 0.2rem 0 0.5rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 112;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--tinta);
  letter-spacing: -0.01em;
}

.acceso-sub { margin: 0 0 1.3rem; font-size: 0.92rem; color: var(--texto-suave); }

.acceso-btn { width: 100%; }

.acceso-alterna {
  margin-top: 1.1rem;
  border-top: 1px dashed var(--linea);
  padding-top: 0.9rem;
}

.acceso-alterna summary {
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--azul);
  list-style: none;
}

.acceso-alterna summary::-webkit-details-marker { display: none; }
.acceso-alterna summary::before { content: '✉ '; }

.acceso-alterna input {
  width: 100%;
  margin: 0.5rem 0;
  font-family: var(--fuente);
  font-size: 0.95rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-sm);
}

.acceso-alterna input:focus {
  outline: none;
  border-color: var(--azul-500);
  box-shadow: 0 0 0 4px rgba(26, 95, 164, 0.12);
}

/* Canje de invitación (2026-08-27): visible solo para un externo con sesión
   viva y sin claim. Mismos tokens que el resto de la puerta. */
.acceso-invitacion {
  margin: 0.9rem 0 0;
  padding: 0.8rem;
  border: 1px solid var(--linea);
  border-radius: 10px;
  text-align: left;
}
.acceso-invitacion input {
  width: 100%;
  margin: 0.4rem 0 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--linea);
  border-radius: 8px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.9rem;
  background: var(--blanco);
  color: var(--tinta);
}

.acceso-mensaje { margin: 1rem 0 0; font-size: 0.88rem; min-height: 1.2rem; }
.acceso-mensaje.acceso-error { color: var(--error); font-weight: 600; }
.acceso-mensaje.acceso-ok { color: var(--ok); font-weight: 600; }
.acceso-pie { margin: 0.8rem 0 0; font-size: 0.76rem; color: var(--texto-suave); }

/* Barra de sesión */
.barra-sesion {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
  padding: 0.4rem 1.2rem;
  background: var(--azul-900);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
}

.sesion-email { font-family: var(--mono); font-size: 0.78rem; }
.barra-sesion .btn { color: var(--menta); padding: 0.25rem 0.7rem; }
.barra-sesion .btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--menta); }

/* Aviso de "sin datos en este entorno" (nube: los datos viven en local) */
.card-aviso-datos {
  background: linear-gradient(150deg, var(--blanco) 60%, var(--ambar-suave));
  border-color: #fcd679;
}
.card-aviso-datos .num-paso {
  background: linear-gradient(135deg, #fcd34d, #fbbf24);
  color: #7c4a03;
  box-shadow: none;
  font-style: italic;
}

/* ============================================================================
   REDISEÑO 2026 — marca oficial, splash de arranque, enlaces de normativa y
   pulido de look & feel. Se agrega al final para que las reglas nuevas ganen
   sin reescribir el archivo. Paleta y tokens: los de :root (ya son los de Kushki).
   ============================================================================ */

/* ---------- Accesibilidad ---------- */

/* Salto al contenido: oculto hasta que recibe foco por teclado. */
.skip-link {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 300;
  background: var(--azul);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radio-sm);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transicion);
}
.skip-link:focus { top: 12px; outline: 3px solid var(--menta); }

main:focus { outline: none; }

/* ---------- Splash de arranque (cubre el primer paint) ---------- */

.splash {
  position: fixed;
  inset: 0;
  z-index: 200; /* por encima de la puerta (100) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(720px 320px at 80% -10%, rgba(0, 252, 193, 0.20), transparent 60%),
    linear-gradient(130deg, var(--azul-900) 0%, var(--azul) 50%, var(--azul-700) 100%);
  opacity: 1;
  transition: opacity var(--transicion-lenta);
}

.splash--oculto { opacity: 0; pointer-events: none; }

.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
  animation: splash-entra 0.5s var(--transicion) both;
}

.splash-sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.98rem;
  letter-spacing: 0.01em;
}

.splash-spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: var(--menta);
  animation: splash-gira 0.8s linear infinite;
  margin-top: 0.2rem;
}

@keyframes splash-entra {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes splash-gira { to { transform: rotate(360deg); } }

/* ---------- Logo Kushki (lockup ícono + wordmark) ---------- */

.marca-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
}

.marca-lockup .ic {
  width: 1.7em;
  height: 1.7em;
  flex: none;
  display: block;
}

.marca-lockup .wordmark {
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 1.2rem;
  color: var(--azul);
  text-transform: uppercase;
}

/* Variantes de tamaño y color */
.marca-lockup--claro .wordmark { color: #fff; }
.marca-lockup--sm .wordmark { font-size: 0.95rem; letter-spacing: 0.05em; }
.marca-lockup--sm .ic { width: 1.35em; height: 1.35em; }
.marca-lockup--lg .wordmark { font-size: 1.5rem; }
.marca-lockup--xl .wordmark { font-size: 2rem; letter-spacing: 0.08em; }
.marca-lockup--xl .ic { width: 2.3em; height: 2.3em; }

/* Eyebrow "Chargebacks & Recovery" */
.marca-eyebrow {
  margin: 0.55rem 0 0;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--menta);
  animation: aparecer 0.5s var(--transicion) backwards;
}
.marca-eyebrow--oscuro { color: var(--azul-700); }

/* Bloque de marca del hero */
.cabecera-marca {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.9rem;
  animation: aparecer 0.5s var(--transicion) backwards;
}
.cabecera-marca .marca-eyebrow { margin-top: 0.35rem; }

/* Marca de la puerta de acceso (card blanca → wordmark navy) */
.acceso-marca { margin-bottom: 0.1rem; }

/* Ícono en la barra de sesión (fondo oscuro) */
.barra-ic { width: 20px; height: 20px; flex: none; margin-right: auto; }

/* ---------- Enlaces a la normativa (Centro de Documentación) ---------- */

.enlace-normativa {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--azul-500);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transicion), border-color var(--transicion);
}
.enlace-normativa:hover { color: var(--azul-700); border-bottom-color: currentColor; }
.enlace-normativa .ext-ic { font-size: 0.9em; opacity: 0.8; }

/* En el pie (fondo oscuro) el enlace va en tono claro */
.pie-enlaces { margin: 0.2rem 0 0.6rem; }
.pie .enlace-normativa { color: var(--menta); }
.pie .enlace-normativa:hover { color: #fff; }

/* Enlace dentro de la tarjeta de contracargo */
.lake-normativa {
  margin: 0.85rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--linea);
}

/* ---------- Pulido de look & feel ---------- */

/* Cards: elevación sutil al pasar el mouse (sensación viva, no invasiva) */
.card:hover { box-shadow: var(--sombra-hover); transform: translateY(-2px); }
#card-identifica:hover, .card-cargando:hover { transform: none; } /* no mover los que contienen foco/carga */

/* Anillo de foco accesible y consistente en botones */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px var(--azul-500);
}
.btn-primario:focus-visible {
  box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px var(--menta-oscuro), 0 6px 18px rgba(2, 51, 101, 0.28);
}

/* Dropzone: realce al pasar el mouse / arrastrar */
.dropzone { transition: border-color var(--transicion), background var(--transicion), transform var(--transicion); }
.dropzone:hover { border-color: var(--azul-500); background: var(--celeste); }

/* Transición suave al cambiar de vista */
#vista-editor:not([hidden]),
#vista-resultados:not([hidden]),
#vista-cargando:not([hidden]) {
  animation: aparecer 0.34s var(--transicion) backwards;
}

/* Tarjeta de contracargo: encabezado con acento de marca */
.lake-card { border-color: var(--menta-oscuro); box-shadow: var(--sombra); }
.lake-card-head { border-bottom: 1px solid var(--linea); padding-bottom: 0.6rem; }

/* Descripciones largas sin espacios (p. ej. "TELEFONICO/CORREO/INTERNET") no
   tienen punto de corte natural y en móvil empujaban la PÁGINA en horizontal.
   `anywhere` permite partirlas dentro de su celda. */
.lake-dato .v,
.lake-ticket { overflow-wrap: anywhere; }

/* ---------- Respeto por reduce-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .splash-inner,
  .splash-spinner,
  .cabecera-glow,
  .cabecera-marca,
  .marca-eyebrow,
  #vista-editor:not([hidden]),
  #vista-resultados:not([hidden]),
  #vista-cargando:not([hidden]) {
    animation: none !important;
  }
  .card:hover { transform: none; }
  .splash { transition: none; }
}

/* ---------- Mascota (decorativa, sutil) ---------- */

/* Marca de agua del hero: al costado derecho, muy atenuada y fundida con el
   degradado. Es decorativa (aria-hidden) y nunca debe competir con el texto. */
.mascota-hero {
  position: absolute;
  right: -2%;
  bottom: -18%;
  width: min(430px, 42vw);
  height: auto;
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
  /* Se difumina por los bordes para que no se vea como una foto pegada. */
  mask-image: radial-gradient(closest-side at 60% 45%, #000 45%, transparent 92%);
  -webkit-mask-image: radial-gradient(closest-side at 60% 45%, #000 45%, transparent 92%);
  mix-blend-mode: luminosity;
  animation: mascota-flota 14s ease-in-out infinite;
}

@keyframes mascota-flota {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.015); }
}

/* En el splash: detrás del logo, aún más discreta. */
.splash .mascota-splash {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(520px, 70vw);
  height: auto;
  opacity: 0.13;
  pointer-events: none;
  mask-image: radial-gradient(closest-side at 50% 45%, #000 40%, transparent 88%);
  -webkit-mask-image: radial-gradient(closest-side at 50% 45%, #000 40%, transparent 88%);
}

/* ---------- Enlace destacado a la normativa (hero) ---------- */

.cabecera-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.cabecera-top .cabecera-marca { margin-bottom: 0; }

/* CTA visible: cristal sobre el hero, con acento mint. Antes el enlace a la
   normativa solo vivía en el pie y quedaba escondido. */
.btn-normativa {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(0, 252, 193, 0.45);
  color: #fff;
  font-size: 0.86rem;
  padding: 0.5rem 1rem;
  text-decoration: none;
  backdrop-filter: blur(6px);
  flex: none;
  animation: aparecer 0.5s 140ms var(--transicion) backwards;
}
.btn-normativa:hover {
  background: var(--menta);
  border-color: var(--menta);
  color: var(--azul-900);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 252, 193, 0.28);
}
.btn-normativa .ext-ic { opacity: 0.75; }
.btn-normativa:hover .ext-ic { opacity: 1; }

/* ---------- Alcance de acceso en la barra de sesión ---------- */

.sesion-alcance {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.16rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-right: auto;
}
.sesion-alcance::before { content: '●'; font-size: 0.6em; }
.alcance-interno { background: rgba(0, 252, 193, 0.16); color: var(--menta); }
.alcance-comercio { background: rgba(255, 255, 255, 0.14); color: #fff; }
.alcance-vacio { background: var(--ambar-suave); color: #7c4a03; }
/* El ícono deja de empujar cuando hay badge de alcance. */
.barra-sesion .sesion-alcance ~ .sesion-email { margin-left: 0; }
.barra-sesion .barra-ic { margin-right: 0.5rem; }

/* ---------- Carga por lote: que se entienda que es la vía rápida ---------- */

.chip-recomendado {
  background: var(--menta);
  color: var(--azul-900);
  margin-left: auto;
  flex: none;
}

/* El requisito del nombre del archivo, destacado y escaneable (antes quedaba
   enterrado en el párrafo y la gente no sabía por qué no vinculaba). */
/* OJO: block, no flex — con flex cada <strong>/<code> se vuelve un flex item y el
   texto se reparte en columnas. */
.intake-requisito {
  display: block;
  line-height: 1.5;
  margin: 0.7rem 0 0;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radio-sm);
  background: var(--celeste);
  border: 1px dashed var(--linea);
  font-size: 0.82rem;
  color: var(--texto);
}

.intake-requisito code {
  font-family: var(--mono);
  font-size: 0.94em;
  background: var(--blanco);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}

/* Cuando NO se vinculó nada, el aviso se ve como problema y ofrece la salida. */
.intake-novinculados.intake-falla {
  border: 1px solid #fde68a;
  background: #fffbeb;
  border-radius: var(--radio-sm);
  padding: 0.8rem 0.9rem;
  margin-top: 0.8rem;
}
.intake-novinculados-titulo { margin: 0 0 0.4rem; font-weight: 700; font-size: 0.86rem; }
.intake-novinculados.intake-falla .intake-novinculados-titulo { color: #92400e; }
.intake-novinculados.intake-falla ul { margin: 0 0 0.5rem 1.1rem; font-size: 0.82rem; }
.intake-novinculados.intake-falla .ayuda { margin: 0 0 0.6rem; }

/* ---------- Responsive del rediseño ---------- */
@media (max-width: 640px) {
  .marca-lockup--xl .wordmark { font-size: 1.6rem; }
  .chip-recomendado { margin-left: 0; }
  .cabecera-marca { margin-bottom: 0.7rem; }
  .mascota-hero { width: 62vw; right: -12%; bottom: -10%; opacity: 0.1; }
  .cabecera-top { flex-direction: column; align-items: flex-start; }
  .btn-normativa { width: 100%; justify-content: center; }
  .sesion-alcance { font-size: 0.66rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mascota-hero { animation: none; }
  .btn-normativa { animation: none; }
  .btn-normativa:hover { transform: none; }
}

/* ============================================================================
   MODO NOCHE (opcional, opt-in) — remapea las variables de superficie/texto.
   La marca (--azul, --menta) se mantiene; el hero/puerta/pie ya eran oscuros.
   ============================================================================ */

.cabecera-acciones {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Botón de tema: mismo lenguaje "cristal" que el CTA del hero. */
.btn-tema {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 0.86rem;
  padding: 0.5rem 0.9rem;
  backdrop-filter: blur(6px);
  flex: none;
}
.btn-tema:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--menta);
  transform: translateY(-1px);
}
.btn-tema .tema-ic { font-size: 1em; line-height: 1; }

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --tinta: #e8eef6;
  --texto: #c4d2e0;
  --texto-suave: #93a4b8;
  --fondo: #0b1622;
  --blanco: #14212f;     /* superficie de tarjetas (nombre heredado) */
  --linea: #27394d;
  --celeste: #17273a;
  /* sobre fondo oscuro hay que ACLARARLO, no oscurecerlo (7,59:1). */
  --ambar-texto: #f59e0b;
  --menta-suave: #0e3630;
  --ok-suave: #0f3328;
  --error-suave: #3a1721;
  --ambar-suave: #3a2c12;
  --neutro-suave: #243140;
  --sombra: 0 2px 4px rgba(0, 0, 0, 0.25), 0 12px 32px rgba(0, 0, 0, 0.38);
  --sombra-hover: 0 4px 8px rgba(0, 0, 0, 0.32), 0 20px 48px rgba(0, 0, 0, 0.5);
}

/* Controles de formulario: no heredan las variables por defecto. */
:root[data-tema="oscuro"] input,
:root[data-tema="oscuro"] textarea,
:root[data-tema="oscuro"] select {
  background: #0f1c29;
  color: var(--tinta);
  border-color: var(--linea);
}
:root[data-tema="oscuro"] input::placeholder,
:root[data-tema="oscuro"] textarea::placeholder { color: var(--texto-suave); }

/* Superficies puntuales que usaban blancos/gris claro fijos. */
:root[data-tema="oscuro"] #lista-codigos { background: var(--blanco); }
:root[data-tema="oscuro"] .dropzone { background: #101f2d; }
:root[data-tema="oscuro"] .buscar-ticket { background: var(--celeste); }
:root[data-tema="oscuro"] .deteccion-estado.sin-match,
:root[data-tema="oscuro"] .intake-novinculados.intake-falla {
  background: #2a230f;
  border-color: #5c4a17;
}
:root[data-tema="oscuro"] .deteccion-msg,
:root[data-tema="oscuro"] .intake-novinculados.intake-falla .intake-novinculados-titulo {
  color: #f5c451;
}
:root[data-tema="oscuro"] .intake-requisito code,
:root[data-tema="oscuro"] .dropzone-limites code,
:root[data-tema="oscuro"] .lake-normativa,
:root[data-tema="oscuro"] code { background: #0f1c29; }

/* El rojo oscuro fijo (#9f1239) de los avisos de error va sobre
   var(--error-suave), que en oscuro pasa a granate: quedaba en ~1.9:1 e
   ilegible justo cuando el sistema falla. Rosa claro: ~8:1 sobre #3a1721. */
:root[data-tema="oscuro"] .alerta-texto,
:root[data-tema="oscuro"] .sin-js,
:root[data-tema="oscuro"] .chip-error { color: #fda4af; }

/* La tarjeta blanca de la puerta de acceso: en oscuro, superficie oscura. */
:root[data-tema="oscuro"] .acceso-card { background: var(--blanco); }

/* El hero usa var(--blanco) como texto BLANCO sobre el degradado navy; como en
   oscuro --blanco pasa a ser una superficie oscura, aquí se restablece el blanco
   real para que el título no quede invisible. */
:root[data-tema="oscuro"] .cabecera { color: #fff; }


/* --- Modo noche: acento legible sobre superficies oscuras + textos fijos --- */
/* En el CONTENIDO (no hero/puerta/pie, que son navy a propósito) el navy de
   acento pasa a azul claro; los rellenos sólidos de marca se fijan aparte para
   no perder contraste con su texto blanco. */
:root[data-tema="oscuro"] main {
  --azul: #6fb1ee;
  --azul-500: #7ab8ef;
  --azul-700: #8ac2f2;
}
:root[data-tema="oscuro"] main .btn-primario {
  background: linear-gradient(120deg, #0a4a8f 10%, #1a5fa4);
  color: #fff;
}
:root[data-tema="oscuro"] main .chip-obligatorio { background: #1a5fa4; color: #fff; }
:root[data-tema="oscuro"] main .segmented-item input:checked + span {
  background: #1a5fa4;
  border-color: #1a5fa4;
  color: #fff;
}
/* Chips/rótulos verdes que vivían sobre mint claro (ahora fondo oscuro). */
:root[data-tema="oscuro"] .chip-lake,
:root[data-tema="oscuro"] .badge-analizando,
:root[data-tema="oscuro"] .reason-autocompletado .ra-sub { color: #6fe0c0; }
/* Avisos ámbar del intake. */
:root[data-tema="oscuro"] .intake-novinculados { border-color: #5c4a17; }
:root[data-tema="oscuro"] .intake-novinculados p,
:root[data-tema="oscuro"] .intake-novinculados ul { color: #f5c451; }


/* ---- Capa editorial (2026-08-10): glosas, texto oficial y ramas con detalle ---- */
.checklist-glosa { margin: 0.25rem 0 0; font-size: 0.84rem; color: var(--texto); }
.checklist-verbatim {
  margin: 0.4rem 0 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--linea);
  background: var(--celeste);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  font-size: 0.8rem;
  color: var(--texto);
}
/* Exclusiones del código: es una DEFENSA (si tu caso cae ahí, el motivo no aplica),
   así que comparte el lenguaje visual de la impugnabilidad — ámbar — y no el azul
   informativo de los plazos. */
.card-exclusiones { border-left: 4px solid var(--ambar); }
.exclusiones-texto {
  margin: 0;
  padding: 0.6rem 0.8rem;
  background: var(--ambar-suave);
  border-radius: var(--radio-sm);
  font-size: 0.88rem;
  color: var(--tinta);
}
.vertical-linea { margin: 0 0 0.7rem; font-size: 0.9rem; color: var(--texto); }
:root[data-tema="oscuro"] .exclusiones-texto { background: #2b2312; color: var(--texto); }
/* Plazos de la red. Va arriba y con el número destacado: es el dato más perecedero
   del análisis. Azul y no ámbar a propósito — es información que estructura la
   decisión, no una advertencia; el ámbar se reserva para lo que te puede salir mal. */
.card-plazos { border-left: 4px solid var(--azul-500); }
.plazo-principal { margin: 0; font-size: 1rem; color: var(--tinta); }
.plazo-principal strong { color: var(--azul-700); font-size: 1.1rem; }
/* El resto de la frase (el ancla de cómputo, las excepciones) en peso normal:
   destacar todo es no destacar nada. */
.plazo-detalle { color: var(--texto); font-size: 0.92rem; }
.plazo-emisor { margin: 0.7rem 0 0; font-size: 0.88rem; color: var(--texto); }
.plazo-etiqueta { color: var(--texto-suave); font-size: 0.82rem; }
:root[data-tema="oscuro"] .plazo-principal strong { color: #8ac2f2; }
/* Nota normativa del código: condiciona el checklist sin ser un requisito, así
   que va como aviso y no como tarjeta más. Mismo ámbar que la impugnabilidad,
   porque las dos son "contexto que cambia tu jugada", no evidencia. */
.card-nota-normativa {
  border-left: 4px solid var(--ambar);
  background: var(--ambar-suave);
}
.nota-normativa-texto { margin: 0; font-size: 0.88rem; color: var(--tinta); }
:root[data-tema="oscuro"] .card-nota-normativa { background: #2b2312; }
:root[data-tema="oscuro"] .nota-normativa-texto { color: var(--texto); }
/* Vigencia del requisito: el aviso de que esta redacción caduca, o de cuándo
   entró en vigor. Ámbar, porque es una advertencia de TIEMPO, no un error. */
.checklist-vigencia {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  /* NO es var(--ambar): #d97706 sobre blanco da 3,19:1 y AA pide 4,5:1 para
     texto pequeño. `--ambar-texto` es el mismo ámbar oscurecido lo justo (5,02:1),
     y en modo noche se aclara porque ahí el fondo es oscuro. */
  color: var(--ambar-texto);
  font-weight: 600;
}
/* Impugnabilidad: lo que la red le exige al EMISOR. No es checklist, así que no
   lleva casilla ni ✓ — se lee como argumento, que es lo que es. */
.card-subtitulo { margin: 0 0 0.7rem; font-size: 0.85rem; color: var(--texto-suave); }
/* Salvedad de la señal: cuándo su ausencia NO prueba nada (AMEX se reserva no
   adjuntar el soporte si hubo Consulta previa). Va en ámbar de advertencia, con
   `--ambar-texto` por la misma razón de contraste que `.checklist-vigencia`, y
   ANTES de la lista: leerla después sería leerla tarde. */
.emisor-nota {
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  color: var(--ambar-texto);
  font-weight: 600;
}
/* Rama a la que pertenece la condición del emisor (solo PROSA: el CID hace variar
   la carga por escenario). Se lee como etiqueta, igual que los chips del encabezado,
   para que no se confunda con el texto de la norma. */
.emisor-rama {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.06rem 0.45rem;
  border-radius: 999px;
  background: var(--celeste);
  color: var(--azul-700);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.emisor-fila {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--ambar);
  background: var(--ambar-suave);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
}
.emisor-texto { font-size: 0.84rem; color: var(--tinta); }
/* Las viñetas que el PDF emite como " l " suelta. Solo presentación: el verbatim
   se guarda literal porque el gate corpus↔KB lo compara carácter a carácter. */
.emisor-vinetas { margin: 0.35rem 0 0; padding-left: 1.15rem; }
.emisor-vinetas > li { font-size: 0.84rem; color: var(--tinta); padding: 0.12rem 0; }
:root[data-tema="oscuro"] .emisor-fila { background: #2b2312; }
:root[data-tema="oscuro"] .emisor-texto,
:root[data-tema="oscuro"] .emisor-vinetas > li { color: var(--texto); }
/* El pasaje OFICIAL de la red, cuando lo tenemos anclado (VISA). Se distingue a
   propósito de nuestra redacción: borde de acento y comillas, para que se lea
   como cita y no como texto propio. Los colores salen de las variables, así que
   el modo noche los hereda. */
.checklist-oficial {
  margin: 0.4rem 0 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--menta-oscuro);
  background: var(--celeste);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  font-size: 0.8rem;
  color: var(--texto);
  quotes: '«' '»';
}
.checklist-oficial::before { content: open-quote; }
.checklist-oficial::after { content: close-quote; }
.checklist-etiqueta-bloque {
  margin: 0.6rem 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--texto-suave);
}
.faltante-grupo { list-style: none; margin: 0.45rem 0 0; padding: 0 0 0 1rem; border-left: 2px dashed var(--linea); }
.faltante-grupo > li { padding: 0.3rem 0; font-size: 0.88rem; color: var(--tinta); }
.radios:has(.radio-item--detalle) { flex-direction: column; align-items: stretch; max-height: 21rem; overflow: auto; }
.radio-item--detalle { border-radius: var(--radio-sm); }
.radio-item--detalle .radio-desc { display: block; width: 100%; font-size: 0.78rem; color: var(--texto-suave); margin-top: 0.15rem; }

/* ---- UX 2026-08-10: alternativas no usadas de una disyunción satisfecha ---- */
/* No son faltantes: se muestran en gris, nunca como ✗ roja. */
.checklist-fila.alternativa { opacity: .72; }
.checklist-fila.alternativa .check-icono { background: var(--neutro-suave); color: var(--texto-suave); }
.checklist-fila.alternativa .checklist-texto { color: var(--texto-suave); font-weight: 400; }
.chip-alternativa { background: var(--neutro-suave); color: var(--texto-suave); }
.grupo-checklist-nota.ok { color: var(--ok); font-weight: 600; }
/* Aviso cuando COMPLETO cumple el mínimo pero la probabilidad de ganar es baja. */
.hero-caveat {
  margin-top: .9rem;
  padding: .75rem 1rem;
  border-radius: var(--radio-sm);
  background: var(--ambar-suave);
  border: 1px solid #fcd679;
  color: var(--tinta);
  font-size: .92rem;
  line-height: 1.5;
}
:root[data-tema="oscuro"] .hero-caveat { border-color: #6b5320; }

/* ---- Métricas coherentes + trazabilidad (2026-08-10) ---- */
/* Un solo anillo: se elimina la competencia visual entre dos escalas. */
.score-section .score-container { flex: 0 0 auto; }
.chip-banda { align-self: flex-start; margin-bottom: .35rem; }
.banda-muy-baja, .banda-baja { background: var(--error-suave); color: var(--error); }
.banda-media { background: var(--ambar-suave); color: #92400e; }
.banda-alta { background: var(--ok-suave); color: var(--ok); }
.dato-nota { color: var(--texto-suave); font-weight: 400; }
.score-penalizacion { font-size: .82rem; color: var(--ambar); margin-top: .3rem; }

/* Trazabilidad por requisito: qué documento y qué dato lo sustentan. */
.checklist-soporte { font-size: .8rem; color: var(--texto-suave); margin-top: .3rem; }
.checklist-soporte strong { color: var(--azul); font-weight: 600; }
.checklist-cita {
  font-size: .82rem;
  margin-top: .25rem;
  padding-left: .7rem;
  border-left: 2px solid var(--menta-oscuro);
  color: var(--texto);
}
.cita-campo { color: var(--texto-suave); text-transform: capitalize; }
.cita-valor { color: var(--tinta); }
.cita-ubicacion { color: var(--texto-suave); font-size: .76rem; }
.checklist-falta { font-size: .84rem; margin-top: .35rem; color: var(--tinta); }
.checklist-falta strong { color: var(--error); }

/* Estado PARCIAL: "lo mandaste pero incompleto" ≠ "no lo mandaste". */
.checklist-fila.parcial .check-icono { background: var(--ambar-suave); color: #92400e; }
.chip-parcial { background: var(--ambar-suave); color: #92400e; }
:root[data-tema="oscuro"] .chip-parcial,
:root[data-tema="oscuro"] .checklist-fila.parcial .check-icono { color: #f5c451; }

/* Modo oscuro: el bloque de grupo tenía fondo blanco hardcodeado (#fbfdff), así
   que en oscuro quedaba una caja clara con texto lavado — muy visible ahora que
   las filas llevan citas y "te falta". */
:root[data-tema="oscuro"] .grupo-checklist {
  background: #101d2b;
  border-color: var(--linea);
}
:root[data-tema="oscuro"] .checklist-fila { border-bottom-color: #1e2d3d; }
:root[data-tema="oscuro"] .checklist-cita { border-left-color: var(--menta-oscuro); }

/* ============================================================================
   Diagnóstico del expediente (reemplaza al binario como titular) + señales del
   score + qué pasó con cada documento.  Fase E, 2026-08-11.
   ========================================================================== */

.card-diagnostico {
  border-left: 3px solid var(--azul-500);
  border-radius: var(--radio);
}
.diagnostico-resumen {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--tinta);
  margin: .35rem 0 .75rem;
}
.diagnostico-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-bloque { background: var(--celeste); color: var(--azul); }
.chip-ok { background: var(--ok-suave); color: #065f46; }
.chip-error { background: var(--error-suave); color: #9f1239; }
.diagnostico-sub {
  margin: .85rem 0 .3rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.diagnostico-causas { margin: 0; padding-left: 1.1rem; font-size: .86rem; color: var(--texto); }
.diagnostico-causas li { margin: .15rem 0; }

/* Señales que mueven el pronóstico: cada una con su aporte y su porqué. */
.senales { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .4rem; }
.senal {
  display: grid;
  grid-template-columns: 1.1rem auto auto 1fr;
  align-items: baseline;
  gap: .45rem;
  font-size: .84rem;
  padding: .4rem .55rem;
  border-radius: var(--radio-sm);
  background: var(--fondo);
}
.senal-flecha { font-weight: 500; }
.senal-sube .senal-flecha, .senal-sube .senal-factor, .senal-sube .senal-direccion { color: var(--ok); }
.senal-baja .senal-flecha, .senal-baja .senal-factor, .senal-baja .senal-direccion { color: var(--error); }
.senal-etiqueta { font-weight: 500; color: var(--tinta); }
.senal-factor { font-family: var(--mono); }
.senal-direccion { font-weight: 500; font-size: .8rem; }
.senal-detalle { color: var(--texto-suave); grid-column: 1 / -1; }
@media (min-width: 700px) { .senal-detalle { grid-column: 4; } }

/* Histórico como frecuencia verificable: un dato con denominador, no un
   pronóstico (honestidad radical, 2026-08-13). */
.frecuencia-historica {
  margin-top: .55rem;
  padding: .55rem .7rem;
  border-left: 3px solid var(--acento, #2563eb);
  border-radius: var(--radio-sm);
  background: var(--fondo);
}
.frecuencia-texto { margin: 0; font-size: .88rem; color: var(--tinta); }
.frecuencia-nota { margin: .25rem 0 0; font-size: .78rem; color: var(--texto-suave); }
:root[data-tema="oscuro"] .frecuencia-historica { background: #101d2b; }
/* Contexto del caso (modelo de ML): misma caja que la frecuencia, con el borde
   del color de la banda. Sin fondo propio: hereda el del tema. */
.contexto-caso {
  margin-top: .55rem;
  padding: .55rem .7rem;
  border-left: 3px solid var(--neutro);
  border-radius: var(--radio-sm);
  background: var(--fondo);
}
.contexto-caso.contexto-favorable { border-left-color: var(--score-alto); }
.contexto-caso.contexto-intermedio { border-left-color: var(--score-medio); }
.contexto-caso.contexto-desfavorable { border-left-color: var(--score-bajo); }
.contexto-recomendacion { margin: 0 0 .35rem; font-size: .9rem; font-weight: 600; color: var(--tinta); }
/* Chip de banda en la tarjeta del lote: solo el borde lleva el color de la banda. */
.chip-contexto { border: 1px solid var(--neutro); background: transparent; color: var(--texto); }
.chip-contexto.contexto-favorable, .chip-contexto.contexto-reembolso { border-color: var(--score-alto); }
.chip-contexto.contexto-intermedio { border-color: var(--score-medio); }
.chip-contexto.contexto-desfavorable { border-color: var(--score-bajo); }
.lote-orden-nota { grid-column: 1 / -1; margin: 0 0 .25rem; font-size: .8rem; color: var(--texto-suave); }

/* NO_EVALUADO: fallo del sistema, se pinta neutro — jamás como faltante. */
.checklist-fila.no-evaluado .check-icono { background: var(--fondo); color: var(--texto-suave); }
.chip-no-evaluado { background: var(--fondo); color: var(--texto-suave); border: 1px dashed var(--linea); }

/* Cita que el servidor no pudo verificar contra el documento. */
.checklist-cita.cita-no-verificada { opacity: .75; }
.chip-cita-alerta { background: var(--ambar-suave); color: #92400e; margin-left: .4rem; }
:root[data-tema="oscuro"] .chip-cita-alerta { color: #f5c451; }

/* Hechos que no cuadran con el contracargo verificado del lake. */
.card-discrepancias { border-left: 4px solid var(--ambar); }
.discrepancia-aviso { margin: .3rem 0; font-size: .88rem; color: var(--tinta); }

/* Cita normativa del requisito (documento + página). */
.checklist-fuente {
  margin: 0.35rem 0 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--texto-suave);
  padding-left: 0.65rem;
  border-left: 2px solid var(--linea);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* Qué entendimos de cada documento. */
.lista-docs-analizados { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.doc-analizado {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: .55rem;
  padding: .6rem .7rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-sm);
  background: var(--blanco);
}
.doc-icono { font-weight: 500; }
.doc-util .doc-icono { color: var(--ok); }
.doc-ilegible .doc-icono { color: var(--error); }
.doc-sin-aporte .doc-icono { color: var(--neutro); }
.doc-cuerpo { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.doc-nombre {
  font-family: var(--mono);
  font-size: .84rem;
  color: var(--tinta);
  width: 100%;
  word-break: break-all;
}
.chip-doc.chip-util { background: var(--ok-suave); color: #065f46; }
.chip-doc.chip-ilegible { background: var(--error-suave); color: #9f1239; }
.chip-doc.chip-sin-aporte { background: var(--neutro-suave); color: #475569; }
/* "No lo analizamos" (2026-08-25): informativo, NUNCA rojo. Es nuestro límite,
   no un defecto de su documento; pintarlo de error le diría que hay algo que
   corregir cuando no hay nada. */
.chip-doc.chip-no-analizado { background: var(--celeste); color: var(--azul-700); }
.chip-aviso { background: var(--celeste); color: var(--azul-700); }
.doc-no-analizado .doc-icono { color: var(--azul-500); }
.chip-tipo { background: var(--celeste); color: var(--azul); text-transform: capitalize; }
.doc-resumen, .doc-motivo { width: 100%; margin: .15rem 0 0; font-size: .84rem; line-height: 1.5; }
.doc-resumen { color: var(--texto); }
.doc-motivo { color: var(--texto-suave); font-style: italic; }

/* La causa del incumplimiento y el porqué, visibles en el checklist. */
.chip-causa { background: var(--neutro-suave); color: #475569; }
.chip-causa.causa-ilegible { background: var(--error-suave); color: #9f1239; }
.chip-causa.causa-dato_faltante { background: var(--ambar-suave); color: #92400e; }
.checklist-porque {
  margin: .35rem 0 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--texto);
}
.porque-icono { opacity: .7; }

:root[data-tema="oscuro"] .senal { background: #101d2b; }
:root[data-tema="oscuro"] .doc-analizado { background: #101d2b; }
:root[data-tema="oscuro"] .chip-ok,
:root[data-tema="oscuro"] .chip-doc.chip-util { color: #6fe0c0; }
:root[data-tema="oscuro"] .chip-error,
:root[data-tema="oscuro"] .chip-doc.chip-ilegible { color: #ff9db1; }
:root[data-tema="oscuro"] .chip-causa,
:root[data-tema="oscuro"] .chip-doc.chip-sin-aporte { color: #b7c6d8; }
:root[data-tema="oscuro"] .chip-causa.causa-ilegible { color: #ff9db1; }
:root[data-tema="oscuro"] .chip-causa.causa-dato_faltante { color: #f5c451; }
:root[data-tema="oscuro"] .chip-bloque,
:root[data-tema="oscuro"] .chip-tipo,
/* var(--azul-700) sobre fondo oscuro no contrasta: mismo celeste que los otros
   chips informativos (trampa ya documentada en el HANDOFF). */
:root[data-tema="oscuro"] .chip-aviso,
:root[data-tema="oscuro"] .chip-doc.chip-no-analizado { color: #7ab8ef; }
:root[data-tema="oscuro"] .doc-no-analizado .doc-icono { color: #7ab8ef; }

/* Lo que aporta Kushki: informativo, nunca exigible */
.card-aporta-kushki { border-left: 4px solid var(--celeste, #7dd3fc); }
.aporta-kushki-intro { margin: 0.2rem 0 0.6rem; font-size: 0.88rem; color: var(--texto-suave); }
.aporta-kushki-lista { margin: 0; padding-left: 1.2rem; font-size: 0.88rem; }
.aporta-kushki-lista li { margin: 0.3rem 0; }
.aporta-sistema { color: var(--texto-suave); font-size: 0.82rem; }

/* Lo que necesitas ANTES de subir (2026-08-27)
   Tono de lista de la compra, no de boletín de notas: marcador neutro «·», nunca
   ✗, porque el comercio todavía no ha subido nada y 23 cruces rojas le dirían que
   ya va perdiendo. Solo tokens que el modo oscuro REDEFINE (--tinta, --texto,
   --texto-suave, --linea, --celeste): usar --azul aquí sería repetir la trampa de
   contraste que este mismo commit arregla dos bloques más arriba. */
.card-requisitos-previos { border-left: 4px solid var(--menta-oscuro, #00c99a); }
.requisitos-previos-intro { margin: 0.2rem 0 0.8rem; font-size: 0.9rem; color: var(--texto); }
.requisitos-previos-nota {
  margin: 0 0 0.8rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: var(--celeste);
  font-size: 0.86rem;
  color: var(--texto);
}
.requisitos-previos-bloque { margin: 0.7rem 0; }
.requisitos-previos-rama {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.requisitos-previos-grupo { margin: 0 0 0.4rem; font-weight: 700; font-size: 0.88rem; color: var(--tinta); }
.requisitos-previos-sin-doc { margin: 0.2rem 0; font-size: 0.88rem; color: var(--texto); }
.requisitos-previos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.requisitos-previos-item { display: flex; gap: 0.55rem; align-items: flex-start; }
.requisitos-previos-marca { color: var(--texto-suave); font-weight: 700; line-height: 1.4; }
.requisitos-previos-texto { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--tinta); }
/* La glosa es lo accionable: qué documento conseguir. Va con el mismo peso visual
   que el requisito, no como letra pequeña. */
.requisitos-previos-glosa { margin: 0.15rem 0 0; font-size: 0.86rem; color: var(--texto); }
.requisitos-previos-vigencia { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--texto-suave); }
.requisitos-previos-verbatim {
  margin: 0.35rem 0 0;
  padding-left: 0.7rem;
  border-left: 2px solid var(--linea);
  font-size: 0.84rem;
  color: var(--texto);
}
.requisitos-previos-colapsable { margin: 0.6rem 0; }
.requisitos-previos-colapsable > summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--tinta);
  padding: 0.35rem 0;
}
.requisitos-previos-kushki {
  margin: 0.9rem 0 0;
  padding: 0.7rem 0.8rem;
  border-radius: 8px;
  background: var(--celeste);
}

/* ============================================================
   Modo noche del tablero del lote (auditoría visual 2026-08-22):
   `.caso-agregar` no tenía NINGUNA regla oscura — quedaba como un bloque
   gris brillante — y el aviso ámbar pintaba un panel oliva entero.
   ============================================================ */
:root[data-tema="oscuro"] .caso-agregar {
  background: rgba(16, 29, 43, 0.55);
  border-color: #2b4258;
  color: #7ab8ef;
}
:root[data-tema="oscuro"] .caso-agregar:hover:not(:disabled) {
  background: #0e3630;
  border-color: var(--menta-oscuro);
}
:root[data-tema="oscuro"] .caso-agregar .mas {
  background: #101d2b;
  border-color: #2b4258;
  color: #7ab8ef;
}
:root[data-tema="oscuro"] .caso-agregar:hover:not(:disabled) .mas {
  background: var(--menta-oscuro);
  color: #04121f;
}
:root[data-tema="oscuro"] .card-intake {
  background: linear-gradient(160deg, var(--blanco) 65%, #0e3630);
  border-color: #1e4a3e;
}
/* El aviso: superficie oscura + borde de acento, y el ámbar SOLO en el título.
   El cuerpo vuelve al texto normal — un párrafo entero amarillo cansa y grita. */
:root[data-tema="oscuro"] .intake-novinculados:not(:empty),
:root[data-tema="oscuro"] .intake-novinculados.intake-falla {
  background: #14212f;
  border: 1px solid #3a2c12;
  border-left: 4px solid #f5c451;
}
:root[data-tema="oscuro"] .intake-novinculados ul,
:root[data-tema="oscuro"] .intake-novinculados.intake-falla ul {
  color: var(--texto);
}
:root[data-tema="oscuro"] .intake-novinculados p.ayuda { color: var(--texto-suave); }
:root[data-tema="oscuro"] .intake-novinculados code {
  background: #0b1624;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  color: #7ab8ef;
}


/* La invitación contextual a CaseGuard, junto al sello del veredicto. El
   widget en sí (burbuja y panel) trae su propio CSS: shared/caseguard/. */
.cg-invitacion {
  display: inline-flex;
  align-items: center;
  margin-top: 0.7rem;
  border: none;
  background: none;
  padding: 0;
  font: 600 0.85rem var(--fuente);
  color: var(--menta-oscuro);
  cursor: pointer;
  transition: letter-spacing var(--transicion), color var(--transicion);
}
.cg-invitacion:hover { color: var(--azul-700); letter-spacing: 0.01em; }
:root[data-tema="oscuro"] .cg-invitacion { color: #6fe0c0; }
:root[data-tema="oscuro"] .cg-invitacion:hover { color: #9ccaf5; }

/* ============================================================
   «El Expediente» — el sello del veredicto (la firma del predictor)
   ============================================================ */
.sello-veredicto {
  display: inline-block;
  width: fit-content;
  font-family: var(--mono);
  font-weight: 600;
  text-align: center;
  border: 3px double currentColor;
  border-radius: 6px;
  padding: 0.6rem 1.3rem 0.5rem;
  margin: 0.9rem 0 0.3rem;
  transform: rotate(-2deg);
  letter-spacing: 0.2em;
  font-size: 0.92rem;
  line-height: 1.35;
  text-transform: uppercase;
  flex-shrink: 0;
  animation: estampar 340ms cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}
.sello-veredicto small {
  display: block;
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  opacity: 0.75;
  margin-top: 0.2rem;
}
.sello-COMPLETO, .sello-SIN_DOCUMENTACION_EXIGIDA { color: var(--ok); background: rgba(5, 150, 105, 0.05); }
.sello-INCOMPLETO { color: var(--sello); background: rgba(200, 16, 46, 0.04); }
.sello-INDETERMINADO { color: var(--ambar-texto, #b45309); background: rgba(217, 119, 6, 0.06); }
.sello-NO_EVALUADO { color: var(--neutro); background: rgba(100, 116, 139, 0.07); }
@keyframes estampar {
  from { transform: rotate(-2deg) scale(1.55); opacity: 0; }
  to { transform: rotate(-2deg) scale(1); opacity: 1; }
}
:root[data-tema="oscuro"] .sello-INCOMPLETO { color: #ff9db1; }
:root[data-tema="oscuro"] .sello-COMPLETO,
:root[data-tema="oscuro"] .sello-SIN_DOCUMENTACION_EXIGIDA { color: #6fe0c0; }
:root[data-tema="oscuro"] .sello-INDETERMINADO { color: #f5c451; }
:root[data-tema="oscuro"] .sello-NO_EVALUADO { color: #b7c6d8; }

/* Detalles dinámicos discretos: los controles responden al tacto. */
.btn:active { transform: scale(0.97); }
.checklist-fila:hover .checklist-fuente { border-color: var(--menta-oscuro); }
.checklist-fuente { transition: border-color var(--transicion); }
.btn-icono-mono { font-family: var(--mono); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .sello-veredicto { animation: none; }
}

/* ------------------------------------------------------------------
   F8 (auditoría del análisis, 2026-10-01): alternativas como OPCIONES,
   «Tiene / Le falta», rol único por documento y vista de impresión.
   ------------------------------------------------------------------ */
.chip-opcion { background: var(--celeste); color: var(--azul); }
:root[data-tema="oscuro"] .chip-opcion { background: var(--neutro-suave); color: var(--tinta); }
.chip-ambito { background: var(--neutro-suave); color: var(--texto-suave); margin-left: .4rem; }
.chip-cita-aviso { background: var(--neutro-suave); color: var(--texto); margin-left: .4rem; }

.checklist-fila.opcion-sin-documento .check-icono { background: var(--neutro-suave); color: var(--texto-suave); }
.checklist-fila.opcion-sin-documento .checklist-texto { color: var(--texto); }
.opcion-detalle summary,
.alternativas-giro > summary,
.faltante-otras > summary,
.emisor-ingles > summary {
  cursor: pointer;
  font-size: .84rem;
  color: var(--azul);
  font-weight: 600;
}
:root[data-tema="oscuro"] .opcion-detalle summary,
:root[data-tema="oscuro"] .alternativas-giro > summary,
:root[data-tema="oscuro"] .faltante-otras > summary,
:root[data-tema="oscuro"] .emisor-ingles > summary { color: var(--menta); }
.alternativas-giro { margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed var(--linea); }
.alternativas-giro > ul { margin-top: .4rem; }
.emisor-ingles > summary { font-weight: 400; color: var(--texto); }

.checklist-elementos { margin-top: .4rem; font-size: .84rem; }
.checklist-elementos ul { margin: .1rem 0 .3rem; padding-left: 1.1rem; }
.elementos-titulo { margin: .2rem 0 0; font-weight: 600; }
.elementos-titulo.ok { color: var(--ok); }
.elementos-titulo.falta { color: var(--error); }

.faltante-subtitulo { margin: .5rem 0 .2rem; font-size: .86rem; font-weight: 600; color: var(--tinta); }
.faltante-cercano > li { margin-bottom: .4rem; }
.faltante-otras { margin-top: .5rem; }

.doc-a-medias .doc-icono { color: var(--ambar); }

.resultado-rama p { margin: .15rem 0; }
.rama-original, .rama-motivo-emisor { color: var(--texto-suave); font-size: .88rem; }

/* Impresión (B7): el navegador repetía en cada hoja los elementos fijos
   (skip-link, CaseGuard) y el disclaimer salía dos veces. */
@media print {
  /* El widget de CaseGuard se oculta en su propio CSS (shared/caseguard). */
  .skip-link,
  .cabecera,
  .pie #texto-disclaimer {
    display: none !important;
  }
  body { background: #fff; }
  .card { box-shadow: none; break-inside: auto; }
  .checklist-fila,
  .faltante-fila li,
  .emisor-fila,
  .doc-analizado { break-inside: avoid; }
  details > summary { list-style: none; }
}