/* ══════════════════════════════════════════════════════
   STOKIRA — styles.css
   Paleta: Azul profundo · Modo oscuro profesional
   Tipografía: Plus Jakarta Sans + JetBrains Mono
══════════════════════════════════════════════════════ */

/* ── VARIABLES ──────────────────────────────────────── */
:root {
  --bg:          #0d1117;
  --surface:     #161b22;
  --elevated:    #1c2230;
  --hover:       #1f2937;
  --border:      #2a3441;
  --border-soft: #1e2a38;

  --text:        #e6edf3;
  --text-sub:    #8b949e;
  --text-dim:    #4a5568;

  --blue:        #3b82f6;
  --blue-d:      #2563eb;
  --blue-hover:  #1d4ed8;
  --blue-soft:   rgba(59,130,246,.12);
  --blue-glow:   rgba(59,130,246,.22);

  --c-ok:        #22c55e;
  --c-ok-bg:     rgba(34,197,94,.1);
  --c-ok-b:      rgba(34,197,94,.22);

  --c-low:       #f59e0b;
  --c-low-bg:    rgba(245,158,11,.1);
  --c-low-b:     rgba(245,158,11,.22);

  --c-order:     #60a5fa;
  --c-order-bg:  rgba(96,165,250,.1);
  --c-order-b:   rgba(96,165,250,.22);

  --c-crit:      #f87171;
  --c-crit-bg:   rgba(248,113,113,.1);
  --c-crit-b:    rgba(248,113,113,.22);

  --sh-sm:  0 4px 12px rgba(0,0,0,.4);
  --sh-md:  0 8px 24px rgba(0,0,0,.5);
  --sh-lg:  0 20px 60px rgba(0,0,0,.65);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

  --font: 'Plus Jakarta Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

/* ── RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { font-size: 15.5px; scroll-behavior: smooth; }
body  { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; line-height: 1.55; letter-spacing: 0.02em; }
button, input, select, textarea { font-family: var(--font); }

/* ── SCREENS ────────────────────────────────────────── */
.screen { display: none; min-height: 100vh; }
.screen.active { display: flex; }

/* ══════════════════════════════════════════════════════
   LOGO — Sistema de marca Stokira
══════════════════════════════════════════════════════ */
.logo-svg-full { width: 56px; height: 56px; flex-shrink: 0; }
.logo-svg-sm   { width: 36px; height: 36px; flex-shrink: 0; }

.logo-name   { font-size: 28px; font-weight: 800; letter-spacing: 1px; line-height: 1; }
.logo-stoki  { color: var(--text); }
.logo-ra     { color: var(--blue); }
.logo-slogan { font-size: 11px; color: var(--text-dim); letter-spacing: 2.5px; text-transform: uppercase; margin-top: 4px; }

/* Variante topbar (tamaño reducido) */
.topbar-brand { font-size: 20px; font-weight: 800; letter-spacing: 1px; line-height: 1; }

/* Variante sidebar */
.sidebar-brand  { font-size: 22px; font-weight: 800; letter-spacing: 1px; line-height: 1; }
.sidebar-slogan { font-size: 9.5px; color: rgba(255,255,255,.22); letter-spacing: 2px; text-transform: uppercase; margin-top: 3px; }

/* ══════════════════════════════════════════════════════
   LOGIN
══════════════════════════════════════════════════════ */
#screen-login {
  align-items: center; justify-content: center;
  padding: 24px; position: relative; overflow: hidden;
}
.login-bg-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--border-soft) 1px, transparent 1px), linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 44px 44px; opacity: .45; pointer-events: none;
}
.login-bg-glow {
  position: absolute; width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,.1) 0%, transparent 65%);
  top: 50%; left: 55%; transform: translate(-50%,-50%); pointer-events: none;
}
.login-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 40px 44px;
  width: 100%; max-width: 430px; position: relative; z-index: 1;
  box-shadow: var(--sh-lg); animation: cardIn .45s cubic-bezier(.22,1,.36,1);
}
@keyframes cardIn { from{opacity:0;transform:translateY(28px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }

.login-logo { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.logo-symbol { flex-shrink: 0; }
.logo-wordmark {}

.login-divider { height: 1px; background: var(--border); margin-bottom: 24px; }
.login-heading  { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.login-subtext  { font-size: 13.5px; color: var(--text-sub); margin-bottom: 24px; }
.login-err {
  display: none; font-size: 13px; color: var(--c-crit);
  background: var(--c-crit-bg); border: 1px solid var(--c-crit-b);
  border-radius: var(--r-sm); padding: 9px 13px; margin-bottom: 14px;
}
.login-err.show { display: block; }

/* ══════════════════════════════════════════════════════
   COMPONENTES COMPARTIDOS
══════════════════════════════════════════════════════ */

/* Botones */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 600; border: none; cursor: pointer;
  transition: all .18s; line-height: 1;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); box-shadow: 0 0 0 3px var(--blue-glow), var(--sh-sm); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost  { background: var(--hover); color: var(--text-sub); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); background: var(--elevated); }
.btn-sm     { padding: 7px 14px; font-size: 13px; }
.w-full     { width: 100%; justify-content: center; }
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--elevated); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sub); cursor: pointer; transition: all .15s;
}
.icon-btn:hover { color: var(--text); background: var(--hover); }

