/* ============================================================
   VIEWS — estilos específicos de cada vista (facial, vehículos)
============================================================ */

/* ==========================================================
   Vista "Infracciones por regiones"
========================================================== */
.regiones-hero {
  margin: 0 0 clamp(18px, 2vw, 24px);
  max-width: 760px;
}
.regiones-title {
  font-family: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 400;
  color: var(--c-primary);
  letter-spacing: -.4px;
  line-height: 1.15;
  margin: 6px 0 8px;
}
.regiones-sub {
  font-size: clamp(13px, 1.1vw, 14px);
  color: var(--c-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 620px;
}

.regiones-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.regiones-toolbar .regiones-search {
  flex: 1;
  max-width: 360px;
  min-width: 220px;
}
.regiones-count {
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.regiones-count strong {
  color: var(--c-primary);
  font-weight: 700;
}

.regiones-grid-view {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .regiones-grid-view { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile — 2 columnas con layout vertical (icono arriba, nombre abajo) */
@media (max-width: 640px) {
  .regiones-grid-view { gap: 8px; }
  .regiones-toolbar .regiones-search { max-width: none; width: 100%; }
  .regiones-grid-view .region-card {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 16px 10px;
    min-height: 118px;
  }
  .regiones-grid-view .region-flag {
    width: 40px;
    height: 40px;
  }
  .regiones-grid-view .region-flag svg { width: 20px; height: 20px; }
  .regiones-grid-view .region-info {
    align-items: center;
    text-align: center;
    flex: 0 0 auto;
  }
  .regiones-grid-view .region-info strong {
    font-size: var(--fs-sm);
    line-height: 1.3;
  }
  .regiones-grid-view .region-info small { display: none; }
}

/* ==========================================================
   Servicios disponibles — MOVIDO A css/service-cards.css
   Mantener `region-flag` aquí porque se usa en otro componente.
========================================================== */
.region-flag { position: relative; overflow: hidden; }
.region-flag img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}
.region-card.has-image .region-flag {
  background: var(--c-surface);
  box-shadow: inset 0 0 0 1px var(--c-border);
}

/* ==========================================================
   Títulos simples de vistas secundarias (cuenta, saldo, etc.)
========================================================== */
.compact-hero { margin: 0 0 clamp(14px, 1.8vw, 20px); }

.simple-title {
  font-family: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: -.3px;
  line-height: 1.2;
  margin: 0;
}

/* Título del Dashboard — más grande que los demás títulos simples */
#dashTitle {
  font-size: clamp(26px, 3.8vw, 42px);
  font-weight: 700;
  letter-spacing: -.4px;
  line-height: 1.15;
}
@media (max-width: 720px) {
  /* Hero del dashboard más compacto en móvil */
  #view-dashboard .compact-hero { margin-bottom: 10px; }
  #view-dashboard .hero-eyebrow { margin-bottom: 4px; font-size: var(--fs-xs); letter-spacing: 1.4px; }
  /* Título en una sola fila, prominente y ajustado al ancho */
  #dashTitle {
    font-size: clamp(23px, 7.6vw, 36px);
    letter-spacing: -.7px;
    line-height: 1.12;
    white-space: nowrap;
    width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: clip;
  }
}
/* En pantallas muy estrechas (≤ 360px) se permite partir en 2 líneas balanceadas */
@media (max-width: 360px) {
  #dashTitle {
    white-space: normal;
    text-wrap: balance;
    font-size: clamp(22px, 8vw, 30px);
  }
}

/* ==========================================================
   Dashboard
========================================================== */
.dash-grid {
  contain: layout style;
  transform: translateZ(0);
  backface-visibility: hidden;
  display: grid;
  grid-template-columns: minmax(320px, 380px) 1fr;
  gap: 14px;
  margin-bottom: 14px;
  align-items: start;
}
.dash-col { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1024px) {
  .dash-grid { grid-template-columns: 1fr; }
}

/* Card del plan */
.plan-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Sin hover transform — cards 100% estáticas */
.plan-card:hover,
.credits-card:hover {
  transform: none;
  box-shadow: none;
}
.plan-cover {
  width: 100%;
  height: 110px;
  background: var(--c-surface-dark);
}
.plan-avatar {
  margin-top: -48px;
  padding: 0 0 4px;
}
.plan-avatar .avatar {
  border: 4px solid var(--c-surface);
  box-shadow: none;
}
.plan-name {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--c-primary);
  margin: 10px 0 2px;
}
.plan-sub-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-primary);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 3px 10px;
  margin: 0 0 8px;
  letter-spacing: 0.2px;
}
.plan-sub-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-success);
  flex-shrink: 0;
}
.plan-email {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin-bottom: 16px;
}
.plan-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 20px;
  margin-bottom: 16px;
}
.plan-stat { display: flex; flex-direction: column; gap: 2px; }
.plan-stat strong {
  font-size: var(--fs-lg);
  color: var(--c-primary);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.2px;
}
.plan-stat span {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  letter-spacing: .2px;
}
.plan-divider {
  width: 1px;
  height: 28px;
  background: var(--c-border);
}
.plan-cta {
  margin: 0 20px 20px;
  width: calc(100% - 40px);
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.plan-cta svg { width: 14px; height: 14px; }

/* Credits ring card */
.credits-card { padding: 20px 22px; }
.credits-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.credits-header h3 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-primary);
  margin: 0;
  letter-spacing: .1px;
}
.period-chip {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-muted);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--c-bg);
  letter-spacing: .2px;
}
.credits-body {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 14px;
}
.credits-info { flex: 1; min-width: 0; }
.credits-label {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  display: block;
  margin-bottom: 2px;
}
.credits-total {
  font-size: var(--fs-xl);
  font-weight: 400;
  color: var(--c-primary);
  line-height: 1;
  display: block;
  margin-bottom: 12px;
  letter-spacing: -.4px;
}
.btn-sm {
  padding: 7px 12px;
  font-size: var(--fs-sm);
  min-height: auto;
}

/* Botón «Descargar PDF» del historial.

   Ojo con el icono: en este proyecto NO hay una regla general que
   dimensione los `svg` dentro de `.btn` —solo las hay acotadas a
   `.form-row` y a `.nm-fields`—, así que un svg sin `width`/`height`
   se estira hasta llenar el botón. Aquí se fija por las dos vías, en
   el atributo del marcado y en el CSS, para que no vuelva a pasar.

   Y no se estira a lo ancho: `.btn-sm` pasa a `width: 100%` por debajo
   de 640px, que en la fila del encabezado lo convertía en un bloque. */
#historialPdfBtn {
  /* `.btn` no es flex, así que el icono y el texto irían como contenido
     en línea y el `gap` no valdría nada. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* `.btn` trae `flex: 1 1 auto`, que dentro del encabezado —que sí es
     flex— lo hacía crecer hasta comerse la fila. */
  flex: 0 0 auto;
  width: auto !important;
  white-space: nowrap;
  /* Oscuro institucional, no verde. base.css pinta TODOS los
     `.btn-primary` de verde lima con `!important` (ahí está la regla,
     buscar «Botón primario en verde lima»), así que la única forma de
     salirse es por identificador y con `!important` tambien. */
  background: var(--c-surface-dark) !important;
  border-color: var(--c-surface-dark) !important;
  color: #ffffff !important;
}
#historialPdfBtn:hover:not(:disabled) {
  background: #2a3b38 !important;
  border-color: #2a3b38 !important;
}
#historialPdfBtn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.credits-ring {
  position: relative;
  width: 110px;
  height: 110px;
  flex-shrink: 0;
}
.credits-ring svg { width: 100%; height: 100%; }
.gauge-tick {
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke .25s;
}
.gauge-tick.off { stroke: #DADADA; }
.gauge-tick.on { stroke: var(--c-primary); }
.credits-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.credits-ring-text strong {
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--c-primary);
  line-height: 1;
  letter-spacing: -.2px;
}
.credits-ring-text span {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-top: 2px;
}
.credits-note {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  line-height: 1.5;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
}

/* Stats panel + chart */
.stats-panel { padding: 18px 20px; }
.period-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.period-card {
  background: var(--c-bg);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.period-card span {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  letter-spacing: .2px;
}
.period-card strong {
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--c-primary);
  line-height: 1;
  margin-top: 4px;
  letter-spacing: -.2px;
}
.stats-chart {
  position: relative;
  display: flex;
  flex-direction: column;
}
.stats-chart svg {
  width: 100%;
  height: 120px;
  display: block;
}
.chart-months {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  padding-top: 8px;
  letter-spacing: .2px;
}

/* Consumo por módulo */
.modules-panel { padding: 18px 20px; }
.modules-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.module-row {
  display: grid;
  grid-template-columns: 22px auto 1fr 28px;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
}
.module-ico {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-muted);
}
.module-ico svg { width: 16px; height: 16px; }
.module-name {
  font-weight: 400;
  color: var(--c-primary);
  min-width: 80px;
}
.module-bar {
  height: 6px;
  background: var(--c-bg);
  border-radius: 999px;
  overflow: hidden;
}
.module-bar span {
  display: block;
  height: 100%;
  background: var(--c-surface-dark);
  border-radius: 999px;
  min-width: 6px;
  transition: width .4s ease;
}
.module-count {
  text-align: right;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-primary);
  line-height: 1;
}

/* Tarjeta de promoción / upgrade */
.promo-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}
.promo-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--c-surface-dark);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.promo-icon svg { width: 22px; height: 22px; }
.promo-text { flex: 1; min-width: 0; }
.promo-text strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: 2px;
}
.promo-text p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-muted);
  line-height: 1.45;
}
.promo-card .btn { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 560px) {
  .promo-card { flex-wrap: wrap; }
  .promo-card .btn { width: 100%; justify-content: center; }
}

/* Accesos rápidos compactos */
.quick-panel { padding: 18px 22px; }
.quick-actions-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.quick-compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--c-primary);
}
/* Sin hover en quick-compact */
.quick-compact:active { transform: scale(.97); }
.quick-compact svg { width: 20px; height: 20px; }
.quick-compact span {
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: .2px;
}

@media (max-width: 640px) {
  .plan-stats { flex-direction: row; gap: 14px; }
  .credits-body { flex-direction: column-reverse; gap: 16px; }
  .credits-ring { width: 120px; height: 120px; margin: 0 auto; }
  .credits-info { text-align: center; }
  .btn-sm { width: 100%; }
  .period-stats { grid-template-columns: 1fr; gap: 6px; }
  .period-card { flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 14px; }
  .period-card strong { font-size: var(--fs-lg); margin-top: 0; }
}

/* Mi cuenta */
.account-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  align-items: start;
}
.avatar-lg {
  width: 96px;
  height: 96px;
  font-size: var(--fs-xl);
  border-radius: 50%;
}
.account-info { display: flex; flex-direction: column; gap: 2px; }
.account-info .input.is-editing {
  background: #ffffff;
  border-color: var(--c-surface-dark);
}
.account-info .input[readonly] {
  background: var(--c-bg);
  color: var(--c-text);
  cursor: default;
}
@media (max-width: 640px) {
  .account-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .account-info { width: 100%; }
}

#view-saldo .simple-title { text-transform: uppercase; letter-spacing: .5px; }

/* Mi saldo */
.saldo-panel {
  text-align: center;
  padding: clamp(28px, 4vw, 48px) 24px;
  margin-bottom: 28px;
}
.saldo-amount { display: flex; flex-direction: column; gap: 6px; }
.saldo-label {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  letter-spacing: .6px;
  text-transform: uppercase; /* micro-label OK a 11px */
  font-weight: 700;
}
.saldo-value {
  font-family: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  color: var(--c-primary);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1px;
}
.saldo-credits {
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* Configuración — toggles */
.settings-list { display: flex; flex-direction: column; }
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-border);
}
.setting-row:last-child { border-bottom: none; }
.setting-info strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-primary);
  margin-bottom: 3px;
}
.setting-info span {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  line-height: 1.45;
}
.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
  position: absolute;
  inset: 0;
  background: #D5D5D5;
  border-radius: 999px;
  transition: background .2s;
  cursor: pointer;
}
.switch span::before {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: none;
  transition: transform .2s;
}
.switch input:checked + span { background: var(--c-surface-dark); }
.switch input:checked + span::before { transform: translateX(16px); }

/* ==========================================================
   Hero — título principal
   Adaptable de 320px a 1920px+ con escalado fluido
========================================================== */

.hero {
  margin: 0 0 clamp(18px, 2.2vw, 24px);
  max-width: 920px;
}

.hero-eyebrow {
  display: block;
  font-family: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-muted);
  letter-spacing: 1.2px;
  text-transform: uppercase; /* micro-label: uppercase OK a ≤11px */
  margin-bottom: clamp(6px, 1vw, 10px);
}

.hero-title {
  font-family: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(28px, 5.5vw, 58px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.5px;
  color: var(--c-primary);
  margin: 0;
  text-wrap: balance;
  hyphens: manual;
}
.hero-title em {
  font-style: italic;
  font-weight: 400;
  font-size: 1.18em;
  color: var(--c-accent);
  line-height: 1;
}

/* Desktop grandes (≥ 1280px): letter-spacing más apretado tipo editorial */
@media (min-width: 1280px) {
  .hero-title { letter-spacing: -1px; }
}

/* Tablet (768px–1023px) */
@media (max-width: 1023px) {
  .hero-title { font-size: clamp(38px, 6.5vw, 60px); }
}

/* Mobile (480px–767px) */
@media (max-width: 767px) {
  .hero-title { font-size: clamp(36px, 9.5vw, 52px); letter-spacing: -.5px; line-height: 1.08; }
  .hero-eyebrow { font-size: var(--fs-xs); letter-spacing: 1.6px; margin-bottom: 10px; }
}

/* Mobile chico (≤ 380px) */
@media (max-width: 380px) {
  .hero-title { font-size: var(--fs-xl); }
}

@media (max-width: 640px) {
  .hero { padding: 22px 20px; }
  .hero-title { letter-spacing: -.5px; }
}

/* Section header */
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  margin-bottom: 16px;
}
.section-title {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -.1px;
  color: var(--c-primary);
  margin: 0;
  line-height: 1.35;
}

/* Panel principal */
.panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: clamp(18px, 2.5vw, 24px);
}
.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.panel-head-left { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.panel-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--c-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-primary);
  flex-shrink: 0;
}
.panel-icon svg { width: 19px; height: 19px; }
.panel-head h3 { font-size: var(--fs-md); font-weight: 400; color: var(--c-primary); margin: 0 0 4px; }
.panel-head p { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; }
/* La linea que explica que devuelve la consulta. Va deliberadamente
   pequena y en gris: es un apunte de apoyo, no contenido. Lo que manda
   en esta caja es el campo y el boton de consultar, y a 14px en el
   oscuro de marca competia con ellos.
   Es la unica excepcion al minimo de 15px del resto de paneles: aqui se
   pidio expresamente que no se notara. */
.panel-desc {
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.5;
  margin: 0 0 12px;
}

/* ==========================================================
   CTA "Obtén tu reporte" — flotante (Consultar Placa)
   Fijo sobre el viewport para que siga visible al hacer scroll.
   Va abajo a la izquierda, pero DENTRO del área de contenido: en
   escritorio se corre el ancho del sidebar, que si no queda encima
   de "Configuración" y del pie legal. La esquina inferior derecha
   no se usa porque ahí vive el FAB de WhatsApp (.wa-fab).
   Se reserva espacio al fondo de la vista para que el último panel
   no quede tapado detrás del botón.
========================================================== */
/* Sin hueco reservado abajo. Estos 88px existían para que el CTA flotante
   "Obtén tu reporte" no tapara las últimas tarjetas cuando la vista era lo
   último de la página. Ahora hay pie debajo —que ya hace de colchón— y
   además el CTA se frena sobre él (ver --fv-lift en footer.js), así que el
   hueco solo dejaba un vacío enorme entre las tarjetas y el pie. */
#view-filter { padding-bottom: 0; }

/* CTA "Reporte completo" — ya NO flota. Vive dentro de la caja de busqueda,
   debajo del campo de la placa. Antes era position:fixed abajo a la
   izquierda: lejos del campo con el que trabaja, tapando contenido y
   montandose sobre el pie de pagina. */
#ctaReporteBtn.cta-reporte-btn {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  margin: 12px 0 0;
  padding: 13px 15px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  background: var(--c-surface-dark);
  color: #ffffff;
  transition: background .16s ease;
}

/* El icono en su propia baldosa, con el turquesa de marca. */
.cta-reporte-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  color: #03a7a4;
  transition: background .16s ease, color .16s ease;
}
.cta-reporte-ico svg { width: 19px; height: 19px; }

.cta-reporte-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}
.cta-reporte-text strong {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -.1px;
}
.cta-reporte-text small {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: rgba(255, 255, 255, .58);
}

.cta-reporte-arrow {
  flex: none;
  width: 18px;
  height: 18px;
  opacity: .45;
  transition: opacity .16s ease, transform .16s ease;
}

#ctaReporteBtn.cta-reporte-btn:hover { background: #03a7a4; }
#ctaReporteBtn.cta-reporte-btn:hover .cta-reporte-ico { background: rgba(255,255,255,.16); color: #ffffff; }
#ctaReporteBtn.cta-reporte-btn:hover .cta-reporte-text small { color: rgba(255,255,255,.8); }
#ctaReporteBtn.cta-reporte-btn:hover .cta-reporte-arrow { opacity: 1; transform: translateX(3px); }

@media (max-width: 560px) {
  #ctaReporteBtn.cta-reporte-btn { padding: 12px; gap: 11px; }
  .cta-reporte-ico { width: 34px; height: 34px; }
  .cta-reporte-text small { display: none; }
}

/* El bloque que habia aqui posicionaba el CTA flotante en movil (left/bottom
   16px, esquivando el FAB de WhatsApp). Ya no aplica: el CTA dejo de flotar
   y vive dentro de la caja de busqueda, asi que se adapta solo. */
@media (max-width: 768px) {
  #view-filter { padding-bottom: 0; }
}

/* ==========================================================
   Caja de búsqueda rápida (Inicio / Consultar Placa)
   Contenedor transparente que agrupa el selector + el panel.
   NO es sticky: scrollea con el resto del contenido para evitar
   que otros cuadros pasen por debajo de él.
========================================================== */
.filter-search-box {
  background: transparent;
  color: var(--c-primary);
  padding: 0;
  margin-bottom: 16px;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Cada hijo mantiene su propio borde y fondo; el gap los separa. */
.filter-search-box .selector-card {
  margin-bottom: 0;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}
.filter-search-box > .panel {
  margin-bottom: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  padding: 16px 20px;
}

@media (max-width: 720px) {
  .filter-search-box {
    margin-bottom: 14px;
    gap: 10px;
  }
}

/* Selector superior */
.selector-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.selector-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-muted);
  margin-bottom: 8px;
  text-transform: uppercase; /* micro-label OK a 11px */
  letter-spacing: .5px;
}

/* Consumo + credits row (Vehículos) */
.consumo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.consumo-label {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-primary);
}

/* Form row (input + botones inline) */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.form-row .input {
  flex: 1 1 260px;
  min-width: 0;
  height: 44px;
}
.form-row .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  flex: 0 0 auto;
  height: 44px;
  min-height: 44px;
}
.form-row .btn svg { width: 16px; height: 16px; }

@media (min-width: 768px) {
  .form-row .input { height: 40px; }
  .form-row .btn { height: 40px; min-height: 40px; padding: 0 16px; }
}
@media (max-width: 640px) {
  .form-row { flex-direction: column; align-items: stretch; }
  .form-row .input { flex: 0 0 44px; width: 100%; height: 44px; }
  .form-row .btn { width: 100%; flex: 0 0 44px; }
}

.nm-hint {
  font-size: var(--fs-sm);
  color: #999;
  margin: 0 0 6px 0;
  width: 100%;
}
/* 3 campos para búsqueda por nombre (/nm) */
.nm-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.nm-inputs {
  flex: 1 1 0;
  display: flex;
  gap: 8px;
  min-width: 0;
}
.nm-input {
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
}
.nm-fields .btn {
  flex: 0 0 auto;
  height: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nm-fields .btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .nm-input { height: 40px; }
  .nm-fields .btn { height: 40px; min-height: 40px; }
}
@media (max-width: 640px) {
  .nm-inputs { flex-direction: column; }
  .nm-input { width: 100%; height: 44px; }
  .nm-fields { flex-direction: column; align-items: stretch; }
  .nm-fields .btn { width: 100%; }
}

