@font-face{
  font-family:'Methanerse';
  src:url('../fonts/METHANERSE_Free_Trial.woff2') format('woff2'),
      url('../fonts/METHANERSE_Free_Trial.woff') format('woff');
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --blue:#2196D3;--blue2:#4DB8F0;--blue3:#90D8F7;--blue-bg:#E3F4FC;--blue-pale:#EBF6FD;
  --ink:#0A1628;--ink2:#1A2B45;--ink3:#2D4060;
  --cream:#F4F2EE;--cream2:#EAE7DE;--cream3:#D8D4C8;
  --red:#C0392B;--red2:#E74C3C;--red-bg:#FDF0EF;
  --amber:#B7680A;--amber2:#E08C1A;--amber-bg:#FDF6EC;
  --orange:#C2660B;--orange-bg:#FDF1E5;
  --maroon:#7A1F1F;--maroon-bg:#F5E6E5;
  --green:#1A6B3C;--green-bg:#EDF7F1;
  --white:#FFFFFF;
  --font-mono:'JetBrains Mono',monospace;
  --font-head:'Syne',sans-serif;
  --font-body:'Instrument Sans',sans-serif;
  --font-brand:'Methanerse','Syne',sans-serif;
  --r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:24px;
  --sh1:0 1px 3px rgba(0,0,0,.08);
  --sh2:0 4px 16px rgba(0,0,0,.1);
  --sh3:0 12px 40px rgba(0,0,0,.18);
}
html,body{height:100%;height:100dvh;background:var(--cream);font-family:var(--font-body);color:var(--ink);overflow:hidden}
button{font-family:var(--font-body);cursor:pointer}
input,select,textarea{font-family:var(--font-body)}

