:root{
  --fondo:#0b0716; --fondo2:#120c24; --panel:#1b2340; --panel2:#222c4f; --borde:#2f3a63;
  --texto:#e8ecf8; --suave:#9aa6c9; --acento:#22d3ee; --acento2:#a855f7;
  --verde:#10b981; --rojo:#ef4444; --ambar:#f59e0b; --azul:#3b82f6;
  --radio:12px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fondo);color:var(--texto);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif}
a{color:var(--acento);text-decoration:none}
a:hover{text-decoration:underline}

/* --- Lateral --- */
.lateral{position:fixed;inset:0 auto 0 0;width:240px;background:linear-gradient(180deg,#1a0f33,#0d0820);border-right:1px solid #2a1d4f;overflow-y:auto;z-index:30;transition:transform .2s}
.marca{padding:20px 18px;font-weight:800;font-size:20px;color:var(--acento);letter-spacing:.5px;border-bottom:1px solid #2a1d4f;text-shadow:0 0 12px rgba(34,211,238,.45)}
.lateral nav{display:flex;flex-direction:column;padding:10px}
.lateral nav a{display:flex;gap:12px;align-items:center;color:#d9dcf0;padding:11px 12px;border-radius:10px;margin:2px 0}
.lateral nav a i{width:20px;text-align:center;color:var(--acento)}
.lateral nav a:hover{background:#25184a;text-decoration:none}
.lateral nav a.activo{background:linear-gradient(90deg,#3b1d73,#24164a);box-shadow:inset 3px 0 0 var(--acento)}
.lateral nav a.salir{margin-top:14px;color:#fca5a5}
.lateral nav a.salir i{color:#fca5a5}
.velo{display:none}

/* --- Contenido --- */
.contenido{margin-left:240px;min-height:100vh}
.barra{display:flex;justify-content:space-between;align-items:center;padding:12px 22px;border-bottom:1px solid #1f1838;background:#0e0a1d;position:sticky;top:0;z-index:20}
.btn-menu{display:none;background:#2a1d4f;border:1px solid #4c3a8a;color:#fff;border-radius:8px;padding:8px 11px;cursor:pointer}
.quien{display:flex;gap:10px;align-items:center;margin-left:auto}
.rol{font-size:12px;padding:3px 8px;border-radius:20px;background:#3b1d73;color:#e9d5ff}
.rol-admin{background:#0e4f5c;color:#a5f3fc}
.pagina{padding:22px;max-width:1400px}
h1{font-size:24px;margin:0 0 18px}
h1 i{color:var(--acento)}
h2{font-size:18px;margin:26px 0 12px}

/* --- Tarjetas --- */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:16px}
.tarjeta .num{font-size:28px;font-weight:800}
.tarjeta .eti{color:var(--suave);font-size:13px;text-transform:uppercase;letter-spacing:.4px}
.num.verde{color:var(--verde)}.num.rojo{color:var(--rojo)}.num.ambar{color:var(--ambar)}.num.cian{color:var(--acento)}.num.lila{color:#c084fc}
.caja{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:18px;margin-bottom:18px}
.caja h2:first-child,.caja h3:first-child{margin-top:0}

/* --- Tablas --- */
.tabla-wrap{overflow-x:auto;border:1px solid var(--borde);border-radius:var(--radio);background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--borde);white-space:nowrap;vertical-align:middle}
th{background:var(--panel2);color:#c7d0ee;font-weight:600}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.02)}
td.ancho{white-space:normal;min-width:200px}
.vacio{padding:26px;text-align:center;color:var(--suave)}
.nivel{color:var(--suave)}

/* --- Formularios --- */
form.linea{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
label{display:block;font-size:13px;color:var(--suave);margin-bottom:5px}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=datetime-local],input[type=url],input[type=email],input[type=search],select,textarea{
  width:100%;background:#0f1530;border:1px solid var(--borde);color:var(--texto);border-radius:9px;padding:10px 11px;font:inherit}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(34,211,238,.4);border-color:var(--acento)}
.check{display:flex;gap:8px;align-items:center;color:var(--texto);font-size:14px}
.ayuda{font-size:12px;color:var(--suave);margin-top:4px}
.acciones-form{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
fieldset{border:1px solid var(--borde);border-radius:var(--radio);padding:14px;margin:0 0 14px}
legend{padding:0 6px;color:var(--acento);font-weight:600}

/* --- Botones --- */
.btn{display:inline-flex;gap:7px;align-items:center;border:0;border-radius:9px;padding:9px 14px;font:inherit;font-weight:600;cursor:pointer;background:var(--azul);color:#fff;text-decoration:none!important;white-space:nowrap}
.btn:hover{filter:brightness(1.1)}
.btn.verde{background:var(--verde)}.btn.rojo{background:var(--rojo)}.btn.ambar{background:var(--ambar);color:#1a1300}
.btn.gris{background:#3a4470}.btn.cian{background:#0891b2}.btn.lila{background:#7c3aed}
.btn.mini{padding:6px 9px;font-size:13px;border-radius:7px}
.btns{display:flex;gap:5px;flex-wrap:nowrap}
.btns form{display:inline}

/* --- Avisos y etiquetas --- */
.aviso{padding:12px 14px;border-radius:10px;margin-bottom:14px;border:1px solid}
.aviso.ok{background:#052e22;border-color:#0f766e;color:#a7f3d0}
.aviso.error{background:#3a0d12;border-color:#b91c1c;color:#fecaca}
.aviso.info{background:#0b2540;border-color:#1d4ed8;color:#bfdbfe}
.aviso.alerta{background:#3a2a05;border-color:#b45309;color:#fde68a}
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:700}
.b-activo,.b-aprobado,.b-ok{background:#064e3b;color:#6ee7b7}
.b-vencido,.b-rechazado,.b-caido{background:#4c0519;color:#fda4af}
.b-deshabilitado{background:#3f3f46;color:#e4e4e7}
.b-suspendido{background:#4a1d06;color:#fdba74}
.b-prueba,.b-pendiente{background:#1e3a8a;color:#bfdbfe}
.b-desconocido{background:#334155;color:#cbd5e1}
.chip{display:inline-block;padding:2px 8px;border:1px solid var(--borde);border-radius:7px;font-size:12px;color:#c7d0ee}
.oculto{filter:blur(4px);cursor:pointer;user-select:none}
.mono{font-family:ui-monospace,Consolas,monospace}
.msg-wa{white-space:pre-wrap;background:#0f1530;border:1px dashed var(--borde);border-radius:10px;padding:14px;font-family:inherit}
.paginas{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.paginas a,.paginas span{padding:6px 11px;border-radius:7px;background:var(--panel);border:1px solid var(--borde);color:var(--texto)}
.paginas a.activo{background:var(--acento);color:#032b33;font-weight:700}
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.filtros a{padding:7px 12px;border-radius:20px;background:var(--panel);border:1px solid var(--borde);color:var(--texto);font-size:13px}
.filtros a.activo{background:#0e4f5c;border-color:var(--acento);color:#a5f3fc}
.barra-acc{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:12px}
.barra-acc form{flex:1;min-width:220px;max-width:520px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.lista-simple{list-style:none;margin:0;padding:0}
.lista-simple li{padding:8px 0;border-bottom:1px solid var(--borde);display:flex;justify-content:space-between;gap:10px}
.lista-simple li:last-child{border-bottom:none}

/* --- Login --- */
.login{min-height:100vh;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 30% 20%,#2a1356,transparent 50%),radial-gradient(circle at 80% 80%,#062f3a,transparent 45%),var(--fondo)}
.login .caja{width:100%;max-width:380px;padding:26px}
.login h1{text-align:center;color:var(--acento);text-shadow:0 0 14px rgba(34,211,238,.5)}
.login .btn{width:100%;justify-content:center;margin-top:12px;padding:12px}
.login .campo{margin-bottom:12px}

@media (max-width:900px){
  .lateral{transform:translateX(-100%)}
  body.menu-abierto .lateral{transform:none}
  body.menu-abierto .velo{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:25}
  .contenido{margin-left:0}
  .btn-menu{display:inline-block}
  .pagina{padding:16px}
  .dos{grid-template-columns:1fr}
}