/* ===========================================================================
   DESIGN SYSTEM Mp — Hoja de estilo de NIVEL FAMILIA (chasis canónico)
   Sistema: acceso_legal (legal.mpasociados.cl · Redactor Legal Pro)
   ---------------------------------------------------------------------------
   Misma familia visual que valora.mpasociados.cl y forense.mpasociados.cl.
   Tokens :root idénticos al SSOT de valora. Tipografía Inter + Source Serif 4
   (Google Fonts, @import abajo). Chart.js lo carga el HTML por CDN.
   ---------------------------------------------------------------------------
   Cobertura dual:
   (A) Clases CANÓNICAS de la familia (.sidebar/.nav-item/.nav-group/.card/.kpi
       /.shell/.btn/.sem/.bdg/.page-title/.modal/.toast…) — para que el
       integrador migre legal al chasis estándar.
   (B) Clases NATIVAS actuales de legal (.app/.top/.side/.grp/.userbox/.tb/.fld
       /.fase/.firmado/.visado…) re-mapeadas al mismo look, para que el sistema
       se vea de la familia SIN reescribir su markup de inmediato.
   Responsive (sidebar colapsable < 980px), :focus-visible, contraste AA.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

/* ===== TOKENS CANÓNICOS (idénticos a valora :root — SSOT de marca) ========= */
:root{
  --navy:#0F2549; --navy2:#1A3A6B; --blue:#2E5DA6; --gold:#C8A95A; --gold-d:#A8884A;
  --ink:#1A1A1A; --muted:#4A5568; --mut:#5A6B6E; --gris:#718096; --slate:#475569;
  --bg:#F4F6F9; --card:#fff; --line:#E2E8EC; --line2:#EDF1F5;
  --rojo:#C53030; --rojo-bg:#FCEAEA; --amar:#B7791F; --amar-bg:#FEF6E6;
  --verde:#2F855A; --verde-bg:#E9F5EE; --naranja:#DD6B20;
  --ok:#2F855A; --okbg:#E9F5EE; --warn:#B7791F; --warnbg:#FEF6E6;
  --bad:#C53030; --badbg:#FCEAEA; --info:#2E5DA6; --infobg:#E6EEFA; --slatebg:#F1F5FA;
  --shadow-sm:0 1px 2px rgba(15,37,73,.06),0 1px 3px rgba(15,37,73,.08);
  --shadow-md:0 4px 14px rgba(15,37,73,.10);
  --shadow-lg:0 24px 70px rgba(0,0,0,.35);
  --radius:10px; --radius-sm:6px; --radius-lg:14px;
  --sidebar-w:236px; --topbar-h:56px;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --focus-ring:0 0 0 3px rgba(46,93,166,.35);
}

/* ===== RESET / BASE ======================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);margin:0;background:radial-gradient(1100px 480px at 50% -240px,#EAEFF6 0%,var(--bg) 60%);background-attachment:fixed;color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;font-feature-settings:'cv02','cv03','cv04','ss01'}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer}
img{max-width:100%}
h1,h2,h3,h4{margin:0}
.hidden{display:none!important}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===========================================================================
   TOPBAR — .top (canónico + nativo legal)
   Vidrio navy + filete dorado inferior. Marca · espaciador · usuario · salir.
   =========================================================================== */
