/* ============================================================
   Propset — Hoja de estilos principal
   Extraído de index.html el 2026-08-21 (deuda técnica: separar
   CSS del HTML para permitir cacheo aparte y reducir el tamaño
   del archivo principal). No incluye el CSS de las plantillas
   imprimibles (liquidaciones, contratos, actas) — esas viven
   intencionalmente dentro de strings JS, son documentos
   autónomos sin acceso a estas variables.
   ============================================================ */

/* Acelera globalmente todas las transiciones/animaciones del sistema a
   casi-instantáneo. Excepción: #chat-undo-progress, cuya animación de 5s
   ES el temporizador real de deshacer (no es solo cosmética) — su regla
   por ID tiene más especificidad y gana sobre este comodín. */
*, *::before, *::after { transition-duration:.06s !important; animation-duration:.1s !important; }
#chat-undo-progress { transition-duration:5s !important; }

/* ── Scrollbar temática global — 2026-09-08 ──────────────────────────
   Antes: 2px casi invisible solo en .sidebar, el resto del sistema usaba
   la barra por default del navegador. Ahora: una sola barra delgada,
   redondeada, con el color de marca, consistente en TODA la app
   (sidebar, contenido principal, modales, cualquier overflow). */
* { scrollbar-width:thin; scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track); }
*::-webkit-scrollbar { width:8px; height:8px; }
*::-webkit-scrollbar-track { background:var(--scrollbar-track); }
*::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:var(--scrollbar-thumb-hover); background-clip:padding-box; }
*::-webkit-scrollbar-corner { background:transparent; }

/* ── Sidebar header & toggle button ── */
.sidebar-header {
  display:flex; align-items:center;
  padding:10px 10px; height:auto;
  border-bottom:1px solid var(--sidebar-border);
  flex-shrink:0; gap:8px; position:relative;
}
.sidebar-toggle {
  background:var(--bg-sidebar-hover);
  border:none; cursor:pointer;
  color:var(--sidebar-text);
  border-radius:5px; padding:6px 8px;
  font-size:15px; line-height:1;
  flex-shrink:0; flex-grow:0;
  transition:background .15s,color .15s;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
}
.sidebar-toggle:hover { background:var(--bg-sidebar-active); color:#fff; }
.sidebar.collapsed .sidebar-header {
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  padding:12px 6px 10px !important;
  gap:6px !important;
}

/* ── Outline sidebar icons (match admin panel style) ── */
.nav-btn .nav-icon { opacity:1 !important; }
.nav-icon path, .nav-icon circle, .nav-icon rect, .nav-icon polygon, .nav-icon ellipse, .nav-icon line, .nav-icon polyline {
  fill:none; stroke:currentColor; stroke-width:2;
}

/* ── Hide SVG icons in section headings and KPI labels ── */
h3 > svg:first-child, h4 > svg:first-child { display:none !important; }
.kpi-label svg { display:none !important; }

/* ── Secciones hardcodeadas → usar variables CSS ── */
#repositorio > div, #mensajes > div, #usuarios > div {
  background:var(--bg-surface) !important;
  border-color:var(--border) !important;
  box-shadow:var(--shadow-md) !important;
  color:var(--text-primary) !important;
}
#repositorio thead tr, #mensajes thead tr, #usuarios thead tr {
  background:var(--bg-app) !important;
}
#repositorio th, #mensajes th, #usuarios th {
  color:var(--text-secondary) !important;
  border-bottom-color:var(--border) !important;
}
#repositorio td, #mensajes td, #usuarios td {
  border-bottom-color:var(--border-light) !important;
}
/* Botones de acción en secciones hardcodeadas */
#repositorio button[onclick="openModalDoc()"],
#mensajes button[onclick="openModalMsg()"],
#usuarios button[onclick="openModalInvitar()"] {
  background:var(--ck-red) !important;
  font-family:inherit !important;
  border-radius:var(--radius-sm) !important;
}


/* ============================================================
   Propset — MIUI Shape System + Paleta Original
   Bordes redondeados y animaciones MIUI, colores clásicos
   ============================================================ */
:root {
  /* Brand — Paleta Original */
  --ck-navy:    #3f5ec2;
  --ck-gold:    #1e5fa8;
  --ck-red:     #df2225;
  --ck-green:   #27774a;
  --ck-blue:    #1e5fa8;
  --ck-cyan:    #7b93e8;
  --ck-yellow:  #1e5fa8;
  --ck-purple:  #142c56;
  --ck-orange:  #1a56db;

  /* Tema "banca profesional" 2026-09-08 v3 — paleta completa tomada de
     las capturas de referencia, con los distintos azules que tenían (no
     era uno solo). El sidebar blanco es un pedido aparte, no de las
     fotos — no se toca acá. */
  --bank-navy-dark:   #0a1330; /* barra superior */
  --bank-navy:        #142c56; /* barra de menú, un poco más clara */
  --bank-blue:        #1a56db; /* azul primario — links, números, tab activo */
  --bank-blue-light:  #7b93e8; /* azul claro — stepper, botón continuar */
  --bank-blue-soft:   #eef1fb; /* lavanda — fondos de tarjeta */
  --bank-label:       #8a94a6; /* gris de labels */

  /* Layout */
  --sidebar-width:     220px;
  --sidebar-collapsed: 56px;
  --header-height:     60px;

  /* Surfaces — Indigo Mono */
  --bg-app:     #fafafa;
  --bg-surface: #ffffff;
  --bg-sidebar: #1a2b40;
  /* Sidebar 2026-09-08 v4: pasa a fondo NAVY (#142c56, el mismo azul de
     la landing) — antes había pasado a blanco por un pedido puntual,
     ahora se pide de vuelta el navy para que combine con la landing.
     Las variables de abajo son exclusivas del sidebar (verificado:
     ningún otro selector las usa), así que se redefinen directo para
     texto claro sobre fondo oscuro. */
  --sidebar-bg: var(--bank-navy);
  --bg-sidebar-hover:  rgba(255,255,255,.07);
  --bg-sidebar-active: rgba(255,255,255,.1);
  --sidebar-border: rgba(255,255,255,.08);
  --sidebar-text: rgba(255,255,255,.78);
  --sidebar-text-muted: rgba(255,255,255,.42);

  /* Text */
  --text-primary:   #000000;
  --text-secondary: #525252;
  --text-muted:     #9a9a9a;

  /* Indigo Mono — tokens completos */
  --secondary:      #ebebeb;
  --muted:          #f5f5f5;
  --accent:         #dbe6f6;
  --accent-foreground: #14185a;
  --input:          #ebebeb;
  --ring:           #3f5ec2;

  /* Borders & shadows — Indigo Mono */
  --border:       #e4e4e4;
  --border-light: #f0f0f0;
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.12);

  /* Radii — Indigo Mono (0.5rem base) */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;

  /* ============================================================
     SISTEMA DE DISEÑO — tema completo 2026-09-08 (tipografía, espaciado,
     radios extendidos, sombras extendidas, efectos). Son tokens NUEVOS,
     aditivos — no cambian --radius-sm/md/lg ni --shadow-sm/md/lg de
     arriba (ya los usan cientos de reglas; cambiarles el valor habría
     movido el look de todo el sistema de una sola vez, sin poder
     revisarlo módulo por módulo). Se van aplicando uno por uno.
     ============================================================ */

  /* Tipografía */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Plus Jakarta Sans', var(--font-sans);
  --fs-2xs: 10px;
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-base:13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  19px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;
  --ls-tight:  -0.01em;
  --ls-wide:    0.05em;
  --ls-widest:  0.1em;

  /* Espaciado — escala de 4px, para paddings/gaps/márgenes consistentes */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radios extendidos — para cuando --radius-sm/md/lg (6/8/10px, muy
     angulares) no alcanzan; el estilo "banca profesional" usa curvas más
     generosas en tarjetas/inputs. */
  --radius-xs:   6px;
  --radius-base: 10px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-pill: 999px;

  /* Sombras extendidas */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-xl: 0 16px 40px rgba(0,0,0,0.16);

  /* Efectos — Propset ya fuerza *TODAS* las transiciones a ~60ms (ver la
     regla global cerca del inicio del archivo, es intencional: la UI se
     siente instantánea, no "elegante-lenta"). Estos tokens documentan esa
     duración y dan una única curva de aceleración consistente, para no
     reinventar cubic-bezier distintos en cada componente nuevo. */
  --transition-fast: 60ms cubic-bezier(0.4,0,0.2,1);
  --ease-standard: cubic-bezier(0.4,0,0.2,1);
  --hover-lift: translateY(-2px);

  /* Scrollbar temática (Firefox) — el detalle por navegador (Chrome/Edge)
     va en las reglas ::-webkit-scrollbar más abajo. */
  --scrollbar-thumb: rgba(26,43,64,.18);
  --scrollbar-thumb-hover: rgba(26,43,64,.32);
  --scrollbar-track: transparent;
}
body.dark-mode {
  --scrollbar-thumb: rgba(255,255,255,.14);
  --scrollbar-thumb-hover: rgba(255,255,255,.24);
}
:root {

  /* Backward compat */
  --navy:      #3f5ec2;
  --gold:      #1e5fa8;
  --red:       #df2225;
  --green:     #27774a;
  --blue:      #1e5fa8;
  --cyan:      #7b93e8;
  --yellow:    #1e5fa8;
  --purple:    #142c56;
  --orange:    #1a56db;
  --main-bg:   #fafafa;
  --white:     #ffffff;
  --gray-light:#f0f0f0;
  --gray-dark: #525252;
}

/* ── DARK MODE ──────────────────────────────────────────── */
body.dark-mode {
  --bg-app:     #0e1116;
  --bg-surface: #161b22;
  --bg-sidebar: #0a0e13;
  /* En oscuro el sidebar se queda como estaba (panel oscuro, texto
     claro) — el pedido de "sidebar blanco" es específico del modo claro,
     donde antes era navy. */
  --sidebar-bg: var(--bg-sidebar);
  --bg-sidebar-hover:  rgba(255,255,255,0.05);
  --bg-sidebar-active: rgba(192,57,43,0.12);
  --sidebar-border: rgba(255,255,255,.04);
  /* Tema banca en oscuro: mismo azul primario (ya es bastante claro y
     lee bien sobre fondo oscuro), pero el fondo lavanda pasa a un
     overlay translúcido en vez de un bloque claro sólido. */
  --bank-navy-dark: var(--bg-sidebar);
  --bank-navy:      #1c3660;
  --bank-blue:      #5b9bd8;
  --bank-blue-light:#7b93e8;
  --bank-blue-soft: rgba(26,86,219,.12);
  --bank-label:     #8a94a6;
  --sidebar-text: rgba(255,255,255,.7);
  --sidebar-text-muted: rgba(255,255,255,.25);
  --text-primary:   #cdd5e0;
  --text-secondary: #7e8ea4;
  --text-muted:     #525e6d;
  --secondary:      #222222;
  --muted:          #1d1d1d;
  --accent:         #333333;
  --accent-foreground: #dbe6f6;
  --input:          #333333;
  --ring:           #3f5ec2;
  --border:       #252d38;
  --border-light: #1c2330;
  --main-bg:  #0e1116;
  --white:    #161b22;
  --gray-light:#1c2330;
  --gray-dark: #7e8ea4;
}
body.dark-mode { background-color:var(--bg-app); color:var(--text-primary); }
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea { background:#0e1116; color:var(--text-primary); border-color:var(--border); }
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus { border-color:var(--ck-red); }
body.dark-mode .card,
body.dark-mode .glass-card,
body.dark-mode .form-section,
body.dark-mode .stat-card,
body.dark-mode .modal-content,
body.dark-mode .accordion-item,
body.dark-mode body.dark-mode .crm-card { background:var(--bg-surface); border-color:var(--border); }
body.dark-mode .card-header     { background:var(--bg-surface); border-color:var(--border); color:var(--text-primary); }
body.dark-mode .top-header      { background:var(--bg-surface); border-bottom-color:rgba(30,95,168,.2); color:var(--text-primary); }
body.dark-mode .sidebar         { background:var(--bg-sidebar); }
body.dark-mode .table           { color:var(--text-primary); }
body.dark-mode .table thead     { background:var(--bg-surface); border-bottom-color:var(--border); }
body.dark-mode .table th        { color:var(--text-secondary); border-bottom-color:var(--border); }
body.dark-mode .table tbody tr  { border-bottom-color:var(--border); }
body.dark-mode .table tbody tr:hover { background:rgba(255,255,255,0.025); }
body.dark-mode .table td        { color:var(--text-primary); }
body.dark-mode .text-muted      { color:var(--text-secondary)!important; }
body.dark-mode .badge           { background:var(--gray-light); color:var(--text-primary); }
body.dark-mode .badge-success   { background:rgba(39,119,74,.15); color:#3fb950; }
body.dark-mode .badge-danger    { background:rgba(223,34,37,.15); color:#f06a6a; }
body.dark-mode .badge-warning   { background:rgba(30,95,168,.15); color:#58a6ff; }
body.dark-mode .badge-info      { background:rgba(30,95,168,.15); color:#58a6ff; }
body.dark-mode .badge-gray      { background:rgba(90,106,126,.15); color:#8b949e; }
body.dark-mode .badge-purple    { background:rgba(26,86,219,.15); color:#58a6ff; }
body.dark-mode .alert-ok        { background:rgba(39,119,74,.08);  color:#3fb950; }
body.dark-mode .alert-info      { background:rgba(30,95,168,.08);  color:#58a6ff; }
body.dark-mode .alert-aviso     { background:rgba(30,95,168,.08);  color:#58a6ff; }
body.dark-mode .alert-urgente   { background:rgba(223,34,37,.08);  color:#f06a6a; }
body.dark-mode .toast           { background:var(--bg-surface); color:var(--text-primary); }
body.dark-mode .toast.success   { background:#0b1e12; }
body.dark-mode .toast.error     { background:#1e0b0b; }
body.dark-mode .toast.warning   { background:#1a1005; }
body.dark-mode .toast.info      { background:#0b1525; }
body.dark-mode .nav-btn         { color:var(--sidebar-text); }
body.dark-mode .nav-btn:hover   { background:var(--bg-sidebar-hover); color:#f3f4f6; }
body.dark-mode .nav-btn.active  { color:white; background:var(--bg-sidebar-active); }
body.dark-mode .nav-section     { color:rgba(125,140,158,.4); }
body.dark-mode .tab-btn         { color:#7e8ea4; }
body.dark-mode .tab-btn.active  { color:#cdd5e0; border-bottom-color:var(--ck-red); }
body.dark-mode .tab-buttons     { border-bottom-color:var(--border); }
body.dark-mode .accordion-header { background:var(--bg-surface); color:#cdd5e0; }
body.dark-mode .accordion-header:hover { background:#1c2330; }
body.dark-mode .accordion-header.active { background:var(--ck-navy); color:white; }
body.dark-mode .accordion-body  { background:#0e1116; border-top-color:var(--border); }
body.dark-mode .pago-toggle     { background:#0e1116; border-color:var(--border); }
body.dark-mode .pago-toggle.checked { border-color:var(--ck-green); background:rgba(39,119,74,.08); }
body.dark-mode .stat-card,
body.dark-mode body.dark-mode .kpi-label,
body.dark-mode .stat-label      { color:#7e8ea4; }
body.dark-mode .kpi-value,
body.dark-mode .stat-value      { color:#cdd5e0; }
body.dark-mode .modal-body,
body.dark-mode .form-section    { background:var(--bg-surface); }
body.dark-mode .dash-period-btn { background:#1c2330; border-color:var(--border); color:#cdd5e0; }
body.dark-mode .dash-period-btn:hover:not(.active) { background:#263044; color:#ffffff; }
body.dark-mode #dash-periodo-bar { background:var(--bg-surface); border-color:var(--border); }
body.dark-mode #dash-periodo-label { background:var(--ck-yellow); color:#0d1117; border-color:var(--ck-yellow); }
body.dark-mode .pipeline-step  { background:#1c2330; color:#7e8ea4; }
body.dark-mode .pipeline-step.active { background:var(--ck-navy); color:white; }
body.dark-mode .arr-step        { background:#1c2330; color:#7e8ea4; }
body.dark-mode .prop-filter-tab { background:#0e1116; border-color:var(--border); color:#7e8ea4; }
body.dark-mode .prop-filter-tab.active { background:var(--ck-navy); color:white; border-color:var(--ck-navy); }
body.dark-mode .month-pill      { background:#1c2330; color:#7e8ea4; }
body.dark-mode .month-pill.active { background:var(--ck-red); color:white; }
body.dark-mode .dark-mode-toggle { background:#252d38; color:#cdd5e0; border-color:var(--border); }
body.dark-mode .dark-mode-toggle:hover { background:var(--ck-yellow); color:#fff; border-color:var(--ck-yellow); }
body.dark-mode .fab             { background:#2a3644; box-shadow:0 6px 20px rgba(0,0,0,.5); }
body.dark-mode #fab-menu        { background:#161b22!important; border-color:var(--border)!important; color:#cdd5e0!important; }
body.dark-mode .btn-del         { background:rgba(223,34,37,.1); color:#f06a6a; }
body.dark-mode .btn-del:hover   { background:#c0392b; color:white; }
body.dark-mode .gtog-btn        { background:#0e1116; border-color:var(--border); color:#7e8ea4; }
body.dark-mode .crm-card        { border-color:var(--border); }
body.dark-mode label            { color:#7e8ea4; }
body.dark-mode h3,body.dark-mode h4 { color:#cdd5e0; }
body.dark-mode .header-title    { color:#cdd5e0; }
body.dark-mode .board-column    { background:rgba(28,35,48,.5); border-color:var(--border); }
body.dark-mode .lead-card       { background:var(--bg-surface); border-color:var(--border); }
body.dark-mode .alianza-card    { background:var(--bg-surface); border-color:var(--border); }
body.dark-mode .alerta-centro   { background:var(--bg-surface); border-color:var(--border); }
body.dark-mode .crm-accordion-grupo  { border-color:var(--border); }
body.dark-mode .crm-accordion-header { background:var(--bg-surface); color:#cdd5e0; }
body.dark-mode .crm-accordion-header:hover { background:#1c2330; }
body.dark-mode .crm-accordion-header.open { background:var(--ck-navy); color:white; }
body.dark-mode .crm-accordion-body { background:#0e1116; }
body.dark-mode .mini-modal-box  { background:var(--bg-surface); color:#cdd5e0; }
body.dark-mode .mini-modal-box h4 { color:#cdd5e0; }
body.dark-mode #global-search-input { background:#1c2330!important; color:#cdd5e0!important; border-color:var(--border)!important; }
body.dark-mode #global-search-results { background:var(--bg-surface)!important; border-color:var(--border)!important; }
body.dark-mode #calc-panel { background:var(--bg-surface)!important; border-color:var(--border)!important; }

/* Cotizador flotante (#calc-panel): mismos colores que "Evaluación
   Comercial" (evaluacioncomercial6.html) — navy más oscuro y rojo/verde
   más apagados ("banca profesional") — en vez de la paleta genérica del
   resto del sistema. Se sobreescriben las variables SOLO dentro de este
   panel para no afectar el resto de la app. */
#calc-panel {
  --navy: #142c56;
  --blue: #1a56db;
  --yellow: #1a56db;
  --red: #c0392b;
  --green: #1f7a4d;
  --gray-light: #f1f3f6;
  --gray-dark: #5a6a7e;
  --border: #e4e8ee;
  --bg-surface: #fff;
}
body.dark-mode #calc-panel {
  --navy: #1c3660;
  --blue: #5b9bd8;
  --yellow: #5b9bd8;
  --gray-light: #1a2338;
  --gray-dark: #a6b0c3;
  --border: #28324a;
  --bg-surface: #141b2b;
}

/* Calculadora flotante: arrastre / redimensionado instantáneos (sin la transición global de la línea 15) */
#calc-panel { transition:none !important; }
#calc-panel .calc-resize-grip { transition:background .12s ease !important; }
/* Barra de scroll fina y separada del borde (no choca con la manija lateral) */
#calc-panel .calc-panel-body { scrollbar-width:thin; }
#calc-panel .calc-panel-body::-webkit-scrollbar { width:9px; }
#calc-panel .calc-panel-body::-webkit-scrollbar-thumb { background:rgba(127,127,127,.45); border-radius:6px; }
#calc-panel .calc-panel-body::-webkit-scrollbar-thumb:hover { background:rgba(127,127,127,.7); }
#calc-panel .calc-panel-body::-webkit-scrollbar-track { background:transparent; }
#calc-panel .calc-resize-grip:hover { background:rgba(127,127,127,.18)!important; }
#calc-panel .calc-resize-grip[data-dir="se"] {
  background:
    linear-gradient(-45deg, transparent 0 3px, rgba(127,127,127,.55) 3px 4px, transparent 4px 6px, rgba(127,127,127,.55) 6px 7px, transparent 7px)!important;
}
body.dark-mode #calc-com-result,
body.dark-mode #calc-ipc-result,
body.dark-mode #calc-neto-box { background:var(--bg-app)!important; border-color:var(--border)!important; }
body.dark-mode #iva-btn-neto[style*="background:var(--bg-surface)"],
body.dark-mode #iva-btn-bruto[style*="background:var(--bg-surface)"] { background:var(--bg-app)!important; color:var(--text-secondary)!important; border-color:var(--border)!important; }
/* Badges pastel de la tabla Usuarios (rol/estado de invitaciones) — se ven lavados en fondo oscuro */
body.dark-mode [style*="background:#d4f5e0"] { background:rgba(39,119,74,.18)!important; color:#5cd68a!important; }
body.dark-mode [style*="background:#e8eef5"] { background:rgba(30,95,168,.18)!important; color:#58a6ff!important; }
body.dark-mode [style*="background:#e8f0fe"] { background:rgba(30,95,168,.18)!important; color:#7aa8e0!important; }
body.dark-mode [style*="background:#e8eef5"] { background:rgba(30,95,168,.18)!important; color:#58a6ff!important; }
body.dark-mode [style*="background:#fce8e6"] { background:rgba(223,34,37,.18)!important; color:#e07a70!important; }
/* Botones toggle (inactivos) dentro de cualquier modal — Nueva Administración, Ingreso, Egreso, etc. */
body.dark-mode .modal [style*="background:var(--bg-surface)"] { background:var(--bg-app)!important; color:var(--text-secondary)!important; border-color:var(--border)!important; }
/* Modales/overlays sin clase .modal (creados a mano o por JS) */
body.dark-mode #modal-tipo-contrato > div,
body.dark-mode #ven-menu > div,
body.dark-mode #drive-modal > div,
body.dark-mode #modal-onboarding > div,
body.dark-mode #modal-limite-plan > div { background:var(--bg-surface)!important; color:var(--text-primary)!important; }
body.dark-mode #adm-anio-select { background:var(--bg-app)!important; color:var(--text-primary)!important; border-color:var(--border)!important; }
body.dark-mode #inv-link-resultado { background:rgba(30,95,168,.1)!important; border-color:rgba(30,95,168,.3)!important; }
body.dark-mode #inv-link-resultado > div:first-child { color:var(--text-primary)!important; }
body.dark-mode #modal-onboarding [style*="color:#3f5ec2"] { color:var(--text-primary)!important; }
body.dark-mode #modal-onboarding [style*="color:#6b7a8d"] { color:var(--text-secondary)!important; }
body.dark-mode #modal-limite-plan [style*="color:#3d4f63"] { color:var(--text-primary)!important; }

/* ── TOAST ──────────────────────────────────────────────── */
.toast-container { position:fixed; bottom:20px; right:20px; z-index:100000; width:92%; max-width:400px; display:flex; flex-direction:column; align-items:stretch; gap:10px; pointer-events:none; }
.toast { background:var(--bg-surface); border-radius:var(--radius-md); padding:16px 18px; box-shadow:0 14px 40px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.18); animation:toastIn .35s cubic-bezier(.34,1.56,.64,1); display:flex; gap:13px; align-items:flex-start; pointer-events:auto; }
.toast.success { border-left-color:var(--ck-green); }
.toast.error   { border-left-color:var(--ck-red); animation:toastIn .35s cubic-bezier(.34,1.56,.64,1), toastShake .4s ease .35s; }
.toast.warning { border-left-color:var(--ck-yellow); animation:toastIn .35s cubic-bezier(.34,1.56,.64,1), toastShake .4s ease .35s; }
.toast.info    { border-left-color:var(--blue); }
.toast-icon { flex-shrink:0; line-height:1; display:flex; color:var(--ck-navy); }
.toast.success .toast-icon { color:var(--ck-green); }
.toast.error   .toast-icon { color:var(--ck-red); }
.toast.warning .toast-icon { color:var(--ck-yellow); }
.toast-content { flex:1; }
.toast-title   { font-weight:800; font-size:14px; margin-bottom:3px; color:var(--text-primary); }
.toast-message { font-size:12.5px; color:var(--text-secondary); line-height:1.4; }
.toast-close   { background:none; border:none; cursor:pointer; font-size:16px; color:var(--text-muted); padding:0; flex-shrink:0; }
@keyframes toastIn { from { transform:translateY(-24px) scale(.95); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }
@keyframes toastOut { from { transform:translateY(0); opacity:1; } to { transform:translateY(-24px); opacity:0; } }
@keyframes toastShake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-6px); } 40% { transform:translateX(5px); } 60% { transform:translateX(-3px); } 80% { transform:translateX(2px); } }

/* ── BASE ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; height:100%; }
body { font-family:'Geist','Inter',sans-serif; background:var(--bg-app); color:var(--text-primary); font-size:15px; font-weight:400; line-height:1.5; }
::-webkit-scrollbar       { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#c8d2de; border-radius:4px; transition:background .20s; }
::-webkit-scrollbar-thumb:hover { background:var(--ck-red); }

/* ── LAYOUT ─────────────────────────────────────────────── */
#main-app { display:flex; width:100%; height:100vh; overflow:hidden; }

/* ── SIDEBAR ────────────────────────────────────────────── */
.sidebar {
  background:var(--sidebar-bg);
  width:var(--sidebar-width);
  min-width:var(--sidebar-width);
  color:var(--sidebar-text);
  display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden;
  flex-shrink:0;
  transition:width .22s ease, min-width .22s ease;
  border-right:1px solid var(--sidebar-border);
  padding-bottom:1.5rem;
}
.sidebar.collapsed { width:var(--sidebar-collapsed)!important; min-width:var(--sidebar-collapsed)!important; }
/* Scrollbar más angosta que la general (8px) — la columna del sidebar es
   angosta, una barra ancha se ve pesada. Mismo color temático de todos
   modos (ver scrollbar-thumb/-hover en :root). */
.sidebar { scrollbar-width:thin; }
.sidebar::-webkit-scrollbar { width:4px; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border:none; }
.sidebar::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.22); }
.sidebar.collapsed .sidebar-logo-img { display:none; }
.sidebar-logo-new { display:flex; align-items:center; gap:10px; flex:1; min-width:0; transition:opacity .16s; }
.sidebar.collapsed .sidebar-logo-new { flex:none; }
.sidebar.collapsed .sidebar-logo-text { display:none !important; }
.sidebar.collapsed .sidebar-logo-meta { display:none !important; }
.sidebar-diamond    { display:none; }

.sidebar.collapsed
.nav-section {
  color:var(--sidebar-text-muted);
  font-size:9px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:20px 0 4px 18px;
  transition:opacity .18s;
}
.sidebar.collapsed .nav-section { opacity:0!important; height:0!important; padding:0!important; margin:0!important; overflow:hidden!important; font-size:0!important; }

.nav-btn {
  cursor:pointer; transition:all .16s cubic-bezier(0.4, 0, 0.2, 1);
  color:var(--sidebar-text);
  font-size:var(--fs-base); font-weight:var(--fw-medium);
  border-radius:var(--radius-xl); padding:var(--space-2) var(--space-3);
  display:flex; align-items:center; gap:var(--space-2);
  position:relative; margin:2px var(--space-2);
  border:none; background:transparent;
  font-family:inherit; width:calc(100% - 16px);
  white-space:nowrap; overflow:hidden; text-align:left;
}
.nav-btn:hover  { color:var(--sidebar-text); background:var(--bg-sidebar-hover); }
.nav-btn.active { color:#c0392b; background:var(--bg-sidebar-active); box-shadow:inset 0 0 0 1px rgba(192,57,43,.18); }
.nav-btn .nav-icon { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:17px; height:17px; opacity:.7; border-radius:var(--radius-xs); transition:background .13s ease; }
.nav-btn.active .nav-icon { opacity:1; background:rgba(192,57,43,.16); }
.nav-btn .nav-label { transition:opacity .16s; }
.sidebar.collapsed .nav-btn .nav-label { opacity:0; width:0; overflow:hidden; }
.sidebar.collapsed .nav-btn { justify-content:center; padding:9px; width:calc(100% - 0px); margin:1px 0; }
.nav-badge { position:absolute; right:9px; top:50%; transform:translateY(-50%); background:var(--ck-red); color:white; font-size:9px; font-weight:700; padding:1px 5px; border-radius:99px; min-width:15px; text-align:center; }
.sidebar.collapsed .nav-badge { right:2px; top:4px; transform:none; }

/* ── MAIN CONTENT ───────────────────────────────────────── */
.main-content { flex:1; display:flex; flex-direction:column; min-width:0; overflow-y:auto; }

.top-header {
  background:var(--bg-surface);
  border-bottom:1px solid var(--border);
  padding:0 22px;
  height:var(--header-height);
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
  box-shadow:var(--shadow-sm);
  z-index:100; position:relative;
}
.header-title { font-size:14px; font-weight:600; color:var(--text-primary); letter-spacing:-.01em; }
.header-controls { display:flex; gap:8px; align-items:center; flex-shrink:0; }

.view-container { flex:1; overflow-y:auto; overflow-x:hidden; padding:16px 20px; background:var(--bg-app); }
.view-container.no-padding { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.view-section { display:none; }
.view-section.active { display:block; flex:1; overflow-y:auto; animation:fadeIn .2s ease; }
#calculadora-corretaje.active { flex:1; display:flex; flex-direction:column; overflow:hidden; animation:none; }
#calculadora-corretaje iframe { flex:1; width:100%; border:none; display:block; }
.calc-tabs { display:flex; gap:6px; padding:10px 16px; background:var(--bg-surface); border-bottom:1px solid var(--border); flex-shrink:0; }
.calc-tab-btn { padding:7px 16px; border-radius:999px; border:1px solid var(--border); background:var(--bg-app); color:var(--text-secondary); font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .15s; }
.calc-tab-btn:hover { background:var(--bg-sidebar-hover); color:var(--text-primary); }
.calc-tab-btn.active { background:var(--bank-blue); color:#fff; border-color:var(--bank-blue); }

/* Tabs del contenido inferior del dashboard (Resumen/Gráficos/Salud del
   Negocio) — estilo "underline", igual al patrón ya usado en Invitaciones. */
.dash-content-tab-btn { padding:8px 16px; border:none; background:transparent; cursor:pointer; font-size:12px; font-weight:600; color:var(--text-secondary); border-bottom:2px solid transparent; margin-bottom:-1px; font-family:inherit; transition:color .15s,border-color .15s; }
.dash-content-tab-btn:hover { color:var(--bank-navy); }
.dash-content-tab-btn.active { color:var(--bank-navy); border-bottom-color:var(--bank-navy); }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

/* ── CARDS — MIUI Style ──────────────────────────── */
.card { background:var(--bg-surface); border-radius:10px; border:1px solid var(--border); box-shadow:var(--shadow-sm); margin-bottom:14px; transition:all .20s cubic-bezier(0.4, 0, 0.2, 1); }
.card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.card-header { padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; background:var(--bg-surface); border-radius:10px 16px 0 0; }
.card-header h3,.card-header .card-title { margin:0; font-size:14px; font-weight:600; color:var(--text-primary); }
.card-body { padding:18px; }

.glass-card { background:var(--bg-surface); border-radius:var(--radius-base); border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:all .20s cubic-bezier(0.4, 0, 0.2, 1); }
.glass-card:hover { box-shadow:var(--shadow-md); transform:var(--hover-lift); }

.form-section { background:var(--bg-surface); border-radius:10px; box-shadow:var(--shadow-sm); border:1px solid var(--border); padding:18px 20px; transition:all .20s cubic-bezier(0.4, 0, 0.2, 1); }
.form-section:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.form-section.rojo-top   {  }
.form-section.verde-top  {  }
.form-section.morado-top {  }
.form-section.gold-top   {  }

/* ── KPI CARDS — horizontal single-row ──────────────────── */
.kpi-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:14px; }

.kpi-card {
  background:var(--bg-surface);
  border-radius:var(--radius-base);
  padding:var(--space-4);
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);

  transition:all .20s cubic-bezier(0.4, 0, 0.2, 1);
  display:flex; flex-direction:column; gap:var(--space-2);
}
.kpi-card:hover { box-shadow:var(--shadow-md); transform:var(--hover-lift); }

/* Dashboard: grid de KPIs sin sombra ni hover-lift — con 5-11 tarjetas
   visibles a la vez, la sombra individual de cada una se acumula y pesa
   visualmente. Se deja solo el borde fino; la sombra queda reservada
   para paneles protagonistas (Centro de Alertas, glass-card). */
#kpi-grid .kpi-card, #dash-kpi-extra-row .kpi-card { box-shadow:none; }
#kpi-grid .kpi-card:hover, #dash-kpi-extra-row .kpi-card:hover { box-shadow:none; transform:none; border-color:var(--bank-navy); }

.kpi-top { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
.kpi-icon { width:30px; height:30px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--bg-app); color:var(--text-secondary); }
.kpi-icon svg { width:15px; height:15px; }

.kpi-label {
  font-size:var(--fs-xs); font-weight:var(--fw-medium);
  text-transform:none; color:var(--text-muted);
  letter-spacing:var(--ls-tight); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.kpi-value { font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:300; color:var(--text-primary); line-height:var(--lh-tight); letter-spacing:var(--ls-tight); }
.kpi-sub   { font-size:var(--fs-2xs); color:var(--text-muted); }
.kpi-badge { display:inline-block; padding:3px 8px; border-radius:var(--radius-pill); font-size:8.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; border:none; color:var(--text-muted); background:var(--bg-app); flex-shrink:0; }
.kpi-badge.pendiente { }
.kpi-badge.real      { color:var(--bank-navy); background:var(--bank-blue-soft); }
body.dark-mode .kpi-badge.real { color:var(--bank-blue-light); background:rgba(123,147,232,.14); }
/* El pill "pendiente" toma el color de la categoría de su tarjeta, igual que el ícono */
.kpi-card.k-adm   .kpi-badge.pendiente { color:var(--bank-navy); background:var(--bank-blue-soft); }
.kpi-card.k-venta .kpi-badge.pendiente { color:var(--ck-red);    background:rgba(192,57,43,.1); }
.kpi-card.k-egr   .kpi-badge.pendiente { color:var(--ck-red);    background:rgba(192,57,43,.1); }
body.dark-mode .kpi-card.k-adm   .kpi-badge.pendiente { color:var(--bank-label); }
body.dark-mode .kpi-card.k-venta .kpi-badge.pendiente { color:#e0655a; }
body.dark-mode .kpi-card.k-egr   .kpi-badge.pendiente { color:#e0655a; }

/* Íconos por categoría — paleta exclusiva del tema (navy/azul/lavanda), rojo solo para egresos */
.kpi-card.k-adm      .kpi-icon { background:var(--bank-blue-soft); color:var(--bank-navy); }
.kpi-card.k-adm-rec  .kpi-icon { background:var(--bank-blue-soft); color:var(--bank-blue); }
.kpi-card.k-venta    .kpi-icon { background:var(--bank-blue-soft); color:var(--bank-blue-light); }
.kpi-card.k-arriendo .kpi-icon { background:var(--bank-blue-soft); color:var(--bank-blue); }
.kpi-card.k-egr      .kpi-icon { background:rgba(192,57,43,.1);   color:var(--ck-red); }
.kpi-card.k-cyan     .kpi-icon { background:var(--bank-blue-soft); color:var(--bank-navy); }
.kpi-card.k-props    .kpi-icon { background:var(--bank-blue-soft); color:var(--bank-blue); }
.kpi-card.k-valor    .kpi-icon { background:var(--bank-blue-soft); color:var(--bank-navy); }
.kpi-card.k-leads    .kpi-icon { background:var(--bank-blue-soft); color:var(--bank-blue-light); }
body.dark-mode .kpi-card.k-adm      .kpi-icon { color:var(--bank-label); }
body.dark-mode .kpi-card.k-adm-rec  .kpi-icon { color:var(--bank-blue); }
body.dark-mode .kpi-card.k-venta    .kpi-icon { color:var(--bank-blue-light); }
body.dark-mode .kpi-card.k-arriendo .kpi-icon { color:var(--bank-blue); }
body.dark-mode .kpi-card.k-egr      .kpi-icon { color:#e0655a; }
body.dark-mode .kpi-card.k-cyan     .kpi-icon { color:var(--bank-label); }
body.dark-mode .kpi-card.k-props    .kpi-icon { color:var(--bank-blue); }
body.dark-mode .kpi-card.k-valor    .kpi-icon { color:var(--bank-label); }
body.dark-mode .kpi-card.k-leads    .kpi-icon { color:var(--bank-blue-light); }

#dashboard .dash-period-btn:hover:not(.active) { border-color:var(--bank-navy); color:var(--bank-navy); }
#dashboard .dash-period-year.active { background:var(--bank-navy); border-color:var(--bank-navy); }

/* ── STAT CARDS — MIUI ─────────────────────────────── */
.stat-card { background:var(--bg-surface); border-radius:10px; box-shadow:var(--shadow-sm); border:1px solid var(--border); padding:16px 18px; transition:all .20s cubic-bezier(0.4, 0, 0.2, 1); }
.stat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.stat-card.rojo    {  }
.stat-card.verde   {  }
.stat-card.cyan    {  }
.stat-card.amarillo {  }
.stat-card.morado  {  }
.stat-value { font-size:22px; font-weight:700; color:var(--text-primary); margin:5px 0; }
.stat-label { font-size:10px; font-weight:600; text-transform:uppercase; color:var(--text-secondary); letter-spacing:.04em; }

/* ── BUTTONS — MIUI Style ──────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 18px; border-radius:10px;
  border:none;
  font-size:13px; font-weight:600;
  cursor:pointer; transition:all .20s cubic-bezier(0.4, 0, 0.2, 1);
  font-family:inherit; white-space:nowrap; text-decoration:none; line-height:1.4;
  box-shadow:var(--shadow-sm);
}
.btn:focus { outline:none; }
.btn:active { transform:scale(0.98); }
.btn-primary  { background:var(--ck-navy); color:white; }
.btn-primary:hover { background:#243d5a; box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn-success  { background:var(--ck-green); color:white; }
.btn-success:hover { background:#1d5c37; box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn-danger   { background:var(--ck-red); color:white; }
.btn-danger:hover { background:#a03020; box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn-warning  { background:var(--ck-yellow); color:white; }
.btn-warning:hover { background:#8a3f07; box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn-gold     { background:var(--bank-blue); color:white; }
.btn-gold:hover { background:#1449c9; box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn-purple   { background:var(--bank-blue); color:white; }
.btn-purple:hover { background:var(--bank-navy); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn-secondary { background:var(--bg-app); color:var(--text-secondary); border:1px solid var(--border); box-shadow:none; }
.btn-secondary:hover { background:var(--border); box-shadow:var(--shadow-sm); }
.btn-sm { padding:6px 12px; font-size:12px; border-radius:8px; height:32px; }
.btn-del { background:transparent; color:var(--ck-red); border:1px solid rgba(223,34,37,.25); }
.btn-soft-primary { background:rgba(63,94,194,.07); color:var(--ck-navy); border:1px solid rgba(63,94,194,.2); }
.btn-soft-primary:hover { background:rgba(63,94,194,.13); }
.btn-soft-gold { background:rgba(63,94,194,.07); color:var(--ck-navy); border:1px solid rgba(63,94,194,.2); }
.btn-soft-gold:hover { background:rgba(63,94,194,.13); }
.btn-soft-slate { background:rgba(71,85,105,.08); color:#3f4c5e; border:1px solid rgba(71,85,105,.25); }
.btn-soft-slate:hover { background:rgba(71,85,105,.16); }
.btn-soft-success { background:rgba(39,119,74,.08); color:var(--ck-green); border:1px solid rgba(39,119,74,.22); }
.btn-soft-success:hover { background:rgba(39,119,74,.15); }
.btn-soft-danger { background:rgba(223,34,37,.08); color:var(--ck-red); border:1px solid rgba(223,34,37,.22); }
.btn-soft-danger:hover { background:rgba(223,34,37,.15); }
.btn-soft-warning { background:rgba(30,95,168,.08); color:var(--ck-yellow); border:1px solid rgba(30,95,168,.22); }
.btn-soft-warning:hover { background:rgba(30,95,168,.15); }
.btn-soft-purple { background:var(--bank-blue-soft); color:var(--bank-blue); border:1px solid rgba(26,86,219,.22); }
.btn-soft-purple:hover { background:rgba(26,86,219,.15); }
body.dark-mode .btn-soft-primary { background:rgba(255,255,255,.06); color:#cdd5e0; border-color:rgba(255,255,255,.15); }
body.dark-mode .btn-soft-gold { background:rgba(255,255,255,.06); color:#cdd5e0; border-color:rgba(255,255,255,.15); }
body.dark-mode .btn-soft-slate { background:rgba(148,163,184,.15); color:#cbd3dd; border-color:rgba(148,163,184,.35); }
body.dark-mode .btn-soft-success { background:rgba(39,119,74,.15); color:#3fb950; border-color:rgba(39,119,74,.35); }
body.dark-mode .btn-soft-danger { background:rgba(223,34,37,.15); color:#e0645a; border-color:rgba(223,34,37,.35); }
body.dark-mode .btn-soft-warning { background:rgba(30,95,168,.18); color:#58a6ff; border-color:rgba(30,95,168,.4); }
body.dark-mode .btn-soft-purple { background:rgba(123,147,232,.16); color:var(--bank-blue-light); border-color:rgba(123,147,232,.4); }
.btn-del:hover { background:var(--ck-red); color:white; }

/* ── TABLES ─────────────────────────────────────────────── */
.table-responsive { overflow-x:auto; }
.table { width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
.table thead tr { border-bottom:1px solid var(--border); }
.table th { padding:9px 12px; text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); background:var(--bg-surface); white-space:nowrap; }
.table td { padding:10px 12px; border-bottom:1px solid var(--border-light); color:var(--text-primary); vertical-align:middle; }
.table-compact th { padding:6px 10px; font-size:9.5px; }
.table-compact td { padding:6px 10px; font-size:11.5px; }
.table tbody tr { transition:background .09s; }
.table tbody tr:hover { background:rgba(63,94,194,.025); }
.table tbody tr:last-child td { border-bottom:none; }

/* Unifica tipografía de Mensajes, Visitas, Captaciones y Administraciones con Documentos */
#mensajes table th, #visitas table th, #captaciones table th, #administraciones table th {
  font-size:12px !important; font-weight:700 !important; text-transform:none !important;
  letter-spacing:normal !important; text-align:left !important; padding:10px 12px !important;
}
#mensajes table td, #visitas table td, #captaciones table td, #administraciones table td {
  font-size:12px !important; font-weight:400 !important; text-align:left !important; padding:10px 12px !important;
}

/* ── BADGES ─────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:99px; font-size:10px; font-weight:600; letter-spacing:.02em; border:1px solid transparent; }
.badge-success { background:rgba(39,119,74,.08);  color:var(--ck-green); border-color:rgba(39,119,74,.2); }
.badge-danger  { background:rgba(223,34,37,.08);  color:var(--ck-red);   border-color:rgba(223,34,37,.2); }
.badge-warning { background:rgba(30,95,168,.08); color:var(--ck-yellow);border-color:rgba(30,95,168,.2); }
.badge-info    { background:rgba(30,95,168,.08);  color:var(--ck-blue);  border-color:rgba(30,95,168,.2); }
.badge-gray    { background:rgba(90,106,126,.08); color:var(--text-secondary); border-color:var(--border); }
.badge-gold    { background:rgba(30,95,168,.08); color:var(--ck-yellow);  border-color:rgba(30,95,168,.2); }
.badge-purple  { background:var(--bank-blue-soft);  color:var(--bank-blue);border-color:rgba(26,86,219,.2); }
.badge-navy    { background:rgba(63,94,194,.06);   color:var(--ck-navy);  border-color:rgba(63,94,194,.15); }

/* ── TIPOGRAFÍA ESTANDARIZADA ───────────────────────────── */
/* H1 — Títulos de página (uso escaso) */
h1 { font-size:24px; font-weight:800; color:var(--text-primary); margin:0 0 4px; letter-spacing:-.02em; line-height:1.2; }
/* H2 — Títulos de sección principal */
h2 { font-size:19px; font-weight:700; color:var(--text-primary); margin:0 0 4px; letter-spacing:-.01em; }
/* H3 — Títulos de card / panel */
h3 { font-family:var(--font-display); font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--text-primary); margin:0 0 2px; }
/* H4 — Subtítulos dentro de cards / modales */
h4 { font-size:14px; font-weight:700; color:var(--text-primary); margin:0 0 2px; }
/* H5 / H6 — etiquetas de sección (uppercase) */
h5,h6 { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-secondary); margin:0; }
/* Párrafos */
p { font-size:15px; font-weight:400; color:var(--text-primary); margin:0 0 8px; line-height:1.6; }
p.text-sm { font-size:13px; }
p.text-xs { font-size:12px; color:var(--text-secondary); }
/* Clases utilitarias de texto */
.text-label   { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); }
.text-caption { font-size:12px; font-weight:400; color:var(--text-secondary); }
.text-value   { font-size:15px; font-weight:600; color:var(--text-primary); }
.text-strong  { font-size:15px; font-weight:700; color:var(--text-primary); }
/* Asegurar herencia de fuente en todos los controles interactivos */
button,input,select,textarea,a { font-family:inherit; }

/* ── FORMS — MIUI ──────────────────────────────── */
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); margin-bottom:5px; }
.form-group input,
.form-group select,
.form-group textarea { width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:10px; font-family:inherit; font-size:13px; background:var(--bg-surface); color:var(--text-primary); transition:all .20s cubic-bezier(0.4, 0, 0.2, 1); box-sizing:border-box; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline:none; border-color:var(--ck-navy); box-shadow:0 0 0 3px rgba(63,94,194,.07); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238fa0b4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; padding-right:32px; cursor:pointer; }

/* ── TABS ───────────────────────────────────────────────── */
.tabs-container { margin-bottom:14px; }
.tab-buttons { display:flex; border-bottom:1px solid var(--border); }
.tab-btn { padding:8px 16px; border:none; background:transparent; cursor:pointer; font-family:inherit; font-size:12px; font-weight:500; color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .13s; }
.tab-btn:hover { color:var(--text-primary); }
.tab-btn.active { color:var(--ck-red); border-bottom-color:var(--ck-red); font-weight:600; }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ── ACCORDION ──────────────────────────────────────────── */
.accordion-item { border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:6px; overflow:hidden; }
.accordion-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; cursor:pointer; background:var(--bg-surface); transition:all .20s cubic-bezier(0.4, 0, 0.2, 1); font-weight:600; font-size:13px; user-select:none; border:none; width:100%; font-family:inherit; text-align:left; color:var(--text-primary); border-radius:10px; }
.accordion-header:hover { background:var(--bg-app); }
.accordion-header.active { background:var(--ck-navy); color:white; }
.accordion-body { display:none; padding:12px 14px; background:var(--bg-app); border-top:1px solid var(--border); }
.accordion-body.open { display:block; }

/* ── MODALS ─────────────────────────────────────────────── */
.modal { display:none; position:fixed; z-index:9999; left:var(--sidebar-width); top:0; width:calc(100% - var(--sidebar-width)); height:100%; background:rgba(0,0,0,.4); backdrop-filter:blur(2px); }
body:has(.sidebar.collapsed) .modal { left:var(--sidebar-collapsed); width:calc(100% - var(--sidebar-collapsed)); }
@media(max-width:768px){ .modal { left:0; width:100%; } }
.toast-container { isolation:isolate; }

/* ── Panel de detalle de administración: se abre como overlay centrado
   sobre la pantalla actual (antes se renderizaba al final, debajo de toda
   la lista de tarjetas, obligando a hacer scroll). ── */
#adm-details { position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,.4); backdrop-filter:blur(2px); overflow-y:auto; padding:28px 16px; }
#adm-details > .glass-card { max-width:900px; margin:0 auto; box-shadow:var(--shadow-lg); }
.adm-details-x { position:absolute; top:12px; right:12px; z-index:3; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--bg-surface); color:var(--text-secondary); border-radius:8px; cursor:pointer; padding:0; transition:background .12s,color .12s; }
.adm-details-x:hover { background:var(--bg-app); color:var(--text-primary); }
@media (min-width:769px) {
  body:has(.sidebar) #adm-details { left:var(--sidebar-width); }
  body:has(.sidebar.collapsed) #adm-details { left:var(--sidebar-collapsed); }
}
@media(max-width:768px){ #adm-details { padding:14px 10px; } }
.modal.active { display:flex; align-items:center; justify-content:center; }
.modal-content { background:var(--bg-surface); margin:auto; width:90%; max-width:900px; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); max-height:90vh; display:flex; flex-direction:column; overflow:hidden; animation:fadeIn .18s ease; }
.modal-content.sm { max-width:500px; }
.modal-content.md { max-width:680px; }
.modal-content.xl { max-width:940px; }

/* ── Celebración de match (Matching CRM) ─────────────────────────────── */
.match-celebra-content { position:relative; background:linear-gradient(160deg,#0a1330 0%,#1a56db 100%); text-align:center; overflow:hidden; animation:matchCelebraPop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes matchCelebraPop { from { opacity:0; transform:scale(.8); } to { opacity:1; transform:scale(1); } }
.match-celebra-close { position:absolute; top:14px; right:14px; z-index:2; background:rgba(255,255,255,.12); border:none; color:#fff; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.match-celebra-close:hover { background:rgba(255,255,255,.22); }

/* Confeti tipo piñata — las piezas nacen en el centro-arriba y salen
   disparadas en todas direcciones (--dx/--dy por pieza), con una leve
   caída por gravedad y desvanecimiento. Una sola pasada. */
.match-celebra-confetti { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.match-celebra-confetti span {
  position:absolute; left:50%; top:38%;
  width:9px; height:9px; opacity:0;
  animation:matchCelebraBurst 1.15s cubic-bezier(.18,.7,.35,1) forwards;
}
.match-celebra-confetti span.mc-star {
  width:13px; height:13px;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation:matchCelebraBurstStar 1.3s cubic-bezier(.18,.7,.35,1) forwards, matchCelebraSpin 4s linear infinite 1.3s;
}
@keyframes matchCelebraBurst {
  0%   { opacity:1; transform:translate(-50%,-50%) rotate(0deg); }
  15%  { opacity:1; }
  100% { opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 90px)) rotate(var(--rot)); }
}
@keyframes matchCelebraBurstStar {
  0%   { opacity:1; transform:translate(-50%,-50%) rotate(0deg); }
  15%  { opacity:1; }
  100% { opacity:.7; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 70px)) rotate(0deg); }
}
@keyframes matchCelebraSpin {
  from { transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 70px)) rotate(0deg); }
  to   { transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 70px)) rotate(360deg); }
}

.match-celebra-body { position:relative; z-index:1; padding:44px 32px 34px; }
/* Emoji quieto — sin animación de rebote (pedido explícito del usuario). */
.match-celebra-emoji { font-size:56px; line-height:1; }
.match-celebra-titulo { font-size:22px; font-weight:800; color:#fff; margin-top:10px; letter-spacing:-.01em; }
.match-celebra-sub { font-size:14px; color:rgba(255,255,255,.85); line-height:1.5; margin-top:10px; }
.match-celebra-score { display:inline-block; margin-top:14px; font-size:13px; font-weight:800; color:#fff; background:#3f5ec2; padding:6px 16px; border-radius:20px; }
.match-celebra-btn { margin-top:24px; width:100%; }

/* ============================================================
   ACTA DE ENTREGA — UI premium
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

#modal-acta-entrega .modal-content, #modal-orden-doc .modal-content { font-family:'Manrope',Inter,sans-serif; }
#modal-acta-entrega .modal-header, #modal-orden-doc .modal-header { background:#1A2B40 !important; position:relative; }
#modal-acta-entrega #acta-body, #modal-orden-doc #orden-doc-body { padding:24px 26px; background:#fbfbfc; }

#acta-body .acta-hero, #orden-doc-body .acta-hero { display:flex; justify-content:space-between; align-items:center; background:var(--bg-surface); border-radius:8px; padding:18px 22px; margin-bottom:20px; border:1px solid #ececef; }
#acta-body .acta-hero-title, #orden-doc-body .acta-hero-title { font-size:15px; font-weight:600; letter-spacing:.01em; color:#1A2B40; }
#acta-body .acta-hero-sub, #orden-doc-body .acta-hero-sub { font-size:11.5px; color:#9aa1ac; margin-top:3px; font-weight:400; }

#acta-body .acta-progress { display:flex; align-items:center; gap:10px; margin-bottom:22px; }
#acta-body .acta-progress-bar { flex:1; height:4px; border-radius:99px; background:#eceef1; overflow:hidden; }
#acta-body .acta-progress-fill { height:100%; border-radius:99px; background:#df2225; transition:width .3s ease; }
#acta-body .acta-progress-label { font-size:10.5px; font-weight:500; color:#9aa1ac; white-space:nowrap; }

#acta-body .form-field, #orden-doc-body .form-field { background:var(--bg-surface); border:1px solid #e9eaed; border-radius:8px; padding:9px 13px; }
#acta-body .form-field .fl, #orden-doc-body .form-field .fl { font-size:10.5px; font-weight:500; color:#9aa1ac; display:block; margin-bottom:3px; }
#acta-body .form-field .fi, #acta-body .fi, #orden-doc-body .form-field .fi, #orden-doc-body .fi { border:none; padding:2px 0; font-size:13px; font-weight:500; color:#242c37; width:100%; background:transparent; font-family:inherit; }
#acta-body .fi:focus, #orden-doc-body .fi:focus { outline:none; }
#acta-body input.fi, #acta-body select.fi, #acta-body textarea.fi, #orden-doc-body input.fi, #orden-doc-body select.fi, #orden-doc-body textarea.fi { border:1px solid #e9eaed; border-radius:8px; padding:8px 10px; background:var(--bg-surface); transition:border-color .15s, box-shadow .15s; }
#acta-body input.fi:focus, #acta-body select.fi:focus, #acta-body textarea.fi:focus, #orden-doc-body input.fi:focus, #orden-doc-body select.fi:focus, #orden-doc-body textarea.fi:focus { border-color:#c7cbd1; box-shadow:0 0 0 3px rgba(63,94,194,.06); }

details.acta-section { border:1px solid #ececef; border-radius:8px; margin-bottom:12px; overflow:hidden; background:var(--bg-surface); }
details.acta-section > summary { cursor:pointer; list-style:none; background:var(--bg-surface); color:#1A2B40; padding:14px 18px; font-size:12.5px; font-weight:600; letter-spacing:.005em; display:flex; justify-content:space-between; align-items:center; transition:background .15s; }
details.acta-section > summary:hover { background:#fafafa; }
details.acta-section > summary::-webkit-details-marker { display:none; }
details.acta-section > summary::after { content:'+'; font-size:15px; color:#c7cbd1; font-weight:400; transition:transform .2s; }
details.acta-section[open] > summary::after { content:'−'; }
details.acta-section .acta-section-body { padding:18px; background:var(--bg-surface); border-top:1px solid #f1f2f4; animation:actaFadeIn .18s ease; }
@keyframes actaFadeIn { from{opacity:0;transform:translateY(-4px);} to{opacity:1;transform:translateY(0);} }

.acta-item-row { display:grid; grid-template-columns:1.15fr auto 1.3fr; gap:10px; align-items:center; margin-bottom:8px; padding:9px 11px; border-radius:8px; background:#fafbfc; }
.acta-item-row label { font-size:12px; font-weight:500; color:#4b5563; }
.acta-item-row input.fi { background:var(--bg-surface); }

.acta-pills { display:flex; gap:5px; }
.acta-pill { border:1px solid #e5e7eb; background:var(--bg-surface); border-radius:10px; padding:5px 11px; font-size:10.5px; font-weight:500; cursor:pointer; color:#9aa1ac; transition:all .12s; }
.acta-pill:hover { border-color:#c7cbd1; color:#4b5563; }
.acta-pill.active[data-val="Bien"] { background:#eef8f1; border-color:#2f9e58; color:#237c43; }
.acta-pill.active[data-val="Regular"] { background:#fdf5e4; border-color:#c98a00; color:#9c6d00; }
.acta-pill.active[data-val="Malo"] { background:#fdecec; border-color:#df2225; color:#c21c1c; }

.orden-pregunta-excl { background:var(--bg-surface); border:1.5px solid #1A2B40; border-radius:8px; padding:16px 20px; margin-bottom:18px; }
.orden-pregunta-excl-label { font-size:13px; font-weight:700; color:#1A2B40; margin-bottom:10px; }
.orden-pregunta-excl-btns { display:flex; gap:10px; flex-wrap:wrap; }
.orden-excl-btn { flex:1; min-width:180px; border:1.5px solid #e5e7eb; background:#fafbfc; border-radius:8px; padding:11px 14px; font-size:12.5px; font-weight:600; color:#6b7280; cursor:pointer; transition:all .12s; }
.orden-excl-btn:hover { border-color:#c7cbd1; }
.orden-excl-btn.active { background:#1A2B40; border-color:#1A2B40; color:#fff; }
.repo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
/* Repositorio: borde neutro (igual que Administraciones) para que el "border
   beam" de color se note — un borde ya coloreado por categoría competía
   visualmente con el beam y lo tapaba, sobre todo en modo oscuro. */
.repo-card { border-radius:8px; padding:16px; display:flex; flex-direction:column; gap:8px; transition:box-shadow .15s,border-color .15s; background:var(--bg-surface); border:1.5px solid var(--border); }
.repo-card-icon { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
/* Íconos del Repositorio en pastel (fondo suave + trazo del color real) en
   vez del cuadrado de color sólido con ícono blanco — pedido del usuario
   2026-09-06, sentía la sección muy saturada. */
.repo-icon-green  { background:rgba(39,119,74,.12);  color:var(--ck-green); }
.repo-icon-blue   { background:rgba(30,95,168,.12);  color:var(--ck-blue); }
.repo-icon-red    { background:rgba(223,34,37,.12);  color:var(--ck-red); }
.repo-icon-navy   { background:rgba(63,94,194,.12);  color:var(--ck-navy); }
.repo-icon-orange { background:var(--bank-blue-soft);  color:var(--bank-navy); }
.repo-icon-gold   { background:rgba(30,95,168,.12);   color:var(--ck-gold); }
.repo-icon-cyan   { background:var(--bank-blue-soft); color:var(--bank-blue-light); }
.repo-icon-purple { background:var(--bank-blue-soft);  color:var(--bank-blue); }
body.dark-mode .repo-icon-green  { background:rgba(39,119,74,.18); }
body.dark-mode .repo-icon-blue   { background:rgba(30,95,168,.18); }
body.dark-mode .repo-icon-red    { background:rgba(223,34,37,.18); }
body.dark-mode .repo-icon-navy   { background:rgba(63,94,194,.18); }
body.dark-mode .repo-icon-orange { background:rgba(160,72,32,.18); }
body.dark-mode .repo-icon-gold   { background:rgba(30,95,168,.18); }
body.dark-mode .repo-icon-cyan   { background:rgba(14,116,144,.18); }
body.dark-mode .repo-icon-purple { background:rgba(26,86,219,.18); }
.repo-card:not(.repo-card-soon):hover { box-shadow:0 2px 10px rgba(0,0,0,.08); }
.repo-card-soon { opacity:.55; }
.repo-card-title { font-size:13px; font-weight:500; color:var(--text-primary); }
.repo-card-desc { font-size:11.5px; color:var(--text-secondary); line-height:1.4; flex:1; }
.repo-badge-soon { display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary); background:var(--bg-app); border:1px solid var(--border); border-radius:99px; padding:4px 10px; align-self:flex-start; }

.repo-card:not(.repo-card-soon):hover, .adm-card:hover { border-color:var(--ck-navy); }

/* Administraciones — tarjetas compactas, mismo lenguaje visual que el resto del sistema */
.adm-cards-list { display:flex; flex-direction:column; gap:14px; }
.adm-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 20px; box-shadow:var(--shadow-sm); }
.adm-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.adm-card-left { display:flex; gap:14px; align-items:flex-start; }
.adm-card-photo { width:52px; height:52px; border-radius:var(--radius-sm); flex-shrink:0; background:var(--bg-app); border:1.5px dashed var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; position:relative; transition:border-color .15s, background .15s; }
.adm-card-photo:hover { border-color:var(--ck-gold,#1e5fa8); background:rgba(30,95,168,.06); }
.adm-card-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.adm-card-photo .adm-photo-hint { font-size:7px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary); text-align:center; padding:0 3px; line-height:1.2; }
.adm-card-photo .adm-photo-hint svg { display:block; margin:0 auto 2px; opacity:.6; width:12px; height:12px; }
.adm-card-status { display:inline-block; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:3px 9px; border-radius:99px; margin-bottom:6px; }
.adm-card-status.st-activa { background:rgba(46,125,50,.1); color:#27774a; border:1px solid rgba(46,125,50,.25); }
.adm-card-status.st-vacancia { background:rgba(30,95,168,.1); color:#1e5fa8; border:1px solid rgba(30,95,168,.25); }
.adm-card-status.st-term { background:rgba(220,38,38,.1); color:#dc2626; border:1px solid rgba(220,38,38,.25); }
.adm-card-title { font-size:16px; font-weight:500; letter-spacing:-.01em; color:var(--text-primary); margin-bottom:3px; }
.adm-card-sub { font-size:10px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.04em; }
.adm-card-right { text-align:right; }
.adm-card-right .adm-card-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary); margin-bottom:3px; }
.adm-card-right .adm-card-amount { font-size:20px; font-weight:700; letter-spacing:-.01em; color:var(--text-primary); }
.adm-card-body { display:grid; grid-template-columns:1.3fr 1fr; gap:16px; border-top:1px solid var(--border); padding-top:14px; align-items:stretch; }
@media (max-width:760px) { .adm-card-body { grid-template-columns:1fr; } .adm-card-top { flex-direction:column; } .adm-card-right { text-align:left; } }
.adm-card-checklist-title { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--text-primary); margin-bottom:6px; }
.adm-card-check-item { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--bg-app); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.02em; }
.adm-card-check-item:last-child { border-bottom:none; }
.adm-card-check-item button { border:none; cursor:pointer; }
.adm-card-highlight { background:var(--bg-app); border-radius:var(--radius-sm); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:10px; gap:2px; }
.adm-card-highlight .val { font-size:18px; font-weight:700; letter-spacing:-.01em; }
.adm-card-highlight .val.real { color:#27774a; }
.adm-card-highlight .val.proyectado { color:#1e5fa8; }
.adm-card-highlight .val.bajo { color:#dc2626; }
.adm-card-highlight .lbl { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary); }
.adm-card-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }

/* Propiedades — tarjetas compactas (misma familia que .adm-card, mucho más acotadas) */
.prop-cards-list { display:flex; flex-direction:column; gap:8px; }
.prop-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:10px 14px; box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:14px; }
.prop-card-info { flex:1; min-width:0; }
.prop-card-top-row { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.prop-card-cod { font-size:9px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.prop-card-dir { font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prop-card-sub { font-size:10.5px; color:var(--text-secondary); margin-top:1px; }
.prop-card-valores { text-align:right; flex-shrink:0; }
.prop-card-valor-uf { font-size:13px; font-weight:700; color:var(--text-primary); }
.prop-card-valor-clp { font-size:10.5px; color:var(--text-secondary); }
.prop-card-actions { display:flex; gap:4px; flex-shrink:0; }
.acta-personaliza-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
@media (max-width:700px) { .acta-personaliza-grid { grid-template-columns:1fr 1fr; } }
.acta-color-input { padding:2px !important; height:34px; cursor:pointer; }
.acta-swatch-preview { border:1px solid #ececef; border-radius:10px; padding:16px; background:#fafbfc; }

/* Selector de color sólido (paleta de swatches) para los documentos */
.doc-color-field { min-width:0; grid-column:1 / -1; }
.doc-swatch-grid { display:grid; grid-template-columns:repeat(18,1fr); gap:5px; margin-top:3px; }
.doc-swatch { width:100%; aspect-ratio:1/1; min-height:18px; border:1.5px solid rgba(0,0,0,.12); border-radius:5px; cursor:pointer; padding:0; transition:transform .1s, box-shadow .1s; position:relative; }
.doc-swatch:hover { transform:scale(1.15); z-index:1; }
.doc-swatch[aria-selected="true"] { box-shadow:0 0 0 2px var(--bg-surface,#fff), 0 0 0 4px var(--ck-navy,#1A2B40); }
.doc-swatch[aria-selected="true"]::after { content:""; position:absolute; inset:0; margin:auto; width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 2px rgba(0,0,0,.6); }
.doc-swatch-hex { margin-top:7px; width:140px; max-width:100%; box-sizing:border-box; padding:6px 9px; font-size:11px; font-family:'Roboto Mono',ui-monospace,monospace; border:1px solid var(--border,#ddd); border-radius:6px; text-transform:uppercase; }
@media (max-width:700px) { .doc-swatch-grid { grid-template-columns:repeat(9,1fr); } }
body.dark-mode .doc-swatch { border-color:rgba(255,255,255,.18); }
body.dark-mode .doc-swatch-hex { background:var(--bg-app); color:var(--text-primary); }

.acta-room-card { border:1px solid #ececef; border-radius:8px; padding:16px; margin-bottom:12px; background:var(--bg-surface); transition:border-color .15s; }
.acta-room-card:hover { border-color:#dcdfe4; }
.acta-room-card .acta-room-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:8px; padding-bottom:10px; border-bottom:1px solid #f1f2f4; }
.acta-room-header input { font-weight:600; font-size:13.5px; border:none; background:transparent; padding:2px 0; flex:1; color:#1A2B40; }
.acta-room-header input:focus { outline:none; border-bottom:1px solid #c7cbd1; }
.acta-remove-btn { background:none; border:none; color:#b8bcc4; font-size:11px; cursor:pointer; font-weight:500; white-space:nowrap; padding:5px 8px; border-radius:10px; transition:color .12s; }
.acta-remove-btn:hover { color:#df2225; }
.acta-add-btn { background:var(--bg-surface); color:#1A2B40; border:1px solid #dcdfe4; border-radius:8px; padding:9px 16px; font-size:12px; font-weight:500; cursor:pointer; margin-top:4px; transition:border-color .15s,color .15s; }
.acta-add-btn:hover { border-color:#1A2B40; }
.acta-equip-row { display:grid; grid-template-columns:1.3fr 80px 1.5fr auto; gap:8px; align-items:center; margin-bottom:8px; background:#fafbfc; padding:9px 11px; border-radius:8px; }

#acta-fotos-preview .acta-foto-thumb { position:relative; width:84px; height:84px; border-radius:10px; overflow:hidden; border:1px solid #ececef; }
#acta-fotos-preview .acta-foto-thumb img { width:100%; height:100%; object-fit:cover; }

/* ── ACTA DE ENTREGA — dark mode (toda la sección tenía cero soporte) ── */
body.dark-mode #modal-acta-entrega #acta-body,
body.dark-mode #modal-orden-doc #orden-doc-body { background:var(--bg-app); }
body.dark-mode #acta-body .acta-hero, body.dark-mode #orden-doc-body .acta-hero,
body.dark-mode #acta-body .form-field, body.dark-mode #orden-doc-body .form-field,
body.dark-mode #acta-body input.fi, body.dark-mode #acta-body select.fi, body.dark-mode #acta-body textarea.fi,
body.dark-mode #orden-doc-body input.fi, body.dark-mode #orden-doc-body select.fi, body.dark-mode #orden-doc-body textarea.fi,
body.dark-mode details.acta-section,
body.dark-mode details.acta-section > summary,
body.dark-mode details.acta-section .acta-section-body,
body.dark-mode .acta-pill,
body.dark-mode .orden-pregunta-excl,
body.dark-mode .acta-swatch-preview,
body.dark-mode .acta-room-card,
body.dark-mode .acta-add-btn { background:var(--bg-surface); border-color:var(--border); }
body.dark-mode #acta-body .acta-hero-title, body.dark-mode #orden-doc-body .acta-hero-title,
body.dark-mode details.acta-section > summary,
body.dark-mode .acta-room-header input,
body.dark-mode .acta-add-btn,
body.dark-mode .orden-pregunta-excl-label { color:var(--text-primary); }
body.dark-mode #acta-body .acta-hero-sub, body.dark-mode #orden-doc-body .acta-hero-sub,
body.dark-mode #acta-body .form-field .fl, body.dark-mode #orden-doc-body .form-field .fl,
body.dark-mode .acta-progress-label,
body.dark-mode .acta-pill { color:var(--text-muted); }
body.dark-mode #acta-body .fi, body.dark-mode #orden-doc-body .fi,
body.dark-mode .acta-item-row label { color:var(--text-primary); }
body.dark-mode details.acta-section > summary:hover { background:var(--bg-app); }
body.dark-mode .acta-item-row,
body.dark-mode .acta-swatch-preview,
body.dark-mode .acta-equip-row { background:var(--bg-app); }
body.dark-mode .orden-excl-btn { background:var(--bg-app); color:var(--text-secondary); border-color:var(--border); }
body.dark-mode .acta-progress-bar { background:var(--bg-app); }
.modal-header { background:var(--ck-navy); color:white; padding:16px 20px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; border-radius:10px 16px 0 0; flex-shrink:0; }
.modal-header.rojo  { background:var(--ck-red); }
.modal-header.verde { background:var(--ck-green); }
.modal-header.gold  { background:var(--bank-blue); }
.modal-title { font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.modal-desc { font-size:11px; font-weight:400; text-transform:none; letter-spacing:normal; color:rgba(255,255,255,.65); margin-top:4px; line-height:1.4; }
.close-modal { background:rgba(255,255,255,.15); border:none; color:white; font-size:16px; cursor:pointer; border-radius:8px; padding:4px 8px; transition:all .20s; flex-shrink:0; }
.close-modal:hover { background:rgba(255,255,255,.28); }
.modal-body { padding:20px; overflow-y:auto; flex:1; }
.modal-footer { padding:14px 20px; display:flex; justify-content:flex-end; gap:8px; flex-shrink:0; border-top:1px solid var(--border); }
.mini-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.50); z-index:10500; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.mini-modal-box { background:var(--bg-surface); border-radius:10px; padding:22px; max-width:420px; width:90%; box-shadow:var(--shadow-lg); animation:fadeIn .20s cubic-bezier(0.4, 0, 0.2, 1); }
.mini-modal-box h4 { margin:0 0 12px; color:var(--text-primary); font-size:13px; font-weight:600; }
.mini-modal-box .fg { margin-bottom:10px; }
.mini-modal-box .fg label { font-size:10px; font-weight:600; text-transform:uppercase; color:var(--text-muted); display:block; margin-bottom:4px; }
.mini-modal-box .fg input,
.mini-modal-box .fg select,
.mini-modal-box .fg textarea { width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); font-family:inherit; font-size:13px; box-sizing:border-box; background:var(--bg-surface); color:var(--text-primary); }

/* ── PIPELINE ───────────────────────────────────────────── */
.pipeline-steps { display:flex; align-items:stretch; gap:0; overflow-x:auto; padding:3px 0 10px; margin-bottom:1rem; }
.pipeline-step { flex:1; min-width:84px; background:var(--bg-app); text-align:center; padding:7px 4px; font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); position:relative; clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%,9px 50%); margin-right:2px; transition:all .16s; cursor:pointer; border:1px solid var(--border); }
.pipeline-step:first-child { clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%); }
.pipeline-step.active { background:var(--ck-navy); color:white; border-color:var(--ck-navy); }
.pipeline-step.done   { background:var(--ck-green); color:white; border-color:var(--ck-green); }

/* ── PROP FILTER TABS ───────────────────────────────────── */
.prop-filter-tabs { display:flex; gap:5px; margin-bottom:10px; flex-wrap:wrap; }
.prop-filter-tab { padding:4px 13px; border-radius:99px; font-size:11px; font-weight:500; cursor:pointer; border:1px solid var(--border); background:var(--bg-surface); color:var(--text-secondary); transition:all .12s; font-family:inherit; }
.prop-filter-tab.active { background:var(--ck-navy); color:white; border-color:var(--ck-navy); }
.prop-filter-tab:hover:not(.active) { border-color:var(--ck-navy); color:var(--ck-navy); }

/* ── MONTH PILLS (Administraciones) ────────────────────────
   Unificado con el filtro del Dashboard (.dash-period-btn): mismo
   recuadro (radio 5px, no pill completa), misma tipografía (sin
   mayúsculas), mismo color de "mes activo" (rojo, no navy) — pedido
   explícito del usuario 2026-09-06 tras verlos inconsistentes. */
.month-pills { display:flex; gap:4px; flex-wrap:wrap; margin-top:8px; }
.month-pill { cursor:pointer; padding:4px 9px; border-radius:5px; font-size:10px; font-weight:500; transition:all .12s; background:var(--bg-surface); color:var(--text-secondary); border:1px solid var(--border); font-family:inherit; }
.month-pill.active { background:var(--ck-red); color:white; border-color:var(--ck-red); }
.month-pill:hover:not(.active) { border-color:var(--ck-navy); color:var(--ck-navy); }

/* ── PERIOD SELECTOR ────────────────────────────────────── */
.dash-period-btn { border:1px solid var(--border); background:var(--bg-surface); color:var(--text-secondary); font-family:inherit; font-size:var(--fs-2xs); font-weight:var(--fw-medium); padding:var(--space-1) var(--space-2); border-radius:var(--radius-xs); cursor:pointer; transition:all .12s; }
.dash-period-btn:hover:not(.active) { border-color:var(--ck-navy); color:var(--ck-navy); }
.dash-period-year.active { background:var(--ck-navy); color:white; border-color:var(--ck-navy); }
.dash-period-mes.active  { background:var(--ck-red); color:white; border-color:var(--ck-red); }

/* ── CENTRO DE ALERTAS ──────────────────────────────────── */
.alerta-centro { border-radius:14px; background:var(--bg-surface); border:1.5px solid rgba(30,95,168,.18); overflow:hidden; margin-bottom:14px; }
/* Header con fondo más claro (pedido explícito), pero los botones deben
   verse EXACTAMENTE igual que antes (navy translúcido sobre navy) sin
   importar el fondo — por eso los botones ya no usan rgba(255,255,255,.15)
   (que se aclara si el fondo detrás se aclara), sino el color YA COMPUESTO
   fijo (blanco 15%/25% mezclado sobre el navy original), así quedan
   idénticos a la imagen de referencia aunque el header deje de ser navy. */
.alerta-centro-header { background:var(--bank-blue-soft); border-bottom:1.5px solid rgba(30,95,168,.18); padding:11px 16px; display:flex; justify-content:space-between; align-items:center; position:relative; }
.alerta-centro-header::before { content:none; }
.alerta-centro-titulo { color:var(--bank-navy); font-size:13px; font-weight:800; display:flex; align-items:center; gap:7px; }
.alerta-centro-titulo svg { fill:var(--bank-navy); }
.alerta-centro-count { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--ck-red); color:#fff; font-size:11px; font-weight:800; line-height:1; box-shadow:0 0 0 3px rgba(223,34,37,.25); }
.alerta-centro-count.cero { background:rgba(20,44,86,.14); color:var(--bank-navy); box-shadow:none; }
.alerta-centro-sub { color:var(--bank-navy); opacity:.72; font-size:9px; font-weight:600; margin-top:3px; letter-spacing:.05em; text-transform:uppercase; }
.alerta-centro-header button { background:#37507a !important; border:1px solid #48628f !important; color:#fff !important; font-weight:600 !important; padding:6px 10px !important; font-size:9px !important; transition:all .18s ease !important; }
.alerta-centro-header button:hover { background:#2c405f !important; border-color:#3c5378 !important; box-shadow:0 2px 8px rgba(20,44,86,.25) !important; }
body.dark-mode .alerta-centro-header { background:var(--bg-surface); border-bottom-color:var(--border); }
body.dark-mode .alerta-centro-titulo { color:var(--text-primary); }
body.dark-mode .alerta-centro-titulo svg { fill:var(--text-primary); }
body.dark-mode .alerta-centro-sub { color:var(--text-secondary); opacity:1; }
body.dark-mode .alerta-centro-count.cero { background:var(--gray-light); color:var(--text-secondary); }
body.dark-mode .alerta-centro-header button { background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.2) !important; }
/* Cuando el único contenido es "Todo en orden" (sin alertas), se centra en
   vertical para que la tarjeta no se vea vacía arriba con un hueco abajo. */
.alerta-centro-body { padding:10px; }
.alerta-centro-body:has(> .alerta-item.ok:only-child) { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.alerta-centro-body:has(> .alerta-item.ok:only-child) .alerta-item.ok { flex-direction:column; align-items:center; gap:8px; max-width:240px; }
.alerta-centro-body:has(> .alerta-item.ok:only-child) .alerta-icono { width:40px; height:40px; }
.alerta-item { display:flex; align-items:flex-start; gap:10px; padding:9px 11px; border-radius:9px; margin-bottom:5px; transition:background .12s; cursor:default; }
.alerta-item:hover { background:var(--bg-app); }
.alerta-item.urgente  { --alert-fg:var(--ck-red);    --alert-bg:rgba(223,34,37,.12); }
.alerta-item.aviso    { --alert-fg:var(--ck-yellow); --alert-bg:rgba(30,95,168,.12); }
.alerta-item.info     { --alert-fg:var(--ck-blue);   --alert-bg:rgba(30,95,168,.12); }
.alerta-item.ok       { --alert-fg:var(--ck-green);  --alert-bg:rgba(39,119,74,.12); }
.alerta-item.pipeline { --alert-fg:var(--bank-blue); --alert-bg:var(--bank-blue-soft); }
.alerta-item.visita   { --alert-fg:var(--bank-blue-light); --alert-bg:var(--bank-blue-soft); }
.alerta-icono { font-size:14px; flex-shrink:0; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--alert-fg,#666); background:var(--alert-bg,rgba(0,0,0,.06)); }
.alerta-contenido { flex:1; }
.alerta-titulo { font-weight:600; font-size:12px; color:var(--text-primary); margin-bottom:2px; }
.alerta-desc   { font-size:11px; color:var(--text-secondary); line-height:1.4; }
.alerta-dias   { font-size:9px; font-weight:600; padding:2px 6px; border-radius:99px; flex-shrink:0; align-self:center; white-space:nowrap; border:1px solid var(--border); color:var(--text-muted); }
.alerta-dias.urgente { border-color:rgba(223,34,37,.3); color:var(--ck-red); }
.alerta-dias.aviso   { border-color:rgba(30,95,168,.3); color:var(--ck-yellow); }
.alerta-dias.ok      { border-color:rgba(39,119,74,.3);  color:var(--ck-green); }

/* ── CRM: selector de vista ──── */
.crm-view-tab { background:none; border:none; padding:9px 16px; font-size:12px; font-weight:700; color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; font-family:inherit; display:inline-flex; align-items:center; }
.crm-view-tab:hover { color:var(--text-primary); }
.crm-view-tab.active { color:var(--ck-red); border-bottom-color:var(--ck-red); }

/* ── CRM KANBAN (columnas lado a lado, scroll interno) ──── */
#crm-list { display:flex; gap:14px; align-items:flex-start; overflow-x:auto; overflow-y:hidden; padding-bottom:10px; }
.crm-accordion-grupo { border-radius:var(--radius-md); border:1px solid var(--border); overflow:hidden; flex:1 1 0; min-width:260px; display:flex; flex-direction:column; margin-bottom:0; }
.crm-stat-card { flex:1 1 160px; min-width:150px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 14px; }
.crm-stat-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary); margin-bottom:4px; }
.crm-stat-value { font-size:19px; font-weight:800; color:var(--text-primary); }
.crm-accordion-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; cursor:pointer; background:var(--bg-surface); transition:background .11s; font-weight:600; font-size:12px; user-select:none; border:none; width:100%; font-family:inherit; text-align:left; color:var(--text-primary); flex-shrink:0; }
.crm-accordion-header:hover { background:var(--bg-app); }
.crm-accordion-header.open  { background:var(--ck-navy); color:white; }
.crm-accordion-count { font-size:10px; font-weight:600; background:rgba(255,255,255,.18); padding:1px 7px; border-radius:99px; }
.crm-accordion-header:not(.open) .crm-accordion-count { background:var(--bg-app); color:var(--text-secondary); }
.crm-accordion-body { display:none; padding:8px 10px; background:var(--bg-app); max-height:calc(100vh - 300px); overflow-y:auto; }
.crm-accordion-body.open { display:block; }
.crm-accordion-body .crm-grid { display:flex; flex-direction:column; gap:8px; }
.crm-card { background:var(--bg-surface); border-radius:var(--radius-md); padding:12px 14px; border:1px solid var(--border); transition:border-color .13s,box-shadow .13s,opacity .13s; display:flex; gap:8px; align-items:flex-start; cursor:grab; }
.crm-card:hover { border-color:var(--ck-red); box-shadow:var(--shadow-md); }
.crm-card:active { cursor:grabbing; }
.crm-card.dragging { opacity:.3; }
.matching-sort-bar { display:flex; align-items:center; gap:6px; margin-bottom:12px; }
.matching-sort-btn { font-size:11px; font-weight:600; padding:5px 12px; border-radius:20px; border:1px solid var(--border); background:var(--bg-surface); color:var(--text-muted); cursor:pointer; transition:all .15s ease; }
.matching-sort-btn:hover { border-color:var(--bank-blue); color:var(--bank-blue); }
.matching-sort-btn.active { background:var(--bank-blue); color:#fff; border-color:var(--bank-blue); }
.crm-card svg, .crm-card img { -webkit-user-drag:none; user-drag:none; pointer-events:none; }
.crm-ghost { position:fixed; top:0; left:0; z-index:99999; pointer-events:none; box-shadow:0 16px 40px rgba(0,0,0,.3); transform:rotate(2deg); opacity:.95; }
.crm-accordion-body.drag-over { background:rgba(223,34,37,.08); outline:2px dashed var(--ck-red); outline-offset:-4px; }
.crm-empty { font-size:11.5px; color:var(--text-secondary); text-align:center; padding:24px 8px; border:1.5px dashed var(--border); border-radius:var(--radius-md); }
@media(max-width:768px){
  #crm-list { flex-direction:column; overflow-x:hidden; overflow-y:visible; align-items:stretch; }
  .crm-accordion-grupo { max-width:none; width:100%; flex:none; }
  .crm-accordion-body { max-height:60vh; }
}
.crm-body { flex:1; min-width:0; }
.crm-name { font-weight:500; font-size:14px; margin-bottom:3px; color:var(--text-primary); }
.crm-meta { font-size:12px; color:var(--text-secondary); margin-bottom:6px; line-height:1.5; }
.crm-tags { display:flex; gap:3px; flex-wrap:wrap; }

/* ── CRM v2 — sistema unificado de etiquetas / botones / encabezados ──────
   Menos color, menos formas. El color se reserva: rojo = urgente/perdido,
   verde = match caliente. Todo lo demás es gris neutro. */
.cx-chip { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:500; padding:2px 8px; border-radius:6px; background:var(--bg-app); color:var(--text-secondary); border:1px solid var(--border); white-space:nowrap; line-height:1.5; }
.cx-chip.is-urgente { background:rgba(223,34,37,.09); color:var(--ck-red); border-color:rgba(223,34,37,.22); }
.cx-chip.is-exito   { background:rgba(39,119,74,.09); color:var(--ck-green); border-color:rgba(39,119,74,.22); }
body.dark-mode .cx-chip { background:var(--bg-surface); color:#aeb7c4; border-color:var(--border); }

/* Botones de acción de tarjeta/fila — todos iguales: icono, 28px, fantasma */
.cx-actions { display:flex; align-items:center; gap:4px; }
.cx-act { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; border:1px solid var(--border); background:var(--bg-surface); color:var(--text-secondary); cursor:pointer; text-decoration:none; transition:background .12s,color .12s,border-color .12s; flex-shrink:0; padding:0; }
.cx-act:hover { background:var(--bg-app); color:var(--text-primary); }
.cx-act svg { width:14px; height:14px; }
.cx-act.is-wa { color:#25D366; }
.cx-act.is-wa:hover { background:rgba(37,211,102,.1); border-color:rgba(37,211,102,.3); }
.cx-act.is-del { color:var(--text-muted); margin-left:auto; }
.cx-act.is-del:hover { background:rgba(223,34,37,.1); color:var(--ck-red); border-color:rgba(223,34,37,.3); }
body.dark-mode .cx-act { background:var(--bg-surface); border-color:var(--border); color:#aeb7c4; }

/* Encabezado de columna Kanban — barra fina con punto de color, sin banda */
.crm-accordion-header { gap:8px; }
.crm-accordion-header, .crm-accordion-header.open,
body.dark-mode .crm-accordion-header, body.dark-mode .crm-accordion-header.open {
  background:var(--bg-surface) !important; color:var(--text-primary) !important; border:none !important;
}
body.dark-mode .crm-accordion-header, body.dark-mode .crm-accordion-header.open { color:#cdd5e0 !important; }
.crm-accordion-header:hover, body.dark-mode .crm-accordion-header:hover { background:var(--bg-app) !important; }
.cx-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.crm-accordion-count, .crm-accordion-header:not(.open) .crm-accordion-count,
body.dark-mode .crm-accordion-count {
  background:var(--bg-app) !important; color:var(--text-secondary) !important; border:1px solid var(--border);
  font-weight:700; font-size:10px; padding:1px 7px;
}
.crm-accordion-grupo.is-empty { flex:0 1 200px; min-width:180px; }
.crm-accordion-grupo.is-empty .crm-accordion-header { opacity:.65; }
.crm-accordion-grupo.is-empty .crm-accordion-body { padding:6px; }
.crm-accordion-grupo.is-empty .crm-grid { min-height:34px; border:1.5px dashed var(--border); border-radius:8px; }

/* Fila de tabla — chip "perdido" junto al nombre */
.cx-perdido { display:inline-block; font-size:10px; font-weight:700; color:var(--ck-red); background:rgba(223,34,37,.09); border:1px solid rgba(223,34,37,.22); border-radius:5px; padding:1px 6px; margin-top:3px; }

/* Columnas secundarias de la tabla de Leads: se ocultan en pantallas chicas */
@media(max-width:820px){
  .crm-col-sec { display:none !important; }
}

/* ── KANBAN ─────────────────────────────────────────────── */
.board-wrapper { overflow-x:auto; padding-bottom:10px; }
.board-container { display:flex; gap:13px; min-height:480px; padding:3px 0; width:max-content; min-width:100%; }
.board-column { background:var(--bg-app); border:1px solid var(--border); border-radius:var(--radius-lg); width:310px; min-width:310px; display:flex; flex-direction:column; }
.column-header { padding:10px 13px; display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid var(--border); }
.col-cold .column-header { border-bottom-color:var(--text-muted); }
.col-warm .column-header { border-bottom-color:var(--ck-red); }
.col-hot  .column-header { border-bottom-color:var(--ck-navy); }
.column-title { font-weight:700; font-size:11px; color:var(--text-primary); text-transform:uppercase; letter-spacing:.05em; }
.lead-count { background:var(--bg-surface); color:var(--text-muted); font-size:10px; font-weight:600; padding:2px 7px; border-radius:99px; border:1px solid var(--border); }
.column-body { padding:10px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:8px; }
.lead-card { background:var(--bg-surface); border-radius:var(--radius-md); padding:12px; box-shadow:var(--shadow-sm); border:1px solid var(--border); cursor:grab; user-select:none; transition:box-shadow .13s; }
.lead-card:active { cursor:grabbing; opacity:.85; }
.lead-card .card-name { font-weight:600; font-size:12px; color:var(--text-primary); margin-bottom:3px; }
.lead-card .card-meta { font-size:11px; color:var(--text-secondary); margin-bottom:7px; line-height:1.5; }
.lead-card .card-tags  { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:7px; }
.lead-card .card-actions { display:flex; gap:4px; border-top:1px solid var(--border-light); padding-top:7px; }

/* ── ALIANZAS ───────────────────────────────────────────── */
.alianza-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,240px)); justify-content:start; gap:10px; }
.alianza-card { background:var(--bg-surface); border-radius:var(--radius-md); border:1px solid var(--border); padding:13px; position:relative; overflow:hidden; transition:border-color .13s,box-shadow .13s; }
.alianza-card:hover { border-color:var(--ck-navy); box-shadow:var(--shadow-md); }
.alianza-tipo-badge { display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:99px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; border:1px solid var(--border); background:var(--bg-app); color:var(--text-muted); }
.alianza-nombre  { font-weight:600; font-size:13px; color:var(--text-primary); margin-bottom:2px; line-height:1.3; }
.alianza-empresa { font-size:11px; color:var(--text-secondary); margin-bottom:7px; }
.alianza-actions { display:flex; gap:4px; flex-wrap:wrap; margin-top:7px; border-top:1px solid var(--border-light); padding-top:7px; }
.alianza-canje   { background:var(--bg-app); border:1px solid var(--border); border-radius:4px; padding:2px 6px; font-size:9px; font-weight:600; color:var(--text-muted); margin-top:2px; display:inline-block; }

/* ── CAPTACIONES ────────────────────────────────────────── */
.cap-estado { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:99px; font-size:9px; font-weight:600; border:1px solid var(--border); background:var(--bg-app); color:var(--text-secondary); }
.cap-estado.prospeccion    { border-color:rgba(30,95,168,.25);  color:var(--ck-yellow); }
.cap-estado.presentacion   { border-color:rgba(30,95,168,.25);   color:var(--ck-blue); }
.cap-estado.negociacion    { border-color:rgba(123,147,232,.35);  color:var(--bank-blue-light); }
.cap-estado.exclusividad   { border-color:rgba(39,119,74,.25);   color:var(--ck-green); }
.cap-estado.captada_sin_exclusividad { border-color:rgba(39,119,74,.25); color:var(--ck-green); }
.cap-resultado-perdida { display:inline-flex; align-items:center; padding:2px 8px; border-radius:99px; font-size:9px; font-weight:600; background:rgba(223,34,37,.08); color:var(--ck-red); border:1px solid rgba(223,34,37,.2); }

/* ── CAPTACIONES: vista de tarjetas ───────────────────────── */
.cap-cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,240px)); justify-content:start; gap:12px; }
/* En móvil, tarjetas de ancho fijo (220-240px) dejaban un margen vacío
   inútil al lado — con los botones nuevos de Captada/Convertir a ancho
   completo, se nota más. Una sola columna a todo el ancho disponible. */
@media (max-width:480px) { .cap-cards-grid { grid-template-columns:1fr; } }
.cap-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px; display:flex; flex-direction:column; }
.cap-card.overdue { border-color:rgba(223,34,37,.35); }
.cap-card .cap-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:10px; }
.cap-card .cap-card-dir { font-size:13px; font-weight:500; line-height:1.3; color:var(--text-primary); }
.cap-card .cap-card-owner { font-size:11.5px; color:var(--text-secondary); margin-top:2px; }
.cap-card .cap-urg-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.cap-card .cap-card-mid { display:flex; gap:18px; margin:10px 0; padding:9px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cap-card .cap-card-metric-label { font-size:9px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.cap-card .cap-card-metric-val { font-size:13px; font-weight:700; margin-top:2px; color:var(--text-primary); }
.cap-card .cap-card-metric-val.destacado { font-size:16px; color:var(--ck-green); }
.cap-card .cap-card-badges { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.cap-tipo-pill { display:inline-flex; align-items:center; padding:2px 8px; border-radius:99px; font-size:9px; font-weight:600; border:1px solid var(--border); color:var(--text-secondary); background:var(--bg-app); }
.cap-card .cap-card-bottom { display:flex; justify-content:space-between; align-items:center; }
.cap-card .cap-card-contact { font-size:10.5px; color:var(--text-secondary); }
.cap-card .cap-card-contact.late { color:var(--ck-red); font-weight:700; }
.cap-card .cap-card-actions { display:flex; gap:6px; align-items:center; }
.ali-stars { display:inline-flex; gap:1px; flex-shrink:0; margin-top:2px; }

/* ── ARR PIPELINE ───────────────────────────────────────── */
.arr-step { display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:5px; font-size:11px; font-weight:600; background:var(--bg-app); color:var(--text-muted); border:1px solid var(--border); }
.arr-step.done   { border-color:rgba(39,119,74,.3); color:var(--ck-green); }
.arr-step.active { border-color:rgba(223,34,37,.3); color:var(--ck-red); background:rgba(223,34,37,.04); }
.arr-pipeline { display:flex; gap:4px; flex-wrap:wrap; margin:5px 0; }

/* ── ALERTS ─────────────────────────────────────────────── */
.alert { padding:10px 14px; border-radius:var(--radius-md); display:flex; gap:10px; align-items:flex-start; border:1px solid var(--border); margin-bottom:10px; font-size:12px; }
.alert-urgente { background:rgba(223,34,37,.04);  color:var(--ck-red); }
.alert-aviso   { background:rgba(30,95,168,.04);  color:var(--ck-yellow); }
.alert-ok      { background:rgba(39,119,74,.04);   color:var(--ck-green); }
.alert-info    { background:rgba(30,95,168,.04);    color:var(--ck-blue); }

/* ── GRID ───────────────────────────────────────────────── */
.grid { display:grid; gap:14px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:1500px) { .kpi-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:1024px) { .grid-4,.grid-3 { grid-template-columns:repeat(2,1fr); } .kpi-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px)  { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } .form-row { grid-template-columns:1fr; } .kpi-grid { grid-template-columns:1fr 1fr; } }

/* ── UTILITIES ──────────────────────────────────────────── */
.text-center { text-align:center; }
.text-right  { text-align:right; }
.text-muted  { color:var(--text-secondary); font-size:12px; }
.mt-1 { margin-top:5px; }  .mt-2 { margin-top:10px; } .mt-3 { margin-top:16px; } .mt-4 { margin-top:20px; }
.mb-1 { margin-bottom:5px; } .mb-2 { margin-bottom:10px; } .mb-3 { margin-bottom:16px; } .mb-4 { margin-bottom:20px; }
.p-3 { padding:15px; } .p-4 { padding:18px; }
.gap-1 { gap:4px; } .gap-2 { gap:9px; } .gap-3 { gap:14px; }
.flex { display:flex; } .flex-col { flex-direction:column; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.flex-center  { display:flex; justify-content:center; align-items:center; }
.w-full { width:100%; }

.dark-mode-toggle { width:32px; height:32px; border-radius:50%; background:var(--bg-app); border:1px solid var(--border); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; transition:all .16s; color:var(--text-secondary); }
.dark-mode-toggle:hover { background:var(--ck-navy); color:white; border-color:var(--ck-navy); }

.pago-toggle { border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 10px; cursor:pointer; transition:all .13s; background:var(--bg-surface); }
.pago-toggle.checked { border-color:var(--ck-green); background:rgba(39,119,74,.04); }
.pago-toggle label { color:var(--text-secondary); font-size:11px; }

.btn-pago-inq  { background:rgba(39,119,74,.07); color:var(--ck-green); border:1px solid rgba(39,119,74,.25); padding:2px 7px; border-radius:4px; font-size:9px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .11s; }
.btn-pago-inq:hover  { background:var(--ck-green); color:white; }
.btn-pago-prop { background:rgba(30,95,168,.07); color:var(--ck-blue); border:1px solid rgba(30,95,168,.25); padding:2px 7px; border-radius:4px; font-size:9px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .11s; }
.btn-pago-prop:hover { background:var(--ck-blue); color:white; }

.flujo-pendiente-badge { display:inline-block; background:var(--ck-yellow); color:white; font-size:9px; font-weight:600; padding:1px 6px; border-radius:99px; }

.gtog-btn { background:var(--bg-surface); border:1px solid var(--border); border-radius:4px; padding:3px 7px; cursor:pointer; font-size:11px; color:var(--text-secondary); font-family:inherit; transition:all .11s; }
.gtog-btn:hover { border-color:var(--ck-navy); color:var(--ck-navy); }

.gs-result-item { padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--border-light); transition:background .09s; }
.gs-result-item:hover { background:var(--bg-app); }
.gs-result-item .gs-title { font-size:13px; font-weight:600; color:var(--text-primary); }
.gs-result-item .gs-sub   { font-size:11px; color:var(--text-secondary); }

.fab { position:fixed; bottom:20px; right:20px; z-index:8000; height:42px; border-radius:8px; background:var(--bg-sidebar); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; padding:0 18px; box-shadow:var(--shadow-sm); transition:transform .16s,box-shadow .16s,background .14s; font-size:12px; font-weight:600; letter-spacing:.02em; font-family:inherit; white-space:nowrap; }
.fab:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); filter:brightness(1.15); }
.fab svg { flex-shrink:0; }
#fab-menu { background:var(--bg-surface)!important; border:1px solid var(--border)!important; border-radius:var(--radius-md); }
#fab-menu strong { color:var(--text-primary); }
/* Botones flotantes de Alertas + Documentos — fondo navy normal, ícono
   (campana / carpeta) relleno en dorado con matices e iluminación para dar
   efecto 3D (no solo el borde). */
#fab-alertas-btn svg, #fab-main-btn svg { filter:none; }

/* Toggle para ocultar/mostrar los FABs — "efecto cortina": los dos botones
   se deslizan con un pequeño desfase entre sí (uno sigue al otro) en vez
   de moverse exactamente igual, simulando una cortina que se cierra/abre. */
.fab-hidden { transform:translateX(calc(100% + 24px))!important; }
#fab-alertas-btn { transition:transform .20s cubic-bezier(0.4,0,0.2,1) 0s,box-shadow .16s,background .14s; }
#fab-main-btn { transition:transform .20s cubic-bezier(0.4,0,0.2,1) .07s,box-shadow .16s,background .14s; }
#fab-toggle-btn { position:fixed; bottom:20px; right:20px; z-index:8001; width:28px; height:28px; border-radius:50%; background:var(--bg-surface); border:1.5px solid rgba(223,34,37,.35); color:var(--ck-red); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); transition:right .22s cubic-bezier(0.4,0,0.2,1),transform .22s,color .16s,border-color .16s,background .16s; padding:0; }
#fab-toggle-btn:hover { color:#fff; background:var(--ck-red); border-color:var(--ck-red); box-shadow:0 4px 14px rgba(223,34,37,.45); }
#fab-toggle-btn:active { color:#fff; background:#922b21; border-color:#922b21; }
#fab-toggle-btn.fabs-hidden-state { transform:rotate(180deg); }

/* Status dots (replace colored circle emojis) */
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; flex-shrink:0; vertical-align:middle; }
.dot-green  { background:var(--ck-green); }
.dot-orange { background:var(--ck-yellow); }
.dot-red    { background:var(--ck-red); }

/* Tarjetas KPI: fondo siempre blanco/superficie — el color va solo en el
   ícono y en el pill/texto (ej. "Colocación"), no en todo el fondo. */
.kpi-card.k-adm, .kpi-card.k-adm-rec, .kpi-card.k-venta, .kpi-card.k-arriendo,
.kpi-card.k-egr, .kpi-card.k-cyan, .kpi-card.k-props, .kpi-card.k-valor, .kpi-card.k-leads {
  background:var(--bg-surface);
}

/* LOGIN — rediseño estilo "banca profesional" (referencia: Banco de
   Chile/Edwards) 2026-09-08: formulario a la izquierda sobre fondo blanco
   con inputs de label flotante, foto a pantalla completa a la derecha. */
#login-screen{display:flex;align-items:stretch;justify-content:center;min-height:100vh;padding:0;background:#fff;}
.login-form-col{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;min-width:0;background:#fff;position:relative;overflow:hidden;}
/* Blob ambiental muy sutil — el panel de foto (.login-visual) se oculta en
   mobile (<900px, ver @media más abajo), así que sin esto el login queda
   sin ningún elemento de marca en celular. Opacidad baja a propósito para
   no romper el estilo "banca profesional" (limpio, sobrio) del formulario. */
.login-form-spot{position:absolute;top:-140px;left:-120px;width:520px;height:520px;background:radial-gradient(circle,rgba(26,43,64,.05) 0%,transparent 70%);pointer-events:none;z-index:0;}
.login-form-spot2{position:absolute;bottom:-160px;right:-140px;width:480px;height:480px;background:radial-gradient(circle,rgba(224,90,73,.045) 0%,transparent 70%);pointer-events:none;z-index:0;}
.login-form-inner{width:100%;max-width:400px;position:relative;z-index:1;}
.login-back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-secondary);text-decoration:none;margin-bottom:36px;}
.login-back-link:hover{color:var(--bg-sidebar);}
.login-brand-row{display:flex;align-items:center;gap:10px;margin-bottom:28px;}
.login-logo-icon-flat{width:34px;height:34px;background:var(--bg-sidebar);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.login-logo-text-flat{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--bg-sidebar);}
.login-heading{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--bg-sidebar);letter-spacing:-.01em;line-height:1.3;margin-bottom:28px;}

/* Inputs de label flotante — el label queda "montado" sobre el borde
   superior (fondo blanco corta la línea del borde justo detrás del texto),
   igual al patrón de banca online. */
/* La regla global *{transition-duration:.06s!important} (línea 15) deja
   inputs/botones del login sin transición real pese a declararla — se
   restaura acá con la misma técnica (!important + selector de clase, que
   gana por especificidad) que ya usan .login-visual-slide y .lgi-*. */
.fl-input, .fl-eye-btn, .login-btn-flat, .login-back-link { transition-duration:.18s!important; }

.fl-field{position:relative;margin-bottom:24px;}
.fl-field label{position:absolute;top:0;left:13px;transform:translateY(-50%);background:#fff;padding:0 6px;font-size:12px;font-weight:500;color:var(--text-secondary);z-index:1;}
.fl-input{width:100%;padding:15px 14px;border:1.5px solid var(--border);border-radius:12px;font-size:14px;font-family:inherit;color:var(--text-primary);outline:none;background:#fff;transition:border-color .18s;}
.fl-input:focus{border-color:var(--bg-sidebar);}
.fl-input.error{border-color:#c0392b;}
.fl-eye-btn{position:absolute;right:6px;top:16px;background:none;border:none;cursor:pointer;padding:6px;color:#8fa0b4;opacity:.7;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .18s;}
.fl-eye-btn:hover{opacity:1;color:var(--bg-sidebar);background:rgba(26,43,64,.06);}
.login-btn-flat{width:100%;padding:15px;background:var(--bg-sidebar);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;font-family:inherit;transition:opacity .18s,box-shadow .18s,transform .18s;box-shadow:0 4px 14px rgba(26,43,64,.24);margin-top:4px;}
.login-btn-flat:hover:not(:disabled){opacity:.94;box-shadow:0 8px 22px rgba(26,43,64,.32);transform:translateY(-1px);}
.login-btn-flat:active:not(:disabled){transform:translateY(0) scale(.98);box-shadow:0 2px 8px rgba(26,43,64,.22);}
.login-btn-flat:disabled{opacity:.5;cursor:not-allowed;}
.login-btn-google-flat{background:#fff!important;color:var(--text-primary)!important;border:1.5px solid var(--border)!important;text-transform:none!important;letter-spacing:normal!important;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;box-shadow:none!important;}
.login-btn-google-flat:hover{background:var(--border-light)!important;box-shadow:none!important;transform:none!important;}
.login-remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);margin:-8px 0 16px;cursor:pointer;user-select:none;}
.login-remember input{width:16px;height:16px;margin:0;accent-color:var(--bg-sidebar);cursor:pointer;flex-shrink:0;}
.login-forgot-row{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px;color:var(--text-secondary);margin-top:16px;cursor:pointer;}
.login-forgot-row svg{flex-shrink:0;opacity:.6;}
.login-forgot-row u{color:var(--bg-sidebar);font-weight:600;text-decoration:underline;}
.login-help-card{background:var(--bg-app);border-radius:12px;padding:18px 20px;margin-top:32px;text-align:center;}
.login-help-title{font-size:12.5px;color:var(--text-secondary);margin-bottom:10px;}
.login-help-contacts{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;}
.login-help-contacts a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--bg-sidebar);text-decoration:none;}
.login-help-contacts a:hover{text-decoration:underline;}

/* ── Trial-block · tarjetas de plan ── mismo lenguaje visual que las
   tarjetas de precio de la landing pública (ver landing.html .pc/.pop):
   antes esta pantalla vivía 100% de estilos inline planos, justo en el
   momento de mayor fricción de pago (prueba vencida). */
.tbp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px;}
@media(max-width:820px){.tbp-grid{grid-template-columns:1fr;}}
.tbp-basico{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;text-align:left;background:linear-gradient(135deg,#e6eeff 0%,#f1f6ff 55%,#eaf7f0 100%);border:1.5px solid rgba(26,86,219,.28);border-radius:var(--radius-xl);padding:20px 24px;margin-bottom:24px;box-shadow:0 6px 20px rgba(26,86,219,.08);}
.tbp-basico-txt{flex:1;min-width:240px;}
.tbp-basico-tit{font-size:15px;font-weight:800;color:var(--bg-sidebar);margin-bottom:6px;}
.tbp-basico-sub{font-size:12.5px;color:var(--text-secondary);line-height:1.55;}
.tbp-basico-precio{flex-shrink:0;text-align:center;min-width:150px;}
.tbp-basico-precio .tbp-per{margin:4px 0 10px;}
.tbp-basico-precio .tbp-price{color:#1a56db;}
.tbp-basico-precio .tbp-btn{background:#1a56db;box-shadow:0 6px 16px rgba(26,86,219,.32);}
.tbp-basico-precio .tbp-btn:hover{background:var(--bg-sidebar);}
.tbp-basico-tit{display:inline-block;}
.tbp-rec{position:absolute;top:-11px;left:16px;background:#1a56db;color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.05em;padding:4px 11px;border-radius:99px;white-space:nowrap;box-shadow:0 4px 10px rgba(26,86,219,.3);}
.tbp-basico{position:relative;}
.tbp-pop .tbp-rec{top:auto;bottom:-11px;left:50%;transform:translateX(-50%);}
.tbp-basico .tbp-rec{left:22px;}
@media(max-width:640px){.tbp-basico{flex-direction:column;text-align:center;padding:18px 16px;}}
.tbp-card{background:var(--bg-surface);border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:26px 20px;text-align:left;cursor:pointer;transition:all .22s!important;position:relative;display:flex;flex-direction:column;}
.tbp-card:hover{border-color:var(--bg-sidebar);box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.tbp-card.tbp-pop{background:var(--bg-sidebar);border-color:var(--bg-sidebar);box-shadow:0 16px 40px rgba(26,43,64,.28);}
.tbp-card.tbp-pop:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(26,43,64,.34);}
.tbp-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--ck-red);color:#fff;font-size:10px;font-weight:800;padding:4px 14px;border-radius:var(--radius-pill);white-space:nowrap;letter-spacing:.05em;}
.tbp-icon{width:44px;height:44px;border-radius:var(--radius-base);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px;background:rgba(26,43,64,.08);}
.tbp-pop .tbp-icon{background:rgba(255,255,255,.1);}
.tbp-name{font-size:16px;font-weight:800;color:var(--bg-sidebar);margin-bottom:4px;letter-spacing:-.01em;}
.tbp-pop .tbp-name{color:#fff;}
.tbp-price{font-size:26px;font-weight:900;color:var(--bg-sidebar);line-height:1;letter-spacing:-.02em;}
.tbp-pop .tbp-price{color:#fff;}
.tbp-per{font-size:11px;color:var(--text-secondary);margin:4px 0 16px;}
.tbp-pop .tbp-per{color:rgba(255,255,255,.5);}
.tbp-feats{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;flex:1;}
.tbp-feat{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--text-secondary);line-height:1.5;}
.tbp-pop .tbp-feat{color:rgba(255,255,255,.75);}
.tbp-chk{width:15px;height:15px;border-radius:50%;background:rgba(26,43,64,.1);color:var(--bg-sidebar);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px;font-weight:900;margin-top:1px;}
.tbp-pop .tbp-chk{background:rgba(223,34,37,.24);color:#ff8a80;}
.tbp-btn{width:100%;padding:11px;background:var(--bg-sidebar);color:#fff;border:none;border-radius:9px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;transition:all .18s!important;}
.tbp-btn:hover{opacity:.9;transform:translateY(-1px);}
.tbp-pop .tbp-btn{background:var(--ck-red);}
@media(max-width:640px){.tbp-grid{grid-template-columns:1fr;}}

/* Panel de foto — solo en pantallas anchas, el login mobile se queda a una
   sola columna (el visual no aporta nada en un teléfono). */
.login-visual{position:relative;flex:1.3;overflow:hidden;display:none;background:#0d1520;}
@media(min-width:900px){.login-visual{display:block;}}
/* Fundido lento (2.6s) + zoom tipo "Ken Burns" mientras la foto está
   activa — no es un corte seco, se siente con movimiento.
   Ojo: la regla global de arriba (*,*::before,*::after{transition-duration:
   .06s !important}) le gana a esto por !important salvo que se la
   contrarreste con otra regla !important más específica — de ahí la
   segunda línea de abajo. Sin ella, el carrusel de fotos del login corta
   en 60ms en vez de los 2.6s/7s que se ven, por ejemplo, en el login de
   portal_arrendador.html (que no carga este styles.css compartido y por
   eso nunca tuvo el problema). */
.login-visual-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity 2.6s ease,transform 7s ease;}
.login-visual-slide{transition-duration:2.6s,7s!important;}
.login-visual-slide.active{opacity:1;transform:scale(1);}
.login-visual-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,17,.12) 0%,rgba(6,10,17,0) 22%,rgba(6,10,17,0) 70%,rgba(6,10,17,.55) 100%);}
.login-visual-dots{position:absolute;left:32px;bottom:32px;display:flex;gap:6px;z-index:2;}
.login-visual-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .3s,width .3s;display:block;}
.login-visual-dots span.active{background:#fff;width:20px;border-radius:3px;}
.login-security-pill{position:absolute;right:32px;bottom:30px;display:flex;align-items:center;gap:9px;background:rgba(10,16,26,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:12.5px;font-weight:500;padding:11px 18px;border-radius:99px;z-index:2;}

/* ── Login · tarjeta "Indicadores del día" (esquina sup. izq. del panel visual) ──
   Se rellena desde mindicador.cl (UF, dólar, UTM) y, cuando exista la tabla
   indicadores_tasas en Supabase, también la TAB UF 360. Arranca [hidden];
   el script la muestra solo si logró cargar al menos un dato.
   Nota: la regla global *{animation-duration:.1s!important} (línea ~15) obliga a
   re-declarar cada animation-duration con !important, igual que .login-visual-slide. */
.lgi-card{
  position:absolute;right:32px;bottom:86px;z-index:3;width:270px;
  background:rgba(12,19,33,.60);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px 16px 13px;color:#fff;
  box-shadow:0 18px 46px rgba(3,7,15,.4), inset 0 1px 0 rgba(255,255,255,.06);
  animation:lgi-in .55s cubic-bezier(.2,.7,.2,1) both;animation-duration:.55s!important;
}
.lgi-card[hidden]{display:none;}
.lgi-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.lgi-title{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:700;font-size:13px;letter-spacing:.01em;}
.lgi-date{font-size:11px;font-weight:500;color:rgba(255,255,255,.46);text-transform:capitalize;font-variant-numeric:tabular-nums;}
.lgi-live{display:flex;align-items:center;gap:6px;margin:5px 0 11px;}
.lgi-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;animation:lgi-pulse 2.2s ease-out infinite;animation-duration:2.2s!important;}
.lgi-live>span:not(.lgi-dot){font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.52);}
.lgi-live .lgi-src{letter-spacing:.02em;text-transform:none;font-weight:500;color:rgba(255,255,255,.34);}
.lgi-list{display:flex;flex-direction:column;gap:11px;padding-top:11px;border-top:1px solid rgba(255,255,255,.1);}
.lgi-row{animation:lgi-rise .5s cubic-bezier(.2,.7,.2,1) both;animation-duration:.5s!important;}
.lgi-row:nth-child(1){animation-delay:.16s}
.lgi-row:nth-child(2){animation-delay:.24s}
.lgi-row:nth-child(3){animation-delay:.32s}
.lgi-row:nth-child(4){animation-delay:.40s}
.lgi-row-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px;}
.lgi-label{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.lgi-delta{font-size:10px;font-weight:700;padding:2px 6px;border-radius:99px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.lgi-delta.up{color:#4ade80;background:rgba(74,222,128,.14);}
.lgi-delta.down{color:#f87171;background:rgba(248,113,113,.14);}
.lgi-delta.flat{color:rgba(255,255,255,.5);background:rgba(255,255,255,.08);}
.lgi-row-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;}
.lgi-val{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:800;font-size:15.5px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1;}
.lgi-spark{width:76px;height:24px;flex-shrink:0;overflow:visible;}
.lgi-spark-line{stroke-dasharray:170;stroke-dashoffset:170;animation:lgi-draw 1s ease .5s forwards;animation-duration:1s!important;}
.lgi-spark-dot{transform:scale(0);transform-origin:center;transform-box:fill-box;animation:lgi-pop .35s ease 1.35s forwards;animation-duration:.35s!important;}
.lgi-foot{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);font-size:10px;font-weight:500;color:rgba(255,255,255,.42);font-variant-numeric:tabular-nums;display:flex;gap:9px;align-items:center;}
.lgi-foot[hidden]{display:none;}
.lgi-foot .lgi-sep{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.25);}
@keyframes lgi-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes lgi-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes lgi-draw{to{stroke-dashoffset:0}}
@keyframes lgi-pop{to{transform:scale(1)}}
@keyframes lgi-pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.45)}70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
@media(min-width:900px) and (max-width:1080px){
  .lgi-card{width:238px;right:24px;bottom:78px;padding:14px;}
}
@media (prefers-reduced-motion:reduce){
  .lgi-card,.lgi-row{animation:none!important;opacity:1!important;transform:none!important;}
  .lgi-spark-line{stroke-dashoffset:0!important;animation:none!important;}
  .lgi-spark-dot{transform:scale(1)!important;animation:none!important;}
  .lgi-dot{animation:none!important;}
}

.login-header{background:var(--bg-sidebar);padding:28px 30px;display:flex;align-items:center;gap:14px;}
.login-logo-icon{width:40px;height:40px;background:rgba(255,255,255,0.1);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.login-branding{flex:1;}
.login-logo-text{font-family:'Sora',sans-serif;font-size:24px;font-weight:300;color:#fff;letter-spacing:.02em;}
.login-logo-text em{font-style:normal;color:#e05a49;}
.login-role{font-size:11px;color:rgba(255,255,255,.3);margin-top:3px;text-transform:uppercase;letter-spacing:.07em;}
.login-body{padding:28px 30px 32px;}
.login-body h2{font-size:16px;font-weight:700;margin-bottom:20px;}
.login-field{margin-bottom:14px;}
.login-field label{display:block;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;}
.login-input{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius-md);font-size:13px;font-family:inherit;color:var(--text-primary);outline:none;background:white;transition:all .20s cubic-bezier(0.4, 0, 0.2, 1);}
.login-input:focus{border-color:var(--ck-navy);box-shadow:0 0 0 3px rgba(26,43,64,.07);}
.login-input.error{border-color:#c0392b;}
.login-error-msg{font-size:12px;color:#c0392b;margin-top:5px;display:none;}
.login-btn{width:100%;padding:12px;background:var(--ck-red);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .20s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:var(--shadow-sm);}
.login-btn:hover:not(:disabled){box-shadow:var(--shadow-md);transform:translateY(-1px);}
.login-btn:active:not(:disabled){transform:scale(0.98);}
.login-btn:disabled{opacity:.5;cursor:not-allowed;}
.login-btn-google{background:var(--bg-surface)!important;color:var(--text-primary)!important;border:1.5px solid var(--border)!important;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;box-shadow:none!important;}
.login-btn-google:hover{background:var(--border)!important;}
.login-forgot{display:block;text-align:center;font-size:12px;color:var(--text-muted);margin-top:12px;cursor:pointer;text-decoration:underline;}
.prorrateo-box{background:linear-gradient(135deg,#3f5ec2 0%,#2d4a6e 100%)!important;border-radius:8px!important;padding:18px 22px!important;text-align:center!important;margin:12px 0!important;box-shadow:0 4px 16px rgba(63,94,194,0.25)!important;}
.prorrateo-box .p-label{font-size:11px!important;font-weight:700!important;text-transform:uppercase!important;color:rgba(255,255,255,0.7)!important;margin-bottom:8px!important;}
.prorrateo-box .p-value{font-size:28px!important;font-weight:800!important;color:#fff!important;}
.prorrateo-box .text-muted{color:rgba(255,255,255,0.5)!important;}


#repositorio.active, #mensajes.active { display:block !important; min-height:200px !important; }

/* ── Módulo Contratos (scope: #contratos-section) ── */

#contratos-section {
  --azul: #1A2B40; --rojo: #df2225; --gris: #F2F5F8;
  --borde: #DDE3EA; --text-sec: #6B7A8D;
  --green: #0D7A4E; --green-bg: #E8F5EE; --white: #fff;
  --gold: #C8960C;
}
#contratos-section { box-sizing: border-box; margin: 0; padding: 0; }
#contratos-section { font-family: inherit; background: var(--gris); color: var(--azul); min-height: 100vh; }

/* ── HEADER ── */
#contratos-section .hdr { background: var(--bg-surface,#fff); padding: 0; display: block; border-bottom: none; position: sticky; top: 0; z-index: 100; }
#contratos-section .logo { display: none; }
#contratos-section .hdr-sub { display: none; }
#contratos-section .hdr-right { display: flex; gap: 10px; }

/* ── SCREENS ── */
#contratos-section .screen { display: none; }
#contratos-section .screen.active { display: block; }

/* ── HOME ── */
#contratos-section .home-wrap { max-width: 980px; margin: 0 auto; padding: 36px; }
#contratos-section .home-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }
#contratos-section .home-title { font-size: 20px; font-weight: 900; }
#contratos-section .home-title span { color: var(--text-sec); font-size: 14px; font-weight: 400; margin-left: 8px; }
#contratos-section .new-btns { display: flex; gap: 10px; }
#contratos-section .btn-new { display: flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; border: none; font-family: inherit; transition: all 0.18s; }
#contratos-section .btn-new:hover { transform: translateY(-1px); opacity: 0.9; }
#contratos-section .btn-arr { background: var(--azul); color: #fff; }
#contratos-section .btn-ven { background: var(--rojo); color: #fff; }
#contratos-section .plus { font-size: 18px; font-weight: 900; line-height: 1; }

/* ── OP CARDS ── */
#contratos-section .op-grid { background: var(--white); border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
#contratos-section .op-table { width: 100%; border-collapse: collapse; font-size: 12px; }
#contratos-section .op-table thead tr { background: var(--gris); }
#contratos-section .op-table th { text-align: left; padding: 8px 14px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-sec); border-bottom: 1px solid var(--borde); }
#contratos-section .op-table td { padding: 9px 14px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
#contratos-section .op-table tbody tr:last-child td { border-bottom: none; }
#contratos-section .op-table tbody tr { cursor: pointer; transition: background .13s; }
#contratos-section .op-table tbody tr:hover { background: var(--gris); }
#contratos-section .op-card { background: var(--white); border: 1px solid var(--borde); border-radius: 10px; padding: 18px 22px; display: flex; align-items: center; gap: 16px; cursor: pointer; transition: all 0.18s; }
#contratos-section .op-card:hover { border-color: var(--borde); box-shadow: 0 4px 16px rgba(0,0,0,0.07); transform: translateY(-1px); }
#contratos-section .op-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 3px 9px; border-radius: 20px; flex-shrink: 0; }
#contratos-section .op-badge.arr { background: #E6EEF6; color: var(--azul); }
#contratos-section .op-badge.ven { background: #FDECEA; color: #991515; }
#contratos-section .op-badge.mandato { background: var(--bank-blue-soft); color: var(--bank-blue); }
#contratos-section .op-info { flex: 1; }
#contratos-section .op-dir { font-size: 14px; font-weight: 700; }
#contratos-section .op-meta { font-size: 11px; color: var(--text-sec); margin-top: 3px; }
#contratos-section .op-prog { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
#contratos-section .op-pct { font-size: 13px; font-weight: 700; color: var(--azul); min-width: 36px; text-align: right; }
#contratos-section .mini-track { width: 80px; height: 5px; background: var(--gris); border-radius: 3px; }
#contratos-section .mini-bar { height: 5px; border-radius: 3px; background: var(--green); transition: width 0.4s; }
#contratos-section .op-del { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 14px; color: var(--text-sec); background: transparent; transition: all 0.15s; border: none; cursor: pointer; font-family: inherit; }
#contratos-section .op-del:hover { background: #FDECEA; color: var(--rojo); }

#contratos-section .empty-state { text-align: center; padding: 80px 20px; color: var(--text-sec); }
#contratos-section .empty-icon { font-size: 48px; opacity: 0.25; margin-bottom: 16px; }
#contratos-section .empty-state h3 { font-size: 16px; font-weight: 700; color: var(--azul); margin-bottom: 8px; }
#contratos-section .empty-state p { font-size: 12px; line-height: 1.7; }

/* ── OPERACIÓN DETAIL ── */
#contratos-section .op-wrap { max-width: 980px; margin: 0 auto; padding: 28px 36px; }

/* breadcrumb */
#contratos-section .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-sec); margin-bottom: 22px; cursor: pointer; }
#contratos-section .breadcrumb:hover .bc-home { color: var(--azul); }
#contratos-section .bc-arr { color: 9px; }

/* op header bar */
#contratos-section .op-hdr { background: var(--white); border: 1px solid var(--borde); border-radius: 10px; padding: 18px 22px; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
#contratos-section .op-hdr-left h2 { font-size: 17px; font-weight: 900; }
#contratos-section .op-hdr-left p { font-size: 11px; color: var(--text-sec); margin-top: 4px; }
#contratos-section .op-hdr-prog { display: flex; align-items: center; gap: 12px; }
#contratos-section .prog-ring-wrap { position: relative; width: 52px; height: 52px; }
#contratos-section .prog-ring-wrap svg { transform: rotate(-90deg); }
#contratos-section .prog-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }

/* stats row */
#contratos-section .stats { display: flex; gap: 10px; margin-bottom: 24px; }
#contratos-section .stat { flex: 1; background: var(--white); border: 1px solid var(--borde); border-radius: 8px; padding: 12px 14px; }
#contratos-section .stat-n { font-size: 20px; font-weight: 900; }
#contratos-section .stat-l { font-size: 10px; color: var(--text-sec); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }

/* type selector */
#contratos-section .sel-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-sec); margin-bottom: 10px; }
#contratos-section .type-cards { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
#contratos-section .type-card { flex: 1; min-width: 150px; background: var(--white); border: 2px solid var(--borde); border-radius: 10px; padding: 16px 18px; cursor: pointer; transition: all 0.18s; user-select: none; }
#contratos-section .type-card:hover { border-color: var(--azul); transform: translateY(-1px); }
#contratos-section .type-card.selected { border-color: var(--azul); background: var(--azul); color: #fff; }
#contratos-section .tc-icon { font-size: 18px; margin-bottom: 5px; color: var(--azul); transition: color .18s; }
#contratos-section .type-card.selected .tc-icon { color: #fff; }
#contratos-section .tc-name { font-size: 12px; font-weight: 700; color: var(--azul); line-height: 1.3; }
#contratos-section .type-card.selected .tc-name { color: #fff; }
#contratos-section .tc-desc { font-size: 10px; color: var(--text-sec); line-height: 1.4; margin-top: 3px; }
#contratos-section .type-card.selected .tc-desc { color: rgba(255,255,255,0.55); }

/* pills */
#contratos-section .nav-pills { display: flex; gap: 6px; margin-bottom: 22px; flex-wrap: wrap; }
#contratos-section .pill { padding: 7px 16px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; background: var(--white); border: 1.5px solid var(--borde); color: var(--text-sec); cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 6px; }
#contratos-section .pill:hover { border-color: var(--azul); color: var(--azul); }
#contratos-section .pill.active { background: var(--azul); color: #fff; border-color: var(--azul); }
#contratos-section .pbadge { font-size: 9px; padding: 1px 5px; border-radius: 8px; background: rgba(255,255,255,0.2); }
#contratos-section .pill:not(.active) .pbadge { background: var(--gris); color: var(--azul); }

/* section */
#contratos-section .section { margin-bottom: 22px; animation: fi 0.2s ease; }
@keyframes fi { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
#contratos-section .sec-hdr { background: var(--azul); color: #fff; padding: 9px 15px; border-radius: 6px 6px 0 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; display: flex; justify-content: space-between; align-items: center; }
#contratos-section .sec-cnt { opacity: 0.5; font-weight: 400; font-size: 11px; }
#contratos-section .items-list { background: var(--white); border: 1px solid var(--borde); border-top: none; border-radius: 0 0 6px 6px; overflow: hidden; }
#contratos-section .chk-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--borde); cursor: pointer; transition: background 0.12s; }
#contratos-section .chk-item:last-child { border-bottom: none; }
#contratos-section .chk-item:hover { background: #fafbfc; }
#contratos-section .chk-item.checked { background: var(--green-bg); }
#contratos-section .cb { width: 18px; height: 18px; flex-shrink: 0; border: 2px solid var(--borde); border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; margin-top: 1px; }
#contratos-section .chk-item.checked .cb { background: var(--green); border-color: var(--green); }
#contratos-section .ck { display: none; color: #fff; align-items: center; justify-content: center; }
#contratos-section .chk-item.checked .ck { display: flex; }
#contratos-section .ib { flex: 1; }
#contratos-section .il { font-size: 12px; font-weight: 600; color: var(--azul); line-height: 1.4; }
#contratos-section .chk-item.checked .il { color: var(--green); }
#contratos-section .is { font-size: 10px; color: var(--text-sec); margin-top: 2px; line-height: 1.5; }
#contratos-section .tag { display: inline-block; font-size: 8px; font-weight: 700; text-transform: uppercase; padding: 2px 5px; border-radius: 20px; margin-left: 4px; vertical-align: middle; }
#contratos-section .tr { background: #FDECEA; color: #991515; }
#contratos-section .tb { background: #E6F1FB; color: #0C447C; }
#contratos-section .tg { background: #EEF1F5; color: #445566; }
#contratos-section .na-btn { display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; padding: 2px 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border: 1.5px solid var(--borde); border-radius: 20px; color: var(--text-sec); background: var(--white); cursor: pointer; vertical-align: middle; transition: all 0.15s; font-family: inherit; line-height: 1; }
#contratos-section .na-btn:hover { border-color: var(--azul); color: var(--azul); }
#contratos-section .chk-item.na .na-btn { background: #F4F7F9; border-color: #94A3B8; color: #445566; font-style: italic; }
#contratos-section .chk-item.na .cb { background: #94A3B8; border-color: #94A3B8; }
#contratos-section .chk-item.na .ck { display: flex; }
#contratos-section .chk-item.na .ck svg { width: 8px; height: 8px; }
#contratos-section .chk-item.na .il { color: #94A3B8; text-decoration: line-through; }

/* ── FORM SECTION ── */
#contratos-section .form-block { background: var(--white); border: 1px solid var(--borde); border-radius: 6px; overflow: hidden; margin-bottom: 22px; animation: fi 0.2s ease; }
#contratos-section .form-hdr { background: var(--azul); color: #fff; padding: 9px 15px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; }
#contratos-section .form-body { padding: 20px; }
#contratos-section .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 14px; }
#contratos-section .form-row:last-child { margin-bottom: 0; }
#contratos-section .form-field { display: flex; flex-direction: column; gap: 5px; }
#contratos-section .form-field.full { grid-column: 1 / -1; }
#contratos-section .fl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-sec); }
#contratos-section .fi { background: var(--gris); border: 1.5px solid var(--borde); border-radius: 6px; padding: 9px 12px; font-size: 13px; font-family: inherit; color: var(--azul); outline: none; transition: border-color 0.15s; width: 100%; }
#contratos-section .fi:focus { border-color: var(--azul); background:var(--bg-surface); }
#contratos-section select.fi { cursor: pointer; }
#contratos-section textarea.fi { resize: vertical; min-height: 72px; line-height: 1.5; }

/* nota */
#contratos-section .nota { font-size: 10px; color: var(--text-sec); background: var(--white); border: 1px solid var(--borde); border-radius: 6px; padding: 10px 14px; margin-bottom: 18px; line-height: 1.6; }
#contratos-section .nota strong { color: var(--azul); }

/* placeholder */
#contratos-section .ph { text-align: center; padding: 50px 20px; color: var(--text-sec); }
#contratos-section .ph-icon { font-size: 36px; opacity: 0.3; margin-bottom: 12px; }
#contratos-section .ph h3 { font-size: 14px; font-weight: 700; color: var(--azul); margin-bottom: 6px; }
#contratos-section .ph p { font-size: 11px; line-height: 1.6; }

/* actions */
#contratos-section .actions { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; flex-wrap: wrap; gap: 10px; }
#contratos-section .act-right { display: flex; gap: 10px; }
#contratos-section .btn { padding: 10px 20px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; border: none; font-family: inherit; transition: all 0.15s; }
#contratos-section .btn:hover { opacity: 0.85; }
#contratos-section .btn-primary { background: var(--azul); color: #fff; }
#contratos-section .btn-danger { background: transparent; color: #991515; border: 1.5px solid #FDECEA; }
#contratos-section .btn-outline { background: transparent; color: var(--text-sec); border: 1.5px solid var(--borde); }

/* confirm modal */
#contratos-section .modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200; display: none; align-items: center; justify-content: center; }
#contratos-section .modal-bg.open { display: flex; }
#contratos-section .modal-box { background: var(--white); border-radius: 8px; padding: 28px; max-width: 380px; width: 90%; text-align: center; }
#contratos-section .modal h3 { font-size: 16px; font-weight: 900; margin-bottom: 8px; }
#contratos-section .modal p { font-size: 12px; color: var(--text-sec); line-height: 1.6; margin-bottom: 20px; }
#contratos-section .modal-btns { display: flex; gap: 8px; justify-content: flex-end; }

@media (max-width: 600px) {
  .hdr, .home-wrap, .op-wrap { padding-left: 16px; padding-right: 16px; }
  .stats { flex-wrap: wrap; }
  .form-row { grid-template-columns: 1fr; }
  .mini-track { width: 50px; }
}
@media print {
  /* Ocultar todo — mostrar solo la pantalla activa */
  body > * { display: none !important; }
  body { background:var(--bg-surface); margin: 0; padding: 0; }

  /* Revelar cadena de ancestros de #screen-print */
  #main-app,
  .main-content,
  #view-container,
  #contratos,
  #contratos-section { display: block !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; background:var(--bg-surface) !important; min-height: unset !important; }
  .sidebar, .top-header, #view-title, .hdr, .hdr-right { display: none !important; }
  #contratos-section .screen { display: none !important; }

  /* Mostrar solo la pantalla activa — cada pantalla solo se imprime cuando está activa */
  #screen-print.active { display: block !important; }
  #screen-print.active > * { font-size: 11px; padding: 20px; }

  /* Pantalla de contrato de arriendo */
  #screen-contrato.active { display: block !important; }
  #screen-contrato.active > div > div:first-child { display: none !important; }
  #screen-contrato.active #contrato-html { border: none !important; padding: 0 !important; box-shadow: none !important; }
  #contrato-html, #contrato-html * {
    font-family: 'Century Gothic', 'Trebuchet MS', Calibri, sans-serif !important;
    font-size: 10pt !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #contrato-html h1 { font-size: 12pt !important; }

  /* Pantalla de mandato de administración */
  #screen-mandato.active { display: block !important; }
  #screen-mandato.active > div > div:first-child { display: none !important; }
  #screen-mandato.active #mandato-html { border: none !important; padding: 0 !important; box-shadow: none !important; }
  #mandato-html, #mandato-html * {
    font-family: 'Century Gothic', 'Trebuchet MS', Calibri, sans-serif !important;
    font-size: 10pt !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #mandato-html h1 { font-size: 12pt !important; }

  /* Pantalla de promesa de compraventa */
  #screen-promesa.active { display: block !important; }
  #screen-promesa.active > div > div:first-child { display: none !important; }
  #screen-promesa.active #promesa-html { border: none !important; padding: 0 !important; box-shadow: none !important; }
  #promesa-html, #promesa-html * {
    font-family: 'Century Gothic', 'Trebuchet MS', Calibri, sans-serif !important;
    font-size: 10pt !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #promesa-html .ph-logo-header img { max-width: 130px !important; max-height: 65px !important; }
  #promesa-html .ph-logo-wrap > thead td { padding-bottom: 6px; }
  #promesa-html .ph-gantt, #promesa-html .ph-gantt * { font-size: 6.5pt !important; }
  #promesa-html .ph-gantt-note, #promesa-html .ph-gantt-note * { font-size: 7pt !important; }

  /* Estilos de checklists y formularios para #screen-print */
  .p-sec-hdr { background: #1A2B40 !important; color: white !important; padding: 8px 14px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; border-radius: 6px 6px 0 0; display: flex; justify-content: space-between; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .p-items { border: 1px solid #DDE3EA; border-top: none; border-radius: 0 0 6px 6px; margin-bottom: 16px; }
  .p-item { display: flex; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #DDE3EA; font-size: 11px; align-items: flex-start; }
  .p-item:last-child { border-bottom: none; }
  .p-item.done { background: #E8F5EE; }
  .p-cb { width: 14px; height: 14px; border: 2px solid #DDE3EA; border-radius: 3px; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; }
  .p-item.done .p-cb { background: #0D7A4E; border-color: #0D7A4E; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .p-ck { color: white; font-size: 9px; font-weight: 900; }
  .p-label { font-size: 12px; font-weight: 600; color: #1A2B40; }
  .p-item.done .p-label { color: #0D7A4E; }
  .p-item.na .p-cb { background: #94A3B8 !important; border-color: #94A3B8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .p-item.na .p-label { color: #94A3B8; text-decoration: line-through; }
  .p-sub { font-size: 10px; color: #6B7A8D; margin-top: 2px; }
  .p-form-hdr { background: #1A2B40 !important; color: white !important; padding: 8px 14px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; -webkit-print-color-adjust: exact; print-color-adjust: exact; border-radius: 6px 6px 0 0; }
  .p-form-body { border: 1px solid #DDE3EA; border-top: none; border-radius: 0 0 6px 6px; padding: 12px 14px; margin-bottom: 16px; }
  .p-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
  .p-form-field { display: flex; flex-direction: column; gap: 3px; }
  .p-form-field.full { grid-column: 1 / -1; }
  .p-fl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #6B7A8D; }
  .p-fv { font-size: 12px; color: #1A2B40; font-weight: 600; border-bottom: 1px solid #DDE3EA; padding-bottom: 3px; min-height: 18px; }
  .p-block { page-break-inside: avoid; margin-bottom: 8px; }
  .p-title { font-size: 18px; font-weight: 900; color: #1A2B40; margin-bottom: 4px; }
  .p-meta { font-size: 11px; color: #6B7A8D; margin-bottom: 20px; border-bottom: 3px solid #1A2B40; padding-bottom: 10px; }
  .p-nota { font-size: 10px; color: #6B7A8D; background: #f7f8fa; border-radius: 6px; padding: 8px 12px; margin: 8px 0 16px; line-height: 1.5; }
  .p-nota strong { color: #1A2B40; }
}

/* ── NUMERACIÓN ÍTEMS ── */
#contratos-section .items-list { counter-reset: sec-counter; }
#contratos-section .chk-item { counter-increment: sec-counter; }
#contratos-section .item-num { flex-shrink: 0; min-width: 28px; font-size: 11px; font-weight: 700; color: var(--text-sec); padding-top: 1px; }
#contratos-section .sec-hdr-num { font-size: 22px; font-weight: 900; color: rgba(255,255,255,0.35); margin-right: 10px; line-height: 1; }


/* ── SELECTOR RESPALDO ── */
#contratos-section .respaldo-btn {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px; border-radius: 8px; border: 2px solid var(--borde);
  background: var(--gris); cursor: pointer;
  text-align: left; transition: all 0.18s; user-select: none;
}
#contratos-section .respaldo-btn:hover { border-color: var(--azul); background:var(--bg-surface); }
#contratos-section .respaldo-btn.selected { border-color: var(--azul); background: var(--azul); }
#contratos-section .rbtn-icon { font-size: 20px; line-height: 1; }
#contratos-section .rbtn-label { font-size: 12px; font-weight: 700; color: var(--azul); }
#contratos-section .respaldo-btn.selected .rbtn-label { color: #fff; }

/* ── MODAL TIPO CONTRATO ── */
#contratos-section .tipo-contrato-btn {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; border-radius: 10px; border: 2px solid var(--borde);
  background: var(--gris); cursor: pointer; text-align: left;
  transition: all 0.18s; width: 100%; font-family: inherit;
}
#contratos-section .tipo-contrato-btn:hover { border-color: var(--azul); background:var(--bg-surface); transform: translateY(-1px); }
#contratos-section .tipo-contrato-btn.tc-adm .tcb-icon { color: #0D7A4E; }
#contratos-section .tipo-contrato-btn.tc-cod .tcb-icon { color: var(--azul); }
#contratos-section .tipo-contrato-btn.tc-dbl .tcb-icon { color: var(--yellow); }
#contratos-section .tcb-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; color: var(--text-sec); }
#contratos-section .tcb-title { font-size: 13px; font-weight: 700; color: var(--azul); }
#contratos-section .tcb-desc { font-size: 10px; color: var(--text-sec); margin-top: 3px; line-height: 1.4; }

/* ── CONTRATO ── */
#contratos-section #contrato-html {
  font-family: 'Century Gothic', 'Trebuchet MS', 'Gill Sans', Calibri, sans-serif;
  font-size: 10pt;
  line-height: 1.6;
}
#contratos-section #contrato-html h1 {
  font-size: 12pt;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  margin: 0 0 24px;
  font-family: 'Century Gothic', 'Trebuchet MS', Calibri, sans-serif;
}
#contratos-section #contrato-html p { margin: 0 0 10px; text-align: justify; font-size: 10pt; }
#contratos-section #contrato-html ul { margin: 0 0 10px 24px; }
#contratos-section #contrato-html li { margin-bottom: 6px; font-size: 10pt; text-align: justify; }
#contratos-section #contrato-html em { font-size: 9.5pt; }
#contratos-section #contrato-html .dato { background: #FFF8E1; border-bottom: 1.5px solid #C8960C; padding: 0 2px; font-weight: 600; color: #1A2B40; }
#contratos-section #contrato-html .dato.vacio { background: #FDECEA; border-bottom-color: #df2225; color: #991515; font-style: italic; }
#contratos-section #contrato-html .firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 70px; }
#contratos-section #contrato-html .firma-box { text-align: center; }
#contratos-section #contrato-html .firma-line { border-top: 1.5px solid #111; margin-bottom: 8px; }
#contratos-section #contrato-html .firma-nombre { font-size: 10pt; font-weight: 700; text-transform: uppercase; }
#contratos-section #contrato-html .firma-rol { font-size: 9pt; }

#contratos-section #promesa-html {
  font-family: 'Century Gothic', 'Trebuchet MS', Calibri, sans-serif;
  font-size: 10pt;
  line-height: 1.7;
  color: #111;
  text-align: justify;
}
#contratos-section #promesa-html .ph-logo-header { text-align: left; margin-bottom: 12px; }
#contratos-section #promesa-html .ph-logo-header img { max-width: 170px; max-height: 85px; object-fit: contain; }
#contratos-section #promesa-html .ph-logo-wrap { width: 100%; border-collapse: collapse; }
#contratos-section #promesa-html .ph-logo-wrap > tbody > tr > td { padding: 0; }
#contratos-section #promesa-html .ph-titulo { text-align: center; font-weight: 700; font-size: 11pt; text-decoration: underline; margin-bottom: 4px; }
#contratos-section #promesa-html .ph-partes-nombre { text-align: center; font-weight: 700; font-size: 10.5pt; margin-bottom: 2px; }
#contratos-section #promesa-html .ph-sep { margin-bottom: 10px; }
#contratos-section #promesa-html p { margin: 0 0 10px; text-align: justify; }
#contratos-section #promesa-html .ph-clausula-num { font-weight: 700; }
#contratos-section #promesa-html .ph-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 80px; }
#contratos-section #promesa-html .ph-firma-box { text-align: center; }
#contratos-section #promesa-html .ph-firma-line { border-top: 1.5px solid #111; margin-bottom: 8px; }
#contratos-section #promesa-html .ph-firma-nombre { font-weight: 700; text-transform: uppercase; font-size: 10pt; }
#contratos-section #promesa-html .ph-firma-rol { font-size: 9pt; }

/* ── DARK MODE — CONTRATOS ── */
body.dark-mode #contratos-section { background: var(--bg-app); color: var(--text-primary); }
body.dark-mode #contratos-section .hdr { background: var(--bg-surface) !important; border-bottom-color: var(--border) !important; }
body.dark-mode #contratos-section .op-card { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); }
body.dark-mode #contratos-section .op-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.3); border-color: var(--border); }
body.dark-mode #contratos-section .op-dir { color: var(--text-primary); }
body.dark-mode #contratos-section .op-meta { color: var(--text-secondary); }
body.dark-mode #contratos-section .op-badge.arr { background: rgba(30,95,168,.15); color: #58a6ff; }
body.dark-mode #contratos-section .op-badge.ven { background: rgba(223,34,37,.15); color: #f06a6a; }
body.dark-mode #contratos-section .op-pct { color: #58a6ff; }
body.dark-mode #contratos-section .mini-track { background: var(--border); }
body.dark-mode #contratos-section .mini-bar { background: #58a6ff; }
body.dark-mode #contratos-section .screen { background: var(--bg-app); }
body.dark-mode #contratos-section .card { background: var(--bg-surface); border-color: var(--border); }
body.dark-mode #contratos-section .tab-nav { background: var(--bg-surface); border-bottom-color: var(--border); }
body.dark-mode #contratos-section .tab-btn { color: var(--text-secondary); }
body.dark-mode #contratos-section .tab-btn.active { color: var(--text-primary); border-bottom-color: var(--ck-red); }
body.dark-mode #contratos-section input,
body.dark-mode #contratos-section select,
body.dark-mode #contratos-section textarea { background: #0e1116; color: var(--text-primary); border-color: var(--border); }
body.dark-mode #contratos-section label { color: var(--text-secondary); }
body.dark-mode #contratos-section .section-title { color: var(--text-primary); }
body.dark-mode #contratos-section .checklist-item { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); }

/* ── DARK MODE — CONTRATOS (fix de contraste, ver nota) ──
   #contratos-section define su propio sistema de variables (--azul, --gris,
   --borde, --text-sec) heredado del sistema legacy, pensado solo para fondo
   claro. --azul se usa a la vez como color de TEXTO (debe aclararse en modo
   oscuro) y como FONDO de botones/estados activos con texto blanco encima
   (debe mantenerse oscuro, si no el texto blanco desaparece). Por eso se
   redefinen las variables para texto/fondo, y aparte se fijan los fondos de
   botones "activos" que dependían del valor oscuro original de --azul. */
body.dark-mode #contratos-section {
  --azul: var(--text-primary);
  --gris: var(--bg-app);
  --borde: var(--border);
  --text-sec: var(--text-secondary);
  --white: var(--bg-surface);
}
body.dark-mode #contratos-section .btn-arr,
body.dark-mode #contratos-section .type-card.selected,
body.dark-mode #contratos-section .pill.active,
body.dark-mode #contratos-section .btn-primary,
body.dark-mode #contratos-section .respaldo-btn.selected {
  background: var(--ck-navy) !important;
  color: #fff !important;
}
body.dark-mode #contratos-section .type-card.selected .tc-icon,
body.dark-mode #contratos-section .type-card.selected .tc-name,
body.dark-mode #contratos-section .respaldo-btn.selected .rbtn-label {
  color: #fff !important;
}
body.dark-mode #contratos-section .fi:focus,
body.dark-mode #contratos-section .respaldo-btn:hover,
body.dark-mode #contratos-section .tipo-contrato-btn:hover {
  background: var(--bg-app) !important;
}
body.dark-mode #contratos-section .chk-item:hover { background: rgba(255,255,255,.05); }
body.dark-mode #contratos-section .tr { background: rgba(223,34,37,.18); color: #f06a6a; }
body.dark-mode #contratos-section .tb { background: rgba(30,95,168,.18); color: #58a6ff; }
body.dark-mode #contratos-section .tg { background: rgba(255,255,255,.08); color: var(--text-secondary); }
body.dark-mode #contratos-section { --green-bg: rgba(39,119,74,.16); }
body.dark-mode #contratos-section .chk-item.checked .il { color: #4caf7d; }

/* ══════════════════════════════════════════════════════════════════════
   CONTRATOS v2 — misma calma visual que el CRM
   Menos MAYÚSCULAS forzadas y menos tracking; encabezados de sección
   suaves (barra clara con acento a la izquierda) en vez de bandas navy;
   paleta alineada con los tokens de la app. Va al final para ganar
   especificidad sin peleas de !important.
   ══════════════════════════════════════════════════════════════════════ */

/* Paleta: el módulo ya remapea sus vars en dark; acá lo hace también en
   claro, y separa "navy de texto" de "navy de fondo" (--azul se usaba para
   los dos, por eso el texto blanco desaparecía en dark). */
#contratos-section {
  --azul: var(--text-primary);
  --gris: var(--bg-app);
  --borde: var(--border);
  --text-sec: var(--text-secondary);
  --white: var(--bg-surface);
  --azul-bg: var(--ck-navy);   /* fondo de botones/estados activos con texto blanco */
}
#contratos-section .btn-arr,
#contratos-section .type-card.selected,
#contratos-section .pill.active,
#contratos-section .btn-primary,
#contratos-section .respaldo-btn.selected { background: var(--azul-bg); border-color: var(--azul-bg); }

/* Tipografía: fuera las MAYÚSCULAS forzadas y el tracking ancho — igual que
   el CRM, donde no hay uppercase en ningún lado. */
#contratos-section .btn,
#contratos-section .btn-new,
#contratos-section .pill,
#contratos-section .sel-title,
#contratos-section .fl,
#contratos-section .stat-l,
#contratos-section .op-table th,
#contratos-section .op-badge,
#contratos-section .na-btn,
#contratos-section .tag,
#contratos-section .sec-hdr,
#contratos-section .form-hdr { text-transform: none; letter-spacing: .01em; }
#contratos-section .btn,
#contratos-section .btn-new,
#contratos-section .pill { font-weight: 600; }
#contratos-section .fl,
#contratos-section .stat-l,
#contratos-section .sel-title { font-weight: 600; color: var(--text-secondary); }

/* Encabezados de sección: barra clara con acento, no banda navy */
#contratos-section .sec-hdr,
#contratos-section .form-hdr {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  text-transform: none;
  letter-spacing: .02em;
  font-size: 11.5px;
  padding: 10px 14px;
}
#contratos-section .sec-cnt { color: var(--text-secondary); opacity: 1; }
#contratos-section .items-list,
#contratos-section .form-block { border-radius: 0 0 8px 8px; }
#contratos-section .form-block { border-radius: 8px; }

/* Etiquetas pequeñas (.tag / .op-badge): un solo estilo tipo chip del CRM */
#contratos-section .tag,
#contratos-section .op-badge {
  background: var(--bg-app); color: var(--text-secondary);
  border: 1px solid var(--border); font-weight: 600; border-radius: 6px;
}
#contratos-section .op-badge.ven, #contratos-section .tag.tr { background: rgba(223,34,37,.09); color: var(--ck-red); border-color: rgba(223,34,37,.22); }
#contratos-section .op-badge.arr, #contratos-section .tag.tb { background: var(--bg-app); color: var(--text-secondary); border-color: var(--border); }

/* Botón nuevo: coherente con los del resto de la app */
#contratos-section .btn-new { border-radius: 8px; }


/* ── Hover en label de propiedad, modal Invitar Usuario ── */
.inv-prop-label:hover{background:#f0f2f5}

/* ================================================================
   MÓVIL — sidebar como cajón deslizante + header responsive
   El sidebar en desktop vive en el flujo flex de #main-app; en celular
   pasa a position:fixed superpuesto (cajón), controlado por una clase
   propia (.mobile-open) para no pisar la lógica de .collapsed del modo
   ícono-solo de escritorio (mismo botón toggleSidebar(), comportamiento
   distinto según el ancho — ver js/alertas-visitas-plancaptacion.js).
   ================================================================ */
.mobile-menu-btn { display:none; }
#sidebar-backdrop { display:none; }

@media (max-width: 900px) {
  .mobile-menu-btn {
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; flex-shrink:0; margin-right:8px;
    background:none; border:none; color:var(--text-primary); cursor:pointer; border-radius:8px;
  }
  .mobile-menu-btn:hover { background:var(--bg-app); }

  .sidebar {
    position:fixed; top:0; left:0; height:100vh; height:100dvh; z-index:2000;
    width:min(280px, 82vw); min-width:unset;
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:none;
    padding-bottom:calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  .sidebar.mobile-open { transform:translateX(0); box-shadow:12px 0 32px rgba(0,0,0,.25); }
  /* En celular el toggle de adentro del sidebar (modo ícono-solo) no aplica — el cajón es todo o nada */
  .sidebar .sidebar-toggle { display:none; }

  #sidebar-backdrop.show {
    display:block; position:fixed; inset:0; z-index:1999;
    background:rgba(0,0,0,.45);
  }

  .main-content { width:100%; }

  .top-header {
    padding:0 14px; height:auto; min-height:var(--header-height);
    flex-wrap:wrap; gap:8px; padding-top:8px; padding-bottom:8px;
  }
  /* El bloque del título comparte fila con el botón de menú; los controles
     bajan a una fila propia, alineados a la derecha. */
  .top-header > div:nth-of-type(1) { flex:1 1 auto; min-width:0; }
  .header-controls { order:5; width:100%; justify-content:flex-end; flex-wrap:wrap; gap:6px; row-gap:8px; }
  #global-search-wrap { order:10; }
  #global-search-input:focus { width:60vw !important; }
  #uf-header { display:none !important; } /* ya está en el Dashboard, no hace falta duplicarlo en el header angosto */
  #header-username { display:none !important; }
  /* Header compacto: la calculadora queda solo con ícono */
  .header-controls > button[onclick="toggleCalculadora()"] { font-size:0 !important; gap:0 !important; padding:6px 10px !important; }
  .header-controls > button[onclick="toggleCalculadora()"] svg { width:15px; height:15px; }

  /* Todo el layout de la app SIEMPRE va full-width en celular — ya no hay
     desplazamiento por sidebar colapsado (el sidebar es overlay, no ocupa espacio) */
  body:has(.sidebar.collapsed) .modal,
  body:has(.sidebar.mobile-open) .modal { left:0 !important; width:100% !important; }
}

@media (max-width: 600px) {
  .top-header { padding-left:10px; padding-right:10px; }
  .view-title, #view-title { font-size:15px; }
  #view-subtitle { display:none; } /* con poco ancho, prioridad al título */
  .glass-card.p-4, .form-section { padding:14px !important; }
  .kpi-grid { grid-template-columns:1fr !important; }
  table.table, .table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ================================================================
   AJUSTES MÓVIL — index / panel corredor (pase inicial 2026-09-09)
   ================================================================ */
.dash-kpi-row { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
@media (max-width:1180px) { .dash-kpi-row { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px)  { .dash-kpi-row { grid-template-columns:repeat(2,1fr); } }
@media (max-width:430px)  { .dash-kpi-row { grid-template-columns:1fr; } }

@media (max-width: 768px) {
  /* nada de scroll horizontal en el cuerpo */
  html, body { max-width:100%; overflow-x:hidden; }

  /* KPIs extra */
  #dash-kpi-extra-row { grid-template-columns:1fr 1fr !important; }

  /* Los hijos de grids pueden encogerse (si no, el contenido "nowrap" los desborda) */
  .grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > * { min-width:0; }

  /* Centro de Alertas: título y botones se envuelven, sin alto fijo */
  .alerta-centro { min-width:0; }
  .alerta-centro-header { flex-wrap:wrap; gap:10px; }
  .alerta-centro-header > div:last-child { width:100%; display:flex; flex-wrap:wrap; gap:6px; }
  .alerta-centro-header > div:last-child button { flex:1 1 140px; min-width:0; justify-content:center; white-space:normal; }
  #centro-alertas-body { min-height:0 !important; max-height:70vh !important; }

  /* Calculadora / cotizador flotante: dentro de la pantalla */
  #calc-panel { width:min(500px,94vw) !important; left:3vw !important; right:3vw !important; top:64px !important; }

  /* Modales ocupan casi todo el ancho y no se cortan */
  .modal-content, .modal-content.sm, .modal-content.md, .modal-content.xl { width:94% !important; max-width:94% !important; max-height:92vh; }
  .modal-body { padding:16px; }
  .modal-footer { flex-wrap:wrap; }
  .modal-footer .btn { flex:1; }

  /* Grids inline de 3–4 columnas dentro de modales */
  #am-categoria-grid { grid-template-columns:repeat(2,1fr) !important; }

  /* Tablas siempre con scroll propio, nunca empujan la página */
  .table-responsive, .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Filas de acciones (tarjetas, detalle) se envuelven cómodas */
  .adm-card-actions { flex-wrap:wrap; }
  .adm-card-actions .btn { flex:1 1 auto; }

  /* --- Cabeceras de sección: título arriba, acciones abajo, todo se envuelve --- */
  .view-section .flex-between { flex-wrap:wrap; gap:10px; align-items:flex-start; }
  .view-section .flex-between > .flex,
  .view-section .flex-between > div:last-child:not(:first-child) { flex-wrap:wrap; width:100%; }

  /* Selects de filtro: comparten el ancho, nunca lo fuerzan */
  .view-section select,
  .view-section .flex > select { flex:1 1 140px; min-width:0; max-width:100%; }

  /* Filas genéricas de botones / chips se envuelven */
  .view-section .flex.gap-1,
  .view-section .flex.gap-2,
  .view-section .flex.gap-3 { flex-wrap:wrap; }

  /* Botones "Nuevo …" de Contratos */
  #contratos-section .new-btns { flex-wrap:wrap; width:100%; }
  #contratos-section .new-btns .btn-new { flex:1 1 45%; justify-content:center; }

  /* Pestañas tipo CRM / plan: scroll horizontal en vez de romper el layout */
  #cap-tabs, #pc-tabs,
  .view-section .crm-view-tabs,
  .view-section > .glass-card > div:first-child:has(.crm-view-tab) { display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
  .crm-view-tab, .dash-content-tab-btn, .tab-btn { white-space:nowrap; flex-shrink:0; }

  /* --- Tablas: contenedor con scroll propio (lo pone _wrapTablasMovil) --- */
  .tbl-scroll { width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tbl-scroll > table { white-space:nowrap; min-width:max-content; }
  /* Fallback para tablas .table sin envolver */
  .view-section > .glass-card > table.table { display:block; overflow-x:auto; white-space:nowrap; }

  /* --- Tiras de pestañas: scroll horizontal, nunca romper el layout --- */
  .tab-buttons,
  .view-section div:has(> .crm-view-tab),
  .view-section div:has(> .dash-content-tab-btn) {
    overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap;
    scrollbar-width:none;
  }
  .tab-buttons::-webkit-scrollbar,
  .view-section div:has(> .crm-view-tab)::-webkit-scrollbar,
  .view-section div:has(> .dash-content-tab-btn)::-webkit-scrollbar { display:none; }

  /* --- Solicitudes: tabs de filtro con scroll horizontal, nunca se cortan --- */
  #sol-tabs-row { overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; scrollbar-width:none; }
  #sol-tabs-row::-webkit-scrollbar { display:none; }
  #sol-tabs-row button { white-space:nowrap; flex-shrink:0; }
  #solicitudes > div { padding:16px !important; }

  /* --- Mensajes: lista y conversación se turnan la pantalla completa en vez de compartir el ancho ---
     (!important necesario: ambas columnas traen display:flex inline) */
  #mensajes-wrap .chat-thread-col { display:none !important; }
  #mensajes-wrap.chat-activo .chat-list-col { display:none !important; }
  #mensajes-wrap.chat-activo .chat-thread-col { display:flex !important; }
  #mensajes-wrap .chat-list-col { width:100% !important; }
}

@media (max-width: 430px) {
  #dash-kpi-extra-row { grid-template-columns:1fr !important; }
  .view-container { padding:12px 12px; }
  .glass-card.p-4 { padding:12px !important; }
}

/* ================================================================
   TEMA "BANCA PROFESIONAL" — 2026-09-08
   Componentes inspirados en la banca en línea de referencia (capturas
   del usuario), con la paleta EXACTA de esas capturas (--bank-*, ver
   :root). No reemplaza el sistema de diseño de Propset — son clases
   nuevas y aditivas (.bank-*) para ir sumando a medida que se necesiten,
   pensadas para poder pegarse en cualquier sección sin chocar con nada
   existente. Ya aplicadas como demo en: tabs de CRM (Kanban/Pipeline/
   Matching), tabs de filtro de Propiedades, y una tarjeta resumen nueva
   en el Dashboard.
   ================================================================ */

/* 1. PILL-TABS — como "Cuentas | Línea de Crédito | Tarjeta de Crédito".
   Barra lavanda con tabs redondeados; el activo queda blanco+sombra. */
.bank-tabs{display:inline-flex;align-items:center;gap:4px;background:var(--bank-blue-soft);padding:5px;border-radius:12px;flex-wrap:wrap;}
.bank-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:9px;border:none;background:transparent;color:var(--text-secondary);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s ease;white-space:nowrap;}
.bank-tab svg{flex-shrink:0;opacity:.75;}
.bank-tab:hover{color:var(--bank-blue);}
.bank-tab.active{background:#fff;color:var(--bank-blue);box-shadow:0 1px 4px rgba(10,19,48,.15);}
.bank-tab.active svg{opacity:1;}
body.dark-mode .bank-tabs{background:var(--bank-blue-soft);}
body.dark-mode .bank-tab{color:var(--text-secondary);}
/* El fondo blanco de .active es literal (no token) porque en claro debe
   ser blanco puro sí o sí — en oscuro necesita su propio override. */
body.dark-mode .bank-tab.active{background:#1c2330;color:var(--bank-blue);}

/* 2. TARJETA RESUMEN — como el box "Saldo al [fecha]" con el número
   grande + datos en 2 columnas. */
.bank-summary-card{background:var(--bank-blue-soft);border-radius:14px;padding:22px 26px;}
.bank-summary-date{font-size:13px;color:var(--text-primary);font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:6px;}
.bank-summary-label{font-size:12px;color:var(--text-secondary);margin-bottom:4px;}
.bank-summary-value{font-family:var(--font-display);font-size:32px;font-weight:300;color:var(--bank-blue);line-height:1;margin-bottom:18px;}
.bank-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 32px;}
.bank-summary-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text-primary);padding:4px 0;}
.bank-summary-row span:first-child{color:var(--text-secondary);}
.bank-summary-row span:last-child{font-weight:600;}
/* Sin overrides de dark-mode acá — .bank-summary-card/-value ya usan
   var(--bank-blue-soft)/var(--bank-blue), que se redefinen solos en
   body.dark-mode (ver :root). */

/* 2b. BARRA RESUMEN HORIZONTAL — mismo contenido/datos que la tarjeta de
   arriba, pero en una sola fila que ocupa todo el ancho disponible en vez
   de apilarse en una caja angosta. Para secciones con espacio horizontal
   de sobra (ej. CRM). */
.bank-summary-bar{background:var(--bank-blue-soft);border-radius:14px;padding:18px 26px;display:flex;align-items:center;gap:40px;flex-wrap:wrap;width:100%;box-sizing:border-box;}
.bank-summary-bar-main{display:flex;flex-direction:column;flex-shrink:0;}
.bank-summary-bar-main .bank-summary-date{margin-bottom:6px;}
.bank-summary-bar-main .bank-summary-label{margin-bottom:2px;}
.bank-summary-bar-main .bank-summary-value{margin-bottom:0;font-size:28px;}
.bank-summary-bar-stats{display:flex;flex-wrap:wrap;gap:28px 36px;flex:1;}
.bank-summary-stat{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;}
.bank-summary-stat-label{font-size:12px;color:var(--text-secondary);white-space:nowrap;}
.bank-summary-stat-value{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--text-primary);}
@media(max-width:900px){
  .bank-summary-bar{gap:20px;}
  .bank-summary-bar-stats{gap:16px 24px;}
}

/* 3. LISTAS AGRUPADAS — como "CONSULTAR / CONFIGURAR / BLOQUEAR", grilla
   de columnas con título mayúscula gris + links azules debajo. */
.bank-links-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px 40px;}
.bank-links-col-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--bank-label);margin-bottom:14px;}
.bank-links-col a,.bank-links-col button{display:block;background:none;border:none;padding:0;text-align:left;font-family:inherit;font-size:13.5px;color:var(--bank-blue);text-decoration:none;cursor:pointer;margin-bottom:12px;}
.bank-links-col a:hover,.bank-links-col button:hover{text-decoration:underline;}

/* 4. TABLA ESTILO BANCA — headers gris mayúscula, filas limpias, sin
   bordes pesados. Se puede combinar con .table existente (agregar la
   clase bank-table además, o solo esta si es una tabla nueva). */
.bank-table{width:100%;border-collapse:collapse;font-size:13px;}
.bank-table thead th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--bank-label);padding:0 12px 10px;border-bottom:1px solid var(--border);}
.bank-table tbody td{padding:14px 12px;border-bottom:1px solid var(--border-light);color:var(--text-primary);}
.bank-table tbody tr:last-child td{border-bottom:none;}
.bank-table tbody tr:hover td{background:var(--bank-blue-soft);}
.bank-table a{color:var(--bank-blue);text-decoration:none;font-weight:600;}
.bank-table a:hover{text-decoration:underline;}

/* 5. CALLOUT INFORMATIVO — caja celeste con barra izquierda de color +
   ícono, como el aviso de límites de transferencia. */
.bank-callout{display:flex;gap:12px;background:var(--bank-blue-soft);border:1px solid var(--border);border-radius:8px;padding:16px 18px;font-size:13px;color:var(--text-primary);line-height:1.55;}
.bank-callout svg{flex-shrink:0;color:var(--bank-blue);margin-top:1px;}

/* 6. STEPPER / WIZARD — barra de progreso delgada + "PASO X/N" +
   encabezado centrado, como el simulador de crédito hipotecario. */
.bank-stepper{text-align:center;margin-bottom:28px;}
.bank-stepper-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--bank-label);margin-bottom:4px;}
.bank-stepper-title{font-size:13px;font-weight:700;color:var(--text-primary);text-transform:uppercase;letter-spacing:.03em;margin-bottom:14px;}
.bank-stepper-bar{height:5px;background:var(--border-light);border-radius:99px;overflow:hidden;max-width:520px;margin:0 auto 20px;}
.bank-stepper-fill{height:100%;background:var(--bank-blue);border-radius:99px;transition:width .3s ease;}
.bank-stepper-heading{font-size:20px;font-weight:700;color:var(--text-primary);font-family:var(--font-display);}

/* 7. FILA DE BÚSQUEDA + FILTRAR + DESCARGAR */
.bank-search-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.bank-search-box{display:flex;flex:1;min-width:220px;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;}
.bank-search-box input{flex:1;border:none;padding:10px 14px;font-size:13px;font-family:inherit;outline:none;background:var(--bg-surface);color:var(--text-primary);}
.bank-search-box button{background:var(--bank-blue);border:none;padding:0 16px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.bank-filter-pill{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border:1.5px solid var(--bank-blue);border-radius:99px;background:none;color:var(--bank-blue);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;}
.bank-filter-pill:hover{background:var(--bank-blue-soft);}
.bank-download-link{display:inline-flex;align-items:center;gap:6px;color:var(--bank-blue);font-size:12.5px;font-weight:700;text-decoration:underline;cursor:pointer;background:none;border:none;font-family:inherit;margin-left:auto;}

/* 8. PASO NUMERADO CON RADIO — "1  ¿Cuándo deseas...? ( ) Inmediata ( ) Programada" */
.bank-step-row{display:flex;gap:16px;margin-bottom:24px;}
.bank-step-num{width:26px;height:26px;border-radius:50%;background:var(--bank-blue);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.bank-step-body{flex:1;padding-bottom:20px;border-left:2px solid var(--border-light);margin-left:-29px;padding-left:29px;}
.bank-step-question{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:12px;}
.bank-radio-opt{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text-primary);margin-bottom:10px;cursor:pointer;}
.bank-radio-opt input[type=radio]{width:18px;height:18px;accent-color:var(--bank-blue);cursor:pointer;}

/* Reset para clases existentes que también llevan .bank-tab (ej.
   .crm-view-tab traía subrayado rojo — se anula para que solo se vea el
   estilo pill nuevo, sin tener que tocar cada onclick/JS que las usa). */
.crm-view-tab.bank-tab{border-bottom:none;margin-bottom:0;}

/* ================================================================
   TOUR GUIADO (Shepherd.js) — ver js/tour-guiado.js
   Solo reestiliza colores/tipografía para que combine con el tema;
   el layout/posicionamiento de los pasos lo maneja Shepherd. */
.shepherd-element{border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,0.25);font-family:inherit;background:var(--bg-surface);}
.shepherd-text{color:var(--text-primary);font-size:13px;line-height:1.5;}
/* Shepherd trae su propia regla ".shepherd-has-title .shepherd-content
   .shepherd-header{background:#e6e6e6}" con más especificidad que un
   simple ".shepherd-header" — hay que igualar el selector para que
   nuestro azul corporativo le gane, si no el header queda gris con el
   texto blanco encima (0 contraste). */
.shepherd-header,
.shepherd-has-title .shepherd-content .shepherd-header{background:var(--bank-navy);border-radius:12px 12px 0 0;padding:12px 16px;}
.shepherd-title{color:#fff;font-size:14px;font-weight:800;}
.shepherd-cancel-icon,
.shepherd-has-title .shepherd-content .shepherd-cancel-icon{color:rgba(255,255,255,0.7);}
.shepherd-cancel-icon:hover,
.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover{color:#fff;}
.shepherd-footer{padding:0 16px 16px;}
.shepherd-button{font-family:inherit;font-size:12px;font-weight:800;border-radius:8px;padding:8px 14px;background:var(--bank-navy);color:#fff;}
.shepherd-button:not(:disabled):hover{background:var(--bank-navy-dark);color:#fff;}
.shepherd-button-secondary{background:transparent;color:var(--text-secondary);}
.shepherd-button-secondary:not(:disabled):hover{background:var(--gray-light);color:var(--text-primary);}
.shepherd-arrow:before{background:var(--bg-surface);}
/* Triangulito que conecta el header con el elemento cuando el globo
   aparece debajo del target — Shepherd lo pinta gris (#e6e6e6) para que
   combine con su header gris; con el header navy hay que pintarlo navy. */
.shepherd-element.shepherd-has-title[data-popper-placement^="bottom"]>.shepherd-arrow:before{background-color:var(--bank-navy);}
body.dark-mode .shepherd-arrow:before{background:var(--bg-surface);}

/* -- Panel de empresa (dueno / jefes / agentes) - js/panel-empresa.js -- */
.pe-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--bg-surface); border-radius:10px; padding:10px 14px; margin-bottom:1rem; border:1px solid var(--gray-light); box-shadow:0 2px 16px rgba(0,0,0,0.07); }
.pe-crumbs { display:flex; gap:6px; align-items:center; font-size:12px; font-weight:600; color:var(--text-muted); flex:1; min-width:0; }
.pe-crumbs button { border:0; background:none; color:var(--bank-blue); font:inherit; font-weight:700; cursor:pointer; padding:0; }
.pe-crumbs .cur { color:var(--text-primary); }
.pe-kpis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.pe-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:14px; align-items:start; }
.pe-two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:start; }
.pe-track { height:6px; border-radius:99px; background:var(--bg-app); overflow:hidden; min-width:70px; }
.pe-track i { display:block; height:100%; border-radius:99px; background:var(--bank-navy); }
.pe-track.low i { background:var(--ck-red); }
.pe-fun { display:grid; grid-template-columns:132px 1fr 118px; gap:10px; align-items:center; padding:5px 0; }
.pe-fun .t { font-size:12px; font-weight:600; color:var(--text-secondary); }
.pe-fun .b { height:16px; background:var(--bg-app); border-radius:6px; overflow:hidden; display:flex; }
.pe-fun .b i { display:block; height:100%; background:var(--bank-navy); }
.pe-fun .b u { display:block; height:100%; background:var(--ck-red); text-decoration:none; }
.pe-fun .c { text-align:right; font-weight:700; font-size:12px; }
.pe-al { display:grid; grid-template-columns:auto 1fr auto; gap:10px; padding:10px 0; border-bottom:1px solid var(--border-light); align-items:start; }
.pe-al:last-child { border-bottom:none; }
.pe-al .tx { font-size:12.5px; font-weight:600; }
.pe-al .who { color:var(--text-muted); font-size:11px; margin-top:2px; }
.pe-hint { color:var(--text-muted); font-size:11.5px; margin:-4px 0 12px; }
.pe-sm { color:var(--text-muted); font-size:11.5px; }
.pe-nm { font-weight:600; }
.pe-num { text-align:right; }
.pe-click { cursor:pointer; }
.pe-click:hover td { background:rgba(63,94,194,.04); }
.pe-th { cursor:pointer; user-select:none; }
.pe-th:hover { color:var(--bank-navy); }
.pe-empty { color:var(--text-muted); padding:12px 0; font-size:12.5px; }
.pe-form { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pe-form input { flex:1; min-width:180px; height:34px; padding:0 10px; border:1px solid var(--border); border-radius:8px; background:var(--bg-surface); color:var(--text-primary); font-family:inherit; font-size:12.5px; }
.pe-cod { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:4px 0; }
.pe-cod code { font-weight:800; letter-spacing:.04em; background:var(--bank-blue-soft); color:var(--bank-navy); padding:3px 8px; border-radius:6px; }
@media (max-width:1180px) { .pe-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } .pe-grid, .pe-two { grid-template-columns:minmax(0,1fr); } }
@media (max-width:760px)  { .pe-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .pe-fun { grid-template-columns:96px 1fr 96px; } }
.pe-kpis-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1180px) { .pe-kpis-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* -- Panel de empresa: paleta de los graficos y tarjetas con scroll interno -- */
:root { --g-ok:#2a9d8f; --g-low:#e76f6f; --g-parada:#e57373; --g-track:#e8edf3; }
body.dark-mode { --g-track:#2a3340; }
.pe-track { height:8px; background:var(--g-track); }
.pe-track i { background:var(--g-ok); }
.pe-track.low i { background:var(--g-low); }
.pe-fun .b { height:18px; background:var(--g-track); }
.pe-fun .b u { background:var(--g-parada); background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 4px,transparent 4px 8px); }
.pe-sc { max-height:var(--h,320px); overflow-y:auto; overflow-x:auto; padding-right:4px; scrollbar-gutter:stable; }
.pe-sc table thead th { position:sticky; top:0; background:var(--bg-surface); z-index:2; box-shadow:0 1px 0 var(--border); }

/* -- Panel de empresa: periodo, comparacion entre sucursales, glosario -- */
.pe-sec { font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--text-secondary); margin:4px 2px 8px; }
.pe-sec span { font-weight:500; text-transform:none; letter-spacing:0; color:var(--text-muted); margin-left:8px; }
.pe-delta { font-size:10.5px; font-weight:700; margin-left:2px; white-space:nowrap; }
.pe-good { color:#2a9d8f; } .pe-bad { color:#d9534f; } .pe-flat { color:var(--text-muted); }
.pe-mes { height:32px; padding:0 10px; border-radius:8px; border:1.5px solid var(--bank-blue-light); background:var(--bank-blue-soft); color:var(--bank-navy); font-family:inherit; font-weight:800; font-size:12px; cursor:pointer; }
.pe-donut { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.pe-legs { flex:1; min-width:230px; }
.pe-leg { display:grid; grid-template-columns:12px 1fr auto 44px auto; gap:8px; align-items:center; padding:6px 0; border-bottom:1px solid var(--border-light); font-size:12.5px; }
.pe-leg:last-child { border-bottom:none; }
.pe-leg i { width:12px; height:12px; border-radius:4px; display:block; }
.pe-leg .n { font-weight:600; } .pe-leg .v { font-weight:800; text-align:right; } .pe-leg .p { color:var(--text-muted); text-align:right; }
.pe-tabs-wrap { flex-wrap:wrap; }
.pe-rk { display:grid; grid-template-columns:28px 1fr 130px 52px; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--border-light); }
.pe-rk:last-child { border-bottom:none; }
.pe-rk .pos { width:26px; height:26px; border-radius:50%; background:var(--bank-blue-soft); color:var(--bank-navy); font-weight:800; display:flex; align-items:center; justify-content:center; font-size:12px; }
.pe-rk .pt { text-align:right; }
.pe-modal { position:fixed; inset:0; background:rgba(10,18,30,.5); display:flex; align-items:center; justify-content:center; z-index:9500; }
.pe-modal-card { background:var(--bg-surface); border-radius:14px; max-width:720px; width:92%; max-height:86vh; overflow:auto; padding:20px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.pe-gl { padding:9px 0; border-bottom:1px solid var(--border-light); }
.pe-gl:last-child { border-bottom:none; }
.pe-gl .t { font-weight:800; font-size:13px; margin-bottom:2px; }
.pe-gl .d { font-size:12.5px; line-height:1.55; color:var(--text-secondary); }
@media (max-width:760px) { .pe-rk { grid-template-columns:26px 1fr 52px; } .pe-rk .bar { display:none; } .pe-leg { grid-template-columns:12px 1fr auto 40px; } .pe-leg .badge { display:none; } }

/* -- Requiere tu atencion: tarjetas con aire, icono, insignias y filtros -- */
.pe-att-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.pe-att-count { font-size:11px; font-weight:800; background:rgba(231,111,111,.14); color:#c0504d; padding:4px 11px; border-radius:99px; }
.pe-att-tabs { display:flex; gap:6px; flex-wrap:wrap; margin:12px 0 14px; }
.pe-att-tab { border:1px solid var(--border); background:var(--bg-surface); border-radius:99px; padding:6px 13px; font:inherit; font-size:11.5px; font-weight:700; color:var(--text-secondary); cursor:pointer; transition:all .12s; }
.pe-att-tab:hover { border-color:var(--bank-blue-light); color:var(--bank-navy); }
.pe-att-tab.on { background:var(--bank-navy); border-color:var(--bank-navy); color:#fff; }
.pe-att-tab b { margin-left:6px; font-weight:800; opacity:.8; }
.pe-att-list { padding-right:6px; }
.pe-alr { display:grid; grid-template-columns:44px 1fr auto; gap:16px; align-items:center; padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--bg-surface); margin-bottom:12px; transition:box-shadow .15s,border-color .15s; }
.pe-alr:last-child { margin-bottom:2px; }
.pe-alr:hover { border-color:var(--bank-blue-light); box-shadow:0 6px 18px rgba(20,44,86,.09); }
.pe-alr .ic { width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; }
.pe-alr.t-parada .ic { background:rgba(229,115,115,.15); color:#d9534f; }
.pe-alr.t-vencido .ic { background:rgba(59,130,196,.15); color:#2f6fb0; }
.pe-alr.t-inactivo .ic { background:rgba(122,143,214,.18); color:#5a6fc0; }
.pe-alr .top { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pe-alr .who { font-size:13.5px; font-weight:800; color:var(--text-primary); }
.pe-alr .suc { font-size:11.5px; color:var(--text-muted); }
.pe-alr .ttl { font-size:12.5px; margin-top:4px; line-height:1.5; color:var(--text-primary); }
.pe-alr .sub2 { color:var(--text-muted); }
.pe-alr .meta { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.pe-chip { font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:99px; }
.pe-chip.alta { background:rgba(217,83,79,.14); color:#c0392b; }
.pe-chip.media { background:rgba(229,115,115,.14); color:#c25555; }
.pe-chip.tag { background:var(--bg-app); color:var(--text-secondary); }
.pe-att-ok { text-align:center; padding:34px 10px; }
.pe-att-ok .ico { width:54px; height:54px; border-radius:50%; background:rgba(42,157,143,.14); color:#2a9d8f; display:flex; align-items:center; justify-content:center; margin:0 auto 10px; }
.pe-att-ok .t { font-weight:800; font-size:14px; } .pe-att-ok .d { color:var(--text-muted); font-size:12.5px; margin-top:3px; }
@media (max-width:760px) { .pe-alr { grid-template-columns:40px 1fr; gap:12px; padding:14px; } .pe-alr .go { grid-column:1 / -1; } }
.pe-grid > div, .pe-two > div { min-width:0; }

/* -- Panel de empresa: selector de secciones (mismo estilo que las pestañas del Dashboard) -- */
.pe-secnav { display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--gray-light); overflow-x:auto; }
.pe-secnav .dash-content-tab-btn { white-space:nowrap; margin-bottom:-1px; border-bottom:2px solid transparent; }
.pe-secnav .dash-content-tab-btn.active { border-bottom-color:var(--bank-navy); }