/* =====================================================
   Casa Camejo — Main Stylesheet
   Green Theme · DS Intelligence © 2025
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── CSS Variables ───────────────────────────────── */
:root {
  /* Verdes de marca Camejo — oficiales, tomados de Camejo_ManualdeIdentidad.pdf
     (ver BRAND_COLORS.md). No inventar tonos: cualquier verde nuevo sale de ahí. */
  --primary:          #01d548;   /* verde primario brillante oficial */
  --primary-dark:     #025940;   /* verde primario oscuro oficial */
  --primary-darker:   #12332b;   /* verde secundario casi negro oficial */
  --primary-light:    #e9ffee;   /* verde menta muy claro oficial */
  --primary-xlight:   #f1faf2;   /* tinte derivado (no está en el manual) */
  --accent:           #b9ec54;   /* verde lima secundario oficial */
  --accent-dim:       #e3f5b0;   /* tinte derivado del lima */

  /* Fondo menta claro + sidebar verde oscuro Camejo */
  --bg:               #FAFAFA;
  --brand-dark:       #12332b;   /* verde secundario casi negro oficial */
  --sidebar-bg:       #ffffff;
  --sidebar-hover:    rgba(18,51,43,0.07);
  --sidebar-active:   #12332b;
  --card-bg:          #ffffff;
  --surface:          #ffffff;   /* fondo de tarjetas/celdas fijas (antes no existía → transparente) */

  --text-primary:     #15241a;
  --text-secondary:   #3b4a40;
  --text-muted:       #6b7c70;
  --text-hint:        #9aa89e;

  --border:           #eaf0e8;
  --border-light:     #f3f7f1;

  /* Semántica refinada — tonos suaves y cohesivos con el verde */
  --danger:           #f52744;
  --danger-dark:      #c41f36;
  --danger-light:     #fdeceb;
  --danger-border:    #f6d2cf;
  --warning:          #c2820a;
  --warning-light:    #fbf3df;
  --warning-border:   #efdcae;
  --info:             #4d7c5f;
  --info-light:       #e9f1ec;
  --info-border:      #cfe0d6;
  --success:          #039744;
  --success-light:    #e2f6e4;
  --success-border:   #d3eda1;

  --shadow-xs:        0 1px 2px rgba(21,41,26,0.04);
  --shadow-sm:        0 2px 8px rgba(21,41,26,0.05);
  --shadow-md:        0 6px 18px rgba(21,41,26,0.07);
  --shadow-lg:        0 12px 30px rgba(21,41,26,0.09);
  --shadow-xl:        0 24px 48px rgba(21,41,26,0.12);

  --radius:           12px;
  --radius-lg:        16px;
  --radius-xl:        20px;
  --radius-2xl:       26px;
  --radius-full:      9999px;
  --radius-md:        10px;
  --radius-sm:        8px;
  --radius-xs:        6px;
  /* Estados en chips y avisos (fondo / texto) */
  --ok-bg:            #dff5e7;
  --ok-text:          #1f6b3a;
  --mal-bg:           #fde3e7;
  --mal-text:         #a3132b;
  --aviso-bg:         #fff3cd;
  --aviso-text:       #7a5500;
  --neutro-bg:        #eef1ef;
  --neutro-text:      #4a5a50;

  --sidebar-width:    236px;
  --sidebar-width-collapsed: 68px;
  --topbar-height:    46px;
  --transition:       0.18s ease;

  /* Tarjetas blancas sólidas (look limpio de la referencia) */
  --glass-bg:         #ffffff;
  --glass-border:     #eef3ec;
  --glass-blur:       0px;
}

/* ── Reset ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Scroll funcional pero sin barra visible (se ve más limpio) */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none; }
html { font-size: 16px; scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text-primary);
  background: var(--bg) !important;    /* plano, sin capas ni gradientes, forzado */
  background-image: none !important;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  max-width: 100vw;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ── Layout ──────────────────────────────────────── */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--text-primary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 100;
  transition: transform var(--transition), width var(--transition);
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar::-webkit-scrollbar { width: 0; }

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
  position: relative;
}

.sidebar-logo-img {
  /* Logo horizontal de Camejo — el PNG tiene fondo blanco, igual que el sidebar */
  width: 92px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.sidebar-logo-text { flex: 1; min-width: 0; overflow: hidden; }
.sidebar-logo-text h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap;
}

.sidebar-logo-text p {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
}

.sidebar-collapse-btn {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--primary-darker);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition), left var(--transition);
  /* fixed (no absolute) para no quedar recortado por el overflow-x:hidden del
     sidebar — así flota sobre el borde igual que en el sistema de referencia. */
  position: fixed;
  top: 50%;
  left: var(--sidebar-width);
  transform: translate(-50%, -50%);
  z-index: 101;
  box-shadow: 0 1px 5px rgba(0,0,0,.18);
}
.sidebar-collapse-btn:hover { background: #eef4ec; color: var(--primary-darker); border-color: var(--primary); }
.sidebar-collapse-btn svg { width: 12px; height: 12px; transition: transform var(--transition); }
body.sidebar-collapsed .sidebar-collapse-btn { left: var(--sidebar-width-collapsed); }

.sidebar-nav {
  flex: 1;
  padding: 10px 9px;
}

.nav-section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-hint);
  padding: 8px 10px 3px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all var(--transition);
  position: relative;
  text-decoration: none;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
}
.nav-text { overflow: hidden; text-overflow: ellipsis; }

.nav-link:hover {
  background: var(--sidebar-hover);
  color: var(--primary-darker);
  text-decoration: none;
}

.nav-link.active {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
}

.nav-link.active::before { content: none; }

/* Un solo tamaño de ícono para el menú expandido y el colapsado */
.nav-icon,
body.sidebar-collapsed .nav-icon {
  width: var(--nav-icon-size, 12px);
  height: var(--nav-icon-size, 12px);
  min-width: var(--nav-icon-size, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--nav-icon-size, 12px);
  opacity: 0.85;
}
.nav-icon svg,
body.sidebar-collapsed .nav-icon svg { width: var(--nav-icon-size, 12px); height: var(--nav-icon-size, 12px); }

.nav-link.active .nav-icon { opacity: 1; }

.nav-badge[hidden] { display: none; }
.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
}

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}

.user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius);
  background: #f3f8f2;
  border: 1px solid var(--border-light);
}

.user-avatar {
  width: 34px;
  height: 34px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
}

.user-info { flex: 1; min-width: 0; }
.user-info #user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.user-info #user-role {
  font-size: 13px;
  color: var(--text-muted);
}

.logout-btn {
  background: none;
  border: none;
  color: var(--text-hint);
  padding: 5px;
  border-radius: var(--radius-xs);
  transition: all var(--transition);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logout-btn:hover { color: var(--danger); background: var(--danger-light); }

/* ── Sidebar colapsado (solo iconos) ─────────────── */
body.sidebar-collapsed .sidebar { width: var(--sidebar-width-collapsed); }
body.sidebar-collapsed .main-content { margin-left: var(--sidebar-width-collapsed); }

body.sidebar-collapsed .sidebar-logo-text,
body.sidebar-collapsed .nav-text,
body.sidebar-collapsed .nav-section-label,
body.sidebar-collapsed .user-info,
body.sidebar-collapsed .logout-btn {
  opacity: 0;
  width: 0;
  pointer-events: none;
  display: none;
}

body.sidebar-collapsed .sidebar-logo {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 14px 6px;
}

body.sidebar-collapsed .sidebar-logo-img {
  width: 100%;
  max-width: 52px;
}
body.sidebar-collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

body.sidebar-collapsed .nav-link {
  justify-content: center;
  padding: 9px 0;
  gap: 0;
}
body.sidebar-collapsed .nav-link.active::before { display: none; }

body.sidebar-collapsed .sidebar-nav { padding: 10px 8px; }
body.sidebar-collapsed .user-card { justify-content: center; padding: 8px; }

/* Tooltip flotante al pasar el cursor en modo colapsado */
body.sidebar-collapsed .nav-link::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  background: #0c251f;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 200;
  box-shadow: var(--shadow-md);
}
body.sidebar-collapsed .nav-link:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* ── Main Content ────────────────────────────────── */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left var(--transition);
}
.page-content > * { max-width: 100%; }

/* ── Topbar ──────────────────────────────────────── */
.topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 6px;
  border-radius: var(--radius);
  transition: all var(--transition);
}
.sidebar-toggle:hover { background: var(--border-light); color: var(--text-primary); }
.sidebar-toggle svg { display: block; }

.topbar-title { display: block; flex: 0 1 auto; min-width: 0; margin: 0 auto 0 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em;
  color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-title.con-ayuda { margin-right: 0; flex: 0 1 auto; }

/* Ayuda de la pantalla: la explicación larga de cada página vive aquí, junto al título, en vez de ocupar la parte de arriba */
.page-help { position: relative; margin-right: auto; flex-shrink: 0; }
.page-help-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.page-help-btn:hover, .page-help-btn[aria-expanded="true"] { color: var(--primary-dark); border-color: var(--primary); }
.page-help-btn svg { width: 15px; height: 15px; }
.page-help-pop { position: absolute; top: calc(100% + 8px); left: -8px; z-index: 60; width: min(440px, 80vw); padding: 12px 14px; border-radius: var(--radius);
  background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.page-help-pop[hidden] { display: none; }
.page-help-pop > * { margin: 0 !important; max-width: none !important; font-size: 13px !important; line-height: 1.55; color: var(--text-secondary) !important; display: block !important; }
.page-help-pop > * + * { margin-top: 8px !important; }

/* Header compacto: fecha + notificaciones a la derecha */
.topbar-notif { position: relative; flex-shrink: 0; }
.topbar-notif-btn {
  position: relative;
  width: 30px; height: 30px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.topbar-notif-btn svg { width: 16px; height: 16px; }
.topbar-notif-btn:hover { background: var(--border-light); color: var(--text-primary); }
.topbar-notif-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--danger); color: #fff;
  font-size: 12px; font-weight: 800;
  border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--card-bg);
}
.topbar-notif-badge.hidden { display: none; }
.topbar-notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 340px; max-width: 88vw;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 300; overflow: hidden; display: none;
}
.topbar-notif-panel.open { display: block; }
.topbar-notif-head {
  padding: 12px 16px; border-bottom: 1px solid var(--border-light);
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 7px;
}
.topbar-notif-list { max-height: 360px; overflow-y: auto; }
.notif-item {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 16px; border-bottom: 1px solid var(--border-light);
  text-decoration: none; color: inherit; transition: background var(--transition);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--border-light); text-decoration: none; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.notif-sub { font-size: 13px; color: var(--text-muted); margin-top: 1px; }
.notif-empty { padding: 26px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }

.topbar-date {
  font-size: 13px;
  color: var(--text-muted);
  background: rgba(0,0,0,0.04);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-left: auto;
}

.page-content {
  flex: 1;
  padding: 20px;
}

/* ── KPI Cards ───────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;        /* todas las filas con la misma altura */
  gap: 10px;
  margin-bottom: 18px;
}
.kpi-grid .kpi-card { height: 100%; }

.kpi-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 9px 11px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: box-shadow var(--transition), transform var(--transition);
  position: relative;
  overflow: hidden;
  min-height: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kpi-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* Tarjeta destacada (verde oscuro con acento lima) */
.kpi-card.featured {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}
.kpi-card.featured .kpi-value,
.kpi-card.featured .kpi-label { color: #fff; }
.kpi-card.featured .kpi-icon { background: var(--accent); color: var(--brand-dark); }
.kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kpi-icon {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  flex-shrink: 0;
  color: var(--primary-dark);
}
.kpi-icon svg { width: 13px; height: 13px; }

.kpi-icon.danger {
  background: var(--danger-light);
  color: var(--danger);
}
.kpi-icon.warning {
  background: var(--warning-light);
  color: var(--warning);
}
.kpi-icon.info {
  background: var(--info-light);
  color: var(--info);
}

.kpi-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 1px;
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.kpi-trend {
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}
.kpi-trend.up { color: var(--success); }
.kpi-trend.down { color: var(--danger); }
/* Delta tipo píldora (estilo referencia) */
.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.delta.up   { background: var(--success-light); color: var(--success); }
.delta.down { background: var(--danger-light);  color: var(--danger); }

/* ── Charts ──────────────────────────────────────── */
.charts-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.card {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-light);
  gap: 12px;
}

.card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title svg { color: var(--primary); }

.card-body { padding: 20px; }

.chart-container {
  position: relative;
  height: 260px;
}

