/* ERP CTMD — naranja #ff762d sobre azul #003568, IBM Plex Sans. */
:root{
  --naranja:#ff762d; --naranja-osc:#e2621d;
  --azul:#003568; --azul-osc:#00284e;
  --tinta:#1b2430; --tinta-suave:#5b6675;
  --linea:#e4e8ee; --fondo:#f5f7fa; --blanco:#fff;
  --ok:#127c4a; --ok-bg:#e7f5ee;
  --warn:#a5610a; --warn-bg:#fdf3e2;
  --mal:#b3261e; --mal-bg:#fdeceb;
  --r:6px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--fondo); color:var(--tinta); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--azul)}

/* ---------- estructura ---------- */
.shell{display:flex; min-height:100vh}
.side{
  width:236px; flex:0 0 236px; background:var(--azul); color:#dce6f2;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.brand{display:flex; align-items:center; gap:10px; padding:20px 18px 22px}
.brand-chip{
  width:34px; height:34px; border-radius:9px; background:var(--blanco); color:var(--azul);
  display:grid; place-items:center; font-weight:700; font-size:17px; flex:0 0 34px;
}
.brand-txt{font-weight:700; color:#fff; letter-spacing:.02em; line-height:1.1}
.brand-txt small{display:block; font-weight:500; font-size:11px; color:var(--naranja); letter-spacing:.12em}
.side nav{display:flex; flex-direction:column; gap:2px; padding:0 10px; flex:1}
.side nav a{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--r);
  color:#c3d3e6; text-decoration:none; font-size:14px; font-weight:500;
}
.side nav a i{font-style:normal; width:18px; text-align:center; opacity:.85}
.side nav a:hover{background:rgba(255,255,255,.08); color:#fff}
.side nav a.on{background:var(--naranja); color:#fff}
.side nav a.on i{opacity:1}
.side-foot{padding:14px 18px 18px; border-top:1px solid rgba(255,255,255,.12)}
.who strong{display:block; color:#fff; font-size:13px; font-weight:600}
.who span{display:block; font-size:11.5px; color:#9db3cc; text-transform:capitalize}
.salir{display:inline-block; margin-top:9px; font-size:12.5px; color:#9db3cc; text-decoration:none}
.salir:hover{color:var(--naranja)}

.main{flex:1; min-width:0; padding:26px 30px 60px; max-width:1500px}
.page-title{margin:0 0 4px; font-size:23px; font-weight:600; letter-spacing:-.01em}
.lead{margin:0 0 22px; color:var(--tinta-suave)}
h2{font-size:16px; font-weight:600; margin:30px 0 10px}

/* ---------- KPIs ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:20px}
.kpi{
  background:var(--blanco); border:1px solid var(--linea); border-left:4px solid var(--linea);
  border-radius:var(--r); padding:16px 18px; text-decoration:none; color:inherit; display:block;
}
.kpi:hover{border-color:#cfd7e2; box-shadow:0 2px 10px rgba(20,40,70,.07)}
.kpi-n{display:block; font-size:30px; font-weight:700; line-height:1.1; letter-spacing:-.02em}
.kpi-t{display:block; font-size:13.5px; font-weight:500; margin-top:3px}
.kpi-s{display:block; font-size:12px; color:var(--tinta-suave); margin-top:2px}
.kpi-ok{border-left-color:var(--ok)}    .kpi-ok .kpi-n{color:var(--ok)}
.kpi-warn{border-left-color:var(--warn)} .kpi-warn .kpi-n{color:var(--warn)}
.kpi-off{border-left-color:#8b97a8}      .kpi-off .kpi-n{color:#5b6675}
.kpi-done{border-left-color:var(--azul)} .kpi-done .kpi-n{color:var(--azul)}

/* ---------- tablas ---------- */
.tabla-wrap{overflow-x:auto; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r)}
.tbl{width:100%; border-collapse:collapse; background:var(--blanco); font-size:13.5px}
.tabla-wrap .tbl{border:0}
.tbl:not(.tabla-wrap .tbl){border:1px solid var(--linea); border-radius:var(--r); overflow:hidden}
.tbl th{
  text-align:left; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color:var(--tinta-suave); background:#fbfcfe; padding:10px 12px; border-bottom:1px solid var(--linea);
  white-space:nowrap;
}
.tbl td{padding:10px 12px; border-bottom:1px solid #eef1f5; vertical-align:top}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#fafbfd}
.tbl .num{text-align:right; white-space:nowrap}
.tbl .warn{color:var(--warn); font-weight:600}
.lnk{color:var(--azul); text-decoration:none; font-weight:500}
.lnk:hover{text-decoration:underline}

/* ---------- botones ---------- */
.cta-row{margin:18px 0 4px; display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-block; padding:9px 16px; border-radius:var(--r); border:1px solid var(--linea);
  background:var(--blanco); color:var(--tinta); text-decoration:none; font-size:14px; font-weight:500;
  cursor:pointer; font-family:inherit;
}
.btn:hover{border-color:#c6cfdb}
.btn.primary{background:var(--naranja); border-color:var(--naranja); color:#fff}
.btn.primary:hover{background:var(--naranja-osc); border-color:var(--naranja-osc)}

/* ---------- avisos ---------- */
.alert{padding:11px 14px; border-radius:var(--r); font-size:13.5px; margin-bottom:16px; border:1px solid transparent}
.alert.error{background:var(--mal-bg); border-color:#f3c9c6; color:var(--mal)}
.alert.ok{background:var(--ok-bg); border-color:#bfe3d1; color:var(--ok)}
.alert.warn{background:var(--warn-bg); border-color:#f0dcb8; color:var(--warn)}

/* ---------- login ---------- */
body.bare{background:var(--azul); display:grid; place-items:center; min-height:100vh; padding:20px}
.login-wrap{width:100%; max-width:380px}
.login-card{background:var(--blanco); border-radius:10px; padding:30px 28px 24px; box-shadow:0 18px 50px rgba(0,20,45,.28)}
.login-brand{display:flex; align-items:center; gap:12px; margin-bottom:22px}
.login-brand .brand-chip{background:var(--azul); color:#fff}
.login-brand strong{display:block; font-size:17px; letter-spacing:.02em}
.login-brand span{display:block; font-size:12px; color:var(--tinta-suave)}
.login-card label{display:block; font-size:12.5px; font-weight:600; color:var(--tinta-suave); margin-bottom:13px}
.login-card input{
  display:block; width:100%; margin-top:5px; padding:10px 12px; font-size:14.5px; font-family:inherit;
  border:1px solid var(--linea); border-radius:var(--r); background:#fbfcfe; color:var(--tinta);
}
.login-card input:focus{outline:none; border-color:var(--naranja); background:#fff; box-shadow:0 0 0 3px rgba(255,118,45,.15)}
.login-card button{
  width:100%; margin-top:6px; padding:11px; font-size:15px; font-weight:600; font-family:inherit;
  background:var(--naranja); color:#fff; border:0; border-radius:var(--r); cursor:pointer;
}
.login-card button:hover{background:var(--naranja-osc)}
.login-foot{margin:16px 0 0; font-size:12px; color:var(--tinta-suave); text-align:center}

@media (max-width:820px){
  .shell{flex-direction:column}
  .side{width:100%; flex:none; height:auto; position:static}
  .side nav{flex-direction:row; overflow-x:auto; padding:0 10px 10px}
  .side nav a span{display:none}
  .main{padding:20px 16px 50px}
}

/* ---------- filtros ---------- */
.filtros{
  display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r);
  padding:14px 16px; margin-bottom:16px;
}
.filtros label{display:block; font-size:11.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--tinta-suave)}
.filtros select{
  display:block; margin-top:4px; padding:8px 10px; font-size:14px; font-family:inherit;
  border:1px solid var(--linea); border-radius:var(--r); background:#fbfcfe; color:var(--tinta); min-width:120px;
}
.filtros select:focus{outline:none; border-color:var(--naranja); background:#fff}
.nav-mes{margin-left:auto; display:flex; gap:16px; font-size:13.5px; padding-bottom:8px}

/* ---------- chips de recuento ---------- */
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  background:var(--blanco); border:1px solid var(--linea); font-size:13px; color:var(--tinta-suave);
  text-decoration:none; font-weight:500;
}
.chip b{font-weight:700; color:var(--tinta)}
.chip:hover{border-color:#c6cfdb}
.chip.on{border-color:var(--azul); background:var(--azul); color:#fff}
.chip.on b{color:#fff}
.chip.ok b{color:var(--ok)}      .chip.ok.on{background:var(--ok); border-color:var(--ok)}
.chip.warn b{color:var(--warn)}  .chip.warn.on{background:var(--warn); border-color:var(--warn)}
.chip.done b{color:var(--azul)}
.chip.total{background:transparent; border-style:dashed; margin-left:auto}

/* ---------- etiquetas de estado ---------- */
.e{display:inline-block; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap}
.e-ok{background:var(--ok-bg); color:var(--ok)}
.e-warn{background:var(--warn-bg); color:var(--warn)}
.e-off{background:#eef1f5; color:#5b6675}
.e-done{background:#e8eff8; color:var(--azul)}

.sub{color:var(--tinta-suave); font-size:11.5px; line-height:1.35; display:inline-block}
.sub.vencido{color:var(--mal); font-weight:600}
.vacio{background:var(--blanco); border:1px dashed var(--linea); border-radius:var(--r);
  padding:30px; text-align:center; color:var(--tinta-suave)}
.pie-tabla{margin-top:10px; font-size:12.5px; color:var(--tinta-suave)}
.sub-h2{margin:-6px 0 10px; font-size:12.5px; color:var(--tinta-suave)}