/* Formulario */
.fg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.flbl { font-size: 11.5px; font-weight: 600; color: var(--text-sub); text-transform: uppercase; letter-spacing: 1px; }
.inp-wrap { position: relative; }
.inp-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-dim); width: 16px; height: 16px; pointer-events: none; }
.inp-wrap .inp { padding-left: 40px; }
.inp {
  width: 100%; padding: 10px 14px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--text);
  font-size: 14px; outline: none; transition: all .18s;
}
.inp:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); background: var(--surface); }
.inp::placeholder { color: var(--text-dim); }
.sel { cursor: pointer; appearance: none; }
.ta  { resize: vertical; min-height: 80px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Badges de estado */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .3px;
}
.b-ok    { color: var(--c-ok);    background: var(--c-ok-bg);    border: 1px solid var(--c-ok-b);    }
.b-low   { color: var(--c-low);   background: var(--c-low-bg);   border: 1px solid var(--c-low-b);   }
.b-order { color: var(--c-order); background: var(--c-order-bg); border: 1px solid var(--c-order-b); }
.b-crit  { color: var(--c-crit);  background: var(--c-crit-bg);  border: 1px solid var(--c-crit-b);  }
.sk-ok    { color: var(--c-ok);    }
.sk-low   { color: var(--c-low);   }
.sk-order { color: var(--c-order); }
.sk-crit  { color: var(--c-crit);  }

/* User pill */
.user-pill { display: flex; align-items: center; gap: 7px; padding: 5px 10px; background: var(--elevated); border: 1px solid var(--border); border-radius: 20px; }
.user-av   { width: 28px; height: 28px; border-radius: 7px; background: var(--blue-d); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; color: #fff; flex-shrink: 0; }
.user-nm   { font-size: 13px; font-weight: 600; }
.role-tag  { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: .5px; }
.role-tag.emp   { background: var(--c-ok-bg);   color: var(--c-ok);   }
.role-tag.admin { background: var(--blue-soft);  color: var(--blue);   }

/* Section card */
.section-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 20px; }
.sc-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--border); }
.sc-title { font-size: 15px; font-weight: 700; }
.sc-sub   { font-size: 13px; color: var(--text-dim); }
.sc-body  { padding: 16px 20px; }

/* Toast */
.toast {
  position: fixed; bottom: 22px; right: 22px; z-index: 9999;
  background: var(--elevated); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 12px 18px; display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; box-shadow: var(--sh-md);
  transform: translateY(60px); opacity: 0;
  transition: all .3s cubic-bezier(.34,1.4,.64,1);
}
.toast.show  { transform: translateY(0); opacity: 1; }
.toast-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.toast.ok  .toast-dot { background: var(--c-ok);   }
.toast.err .toast-dot { background: var(--c-crit);  }

