:root{--bg:#f4f7fb;--p:#fff;--p2:#f8fafc;--tx:#172033;--mu:#6b7280;--ln:#e5eaf0;--ac:#6366f1;--side:#111827;--good:#15803d}
[data-theme=dark]{--bg:#0b1120;--p:#111827;--p2:#182235;--tx:#edf2f7;--mu:#9ca8b8;--ln:#263449;--side:#070b14}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font-family:Segoe UI,Arial}.app{display:grid;grid-template-columns:268px 1fr;min-height:100vh}
aside{position:fixed;inset:0 auto 0 0;width:268px;background:var(--side);color:#dbe2ea;padding:18px 14px;overflow:auto}.brand{display:flex;gap:10px;align-items:center;padding:6px 8px 22px}.logo{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:grid;place-items:center;color:#fff;font-weight:900}.brand b{display:block;color:#fff}.brand small{color:#94a3b8}
.grp{font-size:9px;letter-spacing:.14em;color:#748096;font-weight:900;padding:18px 10px 6px}.nav{padding:10px 11px;border-radius:9px;margin:2px 0;cursor:pointer;font-size:13px}.nav:hover,.nav.on{background:#ffffff13;color:#fff}.sub{padding-left:34px;font-size:12px}
main{grid-column:2;padding:0 24px 30px;min-width:0}.top{height:72px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ln);margin-bottom:22px}.top h1{font-size:21px;margin:0}.top p{font-size:11px;color:var(--mu);margin:3px 0}.theme{display:flex;background:var(--p);border:1px solid var(--ln);border-radius:10px;padding:4px}.theme button{border:0;background:transparent;color:var(--mu);padding:7px 10px;border-radius:7px;cursor:pointer;font-weight:700}.theme button.on{background:var(--p2);color:var(--tx)}
.view{display:none}.view.on{display:block}.card{background:var(--p);border:1px solid var(--ln);border-radius:13px;padding:17px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.kpi span{font-size:10px;color:var(--mu)}.kpi b{display:block;font-size:25px;margin:8px 0}.two,.calcs,.banks{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.hint{font-size:10px;color:var(--mu)}
.btn{border:0;background:var(--ac);color:#fff;padding:9px 12px;border-radius:8px;font-size:11px;font-weight:800;cursor:pointer}.sec{background:var(--p2);color:var(--tx);border:1px solid var(--ln)}.placeholder{text-align:center;padding:45px;color:var(--mu)}
.frame{background:var(--p);border:1px solid var(--ln);border-radius:13px;overflow:hidden}.frame iframe{display:block;width:100%;height:calc(100vh - 130px);border:0;background:white}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.toolbar input{flex:1;min-width:260px;padding:10px;border:1px solid var(--ln);border-radius:9px;background:var(--p);color:var(--tx)}
.notice{padding:11px 12px;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;border-radius:10px;font-size:11px;margin-bottom:14px}
.ue-list{display:grid;gap:10px}.ue-row{display:grid;grid-template-columns:1fr 1fr 2.2fr 1.5fr;gap:10px;align-items:center;background:var(--p);border:1px solid var(--ln);border-radius:12px;padding:12px}.cell label{display:block;font-size:9px;color:var(--mu);font-weight:800;margin-bottom:3px}.cell b,.cell span{font-size:12px}.upload{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.upload input{display:none}.upl{display:inline-flex;gap:6px;align-items:center;padding:8px 9px;border:1px solid var(--ln);border-radius:8px;background:var(--p2);cursor:pointer;font-size:11px;font-weight:700}.preview{width:44px;height:44px;border-radius:8px;object-fit:cover;display:none}.msg{font-size:10px;color:var(--mu);margin-top:4px}.chip{display:inline-block;padding:7px 10px;border:1px solid var(--ln);background:var(--p);border-radius:9px;margin-right:8px;font-size:11px}.chip b{font-size:16px}
.api-status{font-size:11px;color:var(--mu);margin:8px 0}.api-status.error{color:#b91c1c}.api-status.ok{color:var(--good)}.pagination{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}.pagination-info{font-size:11px;color:var(--mu)}.pagination-actions{display:flex;gap:8px}.loading{background:var(--p);border:1px solid var(--ln);border-radius:12px;padding:28px;text-align:center;color:var(--mu)}
@media(max-width:950px){.cards{grid-template-columns:1fr 1fr}.ue-row{grid-template-columns:1fr 1fr}.desc,.uploadcell{grid-column:1/-1}}
@media(max-width:720px){.app{display:block}aside{position:relative;width:100%}main{padding:0 12px 24px}.grp,.sub{display:none}.top{height:auto;min-height:64px;padding:12px 0}.cards,.calcs,.banks{grid-template-columns:1fr}.ue-row{grid-template-columns:1fr}.desc,.uploadcell{grid-column:auto}.upl,.upload .btn{flex:1;justify-content:center}}

.ue-tabs{display:flex;gap:8px;margin:12px 0}
.ue-tabs .active{background:var(--ac);color:#fff;border-color:var(--ac)}
.filterbox{background:var(--p);border:1px solid var(--ln);border-radius:11px;padding:10px 12px;margin:0 0 12px}
.filterhead{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:11px;font-weight:800}
.supplier-list{display:none;grid-template-columns:repeat(4,minmax(120px,1fr));gap:7px;margin-top:10px}
.supplier-list.open{display:grid}
.supplier-item{display:flex;gap:7px;align-items:center;font-size:11px;background:var(--p2);padding:7px 8px;border-radius:7px}
.btn.danger{background:#b91c1c}.btn.restore{background:#15803d}
.ue-row.extended{grid-template-columns:1fr 1fr 2.2fr 1fr 1.8fr}
@media(max-width:950px){.supplier-list{grid-template-columns:repeat(2,1fr)}.ue-row.extended{grid-template-columns:1fr 1fr}.ue-row.extended .desc,.ue-row.extended .uploadcell{grid-column:1/-1}}
@media(max-width:720px){.supplier-list{grid-template-columns:1fr}.ue-row.extended{grid-template-columns:1fr}.ue-row.extended .desc,.ue-row.extended .uploadcell{grid-column:auto}}
.login{position:fixed;inset:0;z-index:99;background:var(--bg);display:grid;place-items:center}.login.off{display:none}.loginbox{width:min(400px,92vw);background:var(--p);border:1px solid var(--ln);border-radius:16px;padding:26px}.loginbox input{width:100%;margin:6px 0 12px;padding:11px;border:1px solid var(--ln);border-radius:8px;background:var(--p2);color:var(--tx)}.loginerr{color:#b91c1c;font-size:11px;min-height:16px}.topright{display:flex;gap:8px;align-items:center}.userpill{padding:8px 10px;border:1px solid var(--ln);border-radius:9px;background:var(--p);font-size:11px}.hidden{display:none!important}.users-table{width:100%;border-collapse:collapse;font-size:12px}.users-table th,.users-table td{padding:9px;border-bottom:1px solid var(--ln);text-align:left}.modal{position:fixed;inset:0;z-index:100;background:#0008;display:grid;place-items:center}.modalbox{width:min(600px,92vw);max-height:90vh;overflow:auto;background:var(--p);padding:20px;border-radius:14px}.permgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.permgrid label{padding:8px;background:var(--p2);border-radius:7px;font-size:11px}@media(max-width:720px){.permgrid{grid-template-columns:1fr}.userpill{display:none}}
:root{--ui-scale:1}
body{font-size:calc(15px * var(--ui-scale))}
.nav{font-size:calc(14px * var(--ui-scale));padding:11px 12px}.sub{font-size:calc(13px * var(--ui-scale))}.grp{font-size:calc(10px * var(--ui-scale))}
.hint,.api-status,.pagination-info,.msg{font-size:calc(11px * var(--ui-scale))}.cell label{font-size:calc(10px * var(--ui-scale))}.cell b,.cell span,.users-table{font-size:calc(13px * var(--ui-scale))}.btn,.upl,.supplier-item{font-size:calc(12px * var(--ui-scale))}
.fontctl{display:flex;background:var(--p);border:1px solid var(--ln);border-radius:10px;padding:4px}.fontctl button{border:0;background:transparent;color:var(--mu);min-width:34px;padding:7px 8px;border-radius:7px;cursor:pointer;font-weight:800}.fontctl button.on{background:var(--p2);color:var(--tx)}
.supplier-arrow{font-size:25px;line-height:1;font-weight:900;transition:.15s}.filterbox.open .supplier-arrow{transform:rotate(180deg)}
.field{margin-top:17px}.field>label{display:block;margin-bottom:8px;font-size:12px;font-weight:800}.field>input{display:block;width:100%;padding:11px 12px;border:1px solid var(--ln);border-radius:8px;background:var(--p2);color:var(--tx)}
.user-actions{display:flex;gap:7px;flex-wrap:wrap}.btn.warn{background:#b45309}.btn.good{background:#15803d}.user-state{display:inline-flex;padding:5px 8px;border-radius:999px;border:1px solid var(--ln);font-size:11px;font-weight:800}.user-state.active{color:#15803d}.user-state.blocked{color:#b45309}

/* =========================================================
   LOGIN — centrado, sin background.jpg y responsive
   ========================================================= */
.login{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex!important;
    align-items:center;
    justify-content:center;
    overflow:auto;
    padding:clamp(20px,4vh,48px) 20px;
    background:
        radial-gradient(circle at 50% 20%,rgba(8,120,249,.07),transparent 34%),
        linear-gradient(180deg,#f8faff 0%,#f2f6fc 100%);
    color:#10213d;
}
.login.off{display:none!important}

.loginbox{
    position:relative;
    width:min(560px,100%);
    min-height:clamp(650px,78vh,820px);
    margin:auto;
    padding:clamp(42px,6vh,66px) clamp(34px,4vw,58px) 42px;
    background:#fff;
    border:1px solid #e3e9f2;
    border-radius:30px;
    box-shadow:0 28px 80px rgba(30,55,90,.12),0 4px 18px rgba(30,55,90,.05);
    color:#10213d;
    display:flex;
    flex-direction:column;
}
.loginbrand{text-align:center;margin-bottom:34px}
.loginbrand img{
    display:block;width:min(300px,82%);max-height:105px;height:auto;
    object-fit:contain;margin:0 auto 12px
}
.loginbrand .crmname{
    font-size:22px;line-height:1.15;font-weight:900;color:#10213d;letter-spacing:-.3px
}
.loginbrand .crmname span{color:#0878f9}
.loginwelcome{text-align:center;margin-bottom:36px}
.loginwelcome h2{margin:0 0 9px;color:#10213d;font-size:30px;line-height:1.15;font-weight:800}
.loginwelcome p{margin:0;color:#72809a;font-size:16px}
.loginbox .login-field{margin-bottom:21px}
.loginbox .login-field label{
    display:block;margin-bottom:9px;color:#10213d;font-size:14px;font-weight:800
}
.loginbox .login-field input{
    display:block;width:100%;min-height:54px;margin:0;padding:15px 16px;
    border:1px solid #ccd5e2;border-radius:10px;background:#fff;color:#172033;
    font-family:inherit;font-size:15px;outline:none;
    transition:border-color .15s ease,box-shadow .15s ease
}
.loginbox .login-field input:focus{
    border-color:#0878f9;box-shadow:0 0 0 3px rgba(8,120,249,.10)
}
.loginbox .login-field input::placeholder{color:#96a3b7}
.loginbtn{
    width:100%;min-height:54px;margin-top:8px;padding:14px!important;
    border-radius:9px!important;background:#0878f9!important;
    font-size:15px!important;font-weight:800!important
}
.loginbtn:hover{background:#006be6!important}
.loginerr{min-height:18px;margin-top:11px;color:#dc2626;font-size:13px}
.login-footer{
    margin-top:auto;padding-top:34px;text-align:center;color:#8a96aa;font-size:12px
}

/* Grandes / ultrawide */
@media (min-width:1600px) and (min-height:850px){
    .loginbox{width:600px;min-height:800px;padding:66px 64px 48px}
    .loginbrand img{width:320px}
    .loginbrand .crmname{font-size:23px}
    .loginwelcome h2{font-size:32px}
}

/* Portátiles con poca altura */
@media (max-height:760px) and (min-width:721px){
    .login{align-items:flex-start;padding:24px 20px}
    .loginbox{width:min(520px,100%);min-height:calc(100vh - 48px);padding:34px 46px 30px}
    .loginbrand{margin-bottom:20px}
    .loginbrand img{width:245px;max-height:78px;margin-bottom:8px}
    .loginbrand .crmname{font-size:19px}
    .loginwelcome{margin-bottom:24px}
    .loginwelcome h2{font-size:26px}
    .loginwelcome p{font-size:14px}
    .loginbox .login-field{margin-bottom:15px}
    .loginbox .login-field input,.loginbtn{min-height:48px}
    .login-footer{padding-top:22px}
}

/* Tablet */
@media (max-width:720px){
    .login{
        align-items:flex-start;padding:20px 14px;
        background:linear-gradient(180deg,#f8faff 0%,#f2f6fc 100%)
    }
    .loginbox{
        width:100%;min-height:calc(100dvh - 40px);margin:0 auto;
        padding:40px 30px 30px;border-radius:24px
    }
    .loginbrand{margin-bottom:27px}
    .loginbrand img{width:min(270px,80%);max-height:90px}
    .loginbrand .crmname{font-size:20px}
    .loginwelcome{margin-bottom:30px}
    .loginwelcome h2{font-size:28px}
    .loginwelcome p{font-size:15px}
}

/* Móvil */
@media (max-width:480px){
    .login{padding:0;background:#fff}
    .loginbox{
        width:100%;min-height:100dvh;padding:34px 22px 26px;
        border:0;border-radius:0;box-shadow:none
    }
    .loginbrand{margin-bottom:24px}
    .loginbrand img{width:min(235px,78%);max-height:78px}
    .loginbrand .crmname{font-size:18px}
    .loginwelcome{margin-bottom:28px}
    .loginwelcome h2{font-size:26px}
    .loginwelcome p{font-size:14px}
    .loginbox .login-field{margin-bottom:18px}
    .loginbox .login-field input,.loginbtn{min-height:52px}
    .login-footer{padding-top:28px;font-size:11px}
}
@media (max-width:360px){
    .loginbox{padding-left:18px;padding-right:18px}
    .loginbrand .crmname{font-size:17px}
}


/* Clases que sustituyen estilos inline del HTML */
.crm-app-hidden{visibility:hidden}
.supplier-clear{margin-top:9px}
.users-head{display:flex;justify-content:space-between;align-items:center;gap:14px}
.table-scroll{overflow:auto}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:15px}


/* Formularios de usuario */
.modalbox h3{margin:0 0 20px}
.field{margin-top:18px}
.field>label{margin-bottom:9px}
.field>input{min-height:42px}
#activeWrap label{display:flex;align-items:center;gap:8px}
.permgrid{margin-top:4px}
.user-actions{justify-content:flex-end}

/* Slightly larger supplier dropdown control */
.filterhead{min-height:34px}
.supplier-arrow{display:inline-flex;align-items:center;justify-content:center;min-width:34px;font-size:30px}