/* ════════════════════════════════════════════════════════════
   KUPAI · Inventario General
   Mobile-first → sidebar en desktop (≥ 960px)
   Filosofía: tipografía brutal, neones, datos que se ven.
════════════════════════════════════════════════════════════ */

:root {
  /* Colores */
  --bg:        #07070E;
  --bg-2:      #0D0D1A;
  --bg-card:   rgba(255,255,255,0.04);
  --bg-card-h: rgba(255,255,255,0.07);
  --border:    rgba(255,255,255,0.07);
  --border-h:  rgba(255,255,255,0.16);

  --green:  #00FF87;
  --red:    #FF2D5B;
  --amber:  #FFB800;
  --cyan:   #00EDFF;
  --purple: #A855F7;

  --txt:  #FFFFFF;
  --txt-d:rgba(255,255,255,0.55);
  --txt-g:rgba(255,255,255,0.22);

  /* Dinámica — reemplazada por JS según categoría activa */
  --cat-color: #FF2D5B;
  --cat-bg:    rgba(255,45,91,0.08);

  /* Tipografías */
  --fd: 'Space Grotesk', system-ui, sans-serif;
  --fb: 'Outfit', system-ui, sans-serif;
  --fm: 'Space Mono', monospace;

  /* Layout */
  --sidebar-w: 260px;
  --hdr-mobile:56px;
  --r:  10px;
  --r-l:22px;
  --r-xl:40px;
  --ease:cubic-bezier(0.25,1,0.5,1);

  /* Touch targets */
  --touch: 48px;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html {
  font-family: var(--fb);
  background: var(--bg);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body { min-height:100dvh; overflow-x:hidden; }

/* Scrollbar */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-thumb { background:var(--border-h); border-radius:3px; }

/* ── Grain ────────────────────────────────────────────────── */
#grain-canvas {
  position:fixed; inset:0; z-index:9999;
  pointer-events:none; mix-blend-mode:overlay; opacity:0.3;
}

/* ── Banner SW ────────────────────────────────────────────── */
#update-banner {
  position:fixed; top:-64px; left:50%; transform:translateX(-50%);
  z-index:600; background:var(--cyan); color:#000;
  padding:10px 20px; border-radius:var(--r-xl);
  font-family:var(--fd); font-weight:700; font-size:.78rem;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 8px 32px rgba(0,237,255,.35); white-space:nowrap;
  transition:top .4s var(--ease);
}
#update-banner.visible { top:14px; }
.btn-update {
  background:rgba(0,0,0,.2); border:none; color:inherit;
  padding:3px 12px; border-radius:var(--r-xl); cursor:pointer; font-weight:700;
}

/* ════════════════════════════════════════════════════════════
   SHELL — grid mobile (stack) / desktop (sidebar + content)
════════════════════════════════════════════════════════════ */
.app-shell {
  display:flex;
  min-height:100dvh;
}

/* ════════════════════════════════════════════════════════════
   SIDEBAR — oculto en mobile, fijo en desktop
════════════════════════════════════════════════════════════ */
.sidebar {
  display:none; /* mobile: oculto */
}

/* ════════════════════════════════════════════════════════════
   CABECERA MÓVIL — solo mobile
════════════════════════════════════════════════════════════ */
.hdr-mobile {
  position:fixed; top:0; left:0; right:0;
  height:var(--hdr-mobile); z-index:200;
  background:rgba(7,7,14,.92);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
  justify-content:space-between;
  padding:0 16px;
}
.hdr-mobile-logo {
  font-family:var(--fd); font-weight:900; font-size:1.15rem;
  letter-spacing:-.04em;
  background:linear-gradient(135deg,#FF2D5B,#FF8C00);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hdr-search-btn {
  width:var(--touch); height:var(--touch);
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r); color:var(--txt-d); font-size:1.2rem;
  cursor:pointer; transition:all .2s;
  /* Touch-friendly */
  -webkit-tap-highlight-color:transparent;
}
.hdr-search-btn:active { background:var(--bg-card-h); color:var(--txt); }

