:root{
    --azul:#0F4AA3;
    --azul-oscuro:#0A2F68;
    --verde:#4FB32D;
    --verde-oscuro:#418f25;
    --fondo:#f3f7fc;
    --panel:#ffffff;
    --texto:#1e2937;
    --gris:#6a7584;
    --borde:#d6e0eb;
    --sombra:0 14px 30px rgba(10,47,104,.10);
    --rojo:#c62828;
    --naranjo:#ef8b17;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--fondo);color:var(--texto)}
a{text-decoration:none;color:var(--azul)}
img{max-width:100%}
.layout{display:grid;grid-template-columns:290px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--azul-oscuro),var(--azul));color:#fff;padding:24px 18px;display:flex;flex-direction:column}
.sidebar-marca{display:flex;align-items:center;gap:14px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.12)}
.sidebar-marca img{width:60px}
.sidebar-marca strong{display:block;font-size:1.6rem}
.sidebar-marca span{display:block;color:#dfe9ff;font-size:.92rem}
.sidebar-menu{display:grid;gap:8px;padding:22px 0;flex:1}
.sidebar-menu a{color:#e8efff;padding:12px 14px;border-radius:12px;font-weight:700}
.sidebar-menu a:hover,.sidebar-menu a.activo{background:rgba(255,255,255,.12);color:#fff}
.sidebar-pie{display:grid;gap:10px;border-top:1px solid rgba(255,255,255,.12);padding-top:20px}
.sidebar-pie a{color:#fff;font-weight:700}
.contenido{padding:24px 28px}
.topbar{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:20px}
.topbar h1{margin:0;color:var(--azul-oscuro)}
.topbar p{margin:6px 0 0;color:var(--gris)}
.usuario-box{background:var(--panel);border:1px solid var(--borde);box-shadow:var(--sombra);padding:16px 18px;border-radius:16px;min-width:240px}
.usuario-box strong{display:block}
.usuario-box span{display:block;color:var(--gris);font-size:.92rem;margin-top:3px}
.mensaje{padding:14px 16px;border-radius:14px;font-weight:700;margin-bottom:18px}
.mensaje.exito{background:#eaf8e3;color:#2f6e1f;border:1px solid #b7dca9}
.mensaje.error{background:#fff2f2;color:#992122;border:1px solid #f0bbbb}
.panel{background:var(--panel);border:1px solid var(--borde);border-radius:20px;padding:22px;box-shadow:var(--sombra);margin-bottom:24px}
.panel h2,.panel h3{margin-top:0;color:var(--azul-oscuro)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.tarjeta-kpi{background:var(--panel);border:1px solid var(--borde);border-radius:18px;padding:18px;box-shadow:var(--sombra)}
.tarjeta-kpi .kpi-titulo{display:block;color:var(--gris);font-size:.92rem;margin-bottom:8px}
.tarjeta-kpi strong{display:block;font-size:2rem;color:var(--azul-oscuro)}
.tarjeta-kpi small{display:block;margin-top:6px;color:var(--gris)}
.tabla-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 10px;border-bottom:1px solid #e6edf5;text-align:left;vertical-align:top}
th{background:#f7fbff;color:var(--azul-oscuro);font-size:.92rem}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.form-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.campo{margin-bottom:14px}
.campo label{display:block;font-weight:700;margin-bottom:7px}
.campo input,.campo select,.campo textarea{width:100%;padding:12px 13px;border-radius:12px;border:1px solid #cdd9e6;font:inherit;background:#fff}
.campo textarea{min-height:110px;resize:vertical}
.acciones-form{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.boton{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border:none;border-radius:12px;background:var(--verde);color:#fff;font-weight:700;cursor:pointer}
.boton:hover{background:var(--verde-oscuro)}
.boton-secundario{background:var(--azul)}
.boton-secundario:hover{background:var(--azul-oscuro)}
.boton-suave{background:#eef4ff;color:var(--azul-oscuro);border:1px solid #d7e4f8}
.boton-link{color:var(--azul);font-weight:700}
.estado{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:.85rem;font-weight:700}
.estado-verde{background:#e8f6e3;color:#2f6c20}
.estado-naranjo{background:#fff2df;color:#935805}
.estado-rojo{background:#ffe8e8;color:#982222}
.estado-gris{background:#eef2f6;color:#51606f}
.filtros{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.filtros .campo{min-width:220px;margin-bottom:0}
.login-fondo{min-height:100vh;background:linear-gradient(135deg,var(--azul-oscuro),var(--azul));display:grid;place-items:center;padding:24px}
.login-card{width:min(480px,100%);background:#fff;border-radius:24px;padding:30px;box-shadow:0 22px 50px rgba(0,0,0,.18)}
.login-logo{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.login-logo img{width:82px}
.login-logo strong{display:block;color:var(--azul-oscuro);font-size:1.8rem}
.login-logo span{display:block;color:var(--gris)}
.login-ayuda{background:#f3f8ff;border:1px solid #d9e7f7;padding:14px 16px;border-radius:16px;color:#3f4c5c;margin-top:16px}
.resumen-barras{display:grid;gap:12px}
.barra-item span{display:flex;justify-content:space-between;font-weight:700;margin-bottom:6px}
.barra{height:12px;background:#e9eff7;border-radius:999px;overflow:hidden}
.barra > i{display:block;height:100%;background:linear-gradient(90deg,var(--azul),var(--verde))}
.lista-simple{display:grid;gap:10px}
.lista-simple article{padding:14px;border:1px solid var(--borde);border-radius:16px;background:#fff}
.texto-suave{color:var(--gris)}
@media (max-width: 1100px){
    .layout{grid-template-columns:1fr}
    .sidebar{position:relative}
    .grid-4,.grid-3,.grid-2,.form-grid,.form-grid-3{grid-template-columns:1fr}
    .topbar{flex-direction:column}
}