/* ============================================================================
   RGL OS — CAPA DE DISEÑO (Diseño Fase 1, 19 jul 2026)
   ----------------------------------------------------------------------------
   Fuente de la verdad: docs/modulos/Diseño/stitch/DESIGN-RGL.md (RGL v0.5).
   Esta hoja se carga DESPUÉS de app.css y solo re-viste: no cambia estructura
   ni comportamiento. Para revertir el rediseño completo basta con quitar la
   línea <link ... rgl-design.css> de public/index.php (un paso, sin tocar
   datos ni lógica).

   Regla del encargo: SOLO front, usabilidad y diseño.
   ========================================================================== */

/* ============================================================ 1 · TIPOGRAFÍAS
   Locales de verdad (woff2 en public/fonts/), jamás CDN: el CRM tiene que
   verse igual sin depender de terceros. Cura la clase del bug "Plus Jakarta
   Sans": estaba declarada en app.css y nunca se cargó.
   Ambas son fuentes variables → un archivo cubre todo el rango de pesos.     */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/dmsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/dmsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================ 2 · TOKENS
   Los tokens del design system, tal cual el frontmatter de DESIGN-RGL.md.
   Abajo se REMAPEAN las variables viejas de la maqueta v38 a estos tokens:
   así toda la app hereda la paleta nueva sin tocar app.css línea por línea.  */

:root {
  /* — marca — */
  --rgl-navy-darkest: #06101F;
  --rgl-indigo-100:   #2E54C0;
  --rgl-indigo-200:   #1D3FA8;
  --rgl-indigo-300:   #142C7A;   /* índigo institucional: acciones y marca */
  --rgl-indigo-400:   #0D1A4F;
  --rgl-primary:      #001759;
  --rgl-pewter-100:   #C2C4C8;
  --rgl-pewter-200:   #9E9FA5;
  --rgl-pewter-300:   #5D5F6A;
  --rgl-pewter-400:   #2E2F44;

  /* — azules PLANOS (✅ Paula 10-ago noche, vista antes-después §4, «okey
     propuesta»): mueren los 3 degradados azules — botón primario, cabecera
     oscura (app.css) y sidebar quedan con su color de PARTIDA plano. Los
     nombres --rgl-grad-* se CONSERVAN para no tocar cada sitio que los
     consume: lo que cambió es el valor. El pewter sigue siendo degradado
     porque es SOLO del isotipo (no es un azul de interfaz). — */
  --rgl-grad-sidebar: #06101F;   /* antes: linear-gradient(180deg, #06101F, #0D1A4F) */
  --rgl-grad-btn:     #001759;   /* antes: linear-gradient(90deg,  #001759, #0D1A4F) */
  --rgl-grad-indigo:  #2E54C0;   /* antes: linear-gradient(135deg, #2E54C0, #0D1A4F) — sin usos en CSS hoy; plano por la misma firma */
  --rgl-grad-pewter:  linear-gradient(135deg, #C2C4C8 0%, #5D5F6A 100%); /* SOLO isotipo */

  /* — señales funcionales (el color nunca decora) — */
  --rgl-urgency-high:        #DC2626;   /* rojo FRANCO (Paula 19 jul: se confundía con el naranjo; #D92D20→#DC2626). Como texto sobre blanco = 4,83:1 (kpi cero-alarma) */
  --rgl-urgency-high-text:   #B42318;   /* texto rojo sobre claro (AA — #B42318 sobre #FEF3F2 = 6,05:1) */
  --rgl-urgency-medium-fill: #F59E0B;   /* ÁMBAR más cálido y claro (Paula 19 jul: separarlo del rojo a primera vista; #F79009→#F59E0B). Solo rellenos y franjas */
  --rgl-urgency-medium-text: #B54708;   /* texto sobre claro (AA — #B54708 sobre #FFF6E8 = 5,07:1) */
  --rgl-success-green:       #15803D;   /* SOLO lo objetivamente bueno */
  --rgl-info-blue:           #0369A1;   /* informa, no alarma */

  /* — superficies y texto — */
  --rgl-bg-page:       #F2F4F7;
  --rgl-surface:       #FFFFFF;
  --rgl-border-light:  #F0F1F3;
  --rgl-border-medium: #E8EAEE;
  --rgl-on-surface:    #191C1E;
  --rgl-on-variant:    #454651;

  /* — formas y ritmo (base 8px) — */
  --rgl-r-sm: 4px;
  --rgl-r:    8px;
  --rgl-r-lg: 16px;
  --rgl-unit: 8px;
  --rgl-gutter: 16px;
  --rgl-container-pad: 24px;
  --rgl-sidebar-w: 240px;
  --rgl-row-h: 56px;
  --rgl-min-font: 12px;   /* piso duro: se trunca, no se encoge */

  /* ---- REMAPEO de la maqueta v38 → tokens RGL ---------------------------
     (misma variable, valor nuevo: la app entera cambia de piel de una vez) */
  --sb-bg: var(--rgl-navy-darkest);
  --sb-w: var(--rgl-sidebar-w);
  --sb-text:   #C7CBD6;   /* inactivo con contraste PLENO, jamás gris tenue */
  --sb-text-h: #FFFFFF;
  --sb-text-a: #FFFFFF;
  --sb-ih: rgba(255,255,255,.08);
  --sb-ia: rgba(46,84,192,.28);
  --sb-ab: #2E54C0;
  --sb-sep: rgba(255,255,255,.10);

  --content-bg: var(--rgl-bg-page);
  --card-bg:    var(--rgl-surface);
  --card-bd:    var(--rgl-border-medium);
  --card-sh:    0 1px 2px rgba(6,16,31,.04);

  --accent:      var(--rgl-indigo-300);
  --accent-h:    var(--rgl-indigo-400);
  --accent-soft: #EEF1FA;

  --ok:   var(--rgl-success-green);
  --ok-bg: #ECFDF3; --ok-bd: #C4E9D2;
  --warn: var(--rgl-urgency-medium-text);
  --warn-bg: #FFF6E8; --warn-bd: #FBDBA7;
  --err:  var(--rgl-urgency-high);
  --err-bg: #FEF3F2; --err-bd: #FBCFCB;

  --text-primary:   var(--rgl-on-surface);
  --text-secondary: #33343D;
  --text-muted:     var(--rgl-on-variant);
  --text-faint:     var(--rgl-pewter-300);   /* sube a AA: antes #94A3B8 no pasaba */

  --r:    var(--rgl-r);
  --r-sm: var(--rgl-r-sm);
  --r-lg: var(--rgl-r-lg);
}

/* ============================================================ 3 · TIPOGRAFÍA
   Dos familias: Outfit para marca y titulares; DM Sans para TODO el dato
   operativo (se lee mejor en tablas densas).                                */

body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--content-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3,
.page-header h1, .section-title, .modal-title, .kpi-val, .adm-kpi-val,
.greeting-main, .ficha-nombre, .rgl-logo-word, .rgl-band-title,
.stub-title, .block-title, .tab-count, .mki-val, .t-group-h, .cola-gh {
  font-family: 'Outfit', system-ui, sans-serif;
}

.page-header h1 { font-size: 24px; font-weight: 800; letter-spacing: -.3px; }
.page-sub { font-size: 13px; color: var(--text-muted); }

/* Piso de 12px — nada baja de ahí (regla 12 del encargo).
   Se listan las clases que sí se usan en lo tocado; si no cabe, se trunca. */
.page-sub, .kpi-label, .kpi-sub, .d-meta, .d-tag, .section-sub, .llave-pol,
.th-sub, .chip, .cola-rule, .cola-gh, .t-rule, .t-tag, .t-group-h, .tab-lbl,
.tbl-foot, .notif-time, .notif-txt, .u-role, .u-name, .nav-section,
.cli-rut, .pol-num, .dias-badge, .cob-estado, .urg-chip, .prod-chip,
.resp-chip, .tipo-chip, .estado-chip, .alerta-chip, .sin-estado, .eq-s,
.cli-doc-meta, .ops-doc-fecha, .conn-meta, .rgl-sello, .rgl-badge,
.pol-tbl th, .cli-tbl th, .fact-tbl th, .company-tbl th, .t-time, .eq-time {
  font-size: var(--rgl-min-font);
}
.text-muted { color: var(--text-muted); }

/* ============================================================ 4 · SIDEBAR
   Navy con degradado vertical, SIN iconos (solo texto), inactivos legibles. */

#sidebar {
  width: var(--rgl-sidebar-w);
  background: var(--rgl-grad-sidebar);
  border-right: 1px solid rgba(255,255,255,.06);
}

/* El logo SIEMPRE completo: isotipo + "RGL Seguros". Nunca la "R" sola. */
.sb-logo {
  padding: 20px 16px 18px;
  border-bottom: 1px solid var(--sb-sep);
  display: flex; align-items: center; gap: 10px;
}
.rgl-logo { display: flex; align-items: center; gap: 10px; }
.rgl-logo-mark { flex-shrink: 0; display: block; }
.rgl-logo-word {
  font-size: 20px; font-weight: 700; letter-spacing: .5px;
  color: #FFFFFF; line-height: 1.1; white-space: nowrap;
}
.rgl-logo-word .rgl-logo-seguros { font-weight: 400; color: #C7CBD6; }

#nav-items { padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center;
  padding: 10px 12px;
  border-radius: var(--rgl-r);
  color: var(--sb-text);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .13s, color .13s;
}
.nav-item:hover { background: var(--sb-ih); color: #fff; }
.nav-item.active {
  background: var(--sb-ia); color: #fff; font-weight: 700;
  border-left-color: var(--sb-ab);
}
/* Sin iconos: la claridad manda sobre el adorno. */
.nav-item .nav-icon { display: none; }

/* Separador entre el menú operativo y el resto de los módulos. */
.nav-sep { height: 1px; background: var(--sb-sep); margin: 10px 4px; }

/* Módulo BLOQUEADO (adenda 5·5): visible pero apagado, con candado a la derecha.
   Stub honesto — se ve que existe y que aún no está. No navega, no resalta al
   hover. No es una restricción de rol (fase cero: todos ven todo). */
.nav-item-locked {
  justify-content: space-between; gap: 8px;
  color: var(--sb-text); opacity: .5; cursor: default;
}
.nav-item-locked:hover { background: none; color: var(--sb-text); }
.nav-lock-ico { display: inline-flex; align-items: center; flex: 0 0 auto; opacity: .9; }
.nav-lock-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.sb-footer {
  margin-top: auto; padding: 14px 16px;
  border-top: 1px solid var(--sb-sep);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--sb-text);
}
.sb-footer a { color: #fff; font-weight: 600; text-decoration: none; }

#contenido { background: var(--content-bg); padding: var(--rgl-container-pad); }

/* ============================================================ 5 · BOTONES
   Primario = azul PLANO #001759 (✅ Paula 10-ago, vista §4 — supera la
   Variante A con degradado del 19-jul). Hover = el otro azul del par viejo
   (#0D1A4F), también plano. Secundario = delineado. Los ESTADOS no son botones. */

.d-btn.primary, .act-sm.primary, .btn-primary, #btn-qa, .ficha-action-btn.primary,
.bci-load-btn, .admin-pw-btn, .sin-new-btn, .pm-new-btn, .rep-export-btn,
.cli-comm-nueva-btn, #login-form button {
  background: var(--rgl-grad-btn);
  color: #fff;
  border: 1px solid var(--rgl-indigo-400);
  border-radius: var(--rgl-r);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(6,16,31,.18);
}
.d-btn.primary:hover, .act-sm.primary:hover, .btn-primary:hover, #btn-qa:hover,
.ficha-action-btn.primary:hover, .bci-load-btn:hover, .admin-pw-btn:hover,
.sin-new-btn:hover, .pm-new-btn:hover, .rep-export-btn:hover,
.cli-comm-nueva-btn:hover, #login-form button:hover {
  background: var(--rgl-indigo-400);   /* #0D1A4F plano (antes: el degradado invertido) */
}

/* Secundario: delineado pewter, sin relleno de color (provisional — Paula
   sigue explorando variantes). */
.d-btn, .act-sm, .btn-ghost, .ficha-action-btn, .demo-btn {
  background: #fff;
  border: 1px solid var(--rgl-pewter-300);   /* el spec pide pewter-300 (y ≥3:1); con 200 quedaba en 2,64:1 */
  color: var(--rgl-pewter-400);
  border-radius: var(--rgl-r);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  padding: 7px 14px;
}
.d-btn:hover, .act-sm:hover, .btn-ghost:hover, .ficha-action-btn:hover, .demo-btn:hover {
  background: var(--accent-soft);
  border-color: var(--rgl-indigo-300);
  color: var(--rgl-indigo-300);
}

/* Un ESTADO del sistema jamás parece botón: texto plano, sin caja. */
.rgl-estado {
  background: none; border: none; padding: 0;
  color: var(--text-muted); font-size: 13px; font-weight: 500;
}

/* ============================================================ 6 · FILAS Y
   FRANJA DE CRITICIDAD — el borde izquierdo de 4px es "el filo del caso".
   Pinta con los valores que el código YA calcula hoy (la fuente única
   server-side llega con S3; la franja la hereda sola).                      */

.section-card {
  background: var(--rgl-surface);
  border: 1px solid var(--rgl-border-medium);
  border-radius: var(--rgl-r);
  box-shadow: var(--card-sh);
  margin-bottom: var(--rgl-gutter);
  overflow: hidden;   /* la franja de criticidad respeta la esquina redondeada */
}
.section-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--rgl-border-light);
}
.section-title {
  font-size: 12px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--rgl-pewter-300);
}

/* Fila densa de 2 líneas (~56px) — el objetivo es ver 7+ casos sin scrollear. */
.decision-item {
  min-height: var(--rgl-row-h);
  padding: 9px 18px 9px 15px;
  gap: 12px;
  border-bottom: 1px solid var(--rgl-border-light);
  border-left: 4px solid transparent;   /* la franja vive acá */
}
.decision-item:hover { background: #FAFBFD; }
.d-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.d-meta  { color: var(--text-muted); margin-top: 2px; }
.d-icon  { display: none; }   /* el emoji de fila lo reemplaza la franja */

/* Los tres cortes. Neutro = no hay urgencia, y eso también se dice. */
.crit-alta   { border-left-color: var(--rgl-urgency-high); }
.crit-media  { border-left-color: var(--rgl-urgency-medium-fill); }
.crit-neutra { border-left-color: var(--rgl-pewter-100); }

/* La tabla densa JAMÁS se corta (spec: escrolea en su caja si no cabe). Con el
   skin, DM Sans ensancha la tabla de Cobranzas ~35px sobre su contenedor y el
   botón Gestionar quedaba mordido a 1366×768 (arreglo validación F1). El
   padding horizontal baja 2px por lado para recuperar esos ~35px sin scroll. */
.pol-tbl-wrap { overflow-x: auto; }
.pol-tbl-wrap th, .pol-tbl-wrap td { padding-left: 8px; padding-right: 8px; }

/* ============================================================ 7 · LLAVE DE
   VIAJE — RUT y n° de póliza siempre a mano, área de clic ≥40px, y el copiar
   entrega el valor LIMPIO (sin puntos ni guiones) porque se pega en BCI.    */

.copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px;      /* área de clic cómoda (regla 7) */
  margin-left: 2px; padding: 0;
  background: none; border: none; cursor: pointer;
  color: var(--rgl-pewter-300);
  opacity: 1; font-size: 15px; line-height: 1;
  border-radius: var(--rgl-r-sm);
  vertical-align: middle;
  transition: background .12s, color .12s;
}
.copy-btn:hover { background: var(--accent-soft); color: var(--rgl-indigo-300); }
.copy-btn:focus-visible { outline: 2px solid var(--rgl-indigo-300); outline-offset: 1px; }
/* El área de clic se mantiene ≥40×40 también dentro de una fila densa: el
   botón conserva su tamaño y "descuenta" con margen negativo, para no empujar
   las dos líneas ni romper el alto de 56px. */
.llave .copy-btn, .d-meta .copy-btn, td .copy-btn { margin: -12px 0 -12px 2px; }
/* Las áreas de 40px de RUT y póliza se SOLAPAN ~19px (líneas a ~20px de paso) y
   el de abajo ganaba el clic: apuntar al borde inferior del icono del RUT
   copiaba la PÓLIZA (hit-test 19 jul; hallazgo Sol confirmado en vivo). La línea
   del RUT sube de capa: lo que se VE es lo que se copia. F2 re-diagrama la llave. */
.llave .llave-rut { position: relative; z-index: 1; }
.llave .llave-pol { margin-top: 9px; }   /* saca el icono de la póliza del alcance del botón de arriba (medido: +9px) */

.llave-rut { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
             color: var(--text-primary); }
.llave-pol { color: var(--text-muted); }
.pol-num   { font-weight: 600; }
/* (tabular-nums de ambos: regla pareja de §12b) */

/* ======================================================= 7b · LA LÍNEA DE
   VEHÍCULO (VEH-1, ✅ Paula 29-ago). Vive en la cabecera FIJA de los modales
   de gestión y consulta. Es IDENTIDAD, no urgencia: sin color, sin chip, sin
   emoji — el color del CRM está reservado para el reloj. Mismo peso visual
   que la llave de viaje, con la que comparte franja.                        */

.veh-linea {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: 6px; font-size: 12px; line-height: 1.4;
}
.veh-rot  { color: var(--text-muted); font-weight: 600; }
.veh-dato { color: var(--text-primary); font-weight: 600; }
/* (los números tabulares se los pone la regla PAREJA de §12b — ninguna copia
   suelta de `tabular-nums` en esta hoja: es un candado de la suite, T2.) */
.veh-linea-sin .veh-dato { color: var(--text-muted); font-weight: 400; font-style: italic; }

/* ============================================================ 8 · SELLO DE
   DATOS — texto plano con ✓ verde y FECHA ABSOLUTA con hora. Jamás "hoy"
   pelado: una pantalla vieja de ayer tiene que delatarse de un vistazo.     */

.rgl-sello {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0;   /* nunca caja tipo botón */
  color: var(--text-muted);
}
.rgl-sello .rgl-sello-check { color: var(--rgl-success-green); font-weight: 700; }
.rgl-sello-pie { text-align: center; margin-top: 16px; }

/* ============================================================ 9 · CHECKS
   AZUL = gestionado (hicimos la pega; gestionar puede ser cancelar una
   póliza, no es buena noticia por sí solo). VERDE = solo lo objetivamente
   bueno: pago confirmado, renovada confirmada, foto validada.               */

.rgl-check-gestion { color: var(--rgl-indigo-300); font-weight: 700; }
.rgl-check-bueno   { color: var(--rgl-success-green); font-weight: 700; }

/* 5 ago noche (pantallazo de Paula: «el ticket no es de brand guidelines»):
   el ✓ pasa de carácter del sistema a ICONO SVG del DS (RGL_CHECK en app.js),
   con el mismo trazo en pestañas, sello, chips y logros. Hereda el color de
   su check (currentColor). */
.rgl-check-i { width: 11px; height: 11px; flex: 0 0 auto; vertical-align: -1px; }
.rgl-check-gestion, .rgl-check-bueno { display: inline-flex; align-items: center; gap: 4px; }
.rgl-sello-check .rgl-check-i { width: 12px; height: 12px; }

/* Barra de progreso honesta "X de Y gestionadas": avance en azul de marca,
   nunca verde (el avance de gestión no se celebra). */
.prog-bar, .rep-prog-fill, .adm-bar-fill { background: var(--rgl-indigo-300); }
.prog-val.pgreen { color: var(--rgl-indigo-300); }

/* ============================================================ 10 · BADGE DE
   SEGMENTO — etiqueta textual + estrella (icono, jamás emoji). Donde no
   quepa, la estrella sola. Es lectura de SEGUNDO nivel: nunca compite con
   la urgencia.                                                              */

.rgl-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--rgl-pewter-200);
  border-radius: 999px;
  background: #fff;
  color: var(--rgl-pewter-400);
  font-weight: 600; letter-spacing: .3px;
  white-space: nowrap;
}
.rgl-badge .rgl-star { width: 12px; height: 12px; flex-shrink: 0; fill: var(--rgl-pewter-300); }
.rgl-badge-solo { border: none; padding: 0; background: none; }

/* ============================================================ 11 · TABS
   Categorías con palabra. Urgencia: SOLO puntito + conteo (la palabra sería
   redundante) — aparece en tooltip al pasar el mouse.                       */

.poliza-tab, .tarea-tab, .bandeja-tab, .ficha-tab, .cf-section, .adm-tab {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2.5px solid transparent;
}
/* Camadas de mes (Renovaciones): el número lleva el color de su COMPOSICIÓN, no
   de «tener pendientes» (defecto R2, prueba libre de Paula del 5 ago). Rojo solo
   con críticas; los meses futuros con pendientes van neutros. */
.tab-count-crit { color: var(--rgl-urgency-high); }
.tab-count-pend { color: var(--text-muted); }
.poliza-tab.active, .tarea-tab.active, .bandeja-tab.active, .ficha-tab.active,
.cf-section.active, .adm-tab.active {
  color: var(--rgl-indigo-300);
  background: var(--accent-soft);
  border-bottom-color: var(--rgl-indigo-300);
}

.rgl-tab-urg {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--rgl-border-medium); background: #fff;
  cursor: pointer; font-size: 13px; font-weight: 700;
  color: var(--text-primary);
}
.rgl-tab-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rgl-tab-dot.alta   { background: var(--rgl-urgency-high); }
.rgl-tab-dot.media  { background: var(--rgl-urgency-medium-fill); }
.rgl-tab-dot.neutra { background: var(--rgl-pewter-200); }
.rgl-tab-urg.gestionados .rgl-tab-check { color: var(--rgl-indigo-300); font-weight: 700; }

/* ============================================================ 12 · KPIs
   D8: un "0" que es LOGRO se muestra sereno, jamás pintado de alarma —
   "cero críticas = el máximo placer". Acá los KPIs se CALMAN (quitarlos o
   degradarlos a cola única es trabajo del 17b, no de este encargo).        */

.kpi-row { gap: var(--rgl-gutter); margin-bottom: var(--rgl-gutter); }
.kpi-card {
  background: var(--rgl-surface);
  border: 1px solid var(--rgl-border-medium);
  border-top: 1px solid var(--rgl-border-medium);   /* sin barra de color arriba */
  border-radius: var(--rgl-r);
  box-shadow: none;
  padding: 14px 16px;
}
.kpi-card:hover { transform: none; box-shadow: var(--card-sh); }
.kpi-card::after { content: none; }
.kpi-val {
  font-family: 'Outfit', sans-serif;
  font-size: 28px; font-weight: 800; line-height: 34px;
  letter-spacing: -.5px;
  color: var(--text-primary);      /* neutro por defecto: informar ≠ alarmar */
}
.kpi-val.amber, .kpi-val.red, .kpi-val.blue, .kpi-val.green { color: var(--text-primary); }
.kpi-label { color: var(--text-muted); font-weight: 500; }
/* El cero sereno: se dice con calma, no con rojo. Y cuando el número SÍ es una
   alarma (hay casos críticos), ahí sí se pinta — el color se gana. */
.kpi-val.rgl-cero-logro  { color: var(--rgl-success-green); }
.kpi-val.rgl-cero-alarma { color: var(--rgl-urgency-high); }

/* ============================================================ 12b · NÚMEROS
   TABULARES PAREJOS (✅ Paula 10-ago noche, vista antes-después §3, «okey A»):
   la cifra tabular deja de ser un privilegio de .hkey-t y
   .hrow-uf y pasa a REGLA para TODO número de tabla y KPI, con la tipografía
   actual (DM Sans/Outfit) — NO entra 3ª tipografía. Un dígito = un ancho: las
   columnas no «bailan» al comparar filas. La declaración vive SOLO acá; las
   copias que existían repartidas por el archivo se retiraron a favor de esta. */
.kpi-val, .adm-kpi-val, .hband-n, .htab-n, .htab .tab-count,
.hrow-plazo-t, .hrow-uf, .hkey-t, .hkey-sub, .llave-rut, .pol-num,
.cob-resumen-line strong, .d-meta, .prog-val, .tbl-foot,
.cob-tel-pfx, .cob-tel-inp, .veh-dato,
.pol-tbl td, .cli-tbl td, .fact-tbl td, .company-tbl td,
.rgl-esc .tl-time {
  font-variant-numeric: tabular-nums;
}

/* ============================================================ 13 · CHIPS
   Los chips de estado bajan el tono: informan, no compiten con la urgencia. */

.chip, .cob-estado, .urg-chip, .dias-badge, .estado-chip, .tipo-chip,
.alerta-chip, .sin-estado, .cob-gestionado {
  border-radius: 999px; font-weight: 600;
}
.chip-info, .cob-nuevo, .ctag-r { background: #EAF4FA; color: var(--rgl-info-blue); }
.chip-ok, .estado-activo { background: var(--ok-bg); color: var(--rgl-success-green); }
/* Gestionado = AZUL (regla 9): "Bcobra enviado" es pega hecha, no celebración. */
.chip-gestionado { background: #EEF1FA; color: var(--rgl-indigo-300); }
.chip-err { background: var(--err-bg); color: var(--rgl-urgency-high-text); }
.chip-warn { background: var(--warn-bg); color: var(--rgl-urgency-medium-text); }
/* Un estado neutro del sistema ("Pendiente de pago", "endoso") es TEXTO PLANO
   gris: si lleva caja, se confunde con algo en lo que se puede hacer clic. */
.chip-neutral, .cob-prorrogado, .estado-inactivo {
  background: none; padding: 0; color: var(--text-muted); font-weight: 500;
}

/* Chip PREMIUM "ATENCIÓN PREFERENTE" (adenda 5·6): badge de 2º nivel, texto +
   estrella del DS. BLANCO con AZUL del DS (regla re-dictada por Paula 21 jul, C9:
   «la insignia de atención preferente era blanco con azul» — antes iba dorado).
   Índigo institucional #142C7A sobre blanco = 12,4:1 (AA holgado). */
.chip-premium {
  display: inline-flex; align-items: center; gap: 4px;
  background: #FFFFFF; color: var(--rgl-indigo-300);
  padding: 1px 8px 1px 6px; border-radius: 999px;
  border: 1px solid var(--rgl-indigo-300);
  font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;   /* 10px → 12px (✅ Paula 10-ago, vista §2+§5) */
  white-space: nowrap; flex: 0 0 auto;
}
.chip-premium .rgl-star { width: 12px; height: 12px; flex: 0 0 auto; fill: var(--rgl-indigo-300); }
/* DENTRO de un modal el cliente preferente lleva SOLO la estrellita — sin
   texto ni caja (✅ Paula 10-ago, vista §5, textual: «cuando está en modal
   adentro que tenga solo la estrellita»). En filas y listas, el chip completo. */
.chip-premium-solo { border: none; background: none; padding: 0; }

/* Chip de PRE-DIAGNÓSTICO (adenda 5·4): puntito del DS por marca + texto plano
   (sin emoji). El puntito hereda la paleta de urgencia — mismo idioma de color
   que la franja y los tabs. */
.chip-prediag {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; padding: 0; color: var(--text-muted); font-weight: 500;
}
.prediag-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--rgl-pewter-300); }
.prediag-probable_cancelada { background: var(--rgl-urgency-high); }
.prediag-flota_revisar,
.prediag-con_deuda          { background: var(--rgl-urgency-medium-fill); }
.prediag-sin_senal          { background: var(--rgl-pewter-300); }

/* D1 (✅ Paula 18-ago) · etiqueta que desagrega «NO RENOVADA»: mismo molde del
   chip de pre-diagnóstico (puntito + texto plano). Colores YA existentes del
   DS — rojo de urgencia (la compañía la dio por muerta), naranjo (el problema
   es de cobranza), índigo institucional (re-emitida: hay póliza nueva que
   verificar — no es urgencia ni logro). «Falta renovarla» se lee por AUSENCIA
   (regla del 5-ago): no tiene puntito porque no se pinta. */
.etiqnr-ya_cancelada { background: var(--rgl-urgency-high); }
.etiqnr-en_cobranza  { background: var(--rgl-urgency-medium-fill); }
.etiqnr-reemitida    { background: var(--rgl-indigo-300); }

/* ============================================================ 14 · MODALES
   Se abren ENCIMA de la cola (D18): el usuario nunca pierde su lugar.       */

.modal-overlay { background: rgba(6,16,31,.48); }
.modal-box { border-radius: var(--rgl-r-lg); border: 1px solid var(--rgl-border-medium); }
.modal-title { font-size: 18px; font-weight: 800; }

/* ============================================================ 15 · LOGIN */

#login-wrap { background: var(--rgl-grad-sidebar); }
#login-form { border-radius: var(--rgl-r-lg); }
#login-form .rgl-logo { justify-content: center; margin-bottom: 6px; }
#login-form .rgl-logo-word { color: var(--rgl-indigo-300); font-size: 22px; }
#login-form .rgl-logo-word .rgl-logo-seguros { color: var(--rgl-pewter-300); }