/* ── Barra búsqueda móvil ─────────────────────────────────── */
.search-bar-mobile {
  position:fixed; top:0; left:0; right:0; z-index:300;
  transform:translateY(-100%); transition:transform .3s var(--ease);
  background:var(--bg-2); border-bottom:1px solid var(--border);
}
.search-bar-mobile.open { transform:translateY(0); }
.search-bar-inner {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  height:var(--hdr-mobile);
}
.search-icon { font-size:1.1rem; color:var(--txt-g); flex-shrink:0; }
.search-input {
  flex:1; background:transparent; border:none; outline:none;
  color:var(--txt); font-family:var(--fb); font-size:1rem;
}
.search-input::placeholder { color:var(--txt-g); }
.search-close {
  width:36px; height:36px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border);
  border-radius:50%; color:var(--txt-d); cursor:pointer; font-size:.9rem;
  -webkit-tap-highlight-color:transparent;
}

/* ════════════════════════════════════════════════════════════
   MAIN-COL — toda la pantalla en mobile
════════════════════════════════════════════════════════════ */
.main-col {
  flex:1; min-width:0;
  padding-top:var(--hdr-mobile); /* espacio para la cabecera fija */
}

/* ════════════════════════════════════════════════════════════
   HERO — mobile
════════════════════════════════════════════════════════════ */
.scene-hero {
  position:relative;
  min-height:72dvh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px 16px 28px;
  overflow:hidden;
}

.hero-bg-gradient {
  position:absolute; inset:0; z-index:0; will-change:transform;
  background:
    radial-gradient(ellipse 90% 60% at 15% 85%, rgba(255,45,91,.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 70% at 85% 15%, rgba(0,237,255,.10) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 30%, #07070E 100%);
}
.hero-bg-line {
  position:absolute; top:38%; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
  z-index:1;
}
.hero-giant-text {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--fd); font-weight:900;
  font-size:clamp(4.5rem,22vw,18rem);
  letter-spacing:-.06em; line-height:.85;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.04);
  white-space:nowrap; user-select:none; pointer-events:none;
  z-index:1; will-change:transform,opacity;
}

.hero-content { position:relative; z-index:2; }

.hero-meta {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin-bottom:10px;
}
.hero-fecha {
  font-family:var(--fm); font-size:.58rem;
  letter-spacing:.18em; color:var(--txt-d); text-transform:uppercase;
}
.hero-tag {
  font-family:var(--fm); font-size:.58rem; letter-spacing:.12em;
  color:var(--red); background:rgba(255,45,91,.1);
  border:1px solid rgba(255,45,91,.3);
  padding:3px 10px; border-radius:var(--r-xl); text-transform:uppercase;
}

.hero-title {
  font-family:var(--fd); font-weight:900;
  font-size:clamp(3.8rem,18vw,10rem);
  line-height:.88; letter-spacing:-.05em; text-transform:uppercase;
  margin-bottom:6px; overflow:hidden;
}
.hero-subtitle {
  font-family:var(--fd); font-size:clamp(.78rem,3vw,.95rem);
  font-weight:300; color:var(--txt-d);
  letter-spacing:.04em; text-transform:uppercase; margin-bottom:20px;
}

/* Contadores del hero — 4 en fila */
.hero-stats {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:6px;
}
.hero-stat {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r); padding:10px 6px; text-align:center;
}
.hero-stat-num {
  display:block; font-family:var(--fd); font-weight:900;
  font-size:clamp(1.3rem,5vw,2.4rem); line-height:1; letter-spacing:-.04em;
}
.hero-stat-label {
  display:block; font-family:var(--fm); font-size:.5rem;
  letter-spacing:.12em; color:var(--txt-g); text-transform:uppercase; margin-top:3px;
}
.hero-stat--ok     .hero-stat-num { color:var(--green); text-shadow:0 0 18px rgba(0,255,135,.4); }
.hero-stat--danger .hero-stat-num { color:var(--red);   text-shadow:0 0 18px rgba(255,45,91,.4); }
.hero-stat--warn   .hero-stat-num { color:var(--amber); text-shadow:0 0 18px rgba(255,184,0,.4); }

/* ════════════════════════════════════════════════════════════
   TABS DE CATEGORÍA — mobile (scroll horizontal)
════════════════════════════════════════════════════════════ */
.cat-tabs-wrapper {
  position:sticky; top:var(--hdr-mobile); z-index:100;
  background:rgba(7,7,14,.94);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
#cat-tabs {
  display:flex; overflow-x:auto; gap:8px;
  padding:10px 14px;
  scrollbar-width:none;
}
#cat-tabs::-webkit-scrollbar { display:none; }