/* ── LOGIN ── */
#login-screen{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:opacity .4s,transform .4s;background:var(--ink)}
#login-screen.out{opacity:0;transform:scale(1.04);pointer-events:none}
.login-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,#0A2A45 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,#061828 0%,transparent 50%),var(--ink)}
.login-card{position:relative;z-index:1;width:100%;max-width:420px;padding:0 24px}
.login-logo{margin-bottom:44px}
.login-logo-text{font-family:var(--font-brand);font-size:34px;font-weight:800;color:#fff;letter-spacing:.28em}
.login-logo-sub{font-size:12px;color:rgba(255,255,255,.45);margin-top:8px;font-family:var(--font-brand);letter-spacing:.1em;text-transform:uppercase}
.login-title{font-family:var(--font-head);font-size:22px;font-weight:700;color:#fff;margin-bottom:6px}
.login-sub{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:28px}
.login-form{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.login-field{display:flex;flex-direction:column;gap:5px}
.login-field label{font-size:11px;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.07em;font-family:var(--font-mono)}
.login-field input{padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);background:rgba(255,255,255,.06);color:#fff;font-size:14px;outline:none;transition:border-color .15s}
.login-field input:focus{border-color:var(--blue);background:rgba(33,150,211,.08)}
.login-field input::placeholder{color:rgba(255,255,255,.25)}
.login-btn{width:100%;padding:14px;background:var(--blue);color:#fff;border:none;border-radius:var(--r-md);font-family:var(--font-head);font-size:15px;font-weight:700;letter-spacing:.01em;transition:all .15s;margin-top:4px}
.login-btn:hover{background:var(--blue2);transform:translateY(-1px)}
.login-roles-title{font-size:10px;font-weight:700;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.1em;font-family:var(--font-mono);margin-bottom:4px}
.n1{background:#6B3FA0}.n2{background:#1A5C8C}.n3{background:#0D7FC2}.n4{background:#0A5C3A}

/* ── APP ── */
#app{display:flex;height:100vh;height:100dvh;opacity:0;transition:opacity .3s}
#app.visible{opacity:1}

/* ── SIDEBAR ── */
.sidebar{width:224px;flex-shrink:0;background:#0A1628;display:flex;flex-direction:column;overflow:hidden}
.sb-header{padding:18px 16px 14px;border-bottom:1px solid rgba(33,150,211,.15)}
.sb-logo{display:flex;align-items:center;gap:10px}
.sb-logo img{width:30px;height:30px;object-fit:contain}
.sb-logo-text{font-family:var(--font-brand);font-size:16px;font-weight:800;color:#fff;letter-spacing:.18em}
.sb-logo-wms{font-family:var(--font-brand);font-size:10px;font-weight:700;color:var(--blue2);letter-spacing:.35em;margin-top:5px}
.sb-user{padding:12px 16px;border-bottom:1px solid rgba(33,150,211,.12);display:flex;align-items:center;gap:10px}
.sb-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;font-family:var(--font-mono)}
.sb-avatar.n1{background:#6B3FA0}.sb-avatar.n2{background:#1A5C8C}.sb-avatar.n3{background:#0D7FC2}.sb-avatar.n4{background:#0A5C3A}
.sb-user-info strong{display:block;font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.sb-user-info span{font-size:10px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-mono)}
.sb-nav{flex:1;padding:10px 8px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.sb-nav::-webkit-scrollbar{display:none}
.sb-section{font-size:9px;font-weight:700;color:rgba(255,255,255,.2);text-transform:uppercase;letter-spacing:.1em;padding:10px 8px 4px;font-family:var(--font-mono)}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md);color:rgba(255,255,255,.5);font-size:13px;font-weight:500;cursor:pointer;border:none;background:none;width:100%;text-align:left;transition:all .15s;position:relative}
.nav-item i{font-size:17px;flex-shrink:0}
.nav-item:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-item.active{color:#fff;background:rgba(33,150,211,.18)}
.nav-item.active::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:3px;background:var(--blue2);border-radius:0 3px 3px 0}
.nav-badge{margin-left:auto;background:var(--red2);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:10px;font-family:var(--font-mono)}
.sb-footer{padding:12px 16px;border-top:1px solid rgba(33,150,211,.12);display:flex;flex-direction:column;gap:6px}
.sb-footer-btn{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.35);font-size:12px;cursor:pointer;border:none;background:none;transition:color .15s;padding:4px 0;text-align:left}
.sb-footer-btn:hover{color:rgba(255,255,255,.7)}
.sb-footer-btn i{font-size:15px}

/* ── MAIN ── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--cream)}
.topbar{background:var(--white);border-bottom:1px solid var(--cream3);padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.page-title{font-family:var(--font-brand);font-size:18px;font-weight:700;color:var(--ink)}
.topbar-right{display:flex;align-items:center;gap:10px}
.tb-btn{padding:7px 14px;border-radius:var(--r-md);font-size:13px;font-weight:500;display:flex;align-items:center;gap:6px;border:1px solid var(--cream3);background:var(--white);color:var(--ink);cursor:pointer;transition:all .15s}
.tb-btn:hover{border-color:#aaa;background:var(--cream)}
.tb-btn i{font-size:15px}
.tb-btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.tb-btn.primary:hover{background:var(--blue2)}
.tb-btn.danger{background:var(--red2);color:#fff;border-color:var(--red2)}
.content{flex:1;overflow-y:auto;padding:22px 24px 24px}
.content::-webkit-scrollbar{width:4px}
.content::-webkit-scrollbar-thumb{background:var(--cream3);border-radius:2px}

/* ── VIEWS ── */
.view{display:none;width:100%}
.view.active{display:block;animation:fadeUp .18s ease;width:100%}
@keyframes fadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* ── GRID ── */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── STAT CARDS ── */
.stat-card{background:var(--white);border-radius:var(--r-lg);padding:16px 18px;border:1px solid var(--cream3);position:relative;overflow:hidden}
.stat-card-accent{position:absolute;top:0;right:0;width:56px;height:56px;border-radius:0 var(--r-lg) 0 56px;opacity:.07}
.stat-card-accent.blue{background:var(--blue)}
.stat-card-accent.red{background:var(--red)}
.stat-card-accent.amber{background:var(--amber)}
.stat-card-accent.green{background:var(--green)}
.stat-icon{width:34px;height:34px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.stat-icon.blue{background:var(--blue-bg);color:var(--blue)}
.stat-icon.red{background:var(--red-bg);color:var(--red)}
.stat-icon.amber{background:var(--amber-bg);color:var(--amber)}
.stat-icon.green{background:var(--green-bg);color:var(--green)}
.stat-icon i{font-size:17px}
.stat-label{font-size:10px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px;font-family:var(--font-mono)}
.stat-val{font-family:var(--font-head);font-size:30px;font-weight:800;line-height:1;letter-spacing:-.03em}
.stat-val.blue{color:var(--blue)}
.stat-val.red{color:var(--red)}
.stat-val.amber{color:var(--amber)}
.stat-sub{font-size:11px;color:#999;margin-top:3px}

/* ── SECTION HEADER ── */
.sec-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sec-title{font-family:var(--font-head);font-size:14px;font-weight:700;color:var(--ink)}
.sec-link{font-size:12px;color:var(--blue);cursor:pointer;font-weight:500}

/* ── CARDS ── */
.card{background:var(--white);border-radius:var(--r-lg);border:1px solid var(--cream3);overflow:hidden;margin-bottom:16px}
.card-header{padding:14px 18px;border-bottom:1px solid var(--cream3);display:flex;align-items:center;gap:8px}
.card-title{font-family:var(--font-head);font-size:14px;font-weight:700;color:var(--ink)}
.card-title i{font-size:16px;color:var(--blue)}
.card-body{padding:16px 18px}

/* ── TABLE ── */
.table-wrap{background:var(--white);border-radius:var(--r-lg);border:1px solid var(--cream3);overflow:hidden;margin-bottom:16px}
.table-toolbar{padding:12px 16px;border-bottom:1px solid var(--cream3);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
table{width:100%;border-collapse:collapse}
thead tr{background:var(--cream);border-bottom:1px solid var(--cream3)}
th{padding:9px 14px;font-size:10px;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.07em;text-align:left;font-family:var(--font-mono);white-space:nowrap}
td{padding:10px 14px;font-size:13px;color:var(--ink);border-bottom:1px solid var(--cream2)}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--cream)}

/* ── BADGES ── */
.sku-code{font-family:var(--font-mono);font-size:11px;font-weight:600;background:var(--cream);padding:3px 8px;border-radius:5px;color:var(--ink2);border:1px solid var(--cream3)}
.sub-sku{font-family:var(--font-mono);font-size:10px;font-weight:500;background:var(--blue-bg);padding:2px 7px;border-radius:5px;color:var(--blue);border:1px solid #B8DFF5}
.sem{font-size:10px;font-weight:700;padding:3px 8px;border-radius:10px;font-family:var(--font-mono);display:inline-flex;align-items:center;gap:3px}
.sem::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0}
.sem.V{background:var(--green-bg);color:var(--green)}.sem.V::before{background:var(--green)}
.sem.A{background:var(--amber-bg);color:var(--amber)}.sem.A::before{background:var(--amber)}
.sem.R{background:var(--orange-bg);color:var(--orange)}.sem.R::before{background:var(--orange)}
.sem.P{background:var(--red-bg);color:var(--red2)}.sem.P::before{background:var(--red2)}
.sem.N{background:var(--maroon-bg);color:var(--maroon)}.sem.N::before{background:var(--maroon)}
.fam{font-size:10px;font-weight:600;padding:2px 8px;border-radius:8px;font-family:var(--font-mono)}
.fam.MED{background:#EEF3FB;color:#1A4B8C}
.fam.INS,.fam.INP{background:var(--blue-bg);color:var(--blue)}
.fam.DM{background:#F5F0FB;color:#6B3FA0}
.fam.EB{background:var(--amber-bg);color:var(--amber)}
.fam.DOT{background:#F5F0FB;color:#6B3FA0}
.fam.ASE{background:var(--amber-bg);color:var(--amber)}
.ubic{font-size:10px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--ink2);color:rgba(255,255,255,.9);font-family:var(--font-mono)}
.nivel-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:10px;font-family:var(--font-mono)}
.nivel-badge.n1{background:#F5F0FB;color:#6B3FA0}
.nivel-badge.n2{background:#EEF3FB;color:#1A5C8C}
.nivel-badge.n3{background:var(--blue-bg);color:var(--blue)}
.nivel-badge.n4{background:var(--green-bg);color:var(--green)}
.mov-tipo{font-size:10px;font-weight:700;padding:3px 9px;border-radius:10px;font-family:var(--font-mono)}
.mov-tipo.compra{background:var(--green-bg);color:var(--green)}
.mov-tipo.asignacion{background:var(--blue-bg);color:var(--blue)}
.mov-tipo.traslado{background:var(--amber-bg);color:var(--amber)}
.mov-tipo.consumo{background:var(--red-bg);color:var(--red)}
.mov-tipo.destruccion{background:#F0F0EE;color:#666}

/* ── SEARCH & INPUTS ── */
.search-wrap{position:relative;flex:1}
.search-wrap i.si{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:15px;color:#aaa;pointer-events:none}
input[type=text],input[type=date],input[type=number],input[type=password],select,textarea{padding:9px 12px;border:1px solid var(--cream3);border-radius:var(--r-md);font-size:13px;color:var(--ink);background:var(--white);outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(33,150,211,.1)}
input::placeholder{color:#bbb}
.search-input{padding-left:34px;width:100%}
select{cursor:pointer;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}

/* ── ACTION BTNS ── */
.act-btn{width:28px;height:28px;border-radius:var(--r-sm);border:1px solid var(--cream3);background:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.act-btn i{font-size:14px;color:#888}
.act-btn:hover{border-color:#bbb}
.act-btn.danger:hover{background:var(--red-bg);border-color:var(--red2)}
.act-btn.danger:hover i{color:var(--red)}
.act-btn.success:hover{background:var(--green-bg);border-color:var(--green)}
.act-btn.success:hover i{color:var(--green)}
.act-btn.primary:hover{background:var(--blue-bg);border-color:var(--blue)}
.act-btn.primary:hover i{color:var(--blue)}
.act-btn-group{display:flex;gap:4px}

/* ── FORM ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid.cols3{grid-template-columns:1fr 1fr 1fr}
.fg-full{grid-column:1/-1}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group label{font-size:11px;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-mono)}
.form-group input,.form-group select,.form-group textarea{width:100%}
.form-group .hint{font-size:11px;color:#aaa;margin-top:2px}
.form-group textarea{resize:vertical;min-height:70px}
.btn-submit{width:100%;margin-top:14px;padding:13px;background:var(--blue);color:#fff;border:none;border-radius:var(--r-md);font-family:var(--font-head);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .15s}
.btn-submit:hover{background:var(--blue2)}
.btn-submit i{font-size:17px}
.btn-submit.green{background:var(--green)}
.btn-submit.green:hover{background:#1E8048}

/* ── SKU PREVIEW ── */
.sku-preview-box{background:var(--ink);border-radius:var(--r-lg);padding:16px 20px;margin-bottom:14px}
.sku-preview-label{font-size:10px;font-weight:700;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.1em;font-family:var(--font-mono);margin-bottom:8px}
.sku-preview-global{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--blue2);letter-spacing:.06em}
.sku-preview-sub{font-family:var(--font-mono);font-size:13px;color:rgba(255,255,255,.45);margin-top:6px;letter-spacing:.03em}
.sku-preview-sub span{color:var(--blue3)}
.sku-warning{background:var(--amber-bg);border:1px solid #F0D898;border-radius:var(--r-md);padding:10px 14px;font-size:12px;color:var(--amber);display:none;margin-bottom:12px;align-items:center;gap:8px}
.sku-warning.show{display:flex}
.sku-warning i{font-size:16px;flex-shrink:0}

/* ── TOGGLE CAMPOS ── */
.campos-toggle{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.campo-chip{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;border:1px solid var(--cream3);background:var(--white);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;color:#888;user-select:none}
.campo-chip input[type=checkbox]{display:none}
.campo-chip.active{background:var(--blue-bg);border-color:var(--blue);color:var(--blue)}
.campo-chip i{font-size:14px}

/* ── TRANSFER VISUAL ── */
.transfer-visual{display:flex;align-items:center;gap:10px;padding:14px;background:var(--blue-pale);border:1px solid #C0DEF0;border-radius:var(--r-lg);margin:14px 0}
.t-box{flex:1;background:var(--white);border-radius:var(--r-md);padding:10px 12px;border:1px solid var(--cream3);text-align:center}
.t-box.t-active{border-color:var(--blue);background:var(--blue-bg)}
.t-box-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#888;margin-bottom:2px;font-family:var(--font-mono)}
.t-box-name{font-size:13px;font-weight:600;color:var(--ink)}
.t-box-stock{font-size:11px;color:var(--blue);margin-top:3px;font-weight:500}
.t-arrow{font-size:22px;color:var(--blue);flex-shrink:0}

/* ── TIMELINE ── */
.timeline{position:relative;padding-left:24px}
.timeline::before{content:'';position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--cream3)}
.tl-item{position:relative;margin-bottom:16px}
.tl-dot{position:absolute;left:-24px;top:3px;width:16px;height:16px;border-radius:50%;border:2px solid var(--white);box-shadow:0 0 0 2px var(--cream3)}
.tl-dot.compra{background:var(--green)}
.tl-dot.asignacion,.tl-dot.traslado{background:var(--blue)}
.tl-dot.consumo{background:var(--red2)}
.tl-dot.destruccion{background:#888}
.tl-card{background:var(--white);border-radius:var(--r-lg);border:1px solid var(--cream3);padding:12px 14px}
.tl-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px;gap:8px;flex-wrap:wrap}
.tl-tipo{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-mono)}
.tl-tipo.compra{color:var(--green)}.tl-tipo.asignacion,.tl-tipo.traslado{color:var(--blue)}.tl-tipo.consumo{color:var(--red)}.tl-tipo.destruccion{color:#666}
.tl-fecha{font-size:11px;color:#aaa;font-family:var(--font-mono)}
.tl-desc{font-size:13px;color:var(--ink);line-height:1.5;margin-bottom:8px}
.tl-user{display:flex;align-items:center;gap:6px;font-size:11px;color:#666;font-family:var(--font-mono)}
.tl-user-dot{width:6px;height:6px;border-radius:50%}
.tl-user-dot.n1{background:#6B3FA0}.tl-user-dot.n2{background:#1A5C8C}.tl-user-dot.n3{background:var(--blue)}.tl-user-dot.n4{background:var(--green)}

/* ── ALERT STRIPS ── */
.mrow-meta{display:none}
.dash-alerts-scroll{max-height:380px;overflow-y:auto;padding-right:2px}
.alert-strip{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r-md);margin-bottom:6px;border:1px solid transparent}
.alert-strip.R{background:var(--red-bg);border-color:#F5C0C0}
.alert-strip.A{background:var(--amber-bg);border-color:#F0D898}
.alert-strip.ok{background:var(--green-bg);border-color:#9FD9B8}
.alert-strip i{font-size:16px;flex-shrink:0}
.alert-strip.R i{color:var(--red2)}.alert-strip.A i{color:var(--amber2)}.alert-strip.ok i{color:var(--green)}
.alert-text{flex:1}
.alert-name{font-size:13px;font-weight:600}
.alert-meta{font-size:11px;color:#888;margin-top:1px;font-family:var(--font-mono)}
.alert-days{font-size:11px;font-weight:700;padding:2px 8px;border-radius:8px;font-family:var(--font-mono);flex-shrink:0}
.alert-strip.R .alert-days{background:var(--red-bg);color:var(--red)}
.alert-strip.A .alert-days{background:var(--amber-bg);color:var(--amber)}

/* ── AUTOCOMPLETE ── */
.ac-wrap{position:relative}
.ac-input{width:100%;padding:9px 12px 9px 36px;border:1px solid var(--cream3);border-radius:var(--r-md);font-size:13px;color:var(--ink);background:var(--white);outline:none;transition:border-color .15s,box-shadow .15s}
.ac-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(33,150,211,.1)}
.ac-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:15px;color:#aaa;pointer-events:none}
.ac-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:14px;color:#bbb;cursor:pointer;display:none;border:none;background:none;padding:2px}
.ac-clear.show{display:block}
.ac-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--white);border:1px solid var(--cream3);border-radius:var(--r-lg);box-shadow:var(--sh3);z-index:200;max-height:280px;overflow-y:auto;display:none}
.ac-dropdown.open{display:block}
.ac-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--cream2);transition:background .1s;display:flex;align-items:flex-start;gap:10px}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.focused{background:var(--cream)}
.ac-item-icon{width:30px;height:30px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--blue-bg);color:var(--blue)}
.ac-item-icon i{font-size:14px}
.ac-item-body{flex:1;min-width:0}
.ac-item-name{font-size:13px;font-weight:600;color:var(--ink)}
.ac-item-name mark{background:#FFF176;color:var(--ink);border-radius:2px;padding:0 1px}
.ac-item-meta{font-size:11px;color:#888;font-family:var(--font-mono);margin-top:2px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ac-item-stock{font-size:11px;font-weight:700;color:var(--blue);margin-left:auto;white-space:nowrap;align-self:center}
.ac-selected-pill{display:none;align-items:center;gap:8px;background:var(--blue-bg);border:1px solid #9FD5F0;border-radius:var(--r-md);padding:8px 12px;margin-top:8px}
.ac-selected-pill.show{display:flex}
.ac-selected-pill-text{flex:1;font-size:13px;font-weight:500;color:var(--blue)}
.ac-selected-pill button{border:none;background:none;cursor:pointer;color:#aaa;font-size:16px;padding:0;line-height:1}
.ac-no-results{padding:20px;text-align:center;color:#aaa;font-size:13px}

/* ── MODAL ──
   Fix de rendimiento: antes .modal-overlay tenía backdrop-filter:blur(3px)
   por defecto. Con el flujo nuevo de Eventos (detalle → asignar depósitos
   → confirmar) es fácil terminar con 2-3 modales apilados, y cada capa de
   blur obliga al navegador a recalcular el desenfoque de TODO lo que hay
   detrás en cada repintado (cada tecla, cada hover). Eso es lo que
   generaba la lentitud al editar un evento.
   Ahora: sin blur por defecto, fondo semitransparente normal (barato).
   Blur solo en #modal-confirm, que casi siempre es la última capa y ya
   no se combina con otro blur debajo. */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:850;align-items:flex-end;justify-content:center}
.modal-overlay.open{display:flex}
#modal-confirm{backdrop-filter:blur(3px);z-index:900}
.modal-sheet{background:var(--white);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:0 22px 28px;width:100%;max-width:480px;animation:slideUp .2s ease;max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal-sheet::-webkit-scrollbar{display:none}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-handle{width:40px;height:4px;background:var(--cream3);border-radius:2px;margin:12px auto 18px}
.modal-title{font-family:var(--font-head);font-size:18px;font-weight:700;margin-bottom:4px}
.modal-sub{font-size:13px;color:#888;margin-bottom:18px;line-height:1.5}
.modal-actions{display:flex;gap:8px;margin-top:16px}
.btn-cancel{flex:1;padding:11px;border:1px solid var(--cream3);border-radius:var(--r-md);background:var(--white);font-size:14px;font-weight:600;color:#666;cursor:pointer}
.btn-danger-solid{flex:1;padding:11px;border:none;border-radius:var(--r-md);background:var(--red2);color:var(--white);font-size:14px;font-weight:700;cursor:pointer}
.btn-confirm{flex:2;padding:11px;border:none;border-radius:var(--r-md);background:var(--blue);color:var(--white);font-size:14px;font-weight:700;cursor:pointer;font-family:var(--font-head)}

/* ── LOCKED VIEW ── */
.locked-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--red-bg);border:1px solid #F5C0C0;border-radius:var(--r-md);margin-bottom:16px;font-size:13px;color:var(--red)}
.locked-banner i{font-size:18px;flex-shrink:0}

/* ── USUARIO CARD ── */
.user-card{background:var(--white);border:1px solid var(--cream3);border-radius:var(--r-lg);padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:8px;transition:box-shadow .15s}
.user-card:hover{box-shadow:var(--sh1)}
.user-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--white);flex-shrink:0}
.user-info{flex:1;min-width:0}
.user-name{font-size:14px;font-weight:600;color:var(--ink)}
.user-cedula{font-size:11px;color:#888;font-family:var(--font-mono);margin-top:1px}
.user-card-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* ── BODEGA CARD ── */
.bodega-card{background:var(--white);border:1px solid var(--cream3);border-radius:var(--r-lg);padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:8px}
.bodega-icon{width:38px;height:38px;border-radius:var(--r-md);background:var(--blue-bg);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bodega-icon i{font-size:18px}
.bodega-info{flex:1}
.bodega-name{font-size:14px;font-weight:600;color:var(--ink)}
.bodega-prefix{font-size:11px;color:#888;font-family:var(--font-mono);margin-top:1px}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:48px 20px;color:#aaa}
.empty-state i{font-size:44px;margin-bottom:10px;display:block;opacity:.3}
.empty-state p{font-size:13px}

/* ── TOAST ── */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--ink);color:var(--white);padding:10px 20px;border-radius:30px;font-size:13px;font-weight:500;z-index:999;opacity:0;transition:all .25s;pointer-events:none;white-space:nowrap;box-shadow:var(--sh3)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success{background:var(--green)}
.toast.error{background:var(--red2)}

/* ── SIMILAR HINT ── */
.similar-hint{margin-top:6px;padding:8px 12px;border-radius:var(--r-md);font-size:12px;line-height:1.5}
.similar-hint.warning{background:var(--amber-bg);border:1px solid #F0D898;color:var(--amber)}
.similar-hint.warning strong{color:var(--ink)}
.similar-hint .hint-use-btn{margin-top:6px;display:inline-flex;align-items:center;gap:5px;background:var(--amber);color:#fff;border:none;border-radius:var(--r-sm);padding:4px 10px;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font-body)}
.similar-hint .hint-use-btn:hover{opacity:.85}
@media(max-width:768px){.sidebar{display:none}.grid-4{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}}

/* ── PANEL ENFERMERO ── */
#enfermero-panel{
  display:none;
  position:fixed;
  inset:0;
  background:var(--cream);
  z-index:800;
  flex-direction:column;
  overflow:hidden;
}
#enfermero-panel.active{ display:flex; }

/* Header */
.enf-header{
  background:var(--ink);
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;
}
.enf-header-logo{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.enf-header-title{
  font-family:var(--font-brand);
  font-size:15px;
  font-weight:700;
  color:#fff;
  letter-spacing:.18em;
}
.enf-header-wms{
  font-family:var(--font-brand);
  font-size:9px;
  font-weight:700;
  color:var(--blue2);
  letter-spacing:.3em;
}
.enf-user{
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.7);
  font-size:13px;
}
.enf-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  background:#1A5C8C;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  color:#fff;
  font-family:var(--font-mono);
}
.enf-logout{
  background:rgba(255,255,255,.1);
  border:none;
  color:rgba(255,255,255,.7);
  padding:6px 10px;
  border-radius:var(--r-md);
  cursor:pointer;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:5px;
  transition:background .15s;
}
.enf-logout:hover{ background:rgba(255,255,255,.2); }
.enf-logout i{ font-size:14px; }

/* Layout */
.enf-body{
  flex:1;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* Mobile: columna única */
@media(max-width:768px){
  .enf-body{ overflow-y:auto; padding:16px; }
  .enf-grid{ display:flex; flex-direction:column; gap:16px; }
  .enf-form-panel{ width:100%; }
  .enf-history-panel{ width:100%; }
}

/* Desktop: dos columnas */
@media(min-width:769px){
  .enf-body{ padding:24px; overflow:hidden; }
  .enf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    height:100%;
    overflow:hidden;
  }
  .enf-form-panel{ overflow-y:auto; }
  .enf-history-panel{ overflow-y:auto; }
  .enf-form-panel::-webkit-scrollbar,
  .enf-history-panel::-webkit-scrollbar{ width:4px; }
  .enf-form-panel::-webkit-scrollbar-thumb,
  .enf-history-panel::-webkit-scrollbar-thumb{ background:var(--cream3); border-radius:2px; }
}

/* Buscador */
.enf-search-box{
  background:var(--white);
  border-radius:var(--r-lg);
  border:1px solid var(--cream3);
  padding:16px;
  margin-bottom:14px;
}
.enf-search-title{
  font-family:var(--font-head);
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:6px;
}
.enf-search-title i{ font-size:16px; color:var(--blue); }

/* Card medicamento seleccionado */
.enf-med-card{
  background:var(--blue-pale);
  border:1px solid #C0DEF0;
  border-radius:var(--r-lg);
  padding:14px;
  margin-bottom:14px;
  display:none;
}
.enf-med-card.show{ display:block; }
.enf-med-name{
  font-size:15px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:4px;
}
.enf-med-sub{
  font-size:11px;
  font-family:var(--font-mono);
  color:#666;
  margin-bottom:8px;
}
.enf-med-stock{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.enf-stock-chip{
  display:flex;
  align-items:center;
  gap:4px;
  background:var(--white);
  border:1px solid #C0DEF0;
  border-radius:10px;
  padding:3px 10px;
  font-size:12px;
  font-weight:600;
  color:var(--blue);
}

/* Formulario consumo */
.enf-form-box{
  background:var(--white);
  border-radius:var(--r-lg);
  border:1px solid var(--cream3);
  padding:16px;
  margin-bottom:14px;
}
.enf-form-title{
  font-family:var(--font-head);
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:6px;
}
.enf-form-title i{ font-size:16px; color:var(--blue); }
.enf-field{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:10px;
}
.enf-field label{
  font-size:11px;
  font-weight:700;
  color:#666;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-family:var(--font-mono);
}
.enf-field input,
.enf-field select{
  padding:11px 14px;
  border:1px solid var(--cream3);
  border-radius:var(--r-md);
  font-size:15px;
  color:var(--ink);
  background:var(--white);
  outline:none;
  transition:border-color .15s,box-shadow .15s;
  width:100%;
}
.enf-field input:focus,
.enf-field select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(33,150,211,.1);
}
.enf-submit{
  width:100%;
  padding:15px;
  background:var(--blue);
  color:#fff;
  border:none;
  border-radius:var(--r-md);
  font-family:var(--font-head);
  font-size:16px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  transition:all .15s;
  margin-top:4px;
}
.enf-submit:hover{ background:var(--blue2); transform:translateY(-1px); }
.enf-submit:active{ transform:scale(.98); }
.enf-submit i{ font-size:18px; }
.enf-submit:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* Historial */
.enf-history-box{
  background:var(--white);
  border-radius:var(--r-lg);
  border:1px solid var(--cream3);
  overflow:hidden;
}
.enf-history-header{
  padding:14px 16px;
  border-bottom:1px solid var(--cream3);
  font-family:var(--font-head);
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:6px;
}
.enf-history-header i{ font-size:16px; color:var(--blue); }
.enf-history-item{
  padding:12px 16px;
  border-bottom:1px solid var(--cream2);
  display:flex;
  align-items:flex-start;
  gap:10px;
  transition:background .1s;
}
.enf-history-item:last-child{ border-bottom:none; }
.enf-history-item:hover{ background:var(--cream); }
.enf-history-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--blue);
  margin-top:5px;
  flex-shrink:0;
}
.enf-history-info{ flex:1; }
.enf-history-name{
  font-size:13px;
  font-weight:600;
  color:var(--ink);
}
.enf-history-meta{
  font-size:11px;
  color:#888;
  font-family:var(--font-mono);
  margin-top:2px;
}
.enf-history-cant{
  font-size:13px;
  font-weight:700;
  color:var(--blue);
  white-space:nowrap;
}
.enf-empty{
  padding:40px 20px;
  text-align:center;
  color:#aaa;
}
.enf-empty i{
  font-size:40px;
  display:block;
  margin-bottom:10px;
  opacity:.3;
}
.enf-empty p{ font-size:13px; }

/* Semáforo en panel enfermero */
.enf-sem{
  font-size:10px;
  font-weight:700;
  padding:2px 8px;
  border-radius:10px;
  font-family:var(--font-mono);
}
.enf-sem.V{ background:var(--green-bg); color:var(--green); }
.enf-sem.A{ background:var(--amber-bg); color:var(--amber); }
.enf-sem.R{ background:var(--orange-bg); color:var(--orange); }
.enf-sem.P{ background:var(--red-bg); color:var(--red2); }
.enf-sem.N{ background:var(--maroon-bg); color:var(--maroon); }

/* Fix espacios vacíos en vistas */
#view-trazabilidad,
#view-bodegas,
#view-usuarios,
#view-sku {
  padding-top: 0;
  margin-top: 0;
}

#reg-locked-msg:empty,
#mov-locked-msg:empty {
  display: none;
}

.empty-state {
  padding: 24px 20px; /* era 48px */
}
/* ── UBICACION CARD (dos niveles) ── */
.ubicacion-card{background:var(--white);border:1px solid var(--cream3);border-radius:var(--r-lg);margin-bottom:12px;overflow:hidden}
.ubicacion-header{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--ink)}
.ubicacion-icon{width:36px;height:36px;border-radius:var(--r-md);background:rgba(33,150,211,.2);color:var(--blue2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ubicacion-icon i{font-size:18px}
.ubicacion-info{flex:1}
.ubicacion-name{font-size:14px;font-weight:700;color:#fff;font-family:var(--font-mono);letter-spacing:.04em}
.ubicacion-sub{font-size:11px;color:rgba(255,255,255,.4);margin-top:1px}
.depositos-list{padding:8px 12px 12px}
.deposito-card{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md);border:1px solid var(--cream2);background:var(--cream);margin-bottom:6px;transition:background .1s}
.deposito-card:last-child{margin-bottom:0}
.deposito-card:hover{background:var(--cream2)}
.deposito-icon{width:28px;height:28px;border-radius:var(--r-sm);background:var(--blue-bg);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.deposito-icon i{font-size:13px}
.deposito-info{flex:1}
.deposito-name{font-size:12px;font-weight:600;color:var(--ink);font-family:var(--font-mono)}

/* Permitir que dropdowns de autocomplete salgan del card */
#view-trazabilidad .card,
#view-registro .card,
#view-movimientos .card {
  overflow: visible;
}
#view-inventario .table-wrap {
  overflow: visible;
}
  
/* ── DASHBOARD: VALOR DE INVENTARIO / CONSUMO MENSUAL ── */
.valor-row{display:flex;align-items:center;justify-content:space-between;padding:10px 6px;border-bottom:1px solid var(--cream2);font-size:13px}
.valor-row:last-child{border-bottom:none}
.valor-row.clickable{cursor:pointer;transition:background .12s;border-radius:var(--r-sm)}
.valor-row.clickable:hover{background:var(--cream)}
.valor-back{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--blue);cursor:pointer;margin-bottom:10px;font-weight:600}
.valor-back:hover{text-decoration:underline}
.valor-ub-title{font-family:var(--font-head);font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--cream3)}

/* ── DASHBOARD NUEVO — agregar al final de css/styles.css ── */

/* Botones toggle Distribución / Por sede */
.dash-valor-btn{
  padding:4px 10px;
  border-radius:8px;
  border:1px solid var(--cream3);
  background:transparent;
  font-size:11px;
  font-weight:600;
  color:#888;
  cursor:pointer;
  font-family:var(--font-body);
  transition:all .12s;
}
.dash-valor-btn:hover{ background:var(--cream); color:var(--ink); }
.dash-valor-btn.active{
  background:var(--blue-bg);
  color:var(--blue);
  border-color:var(--blue2);
}

/* Chips de filtro de consumo */
.dash-chip{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:20px;
  border:1px solid var(--cream3);
  background:var(--white);
  font-size:10px;
  font-weight:600;
  color:#888;
  cursor:pointer;
  transition:all .12s;
  font-family:var(--font-body);
}
.dash-chip:hover{ border-color:#bbb; color:var(--ink); }
.dash-chip.active{
  background:var(--blue-bg);
  color:var(--blue);
  border-color:var(--blue2);
}

/* Delta en stat cards */
.stat-delta{
  font-size:11px;
  margin-top:5px;
  display:flex;
  align-items:center;
  gap:3px;
  font-weight:600;
}
.stat-delta.green{ color:var(--green); }
.stat-delta.red{ color:var(--red2); cursor:pointer; }
.stat-delta i{ font-size:13px; }

/* ══════════════════════════════════════════
   REPORTES — filtros, encabezado de impresión
   y hoja @media print para exportar a PDF
   desde el navegador (Ctrl/Cmd+P → Guardar como PDF)
   ══════════════════════════════════════════ */
.print-only{ display:none; }

#rep-print-header h2{
  font-size:18px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:4px;
}

@media print{
  body *{ visibility:hidden; }
  #view-reportes, #view-reportes *{ visibility:visible; }
  #view-reportes{ position:absolute; left:0; top:0; width:100%; padding:20px; }
  .no-print{ display:none !important; }

  * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  .rep-stats{ break-inside:avoid; }
  .rep-row, .rep-list-row{ break-inside:avoid; }
  .rep-group-head{ break-after:avoid; }

  .rep-group-head{ background:#0A1628 !important; color:#fff !important; }
  .rep-group-head.tono-red{ background:#7A1F1F !important; }
  .rep-group-head.tono-amber{ background:#7A4E08 !important; }
  .rep-group-head.tono-green{ background:#1A6B3C !important; }
  .rep-group-head.tono-gray{ background:#4A4A46 !important; }

  .rep-logo-mini-img{ height:60px; }

  /* FIX: el header ahora vive en un <thead> real. Esto es lo único que
     los navegadores repiten de forma fiable en cada página impresa —
     position:fixed no lo garantiza y por eso aparecía flotando a mitad
     de página. thead/tbody como table-header-group/table-row-group es
     el comportamiento nativo por defecto, pero se fuerza explícito
     para máxima compatibilidad. */
  #rep-print-table{ width:100%; border-collapse:collapse; }
  #rep-print-table thead{ display: table-header-group; }
  #rep-print-table tbody{ display: table-row-group; }
  #rep-print-table td{ border:none; padding:0; }
  #rep-print-header{ margin-bottom:16px; }
}

/* ══════════════════════════════════════════
   EVENTOS — grid, badges de estado y checklist
   de depósitos en el modal de creación
   ══════════════════════════════════════════ */
.evt-badge{
  font-size:10px;
  font-weight:700;
  padding:3px 9px;
  border-radius:10px;
  font-family:var(--font-mono);
  white-space:nowrap;
  flex-shrink:0;
}
.evt-badge.creado{ background:var(--blue-bg); color:var(--blue); }
.evt-badge.en_curso{ background:var(--green-bg); color:var(--green); }
.evt-badge.finalizado{ background:#F0F0EE; color:#888; }

.evt-checklist{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:180px;
  overflow-y:auto;
  border:1px solid var(--cream3);
  border-radius:var(--r-md);
  padding:8px 10px;
}
.evt-check-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--ink);
  cursor:pointer;
  padding:3px 0;
}
.evt-check-item input{ accent-color:var(--blue); }

.evt-enf-card{
  border:1px solid var(--cream3);
  border-radius:var(--r-md);
  padding:10px 12px;
  margin-bottom:10px;
  background:var(--cream);
}
.evt-enf-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:8px;
}
.evt-enf-card .evt-checklist{
  background:var(--white);
  max-height:140px;
}

.evt-personal-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}
.evt-personal-row i{font-size:13px;color:#888;margin-top:3px;flex-shrink:0}
.evt-personal-body{flex:1;min-width:0}
.evt-personal-name{font-size:12px;font-weight:600;color:var(--ink)}
.evt-personal-deps{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.evt-dep-chip{font-size:10px;font-family:var(--font-mono);background:var(--cream);color:#666;padding:2px 7px;border-radius:8px;border:1px solid var(--cream2)}
.evt-dep-chip.more{background:var(--blue-bg);color:var(--blue);font-weight:600}
.evt-dep-chip.empty{color:#aaa;font-style:italic;background:none;border:none;padding:0}
.evt-personal-row strong{ color:var(--ink); }

/* ══════════════════════════════════════════
   PANEL ENFERMERO — banner de herramienta
   y datos del evento activo
   ══════════════════════════════════════════ */
.enf-tool-banner{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--blue-pale);
  border:1px solid #C0DEF0;
  border-radius:var(--r-md);
  padding:10px 14px;
  font-size:12px;
  color:var(--ink2);
  margin-bottom:16px;
  line-height:1.4;
}
.enf-tool-banner i{ font-size:16px; color:var(--blue); flex-shrink:0; }

.enf-evento-info{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#666;
  margin-bottom:14px;
  font-family:var(--font-mono);
}
.enf-evento-info i{ color:var(--blue); }
/* ══════════════════════════════════════════
   INVENTARIO — banner de filtro activo
   (llega desde las tarjetas Alertas/Vencidos
   del dashboard) + tarjetas clickeables
   ══════════════════════════════════════════ */
.alert-banner{display:none;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-md);margin-bottom:16px;font-size:13px;border:1px solid transparent}
.alert-banner.show{display:flex}
.alert-banner i:first-child{font-size:18px;flex-shrink:0}
.alert-banner.amber{background:var(--amber-bg);border-color:#F0D898;color:var(--amber)}
.alert-banner.red{background:var(--red-bg);border-color:#F5C0C0;color:var(--red)}
.alert-banner .act-btn{flex-shrink:0}

.stat-card-clickable{cursor:pointer;transition:box-shadow .15s,transform .15s}
.stat-card-clickable:hover{box-shadow:var(--sh2);transform:translateY(-1px)}

/* ══════════════════════════════════════════
   BADGES DE FAMILIA — color por hash del texto
   (familia es texto libre, ya no un código fijo)
   ══════════════════════════════════════════ */
.fam.c1{background:#EEF3FB;color:#1A4B8C}
.fam.c2{background:var(--green-bg);color:var(--green)}
.fam.c3{background:var(--amber-bg);color:var(--amber)}
.fam.c4{background:#F5F0FB;color:#6B3FA0}
.fam.c5{background:var(--red-bg);color:var(--red2)}
.fam.c6{background:var(--orange-bg);color:var(--orange)}
.fam.c7{background:var(--blue-bg);color:var(--blue)}
.fam.c8{background:#F0F0EE;color:#666}
/* ── Grupo del topbar: acciones de la vista + botón de cerrar sesión ── */
.topbar-right-group{display:flex;align-items:center;gap:10px}
.logout-btn{color:#888}
.logout-btn:hover{background:var(--red-bg);border-color:var(--red2);color:var(--red2)}
/* ══════════════════════════════════════════
   MOBILE — nav inferior, tarjetas en vez de
   tablas, y grids que faltaban por apilar.
   ══════════════════════════════════════════ */

.mobile-bottom-nav{display:none}

@media(max-width:768px){

  /* ── Topbar: título arriba a ancho completo, acciones en fila propia abajo ── */
  .topbar{
    flex-wrap:wrap;height:auto;padding:12px 16px;row-gap:10px;
  }
  .page-title{font-size:16px;flex:0 0 100%;order:-1;line-height:1.25}
  .topbar-right-group{flex:0 0 100%;justify-content:space-between}
  .topbar-right{flex:1;min-width:0}
  .topbar-right .tb-btn{flex:1;justify-content:center;white-space:nowrap}
  .tb-btn{font-size:12px;padding:8px 10px}
  .logout-btn{flex-shrink:0}

  /* ── Nav inferior fijo ── */
  .mobile-bottom-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:700;
    background:var(--ink);border-top:1px solid rgba(33,150,211,.15);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .mnav-item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    background:none;border:none;color:rgba(255,255,255,.45);padding:6px 2px;
    border-radius:var(--r-md);font-family:var(--font-body);cursor:pointer;
  }
  .mnav-item i{font-size:19px}
  .mnav-item span{font-size:9px;font-weight:600}
  .mnav-item.active{color:#fff;background:rgba(33,150,211,.18)}
  .mnav-mas-list{display:flex;flex-direction:column;gap:8px}
  .mnav-mas-item{
    display:flex;align-items:center;gap:12px;padding:12px 14px;
    border:1px solid var(--cream3);background:var(--white);border-radius:var(--r-lg);
    font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left;
    box-shadow:var(--sh1);
  }
  .mnav-mas-icon{
    width:36px;height:36px;border-radius:var(--r-md);flex-shrink:0;
    background:var(--blue-bg);color:var(--blue);
    display:flex;align-items:center;justify-content:center;
  }
  .mnav-mas-icon i{font-size:17px}
  .mnav-mas-label{flex:1}
  .mnav-mas-arrow{font-size:15px;color:#ccc}

  /* Deja espacio para que el contenido no quede tapado por el nav */
  .content{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .dash-alerts-scroll{max-height:none;overflow-y:visible;padding-right:0}

  /* ── Grids que el media query original no cubría ── */
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr;gap:8px}
  .stat-card{padding:12px 14px}
  .stat-icon{width:26px;height:26px;margin-bottom:6px}
  .stat-icon i{font-size:13px}
  .stat-label{font-size:9px}
  .stat-val{font-size:21px}
  .stat-sub{font-size:10px;margin-top:1px}
  .table-toolbar{flex-direction:column;align-items:stretch}
  .table-toolbar > *{width:100% !important}
  .form-grid.cols3{grid-template-columns:1fr}

  /* ── Tablas → LISTA compacta (una sola lista continua, no bloques) ── */
  .table-wrap table thead{display:none}
  .table-wrap table, .table-wrap tbody{display:block;width:100%}
  .table-wrap tr{
    display:block;background:none;border:none;border-radius:0;margin:0;
    padding:12px 14px;border-bottom:1px solid var(--cream2);
  }
  .table-wrap tr:last-child{border-bottom:none}
  .table-wrap td{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:3px 0;border:none;
  }
  .table-wrap td[data-label]::before{
    content:attr(data-label);font-size:10px;font-weight:700;color:#999;
    text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-mono);
    flex-shrink:0;
  }
  .table-wrap td[data-label=""]{justify-content:flex-end;padding-top:6px}
  .table-wrap td[data-label=""]::before{content:none}
  .table-wrap .act-btn-group{justify-content:flex-end}
  .table-toolbar{padding:12px}

  /* Usuarios — evita que el badge/acciones queden apretados junto a nombres largos */
  .user-card{flex-wrap:wrap;padding:12px 14px;gap:8px 12px}
  .user-name{font-size:13px;line-height:1.35}
  .user-card-meta{flex:1 1 100%;justify-content:space-between;padding-left:48px}

  /* Meta line con datos secundarios (solo visible en mobile) */
  .mrow-meta{
    display:block;font-size:11px;color:#888;font-family:var(--font-mono);
    margin-top:3px;line-height:1.4;
  }

  /* Inventario — 2 líneas: [Ítem + meta a ancho completo] / [Cant. · Estado · acciones a la derecha] */
  #inv-body tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;justify-content:flex-end}
  #inv-body td{display:block;padding:0}
  #inv-body td[data-label]::before{content:none}
  #inv-body td:nth-child(1),
  #inv-body td:nth-child(3),
  #inv-body td:nth-child(4),
  #inv-body td:nth-child(6){display:none}
  #inv-body td:nth-child(2){flex:1 1 100%;min-width:0}
  #inv-body td:nth-child(5){flex-shrink:0}
  #inv-body td:nth-child(7){flex-shrink:0}
  #inv-body td:last-child{flex-shrink:0}
  #inv-body .act-btn-group{justify-content:flex-end}

  /* Movimientos — 2 líneas: [Ítem + meta a ancho completo] / [Cant. a la derecha] */
  #mov-body tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;justify-content:flex-end}
  #mov-body td{display:block;padding:0}
  #mov-body td[data-label]::before{content:none}
  #mov-body td:nth-child(1),
  #mov-body td:nth-child(3),
  #mov-body td:nth-child(4),
  #mov-body td:nth-child(5),
  #mov-body td:nth-child(7),
  #mov-body td:nth-child(8),
  #mov-body td:nth-child(9){display:none}
  #mov-body td:nth-child(2){flex:1 1 100%;min-width:0}
  #mov-body td:nth-child(6){flex-shrink:0;font-size:15px}
}

.mov-row-clickable{cursor:pointer}
.mov-row-clickable:hover td{background:var(--blue-pale)}
.mov-tipo.reversion{background:#F5F0FB;color:#6B3FA0}
.tl-dot.reversion{background:#6B3FA0}
.tl-tipo.reversion{color:#6B3FA0}
/* ══════════════════════════════════════════
   REPORTES — sistema unificado (pantalla + PDF)
   ══════════════════════════════════════════ */
.rep-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--cream3)}
.rep-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:#888;font-family:var(--font-mono);margin-bottom:8px}
.rep-title-lg{font-family:var(--font-brand);font-size:22px;font-weight:700;color:var(--ink);letter-spacing:.01em;margin-bottom:4px}
.rep-sub-lg{font-size:13px;color:#888}
.rep-sub-lg b{color:var(--ink2);font-weight:600}
.rep-logo-mini{display:flex;align-items:center;gap:10px;flex-shrink:0}
.rep-logo-mini-img{height:100px;width:auto;object-fit:contain;display:block}
.rep-logo-mini-sub{font-size:9px;color:#999;letter-spacing:.05em;margin-top:1px;text-align:right}

.rep-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:20px}
.rep-stat{display:flex;align-items:center;gap:10px;background:var(--cream);border:1px solid var(--cream3);border-radius:var(--r-md);padding:11px 14px}
.rep-stat-icon{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px}
.rep-stat-icon.maroon{background:var(--maroon-bg);color:var(--maroon)}
.rep-stat-icon.orange{background:var(--orange-bg);color:var(--orange)}
.rep-stat-icon.amber{background:var(--amber-bg);color:var(--amber)}
.rep-stat-icon.red{background:var(--red-bg);color:var(--red2)}
.rep-stat-icon.blue{background:var(--blue-bg);color:var(--blue)}
.rep-stat-icon.green{background:var(--green-bg);color:var(--green)}
.rep-stat-icon.gray{background:#F0F0EE;color:#888}
.rep-stat-num{font-family:var(--font-head);font-size:18px;font-weight:800;line-height:1}
.rep-stat-label{font-size:9px;color:#888;text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-mono);margin-top:2px}

.rep-group{margin-bottom:16px;border:1px solid var(--cream3);border-radius:var(--r-lg);overflow:hidden}
.rep-group-head{background:var(--ink);color:#fff;padding:9px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.rep-group-head.tono-red{background:var(--maroon)}
.rep-group-head.tono-amber{background:#7A4E08}
.rep-group-head.tono-green{background:var(--green)}
.rep-group-head.tono-gray{background:#4A4A46}
.rep-group-name{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.04em}
.rep-group-count{font-size:10px;font-weight:700;background:rgba(255,255,255,.18);color:#fff;padding:3px 9px;border-radius:10px;font-family:var(--font-mono);flex-shrink:0}
.rep-cols{display:grid;grid-template-columns:var(--rep-grid,1fr);padding:8px 16px;background:var(--cream);border-bottom:1px solid var(--cream3);font-size:9px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-mono)}
.rep-row{display:grid;grid-template-columns:var(--rep-grid,1fr);align-items:center;padding:9px 16px;border-bottom:1px solid var(--cream2);gap:6px}
.rep-row:last-child{border-bottom:none}
.rep-item-name{font-size:13px;font-weight:500;color:var(--ink)}
.rep-item-code{font-size:10px;color:#aaa;font-family:var(--font-mono);margin-top:2px}
.rep-cell-mono{font-family:var(--font-mono);font-size:12px;text-align:center}
.rep-col-num{text-align:center}
.rep-cell-mono.strong{font-weight:700}

.sem-badge{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:700;padding:4px 9px;border-radius:10px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.sem-badge::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0}
.sem-badge.V{background:var(--green-bg);color:var(--green)}.sem-badge.V::before{background:var(--green)}
.sem-badge.A{background:var(--amber-bg);color:var(--amber)}.sem-badge.A::before{background:var(--amber)}
.sem-badge.R{background:var(--orange-bg);color:var(--orange)}.sem-badge.R::before{background:var(--orange)}
.sem-badge.P{background:var(--red-bg);color:var(--red2)}.sem-badge.P::before{background:var(--red2)}
.sem-badge.N{background:var(--maroon-bg);color:var(--maroon)}.sem-badge.N::before{background:var(--maroon)}

.rep-list-simple{border:1px solid var(--cream3);border-radius:var(--r-lg);overflow:hidden;margin-bottom:16px}
.rep-list-row{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px dotted var(--cream3)}
.rep-list-row:last-child{border-bottom:none}
.rep-list-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.rep-list-dot.ok{background:var(--green)}
.rep-list-dot.no{background:var(--maroon)}
.rep-list-dot.warn{background:var(--amber)}
.rep-list-name{font-size:12px;font-weight:600;color:var(--ink)}
.rep-list-meta{font-size:11px;color:#888;font-family:var(--font-mono);margin-top:1px}

.rep-section-title{font-family:var(--font-head);font-size:14px;font-weight:700;color:var(--ink);margin:22px 0 10px}
.rep-section-title:first-of-type{margin-top:0}