/* CSS original de SISTEMA - ASSETX FLEX.html, extraído sin cambios por tools/build_frontend.py */
  :root{
    --bg:#07070b;
    --sidebar-bg:rgba(15,16,30,.96);
    --panel:rgba(255,255,255,.035);
    --panel-hover:rgba(255,255,255,.055);
    --border:rgba(255,255,255,.09);
    --border-strong:rgba(255,255,255,.16);
    --text:#f2f3f7;
    --text-dim:#a7abc2;
    --text-faint:#686c82;
    --cyan:#22d3ee;
    --purple:#7c6cff;
    --gradient:linear-gradient(135deg,#7c6cff 0%,#22d3ee 100%);
    --success:#34d399;
    --danger:#f87171;
    --amber:#facc15;
    --radius-lg:20px;
    --radius-md:14px;
    --radius-sm:10px;
    --shadow-lg:0 24px 60px -24px rgba(0,0,0,.65);
    --sidebar-w:270px;
    --sidebar-w-collapsed:84px;
    --topbar-h:72px;
    --modal-bg:#121319;
  }
  html[data-theme="light"]{
    --bg:#f3f4f8;
    --sidebar-bg:rgba(233,231,250,.92);
    --panel:rgba(15,17,25,.035);
    --panel-hover:rgba(15,17,25,.06);
    --border:rgba(15,17,25,.10);
    --border-strong:rgba(15,17,25,.18);
    --text:#14151d;
    --text-dim:#585c70;
    --text-faint:#8b8fa3;
    --modal-bg:#ffffff;
  }
  *,*::before,*::after{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
    color:var(--text);
    background:
      radial-gradient(1100px 700px at 12% -8%, rgba(124,108,255,.20), transparent 60%),
      radial-gradient(900px 650px at 100% 0%, rgba(34,211,238,.13), transparent 55%),
      var(--bg);
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased;
  }
  html[data-theme="light"] body{
    background:
      radial-gradient(1100px 700px at 12% -8%, rgba(124,108,255,.12), transparent 60%),
      radial-gradient(900px 650px at 100% 0%, rgba(34,211,238,.10), transparent 55%),
      var(--bg);
  }
  ::-webkit-scrollbar{width:9px;height:9px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px;}
  ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22);}
  html[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);}
  button{font-family:inherit;}
  svg{flex-shrink:0;}

  /* ===================== LAYOUT ===================== */
  .app{display:flex; min-height:100vh;}

  .sidebar{
    width:var(--sidebar-w);
    flex-shrink:0;
    background:var(--sidebar-bg);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
    gap:22px;
    padding:22px 16px;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
    transition:width .25s ease, transform .25s ease;
    z-index:40;
  }
  .app.sidebar-collapsed .sidebar{width:var(--sidebar-w-collapsed);}
  .app.sidebar-collapsed .hide-collapsed{display:none !important;}
  .app.sidebar-collapsed .nav-item{justify-content:center; padding:10px;}
  .app.sidebar-collapsed .sidebar-header{align-items:center; gap:8px;}
  .app.sidebar-collapsed .nav-sub{padding-left:10px;}
  .app.sidebar-collapsed .nav-submenu{margin-left:0; border-left:none; padding-left:0;}
  /* Ocultar sidebar POR COMPLETO (distinto de colapsar/minimizar): el
     .main pasa a ocupar el 100% del ancho porque es el único flex-item
     restante dentro de .app. */
  .app.sidebar-hidden .sidebar{display:none;}
  .app.sidebar-hidden .overlay{display:none;}

  .sidebar-header{display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:0 6px;}
  .brand{display:flex; align-items:center; gap:10px; min-width:0;}
  .brand-mark{
    width:34px; height:34px; border-radius:10px; flex-shrink:0;
    background:var(--gradient);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 20px -6px rgba(124,108,255,.55);
  }
  .brand-name{font-weight:800; font-size:1.05rem; letter-spacing:-.02em; white-space:nowrap;}
  .icon-btn{
    width:32px; height:32px; border-radius:9px; border:1px solid var(--border);
    background:var(--panel); color:var(--text-dim); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:.15s; flex-shrink:0;
  }
  .icon-btn:hover{color:var(--text); border-color:var(--border-strong); background:var(--panel-hover);}
  /* Botón colapsar/expandir menú — debajo del logo, resaltado en el color de
     acento de la marca (--purple) para que se distinga del resto de
     icon-btn neutros del sidebar. */
  #collapseBtn{
    width:100%; height:34px; border-radius:9px; flex-shrink:0;
    background:rgba(124,108,255,.14); border:1px solid rgba(124,108,255,.4); color:var(--purple);
  }
  #collapseBtn:hover{background:rgba(124,108,255,.24); border-color:var(--purple); color:var(--purple);}
  .app.sidebar-collapsed #collapseBtn{width:34px;}

  .nav{display:flex; flex-direction:column; gap:22px; flex:1;}
  .nav-section{display:flex; flex-direction:column; gap:3px;}
  .nav-label{
    font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:var(--text-faint); margin:0 0 6px 10px;
  }
  .nav-item{
    display:flex; align-items:center; gap:12px; width:100%; border:none; background:transparent;
    color:var(--text-dim); font-size:.865rem; font-weight:500; text-align:left; cursor:pointer;
    padding:10px 12px; border-radius:12px; transition:.15s; white-space:nowrap;
  }
  .nav-item:hover{background:var(--panel-hover); color:var(--text);}
  .nav-item.active{background:var(--gradient); color:#fff; box-shadow:0 8px 22px -8px rgba(124,108,255,.55);}
  .nav-item .nav-icon{display:flex; flex-shrink:0;}
  .nav-item span{overflow:hidden; text-overflow:ellipsis;}
  .nav-parent{justify-content:space-between;}
  .nav-parent .parent-left{display:flex; align-items:center; gap:12px; min-width:0;}
  .chevron{transition:transform .2s ease; flex-shrink:0; color:var(--text-faint);}
  .nav-parent[aria-expanded="true"] .chevron{transform:rotate(180deg);}
  .nav-submenu{max-height:0; overflow:hidden; transition:max-height .28s ease; display:flex; flex-direction:column; gap:2px; padding-left:14px; border-left:1px solid var(--border); margin-left:22px;}
  .nav-submenu.open{max-height:700px; margin-top:4px; padding-top:2px; padding-bottom:2px;}
  .nav-sub{font-size:.83rem; padding:9px 12px;}

  .sidebar-footer{margin-top:auto;}
  .info-card{
    border-radius:var(--radius-md); padding:16px; border:1px solid var(--border-strong);
    background:linear-gradient(160deg, rgba(124,108,255,.16), rgba(34,211,238,.06));
    position:relative; overflow:hidden;
  }
  .info-card-glyph{display:block; margin-bottom:8px; color:var(--purple);}
  .info-card-title{font-size:.85rem; font-weight:700; margin:0 0 4px;}
  .info-card-desc{font-size:.75rem; color:var(--text-dim); line-height:1.45; margin:0;}

  /* ===================== MAIN / TOPBAR ===================== */
  .main{flex:1; display:flex; flex-direction:column; min-width:0;}

  .topbar{
    height:var(--topbar-h); flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
    padding:0 28px; border-bottom:1px solid var(--border);
    background:rgba(7,7,11,.55); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    position:sticky; top:0; z-index:30; gap:16px;
  }
  html[data-theme="light"] .topbar{background:rgba(243,244,248,.7);}
  .topbar-left{display:flex; align-items:center; gap:14px; min-width:0;}
  .mobile-toggle{display:none;}
  .breadcrumbs{display:flex; flex-direction:column; gap:1px; font-size:.85rem; color:var(--text-faint); min-width:0; overflow:hidden;}
  .breadcrumbs .current{color:var(--text); font-weight:700; font-size:.92rem;}
  .breadcrumbs .sub{font-size:.72rem;}

  .topbar-right{display:flex; align-items:center; gap:12px; flex-shrink:0;}

  .system-bar{display:flex; align-items:center; gap:2px; padding:5px; border-radius:999px; background:var(--panel); border:1px solid var(--border);}
  .sys-btn{
    width:32px; height:32px; border-radius:999px; border:none; background:transparent;
    color:var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s; position:relative;
  }
  .sys-btn:hover{background:var(--panel-hover); color:var(--text);}
  .sys-btn svg{position:absolute;}
  .zoom-controls{display:flex; align-items:center; gap:0; padding:0 2px;}
  .zoom-btn{
    width:24px; height:24px; border-radius:999px; border:none; background:transparent; color:var(--text-dim);
    font-size:1rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1;
  }
  .zoom-btn:hover{background:var(--panel-hover); color:var(--text);}
  .zoom-value{font-size:.7rem; font-weight:700; color:var(--text-dim); width:36px; text-align:center; font-variant-numeric:tabular-nums;}
  .sys-divider{width:1px; height:20px; background:var(--border-strong); margin:0 6px;}
  .clock-block{padding:0 10px 0 2px; text-align:right; min-width:118px;}
  .clock-time{font-size:.8rem; font-weight:800; color:var(--purple); line-height:1.25; font-variant-numeric:tabular-nums; white-space:nowrap;}
  .clock-date{font-size:.65rem; color:var(--text-faint); line-height:1.25; white-space:nowrap;}

  /* ── Indicadores de Batería / Red (barra superior) ── */
  .status-chip{display:flex; align-items:center; gap:5px; padding:0 9px; height:32px; border-radius:999px; color:var(--text-dim); transition:.15s;}
  .status-chip-icon{flex-shrink:0;}
  .status-chip-valor{font-size:.68rem; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap;}
  .status-chip.status-chip-off{opacity:.4;}
  .status-chip.status-chip-bajo{color:var(--danger);}
  #bateriaRayo{color:var(--amber); margin-left:-2px;}

  /* ── Notificaciones flotantes (toasts) ── */
  .toast-container{position:fixed; right:20px; bottom:20px; z-index:1200; display:flex; flex-direction:column; gap:10px; width:min(360px, calc(100vw - 40px));}
  .toast{
    display:flex; align-items:flex-start; gap:10px; padding:13px 14px; border-radius:14px; background:var(--modal-bg);
    border:1px solid var(--border-strong); box-shadow:var(--shadow-lg); opacity:0; transform:translateY(10px) scale(.98); transition:.22s;
    border-left:3px solid var(--text-faint);
  }
  .toast.toast-visible{opacity:1; transform:translateY(0) scale(1);}
  .toast-info{border-left-color:var(--cyan);}
  .toast-warn{border-left-color:var(--amber);}
  .toast-error{border-left-color:var(--danger);}
  .toast-icono{flex-shrink:0; margin-top:1px;}
  .toast-info .toast-icono{color:var(--cyan);}
  .toast-warn .toast-icono{color:var(--amber);}
  .toast-error .toast-icono{color:var(--danger);}
  .toast-cuerpo{flex:1; min-width:0;}
  .toast-titulo{font-size:.78rem; font-weight:800; color:var(--text); margin-bottom:2px;}
  .toast-msg{font-size:.72rem; line-height:1.4; color:var(--text-dim);}
  .toast-cerrar{flex-shrink:0; width:20px; height:20px; border:none; background:transparent; color:var(--text-faint); font-size:1rem; line-height:1; cursor:pointer; border-radius:6px;}
  .toast-cerrar:hover{background:var(--panel-hover); color:var(--text);}

  @media (max-width:900px){
    .status-chip .status-chip-valor{display:none;}
    .status-chip{padding:0 7px;}
  }
  /* AUDITORIA R-02: a 320px la barra de sistema medía 311px y su borde derecho
     caía en 345px -> 25px de scroll horizontal en TODO el documento. El control
     de zoom es el bloque mas ancho (88px) y el menos critico en un movil, asi
     que se retira por debajo de 360px para que la barra vuelva a caber. */
  @media (max-width:360px){
    .zoom-controls{display:none;}
    .system-bar{padding:4px; gap:0;}
    .sys-divider{margin:0 3px;}
  }

  .btn{
    display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:12px;
    font-size:.83rem; font-weight:700; border:1px solid var(--border); cursor:pointer; transition:.15s;
    white-space:nowrap;
  }
  .btn-ghost{background:var(--panel); color:var(--text-dim);}
  .btn-ghost:hover{color:var(--text); border-color:var(--border-strong); background:var(--panel-hover);}
  .btn-ghost.btn-toggle-on{background:var(--gradient); color:#fff; border-color:transparent;}
  .btn-primary{background:var(--gradient); color:#fff; border:none; box-shadow:0 10px 26px -10px rgba(124,108,255,.65);}
  .btn-primary:hover{filter:brightness(1.07); transform:translateY(-1px);}
  .btn-primary:active{transform:translateY(0); filter:brightness(.98);}
  .btn:disabled{opacity:.5; cursor:not-allowed; transform:none !important;}

  /* ===================== WORKSPACE ===================== */
  .workspace{flex:1; padding:30px 32px 60px; overflow-y:auto;}
  .view{display:none;}
  .view.active{display:block; animation:fadeIn .3s ease;}
  @keyframes fadeIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

  .view-header{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap;}
  .view-header h1{font-size:1.5rem; margin:0 0 6px; letter-spacing:-.02em;}
  .view-desc{margin:0; color:var(--text-dim); font-size:.9rem; max-width:640px; line-height:1.5;}
  .status-badge{
    display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
    background:var(--panel); border:1px solid var(--border); font-size:.75rem; font-weight:700; color:var(--cyan);
  }
  .status-badge.ok{color:var(--success);}
  .status-badge.err{color:var(--danger);}

  .grid{display:grid; grid-template-columns:repeat(12,1fr); gap:20px; margin-top:24px;}
  /* AUDITORIA R-03: misma causa raiz que R-01 pero en la grilla general. Los
     grid items reales son los .col-*, no las .card que van dentro. Al heredar
     min-width:auto no podian encogerse por debajo del ancho de su contenido:
     en Liquidacion la tabla del cronograma empujaba la columna hasta ~857px
     fuera del viewport en moviles, dejando datos inaccesibles. Con min-width:0
     la columna respeta su ancho de grilla y el .table-wrap interior recupera
     su scroll horizontal. */
  .col-4, .col-5, .col-6, .col-7, .col-12{min-width:0;}
  .col-4{grid-column:span 4;}
  .col-5{grid-column:span 5;}
  .col-6{grid-column:span 6;}
  .col-7{grid-column:span 7;}
  .col-12{grid-column:span 12;}
  @media (max-width:1180px){ .col-4,.col-5,.col-7{grid-column:span 6;} }
  @media (max-width:640px){
    .grid{grid-template-columns:1fr;}
    .col-4,.col-5,.col-6,.col-7,.col-12{grid-column:span 1;}
  }

  .card{
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:22px; position:relative; overflow:hidden; backdrop-filter:blur(16px); transition:.2s;
  }
  .card:hover{border-color:var(--border-strong);}
  .card-icon{
    width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    margin-bottom:14px; flex-shrink:0;
  }
  .accent-cyan{background:rgba(34,211,238,.13); color:var(--cyan);}
  .accent-purple{background:rgba(124,108,255,.16); color:var(--purple);}
  .accent-green{background:rgba(52,211,153,.13); color:var(--success);}
  .accent-red{background:rgba(248,113,113,.14); color:var(--danger);}
  .accent-amber{background:rgba(250,204,21,.16); color:var(--amber);}
  .card h3{font-size:.92rem; margin:0 0 6px; font-weight:700;}
  .card p{font-size:.8rem; color:var(--text-dim); margin:0; line-height:1.5;}

  /* Dropzones */
  .dropzone{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    border:1.5px dashed var(--border-strong); border-radius:var(--radius-md); padding:26px 16px;
    margin-top:16px; cursor:pointer; text-align:center; transition:.15s; background:rgba(255,255,255,.015);
  }
  .dropzone:hover{border-color:var(--cyan); background:rgba(34,211,238,.05);}
  .dropzone.drag{border-color:var(--purple); background:rgba(124,108,255,.08);}
  .dropzone.has-file{border-style:solid; border-color:var(--success); background:rgba(52,211,153,.06);}
  .dropzone svg{color:var(--text-faint);}
  .dropzone.has-file svg{color:var(--success);}
  .dz-text{font-size:.78rem; color:var(--text-dim); font-weight:600;}
  .dz-file{font-size:.72rem; color:var(--text-faint); word-break:break-all;}
  .dropzone.has-file .dz-file{color:var(--success);}

  .actions-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:24px;}

  /* Carga y Unificación — opciones colapsables (ocultas por defecto, se
     expanden al hacer clic en su cabecera). Body con display:none/block en
     vez de max-height animado: una de las opciones contiene una tabla de
     vista previa de alto variable/potencialmente grande, y un max-height
     fijo la recortaría. */
  .carga-opcion{border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--panel); margin-top:20px; overflow:hidden;}
  .carga-opcion-header{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; cursor:pointer; user-select:none; background:transparent; border:none; width:100%; text-align:left; font:inherit; color:inherit;}
  .carga-opcion-header:hover{background:var(--panel-hover);}
  .carga-opcion-titulo{display:flex; align-items:center; gap:12px; min-width:0;}
  .carga-opcion-titulo h2{font-size:.98rem; font-weight:800; margin:0; color:var(--text);}
  .carga-opcion-header p{font-size:.78rem; color:var(--text-faint); margin:4px 0 0; line-height:1.5;}
  .carga-opcion-num{
    width:28px; height:28px; border-radius:9px; flex-shrink:0; background:var(--gradient); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:800;
  }
  .carga-opcion-header .chevron{transition:transform .2s ease; color:var(--text-faint); flex-shrink:0;}
  .carga-opcion.open .carga-opcion-header .chevron{transform:rotate(180deg);}
  .carga-opcion-body{display:none; padding:0 22px 24px;}
  .carga-opcion.open .carga-opcion-body{display:block;}
  .carga-opcion-body .grid{margin-top:6px;}

  /* KPI cards */
  .kpi-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:22px;}
  @media (max-width:1180px){ .kpi-grid{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:640px){ .kpi-grid{grid-template-columns:repeat(2,1fr);} }
  /* Grilla "hero" (Portafolio y Saldos): 2 tarjetas grandes a la izquierda
     (Saldo Vigente Total, Saldo al Día) ocupando el alto de las 2 filas de
     tarjetas chicas, y esas 6 tarjetas chicas fluyen solas a la derecha en un
     bloque de 2×3 — el flujo automático del grid las coloca sin necesidad de
     numerar columnas: al ocupar las heroes las columnas 1-2 en ambas filas,
     el resto cae naturalmente en las columnas 3-5 de cada fila. */
  .kpi-grid-hero{display:grid; grid-template-columns:repeat(5,1fr); grid-auto-rows:1fr; gap:16px; margin-top:22px;}
  .kpi-grid-hero > .kpi-hero{grid-row:1 / span 2;}
  @media (max-width:1180px){
    .kpi-grid-hero{grid-template-columns:repeat(3,1fr);}
    .kpi-grid-hero > .card{grid-row:auto;}
    .kpi-grid-hero > .kpi-hero{grid-column:span 3;}
  }
  @media (max-width:640px){
    .kpi-grid-hero{grid-template-columns:repeat(2,1fr);}
    .kpi-grid-hero > .kpi-hero{grid-column:span 2;}
  }
  .kpi-card{padding:18px; position:relative;}
  /* Botón flotante en la esquina superior derecha, FUERA del flujo normal —
     así el contenido (valor/etiqueta) de TODAS las tarjetas arranca desde el
     mismo borde superior, tenga o no tenga botón, en vez de que las tarjetas
     con botón empujen su texto más abajo que las que no lo tienen
     (alineación superior consistente en toda la grilla). Se reserva espacio a
     la derecha del valor solo en las tarjetas que sí tienen botón, para que
     un número largo no quede debajo del ícono. */
  .kpi-card-headrow{position:absolute; top:14px; right:14px; margin:0; z-index:2;}
  .kpi-card:has(> .kpi-card-headrow) > .kpi-value{padding-right:34px;}
  .kpi-card-expand{
    width:26px; height:26px; border-radius:8px; flex-shrink:0;
    border:1px solid var(--border); background:var(--panel); color:var(--text-dim);
    display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s; padding:0;
  }
  .kpi-card-expand:hover{color:var(--purple); border-color:var(--purple); background:rgba(124,108,255,.1);}
  /* Módulo Vencidos: acento rojo — vencidos = rojo */
  .kpi-card-danger{border-color:rgba(248,113,113,.35); background:rgba(248,113,113,.05);}
  .kpi-card-danger .kpi-value{color:var(--danger);}
  .modulo-vencidos .kpi-card-expand:hover{color:var(--danger); border-color:var(--danger); background:rgba(248,113,113,.12);}
  /* Acento celeste (info) — tarjetas destacadas de Portafolio y Saldos */
  .kpi-card-info{border-color:rgba(34,211,238,.35); background:rgba(34,211,238,.05);}
  .kpi-card-info .kpi-value{color:var(--cyan);}
  /* Acento verde (success) — tarjetas de rentabilidad/recaudo positivo */
  .kpi-card-success{border-color:rgba(52,211,153,.35); background:rgba(52,211,153,.05);}
  .kpi-card-success .kpi-value{color:var(--success);}
  .text-up{color:var(--success);}
  .text-down{color:var(--danger);}
  .text-success{color:var(--success);}

  /* Modal genérico (gráfico ampliado en ventana emergente) */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(7,7,11,.6); backdrop-filter:blur(3px);
    display:none; align-items:center; justify-content:center; z-index:999; padding:24px;
  }
  .modal-overlay.open{display:flex;}
  .modal-box{
    background:var(--modal-bg); border:1px solid var(--border-strong); border-radius:var(--radius-lg);
    width:100%; max-width:780px; max-height:88vh; overflow:auto; box-shadow:var(--shadow-lg); padding:22px 24px;
    transition:max-width .2s ease;
  }
  .modal-box.wide{max-width:1180px;}
  .modal-header{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;}
  .modal-header h3{margin:0 0 4px; font-size:1.05rem;}
  .modal-header p{margin:0; font-size:.8rem; color:var(--text-dim);}
  .modal-header-actions{display:flex; align-items:center; gap:8px; flex-shrink:0;}
  .icon-btn.active{color:var(--purple); border-color:var(--purple); background:rgba(124,108,255,.12);}
  .modal-body{margin-top:18px;}
  .modal-info-text{font-size:.82rem; color:var(--text-dim); line-height:1.55; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 14px; margin:0 0 16px;}
  .modal-controls{display:flex; flex-direction:column; gap:10px; margin-bottom:16px;}
  .modal-chips{display:flex; gap:6px; flex-wrap:wrap;}
  .chip{padding:5px 12px; border-radius:999px; border:1px solid var(--border); background:var(--panel); color:var(--text-dim); font-size:.72rem; font-weight:700; cursor:pointer; transition:.15s;}
  .chip:hover{border-color:var(--border-strong); color:var(--text);}
  .chip.active{background:var(--gradient); color:#fff; border-color:transparent;}
  .modal-range-row{display:flex; align-items:center; gap:12px;}
  .modal-range-row input[type=range]{flex:1; accent-color:var(--purple);}
  .modal-range-text{font-size:.74rem; color:var(--text-dim); white-space:nowrap; font-variant-numeric:tabular-nums;}

  /* ── Vista Calendario — "Colocaciones del Mes" ── */
  .cal-controles-fila{display:flex; flex-direction:row; align-items:flex-end; gap:14px; flex-wrap:nowrap;}
  /* .filter-field/.filter-select traen min-width:150px por defecto (pensado
     para paneles de filtros normales). Se sobreescribe con selectores
     compuestos (.filter-field.cal-campo-anio, mayor especificidad que
     .filter-field solo) en vez de depender del orden en la hoja de estilos,
     para que el ancho fijo de Año/Mes se respete siempre y ambos quepan en
     una sola fila sin importar dónde caiga esta regla en el archivo. */
  .filter-field.cal-campo-anio{flex:0 0 auto; width:104px; min-width:0;}
  .filter-field.cal-campo-mes{flex:0 0 auto; width:150px; min-width:0;}
  .cal-total-texto{flex:1 1 auto; min-width:0; margin-left:auto; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  #modalCalAnio, #modalCalMes{min-width:0; width:100%;}
  .cal-semana-header{display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin:18px 0 8px; text-align:center; font-size:.68rem; font-weight:800; letter-spacing:.04em; color:var(--text-faint);}
  .cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:8px;}
  .cal-celda{
    aspect-ratio:1; border-radius:12px; border:1px solid var(--border); padding:8px 9px; display:flex; flex-direction:column;
    justify-content:space-between; cursor:pointer; transition:.15s; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  }
  .cal-celda:hover{border-color:var(--border-strong); transform:scale(1.045); z-index:3; box-shadow:0 8px 20px -6px rgba(0,0,0,.45);}
  .cal-celda.cal-vacia{border:none; background:transparent !important; box-shadow:none; cursor:default; pointer-events:none;}
  .cal-celda.cal-hoy{border-color:var(--cyan); border-width:2px;}
  .cal-dia-num{font-size:.72rem; font-weight:800; font-variant-numeric:tabular-nums;}
  .cal-dia-valor{font-size:.62rem; font-weight:700; line-height:1.25; font-variant-numeric:tabular-nums;}
  .cal-leyenda{margin-top:16px;}
  .cal-leyenda-barra{background:linear-gradient(90deg, #f87171, #facc15, #34d399) !important;}
  @media (max-width:640px){
    .cal-campo-anio{width:88px;}
    .cal-campo-mes{width:120px;}
    .cal-total-texto{display:none;}
  }

  /* ── Motor de Análisis Dinámico de Variaciones (Sección 1 - Portafolio y Saldos) ── */
  .mg-section-label{font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); display:block; margin-bottom:8px;}
  .mg-checklist{display:flex; gap:8px; flex-wrap:wrap;}
  .mg-chip-var{
    display:flex; align-items:center; gap:7px; padding:7px 12px 7px 10px; border-radius:10px;
    border:1px solid var(--border); background:var(--panel); cursor:pointer; font-size:.78rem; font-weight:600;
    color:var(--text-dim); transition:.15s; user-select:none;
  }
  .mg-chip-var:hover{border-color:var(--border-strong); color:var(--text);}
  .mg-chip-var.active{border-color:transparent; color:#fff;}
  .mg-chip-var input{display:none;}
  .mg-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}

  .mg-variacion-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  @media (max-width:900px){ .mg-variacion-grid{grid-template-columns:1fr;} }
  .mg-variacion-bloque{border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 14px; background:var(--panel);}
  .mg-variacion-bloque h5{margin:0 0 8px; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint);}
  .mg-variacion-opt{display:flex; align-items:center; gap:8px; padding:5px 0; font-size:.82rem; cursor:pointer;}
  .mg-variacion-opt input{accent-color:var(--purple); cursor:pointer; flex-shrink:0;}
  .mg-variacion-opt .mg-var-desc{color:var(--text-faint); font-size:.7rem; margin-left:auto; text-align:right;}
  .mg-variacion-opt.disabled{opacity:.4;}
  .mg-variacion-opt.disabled input{cursor:not-allowed;}

  .mg-series-config{display:flex; flex-direction:column; gap:6px;}
  .mg-series-row{
    display:flex; align-items:center; gap:10px; padding:7px 12px; border:1px solid var(--border);
    border-radius:10px; background:var(--panel); font-size:.8rem; flex-wrap:wrap;
  }
  .mg-series-row .mg-series-label{font-weight:700; flex:1; min-width:160px;}
  .mg-tipo-select{
    background:var(--bg); border:1px solid var(--border-strong); color:var(--text); font-family:inherit;
    font-size:.76rem; padding:5px 8px; border-radius:7px; outline:none; cursor:pointer;
  }
  .mg-color-input{
    width:28px; height:28px; padding:2px; border:1px solid var(--border-strong); border-radius:7px;
    background:var(--bg); cursor:pointer; flex-shrink:0;
  }
  .mg-color-input::-webkit-color-swatch-wrapper{padding:0;}
  .mg-color-input::-webkit-color-swatch{border:none; border-radius:5px;}
  .mg-color-input::-moz-color-swatch{border:none; border-radius:5px;}

  .mg-series-config-header{
    display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:14px;
  }

  .mg-cagr-badge{
    display:inline-flex; align-items:center; gap:10px; padding:9px 14px; border-radius:12px; flex-wrap:wrap;
    background:var(--panel); border:1px solid var(--border); font-size:.82rem; font-weight:600; color:var(--text-dim);
  }
  .mg-cagr-badge b{font-weight:800;}

  #mgChartBox{position:relative;}
  #mgChartEmpty{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;}

  .mg-brush-wrap{display:flex; flex-direction:column; gap:10px;}
  .mg-brush-track{position:relative; height:26px; margin-top:4px;}
  .mg-brush-track .mg-brush-base{position:absolute; top:10px; left:0; right:0; height:6px; border-radius:4px; background:var(--border);}
  .mg-brush-track .mg-brush-fill{position:absolute; top:10px; height:6px; border-radius:4px; background:var(--gradient); pointer-events:none;}
  .mg-brush-track input[type=range]{
    position:absolute; top:0; left:0; width:100%; height:26px; margin:0; background:transparent;
    pointer-events:none; -webkit-appearance:none; appearance:none;
  }
  .mg-brush-track input[type=range]::-webkit-slider-runnable-track{background:transparent; height:6px;}
  .mg-brush-track input[type=range]::-moz-range-track{background:transparent; height:6px;}
  .mg-brush-track input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; pointer-events:auto; width:16px; height:16px; border-radius:50%;
    background:#fff; border:3px solid var(--purple); cursor:grab; margin-top:5px; box-shadow:0 2px 6px rgba(0,0,0,.35);
  }
  .mg-brush-track input[type=range]::-moz-range-thumb{
    pointer-events:auto; width:16px; height:16px; border-radius:50%;
    background:#fff; border:3px solid var(--purple); cursor:grab; box-shadow:0 2px 6px rgba(0,0,0,.35);
  }

  .mg-fullscreen{
    position:fixed !important; inset:16px !important; z-index:900; overflow:auto; margin:0 !important;
    background:var(--modal-bg) !important; box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  }
  .mg-fullscreen #mgChartBox{height:calc(100vh - 560px) !important; min-height:320px;}
  body.mg-fullscreen-active{overflow:hidden;}

  .modal-tabla-grupo{margin-bottom:18px;}
  .modal-tabla-grupo:last-child{margin-bottom:0;}
  .modal-tabla-grupo h4{margin:0 0 8px; font-size:.72rem; font-weight:800; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em;}
  .modal-tabla-filas{border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;}
  .modal-tabla-fila{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 14px; border-bottom:1px solid var(--border); font-size:.82rem;}
  .modal-tabla-fila:last-child{border-bottom:none;}
  .modal-tabla-fila:nth-child(even){background:var(--panel);}
  .modal-tabla-label{color:var(--text-dim);}
  .modal-tabla-valor{font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap;}

  /* Módulo Cobranzas: selector de cliente (aparte de los 8 filtros) + detalle de cuotas */
  /* Apiladas verticalmente (Cuotas por Cobrar Hoy debajo de Buscar Cliente) en
     vez de lado a lado — con las 2 tablas en columnas, la de Cliente quedaba
     demasiado angosta y las tablas no entraban en pantalla. */
  .cobranza-split{display:grid; grid-template-columns:1fr; gap:24px; margin-top:16px;}
  /* AUDITORIA R-01: un grid item arranca con min-width:auto, asi que NO puede
     encogerse por debajo del ancho de su contenido. Con las tablas anchas de
     Cobranzas eso reventaba la columna 1fr y sacaba ~319px fuera del viewport,
     dejando columnas inaccesibles. Con min-width:0 la columna respeta su 1fr y
     el .table-wrap interior (overflow:auto) recupera su scroll horizontal. */
  .cobranza-col{min-width:0;}
  .cobranza-col h4{font-size:.85rem; color:var(--text-dim); margin:0 0 10px;}
  #cobranzaTablaClientes tbody tr{cursor:pointer;}
  #cobranzaTablaClientes tbody tr.row-activa td{background:rgba(124,108,255,.12);}
  #cobranzaTablaClientes input[type=checkbox]{width:16px; height:16px; accent-color:var(--purple); cursor:pointer;}
  .btn-export{padding:7px 12px; font-size:.74rem; flex-shrink:0;}
  .th-filtro-cell{display:flex; flex-direction:column; gap:4px; align-items:stretch;}
  .th-filtro-cell > span{font-size:.72rem; font-weight:700; text-transform:none; letter-spacing:0;}
  .th-filtro-select{width:100%; font-size:.68rem; font-weight:500; padding:3px 4px; border-radius:5px; border:1px solid var(--border-strong); background:var(--bg); color:var(--text); cursor:pointer;}
  .th-filtro-select:focus{outline:1px solid var(--purple);}

  /* Tablas de Cobranzas (Leasing y Renting) — más compactas que el resto del
     sistema: menos padding, letra más chica, y la columna Descripción con
     ancho tope + elipsis (título completo al pasar el cursor) — para que
     quepan las columnas nuevas (Entidad/Producto/Descripción) sin que la
     tabla se salga del ancho de pantalla en laptops más chicas. */
  #cobranzaTablaCuotas table, #cobranzaTablaProximas table, #rentingTablaCuotas table,
  #cobranzaTablaClientes table, #rentingTablaClientes table{ font-size:.71rem; }
  #cobranzaTablaCuotas th, #cobranzaTablaProximas th, #rentingTablaCuotas th,
  #cobranzaTablaClientes th, #rentingTablaClientes th{ padding:8px 8px; }
  #cobranzaTablaCuotas td, #cobranzaTablaProximas td, #rentingTablaCuotas td,
  #cobranzaTablaClientes td, #rentingTablaClientes td{ padding:6px 8px; }
  .col-descripcion{ max-width:140px; overflow:hidden; text-overflow:ellipsis; }
  .kpi-value{font-size:1.5rem; font-weight:800; letter-spacing:-.02em; margin:0 0 3px; line-height:1.15;}
  .kpi-label{font-size:.7rem; color:var(--text-dim); font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
  .kpi-sub{font-size:.7rem; color:var(--text-faint); margin-top:8px;}

  /* Desglose de moneda dentro de una KPI card (barras "versión tarjeta") */
  .kpi-split{margin-top:12px; padding-top:12px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:9px;}
  .kpi-split-row{display:flex; flex-direction:column; gap:4px;}
  .kpi-split-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
  .kpi-split-label{display:flex; align-items:center; gap:6px; font-size:.68rem; font-weight:800; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em;}
  .kpi-split-dot{width:8px; height:8px; border-radius:999px; flex-shrink:0;}
  .kpi-split-value{font-size:.76rem; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap;}
  .kpi-split-pct{font-size:.66rem; font-weight:700; color:var(--text-faint); margin-left:5px;}
  .kpi-split-track{height:7px; border-radius:999px; background:var(--panel-hover); overflow:hidden;}
  .kpi-split-fill{height:100%; border-radius:999px; min-width:2px; transition:width .4s ease;}

  /* Tabs (selector de moneda) */
  .tabs{display:flex; gap:5px; padding:5px; background:var(--panel); border:1px solid var(--border); border-radius:14px; width:fit-content; margin-top:22px;}
  .tab{padding:8px 18px; border-radius:10px; font-size:.8rem; font-weight:700; color:var(--text-dim); cursor:pointer; border:none; background:transparent; transition:.15s;}
  .tab:hover{color:var(--text);}
  .tab.active{background:var(--gradient); color:#fff;}

  /* Panel de filtros dinámicos + TC */
  .filter-panel{
    display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-top:22px;
    padding:16px 18px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
  }
  .filter-field{display:flex; flex-direction:column; gap:5px; min-width:150px;}
  .filter-field label{font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint);}
  .filter-select, .tc-input{
    background:var(--bg); border:1px solid var(--border-strong); color:var(--text); font-family:inherit;
    font-size:.8rem; padding:8px 10px; border-radius:9px; outline:none; min-width:150px;
  }
  .filter-select:focus, .tc-input:focus{border-color:var(--purple);}
  .tc-input{min-width:90px; font-variant-numeric:tabular-nums; font-weight:700;}
  .filter-count{font-size:.76rem; color:var(--text-dim); margin-left:auto; white-space:nowrap;}
  .filter-count strong{color:var(--text);}

  /* Panel de filtros avanzados (selector de columnas) — comprimido por defecto */
  .adv-filter-panel{margin-top:12px;}
  .adv-filter-toggle{display:inline-flex; align-items:center; gap:8px;}
  .adv-filter-toggle .chevron-adv{font-size:.7rem; transition:transform .15s ease;}
  .adv-filter-toggle.open .chevron-adv{transform:rotate(180deg);}
  .adv-filter-body{
    margin-top:10px; padding:16px 18px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
  }
  .adv-filter-header{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px;}
  .adv-filter-header p{font-size:.78rem; color:var(--text-dim); margin:0;}
  .col-toggle-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px 16px; max-height:340px; overflow:auto; padding-right:4px;}
  .col-toggle-item{display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--text-dim); cursor:pointer;}
  .col-toggle-item input[type=checkbox]{width:15px; height:15px; accent-color:var(--purple); cursor:pointer; flex-shrink:0;}
  .col-toggle-item:hover{color:var(--text);}

  /* Mini KPI de perfil de clientes (2x2) */
  .mini-stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px;}
  .modulo{ animation:fadeIn .25s ease; }
  .mini-stat{background:var(--panel-hover); border:1px solid var(--border); border-radius:10px; padding:10px 12px;}
  .mini-stat .n{font-size:1.15rem; font-weight:800;}
  .mini-stat .l{font-size:.66rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; margin-top:2px;}

  .chart-box{height:280px; position:relative; margin-top:14px;}

  /* Tabla de Rentabilidad por Cliente (Márgenes y Otros) — fila expandible.
     Para que las columnas del detalle (sub-tabla) queden EXACTAMENTE
     alineadas con las de la fila principal, ambas tablas usan
     table-layout:fixed con los MISMOS anchos por columna (definidos en el
     <th> de cada una vía JS) — el ancho ya incluye el padding gracias al
     box-sizing:border-box global, así que no hace falta que outer/inner
     compartan el mismo padding para que las columnas coincidan en X. La
     sub-tabla agrega una primera columna "espaciadora" del mismo ancho que
     la columna del caret (▶) de la fila principal, en vez de simularlo con
     padding-left en el div — así el resto de columnas caen exactas.  */
  .rentab-cliente-row{cursor:pointer;}
  .rentab-caret{display:inline-block; font-size:.68rem; color:var(--text-faint); transition:transform .15s ease;}
  .rentab-cliente-row.expanded .rentab-caret{transform:rotate(90deg); color:var(--purple);}
  .rentab-cliente-row.expanded td{background:var(--panel-hover);}
  .rentab-detalle-row td{padding:0; border-bottom:1px solid var(--border);}
  .rentab-subtabla{padding:8px 0 16px 0; background:var(--bg);}
  .rentab-tabla-alineada, .rentab-subtabla table{table-layout:fixed; width:100%;}
  .rentab-subtabla table{font-size:.74rem;}
  .rentab-subtabla thead th{position:static; background:transparent; padding:8px 12px;}
  .rentab-subtabla tbody td{padding:7px 12px;}

  /* Rentabilidad Total por Categoría — tarjetas de aro (donut), agrupadas
     por clasificación y separadas por una línea vertical. Cada aro es un
     Chart.js doughnut real (mismo cutout/técnica que chartMoneda en
     Portafolio y Saldos, para que se vea idéntico), no CSS — un conic-gradient
     con ::after resultó poco fiable entre navegadores para simular el hueco
     del aro. */
  .rentab-donut-groups{display:flex; align-items:stretch; justify-content:center; gap:0; flex-wrap:wrap; margin-top:22px;}
  .rentab-donut-group{display:flex; flex-direction:column; align-items:center; gap:16px; padding:0 26px;}
  .rentab-donut-group-title{font-size:.7rem; font-weight:800; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em;}
  .rentab-donut-group-items{display:flex; gap:28px; align-items:flex-start; justify-content:center; flex-wrap:wrap;}
  .rentab-donut-sep{width:1px; align-self:stretch; min-height:170px; background:var(--border); margin:0 4px;}
  .rentab-donut-item{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; width:100px;}
  .rentab-donut-item canvas{width:112px; height:112px;}
  .rentab-donut-label{font-size:.66rem; font-weight:800; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em;}
  .rentab-donut-amount{font-size:.86rem; font-weight:700; color:var(--text); white-space:nowrap;}
  @media (max-width:900px){ .rentab-donut-sep{display:none; width:100%; min-height:1px; margin:14px 0;} }

  /* Top 10 — barras horizontales HTML/CSS puro (sin canvas) */
  .top10-list{display:flex; flex-direction:column; gap:10px; margin-top:14px;}
  .top10-row{display:grid; grid-template-columns:22px minmax(0,1fr) 108px; align-items:center; gap:12px;}
  .top10-rank{font-size:.72rem; font-weight:800; color:var(--text-faint); text-align:center;}
  .top10-main{min-width:0;}
  .top10-name{font-size:.78rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:5px;}
  .top10-bar-track{height:8px; border-radius:999px; background:var(--panel-hover); overflow:hidden;}
  .top10-bar-fill{height:100%; border-radius:999px; min-width:2px; transition:width .4s ease;}
  .top10-value{font-size:.78rem; font-weight:700; text-align:right; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap;}
  .top10-empty{padding:20px 4px; font-size:.82rem; color:var(--text-faint); font-style:italic;}

  /* ── Mapa de calor (treemap) — Total Pendiente por cliente ── */
  .heatmap-wrap{position:relative; width:100%; height:720px; margin-top:10px; border-radius:var(--radius-md); overflow:hidden; background:var(--panel-hover);}
  .heatmap-celda{
    position:absolute; box-sizing:border-box; border:2px solid var(--bg);
    display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
    padding:6px 8px; overflow:hidden; cursor:default; transition:filter .12s ease, transform .12s ease; transform-origin:center;
  }
  .heatmap-celda:hover{filter:brightness(1.08); transform:scale(1.015); z-index:5; box-shadow:0 6px 18px -6px rgba(0,0,0,.4);}
  .heatmap-nombre{font-size:.72rem; font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
  .heatmap-valor{font-size:.8rem; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
  .heatmap-tooltip{
    position:fixed; z-index:200; pointer-events:none; display:none;
    background:var(--modal-bg); border:1px solid var(--border-strong); border-radius:9px;
    padding:9px 12px; font-size:.78rem; color:var(--text); box-shadow:var(--shadow-lg); max-width:280px;
  }
  .heatmap-tooltip .ht-nombre{font-weight:800; margin-bottom:3px; word-break:break-word;}
  .heatmap-tooltip .ht-valor{font-variant-numeric:tabular-nums; color:var(--danger); font-weight:700;}
  .heatmap-tooltip .ht-pct{color:var(--text-faint); font-size:.72rem; margin-top:2px;}
  /* Tooltip detallado del mapa de calor VIP: más ancho, tabla de contratos,
     acento verde (rentabilidad) en vez del rojo por defecto (riesgo/deuda). */
  #top10VipHeatmapTooltip{max-width:580px; min-width:420px;}
  #top10VipHeatmapTooltip .ht-valor{color:var(--success);}
  #top10VipHeatmapTooltip .ht-tabla{table-layout:fixed; width:100%; border-collapse:collapse; margin:8px 0; font-size:.7rem;}
  #top10VipHeatmapTooltip .ht-tabla th:nth-child(1), #top10VipHeatmapTooltip .ht-tabla td:nth-child(1){width:19%;}
  #top10VipHeatmapTooltip .ht-tabla th:nth-child(2), #top10VipHeatmapTooltip .ht-tabla td:nth-child(2),
  #top10VipHeatmapTooltip .ht-tabla th:nth-child(3), #top10VipHeatmapTooltip .ht-tabla td:nth-child(3){width:14%;}
  #top10VipHeatmapTooltip .ht-tabla th:nth-child(4), #top10VipHeatmapTooltip .ht-tabla td:nth-child(4){width:14%;}
  #top10VipHeatmapTooltip .ht-tabla th:nth-child(5), #top10VipHeatmapTooltip .ht-tabla td:nth-child(5),
  #top10VipHeatmapTooltip .ht-tabla th:nth-child(6), #top10VipHeatmapTooltip .ht-tabla td:nth-child(6){width:19.5%;}
  #top10VipHeatmapTooltip .ht-tabla th{text-align:right; font-weight:700; color:var(--text-faint); padding:3px 6px; border-bottom:1px solid var(--border-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  #top10VipHeatmapTooltip .ht-tabla th:first-child, #top10VipHeatmapTooltip .ht-tabla td:first-child{text-align:left;}
  #top10VipHeatmapTooltip .ht-tabla td{text-align:right; padding:3px 6px; border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  #top10VipHeatmapTooltip .ht-consolidado{margin-top:6px; padding-top:6px; border-top:1px solid var(--border-strong); font-size:.76rem;}
  #top10VipHeatmapTooltip .ht-consolidado strong{color:var(--success);}
  .heatmap-leyenda{display:flex; align-items:center; gap:8px; margin-top:12px; font-size:.72rem; color:var(--text-faint);}
  .heatmap-leyenda-barra{--heatmap-hue:0; flex:1; max-width:220px; height:10px; border-radius:999px; background:linear-gradient(90deg, hsl(var(--heatmap-hue),78%,88%), hsl(var(--heatmap-hue),78%,33%));}

  /* ── Módulo Contratos: buscador + drill-down ── */
  .pill{
    display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px;
    font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;
  }
  .pill-success{background:rgba(52,211,153,.14); color:var(--success);}
  .pill-danger{background:rgba(248,113,113,.14); color:var(--danger);}
  .pill-amber{background:rgba(250,204,21,.16); color:var(--amber);}
  .pill-neutral{background:var(--panel-hover); color:var(--text-dim);}
  .pill-orange{background:rgba(251,146,60,.16); color:#fb923c;}
  .pill-darkred{background:rgba(220,38,38,.18); color:#dc2626;}
  .btn-volver{color:var(--purple); border-color:rgba(124,108,255,.35); background:rgba(124,108,255,.08);}
  .btn-volver:hover{background:rgba(124,108,255,.16); border-color:var(--purple); color:var(--purple);}
  .btn-vermas{
    padding:5px 12px; border-radius:8px; border:1px solid var(--border-strong); background:var(--panel);
    color:var(--purple); font-size:.72rem; font-weight:700; cursor:pointer; white-space:nowrap;
  }
  .btn-vermas:hover{background:rgba(124,108,255,.12); border-color:var(--purple);}
  .ct-resultado-row{
    display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px;
    border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:8px; cursor:pointer; transition:.15s;
  }
  .ct-resultado-row:hover{border-color:var(--purple); background:var(--panel-hover);}
  .ct-resultado-nombre{font-size:.86rem; font-weight:700; color:var(--text);}
  .ct-resultado-sub{font-size:.72rem; color:var(--text-faint); margin-top:3px;}
  .ct-resultado-cifras{display:flex; gap:22px; flex-wrap:wrap; text-align:right;}
  .ct-resultado-cifras .n{font-size:.84rem; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums;}
  .ct-resultado-cifras .l{font-size:.62rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; margin-top:2px;}
  .ct-summary-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:14px;}
  .ct-summary-item{background:var(--panel-hover); border:1px solid var(--border); border-radius:10px; padding:11px 13px;}
  .ct-summary-item .n{font-size:1.05rem; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums;}
  .ct-summary-item .l{font-size:.64rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; margin-top:3px;}
  .maduracion-cell{display:flex; align-items:center; gap:8px; min-width:96px;}
  .maduracion-track{flex:1; height:6px; border-radius:999px; background:var(--panel-hover); overflow:hidden;}
  .maduracion-fill{height:100%; border-radius:999px; background:var(--gradient);}
  .maduracion-pct{font-size:.72rem; font-weight:700; color:var(--text); white-space:nowrap; font-variant-numeric:tabular-nums;}

  /* Table */
  .table-wrap{overflow:auto; margin-top:10px; border:1px solid var(--border); border-radius:var(--radius-md); max-height:600px;}

  /* Cabecera de acciones de las tablas expandibles (Saldos por Cliente,
     Cartera Vencida y Rentabilidad por Cliente): selector de cuantos
     clientes mostrar + boton para abrir/cerrar TODAS las filas de golpe. */
  .tabla-acciones{display:flex; align-items:flex-end; gap:10px; flex-shrink:0; flex-wrap:wrap;}
  .btn-desplegar{display:flex; align-items:center; gap:7px; height:37px; white-space:nowrap;}
  /* El chevron rota cuando todo esta desplegado, igual que el caret de cada fila. */
  .btn-desplegar svg{transition:transform .18s ease;}
  .btn-desplegar.desplegado svg{transform:rotate(180deg);}
  table{width:100%; border-collapse:collapse; font-size:.78rem;}
  thead th{
    position:sticky; top:0; z-index:2; vertical-align:top;
    text-align:center; padding:11px 14px; background:var(--modal-bg); color:var(--text-faint);
    font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
    border-bottom:1px solid var(--border); white-space:nowrap;
  }
  tbody td{padding:9px 14px; border-bottom:1px solid var(--border); color:var(--text-dim); white-space:nowrap; text-align:center;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover td{background:var(--panel-hover);}
  tbody td.muted{color:var(--text-faint);}
  tbody td.concept{text-align:left; color:var(--text); font-weight:600;}

  /* Tablas "Contenido del informe" (Control / Cobranzas Consolidado):
     la columna Contenido lleva texto largo y necesita wrap + lectura
     en vez del nowrap+centrado por defecto del resto de tablas. */
  .tbl-informe th:first-child, .tbl-informe td:first-child{width:22%; text-align:center;}
  .tbl-informe td:first-child{font-weight:600; color:var(--text);}
  .tbl-informe th:last-child{text-align:left;}
  .tbl-informe td:last-child{white-space:normal; text-align:left; line-height:1.6;}
  .tbl-informe td{padding:13px 16px; vertical-align:middle;}
  tbody td.danger{color:var(--danger); font-weight:700;}
  /* Tabla resumen bajo "Saldo Vencido por Propietario" — 4 columnas en una
     tarjeta col-6: el padding por defecto (pensado para tablas a ancho
     completo) desborda, así que se compacta solo aquí. */
  #tablaPropietarioVencido th, #tablaPropietarioVencido td{padding:7px 6px; font-size:.7rem;}
  .pager{display:flex; align-items:center; gap:10px; font-size:.76rem; color:var(--text-dim);}
  .pager .btn{padding:7px 12px; font-size:.76rem;}
  .note{display:flex; align-items:flex-start; gap:8px; margin-top:16px; font-size:.78rem; color:var(--text-faint); line-height:1.55;}
  .empty-state{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:70px 20px; text-align:center; color:var(--text-faint);}
  .empty-state svg{opacity:.5;}
  .empty-state p{max-width:360px; font-size:.85rem; line-height:1.6; margin:0;}

  /* Overlay for mobile sidebar */
  .overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:35;}
  .app.mobile-open .overlay{display:block;}

  @media (max-width:900px){
    .mobile-toggle{display:flex;}
    .sidebar{position:fixed; left:0; top:0; transform:translateX(-100%); box-shadow:var(--shadow-lg);}
    .app.mobile-open .sidebar{transform:translateX(0);}
    .app.sidebar-collapsed .sidebar{width:var(--sidebar-w);}
    .topbar{padding:0 18px;}
    .clock-block{display:none;}
  }

  /* ══════════════ CALCULADORA DE LIQUIDACIÓN ══════════════ */
  .liq-warn{
    display:none; align-items:center; gap:8px; background:rgba(250,204,21,.12); color:var(--amber);
    border:1px solid rgba(250,204,21,.35); border-radius:var(--radius-sm); padding:10px 14px;
    font-size:.8rem; font-weight:600; margin:16px 0;
  }
  .liq-warn.show{display:flex;}

  .liq-source-panel{display:none;}
  .liq-source-panel.active{display:block;}

  .liq-file-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;}
  textarea.liq-ledger-input{
    width:100%; min-height:88px; resize:vertical; background:var(--bg); color:var(--text);
    border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:10px 12px;
    font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:.72rem; line-height:1.5;
  }
  textarea.liq-ledger-input:focus{border-color:var(--purple); outline:none;}
  .liq-drop-hint{font-size:.72rem; color:var(--text-faint); margin-top:8px; line-height:1.5;}

  .liq-table-foot{display:flex; justify-content:space-between; align-items:center; margin:12px 0 8px; flex-wrap:wrap; gap:6px;}
  .liq-count-note{font-size:.72rem; color:var(--text-faint);}

  .liq-grid-params{display:grid; grid-template-columns:repeat(2,1fr); gap:12px 16px;}
  .liq-grid-params.secondary{margin-top:16px; padding-top:16px; border-top:1px dashed var(--border);}
  @media (max-width:420px){ .liq-grid-params{grid-template-columns:1fr;} }

  #liqCronogramaWrap table thead th{text-align:right;}
  #liqCronogramaWrap table thead th:first-child, #liqCronogramaWrap table thead th:nth-child(2){text-align:left;}
  #liqCronogramaWrap table tbody td{text-align:right;}
  #liqCronogramaWrap table tbody td:first-child, #liqCronogramaWrap table tbody td:nth-child(2){text-align:left;}
  #liqCronogramaWrap table tbody td.danger{color:var(--danger); font-weight:700;}
  #liqCronogramaWrap tr.row-vencida{box-shadow:inset 3px 0 0 var(--danger);}
  #liqCronogramaWrap tr.row-futura td{color:var(--text-faint);}
  #liqCronogramaWrap table input, #liqCronogramaWrap table select{
    border:1px solid transparent; background:transparent; padding:4px 5px; width:100%; text-align:right;
    font-size:.74rem; border-radius:6px; color:var(--text);
  }
  #liqCronogramaWrap table td:nth-child(2) input{text-align:left;}
  #liqCronogramaWrap table input:hover, #liqCronogramaWrap table select:hover{border-color:var(--border-strong);}
  #liqCronogramaWrap table input:focus, #liqCronogramaWrap table select:focus{border-color:var(--purple); background:var(--bg);}
  .liq-del-btn{background:none; border:none; color:var(--text-faint); cursor:pointer; padding:2px 5px; font-size:14px; line-height:1; border-radius:6px;}
  .liq-del-btn:hover{color:var(--danger); background:rgba(248,113,113,.1);}

  .liq-module{margin-bottom:18px;}
  .liq-module:last-of-type{margin-bottom:0;}
  .liq-module-title{
    display:flex; align-items:center; gap:8px; font-size:.68rem; text-transform:uppercase;
    letter-spacing:.06em; color:var(--text-faint); font-weight:800; margin-bottom:8px;
  }
  .liq-module-title .n{
    display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:6px;
    background:var(--panel-hover); color:var(--purple); font-size:.6rem; font-weight:800;
  }
  .liq-line-item{
    display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:5px 0;
    border-bottom:1px solid var(--border); font-size:.78rem;
  }
  .liq-line-item .label{color:var(--text-dim); display:inline-flex; align-items:center; gap:6px;}
  .liq-line-item .val{font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap;}
  .liq-subtotal{
    display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:8px; margin-top:2px;
    font-weight:800; font-size:.85rem;
  }
  .liq-subtotal .val{font-variant-numeric:tabular-nums; color:var(--purple);}

  .liq-info-btn{
    display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%;
    border:1px solid var(--border-strong); background:var(--panel-hover); color:var(--text-faint);
    font-size:9px; font-style:italic; font-family:Georgia,'Times New Roman',serif; font-weight:700; line-height:1;
    cursor:pointer; flex-shrink:0; padding:0; transition:.15s;
  }
  .liq-info-btn:hover, .liq-info-btn.active{color:#fff; background:var(--purple); border-color:var(--purple);}
  .liq-info-tooltip{
    position:fixed; z-index:200; display:none; width:280px; max-width:calc(100vw - 24px);
    background:var(--modal-bg); border:1px solid var(--border-strong); border-radius:10px;
    padding:12px 14px; box-shadow:var(--shadow-lg); pointer-events:none;
  }
  .liq-info-tooltip.show{display:block;}
  .liq-info-tooltip-title{font-size:.66rem; font-weight:800; color:var(--purple); text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px;}
  .liq-info-tooltip-text{font-size:.76rem; color:var(--text-dim); line-height:1.55;}

  .liq-total-hero{
    margin-top:16px; background:var(--gradient); color:#fff; border-radius:var(--radius-lg);
    padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    box-shadow:0 20px 46px -18px rgba(124,108,255,.6);
  }
  .liq-total-hero .tl{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; opacity:.9;}
  .liq-total-hero .tv{font-size:1.7rem; font-weight:800; font-variant-numeric:tabular-nums; margin-top:2px;}
  .liq-total-hero .tsub{font-size:.68rem; opacity:.85; margin-top:4px;}

  .liq-breakdown-table{width:100%; border-collapse:collapse; margin-top:14px; font-size:.74rem;}
  .liq-breakdown-table th, .liq-breakdown-table td{padding:6px 8px; text-align:right; border-bottom:1px solid var(--border);}
  .liq-breakdown-table th:first-child, .liq-breakdown-table td:first-child{text-align:left; color:var(--text-dim); font-weight:400;}
  .liq-breakdown-table th{font-size:.6rem; text-transform:uppercase; color:var(--text-faint); letter-spacing:.05em; font-weight:700;}
  .liq-breakdown-table td{color:var(--text); font-variant-numeric:tabular-nums;}
  .liq-breakdown-table tr:last-child td{font-weight:800; border-top:1px solid var(--border-strong); border-bottom:none; padding-top:8px;}
  #liqIndicators.kpi-grid{grid-template-columns:repeat(2, minmax(0,1fr));}

  .liq-escenario-form{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:16px;}
  .liq-scenario-wrap{overflow:auto;}
  table.liq-scenarios{width:100%; border-collapse:collapse; font-size:.78rem;}
  table.liq-scenarios thead th{text-align:right; padding:8px; color:var(--text-faint); font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border);}
  table.liq-scenarios thead th:first-child{text-align:left;}
  table.liq-scenarios td:first-child{text-align:left; color:var(--text-dim);}
  table.liq-scenarios td{font-variant-numeric:tabular-nums; color:var(--text); padding:6px 8px; border-bottom:1px solid var(--border); text-align:right;}
  table.liq-scenarios tr.total-row td{font-weight:800; border-top:1px solid var(--border-strong); padding-top:10px; color:var(--purple);}
  table.liq-scenarios .rm{background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:11px; margin-left:6px;}
  table.liq-scenarios .rm:hover{color:var(--danger);}

  /* ══════════════ CALCULADORA DE DEPRECIACIÓN — independiente de Liquidación ══════════════ */
  .dep-grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:12px 16px;}
  @media (max-width:420px){ .dep-grid-2{grid-template-columns:1fr;} }
  .dep-resumen-row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:.82rem;}
  .dep-resumen-row:last-child{border-bottom:none;}
  .dep-resumen-row .l{color:var(--text-faint);}
  .dep-resumen-row .v{font-weight:700; color:var(--text); font-variant-numeric:tabular-nums;}
  .dep-badge{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:.76rem; font-weight:700;}
  .dep-badge.ok{background:rgba(52,211,153,.14); color:var(--success);}
  .dep-badge.warn{background:rgba(248,113,113,.14); color:var(--danger);}
  .dep-unidades-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:8px; margin-top:10px; max-height:220px; overflow:auto; padding-right:4px;}
  .dep-unidad-item label{display:block; font-size:.62rem; color:var(--text-faint); margin-bottom:3px; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;}
  .dep-unidad-item input{width:100%;}
  tbody td.dep-warn{color:var(--danger); font-weight:700;}
  /* Cronograma de depreciación — 9 columnas en un ancho normal de pantalla
     (~1280-1366px de laptop): el padding/tamaño de tabla por defecto (pensado
     para tablas de menos columnas) desborda y obliga a scroll horizontal, así
     que se compacta solo aquí para que las 9 columnas quepan completas. */
  .dep-tabla-wrap th, .dep-tabla-wrap td{padding:7px 5px; font-size:.72rem;}
  /* Convertidor de Tasas — separadores de sección "① Tasa a convertir" /
     "② Convertir a" dentro de la tarjeta "Datos de conversión". */
  .tc-seccion-label{margin:0; font-size:.68rem; font-weight:800; color:var(--purple); text-transform:uppercase; letter-spacing:.05em;}
  .tc-divisor{height:1px; background:var(--border); margin:20px 0 16px;}
  /* Tabla de equivalencias — 4 columnas (Equivalencia/Descripción/Fórmula/
     Tasa): Descripción y Fórmula pueden envolver a 2 líneas en vez de forzar
     una sola línea, así la tabla cabe completa sin scroll horizontal. */
  .tc-tabla-wrap td.tc-wrap{white-space:normal; text-align:left; color:var(--text-faint); font-size:.72rem; line-height:1.4;}
  .tc-tabla-wrap td.tc-formula{white-space:normal; text-align:left; font-family:'JetBrains Mono',Consolas,monospace; font-size:.68rem; color:var(--text-dim);}
  .tc-tabla-wrap td.concept{white-space:normal; line-height:1.3;}
  /* ══════════════ CALCULADORA DE MORA — independiente de Liquidación, Depreciación y Tasas ══════════════ */
  .mora-tabla-wrap th, .mora-tabla-wrap td{padding:6px 4px; font-size:.7rem;}
  .mora-tabla-wrap td input, .mora-tabla-wrap td select{width:100%; min-width:0; font-size:.7rem; padding:5px 4px;}
  .mora-tabla-wrap .mora-del-btn{background:none; border:1px solid var(--border); color:var(--text-faint); cursor:pointer; padding:5px 7px; display:inline-flex; border-radius:7px;}
  .mora-tabla-wrap .mora-del-btn:hover{color:var(--danger); border-color:rgba(248,113,113,.4); background:rgba(248,113,113,.1);}
  .mora-leyenda{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px;}
  .mora-leyenda-item{display:flex; align-items:center; gap:7px; font-size:.74rem; color:var(--text-dim);}
  .mora-leyenda-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}
  .mora-leyenda-count{font-weight:800; font-variant-numeric:tabular-nums; color:var(--text);}

  .liq-print-header{display:none;}

  @media print {
    html, body{height:auto !important; overflow:visible !important; background:#fff; color:#000;}
    .app{display:block !important; min-height:0 !important;}
    .sidebar, .topbar{display:none !important;}
    .workspace{padding:0 !important; overflow:visible !important; height:auto !important;}
    html{font-size:92%;}
    .view[data-view="calc-liquidacion"] .view-header,
    .view[data-view="calc-liquidacion"] .status-badge,
    .view[data-view="calc-liquidacion"] #liqClienteRucRow,
    .view[data-view="calc-liquidacion"] #liqSourceCard,
    .view[data-view="calc-liquidacion"] #liqParamsCard,
    .view[data-view="calc-liquidacion"] #liqEscenariosCard,
    .view[data-view="calc-liquidacion"] #liqResultTitleRow,
    .view[data-view="calc-liquidacion"] .col-7,
    .view[data-view="calc-liquidacion"] .col-12,
    .view[data-view="calc-liquidacion"] .btn,
    .view[data-view="calc-liquidacion"] #liqIndicators{
      display:none !important;
    }
    .view[data-view="calc-liquidacion"] .grid{display:block !important; margin-top:0 !important;}
    .view[data-view="calc-liquidacion"] .col-5{width:100% !important;}
    #liqResultCard{border:none; padding:0; backdrop-filter:none; background:#fff; box-shadow:none;}
    .liq-print-header{display:block; margin-bottom:8px; padding-bottom:6px; border-bottom:2px solid #000;}
    .liq-print-header-brand{font-size:1.15rem; font-weight:800; color:#000; text-transform:uppercase; letter-spacing:.02em;}
    .liq-print-header-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:6px;}
    .liq-print-header-grid div span{display:block; font-size:.6rem; text-transform:uppercase; letter-spacing:.05em; color:#666;}
    .liq-print-header-grid div strong{display:block; font-size:.82rem; color:#000; margin-top:1px;}
    .liq-module{break-inside:avoid; margin-bottom:4px;}
    .liq-module-title{color:#333; font-size:.64rem; margin-bottom:1px;}
    .liq-line-item{padding:0.5px 0; border-bottom-color:#ddd; font-size:.76rem;}
    .liq-line-item .label, .liq-line-item .val{color:#000;}
    .liq-subtotal{
      margin:3px 0 0; padding:3px 8px; font-size:.92rem;
      background:#d6d6d6 !important; border-top:1px solid #333; border-bottom:1px solid #333; border-radius:2px;
      -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
    }
    .liq-subtotal .val{color:#000;}
    .liq-breakdown-table{margin-top:5px; font-size:.72rem;}
    .liq-breakdown-table th, .liq-breakdown-table td{color:#000; border-bottom-color:#ccc; padding:2px 6px;}
    .liq-total-hero{
      margin-top:6px; padding:6px 14px; background:#111 !important; color:#fff !important;
      -webkit-print-color-adjust:exact; print-color-adjust:exact;
    }
    .liq-total-hero .tv{font-size:1.25rem;}
    .liq-info-btn{display:none;}
    @page{ margin:10mm; }
  }

  /* ══════════════ CONTROL — pipeline comercial / riesgos / legal (REGISTRO.csv) ══════════════ */
  .pill-info{background:rgba(34,211,238,.14); color:var(--cyan);}
  .ctrl-stage-stack{display:flex; flex-direction:column; gap:10px; margin-top:14px;}
  .ctrl-stage-acc{border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--panel-hover); overflow:hidden;}
  .ctrl-stage-acc-head{
    width:100%; padding:12px 14px; background:transparent; border:none; border-left:3px solid var(--border-strong);
    display:flex; align-items:center; gap:10px; cursor:pointer; font:inherit; color:inherit; text-align:left;
  }
  .ctrl-stage-acc-head:hover{background:var(--panel);}
  .ctrl-stage-acc-head .chevron{transition:transform .2s ease; color:var(--text-faint); flex-shrink:0;}
  .ctrl-stage-acc.open .ctrl-stage-acc-head .chevron{transform:rotate(180deg);}
  .ctrl-stage-acc-title{font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; flex:1; min-width:0;}
  .ctrl-stage-count{font-size:.72rem; font-weight:800; padding:2px 9px; border-radius:999px; flex-shrink:0;}
  .ctrl-stage-acc-body{display:none; background:var(--bg); padding:12px;}
  .ctrl-stage-acc.open .ctrl-stage-acc-body{display:block;}
  .ctrl-stage-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:8px; min-width:0;}

  .ctrl-flow-card{
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 10px; transition:.15s; min-width:0;
  }
  .ctrl-flow-card:hover{border-color:var(--purple); transform:translateY(-1px);}
  .ctrl-flow-name{font-size:.74rem; font-weight:700; color:var(--text); margin-bottom:6px; line-height:1.3; word-break:break-word;}
  .ctrl-flow-meta{display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:6px; font-size:.66rem; color:var(--text-faint);}
  .ctrl-flow-dot{width:6px; height:6px; border-radius:50%; flex-shrink:0;}
  .ctrl-flow-vaf{font-size:.7rem; font-weight:800; color:var(--purple);}
  .ctrl-stage-empty{text-align:center; padding:18px 6px; font-size:.72rem; color:var(--text-faint); font-style:italic;}
  .ctrl-flow-vermas{
    margin-top:8px; width:100%; padding:5px 0; border-radius:7px; border:1px solid var(--border-strong);
    background:var(--panel-hover); color:var(--purple); font-size:.68rem; font-weight:700; cursor:pointer; font-family:inherit; transition:.15s;
  }
  .ctrl-flow-vermas:hover{background:rgba(124,108,255,.14); border-color:var(--purple);}

  .ctrl-hito-group-head{
    padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:8px;
    background:var(--panel-hover); border-bottom:1px solid var(--border); border-left:3px solid var(--border-strong);
    font-size:.74rem; font-weight:800; color:var(--text);
  }
  .ctrl-hito-group-count{
    font-size:.7rem; font-weight:800; min-width:22px; height:22px; padding:0 4px; border-radius:999px;
    display:flex; align-items:center; justify-content:center; background:var(--gradient); color:#fff;
  }
  .ctrl-hito-pill{
    display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 14px;
    border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s; font-size:.78rem; color:var(--text-dim);
  }
  .ctrl-hito-pill:last-child{border-bottom:none;}
  .ctrl-hito-pill:hover{background:var(--panel-hover); color:var(--text);}
  .ctrl-hito-pill.active{background:rgba(124,108,255,.12); color:var(--purple); font-weight:700;}
  .ctrl-hito-pill-count{font-size:.72rem; font-weight:700; color:var(--text-faint); min-width:18px; text-align:right;}
  .ctrl-hito-pill.active .ctrl-hito-pill-count{color:var(--purple);}
  .ctrl-hito-clear{padding:9px 14px; font-size:.72rem; color:var(--text-faint); text-align:center; cursor:pointer; border-top:1px solid var(--border); display:none;}
  .ctrl-hito-clear.visible{display:block;}
  .ctrl-hito-clear:hover{color:var(--purple);}
  .ctrl-hito-filterbar{border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--panel); padding:16px; margin-top:20px;}
  .ctrl-hito-filterbar-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px;}
  .ctrl-hito-filterbar-title{font-size:.86rem; font-weight:800; color:var(--text);}
  .ctrl-hito-filter-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:10px;}
  .ctrl-hito-filter-group{border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; min-width:0;}

  .ctrl-client-name{max-width:210px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; text-align:left !important;}
  .ctrl-bar-cell{display:flex; align-items:center; gap:6px; min-width:100px;}
  .ctrl-bar-track{flex:1; height:6px; border-radius:999px; background:var(--panel-hover); overflow:hidden;}
  .ctrl-bar-fill{height:100%; border-radius:999px; background:var(--gradient); min-width:2px;}
  .ctrl-bar-pct{font-size:.68rem; color:var(--text-faint); min-width:30px; text-align:right;}

  /* ══════════════════════════════════════════════════════════════════════
     PANTALLA DE ACCESO — capa de presentación previa al dashboard.
     Tarjeta dividida (hero + panel) sobre un fondo con blobs difuminados y
     glassmorphism. Vive por encima de TODO (z-index 2000: los toasts, que
     eran la capa más alta, están en 1200).
     ══════════════════════════════════════════════════════════════════════ */
  .acceso-overlay{
    position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:24px;
    background:var(--bg);
    opacity:1; transition:opacity .5s ease, backdrop-filter .5s ease;
  }
  /* Blobs de color difuminados: dan profundidad al fondo y son lo que el
     glassmorphism de la tarjeta refracta por detrás. */
  .acceso-overlay::before,
  .acceso-overlay::after{
    content:''; position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none;
    animation:accesoFlotar 14s ease-in-out infinite;
  }
  .acceso-overlay::before{width:46vw; height:46vw; left:-8vw; bottom:-12vw; background:rgba(37,74,242,.42);}
  .acceso-overlay::after{width:38vw; height:38vw; right:-6vw; top:-10vw; background:rgba(124,108,255,.30); animation-delay:-7s;}
  html[data-theme="light"] .acceso-overlay::before{background:rgba(37,74,242,.26);}
  html[data-theme="light"] .acceso-overlay::after{background:rgba(124,108,255,.20);}
  @keyframes accesoFlotar{0%,100%{transform:translate3d(0,0,0) scale(1);} 50%{transform:translate3d(2vw,-2vw,0) scale(1.07);}}

  .acceso-card{
    position:relative; display:grid; grid-template-columns:1fr 1fr; gap:26px;
    width:min(1020px, 100%); padding:26px; border-radius:28px;
    background:rgba(255,255,255,.055); border:1px solid var(--border-strong);
    backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
    box-shadow:0 40px 90px -30px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.07);
  }
  html[data-theme="light"] .acceso-card{background:rgba(255,255,255,.72); box-shadow:0 40px 90px -34px rgba(15,17,25,.32);}

  /* ── Panel izquierdo: hero oscuro con franjas verticales de luz ──
     Recrea el degradado del diseño de referencia con CSS puro (sin imagen):
     base negra→azul + franjas repetidas + máscara que las desvanece arriba. */
  .acceso-hero{
    position:relative; overflow:hidden; border-radius:20px; min-height:430px;
    display:flex; flex-direction:column; justify-content:flex-start; padding:38px 34px;
    background:linear-gradient(180deg,#05050b 0%,#050a1e 34%,#0a2fb8 78%,#1f5bff 100%);
  }
  .acceso-hero::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(90deg,
      rgba(255,255,255,.16) 0 1px, rgba(255,255,255,.05) 1px 3px, transparent 3px 13px);
    -webkit-mask-image:linear-gradient(180deg, transparent 26%, #000 72%);
            mask-image:linear-gradient(180deg, transparent 26%, #000 72%);
    filter:blur(.4px);
  }
  .acceso-hero-txt{position:relative; z-index:1;}
  .acceso-hero h1{
    margin:0 0 16px; color:#fff; font-size:clamp(1.5rem, 2.5vw, 1.95rem);
    font-weight:800; line-height:1.16; letter-spacing:-.032em;
  }
  .acceso-hero p{margin:0; color:rgba(255,255,255,.72); font-size:.86rem; line-height:1.6; max-width:34ch;}

  /* ── Panel derecho: marca + acceso ── */
  .acceso-panel{display:flex; flex-direction:column; justify-content:center; padding:20px 30px; text-align:center;}
  .acceso-brand{display:flex; align-items:center; justify-content:center; gap:11px; margin-bottom:26px;}
  .acceso-brand-mark{
    width:38px; height:38px; border-radius:12px; flex-shrink:0; background:var(--gradient);
    display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px -8px rgba(124,108,255,.65);
  }
  .acceso-brand-name{font-size:1.16rem; font-weight:800; letter-spacing:-.02em; color:var(--text);}
  .acceso-panel h2{margin:0 0 9px; font-size:1.42rem; font-weight:700; letter-spacing:-.028em; color:var(--text);}
  .acceso-panel .acceso-sub{margin:0 0 30px; font-size:.85rem; line-height:1.6; color:var(--text-dim); max-width:38ch; margin-inline:auto;}

  .acceso-btn{
    width:100%; padding:15px 22px; border:none; border-radius:13px; cursor:pointer;
    background:var(--gradient); color:#fff; font-family:inherit; font-size:.92rem; font-weight:700; letter-spacing:.01em;
    display:flex; align-items:center; justify-content:center; gap:10px;
    box-shadow:0 16px 34px -12px rgba(124,108,255,.75); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  .acceso-btn:hover{transform:translateY(-2px); box-shadow:0 22px 42px -12px rgba(124,108,255,.9); filter:brightness(1.06);}
  .acceso-btn:active{transform:translateY(0);}
  /* Anillo de foco como halo de marca semitransparente y con holgura: se lee
     como parte del diseño (no como borde del navegador) pero sigue siendo
     perfectamente visible para quien navega con teclado. */
  .acceso-btn:focus-visible{outline:2px solid rgba(124,108,255,.6); outline-offset:5px;}
  .acceso-btn svg{transition:transform .18s ease;}
  .acceso-btn:hover svg{transform:translateX(4px);}

  .acceso-divisor{display:flex; align-items:center; gap:12px; margin:26px 0 16px; color:var(--text-faint); font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;}
  .acceso-divisor::before, .acceso-divisor::after{content:''; flex:1; height:1px; background:var(--border-strong);}
  .acceso-meta{display:flex; align-items:center; justify-content:center; gap:8px; font-size:.7rem; color:var(--text-faint); line-height:1.5;}
  .acceso-punto{width:5px; height:5px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px rgba(52,211,153,.18);}

  /* ── Animación de ENTRADA (al abrir el sistema) ── */
  @keyframes accesoCardIn{from{opacity:0; transform:translateY(26px) scale(.965);} to{opacity:1; transform:none;}}
  @keyframes accesoItemIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
  .acceso-card{animation:accesoCardIn .72s cubic-bezier(.22,1,.36,1) both;}
  /* Cascada: cada elemento entra escalonado tras la tarjeta. */
  .acceso-hero-txt,
  .acceso-brand,
  .acceso-panel h2,
  .acceso-panel .acceso-sub,
  .acceso-btn,
  .acceso-divisor,
  .acceso-meta{animation:accesoItemIn .6s cubic-bezier(.22,1,.36,1) both;}
  .acceso-hero-txt{animation-delay:.30s;}
  .acceso-brand{animation-delay:.20s;}
  .acceso-panel h2{animation-delay:.28s;}
  .acceso-panel .acceso-sub{animation-delay:.34s;}
  .acceso-btn{animation-delay:.42s;}
  .acceso-divisor{animation-delay:.50s;}
  .acceso-meta{animation-delay:.56s;}

  /* ── Animación de SALIDA + revelado del dashboard ── */
  .acceso-overlay.acceso-saliendo{opacity:0; pointer-events:none;}
  .acceso-overlay.acceso-saliendo .acceso-card{
    animation:accesoCardOut .6s cubic-bezier(.55,0,.68,.53) both;
  }
  @keyframes accesoCardOut{from{opacity:1; transform:none;} to{opacity:0; transform:translateY(-18px) scale(1.04);}}

  /* El dashboard entra en cascada por detrás: barra lateral desde la
     izquierda, barra superior desde arriba y el contenido con fade-up. */
  @keyframes revelarSidebar{from{opacity:0; transform:translateX(-26px);} to{opacity:1; transform:none;}}
  @keyframes revelarTopbar{from{opacity:0; transform:translateY(-18px);} to{opacity:1; transform:none;}}
  @keyframes revelarWorkspace{from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;}}
  .app.app-revelando .sidebar{animation:revelarSidebar .66s cubic-bezier(.22,1,.36,1) both; animation-delay:.10s;}
  .app.app-revelando .topbar{animation:revelarTopbar .60s cubic-bezier(.22,1,.36,1) both; animation-delay:.20s;}
  .app.app-revelando .workspace{animation:revelarWorkspace .68s cubic-bezier(.22,1,.36,1) both; animation-delay:.30s;}

  /* Bloquea el scroll del fondo mientras la pantalla de acceso está activa. */
  body.acceso-activo{overflow:hidden;}

  @media (max-width:860px){
    .acceso-card{grid-template-columns:1fr; padding:18px;}
    .acceso-hero{display:none;}          /* en móvil manda el acceso, no el hero */
    .acceso-panel{padding:26px 14px;}
  }
  /* Respeta a quien pidió menos movimiento: se conserva el diseño y el
     fundido, se eliminan los desplazamientos. */
  @media (prefers-reduced-motion:reduce){
    .acceso-overlay::before, .acceso-overlay::after{animation:none;}
    .acceso-card, .acceso-hero-txt, .acceso-brand, .acceso-panel h2,
    .acceso-panel .acceso-sub, .acceso-btn, .acceso-divisor, .acceso-meta,
    .app.app-revelando .sidebar, .app.app-revelando .topbar, .app.app-revelando .workspace{
      animation-duration:.01ms !important; animation-delay:0ms !important;
    }
    .acceso-btn:hover{transform:none;}
  }