:root{
    --azul:#0F4AA3;
    --azul-oscuro:#0A2F68;
    --verde:#4FB32D;
    --verde-oscuro:#418f25;
    --verde-suave:#eef8e9;
    --fondo:#f5f8fc;
    --panel:#ffffff;
    --texto:#1e2937;
    --gris:#6a7584;
    --borde:#d8e2ee;
    --borde-fuerte:#b8cbe3;
    --sombra:0 14px 30px rgba(10,47,104,.08);
    --rojo:#c62828;
    --naranjo:#ef8b17;
}
*{box-sizing:border-box}
html{overflow-y:scroll}
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:#fff;color:var(--texto);padding:24px 18px;display:flex;flex-direction:column;border-right:1px solid var(--borde);scrollbar-gutter:stable}
.sidebar-marca{display:flex;align-items:center;gap:14px;padding-bottom:22px;border-bottom:1px solid var(--borde)}
.sidebar-marca img{width:60px}
.sidebar-marca strong{display:block;font-size:1.6rem;color:var(--azul-oscuro)}
.sidebar-marca span{display:block;color:var(--gris);font-size:.92rem}
.sidebar-menu{display:grid;gap:10px;padding:22px 0;flex:1;align-content:start}
.sidebar-menu a{display:flex;align-items:center;justify-content:flex-start;min-height:48px;padding:0 16px;border-radius:14px;font-weight:700;font-size:.96rem;background:var(--azul);color:#fff;border:1px solid transparent;box-shadow:0 8px 18px rgba(15,74,163,.14);transition:background .15s ease,border-color .15s ease,transform .12s ease}
.sidebar-menu a:hover,.sidebar-menu a.activo{background:var(--azul-oscuro);color:#fff;transform:translateY(-1px)}
.sidebar-pie{display:grid;gap:10px;border-top:1px solid var(--borde);padding-top:20px}
.sidebar-pie a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;background:#fff;color:var(--azul-oscuro);font-weight:700;border:1px solid var(--borde)}
.sidebar-pie a:hover{border-color:var(--azul);background:#f3f8ff}
.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)}
.panel-alerta{border-color:#f0bbbb;background:#fff9f9}
.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;color:var(--texto)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(15,74,163,.10)}
.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;box-shadow:0 10px 18px rgba(79,179,45,.18)}
.boton:hover{background:var(--verde-oscuro)}
.boton-secundario{background:var(--azul);box-shadow:0 10px 18px rgba(15,74,163,.18)}
.boton-secundario:hover{background:var(--azul-oscuro)}
.boton-suave{background:#eef4ff;color:var(--azul-oscuro);border:1px solid #d7e4f8;box-shadow:none}
.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}
.lista-errores{margin:0;padding-left:18px;display:grid;gap:8px}
.texto-suave{color:var(--gris)}
.ayuda-campo{display:block;margin-top:6px;color:var(--gris);font-size:.88rem}
.logo-cliente{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--borde);border-radius:14px;background:#fafcff;margin-bottom:12px}
.logo-cliente img{width:72px;height:72px;object-fit:contain;background:#fff;border:1px solid var(--borde);border-radius:12px;padding:8px}
.repositorio-cliente{display:grid;gap:12px}
.repositorio-item{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:14px;border:1px solid var(--borde);border-radius:16px;background:#fff}
.etiqueta-info{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#eff6ff;color:var(--azul-oscuro);font-size:.82rem;font-weight:700}
@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}
}