/* Resultados de búsqueda por nombre (/nm) — tabla */
.nm-results { padding: 8px; }
.nm-header { font-weight: bold; font-size: var(--fs-sm); color: #141d1c; margin-bottom: 4px; }
.nm-query-bar { background: var(--c-surface-dark); color: #ffffff; font-weight: normal; font-size: var(--fs-sm); padding: 6px 10px; margin-bottom: 4px; }
.nm-meta { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-sm); color: #141d1c; padding: 2px 0; }
.nm-meta-bold { font-weight: bold; }
.nm-meta-italic { font-style: italic; color: #999; }
/* Lo que vale igual en todos los registros del grupo, encima de la tabla:
   titular, libro, estado… Una línea en vez de una columna repetida. */
.cr-tbl-fijos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  padding: 0 0 10px;
}
.cr-tbl-fijo { display: inline-flex; align-items: baseline; gap: 8px; font-size: var(--cr-fs); }
.cr-tbl-fijo-k { color: var(--c-muted); text-transform: uppercase; }
.cr-tbl-fijo-v { color: var(--c-primary); font-weight: 700; }

.nm-table-wrap { overflow-x: auto; }
.nm-table { width: 100%; border-collapse: collapse; font-size: var(--cr-fs); }
.nm-table thead th { background: var(--c-surface-dark); color: #ffffff; font-weight: normal; font-size: var(--fs-xs); text-transform: uppercase; padding: 8px 10px; text-align: left; white-space: nowrap; }
.nm-table tbody td { padding: 6px 10px; white-space: nowrap; }
.nm-table tbody tr:nth-child(even) { background: #f8f9fa; }
/* Barra del botón de descarga. Usa las MISMAS variables de padding
   lateral que .cr-layout / .nm-results, para que el botón quede alineado
   con el borde derecho del contenido en vez de pegado al panel (y para
   que siga la reducción a 14px del breakpoint móvil automáticamente). */
.cr-dl-bar {
  display: flex;
  justify-content: flex-end;
  padding: 20px var(--cr-padding-right) 0 var(--cr-padding-left);
}
/* Dentro de las tablas (/nm, /ag) el contenedor ya trae su propio
   padding de 8px, así que la barra se alinea al borde de la tabla. */
.cr-dl-bar-tabla { padding: 4px 0 12px; }
.cr-dl-bar .nm-download { margin: 0; }

.nm-download { margin: 0 0 12px auto; display: flex; width: auto; max-width: max-content; justify-content: center; align-items: center; gap: 8px; border: none; background: var(--c-surface-dark); color: #ffffff; padding: 10px 20px; border-radius: 8px; font-family: inherit; font-size: var(--fs-sm); font-weight: normal; line-height: 1; cursor: pointer; transition: background var(--t-fast); }
.nm-download svg { width: 17px; height: 17px; flex-shrink: 0; }
.nm-download:hover { background: #2a3b38; }
.nm-download:disabled { opacity: .65; cursor: not-allowed; }

/* ============================================================
   Overlay de descarga — círculo animado centrado en pantalla
   mientras el bot genera el archivo (puede tardar >1 min).
============================================================ */
.dl-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 29, 28, .52);
}
.dl-overlay[hidden] { display: none !important; }
.dl-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(100%, 400px);
  padding: 28px 24px 24px;
  border: 1px solid #d6dcd2;
  border-radius: 14px;
  background: #ffffff;
  text-align: center;
}
.dl-ring {
  position: relative;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Aro de fondo + arco que gira */
.dl-ring::before,
.dl-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid #e4e9df;
}
.dl-ring::after {
  border-color: #82bd29 transparent transparent transparent;
  animation: dl-spin 1s linear infinite;
}
.dl-ring svg { display: none; }
@keyframes dl-spin { to { transform: rotate(360deg); } }
@keyframes dl-bounce {
  0%, 100% { transform: translateY(-3px); }
  50%      { transform: translateY(3px); }
}
.dl-title {
  font-size: 20px;
  font-weight: 700;
  color: #141d1c;
  text-align: center;
}
.dl-sub {
  font-size: 14px;
  color: #536058;
  text-align: center;
  max-width: 34ch;
  line-height: 1.5;
}
.dl-timer { color: #52634c; font-size: 13px; font-variant-numeric: tabular-nums; }
.dl-timer[hidden] { display: none; }
/* Salida del cliente cuando el proveedor se demora. Aparece recién al
   primer reintento: antes no hay nada que abandonar. Sobre el fondo oscuro
   del aviso, el blanco es lo que más se ve sin gritar. */
.dl-actions {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 6px;
}
.dl-actions[hidden] { display: none; }
.dl-cancel {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  min-height: 44px;
  width: 100%;
  padding: 10px 18px;
  border: 1px solid #c9d1c6;
  border-radius: 8px;
  background: #f6f8f4;
  color: #141d1c;
  cursor: pointer;
  transition: background var(--t-fast);
}
.dl-cancel:hover { background: #eaf0e5; }
.dl-cancel:focus-visible { outline: 2px solid #141d1c; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .dl-ring::after, .dl-ring svg { animation: none; }
}

/* Botón full-width (para el "Consultar" de facial) */
.btn.btn-block { width: 100%; justify-content: center; }

/* ==== Hint de formato de comando (ej. /nm búsqueda por nombres) ==== */
.cr-cmd-hint {
  margin: 12px 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  border-radius: 8px;
  font-size: var(--fs-sm);
  color: var(--c-primary);
}
.cr-cmd-hint-title {
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.2px;
  color: var(--c-primary);
  margin: 0 0 6px;
  text-transform: uppercase;
}
.cr-cmd-hint-sub { margin-top: 10px; }
.cr-cmd-hint-list,
.cr-cmd-hint-examples {
  margin: 0;
  padding: 0 0 0 16px;
  list-style: disc;
  line-height: 1.55;
}
.cr-cmd-hint-list li { color: var(--c-primary); }
.cr-cmd-hint-examples li { color: var(--c-primary); }
.cr-cmd-hint-examples li span { color: var(--c-muted); font-size: var(--fs-xs); margin-left: 4px; }
.cr-cmd-hint code,
.cr-cmd-hint-code {
  font-family: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--c-surface);
  color: var(--c-primary);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--c-border);
  font-size: var(--fs-sm);
}
.cr-cmd-hint-code {
  display: inline-block;
  margin: 4px 0 2px;
  padding: 4px 8px;
  font-weight: 400;
}

/* ==== Dropzone de foto (Reconocimiento facial) ==== */
.facial-dropzone {
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  padding: 28px 20px;
  background: #fafafa;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  margin: 14px 0;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.facial-dropzone:hover,
.facial-dropzone.is-dragover {
  border-color: #8fc72e;
  background: #edf7d9;
}
.facial-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: var(--c-muted);
}
.facial-dropzone-inner svg {
  width: 44px;
  height: 44px;
  color: var(--c-muted);
  margin-bottom: 4px;
}
.facial-dropzone-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-primary);
}
.facial-dropzone-sub {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.facial-dropzone-browse {
  color: #8fc72e;
  font-weight: 700;
  text-decoration: underline;
}
.facial-dropzone-hint {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  letter-spacing: 0.2px;
}
.facial-dropzone-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.facial-dropzone-preview img {
  max-width: 100%;
  max-height: 260px;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #e5e7eb;
}
.facial-dropzone-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--c-primary);
}
.facial-dropzone-filename {
  font-weight: 400;
  word-break: break-all;
}
.facial-dropzone-remove {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.facial-dropzone-remove:hover {
  border-color: var(--c-surface-dark);
  color: #141d1c;
}
.facial-dropzone-remove svg { width: 14px; height: 14px; }

/* Espaciado vistas — gap proporcional unificado */
.view > .panel,
.view > .view-header,
.view > .selector-card { margin-bottom: clamp(14px, 1.6vw, 18px); }
.view > :last-child { margin-bottom: 0; }


/* Extras combined IMG + TXT */
.extras-combined {
  padding: 28px;
  background: #F5F5F5;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  min-height: 440px;
}
.extras-img-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.extras-img-slot .img-slot-inner {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--c-surface);
  border: 1px dashed var(--c-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
  opacity: .6;
  box-shadow: none;
}
.extras-img-slot .img-slot-inner svg { width: 48px; height: 48px; }
.extras-txt-sheet {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 22px 26px;
  box-shadow: none;
  min-height: 320px;
}
.extras-txt-sheet .txt-content {
  margin: 0;
  font-family: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 768px) {
  .extras-combined { grid-template-columns: 1fr; }
  .extras-img-slot { max-width: 220px; margin: 0 auto; }
}

/* Maintenance panel */
.maintenance-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 56px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-bottom: 14px;
}
.maintenance-panel[hidden] { display: none; }
.maintenance-icon {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background: #f5f5f5;
  color: #141d1c;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.maintenance-icon svg { width: 36px; height: 36px; }
.maintenance-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-primary);
  margin: 0;
  letter-spacing: -.2px;
}
.maintenance-desc {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  max-width: 480px;
  line-height: 1.55;
  margin: 0;
}
.maintenance-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #f5f5f5;
  color: #141d1c;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-top: 6px;
}
.maintenance-chip .status-dot {
  background: var(--c-surface-dark);
  animation: pulse 1.5s ease-in-out infinite;
}




/* Result panels (Datos / Documentos) */
.result-panel { padding: 0; overflow: visible; }
.result-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: 12px 12px 0 0;
}
.result-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.result-header-left > svg { width: 18px; height: 18px; color: var(--c-primary); }
.result-header h3 {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-primary);
  margin: 0;
  letter-spacing: .2px;
}
/* ===== Previsualización real del PDF: sin caja, sin borde, a todo el
   ancho del panel. El «Descargar» vive en la cabecera del resultado, junto
   a «Nueva consulta» (renderPdfDlBar + subirDescargaACabecera) — aquí no
   hay botón ni título, solo la ficha. Mismo padding lateral que el resto
   del panel (--cr-padding-left/right), no uno propio. ===== */
/* Margen lateral propio y fijo: --cr-padding-left/right caen a 0 en la
   consulta de medios de 720px (para que las filas de datos lleguen al
   borde) y ahí la ficha del PDF quedaba pegada de borde a borde. */
.cr-doccards {
  padding: 0 20px 20px;
  display: flex; flex-direction: column; gap: 20px;
}
/* Los documentos se listan: nombre, peso y sus dos acciones. */
.cr-doclist { display: flex; flex-direction: column; gap: 8px; }
.cr-docitem {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-surface);
}
.cr-docitem-ico { flex-shrink: 0; color: var(--c-muted); display: inline-flex; }
.cr-docitem-ico svg { width: 20px; height: 20px; }
.cr-docitem-nom {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--cr-fs); color: var(--c-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cr-docitem-orden {
  color: var(--c-muted); margin-right: 8px;
  font-variant-numeric: tabular-nums;
}
.cr-docitem-peso { color: var(--c-muted); margin-left: 8px; }
.cr-docitem-ver {
  flex-shrink: 0; font-family: inherit; font-size: var(--cr-fs);
  padding: 7px 14px; border-radius: 8px; cursor: pointer; text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.cr-docitem-ver { border: 1px solid var(--c-border); background: #ffffff; color: var(--c-primary); }
.cr-docitem-ver:hover { border-color: var(--c-surface-dark); }
/* En angosto el nombre del archivo y los dos botones no caben en una
   línea: el nombre pasa arriba y las acciones debajo, a la derecha. */
@media (max-width: 560px) {
  .cr-docitem { flex-wrap: wrap; }
  .cr-docitem-nom { flex: 1 1 100%; order: -1; white-space: normal; }
  .cr-docitem-ico { display: none; }
  .cr-docitem-ver { flex: 1 1 0; text-align: center; justify-content: center; }
}

/* Lista de datos */
.data-list { display: flex; flex-direction: column; margin: 0; padding: 0; }
.data-row {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: 32px;
  padding: 14px 20px;
  border-bottom: 1px solid #E8E8E8;
  font-size: var(--fs-sm);
  transition: background .12s;
}
.data-row:last-child { border-bottom: none; }
.data-row:hover { background: #FAFAFA; }
.data-row dt {
  font-weight: 400;
  color: var(--c-muted);
  font-size: var(--fs-sm);
  letter-spacing: .2px;
}
.data-row dd {
  margin: 0;
  color: var(--c-primary);
  font-weight: 400;
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}

/* Skeleton loader */
.skeleton {
  display: inline-block;
  min-width: 180px;
  height: 14px;
  background: linear-gradient(90deg, #E5E5E5 0%, #F0F0F0 50%, #E5E5E5 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (max-width: 640px) {
  .data-row { grid-template-columns: 1fr; gap: 4px; }
  .data-row dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .4px; }
  .skeleton { min-width: 140px; }
}

/* Dropzone (Facial) */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(36px, 6vw, 56px) 20px;
  border: 2px dashed #CCCCCC;
  border-radius: 12px;
  background: #F5F5F5;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  text-align: center;
}
.dropzone:hover { border-color: var(--c-accent); background: #F5F5F5; }
.dropzone.dragover { border-color: var(--c-accent); background: #edf7d9; }
.dz-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #E5E5E5;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-primary);
  margin-bottom: 4px;
}
.dz-icon svg { width: 26px; height: 26px; }
.dz-title { font-size: var(--fs-md); font-weight: 700; color: var(--c-primary); }
.dz-sub { font-size: var(--fs-sm); color: var(--c-muted); }
.dz-sub strong { color: var(--c-primary); font-weight: 700; }
.dz-hint {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #edf7d9;
  color: #141d1c;
  font-size: var(--fs-xs);
  font-weight: 400;
  border-radius: 999px;
}
.dz-hint svg { width: 13px; height: 13px; }

/* PDF Preview */
.pdf-preview {
  min-height: 440px;
  background:
    linear-gradient(135deg, #EEEEEE 25%, transparent 25%) -10px 0 / 20px 20px,
    linear-gradient(225deg, #EEEEEE 25%, transparent 25%) -10px 0 / 20px 20px,
    linear-gradient(315deg, #EEEEEE 25%, transparent 25%) 0 0 / 20px 20px,
    linear-gradient(45deg, #EEEEEE 25%, transparent 25%) 0 0 / 20px 20px,
    #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.pdf-placeholder-page {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 3 / 4;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  text-align: center;
  gap: 14px;
  position: relative;
}
.pdf-placeholder-page::before,
.pdf-placeholder-page::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 24px; right: 24px;
  height: 5px;
  background: #E8E8E8;
  border-radius: 3px;
}
.pdf-placeholder-page::after { top: 34px; right: 60px; }
.pdf-ph-icon {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--c-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-primary);
  margin-top: 20px;
}
.pdf-ph-icon svg { width: 28px; height: 28px; }
.pdf-ph-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-primary);
}
.pdf-ph-sub {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  line-height: 1.5;
  max-width: 240px;
}


/* TXT preview — hoja blanca tipo documento */
.txt-preview {
  min-height: 440px;
  background:
    linear-gradient(135deg, #EEEEEE 25%, transparent 25%) -10px 0 / 20px 20px,
    linear-gradient(225deg, #EEEEEE 25%, transparent 25%) -10px 0 / 20px 20px,
    linear-gradient(315deg, #EEEEEE 25%, transparent 25%) 0 0 / 20px 20px,
    linear-gradient(45deg, #EEEEEE 25%, transparent 25%) 0 0 / 20px 20px,
    #F5F5F5;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px;
}
.txt-sheet {
  width: 100%;
  max-width: 720px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  box-shadow: none;
  padding: 28px 32px;
  min-height: 380px;
}
.txt-content {
  margin: 0;
  font-family: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.txt-content:empty::before,
.txt-content.placeholder {
  color: rgba(31, 42, 40, .35);
  font-style: italic;
  font-weight: 400;
}

/* IMG preview */
.img-preview {
  min-height: 440px;
  background:
    linear-gradient(135deg, #EEEEEE 25%, transparent 25%) -10px 0 / 20px 20px,
    linear-gradient(225deg, #EEEEEE 25%, transparent 25%) -10px 0 / 20px 20px,
    linear-gradient(315deg, #EEEEEE 25%, transparent 25%) 0 0 / 20px 20px,
    linear-gradient(45deg, #EEEEEE 25%, transparent 25%) 0 0 / 20px 20px,
    #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.img-placeholder {
  background: var(--c-surface);
  border: 1px dashed var(--c-border);
  border-radius: 12px;
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 360px;
  text-align: center;
  color: var(--c-muted);
}
.img-placeholder svg {
  width: 48px;
  height: 48px;
  color: var(--c-primary);
  opacity: .55;
}
.img-ph-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-primary);
}
.img-ph-sub {
  font-size: var(--fs-sm);
  line-height: 1.5;
  max-width: 260px;
}

/* Respeta el atributo HTML `hidden` — necesario porque varios displays lo anulan */
[hidden] { display: none !important; }


/* Empty query state — reemplaza los placeholders antes de la consulta */
.empty-query-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 20px;
  gap: 6px;
  min-height: 200px;
}
.empty-query-state[hidden] { display: none; }
.empty-title {
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--c-primary);
  letter-spacing: -.1px;
  margin: 0;
}
.empty-desc {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  max-width: 440px;
  line-height: 1.5;
  margin: 0;
}
.empty-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: 400;
  margin-top: 4px;
}

/* Image grid (1 / 2 / 4 slots con label) */
.img-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 28px;
  background:
    linear-gradient(135deg, #EEEEEE 25%, transparent 25%) -10px 0 / 20px 20px,
    linear-gradient(225deg, #EEEEEE 25%, transparent 25%) -10px 0 / 20px 20px,
    linear-gradient(315deg, #EEEEEE 25%, transparent 25%) 0 0 / 20px 20px,
    linear-gradient(45deg, #EEEEEE 25%, transparent 25%) 0 0 / 20px 20px,
    #F5F5F5;
  min-height: 440px;
  justify-items: center;
  align-items: start;
}
.img-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

.img-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 320px;
}
.img-slot-inner {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--c-surface);
  border: 1px dashed var(--c-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
  opacity: .6;
  box-shadow: none;
}
.img-slot-inner svg { width: 36px; height: 36px; }
.img-slot-portrait { aspect-ratio: 3 / 4; max-width: 220px; margin: 0 auto; }
.img-slot-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Preview completo (4 imgs + datos) */
.reniec-full {
  padding: 28px;
  background: #F5F5F5;
}
.reniec-full-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.reniec-full-grid .img-slot { max-width: none; }
.reniec-data {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .reniec-full-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .reniec-full-grid { grid-template-columns: 1fr; }
  .img-grid-2 { grid-template-columns: 1fr; }
}

/* ==========================================================
   CTA anónimo del Dashboard — solo visible sin sesión
========================================================== */
.anon-cta {
  display: none;
  background: var(--c-surface-dark);
  color: #ffffff;
  border-radius: 14px;
  padding: 36px 40px;
  margin-bottom: 22px;
  border: 1px solid var(--c-surface-dark);
}
body.is-anonymous .anon-cta { display: block; }
body.is-logged-in .anon-cta { display: none; }
/* Bug fix #5: ocultar el contenido del dashboard a usuarios anónimos
   (evita el flash de zeros mientras el auth-gate carga el modal) */
body.is-anonymous #view-dashboard .dash-grid,
body.is-anonymous #view-dashboard .quick-panel,
body.is-anonymous #view-dashboard #dashHero { display: none; }

/* El aviso mini-notice se muestra a todos, logueados o no */

.anon-cta-body { max-width: 720px; }
.anon-cta-eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-bottom: 10px;
  font-weight: 700;
}
.anon-cta-title {
  font-size: var(--fs-xl);
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: #ffffff;
}
.anon-cta-sub {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: rgba(255,255,255,.85);
  margin: 0 0 22px 0;
}
.anon-cta-sub strong { color: #ffffff; font-weight: 700; }

.anon-cta-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.anon-cta-primary {
  background: #8fc72e;
  color: #ffffff;
  border: 1px solid #8fc72e;
  padding: 11px 22px;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.anon-cta-primary:hover {
  background: #7ab325;
  border-color: #7ab325;
}
.anon-cta .btn-outline {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.35);
  padding: 11px 22px;
  font-size: var(--fs-sm);
  font-weight: 400;
}
.anon-cta .btn-outline:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.55);
}

.anon-cta-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.anon-cta-bullets li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.88);
}
.anon-cta-bullets svg {
  width: 16px;
  height: 16px;
  color: #8fc72e;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .anon-cta { padding: 20px 20px 18px; margin-bottom: 16px; }
  .anon-cta-eyebrow { margin-bottom: 6px; font-size: var(--fs-xs); }
  .anon-cta-title { font-size: var(--fs-lg); line-height: 1.25; margin-bottom: 6px; }
  .anon-cta-sub { font-size: var(--fs-sm); line-height: 1.45; margin-bottom: 14px; }
  .anon-cta-actions { flex-direction: column; gap: 8px; margin-bottom: 14px; }
  .anon-cta-actions .btn { width: 100%; padding: 10px 16px; font-size: var(--fs-sm); }
  .anon-cta-bullets { gap: 6px 16px; }
  .anon-cta-bullets li { font-size: var(--fs-sm); }
  .anon-cta-bullets svg { width: 14px; height: 14px; }
}

/* ==========================================================
   Resultado de consulta (docs.json.pe) — ficha limpia
   Ocupa todo el ancho del contenedor. Etiquetas a la izquierda,
   valores a la derecha en desktop; apilado en móvil.
========================================================== */
#filter-preview-data {
  padding: 18px 22px 22px;
  width: 100%;
}
.result-card {
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}
.result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 14px 4px;
  border-top: 1px solid var(--c-border);
}
.result-row:first-child {
  border-top: none;
  padding-top: 6px;
}
.result-k {
  font-size: var(--fs-sm);
  letter-spacing: .9px;
  color: var(--c-muted);
  text-transform: uppercase;
  font-weight: 700;
  flex-shrink: 0;
}
.result-v {
  font-size: var(--fs-md);
  color: var(--c-text);
  font-weight: 400;
  font-family: inherit;
  text-align: right;
  word-break: break-word;
  line-height: 1.4;
}
.result-foot {
  margin-top: 18px;
  padding: 12px 18px;
  background: var(--c-bg);
  border-radius: 8px;
  font-size: var(--fs-sm);
  color: var(--c-muted);
  text-align: center;
}
.result-foot strong { color: var(--c-primary); font-weight: 700; }

/* Móvil: etiqueta arriba + valor abajo, ambos alineados a la izquierda */
@media (max-width: 640px) {
  .result-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 0 10px;
  }
  .result-k { font-size: var(--fs-xs); letter-spacing: 1.1px; }
  .result-v { font-size: var(--fs-sm); text-align: left; }
  .result-foot { font-size: var(--fs-sm); padding: 10px 14px; }
}

/* ==========================================================
   Listas de transacciones (Mis compras / Mi historial)
========================================================== */
.tx-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--c-border);
  font-family: inherit;
  transition: background .12s;
}
.tx-row:last-child { border-bottom: none; }
.tx-row:hover { background: var(--c-bg); }


.tx-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.tx-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-primary);
  text-transform: uppercase;
  letter-spacing: .3px;
  line-height: 1.3;
}
.tx-tipo {
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--c-muted);
  text-transform: none;
  letter-spacing: 0;
}
.tx-date {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-muted);
}
.tx-amount {
  font-size: var(--fs-xs);
  font-weight: 400;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  min-width: 100px;
  letter-spacing: .3px;
}
.tx-amount-pos { color: var(--c-success); }
.tx-amount-neg { color: var(--c-accent); }

/* ==========================================================
   Lista de notificaciones (vista del cliente)
========================================================== */
.notif-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-border);
  position: relative;
  cursor: pointer;
  transition: background .15s;
}
.notif-item:hover { background: var(--c-bg); }
.notif-item:last-child { border-bottom: none; }
.notif-icon {
  width: 36px; height: 36px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--c-bg);
  color: var(--c-muted);
}
.notif-icon svg { width: 18px; height: 18px; }
.notif-icon-credits { background: #edf7d9; color: #141d1c; }
.notif-icon-system  { background: #f5f5f5; color: #141d1c; }
.notif-icon-info    { background: var(--c-teal-soft, #edf7d9); color: var(--c-accent); }
.notif-icon-promo   { background: #f5f5f5; color: #141d1c; }
.notif-image {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 8px 0 6px;
  border-radius: 8px;
  object-fit: cover;
  max-height: 220px;
  border: 1px solid var(--c-border);
}
.notif-body { flex: 1; min-width: 0; }
.notif-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 3px;
}
.notif-head strong { font-size: var(--fs-sm); color: var(--c-text); font-weight: 700; }
.notif-when { font-size: var(--fs-xs); color: var(--c-muted); flex-shrink: 0; }
.notif-body p { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; line-height: 1.45; }
.notif-item.is-unread .notif-head strong { color: var(--c-primary); font-weight: 700; }
.notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-surface-dark);
  flex-shrink: 0;
  align-self: center;
}

/* ==========================================================
   Catálogo de consultas (grid de tarjetas)
========================================================== */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.catalog-loading, .catalog-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--c-muted);
  font-size: var(--fs-sm);
  padding: 30px 20px;
}
.catalog-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 18px 18px 14px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Sin hover en catalog-card */
.catalog-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.catalog-card-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.3;
}
.catalog-card-price {
  background: var(--c-surface-dark);
  color: #ffffff;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .3px;
  flex-shrink: 0;
  white-space: nowrap;
}
.catalog-card-desc {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin: 0;
  line-height: 1.45;
  flex: 1;
}
.catalog-card-cta {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-accent);
  letter-spacing: .2px;
  margin-top: 2px;
}

/* ==========================================================
   Panel de consulta activa (seleccionada del catálogo)
========================================================== */
.consulta-activa { margin-bottom: 18px; }
.consulta-activa-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px 10px;
  border-bottom: 1px solid var(--c-border);
}
.consulta-activa-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-primary);
  margin: 0 0 3px;
}
.consulta-activa-desc {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin: 0;
  line-height: 1.45;
}
.consulta-activa-close {
  padding: 6px;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.consulta-activa-close svg { width: 14px; height: 14px; }
.consulta-activa-body { padding: 16px 20px 18px; }
.consulta-activa-foot {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  font-size: var(--fs-sm);
  color: var(--c-muted);
  flex-wrap: wrap;
}
.consulta-precio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-primary);
  font-weight: 400;
}
.consulta-precio svg { width: 14px; height: 14px; }

/* ==========================================================
   Resultado de consulta (layout 2 columnas)
========================================================== */
.consulta-resultado { margin-bottom: 18px; }
.consulta-resultado-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--c-border);
  gap: 12px;
}
.consulta-resultado-left { display: flex; align-items: center; gap: 10px; }
.consulta-resultado-left h3 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-primary);
  margin: 0;
}
.consulta-resultado-body { padding: 20px 22px; }

/* ============================================================
   Facial — preview de imagen seleccionada
============================================================ */
.facial-selected {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  margin-top: 12px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  position: relative;
}
.facial-selected[hidden] { display: none; }
.facial-selected-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--c-border);
  background: #ffffff;
  flex-shrink: 0;
}
.facial-selected-info {
  flex: 1;
  min-width: 0;
}
.facial-selected-name {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-primary);
  word-break: break-all;
}
.facial-selected-size {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin-top: 4px;
}
.facial-selected-remove {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: #ffffff;
  color: var(--c-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.facial-selected-remove:hover { background: var(--c-surface-dark); color: #ffffff; border-color: var(--c-surface-dark); }
.facial-selected-remove svg { width: 14px; height: 14px; }

/* ============================================================
   Estado de carga — spinner limpio sin blur ni sombras
============================================================ */
.cr-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 70px 24px;
  gap: 18px;
  min-height: 320px;
}
.cr-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-surface-dark);
  border-radius: 50%;
  animation: cr-spin .9s linear infinite;
}
@keyframes cr-spin { to { transform: rotate(360deg); } }
.cr-loading-text {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: .2px;
}
.cr-loading-hint {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  text-align: center;
  max-width: 320px;
  line-height: 1.5;
}

/* â"€â"€ Espera larga: el proveedor tarda y se ofrece cancelar â"€â"€ */
.cr-espera {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 380px;
  text-align: center;
}
.cr-espera-texto {
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-muted);
  margin: 0;
}
/* El botón es la única salida que tiene el cliente mientras se espera, así
   que tiene que verse; pero un verde ancho en mitad de una pantalla de
   espera grita. Oscuro sobre blanco: es lo que más contrasta de la página
   y no hace falta ni tamaño ni negrita para que se encuentre. */
.cr-espera-btn {
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .4px;
  padding: 11px 24px;
  margin-top: 2px;
  border: none;
  border-radius: 999px;
  background: var(--c-surface-dark);
  color: #ffffff;
  cursor: pointer;
  transition: background var(--t-fast);
}
.cr-espera-btn:hover { background: #2a3b38; }
.cr-espera {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  z-index: 10010;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  overflow-y: auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(18px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    max(18px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: rgba(12, 20, 19, .58);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
body.consulta-espera-abierta { overflow: hidden; }
.cr-espera-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(100%, 440px);
  box-sizing: border-box;
  padding: 28px 30px 26px;
  border: 1px solid #dce4dd;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
  text-align: center;
}
.cr-espera-indicador {
  width: 38px;
  height: 38px;
  border: 3px solid #e5ecdf;
  border-top-color: #8fc72e;
  border-radius: 50%;
  animation: cr-espera-giro .9s linear infinite;
}
@keyframes cr-espera-giro { to { transform: rotate(360deg); } }
.cr-espera-titulo {
  margin: 0;
  color: #141d1c;
  font-size: 19px;
  line-height: 1.3;
}
.cr-espera-texto { max-width: 38ch; color: #56615e; font-size: 14px; line-height: 1.55; }
.cr-espera-btn { min-height: 44px; padding: 11px 22px; font-weight: 700; letter-spacing: 0; }
@media (max-width: 480px) {
  .cr-espera-dialog { gap: 10px; padding: 22px 18px 20px; border-radius: 15px; }
  .cr-espera-titulo { font-size: 17px; }
  .cr-espera-texto { font-size: 14px; }
  .cr-espera-btn { width: 100%; }
}

/* â"€â"€ Mensaje de mantenimiento / error técnico â"€â"€ */
.cr-mantenimiento {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 32px 36px;
  text-align: center;
}
.cr-mant-titulo {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-primary);
  margin: 0;
}
.cr-mant-texto {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  line-height: 1.6;
  max-width: 360px;
  margin: 0;
}
.cr-mant-sugerencia {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  line-height: 1.5;
  max-width: 340px;
  margin: 0;
  opacity: 0.8;
}
.cr-mant-creditos {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #141d1c;
  margin: 4px 0 0;
  opacity: 0.85;
}

:root {
  /* Cuerpo de la ficha del resultado. Vive aparte de --fs-sm porque este
     tamaño se toca a menudo y --fs-sm lo comparte toda la plataforma. */
  /* Escritorio: la ficha se lee de lejos y hay ancho de sobra. En el móvil
     baja a 9px (ver la consulta de medios de 720px), donde lo que manda es
     que cada campo entre en su línea. */
  --cr-fs: 14px;
  --cr-fs-titulo: 16px;

  /* Layout datos + fotos */
  --cr-padding-top: 20px;
  /* 80px a cada lado dejaban la ficha en una columna estrecha en medio
     de una tarjeta ancha: mucho aire muerto y los valores lejos de sus
     etiquetas. A 12px la informacion llega hasta el borde del cuadro,
     que es como se pidio; el panel ya aporta el suyo por fuera. */
  --cr-padding-right: 12px;
  --cr-padding-bottom: 20px;
  --cr-padding-left: 12px;
  --cr-gap: 20px;
  --cr-data-max: 100%;
  --cr-media-width: 330px;          /* +50%: se veían pequeñas */
  --cr-media-margin-top: 40px;
  --cr-media-margin-left: 0px;
  --cr-media-photo-max-height: 510px;
  --cr-max-width: 1180px;

  /* Layout PDF (C4, nacido vivo, defunción) */
  --cr-pdf-padding-top: 20px;
  --cr-pdf-padding-right: 20px;
  --cr-pdf-padding-bottom: 16px;
  --cr-pdf-padding-left: 20px;
  --cr-pdf-max-width: 100%;
  --cr-pdf-gap: 16px;
  --cr-pdf-page-gap: 10px;
  /* Bloque TEXTO (izquierda) */
  --cr-pdf-data-width: 340px;
  --cr-pdf-data-offset-top: 0px;
  --cr-pdf-data-offset-left: 0px;
  /* Bloque PDF (derecha) */
  --cr-pdf-viewer-offset-top: 0px;
  --cr-pdf-viewer-offset-left: 0px;
  --cr-pdf-viewer-size: 100%;
  /* Separación entre las dos columnas */
  --cr-pdf-split-gap: 24px;

  /* Layout solo texto (SUNAT, financiero, etc.) */
  --cr-txt-padding-top: 24px;
  --cr-txt-padding-right: 12px;
  --cr-txt-padding-bottom: 32px;
  --cr-txt-padding-left: 12px;
  --cr-txt-max-width: 980px;
  --cr-txt-offset-top: 0px;
  --cr-txt-offset-left: 0px;

  /* Offset del bloque de texto en layouts con foto (DNI con foto) */
  --cr-data-offset-top: 0px;
  --cr-data-offset-left: 0px;

  /* Layout galería (ficha, DNI virtual) */
  --cr-gallery-padding-top: 24px;
  --cr-gallery-padding-right: 40px;
  --cr-gallery-padding-bottom: 20px;
  --cr-gallery-padding-left: 60px;
  --cr-gallery-max-width: 640px;
  --cr-gallery-gap: 16px;
  --cr-gallery-offset-top: 0px;
  --cr-gallery-offset-left: 0px;
  --cr-gallery-img-max-height: 480px;
  --cr-gallery-img-width: 100%;
}

.cr-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cr-gap);
  align-items: start;
  padding: var(--cr-padding-top) var(--cr-padding-right) var(--cr-padding-bottom) var(--cr-padding-left);
}
.cr-layout:has(.cr-media:not(:empty)) {
  grid-template-columns: 1fr var(--cr-media-width);
}
.cr-data {
  grid-column: 1;
  transform: translate(var(--cr-data-offset-left), var(--cr-data-offset-top));
}
.cr-media {
  grid-column: 2;
  transform: translate(var(--cr-media-margin-left), var(--cr-media-margin-top));
}
.cr-data { min-width: 0; }
.cr-media {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cr-media-grid img {
  max-width: 100%;
  max-height: var(--cr-media-photo-max-height);
  object-fit: contain;
}
/* ===== Columna biometrica (rostro, firma, huellas) =====
   La maqueta esta AQUI y no en el atributo `style` del JS, que es donde
   vivia y por eso no habia forma de cambiarla desde la hoja.

   Por defecto una sola columna. Con CUATRO fotos —el caso del DNI:
   rostro, firma y dos huellas— pasa a dos, o sea dos arriba y dos
   abajo. Es lo que se pidio y no depende de ninguna clasificacion por
   color ni por proporcion: cuenta las fotos y ya. */
.cr-bio-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 160px;
  max-width: 100%;
}
/* Documento escaneado: columna mas ancha, sigue a una foto por fila. */
.cr-bio-col.cr-bio-doc { width: 320px; }

.cr-bio-col.cr-bio-4 {
  grid-template-columns: 1fr 1fr;
  width: 340px;
}

/* Celdas cuadradas y todas iguales, para que la cuadricula quede
   pareja aunque las imagenes lleguen con proporciones distintas. El
   `object-fit: contain` de la imagen las encaja sin recortar nada.
   Sustituye a la altura fija de 150px que ponia el JS. */
.cr-bio-tile { aspect-ratio: 1 / 1; }

/* En el movil la columna deja de ser una columna estrecha al costado y
   ocupa el ancho del panel: con cuatro fotos, cada celda mide la mitad. */
@media (max-width: 768px) {
  .cr-bio-col,
  .cr-bio-col.cr-bio-doc,
  .cr-bio-col.cr-bio-4 { width: 100%; }
  .cr-bio-col.cr-bio-4 { gap: 8px; }
}

.cr-bio-tile {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
  background: #ffffff;
  border: none;
  border-radius: 0;
}
.cr-bio-tile img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.cr-dni-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 700px;
  margin: 20px auto;
  padding: 0 var(--cr-padding-right) 0 var(--cr-padding-left);
}
.cr-dni-card {
  background: #ffffff;
  border: none;
  border-radius: 0;
  overflow: hidden;
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cr-dni-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
@media (max-width: 640px) {
  .cr-dni-pair { max-width: 100%; gap: 8px; }
}

.cr-tit {
  font-size: var(--cr-fs-titulo);
  font-weight: 700;
  color: var(--c-primary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-border);
  margin: 0 0 12px;
  letter-spacing: .2px;
}
.cr-boin-resumen {
  margin: 0 0 16px;
  padding: 18px 20px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: #fff;
}
.cr-boin-resumen h3 {
  margin: 0 0 12px;
  color: var(--c-primary);
  font-size: var(--cr-fs-titulo);
  font-weight: 700;
  letter-spacing: .2px;
}
.cr-boin-resumen p { margin: 5px 0 0; color: var(--c-primary); }
.cr-boin-titular { font-size: 17px; font-weight: 700; }
.cr-boin-placa { font-size: 14px; }
.cr-boin-placa span { font-weight: 700; }
.cr-boin-sin-pdf { color: var(--c-muted); }
.cr-sect { margin-top: 18px; }
.cr-sect:first-child { margin-top: 0; }
.cr-sect h4 {
  font-size: var(--cr-fs-titulo);
  font-weight: 700;
  color: var(--c-primary);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
/* Sin sangría — sub-campos alineados con el resto para que quede una sola recta */
.cr-sect-body { padding-left: 0; }
.cr-row {
  display: grid;
  /* Ancho fijo, no un rango: con minmax(140px, 260px) la columna se ajusta
     al contenido de CADA fila y los valores no arrancaban todos del mismo
     punto. */
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 10px;
  padding: 6px 0;
  font-size: var(--cr-fs);
  align-items: baseline;
  line-height: 1.55;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.cr-row:last-child { border-bottom: none; }
.cr-row:not(:has(.cr-k)) {
  grid-template-columns: 1fr;
  padding: 2px 0;
  border-bottom: none;
}
/* Etiqueta y valor: el MISMO cuerpo y el MISMO negro. El gris de la
   etiqueta hacia parecer que habia dos jerarquias de texto en la ficha. */
.cr-row .cr-k {
  font-weight: 400;
  color: var(--c-primary);
  white-space: normal;
  overflow-wrap: break-word;
  font-size: var(--cr-fs);
  text-transform: uppercase;
}
.cr-row .cr-k::after { content: ""; }
/* El veredicto de la consulta, en verde institucional y en negrita. Va con
   el selector completo porque `.cr-row .cr-v` (0,2,0) le ganaría al color. */
.cr-row .cr-v.cr-v-ok,
.nm-table tbody td.cr-v-ok { color: #8fc72e; font-weight: 700; }
.cr-row .cr-v {
  font-weight: 400;
  color: var(--c-primary);
  word-break: break-word;
  font-size: var(--cr-fs);
  text-transform: uppercase;
}
/* La placa, en la primera fila del Reporte Completo. Es el dato por el que
   se preguntó y con el que el cliente comprueba que no se equivocó de
   vehículo, así que se lee antes que el resto. Mismo selector completo que
   el verde de arriba, por la misma razón de especificidad. */
.cr-row .cr-v.cr-v-fuerte {
  font-weight: 700;
  letter-spacing: .6px;
}
/* Layout texto puro — espaciado más compacto */
.cr-txt-data .cr-row { padding: 6px 0; font-size: var(--cr-fs); line-height: 1.55; }

.cr-record { padding: 6px 0 10px; }
.cr-record-next {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(15, 23, 42, 0.15);
}
.cr-record-index {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-muted);
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Explicit Two-Column Box Layout */
.cr-2col-wrapper {
  column-span: all;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px; /* Un buen espacio entre las dos columnas principales */
  margin-top: 16px;
}
.cr-col-box {
  padding: 24px 32px;
  background-color: rgba(128, 128, 128, 0.02);
  border: 1px solid var(--c-border);
  border-radius: 12px;
}
@media (max-width: 800px) {
  .cr-2col-wrapper { grid-template-columns: 1fr; gap: 24px; }
  .cr-col-box { padding: 16px 20px; }
}

/* Columna de media — layout simetrico segun cantidad de fotos.
   IMPORTANTE: NO asumimos cual foto es cual (rostro/firma/huella).
   El bot Fuentesdata puede mandar las fotos en cualquier orden segun el
   comando, asi que cada foto se renderiza en su posicion natural sin
   asignacion semantica. */
.cr-media-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
.cr-media-grid img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid rgba(15,23,42,0.07);
  background: #f8f9fb;
  box-shadow: none;
  display: block;
}
/* 2 fotos lado a lado (ej: DNI anverso + reverso) */
.cr-media-grid.cr-media-2 { grid-template-columns: 1fr 1fr; }
/* 3 fotos en una fila */
.cr-media-grid.cr-media-3 { grid-template-columns: repeat(3, 1fr); }
/* 4 fotos en 2x2 simetrico (fallback si la clasificacion DNI no aplica) */
.cr-media-grid.cr-media-4 { grid-template-columns: 1fr 1fr; }
/* 5+ fotos: auto-fit que se acomoda solo */
.cr-media-grid.cr-media-n {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* ===== Layout DNI (4 fotos clasificadas: rostro + firma + 2 huellas) =====
   Activado por JS (applyDniLayout) cuando detecta el patron tipico:
   rostro grande a la izquierda, firma arriba der, huellas medio/abajo der. */
/* DOS ARRIBA Y DOS ABAJO. Antes era el rostro alto a la izquierda y las
   otras tres apiladas a su derecha: en el movil, con la columna
   estrecha, la firma y las dos huellas salian minusculas y en fila
   india, y la ficha se estiraba a lo largo. En cuadricula las cuatro
   miden lo mismo y el bloque ocupa la mitad de alto.

   Arriba rostro y firma, abajo las dos huellas. */
.cr-media-grid.cr-media-4-dni,
.cr-gallery.cr-gallery-4-dni {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "face sign"
    "fp1  fp2";
  gap: 12px;
  align-items: stretch;
}
.cr-media-grid.cr-media-4-dni .cr-photo-face,
.cr-gallery.cr-gallery-4-dni .cr-photo-face { grid-area: face; align-self: stretch; }
.cr-media-grid.cr-media-4-dni .cr-photo-sign,
.cr-gallery.cr-gallery-4-dni .cr-photo-sign { grid-area: sign; }
.cr-media-grid.cr-media-4-dni .cr-photo-fp1,
.cr-gallery.cr-gallery-4-dni .cr-photo-fp1  { grid-area: fp1; }
.cr-media-grid.cr-media-4-dni .cr-photo-fp2,
.cr-gallery.cr-gallery-4-dni .cr-photo-fp2  { grid-area: fp2; }
.cr-media-grid.cr-media-4-dni img,
.cr-gallery.cr-gallery-4-dni img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: none;
  /* Sin borde ni fondo: las imagenes ya vienen con fondo blanco propio */
  border: none;
  background: transparent;
  border-radius: 0;
}
/* Las cuatro celdas al mismo alto, para que la cuadricula quede pareja
   aunque las imagenes vengan con proporciones distintas. El
   `object-fit: contain` de arriba las encaja sin recortar nada. */
.cr-media-grid.cr-media-4-dni > *,
.cr-gallery.cr-gallery-4-dni > * {
  min-height: 0;
  aspect-ratio: 1 / 1;
}
/* ===== Tabla real (árbol genealógico / homónimos) ===== */
.cr-tabla-wrap { padding: 16px; width: 100%; box-sizing: border-box; }
.cr-tabla-head { display: flex; align-items: center; margin-bottom: 14px; gap: 12px; }
.cr-tabla-tit { font-size: var(--fs-sm); font-weight: 700; color: var(--c-primary); text-transform: uppercase; letter-spacing: 1px; }
.cr-tabla-total { font-size: var(--fs-sm); font-weight: 400; color: var(--c-muted); margin-left: auto; white-space: nowrap; }
.cr-tabla-scroll { overflow-x: auto; }
.cr-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.cr-tabla th {
  padding: 6px 10px;
  background: var(--c-surface-dark);
  color: #ffffff;
  font-weight: 700;
  text-align: left;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.cr-tabla td { padding: 6px 10px; font-weight: 400; color: var(--c-primary); }
.cr-tabla-even { background: #ffffff; }
.cr-tabla-odd { background: var(--c-bg); }

/* ===== Reconocimiento facial: mejor coincidencia + resto ===== */
.cr-facial-layout { padding: 16px; }
.cr-facial-eyebrow { font-size: var(--fs-xs); font-weight: 700; color: var(--c-primary); text-transform: uppercase; letter-spacing: 1.8px; opacity: .7; margin-bottom: 6px; }
.cr-facial-headrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.cr-facial-title { font-size: var(--fs-lg); font-weight: 700; color: var(--c-primary); margin: 0; }
.cr-facial-count { font-size: var(--fs-xs); font-weight: 700; color: var(--c-primary); background: var(--c-bg); padding: 5px 12px; border-radius: 999px; }

.cr-facial-hero { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; padding: 22px; margin-bottom: 28px; box-shadow: none; position: relative; overflow: hidden; }
.cr-facial-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--c-surface-dark) 0%, #8fc72e 100%); }
.cr-facial-hero-row { display: flex; gap: 22px; align-items: stretch; }
.cr-facial-hero-photo {
  width: 116px; height: 148px; flex-shrink: 0;
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  cursor: zoom-in;
}
.cr-facial-photo-empty { cursor: default; }
.cr-facial-hero-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cr-facial-hero-info { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.cr-facial-badge { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); font-weight: 700; color: #4e7519; background: rgba(143,199,46,.15); text-transform: uppercase; letter-spacing: 1.2px; padding: 5px 10px; border-radius: 999px; width: fit-content; margin-bottom: 10px; }
.cr-facial-hero-name { font-size: var(--fs-lg); font-weight: 700; color: var(--c-primary); line-height: 1.2; overflow-wrap: anywhere; }
.cr-facial-hero-sim { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.cr-facial-sim-num { font-size: var(--fs-xl); font-weight: 700; color: #4e7519; line-height: 1; }
.cr-facial-sim-label { font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: 1.4px; }
.cr-facial-hero-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px 24px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--c-border); }
.cr-facial-field-k { font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 4px; }
.cr-facial-field-v { font-size: var(--fs-sm); font-weight: 700; color: var(--c-primary); overflow-wrap: anywhere; }

.cr-facial-rest-tit { font-size: var(--fs-xs); font-weight: 700; color: var(--c-primary); text-transform: uppercase; letter-spacing: 1.6px; opacity: .7; margin-bottom: 14px; }
.cr-facial-rest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.cr-facial-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; overflow: hidden; box-shadow: none; display: flex; flex-direction: column; }
.cr-facial-card-photo {
  position: relative; width: 100%; aspect-ratio: 4 / 5; background: var(--c-bg);
  display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: zoom-in;
}
.cr-facial-card-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cr-facial-photo-empty { cursor: default; }
.cr-facial-card-sim { position: absolute; top: 10px; right: 10px; font-size: var(--fs-xs); font-weight: 700; color: var(--c-primary); background: rgba(255,255,255,.96); padding: 4px 9px; border-radius: 999px; }
.cr-facial-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cr-facial-card-name { font-size: var(--fs-sm); font-weight: 700; color: var(--c-primary); line-height: 1.3; overflow-wrap: anywhere; }
.cr-facial-card-row { font-size: var(--fs-xs); color: var(--c-primary); }
.cr-facial-card-row span { color: var(--c-muted); margin-right: 4px; }
.cr-facial-card-ubigeo { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.35; overflow-wrap: anywhere; }

/* ===== Lightbox — ampliar foto de candidato a pantalla completa ===== */
.cr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cr-lightbox[hidden] { display: none; }
.cr-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 29, 28, .85);
}
.cr-lightbox-img {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: none;
}
.cr-lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: var(--c-surface-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
body.cr-lightbox-open { overflow: hidden; }

/* ===== Modal PDF — visor flotante con el navegador nativo ===== */
.cr-pdf-modal {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.cr-pdf-modal[hidden] { display: none; }
.cr-pdf-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .9);
}
.cr-pdf-modal-panel {
  position: relative;
  width: 100%;
  max-width: 96vw;
  height: 100%;
  max-height: 96vh;
  display: flex;
  flex-direction: column;
  background: #1a1a1a;
  border-radius: 0;
  overflow: hidden;
}
.cr-pdf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--c-surface-dark);
  flex-shrink: 0;
}
.cr-pdf-modal-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cr-pdf-modal-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cr-pdf-modal-dl,
.cr-pdf-modal-nueva,
.cr-pdf-modal-close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 400;
  font-family: inherit;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  text-decoration: none;
}
.cr-pdf-modal-dl svg,
.cr-pdf-modal-close svg { width: 15px; height: 15px; flex-shrink: 0; }
.cr-pdf-modal-dl { background: var(--c-accent); color: #ffffff; }
/* Entre Descargar y Cerrar: en blanco sobre el fondo oscuro del visor, como
   «Nueva consulta» en la cabecera del panel. */
.cr-pdf-modal-nueva { background: #ffffff; color: var(--c-primary); }
.cr-pdf-modal-nueva[hidden] { display: none; }
.cr-pdf-modal-close { background: rgba(255,255,255,.12); color: #ffffff; }
/* «N páginas», junto al nombre del documento. */
.cr-pdf-modal-pages {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.7);
  flex-shrink: 0;
  margin-right: auto;
}
.cr-pdf-modal-pages[hidden] { display: none; }
/* Móvil: el cuerpo lleva las hojas pintadas por pdf.js, no un iframe, así
   que scrollea él. */
.cr-pdf-modal-body.es-hojas { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cr-pdf-modal-hojas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}
.cr-pdf-modal-hojas .cr-pdf-loading { color: rgba(255,255,255,.75); }
.cr-pdf-modal-hojas .cr-pdf-stage { border: none; border-radius: 0; background: #ffffff; }
.cr-pdf-modal-hojas .cr-pdf-canvas { width: 100%; height: auto; border-radius: 0; }
.cr-pdf-modal-body {
  flex: 1;
  width: 100%;
  min-height: 0;
  background: #2a2a2a;
  border-radius: 0;
  overflow: hidden;
}
.cr-pdf-modal-fallback {
  flex-shrink: 0;
  text-align: center;
  padding: 6px 0 0;
}
.cr-pdf-modal-fallback span {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.6);
}
.cr-pdf-modal-fallback a {
  font-size: var(--fs-xs);
  color: var(--c-accent);
  text-decoration: underline;
  cursor: pointer;
}
@media (max-width: 640px) {
  .cr-pdf-modal { padding: 0; }
  .cr-pdf-modal-panel { max-width: none; max-height: none; border-radius: 0; }
  /* La cabecera lleva nombre, páginas y tres acciones: en angosto se
     reparte en dos filas antes que recortar los botones. */
  .cr-pdf-modal-header { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .cr-pdf-modal-name { flex: 1 1 100%; }
  .cr-pdf-modal-actions { flex: 1 1 auto; justify-content: flex-end; }
  .cr-pdf-modal-dl,
  .cr-pdf-modal-nueva,
  .cr-pdf-modal-close { padding: 8px 12px; }
  .cr-pdf-modal-close span { display: none; }   /* basta el aspa */
}

.cr-docs { display: flex; flex-direction: column; gap: 8px; padding: 14px 40px 20px 60px; }
.cr-pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  color: var(--c-primary);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 400;
}
.cr-pdf:hover { background: var(--c-surface); border-color: var(--c-surface-dark); }
.cr-pdf svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ===== Layout: sólo texto (SUNAT, financiero) ===== */
.cr-txt-layout {
  padding: var(--cr-txt-padding-top) var(--cr-txt-padding-right) var(--cr-txt-padding-bottom) var(--cr-txt-padding-left);
}
.cr-txt-data {
  max-width: var(--cr-txt-max-width);
  margin: 0 auto;
  transform: translate(var(--cr-txt-offset-left), var(--cr-txt-offset-top));
}
/* Desktop: columna única centrada con max-width para mejor lectura */
@media (min-width: 721px) {
  .cr-txt-data {
    /* Antes 720px. El limite existe para que una linea larga no se lea
       de punta a punta de un monitor, pero a 720 sobraba tarjeta por los
       dos lados y la ficha parecia perdida en el medio. */
    max-width: 980px;
  }
  .cr-txt-data .cr-tit {
    margin-bottom: 14px;
  }
  .cr-txt-data .cr-sect:first-child { margin-top: 0; }
}

/* ===== Layout: botones inline del bot (ej. listas de opciones) ===== */
.cr-btn-layout {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cr-btn-layout .cr-tit {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: -0.01em;
  max-width: 640px;
}


/* La ficha dentro de la lista de opciones. Su título se esconde porque
   renderButtonList ya imprime uno arriba. */
.cr-btn-details { max-width: 640px; }
/* Sin la columna de la ilustración, la ficha ya no tiene por qué caber en
   640px: la tabla de partidas se cortaba a media columna. */
.cr-btn-grid .cr-btn-details { max-width: none; }
.cr-btn-details > .cr-tit { display: none; }

/* Área de resultado (PDF aparece aquí sin reemplazar botones) */
.cr-btn-result-area { border-radius: 12px; overflow: hidden; }
.cr-btn-result-area[hidden] { display: none; }
.cr-btn-result-area .cr-pdf-layout { padding: 0; }

/* â"€â"€ Reorganización cuando hay un PDF dentro del flujo de botones â"€â"€â"€â"€â"€â"€â"€â"€â"€
   Cuando el bot devuelve una lista de opciones (Ver detalles, Elige
   opción...) y al elegir una se renderiza un PDF, el layout pasa a 2
   columnas: contenido a la izquierda, thumbnail PDF a la derecha.

   Usa container queries (Chrome 105+, Safari 16+, Firefox 110+) para
   medir el contenedor REAL — el viewport puede ser ancho pero con el
   right-panel visible el contenido central queda ~540px.
â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */
.reniec-result-body { container-type: inline-size; }
/* El .result-panel tiene padding:0 (para que la barra multicolor del header
   toque los bordes), así que el cuerpo de datos aporta su propio padding
   lateral. Sin esto las etiquetas quedaban pegadas al borde del cuadro. */
.result-panel > .reniec-result-body { padding: 0 6px 16px; }

/* Default: stack vertical (mobile-first y cuando el contenedor es angosto) */
.cr-btn-layout:has(.cr-btn-result-area .cr-pdf-canvas-wrap) {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "tit"
    "pdf"
    "grid";
  gap: 16px;
  align-items: start;
}
.cr-btn-layout:has(.cr-btn-result-area .cr-pdf-canvas-wrap) > .cr-tit {
  grid-area: tit;
}
.cr-btn-layout:has(.cr-btn-result-area .cr-pdf-canvas-wrap) > .cr-btn-result-area {
  grid-area: pdf;
  margin: 0;
}
.cr-btn-layout:has(.cr-btn-result-area .cr-pdf-canvas-wrap) > .cr-btn-grid {
  grid-area: grid;
}
/* Con el documento delante sobra todo lo que llevó hasta él: la lista de
   partidas y la ficha de la consulta. Se muestra el PDF y nada más; para
   pedir otra cosa está «Nueva consulta» en la cabecera. */
.cr-btn-layout:has(.cr-btn-result-area .cr-pdf-canvas-wrap) .cr-btn-section,
.cr-btn-layout:has(.cr-btn-result-area .cr-pdf-canvas-wrap) .cr-btn-details {
  display: none;
}
/* En cuanto hay respuesta —sea PDF o datos— la ficha de la consulta se
   retira. Cuando el bot devolvía la misma tabla de partidas, se veía dos
   veces: la de arriba y la de la respuesta. */
.cr-btn-layout:has(.cr-btn-result-area:not([hidden])) .cr-btn-details {
  display: none;
}
/* El documento, centrado y a tamaño de hoja: ni arrinconado en un thumbnail
   de 280px (lo de antes, heredado de cuando la lista ocupaba la izquierda)
   ni estirado a lo ancho de un panel de 1500px, donde una hoja A4 se vuelve
   un mural. 620px es una hoja legible en pantalla. */
.cr-btn-layout:has(.cr-btn-result-area .cr-pdf-canvas-wrap) .cr-pdf-canvas-wrap {
  margin: 0 auto;
  max-width: 620px;
  width: 100%;
}
/* El título ya está arriba del panel: dentro del resultado sobra. */
.cr-btn-result-area .cr-tit { display: none; }

/* Sección de botones */
/* Sin tope de 640px: quedaba de una época con la ilustración al lado, y
   dejaba la fila de opciones encogida en la mitad izquierda del panel. */
.cr-btn-section { display: flex; flex-direction: column; gap: 12px; }

.cr-btn-hint {
  font-size: var(--cr-fs);
  font-weight: 700;
  color: var(--c-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Tres por fila: una columna de botones a lo ancho del panel gastaba una
   pantalla entera en mostrar un código y una ciudad. */
.cr-btn-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
/* Con una línea inferior sola no se leían como pulsables. Vuelven a ser
   pieza cerrada —fondo, borde y una flecha en su propio disco—, pero sin
   negritas ni relleno de más: el peso lo lleva el dato, no la caja. */
.cr-btn-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 10px 10px 14px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-surface);
  color: var(--c-primary);
  font-family: inherit;
  font-size: var(--cr-fs);
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

/* Cuerpo del botón (texto + subtítulo) */
.cr-btn-option-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
/* Una línea por opción: «60500130 - QUILLABAMBA» partía en dos y esa
   tarjeta crecía más que sus vecinas, rompiendo la fila. */
.cr-btn-option-text {
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cr-btn-option-tip {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: 400;
  line-height: 1.35;
  word-break: break-word;
}

/* La flecha en su propio disco: es lo que dice «esto se pulsa». */
.cr-btn-option-arrow {
  width: 24px;
  height: 24px;
  padding: 5px;
  flex-shrink: 0;
  color: var(--c-primary);
  background: var(--c-bg);
  border-radius: 50%;
  transition: background-color 0.15s, color 0.15s;
}
.cr-btn-option:hover:not(:disabled) {
  border-color: #8fc72e;
  background: #f6fbec;
}
.cr-btn-option:hover:not(:disabled) .cr-btn-option-arrow {
  background: #8fc72e;
  color: #ffffff;
}
.cr-btn-option:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
/* Mientras el bot arma el documento, la flecha de la fila pulsada cede su
   sitio a un girador verde: sin él, el único aviso quedaba lejos —en el
   área de resultado— y la fila parecía no haber respondido. */
.cr-btn-option.is-loading {
  border-color: #8fc72e;
  background: #f6fbec;
  opacity: 1;
}
.cr-btn-option.is-loading .cr-btn-option-arrow { display: none; }
.cr-btn-option.is-loading::after {
  content: "";
  width: 16px;
  height: 16px;
  margin: 4px;
  flex-shrink: 0;
  border: 2px solid rgba(143, 199, 46, .25);
  border-top-color: #8fc72e;
  border-radius: 50%;
  animation: cr-spin .8s linear infinite;
}
.cr-btn-option.is-selected {
  border-color: var(--c-surface-dark);
  background: var(--c-bg);
}
.cr-btn-option.is-selected .cr-btn-option-arrow {
  background: var(--c-surface-dark);
  color: #ffffff;
}

/* Grid: contenido principal + ilustración */
/* Una sola columna: la segunda existía para la silueta decorativa, que ya
   no se dibuja (ver renderButtonList). */
.cr-btn-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.cr-btn-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* Botón "Cerrar detalles" al final del contenido desplegado */

@media (max-width: 720px) {
  .cr-btn-layout { padding: 20px 18px; }
  /* Tres no caben, pero una sola deja media pantalla vacía a la derecha de
     cada código: dos columnas es lo que aprovecha el ancho del móvil. */
  .cr-btn-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .cr-btn-option { padding: 9px 8px 9px 12px; font-size: var(--cr-fs); gap: 6px; }
  .cr-btn-option-tip { font-size: var(--fs-xs); }
  .cr-btn-option-arrow { width: 21px; height: 21px; padding: 5px; }
}

/* Pantallas muy angostas: dos columnas obligarían a recortar el nombre de
   la ciudad, así que ahí sí una sola. */
@media (max-width: 400px) {
  .cr-btn-list { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Layout: PDF preview (C4, nacido vivo, defunción) ===== */
.cr-pdf-layout {
  padding: var(--cr-pdf-padding-top) var(--cr-pdf-padding-right) var(--cr-pdf-padding-bottom) var(--cr-pdf-padding-left);
}
.cr-pdf-layout .cr-tit {
  max-width: var(--cr-pdf-max-width);
  margin: 0 0 16px;
}
.cr-pdf-viewer {
  display: flex;
  flex-direction: column;
  gap: var(--cr-pdf-gap);
  max-width: var(--cr-pdf-max-width);
}
.cr-pdf-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cr-pdf-embed {
  width: 100%;
  height: 480px;
  max-height: 60vh;
  min-height: 320px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-bg);
  display: block;
}

/* Layout split: PDF a la izquierda, datos a la derecha.
   Llena el espacio disponible sin dejar huecos vacíos. */
.cr-pdf-split {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 20px;
  align-items: start;
}
.cr-pdf-split .cr-pdf-viewer {
  width: 100%;
  min-width: 0;
}
.cr-pdf-split .cr-pdf-data {
  width: 100%;
  min-width: 0;
}

/* Layout cuando no hay datos: visor centrado con ancho limitado */
.cr-pdf-nosplit {
  max-width: 560px;
  margin: 0 auto;
}

/* Datos de texto que vienen junto al PDF */
.cr-pdf-data {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Panel de info del documento — llena el espacio vacío bajo los datos */
.cr-pdf-doc-info {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cr-pdf-doc-info-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.cr-pdf-doc-info-title svg { width: 14px; height: 14px; flex-shrink: 0; }
.cr-pdf-doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--c-bg);
  border-radius: 8px;
}
.cr-pdf-doc-name {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cr-pdf-doc-size {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: 400;
  flex-shrink: 0;
}
.cr-pdf-doc-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cr-pdf-doc-meta-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--c-bg);
  border-radius: 8px;
}
.cr-pdf-doc-meta-row span {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: 400;
}
.cr-pdf-doc-meta-row strong {
  font-size: var(--fs-sm);
  color: var(--c-primary);
  font-weight: 700;
}
/* Botones rojos de descarga ocultos: ahora el thumbnail completo es clickeable
   y muestra el overlay "Click para descargar". */
.cr-pdf-doc-downloads,
.cr-pdf-doc-dl {
  display: none !important;
}

/* â"€â"€ Panel de datos junto al PDF — diseño stacked profesional â"€â"€ */
.cr-pdf-data .cr-tit {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--c-primary);
  border-bottom: 2px solid var(--c-primary);
  padding-bottom: 8px;
  margin-bottom: 14px;
}

/* Cada campo: etiqueta arriba, valor abajo */
.cr-pdf-data .cr-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(15,23,42,.06);
  grid-template-columns: unset;
}
.cr-pdf-data .cr-row:last-child { border-bottom: none; }
.cr-pdf-data .cr-row .cr-k {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--c-muted);
  white-space: normal;
}
.cr-pdf-data .cr-row .cr-v {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-primary);
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
}
/* Filas sin clave: texto corrido */
.cr-pdf-data .cr-row:not(:has(.cr-k)) {
  flex-direction: row;
  padding: 3px 0;
  border-bottom: none;
}

/* Sección header dentro del panel */
.cr-pdf-data .cr-sect { margin-top: 14px; }
.cr-pdf-data .cr-sect:first-child { margin-top: 0; }
.cr-pdf-data .cr-sect h4 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-border);
}

/* Wrapper interno para poder posicionar el ícono de descarga sobre el canvas */
.cr-pdf-block-inner {
  position: relative;
}

/* PDFs del bot: mismo tratamiento que los generados por ReportGenerator.
   Thumbnail compacto de 280px, clickeable, con overlay "Click para descargar".
   Sin sombras (preferencia plana del usuario). */
.cr-pdf-canvas-wrap {
  display: block;
  background: transparent;
  padding: 0;
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.cr-pdf-canvas-wrap:hover {
  transform: translateY(-1px);
}
.cr-pdf-canvas-wrap:hover .cr-pdf-stage {
  border-color: var(--c-surface-dark);
}
.cr-pdf-canvas-wrap::after {
  content: 'Click para descargar';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 10px;
  background: rgba(31, 42, 40, .92);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
  letter-spacing: .3px;
  border-radius: 0 0 8px 8px;
  pointer-events: none;
  z-index: 2;
}
/* Mientras carga ("Cargando PDF…") no mostrar overlay */
.cr-pdf-canvas-wrap:has(.cr-pdf-loading)::after {
  display: none;
}
.cr-pdf-stage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-height: none;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: none;
  background: #fff;
  border: 1px solid var(--c-border);
  transition: border-color .15s ease;
}
.cr-pdf-canvas {
  display: block;
  background: #ffffff;
  border-radius: 8px;
  max-width: 100%;
  width: 100%;
  image-rendering: auto;
}
/* Ocultar nav de páginas dentro del thumbnail — solo se ve primera página */
.cr-pdf-canvas-wrap .cr-pdf-nav {
  display: none !important;
}
.cr-pdf-loading {
  padding: 60px 20px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* Navegación entre páginas del PDF */
.cr-pdf-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 6px 0 2px;
}
.cr-pdf-nav-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: #ffffff;
  color: var(--c-primary);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.cr-pdf-nav-btn:hover:not(:disabled) {
  background: var(--c-surface-dark);
  color: #ffffff;
  border-color: var(--c-surface-dark);
}
.cr-pdf-nav-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.cr-pdf-nav-btn svg { width: 16px; height: 16px; }
.cr-pdf-nav-label {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  min-width: 52px;
  text-align: center;
}