/* Modal */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); z-index: 500; display: none; align-items: center; justify-content: center; padding: 20px; }
.overlay.open { display: flex; animation: fadeIn .18s; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); width: 100%; max-width: 620px; max-height: 92vh; overflow-y: auto; box-shadow: var(--sh-lg); }
.modal-head  { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid var(--border); }
.modal-title { font-size: 17px; font-weight: 700; }
.modal-close { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--hover); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-sub); cursor: pointer; transition: all .15s; }
.modal-close:hover { color: var(--text); }
.modal-body  { padding: 22px 24px; }
.modal-foot  { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

/* Upload */
.upload-area { border: 1.5px dashed var(--border); border-radius: var(--r-md); padding: 22px; text-align: center; cursor: pointer; transition: all .2s; background: var(--bg); }
.upload-area:hover { border-color: var(--blue); background: var(--blue-soft); }
.upload-ph { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-dim); }
.upload-ph span { font-size: 13.5px; font-weight: 500; color: var(--text-sub); }
.upload-ph small { font-size: 12px; }

/* Filtros */
.fchip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 6px 13px; border-radius: 20px; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13px; font-weight: 500; color: var(--text-sub); cursor: pointer; transition: all .15s;
}
.fchip:hover { border-color: var(--border); color: var(--text); background: var(--hover); }
.fchip.active { background: var(--blue-soft); border-color: rgba(59,130,246,.35); color: var(--blue); }
.fdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ok-dot       { background: var(--c-ok);    }
.low-dot      { background: var(--c-low);   }
.order-dot    { background: var(--c-order); }
.critical-dot { background: var(--c-crit);  }
.fcount { font-size: 11px; opacity: .6; }
.result-lbl { font-size: 13px; color: var(--text-dim); margin-left: auto; }

/* ══════════════════════════════════════════════════════
   VISTA EMPLEADO
══════════════════════════════════════════════════════ */
#screen-emp { flex-direction: column; }

.emp-topbar {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 0 20px; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; position: sticky; top: 0; z-index: 40;
}
.topbar-logo  { display: flex; align-items: center; gap: 10px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

/* Hero */
.emp-hero { background: var(--surface); border-bottom: 1px solid var(--border); padding: 28px 20px 24px; }
.hero-inner { max-width: 700px; margin: 0 auto; }
.hero-eyebrow { font-size: 11px; font-weight: 600; color: var(--blue); text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 8px; }
.hero-title { font-size: clamp(22px, 4vw, 32px); font-weight: 800; line-height: 1.2; margin-bottom: 20px; letter-spacing: -.5px; }

/* Search */
.search-bar  { display: flex; gap: 10px; align-items: stretch; }
.search-wrap {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: var(--elevated); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); padding: 12px 16px; transition: all .2s;
}
.search-wrap:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); background: var(--bg); }
.s-ic { color: var(--text-dim); flex-shrink: 0; }
.search-wrap input { flex: 1; background: none; border: none; outline: none; font-size: 15px; color: var(--text); }
.search-wrap input::placeholder { color: var(--text-dim); }
.clear-btn { width: 26px; height: 26px; border-radius: 6px; background: var(--hover); border: none; display: none; align-items: center; justify-content: center; color: var(--text-sub); cursor: pointer; flex-shrink: 0; }
.clear-btn.show { display: flex; }
.scan-btn { display: flex; align-items: center; gap: 8px; padding: 0 18px; background: var(--blue); color: #fff; border: none; border-radius: var(--r-lg); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s; flex-shrink: 0; }
.scan-btn:hover { background: var(--blue-hover); box-shadow: 0 0 0 3px var(--blue-glow); }

/* Historial */
.history-row { display: flex; align-items: center; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.history-label { font-size: 10.5px; font-weight: 600; color: var(--text-dim); letter-spacing: 1.5px; flex-shrink: 0; }
.history-empty { font-size: 12px; color: var(--text-dim); }
.hist-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 16px; background: var(--elevated);
  border: 1px solid var(--border); font-size: 12px; color: var(--text-sub);
  cursor: pointer; transition: all .15s; font-family: var(--mono);
}
.hist-chip:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }

/* Scanner */
.scanner-area { display: none; margin-top: 14px; border-radius: var(--r-md); overflow: hidden; position: relative; background: #000; }
.scanner-area.active { display: block; animation: fadeIn .2s; }
#scanner-video { width: 100%; height: 200px; object-fit: cover; display: block; }
.scanner-ui { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.scanner-frame { width: 220px; height: 110px; border-radius: var(--r-md); border: 2px solid var(--blue); box-shadow: 0 0 0 2000px rgba(0,0,0,.5); position: relative; }
.scanner-beam { position: absolute; left: 4px; right: 4px; height: 2px; background: linear-gradient(90deg, transparent, var(--blue), transparent); animation: beam 2s ease-in-out infinite; top: 8px; }
@keyframes beam { 0%,100%{top:8px;opacity:1} 50%{top:calc(100% - 10px);opacity:.7} }
.scanner-hint { position: absolute; bottom: 38px; left: 0; right: 0; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.6); }
.scanner-close { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.2); color: #fff; padding: 6px 16px; border-radius: 20px; font-size: 12.5px; cursor: pointer; }

/* Filtros empleado */
.emp-content { padding: 16px 20px; max-width: 860px; margin: 0 auto; width: 100%; }
.emp-filters-bar { display: flex; align-items: center; gap: 7px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.emp-filters-bar::-webkit-scrollbar { display: none; }

/* Lista de productos */
.prod-list { display: flex; flex-direction: column; gap: 9px; }
.prod-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); display: flex; align-items: stretch;
  overflow: hidden; cursor: pointer; transition: all .2s;
}
.prod-card:hover { border-color: rgba(59,130,246,.4); box-shadow: 0 0 0 1px rgba(59,130,246,.14), var(--sh-sm); transform: translateY(-1px); }
.prod-thumb {
  width: 84px; flex-shrink: 0; background: var(--elevated);
  border-right: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--text-dim);
  overflow: hidden;
}
.prod-thumb img { width: 100%; height: 100%; object-fit: cover; }
.prod-info { flex: 1; padding: 13px 15px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.prod-name { font-size: 14px; font-weight: 600; line-height: 1.35; }
.prod-codes { display: flex; gap: 5px; flex-wrap: wrap; }
.code-tag { font-family: var(--mono); font-size: 11px; background: var(--elevated); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; color: var(--text-sub); }
.code-tag b { color: var(--text-dim); font-family: var(--font); font-weight: 400; font-size: 10.5px; margin-right: 2px; }
.prod-loc { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-sub); flex-wrap: wrap; }
.zone-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.18); color: var(--text-sub); }
.rack-tag { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--blue); background: var(--blue-soft); border: 1px solid rgba(59,130,246,.25); border-radius: 4px; padding: 2px 8px; }

/* Quick view (aparece en hover) */
.prod-quick {
  display: none; padding: 12px 14px; background: var(--elevated);
  border-left: 1px solid var(--border); min-width: 135px;
  flex-direction: column; gap: 8px; justify-content: center; flex-shrink: 0;
}
.prod-card:hover .prod-quick { display: flex; }
.qv-lbl { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 1px; }
.qv-val { font-size: 12.5px; font-weight: 600; }
.qv-val.mono { font-family: var(--mono); color: var(--blue); }

.prod-stock {
  padding: 13px 15px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  border-left: 1px solid var(--border); min-width: 76px; flex-shrink: 0;
}
.snum { font-size: 27px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.slbl { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }

/* Empty */
.empty-state { text-align: center; padding: 56px 20px; }
.empty-state svg { color: var(--text-dim); margin: 0 auto 14px; display: block; opacity: .35; }
.empty-state h3 { font-size: 16px; font-weight: 700; color: var(--text-sub); margin-bottom: 6px; }
.empty-state p  { font-size: 13.5px; color: var(--text-dim); }

/* Detail modal */
.det-img  { width: 100%; height: 190px; background: var(--elevated); border-radius: var(--r-md); overflow: hidden; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); }
.det-img img { width: 100%; height: 100%; object-fit: cover; }
.det-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.det-field { background: var(--elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: 11px 14px; }
.det-field.full      { grid-column: 1/-1; }
.det-field.highlight { background: var(--blue-soft); border-color: rgba(59,130,246,.3); }
.det-lbl  { font-size: 10.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.det-val  { font-size: 14px; font-weight: 600; }
.det-val.big  { font-size: 28px; font-weight: 800; color: var(--blue); letter-spacing: -1px; }
.det-val.mono { font-family: var(--mono); color: var(--blue); font-size: 14px; }
.det-val.rack { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--blue); letter-spacing: 1px; }

/* ══════════════════════════════════════════════════════
   VISTA ADMIN
══════════════════════════════════════════════════════ */
#screen-admin { flex-direction: row; }

/* ── SIDEBAR ─────────────────────────────────────────
   Layout: logo fijo arriba + nav scrolleable en el
   medio + footer fijo abajo.
   La barra de scroll usa los colores del tema.
─────────────────────────────────────────────────── */
.sidebar {
  width: 235px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  flex-shrink: 0;
  /* El scroll solo está en .sidebar-nav, no en todo el sidebar */
  overflow: hidden;
}

/* Logo — siempre visible, no se mueve */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 18px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;         /* nunca se achica */
}

/* Nav — área scrolleable con barra personalizada */
.sidebar-nav {
  flex: 1;                /* ocupa todo el espacio entre logo y footer */
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;       /* scroll solo acá */
  overflow-x: hidden;
  min-height: 0;          /* necesario para que flex + overflow funcionen */

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Chrome / Edge / Safari */
.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}
.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
  transition: background .2s;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

/* Gradiente sutil al final del nav para indicar que hay más items */
.sidebar-nav::after {
  content: '';
  display: block;
  height: 20px;
  flex-shrink: 0;
  pointer-events: none;
}

/* Labels de sección (Principal, Gestión, etc.) */
.nav-label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 10px 10px 4px;
  margin-top: 6px;
  flex-shrink: 0;
}

/* Botones de navegación */
.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-md);
  background: none;
  border: none;
  color: var(--text-sub);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.nav-btn:hover  { background: var(--hover); color: var(--text); }
.nav-btn.active {
  background: var(--blue-soft);
  color: var(--blue);
  box-shadow: inset 2px 0 0 var(--blue);  /* línea izquierda para el ítem activo */
}
.nav-btn svg    { flex-shrink: 0; opacity: .75; }
.nav-btn.active svg { opacity: 1; }

/* Contadores de alertas en el nav */
.nav-count {
  margin-left: auto;
  background: var(--c-crit-bg);
  color: var(--c-crit);
  border: 1px solid var(--c-crit-b);
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}
.nav-count-crit {
  background: var(--c-crit-bg);
  color: var(--c-crit);
  border-color: var(--c-crit-b);
  margin-left: auto;
}
.nav-count-low {
  background: var(--c-low-bg);
  color: var(--c-low);
  border-color: var(--c-low-b);
  margin-left: 4px;
}

