:root{
  --tinta:#173A4D; --tinta-2:#1F4A63;
  --teal:#5E97A4; --teal-claro:#8FB8C1;
  --fondo:#F6F4EF; --fondo-2:#EAE7DF;
  --linea:#C7D2D5; --gris:#6A8291;
  --panel:#fff;
  --ok:#0E8A5F; --alerta:#C2413B; --ambar:#B08A2E;
  --texto:#173A4D;
  --sidebar-w:236px; --sidebar-w-min:60px; --topbar-h:56px;
  --r:8px; --sombra:0 1px 2px rgba(23,58,77,.06),0 4px 16px rgba(23,58,77,.06);
}
:root[data-tema="oscuro"]{
  --fondo:#0f1a20; --fondo-2:#22333c;
  --linea:#31454f; --gris:#9db0b8;
  --panel:#16242c; --texto:#e7edf0;
  --sombra:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.35);
}
:root[data-tema="oscuro"] input,:root[data-tema="oscuro"] select,:root[data-tema="oscuro"] textarea{background:var(--panel);color:var(--texto)}
:root[data-tema="oscuro"] .modal{background:rgba(0,0,0,.6)}
.chip-filtro{border:1px solid var(--linea);background:var(--panel);color:var(--gris);padding:5px 11px;border-radius:18px;cursor:pointer;font-size:12px;font-weight:600;transition:all .12s}
.chip-filtro:hover{border-color:var(--teal)}
.chip-filtro.activo{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.chip-filtro b{opacity:.65;font-weight:700;margin-left:2px}
.segmento{display:inline-flex;background:var(--fondo-2);border-radius:9px;padding:3px;gap:2px}
.segmento .fin-tab{border:none;background:transparent;color:var(--gris);padding:7px 16px;border-radius:6px;cursor:pointer;font:600 13px inherit}
.segmento .fin-tab.activo{background:var(--panel);color:var(--texto);box-shadow:0 1px 3px rgba(23,58,77,.14)}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:system-ui,Segoe UI,sans-serif;background:var(--fondo);color:var(--texto);font-size:14px;line-height:1.45}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:var(--teal)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--linea);border-radius:9px}