.cat-tab {
  flex-shrink:0;
  display:flex; align-items:center; gap:6px;
  min-height:var(--touch); /* touch target mínimo */
  padding:0 14px;
  border:1px solid var(--border); border-radius:var(--r-xl);
  background:transparent; color:var(--txt-d);
  font-family:var(--fd); font-size:.72rem; font-weight:600;
  letter-spacing:.04em; cursor:pointer; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:all .2s var(--ease);
}
.cat-tab:active { transform:scale(.96); }
.cat-tab.active {
  border-color:var(--cat-color); color:var(--txt);
  background:var(--cat-bg);
}

/* ════════════════════════════════════════════════════════════
   GRID PRINCIPAL — mobile (1 col) → tablet (2 col)
════════════════════════════════════════════════════════════ */
.inv-main {
  padding:14px 12px 32px;
}

.grid-header { display:none; } /* oculto en mobile */

.grid-header-title {
  font-family:var(--fd); font-weight:900;
  font-size:1.1rem; letter-spacing:-.02em;
}
.grid-header-count {
  font-family:var(--fm); font-size:.62rem;
  color:var(--txt-g); letter-spacing:.12em;
}

/* Secciones por categoría (vista TODAS) */
.inv-seccion { margin-bottom:28px; }
.inv-seccion-titulo {
  font-family:var(--fd); font-weight:900;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cat-color);
  display:flex; align-items:center; gap:8px;
  margin-bottom:10px; padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.inv-seccion-titulo::before {
  content:''; width:7px; height:7px; flex-shrink:0;
  background:var(--cat-color); border-radius:50%;
  box-shadow:0 0 8px var(--cat-color);
}
.inv-seccion-count {
  font-family:var(--fm); font-size:.55rem; color:var(--txt-g); margin-left:auto;
}

/* Grid: 1 col mobile → 2 cols tablet */
.inv-cards {
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
@media (min-width:480px) {
  .inv-cards { grid-template-columns:repeat(2,1fr); }
}

/* ════════════════════════════════════════════════════════════
   TARJETAS DE PRODUCTO — táctiles, claras, legibles
════════════════════════════════════════════════════════════ */
.inv-card {
  position:relative;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r);
  /* padding generoso para facilidad de lectura en mobile */
  padding:14px 14px 12px;
  transition:border-color .2s, background .2s;
  -webkit-tap-highlight-color:transparent;
}
/* Solo hover en puntero fino (desktop) */
@media (hover:hover) {
  .inv-card:hover {
    border-color:var(--cat-color); background:var(--cat-bg);
    transform:translateY(-2px);
    transition:border-color .2s, background .2s, transform .2s var(--ease);
  }
}

.inv-card--sin-stock { opacity:.52; border-style:dashed; }
.inv-card--vencido {
  border-color:rgba(255,184,0,.3); background:rgba(255,184,0,.04);
}

/* Badge de estado — esquina superior derecha */
.badge {
  position:absolute; top:10px; right:10px;
  font-family:var(--fm); font-size:.48rem; letter-spacing:.1em;
  padding:3px 8px; border-radius:var(--r-xl);
  text-transform:uppercase; font-weight:700; white-space:nowrap;
}
.badge--activo    { color:var(--green); background:rgba(0,255,135,.1);  border:1px solid rgba(0,255,135,.22); }
.badge--sin-stock { color:var(--red);   background:rgba(255,45,91,.1);  border:1px solid rgba(255,45,91,.22); }
.badge--vencido   { color:var(--amber); background:rgba(255,184,0,.1);  border:1px solid rgba(255,184,0,.22); }
.badge--pendiente { color:var(--cyan);  background:rgba(0,237,255,.1);  border:1px solid rgba(0,237,255,.22); }

/* Nombre del producto — texto grande y legible en móvil */
.card-nombre {
  font-family:var(--fd); font-weight:700;
  /* mínimo 14px en móvil — legible sin zoom */
  font-size:clamp(14px,3.5vw,15px);
  line-height:1.25; color:var(--txt);
  margin-bottom:8px;
  padding-right:68px; /* espacio para el badge */
}

/* Cantidades */
.card-qty { display:flex; flex-wrap:wrap; gap:5px; }
.qty-tag {
  font-family:var(--fm); font-size:.65rem;
  padding:3px 9px; border-radius:var(--r-xl);
}
.qty-tag--kg   { background:rgba(0,237,255,.1);  color:var(--cyan);   border:1px solid rgba(0,237,255,.2); }
.qty-tag--und  { background:rgba(255,255,255,.05);color:var(--txt-d);  border:1px solid var(--border); }
.qty-tag--paq  { background:rgba(168,85,247,.1); color:var(--purple); border:1px solid rgba(168,85,247,.2); }
.qty-tag--warn { background:rgba(255,184,0,.1);  color:var(--amber);  border:1px solid rgba(255,184,0,.2); }