.top{background:linear-gradient(118deg,#0E2447 0%,#173C6E 52%,#0F2549 100%);color:#fff;display:flex;align-items:center;gap:16px;padding:0 20px;min-height:var(--topbar-h);position:sticky;top:0;z-index:60;box-shadow:0 1px 0 rgba(200,169,90,.40),0 8px 26px rgba(8,18,40,.34)}
.brand{display:flex;flex-direction:column;line-height:1.05;cursor:pointer}
.logo{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:22px;font-weight:800;letter-spacing:-.5px;color:#fff}
.logo span{color:var(--gold)}
.top .tag,.top .sys{font-size:9.5px;color:var(--gold);letter-spacing:1.6px;text-transform:uppercase;font-weight:600;margin-top:0}
.sys{margin-left:2px}                         /* descriptor del sistema (legal) */
.top .sp,.sp{flex:1}                          /* espaciador */
.ubox,.userbox{display:flex;align-items:center;gap:10px;margin-left:auto}
.uname,.who b{font-size:12.5px;color:#dbe4f1;font-weight:600;display:block}
.who small{font-size:10.5px;color:#9fb2cd}
.who{display:flex;flex-direction:column;line-height:1.25;text-align:right}
.urol{font-size:9.5px;color:var(--gold);text-transform:uppercase;letter-spacing:1px;font-weight:700;text-align:right}
/* badge de rol en topbar */
.badge-rol{background:rgba(200,169,90,.18);color:var(--gold);border:1px solid rgba(200,169,90,.45);border-radius:20px;padding:3px 11px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;white-space:nowrap}
/* botón usuario / salir */
.ubtn,.btn-salir{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-sm);padding:7px 12px;font-size:12.5px;font-weight:600;transition:background .15s}
.ubtn:hover,.btn-salir:hover{background:rgba(255,255,255,.22)}
.top :focus-visible{box-shadow:0 0 0 3px rgba(200,169,90,.55)}
.crumb{font-size:12.5px;color:#cdd7e6}
.crumb b{color:#fff}.crumb a{color:#aebfd8;cursor:pointer}
/* hamburguesa móvil */
.navtgl,.navtoggle{display:none;background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.20);border-radius:8px;width:38px;height:34px;font-size:18px;line-height:1;align-items:center;justify-content:center}
.navtgl:hover,.navtoggle:hover{background:rgba(255,255,255,.18)}

/* ===========================================================================
   LAYOUT — .app / .shell / .caso-layout (grid sidebar + main)
   =========================================================================== */
.shell,.caso-layout{display:grid;grid-template-columns:var(--sidebar-w) 1fr;gap:24px;max-width:1680px;margin:0 auto;padding:22px 26px;align-items:start;position:relative}
.wrap{max-width:1680px;margin:0 auto;padding:22px 28px}
.cl-main,main{min-width:0;animation:fadeUp .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* App con header sticky + grid interno (markup nativo legal: .app > .top + .side + main) */
.app{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--topbar-h) 1fr;grid-template-areas:"top top" "side main"}
.app>.top{grid-area:top}
.app>.side{grid-area:side}
.app>main,.app>.view,.app>#view{grid-area:main;min-width:0;padding:22px 26px;animation:fadeUp .4s cubic-bezier(.2,.7,.2,1) both}

/* ===========================================================================
   SIDEBAR — .sidebar (canónico) y .side (nativo legal). Navy premium.
   Navegación agrupada: encabezados de grupo + items con icono.
   =========================================================================== */
.sidebar,.side{background:linear-gradient(180deg,#0E2447 0%,#0F2549 55%,#10294F 100%);border:1px solid rgba(255,255,255,.07);box-shadow:0 10px 30px rgba(15,37,73,.22),inset -1px 0 0 rgba(0,0,0,.18);color:#E3EBF7}
.sidebar{position:sticky;top:calc(var(--topbar-h) + 22px);align-self:start;border-radius:var(--radius-lg);padding:14px 11px;max-height:calc(100vh - var(--topbar-h) - 44px);overflow:auto}
/* .side nativo: ocupa la columna izquierda completa bajo el topbar */
.side{padding:16px 11px;overflow:auto}

/* Encabezado de grupo (canónico .nav-group-h y nativo .grp) */
.nav-group{margin-bottom:4px}
.nav-group-h,.grp{width:100%;border:none;background:none;text-align:left;display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#C8D6EE;padding:11px 10px 5px;cursor:default}
.nav-group-h{cursor:pointer}
.grp:first-child{padding-top:4px}
.nav-group-h .gsign{width:16px;flex:none;text-align:center;font:800 16px/1 var(--sans);color:var(--gold);transition:color .15s}
.nav-group-h .gsign::before{content:"\2212"}
.nav-group.collapsed .nav-group-h .gsign::before{content:"+"}
.nav-group-h:hover{color:#fff}
.nav-group-h:hover .gsign{color:#E2C77E}
.nav-group-body{margin-left:22px;padding-left:7px;border-left:1px solid rgba(200,169,90,.32)}
.nav-group.collapsed .nav-group-body{display:none}

/* Item de navegación (canónico .nav-item y nativo .side > button) */
.nav-item,.side button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:none;background:none;color:#fff;font-family:var(--sans);font-size:13.5px;font-weight:600;padding:9px 11px;border-radius:7px;border-left:3px solid transparent;margin:2px 0;transition:background .15s,color .15s;cursor:pointer}
.nav-item:hover,.side button:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.on,.side button.active,.side button.on{background:linear-gradient(90deg,rgba(46,93,166,.34),rgba(46,93,166,.08));color:#fff;border-left-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}
.nav-item svg,.side button svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:2;opacity:.9}
.nav-item.on svg,.side button.active svg{color:var(--gold);opacity:1}
/* icono emoji nativo de legal (.ic) */
.side button .ic,.nav-item .ic{width:20px;flex:none;text-align:center;font-size:15px;opacity:.92}
/* contador rojo */
.nav-badge{margin-left:auto;background:var(--rojo);color:#fff;border-radius:10px;font-size:10px;font-weight:700;padding:1px 7px;box-shadow:0 1px 3px rgba(0,0,0,.25)}

/* Overlay del sidebar en móvil */
.nav-overlay{display:none}

/* ===========================================================================
   ENCABEZADO DE VISTA — eyebrow / page-title / lede / .view-head
   =========================================================================== */
.flexb,.view-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.eyebrow{font:700 11px/1 var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-d);display:flex;align-items:center;gap:8px;margin:0 0 7px}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold-d))}
.page-title,.view-head h1,.view-head>h2{font-family:var(--serif);font-weight:600;font-size:27px;letter-spacing:-.3px;color:var(--navy2);position:relative;padding-left:15px;line-height:1.15;margin:0}
.page-title::before,.view-head h1::before,.view-head>h2::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:3px;background:linear-gradient(180deg,#D8BC75,#B8964B)}
.lede,.view-head .sub{font-size:12.5px;color:var(--mut);max-width:820px;line-height:1.55;margin:4px 0 0}

/* ===========================================================================
   CARDS — .card  (+ variante .card.hub destacada con borde dorado)
   =========================================================================== */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .2s ease,border-color .2s}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(15,37,73,.12);border-color:#D3DCEA}
.card.flat:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--line)}
.card.hub{border-top:3px solid var(--gold);box-shadow:var(--shadow-md)}
.card h2{font-family:var(--serif);color:var(--navy2);font-size:18px;margin:0 0 12px;font-weight:600}
.card h3{font-family:var(--serif);color:var(--navy2);font-size:15.5px;margin:16px 0 8px;font-weight:600}
.card .sub{font-size:12px;color:var(--mut);margin:-8px 0 14px}

/* ===========================================================================
   KPI / STAT CARDS — .kpis grid + .kpi (con acento superior y variantes color)
   =========================================================================== */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi,.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 17px 14px;min-height:108px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .2s}
.kpi::after,.stat::after{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--gold),rgba(200,169,90,0) 65%)}
.kpi:hover,.stat:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(15,37,73,.14);border-color:#D3DCEA}
.kpi .n,.kpi .v,.stat .n{font-size:32px;font-weight:700;line-height:1.02;letter-spacing:-.6px;color:var(--navy2);font-variant-numeric:tabular-nums}
.kpi .l,.stat .l{font-size:12px;color:var(--navy2);font-weight:600;margin-top:2px}
.kpi.r{background:linear-gradient(180deg,#FDF2F2,#fff)}.kpi.r::after{background:linear-gradient(90deg,#C53030,rgba(197,48,48,0) 70%)}
.kpi.a{background:linear-gradient(180deg,#FEF8EC,#fff)}.kpi.a::after{background:linear-gradient(90deg,#B7791F,rgba(183,121,31,0) 70%)}
.kpi.v{background:linear-gradient(180deg,#F2FAF6,#fff)}.kpi.v::after{background:linear-gradient(90deg,#2F855A,rgba(47,133,90,0) 70%)}
.kpi.g{background:linear-gradient(180deg,#F4F6FA,#fff)}.kpi.g::after{background:linear-gradient(90deg,#718096,rgba(113,128,150,0) 70%)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .kpi .n,.stat .n{background:linear-gradient(180deg,#1A3A6B,#2E5DA6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .kpi.v .n{background:linear-gradient(180deg,#2F855A,#38A169);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .kpi.a .n{background:linear-gradient(180deg,#B7791F,#D69E2E);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .kpi.r .n{background:linear-gradient(180deg,#C53030,#E53E3E);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}

/* ===========================================================================
   TABLAS — densas, header navy con filete dorado, filas alternas + hover
   .tb es el wrapper nativo de legal (scroll horizontal en móvil)
   =========================================================================== */
.tb{width:100%;overflow-x:auto;border-radius:var(--radius-sm)}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
th{text-align:left;background:linear-gradient(180deg,#214479,#1A3A6B);color:#fff;padding:9px 12px;font-weight:600;font-size:12px;border-bottom:2px solid var(--gold);white-space:nowrap}
th:first-child{border-top-left-radius:var(--radius-sm)}
th:last-child{border-top-right-radius:var(--radius-sm)}
td{padding:9px 12px;border-bottom:1px solid var(--line2);vertical-align:middle;font-variant-numeric:tabular-nums}
tbody tr{transition:background .12s}
tbody tr:nth-child(even){background:#F7F9FC}
tbody tr:hover td{background:var(--infobg)}
tbody tr:last-child td{border-bottom:none}
.num{text-align:right;font-variant-numeric:tabular-nums}
.neg{color:var(--rojo)}
.row-click,.rowc{cursor:pointer}
.row-click:hover td,.rowc:hover td{background:#EFF4FB}

/* ===========================================================================
   BADGES DE ESTADO / SEMÁFOROS
   .sem (semáforo pill), .bdg (badge), .chip (etiqueta), .dot (punto color)
   + estados nativos legal (.firmado/.visado/.borrador/.revision/.rechazado/
     .anulado/.archivado/.constr) y la "píldora de fase" (.fase)
   =========================================================================== */
/* Semáforo */
.sem{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:11.5px;padding:3px 11px;border-radius:20px;line-height:1.3}
.sem.verde,.sem.bajo,.sem.ok{background:var(--verde-bg);color:var(--verde)}
.sem.amarillo,.sem.alto,.sem.medio,.sem.warn{background:var(--amar-bg);color:var(--amar)}
.sem.rojo,.sem.critico,.sem.bad{background:var(--rojo-bg);color:var(--rojo)}
.sem.gris,.sem.sin_evaluar{background:var(--slatebg);color:var(--gris)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot.verde,.dot.bajo{background:var(--verde)}.dot.amarillo,.dot.alto{background:var(--amar)}
.dot.rojo,.dot.critico{background:var(--rojo)}.dot.medio{background:var(--naranja)}.dot.gris{background:var(--gris)}

/* Badge genérico (.bdg) + semánticos */
.bdg{display:inline-block;padding:3px 11px;border-radius:20px;font-size:11px;font-weight:600;line-height:1.4}
.b-info{background:var(--infobg);color:var(--info)}
.b-ok{background:var(--okbg);color:var(--ok)}
.b-warn{background:var(--warnbg);color:var(--warn)}
.b-bad{background:var(--badbg);color:var(--bad)}

/* Chip / etiqueta */
.chip{display:inline-block;background:var(--slatebg);color:var(--slate);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;margin:2px 3px 2px 0}
.chip.act{background:var(--infobg);color:var(--navy2)}
.chip.si{background:var(--okbg);color:var(--ok)}
.chip.no{background:var(--slatebg);color:var(--gris)}
.tagx{display:inline-block;background:var(--infobg);color:var(--navy2);border-radius:6px;padding:2px 8px;font-size:10.5px;font-weight:700;letter-spacing:.3px}

/* Píldora de estado/fase (nativo legal) — base + estados por color */
.estado-pill,.fase{display:inline-block;padding:3px 11px;border-radius:20px;font-size:11.5px;font-weight:700;background:var(--infobg);color:var(--navy2);text-transform:capitalize;line-height:1.4}
.firmado,.visado,.presentado,.archivado,.activo,.active{background:var(--verde-bg);color:var(--verde)}
.borrador,.revision,.constr,.todo{background:var(--amar-bg);color:var(--amar)}
.rechazado,.anulado,.err{background:var(--rojo-bg);color:var(--rojo)}
.suspendido,.done{background:var(--infobg);color:var(--navy2)}
/* Cuando esos estados modifican .fase/.estado-pill ganan por mayor especificidad */
.fase.firmado,.fase.visado,.estado-pill.firmado{background:var(--verde-bg);color:var(--verde)}
.fase.borrador,.fase.revision,.fase.constr,.estado-pill.suspendido{background:var(--amar-bg);color:var(--amar)}
.fase.rechazado,.fase.anulado{background:var(--rojo-bg);color:var(--rojo)}

/* ===========================================================================
   ALERTAS — banda lateral por severidad
   =========================================================================== */
.alerta{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;border:1px solid var(--line);margin-bottom:8px;background:#fff;box-shadow:0 1px 2px rgba(15,37,73,.05)}
.alerta.critico,.alerta.rojo{border-left:4px solid var(--rojo);background:var(--rojo-bg)}
.alerta.alto{border-left:4px solid var(--naranja);background:#FFF7ED}
.alerta.medio,.alerta.amarillo{border-left:4px solid var(--amar);background:var(--amar-bg)}
.alerta.bajo,.alerta.verde{border-left:4px solid var(--verde);background:var(--verde-bg)}
.alerta .am{font-size:12.5px;color:var(--ink)}
.alerta .as{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700;margin-bottom:2px}
/* Nota legal / aviso suave (nativo legal: .legalnote / .notalegal) */
.legalnote,.notalegal{font-size:11px;color:var(--muted);background:#F7FAFC;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:8px;padding:10px 12px;margin-top:12px;line-height:1.55}

/* ===========================================================================
   FORMULARIOS — labels, inputs, selects, textareas, grids
   .fld es el campo nativo de legal (label.fld > span + control)
   =========================================================================== */
label.fl,label.fld>span,.lbl{display:block;font-size:11.5px;font-weight:600;color:var(--navy2);margin-bottom:4px}
label.fld{display:block;margin-bottom:11px}
.inp,input,select,textarea,select.inp,textarea.inp{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.inp:focus,input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,93,166,.15);outline:none}
textarea,textarea.inp{min-height:74px;resize:vertical}
.mono,.tb-code{font-family:ui-monospace,Menlo,Consolas,monospace}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--blue)}
.grid{display:grid;gap:11px}
.grid2,.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3,.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}

/* ===========================================================================
   BOTONES — primario / secundario / ghost / gold / danger / ok + tamaños
   =========================================================================== */
.btn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(180deg,#234A86,#1A3A6B);color:#fff;border:none;border-radius:7px;padding:9px 15px;font-size:13px;font-weight:600;box-shadow:0 1px 2px rgba(15,37,73,.22),inset 0 1px 0 rgba(255,255,255,.07);transition:background .15s,box-shadow .15s,transform .08s}
.btn:hover{background:linear-gradient(180deg,#1A3A6B,#142F58);box-shadow:0 6px 16px rgba(15,37,73,.30);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:2}
.btn.sec{background:#fff;color:var(--navy2);border:1px solid #C9D6E8;box-shadow:0 1px 2px rgba(15,37,73,.06)}
.btn.sec:hover{background:#F1F5FA;border-color:var(--navy2)}
.btn.ghost{background:transparent;color:var(--blue);border:1px solid transparent;box-shadow:none;padding:6px 10px}
.btn.ghost:hover{background:var(--line2);text-decoration:none}
.btn.gold{background:linear-gradient(180deg,#D8BC75,#C8A95A);color:#3A2E10;border:none;box-shadow:0 1px 2px rgba(120,90,30,.25)}
.btn.gold:hover{background:linear-gradient(180deg,#CDAE60,#B8964B);box-shadow:0 6px 16px rgba(150,110,40,.30)}
.btn.danger{background:var(--bad);color:#fff;border:none}
.btn.danger:hover{filter:brightness(.94)}
.btn.ok{background:linear-gradient(180deg,#34936A,#2F855A);color:#fff;border:none}
.btn.ok:hover{filter:brightness(.96)}
.btn.sm{padding:6px 11px;font-size:12px}
.btn.lg{padding:12px 20px;font-size:14px}
.btn.block{width:100%;justify-content:center}
.btnrow,.btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* Ghost suelto (clase nativa .ghost de legal, sin .btn) */
.ghost:not(.btn){background:transparent;color:var(--blue);border:1px solid transparent;border-radius:7px;padding:6px 10px;font-weight:600;transition:background .15s}
.ghost:not(.btn):hover{background:var(--line2)}
/* gold suelto (clase nativa .gold de legal, sin .btn) */
.gold:not(.btn):not(.logo span){color:var(--gold-d)}

/* ===========================================================================
   TABS — pestañas horizontales bajo un título
   =========================================================================== */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 16px;flex-wrap:wrap}
.tab{appearance:none;border:none;background:none;color:var(--muted);font-family:var(--sans);font-size:13px;font-weight:600;padding:10px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color .15s,border-color .15s}
.tab:hover{color:var(--navy2)}
.tab.on,.tab.active{color:var(--navy2);border-bottom-color:var(--gold)}
.tabpane{display:none}
.tabpane.on,.tabpane.active{display:block;animation:fadeUp .3s ease both}

/* ===========================================================================
   STEPPER / ONBOARDING — .onb-steps (nativo legal)
   =========================================================================== */
.onb-steps{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 16px}
.onb-steps .step,.onb-steps>div{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px 13px}
.onb-steps .done,.onb-steps>.done{background:var(--verde-bg);color:var(--verde);border-color:#BFD9C9}
.onb-steps .todo,.onb-steps>.todo{background:var(--amar-bg);color:var(--amar);border-color:#E9D7AC}

/* ===========================================================================
   TIMELINE — bitácora / custodia (.tl)
   =========================================================================== */
.tl{position:relative;padding-left:22px;margin-left:6px}
.tl::before{content:'';position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:linear-gradient(180deg,rgba(200,169,90,.5),var(--line))}
.tl-it{position:relative;padding:0 0 14px}
.tl-it::before{content:'';position:absolute;left:-21px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--blue);border:2px solid #fff;box-shadow:0 0 0 2px rgba(46,93,166,.18)}
.tl-it .tl-h{font-size:12.5px;font-weight:700;color:var(--navy2)}
.tl-it .tl-m{font-size:12px;color:var(--muted);margin-top:2px}
.tl-it .tl-d{font-size:10.5px;color:var(--gris);margin-top:2px}

/* ===========================================================================
   GRÁFICOS — caja contenedora para canvas Chart.js
   =========================================================================== */
.chartbox{position:relative;height:280px}
.chartbox.sm{height:200px}
.dim{display:flex;align-items:center;gap:10px;margin:7px 0}
.dim .bar{flex:1;height:8px;background:#EDF1F5;border-radius:5px;overflow:hidden}
.dim .bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#2E5DA6,#1A3A6B)}
.dim .v{width:42px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;font-size:12.5px}

/* ===========================================================================
   MODAL + TOAST
   =========================================================================== */
.modal-bg{position:fixed;inset:0;background:rgba(15,37,73,.55);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:200;overflow:auto}
.modal{background:#fff;border-radius:14px;border-top:4px solid var(--gold);box-shadow:0 30px 80px rgba(0,0,0,.40);width:100%;max-width:620px;padding:22px 24px}
.modal.wide{max-width:880px}
.modal h2{margin:0 0 4px;font-family:var(--serif);font-size:18px;color:var(--navy2);font-weight:600}
.modal .mc{font-size:12.5px;color:var(--muted);margin-bottom:16px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
#toast-root,#toasts{position:fixed;right:18px;bottom:18px;z-index:400;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--navy);color:#fff;padding:11px 16px;border-radius:9px;box-shadow:0 10px 30px rgba(0,0,0,.30);font-size:13px;max-width:340px;animation:fadeUp .2s ease}
.toast.err{background:var(--rojo)}.toast.ok{background:var(--verde)}

/* ===========================================================================
   ESTADOS VACÍOS / UTILIDADES
   =========================================================================== */
.empty,.emptybox{font-size:12.5px;color:var(--muted);background:#F7FAFC;border:1px dashed var(--line);border-radius:var(--radius-sm);padding:18px;text-align:center}
.muted{color:var(--mut)}.small{font-size:11.5px}.b{font-weight:700}
.center{text-align:center}.right{text-align:right}.left{text-align:left}
.flex,.row{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}.wrapf{flex-wrap:wrap}
.mt0{margin-top:0}.mt8{margin-top:8px}.mt16{margin-top:16px}.mb0{margin-bottom:0}

/* Spinner (nativo legal) */
.spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:var(--gold);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===========================================================================
   FOOTER — .foot / .footbar
   =========================================================================== */
.foot,.footbar{text-align:center;font-size:11px;color:var(--gris);padding:22px 16px 30px}
.foot b,.footbar b{color:var(--muted)}
.gold-line{height:2px;border:none;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:16px 0}

/* ===========================================================================
   LOGIN — index.php (.brand / .card / .tag / .sub / .err / .hint / .ac)
   Pantalla centrada con gradiente navy.
   =========================================================================== */
.login-wrap,body.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);padding:20px}
.login-card,.ac{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:34px 32px;width:100%;max-width:380px}
.ac .logo,.login-card .logo{color:var(--navy);text-align:center;font-size:30px;font-weight:800}
.ac .logo span,.login-card .logo span{color:var(--gold)}
.ac .tag,.login-card .lt{text-align:center;font-size:10px;color:var(--gold);letter-spacing:2px;text-transform:uppercase;font-weight:700;margin:4px 0 22px}
.ac .sub,.login-card .sub{text-align:center;font-size:12.5px;color:var(--muted);margin:-14px 0 20px}
.ac .err,.login-card .err{background:var(--rojo-bg);color:var(--rojo);border:1px solid #F0C4C4;border-radius:8px;padding:9px 12px;font-size:12.5px;margin-bottom:14px}
.ac .hint,.login-card .hint{font-size:11px;color:var(--gris);text-align:center;margin-top:14px}

/* ===========================================================================
   RESPONSIVE — sidebar colapsable < 980px (drawer deslizante + overlay)
   =========================================================================== */
@media(max-width:980px){
  .shell,.caso-layout,.wrap{grid-template-columns:1fr;padding:16px 14px}
  .grid2,.grid3,.g2,.g3{grid-template-columns:1fr}
  /* App nativo legal: el grid pasa a una sola columna y el side se vuelve drawer */
  .app{grid-template-columns:1fr;grid-template-areas:"top" "main"}
  .app>main,.app>.view,.app>#view{padding:16px 14px}
  .sidebar,.side{position:fixed;left:0;top:0;bottom:0;width:280px;max-width:84vw;z-index:120;border-radius:0;max-height:none;transform:translateX(-100%);transition:transform .22s ease}
  .sidebar.open,.side.open{transform:translateX(0)}
  .nav-overlay.open{display:block;position:fixed;inset:0;background:rgba(15,37,73,.40);z-index:110}
  .navtgl,.navtoggle{display:inline-flex}
  .page-title,.view-head h1{font-size:22px}
  .who{display:none}                      /* en móvil solo rol + salir */
}
@media(max-width:560px){
  .kpis{grid-template-columns:1fr 1fr}
  .badge-rol{display:none}
}