/* Botón icono pequeño para descargar PDF (rojo) */
.cr-pdf-icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--c-surface-dark);
  color: #ffffff;
  border: 1px solid var(--c-surface-dark);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
}
.cr-pdf-icon-btn:hover { background: var(--c-surface-dark); border-color: var(--c-surface-dark); color: #ffffff; }
.cr-pdf-icon-btn svg { width: 16px; height: 16px; }
.cr-pdf-icon-btn-ghost {
  background: #ffffff;
  color: var(--c-primary);
  border: 1px solid var(--c-border);
}
.cr-pdf-icon-btn-ghost:hover { background: var(--c-bg); color: var(--c-primary); border-color: var(--c-surface-dark); }



/* Fallback cuando PDF.js falla (ej: bloqueo de worker en algunos navegadores móviles) */
.cr-pdf-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 36px 18px;
  text-align: center;
  min-height: 220px;
}
.cr-pdf-fallback-icon {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-primary);
}
.cr-pdf-fallback-icon svg { width: 26px; height: 26px; }
.cr-pdf-fallback-name {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-primary);
  word-break: break-all;
  max-width: 100%;
}
.cr-pdf-fallback-actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.cr-pdf-fallback-btn {
  display: inline-flex; align-items: center;
  padding: 10px 18px;
  background: var(--c-surface-dark);
  color: #ffffff;
  font-size: var(--fs-sm);
  font-weight: 400;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid var(--c-surface-dark);
}
.cr-pdf-fallback-btn-ghost {
  background: #ffffff;
  color: var(--c-primary);
  border: 1px solid var(--c-border);
}
@media (max-width: 720px) {
  .cr-pdf-canvas-wrap {
    padding: 0;
    max-width: 100%;
  }
  .cr-pdf-stage {
    max-height: none;
  }
}

.cr-pdf-dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--c-surface-dark);
  color: #ffffff;
  border-radius: 8px;
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 400;
  align-self: flex-start;
}
.cr-pdf-dl:hover { background: #000000; color: #ffffff; }
.cr-pdf-dl svg { width: 15px; height: 15px; }

/* ===== Barra de informe + preview PDF inline ===== */
.cr-report-bar {
  padding: 12px 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.cr-report-bar-auto {
  padding: 20px 24px;
  align-items: stretch;
}
.cr-report-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 0;
}
.cr-report-loading-text {
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.cr-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--c-surface-dark);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  box-shadow: none;
}
.cr-report-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.cr-report-btn:hover { background: var(--c-surface-dark); transform: translateY(-1px); }
.cr-report-btn:active { transform: translateY(0); }
.cr-report-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Preview inline */
.cr-report-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 100%;
}
.cr-report-preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cr-report-preview-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-muted);
  letter-spacing: .3px;
  text-transform: uppercase;
}
.cr-report-btn-dl {
  font-size: var(--fs-sm);
  padding: 8px 16px;
}
/* Preview del PDF generado = thumbnail compacto clickeable para descargar.
   No es el documento completo embebido — solo una mini-vista de la primera
   página + botón de descarga. Mismo comportamiento en desktop y mobile. */
.cr-report-canvas-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.cr-report-canvas-wrap:hover {
  transform: translateY(-1px);
}
.cr-report-canvas-wrap:hover .cr-report-canvas {
  border-color: var(--c-surface-dark);
}
.cr-report-canvas-wrap::after {
  content: 'Click para descargar';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 10px;
  background: rgba(31, 42, 40, .92);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
  letter-spacing: .3px;
  border-radius: 0 0 8px 8px;
  pointer-events: none;
}
.cr-report-canvas {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;
  background: #fff;
  border: 1px solid var(--c-border);
  transition: border-color .15s ease;
}
.cr-report-canvas .cr-pdf-canvas {
  border-radius: 0;
  display: block;
  width: 100% !important;
  height: auto !important;
}
/* Ocultar la nav de páginas dentro del thumbnail — solo se ve primera página */
.cr-report-canvas .cr-pdf-nav {
  display: none !important;
}
.cr-report-dl-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: none;
  background: var(--c-surface-dark);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cr-report-dl-icon span { display: none; }
.cr-report-dl-icon svg { width: 18px; height: 18px; }

/* Spinner animation */
@keyframes cr-spin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
  .cr-report-bar { padding: 10px 14px 22px; }
  .cr-report-preview { max-width: 100%; }
  .cr-report-preview-head { flex-direction: column; align-items: flex-start; }
  .cr-report-btn-dl { width: 100%; justify-content: center; }
}

/* ===== Layout: galería (ficha = 1 imagen, DNI virtual = 2 imágenes) ===== */
.cr-gallery-layout {
  padding: var(--cr-gallery-padding-top) var(--cr-gallery-padding-right) var(--cr-gallery-padding-bottom) var(--cr-gallery-padding-left);
}
.cr-gallery-layout .cr-tit {
  max-width: var(--cr-gallery-max-width);
  margin: 0 0 16px;
}
.cr-gallery {
  display: grid;
  gap: var(--cr-gallery-gap);
  max-width: var(--cr-gallery-max-width);
  transform: translate(var(--cr-gallery-offset-left), var(--cr-gallery-offset-top));
}
/* Layouts simetricos por cantidad de fotos (1..4 y 5+).
   NO asumimos contenido semantico — el bot puede mandar las fotos
   en cualquier orden segun el comando. */
.cr-gallery-1 { grid-template-columns: 1fr; }
.cr-gallery-2 { grid-template-columns: 1fr 1fr; }
.cr-gallery-3 { grid-template-columns: repeat(3, 1fr); }
.cr-gallery-4 { grid-template-columns: 1fr 1fr; } /* 2x2 simetrico */
.cr-gallery-n { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.cr-gallery img {
  width: var(--cr-gallery-img-width);
  max-height: var(--cr-gallery-img-max-height);
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid rgba(15,23,42,0.07);
  background: #f8f9fb;
  box-shadow: none;
  display: block;
  height: auto;
  border-radius: 12px;
  /* Sin bordes ni fondo: las imagenes ya vienen con fondo blanco propio */
  border: none;
  background: transparent;
  object-fit: contain;
  justify-self: center;
}

@media (max-width: 720px) {
  .cr-pdf-layout, .cr-gallery-layout {
    padding: 16px 16px 18px;
  }
  .cr-pdf-embed { height: 400px; max-height: 55vh; min-height: 280px; }
  /* En movil todas las galerias y media-grids pasan a 1 columna para
     que cada imagen se vea completa sin estrujarse. */
  .cr-gallery-2,
  .cr-gallery-3,
  .cr-gallery-4,
  .cr-gallery-n { grid-template-columns: 1fr; }
  .cr-pdf-split {
    grid-template-columns: 1fr;
  }
  /* Móvil: PDF primero, datos debajo */
  .cr-pdf-split .cr-pdf-viewer { order: -1; }
  .cr-pdf-split .cr-pdf-data { order: 1; }
  /* Botón descargar primero, info después */
  .cr-pdf-doc-info {
    display: flex;
    flex-direction: column;
  }
  .cr-pdf-doc-downloads { order: -1; }
  .cr-pdf-nosplit {
    max-width: 100%;
  }
  .cr-pdf-canvas-wrap canvas {
    width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 720px) {
  /* El cuerpo chico es cosa del móvil: ahí cada campo tiene que entrar en
     su línea junto a su etiqueta. En escritorio la ficha se lee de lejos y
     manda el tamaño de :root. */
  :root {
    --cr-fs: 10px;
    --cr-fs-titulo: 13px;
  }

  /* Reseteamos cualquier valor que haya sido guardado desde el editor
     — en móvil usamos un layout fluido, no el de escritorio. */
  .cr-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 14px 14px 12px !important;
    max-width: 100% !important;
  }
  /* En móvil las fotos van SIEMPRE arriba de los datos */
  .cr-media {
    grid-column: auto !important;
    order: -1 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 14px;
    width: 100%;
  }
  .cr-data { order: 1; }
  .cr-data { grid-column: auto !important; width: 100%; }
  /* Una columna SOLO cuando hay 1, 2 o 3 fotos. Con cuatro se queda en
     cuadricula.

     Esta regla decia `:not(.cr-media-4-dni)` a secas y era la que
     apilaba las cuatro fotos del DNI una debajo de otra. El diseno
     `-4-dni` depende de una clasificacion por color y proporcion
     (applyDniLayout) que no siempre acierta —si la firma no sale mas
     ancha que alta, se rinde— y entonces la rejilla se quedaba en
     `.cr-media-4`, que esta regla aplastaba a una columna. Con cuatro
     fotos el resultado tiene que ser el mismo salga o no la
     clasificacion: dos arriba y dos abajo. */
  .cr-media-grid:not(.cr-media-4-dni):not(.cr-media-4) { width: 100%; grid-template-columns: 1fr !important; }
  .cr-media-grid:not(.cr-media-4-dni):not(.cr-media-4) img { max-height: 280px; object-fit: contain; }
  .cr-media-grid.cr-media-4 { width: 100%; grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .cr-media-grid.cr-media-4 img { max-height: none; object-fit: contain; }
  .cr-gallery.cr-gallery-4 { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  /* Layout DNI en movil: mismo patron (rostro izq + firma/huellas der)
     pero el rostro tiene altura limitada para que entre la columna der */
  .cr-media-grid.cr-media-4-dni,
  .cr-gallery.cr-gallery-4-dni { gap: 8px; }
  .cr-media-grid.cr-media-4-dni img,
  .cr-gallery.cr-gallery-4-dni img { max-height: none; }
  /* Etiqueta y valor EN LA MISMA LÍNEA, también en el móvil.

     Estaban a una columna (`1fr`), es decir el valor debajo de su
     etiqueta: cada dato ocupaba dos renglones y una ficha de Reniec se
     iba a tres pantallas de scroll. A dos columnas se lee de un vistazo
     y ocupa la mitad.

     La etiqueta se lleva el 38%, con un suelo de 96px para que no se
     estruje en pantallas estrechas; el valor se queda el resto. */
  .cr-row {
    grid-template-columns: minmax(88px, 34%) 1fr !important;
    gap: 8px !important;
    align-items: baseline;
    /* 6px arriba y abajo. Con 8px una ficha de Reniec pedia media
       pantalla mas de scroll sin ganar nada en legibilidad. */
    padding: 6px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  }
  .cr-row:last-child { border-bottom: none; }
  /* Filas de texto puro (sin campo) — sin divisor, más compactas */
  .cr-row:not(:has(.cr-k)) {
    padding: 2px 0;
    border-bottom: none;
  }
  .cr-row .cr-k {
    font-size: var(--cr-fs);
    color: var(--c-primary);
    /* 400, no 500: en este proyecto solo se usan 400 y 700. */
    font-weight: 400;
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: break-word;
    /* Sin margen inferior: era la separación de cuando el valor iba
       debajo, y ahora va al lado. */
    margin-bottom: 0;
  }
  .cr-row .cr-k::after { content: ""; }
  .cr-row .cr-v {
    font-size: var(--cr-fs);
    word-break: normal;
    overflow-wrap: break-word;
  }
  /* Cada fila era su propia rejilla con la columna de la etiqueta atada a
     140-260px: en pantalla angosta «FECHA DE INSCRIPCIÓN» partía en dos
     renglones. Ahora la rejilla vive en el CONTENEDOR y las filas se
     disuelven en ella (`display: contents`), así la columna mide lo que
     mide la etiqueta más larga —una sola línea siempre— y los valores
     siguen alineados entre sí, cosa que `max-content` por fila no da. */
  /* El primer bloque (DNI, PRENOMBRES, APELLIDOS, GÉNERO) no lleva
     `.cr-sect-body`: sus filas cuelgan directas de `.cr-sect` (ver
     `isFirst` en renderSeccionIndividual). Sin este selector se quedaba
     fuera de la rejilla y alineaba por su cuenta. */
  .cr-sect:has(> .cr-row),
  .cr-sect-body:not(:has(> .cr-record)),
  .cr-record {
    display: grid;
    /* Columna FIJA, no `max-content`: con max-content cada sección medía
       su propia etiqueta más larga y los valores de «NACIMIENTO» caían más
       a la izquierda que los de «INFORMACION GENERAL». El mínimo en
       max-content es la válvula: si una etiqueta no cabe en el 52%, la
       columna crece en vez de recortarla. */
    grid-template-columns: minmax(max-content, 52%) minmax(0, 1fr);
    column-gap: 16px;
  }
  .cr-sect:has(> .cr-row) > .cr-row,
  .cr-sect-body:not(:has(> .cr-record)) > .cr-row,
  .cr-record > .cr-row { display: contents; }
  .cr-sect:has(> .cr-row) > .cr-row > .cr-k,
  .cr-sect:has(> .cr-row) > .cr-row > .cr-v,
  .cr-sect-body:not(:has(> .cr-record)) > .cr-row > .cr-k,
  .cr-sect-body:not(:has(> .cr-record)) > .cr-row > .cr-v,
  .cr-record > .cr-row > .cr-k,
  .cr-record > .cr-row > .cr-v {
    padding: 6px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  }
  .cr-row > .cr-k { white-space: nowrap; }
  /* Filas sin etiqueta: el valor cruza las dos columnas. */
  .cr-row:not(:has(.cr-k)) > .cr-v { grid-column: 1 / -1; }

  .cr-sect-body { padding-left: 0; }
  .cr-sect { margin-top: 18px; }
  .cr-sect:first-child { margin-top: 0; }
  .cr-sect h4 {
    font-size: var(--cr-fs-titulo);
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.12);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .cr-tit { font-size: var(--fs-sm); margin-bottom: 12px; }
  /* Paneles contenedores no deben sumar padding excesivo en móvil */
  .consulta-resultado-body { padding: 0 !important; }
  /* Con el mismo selector que la regla de arriba, no `.reniec-result-body`
     a secas: aquella es `.result-panel > .reniec-result-body`, tiene mas
     especificidad, y sus 12px laterales ganaban aunque esta regla fuera
     posterior y estuviera dentro de la consulta de medios. Este era el
     margen que seguia sobrando a los lados de la ficha. */
  .result-panel > .reniec-result-body { padding: 0 0 12px; }
  /* El wrapper .panel.result-panel en móvil achica su padding para
     que el contenido tenga todo el ancho disponible */
  /* CERO relleno en el panel. El margen que quedaba a los lados era la
     suma de tres capas: este panel, el relleno del layout de datos
     (--cr-padding-*) y el del bloque de texto. Ninguna sola se notaba,
     las tres juntas dejaban la ficha encogida en el centro.

     No deja nada pegado al borde de verdad: la cabecera, el estado
     vacio y las secciones traen su propio relleno, que sigue intacto. */
  .result-panel { padding: 0 !important; }
  /* Reset de variables en móvil por si quedó algo guardado del editor */
  :root {
    --cr-padding-top: 14px;
    /* Hasta el borde. El aire lateral lo pone .content, por fuera de la
       tarjeta; aqui dentro sobra. */
    --cr-padding-right: 0px;
    --cr-padding-bottom: 12px;
    --cr-padding-left: 0px;
    --cr-gap: 14px;
    --cr-data-max: 100%;
    --cr-media-width: 100%;
    --cr-media-margin-top: 0;
    --cr-media-margin-left: 0;
    --cr-media-photo-max-height: 420px;
    --cr-max-width: 100%;
    --cr-pdf-padding-top: 12px;
    --cr-pdf-padding-right: 12px;
    --cr-pdf-padding-bottom: 12px;
    --cr-pdf-padding-left: 12px;
    --cr-pdf-max-width: 100%;
    --cr-pdf-gap: 14px;
    --cr-pdf-data-width: 100%;
    --cr-pdf-split-gap: 14px;
    --cr-pdf-data-offset-top: 0px;
    --cr-pdf-data-offset-left: 0px;
    --cr-pdf-viewer-offset-top: 0px;
    --cr-pdf-viewer-offset-left: 0px;
    --cr-pdf-viewer-size: 100%;
    --cr-gallery-padding-top: 12px;
    --cr-gallery-padding-right: 12px;
    --cr-gallery-padding-bottom: 12px;
    --cr-gallery-padding-left: 12px;
    --cr-gallery-max-width: 100%;
    --cr-gallery-gap: 12px;
    --cr-gallery-offset-top: 0px;
    --cr-gallery-offset-left: 0px;
    --cr-gallery-img-max-height: none;
    --cr-gallery-img-width: 100%;
    --cr-txt-padding-top: 14px;
    --cr-txt-padding-right: 14px;
    --cr-txt-padding-bottom: 12px;
    --cr-txt-padding-left: 14px;
    --cr-txt-max-width: 100%;
    --cr-txt-offset-top: 0px;
    --cr-txt-offset-left: 0px;
    --cr-data-offset-top: 0px;
    --cr-data-offset-left: 0px;
  }

  /* Resultado de consulta — layout limpio en móvil */
  .cr-btn-details {
    max-width: 100%;
  }
  .cr-pdf-nosplit {
    max-width: 100%;
  }
  .cr-pdf-doc-info {
    gap: 10px;
  }
  .cr-pdf-doc-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .cr-pdf-doc-name {
    white-space: normal;
    word-break: break-all;
    font-size: var(--fs-xs);
  }
  .cr-pdf-dl {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    font-size: var(--fs-sm);
  }
  .cr-pdf-doc-meta {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .cr-pdf-doc-meta-row {
    padding: 8px;
  }
}

/* ============================================================
   Editor de layout (admin) — botón flotante + panel lateral
============================================================ */
.le-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--c-surface-dark);
  color: #ffffff;
  border: 1px solid var(--c-surface-dark);
  border-radius: 12px;
  font-size: var(--fs-sm);
  font-weight: 400;
  cursor: pointer;
  font-family: inherit;
}
.le-toggle:hover { background: #000000; border-color: #000000; }
.le-toggle.is-open { background: #000000; border-color: #000000; }
.le-toggle svg { width: 16px; height: 16px; }

.le-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 94vw;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.94);
  border-left: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  font-family: inherit;
  transition: width 0.2s ease;
}
.le-panel[hidden] { display: none; }

.le-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-border);
}
.le-header h3 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-primary);
}
.le-close {
  background: transparent;
  border: none;
  color: var(--c-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
}
.le-close:hover { color: var(--c-primary); background: var(--c-bg); }
.le-close svg { width: 18px; height: 18px; display: block; }

.le-active {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 18px 0;
  padding: 8px 12px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-size: var(--fs-sm);
  color: var(--c-primary);
}
.le-active-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-surface-dark);
  flex-shrink: 0;
}
.le-active-text { color: var(--c-muted); }
.le-active-name {
  color: var(--c-primary);
  font-weight: 700;
}

.le-hint {
  margin: 0;
  padding: 10px 18px 6px;
  font-size: var(--fs-sm);
  color: var(--c-muted);
  line-height: 1.5;
  text-align: center;
}
.le-hint b { color: var(--c-primary); font-weight: 700; }