/* ── Donut moderno con leyenda lateral ───────────── */
.donut-layout {
  display: flex;
  align-items: center;
  gap: 18px;
}
.donut-canvas-wrap {
  position: relative;
  width: 180px;
  height: 180px;
  flex-shrink: 0;
}
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.donut-center-num {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.donut-center-lbl {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}
.donut-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.donut-legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.donut-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.donut-legend-label { color: var(--text-secondary); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.donut-legend-pct   { color: var(--text-muted); font-weight: 600; font-size: 13px; min-width: 32px; text-align: right; }
@media (max-width: 1100px) { .donut-layout { flex-direction: column; } .donut-legend { width: 100%; } }

/* ── Stats Row (mora breakdown etc.) ─────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.stat-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 9px 11px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-card-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.stat-card-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.stat-card.danger .stat-card-value { color: var(--danger); }
.stat-card.warning .stat-card-value { color: var(--warning); }
.stat-card.success .stat-card-value { color: var(--primary); }
.stat-card.info .stat-card-value { color: var(--info); }

/* ── Aging Cards ─────────────────────────────────── */
.aging-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

/* Cards de envejecimiento — minimalistas, tinte plano por bucket (sin degradados) */
.aging-card {
  --c: var(--text-muted);
  border-radius: var(--radius-lg);
  padding: 12px 13px;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  background: color-mix(in srgb, var(--c) 8%, #fff);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition), transform var(--transition);
}
.aging-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* Escala verde clara → oscura (marca Camejo: de var(--primary) a var(--primary-dark)), en vez de
   semáforo rojo — misma progresión de severidad, con la identidad de la marca. */
.aging-card.al-dia    { --c: var(--primary); }
.aging-card.dias-1-7  { --c: #01b646; }
.aging-card.dias-8-30 { --c: #029744; }
.aging-card.dias-8-90 { --c: #027842; }
.aging-card.mas-90    { --c: var(--primary-dark); }
/* En cero no hay nada que atender: tarjeta neutra, el color queda para lo que sí pide acción */
.aging-card.cero, .dash-aging .aging-card.cero { --c: #a7b5ad; background: var(--card-bg); border: 1px solid var(--border); }
.dash-aging .aging-card.cero .aging-label, .dash-aging .aging-card.cero .aging-monto { color: var(--text-muted); }
.dash-aging .aging-card.cero .aging-count { color: var(--text-secondary); }
.dash-aging .aging-card.cero .aging-label::before { background: var(--c); }
.dash-aging .aging-card.cero .aging-bar { background: var(--border-light); }

.aging-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 7px;
}
.aging-label::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c); flex-shrink: 0;
}

.aging-count {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 3px;
  letter-spacing: -0.02em;
  color: var(--c);
}

.aging-monto {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ── Bottom Grid ─────────────────────────────────── */
.bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ── Ejecutivo Cards ─────────────────────────────── */
.ejecutivos-grid { display: flex; flex-direction: column; gap: 10px; }

.ejecutivo-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  background: var(--bg);
  transition: background var(--transition), border-color var(--transition);
}
.ejecutivo-card:hover { background: var(--primary-xlight); border-color: var(--accent-dim); }

.ejecutivo-avatar {
  width: 38px;
  height: 38px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

.ejecutivo-info { flex: 1; min-width: 0; }
.ejecutivo-info h4 { font-size: 14px; font-weight: 600; line-height: 1.3; }
.ejecutivo-info p  { font-size: 13px; color: var(--text-muted); }

.ejecutivo-stats { display: flex; gap: 16px; }
.stat { text-align: center; }
.stat-value { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.stat-label { font-size: 12px; color: var(--text-muted); letter-spacing: 0.03em; }

/* ── Tables ──────────────────────────────────────── */
.table-container {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  overflow: hidden;
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-light);
  gap: 12px;
  flex-wrap: wrap;
}

.table-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-title svg { color: var(--primary); }

.table-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; flex: 1; }

.table-wrapper { overflow-x: auto; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
/* Compact variant for wide tables like renovaciones */
.data-table.renov-table { font-size: 13px; }
.data-table.renov-table th, .data-table.renov-table td { padding: 8px 10px; }

.data-table thead tr {
  background: var(--border-light);
}

.data-table th {
  padding: 11px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  white-space: nowrap;
}

.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  vertical-align: middle;
}

.data-table tbody tr { transition: background var(--transition); }
.data-table tbody tr:hover { background: var(--bg); }
.data-table tbody tr:last-child td { border-bottom: none; }

.text-right  { text-align: right  !important; }
.text-center { text-align: center !important; }

/* ── Badges ──────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.badge-activo, .badge-pagado {
  background: var(--success-light);
  color: var(--success);
}
.badge-mora, .badge-atrasado {
  background: var(--danger-light);
  color: var(--danger);
}
.badge-liquidado {
  background: var(--border-light);
  color: var(--text-muted);
}
.badge-pendiente {
  background: var(--warning-light);
  color: var(--warning);
}
.badge-master {
  background: var(--primary-light);
  color: var(--primary-darker);
}
/* Tag para cuentas de cartera activa con +90 días de mora (candidatas a
   irrecuperables) — siguen pagando/activas, solo es una señal visual */
.badge-irr-candidato {
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  margin-left: 6px;
}
.badge-ejecutivo {
  background: var(--info-light);
  color: var(--info);
}
.badge-admin {
  background: var(--accent-dim);
  color: var(--primary-darker);
}
.badge-tienda {
  background: var(--accent-dim);
  color: var(--primary-darker);
}
.badge-periodicidad {
  background: var(--primary-xlight);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-full);
}

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--brand-dark);
  color: #fff;
  border-color: var(--brand-dark);
  box-shadow: 0 2px 8px rgba(21,41,26,0.18);
}
.btn-primary:hover {
  background: #1f3526;
  border-color: #1f3526;
  box-shadow: 0 4px 12px rgba(21,41,26,0.25);
}

.btn-secondary {
  background: var(--card-bg);
  color: var(--text-secondary);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg); border-color: #d5dcd7; }

.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.btn-danger:hover { background: var(--danger-dark); }

.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover { background: var(--primary-light); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--bg); color: var(--text-primary); }

.btn-sm  { padding: 5px 12px; font-size: 13px; }
.btn-lg  { padding: 12px 24px; font-size: 15px; }
.btn-full { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

/* ── Compact action buttons for table rows ───────── */
.btn-xs {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 8px; font-size: 13px; font-weight: 500;
  border-radius: var(--radius-xs); border: 1px solid var(--border);
  cursor: pointer; white-space: nowrap; line-height: 1.4;
  transition: background .15s, border-color .15s;
}
.btn-xs.btn-outline { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.btn-xs.btn-outline:hover { background: var(--bg-secondary); }
.btn-xs.btn-secondary-xs { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border); }
.btn-xs.btn-secondary-xs:hover { background: var(--border); }
.btn-xs.btn-danger-xs { background: #fef2f2; color: var(--danger); border-color: #fecaca; }
.btn-xs.btn-danger-xs:hover { background: #fee2e2; }
.btn-xs.btn-ai-xs { background: var(--primary-xlight); color: var(--primary-dark); border-color: var(--accent-dim); }
.btn-xs.btn-ai-xs:hover { background: var(--accent-dim); }
.btn-xs.btn-ai-xs--green { background: #f0fdf4; color: var(--primary-darker); border-color: #bbf7d0; }
.btn-xs.btn-ai-xs--green:hover { background: var(--success-light); }
.btn-xs.btn-ai-xs--blue { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
.btn-xs.btn-ai-xs--blue:hover { background: #dbeafe; }

/* ── Forms ───────────────────────────────────────── */
.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 9px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--card-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(1,213,72,0.12);
}

.form-input::placeholder { color: var(--text-hint); }
.form-textarea { resize: vertical; min-height: 80px; }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 34px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.form-error { font-size: 13px; color: var(--danger); margin-top: 4px; }

.form-hint {
  font-size: 13px;
  color: var(--text-hint);
  margin-top: 4px;
}

.form-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 14px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Calculated preview field */
.calc-field {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
  font-weight: 700;
}

/* Input with icon */
.input-with-icon { position: relative; }
.input-with-icon .form-input { padding-right: 44px; }
.input-icon-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color var(--transition);
}
.input-icon-btn:hover { color: var(--text-primary); }

/* Search input */
.search-input {
  padding-left: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
}

/* ── Modals ──────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  backdrop-filter: blur(2px);
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--card-bg);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  transform: scale(0.95) translateY(8px);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.open .modal {
  transform: scale(1) translateY(0);
}

.modal-lg   { max-width: 720px; }
.modal-xl   { max-width: 880px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  background: var(--card-bg);
  z-index: 1;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.modal-close {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
  box-shadow: none;
  outline: none;
}
.modal-close:hover {
  background: var(--border-light);
  color: var(--text-primary);
  box-shadow: none;
}

.modal-body { padding: 20px 24px; }

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--border-light);
  background: var(--bg);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
  position: sticky;
  bottom: 0;
}

/* ── Alerts ──────────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid;
  margin-bottom: 14px;
  display: none;
  align-items: center;
  gap: 8px;
}
.alert.show { display: flex; }

.alert-success { background: var(--success-light); border-color: var(--success-border); color: var(--primary-darker); }
.alert-error   { background: var(--danger-light);  border-color: var(--danger-border);  color: var(--danger); }
.alert-warning { background: var(--warning-light); border-color: var(--warning-border); color: #92400e; }
.alert-info    { background: var(--info-light);    border-color: var(--info-border);    color: #1d4ed8; }

/* ── Toast Notifications ─────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--text-primary);
  color: #fff;
  padding: 13px 18px;
  border-radius: var(--radius-xl);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  opacity: 0;
  transform: translateY(16px) scale(0.95);
  transition: opacity 0.28s, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 360px;
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast-success { background: var(--brand-dark); }
.toast-error   { background: var(--danger); }
.toast-warning { background: var(--warning); }
.toast-info    { background: var(--info); }

.toast-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Pagination ──────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
  background: var(--bg);
}

.page-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.page-btn:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.page-info {
  font-size: 13px;
  color: var(--text-muted);
  margin-left: auto;
}

/* ── Loading States ──────────────────────────────── */
.spinner {
  width: 30px;
  height: 30px;
  border: 2.5px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}

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

/* Mientras carga: siluetas grises planas con la forma de una lista (sin ruedita ni degradados).
   Las filas son un solo bloque repetido con box-shadow; el texto queda abajo, chico, para saber qué se carga. */
@keyframes skel-pulso { from { opacity: 1; } to { opacity: .45; } }
.loading-state {
  display: block;
  position: relative;
  min-height: 150px;
  padding: 18px 20px 34px;
  color: var(--text-hint);
  font-size: 12px;
  text-align: left;
}
.loading-state .spinner { display: none; }
.loading-state::before {
  content: '';
  display: block;
  height: 14px;
  border-radius: var(--radius-xs);
  background: #e6ece8;
  box-shadow: 0 28px 0 #e6ece8, 0 56px 0 #e6ece8, 0 84px 0 #e6ece8;
  animation: skel-pulso 1s ease-in-out infinite alternate;
}
.loading-state p { position: absolute; left: 20px; bottom: 10px; margin: 0; font-size: 12px; color: var(--text-hint); }
.skel { display: block; border-radius: var(--radius-xs); background: #e6ece8; animation: skel-pulso 1s ease-in-out infinite alternate; }

/* Estado vacío compacto: qué va a aparecer aquí, de dónde llega y a dónde ir (no una página entera en blanco) */
.vacio { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px dashed var(--border); border-radius: var(--radius-lg); background: var(--card-bg); }
.vacio-ico { width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--primary-xlight); color: var(--primary-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vacio-ico svg { width: 18px; height: 18px; }
.vacio h4 { margin: 0 0 3px; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.vacio p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); max-width: 760px; }
.vacio-acc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 20px;
  gap: 10px;
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
}

.empty-icon {
  width: 48px;
  height: 48px;
  color: var(--text-hint);
  opacity: 0.7;
}

/* ── Login Page — estilo marketplace camejo.mx ───── */
.login-page {
  min-height: 100vh;
  background: var(--bg);
}

/* Shell de dos paneles a TODO lo ancho/alto — sin card exterior flotante */
.login-shell {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

/* Panel promocional — verde vivo como las tarjetas de promo del sitio */
.login-brand {
  position: relative;
  overflow: hidden;
  background-image: url('../assets/login-hero.jpg');
  background-size: cover;
  background-position: center 30%;
  color: #fff;
  padding: 56px 56px 46px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* arriba, donde la foto solo tiene casas/cielo, sin tapar a la familia */
  gap: 14px;
}

.login-brand-inner { position: relative; z-index: 2; }

/* "AQUÍ SÍ PUEDES" — tipografía del hero del marketplace */
.login-hero {
  font-size: 44px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 6px 20px rgba(0,0,0,0.25);
  margin-bottom: 12px;
}
.login-hero-si {
  color: var(--accent);
}
.login-brand-tag {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.5);
}
.login-brand-feats { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.login-brand-feats li {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-full);
  padding: 9px 18px 9px 10px;
  width: fit-content;
  backdrop-filter: blur(4px);
}
.login-brand-feats svg {
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--primary-dark); background: #fff;
  border-radius: 50%; padding: 6px; box-sizing: content-box;
}
/* Pill blanca "Ven a Camejo y hazlo posible" — enlace real a camejo.mx */
.login-promo-pill {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  display: inline-block;
  background: #fff;
  color: var(--primary-darker);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-full);
  padding: 11px 22px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
  transition: transform var(--transition), box-shadow var(--transition);
}
.login-promo-pill:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.24);
}
.login-promo-pill strong { font-weight: 800; color: var(--primary-dark); }
.login-promo-pill em { font-style: normal; font-weight: 800; color: var(--primary); }

/* Panel del formulario — fondo claro a todo lo alto, dos tarjetas flotantes dentro */
.login-form-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 36px 28px;
  background: var(--bg);
}

/* Tarjeta 1: el formulario en sí, ahora elevada (antes el marco lo daba el shell) */
.login-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: #ffffff;
  border: 1px solid #ecefeb;
  border-radius: var(--radius-2xl);
  padding: 30px 24px 22px;
  box-shadow: 0 20px 50px rgba(21,41,26,0.10);
}

/* Tarjeta 2: sello de confianza/alcance, como la pastilla de avatares de la referencia */
.login-stat-card {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #ecefeb;
  border-radius: var(--radius-xl);
  padding: 12px 14px;
  box-shadow: 0 14px 34px rgba(21,41,26,0.08);
}
.login-stat-avatars { display: flex; flex-shrink: 0; }
.login-stat-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  color: #fff;
  margin-left: -12px;
}
.login-stat-avatar svg { width: 17px; height: 17px; }
.login-stat-avatar:first-child { margin-left: 0; }
.login-stat-avatar.a1 { background: var(--primary-dark); z-index: 3; }
.login-stat-avatar.a2 { background: var(--primary); z-index: 2; }
.login-stat-avatar.a3 { background: var(--accent); z-index: 1; }
.login-stat-text { display: flex; flex-direction: column; line-height: 1.35; }
.login-stat-text strong { font-size: 15px; font-weight: 800; color: var(--primary-darker); }
.login-stat-text span { font-size: 13px; color: var(--text-muted); }

