:root{--bg:#0e1622;--panel:#16222f;--card:#1a2838;--line:#2a3a4d;--txt:#e9eff6;--mut:#93a5ba;--acc:#e8a13a;--teal:#0d9488;--red:#e4572e;--ok:#34d399;--blue:#3d9be9}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,Arial,sans-serif;background:var(--bg);color:var(--txt)}
a{color:var(--blue)}
button{cursor:pointer;border:none;border-radius:8px;padding:9px 14px;font-weight:600;background:var(--teal);color:#fff}
button.sec{background:#26374a}button.warn{background:var(--red)}button:disabled{opacity:.5}
input,select,textarea{background:#0f1a28;border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:9px 11px;width:100%;font-size:.95rem}
label{font-size:.82rem;color:var(--mut);display:block;margin:10px 0 4px}
.hidden{display:none!important}
/* login */
#login{max-width:380px;margin:9vh auto;background:var(--panel);padding:30px;border-radius:16px;border:1px solid var(--line)}
#login h1{font-size:1.5rem;margin-bottom:4px}#login h1 span{color:var(--acc)}
#login p{color:var(--mut);font-size:.9rem;margin-bottom:14px}
/* layout */
#app{display:flex;min-height:100vh}
aside{width:225px;background:var(--panel);border-right:1px solid var(--line);padding:20px 14px;flex-shrink:0}
aside .logo{font-size:1.25rem;font-weight:800;margin-bottom:4px}aside .logo span{color:var(--acc)}
aside .who{font-size:.8rem;color:var(--mut);margin-bottom:18px}
aside nav a{display:block;padding:10px 12px;border-radius:9px;color:var(--txt);text-decoration:none;margin-bottom:4px;font-size:.95rem}
aside nav a.on,aside nav a:hover{background:#22334a}
main{flex:1;padding:24px;max-width:1100px}
h2.vt{font-size:1.35rem;margin-bottom:16px}
/* dashboard */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.kpi .n{font-size:2rem;font-weight:800}.kpi .l{color:var(--mut);font-size:.85rem;margin-top:2px}
.kpi.red .n{color:var(--red)}.kpi.gold .n{color:var(--acc)}.kpi.ok .n{color:var(--ok)}
/* tarjetas de asignación */
.asig{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:12px}
.asig .top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.asig h3{font-size:1.05rem}
.meta{color:var(--mut);font-size:.86rem;margin-top:3px}
.chip{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px;background:#26374a;color:var(--txt)}
.chip.hoy{background:var(--acc);color:#23180a}.chip.vencida{background:var(--red);color:#fff}
.chip.espera{background:#1d3a5f;color:#9cc8f5}.chip.ok{background:rgba(52,211,153,.18);color:var(--ok)}
.chip.pp{background:rgba(228,87,46,.18);color:#ff9b7d}
.dinero{font-size:.88rem;margin-top:8px;color:#c8d6e5}
.alert{margin-top:8px;background:rgba(228,87,46,.13);border:1px solid rgba(228,87,46,.4);color:#ffb59f;border-radius:9px;padding:8px 11px;font-size:.86rem}
.acts{margin-top:11px;display:flex;gap:8px;flex-wrap:wrap}
.acts button{padding:7px 11px;font-size:.85rem}
/* tablas y formularios */
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:12px;overflow:hidden}
th,td{padding:10px 12px;text-align:left;font-size:.92rem;border-bottom:1px solid var(--line)}
th{color:var(--mut);font-size:.78rem;text-transform:uppercase;letter-spacing:.4px}
.form{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:20px}
.form .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px 14px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.prov{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.prov h3{margin-bottom:5px}
.err{background:rgba(228,87,46,.15);color:#ffb59f;padding:9px 12px;border-radius:9px;margin-bottom:12px;font-size:.9rem}
@media(max-width:760px){#app{flex-direction:column}aside{width:100%}main{padding:16px}}

/* ayuda y opciones avanzadas (curva de aprendizaje corta) */
.ayuda{background:#14273c;border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:12px;padding:13px 16px;margin-bottom:18px;display:flex;flex-direction:column;gap:5px;font-size:.93rem}
.ayuda span{color:#c8d6e5}
details.adv{margin-top:10px;background:#0f1a28;border:1px dashed var(--line);border-radius:10px;padding:10px 14px}
details.adv summary{cursor:pointer;color:var(--blue);font-size:.9rem;font-weight:600}
details.adv .grid{margin-top:6px}