:root{
    --navy:#0b1839;
    --navy2:#111d3b;
    --red:#cf202c;
    --bg:#f4f6fa;
    --line:#e1e6ef;
    --text:#10182d;
    --muted:#6f7b91;
    --green:#1f9d68;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
body{min-height:100vh}
a{text-decoration:none;color:inherit}

/* SIDEBAR */
.sidebar{
    position:fixed;
    left:0;top:0;bottom:0;
    width:250px;
    height:100vh;
    background:linear-gradient(180deg,#111a36,#0c1324);
    color:#d7dceb;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    z-index:20;
}
.sidebar .brand{
    flex:0 0 165px;
    padding:38px 28px;
    text-align:center;
    border-bottom:1px solid #26304a;
}
.brand-name{font-size:25px;font-weight:800;letter-spacing:1px}
.brand-name span{color:#d32632}
.brand small{display:block;margin-top:9px;letter-spacing:3px;font-size:9px}
.sidebar nav{padding:22px 0;overflow-y:auto;min-height:0}
.sidebar nav a,.side-bottom a{
    display:flex;gap:14px;align-items:center;
    padding:15px 26px;color:#bac3d7;
    border-left:3px solid transparent;
}
.sidebar nav a:hover,.sidebar nav a.active{
    background:#182341;color:#fff;border-left-color:#d32632;
}
.sidebar nav i{font-style:normal;width:22px}
.side-bottom{
    margin-top:auto;
    flex-shrink:0;
    border-top:1px solid #26304a;
    padding:10px 0;
    background:#0b1327;
}
.side-bottom a:hover{background:#182341;color:#fff}

/* MAIN */
.main{margin-left:250px;min-height:100vh}
.top{
    min-height:76px;
    background:#fff;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:10px 32px;
    position:sticky;
    top:0;
    z-index:10;
}
.top-title{display:flex;align-items:center;gap:16px;min-width:0}
.top h1{font-size:23px;margin:0;white-space:nowrap}
.hamb{font-size:23px;color:#667085}

/* ADMIN + CERRAR SESION */
.top-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    margin-left:auto;
}
.user{
    display:flex;
    align-items:center;
    gap:12px;
    background:#fafbfc;
    border-radius:30px;
    padding:7px 15px;
    white-space:nowrap;
}
.avatar{
    display:grid;
    place-items:center;
    width:38px;height:38px;
    border-radius:50%;
    background:#17386f;
    color:#fff;
    flex:0 0 38px;
}
.user small{
    background:#eee;
    padding:5px 8px;
    border-radius:14px;
}
.top-logout{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    padding:0 16px;
    border:1px solid #f0c6ca;
    border-radius:24px;
    background:#fff5f6;
    color:#c92330;
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
    transition:.2s ease;
}
.top-logout:hover{
    background:var(--red);
    border-color:var(--red);
    color:#fff;
}
.logout-icon{font-size:18px}

/* CONTENT */
.content{padding:28px 32px}
.welcome{
    background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;
    display:flex;justify-content:space-between;align-items:center;margin-bottom:22px
}
.welcome span{font-size:12px;font-weight:800;letter-spacing:2px;color:var(--red)}
.welcome h2{margin:7px 0}
.welcome p{margin:0;color:var(--muted)}
.primary,button{
    background:var(--red);color:#fff;border:0;border-radius:8px;
    padding:12px 17px;font-weight:700;cursor:pointer
}
.secondary{background:#fff;border:1px solid var(--line);padding:12px 17px;border-radius:8px;font-weight:700}

/* DASHBOARD */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:22px}
.cards.compact{grid-template-columns:repeat(3,1fr)}
.stat{
    background:#fff;border:1px solid var(--line);border-radius:13px;padding:22px;
    display:flex;align-items:center;gap:17px;min-height:118px
}
.stat>i{
    width:48px;height:48px;border-radius:12px;background:#e7efff;
    display:grid;place-items:center;font-style:normal;font-size:23px;color:#1f57aa
}
.stat.money>i{background:#e4f8ec;color:var(--green)}
.stat strong{display:block;font-size:27px}
.stat span{display:block;color:#59657a;margin-top:4px}
.stat small{display:block;color:#d38b00;margin-top:7px}
.panel{background:#fff;border:1px solid var(--line);border-radius:13px;padding:20px;margin-bottom:22px}
.panel-head{border-bottom:1px solid var(--line);margin:-20px -20px 18px;padding:0 20px}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.quick a{border:1px solid var(--line);padding:18px;border-radius:10px;font-weight:700}
.quick a:hover{border-color:#c9d2e2;background:#fafbfe}

/* LISTADOS */
.toolbar{display:flex;justify-content:space-between;gap:18px;margin-bottom:18px}
.filters{display:flex;gap:10px;flex:1}
.filters input{max-width:360px}
.filters select{max-width:240px}
input,select,textarea{
    width:100%;border:1px solid #d5dce8;border-radius:8px;
    padding:12px 13px;background:#fff;font:inherit
}
label{display:block;font-weight:700;font-size:14px;margin-bottom:14px}
label input,label select,label textarea{margin-top:7px;font-weight:400}
.table-wrap{overflow:auto;padding:0}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:16px 14px;border-bottom:1px solid #e8ebf1;vertical-align:middle}
th{background:#fafbfc;color:#3d4759;font-size:13px}
td small{display:block;color:var(--muted);margin-top:5px}
.thumb{
    width:56px;height:48px;border-radius:7px;background:#f1f3f7;
    display:grid;place-items:center;color:#a4adbd;font-size:11px;overflow:hidden
}
.thumb img{width:100%;height:100%;object-fit:contain}
.stock{background:#ddf7e9;color:#177d53;border-radius:18px;padding:6px 10px}
.stock.low{background:#fff0c8;color:#986900}
.badge{display:inline-block;background:#eef1f6;border-radius:18px;padding:6px 10px;font-size:12px}
.badge.ok{background:#d8f7e7;color:#13754d}
.badge.off{background:#f2f2f2;color:#777}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:34px;background:#5d62d9;color:#fff;border-radius:7px}

/* FORMULARIOS */
.form-panel{padding:26px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.checks{display:flex;gap:25px}
.checks label{font-weight:600}
.checks input{width:auto;margin-right:8px}
.actions{display:flex;gap:10px}
.split{display:grid;grid-template-columns:330px 1fr;gap:20px}
.alert{padding:14px 16px;border-radius:8px;margin-bottom:18px}
.alert.success{background:#e5f8ed;color:#167044}
.alert.danger{background:#fde9eb;color:#a51c29}
.empty-admin{text-align:center;padding:60px 25px}

/* LOGIN */
.login-body{min-height:100vh;display:grid;place-items:center;background:#f2f4f8}
.login-card{
    width:min(430px,92vw);background:#fff;padding:38px;border:1px solid var(--line);
    border-radius:16px;box-shadow:0 20px 50px #0b183914
}
.login-logo{text-align:center;color:var(--navy);font-size:28px;font-weight:900;margin-bottom:30px}
.login-logo span{color:var(--red)}
.login-logo small{display:block;font-size:9px;letter-spacing:4px;margin-top:8px}
.login-card h1{text-align:center;font-size:22px}
.full{width:100%}
.back{display:block;text-align:center;margin-top:18px;color:#69758a}

/* RESPONSIVE */
@media(max-width:1150px){
    .top-logout{width:46px;padding:0;border-radius:50%}
    .top-logout span:last-child{display:none}
}
@media(max-width:1050px){
    .cards{grid-template-columns:repeat(2,1fr)}
    .quick{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
    .sidebar{width:76px}
    .sidebar .brand{height:140px;padding:28px 6px}
    .brand-name{font-size:11px}
    .brand small{display:none}
    .sidebar nav a{padding:15px 24px;justify-content:center}
    .sidebar nav a span,.side-bottom a span{display:none}
    .sidebar nav i{width:auto}
    .side-bottom a{justify-content:center;padding:15px 10px}
    .main{margin-left:76px}
    .top{padding:10px 15px}
    .top h1{font-size:18px}
    .user b,.user small{display:none}
    .content{padding:18px}
    .cards,.cards.compact,.form-grid,.split{grid-template-columns:1fr}
    .toolbar,.filters{flex-direction:column}
    .welcome{align-items:flex-start;gap:18px;flex-direction:column}
}