/* Tarjeta de beneficios — antes vivían sobre la foto, ahora junto al formulario */
.login-benefits-card {
  width: 100%;
  max-width: 480px;
  display: flex;
  justify-content: space-between;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #ecefeb;
  border-radius: var(--radius-xl);
  padding: 14px 8px;
  box-shadow: 0 14px 34px rgba(21,41,26,0.08);
}
.login-benefit {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.login-benefit-ic {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #eef7f0;
  color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.login-benefit-ic svg { width: 18px; height: 18px; }
.login-benefit span:last-child { font-size: 13px; font-weight: 600; color: var(--primary-darker); line-height: 1.3; }

.login-logo-sm { display: block; text-align: center; margin-bottom: 22px; }
.login-logo-sm img { width: 185px; height: auto; margin: 0 auto; }

.login-heading {
  font-size: 23px; font-weight: 800; color: var(--primary-darker);
  letter-spacing: -0.02em; text-align: center;
  margin-bottom: 24px;
}
.login-sub { font-size: 14px; color: var(--text-muted); margin: 6px 0 26px; text-align: center; }

/* Campo con icono a la izquierda */
.login-field { position: relative; }
.login-field-ic {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-hint); display: flex; pointer-events: none;
}
.login-field .form-input {
  padding-left: 40px;
  background: #f4f7f3;
  border-color: #e2e9e0;
  border-radius: var(--radius-full);
}
.login-field .form-input:focus {
  background: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(1,213,72,0.15);
}
/* Ocultar el ícono nativo de "revelar contraseña" del navegador (Edge/Chrome) */
.login-field input[type="password"]::-ms-reveal,
.login-field input[type="password"]::-ms-clear { display: none; }

/* Botón pill verde vivo, sin degradado — color plano de marca */
.login-card .btn-primary {
  border-radius: var(--radius-full);
  background: var(--primary);
  border: none;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 10px 24px rgba(2,89,64,0.30);
}
.login-card .btn-primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 12px 28px rgba(2,89,64,0.38);
}

.login-form { display: flex; flex-direction: column; gap: 4px; }

/* ── Código OTP (login sin contraseña) ───────────── */
.otp-boxes {
  display: flex;
  gap: 9px;
  justify-content: center;
  margin: 18px 0 6px;
}
.otp-box {
  width: 46px;
  height: 54px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  border: 1.5px solid rgba(21,41,26,0.14);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.55);
  color: var(--text-primary);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.otp-box:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(1,213,72,0.15);
}
.otp-box.checking { border-color: var(--primary); opacity: 0.6; }
.otp-box.ok  { border-color: var(--success); background: var(--success-light); }
.otp-box.bad { border-color: var(--danger); background: var(--danger-light); animation: otpShake 0.3s; }
@keyframes otpShake {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.login-otp-status {
  text-align: center;
  font-size: 13px;
  color: var(--success);
  font-weight: 600;
  margin: 2px 0 0;
  display: none;
}
.login-otp-status.show { display: block; }

.login-otp-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
}
.login-otp-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-dark);
  cursor: pointer;
}
.login-otp-link:hover { text-decoration: underline; }
.login-otp-link:disabled { color: var(--text-hint); cursor: default; text-decoration: none; }

.login-footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border-light);
  font-size: 13px;
  color: var(--text-hint);
}

/* Login en móvil: una sola columna, sin panel visual, todavía a todo lo ancho/alto */
@media (max-width: 820px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .login-form-wrap { padding: 22px 14px; gap: 12px; }
  .login-card { max-width: 100%; padding: 26px 18px 18px; }
  .login-stat-card { max-width: 100%; }
  .login-benefits-card { max-width: 100%; }
}

/* ── Tour guiado (onboarding tipo AURA) ──────────── */
.tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 20, 0.55);
  z-index: 500;
  animation: tourFadeIn 0.2s ease;
}
@keyframes tourFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* El elemento resaltado "sale" del oscurecido con un halo verde */
.tour-target {
  position: relative;
  z-index: 501;
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 6000px rgba(15, 23, 20, 0.55), 0 0 24px rgba(47, 174, 66, 0.55);
  transition: outline-color var(--transition);
}

.tour-card {
  position: fixed;
  z-index: 502;
  width: 320px;
  max-width: calc(100vw - 28px);
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: 18px 20px 16px;
  animation: tourCardIn 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes tourCardIn { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 480px) {
  .tour-card { padding: 14px 16px 12px; border-radius: var(--radius-lg); }
  .tour-title { font-size: 15px; margin-bottom: 4px; }
  .tour-desc  { font-size: 13px; margin-bottom: 12px; }
  .tour-progress { margin-bottom: 10px; }
  .tour-next { padding: 8px 16px; font-size: 13px; }
  /* En pantallas angostas, un halo enorme puede rebasar horizontalmente: se recorta el body */
  .tour-target { outline-width: 2px; outline-offset: 2px; }
}
body.tour-active { overflow-x: hidden; }

.tour-progress {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--border-light);
  overflow: hidden;
  margin-bottom: 14px;
}
.tour-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-full);
  transition: width 0.25s ease;
}

.tour-step-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primary-dark);
  margin-bottom: 6px;
}
.tour-title { font-size: 17px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; letter-spacing: -0.01em; }
.tour-desc  { font-size: 13px; line-height: 1.55; color: var(--text-secondary); margin-bottom: 16px; }

.tour-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tour-skip {
  background: none; border: none; padding: 0;
  font-size: 13px; font-weight: 600; color: var(--text-hint); cursor: pointer;
}
.tour-skip:hover { color: var(--text-secondary); }
.tour-next {
  background: var(--primary);
  color: #fff; border: none; border-radius: var(--radius-full);
  padding: 9px 20px; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 16px rgba(2, 89, 64, 0.3);
  transition: transform var(--transition), background var(--transition);
}
.tour-next:hover { background: var(--primary-dark); transform: translateY(-1px); }

/* ── Smart select (searchbar inteligente para ejecutivos) ── */
.smart-select-origin { display: none !important; }
.smart-select {
  position: relative;
  width: 185px;
  display: inline-block;
  vertical-align: middle;
}
.form-group .smart-select { width: 100%; display: block; }
.smart-select-ic {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-hint); display: flex; pointer-events: none; z-index: 1;
}
.smart-select-input {
  width: 100%;
  height: 36px;
  font-size: 13px;
  padding-left: 32px;
  padding-right: 28px;
}
.smart-select-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-hint);
  width: 18px; height: 18px; border-radius: 50%;
  display: none; align-items: center; justify-content: center; cursor: pointer;
}
.smart-select.has-value .smart-select-clear { display: flex; }
.smart-select-clear:hover { color: var(--danger); background: var(--danger-light); }
.smart-select-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 230px;
  overflow-y: auto;
  z-index: 300;
}
.smart-select-list.open { display: block; }
/* Sin espacio debajo (p.ej. cerca del footer de un modal) → se abre hacia arriba */
.smart-select.smart-select-up .smart-select-list {
  top: auto;
  bottom: calc(100% + 4px);
}
.smart-select-item {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
}
.smart-select-item:last-child { border-bottom: none; }
.smart-select-item:hover { background: var(--primary-xlight); }
.smart-select-item.selected { background: var(--primary-light); font-weight: 600; color: var(--primary-darker); }
.smart-select-empty { padding: 10px 12px; font-size: 13px; color: var(--text-hint); }

/* ── FAB de acciones rápidas (abajo a la derecha) ── */
.qa-fab-wrap {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 160;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.qa-fab {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(2,89,64,0.4);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.qa-fab:hover { background: var(--primary-dark); transform: scale(1.06); box-shadow: 0 12px 30px rgba(2,89,64,0.5); }
.qa-fab svg { transition: transform 0.22s ease; }
.qa-fab-wrap.open .qa-fab svg { transform: rotate(45deg); }

/* Mini-círculos en arco alrededor del botón principal (solo icono) */
.qa-actions { pointer-events: none; }
.qa-action {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 38px;
  height: 38px;
  text-decoration: none;
  opacity: 0;
  transform: translate(0, 0) scale(0.4);
  transition: opacity 0.16s ease, transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
}
/* El círculo con hover (y su tooltip) siempre por encima de los demás y del FAB */
.qa-action:hover { z-index: 10; }
/* Arco de 90° del FAB: arriba → izquierda (radio 86px) */
.qa-action:nth-child(1) { --tx:   0px; --ty: -86px; }
.qa-action:nth-child(2) { --tx: -43px; --ty: -74px; }
.qa-action:nth-child(3) { --tx: -74px; --ty: -43px; }
.qa-action:nth-child(4) { --tx: -86px; --ty:   0px; }
.qa-fab-wrap.open .qa-actions { pointer-events: auto; }
.qa-fab-wrap.open .qa-action { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1); }
.qa-fab-wrap.open .qa-action:nth-child(1) { transition-delay: 0s; }
.qa-fab-wrap.open .qa-action:nth-child(2) { transition-delay: 0.04s; }
.qa-fab-wrap.open .qa-action:nth-child(3) { transition-delay: 0.08s; }
.qa-fab-wrap.open .qa-action:nth-child(4) { transition-delay: 0.12s; }

.qa-action-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary-darker);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: all var(--transition);
}
.qa-action-circle svg { width: 16px; height: 16px; }
.qa-action:hover .qa-action-circle {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: scale(1.12);
}

/* Tooltip: aparece solo al pasar el cursor, a la izquierda del círculo */
.qa-action-label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  background: var(--brand-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 20;
}
.qa-action:hover .qa-action-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* En móvil el FAB sube para no encimarse con la barra de navegación inferior */
@media (max-width: 820px) {
  .qa-fab-wrap { right: 14px; bottom: 76px; }
  .qa-fab { width: 50px; height: 50px; }
}

/* ── Utility Classes ─────────────────────────────── */
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger)  !important; }
.text-warning { color: var(--warning) !important; }
.text-muted   { color: var(--text-muted) !important; }
.text-primary { color: var(--primary) !important; }
.text-sm      { font-size: 13px; }
.text-bold    { font-weight: 700; }
.fw-600       { font-weight: 600; }

.d-flex        { display: flex; }
.align-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.mt-1  { margin-top: 4px; }
.mt-2  { margin-top: 8px; }
.mt-3  { margin-top: 16px; }
.mb-3  { margin-bottom: 16px; }
.mb-4  { margin-bottom: 24px; }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}

/* RA Result Box */
.ra-result {
  background: var(--primary-xlight);
  border: 1.5px solid var(--accent-dim);
  border-radius: var(--radius-xl);
  padding: 16px;
  display: none;
  margin-top: 12px;
}
.ra-result.show { display: block; }
.ra-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.ra-item { text-align: center; padding: 8px; border-radius: var(--radius); background: rgba(255,255,255,0.6); }
.ra-item-value { font-size: 18px; font-weight: 800; color: var(--primary-dark); line-height: 1.2; }
.ra-item-label { font-size: 13px; color: var(--text-muted); margin-top: 3px; }

/* Pagos progress bar */
.pagos-progress { margin-top: 6px; }
.progress-bar-bg {
  height: 5px;
  background: var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

/* Actions column */
.actions { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.actions > * { flex-shrink: 0; }
/* La columna de acciones nunca se parte ni se encoge: la tabla hace scroll si hace falta */
.data-table td .actions { white-space: nowrap; }
.data-table th:last-child, .data-table td:last-child { white-space: nowrap; }
/* Botones de acción anclados a la derecha de su columna */
.data-table .actions { justify-content: flex-end; }
.data-table th:last-child { text-align: right; }

/* ── Page-specific header ────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-header-left h1 {
  font-size: 21px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.page-header-left p {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Comparativo Panel ───────────────────────────── */
.comparativo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.comparativo-card {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  text-align: center;
}

.comparativo-card .c-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}

.comparativo-card .c-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.comparativo-card.success .c-value { color: var(--primary); }
.comparativo-card.warning .c-value { color: var(--warning); }
.comparativo-card.info    .c-value { color: var(--info); }

/* ── Doc upload areas ────────────────────────────── */
.doc-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 4px;
}

.doc-upload-slot {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--bg);
}

.doc-upload-slot:hover {
  border-color: var(--primary);
  background: var(--primary-xlight);
}