.card-novedad {
  font-size:.68rem; color:var(--amber); font-style:italic; margin-top:5px;
}

/* ════════════════════════════════════════════════════════════
   ESTADO VACÍO
════════════════════════════════════════════════════════════ */
.empty-state { text-align:center; padding:60px 20px; }
.empty-state.hidden { display:none; }
.empty-icon { font-size:2.5rem; color:var(--txt-g); margin-bottom:12px; }
.empty-msg  {
  font-family:var(--fd); font-size:1rem; color:var(--txt-d); font-weight:600;
}

/* ════════════════════════════════════════════════════════════
   SKELETON
════════════════════════════════════════════════════════════ */
#skeleton-loader {
  display:grid; grid-template-columns:1fr; gap:8px;
}
@media (min-width:480px) {
  #skeleton-loader { grid-template-columns:repeat(2,1fr); }
}
.skeleton {
  background:linear-gradient(90deg,var(--bg-card) 25%,rgba(255,255,255,.07) 50%,var(--bg-card) 75%);
  background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:var(--r);
}
.skeleton-card { height:80px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ════════════════════════════════════════════════════════════
   TOAST
════════════════════════════════════════════════════════════ */
.toast {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  z-index:400; display:none; opacity:0; pointer-events:none;
  background:rgba(13,13,26,.97); border:1px solid var(--border-h);
  border-radius:var(--r-xl); padding:10px 26px;
  font-family:var(--fd); font-size:.85rem; font-weight:600;
  white-space:nowrap; backdrop-filter:blur(20px);
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}
.toast.visible       { display:block; }
.toast--success      { border-color:rgba(0,255,135,.4); color:var(--green); }
.toast--warning      { border-color:rgba(255,184,0,.4); color:var(--amber); }
.toast--info         { border-color:rgba(0,237,255,.4); color:var(--cyan);  }

/* ════════════════════════════════════════════════════════════
   TABLET — ≥ 600px (sin sidebar, más columnas)
════════════════════════════════════════════════════════════ */
@media (min-width:600px) {
  .inv-main { padding:14px 24px 40px; }
  .inv-cards { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
  #skeleton-loader { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
}

/* ════════════════════════════════════════════════════════════
   SAFE AREA — notch / home indicator iOS
════════════════════════════════════════════════════════════ */
@supports (padding:env(safe-area-inset-bottom)) {
  .hdr-mobile {
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
  .inv-main { padding-bottom:max(32px, env(safe-area-inset-bottom)); }
  .toast { bottom:max(20px, env(safe-area-inset-bottom)); }
}

/* ════════════════════════════════════════════════════════════
   DESKTOP — ≥ 960px: sidebar fijo + contenido
════════════════════════════════════════════════════════════ */
@media (min-width:960px) {

  /* Mostrar sidebar, ocultar elementos móviles */
  .sidebar { display:flex; }
  .hdr-mobile, .search-bar-mobile, .cat-tabs-wrapper { display:none; }
  .grid-header { display:flex; }
  .desktop-only { display:flex; }

  /* Shell: sidebar fixed + main-col con margin-left (más fiable que grid+fixed) */

  /* ── SIDEBAR ─────────────────────────────────────────── */
  .sidebar {
    position:fixed; top:0; left:0; bottom:0;
    width:var(--sidebar-w); z-index:150;
    background:var(--bg-2);
    border-right:1px solid var(--border);
    flex-direction:column;
    overflow-y:auto; overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:var(--border-h) transparent;
  }

  .sidebar-logo {
    display:flex; align-items:center; gap:12px;
    padding:24px 20px 20px;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
  }
  .sidebar-logo-mark {
    width:38px; height:38px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#FF2D5B,#FF8C00);
    border-radius:10px;
    font-family:var(--fd); font-weight:900; font-size:1.2rem; color:#fff;
  }
  .sidebar-logo-name {
    font-family:var(--fd); font-weight:900; font-size:1.05rem;
    letter-spacing:-.03em; line-height:1;
  }
  .sidebar-logo-sub {
    font-family:var(--fm); font-size:.55rem;
    letter-spacing:.15em; color:var(--txt-g); text-transform:uppercase; margin-top:2px;
  }

  /* Buscador en sidebar */
  .sidebar-search {
    display:flex; align-items:center; gap:8px;
    margin:14px 14px 0;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--r); padding:0 12px;
    flex-shrink:0;
    transition:border-color .2s;
  }
  .sidebar-search:focus-within {
    border-color:var(--cat-color);
  }
  .sidebar-search-icon { font-size:1rem; color:var(--txt-g); flex-shrink:0; }
  .sidebar-search-input {
    flex:1; background:transparent; border:none; outline:none;
    color:var(--txt); font-family:var(--fb); font-size:.85rem;
    padding:10px 0;
  }
  .sidebar-search-input::placeholder { color:var(--txt-g); }

  /* Stats mini en sidebar */
  .sidebar-stats {
    display:grid; grid-template-columns:1fr 1fr;
    gap:6px; padding:12px 14px 0; flex-shrink:0;
  }
  .sb-stat {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--r); padding:8px 10px; text-align:center;
  }
  .sb-stat-num {
    font-family:var(--fd); font-weight:900; font-size:1.2rem;
    line-height:1; letter-spacing:-.03em;
  }
  .sb-stat-label {
    font-family:var(--fm); font-size:.48rem;
    letter-spacing:.12em; color:var(--txt-g); text-transform:uppercase; margin-top:2px;
  }
  .sb-stat--ok     .sb-stat-num { color:var(--green); }
  .sb-stat--danger .sb-stat-num { color:var(--red);   }
  .sb-stat--warn   .sb-stat-num { color:var(--amber); }

  /* Nav de categorías en sidebar */
  .sidebar-nav { flex:1; padding:14px 10px 0; overflow-y:auto; }
  .sidebar-nav-label {
    font-family:var(--fm); font-size:.55rem;
    letter-spacing:.2em; color:var(--txt-g); text-transform:uppercase;
    padding:0 8px 8px;
  }
  .sidebar-cat-btn {
    display:flex; align-items:center; gap:10px;
    width:100%; min-height:42px;
    padding:0 10px; margin-bottom:2px;
    background:transparent; border:none; border-radius:var(--r);
    color:var(--txt-d); font-family:var(--fd); font-size:.82rem;
    font-weight:600; cursor:pointer; text-align:left;
    transition:all .18s var(--ease);
    position:relative;
  }
  .sidebar-cat-btn:hover {
    background:var(--bg-card-h); color:var(--txt);
  }
  .sidebar-cat-btn.active {
    background:var(--cat-bg); color:var(--txt);
  }
  .sidebar-cat-btn.active::before {
    content:''; position:absolute; left:0; top:20%; bottom:20%;
    width:3px; background:var(--cat-color);
    border-radius:0 3px 3px 0; box-shadow:0 0 8px var(--cat-color);
  }
  .sidebar-cat-emoji { font-size:.95rem; flex-shrink:0; }
  .sidebar-cat-name  { flex:1; }
  .sidebar-cat-count {
    font-family:var(--fm); font-size:.55rem;
    color:var(--txt-g); letter-spacing:.08em;
  }

  /* Pie del sidebar */
  .sidebar-footer {
    padding:14px 16px;
    border-top:1px solid var(--border); flex-shrink:0;
  }
  .sidebar-fecha {
    font-family:var(--fm); font-size:.55rem;
    letter-spacing:.14em; color:var(--txt-g); text-transform:uppercase;
    margin-bottom:4px;
  }
  .sidebar-sync {
    font-family:var(--fm); font-size:.55rem;
    color:var(--green); letter-spacing:.1em;
  }

  /* ── MAIN COL en desktop ─────────────────────────────── */
  .main-col {
    margin-left:var(--sidebar-w); /* desplazar el contenido fuera del sidebar fijo */
    padding-top:0;
    min-width:0;
  }

  /* Hero más compacto en desktop */
  .scene-hero {
    min-height:55vh;
    padding:40px 40px 36px;
  }
  .hero-title {
    font-size:clamp(5rem,9vw,9rem);
  }
  .hero-stats { max-width:500px; gap:10px; }
  .hero-stat  { padding:14px 10px; }
  .hero-stat-num { font-size:clamp(1.6rem,3vw,2.6rem); }

  /* Cabecera del grid (solo desktop) */
  .grid-header {
    display:flex; align-items:baseline;
    justify-content:space-between;
    padding:24px 32px 0;
    margin-bottom:6px;
  }
  .grid-header-title {
    font-family:var(--fd); font-weight:900;
    font-size:1.4rem; letter-spacing:-.03em;
  }
  .grid-header-count {
    font-family:var(--fm); font-size:.62rem;
    color:var(--txt-g); letter-spacing:.14em;
  }

  /* Grid desktop: más columnas */
  .inv-main { padding:10px 32px 48px; }
  .inv-seccion { margin-bottom:36px; }
  .inv-cards {
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:10px;
  }

  /* Cards: más padding y hover animado */
  .inv-card { padding:16px 16px 13px; }
  .card-nombre { font-size:.9rem; }

  /* Skeleton desktop */
  #skeleton-loader {
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  }
}