/* Sección de preestablecidos */
.le-presets {
  margin: 8px 18px 0;
  padding: 10px 12px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 8px;
}
.le-presets-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.le-presets-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: .4px;
  text-transform: uppercase;
}
.le-presets-save {
  padding: 5px 10px;
  font-size: var(--fs-xs);
  font-weight: 400;
  background: var(--c-surface-dark);
  color: #ffffff;
  border: 1px solid var(--c-surface-dark);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.le-presets-save:hover { background: #000000; border-color: #000000; }
.le-presets-empty {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-align: center;
  padding: 6px 0;
  line-height: 1.4;
}
.le-presets-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.le-preset-item {
  display: flex;
  gap: 4px;
}
.le-preset-apply {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  color: var(--c-primary);
  font-size: var(--fs-sm);
  font-weight: 400;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.le-preset-apply:hover {
  background: var(--c-surface-dark);
  color: #ffffff;
  border-color: var(--c-surface-dark);
}
.le-preset-apply svg { width: 14px; height: 14px; flex-shrink: 0; }
.le-preset-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.le-preset-tag {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  background: var(--c-bg);
  color: var(--c-muted);
  border-radius: 4px;
  border: 1px solid var(--c-border);
}
.le-preset-apply:hover .le-preset-tag {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}
.le-preset-del {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  color: var(--c-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.le-preset-del:hover { background: var(--c-surface-dark); color: #ffffff; border-color: var(--c-surface-dark); }
.le-preset-del svg { width: 14px; height: 14px; }

.le-tabs {
  display: flex;
  gap: 4px;
  padding: 0 18px;
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.le-tabs::-webkit-scrollbar { display: none; }
.le-tab {
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-muted);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  margin-bottom: -1px;
}
.le-tab:hover { color: var(--c-primary); }
.le-tab.is-active {
  color: var(--c-primary);
  border-bottom-color: var(--c-surface-dark);
}
.le-tabpanel { display: none; }
.le-tabpanel.is-active { display: block; }

.le-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--c-border);
}
.le-section:first-child {
  margin-top: 4px;
  padding-top: 0;
  border-top: none;
}
.le-section-title {
  font-size: var(--fs-xs);
  color: var(--c-primary);
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-bottom: 4px;
  text-align: center;
}

/* Botones rápidos ±50 debajo de cada slider */
.le-field-quick {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.le-quick {
  min-width: 56px;
  padding: 5px 12px;
  font-size: var(--fs-xs);
  font-weight: 400;
  border: 1px solid var(--c-border);
  background: #ffffff;
  color: var(--c-primary);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.le-quick:hover { background: var(--c-bg); border-color: var(--c-surface-dark); }
.le-quick:active { background: var(--c-surface-dark); color: #ffffff; }

/* Switch "ocultar texto" al inicio de cada tab */
.le-toggle-row {
  margin: 12px auto 4px;
  max-width: 320px;
  padding: 10px 12px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 8px;
}
.le-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.le-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.le-switch-track {
  position: relative;
  width: 34px;
  height: 20px;
  background: #D1D5DB;
  border-radius: 12px;
  transition: background .15s;
  flex-shrink: 0;
}
.le-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform .15s;
}
.le-switch input:checked + .le-switch-track { background: var(--c-surface-dark); }
.le-switch input:checked + .le-switch-track .le-switch-thumb { transform: translateX(14px); }
.le-switch-label {
  font-size: var(--fs-sm);
  color: var(--c-primary);
  font-weight: 400;
}

.le-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 18px 18px;
}

.le-field {
  margin: 14px auto;
  max-width: 320px;
  text-align: center;
}
.le-field-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.le-field-head label {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-primary);
  text-align: center;
}
.le-val {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
  background: var(--c-bg);
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid var(--c-border);
}

.le-field-row {
  display: grid;
  grid-template-columns: 1fr 70px;
  gap: 10px;
  align-items: center;
  justify-items: center;
}
.le-field-row input[type="range"] {
  width: 100%;
  max-width: 240px;
  accent-color: var(--c-primary);
}
.le-field-row .le-num {
  width: 100%;
  padding: 6px 8px;
  font-size: var(--fs-sm);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--c-primary);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.le-field-row .le-num:focus {
  outline: none;
  border-color: var(--c-surface-dark);
}

.le-footer {
  display: flex;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--c-border);
  background: var(--c-bg);
}
.le-btn {
  flex: 1;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 400;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--c-border);
}
.le-btn-ghost {
  background: #ffffff;
  color: var(--c-primary);
}
.le-btn-ghost:hover { background: var(--c-bg); border-color: var(--c-surface-dark); }
.le-btn-primary {
  background: var(--c-surface-dark);
  color: #ffffff;
  border-color: var(--c-surface-dark);
}
.le-btn-primary:hover { background: #000000; border-color: #000000; }

@media (max-width: 720px) {
  .le-panel { width: 100%; }
  .le-toggle span { display: none; }
  .le-toggle { padding: 10px; border-radius: 50%; }
}

/* ============================================================
   EDITOR DE DISEÑO — rediseño profesional (v2)
============================================================ */

/* Header sticky con título, perfil, buscador y tabs */
.le-head {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--c-border);
  padding: 14px 16px 0;
}
.le-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.le-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: -0.1px;
}
.le-head-title svg {
  width: 18px;
  height: 18px;
  color: var(--c-primary);
}
.le-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.le-panel .le-close,
.le-panel .le-collapse {
  background: transparent;
  border: none;
  color: var(--c-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: color .15s, background .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.le-panel .le-close:hover,
.le-panel .le-collapse:hover {
  color: var(--c-primary);
  background: var(--c-bg);
}
.le-panel .le-close svg,
.le-panel .le-collapse svg { width: 18px; height: 18px; display: block; }
.le-panel .le-collapse .le-icon-expand { display: none; }
.le-panel.is-collapsed .le-collapse .le-icon-collapse { display: none; }
.le-panel.is-collapsed .le-collapse .le-icon-expand { display: block; }

/* ----- Modo encogido: solo muestra el header compacto ----- */
.le-panel.is-collapsed {
  width: 56px;
  min-width: 56px;
}
.le-panel.is-collapsed .le-head {
  padding: 10px 6px 10px;
  border-bottom: none;
}
.le-panel.is-collapsed .le-head-top {
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0;
}
.le-panel.is-collapsed .le-head-title span,
.le-panel.is-collapsed .le-active,
.le-panel.is-collapsed .le-search,
.le-panel.is-collapsed .le-tabs,
.le-panel.is-collapsed .le-align-bar,
.le-panel.is-collapsed .le-body,
.le-panel.is-collapsed .le-footer {
  display: none !important;
}
.le-panel.is-collapsed .le-head-actions {
  flex-direction: column;
}

/* Badge del perfil activo */
.le-head .le-active {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  padding: 8px 12px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-size: var(--fs-sm);
  max-width: none;
}
.le-head .le-active-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-surface-dark);
  flex-shrink: 0;
  animation: pulse 1.8s ease-in-out infinite;
}
.le-head .le-active-name {
  color: var(--c-primary);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Buscador */
.le-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #ffffff;
  transition: border-color .15s;
}
.le-search:focus-within { border-color: var(--c-surface-dark); }
.le-search > svg:first-child {
  width: 14px;
  height: 14px;
  color: var(--c-muted);
  margin-left: 10px;
  flex-shrink: 0;
}
.le-search-input {
  flex: 1;
  padding: 7px 8px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--c-primary);
  outline: none;
  min-width: 0;
}
.le-search-input::placeholder { color: var(--c-muted); }
.le-search-clear {
  background: transparent;
  border: none;
  color: var(--c-muted);
  cursor: pointer;
  padding: 4px 8px;
  display: flex;
  align-items: center;
}
.le-search-clear:hover { color: var(--c-primary); }
.le-search-clear svg { width: 12px; height: 12px; }
.le-search-clear[hidden] { display: none; }

/* Tabs — diseño pill profesional */
.le-head .le-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.le-head .le-tabs::-webkit-scrollbar { display: none; }
.le-panel .le-tab {
  padding: 9px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-muted);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  margin-bottom: -1px;
  transition: color .15s;
}
.le-panel .le-tab:hover { color: var(--c-primary); }
.le-panel .le-tab.is-active {
  color: var(--c-primary);
  border-bottom-color: var(--c-surface-dark);
  font-weight: 700;
}

/* Body scrolleable */
.le-panel .le-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 10px;
}
.le-panel .le-body::-webkit-scrollbar { width: 6px; }
.le-panel .le-body::-webkit-scrollbar-thumb {
  background: var(--c-border);
  border-radius: 3px;
}

/* Presets */
.le-panel .le-presets {
  margin: 0 0 14px;
  padding: 12px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 12px;
}
.le-panel .le-presets-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.le-panel .le-presets-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--c-primary);
}
.le-panel .le-presets-title-wrap svg {
  width: 14px;
  height: 14px;
}
.le-panel .le-presets-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: .4px;
  text-transform: uppercase;
  text-align: left;
}

/* Secciones colapsables */
.le-panel .le-section {
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: #ffffff;
  margin: 0 auto 10px;
  max-width: none;
  text-align: left;
  overflow: hidden;
  padding: 0;
}
.le-panel .le-section[hidden] { display: none; }
.le-section-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--c-bg);
  border: none;
  border-bottom: 1px solid var(--c-border);
  font-family: inherit;
  cursor: pointer;
  color: var(--c-primary);
}
.le-section-head:hover { background: #f5f5f5; }
.le-panel .le-section-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: .3px;
  text-transform: uppercase;
  text-align: left;
  margin: 0;
}
.le-section-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.le-section-count {
  padding: 1px 7px;
  background: var(--c-border);
  color: var(--c-primary);
  border-radius: 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  min-width: 16px;
  text-align: center;
}
.le-section-chev {
  width: 14px;
  height: 14px;
  color: var(--c-muted);
  transition: transform .2s;
}
.le-section.is-collapsed .le-section-chev {
  transform: rotate(-90deg);
}
.le-section.is-collapsed .le-section-head {
  border-bottom-color: transparent;
}
.le-section-body {
  padding: 10px 14px 14px;
  max-height: 4000px;
  overflow: hidden;
  transition: max-height .25s ease, padding .2s;
}
.le-section.is-collapsed .le-section-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Fields más prolijos */
.le-panel .le-field {
  margin: 10px auto;
  max-width: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background .15s;
}
.le-panel .le-field:hover { background: var(--c-bg); }
.le-panel .le-field.is-modified {
  background: rgba(3, 167, 164, 0.05);
  border-left: 2px solid var(--c-primary);
  padding-left: 10px;
}
.le-panel .le-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  flex-wrap: nowrap;
}
.le-panel .le-field-head label {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-primary);
  text-align: left;
  flex: 1;
  min-width: 0;
}
.le-field-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.le-field-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--c-border);
  background: #ffffff;
  color: var(--c-muted);
  border-radius: 8px;
  cursor: pointer;
}
.le-field-reset:hover {
  color: var(--c-primary);
  border-color: var(--c-surface-dark);
}
.le-field-reset svg { width: 11px; height: 11px; }
.le-field-reset[hidden] { display: none; }
.le-panel .le-val {
  font-size: var(--fs-xs);
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  background: var(--c-bg);
  padding: 3px 9px;
  border-radius: 8px;
  border: 1px solid var(--c-border);
  font-weight: 700;
  min-width: 48px;
  text-align: center;
}
.le-panel .le-field.is-modified .le-val {
  color: var(--c-primary);
  background: rgba(3, 167, 164, 0.10);
  border-color: var(--c-surface-dark);
}

/* Sliders + inputs */
.le-panel .le-field-row {
  display: grid;
  grid-template-columns: 1fr 62px;
  gap: 8px;
  align-items: center;
  justify-items: stretch;
}
.le-panel .le-field-row input[type="range"] {
  width: 100%;
  max-width: 100%;
  accent-color: var(--c-primary);
}
.le-panel .le-field-row .le-num {
  width: 100%;
  padding: 5px 7px;
  font-size: var(--fs-sm);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--c-primary);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.le-panel .le-field-row .le-num:focus {
  outline: none;
  border-color: var(--c-surface-dark);
}

/* Quick buttons más compactos */
.le-panel .le-field-quick {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 6px;
}
.le-panel .le-quick {
  min-width: 48px;
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: 400;
  border: 1px solid var(--c-border);
  background: #ffffff;
  color: var(--c-primary);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.le-panel .le-quick:hover { background: var(--c-bg); border-color: var(--c-surface-dark); }
.le-panel .le-quick:active { background: var(--c-surface-dark); color: #ffffff; }

/* Toggle "ocultar texto" */
.le-panel .le-toggle-row {
  margin: 0 0 12px;
  max-width: none;
  padding: 10px 12px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 8px;
}

/* Estado sin resultados de búsqueda */
.le-empty-search {
  padding: 40px 20px;
  text-align: center;
  color: var(--c-muted);
}
.le-empty-search svg {
  width: 32px;
  height: 32px;
  color: var(--c-border);
  margin-bottom: 8px;
}
.le-empty-search p {
  font-size: var(--fs-sm);
  margin: 0;
}

/* Footer sticky */
.le-footer {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--c-border);
  background: rgba(255, 255, 255, 0.97);
}
.le-panel .le-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 400;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--c-border);
  transition: background .15s, border-color .15s, color .15s;
}
.le-panel .le-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.le-panel .le-btn-ghost {
  background: #ffffff;
  color: var(--c-primary);
}
.le-panel .le-btn-ghost:hover {
  background: var(--c-bg);
  border-color: var(--c-surface-dark);
}
.le-panel .le-btn-primary {
  background: var(--c-surface-dark);
  color: #ffffff;
  border-color: var(--c-surface-dark);
  flex: 1.3;
}
.le-panel .le-btn-primary:hover {
  background: #000000;
  border-color: #000000;
}

@media (max-width: 720px) {
  .le-panel {
    width: 100%;
  }
  .le-head,
  .le-footer {
    padding-left: 14px;
    padding-right: 14px;
  }
  .le-panel .le-body {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Hint de drag-and-drop dentro del panel */
.le-drag-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 0 12px;
  background: rgba(3, 167, 164, 0.08);
  border: 1px solid rgba(3, 167, 164, 0.25);
  border-radius: 8px;
  font-size: var(--fs-sm);
  color: var(--c-primary);
  line-height: 1.5;
}
.le-drag-hint svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--c-primary);
}
.le-drag-hint b { font-weight: 700; }

/* ============================================================
   MODO ARRASTRE — se activa cuando el panel del editor está abierto
============================================================ */
body.le-drag-mode .cr-data,
body.le-drag-mode .cr-media,
body.le-drag-mode .cr-txt-data,
body.le-drag-mode .cr-gallery,
body.le-drag-mode .cr-pdf-data,
body.le-drag-mode .cr-pdf-viewer {
  cursor: grab;
  outline: 1px dashed rgba(3, 167, 164, 0.4);
  outline-offset: 4px;
  transition: outline-color .15s;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}
body.le-drag-mode .cr-data:hover,
body.le-drag-mode .cr-media:hover,
body.le-drag-mode .cr-txt-data:hover,
body.le-drag-mode .cr-gallery:hover,
body.le-drag-mode .cr-pdf-data:hover,
body.le-drag-mode .cr-pdf-viewer:hover {
  outline-color: var(--c-primary);
  outline-style: solid;
}

body.le-drag-mode .le-dragging {
  cursor: grabbing !important;
  outline: 2px solid var(--c-primary) !important;
  outline-offset: 4px;
  opacity: 0.85;
}

/* Bloque seleccionado — queda marcado hasta que el usuario seleccione otro */
body.le-drag-mode .le-selected {
  outline: 2px solid var(--c-primary, #8fc72e) !important;
  outline-offset: 4px;
}

/* ============================================================
   HOVER-HIGHLIGHT — al pasar el mouse sobre un control del panel,
   se marca el elemento afectado en la página con un borde turquesa
   y un pequeño label flotante.
============================================================ */
.le-hover-target {
  outline: 2px dashed #141d1c !important;
  outline-offset: 3px;
  transition: outline-color .15s, background-color .15s;
}
.le-flash-target {
  outline: 2px solid #141d1c !important;
  outline-offset: 3px;
  animation: le-flash 0.6s ease-out 3;
}
@keyframes le-flash {
  0%, 100% { background-color: rgba(3, 167, 164, 0.0); }
  50%      { background-color: rgba(3, 167, 164, 0.12); }
}

/* Etiqueta flotante con el nombre del bloque resaltado */
.le-target-label {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-surface-dark);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10000;
  letter-spacing: 0.2px;
  font-family: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  box-shadow: none;
}

/* Botón "target" (mira) en cada campo del panel */
.le-field-target {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.le-field-target svg {
  width: 14px;
  height: 14px;
}
.le-field-target:hover {
  background: rgba(3, 167, 164, 0.10);
  color: #141d1c;
}
.le-field-target:active {
  transform: scale(.92);
}

/* Barra de alineación en el header del panel */
.le-align-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #e5e7eb;
  background: #fafbfc;
}
.le-align-label {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.le-align-label b { color: var(--c-primary); font-weight: 700; }
.le-align-buttons {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.le-align-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: var(--c-primary);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.le-align-btn svg { width: 16px; height: 16px; }
.le-align-btn:hover:not(:disabled) {
  background: #edf7d9;
  border-color: #8fc72e;
  color: #8fc72e;
}
.le-align-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.le-align-btn.le-align-reset { margin-left: 2px; color: var(--c-muted); }
.le-align-sep {
  width: 1px;
  height: 20px;
  background: #e5e7eb;
  margin: 0 2px;
}

/* Manija de redimensionar en la esquina inferior-derecha */
.le-resize-handle {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--c-primary, #8fc72e);
  color: #ffffff;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: nwse-resize;
  z-index: 50;
  border: 2px solid #ffffff;
  user-select: none;
  touch-action: none;
}
.le-resize-handle svg { width: 16px; height: 16px; }
body.le-drag-mode .le-resize-handle { display: flex; }
body.le-drag-mode .le-resizing {
  outline: 2px solid var(--c-primary) !important;
  outline-offset: 4px;
}
@media (max-width: 720px) {
  .le-resize-handle { width: 32px; height: 32px; right: -12px; bottom: -12px; }
  .le-resize-handle svg { width: 18px; height: 18px; }
}

/* Mientras el editor está abierto, liberar recortes para que los elementos
   se puedan mover libremente fuera de sus contenedores. */
body.le-drag-mode .result-panel,
body.le-drag-mode .panel,
body.le-drag-mode .view,
body.le-drag-mode .reniec-result-body,
body.le-drag-mode .premium-result-body,
body.le-drag-mode .content,
body.le-drag-mode .cr-pdf-layout,
body.le-drag-mode .cr-txt-layout,
body.le-drag-mode .cr-gallery-layout,
body.le-drag-mode .cr-layout,
body.le-drag-mode .cr-pdf-split {
  overflow: visible !important;
}

/* Tag flotante con el nombre del bloque al hacer hover */
body.le-drag-mode .cr-data::before { content: "Texto"; }
body.le-drag-mode .cr-media::before { content: "Fotos"; }
body.le-drag-mode .cr-txt-data::before { content: "Texto"; }
body.le-drag-mode .cr-gallery::before { content: "Imágenes"; }
body.le-drag-mode .cr-pdf-data::before { content: "Texto"; }
body.le-drag-mode .cr-pdf-viewer::before { content: "PDF"; }

body.le-drag-mode .cr-data::before,
body.le-drag-mode .cr-media::before,
body.le-drag-mode .cr-txt-data::before,
body.le-drag-mode .cr-gallery::before,
body.le-drag-mode .cr-pdf-data::before,
body.le-drag-mode .cr-pdf-viewer::before {
  position: absolute;
  top: -24px;
  left: 0;
  padding: 2px 8px;
  background: var(--c-surface-dark);
  color: #ffffff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
}
body.le-drag-mode .cr-data:hover::before,
body.le-drag-mode .cr-media:hover::before,
body.le-drag-mode .cr-txt-data:hover::before,
body.le-drag-mode .cr-gallery:hover::before,
body.le-drag-mode .cr-pdf-data:hover::before,
body.le-drag-mode .cr-pdf-viewer:hover::before {
  opacity: 1;
}

/* ==========================================================
   Listado de tipos de consulta — landing anónimo
========================================================== */
.anon-cats {
  display: none;
  margin-bottom: 28px;
}
body.is-anonymous .anon-cats { display: block; }
body.is-logged-in .anon-cats { display: none; }

.anon-cats-head {
  margin-bottom: 16px;
}
.anon-cats-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-primary);
  margin: 0 0 6px;
}
.anon-cats-sub {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin: 0;
  line-height: 1.5;
}
.anon-cats-sub strong { color: var(--c-primary); }

.anon-cats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 960px) {
  .anon-cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .anon-cats-grid { grid-template-columns: 1fr; }
}

.anon-cat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--c-primary);
  transition: border-color .15s, background .15s;
}
.anon-cat-card:hover {
  border-color: var(--c-surface-dark);
  background: var(--c-bg);
}
.anon-cat-ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--c-primary);
}
.anon-cat-ico svg { width: 19px; height: 19px; }
.anon-cat-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.anon-cat-text strong {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-primary);
}
.anon-cat-text span {
  font-size: var(--fs-sm);
  color: var(--c-muted);
}


/* ============================================================
   DASHBOARD — encajar en una sola página (desktop)
   Cuadros estáticos (sin hover lift) y panel derecho oculto
============================================================ */
@media (min-width: 1100px) {
  #view-dashboard { grid-column: 1 / -1 !important; }
  /* Compactar todo para 1080p sin scroll */
  #view-dashboard .dash-grid { gap: 12px; margin-bottom: 12px; }
  #view-dashboard .panel { padding: 12px 14px; border-radius: 12px; }
  #view-dashboard .credits-body { gap: 10px; }
  #view-dashboard .credits-total { font-size: var(--fs-lg); line-height: 1.1; }
  #view-dashboard .credits-header h3 { font-size: var(--fs-sm); }
  #view-dashboard .stats-panel .period-card { padding: 8px 10px; }
  #view-dashboard .stats-panel .period-card strong { font-size: var(--fs-md); line-height: 1; }
  #view-dashboard .plan-card { padding: 14px; }
  #view-dashboard .credits-ring { width: 100px; height: 100px; }
  #view-dashboard .module-row { padding: 6px 0; }
  #view-dashboard .module-row .module-count { font-size: var(--fs-sm); }
  /* Padding del content reducido en dashboard */
  body.is-dashboard-view .content { padding: 15px !important; }
}

/* Cuadros estáticos — sin transform al hacer hover */
#view-dashboard .panel,
#view-dashboard .plan-card,
#view-dashboard .credits-card,
#view-dashboard .stats-panel,
#view-dashboard .quick-actions {
  transform: none !important;
  transition: none !important;
}
#view-dashboard .panel:hover,
#view-dashboard .plan-card:hover,
#view-dashboard .credits-card:hover,
#view-dashboard .stats-panel:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* PDFs múltiples — orden visual */
.cr-pdf-block-multi {
  border: 1px solid var(--c-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--c-surface);
}
.cr-pdf-block-header {
  background: var(--c-surface-dark);
  color: #fff;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--fs-sm);
  font-weight: 400;
}
.cr-pdf-block-num {
  background: rgba(255,255,255,.15);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.cr-pdf-block-name {
  flex: 1;
  text-align: right;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: rgba(255,255,255,.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   MODO RESULTADO — solo la ficha en pantalla

   Cuando hay resultado, el selector de consulta y el formulario del
   dato ya cumplieron y sobran: en el movil empujaban la ficha media
   pantalla hacia abajo y obligaban a deslizar para ver lo que se acaba
   de pedir.

   La clase la pone category-view.js en la propia vista, y esta regla
   vale para TODAS las categorias de golpe porque todas comparten la
   misma estructura:  .view > .selector-card
                      .view > .panel            (el formulario)
                      .view > .panel.result-panel
   Al anadir una categoria nueva no hay que tocar nada aqui.
============================================================ */
.view.tiene-resultado > .selector-card,
.view.tiene-resultado > .panel:not(.result-panel),
/* «Consulta Vehicular» anida los suyos dentro de .filter-search-box en
   vez de colgarlos de la vista, asi que hay que nombrarlos aparte. Su
   modulo es filter.js, que no sale de la fabrica de categorias pero
   pone la misma clase. */
.view.tiene-resultado > .filter-search-box > .selector-card,
.view.tiene-resultado > .filter-search-box > .panel:not(.result-panel) {
  display: none !important;
}

/* (Aqui hubo una variante suelta del boton «Nueva consulta» para
   «Consulta Vehicular», que se creia sin cabecera de resultado. Si la
   tiene —`#filter-result > .result-header`— asi que usa la misma
   cabecera que las demas y la variante sobraba.) */

/* La salida. Sin este boton, escondidos los dos cuadros, el cliente se
   queda mirando la ficha sin forma de pedir otra consulta. Va a la
   derecha de la cabecera del resultado, discreto y en linea. */
.cr-nueva {
  margin-left: auto;
  flex-shrink: 0;
  padding: 7px 14px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: transparent;
  color: var(--c-primary);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.cr-nueva:hover {
  background: #f1f3f3;
  border-color: #a4b1b9;
}
/* Solo tiene sentido con el resultado puesto: sin el, los dos cuadros
   estan a la vista y no hay a donde volver. */
.view:not(.tiene-resultado) .cr-nueva { display: none; }

/* ── Cabecera del resultado: sin distintivo de estado y con las dos
   acciones ──

   El distintivo «Completado» se retira. Mientras se consulta si dice
   algo util («Consultando»), pero con la ficha ya delante repetir que
   esta completada no aporta nada: se ve. Los otros dos estados siguen
   apareciendo porque solo se esconde con la clase del modo resultado. */
.view.tiene-resultado .result-panel .status-chip { display: none; }
/* «Esperando consulta» no dice nada que el cuerpo del panel no diga ya
   («Realice una consulta»), y ocupaba el sitio de la cabecera. El chip de
   carga sí se queda: ese sí informa. */
.result-panel .status-chip.status-empty { display: none; }

/* «Descargar», mudado aqui desde el cuerpo del resultado (lo hace
   category-view.js). Ahi flotaba sobre las fotos y las empujaba hacia
   abajo; aqui es una accion mas de la cabecera.

   Hay que rehacerle los margenes: `.nm-download` trae `margin: 0 0 12px
   auto`, pensado para ir suelto y alineado a la derecha dentro del
   cuerpo. En una fila flex ese margen automatico lo separaria de
   «Nueva consulta». */
.result-header .nm-download.cr-dl-cabecera {
  margin: 0 0 0 auto;
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  gap: 6px;
}
.result-header .nm-download.cr-dl-cabecera svg { width: 14px; height: 14px; }
/* Con las dos juntas, el margen automatico lo lleva solo la primera. */
.result-header .nm-download.cr-dl-cabecera + .cr-nueva { margin-left: 4px; }
/* El de la descarga del PDF del bot es un <a>, no un <button>: sin subrayado. */
a.nm-download { text-decoration: none; }

/* La cabecera pasa a poder envolver: en un movil estrecho el titulo mas
   las dos acciones no caben en una linea, y sin esto se estrujaban unas
   contra otras. */
.result-header { flex-wrap: wrap; row-gap: 8px; }

/* ============================================================
   LA FICHA DEL RESULTADO — presentación

   Es lo único que el cliente se lleva de la consulta, y hasta ahora se
   leía como un volcado: etiqueta y dato del mismo tamaño y del mismo
   color, la barra de cuatro colores de las cabeceras internas encima, y
   el documento anunciado con la misma letra que un campo cualquiera.

   Aquí se le da forma de documento emitido: cabecera oscura con la
   marca, el dato en grande y en negrita —que es lo que se viene a leer—,
   la etiqueta pequeña y gris por encima de él, y cada bloque separado
   por un rótulo, no por una caja. Sin sombras y sin franjas de color:
   el peso lo llevan la tipografía y el espacio.
============================================================ */

/* ── Cabecera: el membrete ── */
.result-panel > .result-header {
  background: var(--c-surface-dark);
  border-radius: 12px 12px 0 0;
  padding: 15px 22px !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
}
/* La barra cuatricolor es de las cabeceras de sección; sobre el membrete
   oscuro sobra y le quita seriedad al documento. */
.result-panel > .result-header::after { display: none; }
.result-panel > .result-header > .result-header-left > svg { color: #8fc72e; }
.result-panel > .result-header h3 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .4px;
}
.result-panel > .result-header .nm-download.cr-dl-cabecera {
  background: #8fc72e;
  color: #141d1c;
}
.result-panel > .result-header .nm-download.cr-dl-cabecera:hover { background: #7fb426; }
.result-panel > .result-header .cr-nueva {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, .35);
}
.result-panel > .result-header .cr-nueva:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .6);
}

/* ── Título del organismo ── */
.cr-tit {
  font-size: 21px;
  font-weight: 700;
  color: #141d1c;
  letter-spacing: .1px;
  text-transform: none;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid #141d1c;
}

/* ── Rótulo de bloque ── */
.cr-sect { margin-top: 30px; }
.cr-sect h4 {
  font-size: 13px;
  font-weight: 700;
  color: #7c8785;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  border-bottom: none;
  margin: 0 0 2px;
  padding-bottom: 0;
}

/* ── Cada dato: etiqueta discreta, valor con peso ── */
.cr-row {
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid #eceeed;
}
.cr-row .cr-k {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .9px;
  color: #7c8785;
  line-height: 1.9;
}
.cr-row .cr-v {
  font-size: 16px;
  font-weight: 400;
  color: #141d1c;
  letter-spacing: .1px;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}
/* Veredictos: lo que la ficha DICE, no lo que trae. */
.cr-row .cr-v.cr-v-ok { color: #5f9500; }
.cr-row .cr-v.cr-v-bad { color: #c0392b; }

/* ── Varios registros: tarjetas sobrias, no cajas grises ── */
.cr-2col-wrapper { gap: 16px; margin-top: 12px; }
.cr-col-box {
  padding: 18px 22px;
  background-color: #ffffff;
  border: 1px solid #e6e9e8;
  border-radius: 12px;
}
.cr-record-index {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #8fc72e;
}

/* ── El documento: se anuncia, no se disimula ── */
.cr-docitem {
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #e6e9e8;
  border-radius: 12px;
}
.cr-docitem-ico {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: #f2f7e9;
  color: #5f9500;
  align-items: center; justify-content: center;
}
.cr-docitem-ico svg { width: 21px; height: 21px; }
.cr-docitem-nom { font-size: 15px; font-weight: 400; color: #141d1c; }
.cr-docitem-peso { font-size: 13px; font-weight: 400; color: #7c8785; }
.cr-docitem-ver {
  background: var(--c-surface-dark);
  border-color: var(--c-surface-dark);
  color: #ffffff;
  font-size: 15px;
  padding: 10px 20px;
}
.cr-docitem-ver:hover { background: #2a3b38; border-color: #2a3b38; }

/* El móvil de la ficha se resuelve entero más abajo, en la consulta de
   medios de 720px; aquí solo queda el tamaño del antetítulo. */
@media (max-width: 700px) {
  .cr-tit { font-size: 18px; }
}

/* ============================================================
   FICHA DE LICENCIA (/mtc) — densa, no derrochadora

   Ocho campos en filas de etiqueta a la izquierda y dato a la derecha se
   comían una pantalla entera para decir muy poco. Aquí el titular manda
   en el membrete, con su situación al lado, y los datos van en celdas
   pegadas: una línea de un píxel las separa, sin tarjetas ni huecos.
   Las papeletas, en tabla; una fila cada una.
============================================================ */
.mtc { padding: 18px 20px 20px; }

.mtc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 2px solid #141d1c;
}
.mtc-quien { min-width: 0; }
.mtc-nombre {
  font-size: 20px; font-weight: 700; color: #141d1c;
  letter-spacing: .1px; line-height: 1.25;
}
.mtc-sub { margin-top: 3px; font-size: 13px; color: #7c8785; }
.mtc-sub b { color: #141d1c; font-weight: 400; font-variant-numeric: tabular-nums; }
.mtc-punto { margin: 0 8px; color: #c6cdcb; }
.mtc-estado {
  flex-shrink: 0;
  font-size: 13px; font-weight: 700; letter-spacing: 1.1px;
  padding: 6px 14px; border-radius: 999px;
}
.mtc-estado.is-ok  { background: #eef7dc; color: #4f7d00; }
.mtc-estado.is-bad { background: #fdeceb; color: #c0392b; }

.mtc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  margin-top: 14px;
  background: #e6e9e8;
  border: 1px solid #e6e9e8;
  border-radius: 12px;
  overflow: hidden;
}
.mtc-dato { background: #ffffff; padding: 10px 14px; min-width: 0; }
.mtc-dato span {
  display: block;
  font-size: 13px; letter-spacing: .9px; text-transform: uppercase; color: #7c8785;
}
.mtc-dato strong {
  display: block; margin-top: 2px;
  font-size: 15px; font-weight: 400; color: #141d1c;
  line-height: 1.35; overflow-wrap: break-word;
}

.mtc-bloque { margin-top: 20px; }
.mtc-bloque h4 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: #7c8785;
}
.mtc-cuenta {
  background: var(--c-surface-dark); color: #ffffff;
  border-radius: 999px; padding: 2px 8px;
  font-size: 13px; letter-spacing: .4px;
}
.mtc-tabla-wrap { overflow-x: auto; }
.mtc-tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.mtc-tabla th {
  text-align: left; white-space: nowrap;
  padding: 0 14px 6px 0;
  font-size: 13px; font-weight: 400; letter-spacing: .8px;
  text-transform: uppercase; color: #7c8785;
  border-bottom: 1px solid #e6e9e8;
}
.mtc-tabla td {
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid #f2f4f3;
  font-weight: 400; color: #141d1c;
  font-variant-numeric: tabular-nums;
}
.mtc-tabla tr:last-child td { border-bottom: none; }
.mtc-tabla .mtc-n { color: #7c8785; font-weight: 400; width: 28px; }

@media (max-width: 640px) {
  .mtc { padding: 14px 12px 16px; }
  .mtc-nombre { font-size: 17px; }
  .mtc-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ============================================================
   LA FICHA, PARA TODAS LAS CONSULTAS

   Lo que se probó con la licencia vale para cualquier respuesta con
   datos: quién es arriba, su documento debajo y la situación al lado;
   el resto en celdas pegadas por una línea de un píxel, tantas por fila
   como quepan. Ocupa un tercio de lo que ocupaba en filas de etiqueta a
   la izquierda y dato a la derecha, y se lee de un vistazo.

   Solo dentro de `.cr-data`: el volcado de texto suelto (`.cr-txt-data`)
   sigue con sus filas, que ahí no hay campos que emparejar.
============================================================ */
.cr-data .cr-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 2px solid #141d1c;
}
.cr-data .cr-head-quien { min-width: 0; }
.cr-data .cr-nombre {
  font-size: 20px; font-weight: 700; color: #141d1c;
  letter-spacing: .1px; line-height: 1.25;
}
.cr-data .cr-sub { margin-top: 3px; font-size: 13px; color: #7c8785; }
.cr-data .cr-sub b { color: #141d1c; font-weight: 400; font-variant-numeric: tabular-nums; }
.cr-data .cr-punto { margin: 0 8px; color: #c6cdcb; }
.cr-data .cr-estado {
  flex-shrink: 0;
  font-size: 13px; font-weight: 700; letter-spacing: 1.1px;
  padding: 6px 14px; border-radius: 999px;
}
.cr-data .cr-estado.is-ok  { background: #eef7dc; color: #4f7d00; }
.cr-data .cr-estado.is-bad { background: #fdeceb; color: #c0392b; }

/* El título del organismo queda de antetítulo: la ficha la encabeza el
   nombre, no el membrete del proveedor. */
.cr-data .cr-tit {
  font-size: 13px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: #7c8785;
  border-bottom: none; padding-bottom: 0; margin: 0 0 6px;
}
.cr-data .cr-head + .cr-sect { margin-top: 0; }

/* Rejilla de datos: solo donde hay filas de campo que colocar. */
.cr-data .cr-sect:has(> .cr-row),
.cr-data .cr-sect-body:has(> .cr-row) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: #e6e9e8;
  border: 1px solid #e6e9e8;
  border-radius: 12px;
  overflow: hidden;
}
.cr-data .cr-sect > .cr-row,
.cr-data .cr-sect-body > .cr-row {
  display: block;
  padding: 10px 14px;
  background: #ffffff;
  border-bottom: none;
  min-width: 0;
}
.cr-data .cr-row > .cr-k {
  display: block;
  font-size: 13px; font-weight: 400; letter-spacing: .9px;
  line-height: 1.5; color: #7c8785;
}
.cr-data .cr-row > .cr-v {
  display: block; margin-top: 2px;
  font-size: 15px; font-weight: 400; color: #141d1c;
  line-height: 1.35; overflow-wrap: break-word;
}
/* Línea sin rótulo (una nota, un total): a lo ancho de la rejilla. */
.cr-data .cr-sect > .cr-row:not(:has(.cr-k)),
.cr-data .cr-sect-body > .cr-row:not(:has(.cr-k)) {
  grid-column: 1 / -1;
  background: #fbfcfb;
}

/* ── El sello de emisión y el copiar al clic ──────────────────────── */
.cr-emision {
  margin-top: 5px;
  font-size: 13px;
  color: #9aa3a1;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}
.cr-data > .cr-emision { margin: 0 0 12px; }

.cr-data .cr-row,
.mtc-dato {
  position: relative;
  cursor: copy;
  transition: background var(--t-fast);
}
.cr-data .cr-row:hover,
.mtc-dato:hover { background: #f7f9f8; }
.cr-data .cr-row.is-copiado::after,
.mtc-dato.is-copiado::after {
  content: 'Copiado';
  position: absolute; top: 8px; right: 10px;
  background: var(--c-surface-dark); color: #ffffff;
  font-size: 13px; letter-spacing: .8px;
  padding: 3px 9px; border-radius: 999px;
}
/* Las líneas sin rótulo no son un dato que se copie. */
.cr-data .cr-row:not(:has(.cr-k)) { cursor: default; }
.cr-data .cr-row:not(:has(.cr-k)):hover { background: #fbfcfb; }

/* ============================================================
   LA FICHA EN EL MÓVIL

   El móvil tenía su propia maqueta anterior a la rejilla: etiqueta y dato
   en dos columnas, con la etiqueta atada a una sola línea (`nowrap`) y a
   poco más de la mitad del ancho. En una pantalla estrecha eso recorta
   —«FECHA DE EXPEDICIÓN», «EMITIDO EN» y los valores largos se salían del
   cuadro— y el cliente no llega a ver el dato entero.

   Aquí el móvil usa la MISMA ficha que el escritorio: cada dato en su
   celda, rótulo arriba y valor debajo, dos por fila si caben y una si no.
   Nada se recorta porque nada tiene ancho fijo.
============================================================ */
@media (max-width: 720px) {
  .cr-data .cr-sect:has(> .cr-row),
  .cr-data .cr-sect-body:not(:has(> .cr-record)),
  .cr-data .cr-record:has(> .cr-row) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    column-gap: 1px;
    gap: 1px;
    background: #e6e9e8;
    border: 1px solid #e6e9e8;
    border-radius: 12px;
    overflow: hidden;
  }
  .cr-data .cr-sect > .cr-row,
  .cr-data .cr-sect-body > .cr-row,
  .cr-data .cr-record > .cr-row {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 9px 12px !important;
    background: #ffffff;
    border-bottom: none;
  }
  .cr-data .cr-row > .cr-k {
    display: block;
    white-space: normal !important;
    overflow-wrap: anywhere;
    font-size: 13px;
    letter-spacing: .6px;
    line-height: 1.45;
    padding: 0 !important;
    border-bottom: none !important;
  }
  .cr-data .cr-row > .cr-v {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    padding: 0 !important;
    border-bottom: none !important;
  }
  .cr-data .cr-sect > .cr-row:not(:has(.cr-k)),
  .cr-data .cr-sect-body > .cr-row:not(:has(.cr-k)) { grid-column: 1 / -1; }

  /* Membrete y sello: el nombre puede ser largo, que baje de línea. */
  .cr-data .cr-head { gap: 10px; }
  .cr-data .cr-nombre { font-size: 17px; overflow-wrap: anywhere; }
  .cr-data .cr-sub, .cr-emision { font-size: 13px; }

  /* La licencia, igual: celdas más estrechas antes que recortadas. */
  .mtc { padding: 14px 12px 16px; }
  .mtc-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .mtc-dato strong { overflow-wrap: anywhere; }
  .mtc-nombre { font-size: 17px; overflow-wrap: anywhere; }

  /* El nombre del documento se cortaba con puntos suspensivos. */
  .cr-docitem { flex-wrap: wrap; }
  .cr-docitem-nom { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* ============================================================
   REPORTE COMPLETO — aviso de que está en camino

   No se esconde lo que aún no está: se enseña. La lista entera de lo
   que traerá el reporte es el mejor argumento de venta que tiene la
   plataforma, así que ocupa el panel del resultado con el mismo aire
   que una ficha de verdad.
============================================================ */
/* Todo en blanco y con aire: el gris de fondo y las celdas pegadas hacían
   un bloque apretado. Aquí manda el espacio —nada toca el borde ni a la
   línea de al lado— y lo único con color es la línea de marca. */
.rep-espera { padding: 30px 36px 24px; background: #ffffff; }

.rep-espera-hero { background: transparent; padding: 0; overflow: visible; }
.rep-espera-chip {
  display: inline-flex; align-items: center; gap: 9px;
  color: #ffffff; background: var(--c-surface-dark);
  border: none; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 7px 15px;
}
.rep-espera-pulso {
  width: 7px; height: 7px; border-radius: 50%;
  background: #8fc72e;
  animation: rep-pulso 1.8s ease-in-out infinite;
}
@keyframes rep-pulso {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}
.rep-espera-titulo {
  margin: 16px 0 0;
  font-size: 23px; font-weight: 700; color: #141d1c; letter-spacing: .1px;
  line-height: 1.2;
}
.rep-espera-cifra {
  display: flex; align-items: baseline; gap: 10px;
  margin: 8px 0 0;
}
.rep-espera-num {
  font-size: 27px; font-weight: 400; line-height: 1.1;
  color: #141d1c;
  font-variant-numeric: tabular-nums;
}
.rep-espera-cifra-txt { font-size: 15px; color: #7c8785; }

/* La línea de marca: los cuatro colores de la casa, llenándose. */
.rep-espera-barra {
  height: 4px; margin-top: 16px;
  background: #f1f3f2; border-radius: 999px; overflow: hidden;
}
.rep-espera-barra span {
  display: block; height: 100%; width: 100%;
  border-radius: 999px;
  background: var(--accent-gradient);
  transform-origin: left center;
  animation: rep-barra 3.2s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes rep-barra {
  0%   { transform: scaleX(0);   opacity: 1; }
  55%  { transform: scaleX(1);   opacity: 1; }
  85%  { transform: scaleX(1);   opacity: .15; }
  100% { transform: scaleX(0);   opacity: .15; }
}

.rep-espera-texto {
  margin: 18px 0 0; max-width: 58ch;
  font-size: 15px; line-height: 1.6; color: #5d6866;
}

/* Dos columnas separadas de verdad, cada línea con su filete fino. Sin
   fondo, sin caja: lo que ordena es la retícula, no los bordes. */
.rep-espera-lista {
  list-style: none;
  margin: 14px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  column-gap: 36px;
  row-gap: 0;
  background: transparent; border: none; border-radius: 0;
}
.rep-espera-lista li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #f1f3f2;
  font-size: 15px; color: #141d1c; line-height: 1.4;
  background: transparent;
  opacity: 0;
  animation: rep-entra .34s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 26ms + 120ms);
}
@keyframes rep-entra {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
.rep-espera-ico {
  flex-shrink: 0; display: inline-flex;
  width: 15px; height: 15px;
  color: #8fc72e;
  transform: translateY(2px);
}
.rep-espera-ico svg { width: 100%; height: 100%; }
.rep-espera-ico polyline {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: rep-traza .4s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 26ms + 250ms);
}
@keyframes rep-traza { to { stroke-dashoffset: 0; } }

.rep-espera-pie {
  margin: 12px 0 0;
  font-size: 13px; color: #9aa3a1; line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .rep-espera-lista li,
  .rep-espera-ico polyline { animation: none; opacity: 1; stroke-dashoffset: 0; }
  .rep-espera-pulso { animation: none; }
  .rep-espera-barra span { animation: none; transform: none; }
}

@media (max-width: 720px) {
  .rep-espera { padding: 18px 16px 14px; }
  .rep-espera-titulo { font-size: 18px; margin-top: 12px; }
  .rep-espera-cifra { margin-top: 4px; }
  .rep-espera-num { font-size: 22px; }
  .rep-espera-cifra-txt { font-size: 13px; }
  .rep-espera-barra { margin-top: 12px; }
  /* La frase de introducción se va: en el móvil el sitio es para la lista,
     y el distintivo con el título ya dicen lo mismo. */
  .rep-espera-texto { display: none; }
  /* Dos columnas también en el móvil: en una sola, veintiún renglones
     obligaban a arrastrar el cuadro entero. */
  .rep-espera-lista { grid-template-columns: 1fr 1fr; column-gap: 14px; margin-top: 14px; }
  .rep-espera-lista li { padding: 5px 0; font-size: 13px; gap: 7px; line-height: 1.35; }
  .rep-espera-ico { width: 12px; height: 12px; }
  .rep-espera-pie { margin-top: 10px; font-size: 13px; }
  .rep-modal { padding: 10px; }
  .rep-modal-caja { max-height: calc(100vh - 20px); }
}

/* ── Reporte Completo: la pantalla flotante ──────────────────────────
   Sale al pulsar Consultar. Misma ficha que el panel, sobre un fondo
   oscurecido y con una sola salida: «Entendido». */
.rep-modal { position: fixed; inset: 0; z-index: 9995; display: flex; align-items: center; justify-content: center; padding: 16px; }
.rep-modal-fondo {
  position: absolute; inset: 0;
  background: rgba(20, 29, 28, .62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .28s ease;
}
.rep-modal.is-abierto .rep-modal-fondo { opacity: 1; }
.rep-modal-caja {
  position: relative;
  width: min(900px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  /* Sin barra a la vista: en pantallas cortas el cuadro sigue pudiéndose
     arrastrar, pero no enseña el raíl. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: #ffffff;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition: opacity .3s ease, transform .34s cubic-bezier(.16, 1, .3, 1);
}
.rep-modal.is-abierto .rep-modal-caja { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rep-modal-fondo, .rep-modal-caja { transition: none; opacity: 1; transform: none; }
}
.rep-modal-cerrar {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border); border-radius: 999px;
  background: #ffffff; color: #141d1c; cursor: pointer;
}
.rep-modal-cerrar svg { width: 17px; height: 17px; }
.rep-modal-cerrar:hover { background: #f1f3f3; }
.rep-modal-pie { padding: 0 36px 22px; display: flex; justify-content: flex-end; }
.rep-modal-ok {
  font: inherit; font-size: 15px; letter-spacing: .4px;
  padding: 11px 26px; border: none; border-radius: 999px;
  background: var(--c-surface-dark); color: #ffffff; cursor: pointer;
  transition: background var(--t-fast);
}
.rep-modal-ok:hover { background: #2a3b38; }
.rep-modal-caja::-webkit-scrollbar { width: 0; height: 0; }
.rep-modal .rep-espera { padding-top: 30px; }
@media (max-width: 720px) {
  .rep-modal { padding: 12px; }
  .rep-modal-caja { max-height: 92vh; }
  .rep-modal-pie { padding: 0 18px 20px; }
  .rep-modal-ok { width: 100%; }
}

/* ============================================================
   DUPLICADO CITV — el aviso del tiempo de emisión
   ------------------------------------------------------------
   Comparte cuadro con el modal del Reporte Completo (.rep-modal):
   aquí solo va el contenido. Membrete oscuro, la cifra de la espera
   como protagonista y la barra cuatricolor de siempre.
============================================================ */
.citv-membrete {
  background: var(--c-surface-dark, #141d1c);
  color: #ffffff;
  padding: 30px 36px 0;
  border-radius: 14px 14px 0 0;
}
.citv-chip {
  display: inline-block;
  font-size: 13px;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35);
}
.citv-titulo {
  margin: 12px 0 4px;
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
}
/* La sigla, explicada. La usa todo el rubro y casi nadie fuera de él. */
.citv-sigla {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 400;
  color: rgba(255, 255, 255, .82);
}
.citv-linea {
  display: flex;
  height: 5px;
  border-radius: 2px 2px 0 0;
  overflow: hidden;
}
.citv-linea span { flex: 1; }
.citv-linea span:nth-child(1) { background: #00bcd4; }
.citv-linea span:nth-child(2) { background: #8fc72e; }
.citv-linea span:nth-child(3) { background: #ffb020; }
.citv-linea span:nth-child(4) { background: #e53935; }

.citv-cuerpo { padding: 24px 36px 4px; }

/* Lo que el cliente vino a saber: cuánto tarda. Va primero y grande. */
.citv-tiempo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
}
.citv-tiempo-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 999px;
  background: var(--c-surface-dark);
  color: #ffffff;
}
.citv-tiempo-ico svg { width: 24px; height: 24px; }
.citv-tiempo-cifra {
  display: block;
  font-size: 21px;
  font-weight: 700;
  color: var(--c-primary);
}
.citv-tiempo-txt {
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: var(--c-primary);
}
.citv-texto {
  margin: 18px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-primary);
}
.citv-puntos {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.citv-puntos li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--c-primary);
}
/* La marca de cada punto, en verde institucional: dibujada con dos
   trazos para no cargar un SVG por línea. */
.citv-puntos li::before,
.citv-puntos li::after {
  content: '';
  position: absolute;
  background: #8fc72e;
  border-radius: 1px;
}
.citv-puntos li::before {
  left: 4px; top: 12px;
  width: 6px; height: 2px;
  transform: rotate(45deg);
}
.citv-puntos li::after {
  left: 7px; top: 10px;
  width: 11px; height: 2px;
  transform: rotate(-50deg);
}

.citv-modal .rep-modal-caja { width: min(560px, 100%); }

@media (max-width: 720px) {
  .citv-membrete { padding: 24px 20px 0; }
  .citv-cuerpo   { padding: 20px 20px 4px; }
  .citv-titulo   { font-size: 23px; }
}

/* El segundo paso del aviso: la placa. */
.citv-label {
  display: block;
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-primary);
}
.citv-campo { position: relative; }
.citv-campo-ico {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: #141d1c;
  pointer-events: none;
}
.citv-campo-ico svg { width: 21px; height: 21px; }
.citv-input {
  width: 100%;
  padding-left: 46px !important;
  font-size: 19px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.citv-error {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: #e53935;
}
.citv-costo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  font-size: 17px;
  color: var(--c-primary);
}
.citv-costo strong { font-size: 19px; font-weight: 700; }

/* El acuse: se envió. */
.citv-listo {
  padding: 34px 36px 4px;
  text-align: center;
}
.citv-listo-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  border-radius: 999px;
  background: #8fc72e;
  color: #141d1c;
}
.citv-listo-ico svg { width: 32px; height: 32px; }
.citv-listo-titulo {
  margin: 16px 0 6px;
  font-size: 24px;
  font-weight: 700;
  color: var(--c-primary);
}
.citv-listo-placa {
  margin: 0 0 14px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--c-primary);
}
.citv-listo-txt {
  margin: 0 auto;
  max-width: 400px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-primary);
}
.citv-listo-cobro {
  margin: 14px 0 0;
  font-size: 16px;
  color: var(--c-primary);
}
@media (max-width: 720px) {
  .citv-listo { padding: 28px 20px 4px; }
}

/* El logotipo que sube el cliente para su certificado. */
.citv-label-logo { margin-top: 18px; }
.citv-opcional { font-weight: 400; }
.citv-ayuda {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-primary);
}
.citv-logo-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.citv-logo-btn {
  font: inherit;
  font-size: 16px;
  padding: 10px 18px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: #ffffff;
  color: var(--c-primary);
  cursor: pointer;
  transition: background var(--t-fast);
}
.citv-logo-btn:hover { background: #f1f3f3; }
/* La previa va sobre un tablero de cuadros: es la forma de ver que el
   fondo blanco se fue de verdad y no quedó pegado al dibujo. */
.citv-logo-previa {
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #e9ecec 25%, transparent 25%, transparent 75%, #e9ecec 75%),
    linear-gradient(45deg, #e9ecec 25%, transparent 25%, transparent 75%, #e9ecec 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
  overflow: hidden;
}
.citv-logo-previa canvas { max-width: 100%; max-height: 100%; }
.citv-logo-nombre {
  font-size: 15px;
  color: var(--c-primary);
  word-break: break-all;
}

/* ── Duplicado CITV: la espera y el papel ────────────────────────────
   El tercer y el cuarto paso del mismo cuadro. Mientras se consulta, la
   rueda de carga de la plataforma; cuando llega, el certificado.

   En la vista previa el cuadro deja de ser un panel con membrete y pasa
   a ser el papel: sin franja oscura arriba, sin margen a los lados y sin
   borde propio. El ancho lo pone el guion, que lo iguala al de la hoja
   ya escalada, así que no queda blanco por ningún lado. */
.citv-cargando { padding: 48px 24px; min-height: 260px; }

.citv-modal.is-previa .rep-modal-caja {
  /* El ancho exacto lo fija citv-aviso.js; aquí solo se le quita el tope
     del formulario y se recorta lo que asome por las esquinas —la hoja
     es cuadrada y el cuadro, redondeado. */
  width: auto;
  max-width: calc(100vw - 32px);
  overflow: hidden;
}

.citv-aviso-previa { display: block; }

.citv-nota {
  margin: 12px 14px;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-primary);
}

/* El marco recorta lo que sobra: el <iframe> se pinta a 794 px —los
   210 mm de la hoja— y se encoge con `transform`, que es lo único que no
   deforma las tablas del certificado. El alto lo pone el guion,
   calculado con la misma escala. */
.citv-previa {
  position: relative;
  overflow: hidden;
  background: #ffffff;
}
.citv-hoja {
  position: absolute;
  top: 0; left: 0;
  border: 0;
  transform-origin: top left;
}

/* El pie, debajo del papel: centrado y pegado, que el cuadro ahora mide
   lo que mide la hoja y los 36 px del formulario aquí sobran. */
.citv-modal.is-previa .rep-modal-pie {
  padding: 12px 14px;
  justify-content: center;
}

/* El botón de descarga lleva icono: hay que alinearlo con su texto. */
.citv-modal .rep-modal-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.citv-modal .rep-modal-ok svg { width: 19px; height: 19px; }

/* ── Instalar la app ─────────────────────────────────────────────────
   Un botón redondo justo encima del de WhatsApp: mismo tamaño, mismo
   margen y misma columna, para que se lean como dos botones de la misma
   fila y no como un adorno suelto.

   Oscuro y no verde a propósito. El de WhatsApp lleva su verde porque
   identifica el canal; si este llevara el verde de marca, los dos
   círculos de colores en la misma esquina competirían y ninguno se
   entendería. Plano, sin sombra, como todo aquí. */
.inst-fab {
  position: fixed;
  right: 24px;
  /* 80 del de WhatsApp + sus 64 de alto + 14 de aire. */
  bottom: 158px;
  z-index: 449;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: var(--c-surface-dark);
  color: #ffffff;
  cursor: pointer;
  transition: background var(--t-fast);
}
.inst-fab:hover { background: #2a3b38; }
.inst-fab svg { width: 26px; height: 26px; }
.inst-fab[hidden] { display: none; }

/* En la pantalla de acceso el modal ocupa todo; el botón sube con el de
   WhatsApp para no quedarse debajo (ver auth.css). */
body.auth-locked .inst-fab { z-index: 501; }

/* En móvil se copian los valores del de WhatsApp y se le suma su alto:
   ancho, margen derecho y la cuenta del `bottom` con la barra de gestos
   incluida. Copiados y no aproximados a propósito — si un día se mueve
   aquel, este tiene que moverse con él o se descuelgan.
   Ver el porqué de los 44px en css/components.css. */
@media (max-width: 768px) {
  .inst-fab {
    right: 16px;
    bottom: calc(44px + 59px + 14px + env(safe-area-inset-bottom));
    width: 59px;
    height: 59px;
  }
  .inst-fab svg { width: 24px; height: 24px; }
}

/* La hoja del iPhone, que es la única vía que deja Safari. Sin membrete
   ni barra de colores: son dos frases y dos iconos, y cuanto menos haya
   alrededor, antes se hace. */
.inst-modal .rep-modal-caja { width: min(400px, 100%); }
.inst-hoja { padding: 34px 28px 6px; }
.inst-titulo {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 700;
  color: var(--c-primary);
}
.inst-pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: paso;
}
.inst-pasos li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--c-primary);
}
.inst-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 999px;
  background: #f1f3f3;
  color: #141d1c;
}
.inst-ico svg { width: 21px; height: 21px; }

/* ── Reporte Completo: el veredicto ──────────────────────────────────
   Va encima de la ficha de datos: es la conclusión, y una conclusión al
   final de veinte apartados no la lee nadie. Tres cajas, el semáforo de
   la marca y ni una sombra. */
.rep-veredicto {
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ver-cabecera { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ver-rotulo {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 700;
}
.ver-nivel { font-size: 21px; font-weight: 700; }
/* El nivel manda el color del titular. Los mismos tres del medidor del
   PDF: verde bajo, ámbar medio, rojo alto. */
.ver-nivel-bajo  .ver-nivel { color: #8fc72e; }
.ver-nivel-medio .ver-nivel { color: #ffb020; }
.ver-nivel-alto  .ver-nivel { color: #e53935; }

.ver-cajas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4px;
}
.ver-caja {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f4f6f4;
  /* El estado se lee por el color del valor, no por el fondo: tres
     cajas de color fuerte una al lado de otra no dejan mirar ninguna. */
}
.ver-k { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.ver-v { font-size: 20px; font-weight: 700; color: var(--c-primary); }
.ver-d { font-size: 15px; color: var(--c-muted); line-height: 1.4; }
.ver-ok   .ver-v { color: #6f9c24; }
.ver-mal  .ver-v { color: #e53935; }
.ver-duda .ver-v { color: #c98700; }

.ver-nota {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-primary);
  border-left: 2px solid #ffb020;
  padding-left: 12px;
}

@media (max-width: 560px) {
  .rep-veredicto { padding: 16px; }
  .ver-cajas { grid-template-columns: 1fr; }
}

/* ── Sitio para los botones flotantes ────────────────────────────────
   El de WhatsApp y el de instalar viven fijos en la esquina inferior
   derecha. El resultado de una consulta termina justo ahí —el botón de
   descargar el PDF y la tarjeta del archivo van alineados a la derecha—
   y quedaban debajo de ellos: se veían tapados y no se podían pulsar.

   Se le da al panel un colchón abajo del alto de esa columna, para que
   siempre se pueda desplazar y sacarlos de debajo. Es preferible a
   moverles el margen a los botones, que los descolocaría también cuando
   no hay ningún flotante a la vista. */
.result-panel { padding-bottom: 118px; }

/* El estado «sin determinar» del veredicto: ni verde ni rojo. Que no se
   lea como una nota al pie, pero tampoco como una alarma. */
.ver-nivel-sin-determinar .ver-nivel { color: var(--c-muted); }

@media (max-width: 768px) {
  .result-panel { padding-bottom: 132px; }
}

/* ── Reporte Completo: la ficha en pantalla ──────────────────────────
   Iba pegada al borde de la tarjeta —seis píxeles— y con la columna del
   valor estirada a novecientos: la etiqueta en un extremo, el dato en el
   otro, y el ojo cruzando la pantalla para juntarlos.

   Aire por dentro, y el par etiqueta/valor a una distancia que se lee de
   una sola mirada. */
.rep-ficha {
  padding: 4px 26px 8px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.rep-bloque { display: flex; flex-direction: column; gap: 12px; }
.rep-titulo {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* El resumen: celdas iguales, para que se barran de un vistazo. */
.rep-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: 4px;
}
.res-celda {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f4f6f4;
  min-width: 0;
}
.res-k {
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.res-v {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-primary);
  word-break: break-word;
}
/* La fecha debajo del estado. SOAT y revisión son los dos datos que más
   se miran, y el estado sin su fecha obliga a bajar al detalle. */
.res-sub { font-size: 15px; color: var(--c-muted); }

/* El detalle: dos columnas y un filete. La del valor NO se estira: a
   partir de cierto ancho, separar más el dato de su etiqueta no ayuda a
   leer, estorba. */
.rep-detalle { margin: 0; }
.det-fila {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 4px 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-border);
  align-items: baseline;
}
.det-fila:last-child { border-bottom: none; }
.det-k {
  margin: 0;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.det-v {
  margin: 0;
  font-size: 17px;
  color: var(--c-primary);
  max-width: 62ch;
  word-break: break-word;
}

/* El veredicto, con el mismo margen lateral que la ficha: antes uno iba
   a 6 px del borde y la otra a 26, y se veía torcido. */
.rep-veredicto { margin: 4px 26px 22px; }

@media (max-width: 720px) {
  .rep-ficha { padding: 4px 16px 8px; gap: 22px; }
  .rep-veredicto { margin: 4px 16px 18px; }
  .det-fila { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
}

/* Texto y tablas extraídos del PDF del Reporte Completo. */
.rep-pdf-datos {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 26px 30px;
  color: var(--c-primary);
}
.rep-pdf-datos-head { margin: 16px 0 4px; padding-bottom: 16px; border-bottom: 1px solid var(--c-border); }
.rep-pdf-datos-head h3 { margin: 5px 0 0; font-size: 23px; line-height: 1.25; }
.rep-pdf-eyebrow { margin: 0; color: var(--c-muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.rep-pdf-placa { display: flex; align-items: center; gap: 8px; margin: 9px 0 0; color: var(--c-muted); font-size: 14px; }
.rep-pdf-placa strong { color: var(--c-primary); }
.rep-pdf-resumen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: #f8faf8;
}
.rep-pdf-indicador { display: flex; min-width: 0; min-height: 62px; flex-direction: column; justify-content: space-between; gap: 5px; padding: 10px 11px; border: 1px solid #c8e4ce; border-radius: 9px; background: #f5faf5; }
.rep-pdf-indicador--ok { border-color: #c8e4ce; background: #f5faf5; }
.rep-pdf-indicador--issue { border-color: #efcaca; background: #fff5f4; }
.rep-pdf-indicador span { color: var(--c-muted); font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
.rep-pdf-indicador strong { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; word-break: normal; }
.rep-pdf-indicador--ok strong { color: #287a3f; }
.rep-pdf-indicador--issue strong { color: #b72f2f; }
.rep-pdf-seccion { min-width: 0; padding: 19px 21px 20px; border: 1px solid var(--c-border); border-radius: 14px; background: #fff; }
.rep-pdf-seccion > h4 { margin: 0 0 13px; padding: 2px 0 11px 12px; border-bottom: 1px solid var(--c-border); border-left: 3px solid #39a85a; font-size: 15px; line-height: 1.4; letter-spacing: .045em; }
.rep-pdf-seccion--ok > h4 { border-left-color: #39a85a; }
.rep-pdf-seccion--issue > h4 { border-left-color: #d43c3c; }
.rep-pdf-kv { margin: 0 0 6px; }
.rep-pdf-kv > div { display: grid; grid-template-columns: minmax(145px, 30%) minmax(0, 1fr); gap: 8px 16px; padding: 11px 13px; border-radius: 8px; background: #f7f9f7; }
.rep-pdf-kv dt { color: var(--c-muted); font-size: 12px; line-height: 1.45; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.rep-pdf-kv dd { margin: 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.rep-pdf-tabla-wrap { overflow-x: auto; margin: 12px 0 16px; border: 1px solid var(--c-border); border-radius: 9px; }
.rep-pdf-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.rep-pdf-tabla--papeletas { min-width: 720px; }
.rep-pdf-tabla--papeletas th:nth-child(1), .rep-pdf-tabla--papeletas td:nth-child(1) { width: 19%; }
.rep-pdf-tabla--papeletas th:nth-child(2), .rep-pdf-tabla--papeletas td:nth-child(2) { width: 14%; white-space: nowrap; }
.rep-pdf-tabla--papeletas th:nth-child(3), .rep-pdf-tabla--papeletas td:nth-child(3) { width: 29%; }
.rep-pdf-tabla--papeletas th:nth-child(4), .rep-pdf-tabla--papeletas td:nth-child(4) { width: 19%; }
.rep-pdf-tabla--papeletas th:nth-child(5), .rep-pdf-tabla--papeletas td:nth-child(5) { width: 19%; white-space: nowrap; }
.rep-pdf-tabla td, .rep-pdf-tabla th { padding: 9px 10px; border-right: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); vertical-align: top; line-height: 1.4; overflow-wrap: anywhere; }
.rep-pdf-tabla th { background: #f2f5f2; color: var(--c-primary); font-size: 11px; font-weight: 700; text-align: left; }
.rep-pdf-tabla td:last-child, .rep-pdf-tabla th:last-child { border-right: 0; }
.rep-pdf-tabla tr:last-child td { border-bottom: 0; }
.rep-pdf-sub { margin: 16px 0 8px; padding: 9px 11px; border-radius: 7px; background: #f4f6f4; font-size: 13px; line-height: 1.45; }
.rep-pdf-texto { margin: 9px 0; padding-left: 12px; border-left: 2px solid #e1e7df; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.rep-pdf-aviso { margin: 16px 26px 0; padding: 12px 14px; border-left: 3px solid #d59b2a; background: #fff9e9; color: #604b1f; line-height: 1.45; }
@media (max-width: 720px) {
  .rep-pdf-datos { gap: 11px; padding: 4px 16px 24px; }
  .rep-pdf-datos-head { margin-top: 12px; padding-bottom: 13px; }
  .rep-pdf-datos-head h3 { font-size: 20px; }
  .rep-pdf-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 9px; }
  .rep-pdf-indicador { min-height: 58px; padding: 9px; }
  .rep-pdf-indicador strong { font-size: 14px; }
  .rep-pdf-seccion { padding: 15px 13px 16px; border-radius: 11px; }
  .rep-pdf-kv > div { grid-template-columns: 1fr; gap: 4px; padding: 10px 11px; }
  .rep-pdf-tabla--papeletas { min-width: 720px; }
  .rep-pdf-aviso { margin-right: 16px; margin-left: 16px; }
}
@media (max-width: 360px) {
  .rep-pdf-resumen { grid-template-columns: minmax(0, 1fr); }
}