.doc-upload-slot .doc-icon {
  color: var(--text-hint);
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc-upload-slot:hover .doc-icon { color: var(--primary); }

.doc-upload-slot .doc-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.doc-upload-slot .doc-hint {
  font-size: 13px;
  color: var(--text-hint);
  margin-top: 3px;
}

.doc-upload-slot input[type="file"] { display: none; }

/* ── Mora Detail Analysis ────────────────────────── */
.mora-analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.mora-analysis-card {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  padding: 16px 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.mora-analysis-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.mora-analysis-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}
.mora-analysis-row:last-child { border-bottom: none; }

.mora-analysis-row .label { color: var(--text-secondary); }
.mora-analysis-row .value { font-weight: 700; color: var(--text-primary); }
.mora-analysis-row .value.danger { color: var(--danger); }
.mora-analysis-row .value.success { color: var(--primary); }

/* Resumen de mora por antigüedad — vista tipo tabla/lista con acento verde,
   inspirada en el control de pagos original del cliente (fila con triángulo
   verde a la izquierda + monto en negrita a la derecha, filas alternadas). */
.mat-table { display: flex; flex-direction: column; }
.mat-row {
  display: flex;
  align-items: center;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border-light);
  background: var(--card-bg);
}
.mat-row:last-child { border-bottom: none; }
.mat-row:nth-child(even) { background: var(--primary-xlight); }
.mat-row::before {
  content: '';
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 7px solid var(--primary);
  margin-right: 14px;
  flex-shrink: 0;
}
.mat-label { flex: 1; font-weight: 600; font-size: 13px; color: var(--text-primary); }
.mat-label small { font-weight: 500; color: var(--text-muted); font-size: 13px; }
.mat-value { font-weight: 800; font-size: 16px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
/* La fila nueva "8 días en adelante" (acumulado) se destaca del resto */
.mat-row.mat-highlight { background: var(--warning-light); }
.mat-row.mat-highlight::before { border-left-color: var(--warning); }
.mat-row.mat-highlight .mat-value { color: var(--warning); }

/* Vista compacta de la página de Mora — menos padding/tamaños, menos "aire"
   entre tarjetas. Escopeado a .mora-page para no afectar al Dashboard, que
   comparte las mismas clases .aging-grid/.aging-card. */
.mora-page .aging-grid { gap: 7px; margin-bottom: 10px; }
.mora-page .aging-card { padding: 7px 9px; border-radius: var(--radius-md); }
.mora-page .aging-label { font-size: 12px; margin-bottom: 3px; gap: 3px; }
.mora-page .aging-label::before { width: 5px; height: 5px; }
.mora-page .aging-count { font-size: 15px; margin-bottom: 1px; }
.mora-page .aging-monto { font-size: 12px; }

.mora-page .card.mb-4 { margin-bottom: 10px; }
.mora-page .card-header { padding: 8px 12px; }
.mora-page .card-title { font-size: 13px; }

.mora-page .mat-row { padding: 6px 12px; }
.mora-page .mat-row::before { border-top-width: 5px; border-bottom-width: 5px; border-left-width: 6px; margin-right: 9px; }
.mora-page .mat-label { font-size: 13px; }
.mora-page .mat-label small { font-size: 12px; }
.mora-page .mat-value { font-size: 13px; }

.mora-page .mora-analysis-grid { gap: 8px; margin-top: 10px; }
.mora-page .mora-analysis-card { padding: 9px 12px; }
.mora-page .mora-analysis-title { font-size: 12px; margin-bottom: 6px; }
.mora-page .mora-analysis-row { padding: 4px 0; font-size: 13px; }

/* ── Bottom nav tipo app (solo móvil): slider horizontal ── */
.bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 58px;
  background: var(--brand-dark);
  z-index: 400;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 22px rgba(0,0,0,0.20);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  align-items: stretch;
}
.bottom-nav::-webkit-scrollbar { display: none; height: 0; }
.bnav-item {
  flex: 0 0 auto;
  min-width: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: rgba(255,255,255,0.56); font-size: 12px; font-weight: 600;
  background: none; border: none; cursor: pointer; text-decoration: none; padding: 8px 6px;
  transition: color .15s; white-space: nowrap;
}
.bnav-ic { display: flex; }
.bnav-ic svg { width: 16px; height: 16px; }
.bnav-item.active { color: var(--accent); }
.bnav-item.active .bnav-ic svg { stroke-width: 2.4; }
.bnav-lbl { line-height: 1; }
.bnav-logout { color: rgba(255,120,110,0.85); }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 1200px) {
  .aging-grid     { grid-template-columns: repeat(3, 1fr); }
  .charts-grid    { grid-template-columns: 1fr; }
  .kpi-grid       { grid-template-columns: repeat(3, 1fr); }
  .stats-row      { grid-template-columns: repeat(2, 1fr); }
  .comparativo-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .bottom-grid    { grid-template-columns: 1fr; }
  .kpi-grid       { grid-template-columns: repeat(2, 1fr); }
  .aging-grid     { grid-template-columns: repeat(3, 1fr); }
  .stats-row      { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  /* Sin sidebar ni hamburguesa en móvil: se usa el bottom-nav tipo app */
  .sidebar { display: none; }
  .sidebar-toggle { display: none; }
  .sidebar-collapse-btn { display: none; }
  .main-content { margin-left: 0; padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  body.sidebar-collapsed .main-content { margin-left: 0; }
  .bottom-nav { display: flex; }

  /* Header compacto: todo a la derecha, pequeño, sin botón de importar */
  .topbar {
    height: auto; min-height: 52px;
    padding: 0 10px; gap: 8px;
    justify-content: flex-end; align-items: center; flex-wrap: nowrap;
  }
  #topbar-import { display: none !important; }
  .topbar-date {
    display: inline-block; margin-left: auto;
    font-size: 11px; padding: 3px 8px; white-space: nowrap; align-self: center;
    min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar-notif { align-self: center; }
  .topbar-notif-btn { width: 30px; height: 30px; }
  .topbar-notif-btn svg { width: 15px; height: 15px; }
  /* INTELLI: círculo compacto solo con el logo, centrado y a la derecha */
  .intelli-fab {
    width: 32px !important; height: 32px !important;
    padding: 0 !important; gap: 0 !important; font-size: 0 !important;
    border-radius: 50% !important; align-self: center; flex-shrink: 0;
  }
  .intelli-fab-icon { width: 32px !important; height: 32px !important; }
  .intelli-fab-icon img { width: 18px !important; height: 18px !important; }

  /* Body más compacto en móvil */
  .page-content { padding: 12px; }
  /* 8 KPIs arriba y 4 stat-cards abajo → 4 columnas en móvil */
  .kpi-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
  .kpi-card { padding: 7px 5px; min-height: 42px; text-align: center; align-items: center; }
  .kpi-card .kpi-icon { display: none !important; }   /* sin iconos en móvil */
  .kpi-header {
    gap: 0; width: 100%;
    flex-direction: column; align-items: center; justify-content: center;
  }
  .kpi-header > div { width: 100%; text-align: center; }
  .kpi-value { font-size: 11px; text-align: center; width: 100%; }
  /* Etiquetas cortas (data-short) en móvil */
  .kpi-label, .stat-card-label { font-size: 0; letter-spacing: 0; text-align: center; }
  .kpi-label[data-short]::after, .stat-card-label[data-short]::after {
    content: attr(data-short);
    font-size: 11px; font-weight: 600;
  }
  .stats-row { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .stat-card { padding: 8px 6px; text-align: center; align-items: center; }
  .stat-card-value { font-size: 11px; text-align: center; width: 100%; }
  .stat-card-label { text-align: center; width: 100%; }
  .card { padding: 12px; }
  .card-header { padding: 12px; }
  .card-title { font-size: 13px; }
  .card-body { padding: 12px; }
  .section-title { font-size: 15px; }
  .form-row { grid-template-columns: 1fr; }
  .form-row-3 { grid-template-columns: 1fr; }
  .doc-upload-grid { grid-template-columns: 1fr; }

  /* Botones más pequeños en móvil (para que grupos de 3 quepan en línea) */
  .btn { padding: 7px 11px; font-size: 12px; gap: 5px; }
  .btn-sm { padding: 5px 9px; font-size: 11px; }
  .btn-lg { padding: 10px 16px; font-size: 13px; }

  /* Tarjetas comparativas (liquidados, etc.): 3 en línea y compactas */
  .comparativo-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
  .comparativo-card { padding: 10px 6px; }
  .comparativo-card .c-value { font-size: 13px; margin-bottom: 3px; }
  .comparativo-card .c-label { font-size: 11px; letter-spacing: 0.02em; }

  /* Mora: tarjetas de análisis apiladas y compactas */
  .mora-analysis-grid { grid-template-columns: 1fr; gap: 10px; }
  .mora-analysis-card { padding: 12px 14px; }
  .mora-analysis-title { font-size: 12px; }
  .mora-analysis-row { font-size: 12px; }

  /* Barras de vista/toolbar (préstamos, pagos, matriz) compactas */
  .matriz-toolbar { gap: 6px; margin-bottom: 10px; }
  .view-toggle button { padding: 4px 8px; font-size: 11px; }
  /* Selects/inputs con anchos fijos inline en toolbars → a ancho completo */
  .matriz-toolbar .form-input,
  .matriz-toolbar .form-select { width: 100% !important; min-width: 0 !important; flex: 1 1 100%; }

  /* Botones de filtro/tabs aún más compactos para que quepan en línea */
  .btn { padding: 6px 9px; font-size: 11px; }
  .btn-secondary, .btn-primary { min-width: 0; }

  /* Mora: los 2 charts (% Mora / $ en Mora) uno debajo del otro */
  .mora-charts-row { grid-template-columns: 1fr !important; gap: 10px !important; }
  .mora-charts-row canvas { max-height: 200px; }

  /* Ganancia Mensual: card más chaparro */
  .chart-container { height: 150px; }

  /* Envejecimiento de Cartera: card chaparro + 5 cards inline en 5 columnas */
  .aging-grid { grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 0; }
  .aging-card { padding: 7px 4px; border-radius: var(--radius-md); }
  .aging-label { font-size: 11px; margin-bottom: 3px; gap: 3px; letter-spacing: 0; }
  .aging-label::before { width: 5px; height: 5px; }
  .aging-count { font-size: 15px; margin-bottom: 1px; }
  .aging-monto { font-size: 11px; }

  /* Alertas de Impago / Proyección / Anomalías: en línea (3 columnas), centradas */
  .dash-2col .dash-side .intelli-stack { flex-direction: row; gap: 8px; align-items: stretch; }
  .dash-2col .dash-side .intelli-stack > .intelli-card {
    flex: 1; min-width: 0; padding: 12px 8px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
  }
  .dash-2col .dash-side .intelli-stack .card-header {
    flex-direction: column; align-items: center; justify-content: center;
    gap: 9px; padding: 0; border: none; text-align: center; width: 100%;
  }
  .dash-2col .dash-side .intelli-stack .card-title {
    font-size: 11px; gap: 0; line-height: 1.25;
    justify-content: center; text-align: center; flex-wrap: wrap; width: 100%;
  }
  .dash-2col .dash-side .intelli-stack .card-title svg { display: none; }  /* sin iconos */
  .dash-2col .dash-side .intelli-stack .btn-sm { font-size: 11px; padding: 5px 12px; width: auto; align-self: center; }

  /* Actividad Reciente: fuente pequeña, sin scroll horizontal (como ejecutivos) */
  .dash-bottom .data-table { min-width: 0; font-size: 11px; }
  .dash-bottom .data-table th,
  .dash-bottom .data-table td { padding: 6px 7px; white-space: nowrap; }

  /* Ejecutivos: fuente más pequeña para que no se encime */
  .ejecutivo-card { padding: 8px 10px; gap: 8px; }
  .ejecutivo-avatar { width: 30px; height: 30px; font-size: 12px; }
  .ejecutivo-info h4 { font-size: 11px; }
  .ejecutivo-info p { font-size: 11px; }
  .ejecutivo-stats { gap: 10px; }
  .stat-value { font-size: 11px; }
  .stat-label { font-size: 11px; }

  /* Tablas (todas las páginas): compactas, legibles y que quepan */
  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { font-size: 11px; }                 /* sin min-width fijo: nowrap deja
                                                      que las angostas quepan y las
                                                      anchas hagan scroll natural */
  .data-table th, .data-table td { padding: 8px 9px; white-space: nowrap; }

  /* Encabezado de tabla + filtros: apilados y a ancho completo */
  .table-header { padding: 12px; gap: 10px; }
  .table-title { font-size: 13px; }
  .table-filters { width: 100%; }
  .table-filters .form-input,
  .table-filters .form-select,
  .table-filters .search-input,
  .table-filters input,
  .table-filters select { flex: 1 1 100%; min-width: 0; width: 100%; max-width: none !important; }
  /* Botones de acción del encabezado: crecen y se acomodan en móvil */
  .table-header > .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .aging-grid { grid-template-columns: repeat(5, 1fr); }
  .modal { margin: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .modal-overlay { align-items: flex-end; }
  .stats-row { grid-template-columns: repeat(4, 1fr); }
}

/* ── Ajustes page ──────────────────────────────────── */
.ajustes-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
}
.ajustes-tab {
  padding: 10px 20px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: var(--radius) var(--radius) 0 0;
  transition: color .15s, border-color .15s, background .15s;
}
.ajustes-tab:hover { color: var(--primary); background: var(--primary-xlight); }
.ajustes-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.ajustes-grupo { display: none; }
/* Escritorio: menú lateral agrupado (Conexiones, Motor, Mensajes, Accesos) en vez de 10 pestañas partidas en dos renglones */
@media (min-width: 769px) {
  .ajustes-wrap { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; }
  .ajustes-tabs { flex-direction: column; gap: 1px; border-bottom: 0; margin: 0; position: sticky; top: calc(var(--topbar-height) + 14px);
    padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card-bg); }
  .ajustes-grupo { display: block; padding: 10px 10px 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-hint); }
  .ajustes-grupo:first-child { padding-top: 4px; }
  .ajustes-tab { text-align: left; padding: 8px 10px; margin: 0; border: 0; border-radius: var(--radius); font-size: 13px; white-space: nowrap; }
  .ajustes-tab.active { background: var(--primary-xlight); color: var(--primary-darker, var(--primary-dark)); }
}

.ajustes-panel { display: none; }
.ajustes-panel.active { display: block; }

.ajustes-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
}
.ajustes-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--bg);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-label { font-size: 14px; color: var(--text); }
.toggle-desc  { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* ── Sliders de parámetros de riesgo ─────────────── */
.risk-slider-row { margin-bottom: 26px; }
.risk-slider-row:last-of-type { margin-bottom: 22px; }
.risk-slider-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.risk-slider-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--primary-light);
  padding: 1px 10px;
  border-radius: var(--radius-full);
}
.risk-slider-hint { font-size: 13px; color: var(--text-muted); margin-top: 6px; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--border);
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--transition);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: var(--radius-2xl);
  cursor: pointer;
  transition: background .2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--primary); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

.ai-mode-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.ai-mode-btn {
  flex: 1;
  padding: 10px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  transition: all .15s;
}
.ai-mode-btn.active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-xlight);
}

.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--border);
}
.status-dot.ok     { background: var(--success); }
.status-dot.error  { background: var(--danger); }
.status-dot.warn   { background: var(--warning); }

.template-textarea {
  width: 100%;
  min-height: 72px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  transition: border-color .15s;
}
.template-textarea:focus { outline: none; border-color: var(--primary); }

.template-var {
  display: inline-block;
  background: var(--accent-dim);
  color: var(--primary-dark);
  font-size: 13px;
  font-family: monospace;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  margin: 2px 3px 2px 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.feature-card {
  background: var(--primary-xlight);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.feature-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.feature-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}
.badge-soon {
  background: var(--warning);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  margin-left: auto;
  text-transform: uppercase;
}
.badge-idea {
  background: var(--accent-dim);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  margin-left: auto;
  text-transform: uppercase;
}

/* ── AI Widget ─────────────────────────────────────── */
.ai-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-top: 16px;
}
.ai-widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.ai-widget-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-dark);
  flex: 1;
}
.ai-widget-icon {
  width: 28px; height: 28px;
  background: var(--primary-xlight);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.ai-widget-body {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
  min-height: 40px;
}
.ai-widget-body.loading { color: var(--text-muted); font-style: italic; }
.ai-widget-body.error   { color: var(--danger); }

/* Markdown renderizado en resultados de IA (mora, dashboard, reportes, etc.) */
.md-render { white-space: normal; }
.md-render p { margin: 4px 0; }
.md-render strong { font-weight: 700; color: var(--text-primary); }
.md-render em { font-style: italic; }
.md-render h3, .md-render h4, .md-render h5 { font-weight: 700; margin: 12px 0 5px; color: var(--text-primary); line-height: 1.3; }
.md-render h3 { font-size: 15px; }
.md-render h4 { font-size: 13px; }
.md-render h5 { font-size: 13px; }
.md-render ul, .md-render ol { margin: 6px 0; padding-left: 20px; }
.md-render li { margin: 3px 0; }
.md-render table { border-collapse: collapse; margin: 8px 0; font-size: 13px; min-width: max-content; }
.md-render th, .md-render td { border: 1px solid var(--border); padding: 5px 9px; white-space: nowrap; text-align: right; }
.md-render th:first-child, .md-render td:first-child { text-align: left; }
.md-render th { background: var(--border-light); font-weight: 600; text-align: left; }
.md-render > div { overflow-x: auto; }
.md-render code { background: var(--border-light); border-radius: 4px; padding: 1px 5px; font-size: 13px; font-family: monospace; }
.md-render a { color: var(--primary-dark); font-weight: 600; }
.ai-widget-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-ai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid var(--primary);
  background: var(--primary-xlight);
  color: var(--primary-dark);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.btn-ai:hover {
  background: var(--primary);
  color: #fff;
}
.btn-ai:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── WA quick-send row in mora/clientes ────────────── */
.wa-send-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid #25d366;
  background: #f0fdf4;
  color: #166534;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.btn-wa:hover { background: #25d366; color: #fff; }

/* ── AI suggestion chips ───────────────────────────── */
.ai-suggestion-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.ai-suggestion-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-xlight);
}

/* ── Intelli Floating Chatbot ───────────────────────── */
/* Botón INTELLI en el header (ya no flotante) */
.intelli-fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #29f069;
  color: var(--brand-dark);
  border: none;
  border-radius: var(--radius-full);
  padding: 5px 13px 5px 6px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
  letter-spacing: .03em;
}
.intelli-fab:hover { background: #1fd85a; transform: translateY(-1px); }
.intelli-fab-icon {
  width: 22px; height: 22px;
  background: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.intelli-fab-badge {
  position: absolute;
  top: -3px; right: -3px;
  width: 9px; height: 9px;
  background: var(--accent);
  border-radius: 50%;
  border: 2px solid var(--bg);
  display: none;
}
.intelli-fab.has-unread .intelli-fab-badge { display: block; }

/* Botón pulsante mientras INTELLI está pensando */
@keyframes intelli-thinking-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(1,213,72,0.5); }
  50%       { box-shadow: 0 0 0 7px rgba(1,213,72,0); }
}
.intelli-fab.intelli-fab-thinking { animation: intelli-thinking-pulse 1.4s ease-in-out infinite; }

/* Drawer lateral derecho (de piso a techo) */
.intelli-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 92vw;
  height: 100vh;
  background: var(--card-bg);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(21,41,26,0.14);
  display: flex;
  flex-direction: column;
  z-index: 8999;
  overflow: hidden;
  transform: translateX(100%);
  opacity: 1;
  pointer-events: none;
  transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.intelli-panel.open {
  transform: translateX(0);
  pointer-events: all;
}
/* Overlay tenue detrás del drawer */
.intelli-overlay {
  position: fixed; inset: 0;
  background: rgba(21,41,26,0.18);
  z-index: 8998;
  opacity: 0; pointer-events: none;
  transition: opacity .26s ease;
}
.intelli-overlay.open { opacity: 1; pointer-events: all; }
/* Header claro compacto */
.intelli-panel-header {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  flex-shrink: 0;
}
.intelli-panel-header-icon {
  width: 32px; height: 32px;
  background: var(--primary-light);
  color: var(--primary-darker);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.intelli-panel-header-info { flex: 1; min-width: 0; }
.intelli-panel-header-info h3 { font-size: 14px; font-weight: 700; line-height: 1.1; margin-bottom: 1px; color: var(--text-primary); }
.intelli-panel-header-info p { font-size: 13px; color: var(--text-muted); margin: 0; }

/* Toggle segmentado texto/voz */
.intelli-seg {
  display: inline-flex;
  background: var(--border-light);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}
.intelli-seg-btn {
  width: 30px; height: 26px;
  border: none; background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
}
.intelli-seg-btn.active { background: var(--card-bg); color: var(--primary-darker); box-shadow: var(--shadow-xs); }

.intelli-panel-close,
.intelli-panel-clear {
  background: transparent;
  border: none;
  color: var(--text-muted);
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.intelli-panel-close:hover,
.intelli-panel-clear:hover { background: var(--border-light); color: var(--text-primary); }

/* Vistas: texto vs voz */
.intelli-view-text { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; }
.intelli-view-voice { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: var(--bg); }
.intelli-panel.voice-mode .intelli-view-text { display: none; }
.intelli-panel.voice-mode .intelli-view-voice { display: flex; }

/* Orbe de voz */
.intelli-orb {
  width: 150px; height: 150px;
  border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--primary);
  box-shadow: 0 16px 40px rgba(22,38,26,0.25);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s;
}
.intelli-orb:hover { transform: scale(1.03); }
.intelli-orb-wave { display: flex; align-items: center; gap: 4px; height: 38px; }
.intelli-orb-wave i {
  width: 4px; height: 12px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.9);
  transition: height .15s;
}
.intelli-orb.listening { animation: orbPulse 1.6s ease-in-out infinite; }
.intelli-orb.listening .intelli-orb-wave i { animation: orbBar .9s ease-in-out infinite; }
.intelli-orb.listening .intelli-orb-wave i:nth-child(1){animation-delay:0s}
.intelli-orb.listening .intelli-orb-wave i:nth-child(2){animation-delay:.1s}
.intelli-orb.listening .intelli-orb-wave i:nth-child(3){animation-delay:.2s}
.intelli-orb.listening .intelli-orb-wave i:nth-child(4){animation-delay:.3s}
.intelli-orb.listening .intelli-orb-wave i:nth-child(5){animation-delay:.25s}
.intelli-orb.listening .intelli-orb-wave i:nth-child(6){animation-delay:.15s}
.intelli-orb.listening .intelli-orb-wave i:nth-child(7){animation-delay:.05s}
.intelli-orb.listening .intelli-orb-wave i:nth-child(8){animation-delay:.2s}
.intelli-orb.thinking { animation: orbPulse 1s ease-in-out infinite; }
.intelli-orb.speaking { animation: orbPulse 1.3s ease-in-out infinite; }
@keyframes orbPulse {
  0%,100% { box-shadow: 0 16px 40px rgba(22,38,26,0.25), 0 0 0 0 rgba(1,213,72,0.4); }
  50%     { box-shadow: 0 16px 40px rgba(22,38,26,0.25), 0 0 0 18px rgba(1,213,72,0); }
}
@keyframes orbBar { 0%,100% { height: 10px; } 50% { height: 30px; } }
.intelli-orb-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }

.intelli-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 180px;
  scroll-behavior: smooth;
  background: var(--bg);
}
.intelli-msgs::-webkit-scrollbar { width: 4px; }
.intelli-msgs::-webkit-scrollbar-track { background: transparent; }
.intelli-msgs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.intelli-msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.intelli-msg.user { flex-direction: row-reverse; }

/* Pasos del agente en vivo (qué hizo INTELLI) */
.intelli-trace {
  margin: 2px 0 0 34px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  animation: intelliTraceIn .25s ease;
}
@keyframes intelliTraceIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.intelli-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-soft, #6b7280);
  line-height: 1.3;
}
.intelli-step-ic {
  width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.intelli-step.ok .intelli-step-ic   { background: var(--primary-light); color: var(--primary-darker); }
.intelli-step.pend .intelli-step-ic { background: #fef3c7; color: #b45309; }
.intelli-step.fail .intelli-step-ic { background: #fee2e2; color: var(--danger); }
.intelli-step.fail span:last-child  { text-decoration: line-through; opacity: .7; }
.intelli-msg-av {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  color: var(--primary-darker);
}
.intelli-msg.user .intelli-msg-av {
  background: var(--primary-light);
  color: var(--brand-dark);
}
.intelli-msg-bub {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
  padding: 10px 13px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  max-width: calc(100% - 38px);
  word-break: break-word;
  overflow-x: auto;
  box-shadow: var(--shadow-xs);
}
.intelli-msg.user .intelli-msg-bub {
  background: var(--primary-light);
  color: var(--brand-dark);
  border-color: var(--accent-dim);
  border-radius: 14px 14px 4px 14px;
}
.intelli-msg-bub strong { font-weight: 700; }
.intelli-msg-bub em { font-style: italic; }
.intelli-msg-bub h4, .intelli-msg-bub h5 { font-size: 13px; font-weight: 700; margin: 5px 0 2px; }
.intelli-msg-bub ul, .intelli-msg-bub ol { margin: 4px 0; padding-left: 16px; }
.intelli-msg-bub li { margin-bottom: 2px; }
.intelli-msg-bub code { background: var(--border-light); border-radius: 4px; padding: 1px 4px; font-size: 13px; font-family: monospace; }
.intelli-msg-bub pre { background: var(--border-light); border-radius: var(--radius-xs); padding: 7px 10px; font-size: 13px; overflow-x: auto; margin: 5px 0; }
.intelli-msg-bub div[style*="overflow-x"] { overflow-x: auto; max-width: 100%; }
.intelli-msg-bub table { border-collapse: collapse; margin: 5px 0; font-size: 13px; min-width: max-content; }
.intelli-msg-bub th, .intelli-msg-bub td { border: 1px solid var(--border); padding: 3px 8px; white-space: nowrap; text-align: right; }
.intelli-msg-bub th:first-child, .intelli-msg-bub td:first-child { text-align: left; }
.intelli-msg-bub th { background: var(--border-light); font-weight: 600; text-align: left; }
.intelli-msg-bub p { margin: 2px 0; }
.intelli-msg-bub p:first-child { margin-top: 0; }
.intelli-msg-bub p:last-child { margin-bottom: 0; }
.intelli-msg-bub a { color: var(--primary); }
.intelli-msg.user .intelli-msg-bub a { color: var(--brand-dark); }

.intelli-typing-bub { display: flex; align-items: center; gap: 4px; padding: 4px 0; }
.intelli-dot { width: 6px; height: 6px; background: var(--text-hint); border-radius: 50%; animation: idot .9s ease infinite; }
.intelli-dot:nth-child(2) { animation-delay: .15s; }
.intelli-dot:nth-child(3) { animation-delay: .3s; }
@keyframes idot { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }

.intelli-chips-row {
  padding: 8px 12px 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
  border-top: 1px solid var(--border-light);
}
.intelli-chip {
  background: var(--primary-xlight);
  border: 1px solid var(--accent-dim);
  color: var(--primary-darker);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
  white-space: nowrap;
}
.intelli-chip:hover { background: var(--primary-light); }

.intelli-input-row {
  padding: 10px 12px;
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  background: var(--card-bg);
}
.intelli-inp {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  padding: 8px 14px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  color: var(--text-primary);
  background: var(--bg);
  transition: border-color .15s;
}
.intelli-inp:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(1,213,72,.18); }
.intelli-send-btn {
  width: 36px; height: 36px;
  background: var(--primary);
  color: var(--brand-dark);
  border: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, transform .1s, color .15s;
}
.intelli-send-btn:hover:not(:disabled) { background: var(--sidebar-active); color: #fff; transform: scale(1.06); }
.intelli-send-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Botón de micrófono (dictado por voz) */
.intelli-mic-btn {
  width: 36px; height: 36px;
  background: var(--card-bg);
  color: var(--text-secondary);
  border: 1.5px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: all .15s;
}
.intelli-mic-btn:hover { border-color: var(--primary); color: var(--primary-darker); }
.intelli-mic-btn.recording {
  background: var(--danger); color: #fff; border-color: var(--danger);
  animation: micPulse 1.2s ease-in-out infinite;
}
@keyframes micPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,39,68,.45); }
  50%     { box-shadow: 0 0 0 7px rgba(245,39,68,0); }
}

/* Botón de herramientas */
.intelli-tools-btn {
  width: 36px; height: 36px;
  background: var(--card-bg);
  color: var(--text-secondary);
  border: 1.5px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: all .15s;
}
.intelli-tools-btn:hover { border-color: var(--primary); color: var(--primary-darker); background: var(--primary-xlight); }

/* Hoja desplegable con todas las herramientas */
.intelli-tools-sheet {
  position: absolute;
  left: 8px; right: 8px; bottom: 60px;
  max-height: 68%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 -8px 30px rgba(0,0,0,.16);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(12px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 6;
}
.intelli-tools-sheet.open { opacity: 1; transform: none; pointer-events: auto; }
.intelli-tools-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 6px;
  font-size: 13px; font-weight: 700; color: var(--text-primary);
}
.intelli-tools-x {
  width: 26px; height: 26px; border: none; background: transparent;
  color: var(--text-secondary); cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.intelli-tools-x:hover { background: var(--bg); color: var(--text-primary); }
.intelli-tools-hint { padding: 0 14px 8px; font-size: 13px; color: var(--text-soft, #6b7280); }
.intelli-tools-hint b { color: var(--primary-darker); }
.intelli-tools-list { overflow-y: auto; padding: 4px 8px 10px; }
.intelli-tools-cat {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--primary-darker); padding: 10px 8px 4px;
}
.intelli-tool-item, .intelli-slash-item {
  width: 100%; display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 8px; border: none; background: transparent;
  border-radius: var(--radius-md); cursor: pointer; text-align: left;
}
.intelli-tool-item:hover, .intelli-slash-item:hover, .intelli-slash-item.active { background: var(--primary-light); }
.intelli-tool-cmd {
  flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--primary-darker);
  background: var(--primary-xlight); border: 1px solid var(--primary-light);
  border-radius: var(--radius-xs); padding: 2px 6px; margin-top: 1px; font-family: ui-monospace, monospace;
}
.intelli-tool-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.intelli-tool-txt b { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.intelli-tool-txt i {
  font-size: 13px; font-style: normal; color: var(--text-soft, #6b7280);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Dropdown del autocompletado con "/" */
.intelli-slash {
  position: absolute;
  left: 8px; right: 8px; bottom: 60px;
  max-height: 50%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 -8px 24px rgba(0,0,0,.14);
  overflow-y: auto; padding: 6px;
  display: none; z-index: 7;
}
.intelli-slash.open { display: block; }

/* Barra de modo (voz / texto) en el header */
.intelli-modebar {
  display: flex; gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg);
  flex-shrink: 0;
}
.intelli-mode-btn {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-muted);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; transition: all .15s;
}
.intelli-mode-btn svg { width: 14px; height: 14px; }
.intelli-mode-btn.active {
  background: var(--brand-dark); color: #fff; border-color: var(--brand-dark);
}
.intelli-mode-btn.active svg { color: var(--accent); }
/* Indicador "hablando" (TTS activo) */
.intelli-speaking { color: var(--primary-darker); }

@media (max-width: 600px) {
  .intelli-panel { width: 100vw; max-width: 100vw; right: 0; bottom: 0; }
  /* El fab vive en el header (position:relative). NO usar offsets bottom/right
     porque empujarían el botón fuera de línea ("volando"). */
  .intelli-fab { right: auto; bottom: auto; top: auto; left: auto; }
}

/* ===========================================================
   Seguimiento de Pagos — Matriz / Cronograma / Timeline
   (compartido entre matriz-pagos.html y prestamos.html)
   =========================================================== */
.matriz-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
/* .view-toggle usa el componente .seg (ver «Componentes compartidos») */
.view-toggle button svg { width: 14px; height: 14px; }

.matriz-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; font-size: 13px; }
.matriz-legend .lg { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); font-weight: 500; }
.matriz-legend .sw { width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.06); }

/* Paleta sólida estilo Excel (como en el control de pagos original del
   cliente) — colores más saturados que un pastel, con el font-color de
   cada clase ajustado para que el texto nunca se pierda sobre el fondo. */