/* ---------- layout ---------- */
#app{display:none;height:100%}
body.autenticado #app{display:flex}
#sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--tinta);color:#fff;
  display:flex;flex-direction:column;transition:width .18s ease;overflow:hidden;
}
#app.colapsado #sidebar{width:var(--sidebar-w-min);flex-basis:var(--sidebar-w-min)}
.sb-marca{display:flex;align-items:center;justify-content:center;padding:10px 12px;height:var(--topbar-h);flex:0 0 auto;overflow:hidden}
.sb-marca img{height:40px;width:auto;background:#fff;border-radius:9px;padding:3px 7px;box-shadow:0 1px 4px rgba(0,0,0,.2)}
#app.colapsado .sb-marca img{height:34px;padding:2px 3px}
.sb-nav{flex:1;overflow-y:auto;padding:8px 0}
.sb-item{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:11px 18px;color:#AEC4CE;font-weight:600;font-size:14px;white-space:nowrap;position:relative;
}
.sb-item .ico{flex:0 0 22px;display:flex;align-items:center;justify-content:center}
.sb-item .ico svg{width:20px;height:20px;display:block}
.sb-item:hover{background:rgba(255,255,255,.07);color:#fff}
.sb-item.on{background:rgba(255,255,255,.12);color:#fff}
.sb-item.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal-claro)}
#app.colapsado .sb-item .txt{display:none}
.sb-sep{border-top:1px solid rgba(255,255,255,.1);margin:8px 14px}
.sb-pie{padding:12px 16px;font-size:11px;color:#7E98A8;white-space:nowrap}
#app.colapsado .sb-pie{display:none}

#contenido{flex:1;display:flex;flex-direction:column;min-width:0;height:100%}
#topbar{
  display:flex;align-items:center;gap:14px;height:var(--topbar-h);flex:0 0 var(--topbar-h);
  padding:0 18px;background:var(--panel);border-bottom:1px solid var(--linea);
}
#btnColapsar{font-size:20px;color:var(--gris);padding:4px 8px;border-radius:6px}
#btnColapsar:hover{background:var(--fondo-2)}
#tituloVista{font-weight:700;font-size:17px}
.tb-sp{flex:1}
.tb-buscar{position:relative;flex:0 1 340px}
#busqGlobal{width:100%;padding:8px 12px;border:1px solid var(--linea);border-radius:20px;background:var(--fondo);font-size:13px}
#busqGlobal:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(94,151,164,.2);background:var(--panel)}
#busqResultados{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);box-shadow:0 8px 30px rgba(23,58,77,.18);max-height:60vh;overflow-y:auto;display:none;z-index:2000}
#busqResultados.on{display:block}
.bg-cab{padding:6px 12px;font:600 10px ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);background:var(--fondo)}
.bg-item{display:flex;gap:9px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--fondo-2);cursor:pointer;font-size:13px}
.bg-item:hover{background:var(--azul-claro)}
.bg-item small{color:var(--gris);margin-left:auto}
#selUnidad{padding:7px 11px;border:1px solid var(--linea);border-radius:6px;background:var(--fondo);font-weight:600}
.tb-user{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:20px;background:var(--fondo-2);font-size:13px}
.tb-user .av{width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
#btnTema{background:none;border:none;font-size:17px;cursor:pointer;padding:4px 6px;border-radius:6px;line-height:1}
#btnTema:hover{background:var(--fondo-2)}
#btnSalir{color:var(--gris);font-weight:600;font-size:13px;padding:6px 10px;border:1px solid var(--linea);border-radius:6px}
#btnSalir:hover{color:var(--alerta);border-color:var(--alerta)}
#vista{flex:1;overflow:auto;padding:22px}
#vista > .pag,#vista > div{animation:aparecer .2s ease}
@keyframes aparecer{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#vista > .pag,#vista > div{animation:none}}

/* ---------- componentes ---------- */
.pag{max-width:1200px;margin:0 auto}
.pag h1{margin:0 0 4px;font-size:22px;font-weight:800;letter-spacing:-.02em}
.pag .sub{color:var(--gris);margin:0 0 18px}
.barra{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.barra input[type=search],.barra input[type=text],.barra select{padding:8px 11px;border:1px solid var(--linea);border-radius:6px;background:var(--panel)}
.barra input[type=search]{flex:1;min-width:180px}
.tarjeta{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--sombra);overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:10px 13px;background:var(--fondo);border-bottom:1px solid var(--linea);font:600 10px ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
td{padding:10px 13px;border-bottom:1px solid var(--fondo-2);vertical-align:middle}
tbody tr:hover{background:var(--fondo)}
.btn{padding:8px 15px;border-radius:6px;font-weight:600;font-size:13px;background:var(--tinta);color:#fff}
.btn:hover{opacity:.9}
.btn.sec{background:var(--fondo-2);color:var(--texto)}
.btn.peligro{background:var(--alerta);color:#fff}
.btn.chico{padding:5px 10px;font-size:12px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;color:#fff;white-space:nowrap}
.chip.gris{background:var(--fondo-2);color:var(--texto)}
.chip.ok{background:var(--ok)} .chip.off{background:var(--gris)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:20px}
.kpi{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:16px;box-shadow:var(--sombra)}
.kpi .v{font-weight:800;font-size:26px;line-height:1}
.kpi .l{font:600 10px ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);margin-top:6px}
.vacio{color:var(--gris);font-style:italic;padding:26px;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-h{text-align:center;font:600 10px ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);padding:4px 0}
.cal-cell{background:var(--panel);border:1px solid var(--linea);border-radius:6px;min-height:92px;padding:4px 5px;overflow:hidden}
.cal-cell.cal-off{background:transparent;border:none}
.cal-cell.cal-hoy{border-color:var(--teal);box-shadow:0 0 0 2px rgba(94,151,164,.25)}
.cal-num{font-size:12px;font-weight:700;color:var(--gris);margin-bottom:3px}
.cal-hoy .cal-num{color:var(--teal)}
.cal-ev{font-size:10.5px;color:#fff;border-radius:3px;padding:2px 5px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cal-mas{font-size:10px;color:var(--gris);padding-left:3px}
@media(max-width:720px){.cal-cell{min-height:64px}.cal-ev{font-size:0;padding:3px}.cal-ev::before{content:"•";font-size:12px}}
.alerta-item{display:flex;gap:10px;align-items:flex-start;padding:9px 6px;border-bottom:1px solid var(--fondo-2);cursor:pointer;font-size:13.5px}
.alerta-item:last-child{border-bottom:none}
.alerta-item:hover{background:var(--fondo)}
.alerta-item span:first-child{flex:0 0 auto}
.placeholder{background:var(--panel);border:1px dashed var(--linea);border-radius:var(--r);padding:50px 24px;text-align:center;color:var(--gris)}
.placeholder .ic{margin-bottom:14px;color:var(--teal)}
.placeholder .ic svg{width:46px;height:46px}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(23,58,77,.5);display:flex;align-items:center;justify-content:center;z-index:3000;padding:16px}
.modal-c{background:var(--panel);border-radius:12px;width:100%;max-width:520px;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.modal-c.ancho{max-width:840px}
.modal-c.grande{max-width:960px}
.modal-c.ancho .modal-b{padding:20px 24px}
@media(min-width:760px){.modal-c.ancho .modal-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}}
.modal-h{padding:16px 20px;border-bottom:1px solid var(--fondo-2);display:flex;align-items:center}
.modal-h h3{margin:0;font-size:16px;font-weight:700;flex:1}
.modal-b{padding:18px 20px;overflow-y:auto}
.modal-f{padding:14px 20px;border-top:1px solid var(--fondo-2);display:flex;gap:9px;justify-content:flex-end}
.campo{margin-bottom:13px}
.campo label{display:block;font:600 10px ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);margin-bottom:5px}
.campo input,.campo select{width:100%;padding:9px 11px;border:1px solid var(--linea);border-radius:6px}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(94,151,164,.2)}
.cerrar{font-size:22px;color:var(--gris);line-height:1}
.perm-grid{display:grid;grid-template-columns:1fr auto;gap:7px 12px;align-items:center}
.perm-grid label{font-size:13px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--tinta);margin:0}
.perm-grid select{padding:5px 8px;border:1px solid var(--linea);border-radius:5px}

/* ---------- login ---------- */
#login{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:var(--tinta)}
body.autenticado #login{display:none}
#login .card{background:var(--fondo);border-radius:14px;padding:36px 32px;width:min(360px,92vw);box-shadow:0 18px 50px rgba(0,0,0,.35);text-align:center}
#login h1{margin:0;font-size:32px;letter-spacing:.22em;color:var(--tinta);font-weight:800}
#login .login-logo{display:block;width:150px;max-width:70%;height:auto;margin:0 auto 10px;border-radius:14px}
#login .sub{margin:2px 0 24px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:600}
#login label{display:block;text-align:left;font:600 10px ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);margin:12px 0 5px}
#login input{width:100%;padding:11px 13px;border:1px solid var(--linea);border-radius:6px;font-size:15px}
.pass-wrap{display:flex;align-items:stretch;width:100%}
.pass-wrap > input{flex:1 1 auto;min-width:0;width:auto !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}
.pass-wrap > .ver-clave{flex:0 0 46px;display:flex;align-items:center;justify-content:center;background:var(--fondo-2);border:1px solid var(--linea);border-left:none;border-radius:0 6px 6px 0;cursor:pointer;font-size:18px;opacity:.75;padding:0;margin:0;-webkit-appearance:none;color:inherit}
.pass-wrap > .ver-clave:hover,.pass-wrap > .ver-clave:active{opacity:1;background:var(--linea)}
#login input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(94,151,164,.25)}
#login button{width:100%;margin-top:22px;padding:12px;border-radius:6px;background:var(--tinta);color:#fff;font-size:15px;font-weight:600}
#loginError{color:var(--alerta);font-size:13px;min-height:18px;margin-top:12px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(70px);background:var(--tinta);color:#fff;padding:11px 20px;border-radius:22px;font-size:13px;z-index:5000;opacity:0;transition:all .25s;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.toast.on{transform:translateX(-50%);opacity:1}

@media(max-width:720px){
  #sidebar{position:fixed;z-index:1500;top:0;bottom:0;left:0;transform:translateX(-100%);box-shadow:4px 0 24px rgba(0,0,0,.25)}
  #app.abierto #sidebar{transform:none}
  #app.colapsado #sidebar{width:var(--sidebar-w);flex-basis:var(--sidebar-w)}
  #app.abierto::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1400}
  #topbar{padding:0 10px;gap:8px}
  #nombreUsuario{display:none}
  #tituloVista{font-size:15px}
  #vista{padding:14px}
  .pag h1{font-size:19px}
  #topbar{gap:8px}
  .tb-buscar{display:none}
  .tb-user{display:none}
  #selUnidad{max-width:132px;font-size:12px;padding:6px 8px}
  .kpi{padding:13px}
  .kpi .v{font-size:22px}
  .segmento{max-width:100%;overflow-x:auto}
  .modal{padding:8px}
  .modal-b{padding:14px 16px}
  .modal-c.ancho .modal-b{padding:14px 16px}
}