/* Footer — siempre visible, no se mueve */
.sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;         /* nunca se achica */
  background: var(--surface);
}
.sidebar-user   { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: var(--r-md); background: var(--elevated); margin-bottom: 8px; }
.sb-uname { font-size: 13px; font-weight: 600; }
.sb-urole { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.sidebar-logout { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px; border-radius: var(--r-md); background: none; border: 1px solid var(--border); color: var(--text-dim); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all .15s; }
.sidebar-logout:hover { color: var(--c-crit); border-color: var(--c-crit-b); background: var(--c-crit-bg); }
.sidebar-version { margin-top: 10px; text-align: center; font-size: 10.5px; color: var(--text-dim); opacity: .6; line-height: 1.6; }
.sidebar-version strong { font-weight: 600; color: var(--text-dim); }
.emp-version { text-align: center; font-size: 11px; color: var(--text-dim); opacity: .55; padding: 4px 0 2px; letter-spacing: .02em; }
.emp-version strong { font-weight: 600; }

.adm-main    { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow-y: auto; }
.adm-topbar  { height: 56px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 40; flex-shrink: 0; }
.adm-page-title { font-size: 17px; font-weight: 700; }
.adm-topbar-right { display: flex; align-items: center; gap: 10px; }
.adm-search-wrap { display: flex; align-items: center; gap: 8px; background: var(--elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: 7px 13px; width: 230px; transition: all .2s; }
.adm-search-wrap:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.adm-search-wrap input { background: none; border: none; outline: none; font-size: 13.5px; color: var(--text); width: 100%; }
.adm-search-wrap input::placeholder { color: var(--text-dim); }
.adm-content { padding: 22px 24px; }

.aview { display: none; animation: viewIn .22s ease; }
.aview.active { display: block; }
@keyframes viewIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* Stats */
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 20px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; display: flex; align-items: center; gap: 14px; position: relative; overflow: hidden; }
.stat-card::before { content:''; position:absolute; top:0; right:0; bottom:0; width:4px; border-radius:0 var(--r-lg) var(--r-lg) 0; }
.stat-card.blue::before   { background: var(--blue); }
.stat-card.green::before  { background: var(--c-ok); }
.stat-card.yellow::before { background: var(--c-low); }
.stat-card.red::before    { background: var(--c-crit); }
.stat-icon { width: 40px; height: 40px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.blue-ic   { background: var(--blue-soft);   color: var(--blue);    }
.green-ic  { background: var(--c-ok-bg);     color: var(--c-ok);    }
.yellow-ic { background: var(--c-low-bg);    color: var(--c-low);   }
.red-ic    { background: var(--c-crit-bg);   color: var(--c-crit);  }
.stat-lbl  { font-size: 12px; color: var(--text-sub); font-weight: 500; margin-bottom: 4px; }
.stat-val  { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.stat-card.blue   .stat-val { color: var(--blue);   }
.stat-card.green  .stat-val { color: var(--c-ok);   }
.stat-card.yellow .stat-val { color: var(--c-low);  }
.stat-card.red    .stat-val { color: var(--c-crit); }

/* Tabla */
.table-scroll { overflow-x: auto; }
table  { width: 100%; border-collapse: collapse; }
th { padding: 10px 14px; text-align: left; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); font-weight: 600; background: var(--elevated); border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 11px 14px; font-size: 13.5px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--hover); }
.mono { font-family: var(--mono); font-size: 12.5px; color: var(--text-sub); }
.t-actions { display: flex; gap: 5px; }
.t-btn { width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--elevated); display: flex; align-items: center; justify-content: center; color: var(--text-sub); cursor: pointer; transition: all .15s; }
.t-btn:hover     { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.t-btn.del:hover { border-color: var(--c-crit-b); color: var(--c-crit); background: var(--c-crit-bg); }
.t-thumb { width: 34px; height: 34px; border-radius: 7px; background: var(--elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-dim); overflow: hidden; }
.t-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Alert rows */
.alert-row { background: var(--elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; transition: all .15s; }
.alert-row:hover { box-shadow: var(--sh-sm); }
.alert-bar   { width: 4px; height: 40px; border-radius: 2px; flex-shrink: 0; }
.alert-bar.critical { background: var(--c-crit);  }
.alert-bar.low      { background: var(--c-low);   }
.alert-bar.order    { background: var(--c-order); }
.alert-ico   { width: 36px; height: 36px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.alert-text  { flex: 1; min-width: 0; }
.alert-name  { font-size: 13.5px; font-weight: 600; }
.alert-meta  { font-size: 12px; color: var(--text-sub); margin-top: 3px; display: flex; gap: 12px; flex-wrap: wrap; }
.alert-msg   { font-size: 12px; font-weight: 500; margin-top: 4px; }

/* User cards */
.user-row-card  { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
.user-row-card:last-child { border-bottom: none; }
.user-av-lg { width: 38px; height: 38px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; flex-shrink: 0; }
.user-row-name { font-size: 14px; font-weight: 600; }
.user-row-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* Reports */
.report-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-bottom: 20px; }
.report-stat  { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 22px; }
.rs-lbl { font-size: 11.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.rs-val { font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -1.5px; }
.rs-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 5px; }
.bar-row   { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.bar-label { width: 88px; font-size: 13px; font-weight: 500; color: var(--text-sub); }
.bar-track { flex: 1; height: 8px; background: var(--elevated); border-radius: 4px; overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 4px; transition: width .6s ease; }
.bar-num   { font-size: 16px; font-weight: 700; min-width: 24px; text-align: right; }

/* Config */
.config-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; max-width: 480px; }
.cfg-sec-title { font-size: 13px; font-weight: 700; color: var(--text-sub); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.cfg-divider   { height: 1px; background: var(--border); margin: 20px 0; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — Mobile-first breakpoints
   - 900px : tablet apaisada / desktop pequeño
   - 768px : tablet portrait
   - 640px : mobile grande
   - 480px : mobile estándar
══════════════════════════════════════════════════════ */

/* ── Botón hamburguesa (solo visible en móvil) ── */
.mob-menu-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: var(--hover); border: 1px solid var(--border);
  border-radius: var(--r-md); cursor: pointer; flex-shrink: 0;
  color: var(--text-sub); transition: all .15s;
}
.mob-menu-btn:hover { color: var(--text); border-color: var(--blue); }

/* Overlay que cierra el sidebar al tocar fuera en móvil */
.mob-sidebar-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 199;
  background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
}
.mob-sidebar-overlay.open { display: block; }

/* ── 900px: tablet apaisada ── */
@media (max-width: 900px) {
  .sidebar { width: 210px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .adm-search-wrap { width: 180px; }
  .mk-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 768px: tablet portrait ── */
@media (max-width: 768px) {
  /* Sidebar: se convierte en drawer lateral */
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 200;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    width: 260px !important;
    box-shadow: var(--sh-lg);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  #screen-admin  { flex-direction: column; }
  #screen-maker  { flex-direction: column; }

  /* Topbar admin/maker: mostrar botón hamburguesa */
  .mob-menu-btn { display: flex; }
  .adm-topbar { padding: 0 14px; }
  .adm-search-wrap { display: none; } /* en móvil la búsqueda va dentro del contenido */

  /* Grillas */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mk-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .form-row-2 { grid-template-columns: 1fr; }
  .report-grid { grid-template-columns: 1fr; }

  /* Contenido */
  .adm-content { padding: 16px; }

  /* Tarjetas de producto */
  .adm-prod-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }

  /* Modales: ocupan toda la pantalla en móvil */
  .modal {
    max-height: 96vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    margin-top: auto;
  }
  .overlay { align-items: flex-end; padding: 0; }

  /* Log table: scroll horizontal */
  .log-wrap { overflow-x: auto; }
}

/* ── 640px: mobile grande ── */
@media (max-width: 640px) {
  /* Login */
  .login-card { padding: 28px 20px; }
  .hero-title { font-size: 24px; }

  /* Grillas: una columna */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mk-stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .adm-prod-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }

  /* Formularios */
  .form-row-2 { grid-template-columns: 1fr; }

  /* Topbar empleado */
  .emp-topbar { padding: 0 14px; }
  .topbar-right .btn span { display: none; }

  /* Cards del admin */
  .adm-prod-card-img { height: 90px; }

  /* Botón escanear: solo icono */
  .scan-btn span { display: none; }
  .scan-btn { padding: 0 14px; }

  /* Acción rápida de tarjeta: siempre visible en touch */
  .prod-quick { display: none !important; }

  /* Alertas: layout vertical */
  .alert-row { flex-wrap: wrap; gap: 8px; }
  .alert-actions { width: 100%; display: flex; gap: 6px; }

  /* Modal footer: botones apilados */
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot .btn { width: 100%; justify-content: center; }

  /* Modal body: menos padding */
  .modal-body { padding: 16px; }
  .modal-head { padding: 16px; }

  /* Topbar del admin: titulo más chico */
  .adm-page-title { font-size: 15px; }

  /* Section cards */
  .section-card .sc-head { padding: 14px 16px; }
  .section-card .sc-body { padding: 0; }

  /* Log de actividad: tabla compacta */
  .log-table th, .log-table td { padding: 8px 10px; font-size: 11.5px; }
}

/* ── 480px: mobile estándar ── */
@media (max-width: 480px) {
  /* Grilla de stats: 2 columnas compactas */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card { padding: 14px 12px; }
  .stat-val { font-size: 22px; }

  /* Grilla de productos: 2 columnas fijas */
  .adm-prod-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Contenido admin con menos padding */
  .adm-content { padding: 12px; }

  /* Hero empleado */
  .emp-content { padding: 12px 14px; }
  .emp-hero { padding: 20px 14px 18px; }

  /* Botones del topbar */
  .adm-topbar-right .btn-sm span { display: none; }
}

/* ════════════════════════════════════════════════════
   TOGGLES DE CONFIGURACIÓN (admin → Configuración)
   Son los interruptores on/off para controlar qué
   campos ve el empleado en el detalle del producto.
════════════════════════════════════════════════════ */

/* Contenedor de todos los toggles */
.cfg-toggles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Fila de cada toggle: ocupa todo el ancho,
   alinea el texto a la izquierda y el switch a la derecha */
.cfg-toggle-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  user-select: none; /* evita que se seleccione el texto al hacer clic */
}
.cfg-toggle-row:last-child { border-bottom: none; }

/* Texto del toggle (ocupa el espacio disponible) */
.cfg-toggle-info { flex: 1; }
.cfg-toggle-lbl  { font-size: 13.5px; font-weight: 600; color: var(--text); display: block; }
.cfg-toggle-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; display: block; }

/* Oculta el checkbox real (usamos el span .cfg-switch para el diseño) */
.cfg-checkbox { display: none; }

/* El switch visual (el botón deslizable) */
.cfg-switch {
  position: relative;
  width: 42px;
  height: 24px;
  background: var(--border);
  border-radius: 12px;
  transition: background .2s;
  flex-shrink: 0;
}

/* El círculo blanco dentro del switch */
.cfg-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}