.st-pagado  { background: #92d050; color: #1a3d05; }   /* verde: a tiempo */
.st-hoy     { background: #ffc000; color: #4a3400; }   /* amarillo/dorado: pagó tarde */
.st-futuro  { background: #00b0f0; color: #00263d; }   /* azul: por delante */
.st-m1      { background: #ff8c00; color: #3d1f00; }   /* naranja: mora 1-7d (incluye parciales) */
.st-m2      { background: #ff0000; color: #fff; }      /* rojo: mora 8-90d (incluye parciales) */
.st-perdida { background: var(--danger); color: #fff; }      /* rojo oscuro: +90d pérdida (incluye parciales) */
.st-empty   { background: #fff; }

#view-container { width: 100%; }
.matriz-wrapper {
  width: 100%; overflow: auto; max-height: calc(100vh - 280px);
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card-bg);
}
table.matriz { border-collapse: separate; border-spacing: 0; font-size: 13px; white-space: nowrap; width: 100%; min-width: 100%; }
table.matriz th, table.matriz td {
  border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
  padding: 4px 7px; text-align: center; height: 34px;
}
table.matriz thead th { position: sticky; top: 0; z-index: 3; background: var(--primary-darker); color: #fff; font-weight: 700; font-size: 13px; height: 30px; }
table.matriz .col-cliente {
  position: sticky; left: 0; z-index: 2; background: var(--card-bg);
  text-align: left; font-weight: 600; min-width: 180px; max-width: 180px;
  overflow: hidden; text-overflow: ellipsis; box-shadow: 1px 0 0 var(--border);
}
table.matriz thead .col-cliente { z-index: 4; background: #0c251f; }
table.matriz .col-ejec {
  position: sticky; left: 180px; z-index: 2; background: var(--card-bg);
  min-width: 56px; max-width: 56px; font-weight: 600; box-shadow: 1px 0 0 var(--border);
}
table.matriz thead .col-ejec { z-index: 4; background: #0c251f; }
table.matriz .col-debe {
  position: sticky; left: 236px; z-index: 2; background: var(--card-bg);
  min-width: 92px; max-width: 92px; font-weight: 700; box-shadow: 1px 0 0 var(--border);
  text-align: right; padding-right: 10px;
}
table.matriz thead .col-debe { z-index: 4; background: #0c251f; }
.cell-monto { font-weight: 700; line-height: 1.1; }
.cell-fecha { font-size: 12px; opacity: .75; line-height: 1.1; }
.cell-pago { position: relative; cursor: pointer; }
.cell-pago:hover { outline: 2px solid rgba(22,38,26,0.35); outline-offset: -2px; }
.cell-nota-dot { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-darker); box-shadow: 0 0 0 1.5px #fff; }
/* Puntito de "pago parcial" — la celda ya toma el color de mora normal
   (naranja/rojo/rojo oscuro) según los días; este punto blanco con anillo
   oscuro es lo único que distingue "no pagó nada" de "pagó una parte". */
.cell-parcial-dot { position: absolute; top: 3px; left: 3px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--primary-darker); }
.matriz-cliente-name { display: block; overflow: hidden; text-overflow: ellipsis; }
.matriz-cliente-sub  { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.cli-top { display: flex; align-items: center; gap: 4px; }
.cli-top .matriz-cliente-name { flex: 1; }
.btn-irr-matriz { border: none; background: transparent; color: var(--text-hint); font-size: 13px; line-height: 1; padding: 2px 3px; border-radius: 5px; flex-shrink: 0; transition: all var(--transition); }
.btn-irr-matriz:hover { background: var(--danger-light); color: var(--danger); }

.crono-grid { display: flex; flex-direction: column; gap: 12px; }
.crono-week { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs); }
.crono-week.is-current { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(1,213,72,0.25); }
.crono-head { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border-light); cursor: pointer; user-select: none; }
.crono-head:hover { background: var(--border-light); }
.crono-date { font-weight: 700; font-size: 13px; }
.crono-badge { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full); background: var(--primary-light); color: var(--primary-darker); }
.crono-badge.cur { background: var(--primary); color: #06340f; }
.crono-stats { margin-left: auto; display: flex; gap: 16px; font-size: 13px; }
.crono-stat b { font-weight: 700; }
.crono-body { padding: 6px 10px 10px; display: none; }
.crono-week.open .crono-body { display: block; }
.crono-chev { transition: transform var(--transition); }
.crono-week.open .crono-chev { transform: rotate(90deg); }
.crono-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); font-size: 13px; }
.crono-row:hover { background: var(--border-light); }
.crono-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.crono-row .nm { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crono-row .ej { color: var(--text-muted); font-size: 13px; min-width: 44px; }
.crono-row .mt { font-weight: 700; min-width: 80px; text-align: right; }
.crono-row .pg { font-size: 12px; color: var(--text-muted); min-width: 54px; text-align: right; }

.tl-head-note { display: flex; align-items: center; gap: 6px; margin: 0 0 8px 226px; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.tl-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--border-light); color: var(--text-secondary);
  font-size: 12px; font-weight: 800; cursor: help; flex-shrink: 0;
}
.tl-help:hover { background: var(--primary-light); color: var(--primary-darker); }
.tl-list { display: flex; flex-direction: column; gap: 8px; }
.tl-row { display: flex; align-items: center; gap: 12px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 9px 14px; box-shadow: var(--shadow-xs); }
.tl-info { min-width: 200px; max-width: 200px; }
.tl-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-sub { font-size: 12px; color: var(--text-muted); }
.tl-track { display: flex; gap: 3px; flex: 1; align-items: center; }
.tl-seg { flex: 1; height: 22px; border-radius: 4px; min-width: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.tl-prog { min-width: 86px; text-align: right; font-size: 13px; }
.tl-prog b { font-size: 14px; font-weight: 800; }
.empty-msg { padding: 40px; text-align: center; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════
   MOTOR FINANCIERO
   ══════════════════════════════════════════════════════════════ */
.motor-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.motor-picker { flex: 1 1 340px; max-width: 520px; }
.motor-picker .form-label { margin-bottom: 6px; }
.motor-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.motor-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); white-space: nowrap; }
.motor-chip-ok   { color: var(--primary-dark); border-color: #bfe8c6; background: #f0faf2; }
.motor-chip-warn { color: #92400e; border-color: #fde68a; background: #fffbeb; }
.motor-chip-off  { color: #991b1b; border-color: #fecaca; background: #fef2f2; }

.motor-empty { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); padding: 48px 20px; text-align: center; }
.motor-empty-inner { max-width: 560px; margin: 0 auto; color: var(--text-muted); }
.motor-empty-inner svg { color: var(--primary); opacity: .7; margin-bottom: 10px; }
.motor-empty-inner h3 { font-size: 17px; color: var(--text); margin-bottom: 8px; }
.motor-empty-inner p { font-size: 13px; line-height: 1.6; }

.motor-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px; }
.motor-head-name { font-size: 18px; font-weight: 700; }
.motor-head-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.motor-head-right { text-align: right; }
.motor-head-date { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.motor-decision { display: inline-block; padding: 6px 14px; border-radius: var(--radius-full); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.motor-decision-none     { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
.motor-decision-aprobar  { background: #dcfce7; color: #166534; }
.motor-decision-revisar  { background: #fef3c7; color: #92400e; }
.motor-decision-rechazar { background: #fee2e2; color: #991b1b; }
.motor-decision-ajustar  { background: #fef3c7; color: #92400e; }

.motor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.motor-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.motor-card-wide { grid-column: 1 / -1; }
.motor-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-light); flex-wrap: wrap; }
.motor-card-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.motor-card-title svg { color: var(--primary); }
.motor-step { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 800; align-items: center; justify-content: center; }
.motor-card-body { padding: 16px; }
.motor-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.motor-hint { font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.motor-hint a { color: var(--primary-dark); font-weight: 600; }
.motor-banner { font-size: 13px; padding: 10px 12px; border-radius: var(--radius-sm); margin-bottom: 12px; line-height: 1.5; }
.motor-banner-warn  { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.motor-banner-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.motor-details { margin-top: 14px; border-top: 1px solid var(--border-light); padding-top: 10px; }
.motor-details summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--primary-dark); }

/* 1. Score ML */
.ml-result { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: start; }
.ml-gauge { text-align: center; padding: 10px 6px; background: var(--bg); border-radius: var(--radius); }
.ml-gauge-score { font-size: 40px; font-weight: 800; line-height: 1; color: var(--text-muted); }
.ml-grade-A { color: var(--primary-dark); } .ml-grade-B { color: var(--accent); } .ml-grade-C { color: #d97706; } .ml-grade-D { color: var(--danger); }
.ml-gauge-grade { margin-top: 8px; }
.ml-grade-badge { display: inline-block; padding: 2px 12px; border-radius: var(--radius-full); font-weight: 800; font-size: 13px; color: #fff; background: var(--text-muted); }
.ml-grade-badge.ml-grade-A { background: var(--primary-dark); } .ml-grade-badge.ml-grade-B { background: var(--accent); } .ml-grade-badge.ml-grade-C { background: #d97706; } .ml-grade-badge.ml-grade-D { background: var(--danger); }
.ml-gauge-prob { font-size: 13px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
.ml-boot { color: #92400e; font-weight: 600; }
.ml-fact-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 8px; }
.ml-fact { margin-bottom: 9px; }
.ml-fact-row { display: flex; justify-content: space-between; font-size: 13px; }
.ml-fact-sub { font-size: 13px; color: var(--text-muted); }
.ml-fact-up { color: var(--danger); font-weight: 700; } .ml-fact-down { color: var(--primary-dark); font-weight: 700; }
.ml-fact-bar { height: 5px; background: var(--border-light); border-radius: var(--radius-full); overflow: hidden; margin-top: 3px; }
.ml-fact-bar > div { height: 100%; border-radius: var(--radius-full); }
.ml-fact-up-bg { background: var(--danger); } .ml-fact-down-bg { background: var(--primary); }
.ml-overrides { margin-top: 10px; }
.ml-ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px; }
.ml-group-title { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--primary-darker); }
.ml-group-title:first-child { margin-top: 2px; }
.ml-group-title span { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--primary-dark); background: var(--primary-light); border-radius: var(--radius-full); padding: 2px 9px; }
.ml-auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 14px; }
.ml-auto-row { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: baseline; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); }
.ml-auto-row span { font-size: 13px; color: var(--text-muted); }
.ml-auto-row strong { font-size: 13px; color: var(--text-primary); }
.ml-auto-row em { grid-column: 1 / -1; font-size: 12px; font-style: normal; color: var(--text-hint); text-transform: capitalize; }
.ml-ov-row label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.ml-ov-row .form-input, .ml-ov-row .form-select { padding: 6px 9px; font-size: 13px; }
.ml-src { font-size: 12px; padding: 1px 6px; border-radius: var(--radius-full); background: #eef7f0; color: var(--primary-dark); font-weight: 600; margin-left: 4px; }
.ml-src-missing { background: #fef2f2; color: #991b1b; }

/* 2. Validación de campo */
.campo-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px; }
.campo-docs { display: grid; gap: 14px; }
.campo-doc-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 8px; }
.campo-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px; border: 2px dashed var(--border); border-radius: var(--radius-md); padding: 12px; cursor: pointer; background: var(--bg); transition: border-color .15s; }
.campo-drop:hover { border-color: var(--primary); }
.campo-drop img { max-height: 160px; max-width: 100%; border-radius: var(--radius-xs); object-fit: contain; }
.campo-drop-txt { font-size: 13px; color: var(--text-muted); text-align: center; }
.campo-ocr { margin-top: 8px; font-size: 13px; }
.campo-ocr-title { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--primary-dark); margin-bottom: 4px; }
.campo-ocr > div:not(.campo-ocr-title) { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--border-light); }
.campo-ocr span { color: var(--text-muted); text-transform: capitalize; }
.campo-preguntas { display: grid; gap: 9px; }
.cq-row { display: grid; grid-template-columns: 1fr 150px; gap: 10px; align-items: center; }
.cq-label { font-size: 13px; }
.cq-row .form-input, .cq-row .form-select { padding: 6px 9px; font-size: 13px; }
.cq-bool { display: flex; gap: 6px; }
.cq-opt { flex: 1; padding: 6px 0; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-muted); }
.cq-opt.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.campo-verdict { margin-top: 16px; border-radius: var(--radius); padding: 16px; border: 1px solid var(--border); }
.campo-verdict-aplica   { background: #f0fdf4; border-color: #bbf7d0; }
.campo-verdict-revisar  { background: #fffbeb; border-color: #fde68a; }
.campo-verdict-no_aplica{ background: #fef2f2; border-color: #fecaca; }
.campo-verdict-main { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.campo-verdict-label { font-size: 18px; font-weight: 800; }
.campo-verdict-aplica .campo-verdict-label { color: #166534; } .campo-verdict-revisar .campo-verdict-label { color: #92400e; } .campo-verdict-no_aplica .campo-verdict-label { color: #991b1b; }
.campo-verdict-conf { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.campo-verdict-date { font-size: 13px; color: var(--text-muted); margin-left: auto; }
.campo-verdict-resumen { font-size: 13px; margin: 8px 0 0; line-height: 1.55; }
.campo-coins { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.campo-coin { font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-full); background: var(--surface); border: 1px solid var(--border); }
.campo-coin.ok { color: #166534; border-color: #bbf7d0; } .campo-coin.warn { color: #92400e; border-color: #fde68a; } .campo-coin.bad { color: #991b1b; border-color: #fecaca; }
.campo-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.campo-lists ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
.campo-list-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 5px; }
.campo-list-alert { color: #991b1b; }
.campo-cap { margin-top: 10px; font-size: 13px; }

/* 3. Notas de voz */
.voz-recorder { display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--bg); border-radius: var(--radius); margin-bottom: 14px; }
.voz-btn { width: 54px; height: 54px; border-radius: 50%; border: none; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; box-shadow: 0 4px 14px rgba(1,213,72,.35); transition: transform .12s, background .15s; }
.voz-btn:hover { transform: scale(1.05); }
.voz-btn.recording { background: var(--danger); box-shadow: 0 0 0 6px rgba(245,39,68,.18); animation: vozpulse 1.2s infinite; }
.voz-btn:disabled { opacity: .6; cursor: wait; }
@keyframes vozpulse { 0% { box-shadow: 0 0 0 4px rgba(245,39,68,.25); } 70% { box-shadow: 0 0 0 12px rgba(245,39,68,0); } 100% { box-shadow: 0 0 0 4px rgba(245,39,68,0); } }
.voz-meta { flex: 1; min-width: 0; }
.voz-timer { font-family: 'Inter', monospace; font-size: 18px; font-weight: 700; }
.voz-level { height: 5px; background: var(--border-light); border-radius: var(--radius-full); overflow: hidden; margin: 6px 0; }
.voz-level-fill { height: 100%; width: 0; background: var(--accent); border-radius: var(--radius-full); transition: width .08s; }
.voz-status { font-size: 13px; color: var(--text-muted); }
.voz-list { display: grid; gap: 10px; }
.voz-item { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; }
.voz-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.voz-sent { padding: 2px 9px; border-radius: var(--radius-full); font-weight: 700; font-size: 13px; text-transform: capitalize; }
.voz-sent-positivo { background: #dcfce7; color: #166534; } .voz-sent-neutral { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); } .voz-sent-negativo { background: #fee2e2; color: #991b1b; }
.voz-int { font-weight: 600; text-transform: capitalize; }
.voz-disp { font-size: 13px; color: var(--text-muted); }
.voz-date { margin-left: auto; font-size: 13px; color: var(--text-muted); }
.voz-del { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; display: inline-flex; }
.voz-del:hover { color: var(--danger); }
.voz-resumen { font-size: 13px; margin-top: 6px; line-height: 1.5; }
.voz-trans { margin-top: 6px; font-size: 13px; }
.voz-trans summary { cursor: pointer; color: var(--primary-dark); font-weight: 600; }
.voz-trans p { margin: 6px 0 0; color: var(--text-muted); line-height: 1.55; white-space: pre-wrap; }
.voz-promesa { margin-top: 6px; font-size: 13px; font-weight: 600; color: #92400e; }
.voz-alertas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.voz-alertas span { font-size: 13px; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: var(--radius-full); padding: 2px 8px; }
.voz-audio { width: 100%; height: 32px; margin-top: 8px; }

/* 4. Buró */
.buro-top { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; }
.buro-score { font-size: 40px; font-weight: 800; text-align: center; background: var(--bg); border-radius: var(--radius); padding: 14px 6px; }
.buro-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; }
.buro-kpis > div { display: flex; flex-direction: column; }
.buro-kpis span { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.buro-kpis strong { font-size: 14px; }
.buro-meta { font-size: 13px; color: var(--text-muted); margin: 10px 0; }
.buro-table th, .buro-table td { font-size: 13px; padding: 7px 9px; }

/* 5. Dictamen */
.dict-top { display: grid; grid-template-columns: 220px 1fr; gap: 18px; margin-bottom: 16px; }
.dict-decision { border-radius: var(--radius); padding: 16px; text-align: center; }
.dict-decision-aprobar  { background: #dcfce7; color: #166534; }
.dict-decision-revisar  { background: #fef3c7; color: #92400e; }
.dict-decision-rechazar { background: #fee2e2; color: #991b1b; }
.dict-decision-ajustar  { background: #fef3c7; color: #92400e; }
.dict-decision-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.dict-decision-score { font-size: 44px; font-weight: 800; line-height: 1.1; margin: 6px 0; }
.dict-decision-score span { font-size: 16px; font-weight: 600; opacity: .7; }
.dict-decision-monto { font-size: 13px; line-height: 1.5; }
.dict-decision-monto strong { font-size: 15px; }
.dict-decision-exec { font-size: 13px; line-height: 1.45; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.08); opacity: .85; }
.dict-comps { display: grid; gap: 10px; }
.dict-comp-row { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.dict-comp-row em { font-style: normal; font-weight: 500; color: var(--text-muted); font-size: 13px; margin-left: 4px; }
.dict-comp-bar { height: 7px; background: var(--border-light); border-radius: var(--radius-full); overflow: hidden; margin: 4px 0 2px; }
.dict-comp-bar > div { height: 100%; border-radius: var(--radius-full); transition: width .5s; }
.dict-comp-det { font-size: 13px; color: var(--text-muted); }
.dict-narrativa { border-top: 1px solid var(--border-light); padding-top: 14px; font-size: 14px; line-height: 1.6; }
.dict-date { font-size: 13px; color: var(--text-muted); margin-top: 10px; text-align: right; }

/* Admin ML */
.ml-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.ml-kpi { background: var(--bg); border-radius: var(--radius-md); padding: 10px 12px; display: flex; flex-direction: column; }
.ml-kpi span { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.ml-kpi strong { font-size: 16px; margin: 2px 0; }
.ml-kpi em { font-style: normal; font-size: 13px; color: var(--text-muted); }
.ml-imp { margin-top: 14px; }
.ml-imp-row { display: grid; grid-template-columns: 220px 1fr 60px; gap: 10px; align-items: center; font-size: 13px; margin-bottom: 5px; }
.ml-imp-bar { height: 7px; background: var(--border-light); border-radius: var(--radius-full); overflow: hidden; }
.ml-imp-bar > div { height: 100%; background: var(--primary); border-radius: var(--radius-full); }
.ml-imp-row em { font-style: normal; color: var(--text-muted); text-align: right; }
.ml-schema { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 16px; margin-top: 8px; font-size: 13px; }
.ml-schema > div { display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--border-light); }
.ml-schema code { color: var(--primary-dark); font-weight: 600; min-width: 170px; }
.ml-schema span { color: var(--text-muted); }

@media (max-width: 900px) {
  .motor-grid { grid-template-columns: 1fr; }
  .campo-grid, .campo-lists, .dict-top, .ml-result, .buro-top { grid-template-columns: 1fr; }
  .cq-row { grid-template-columns: 1fr; gap: 4px; }
  .buro-kpis { grid-template-columns: repeat(2, 1fr); }
  .ml-imp-row { grid-template-columns: 1fr; gap: 3px; }
  .motor-chips { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   TABLA ANCHA CON SCROLL INTERNO (directorio de clientes)
   Altura fija, scroll vertical + horizontal, cabecera y columnas
   clave fijas (#, nombre a la izquierda; acciones a la derecha).
   ══════════════════════════════════════════════════════════════ */
.table-scroll {
  height: calc(100vh - 235px);
  min-height: 420px;
  overflow: auto;
  overscroll-behavior: contain;
  position: relative;
}
.table-scroll .data-table.wide { width: max-content; min-width: 100%; }
.table-scroll .data-table.wide th,
.table-scroll .data-table.wide td { white-space: nowrap; padding: 9px 12px; font-size: 13px; }
.table-scroll .data-table.wide thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--border);
}
.table-scroll .data-table.wide th.th-group {
  top: 0; z-index: 4; text-align: center; font-size: 12px; letter-spacing: .1em;
  color: var(--primary-dark); background: #f3f8f2; border-left: 1px solid var(--border-light);
}
.table-scroll .data-table.wide thead tr:nth-child(2) th { top: 30px; }
.table-scroll .col-fixed-1, .table-scroll .col-fixed-2 { position: sticky; z-index: 2; background: var(--surface); }
.table-scroll .col-fixed-1 { left: 0; width: 58px; min-width: 58px; max-width: 58px; box-sizing: border-box; }
.table-scroll .col-fixed-2 { left: 58px; box-shadow: inset -1px 0 0 var(--border); min-width: 220px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.table-scroll thead .col-fixed-1, .table-scroll thead .col-fixed-2 { z-index: 5; }
.table-scroll .col-fixed-r { position: sticky; right: 0; z-index: 2; background: var(--surface); box-shadow: inset 1px 0 0 var(--border); }
.table-scroll thead .col-fixed-r { z-index: 5; }
/* Las celdas fijas del encabezado deben quedar encima de los títulos que se desplazan (z 3) y de los de grupo (z 4):
   la regla genérica `.data-table.wide thead th` tiene más especificidad, así que aquí se iguala y se supera. */
.table-scroll .data-table.wide thead th.col-fixed-1,
.table-scroll .data-table.wide thead th.col-fixed-2,
.table-scroll .data-table.wide thead th.col-fixed-r { z-index: 6; }
/* Sombra en el borde de las columnas fijas: se nota que el contenido pasa por debajo, no que se encima */
.table-scroll .data-table.wide .col-fixed-2 { box-shadow: inset -1px 0 0 var(--border), 6px 0 8px -6px rgba(18, 51, 43, .18); }
.table-scroll .data-table.wide .col-fixed-r { box-shadow: inset 1px 0 0 var(--border), -6px 0 8px -6px rgba(18, 51, 43, .18); }
.table-scroll .data-table.wide tbody tr:hover td { background: var(--bg); }
.table-scroll .cell-clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; }
.table-scroll .cell-num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll .cell-flag-bad { color: var(--danger); font-weight: 700; }
.table-scroll .cell-flag-ok { color: var(--primary-dark); font-weight: 600; }
.table-scroll .row-loading td { text-align: center; color: var(--text-muted); padding: 14px; }
.table-scroll-status { font-size: 13px; color: var(--text-muted); padding: 8px 16px; border-top: 1px solid var(--border-light); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
@media (max-width: 768px) {
  .table-scroll { height: calc(100vh - 250px); min-height: 360px; }
  .table-scroll .col-fixed-1 { width: 46px; min-width: 46px; max-width: 46px; padding-left: 6px; padding-right: 6px; }
  .table-scroll .col-fixed-2 { left: 46px; min-width: 150px; max-width: 170px; }
  .table-scroll .col-fixed-r,
  .table-scroll .data-table.wide .col-fixed-r { position: static; box-shadow: none; }
}

/* ── Escala compacta del sistema (≈85 %) ─────────────────────────────────────
   Las pantallas de la app (las que llaman a initPage) se ven como con el zoom del navegador al 85 %:
   sidebar, topbar, tarjetas, tablas, modales y INTELLI. Solo escritorio; en móvil no se toca.
   Con `zoom`, las unidades vh/vw también se encogen: se compensan dividiendo entre --z. */
@media (min-width: 769px) {
  body.app-zoom { --z: 0.85; zoom: var(--z); max-width: none; }
  body.app-zoom .app-layout,
  body.app-zoom .main-content { min-height: calc(100vh / var(--z)); }
  body.app-zoom .sidebar { height: calc(100vh / var(--z)); }
  body.app-zoom .modal { max-height: calc(92vh / var(--z)); }
  body.app-zoom .intelli-panel { height: calc(100vh / var(--z)); max-width: calc(92vw / var(--z)); }
  body.app-zoom .matriz-wrapper { max-height: calc(100vh / var(--z) - 260px); }
  body.app-zoom .table-scroll { height: calc(100vh / var(--z) - 235px); }
  body.app-zoom .mapa-wrap { height: calc(100vh / var(--z) - 235px); }
}

/* ── Motor: dona de pesos ───────────────────────────────────────────────────── */
.motor-pesos { margin-bottom: 18px; }
.motor-pesos-sub { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-left: 6px; }
.motor-pesos-body { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.pesos-dona { position: relative; width: 200px; height: 200px; flex-shrink: 0; }
.pesos-dona svg { transform: rotate(-90deg); }
.pesos-dona circle { transition: stroke-dasharray .35s ease, stroke-dashoffset .35s ease, opacity .15s; }
.pesos-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.pesos-centro strong { font-size: 26px; letter-spacing: -.02em; color: var(--text-primary); }
.pesos-centro span { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.pesos-lista { flex: 1 1 320px; min-width: 260px; }
.pesos-fila { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border-light); font-size: 13px; cursor: default; }
.pesos-fila:last-child { border-bottom: none; }
.pesos-fila i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.pesos-fila b { font-size: 15px; font-variant-numeric: tabular-nums; }
.pesos-fila input[type=range] { grid-column: 2 / 4; width: 100%; accent-color: var(--primary-dark); }
.pesos-nota { margin-top: 8px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* ── Motor: tabla de amortización ─────────────────────────────────────────── */
#motor-amort { margin-bottom: 18px; }
.am-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; margin-bottom: 10px; }
.am-f label { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.am-f .form-input, .am-f .form-select { width: 100%; }
.am-hint { font-size: 13px; color: var(--text-hint); margin-top: 4px; line-height: 1.4; }
/* .am-seg usa el componente .seg */
.am-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 4px; }
.am-error { flex: 1; font-size: 13px; color: var(--danger); }
.am-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin: 16px 0 12px; }
.am-kpi { background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 8px 11px; }
.am-kpi span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.am-kpi strong { display: block; font-size: 15px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.am-kpi em { display: block; font-style: normal; font-size: 13px; color: var(--text-hint); }
.am-kpi.hi { background: var(--primary-light); border-color: var(--accent-dim); }
.am-tabla { max-height: 360px; overflow: auto; border: 1px solid var(--border-light); border-radius: var(--radius-md); }
.am-tabla table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.am-tabla th { position: sticky; top: 0; background: var(--bg); text-align: right; padding: 7px 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border-bottom: 1px solid var(--border); z-index: 1; }
.am-tabla th:first-child, .am-tabla th:nth-child(2), .am-tabla td:first-child, .am-tabla td:nth-child(2) { text-align: left; }
.am-tabla td { padding: 5px 10px; border-bottom: 1px solid var(--border-light); text-align: right; white-space: nowrap; }
.am-tabla tr.pb td { background: var(--primary-xlight); }
.am-tabla tfoot td { font-weight: 700; background: var(--bg); position: sticky; bottom: 0; }
.am-sub { margin: 14px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.am-nota { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-top: 8px; }
.am-anios { display: flex; gap: 8px; flex-wrap: wrap; }
.am-anio { font-size: 13px; padding: 4px 10px; border-radius: var(--radius-full); background: var(--bg); border: 1px solid var(--border-light); color: var(--text-secondary); }
.am-anio b { color: var(--text-primary); }

/* ── Sidebar: grupos desplegables ─────────────────────────────────────────── */
.nav-top { margin-bottom: 4px; }
.nav-group { margin-top: 6px; }
.nav-group-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 5px; border: none; background: none; cursor: pointer; font-family: inherit; color: var(--text-hint); }
.nav-group-head:hover { color: var(--text-secondary); }
.nav-group-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; white-space: nowrap; }
.nav-group-chev { flex-shrink: 0; transition: transform var(--transition); transform: rotate(-90deg); }
.nav-group.open .nav-group-chev { transform: rotate(0); }
.nav-group-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.nav-group:not(.open) .nav-group-body { overflow: hidden; }
.nav-group.open .nav-group-body { grid-template-rows: 1fr; }
.nav-group-inner { min-height: 0; overflow: hidden; }
/* Sidebar contraído: cada grupo es un icono de categoría; solo el grupo abierto muestra los iconos de sus páginas */
.nav-group-icon { display: none; }
body.sidebar-collapsed .nav-group-label,
body.sidebar-collapsed .nav-group-chev { display: none; }
body.sidebar-collapsed .nav-group { margin-top: 4px; }
body.sidebar-collapsed .nav-group-head {
  justify-content: center; padding: 9px 0; margin-bottom: 1px; border-radius: var(--radius-md); position: relative;
  color: var(--text-secondary); background: var(--border-light);
}
body.sidebar-collapsed .nav-group-head:hover { background: var(--sidebar-hover); color: var(--primary-darker); }
body.sidebar-collapsed .nav-group.open .nav-group-head { background: var(--primary-light); color: var(--primary-darker); }
body.sidebar-collapsed .nav-group-icon {
  display: flex; align-items: center; justify-content: center;
  width: var(--nav-icon-size, 12px); height: var(--nav-icon-size, 12px);
}
body.sidebar-collapsed .nav-group-icon svg { width: var(--nav-icon-size, 12px); height: var(--nav-icon-size, 12px); }
body.sidebar-collapsed .nav-group.open .nav-group-inner { padding: 3px 0 2px; border-bottom: 1px solid var(--border-light); margin-bottom: 2px; }

/* ── Menú flotante de acciones por fila (ActionMenu en utils.js) ───────────── */
.btn-opciones {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-secondary);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--transition);
}
.btn-opciones svg { width: 14px; height: 14px; opacity: .7; }
.btn-opciones.solo-icono { width: 32px; padding: 0; justify-content: center; }
.btn-opciones.solo-icono svg { width: 16px; height: 16px; opacity: .85; }
/* Columna "Más": angosta y centrada (encabezado y botón) */
.data-table th.col-mas, .data-table td.col-mas,
.table-scroll .data-table.wide th.col-mas, .table-scroll .data-table.wide td.col-mas { text-align: center; width: 1%; padding-left: 10px; padding-right: 10px; }
.data-table td.col-mas .actions { justify-content: center; }
/* La columna se distingue solo por un fondo verde muy claro (sin título) */
.table-scroll .data-table.wide thead th.col-mas,
.table-scroll .data-table.wide tbody tr td.col-mas { background: var(--primary-light); }
.table-scroll .data-table.wide tbody tr:hover td.col-mas { background: #dcf9e3; }
/* El botón toma el mismo verde de la columna (transparente sobre la celda); se marca al pasar el cursor o abrir */
.table-scroll .data-table.wide td.col-mas .btn-opciones { background: transparent; border-color: #c6eed1; color: var(--primary-darker); }
.table-scroll .data-table.wide td.col-mas .btn-opciones:hover,
.table-scroll .data-table.wide td.col-mas .btn-opciones.abierto { background: #cff4d8; border-color: var(--primary); }
.btn-opciones:hover, .btn-opciones.abierto { border-color: var(--primary); color: var(--primary-darker); background: var(--primary-xlight); }
.btn-opciones:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.amenu {
  position: fixed; z-index: 250; min-width: 200px; padding: 6px;
  background: var(--primary-light); border: 1px solid #c6eed1; border-radius: var(--radius); box-shadow: var(--shadow-lg);   /* mismo verde menta de la columna */
  transform-origin: top right; opacity: 0; transform: translateX(12px) scale(.98);
  transition: opacity .14s ease, transform .16s ease;
}
.amenu.arriba { transform-origin: bottom right; }
.amenu.visible { opacity: 1; transform: none; }
.amenu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 500; text-align: left;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.amenu-item:hover, .amenu-item:focus-visible { background: #cff4d8; color: var(--primary-darker); outline: none; text-decoration: none; }
.amenu-ic { display: inline-flex; width: 16px; height: 16px; color: var(--text-muted); flex: 0 0 16px; }
.amenu-ic svg { width: 16px; height: 16px; }
.amenu-item:hover .amenu-ic, .amenu-item:focus-visible .amenu-ic { color: var(--primary-darker); }
.amenu-danger, .amenu-danger .amenu-ic { color: var(--danger); }
.amenu-danger:hover, .amenu-danger:focus-visible { background: #ffe1e6; color: var(--danger); }
.amenu-danger:hover .amenu-ic, .amenu-danger:focus-visible .amenu-ic { color: var(--danger); }
.amenu-sep { height: 1px; margin: 5px 4px; background: #c6eed1; }
@media (prefers-reduced-motion: reduce) { .amenu { transition: none; } }

/* ── Modo auditoría (el master entró como otro usuario) ── */
.aud-bar { position: sticky; top: 0; z-index: 60; height: 36px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 18px;
  background: var(--warning-light); border-bottom: 1px solid var(--warning-border); color: #5c3d00; font-size: 13px; }
.aud-bar > span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aud-bar .aud-ic { width: 16px; height: 16px; flex-shrink: 0; }
.aud-bar .aud-tiempo { flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: 13px; padding: 2px 8px; border-radius: var(--radius-full); background: rgba(92,61,0,.12); }
.aud-bar .aud-tiempo.poco { background: var(--mal-bg); color: var(--mal-text); }
.aud-bar .aud-tiempo:empty { display: none; }
.aud-bar .aud-volver { flex: 0 0 auto; background: #5c3d00; color: #fff; border: 0; padding: 4px 12px; }
.aud-bar .aud-volver:hover { background: #3f2a00; }
.en-auditoria .topbar { top: 36px; }
.aud-entrar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.aud-entrar .form-group { flex: 1 1 280px; margin: 0; }
.aud-entrar .form-hint { flex-basis: 100%; margin: 0; }
.aud-bar.prueba { background: #e7f0fb; border-bottom-color: #c8dbf2; color: #1d3f73; }
.aud-bar.prueba .aud-volver { background: #1d3f73; }
.aud-bar.prueba .aud-volver:hover { background: #122a4f; }
.badge-prueba { background: var(--warning-light); color: #5c3d00; border: 1px solid var(--warning-border); font-weight: 700; letter-spacing: .02em; }

/* ── Historia de la persona con Camejo (Intentos de crédito, Validación de expediente) ── */
.hc-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 14px; font-size: 13px; }
.hc-kv b { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.hc-aviso { font-size: 13px; line-height: 1.5; padding: 8px 12px; border-radius: var(--radius-md); background: var(--aviso-bg); color: var(--aviso-text); margin-bottom: 8px; }
.hc-vacio { font-size: 13px; color: var(--text-muted); }
.hc-tabla { font-size: 13px; margin-top: 8px; }
.hc-tabla td, .hc-tabla th { padding: 6px 8px; }
.hc-tabla tr.hc-como td { padding-top: 0; font-size: 12px; color: var(--text-muted); border-top: 0; }

/* ── INTELLI: acción por confirmar (el agente se pausa antes de modificar datos) ── */
.intelli-confirma { border: 1px solid #f0c36b; background: #fffaeb; border-radius: var(--radius); padding: 10px 12px; margin: 6px 0 10px; font-size: 13px; line-height: 1.45; }
.intelli-confirma-t { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--aviso-text); margin-bottom: 6px; }
.intelli-confirma-a { margin-bottom: 6px; color: var(--text-secondary); }
.intelli-confirma-a b { display: block; color: var(--text-primary); }
.intelli-confirma-b { display: flex; gap: 8px; margin-top: 8px; }
.intelli-confirma-r { font-size: 13px; font-weight: 700; color: var(--aviso-text); }


/* ══ Componentes compartidos ══════════════════════════════════════════════════════════════════════════════
   Una sola definición para lo que antes cada pantalla copiaba con su propio nombre. Las páginas solo agregan
   lo que de verdad es distinto (por ejemplo, cuántas columnas lleva su fila de indicadores). */

/* Encabezado de la pantalla: filtros y acciones en una fila (el título vive en la barra superior) */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

/* Indicador chico: <div class="mini-kpi"><span>Etiqueta</span><strong>Valor</strong><em>detalle</em></div> */
.mini-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.mini-kpi { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 14px; min-width: 0; }
.mini-kpi span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.mini-kpi strong { font-size: 20px; }
.mini-kpi em { display: block; font-style: normal; font-size: 13px; color: var(--text-hint); }

/* Control segmentado: riel gris y la opción elegida en blanco (.on o .active) */
.seg, .view-toggle { display: inline-flex; background: var(--border-light); border-radius: var(--radius-md); padding: 3px; gap: 3px; }
.seg > button, .view-toggle > button { border: none; background: transparent; padding: 6px 12px; border-radius: var(--radius-sm); font-family: inherit; line-height: normal; font-size: 13px; font-weight: 600;
  color: var(--text-muted); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: background var(--transition), color var(--transition); }
.seg > button:hover, .view-toggle > button:hover { color: var(--text-primary); }
.seg > button.on, .seg > button.active, .view-toggle > button.active { background: var(--card-bg); color: var(--primary-darker); box-shadow: var(--shadow-xs); }
.seg > button b { font-weight: 700; color: var(--text-secondary); }
.seg.seg-ancho { display: flex; width: 100%; box-sizing: border-box; }
.seg.seg-ancho > button { flex: 1; justify-content: center; padding: 7px 8px; }

/* Chip de estado: .ok/.pos  .mal/.neg/.falta  .aviso  .neu ; con <i> de color al inicio si hace falta */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--radius-full); font-size: 13px; font-weight: 600;
  line-height: 1.5; background: var(--border-light); color: var(--text-secondary); white-space: nowrap; }
.chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.chip.ok, .chip.pos { background: var(--ok-bg); color: var(--ok-text); }
.chip.mal, .chip.neg, .chip.falta { background: var(--mal-bg); color: var(--mal-text); }
.chip.aviso { background: var(--aviso-bg); color: var(--aviso-text); }
.chip.neu { background: var(--neutro-bg); color: var(--neutro-text); }
.chip-fila { display: flex; flex-wrap: wrap; gap: 5px; }

/* Fila de filtros: buscador y selects del ancho de su contenido */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filtros .form-input, .filtros .form-select { width: auto; min-width: 130px; }