/* ============================================================
   TEMA v2 · 64 · STOCK  ·  inventario (estilo SaaS)
   Azul petróleo, superficies planas y claras, cantidades como dato
   principal, alertas en rojo y el historial como línea de tiempo.
   Sin teclas con volumen: acá todo es plano y de lectura.
   ============================================================ */
#view[data-route="stock"] .page-title { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-left: 8px solid var(--accent-solid); padding: 20px 26px; }
#view[data-route="stock"] .page-title::after { display: none; }
#view[data-route="stock"] .page-title h2 { color: var(--accent); }
#view[data-route="stock"] .page-title h2::after { background: var(--accent-solid); }
#view[data-route="stock"] .page-title p { color: var(--text-muted); }
#view[data-route="stock"] .btn { box-shadow: none; border-radius: 12px; }
#view[data-route="stock"] .btn:active { transform: none; }
#view[data-route="stock"] .btn-primary { box-shadow: none; }

/* Separación explícita del menú vendible y el inventario de insumos. */
.sk-stock-section { display: grid; gap: 14px; min-width: 0; }
.sk-stock-section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.sk-stock-section-head h3 { margin: 0; color: var(--text); font-size: 19px; }
.sk-stock-section-head p { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; }

/* categorías */
.sk-cat-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-rows: 216px; align-items: stretch; gap: 16px; }
.sk-cat-grid > * { width: 100%; height: 100%; min-height: 0; box-sizing: border-box; }
.sk-cat-card { position: relative; border: 1px solid var(--border); border-top: 5px solid var(--accent-solid); border-left: 1px solid var(--border); border-radius: 18px; padding: 20px 22px; min-height: 0; box-shadow: var(--shadow-sm); transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s; }
.sk-cat-card:hover { transform: translateY(-3px); box-shadow: var(--lift); border-color: var(--accent-solid); }
.scc-top { min-height: 44px; max-height: 54px; line-height: 1.2; font-size: 17px; font-weight: 750; gap: 12px; overflow: hidden; }
.scc-top .em { width: 44px; height: 44px; display: grid; place-items: center; background: var(--accent-soft); border-radius: 13px; font-size: 23px; }
.scc-label { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; margin-top: 14px; }
.scc-total .n { font-family: var(--font-num); font-size: 46px; font-weight: 700; color: var(--accent); letter-spacing: 0; }
.scc-total .n-multi { font-size: 26px; }
.scc-total .n-empty { font-size: 36px; color: var(--text-soft); }
.scc-total .u { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.scc-count { border-top: 1px solid var(--border); padding-top: 10px; font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sk-add-card { border-radius: 18px; border: 2px dashed var(--accent-solid); color: var(--accent); background: var(--accent-soft); min-height: 0; font-weight: 750; }
.sk-add-card:hover { background: var(--surface); }
.sk-bebida-filtros { display:flex; flex-wrap:wrap; gap:8px; margin:-4px 0 14px; }
.sk-bebida-filtros .sk-chip { min-height:44px; padding:8px 14px; border-radius:999px; touch-action:manipulation; }
.sk-cat-card.sk-ctrl { border-style: dashed; border-top-style: solid; }
.scc-falta { color: var(--danger); background: var(--danger-soft); border-radius: 999px; padding: 1px 10px; }

/* productos de una categoría */
.sk-crumb-txt b { color: var(--accent); }
.sk-prod-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.sk-prod-card { border-radius: 16px; border: 1px solid var(--border); border-left: 5px solid var(--accent-solid); padding: 16px 16px 14px; box-shadow: var(--shadow-sm); }
.spc-name { font-size: 15.5px; font-weight: 750; }
.spc-label { text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 700; }
.spc-qty b { font-family: var(--font-num); font-size: 38px; color: var(--accent); }
.spc-qty span { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; }
.sk-prod-card:has(.spc-falt) { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger-soft) 40%, var(--surface)); }
.spc-falt { border-radius: 12px; }
.spc-out { width: 100%; min-height: 40px; margin-top: 6px; }
.sk-prod-card .sv-state { margin: 10px 0 12px; padding: 8px 10px; border-radius: 10px; font-weight: 800; text-align: center; }
.sk-prod-card .sv-state.is-on { color: var(--ok); background: var(--ok-soft); }
.sk-prod-card .sv-state.is-off { color: var(--danger); background: var(--danger-soft); }
.sv-actions-states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sv-actions-states .btn { min-width: 0; min-height: 42px; padding: 6px 4px; font-size: 12px; white-space: normal; }
.sk-pop { border-radius: 14px; border: 0; box-shadow: var(--shadow-lg); }

/* Disponibilidad de las salsas existentes, integrada en Stock → Pasta. */
.sk-sauce-stock { display:grid; gap:10px; margin-top:6px; padding:16px; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-sm); }
.sk-sauce-stock h3 { margin:0; color:var(--accent); font-size:18px; }
.sk-sauce-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:10px; }
.sk-sauce-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 12px; padding:11px 12px; border:1px solid var(--border); border-radius:12px; min-width:0; }
.sk-sauce-row > strong { min-width:0; overflow-wrap:anywhere; }
.sk-sauce-row > .sv-state { margin:0; padding:5px 8px; border-radius:999px; font-size:12px; font-weight:800; white-space:nowrap; }
.sk-sauce-actions { display:grid; grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.sk-sauce-actions .btn { min-height:40px; }
.sk-sauce-row.is-missing { color:var(--text-muted); }

@media (max-width: 430px) {
  .sk-stock-section-head { align-items: start; }
  .sk-cat-card[data-c] .scc-top { gap: 8px; font-size: 14px; }
  .sk-cat-card[data-c] .scc-top .em { width: 36px; height: 36px; font-size: 20px; }
  .sk-cat-card[data-c] { padding-inline: 12px; }
}

/* historial: línea de tiempo */
.sk-stock-history-toggle { justify-self: start; min-height: 46px; border-radius: 12px; }
.sk-stock-history { margin-top: 0; scroll-margin-top: 18px; }
.sk-hist-title { font-family: var(--font-num); font-size: 24px; letter-spacing: .06em; text-transform: uppercase; }
.sk-hist-filtros { gap: 8px; }
#view[data-route="stock"] .sk-chip { min-height: 38px; padding: 0 16px; border-radius: 10px; font-size: 13px; }
.sk-hist-list { position: relative; border-radius: 18px; padding: 8px 22px 8px 44px; box-shadow: var(--shadow-sm); }
.sk-hist-list::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: var(--border-strong); }
.sk-mov { position: relative; padding: 16px 0; }
.sk-mov::before { content: ""; position: absolute; left: -29px; top: 21px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-solid); box-shadow: 0 0 0 4px var(--surface); }
.skm-when { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.skm-name { font-weight: 750; }
.skm-badge { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.skm-badge.m-compra { background: var(--accent-soft); color: var(--accent); }
.skm-extra { font-family: var(--font); }
.sk-compra { border-radius: 10px; }
.sk-prod-card .sv-state.is-limit { color: #5c4200; background: #fff0b8; box-shadow: inset 0 0 0 2px #e0a800; }
html[data-theme="dark"] .sk-prod-card .sv-state.is-limit { color: #ffe08a; background: #4a3a00; box-shadow: inset 0 0 0 2px #e0a800; }
.skm-legado { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--muted, #6b7280); border: 1px solid var(--line, #d1d5db); }

/* Ingredientes de personalizaciones (Verduras): separados de los productos que se venden */
.sk-grid-sep { margin: 22px 0 10px; font-size: 15px; font-weight: 700; display: flex; flex-direction: column; gap: 2px; }
.sk-grid-sep small { font-size: 12.5px; font-weight: 500; color: var(--text-muted, #7a7167); }
.sk-grid-sep[hidden] { display: none; }