/* ============================================================ 16 · PISO DE
   CELULAR — desktop-first, pero en pantalla chica nada se corta: la sidebar
   pasa arriba y el contenido denso escrolea (horizontal si hace falta).     */

@media (max-width: 820px) {
  html, body { overflow-x: hidden; overflow-y: auto; height: auto; }
  /* min-width:0 en toda la cadena: sin esto, una fila ancha estira el contenedor
     flex y la pantalla se corta por la derecha en vez de acomodarse. */
  #app { flex-direction: column; height: auto; min-height: 100vh; width: 100%; min-width: 0; }
  #sidebar, #contenido { width: 100%; min-width: 0; max-width: 100%; }

  #nav-items { flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 10px 8px; }
  .nav-item { border-left: none; border-bottom: 3px solid transparent; padding: 8px 10px; }
  .nav-item.active { border-left-color: transparent; border-bottom-color: var(--sb-ab); }
  .nav-sep { display: none; }
  .sb-logo { padding: 14px 12px; }

  #contenido { padding: 16px; overflow: visible; }
  .kpi-row { grid-template-columns: 1fr 1fr !important; }
  .inicio-2col, .ficha-2col { grid-template-columns: 1fr; }
  /* La tarjeta NO se ensancha: las filas se acomodan dentro de ella. Lo que sí
     escrolea horizontalmente es la tabla densa (abajo), en su propia caja. */
  .section-card { max-width: 100%; }
  .decision-item { width: 100%; box-sizing: border-box; }

  /* La fila densa pasa a dos pisos: el caso arriba, su acción abajo a la
     derecha. Nada se sale de la pantalla; el texto se acomoda, no se corta. */
  .decision-item { flex-wrap: wrap; align-items: flex-start; }
  .decision-item .d-main { flex: 1 1 100%; min-width: 0; }
  .decision-item .d-action { flex: 0 0 auto; margin-left: auto; margin-top: 8px; }
  .d-title { white-space: normal; overflow: visible; text-overflow: clip; }

  /* Tablas densas: se escrollean en su caja, jamás se cortan. */
  .pol-tbl-wrap, .cli-tbl-wrap, .poliza-tabs, .filter-bar,
  .tarea-tabs, .bandeja-tabs, .ficha-tabs-bar, .adm-tabs { overflow-x: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOME V1 · "Mi gestión" — la cola única (encargo 17b)
   Piezas nuevas del skin. Nada de estilos sueltos: todo sale de los tokens.
   ═══════════════════════════════════════════════════════════════════════ */

/* Cuarto corte: 🟡 "tiene plazo, pero ya se ve venir". El design system tenía
   tres franjas; la cola única necesita distinguir el amarillo (≤7 d) del
   neutro (>7 d) — si no, "esta semana" y "este mes" se ven igual de tibios. */
.crit-baja { border-left-color: var(--rgl-urgency-medium-text); }

/* Progreso HONESTO (DESIGN-RGL · Counters): la barra usa el índigo de marca.
   El avance de gestión NUNCA es verde — el verde se reserva para lo
   objetivamente bueno (pagada, renovada, foto validada). */
.rgl-progreso {
  height: 6px;
  margin-top: 10px;
  border-radius: var(--rgl-rounded-full, 9999px);
  background: var(--rgl-border-medium, #E8EAEE);
  overflow: hidden;
}
.rgl-progreso-fill {
  height: 100%;
  background: var(--rgl-indigo-200, #1D3FA8);
  border-radius: inherit;
  transition: width .3s ease;
}

/* La segunda línea de la fila: TODO en una sola línea (badge, chips, llave de
   viaje, acción, fichas), separado por aire y no por saltos. Así la fila mide
   2 líneas y entran ≥7 casos sobre el pliegue, como manda la densidad. */
.d-linea2 { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow: hidden; }
.d-linea2 > * { flex: 0 0 auto; }

/* La acción es lo único elástico: se recorta con puntos suspensivos antes que
   empujar la llave de viaje fuera de la fila (el texto completo va en el title). */
.d-accion { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* La llave de viaje dentro de una fila: horizontal y compacta — jamás el bloque
   de dos pisos que usa la tabla de Cobranzas. */
.d-llave .llave { display: flex; gap: 10px; align-items: center; }
.d-llave .llave-rut,
.d-llave .llave-pol { font-size: 13px; font-weight: 600; white-space: nowrap; }

/* En pantalla angosta la línea 2 sí se parte: nada se corta, se apila. */
@media (max-width: 860px) {
  .d-linea2 { flex-wrap: wrap; }
  .d-accion { flex-basis: 100%; white-space: normal; }
}

/* Cabecera de banda (HOY / ESTA SEMANA / ESTE MES): el título a la izquierda y
   su explicación a la derecha, sin competir con la urgencia de las filas. */
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════
   HOME "Mi gestión" · COMPOSICIÓN v0.5 Afinada (encargo 20b)
   ----------------------------------------------------------------------------
   El diseño iterado en Stitch entra al código: barra de foto+progreso arriba,
   hero de una frase, pestañas de filtro, y UNA cola-documento con las bandas
   por dentro. Solo front: los datos y el orden vienen del servidor sin cambios.
   Autoridad de tokens: DESIGN-RGL.md (jamás el HTML literal de Stitch).
   ═══════════════════════════════════════════════════════════════════════ */

/* — Menú del sidebar en MAYÚSCULAS (Stitch): más presencia, misma legibilidad.
     El contraste pleno de los inactivos ya está resuelto arriba (§4). */
.nav-item { text-transform: uppercase; letter-spacing: .4px; font-size: 13px; }

/* — Pie del sidebar: avatar con iniciales + nombre y rol (Stitch). */
.sb-footer { align-items: center; }
.sb-user { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sb-ava {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--rgl-indigo-200); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 11px;
  flex-shrink: 0;
}
.sb-user-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sb-user-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role { font-size: 11px; color: var(--sb-text); }

/* — Barra superior: sello de foto (izq) + progreso honesto (der). */
.hbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--rgl-surface);
  border: 1px solid var(--rgl-border-medium);
  border-radius: var(--rgl-r);
  box-shadow: var(--card-sh);
  margin-bottom: 8px;
}
.hbar-sello { font-size: 12px; min-width: 0; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; }
/* Veredicto del cuadre "con reparos" (adenda 5·8): puntito ámbar + texto. El
   "carga completa" usa el ✓ verde del DS (checkBueno). */
.hsello-reparos { display: inline-flex; align-items: center; gap: 4px; color: var(--rgl-urgency-medium-text); font-weight: 600; }
.hsello-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rgl-urgency-medium-fill); flex: 0 0 auto; }
.hbar-prog { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.hbar-prog-txt { font-size: 12px; color: var(--text-muted); }
.hbar-prog-txt strong { color: var(--text-primary); }
.hbar-prog-track { width: 208px; max-width: 100%; height: 6px; border-radius: 999px; background: var(--rgl-border-medium); overflow: hidden; }
.hbar-prog-fill { height: 100%; background: var(--rgl-indigo-300); border-radius: inherit; transition: width .3s ease; }
/* «faltan 5 rojas y 2 naranjas»: el MISMO rojo y el MISMO naranjo de los puntitos
   de urgencia de abajo (.htab-dot / .crit-*). Antes usaban las variantes -text
   (burdeo #B42318 y ocre #B54708): la barra de arriba y los puntitos de abajo
   parecían dos semáforos distintos — feedback de Paula, prueba libre del 5 ago
   («pongan los colores de abajo, no los de arriba»). Se unifica al token vibrante.
   ⚠️ El ámbar vibrante sobre blanco tiene menos contraste que su variante -text:
   por eso el número va acompañado de su PALABRA («naranjas»), nunca color solo. */
.hp-rojas    { color: var(--rgl-urgency-high); font-weight: 700; }
.hp-naranjas { color: var(--rgl-urgency-medium-fill); font-weight: 700; }

/* — Hero: el foco del día en una frase. Índigo institucional, Outfit 800. */
.hhero { margin: 2px 0 6px; }
.hhero h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 24px; font-weight: 800; letter-spacing: -.3px;
  color: var(--rgl-primary);
}
/* Subtítulo del hero (adenda 5·9, EN PRUEBA): apoyo discreto bajo el titular. */
.hhero-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }

/* — Grupo derecho de la barra: progreso + botón ⓘ. Es el ancla del popover
     (position:relative) para que el panel caiga bien alineado a la derecha,
     también en celular (donde el grupo ocupa el ancho y su borde derecho = borde
     de pantalla). */
.hbar-right { display: flex; align-items: center; gap: 12px; position: relative; }

/* — Botón ⓘ (Paula 19 jul): los textos explicativos viven acá, no en la vista.
     Icono del DS, jamás emoji. Puntito de aviso mientras la criticidad sea
     provisional (el caveat sigue descubrible sin ocupar pantalla). */
.hbar-info {
  position: relative; flex: 0 0 auto;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--rgl-border-medium);
  border-radius: 999px; color: var(--text-muted); cursor: pointer;
  transition: color .13s, border-color .13s, background .13s;
}
.hbar-info:hover,
.hbar-info[aria-expanded="true"] { color: var(--rgl-info-blue); border-color: var(--rgl-info-blue); background: #EAF4FA; }
.hbar-info:focus-visible { outline: 2px solid var(--rgl-info-blue); outline-offset: 2px; }
.hbar-info-dot {
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warn); border: 2px solid var(--rgl-surface);
}

/* — Panel del botón ⓘ: caveat provisional + leyenda del orden. Cae bajo la barra,
     anclado a la derecha; se cierra con ✕, clic afuera o Esc. */
.hinfo-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: 360px; max-width: min(360px, calc(100vw - 32px));
  background: var(--rgl-surface); border: 1px solid var(--rgl-border-medium);
  border-radius: var(--rgl-r); box-shadow: 0 8px 28px rgba(10,30,61,.14);
  padding: 12px 14px 14px; text-align: left;
}
.hinfo-pop[hidden] { display: none; }
.hinfo-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.hinfo-pop-title { font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.hinfo-pop-x {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  display: inline-flex; padding: 2px; border-radius: 6px; margin: -2px -4px -2px 0;
}
.hinfo-pop-x:hover { color: var(--text-primary); background: var(--rgl-border-light); }
.hinfo-pop-x:focus-visible { outline: 2px solid var(--rgl-info-blue); outline-offset: 1px; }
.hinfo-prov {
  font-size: 12px; color: var(--warn); line-height: 1.45;
  background: var(--warn-bg); border: 1px solid var(--warn-bd);
  border-radius: var(--rgl-r-sm); padding: 7px 10px; margin-bottom: 10px;
}
.hinfo-orden { font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.hinfo-orden-t {
  display: block; margin-bottom: 3px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-primary);
}

/* — Pestañas de filtro con conteo y puntito. El subrayado activo usa el índigo;
     el degradado NO se usa acá (el DS lo reserva para la acción primaria). */
.htabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--rgl-border-medium);
  margin-bottom: 8px;
}
.htab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; background: none; border: none;
  border-bottom: 2.5px solid transparent; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--text-muted); transition: color .13s, border-color .13s;
}
.htab:hover { color: var(--rgl-indigo-300); }
.htab.active { color: var(--rgl-indigo-300); border-bottom-color: var(--rgl-indigo-300); }
.htab-n {
  padding: 1px 7px; border-radius: 999px;
  background: var(--rgl-border-medium); color: var(--text-muted);
  font-size: 12px; font-weight: 700;   /* 10,5px → 12px: barrido del piso (✅ Paula 10-ago, vista §2 «ok subimos») */
}
.htab.active .htab-n { background: var(--accent-soft); color: var(--rgl-indigo-300); }
.htab-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.htab-dot.dot-alta  { background: var(--rgl-urgency-high); }
.htab-dot.dot-media { background: var(--rgl-urgency-medium-fill); }
/* Tabs de urgencia: en reposo solo puntito + número; la palabra aparece cuando
   la pestaña está activa (Paula 18/19 jul). El ✓ de Gestionadas es el check azul
   del DS (.rgl-check-gestion), reutilizado — no un ticket propio. */
.htab-word { font-size: 13px; font-weight: 600; }
.htab-urg  { padding-left: 11px; padding-right: 11px; }
.htab-urg .rgl-check-gestion { font-size: 13px; }
/* La palabra de la tab de urgencia solo se ve cuando está activa (el clic togglea
   .active y el CSS la enciende — sin re-render). Inactiva: puntito + número. */
.htab-urg .htab-word { display: none; }
.htab-urg.active .htab-word { display: inline; }

/* (La leyenda del criterio de orden #5 ya no ocupa el flujo: vive tras el botón
   ⓘ de la barra — Paula 19 jul. Estilo del panel arriba, en .hinfo-orden.) */

/* — LA COLA-DOCUMENTO: una sola tarjeta elevada, con las bandas por dentro
     (Stitch "High Trust Document"). Reemplaza las tres tarjetas sueltas. */
.hqueue {
  background: var(--rgl-surface);
  border: 1px solid var(--rgl-border-medium);
  border-radius: var(--rgl-r-lg);
  box-shadow: 0 1px 3px rgba(10,30,61,.06), 0 12px 32px rgba(10,30,61,.05);
  /* ── ✅ B4 · 3ª VUELTA DEL ORÁCULO (13-sep) · ACÁ DECÍA `overflow: hidden` ──
     QUÉ HACÍA: la cola NO tiene scroll propio — ninguna variante de `.hqueue`
     lleva `max-height` ni `overflow-y: auto`, se desplaza la página entera—.
     El `hidden` estaba SOLO para redondear las esquinas: las bandas y las filas
     son rectángulos con fondo propio (y la fila, además, un filo de 4px), y sin
     recorte pisaban los 16px de radio de la tarjeta.
     POR QUÉ SE VA: recortar por las esquinas es recortar TAMBIÉN por el costado.
     Cualquier pieza INDIVISIBLE más ancha que la fila —un chip, una `.hkey-sub`
     con `nowrap`— moría en este borde. Medido el 13-sep a 375 px: la sub-línea
     «cuota 3 de 12 · venció el 25 ago · 18 días vencida» medía 265 px y su borde
     derecho caía 1 px FUERA de la tarjeta. Ese era el 2º camino de recorte que
     el oráculo v3 dejó abierto.
     POR QUÉ NO «solo el eje Y»: el CSS no lo permite — si un eje queda en
     `visible` y el otro no, `visible` computa a `auto` y nace una barra de
     scroll. Así que el cuchillo se retira y las esquinas se redondean donde de
     verdad viven: en el primer y el último hijo. Mismo dibujo, sin recorte. */
  overflow: visible;
}
/* El redondeo de la tarjeta, sin recortar nada: el primer hijo redondea arriba y
   el último abajo. Es el reemplazo exacto del `overflow: hidden` de arriba. */
.hqueue > :first-child { border-top-left-radius: var(--rgl-r-lg); border-top-right-radius: var(--rgl-r-lg); }
.hqueue > :last-child  { border-bottom-left-radius: var(--rgl-r-lg); border-bottom-right-radius: var(--rgl-r-lg); }
/* … y el caso que se cazó probándolo (13-sep): cuando la ÚLTIMA banda nace
   PLEGADA su cuerpo es `display: none`, así que `:last-child` apunta a una caja
   que no se dibuja y el último elemento VISIBLE —su cabecera— quedaba con las
   esquinas cuadradas. El cuerpo plegado es siempre el último y la cabecera
   siempre lo precede, así que esto lo cubre entero. */
.hqueue > .hband:has(+ .hbody-plegado:last-child) {
  border-bottom-left-radius: var(--rgl-r-lg); border-bottom-right-radius: var(--rgl-r-lg);
}
/* ── ✅ B4 · 4ª VUELTA DEL ORÁCULO (13-sep) · EL PIE DE LA BANDA ABIERTA ─────
   El oráculo v4 cazó lo que a la 3ª pasada se le pasó: en el HOME las filas NO
   son hijas directas de la cola — cada banda cuelga sus `.hrow` de un `.hbody`
   (`app.js:1339-1371`). Con la ÚLTIMA banda ABIERTA, `:last-child` es ese
   `.hbody`, que es una caja transparente: el radio caía donde no se pinta nada,
   y la que sí pinta —la última `.hrow`, con su fondo blanco— quedaba con el pie
   CUADRADO. Medido antes de arreglarlo: el píxel a 3 px de las dos esquinas
   inferiores daba `rgb(255,255,255)` (la fila) en vez del fondo de la página
   `rgb(242,244,247)`, a 1366×768 y a 375×812.
   Se redondea EL ÚLTIMO ELEMENTO REALMENTE PINTADO de esa banda, sea la fila o
   —cuando la banda lleva el TOPE-1— el botón `.hband-tope-mas`, que va siempre
   al final y pinta fondo al pasar el mouse (`app.js:1355-1368`, `:956`).
   Las colas SIN `.hbody` (Cobranzas agrupada, Renovaciones, las listas planas:
   `app.js:2320-2331,4716,4827-4832,7306,8680`) ya las cubre `:last-child`.
   Sigue SIN `overflow: hidden`: esto redondea, no recorta. */
.hqueue > .hbody:last-child > :last-child {
  border-bottom-left-radius: var(--rgl-r-lg); border-bottom-right-radius: var(--rgl-r-lg);
}

/* Cabecera de banda: HOY con filo índigo arriba y fondo blanco; SEMANA/MES en
   gris para bajar de tono (el trabajo del día es HOY). */