/* Cuando el checkbox está marcado:
   - El fondo del switch se vuelve azul
   - El círculo se desplaza hacia la derecha */
.cfg-checkbox:checked + .cfg-switch {
  background: var(--blue-d);
}
.cfg-checkbox:checked + .cfg-switch::after {
  transform: translateX(18px);
}


/* ══════════════════════════════════════════════════════
   SECCIÓN: ADMIN — PRODUCTOS EN TARJETAS
   Estilos para la nueva vista de productos del admin:
   búsqueda en tiempo real + grid de tarjetas rectangulares.
══════════════════════════════════════════════════════ */

/* Barra de búsqueda de productos (admin) */
.adm-prod-search-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.adm-prod-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 240px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 0 14px;
    height: 42px;
    transition: border-color .15s;
}
.adm-prod-search-wrap:focus-within {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.adm-prod-search-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 13.5px;
    font-family: inherit;
}
.adm-prod-search-wrap input::placeholder { color: var(--text-dim); }

/* Grid de tarjetas de productos */
.adm-prod-grid {
    display: grid;
    /* Columnas responsivas: mínimo 220px, máximo libre */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

/* Tarjeta individual de producto */
.adm-prod-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.adm-prod-card:hover {
    transform: translateY(-2px);
    border-color: rgba(37,99,235,.35);
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
}

/* Franja de color superior según el estado del stock */
.adm-prod-card-bar {
    height: 3px;
    width: 100%;
    flex-shrink: 0;
}
.adm-prod-card-bar.ok       { background: var(--c-ok); }
.adm-prod-card-bar.low      { background: var(--c-low); }
.adm-prod-card-bar.order    { background: var(--c-order); }
.adm-prod-card-bar.critical { background: var(--c-crit); }

/* Imagen / thumbnail del producto */
.adm-prod-card-img {
    width: 100%;
    height: 110px;
    background: var(--hover);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.adm-prod-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cuerpo de la tarjeta: nombre, códigos, categoría */
.adm-prod-card-body {
    padding: 12px 14px 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.adm-prod-card-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    /* Limitar a 2 líneas con ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.adm-prod-card-codes {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.adm-prod-card-codes .code-tag {
    font-size: 10.5px;
    font-family: 'JetBrains Mono', monospace;
    background: var(--hover);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    color: var(--text-sub);
}
.adm-prod-card-cat {
    font-size: 11.5px;
    color: var(--text-dim);
    margin-top: 4px;
}

/* Fila de stock: número grande + badge de estado */
.adm-prod-card-stock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    gap: 8px;
}
.adm-prod-card-stock-num {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1;
}
.adm-prod-card-stock-lbl {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 2px;
}

/* Fila de acciones: editar y eliminar — SIEMPRE VISIBLES */
.adm-prod-card-actions {
    display: flex;
    flex-wrap: wrap;  /* permite que los botones se acomoden en 2 filas */
    gap: 6px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
}
.adm-prod-card-actions .btn {
    /* cada botón ocupa ~50% del ancho menos el gap → 2 por fila */
    flex: 1 1 calc(50% - 3px);
    justify-content: center;
    font-size: 11.5px;
    padding: 6px 0;
    gap: 5px;
    min-width: 0;  /* evita que el texto largo rompa el layout */
}

/* Estado vacío / bienvenida */
.adm-prod-welcome {
    grid-column: 1 / -1; /* ocupar todo el ancho del grid */
    text-align: center;
    padding: 60px 20px;
    color: var(--text-dim);
}
.adm-prod-welcome p {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-sub);
    margin-bottom: 8px;
}
.adm-prod-welcome small {
    font-size: 13px;
    line-height: 1.6;
    max-width: 320px;
    display: block;
    margin: 0 auto;
}

/* ── Modal de Devolución: filas de ventas clicables ─── */
.return-sale-row:hover {
    background: var(--hover) !important;
    border-color: var(--border-focus, #4b5563) !important;
}