:root{
  --primary:#1B4A6B; --secondary:#1F77A8; --accent:#2DB5A8;
  --text:#1A1A1A; --soft:#5A6470; --bg:#EAEEF1; --card:#FFFFFF; --sbg:#F4F6F8; --border:#D9DEE3;
  --ok:#1F9D74; --ok-b:#E4F4EE; --warn:#B7791F; --warn-b:#FBF0DA; --crit:#C0392B; --crit-b:#FBE6E3;
  --amber:#8A6D12; --amber-b:#F5EAC8; --orange:#B5651D; --orange-b:#F7E2CC; --blue-b:#E7F0F6;
  --key:#FFF7D6; --key-br:#E9DFAE;
  --shadow:0 1px 2px rgba(27,74,107,.05),0 6px 18px rgba(27,74,107,.06);
  --font:'Segoe UI',Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5}
a{color:var(--secondary);text-decoration:none}
h1,h2,h3{font-family:var(--font);color:var(--primary);margin:0}
.mono{font-variant-numeric:tabular-nums}

/* topbar */
.top{background:var(--primary);color:#fff;position:sticky;top:0;z-index:30}
.top-in{max-width:1360px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:22px;height:56px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.5px}
.logo img{height:26px;background:#fff;border-radius:5px;padding:3px 6px}
.logo b{font-size:15px}.logo span{font-size:11px;opacity:.8;font-weight:400;border-left:1px solid rgba(255,255,255,.3);padding-left:10px}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{color:rgba(255,255,255,.82);padding:8px 14px;border-radius:8px;font-weight:600;font-size:13.5px}
.nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.nav a.on{background:rgba(255,255,255,.16);color:#fff}
.rol{margin-left:auto;display:flex;align-items:center;gap:8px}
.rol .who{text-align:right;font-size:12px;line-height:1.2}
.rol .who b{font-size:13px}.rol .who span{opacity:.8}
.rolsel{display:flex;background:rgba(255,255,255,.12);border-radius:8px;padding:2px}
.rolsel a{color:rgba(255,255,255,.8);padding:5px 9px;border-radius:6px;font-size:12px;font-weight:700}
.rolsel a.on{background:#fff;color:var(--primary)}
.logout{color:rgba(255,255,255,.85);background:rgba(255,255,255,.12);border-radius:8px;padding:7px 11px;font-size:12.5px;font-weight:700}
.logout:hover{background:rgba(255,255,255,.22);color:#fff}
.badge{background:var(--crit);color:#fff;border-radius:999px;padding:0 6px;font-size:11px;font-weight:800;margin-left:2px}

/* login */
.loginwrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#1B4A6B,#2DB5A8)}
.loginbox{background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:32px 30px;width:360px;max-width:92vw}
.loginbox img{height:34px;background:#fff;display:block;margin-bottom:6px}
.loginbox h1{font-size:19px;margin:8px 0 2px}
.loginbox .sub{color:var(--soft);font-size:13px;margin-bottom:18px}
.loginbox .fg{margin-bottom:12px}
.loginbox label{font-size:12px;font-weight:700;color:var(--primary);display:block;margin-bottom:4px}
.loginbox input{width:100%;border:1px solid var(--border);border-radius:9px;padding:10px 12px;font-size:14px;font-family:var(--font)}
.loginbox input:focus{outline:2px solid var(--secondary);border-color:var(--secondary)}
.loginbox .btn{width:100%;justify-content:center;margin-top:6px;padding:11px}
.loginerr{background:var(--crit-b);color:var(--crit);border-radius:8px;padding:9px 12px;font-size:13px;font-weight:700;margin-bottom:14px}
.democreds{margin-top:16px;font-size:11.5px;color:var(--soft);background:var(--sbg);border-radius:9px;padding:10px 12px;line-height:1.7}
.democreds b{color:var(--primary)}

/* coherencia */
.incgrid{display:flex;flex-direction:column;gap:10px}
.inc{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:var(--card);border:1px solid var(--border);border-left-width:4px;border-radius:11px;padding:13px 16px;box-shadow:var(--shadow)}
.inc.ALTO{border-left-color:var(--crit)} .inc.MEDIO{border-left-color:var(--warn)} .inc.BAJO{border-left-color:var(--secondary)}
.inc .sev{font-size:11px;font-weight:800;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.inc.ALTO .sev{background:var(--crit-b);color:var(--crit)} .inc.MEDIO .sev{background:var(--warn-b);color:var(--warn)} .inc.BAJO .sev{background:var(--blue-b);color:var(--secondary)}
.inc .body .regla{font-weight:800;color:var(--primary)}
.inc .body .det{font-size:12.5px;color:var(--soft);margin-top:2px}
.inc .body .ent{font-size:11px;font-weight:800;color:var(--secondary);margin-right:6px}
.inc .fix{text-align:right}
.inc .fix .verbo{font-size:12px;font-weight:700;color:var(--warn);display:block;margin-bottom:5px}
.resumen{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.rz{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 14px;font-size:13px}
.rz b{color:var(--primary);font-size:16px}

main{max-width:1360px;margin:0 auto;padding:22px 20px 60px}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.head h1{font-size:22px}.head .sub{color:var(--soft);font-size:13px;margin-top:3px}
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--primary);color:#fff;border:0;border-radius:9px;padding:9px 16px;font-weight:700;font-size:13.5px;cursor:pointer;font-family:var(--font)}
.btn:hover{filter:brightness(1.08);color:#fff}
.btn.ghost{background:var(--sbg);color:var(--primary);border:1px solid var(--border)}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:7px}
.btn.danger{background:var(--crit-b);color:var(--crit)}

/* kpi */
.kgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}
.k{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:14px;box-shadow:var(--shadow);border-left:3px solid var(--border)}
.k .n{font-size:22px;font-weight:800;color:var(--primary);line-height:1}
.k .l{font-size:11.5px;color:var(--soft);margin-top:6px;line-height:1.25}
.k.good{border-left-color:var(--ok)}.k.good .n{color:var(--ok)}
.k.warn{border-left-color:var(--warn)}.k.warn .n{color:var(--warn)}
.k.crit{border-left-color:var(--crit)}.k.crit .n{color:var(--crit)}
.k.acc{border-left-color:var(--accent)}.k.acc .n{color:var(--accent)}
.clab{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--soft);font-weight:800;margin:18px 0 10px}

/* panel + table */
.panel{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px}
.panel-h{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel-h h3{font-size:15px}.panel-h .sub{color:var(--soft);font-size:12px;margin-left:auto}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.chip{border:1px solid var(--border);background:var(--card);color:var(--soft);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;cursor:pointer}
.chip.on{background:var(--primary);color:#fff;border-color:var(--primary)}
/* La tabla se desplaza dentro de su caja: así la cabecera fija se ancla al borde
   superior de la tabla y no tapa la primera fila. Con overflow en un ancestro, un
   `top` distinto de 0 empuja la cabecera hacia dentro y oculta filas. */
.tw{overflow:auto;max-height:calc(100vh - 230px)}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
thead th{background:var(--primary);color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.03em;font-weight:700;position:sticky;top:0;z-index:2}
tbody tr:nth-child(even){background:var(--sbg)}
tbody tr:hover{background:var(--blue-b)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.ref{font-weight:800;color:var(--primary)}
.ref a{color:var(--secondary);text-decoration:none;border-bottom:1px dotted var(--secondary)}
.ref a:hover{color:var(--accent);border-bottom-style:solid}
.muted{color:var(--soft)}
.derived{background:#F7F9FA}

/* pills / semaforo */
.pill{font-weight:700;font-size:11px;padding:3px 9px;border-radius:999px;white-space:nowrap;display:inline-block}
.s-g{background:var(--ok-b);color:var(--ok)} .s-y{background:var(--amber-b);color:var(--amber)}
.s-o{background:var(--orange-b);color:var(--orange)} .s-r{background:var(--crit-b);color:var(--crit)}
.s-sf{background:var(--sbg);color:var(--soft)}
.r-ALTO{background:var(--crit-b);color:var(--crit)} .r-MEDIO{background:var(--warn-b);color:var(--warn)} .r-OK{background:var(--ok-b);color:var(--ok)}
.st{font-weight:700;font-size:11px;padding:3px 9px;border-radius:999px}
.st.DISPONIBLE{background:var(--ok-b);color:var(--ok)} .st.RESERVADO{background:var(--blue-b);color:var(--secondary)}
.st.PENDIENTE{background:var(--warn-b);color:var(--warn)} .st.VENDIDO{background:#eceff1;color:#607d8b}
.acc{font-weight:700;font-size:12px;padding:3px 9px;border-radius:7px;background:var(--warn-b);color:var(--warn)}
.acc.red{background:var(--crit-b);color:var(--crit)}
.acc.none{background:transparent;color:var(--ok)}
.flag{color:var(--crit);font-weight:800;cursor:help}
.pubno{color:var(--soft)} .pubsi{color:var(--ok);font-weight:700}

/* tareas */
.tareas{display:flex;flex-direction:column;gap:7px}
.tarea{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-left-width:4px;border-radius:9px;padding:9px 13px;box-shadow:var(--shadow)}
.tarea.r{border-left-color:var(--crit)} .tarea.o{border-left-color:var(--orange)} .tarea.y{border-left-color:var(--warn)}
.tarea .area{font-size:11px;font-weight:800;text-transform:uppercase;color:var(--soft);width:52px}
.tarea .id{font-weight:800;color:var(--primary)} .tarea .sub{color:var(--soft);font-size:12.5px}
.tarea .verbo{margin-left:auto;font-weight:700}

/* form */
.form{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:22px;max-width:960px}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fg{display:flex;flex-direction:column;gap:5px}
.fg.full{grid-column:1/-1}
.fg label{font-size:12px;font-weight:700;color:var(--primary)}
.fg .hint{font-size:11px;color:var(--soft);font-weight:400}
.fg input,.fg select,.fg textarea{border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-family:var(--font);font-size:13.5px;color:var(--text);background:#fff}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:2px solid var(--secondary);border-color:var(--secondary)}
.fg.key input{background:var(--key);border-color:var(--key-br)}
.fg.key label::after{content:" ★";color:var(--warn)}
.fsec{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--soft);font-weight:800;margin:22px 0 4px;grid-column:1/-1;border-top:1px solid var(--border);padding-top:16px}
.factions{display:flex;gap:10px;margin-top:20px}
.note{background:var(--sbg);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:10px 14px;font-size:13px;margin-bottom:16px}
.legend{font-size:12px;color:var(--soft);margin-top:10px;display:flex;gap:16px;flex-wrap:wrap}
.legend b{color:var(--primary)}
@media(max-width:1000px){.kgrid{grid-template-columns:repeat(3,1fr)}.fgrid{grid-template-columns:1fr 1fr}.nav a{padding:8px 9px}}
@media(max-width:640px){.kgrid{grid-template-columns:repeat(2,1fr)}.fgrid{grid-template-columns:1fr}.logo span,.rol .who{display:none}}