.hband {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--rgl-border-light);
  background: var(--rgl-bg-page);
}
.hband-hoy { background: var(--rgl-surface); border-top: 2px solid var(--rgl-primary); }
.hband-t {
  font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--rgl-pewter-300);
}
.hband-hoy .hband-t { color: var(--rgl-primary); }
.hband-n { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.hband-sub { font-size: 12px; color: var(--text-muted); margin-left: auto; }   /* 10,5px → 12px: barrido del piso (✅ Paula 10-ago) */
/* P3 (✅ Paula 18-ago; pantallazo 11:45 del 14-ago: «Colapsado- colapsable..
   es muy pesado»): la cabecera ESTE MES es un botón que pliega/despliega sus
   filas. La MISMA flecha ▸ de los desplegables del DS (gira al abrir). */
.hband-toggle { cursor: pointer; user-select: none; }
.hband-toggle::before {
  content: '▸'; color: var(--accent); font-size: 11px;
  display: inline-block; transition: transform .12s;
}
.hband-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
.hband-toggle:hover .hband-t { color: var(--accent); }

/* ── CORTE 5 · LAS 5 BANDAS FIRMADAS (✅ Paula 20-ago) ────────────────────────
   SE TE PASÓ va ARRIBA de HOY y se ve distinta: es la deuda con uno mismo, no
   la urgencia de BCI. Filo ámbar (jamás rojo: el rojo es criticidad viva de la
   compañía) y el título en el mismo tono.
   SIN FECHA es *«un mal necesario»* (palabras suyas): tono apagado, al final. */
.hband-se_te_paso { background: var(--rgl-surface); border-top: 2px solid var(--warn, #B45309); }
.hband-se_te_paso .hband-t { color: var(--warn, #B45309); }
.hband-sin_fecha  { background: var(--rgl-bg-page); }
.hband-sin_fecha .hband-t { color: var(--rgl-pewter-300); }

/* ── CORTE 9 · «OTRAS» (✅ Paula 22-ago, textual: «En un desplegable Otras abajo
   y que esté colapsado») ───────────────────────────────────────────────────────
   La última del documento y la más apagada de todas: no es urgencia, es la
   superficie que estas filas no tenían en ninguna otra pantalla (TV-B7). Mismo
   tono que SIN FECHA a propósito — las dos son «mirar», no «hacer hoy». */
.hband-otras { background: var(--rgl-bg-page); }
.hband-otras .hband-t { color: var(--rgl-pewter-300); }

/* El PLIEGUE oculta, no borra: las filas quedan en el documento para que la
   cabecera y su contenido no puedan separarse nunca (INV-09 · INV-05). */
.hbody-plegado { display: none; }

/* TOPE-1 (✅ Paula 29-ago, «es por mientras que estamos desarrollando»): el
   botón que destapa el resto del SE TE PASÓ. Deliberadamente DISCRETO — no es
   una acción del negocio, es un control de la lista; el énfasis se lo queda la
   banda, que sigue abierta y sigue gritando el número real en su cabecera. */
.hband-tope-mas {
  display: block; width: 100%; text-align: center;
  background: none; border: none; border-top: 1px solid var(--card-bd);
  padding: 9px 12px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent, var(--rgl-indigo-300));
}
.hband-tope-mas:hover { background: var(--accent-soft); }
.hband-tope-mas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* El MOTIVO de la fila (firma 4: lo vencido dice QUÉ se pasó), en el tono de
   las llaves y SIEMPRE al final de la línea (orden = jerarquía: es lo último
   que cede espacio, y por eso es lo que baja de renglón primero).
   ── ✅ B4 · 3ª VUELTA DEL ORÁCULO (13-sep) · ENVUELVE, YA NO SE ELIDE ──────
   Acá decía `white-space: nowrap; overflow: hidden; text-overflow: ellipsis`.
   El oráculo v3 lo señaló como el 1º de los dos caminos de recorte que quedaban:
   *«un motivo largo continúa truncado sin acceso al texto completo»* — y en el
   HOME no puede haber `title` que lo rescate, porque el arnés CONGELADO INV-05
   cuenta la frase del motivo en el HTML del Home y duplicarla lo pone rojo.
   La salida que el propio oráculo pidió es la buena y sirve para las DOS
   pantallas sin duplicar nada en el DOM: que el motivo **envuelva**. Medido el
   13-sep: a 1366×768 el motivo largo medía 881 px de texto en 771 px de caja
   —110 px se perdían—; ahora baja de renglón y se lee entero.
   COSTO, declarado: la fila con motivo largo crece un renglón (Home 108→126 px).
   La densidad firmada NO se mueve: 7 filas enteras sobre el pliegue a 1366×768,
   antes y después (medido, no supuesto). */
.hrow-motivo {
  font-size: 12px; color: var(--text-muted);
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
  min-width: 0; flex: 0 1 auto;
}
.hrow-motivo::before { content: '· '; color: var(--rgl-pewter-200); }
/* ✅ B4 (3ª vuelta, 13-sep) · acá vivía `.hkey-sub .hrow-motivo { white-space:
   normal; overflow: visible; text-overflow: clip }`, que B2 había tenido que
   escribir SOLO para la sub-línea de una hermana. Subió a la regla base de
   `.hrow-motivo`: envolver dejó de ser la excepción de un lugar y pasó a ser la
   guarda de las dos pantallas. Se quita de acá para no tener la misma
   declaración en dos casas (CASA ÚNICA). */
/* La VENTANA del acto: cuándo se cierra el plazo del aviso que toca hoy (D7 de
   la matriz — hasta el corte 5 ninguna pantalla podía decirlo). */
.hrow-ventana { font-size: 12px; color: var(--text-muted); white-space: nowrap; flex: 0 0 auto; }
.hrow-ventana::before { content: '· '; color: var(--rgl-pewter-200); }
/* TEMP-1 · el ÚLTIMO DÍA de la ventana deja de ser texto gris y usa el chip
   ámbar que YA existe (.chip-warn, contraste ya validado): cero colores nuevos.
   El ámbar es el del RELOJ TUYO —tu plazo se acaba hoy—, no el de BCI, que vive
   en el filo de 4px de la izquierda. Solo hereda su tamaño para que no rompa la
   línea 2 ni la densidad firmada. */
.hrow-ultimo { font-size: 11px; letter-spacing: .02em; flex: 0 0 auto; margin-left: 4px; }
/* Banda de CIERRES del mes (21d) — neutra: es mapa/consulta, no urgencia. */
.hband-cerradas { background: var(--rgl-surface); }

/* — LA FILA (Stitch): [chip COB/REN] · [nombre + acción] / [llave + plazo] ·
     [Gestionar]. Dos líneas densas: ≥7 casos sobre el pliegue a 1366×768.
     El filo izquierdo de 4px es la criticidad, consumida del servidor. */
.hrow {
  display: flex; align-items: center; gap: 14px;
  min-height: var(--rgl-row-h);
  padding: 6px 18px 6px 14px;
  background: var(--rgl-surface);
  border-bottom: 1px solid var(--rgl-border-light);
  border-left: 4px solid transparent;   /* la franja de criticidad vive acá */
}
/* La franja por fila (hotfix dom 19, cazado por Paula): las reglas .crit-* de
   arriba (línea ~333) tienen la misma especificidad que .hrow y quedaron ANTES
   en el archivo → el shorthand de .hrow las pisaba y TODA fila salía con filo
   transparente. Doble clase = mayor especificidad, gana siempre. */
.hrow.crit-alta   { border-left-color: var(--rgl-urgency-high); }
.hrow.crit-media  { border-left-color: var(--rgl-urgency-medium-fill); }
.hrow.crit-neutra { border-left-color: var(--rgl-pewter-100); }
/* 21d — cierres del mes: la PAGADA lleva el único acento verde (pago confirmado,
   regla 9 literal); la cancelada va con el filo neutro de crit-neutra, jamás rojo. */
.hrow.hrow-pagada { border-left-color: var(--ok); }
/* Feedback al volver de gestionar (Paula, dom 19: "sentir el progreso"): la
   fila recién gestionada respira UNA vez en azul — gestionado = azul (regla 9),
   jamás verde. Con reduced-motion no anima (hallazgo D-P3-04 de Sol). */
.hrow-flash { animation: hrow-flash 2s ease-out 1; }
@keyframes hrow-flash {
  0%   { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
  60%  { background: var(--accent-soft); }
  100% { background: var(--rgl-surface); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .hrow-flash { animation: none; } }
.hrow:last-child { border-bottom: none; }
.hrow:hover { background: #FAFBFD; }

/* Chip de tipo de viaje (cuadrado, izquierda). 10px → 12px: barrido del piso
   (✅ Paula 10-ago). El ancho sube 40 → 46px para que el rótulo más largo
   («TAREA», 5 letras) siga cabiendo SIN truncarse — parejo en todas las filas
   para que la columna de chips no pierda su alineación. */
.hrow-tipo {
  flex: 0 0 auto; width: 46px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--rgl-r-sm);
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .6px;
}
.tipo-cob   { background: var(--rgl-pewter-100); color: var(--rgl-pewter-400); }
.tipo-ren   { background: #DCE1FF; color: #0B3CAA; }
.tipo-otro  { background: #EAF4FA; color: var(--rgl-info-blue); }
/* TEN = RETENCIÓN (MVP 10-ago · elección de Paula: cambia la PRIMERA letra,
   no se confunde con REN). Violeta: color propio, distinto del azul REN y del
   pewter COB — 🟠 hex propuesto, Paula lo remata al probar. Hereda de
   .hrow-tipo el 12px del piso y el ancho parejo. */
.tipo-ten   { background: #EDE9FE; color: #5B21B6; }
/* Franja de la fila de retención en el Home y en su sección: urgencia HUMANA
   (la fijó una persona), no criticidad BCI — por eso no recicla el rojo. */
.hrow.crit-ten { border-left-color: #6D28D9; }
/* Salida elegida en el modal de resolver (confirmación por composición). */
.ret-sal-activa { border-color: #6D28D9 !important; color: #5B21B6; background: #F5F3FF; }

.hrow-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hrow-l1, .hrow-l2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.hrow-name { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; }
.hrow-nt {
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* La acción (qué hacer) — descriptor índigo a la derecha de la 1ª línea. */
.hrow-accion { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--rgl-indigo-300); white-space: nowrap; }

/* Llave de viaje horizontal: RUT · Póliza, cada uno con su copiar limpio. */
/* ── ✅ B4 · ORÁCULO v2 (Codex, 12-sep noche) · LA GUARDA REAL DE VISIBILIDAD ──
   ⛔ ACÁ VIVÍA `flex-wrap: nowrap` + `overflow: hidden`, y era el bloqueador.
   Con eso, todo lo que no cupiera en el ancho de la línea DESAPARECÍA sin aviso
   y sin otra forma de leerlo — incluidos los chips que CAMBIAN QUÉ GESTIÓN
   CORRESPONDE HACER («⏸ avisos en pausa», «factura anticipada», «sin contacto»,
   «dato tardío»…). La 1ª pasada del vagón T2/T4 lo trató REORDENANDO los chips
   (lo crítico primero, lo informativo al final). El oráculo v2 lo rechazó con
   razón: **el orden baja la probabilidad del recorte, no lo impide.** En una fila
   cargada —la pausada es la peor— las llaves + los 9 chips críticos llenan la
   línea solos, y a partir de ahí se corta también lo crítico.

   LA SOLUCIÓN ELEGIDA, y por qué es la más simple que de verdad GARANTIZA:
   la línea **ENVUELVE en todos los anchos** (`flex-wrap: wrap`) y **ya no
   recorta** (`overflow: visible`). Es la única de las dos candidatas que es una
   guarda y no una probabilidad:
     · `flex-shrink: 0` en los críticos NO garantiza nada: si la suma de los
       anchos no-encogibles supera el contenedor, los últimos igual se salen del
       borde y `overflow: hidden` se los come. Solo cambia CUÁL se corta.
     · envolver no puede fallar: lo que no cabe baja de renglón y se lee entero.
   COSTO, declarado: 🟠 en una fila MUY cargada la 2ª línea puede pasar a dos
   renglones y esa fila crece. La densidad firmada (7 casos sobre el pliegue a
   1366×768) NO se mueve en la fila normal: el envolvimiento se activa
   exactamente en los casos donde HOY se pierde información — antes crecía el
   silencio, ahora crece la fila. Pendiente de ✅ de Paula como cualquier cambio
   visual con firma previa.
   Refuerzo mecánico: los chips no se encogen ni parten su texto (regla de abajo),
   así que un chip visible es un chip legible ENTERO — nunca medio chip. */
.hrow-keys { display: flex; align-items: center; gap: 7px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; overflow: visible; font-size: 12px; color: var(--text-muted); }
/* ✅ B4 · ningún chip de la línea de llaves se encoge ni se parte: o cabe entero
   en el renglón, o baja al siguiente. `.chip` es `inline-flex` sin `flex` ni
   `white-space` propios, así que sin esto heredaba `flex: 0 1 auto` y podía
   quedar aplastado o partido en dos líneas dentro de su propia píldora. */
.hrow-keys > .chip { flex: 0 0 auto; white-space: nowrap; }
.hkey { display: inline-flex; align-items: center; gap: 1px; white-space: nowrap; }
.hkey-t { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; color: var(--text-secondary); }   /* tabular-nums: regla pareja §12b */
/* El RUT y la póliza SON la puerta a sus fichas (Paula 19 jul: se quitaron los
   emojis 👤/📄, que eran una 3ª copia del mismo acceso). Affordance de link: al
   hover el texto toma color índigo y subrayado; el botón de copiar de al lado es
   su propio botón, separado. */
.hkey-link { cursor: pointer; }
.hkey-link:hover { color: var(--rgl-indigo-300); text-decoration: underline; text-underline-offset: 2px; }
.hkey-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--rgl-pewter-200); flex: 0 0 auto; }
/* El botón de copiar conserva su área de clic ≥40px sin estirar el alto de la
   fila (descuenta con margen negativo). En horizontal, RUT y póliza están
   separados por su texto: sus áreas no se solapan (arreglo del solape del 19). */
.hrow .copy-btn { min-width: 40px; min-height: 40px; margin: -12px 0; }
/* Copiar visible SOLO al hover de la fila (adenda 5·1, ⚠️ EN PRUEBA — Paula:
   "probemos, no es decisión aún"). Conserva su espacio (opacity, no display) para
   que la fila no salte. Sigue apareciendo al foco de teclado y con el foco dentro
   de la fila, para no perderlo en navegación sin mouse. */
.hrow .copy-btn { opacity: 0; transition: opacity .12s; }
.hrow:hover .copy-btn,
.hrow:focus-within .copy-btn,
.hrow .copy-btn:focus-visible { opacity: 1; }
@media (hover: none) { .hrow .copy-btn { opacity: 1; } }   /* touch: sin hover, siempre visible */

/* Columna de plazo: "Se cancela en X días" arriba, monto UF en negrita abajo. */
.hrow-plazo { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
.hrow-plazo-t { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.hrow-uf { font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }   /* tabular-nums: regla pareja §12b */

.hrow-btn { flex: 0 0 auto; padding: 8px 18px; font-size: 13px; }

/* — Piso de celular: la fila se apila, el botón cae abajo a la derecha, nada
     se corta (desktop-first, pero nada se rompe en pantalla chica). */
@media (max-width: 820px) {
  .hbar { flex-direction: column; align-items: stretch; }
  .hbar-right { justify-content: space-between; }
  .hbar-prog { align-items: flex-start; flex: 1 1 auto; }
  .hbar-prog-track { width: 100%; }
  .htabs { flex-wrap: nowrap; overflow-x: auto; }
  .hrow { flex-wrap: wrap; }
  .hrow-body { flex-basis: calc(100% - 60px); }   /* 46px de chip + 14px de gap (el chip subió con el barrido 12px) */
  .hrow-l1, .hrow-l2 { flex-wrap: wrap; gap: 6px; }
  /* ✅ B4 (12-sep) · acá vivía `.hrow-keys { flex-wrap: wrap; overflow: visible }`
     SOLO para el piso de celular. Subió a la regla base: envolver dejó de ser una
     concesión de pantalla chica y pasó a ser la guarda de visibilidad en TODOS
     los anchos. Se quita de acá para no tener la misma declaración en dos casas. */
  /* ── ✅ B4 · 3ª VUELTA DEL ORÁCULO (13-sep) · EL PEOR ANCHO ────────────────
     Envolver la LÍNEA resuelve todo mientras cada pieza quepa en un renglón. La
     única falla que queda es la pieza INDIVISIBLE más ancha que la fila entera:
     en desktop no pasa (medido: la más ancha son 265 px en una línea de 783 px),
     pero en celular sí. Medido el 13-sep a 375 px, con el `nowrap` de arriba:
     la sub-línea «cuota 3 de 12 · venció el 25 ago · 18 días vencida» medía
     265 px en 265 px de caja y su borde caía FUERA de la tarjeta.
     Acá abajo del piso de celular esas piezas dejan de ser indivisibles: pueden
     partir su texto y encogerse. Se cede la regla «un chip visible es un chip
     entero» —que es de estética— para no ceder «nada se corta», que es de
     información. En desktop la regla de arriba sigue mandando sin cambios. */
  .hrow-keys > .chip, .hrow-keys .hkey, .hrow-keys .hkey-sub, .hrow-keys .hrow-ventana {
    white-space: normal; overflow-wrap: anywhere; flex-shrink: 1; min-width: 0;
  }
  /* `.hrow-cia` NO entra: tiene `max-width: 92px` propio, así que jamás puede ser
     «más ancha que la fila». Su elipsis es deliberada y titulada (el nombre
     completo de la compañía viaja en su `title`), no un recorte de B4. */
  .hrow-accion, .hrow-plazo { align-self: flex-start; }
  .hrow-btn { flex-basis: 100%; margin-top: 8px; }
}

/* ════════════════════════════════════════════════════════════
   LOTE B (jue 23 jul 2026) — Cobranzas re-compuesta como
   cola-documento (misma pieza que "Mi gestión").
   REUSA las clases del Home: hbar / htabs / hqueue / hband / hrow
   / hkey / hrow-plazo / hrow-btn — no se inventan paralelas.
   Piezas NUEVAS mínimas (abajo). Nada de texto baja de 12px
   (guarda de Paula 23 jul: no repetir la deuda del piso 12px de 20b).
   ════════════════════════════════════════════════════════════ */

/* Chip de COMPAÑÍA (aseguradora) — POR EXCEPCIÓN (✅ Paula 23 jul, opción 3):
   solo lo llevan las filas que NO son BCI (la cartera por defecto). Con la
   cartera 100% BCI de hoy no se ve; cuando convivan carteras, la excepción
   salta a la vista sola. Tono pewter NEUTRO — informa procedencia, jamás
   compite con la urgencia (esa la cargan solo la franja de 4px y el plazo).
   Ancho flexible: si el nombre no cabe, se trunca (nunca bajo 12px). */
.hrow-cia {
  flex: 0 0 auto;
  min-width: 46px; max-width: 92px;
  height: 24px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--rgl-r-sm);
  background: var(--rgl-pewter-100); color: var(--rgl-pewter-400);
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Sub-dato de la llave: "cuota 6 de 12" (✅ Paula 23 jul) y "último B2 · 15 jul"
   (el sub-texto que traía cobTocaBadge). 12px, muted — apoyo. */
.hkey-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* 5 ago noche (pantallazo de Paula: la fila HDI salía corrida): en Cobranzas el
   chip de cía vive ahora DENTRO de la línea de llaves — versión compacta para
   no engordar la fila. */
.hrow-keys .hrow-cia { height: 20px; min-width: 0; padding: 0 7px; font-size: 11px; }

/* La franja BAJA (🟡 6–7 d) en filas .hrow: el par de doble clase que faltaba.
   Sin esto, el shorthand de .hrow pisa el color de .crit-baja (el MISMO bug del
   hotfix del dom 19 con alta/media) — y la cola completa de Cobranzas SÍ trae
   filas baja. De paso sana el caso latente del Home. */
.hrow.crit-baja { border-left-color: var(--rgl-urgency-medium-text); }

/* Resumen de plata compacto — vive en la barra superior, junto al sello.
   Reemplaza las 5 tarjetas KPI (que se van con la tabla densa): los números
   de plata que las pestañas NO capturan (saldo por rescatar, comisión en
   riesgo) quedan acá en una línea, y el resto se descubre en el botón ⓘ. */
.cob-resumen-line { font-size: 12px; color: var(--text-muted); display: inline-flex; gap: 4px 10px; flex-wrap: wrap; align-items: baseline; }
.cob-resumen-line strong { color: var(--text-primary); font-weight: 700; }   /* tabular-nums: regla pareja §12b */
.cob-resumen-line .cob-riesgo { color: var(--rgl-urgency-medium-text); font-weight: 700; }

/* Fila de controles bajo las pestañas: búsqueda (izq) + toggle de vista (der). */
.cob-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.cob-search {
  flex: 0 1 280px; min-width: 168px; padding: 8px 12px;
  font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--text-primary);
  border: 1px solid var(--rgl-border-medium); border-radius: var(--rgl-r); background: var(--rgl-surface);
}
.cob-search:focus { outline: 2px solid var(--rgl-indigo-300); outline-offset: 1px; border-color: var(--rgl-indigo-300); }

/* Toggle Agrupada / Lista (las dos variantes, en vivo — Paula elige mirándolo).
   Segmented control: el activo toma el índigo del DS. El degradado NO se usa
   acá — el DS lo reserva para la ÚNICA acción primaria (el botón Gestionar). */
.cob-modo { display: inline-flex; gap: 2px; padding: 2px; background: var(--rgl-bg-page); border: 1px solid var(--rgl-border-medium); border-radius: 999px; flex: 0 0 auto; }
.cob-modo-btn {
  border: none; background: none; cursor: pointer; padding: 6px 14px; border-radius: 999px;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; color: var(--text-muted);
  transition: color .13s, background .13s;
}
.cob-modo-btn:hover { color: var(--rgl-indigo-300); }
.cob-modo-btn.active { background: var(--rgl-surface); color: var(--rgl-indigo-300); box-shadow: 0 1px 2px rgba(10,30,61,.12); }

/* "Por fecha de cancelación" — el semáforo de Pancho, ahora COLAPSABLE (no sube
   de jerarquía: es un sub-filtro fino, opcional; las pestañas de urgencia + las
   bandas ya hacen el corte grueso). Preserva el clic-para-filtrar por fecha exacta. */
.cob-porfecha { margin-bottom: 6px; }
.cob-porfecha > summary {
  cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  padding: 4px 2px; display: inline-flex; align-items: center; gap: 6px;
}
.cob-porfecha > summary::-webkit-details-marker { display: none; }
.cob-porfecha > summary::before { content: '▸'; color: var(--accent); font-size: 11px; display: inline-block; transition: transform .12s; }
.cob-porfecha[open] > summary::before { transform: rotate(90deg); }
.cob-sem-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 2px 6px; }

/* Modo LISTA (variante B): la fila se aprieta al máximo — mismo contenido, menos
   aire vertical, para caber 12+ casos. NO baja ninguna tipografía (solo el
   padding y la altura mínima ceden). El filo de 4px sigue igual de visible. */
.hqueue.cob-lista .hrow { min-height: 46px; padding-top: 4px; padding-bottom: 4px; }
.hqueue.cob-lista .hrow-body { gap: 2px; }

/* ═══ fin LOTE B ═══ */

/* ============================================================
   Modal de gestión de cobranza — quick wins UX (20 jul 2026)
   ✕ cerrar · afordancia de desplegables · zona destructiva
   separada · botón danger · destino WhatsApp · flash de "Armar".
   ============================================================ */
/* ✕ arriba a la derecha (ítem 2: cerrar ≠ cancelar la póliza). */
.cob-modal-x {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; color: var(--text-muted);
  border-radius: 7px; transition: background .13s, color .13s;
}
.cob-modal-x:hover { background: var(--rgl-surface-soft, #F1F5F9); color: var(--text-primary); }
/* link chico "cerrar" (opción segura, sin peso). */
/* 5 ago noche («¿QUÉ ES ESTO?» de Paula sobre el bloque Estado de gestión):
   la explicación larga del modal se pliega tras «¿Qué es esto?» — una línea
   visible, el detalle a un clic, mismo patrón C14. */
.cob-estado-mas { display: inline; }
.cob-estado-mas > summary { display: inline; cursor: pointer; color: var(--rgl-indigo-300); font-weight: 600; list-style: none; }
.cob-estado-mas > summary::-webkit-details-marker { display: none; }
.cob-estado-mas[open] { display: block; margin-top: 4px; }

.cob-cerrar-link {
  border: none; background: none; cursor: pointer; color: var(--text-muted);
  font-size: 12px; font-weight: 600; text-decoration: underline; padding: 4px 8px;
}
.cob-cerrar-link:hover { color: var(--accent); }
/* Desplegables del modal con FLECHA visible (ítems 5/8: se notaba que no abrían). */
.cob-det > summary {
  cursor: pointer; list-style: none; font-size: 12px; font-weight: 700;
  color: var(--text-muted); display: flex; align-items: center; gap: 6px;
  padding: 3px 0;
}
.cob-det > summary::-webkit-details-marker { display: none; }
.cob-det > summary::before {
  content: '▸'; color: var(--accent); font-size: 11px; transition: transform .12s;
  display: inline-block;
}
.cob-det[open] > summary::before { transform: rotate(90deg); }
.cob-det > summary:hover { color: var(--accent); }
/* Destello del recuadro de mensaje al "Armar" (ítem 5: feedback claro). */
@keyframes cobMsgFlash { 0% { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); } 100% { box-shadow: none; } }
.cob-msg-flash { animation: cobMsgFlash 1.1s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .cob-msg-flash { animation: none; } }
/* Destino WhatsApp: verde/rojo según validez del número. */
.cob-wa-ok   { color: var(--rgl-indigo-300); }
.cob-wa-warn { color: var(--rgl-urgency-high-text); }
/* Zona destructiva SEPARADA del resto (ítem 2). */
.cob-danger-zone {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--card-bd);
}
.cob-danger-trigger {
  border: 1px solid var(--err-bd); background: var(--err-bg);
  color: var(--rgl-urgency-high-text); font-weight: 700; font-size: 12.5px;
  padding: 8px 14px; border-radius: 7px; cursor: pointer; width: 100%;
  transition: background .13s;
}
.cob-danger-trigger:hover { background: #FCE7E5; }
#cob-cancelada-confirm {
  margin-top: 10px; padding: 12px 14px; border: 1px solid var(--err-bd);
  background: var(--err-bg); border-radius: 8px;
}
.cob-motivo-op {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  cursor: pointer; padding: 3px 0;
}
/* Botón DANGER (rojo relleno) — la confirmación destructiva. */
.btn-danger { background: var(--rgl-urgency-high); color: #fff; }
.btn-danger:hover { background: #B42318; }
.btn-danger:disabled { background: #E5A9A3; cursor: not-allowed; }

/* ============================================================
   Modal de gestión de cobranza — RECONSTRUCCIÓN (21 jul 2026)
   Diseño de Paula: contexto → qué se ha hecho (historial ARRIBA) →
   qué toca (selector) → armar/editar → enviar (iconos) → registrar (terna).
   Sustracción, no parche: mueren «Lo envié»/«Confirmar envío»/«Guardar
   gestión»/«Ver los textos Bcobra»; nace la botonera de 3 en igual jerarquía.
   ============================================================ */
/* Modal más compacto: el camino cotidiano cabe en 1366×768 sin scroll. */
.cob-modal { padding: 20px 22px; }
.cob-modal .modal-desc.cob-resumen { margin-bottom: 12px; }

/* Historial ARRIBA: línea de glosa "Última gestión…" que despliega el historial. */
.cob-hist-top { margin: 0 0 12px; }
.cob-hist-top > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; background: var(--accent-soft); border-radius: var(--rgl-r-sm);
  font-size: 12px; color: var(--text-secondary);
}
.cob-hist-top > summary::-webkit-details-marker { display: none; }
.cob-hist-top > summary::after {
  content: '▸'; color: var(--accent); font-size: 11px; margin-left: auto; transition: transform .12s;
}
.cob-hist-top[open] > summary::after { transform: rotate(90deg); }
.cob-hist-glosa { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cob-hist-cont { font-weight: 700; color: var(--accent); flex: 0 0 auto; }

/* Etiqueta chica de sección (Mensaje / Nota). */
.cob-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; }

/* Selector + Armar en una fila (dibujo de Paula: "conectados"). */
.cob-sel-row { display: flex; gap: 8px; align-items: stretch; }
.cob-sel { flex: 1 1 auto; min-width: 0; }
.cob-armar-btn { flex: 0 0 auto; }
.cob-armar-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Tip "qué toca HOY" (Paula 21 jul, C7): informa el aviso que corresponde SIN
   precargar el selector — el auto-arme al abrir causaba el «Bcobra fantasma». */
.cob-toca-tip { font-size: 12px; color: var(--text-muted); margin: 5px 0 2px; }
.cob-toca-tip:empty { display: none; }
.cob-toca-tip strong { color: var(--accent); font-weight: 700; }

/* Control de alias (Paula 21 jul, C9: «se ve súper chico»): texto ≥12px y el lápiz/
   ＋ leen como CONTROL (borde + color de acción), no como adorno gris apagado. */
.cob-alias-chip { font-size: 12px; }
.cob-alias-ctrl {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; min-height: 28px; padding: 2px 8px; margin-left: 4px;
  font-size: 13px; line-height: 1; font-weight: 600; color: var(--accent);
  background: none; border: 1px solid var(--card-bd); border-radius: var(--rgl-r-sm);
  cursor: pointer; vertical-align: middle; transition: background .12s, border-color .12s;
}
.cob-alias-add { font-size: 12px; }
.cob-alias-ctrl:hover { background: var(--accent-soft); border-color: var(--accent); }
.cob-alias-ctrl:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Zona editable del mensaje. */
.cob-msg-ta { width: 100%; height: 96px; padding: 8px; resize: vertical; font-size: 12px; margin-top: 6px; }

/* Fila destino WhatsApp + iconos secundarios. */
.cob-actions-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; flex-wrap: wrap; }
.cob-wa-dest { font-size: 12px; }
.cob-icons { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.cob-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--rgl-pewter-300);
  border-radius: var(--rgl-r-sm); background: #fff; cursor: pointer;
  color: var(--rgl-pewter-400); transition: background .12s, color .12s, border-color .12s;
}
.cob-icon-btn:hover { background: var(--accent-soft); color: var(--rgl-indigo-300); border-color: var(--rgl-indigo-300); }
.cob-icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.cob-icon-btn:focus-visible { outline: 2px solid var(--rgl-indigo-300); outline-offset: 1px; }
/* WhatsApp verde de marca — ÚNICA excepción de verde junto a Pagada (✅ Paula 21 jul). */
.cob-icon-wa { color: #128C4B; border-color: #A6E9BF; }
.cob-icon-wa:hover { background: #E9FBF0; color: #0E7A41; border-color: #25D366; }

/* ── Teléfono corregible (21d) ─────────────────────────────────
   La sugerencia «¿le falta el 9?» es un LINK de precarga (índigo de acción,
   12px piso) — jamás se pinta como si fuera el número real del destino. */
.cob-tel-sug { font-size: 12px; color: var(--text-muted); min-height: 0; margin-top: 3px; }
.cob-tel-sug:empty { display: none; }
.cob-tel-sug-btn {
  border: none; background: none; padding: 0; cursor: pointer;
  color: var(--rgl-indigo-300); font-size: 12px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px;
}
.cob-tel-sug-btn:hover { color: var(--rgl-indigo-400); }
/* Confirmación de actualización del maestro — AZUL (gestión, regla 9). */
.cob-confirm-tel { border: 1px solid var(--accent); background: var(--accent-soft); }
.cob-confirm-tel .cob-confirm-t { color: var(--rgl-indigo-300); }

/* Nota opcional (bajo la zona del mensaje). */
.cob-nota-wrap { margin-top: 10px; }
.cob-addnota { border: none; background: none; cursor: pointer; color: var(--accent); font-size: 12px; font-weight: 600; padding: 2px 0; }
.cob-addnota:hover { text-decoration: underline; }

/* BOTONERA de 3 — misma jerarquía y tamaño; el primario se distingue SOLO por color. */
.cob-terna { display: flex; gap: 8px; margin-top: 14px; }
.cob-terna-btn {
  flex: 1 1 0; min-height: 40px; padding: 9px 6px; border-radius: var(--rgl-r);
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700;
  cursor: pointer; text-align: center; transition: background .12s, border-color .12s, color .12s;
}
.cob-btn-canc { background: #fff; border: 1px solid var(--err-bd); color: var(--rgl-urgency-high-text); }
.cob-btn-canc:hover { background: var(--err-bg); border-color: var(--rgl-urgency-high); }
.cob-btn-pago { background: #fff; border: 1px solid var(--ok-bd); color: var(--rgl-success-green); }
.cob-btn-pago:hover { background: var(--ok-bg); border-color: var(--ok); }
.cob-btn-gest { background: var(--rgl-grad-btn); border: 1px solid var(--rgl-indigo-400); color: #fff; box-shadow: 0 1px 2px rgba(6,16,31,.18); }
.cob-btn-gest:hover:not(:disabled) { background: var(--rgl-indigo-400); }   /* plano (✅ 10-ago, azules planos) */
.cob-btn-gest:disabled { opacity: .5; cursor: not-allowed; }
.cob-gest-hint { font-size: 11.5px; margin-top: 5px; min-height: 15px; }

/* Editor de teléfono con PREFIJO FIJO (29b — pedido de Paula probando el espejo):
   el «+56 9» no se edita ni desaparece, y el abonado va separado 4 y 4 para ver de
   una cuántos dígitos faltan. El prefijo se lee como parte del campo, no como texto
   suelto: mismo borde, pegado, fondo gris para que se note que no se escribe ahí. */
.cob-tel-pfx {
  display: inline-block; padding: 4px 7px; font-size: 12px; font-weight: 700;
  color: var(--text-secondary);   /* tabular-nums: regla pareja §12b */
  background: var(--rgl-pewter-50, #F3F4F6); border: 1px solid var(--rgl-border-medium);
  border-right: none; border-radius: 6px 0 0 6px; vertical-align: middle;
}
.cob-tel-inp {
  display: inline-block; width: 104px; padding: 4px 7px; font-size: 12px;
  letter-spacing: .04em;   /* tabular-nums: regla pareja §12b */
  border-radius: 0 6px 6px 0; vertical-align: middle;
}
.cob-tel-ayuda { margin-top: 4px; font-size: 11px; line-height: 1.35; }
.cob-tel-faltan { color: var(--rgl-urgency-medium-text); font-weight: 700; }
.cob-tel-listo  { color: var(--rgl-success-green); font-weight: 700; }

/* Bloqueo de WhatsApp con número imposible (29b · A2 — Alertas #32, Ley 21.719).
   Ámbar: es un freno con explicación, no un error del sistema. */
.cob-wa-bloqueo {
  margin-top: 8px; padding: 9px 11px; border-radius: 8px; font-size: 11.5px; line-height: 1.4;
  border: 1px solid var(--err-bd); background: var(--err-bg); color: var(--rgl-urgency-high-text);
}
.cob-wa-bloqueo-abierto {
  border-color: var(--warn-bd); background: var(--warn-bg); color: var(--rgl-urgency-medium-text);
}
.cob-wa-forzar { font-size: 11.5px; padding: 4px 10px; min-height: 28px; }

/* «+ otras acciones» (29b · A1 — ✅ dirección de Paula 23 jul): la casa de las
   acciones raras, DEBAJO de la terna, que no le suben jerarquía a la terna.
   Deliberadamente discreto: link plegado, no un 4º botón. */
.cob-otras { margin-top: 8px; }
.cob-otras > summary {
  cursor: pointer; list-style: none; font-size: 12px; font-weight: 600;
  color: var(--accent); padding: 4px 0; display: inline-flex; align-items: center; gap: 5px;
}
.cob-otras > summary::-webkit-details-marker { display: none; }
.cob-otras > summary:hover { text-decoration: underline; }
.cob-otras-body { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0 2px; }
.cob-otra-btn { min-height: 32px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; }
.cob-otras-nota { font-size: 11px; line-height: 1.3; flex: 1 1 180px; }
/* Confirmación de prórroga — ÁMBAR: no es terminal (no cierra la cuota) pero
   cambia la fecha de la deuda y apaga los avisos. Ni rojo ni verde. */
.cob-confirm-prorroga { border: 1px solid var(--warn-bd); background: var(--warn-bg); }
.cob-confirm-prorroga .cob-confirm-t { color: var(--rgl-urgency-medium-text); }

/* Bloques de confirmación (canceló / pagada). */
.cob-confirm { margin-top: 10px; padding: 12px 14px; border-radius: 8px; }
.cob-confirm-canc { border: 1px solid var(--err-bd); background: var(--err-bg); }
.cob-confirm-pago { border: 1px solid var(--ok-bd); background: var(--ok-bg); }
.cob-confirm-t { font-size: 12.5px; font-weight: 700; color: var(--rgl-urgency-high-text); margin-bottom: 2px; }
.cob-confirm-t-ok { color: var(--rgl-success-green); }
/* "Confirmar pago" — verde relleno (pago confirmado = verde, excepción regla 9). */
.cob-btn-pago-ok { background: var(--ok); color: #fff; }
.cob-btn-pago-ok:hover { background: #128C4B; }
.cob-btn-pago-ok:disabled { background: #9BD5AF; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════
   REDISEÑO 3 PANTALLAS (mié 5 ago 2026) — Renovaciones, Clientes
   y Pólizas pasan de TABLA a la misma composición de «Mi gestión»
   y Cobranzas: título compacto · barra con sello · hero de una
   frase · pestañas de filtro · cola-documento.
   REUSA todo lo que ya existe (hbar / hhero / htabs / hqueue /
   hband / hrow / hkey / hrow-plazo / hrow-btn / chip / dias-badge).
   Acá viven SOLO las piezas que faltaban. Piso de 12px, sin
   excepciones (guarda de Paula, 23 jul).
   ════════════════════════════════════════════════════════════ */

/* Título compacto de pantalla + sus acciones a la derecha. Misma tipografía
   que el título de Cobranzas (que lo llevaba en estilos inline). */
.rgl-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.rgl-head-t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.rgl-h1 {
  font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 800;
  color: var(--rgl-primary); letter-spacing: -.3px; margin: 0;
}
.rgl-head-sub { font-size: 12px; }
.rgl-head .row-acts { display: flex; gap: 8px; flex-wrap: wrap; }
/* Estado de LOGRO donde antes había un botón que no aplicaba (5 ago, R7 de Paula):
   se lee como estado, no como control — sin borde, sin sombra, sin cursor de clic. */
.ren-logro { display: inline-flex; align-items: center; font-size: 13px; padding: 7px 2px; }

/* 5 ago noche, 2ª pasada («sigue verde»): el aviso ÁMBAR del arrastre — otros
   meses cargan críticas vencidas. Es un botón de verdad (clic = ir al mes más
   antiguo con críticas), en tono de atención, jamás verde ni rojo-pánico. */
.ren-arrastre {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px; border-radius: 999px;
  background: var(--warn-bg); border: 1px solid var(--rgl-urgency-medium-fill);
  color: var(--rgl-urgency-medium-fill);
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.ren-arrastre:hover { filter: brightness(.96); }

/* Fila de controles bajo las pestañas (hoy: la búsqueda). Gemela de
   .cob-controls / .cob-search — se declara con nombre neutro porque ya la
   usan tres pantallas que no son cobranza. */
.rgl-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.rgl-search {
  flex: 0 1 300px; min-width: 168px; padding: 8px 12px;
  font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--text-primary);
  border: 1px solid var(--rgl-border-medium); border-radius: var(--rgl-r); background: var(--rgl-surface);
}
.rgl-search:focus { outline: 2px solid var(--rgl-indigo-300); outline-offset: 1px; border-color: var(--rgl-indigo-300); }

/* Descriptor largo a la derecha de la 1ª línea («qué hacer» de una renovación,
   producto de una póliza): se trunca con puntos suspensivos y el texto completo
   queda en el title. Nunca baja de 12px — se corta, no se achica. */
.hrow-accion-w { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }

/* Nivel del diagnóstico de renovación (crítico/urgente/atención/al día) como
   PUNTITO del DS — reemplaza los emojis 🔴🟠🟡✅ de la tabla vieja. La palabra
   viaja en el title; el color es el mismo idioma de urgencia de todo el sistema. */
.ren-nivel {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle; flex: 0 0 auto;
  background: var(--rgl-pewter-300);
}
.ren-nivel-critico  { background: var(--rgl-urgency-high); }
.ren-nivel-urgente  { background: var(--rgl-urgency-medium-fill); }
.ren-nivel-atencion { background: var(--rgl-urgency-medium-text); }
.ren-nivel-ok       { background: var(--rgl-pewter-200); }

/* ── P20 ② (✅ Paula 10-ago, «darle más énfasis») · LA CAJA «QUÉ HACER» del
   modal de renovación. La acción completa era la 3ª línea gris del subtítulo y
   se perdía; ahora es una caja propia con la misma familia visual de la caja
   «El sistema ya sospecha» (superficie clara, borde de tarjeta, radio 8px),
   con un filete índigo a la izquierda que le da la jerarquía SIN usar el azul
   primario de botón (ese es de «Gestionar» y de nadie más — regla ① del DS).
   Nada baja del piso de 12px. */
.ren-qh {
  margin-top: 10px; padding: 10px 12px;
  background: var(--rgl-surface);
  border: 1px solid var(--card-bd);
  border-left: 3px solid var(--rgl-indigo-300);
  border-radius: var(--rgl-r, 8px);
}
.ren-qh-t {
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--text-muted); text-transform: uppercase;
  margin-bottom: 3px;
}
.ren-qh-x { font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.ren-qh-sub { font-size: 12px; line-height: 1.4; margin-top: 5px; }
/* S-82 (✅ Paula 10-ago, REN-reglas §G VIGENTE) · la ACCIÓN DE LA VENTANA,
   versión larga DESTACADA dentro del modal (patrón P20/V20: fila = etiqueta
   corta · modal = versión larga). Índigo como toda acción; la vencida («ULTRA
   CRÍTICO») va en el rojo de texto — el color codifica urgencia, no decora. */
.ren-qh-vent { font-size: 12px; font-weight: 700; margin-top: 6px; color: var(--rgl-indigo-300); }
.ren-qh-vent-critica { color: var(--rgl-urgency-high-text); }

/* Pre-diagnóstico dentro del panel ⓘ: una línea por marca, con su puntito. */
.ren-pd-row { display: flex; gap: 8px 16px; flex-wrap: wrap; margin: 6px 0 4px; }
.ren-pd-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }

/* Filas de CONSULTA (Clientes y Pólizas): la tarjeta-fila entera abre la ficha. */
.hrow[data-ficha] { cursor: pointer; }

/* El pie de la cola ya no cuelga de una tabla: deja de ser una barra gris con
   borde y vuelve a ser lo que es — una línea de procedencia, discreta. */
#ren-foot, #cli-foot, #pol-foot {
  background: none; border: none; padding: 8px 2px;
  font-size: 12px; color: var(--text-muted);
}

/* EL CERO ES UN LOGRO: una pestaña de urgencia en cero cambia el puntito rojo
   por el check VERDE del DS y su número deja de gritar (mismo idioma que el
   «0 críticas» en verde que tenía la tarjeta vieja, .rgl-cero-logro). */
.htab-urg .rgl-check-bueno { font-size: 13px; }
.htab-n.htab-n-logro { background: var(--ok-bg); color: var(--rgl-success-green); }
.htab.active .htab-n.htab-n-logro { background: var(--ok-bg); color: var(--rgl-success-green); }

/* La pastilla de especie del cliente (EMP/PER) fuera de la cola: la MISMA
   etiqueta, pero en línea con el texto que la acompaña (título de la ficha).
   Dentro de una fila flex el navegador la vuelve a tratar como bloque flex:
   la fila y la ficha comparten pieza sin que ninguna cambie de aspecto. */
.hrow-tipo.tipo-inline { display: inline-flex; vertical-align: middle; }

/* Piso de celular: el título y sus acciones se apilan; el descriptor largo
   deja de tener tope de ancho (la fila ya envuelve). */
@media (max-width: 820px) {
  .rgl-head { flex-direction: column; align-items: stretch; }
  .hrow-accion-w { max-width: 100%; }
  .rgl-search { flex: 1 1 100%; }
}

/* ═══ fin REDISEÑO 3 PANTALLAS ═══ */


/* ════════════════════════════════════════════════════════════
   LA PORTADA — la zona superior unificada de las 5 pantallas
   (mié 5 ago 2026 · ✅ Paula sobre la maqueta v2 «una sola casa»)

   Cuatro bandas SIEMPRE en el mismo orden, en Mi gestión,
   Cobranzas, Renovaciones, Clientes y Pólizas:
     0 · riel de avisos  (condicional — 0px la mayoría de los días)
     1 · título          (.rgl-head / .rgl-h1 — lo más grande)
     2 · tarjeta de estado (.hbar — sello · una cifra · medidor/ⓘ)
     3 · controles       (.rgl-barra — pestañas + buscador, UNA fila)
   Entre la banda 3 y la primera fila de la cola NO va nada.

   Esto RE-ORDENA: no inventa ni un color ni una tipografía. Todo
   sale de los tokens del DS. Piso duro de 12px, sin excepciones.
   ════════════════════════════════════════════════════════════ */

/* ── BANDA 0 · EL RIEL DE AVISOS ────────────────────────────────
   Una línea, con ✕. PROHIBIDO EL ROJO: el rojo es de los casos
   urgentes de la cola, y un aviso que se puede cerrar no es un
   caso crítico. Ámbar si pide acción · azul si solo informa. */
.rgl-riel {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; padding: 8px 6px 8px 0; min-height: 38px;
  background: var(--warn-bg); border: 1px solid var(--warn-bd);
  border-left: 4px solid var(--rgl-urgency-medium-fill);
  border-radius: var(--rgl-r);
  font-size: 13px; color: var(--warn);
}
/* Con display:flex declarado, el `hidden` del navegador queda pisado:
   sin esta regla la ✕ minimiza el aviso y el riel se sigue viendo. */
.rgl-riel[hidden] { display: none; }
.rgl-riel.riel-info {
  background: #EAF4FA; border-color: #BBDCEC;
  border-left-color: var(--rgl-info-blue); color: var(--rgl-info-blue);
}
.rgl-riel-txt { flex: 1 1 auto; min-width: 0; padding-left: 12px; line-height: 1.35; }
.rgl-riel-a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
/* La ✕ NO destruye: MINIMIZA. 32×32px de área de clic (Coni, notebook). */
.rgl-riel-x {
  flex: 0 0 auto; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--rgl-r-sm);
  color: inherit; cursor: pointer;
}
.rgl-riel-x:hover { background: rgba(0,0,0,.06); }
.rgl-riel-x:focus-visible { outline: 2px solid var(--rgl-indigo-300); outline-offset: 1px; }
/* El aviso minimizado: chip al final de la fila de pestañas, a un clic de volver. */
.rgl-riel-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--warn-bg); border: 1px solid var(--warn-bd); color: var(--warn);
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
  cursor: pointer; align-self: center; margin-left: 6px;
}
.rgl-riel-chip:hover { background: #FDECD2; }
.rgl-riel-chip:focus-visible { outline: 2px solid var(--rgl-indigo-300); outline-offset: 2px; }
.rgl-riel-chip[hidden] { display: none; }

/* ── BANDA 2 · la tarjeta de estado ─────────────────────────────
   El sello en dos líneas deja de ir con estilo escrito a mano en
   el JS y pasa a tener nombre (misma pinta, una sola fuente). */
.hbar-sello-col { flex-direction: column; align-items: flex-start; gap: 3px; }

/* UN SOLO PROTAGONISTA POR BANDA (regla nueva, comentarios de Paula 17:08):
   la única cifra que sobrevive en la banda 2 se dice a 14px; el resto del
   sello se queda en 12px gris. Si sobraran dos del mismo peso, la segunda
   se va al ⓘ. */
.rgl-cifra { font-size: 14px; line-height: 1.25; }

/* LA BARRA MIDE EL DÍA, NO LA COLA ENTERA (Paula, 5 ago tarde: «si siempre
   van apareciendo y desapareciendo, nunca va a estar llena; genera sensación
   de carencia permanente»). El texto del avance vive en el title/aria-label
   de la barra — por eso el cursor de ayuda. */
.hbar-prog-track[title] { cursor: help; }
/* Y cuando el día se termina, se ve: mismo patrón cero-logro del DS.
   7-ago: el RELLENO al 100% era VERDE y eso contradice el DS —
   DESIGN-RGL.md §Progress bars: «The progress fill uses the brand indigo —
   management progress is NOT green (green is reserved for objectively good
   outcomes)», y §Check semantics: «Management progress is never painted green».
   Gestionar el día no es buena noticia (gestionar puede ser cancelar). El
   «terminado» se sigue viendo, pero con el índigo profundo de la marca; quien
   celebra es el chip «✓ Día cerrado» de al lado. */
.hbar-prog-fill.is-listo { background: var(--rgl-indigo-400); }
.hbar-dia-cerrado {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  background: var(--ok-bg); border: 1px solid var(--ok-bd); color: #17603A;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
  cursor: default; user-select: none;
}
/* En pantallas de CONSULTA no hay medidor: la ausencia de barra ya dice «acá
   no hay pega que avanzar». El chip solo lo nombra — jamás parece un botón. */
.rgl-solo-lectura {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  background: var(--rgl-bg-page); border: 1px solid var(--rgl-border-medium); color: var(--text-muted);
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600;
  cursor: default; user-select: none;
}
/* El ⓘ baja de 34 a 28px: deja de competir con el H1, y queda en el MISMO
   píxel en las 5 pantallas. Mantiene su aire de 8px para el dedo/el mouse. */
.hbar-info { width: 28px; height: 28px; margin: 4px; }
.hbar-info svg { width: 16px; height: 16px; }

/* ── BANDA 3 · el envoltorio de controles ───────────────────────
   Pestañas a la izquierda + buscador (y lo que la pantalla tenga) a la
   derecha, en UNA fila. Mata la fila propia del buscador: 40px menos en
   cuatro pantallas. El borde inferior lo lleva el envoltorio. */
.rgl-barra {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--rgl-border-medium); margin-bottom: 8px;
}
.rgl-barra .htabs { flex: 1 1 auto; border-bottom: none; margin-bottom: 0; }
.rgl-barra-der { display: flex; align-items: center; gap: 8px; padding-bottom: 5px; }
/* La ÚNICA flexibilidad de toda la Portada: una segunda fila, y solo para el
   MISMO componente .htabs (las camadas de mes de Renovaciones — idea de Paula,
   R5). Dos filas de la misma pieza no se leen como una capa nueva. */
.rgl-barra-2 { flex-direction: column; align-items: stretch; gap: 0; }
.rgl-barra-2 .htabs-mes { border-bottom: 1px solid var(--rgl-border-light); margin-bottom: 0; }
/* 5 ago noche (pantallazo de Paula: «estas de meses un poco más grandes que
   las pestañas filtros de abajo»): la fila de MESES es la decisión madre y las
   pestañas de filtro son sus hijas — la jerarquía se dice con el tamaño. */
.htabs-mes .htab { font-size: 14.5px; padding-top: 9px; padding-bottom: 9px; }
.rgl-barra-2 .rgl-barra-fila {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
/* El número de la camada de mes conserva su color de COMPOSICIÓN (arreglo R2
   del 5 ago: rojo solo si el mes tiene críticas), ahora dentro de la pieza
   .htab. Es la misma pastilla que .htab-n, con el color de .tab-count-*. */
.htab .tab-count {
  padding: 1px 7px; border-radius: 999px;
  background: var(--rgl-border-medium);
  font-size: 12px; font-weight: 700;   /* 10,5px → 12px: barrido del piso (✅ Paula 10-ago); tabular-nums lo pone la regla pareja de §12b */
}
.htab.active .tab-count { background: var(--accent-soft); }

/* 🟠 2 (✅ Paula sobre la maqueta): las pestañas de urgencia muestran SIEMPRE
   su palabra. Nada esencial puede depender de hover — Coni trabaja en
   notebook. Supera la regla del 18–19 jul (palabra solo al activarse), que
   sigue declarada arriba en §11 TABS y queda anulada acá a propósito. */
.htab-urg .htab-word { display: inline; }

/* Foco visible en las cuatro bandas (guarda «si soy la Coni»). */
.htab:focus-visible,
.rgl-solo-lectura:focus-visible { outline: 2px solid var(--rgl-indigo-300); outline-offset: 2px; }

/* Piso de notebook angosto y de celular: la banda 3 se apila, el buscador
   toma el ancho, y las pestañas hacen scroll horizontal antes que apilarse
   en dos líneas (se trunca, jamás se achica por debajo de 12px). */
@media (max-width: 900px) {
  .rgl-barra { align-items: stretch; }
  .rgl-barra .htabs { flex-wrap: nowrap; overflow-x: auto; }
  .rgl-barra-der { padding-bottom: 8px; }
  .rgl-search { flex: 1 1 100%; }
}

/* ═══ fin LA PORTADA ═══ */

/* ═══════════════════════════════════════════════════════════════════════════
   PROYECTO CONTACTO · E1+E2 (✅ Paula 19-ago) — la persona de contacto
   Las clases y los valores salen TAL CUAL del prototipo v2 que ella aprobó
   («estoy ok con el prototipo v2»), que ya venía escrito con las variables y
   tipografías reales de este design system. No se inventó ni un color.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La línea-frase: «nombre — relación · teléfono ✏️». */
.ct-linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ct-nombre { font-weight: 700; color: var(--rgl-navy-darkest); }
.ct-rel { color: var(--text-secondary); }
.ct-lapiz { background: none; border: none; cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 6px; }
.ct-lapiz:hover { background: var(--accent-soft); }
.ct-lapiz:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* El caso sin datos: 678 de 1.016 clientes activos. Se dice, no se finge. */
.ct-aviso-sin { color: var(--warn); font-size: 12px; font-weight: 600; }

/* El botón ➕ (Paula eligió botón, no checkbox: «se explica solo»). */
.ct-add {
  font-size: 12.5px; font-weight: 700; color: var(--rgl-info-blue);
  background: none; border: 1px dashed #BBDCEE; border-radius: 999px;
  padding: 3px 11px; cursor: pointer;
}
.ct-add:hover { background: #EAF4FA; }
.ct-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* El mini-formulario del ➕ / del lápiz. */
.ct-form {
  margin-top: 10px; border: 1px dashed var(--rgl-indigo-300); border-radius: var(--rgl-r);
  padding: 10px 12px; background: var(--rgl-surface, #fff);
}
.ct-form[hidden] { display: none; }
.ct-form label { display: block; font-size: 10.5px; color: var(--text-muted); margin: 8px 0 3px; }
.ct-form input { width: 100%; max-width: 340px; font: inherit; font-size: 13px; padding: 7px 10px;
  border: 1px solid var(--rgl-border-medium); border-radius: 8px; background: #fff; }
.ct-form .nota { font-size: 12px; color: var(--rgl-info-blue); font-weight: 600; margin-top: 10px; }
.ct-form .acciones { margin-top: 12px; display: flex; gap: 8px; }

/* ── R2 · EL BLOQUE LÍNEA + ICONOS (✅ Paula 19-ago, panel 5.1 «sí») ──────────
   El «a quién» se dice UNA vez, en una línea de texto, y las acciones van como
   iconos de 38×38 debajo. Es el `cob-actions-row` del modal de cobranza traído
   a las dos fichas: la pieza ya existía, acá solo se la deja respirar.
   ⛔ Murieron con esta firma las reglas `.wa-grupo/.wa-main/.wa-etq` de la
      primera vuelta (el botón-con-texto «WhatsApp a Rodrigo»). */
.com-bloque { display: flex; flex-direction: column; gap: 6px; position: relative; align-items: flex-start; min-width: 0; max-width: 100%; }
/* R3 · P3-H de Codex: nombre y relación aceptan 100 caracteres cada uno, y un
   texto largo SIN espacios (un correo, un nombre pegado) desbordaba la caja en
   vez de cortarse. `overflow-wrap: anywhere` parte donde sea antes que romper el
   layout; `min-width: 0` es lo que permite que un hijo de flex se encoja. */
.com-linea { line-height: 1.5; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.com-iconos { margin-top: 2px; }
/* La flechita ▾ vive en la LÍNEA (5.2), no colgando de un botón. */
.ct-flecha {
  background: none; border: none; cursor: pointer; padding: 0 4px;
  font-size: 13px; line-height: 1; color: var(--accent); border-radius: 6px;
}
.ct-flecha:hover { background: var(--accent-soft); }
.ct-flecha:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wa-menu {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 60; width: 300px;
  max-width: min(300px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--card-bd); border-radius: var(--rgl-r);
  box-shadow: 0 10px 26px rgba(6,16,31,.14); padding: 6px; display: none;
  overflow-wrap: anywhere;   /* R3 · P3-H: un nombre de 100 chars sin espacios no desborda */
}
.wa-menu.open { display: block; }
/* CON-1 (29-ago): el ancla del menú cuando la línea del contacto vive dentro de
   un MODAL. Sin esto el `position:absolute` del menú se cuelga del cuadro
   entero y el desplegable aparece al pie del modal, no bajo su flechita. */
.ct-ancla { position: relative; display: inline-block; }
.mq-menu-cab {
  font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-muted); padding: 6px 10px 4px;
}
.mq-menu-it {
  display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; text-align: left;
  background: none; border: none; cursor: pointer; padding: 8px 10px;
  border-radius: var(--rgl-r-sm); font: inherit; font-size: 13px; color: var(--text-primary);
}
.mq-menu-it:hover { background: var(--accent-soft); }
.mq-menu-it > span, .mq-menu-info > span { min-width: 0; overflow-wrap: anywhere; }
.mq-menu-it .mq-menu-sub { display: block; font-size: 11px; font-weight: 500; color: var(--text-muted); }
.mq-menu-it:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* ── R2 · P1-1 de Codex: los ítems que NO son acciones se ven distinto ────────
   El menú viejo ofrecía dos «destinos» que abrían el MISMO chat. Ahora dice
   quién es quién (informativo, sin cursor de clic) y abajo, separadas, las
   acciones de verdad. Que no se puedan confundir es la mitad del arreglo. */
.mq-menu-info {
  display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; min-width: 0;
  font-size: 13px; color: var(--text-primary); cursor: default;
}
.mq-menu-info .mq-menu-sub { display: block; font-size: 11px; font-weight: 500; color: var(--text-muted); }
.mq-menu-ok { flex: 0 0 auto; color: var(--ok, var(--rgl-success-green)); font-weight: 700; }
.mq-menu-off { opacity: .62; }
.mq-menu-off .mq-menu-ok { color: var(--text-muted); }
.mq-menu-sep { height: 1px; background: var(--rgl-border-light, var(--card-bd)); margin: 5px 8px; }
.mq-menu-it-danger { color: var(--rgl-urgency-high-text, var(--err)); }
.mq-menu-it-danger:hover { background: var(--err-bg); }
/* Título del mini-formulario del contacto. */
.ct-form-t { font-size: 12.5px; font-weight: 700; color: var(--rgl-navy-darkest); margin-bottom: 2px; }

/* Hueco #1: la dirección de correo, VISIBLE junto al botón (no solo en hover —
   en pantalla táctil el hover no existe). */
.com-correo-dir {
  font-size: 12px; color: var(--text-muted); max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cob-correo-dest { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* DEST-1 (✅ Paula 31-ago) · LA ETIQUETA DE DUEÑO — «correo del titular», «tel
   del contacto». Es IDENTIDAD, no urgencia: por eso va en gris discreto y NO
   como chip ni con color propio (regla del DS: el color del CRM es del RELOJ —
   la misma decisión que tomó VEH-1 con la línea del vehículo). Una sola clase
   para las tres superficies que la usan (los 2 modales y las 2 fichas), así
   ajustarla es editar estas dos líneas. */
.ct-duenio { font-size: 11.5px; color: var(--text-muted); font-weight: 400; }

/* El nombre del cliente, cliqueable desde la ficha de la póliza (navegación
   enlazada ida y vuelta — ✅ Paula 19-ago, reemplaza al apilado de fichas). */
.pol-cli-link { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-style: dotted; }
.pol-cli-link:hover { color: var(--accent); }
.pol-cli-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════════
   EL ESQUELETO DE 5 ZONAS DE LOS MODALES DE GESTIÓN
   ✅ Paula, 20-ago-2026 (chat del PL), textual: «okey con la propuesta de
   diseño de renovación modal» — `docs/sesiones/2026-08-20/
   propuesta-diseno-modales-gestion.md:468`, §FIRMAS DE PAULA punto 4:
   *«esqueleto de 5 zonas, confirmación pegada al botón, muerte de "+ otras
   acciones", con el ajuste del punto 1»*.

   Las zonas se separan con una línea, no con una caja: el modal tiene que
   leerse como UN documento con orden, no como cinco tarjetas apiladas. El
   rótulo va en versalita gris (piso 11px es SOLO para este rótulo estructural,
   que no es contenido — el contenido sigue en 12px, regla D17).
   ════════════════════════════════════════════════════════════ */
.mg-zona { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--card-bd); }
.mg-zona-1 { margin-top: 4px; padding-top: 0; border-top: none; }
.mg-zona-t {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 7px;
}
.mg-zona-t .mg-zona-sub { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 11.5px; }
/* La fila de «Guardar gestión»: vive con la nota, en su zona, y ya NO comparte
   terna con los desenlaces (decisión 4 de la propuesta: son categorías
   distintas). Alineado a la derecha, como en el wireframe firmado. */
.mg-guardar { display: flex; justify-content: flex-end; margin-top: 10px; }
/* Los DESENLACES (zona 5): botones a ancho completo con su diferencia escrita
   en la MISMA línea — el patrón que ya usa «Resolver retención» (`.d-btn`
   secundario delineado, regla ① del DS del 7-ago: el azul es de «Gestionar» y
   de nadie más). Hallazgo ② de Paula: la diferencia que decide qué botón tocar
   no es una nota, es parte de la etiqueta — no puede vivir en un hover. */
.mg-salidas { display: flex; flex-direction: column; gap: 8px; }
.mg-salida {
  display: block; width: 100%; text-align: left; min-height: 40px;
  padding: 9px 12px; font-size: 13px; font-weight: 700;
}
.mg-salida .mg-salida-sub {
  display: block; font-size: 11.5px; font-weight: 400; line-height: 1.35;
  color: var(--text-muted); margin-top: 2px;
}
/* La sugerencia del sistema (S-80) bajo el campo que prellena: se dice de dónde
   salió y se puede deshacer en un clic. Nunca en silencio. */
.mg-sug { font-size: 11.5px; line-height: 1.4; margin-top: 5px; color: var(--text-muted); }
.mg-sug-quitar { border: none; background: none; cursor: pointer; color: var(--accent); font-size: 11.5px; font-weight: 600; padding: 0 2px; }
.mg-sug-quitar:hover { text-decoration: underline; }
.mg-pastillas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.mg-pastilla { min-height: 28px; padding: 4px 10px; font-size: 11.5px; font-weight: 700; }
/* La línea de solo lectura de una renovación YA resuelta (zona 4): lo que las
   cuatro opciones deshabilitadas del selector intentaban hacer. */
.mg-resuelta { font-size: 12.5px; font-weight: 700; padding: 8px 10px; border-radius: 8px;
  background: var(--rgl-surface); border: 1px solid var(--card-bd); }

/* ═══════════════════════════════════════════════════════════════════════════
   REGLAS DEL JUEGO · rediseño del 7-sep-2026 (auditorías UX/UI + textos)
   ───────────────────────────────────────────────────────────────────────────
   CERO colores nuevos, cero componentes nuevos: acá solo se ACOMODAN piezas
   que ya existen (.htabs · .hband · .tl-* · .pol-tbl · .mini-kpi/.mki-* ·
   .rgl-solo-lectura · .rgl-riel) a una pantalla de LECTURA LARGA, que es el
   único uso que el DS todavía no tenía. Ni un hex, ni una fuente, ni un tamaño
   bajo el piso de 12px. Las medidas de aire son las mismas del resto del DS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Las 7 preguntas son largas: la pestaña no se achica ni parte su pregunta en
   varias líneas. A lo angosto la fila hace scroll horizontal —que es lo que el
   DS ya declara para .rgl-barra— en vez de apretujarlas. Va con clase propia
   para no tocar la barra de las otras seis pantallas. */
.rgl-barra-reglas .htab { flex: 0 0 auto; white-space: nowrap; }

/* Una sección a la vez. `hidden` manda, aunque la pieza traiga display propio. */
.rgl-sec[hidden] { display: none; }
/* Piso de celular: ningún hijo de un flex puede negarse a encoger (era la causa
   del corte por la derecha a 390px). */
.rgl-sec, .rgl-sec .tl-content, .rgl-sec .hband-sub { min-width: 0; }

/* La bajada de la sección deja de estar pegada al borde: mismo aire de 18px que
   los ítems, y ancho de línea legible (~78 caracteres, no 190). */
.rgl-sec-intro { margin: 0; padding: 12px 18px 2px; font-size: 12.5px; line-height: 1.55; max-width: 78ch; }
.rgl-sec-riel { margin: 12px 18px 0; }
.rgl-sec .pol-tbl-wrap { margin: 12px 18px 14px; border-radius: var(--rgl-r); }
.rgl-sec .hqueue { margin: 12px 18px 14px; }

/* Las bandas, con su frase al lado. A lo angosto la frase baja de línea entera
   en vez de apretarse contra el nombre. */
.rgl-bandas .hband { flex-wrap: wrap; align-items: baseline; padding-top: 10px; padding-bottom: 10px; }
.rgl-bandas .hband-sub { flex: 1 1 340px; margin-left: auto; line-height: 1.5; white-space: normal; }

/* La escalera como línea de tiempo: el EJE del día es el número grande (es el
   dato que se busca en diagonal), con cifras de ancho parejo como manda el DS. */
.rgl-esc { padding: 14px 18px 2px; }
.rgl-esc .tl-time { width: 64px; padding-top: 2px; font-size: 17px; font-weight: 800;
                    color: var(--text-primary); }
.rgl-esc .tl-title { font-size: 13.5px; }
/* La UNIDAD del eje (✅ Paula 8-sep): «11-15» no dice si cuenta sábados. Va como
   chip neutro del DS —texto plano gris, sin caja— pegado al nombre, separado por
   un punto medio. Es dato de lectura, no una etiqueta que compita con el aviso. */
.rgl-esc .rgl-esc-unidad { font-size: 12px; margin-left: 7px; white-space: nowrap; }
.rgl-esc .rgl-esc-unidad::before { content: "· "; }
.rgl-esc .tl-meta  { font-size: 12.5px; line-height: 1.5; white-space: normal; max-width: 78ch; }

/* Tabla de consulta: no es una cola, así que no invita al clic y sus
   encabezados pueden partirse en dos líneas antes que empujar la página. */
.rgl-estados-tbl th { white-space: normal; }
.rgl-estados-tbl td { vertical-align: top; }
.rgl-estados-tbl tbody tr:hover td { background: none; cursor: default; }
.rgl-est-n { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.rgl-est-q { font-size: 12.5px; line-height: 1.5; }
.rgl-est-chip2 { margin-top: 5px; }

/* Las tarjetas de regla: la rejilla de .mini-kpis, con el nombre y la frase
   debajo de la cifra. Sin cifra cuando la regla no tiene ningún número. */
.rgl-cards { grid-template-columns: 1fr 1fr; align-items: start; }
.rgl-card-t { margin-top: 7px; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.rgl-card-p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); max-width: 78ch; }
.rgl-cias { margin: 10px 0 0 !important; }

/* La procedencia, plegada. Cerrada por defecto: sin abrirla se leen igual las
   29 reglas completas. */
.rgl-citas { margin: 2px 18px 14px; font-size: 12px; color: var(--text-muted); }
.rgl-citas > summary { cursor: pointer; padding: 6px 0; font-weight: 600; color: var(--text-secondary); }
.rgl-citas > summary:focus-visible { outline: 2px solid var(--rgl-indigo-300); outline-offset: 2px; }
.rgl-citas ul { margin: 4px 0 0; padding-left: 18px; line-height: 1.65; }
.rgl-sello-txt { font-size: 12px; }

@media (max-width: 820px) {
  .rgl-cards { grid-template-columns: 1fr; }
  .rgl-esc .tl-time { width: 52px; font-size: 15px; }
  .rgl-bandas .hband-sub { flex: 1 1 100%; margin-left: 0; }
  .rgl-sec-intro { padding-left: 14px; padding-right: 14px; }
  .rgl-sec-riel, .rgl-citas, .rgl-sec .pol-tbl-wrap, .rgl-sec .hqueue { margin-left: 14px; margin-right: 14px; }
  .rgl-esc { padding-left: 14px; padding-right: 14px; }
}
/* ═══ fin REGLAS DEL JUEGO ═══ */