/* Desktop mediano — ≥ 1280px */
@media (min-width:1280px) {
  :root { --sidebar-w: 280px; }
  .inv-main { padding:10px 40px 56px; }
  .inv-cards { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
  .grid-header { padding:28px 40px 0; }
  .scene-hero  { padding:48px 48px 40px; }
}

/* Desktop ancho — ≥ 1600px */
@media (min-width:1600px) {
  :root { --sidebar-w: 300px; }
  .inv-main { padding:10px 56px 64px; }
  .inv-cards { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
}

/* ════════════════════════════════════════════════════════════
   FAB — Botón flotante para agregar producto
════════════════════════════════════════════════════════════ */
.fab {
  position:fixed; bottom:28px; right:20px; z-index:250;
  width:56px; height:56px;
  background:linear-gradient(135deg,#8B5CF6,#6366F1);
  border:none; border-radius:50%; color:#fff;
  font-size:1.7rem; font-weight:300; line-height:1;
  cursor:pointer; box-shadow:0 6px 28px rgba(99,102,241,.5);
  transition:transform .2s var(--ease), box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
  display:flex; align-items:center; justify-content:center;
}
.fab:hover  { transform:scale(1.08); box-shadow:0 8px 36px rgba(99,102,241,.65); }
.fab:active { transform:scale(.93); }

@media (min-width:960px) {
  .fab { bottom:32px; right:32px; width:52px; height:52px; }
}

/* ════════════════════════════════════════════════════════════
   BOTÓN REPORTE EN SIDEBAR
════════════════════════════════════════════════════════════ */
.sidebar-report-btn {
  display:flex; align-items:center; gap:8px;
  width:100%; margin-top:12px; padding:10px 12px;
  background:rgba(255,45,91,.08); border:1px solid rgba(255,45,91,.25);
  border-radius:var(--r); color:var(--red);
  font-family:var(--fd); font-size:.78rem; font-weight:700;
  cursor:pointer; transition:all .2s;
  -webkit-tap-highlight-color:transparent;
}
.sidebar-report-btn:hover {
  background:rgba(255,45,91,.15); border-color:rgba(255,45,91,.45);
}
.sidebar-report-btn.loading {
  opacity:.6; pointer-events:none;
}
.srb-icon { font-size:1rem; }

/* Delete button en tarjetas OTROS */
.card-delete-btn {
  position:absolute; top:8px; left:8px;
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,45,91,.08); border:1px solid rgba(255,45,91,.2);
  border-radius:50%; color:var(--red); cursor:pointer;
  font-size:.7rem; transition:all .18s;
  -webkit-tap-highlight-color:transparent;
  opacity:0;
}
.inv-card[data-custom]:hover .card-delete-btn,
.inv-card[data-custom]:focus-within .card-delete-btn {
  opacity:1;
}
/* En móvil siempre visible para tarjetas OTROS */
@media (hover:none) {
  .card-delete-btn { opacity:1; }
}
.card-delete-btn:hover  { background:rgba(255,45,91,.2); border-color:rgba(255,45,91,.45); }
.card-delete-btn:active { transform:scale(.88); }

/* Badge OTROS */
.badge--otros { color:var(--purple); background:rgba(139,92,246,.1); border:1px solid rgba(139,92,246,.22); }

/* ════════════════════════════════════════════════════════════
   DRAWER / MODAL DE EDICIÓN DE PRODUCTO
════════════════════════════════════════════════════════════ */

/* Overlay */
.edit-overlay {
  position:fixed; inset:0; z-index:500;
  background:rgba(7,7,14,.78);
  backdrop-filter:blur(6px) saturate(130%);
  -webkit-backdrop-filter:blur(6px) saturate(130%);
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease);
}
.edit-overlay.open { opacity:1; pointer-events:all; }

/* Drawer — bottom sheet en mobile */
.edit-drawer {
  position:fixed; left:0; right:0; bottom:0; z-index:510;
  background:var(--bg-2);
  border-top:1px solid var(--border);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  max-height:92dvh; overflow-y:auto;
  transform:translateY(102%);
  transition:transform .35s var(--ease);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.edit-drawer.open { transform:translateY(0); }

.drawer-handle {
  width:44px; height:4px;
  background:var(--border-h); border-radius:4px;
  margin:14px auto 0;
}

.drawer-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:16px 20px 14px; gap:12px;
  border-bottom:1px solid var(--border);
}
.drawer-header-info { flex:1; min-width:0; }
.drawer-product-name {
  font-family:var(--fd); font-weight:800; font-size:1rem; line-height:1.25;
  color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.drawer-product-cat {
  font-family:var(--fm); font-size:.52rem;
  letter-spacing:.16em; color:var(--txt-g); text-transform:uppercase; margin-top:4px;
}
.drawer-close {
  width:34px; height:34px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:50%; color:var(--txt-d); cursor:pointer; font-size:.8rem;
  transition:all .2s; -webkit-tap-highlight-color:transparent;
}
.drawer-close:hover { background:var(--bg-card-h); color:var(--txt); }

.drawer-body { padding:16px 20px; }
.drawer-field { margin-bottom:18px; }
.drawer-label {
  display:block; font-family:var(--fm); font-size:.55rem;
  letter-spacing:.18em; color:var(--txt-g); text-transform:uppercase; margin-bottom:8px;
}

/* Stock actual (solo lectura) */
.drawer-stock-actual {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r); padding:12px 14px; margin-bottom:16px;
}
.stock-label {
  font-family:var(--fm); font-size:.52rem;
  letter-spacing:.16em; color:var(--txt-g); text-transform:uppercase; margin-bottom:6px;
}
.stock-values {
  font-family:var(--fd); font-weight:700; font-size:.95rem; color:var(--txt);
  display:flex; flex-wrap:wrap; gap:10px;
}
.stock-chip {
  display:flex; align-items:baseline; gap:4px;
}
.stock-chip-num { font-size:1.1rem; color:var(--cat-color); }
.stock-chip-unit { font-size:.7rem; color:var(--txt-d); }

/* Toggle INGRESO / EGRESO */
.drawer-mov-toggle {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:20px;
}
.mov-btn {
  display:flex; flex-direction:column; align-items:center;
  padding:14px 8px; border-radius:var(--r);
  border:2px solid var(--border); background:transparent;
  cursor:pointer; transition:all .22s var(--ease);
  -webkit-tap-highlight-color:transparent;
  gap:2px;
}
.mov-btn:active { transform:scale(.96); }
.mov-btn-icon {
  font-size:1.6rem; line-height:1; font-weight:900;
  font-family:var(--fd); color:var(--txt-g);
  transition:color .22s;
}
.mov-btn-label {
  font-family:var(--fd); font-size:.82rem; font-weight:700;
  color:var(--txt-d); transition:color .22s;
}
.mov-btn-sub {
  font-family:var(--fm); font-size:.5rem;
  letter-spacing:.1em; color:var(--txt-g);
  text-transform:uppercase;
}

/* Activo INGRESO — verde */
.mov-btn--ingreso.active {
  border-color:var(--green); background:rgba(0,255,135,.08);
}
.mov-btn--ingreso.active .mov-btn-icon,
.mov-btn--ingreso.active .mov-btn-label { color:var(--green); }

/* Activo EGRESO — rojo */
.mov-btn--egreso.active {
  border-color:var(--red); background:rgba(255,45,91,.08);
}
.mov-btn--egreso.active .mov-btn-icon,
.mov-btn--egreso.active .mov-btn-label { color:var(--red); }

/* Preview del nuevo total */
.drawer-nuevo-total {
  background:rgba(255,255,255,.03); border:1px solid var(--border);
  border-radius:var(--r); padding:10px 14px; margin-bottom:16px;
  display:none;
}
.drawer-nuevo-total.visible { display:block; }
.preview-header {
  font-family:var(--fm); font-size:.52rem;
  letter-spacing:.16em; color:var(--txt-g); text-transform:uppercase; margin-bottom:8px;
}
.preview-linea {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:4px; flex-wrap:wrap; gap:4px;
}
.preview-campo {
  font-family:var(--fm); font-size:.6rem;
  letter-spacing:.1em; color:var(--txt-g); text-transform:uppercase;
}
.preview-calc {
  font-family:var(--fd); font-size:.82rem; color:var(--txt-d);
}
.preview-calc strong {
  font-size:1rem; color:var(--txt);
}

/* Save button adaptado al tipo de movimiento */
.drawer-btn-save[data-mov="ingreso"] { background:var(--green); color:#07070E; }
.drawer-btn-save[data-mov="egreso"]  { background:var(--red);   color:#fff; }

/* Botones de estado */
.drawer-status-btns { display:flex; flex-wrap:wrap; gap:7px; }
.status-btn {
  padding:8px 14px;
  border:1px solid var(--border); border-radius:var(--r-xl);
  background:transparent; color:var(--txt-d);
  font-family:var(--fd); font-size:.74rem; font-weight:600;
  cursor:pointer; transition:all .18s; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.status-btn:active { transform:scale(.95); }
.status-btn.active[data-status="ACTIVO"]    { color:var(--green); background:rgba(0,255,135,.1);  border-color:rgba(0,255,135,.4); }
.status-btn.active[data-status="SIN_STOCK"] { color:var(--red);   background:rgba(255,45,91,.1);  border-color:rgba(255,45,91,.4); }
.status-btn.active[data-status="PENDIENTE"] { color:var(--cyan);  background:rgba(0,237,255,.1);  border-color:rgba(0,237,255,.4); }
.status-btn.active[data-status="VENCIDO"]   { color:var(--amber); background:rgba(255,184,0,.1);  border-color:rgba(255,184,0,.4); }

/* Campos de cantidad */
.drawer-qty-fields {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:4px;
}
.drawer-qty-field { display:flex; flex-direction:column; }

.drawer-input {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r); padding:11px 13px;
  color:var(--txt); font-family:var(--fb); font-size:.92rem;
  outline:none; transition:border-color .2s;
  -webkit-appearance:none; width:100%;
}
.drawer-input:focus { border-color:var(--cat-color); }
.drawer-input::placeholder { color:var(--txt-g); }

/* Footer */
.drawer-footer {
  display:grid; grid-template-columns:1fr 1.6fr; gap:10px;
  padding:14px 20px 18px; border-top:1px solid var(--border);
}
.drawer-btn-cancel {
  padding:14px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r); color:var(--txt-d);
  font-family:var(--fd); font-size:.85rem; font-weight:600;
  cursor:pointer; transition:all .2s; -webkit-tap-highlight-color:transparent;
}
.drawer-btn-cancel:hover  { background:var(--bg-card-h); color:var(--txt); }
.drawer-btn-cancel:active { transform:scale(.97); }

.drawer-btn-save {
  padding:14px; background:var(--cat-color); border:none;
  border-radius:var(--r); color:#fff;
  font-family:var(--fd); font-size:.85rem; font-weight:700;
  cursor:pointer; transition:all .2s; -webkit-tap-highlight-color:transparent;
  box-shadow:0 4px 24px rgba(0,0,0,.3);
}
.drawer-btn-save:hover  { filter:brightness(1.12); }
.drawer-btn-save:active { transform:scale(.97); }

/* Cards: affordance de edición */
.inv-card[data-id] { cursor:pointer; }
.card-edit-hint {
  font-family:var(--fm); font-size:.48rem;
  letter-spacing:.12em; color:var(--cat-color);
  text-transform:uppercase; margin-top:7px;
  display:none; opacity:0; transition:opacity .2s;
}
@media (hover:hover) {
  .card-edit-hint { display:block; }
  .inv-card[data-id]:hover .card-edit-hint { opacity:.65; }
}

/* Desktop: modal centrado */
@media (min-width:960px) {
  .edit-drawer {
    left:50%; right:auto; top:50%; bottom:auto;
    width:460px; max-width:calc(100vw - 2 * var(--sidebar-w) - 32px);
    border-radius:var(--r-xl); border:1px solid var(--border);
    box-shadow:0 24px 80px rgba(0,0,0,.65);
    max-height:85vh; padding-bottom:0;
    transform:translate(-50%, -50%) scale(.94);
    opacity:0; pointer-events:none;
    transition:transform .3s var(--ease), opacity .3s var(--ease);
  }
  .edit-drawer.open {
    transform:translate(-50%, -50%) scale(1);
    opacity:1; pointer-events:all;
  }
  .drawer-handle { display:none; }
}

/* ════════════════════════════════════════════════════════════
   ACCESIBILIDAD — reducción de movimiento
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  #grain-canvas { display:none; }
}