:root{--azul:#1A6DB5;--azul-osc:#0F4F8A;--marino:#0E2238;--fondo:#EEF3F8;--tinta:#122033;--gris:#5B6B7F;--borde:#DCE5EF;--borde2:#E6EDF4}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--tinta);font-size:14px}
a{color:var(--azul);text-decoration:none}a:hover{color:var(--azul-osc)}
h1,h2,h3{font-family:Sora,Inter,sans-serif;margin:0}
h1{font-size:22px;letter-spacing:-.3px}h2{font-size:15px}
.layout{display:flex;flex-wrap:wrap;min-height:100vh}
aside.nav{width:240px;background:var(--marino);color:#fff;display:flex;flex-direction:column;padding:22px 16px;gap:8px}
.logo{display:flex;align-items:center;gap:12px;padding:4px 10px 22px}
.logo .ico{width:38px;height:38px;border-radius:11px;background:var(--azul);display:flex;align-items:center;justify-content:center}
.logo b{font-family:Sora,Inter,sans-serif;font-size:19px;letter-spacing:.5px;display:block}
.logo small{font-size:11px;color:#8FA6BF;letter-spacing:1.5px;font-weight:600}
.nav nav{display:flex;flex-direction:column;gap:2px}
.nav nav a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;color:#B9CBE0;font-weight:500}
.nav nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav nav a.on{background:var(--azul);color:#fff}
.nav nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav .pie{margin-top:auto;padding:12px 10px 0;font-size:11.5px;color:#8FA6BF;border-top:1px solid rgba(255,255,255,.08)}
.nav .pie b{color:#fff}
main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:18px;padding:22px 28px 32px}
header.top{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
header.top .tit{flex:1 1 240px}
header.top .sub{font-size:13px;color:var(--gris)}
.buscar{position:relative;flex:1 1 300px;max-width:460px}
.buscar label{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--borde);border-radius:10px;padding:9px 14px;color:var(--gris)}
.buscar input{border:0;outline:0;font:inherit;flex:1;background:transparent;color:var(--tinta);min-width:0}
.buscar .res{position:absolute;top:100%;left:0;right:0;margin-top:6px;background:#fff;border:1px solid var(--borde);border-radius:12px;box-shadow:0 12px 32px rgba(14,34,56,.12);z-index:20;display:none;overflow:hidden}
.buscar .res a{display:flex;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--borde2);color:var(--tinta)}
.buscar .res a:hover,.buscar .res a.sel{background:#F3F7FB}
.buscar .res small{color:var(--gris);display:block;font-size:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:10px;font-size:13.5px;font-weight:600;border:1px solid var(--borde);background:#fff;color:var(--tinta);cursor:pointer;font-family:inherit;line-height:1.2}
.btn.p{background:var(--azul);border-color:var(--azul);color:#fff}.btn.d{border-color:#F3C4C4;color:#B91C1C}.btn.s{padding:6px 10px;font-size:12.5px}
.card{background:#fff;border:1px solid var(--borde);border-radius:14px}
.card .cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--borde2)}
.card .cuerpo{padding:18px 20px}
.kpis{display:flex;flex-wrap:wrap;gap:16px}
.kpi{padding:18px 20px;display:flex;flex-direction:column;gap:6px;flex:1 1 180px;min-width:0}
.kpi .l{font-size:12.5px;color:var(--gris);font-weight:500}
.kpi .v{font-family:Sora,Inter,sans-serif;font-size:28px;font-weight:700;letter-spacing:-.5px}
.kpi .d{font-size:12px;font-weight:600;color:var(--gris)}
.rojo{color:#B91C1C}.verde{color:#15803D}.ambar{color:#A15C00}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--gris);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--borde2)}
td{padding:11px 10px;border-bottom:1px solid #F0F4F8;vertical-align:middle}
tr:last-child td{border-bottom:0}
.scroll{overflow-x:auto}
.chip{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
.c-red{background:#FDECEC;color:#B91C1C}.c-amb{background:#FFF4DF;color:#A15C00}.c-grn{background:#E6F6EA;color:#15803D}.c-blu{background:#E5EFFA;color:#0F4F8A}.c-gry{background:#EEF2F6;color:#4B5B6E}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}
@media(max-width:700px){.grid2,.grid3{grid-template-columns:1fr}}
.k{font-size:12px;color:var(--gris);font-weight:500}.v{font-size:13.5px;font-weight:500;word-break:break-word}
form.f{display:flex;flex-direction:column;gap:12px}
.f label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--gris);font-weight:500}
.f input,.f select,.f textarea{font:inherit;padding:9px 11px;border:1px solid var(--borde);border-radius:9px;background:#fff;color:var(--tinta)}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid #BFD4EA;border-color:var(--azul)}
.f .fila{display:flex;gap:12px;flex-wrap:wrap}.f .fila>*{flex:1 1 160px}
.f .chk{flex-direction:row;align-items:center;gap:8px}
.tabs{display:flex;gap:22px;border-bottom:1px solid var(--borde);flex-wrap:wrap}
.tabs a{padding:10px 4px;font-weight:600;color:var(--gris);border-bottom:2px solid transparent}
.tabs a.on{color:var(--tinta);border-color:var(--azul)}
.dos{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.dos>.col1{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:16px}
.dos>.col2{flex:2 1 520px;min-width:0;display:flex;flex-direction:column;gap:16px}
.srv{border:1px solid var(--borde);border-radius:12px;padding:14px 16px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.srv .ic{width:44px;height:44px;border-radius:12px;background:#E5EFFA;display:flex;align-items:center;justify-content:center;color:#0F4F8A}
.srv .t{flex:1 1 220px;min-width:0}
.avatar{width:56px;height:56px;border-radius:16px;background:#E5EFFA;color:#0F4F8A;display:flex;align-items:center;justify-content:center;font-family:Sora,Inter,sans-serif;font-weight:700;font-size:20px}
details.plegable summary{cursor:pointer;font-weight:600;color:var(--azul);list-style:none;font-size:13px}
details.plegable summary::-webkit-details-marker{display:none}
details.plegable[open] summary{margin-bottom:12px}
.aviso{background:#FFF4DF;border:1px solid #F3DDB0;border-radius:10px;padding:10px 14px;font-size:13px}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--marino)}
.login .card{width:360px;padding:32px}
.vacio{padding:28px 20px;color:var(--gris);font-size:13.5px;text-align:center}
.muted{color:var(--gris);font-size:12.5px}
.alerta{border-left:4px solid #DC2626}

/* ayuda emergente (?) */
.ayuda{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:#dde7f1;color:#0F4F8A;font-size:10.5px;font-weight:700;cursor:help;position:relative;vertical-align:middle;margin-left:3px}
.ayuda:hover::after{content:attr(data-ayuda);position:absolute;left:0;top:20px;z-index:50;background:#0E2238;color:#fff;padding:8px 10px;border-radius:8px;font-size:12px;font-weight:400;width:280px;line-height:1.4;box-shadow:0 8px 24px rgba(14,34,56,.25);white-space:normal}

/* ---- móvil: menú plegable con botón ☰ ---- */
.menu-btn{display:none}
@media(max-width:900px){
  .layout{display:block}
  aside.nav{width:auto;min-height:0;position:sticky;top:0;z-index:40;padding:10px 14px;display:block}
  .nav .logo{display:flex;align-items:center;justify-content:space-between;padding:4px 6px}.nav .logo > div:nth-child(2){flex:1;margin-left:10px}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;font-size:20px;cursor:pointer}
  .nav nav{display:none;margin-top:10px}
  .nav.abierto nav{display:flex}
  .nav .pie{display:none}.nav.abierto .pie{display:block;margin-top:10px;padding-top:10px}
  main{padding:14px}
  .top{flex-wrap:wrap;gap:8px}.top .buscar{order:3;flex:1 1 100%;max-width:none}
  .tabs{overflow-x:auto;white-space:nowrap;flex-wrap:nowrap}
  table{font-size:12.5px}
  details.plegable > div[style*="position:absolute"], details.plegable > form[style*="position:absolute"]{position:fixed!important;left:8px!important;right:8px!important;top:60px!important;min-width:0!important;max-height:80vh;overflow:auto}
}
@media (max-width: 900px) { .dos[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } }