/* ============================================================
   VEPOX POS — Inventario v2
   Coherente con el POS v2 / KDS v2: tema por variables (claro y oscuro),
   Bebas para las cifras, DM Sans para el texto, superficies en capas.
   Prefijos: .iv-* (módulo), .cr-* (Contar), .cc-* (conteo en el cierre).
   ============================================================ */

/* Los tokens son globales: los modales (insumo, receta) viven fuera de la vista. */
html {
  --iv-ok: #22c55e; --iv-warn: #f59e0b; --iv-bad: #ef4444; --iv-info: #3b82f6; --iv-amarillo: #FDC80F;
  --iv-ok-bg: rgba(34,197,94,.12); --iv-warn-bg: rgba(245,158,11,.14); --iv-bad-bg: rgba(239,68,68,.13); --iv-info-bg: rgba(59,130,246,.13);
  --iv-input-bg: #131316;
}
html[data-theme="light"] { --iv-input-bg: #ffffff; --iv-ok: #15803d; --iv-warn: #b45309; --iv-bad: #b91c1c; --iv-info: #1d4ed8; }
#view-inventario { max-width: 1180px; margin: 0 auto; }

/* ── Cabecera ── */
.iv-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.iv-tit { font-family: 'Bebas Neue', sans-serif; font-size: 34px; letter-spacing: 2px; line-height: 1; display: flex; align-items: center; gap: 10px; color: var(--text); }
.iv-tit svg { width: 26px; height: 26px; color: var(--iv-amarillo); }
.iv-sub { color: var(--muted); font-size: 13px; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.iv-sub b { color: var(--text); font-weight: 700; }
.iv-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.iv-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: border-color .15s, transform .1s; }
.iv-btn:hover { border-color: var(--iv-amarillo); }
.iv-btn:active { transform: translateY(1px); }
.iv-btn svg { width: 16px; height: 16px; }
.iv-btn.primario { background: var(--iv-amarillo); border-color: var(--iv-amarillo); color: #111; font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1px; font-weight: 400; }
.iv-btn.peligro { border-color: rgba(239,68,68,.5); color: var(--iv-bad); }
.iv-btn.chico { min-height: 34px; padding: 0 12px; font-size: 12.5px; border-radius: 10px; }
.iv-btn:disabled { opacity: .45; cursor: not-allowed; }
.iv-link { background: none; border: none; color: var(--iv-info); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 6px 4px; }

/* ── Pestañas ── */
.iv-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.iv-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s; }
.iv-tab svg { width: 14px; height: 14px; }
.iv-tab:hover { color: var(--text); border-color: var(--iv-amarillo); }
.iv-tab.active { background: var(--iv-amarillo); border-color: var(--iv-amarillo); color: #111; font-weight: 700; }
.iv-tab b { font-size: 10.5px; font-weight: 800; opacity: .6; padding-left: 2px; }

/* ── Piezas comunes ── */
.iv-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px; }
.iv-card + .iv-card { margin-top: 14px; }
.iv-card-tit { font-family: 'Bebas Neue', sans-serif; font-size: 19px; letter-spacing: 1.5px; color: var(--text); display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.iv-card-tit svg { width: 16px; height: 16px; color: var(--iv-amarillo); }
.iv-card-tit b { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 800; color: #111; background: var(--iv-amarillo); border-radius: 999px; padding: 1px 8px; }
.iv-card-sub { color: var(--muted); font-size: 12.5px; line-height: 1.45; margin-bottom: 12px; }
.iv-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.iv-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.iv-label { font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.iv-input, .iv-select { width: 100%; min-height: 44px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--iv-input-bg); color: var(--text); font-family: inherit; font-size: 14px; padding: 0 12px; outline: none; }
.iv-input:focus, .iv-select:focus { border-color: var(--iv-amarillo); }
.iv-input::placeholder { color: var(--muted); opacity: .8; }
.iv-campo { display: flex; flex-direction: column; }
.iv-campo + .iv-campo { margin-top: 10px; }
.iv-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.iv-chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.iv-chip:hover { color: var(--text); border-color: var(--iv-amarillo); }
.iv-chip.activo { background: var(--text); color: var(--bg); border-color: var(--text); }
.iv-chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.iv-vacio { padding: 26px; text-align: center; color: var(--muted); font-size: 13px; border: 1px dashed var(--border); border-radius: 14px; }
.iv-mini { font-size: 11.5px; color: var(--muted); }
.iv-fam { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.iv-fam i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.iv-code { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .5px; color: var(--muted); }
.iv-num { font-family: 'Bebas Neue', sans-serif; letter-spacing: .5px; font-size: 20px; line-height: 1; }
.iv-neg { color: var(--iv-bad); }

/* Estados */
.iv-est { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; }
.iv-est i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.iv-est.ok { background: var(--iv-ok-bg); color: var(--iv-ok); }
.iv-est.bajo, .iv-est.critico { background: var(--iv-warn-bg); color: var(--iv-warn); }
.iv-est.agotado, .iv-est.negativo { background: var(--iv-bad-bg); color: var(--iv-bad); }
.iv-est.sobrestock { background: var(--iv-info-bg); color: var(--iv-info); }

/* KPIs */
.iv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.iv-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.iv-kpi-l { font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.iv-kpi-l svg { width: 13px; height: 13px; }
.iv-kpi-v { font-family: 'Bebas Neue', sans-serif; font-size: 30px; line-height: 1; letter-spacing: 1px; color: var(--text); }
.iv-kpi-v.bad { color: var(--iv-bad); } .iv-kpi-v.warn { color: var(--iv-warn); } .iv-kpi-v.ok { color: var(--iv-ok); }
.iv-kpi-s { font-size: 11.5px; color: var(--muted); }

/* Tabla */
.iv-tabla-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--border); }
.iv-tabla { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 760px; background: var(--surface); }
.iv-tabla th { text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 11px 12px; background: var(--surface2); border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.iv-tabla th.r, .iv-tabla td.r { text-align: right; }
.iv-tabla td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); }
.iv-tabla tbody tr { cursor: pointer; transition: background .12s; }
.iv-tabla tbody tr:hover { background: var(--surface2); }
.iv-tabla tbody tr:last-child td { border-bottom: none; }
.iv-tabla .nombre { font-weight: 700; display: flex; flex-direction: column; gap: 2px; }
.iv-tabla .nombre small { display: flex; gap: 8px; align-items: center; }
.iv-tabla .stock { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .5px; line-height: 1; }
.iv-tabla .stock small { display: block; font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--muted); letter-spacing: 0; margin-top: 3px; }
.iv-tabla .cob { font-weight: 700; }
.iv-tabla .cob small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }

/* Toolbar de filtros */
.iv-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0 12px; }
.iv-buscar { position: relative; flex: 1; min-width: 220px; }
.iv-buscar svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); }
.iv-buscar .iv-input { padding-left: 36px; }

/* Banda "qué comprar" */
.iv-band { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--iv-warn); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; }
.iv-band-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.iv-band-tit { font-family: 'Bebas Neue', sans-serif; font-size: 19px; letter-spacing: 1.5px; display: flex; align-items: center; gap: 8px; }
.iv-band-tit svg { width: 16px; height: 16px; color: var(--iv-warn); }
.iv-band-tit b { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 800; background: var(--iv-warn); color: #111; border-radius: 999px; padding: 1px 8px; }
.iv-band-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 14px; margin-top: 10px; }
.iv-band-item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.iv-band-item span:first-child { font-weight: 700; }
.iv-band-item small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.iv-band-item b { font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: .5px; white-space: nowrap; }

/* Listas de movimientos (entradas recientes) */
.iv-mov { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.iv-mov:last-child { border-bottom: none; }
.iv-mov .q { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .5px; color: var(--iv-ok); }
.iv-mov .q.neg { color: var(--iv-bad); }
.iv-mov .q small { font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.iv-mov .n { font-weight: 700; min-width: 0; }
.iv-mov .n small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-mov .t { color: var(--muted); font-size: 11.5px; text-align: right; white-space: nowrap; }
.iv-dia { font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin: 12px 0 4px; }

/* Typeahead de insumos */
.iv-typeahead { position: relative; }
.iv-sugerencias { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); z-index: 20; max-height: 280px; overflow-y: auto; }
.iv-sug { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; font-size: 13px; }
.iv-sug:hover, .iv-sug.activa { background: var(--surface2); }
.iv-sug b { font-weight: 700; }
.iv-sug small { color: var(--muted); }
.iv-elegido { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--iv-amarillo); border-radius: 12px; background: var(--surface2); }
.iv-elegido b { font-weight: 800; }
.iv-preview { font-size: 13px; color: var(--muted); padding: 8px 0 2px; }
.iv-preview b { color: var(--text); font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .5px; }
.iv-cantidad { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 8px; }
.iv-cantidad button { height: 52px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface2); color: var(--text); font-size: 26px; cursor: pointer; }
.iv-cantidad input { height: 52px; text-align: center; font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 1px; }

/* Los paneles que siguen con su markup viejo (kardex, bodegas) se leen bien en oscuro */
.iv-legacy table { color: var(--text); }
.iv-legacy th { background: var(--surface2) !important; color: var(--muted) !important; }
.iv-legacy td, .iv-legacy tr, .iv-legacy th { border-color: var(--border) !important; }
.iv-legacy [style*="background:#f"], .iv-legacy [style*="background: #f"], .iv-legacy [style*="background:#e"], .iv-legacy [style*="background:#d"] { background: var(--surface2) !important; color: var(--text) !important; }
.iv-legacy [style*="background:var(--surface)"] { background: var(--surface) !important; }
.iv-legacy [style*="background:#000"] { background: var(--text) !important; color: var(--bg) !important; }
.iv-legacy input, .iv-legacy select { background: var(--iv-input-bg) !important; color: var(--text) !important; border: 1.5px solid var(--border) !important; border-radius: 10px !important; min-height: 38px; }
.iv-legacy .hist-period-btn { background: var(--surface2); color: var(--muted); }
.iv-legacy .hist-period-btn.active { background: var(--iv-amarillo); color: #111; }

/* ── CONTAR ── */
.cr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.cr-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cr-side { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; }
.cr-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cr-top .iv-chips { align-items: center; }
.cr-top .iv-label { margin: 0 4px 0 0; }
.cr-grupo { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.cr-grupo-tit { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--surface2); font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: 1.5px; }
.cr-grupo-tit i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--iv-amarillo); }
.cr-grupo-tit b { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 800; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.cr-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); border-left: 4px solid transparent; transition: background .12s; }
.cr-item:last-child { border-bottom: none; }
.cr-item.cuadra { border-left-color: var(--iv-ok); background: var(--iv-ok-bg); }
.cr-item.falta { border-left-color: var(--iv-warn); background: var(--iv-warn-bg); }
.cr-item.sobra { border-left-color: var(--iv-info); background: var(--iv-info-bg); }
.cr-info { min-width: 0; }
.cr-nombre { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.cr-star { color: var(--iv-amarillo); font-size: 13px; }
.cr-meta { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.cr-meta b { color: var(--text); font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: .5px; }
.cr-meta b.neg { color: var(--iv-bad); }
.cr-meta .sep { margin: 0 6px; opacity: .5; }
.cr-dif { font-size: 12.5px; font-weight: 800; margin-top: 4px; min-height: 0; }
.cr-dif:empty { display: none; }
.cr-dif .cr-mini { font-weight: 400; }
.cr-item.falta .cr-dif { color: var(--iv-warn); } .cr-item.sobra .cr-dif { color: var(--iv-info); } .cr-item.cuadra .cr-dif { color: var(--iv-ok); }
.cr-ctrl { display: flex; align-items: center; gap: 6px; }
.cr-btn { width: 44px; height: 48px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface2); color: var(--text); font-size: 24px; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.cr-btn:active { background: var(--iv-amarillo); color: #111; }
.cr-num { width: 104px; height: 48px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--iv-input-bg); color: var(--text); text-align: center; font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 1px; outline: none; }
.cr-num:focus { border-color: var(--iv-amarillo); box-shadow: 0 0 0 3px rgba(253,200,15,.18); }
.cr-uni { font-size: 12px; font-weight: 700; color: var(--muted); min-width: 44px; }
.cr-ok { width: 44px; height: 48px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cr-ok svg { width: 18px; height: 18px; }
.cr-ok:hover { border-color: var(--iv-ok); color: var(--iv-ok); }
.cr-mini { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.cr-res { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 14px; }
.cr-res div { background: var(--surface2); border-radius: 12px; padding: 10px 12px; }
.cr-res small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.cr-res b { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: .5px; line-height: 1.1; }
.cr-res b.falta { color: var(--iv-warn); } .cr-res b.sobra { color: var(--iv-info); }
.cr-guardar { width: 100%; min-height: 54px; border-radius: 14px; border: none; background: var(--iv-amarillo); color: #111; font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1px; cursor: pointer; }
.cr-guardar:disabled { opacity: .4; cursor: not-allowed; }
.cr-guardar span { font-family: 'DM Sans', sans-serif; font-size: 12.5px; letter-spacing: 0; opacity: .75; margin-left: 4px; }
.cr-ultimo { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.45; }
.cr-ultimo b { color: var(--text); }
.cr-lados table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cr-lados th { text-align: right; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 4px 6px; border-bottom: 1px solid var(--border); }
.cr-lados th:first-child { text-align: left; }
.cr-lados td { text-align: right; padding: 7px 6px; border-bottom: 1px solid var(--border); font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: .5px; }
.cr-lados td.n { text-align: left; font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 700; }
.cr-lados td.neg { color: var(--iv-bad); } .cr-lados td.cero { color: var(--muted); } .cr-lados td.tot { font-weight: 800; }
.cr-barra { display: none; }
.cr-elegir-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; margin: 12px 0; max-height: 56vh; overflow-y: auto; }
.cr-opcion { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface2); text-align: left; cursor: pointer; font-family: inherit; font-size: 13.5px; color: var(--text); }
.cr-opcion.on { border-color: var(--iv-amarillo); background: rgba(253,200,15,.12); }
.cr-opcion-check { font-size: 18px; color: var(--iv-amarillo); width: 22px; text-align: center; }
.cr-opcion-txt { flex: 1; font-weight: 600; min-width: 0; }
.cr-elegir-pie { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── KARDEX ── */
.kx-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.kx-periodo { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.kx-fechas { display: flex; gap: 6px; align-items: center; }
.kx-fechas .iv-input { min-height: 36px; width: 148px; padding: 0 10px; font-size: 13px; }
.kx-tabla { min-width: 900px; }
.kx-cuando { font-weight: 700; white-space: nowrap; }
.kx-cuando small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
.kx-tipo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; background: var(--surface2); color: var(--muted); }
.kx-tipo i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.kx-tipo.buy, .kx-tipo.movIn, .kx-tipo.trnIn { background: var(--iv-ok-bg); color: var(--iv-ok); }
.kx-tipo.uso { background: var(--iv-info-bg); color: var(--iv-info); }
.kx-tipo.merma, .kx-tipo.movOut { background: var(--iv-bad-bg); color: var(--iv-bad); }
.kx-tipo.conteo { background: rgba(253,200,15,.16); color: #c99a00; }
html[data-theme="dark"] .kx-tipo.conteo { color: var(--iv-amarillo); }
.kx-tipo.trlIn, .kx-tipo.trlOut, .kx-tipo.trnOut { background: var(--surface2); color: var(--muted); }
.kx-q { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .5px; white-space: nowrap; }
.kx-q small { font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 0; color: var(--muted); }
.kx-q.in { color: var(--iv-ok); } .kx-q.out { color: var(--iv-bad); } .kx-q.cero { color: var(--muted); }
.kx-saldo { font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: .5px; color: var(--muted); }
.kx-ref { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.kx-tabla tfoot td { padding: 10px 12px; background: var(--surface2); border-top: 1px solid var(--border); }
.kx-sesiones { display: flex; flex-direction: column; gap: 10px; }
.kx-sesion { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.kx-sesion.abierta { border-color: var(--iv-amarillo); }
.kx-sesion-cab { width: 100%; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 24px; gap: 14px; align-items: center; padding: 14px 16px; background: none; border: none; color: var(--text); font-family: inherit; text-align: left; cursor: pointer; }
.kx-sesion-cab:hover { background: var(--surface2); }
.kx-sesion-cuando b { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .5px; text-transform: uppercase; }
.kx-sesion-cuando small { color: var(--muted); font-size: 11.5px; }
.kx-sesion-txt { font-size: 13.5px; min-width: 0; }
.kx-sesion-txt small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.kx-sesion-plata { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: .5px; white-space: nowrap; }
.kx-sesion-plata .falta { color: var(--iv-warn); } .kx-sesion-plata .sobra { color: var(--iv-info); } .kx-sesion-plata .cuadra { color: var(--iv-ok); display: inline-flex; align-items: center; gap: 4px; }
.kx-sesion-flecha { color: var(--muted); display: inline-flex; }
.kx-sesion-lineas { border-top: 1px solid var(--border); padding: 6px 16px 10px; }
.kx-linea { display: grid; grid-template-columns: minmax(0, 1fr) 120px 100px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.kx-linea:last-child { border-bottom: none; }
.kx-linea .n { font-weight: 700; min-width: 0; }
.kx-linea .n small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-linea .kx-q { text-align: right; font-size: 18px; }
.kx-plata { text-align: right; font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: .5px; }
.kx-plata.falta { color: var(--iv-warn); } .kx-plata.sobra { color: var(--iv-info); }

/* ── BODEGAS ── */
.bd-nuevo { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.bd-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.bd-card.consumo { border-color: var(--iv-amarillo); box-shadow: 0 0 0 3px rgba(253,200,15,.12); }
.bd-card.no-util { opacity: .85; }
.bd-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.bd-nombre { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 1.5px; display: flex; align-items: center; gap: 8px; }
.bd-nombre svg { width: 18px; height: 18px; color: var(--iv-amarillo); }
.bd-lapiz { background: none; border: none; color: var(--muted); cursor: pointer; display: inline-flex; padding: 4px; border-radius: 6px; }
.bd-lapiz:hover { color: var(--text); background: var(--surface2); }
.bd-editar { display: flex; gap: 6px; align-items: center; flex: 1; min-width: 0; }
.bd-editar .iv-input { min-height: 40px; }
.bd-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; background: var(--iv-amarillo); color: #111; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.bd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bd-stats div { background: var(--surface2); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.bd-stats small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.bd-stats b { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: .5px; line-height: 1.1; margin-top: 2px; }
.bd-stats b.bad { color: var(--iv-bad); }
.bd-stats span { font-size: 11px; color: var(--muted); }
.bd-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.bd-acciones { display: flex; gap: 6px; }

/* ── El conteo dentro del cierre ── */
.cc-wrap { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 14px; background: var(--surface2); }
.cc-tit { font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 1px; margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.cc-linea { display: grid; grid-template-columns: minmax(0, 1fr) 84px auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.cc-linea:last-child { border-bottom: none; }
.cc-nombre { font-size: 13px; font-weight: 700; display: flex; flex-direction: column; min-width: 0; }
.cc-num { height: 40px; border-radius: 10px; border: 1.5px solid var(--border); text-align: center; font-family: 'Bebas Neue', sans-serif; font-size: 22px; background: var(--surface); color: var(--text); outline: none; width: 84px; }
.cc-num:focus { border-color: var(--iv-amarillo, #FDC80F); }
.cc-uni { font-size: 12px; font-weight: 700; color: var(--muted); }
.cc-dif { grid-column: 1 / -1; font-size: 12px; font-weight: 800; }
.cc-dif:empty { display: none; }
.cc-dif.falta { color: #f59e0b; } .cc-dif.sobra { color: #3b82f6; } .cc-dif.cuadra { color: #22c55e; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .cr-layout { grid-template-columns: 1fr; }
  .cr-side { position: static; }
  .cr-side .cr-guardar { display: none; }
  .cr-barra { display: flex; position: sticky; bottom: 8px; z-index: 5; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-md); }
  .cr-barra .cr-barra-txt { flex: 1; font-size: 12px; color: var(--muted); line-height: 1.3; }
  .cr-barra .cr-barra-txt b { color: var(--text); font-size: 14px; }
  .cr-barra .cr-guardar { width: auto; min-height: 46px; padding: 0 18px; font-size: 19px; }
  .iv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-grid-3, .iv-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .iv-tit { font-size: 28px; }
  .iv-tabs { gap: 5px; }
  .iv-tab { padding: 8px 12px; font-size: 12.5px; }
  /* En el celular la linea es dos filas: arriba el nombre y la info a lo
     ancho; abajo el stepper y el check. Si no, la info queda en una columna
     de 60px y se lee palabra por palabra. */
  .cr-item { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; }
  .cr-item .cr-info { grid-column: 1 / -1; }
  .cr-item .cr-ctrl { grid-column: 1; }
  .cr-item .cr-ok { grid-column: 2; }
  .cr-num { width: 96px; }
  .cr-btn { width: 42px; }
  .iv-kpi-v { font-size: 26px; }
  .iv-tabla { min-width: 640px; }
}