/* =====================================================================
   EyE-POS · Estilos basados en la identidad de eye-soft (index.html)
   Tokens: mismas variables del sitio + rojo de error. Tema oscuro por defecto y claro opcional.
   ===================================================================== */
:root, [data-theme="dark"] {
  --bg: #07111f; --bg2: #0b1a2e; --bg3: #0e2040; --panel: #111e33; --panel2: #16263f; --border: #1e3250;
  --blue: #0066cc; --blue-b: #0088ff; --cyan: #00c8e8; --cyan-glow: #00c8e840;
  --green: #00d084; --gold: #f0b429; --red: #ff4d6a;
  --text: #e0eaf8; --muted: #8aa3c4; --white: #ffffff; --grid: rgba(0,136,255,.03);
  --sombra: 0 24px 80px rgba(0,0,0,.55);
  --radio: 8px; --lateral: 248px; --alto-top: 56px; --alto-pie: 34px;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #f3f6fb; --bg2: #ffffff; --bg3: #e8eef8; --panel: #ffffff; --panel2: #f5f8fd; --border: #d5deeb;
  --blue: #0058b3; --blue-b: #0070e0; --cyan: #007f99; --cyan-glow: #007f9920;
  --green: #00875a; --gold: #a86b00; --red: #d62846;
  --text: #13233a; --muted: #52647d; --white: #0b1a2e; --grid: rgba(0,80,160,.035);
  --sombra: 0 16px 48px rgba(15,35,70,.14);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; min-height: 100vh; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 40px 40px; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, .titulo { font-family: 'Rajdhani', sans-serif; letter-spacing: .02em; color: var(--white); }
h2 { font-size: 1.35rem; } h3 { font-size: 1.1rem; }
:focus-visible { outline: 2px solid var(--blue-b); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 999; background: var(--blue); color: #fff; padding: .4rem .8rem; border-radius: 4px; }
.saltar:focus { left: 8px; }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
kbd { font-family: 'Inter', monospace; font-size: .68rem; font-weight: 600; color: var(--muted); background: var(--bg3); border: 1px solid var(--border);
  border-bottom-width: 2px; border-radius: 4px; padding: .05rem .35rem; white-space: nowrap; line-height: 1.4; }
.texto-suave { color: var(--muted); font-size: .88rem; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
hr { border: 0; border-top: 1px solid var(--border); margin: .4rem 0; }
[hidden] { display: none !important; }

/* ───── Logo (igual al sitio) ───── */
.logo { display: flex; align-items: center; gap: .55rem; font-family: 'Rajdhani', sans-serif; font-size: 1.35rem; font-weight: 700; color: var(--white); letter-spacing: .05em; text-decoration: none !important; }
.logo.grande { font-size: 1.9rem; }
/* Barra superior: ícono + «eye-soft» con la letra y los colores del logo (en el tema oscuro, «eye» en azul claro) */
.topbar .logo-texto { font-family: Arial, Helvetica, sans-serif; font-weight: 800; font-size: 1.2rem; letter-spacing: 0; }
.logo-eye { color: #60a5fa; } .logo-soft { color: #34d399; } .logo-pos { color: var(--muted); font-size: .8em; }
[data-theme="light"] .logo-eye { color: #1e3a8a; } [data-theme="light"] .logo-soft { color: #059669; }
.logo-icon { width: 32px; height: 32px; display: block; flex-shrink: 0; }
.logo-icon.grande { width: 56px; height: 56px; }
/* Logo eye-soft (_Marca): versión de «eye» azul oscuro en el tema claro y azul claro en el oscuro */
.marca-logo { display: block; height: 80px; width: auto; }
.marca-claro, [data-theme="light"] .marca-oscuro { display: none; }
[data-theme="light"] .marca-claro { display: block; }

/* ───── Botones ───── */
button { font: inherit; color: inherit; cursor: pointer; }
.btn-primary, .btn-outline, .btn-texto { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 4px; font-weight: 600; font-size: .9rem; letter-spacing: .02em;
  min-height: 40px; padding: .55rem 1.2rem; border: 1px solid transparent; transition: box-shadow .2s, background .2s, transform .1s; text-decoration: none !important; }
.btn-primary { background: linear-gradient(90deg, var(--blue), var(--blue-b)); color: #fff; box-shadow: 0 4px 20px rgba(0,102,204,.35); }
.btn-primary:hover { box-shadow: 0 4px 32px rgba(0,136,255,.6); }
.btn-primary kbd, .btn-primary.peligro kbd { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.25); }
.btn-primary.peligro { background: linear-gradient(90deg, #c4193a, var(--red)); box-shadow: 0 4px 20px rgba(255,77,106,.3); }
.btn-outline { background: transparent; color: var(--cyan); border-color: var(--cyan); }
.btn-outline:hover { background: var(--cyan-glow); }
.btn-texto { background: none; color: var(--muted); min-height: 32px; padding: .3rem .6rem; }
.btn-texto:hover { color: var(--cyan); }
.btn-chico { min-height: 32px; padding: .3rem .8rem; font-size: .82rem; }
.ancho { width: 100%; }
.btn-icono { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--muted); position: relative; }
.btn-icono:hover { color: var(--cyan); background: var(--cyan-glow); }
.btn-favorito[aria-pressed="true"] { color: var(--gold); }
.btn-favorito[aria-pressed="true"] .ico { fill: var(--gold); }
button:disabled { opacity: .55; cursor: not-allowed; }
.cargando { position: relative; }
.cargando::after { content: ''; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ───── Estructura: barra superior, lateral, contenido, pie ───── */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); grid-template-rows: var(--alto-top) minmax(0, 1fr) var(--alto-pie); grid-template-areas: "top top" "side main" "pie pie"; height: 100vh; overflow: hidden; }
.app.menu-contraido { --lateral: 64px; }
.topbar { grid-area: top; position: relative; z-index: 20; display: flex; align-items: center; gap: .8rem; padding: 0 1rem; background: rgba(7,17,31,.92); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); }
[data-theme="light"] .topbar { background: rgba(255,255,255,.94); }
.buscador { flex: 0 1 460px; margin-left: 1rem; display: flex; align-items: center; gap: .6rem; height: 36px; padding: 0 .8rem; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: .85rem; text-align: left; }
.buscador span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.buscador:hover { border-color: var(--blue-b); }
.topbar-der { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; height: 32px; padding: 0 .7rem; border-radius: 16px; background: var(--bg2); border: 1px solid var(--border); font-size: .8rem; color: var(--text); text-decoration: none !important; }
.chip:hover { border-color: var(--blue-b); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; }
.punto.ok { background: var(--green); box-shadow: 0 0 8px var(--green); }
.punto.mal { background: var(--red); }
.contador { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--red); color: #fff; font-size: .62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; border: 0; background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #fff; font-weight: 700; font-size: .78rem; }
.usuario-menu { position: relative; }
/* ───── Indicador de conexión (señal) ───── */
.red-menu { position: relative; }
.chip-red { gap: .35rem; cursor: pointer; font-variant-numeric: tabular-nums; }
.chip-red .txt { min-width: 3.2em; text-align: left; color: var(--muted); }
.ico-red { width: 20px; height: 20px; flex-shrink: 0; }
.ico-red .arco { fill: none; stroke: var(--border); stroke-width: 2.6; stroke-linecap: round; transition: stroke .25s; }
.ico-red .punto-red { fill: var(--border); transition: fill .25s; }
.ico-red .cruz { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; opacity: 0; }
.chip-red[data-estado=buena] .arco, .chip-red[data-estado=regular] .a1, .chip-red[data-estado=regular] .a2 { stroke: var(--green); }
.chip-red[data-estado=buena] .punto-red, .chip-red[data-estado=regular] .punto-red { fill: var(--green); }
.chip-red[data-estado=lenta] .a1 { stroke: var(--gold); }
.chip-red[data-estado=lenta] .punto-red { fill: var(--gold); }
.chip-red[data-estado=lenta] .txt { color: var(--gold); }
.chip-red[data-estado=sin-red] .cruz, .chip-red[data-estado=sin-servidor] .cruz { opacity: 1; }
.chip-red[data-estado=sin-red] .punto-red, .chip-red[data-estado=sin-servidor] .punto-red { fill: var(--muted); }
.chip-red[data-estado=sin-red], .chip-red[data-estado=sin-servidor] { border-color: color-mix(in srgb, var(--red) 55%, var(--border)); }
.chip-red[data-estado=sin-red] .txt, .chip-red[data-estado=sin-servidor] .txt { color: var(--red); }
.chip-red[data-estado=verificando] .punto-red { fill: var(--cyan); }
.chip-red[data-estado=verificando] .arco { animation: red-barrido 1.2s infinite; }
.chip-red[data-estado=verificando] .a2 { animation-delay: .2s; }
.chip-red[data-estado=verificando] .a3 { animation-delay: .4s; }
@keyframes red-barrido { 0%, 100% { stroke: var(--border); } 40% { stroke: var(--cyan); } }
/* ───── Venta rápida · vista táctil (db/89): categorías · tarjetas · carrito con teclado · pantalla de pago ───── */
.tipo-precio.manual { color: var(--cyan); background: var(--cyan-glow); }
.pantalla-venta-tactil .contenido { padding: .8rem 1rem; }
.vt { display: grid; grid-template-columns: 210px minmax(0, 1fr) 360px; gap: .8rem; height: 100%; min-height: 0; }
.vt-tit { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: .2rem .2rem .45rem; }
.vt-cats { display: flex; flex-direction: column; gap: .8rem; min-height: 0; }
.vt-clases { display: flex; flex-direction: column; gap: .3rem; overflow-y: auto; min-height: 0; flex: 1; }
.vt-clase { --clase: var(--blue-b); display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 44px; padding: .45rem .7rem; text-align: left;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font-size: .88rem; touch-action: manipulation; }
.vt-clase-punto { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--clase); }
.vt-clase-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-clase small { color: var(--muted); font-variant-numeric: tabular-nums; }
.vt-clase[aria-pressed="true"] { border-color: var(--clase); background: rgba(0,136,255,.14); color: var(--white); font-weight: 600; }
.vt-acciones { display: flex; flex-direction: column; gap: .35rem; padding-top: .6rem; border-top: 1px solid var(--border); }
.vt-accion { display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 44px; padding: .4rem .7rem; text-align: left; border: 1px solid var(--border);
  border-radius: 8px; background: var(--panel); color: var(--text); font-size: .86rem; }
.vt-accion > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vt-accion small { color: var(--muted); font-size: .74rem; }
.vt-accion:hover, .vt-clase:hover { border-color: var(--blue-b); }
.vt-campo { margin: 0; }
.vt-centro { display: flex; flex-direction: column; gap: .7rem; min-height: 0; min-width: 0; }
.vt-barra { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; }
.vt-barra .buscar-prod { flex: 1 1 260px; min-width: 0; }
.vt-almacen { flex: 0 1 220px; min-width: 160px; }
.vt-almacen select { width: 100%; }
.vt-acciones-btn { display: none; }
.vt-buscar-limpiar { width: 32px; height: 32px; flex: 0 0 auto; }
.vt-filtro-info { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; padding: .35rem .7rem; font-size: .85rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--muted); }
.vt-filtro-info[hidden] { display: none; }
.vt-clase.sin-coincidencias { opacity: .5; }
.vt-nuevo-prod { white-space: nowrap; }
.vt-grilla { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: max-content; gap: .6rem; align-content: start; padding: 2px; }
.vt-grilla.cargando::after { content: 'Cargando productos…'; grid-column: 1 / -1; width: auto; height: auto; border: 0; animation: none; color: var(--muted); text-align: center; padding: 2rem; }
.vt-vacio { grid-column: 1 / -1; }
.vt-tarjeta { position: relative; display: flex; flex-direction: column; gap: .25rem; padding: .5rem; text-align: left; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); color: var(--text); touch-action: manipulation; transition: border-color .15s, transform .1s; }
.vt-tarjeta:hover, .vt-tarjeta:focus-visible { border-color: var(--blue-b); }
.vt-tarjeta:active { transform: scale(.97); }
.vt-tarjeta.tocada { animation: vt-toque .35s ease-out; }
@keyframes vt-toque { 0% { box-shadow: 0 0 0 0 var(--cyan-glow); } 100% { box-shadow: 0 0 0 10px transparent; } }
.vt-tarjeta .vt-foto { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.vt-tarjeta .vt-foto .ico { width: 30px; height: 30px; }
.vt-tarjeta .vt-foto.vacia { aspect-ratio: auto; height: 64px; }
.vt-en-carrito { position: absolute; top: .35rem; right: .35rem; min-width: 26px; height: 26px; padding: 0 .4rem; border-radius: 13px; background: var(--blue-b); color: #fff;
  font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.vt-precio { font-family: 'Rajdhani', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--white); }
.vt-precio small { font-family: inherit; font-size: .75rem; font-weight: 500; color: var(--muted); margin-left: .15rem; }
.vt-nombre { font-size: .84rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.vt-stock { font-size: .74rem; color: var(--muted); }
.vt-stock.sin-stock, .vt-tarjeta.sin-stock .vt-stock { color: var(--red); font-weight: 600; }
.vt-mas { align-self: center; }
.vt-carrito { display: flex; flex-direction: column; gap: .5rem; min-height: 0; padding: .7rem; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.vt-carrito-res { display: none; }
.vt-carrito-cab { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .4rem; }
.vt-dato { display: flex; align-items: center; gap: .45rem; min-height: 44px; padding: .35rem .55rem; text-align: left; border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); color: var(--text); }
.vt-dato > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vt-dato strong, .vt-dato small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-dato strong { font-size: .84rem; }
.vt-dato small { font-size: .72rem; color: var(--muted); }
.vt-items { flex: 1; min-height: 80px; overflow-y: auto; display: flex; flex-direction: column; gap: .35rem; }
.vt-items-vacio { padding: 1rem; }
.vt-items:not(:empty) + .vt-items-vacio { display: none; }
.vt-item { padding: .45rem .55rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); cursor: pointer; }
.vt-item.sel { border-color: var(--blue-b); background: rgba(0,136,255,.12); }
.vt-item-cab { display: flex; gap: .5rem; align-items: baseline; }
.vt-item-nombre { flex: 1; min-width: 0; font-size: .86rem; font-weight: 600; }
.vt-item-sub { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-item-det { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: center; font-size: .76rem; color: var(--muted); margin-top: .1rem; }
.vt-item-desc { color: var(--gold); }
.vt-item-acc { display: none; gap: .35rem; justify-content: flex-end; margin-top: .35rem; }
.vt-item.sel .vt-item-acc { display: flex; }
.vt .paso-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg3); color: var(--white); font-size: 1.3rem; font-weight: 700; line-height: 1; touch-action: manipulation; }
.vt-quitar { color: var(--red); }
.vt-total { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 .6rem; padding: .5rem .2rem 0; border-top: 1px solid var(--border); }
.vt-total > div:first-child { display: flex; flex-direction: column; }
.vt-total .l { font-weight: 700; letter-spacing: .05em; color: var(--muted); font-size: .78rem; text-transform: uppercase; }
.vt-total small { color: var(--muted); font-size: .74rem; }
.vt-total .total-monto { text-align: right; font-size: 2rem; line-height: 1.1; }
.vt-total .total-det { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .1rem .7rem; justify-content: flex-end; font-size: .74rem; color: var(--muted); }
.vt-modos, .vt-desc-modo, .vt-docs { display: flex; gap: .35rem; flex-wrap: wrap; }
.vt-chip { flex: 1 1 auto; min-height: 40px; padding: .35rem .7rem; border: 1px solid var(--border); border-radius: 20px; background: var(--bg2); color: var(--text); font-size: .84rem; touch-action: manipulation; }
.vt-chip[aria-pressed="true"] { border-color: var(--blue-b); background: rgba(0,136,255,.16); color: var(--white); font-weight: 600; }
.vt-chip:disabled { opacity: .45; }
.vt-entrada { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .3rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); }
.vt-entrada small { color: var(--muted); font-size: .76rem; }
.vt-entrada strong { font-family: 'Rajdhani', sans-serif; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.vt-entrada strong.escribiendo { color: var(--cyan); }
.vt-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.vt-teclado button { min-height: 46px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg2); color: var(--white);
  font-family: 'Rajdhani', sans-serif; font-size: 1.4rem; font-weight: 700; touch-action: manipulation; }
.vt-teclado button:active { background: var(--blue); border-color: var(--blue-b); }
.vt-teclado button:disabled { opacity: .45; }
.vt-teclado-4 { grid-template-columns: repeat(4, 1fr); }
.vt-teclado-4 button { min-height: 42px; }
.vt-teclado .vt-tecla-ok { grid-column: span 3; font-family: inherit; font-size: .95rem; background: var(--blue); border-color: var(--blue-b); color: #fff; }
.vt-teclado .vt-tecla-ok[hidden] + .vt-tecla-quitar { grid-column: 1 / -1; }
.vt-teclado .vt-tecla-quitar { color: var(--red); }
.vt-pagar { display: grid; grid-template-columns: 1fr 1.4fr; gap: .45rem; }
.vt-pagar button { min-height: 52px; font-size: 1rem; white-space: nowrap; padding-left: .6rem; padding-right: .6rem; }

/* Pantalla de pago */
.modal.vt-pago { padding: 0; align-items: stretch; }
.vt-pago-caja { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--bg); }
.vt-pago-cab { display: flex; align-items: center; gap: .8rem; padding: .6rem 1rem; background: var(--panel); border-bottom: 1px solid var(--border); }
.vt-pago-cab h2 { flex: 1; margin: 0; font-size: 1.15rem; }
.vt-pago-total { display: flex; flex-direction: column; align-items: flex-end; }
.vt-pago-total small { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.vt-pago-total .total-monto { font-size: 1.7rem; line-height: 1.1; }
.vt-pago-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 1rem; padding: 1rem; overflow-y: auto; }
.vt-pago-izq, .vt-pago-der { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.vt-pago-der { padding: .8rem; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; align-self: start; }
.vt-pago-cliente { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
.vt-pago-cliente > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vt-pago-cliente small { color: var(--muted); font-size: .76rem; }
.vt-pago-doc { margin: 0; font-size: .82rem; }
.vt-plegable { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: .5rem .7rem; }
.vt-plegable summary { cursor: pointer; font-weight: 600; font-size: .88rem; min-height: 32px; display: flex; align-items: center; }
.vt-plegable textarea { width: 100%; margin-top: .4rem; }
.vt-resumen { list-style: none; margin: .4rem 0; padding: 0; font-size: .82rem; max-height: 220px; overflow-y: auto; }
.vt-resumen li { display: flex; justify-content: space-between; gap: .6rem; padding: .2rem 0; border-bottom: 1px dashed var(--border); }
.vt-medios { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .45rem; }
.vt-medio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 76px; padding: .5rem; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); color: var(--text); font-size: .86rem; touch-action: manipulation; }
.vt-medio .ico { width: 24px; height: 24px; }
.vt-medio[aria-pressed="true"] { border-color: var(--blue-b); background: rgba(0,136,255,.15); color: var(--white); font-weight: 600; }
.vt-lineas { display: flex; flex-direction: column; gap: .4rem; }
.vt-linea { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .3rem .5rem; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); cursor: pointer; }
.vt-linea.sel { border-color: var(--blue-b); background: rgba(0,136,255,.12); }
.vt-linea-medio { display: flex; align-items: center; gap: .4rem; font-size: .88rem; }
.vt-linea-monto { font-family: 'Rajdhani', sans-serif; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.vt-linea-extra { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.vt-linea-extra input:only-child { grid-column: 1 / -1; }
.vt-qr { align-items: center; }
.vt-qr img { max-width: 150px; }
.vt-recibido-caja { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.vt-recibido-caja > div { display: flex; flex-direction: column; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); }
.vt-recibido-caja small { color: var(--muted); font-size: .74rem; }
.vt-recibido-caja strong { font-family: 'Rajdhani', sans-serif; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
#vt-falta { color: var(--green); }
#vt-falta.falta { color: var(--gold); }
.vt-montos { display: flex; flex-wrap: wrap; gap: .35rem; }
.vt-montos button { flex: 1 1 auto; }
.vt-pago-der.credito .vt-lineas, .vt-pago-der.credito .vt-recibido-caja, .vt-pago-der.credito .vt-montos, .vt-pago-der.credito .vt-teclado, .vt-pago-der.credito .vt-qr { display: none; }
.vt-confirmar { min-height: 56px; font-size: 1.1rem; }

/* Tablet horizontal estrecha */
@media (max-width: 1280px) {
  .vt { grid-template-columns: 180px minmax(0, 1fr) 320px; }
  .vt-grilla { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
/* Tablet vertical y celular: categorías en una fila, acciones desplegables y el carrito como panel inferior */
@media (max-width: 959px) {
  .pantalla-venta-tactil .contenido { padding: .6rem .6rem calc(72px + env(safe-area-inset-bottom)); }
  .vt { display: flex; flex-direction: column; gap: .6rem; height: auto; min-height: 100%; }
  .vt-cats { position: relative; gap: 0; }
  .vt-cats > .vt-tit { display: none; }
  .vt-clases { flex-direction: row; overflow-x: auto; overflow-y: hidden; flex: none; padding-bottom: .2rem; }
  .vt-clase { width: auto; flex: 0 0 auto; border-radius: 20px; min-height: 40px; }
  .vt-acciones { display: none; position: absolute; z-index: 30; top: calc(100% + .3rem); left: 0; width: min(320px, 100%); padding: .7rem; background: var(--panel);
    border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--sombra); }
  .acciones-abiertas .vt-acciones { display: flex; }
  .vt-cats { order: 2; }
  .vt-centro { order: 1; display: contents; }
  .vt-barra { order: 1; }
  .vt-filtro-info { order: 2; }
  .vt-grilla { order: 3; overflow: visible; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .vt-mas { order: 4; }
  .vt-acciones-btn { display: inline-flex; }
  .vt-barra .buscar-prod { order: -1; flex-basis: 100%; }
  .vt-almacen { flex: 1 1 160px; }
  .vt-carrito { order: 5; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; max-height: calc(100% - var(--alto-top) - 1rem); border-radius: 14px 14px 0 0;
    padding: 0 .7rem calc(.6rem + env(safe-area-inset-bottom)); gap: 0; box-shadow: var(--sombra); }
  .vt-carrito > *:not(.vt-carrito-res):not(.vt-pagar) { display: none; }
  .vt-carrito-res { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 48px; padding: .4rem .2rem; background: none; border: 0; color: var(--text); font-weight: 600; }
  .vt-carrito-res > span { flex: 1; text-align: left; }
  .vt-carrito-res .chevron { transition: transform .2s; }
  .carrito-abierto .vt-carrito { gap: .5rem; overflow-y: auto; }
  .carrito-abierto .vt-carrito > *:not(.vt-carrito-res) { display: flex; }
  .carrito-abierto .vt-carrito > .vt-carrito-cab, .carrito-abierto .vt-carrito > .vt-teclado, .carrito-abierto .vt-carrito > .vt-total, .carrito-abierto .vt-carrito > .vt-pagar { display: grid; }
  .carrito-abierto .vt-carrito > [hidden] { display: none; }
  .carrito-abierto .vt-carrito-res .chevron { transform: rotate(180deg); }
  .carrito-abierto .vt-items { flex: none; max-height: 34vh; }
  .vt-pago-cuerpo { grid-template-columns: 1fr; padding: .7rem; }
  .vt-pago-der { align-self: stretch; }
}
@media (max-width: 520px) {
  .vt-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-nuevo-prod { flex: 1 1 100%; justify-content: center; }
  .vt-medios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) { .chip-red[data-estado=verificando] .arco { animation: none; stroke: var(--cyan); } }
.pop-red { width: 270px; }
.red-detalle { display: grid; grid-template-columns: auto 1fr; gap: .35rem .8rem; margin: .2rem .6rem .5rem; font-size: .84rem; }
.red-detalle dt { color: var(--muted); }
.red-detalle dd { margin: 0; text-align: right; color: var(--text); }
.popover { position: absolute; right: 0; top: 44px; width: 290px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radio); box-shadow: var(--sombra); padding: .4rem; z-index: 50; }
.popover a, .popover button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .6rem; background: none; border: 0; border-radius: 4px; color: var(--text); font-size: .86rem; text-align: left; text-decoration: none !important; }
.popover a:hover, .popover button:hover { background: var(--cyan-glow); }
.popover kbd { margin-left: auto; }
.popover .peligro { color: var(--red); }
.pop-cab { display: flex; flex-direction: column; padding: .5rem .6rem .7rem; border-bottom: 1px solid var(--border); margin-bottom: .3rem; font-size: .8rem; color: var(--muted); }
.pop-cab strong { color: var(--white); font-size: .92rem; }

.sidebar { grid-area: side; position: relative; z-index: 10; background: var(--bg2); border-right: 1px solid var(--border); overflow-y: auto; padding: .6rem .5rem 1rem; }
.side-seccion + .side-seccion { margin-top: .6rem; }
.side-titulo { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: .4rem .6rem; }
.side-lista, .modulos, .opciones { list-style: none; }
.side-lista a { display: flex; align-items: center; gap: .5rem; padding: .35rem .6rem; font-size: .84rem; color: var(--text); border-radius: 4px; }
.side-lista a:hover { background: var(--cyan-glow); text-decoration: none; }
.side-lista kbd { margin-left: auto; }
.modulo-btn { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 40px; padding: .45rem .6rem; background: none; border: 0; border-radius: 6px; color: var(--text); font-size: .9rem; text-align: left; }
.modulo-btn:hover, .modulo-btn:focus-visible { background: var(--cyan-glow); }
.modulo-btn .nombre { flex: 1; }
.modulo.abierto > .modulo-btn { color: var(--cyan); }
.opciones { display: none; padding: .15rem 0 .4rem 1.9rem; }
.modulo.abierto > .opciones { display: block; }
.opcion { display: flex; align-items: center; gap: .4rem; padding: .35rem .6rem; font-size: .84rem; color: var(--muted); border-radius: 4px; border-left: 2px solid transparent; }
.opcion:hover { color: var(--text); background: var(--cyan-glow); text-decoration: none; }
.opcion.activa { color: var(--cyan); border-left-color: var(--cyan); background: var(--cyan-glow); }
.opcion .nombre { flex: 1; }
.opcion u { text-decoration-color: var(--cyan); text-underline-offset: 2px; }
/* Grupos dentro de un módulo (db/75): se pliegan igual que los módulos */
.grupo-btn { display: flex; align-items: center; gap: .4rem; width: 100%; padding: .35rem .6rem; background: none; border: 0; border-radius: 4px; color: var(--text); font-size: .84rem; font-weight: 600; text-align: left; }
.grupo-btn:hover, .grupo-btn:focus-visible { background: var(--cyan-glow); }
.grupo-btn .nombre { flex: 1; }
.grupo-btn::after { content: ''; flex: none; width: 6px; height: 6px; margin-right: .2rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.grupo.abierto > .grupo-btn::after { transform: rotate(45deg); }
.grupo-btn u { text-decoration-color: var(--cyan); text-underline-offset: 2px; }
.grupo-opciones { list-style: none; display: none; margin: 0 0 .2rem .6rem; padding-left: .5rem; border-left: 1px solid var(--border); }
.grupo.abierto > .grupo-opciones { display: block; }
.opcion .nombre, .grupo-btn .nombre { min-width: 0; }
/* Letras del nivel donde se navega con el teclado (Alt+letra del módulo, luego la letra del grupo) */
.modulo.navegando > .opciones > li > .opcion u, .modulo.navegando > .opciones > li > .grupo-btn u, .grupo.navegando > .grupo-opciones .opcion u { text-decoration-thickness: 2px; color: var(--white); }
/* Opción sin pantalla todavía: abre la página «En proceso de implementación» */
.etq-proceso { flex: none; padding: .05rem .4rem; border-radius: 8px; background: rgba(240,180,41,.12); color: var(--gold); font-size: .6rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.vacio { color: var(--muted); font-size: .82rem; padding: .6rem; }
.menu-contraido .sidebar .nombre, .menu-contraido .sidebar kbd, .menu-contraido .side-titulo, .menu-contraido .opciones, .menu-contraido .side-seccion:not(nav) { display: none !important; }
.menu-contraido .modulo-btn { justify-content: center; }

.contenido { grid-area: main; position: relative; z-index: auto; overflow-y: auto; padding: 1.2rem 1.6rem 2rem; outline: none; }
.cabecera-pagina { margin-bottom: 1.1rem; }
.ruta { font-size: .76rem; color: var(--muted); display: flex; gap: .4rem; margin-bottom: .3rem; }
.ruta a { color: var(--muted); }
.titulo-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.titulo { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.titulo-acciones { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.section-tag { display: inline-block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); font-weight: 700; margin-bottom: .3rem; padding-bottom: .15rem; border-bottom: 1px solid rgba(0,200,232,.3); }

.barra-atajos { grid-area: pie; position: relative; z-index: 10; display: flex; align-items: center; gap: 1.1rem; padding: 0 1rem; background: var(--bg2); border-top: 1px solid var(--border); font-size: .76rem; color: var(--muted); overflow-x: auto; white-space: nowrap; }
.barra-atajos button { background: none; border: 0; display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .76rem; }
.barra-atajos button:hover { color: var(--cyan); }
.barra-atajos .fuerte { color: var(--white); font-weight: 600; }

/* ───── Paneles, tarjetas e indicadores (dash / stat-box del sitio) ───── */
.dash, .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.2rem; position: relative; box-shadow: 0 10px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03); }
[data-theme="light"] .dash, [data-theme="light"] .panel { box-shadow: 0 6px 20px rgba(15,35,70,.06); }
.dash::before { content: ''; position: absolute; top: 0; left: 5%; right: 5%; height: 1px; background: linear-gradient(90deg, transparent, var(--blue-b), var(--cyan), transparent); }
.dash-header, .panel-cab { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .9rem; flex-wrap: wrap; }
.dash-title, .panel-titulo { font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; font-weight: 600; color: var(--text); letter-spacing: .04em; }
.dash-live { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; color: var(--green); font-weight: 700; letter-spacing: .08em; }
.dash-live::before { content: '●'; font-size: .55rem; animation: parpadeo 1.5s infinite; }
.dash-live.apagado { color: var(--muted); } .dash-live.apagado::before { animation: none; }
@keyframes parpadeo { 0%,100% { opacity: 1; } 50% { opacity: .2; } }
.grid { display: grid; gap: 1rem; }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-6 { grid-template-columns: repeat(6, minmax(0,1fr)); } .col-2 { grid-column: span 2; }
.stat-box { background: rgba(0,136,255,.06); border: 1px solid var(--border); border-radius: 8px; padding: .85rem .95rem; text-align: left; transition: border-color .2s; color: var(--text); width: 100%; }
button.stat-box:hover, button.stat-box:focus-visible { border-color: var(--blue-b); }
.stat-box .l { font-size: .72rem; color: var(--muted); letter-spacing: .04em; }
.stat-box .v { font-family: 'Rajdhani', sans-serif; font-size: 1.7rem; font-weight: 700; line-height: 1.15; margin: .15rem 0;
  background: linear-gradient(90deg, var(--blue-b), var(--cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
.stat-box .d { font-size: .72rem; font-weight: 600; }
.sube { color: var(--green); } .baja { color: var(--red); } .igual { color: var(--muted); }
.stat-box.alerta-oro .v { background: none; -webkit-text-fill-color: var(--gold); color: var(--gold); }
.lienzo { position: relative; height: 260px; }
.lienzo.alto { height: 320px; }

/* ───── Tablas (dash-table del sitio) ───── */
.tabla-envoltura { overflow-x: auto; border-radius: 6px; border: 1px solid var(--border); }
table.tabla { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tabla thead th { position: sticky; top: 0; background: var(--bg3); font-size: .68rem; color: var(--muted); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: .55rem .8rem; white-space: nowrap; }
.tabla th.num { text-align: right; }
.tabla td { padding: .5rem .8rem; border-top: 1px solid var(--border); vertical-align: middle; }
.tabla tbody tr:hover { background: rgba(0,136,255,.05); }
.tabla tbody tr.sel { background: rgba(0,136,255,.13); outline: 1px solid var(--blue-b); outline-offset: -1px; }
.tabla .acciones { text-align: right; white-space: nowrap; }
.tabla-vacia { padding: 2rem; text-align: center; color: var(--muted); }
.barra-dato { display: flex; align-items: center; gap: .5rem; }
.barra-dato i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--blue), var(--cyan)); min-width: 2px; }
.badge { display: inline-block; padding: .12rem .55rem; border-radius: 10px; font-size: .68rem; font-weight: 700; letter-spacing: .03em; }
.badge-ok { background: rgba(0,208,132,.12); color: var(--green); }
.badge-pen { background: rgba(240,180,41,.12); color: var(--gold); }
.badge-err { background: rgba(255,77,106,.12); color: var(--red); }
.badge-gris { background: var(--bg3); color: var(--muted); }
.paginacion { display: flex; align-items: center; justify-content: space-between; margin-top: .8rem; font-size: .82rem; color: var(--muted); }

/* ───── Formularios ───── */
.campo { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; font-size: .84rem; }
.campo > span:first-child { color: var(--muted); font-weight: 500; }
input, select, textarea { font: inherit; font-size: .92rem; color: var(--text); background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: .55rem .7rem; min-height: 40px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue-b); box-shadow: 0 0 0 2px rgba(0,136,255,.25); }
input[aria-invalid="true"] { border-color: var(--red); }
.con-boton { display: flex; gap: .3rem; }
.ayuda-campo { color: var(--red); font-size: .76rem; min-height: 1em; }
.ayuda-campo.aviso { color: var(--gold); }
.ayuda-campo.nota { color: var(--muted); }
.check { display: flex; align-items: center; gap: .55rem; font-size: .88rem; cursor: pointer; }
.check input { width: 18px; height: 18px; min-height: 0; accent-color: var(--blue-b); }
.filtros { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.filtros .campo { margin: 0; min-width: 150px; }
.alerta { padding: .7rem .9rem; border-radius: 6px; font-size: .86rem; margin-bottom: 1rem; border: 1px solid; }
.alerta-error { background: rgba(255,77,106,.1); border-color: rgba(255,77,106,.35); color: var(--red); }
.alerta-info { background: rgba(0,200,232,.08); border-color: rgba(0,200,232,.3); color: var(--cyan); }
.alerta-aviso { background: rgba(240,180,41,.08); border-color: rgba(240,180,41,.3); color: var(--gold); }
.error-linea { color: var(--red); font-size: .82rem; min-height: 1.2em; }

/* ───── Modales, toasts, bloqueo ───── */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 1vh 1rem 1rem; background: rgba(3,8,16,.66); backdrop-filter: blur(3px); }
.modal-caja { width: min(520px, 100%); max-height: 80vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--sombra); padding: 1.2rem 1.3rem; }
.modal-ancho { width: min(860px, 100%); }
.modal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.modal-botones { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.1rem; }
.modal-buscar { padding: 0; width: min(640px, 100%); }
.buscar-input { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border); color: var(--muted); }
.buscar-input input { border: 0; background: none; box-shadow: none; padding: .3rem 0; font-size: 1rem; }
.buscar-resultados { max-height: 52vh; overflow-y: auto; padding: .4rem; }
.buscar-grupo { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: .6rem .7rem .3rem; }
.buscar-item { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .5rem .7rem; border: 0; border-radius: 6px; background: none; color: var(--text); font-size: .88rem; text-align: left; }
.buscar-item .sub { color: var(--muted); font-size: .78rem; margin-left: auto; white-space: nowrap; }
.buscar-item.sel, .buscar-item:hover { background: rgba(0,136,255,.14); }
.buscar-pie { display: flex; gap: 1.2rem; padding: .55rem 1rem; border-top: 1px solid var(--border); font-size: .74rem; color: var(--muted); }
.ayuda-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin-top: .8rem; }
.ayuda-grid h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--cyan); margin-bottom: .4rem; }
.ayuda-grid dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .7rem; font-size: .82rem; align-items: center; }
.ayuda-grid dt { text-align: right; }
.lista-opciones { display: flex; flex-direction: column; gap: .4rem; margin: .8rem 0; }
.opcion-lista { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg2); color: var(--text); font-size: .92rem; text-align: left; width: 100%; }
.opcion-lista:hover, .opcion-lista:focus-visible { border-color: var(--blue-b); background: rgba(0,136,255,.1); }
.toasts { position: fixed; right: 1rem; bottom: calc(var(--alto-pie) + 1rem); z-index: 200; display: flex; flex-direction: column; gap: .5rem; }
.toast { min-width: 260px; max-width: 420px; padding: .7rem 1rem; border-radius: 6px; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--cyan); box-shadow: var(--sombra); font-size: .86rem; animation: sube .2s ease; }
.toast.ok { border-left-color: var(--green); } .toast.error { border-left-color: var(--red); } .toast.aviso { border-left-color: var(--gold); }
@keyframes sube { from { transform: translateY(8px); opacity: 0; } }
.toast-sesion { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 150; display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; background: var(--panel); border: 1px solid var(--gold); border-radius: 8px; box-shadow: var(--sombra); color: var(--gold); font-size: .88rem; }
.bloqueo { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(3,8,16,.94); backdrop-filter: blur(10px); }
.bloqueo-caja { width: min(360px, 90vw); display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center; }
.bloqueo-caja p { color: var(--muted); font-size: .86rem; }
.reingreso { z-index: 400; }
.reingreso .bloqueo-caja input[type=password] { width: 100%; }
.reingreso .bloqueo-caja .btn-primary { width: 100%; justify-content: center; }
/* Venta sin conexión (fase 4): bloqueo de las cajas que no son la caja offline; debajo de la pantalla bloqueada y del reingreso */
.bloqueo.bloqueo-offline { z-index: 290; }
/* Venta sin conexión (fase 5): aviso de ventas por sincronizar (botón) y su ventana */
.pendientes-offline { display: block; width: 100%; text-align: left; font: inherit; font-size: .86rem; cursor: pointer; }
.pendientes-offline u { margin-left: .3rem; }
.po-caja { width: min(760px, 94vw); }
.po-nota { font-size: .76rem; color: var(--muted); margin-top: .2rem; max-width: 34ch; }
.reingreso-usuario { color: var(--text) !important; font-weight: 600; }
.reingreso-nota { font-size: .78rem !important; }
.reingreso .link-chico { font-size: .78rem; color: var(--muted); text-decoration: underline; }

/* ───── Login ───── */
.login { min-height: 100vh; }
.login-grid { position: relative; z-index: 1; min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 3rem; padding: 3rem 5vw; }
.login-marca h1 { font-size: clamp(2.4rem, 4.4vw, 3.8rem); line-height: 1.05; margin: 1.2rem 0 1rem; }
.login-marca p { color: var(--muted); max-width: 460px; font-size: 1.02rem; line-height: 1.7; }
.hl { background: linear-gradient(90deg, var(--blue-b), var(--cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-badge { display: inline-flex; align-items: center; gap: .5rem; margin-top: 2rem; background: rgba(0,200,232,.08); border: 1px solid rgba(0,200,232,.25); padding: .35rem .9rem; border-radius: 20px; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.hero-badge::before { content: '●'; font-size: .5rem; color: var(--green); animation: parpadeo 1.5s infinite; }
.login-puntos { list-style: none; display: flex; gap: 1.3rem; margin-top: 1.8rem; color: var(--muted); font-size: .85rem; flex-wrap: wrap; }
.login-puntos kbd { margin-right: .3rem; }
.login-panel { display: flex; justify-content: center; }
.login-card { width: min(420px, 100%); padding: 2rem; }
.login-card h2 { font-size: 1.7rem; margin-bottom: .2rem; }
.login-card form { margin-top: 1.3rem; }
.login-card .btn-primary { margin-top: 1rem; min-height: 46px; }
.login-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 1.2rem; font-size: .8rem; }
.estado-servicio { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); }

/* ───── Venta rápida ───── */
.pantalla-venta .contenido { padding: 1rem 1.2rem; }
.venta { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 1rem; height: 100%; min-height: 0; }
.venta-izq { display: flex; flex-direction: column; gap: .8rem; min-height: 0; }
.venta-der { display: flex; flex-direction: column; gap: .7rem; }
.buscar-prod { position: relative; }
.buscar-prod .caja-input { display: flex; align-items: center; gap: .6rem; background: var(--bg2); border: 2px solid var(--blue-b); border-radius: 8px; padding: 0 .9rem; box-shadow: 0 0 0 4px rgba(0,136,255,.12); }
.buscar-prod input { border: 0; background: none; box-shadow: none !important; font-size: 1.05rem; min-height: 50px; }
.buscar-prod .caja-input kbd { font-size: .78rem; }
.resultados-prod { position: absolute; left: 0; right: 0; top: 56px; z-index: 30; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--sombra); max-height: 360px; overflow-y: auto; }
.resultado { display: grid; grid-template-columns: 36px 90px 1fr 90px 90px 70px; gap: .6rem; align-items: center; width: 100%; padding: .55rem .8rem; border: 0; background: none; color: var(--text); font-size: .85rem; text-align: left; border-bottom: 1px solid var(--border); }
.resultado.sel, .resultado:hover { background: rgba(0,136,255,.14); }
.resultado .cod { color: var(--muted); font-size: .76rem; }
/* Imagen de cada presentación (db/14) */
.prod-celda { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.prod-texto { min-width: 0; }
.foto-prod { flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg3); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.foto-prod img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-prod.vacia { border-style: dashed; background: transparent; }
.foto-prod .ico { width: 18px; height: 18px; }
button.foto-prod:hover, button.foto-prod:focus-visible { border-color: var(--blue); color: var(--white); }
.foto-prod.mini { width: 36px; height: 36px; cursor: inherit; }
.foto-producto { margin-bottom: .2rem; }
.foto-vista { display: flex; align-items: center; justify-content: center; width: 100%; height: min(360px, 42vh); margin: .5rem 0 .8rem; overflow: hidden;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; }
.foto-vista img { width: 100%; height: 100%; object-fit: contain; }
.foto-vista.vacia { border-style: dashed; color: var(--muted); }
.foto-vista.vacia > div { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem; text-align: center; }
.foto-vista.vacia .ico { width: 42px; height: 42px; }
.foto-acciones { display: flex; flex-wrap: wrap; gap: .6rem; }
.foto-acciones .btn-outline { flex: 1 1 160px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.foto-acciones[hidden], .foto-acciones [hidden] { display: none; }
/* db/94: imagen principal (código de barras) y alterna (código alterno) */
.foto-tabs { display: flex; gap: .4rem; margin-top: .5rem; }
.foto-tabs[hidden] { display: none; }
.foto-tabs button { flex: 1 1 0; min-width: 0; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--muted);
  cursor: pointer; text-align: center; font: inherit; }
.foto-tabs button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; }
.foto-tabs button.activo { border-color: var(--blue-b); background: var(--bg3); color: var(--white); }
.pd-imagenes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .4rem; }
.pd-imagen { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .5rem .25rem .25rem; border: 1px solid var(--border); border-radius: 8px;
  background: transparent; color: inherit; font: inherit; cursor: pointer; max-width: 100%; }
.pd-imagen:hover, .pd-imagen:focus-visible { border-color: var(--blue); }
.pd-imagen .foto-prod { cursor: inherit; }
.pd-imagen span { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left; line-height: 1.2; }
.pd-imagen small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12rem; }
.foto-nota { margin-top: .6rem; font-size: .78rem; }
.sin-stock { color: var(--red); }
.items { flex: 1; min-height: 200px; display: flex; flex-direction: column; }
.items .tabla-envoltura { flex: 1; overflow-y: auto; }
.items .tabla td.cant { width: 110px; }
.items .tabla td.cant input { width: 80px; min-height: 32px; padding: .2rem .4rem; text-align: right; }
.tipo-precio { font-size: .66rem; font-weight: 700; padding: .05rem .4rem; border-radius: 8px; background: var(--bg3); color: var(--muted); margin-left: .3rem; }
.tipo-precio.mayor { color: var(--gold); background: rgba(240,180,41,.12); }
.lista-candado { display: flex; align-items: center; gap: .3rem; color: var(--gold); font-size: .74rem; margin: -.1rem 0 .1rem; }
.lista-candado .ico { width: 13px; height: 13px; }
#sel-lista:disabled { opacity: .75; cursor: not-allowed; }
.pistas { display: flex; gap: 1.2rem; font-size: .76rem; color: var(--muted); flex-wrap: wrap; }
.caja-tecla { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .75rem .9rem; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; text-align: left; color: var(--text); }
.caja-tecla:hover, .caja-tecla:focus-visible { border-color: var(--blue-b); }
.caja-tecla .tecla { font-weight: 700; color: var(--white); }
.caja-tecla .det { display: flex; flex-direction: column; min-width: 0; }
.caja-tecla .det small { color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caja-tecla kbd { margin-left: auto; }
.total-caja { background: rgba(0,136,255,.1); border: 2px solid var(--blue-b); border-radius: 10px; padding: 1rem 1.1rem; margin-top: auto; }
.total-caja .l { font-size: .72rem; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.total-monto { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 3.2rem; line-height: 1.05; color: var(--cyan); font-variant-numeric: tabular-nums; }
.total-det { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin: .3rem 0 .8rem; }
.total-caja .btn-primary { width: 100%; min-height: 54px; font-size: 1.1rem; }
.aviso-caja { display: flex; align-items: center; gap: .8rem; justify-content: space-between; }
.cobro-formas { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: .4rem; margin: .8rem 0; }
.cobro-condicion { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .8rem; }
.cobro-condicion .forma { flex-direction: row; justify-content: center; font-size: .9rem; padding: .55rem; }
.qr-pago { display: grid; grid-template-columns: 170px 1fr; gap: .8rem; align-items: start; margin-bottom: .6rem; }
.qr-pago img { width: 170px; height: 170px; object-fit: contain; background: #fff; border-radius: 8px; padding: 6px; }
.qr-vacio { width: 170px; height: 170px; display: grid; place-items: center; text-align: center; border: 1px dashed var(--border); border-radius: 8px; font-size: .8rem; color: var(--muted); padding: .5rem; }
.qr-celular { font-family: 'Rajdhani', sans-serif; font-size: 1.3rem; font-weight: 700; }
.forma { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .6rem .3rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); color: var(--text); font-size: .78rem; }
.forma[aria-pressed="true"] { border-color: var(--blue-b); background: rgba(0,136,255,.15); color: var(--white); }
.cobro-total { text-align: center; margin: .4rem 0 .6rem; }
/* Tipo de cambio del día (db/37): en el total de la venta y en Cobrar; sin tipo de cambio, en ámbar con el aviso */
.venta-tc { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cobro-tc { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.venta-tc.sin-tc, .cobro-tc.sin-tc { color: var(--gold); }
.cobro-tc.sin-tc { margin-top: .3rem; font-weight: 600; }
.oc-tc { display: block; margin-top: .25rem; font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.oc-tc.sin-tc { color: var(--gold); }
/* Detalle del comprobante (cobro) y productos gratuitos */
.cobro-desglose { margin: 0 0 .8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); }
.cobro-desglose summary { cursor: pointer; padding: .5rem .8rem; font-size: .8rem; font-weight: 600; color: var(--muted); list-style-position: inside; }
.cobro-desglose[open] summary { border-bottom: 1px solid var(--border); }
.desglose-grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1.2rem; padding: .6rem .8rem 0; }
.desglose-tit { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .25rem; }
.desglose { margin: 0; }
.desglose > div { display: flex; justify-content: space-between; gap: .6rem; padding: .16rem 0; font-size: .82rem; border-bottom: 1px dashed var(--border); }
.desglose dt { color: var(--muted); }
.desglose dd { margin: 0; font-variant-numeric: tabular-nums; }
.desglose .desglose-total { font-weight: 700; border-bottom: 0; }
.desglose .desglose-total dt { color: var(--text); }
.desglose-letras { margin: .5rem .8rem .7rem; font-size: .74rem; color: var(--muted); }
.tipo-precio.gratis { background: rgba(0, 200, 120, .16); color: var(--green); border-color: rgba(0, 200, 120, .45); }
.valor-ref { display: block; font-size: .7rem; color: var(--muted); white-space: nowrap; }
/* Descripción adicional del ítem (db/53) */
.item-acciones { display: flex; gap: .15rem; justify-content: flex-end; }
.item-acciones .btn-icono.activo { color: var(--blue); }
.desc-adic { display: block; max-width: 100%; margin-top: .15rem; padding: 0; border: 0; background: none; color: var(--blue); font-size: .78rem; font-style: italic;
  text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.desc-adic::before { content: '✎ '; font-style: normal; }
#desc-texto { resize: vertical; min-height: 4.5rem; }
.total-det { flex-wrap: wrap; gap: .2rem .8rem; }
#total-extra { flex-basis: 100%; color: var(--green); }
.cobro-total .total-monto { font-size: 2.8rem; }
.vuelto { font-family: 'Rajdhani', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--green); text-align: right; font-variant-numeric: tabular-nums; }
.linea-pago { display: grid; grid-template-columns: 1fr 120px 40px; gap: .4rem; align-items: center; margin-bottom: .4rem; font-size: .85rem; }
.linea-pago .linea-extra { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .4rem; margin: -.1rem 0 .3rem; }
.linea-pago .linea-extra:empty { display: none; }

/* ───── Caja ───── */
.caja-resumen { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .8rem; margin-bottom: 1rem; }
.arqueo { display: grid; grid-template-columns: repeat(2, 1fr); gap: .3rem 1rem; }
.arqueo label { display: grid; grid-template-columns: 70px 1fr 90px; align-items: center; gap: .5rem; font-size: .85rem; }
.arqueo input { min-height: 32px; padding: .2rem .4rem; text-align: right; }
.diferencia { font-family: 'Rajdhani', sans-serif; font-size: 1.5rem; font-weight: 700; }
.arqueo-secciones { display: grid; gap: .8rem; margin: .8rem 0; max-height: 46vh; overflow: auto; padding-right: .3rem; }
#modal-arqueo { padding-top: 3vh; }
#modal-arqueo .modal-caja { max-height: 94vh; }
.arqueo-seccion { border: 1px solid var(--border); border-radius: 10px; padding: .7rem .9rem; background: var(--bg2); }
.arqueo-seccion h3 { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .95rem; margin-bottom: .5rem; }
.arqueo-seccion h3 small { font-weight: 500; font-size: .8rem; }
.arqueo-sub { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: .4rem 0 .2rem; }
.arqueo-fila { display: grid; grid-template-columns: 1fr 110px 130px 110px; gap: .5rem; align-items: center; font-size: .85rem; padding: .15rem 0; }
.arqueo-fila input { min-height: 32px; padding: .2rem .4rem; text-align: right; }
.arqueo-fila .num { text-align: right; }
.arqueo-cab { color: var(--muted); font-size: .75rem; text-transform: uppercase; }
.arqueo-total { border-color: var(--blue-b); }
.dif-ok { color: var(--green); } .dif-mal { color: var(--red); }
.chips-medio { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.4rem 0 1rem; }
.chip-medio { border: 1px solid var(--border); border-radius: 999px; padding: .25rem .7rem; font-size: .82rem; background: var(--bg2); }

/* =====================================================================
   Adaptable a cualquier equipo (entrega 1: estructura, Venta rápida y cobro)
   - Computadora (≥ 1180 px): sin cambios.
   - Tablet horizontal (960–1179 px): menú fijo, panel derecho más angosto.
   - Tablet vertical y celular (< 960 px, "compacto"): menú desplegable, datos de la venta plegables,
     total y Cobrar fijos abajo.
   - Celular (< 640 px): carrito en tarjetas, ventanas a pantalla completa.
   - Pantallas táctiles: botones de 44 px o más, sin pistas de teclado ni barra de atajos,
     botones − / + y teclado numérico propio en el cobro.
   ===================================================================== */

/* Elementos que solo aparecen en pantallas compactas o táctiles */
.venta-resumen, .velo-menu, .paso-btn, .teclado-num { display: none; }
.venta-datos { display: contents; }
.paso { display: inline-flex; align-items: center; justify-content: flex-end; gap: .25rem; }
.logo-texto { white-space: nowrap; }
.toast-accion { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.app { height: 100vh; height: 100dvh; }

@media (max-width: 1180px) {
  .g-6 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .venta { grid-template-columns: minmax(0,1fr) 290px; }
}

/* ───── Tablet vertical y celular ───── */
@media (max-width: 959px) {
  .app, .app.menu-contraido { --lateral: 0px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main" "pie"; }
  /* Menú lateral desplegable */
  .app .sidebar { position: fixed; top: var(--alto-top); bottom: 0; left: 0; width: min(300px, 86vw); z-index: 60; transform: translateX(-105%);
    transition: transform .22s ease, visibility 0s linear .22s; box-shadow: var(--sombra); padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    visibility: hidden; } /* cerrado: fuera de la pantalla y sin foco con Tab */
  .app.menu-abierto .sidebar { transform: none; visibility: visible; transition-delay: 0s; }
  .velo-menu { display: block; position: fixed; inset: var(--alto-top) 0 0 0; z-index: 55; background: rgba(3,8,16,.55); }
  .velo-menu[hidden] { display: none !important; }
  /* Dentro del desplegable siempre se ven nombres y opciones, aunque en computadora estuviera contraído */
  .app.menu-contraido .sidebar .nombre { display: inline !important; }
  .app.menu-contraido .side-titulo { display: block !important; }
  .app.menu-contraido .modulo.abierto > .opciones { display: block !important; }
  .app.menu-contraido .side-seccion:not(nav) { display: block !important; }
  .app.menu-contraido .side-seccion[hidden] { display: none !important; }
  .app.menu-contraido .modulo-btn { justify-content: flex-start; }
  .app .modulo-btn { min-height: 46px; }
  .app .opcion, .app .grupo-btn, .app .side-lista a { min-height: 42px; }

  .g-2, .g-3 { grid-template-columns: 1fr; } .col-2 { grid-column: auto; }
  .login-grid { grid-template-columns: 1fr; padding: 2rem 1rem; } .login-marca { display: none; }
  .caja-resumen { grid-template-columns: repeat(2, 1fr); }
  .topbar { gap: .4rem; padding: 0 .6rem; }
  .buscador { flex: 1 1 auto; min-width: 40px; margin-left: .4rem; }
  .topbar-der { min-width: 0; }
  .chip { min-width: 0; }
  #chip-sucursal span, #chip-rol span, #chip-caja .txt { overflow: hidden; text-overflow: ellipsis; max-width: 18ch; }
  .contenido { padding: 1rem 1rem 1.6rem; }

  /* ───── Venta rápida compacta ───── */
  .pantalla-venta .contenido { padding: .7rem .8rem calc(96px + env(safe-area-inset-bottom)); }
  .venta { display: flex; flex-direction: column; gap: .7rem; height: auto; }
  .venta-der { display: contents; }
  .venta-resumen { order: 1; display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 48px; padding: .55rem .8rem; background: var(--panel);
    border: 1px solid var(--border); border-radius: 8px; color: var(--text); text-align: left; font-size: .88rem; }
  .venta-resumen .res-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .venta-resumen .falta { color: var(--gold); font-weight: 600; }
  .venta-resumen .chevron { transition: transform .2s; }
  .datos-abiertos .venta-resumen { border-color: var(--blue-b); }
  .datos-abiertos .venta-resumen .chevron { transform: rotate(180deg); }
  .venta-datos { order: 2; display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .datos-abiertos .venta-datos { display: grid; }
  .venta-datos > .panel { grid-column: 1 / -1; }
  .venta-izq { order: 3; }
  .items { min-height: 180px; }
  .items .tabla-envoltura { overflow-y: visible; }
  /* Total y Cobrar fijos abajo */
  .total-caja { position: fixed; z-index: 15; left: 0; right: 0; bottom: var(--alto-pie); margin: 0; border-radius: 12px 12px 0 0; border-width: 2px 0 0;
    padding: .55rem 1rem calc(.55rem + env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l btn" "monto btn" "det btn";
    column-gap: .9rem; align-items: center; background: var(--panel); box-shadow: 0 -10px 30px rgba(0,0,0,.35); }
  .total-caja .l { grid-area: l; font-size: .64rem; }
  .total-caja .total-monto { grid-area: monto; font-size: 2rem; }
  .total-caja .total-det { grid-area: det; margin: 0; gap: .8rem; justify-content: flex-start; font-size: .74rem; }
  .total-caja .btn-primary { grid-area: btn; width: auto; min-width: 150px; min-height: 56px; }
  .pantalla-venta .toasts { bottom: calc(110px + var(--alto-pie)); }
  .resultados-prod { max-height: 55vh; }
}

/* ───── Mantenedor de clientes (Clientes › Clientes) ───── */
.form-cliente { width: min(920px, 100%); }
.cl-tipo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: .6rem; }
.cl-tipo-op { position: relative; cursor: pointer; }
.cl-tipo-op input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.cl-tipo-op span { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .5rem .8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); font-weight: 600; font-size: .9rem; }
.cl-tipo-op input:checked + span { border-color: var(--blue); background: rgba(0,136,255,.14); color: var(--white); }
.cl-tipo-op input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.cl-tipo-op input:disabled + span { opacity: .45; cursor: not-allowed; }
.cl-nota { display: flex; align-items: center; gap: .4rem; font-size: .78rem; margin: -.2rem 0 .6rem; }
.cl-seccion { border: 1px solid var(--border); border-radius: 8px; padding: .7rem .9rem .1rem; margin: 0 0 .7rem; min-width: 0; }
.cl-seccion legend { padding: 0 .4rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cl-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .8rem; }
.cl-fila-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cl-fila-doc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.cl-doc, .cl-comercial { display: flex; gap: .4rem; align-items: stretch; }
.cl-doc input, .cl-comercial input[type=text], .cl-comercial input:not([type]) { flex: 1 1 auto; min-width: 0; }
.cl-btn-rayo, .cl-btn-ente { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 40px; padding: 0 .6rem; }
.cl-btn-rayo .ico { color: var(--gold); }
.cl-btn-ente span { font-size: .74rem; font-weight: 700; letter-spacing: .04em; }
.cl-btn-ente.sin-config { opacity: .7; border-style: dashed; }
.cl-doc button.cargando { opacity: .6; cursor: progress; }
.cl-doc button.cargando .ico { animation: cl-giro 1s linear infinite; }
@keyframes cl-giro { to { transform: rotate(360deg); } }
.cl-auto { display: inline-flex; align-items: center; gap: .3rem; padding: 0 .5rem; border: 1px solid var(--border); border-radius: 6px; font-size: .8rem; white-space: nowrap; cursor: pointer; }
.cl-auto input { width: auto; min-height: 0; }
.cl-comercial input.auto { color: var(--muted); }
.form-cliente .campo[data-origen] > span:first-child::after { content: attr(data-origen); margin-left: .4rem; padding: 0 .35rem; border-radius: 6px; font-size: .64rem; font-weight: 700; color: var(--green); background: rgba(0, 200, 120, .14); }
.cl-aviso { margin: -.3rem 0 .7rem; padding: .45rem .7rem; border-radius: 6px; font-size: .8rem; border: 1px solid var(--border); }
.cl-aviso.ok { color: var(--green); border-color: rgba(0, 200, 120, .45); }
.cl-aviso.aviso { color: var(--gold); border-color: rgba(240,180,41,.45); }
.cl-aviso.error { color: var(--red, #ff4d6a); border-color: rgba(255,77,106,.45); }
.cl-aviso.cl-aviso-campo { margin: .35rem 0 0; }
.cl-pv-envoltura { max-height: 240px; overflow-y: auto; margin-bottom: .6rem; }
.cl-pv-tabla th.acciones, .cl-pv-tabla td.acciones { width: 1%; white-space: nowrap; text-align: right; }
.cl-pv-fila-botones { display: inline-flex; gap: .35rem; justify-content: flex-end; }
/* Direcciones de entrega (db/97): sección del formulario de Clientes, Ventas › Direcciones y entregas y su ventana */
.cl-dir-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.cl-dir-cab p { margin: 0; }
.cl-dir-cab .btn-outline { display: inline-flex; align-items: center; gap: .3rem; }
.de-principal { color: var(--gold); font-weight: 700; }
.de-aviso { display: inline-flex; align-items: center; gap: .25rem; color: var(--gold); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.de-aviso .ico { width: 14px; height: 14px; }
.de-si { display: inline-flex; align-items: center; gap: .25rem; color: var(--green); font-weight: 600; }
.de-si .ico { width: 14px; height: 14px; }
.de-col-check { width: 1%; text-align: center; }
.de-col-check input, .de-todas input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--blue-b); }
.de-todas { margin: 0 0 .5rem; }
.df-cliente-fijo { margin: 0 0 .8rem; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--blue-b) 6%, transparent); font-size: .88rem; }
.df-principal { align-self: end; margin-bottom: 1rem; white-space: nowrap; }
/* Zona: buscador (como el de productos del POS) */
.cl-combo { position: relative; }
/* Buscador con botón al lado (Órdenes y Documentos de compra › Nuevo proveedor) */
.cl-combo-boton { display: flex; gap: .4rem; align-items: stretch; }
.cl-combo-boton > .cl-combo { flex: 1 1 auto; min-width: 0; }
.cl-btn-nuevo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 0 .6rem; }
.cl-combo input { width: 100%; }
.cl-combo-lista { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--sombra); max-height: 240px; overflow-y: auto; }
.cl-combo-op { display: grid; grid-template-columns: fit-content(45%) minmax(0, 1fr); gap: .6rem; align-items: center; width: 100%; min-height: 38px; padding: .45rem .8rem; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font-size: .86rem; text-align: left; cursor: pointer; }
.cl-combo-op:last-child { border-bottom: 0; }
.cl-combo-op.sel, .cl-combo-op:hover { background: rgba(0,136,255,.14); }
.cl-combo-op .cod { color: var(--muted); font-size: .76rem; font-weight: 600; letter-spacing: .03em; }
/* El código (RUC, código de barras) ocupa su ancho real hasta 45 % de la fila; el nombre parte las palabras largas en vez de montarse */
.cl-combo-op .cod { min-width: 56px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-combo-op > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.cl-combo-op mark { background: color-mix(in srgb, var(--cyan) 30%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.cl-combo-vacio { margin: 0; padding: .7rem .8rem; color: var(--muted); font-size: .85rem; }
/* Recursos Humanos › Empleados: sucursales donde puede trabajar y sus almacenes */
.em-sucursales { display: grid; gap: .5rem; margin: 0 0 .7rem; }
.em-suc { border: 1px solid var(--border); border-radius: 8px; padding: .45rem .7rem; min-width: 0; }
.em-suc.marcada { border-color: color-mix(in srgb, var(--cyan) 55%, var(--border)); }
.em-suc-cab { display: flex; align-items: center; gap: .5rem; font-weight: 600; flex-wrap: wrap; }
.em-suc-cab .em-origen { font-size: .72rem; font-weight: 600; color: var(--muted); }
.em-alms { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .4rem 0 0 1.6rem; font-size: .9rem; }
.em-alms[hidden] { display: none; }
.em-alms label, .em-suc-cab label { display: flex; align-items: center; gap: .45rem; min-width: 0; cursor: pointer; }
.em-suc-cab label { flex: 1 1 auto; }
.em-alms label { flex: 1 1 14rem; font-weight: 400; }
.em-suc input[type=checkbox] { flex: none; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--blue-b); cursor: pointer; }
/* Usuarios y permisos › Roles y permisos (db/80): árbol de permisos módulo › grupo › opción */
.rp-form { width: min(980px, 100%); }
.rp-form #rp-nombre { text-transform: uppercase; }
.rp-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .4rem 1rem; }
.rp-barra .rp-buscar { flex: 1 1 260px; margin-bottom: .5rem; }
.rp-barra .rp-contador { margin: 0 0 .9rem; font-variant-numeric: tabular-nums; }
.rp-barra-btn { display: flex; gap: .4rem; margin-bottom: .7rem; }
.rp-ayuda { margin: 0 0 .6rem; font-size: .8rem; }
.rp-arbol { display: grid; gap: .45rem; margin-bottom: .7rem; }
.rp-modulo { border: 1px solid var(--border); border-radius: 8px; min-width: 0; }
.rp-modulo[hidden], .rp-grupo[hidden], .rp-op[hidden], .rp-cuerpo[hidden] { display: none; }
.rp-mod-cab { display: flex; align-items: center; gap: .45rem; padding: .3rem .6rem .3rem .3rem; background: var(--bg3); border-radius: 8px; }
.rp-mod-cab .rp-mod-cuenta { margin-left: auto; font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-cuerpo { padding: .35rem .7rem .5rem 2.4rem; display: grid; gap: .1rem; }
.rp-grupo { margin: .25rem 0; }
.rp-grp-cab { font-weight: 600; color: var(--muted); font-size: .85rem; padding: .2rem 0; }
.rp-grp-cuerpo { padding-left: 1.2rem; display: grid; gap: .1rem; border-left: 2px solid var(--border); margin-left: .45rem; }
.rp-op { min-width: 0; }
.rp-op-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1rem; padding: .25rem .3rem; border-radius: 6px; }
.rp-op-fila:hover { background: color-mix(in srgb, var(--cyan) 6%, transparent); }
.rp-op-nombre { flex: 0 1 250px; min-width: 160px; }
.rp-op-hijos { padding-left: 1.6rem; }
.rp-permiso .rp-op-nombre { font-size: .88rem; color: var(--muted); }
.rp-todo, .rp-acc-op { display: inline-flex; align-items: center; gap: .35rem; margin: 0; cursor: pointer; overflow-wrap: anywhere; }
.rp-todo input, .rp-acc-op input { flex: none; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--blue-b); cursor: pointer; }
.rp-todo input:disabled, .rp-acc-op input:disabled { cursor: default; }
.rp-acc { display: flex; flex-wrap: wrap; gap: .15rem .9rem; font-size: .86rem; }
.rp-acc-op.rp-ver { font-weight: 600; }
.rp-etq-admin { padding: .05rem .4rem; border-radius: 8px; background: color-mix(in srgb, var(--cyan) 14%, transparent); color: var(--cyan); font-size: .66rem; font-weight: 700; white-space: nowrap; }
.rp-usuarios { margin: 0 0 .7rem; padding-left: 1.1rem; display: grid; gap: .2rem; font-size: .9rem; }
@media (max-width: 639px) {
  .rp-cuerpo { padding-left: .8rem; }
  .rp-grp-cuerpo { padding-left: .7rem; }
  .rp-op-nombre { flex-basis: 100%; }
}
@media (max-width: 760px) {
  .cl-fila, .cl-fila-3, .cl-fila-doc, .cl-pv-form { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .cl-btn-ente span { display: none; }
}
/* Obligatorios */
.form-cliente .req { color: var(--red, #ff5c6c); font-weight: 700; margin-left: .15rem; }
.form-cliente .campo:not(.requerido) .req-dinamico { display: none; }
.cl-obligatorio { margin: -.2rem 0 .5rem; font-size: .78rem; }

/* ───── Listado de clientes: SlickGrid (computadora/tablet) y tarjetas (celular) ───── */
.cl-listado { display: flex; flex-direction: column; gap: .5rem; }
.cl-listado-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 1.4rem; }
.cl-listado-cab p { margin: 0; font-size: .82rem; }
/* Tema SlickGrid compartido (Clientes, Historial de cajas…): clase eye-grid */
.eye-grid { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--panel); font-size: .88rem; }
.eye-grid[hidden] { display: none; }
.cl-grid, .ch-grid, .mt-grid { height: max(340px, calc(100dvh - 300px)); }
.eye-grid .slick-header { background: var(--bg3); border-bottom: 1px solid var(--border); }
.eye-grid .slick-header-column { background: var(--bg3); color: var(--muted); border-right: 1px solid var(--border); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .55rem 1.2rem .55rem .8rem; height: auto; line-height: 1.2; cursor: pointer; }
.eye-grid .slick-header-column:hover { color: var(--text); }
.eye-grid .slick-header-column-sorted { font-style: normal; color: var(--text); }
.eye-grid .slick-header-column.num { text-align: right; }
.eye-grid .slick-sort-indicator { float: none; position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); width: 10px; height: auto; margin: 0; border: 0; line-height: 1; }
.eye-grid .slick-sort-indicator-asc::before { content: '▲'; font-size: .6rem; color: var(--cyan); }
.eye-grid .slick-sort-indicator-desc::before { content: '▼'; font-size: .6rem; color: var(--cyan); }
.eye-grid .slick-resizable-handle { width: 6px; right: -3px; cursor: col-resize; }
.eye-grid .slick-row { background: var(--panel); color: var(--text); }
.eye-grid .slick-row.odd { background: var(--panel2); }
.eye-grid .slick-row:hover { background: rgba(0,136,255,.07); }
.eye-grid .slick-row.active, .eye-grid .slick-row.active .slick-cell { background: rgba(0,136,255,.13); }
.eye-grid .slick-cell { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 .8rem; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eye-grid .slick-cell > span { overflow: hidden; text-overflow: ellipsis; }
.eye-grid .slick-cell.active { outline: 1px solid var(--blue-b); outline-offset: -1px; }
.eye-grid .slick-cell.num { justify-content: flex-end; font-variant-numeric: tabular-nums; color: var(--muted); }
.eye-grid .slick-cell.acciones { justify-content: flex-end; padding: 0 .5rem; overflow: visible; }
.eye-grid .slick-cell.acciones .btn-chico { min-height: 28px; padding: .15rem .6rem; }
.eye-grid .slick-viewport { overflow-x: auto; }
.eye-grid .cl-cargando-fila { color: var(--muted); font-style: italic; }
.cl-tarjetas { display: flex; flex-direction: column; gap: .55rem; }
.cl-tarjetas[hidden] { display: none; }
.cl-tarjeta { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: .65rem .85rem; display: grid; grid-template-columns: 1fr auto; gap: .15rem .6rem; }
.cl-tarjeta:focus-visible { outline: 2px solid var(--blue-b); }
.cl-tarjeta-nombre { font-weight: 700; color: var(--white); font-size: .95rem; grid-column: 1 / -1; display: flex; justify-content: space-between; gap: .5rem; padding-bottom: .35rem; margin-bottom: .2rem; border-bottom: 1px solid var(--border); }
.cl-tarjeta-nombre small { color: var(--muted); font-weight: 600; font-size: .72rem; white-space: nowrap; }
.cl-tarjeta dl { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; margin: 0; font-size: .85rem; }
.cl-tarjeta dt { color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; align-self: center; }
.cl-tarjeta dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.cl-tarjeta .cl-tarjeta-acciones { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin-top: .35rem; }
.cl-mas { height: 1px; }
.cl-mas.cargando { height: auto; padding: .6rem; text-align: center; color: var(--muted); font-size: .85rem; }
.cl-mas.cargando::before { content: 'Cargando más clientes…'; }
.cl-mas.cargando[data-texto]::before { content: attr(data-texto); }
.cl-vacio { padding: 1.2rem; text-align: center; border: 1px dashed var(--border); border-radius: 8px; }
@media (max-width: 1023px) { .cl-grid, .ch-grid, .mt-grid { height: max(340px, calc(100dvh - 260px)); } }
/* Clientes › Clientes y Caja › Historial (computadora y tablet): la grilla ocupa todo el alto restante hasta la barra de atajos → un solo scroll (el de la grilla).
   El área de contenido es una columna; título, buscador y contador con su alto natural. Mínimo 280 px: en pantallas muy bajas se permite el scroll de la página. */
@media (min-width: 640px) {
  .contenido:has(> .eye-listado) { display: flex; flex-direction: column; padding-bottom: .9rem; }
  .contenido:has(> .eye-listado) > * { flex-shrink: 0; }
  .contenido:has(> .eye-listado) > .eye-listado { flex: 1 1 0; min-height: 0; }
  .contenido:has(> .eye-listado) .eye-grid { flex: 1 1 0; height: auto; min-height: 280px; }
}
@media (hover: none) and (pointer: coarse) { .eye-grid .slick-cell.acciones .btn-chico, .cl-pv-btn { min-height: 40px; padding: .3rem .8rem; } .cl-combo-op { min-height: 44px; } }
/* ───── Cargando (listados con grilla y detalle): capa con spinner sobre los datos; las respuestas viejas se descartan en JS ───── */
.eye-listado { position: relative; }
.eye-carga { position: absolute; inset: 0; z-index: 6; display: flex; justify-content: center; align-items: flex-start; padding-top: clamp(2.5rem, 22%, 9rem);
  background: color-mix(in srgb, var(--panel) 55%, transparent); border-radius: 6px; }
.eye-carga[hidden] { display: none; }
.eye-carga-caja { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1rem; background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: var(--sombra); font-size: .88rem; font-weight: 600; }
.eye-spinner { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--cyan); animation: gira .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .eye-spinner { animation: none; border-color: var(--cyan); border-right-color: var(--border); } }
@media (max-width: 639px) { .eye-listado > .eye-carga { position: fixed; inset: calc(var(--alto-top) + .75rem) 0 auto 0; padding: 0; background: none; z-index: 60; pointer-events: none; } }

/* ───── Caja › Historial de cajas ───── */
/* Encabezados en dos líneas (Efectivo / inicial…) para que las 12 columnas entren sin desplazar en 1366 px o más */
.ch-grid { font-size: .85rem; }
.eye-grid.ch-grid .slick-header-column, .eye-grid.cm-grid .slick-header-column { height: 2.6em; white-space: normal; display: flex; align-items: center; padding: .4rem .95rem .4rem .5rem; letter-spacing: .05em; line-height: 1.3; }
.eye-grid.ch-grid .slick-cell, .eye-grid.ch-grid .slick-footerrow-column { padding: 0 .5rem; }
.ch-grid .slick-header-column.num, .cm-grid .slick-header-column.num { justify-content: flex-end; }
.eye-grid .slick-cell .badge { line-height: 1.3; }
.eye-grid .slick-footerrow { background: var(--bg3); border-top: 1px solid var(--border); }
.eye-grid .slick-footerrow-column { background: var(--bg3); color: var(--text); border: 0; border-right: 1px solid var(--border); padding: 0 .8rem; display: flex; align-items: center;
  height: 100%; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eye-grid .slick-footerrow-column.num { justify-content: flex-end; }
.eye-grid .slick-footerrow-column .sube { color: var(--green); } .eye-grid .slick-footerrow-column .baja { color: var(--red); }
.ch-ayuda { margin: 0; font-size: .78rem; }
.ch-ayuda .solo-celular { display: none; }
@media (max-width: 639px) { .ch-ayuda .solo-celular { display: inline; } .ch-ayuda .solo-grande { display: none; } }
.ch-tarjeta-total { background: var(--bg3); }
.ch-tarjeta-total .cl-tarjeta-nombre { color: var(--cyan); }
.cl-tarjeta .sube { color: var(--green); font-weight: 700; } .cl-tarjeta .baja { color: var(--red); font-weight: 700; }
.ch-tarjeta { cursor: pointer; }
/* Detalle de la caja */
#modal-caja-detalle .modal-caja { width: min(980px, 100%); max-height: 88vh; position: relative; }
.ch-cab { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .45rem 1rem; margin: 0 0 .9rem; font-size: .86rem; }
.ch-cab div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ch-cab dt { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ch-cab dd { margin: 0; overflow-wrap: anywhere; }
.ch-cab .ch-obs { grid-column: 1 / -1; }
.eye-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: .8rem; }
.eye-tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: .55rem .9rem; font-weight: 700; font-size: .86rem; min-height: 40px; cursor: pointer; }
.eye-tab:hover { color: var(--text); }
.eye-tab[aria-selected=true] { color: var(--text); border-bottom-color: var(--cyan); }
.eye-tab:focus-visible { outline: 2px solid var(--blue-b); outline-offset: -2px; }
.eye-tab .badge { margin-left: .35rem; }
.ch-panel[hidden] { display: none; }
.ch-panel .tabla-envoltura { max-height: 52vh; overflow: auto; }
.ch-panel .tabla tfoot td { position: sticky; bottom: 0; background: var(--bg3); font-weight: 700; border-top: 1px solid var(--border); padding: .5rem .8rem; }
.ch-panel .tabla td.sube { color: var(--green); font-weight: 700; } .ch-panel .tabla td.baja { color: var(--red); font-weight: 700; }
.ch-panel .tabla tr.ch-medio td { background: var(--bg2); font-weight: 700; }
.ch-panel .tabla tr.ch-den td { color: var(--muted); font-size: .8rem; padding-top: .3rem; padding-bottom: .3rem; }
.ch-panel .tabla tr.ch-den td:first-child { padding-left: 1.8rem; }
.ch-nota { margin-bottom: .8rem; }
.ch-detalle-cuerpo { min-height: 180px; position: relative; }
.ch-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.ch-item { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: .55rem .75rem; font-size: .86rem; }
.ch-item-cab { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.ch-item-cab .sube, .ch-item-cab .baja { font-weight: 700; }
.ch-item dl { display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; margin: .3rem 0 0; }
.ch-item dt { color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; align-self: center; }
.ch-item dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ch-item-total { background: var(--bg3); }
.ch-dens { margin: .3rem 0 0; color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.ch-mov-concepto { margin-top: .15rem; overflow-wrap: anywhere; }
@media (max-width: 639px) {
  .ch-panel .tabla-envoltura { max-height: none; }
  .ch-panel .tabla { font-size: .8rem; }
  .ch-panel .tabla td, .ch-panel .tabla th { padding: .45rem .5rem; }
  .ch-cab { grid-template-columns: 1fr 1fr; }
  .ch-mov-medio { display: none; }
}
/* ───── Caja › Mi caja: movimientos del turno ───── */
.cm-movs { display: flex; flex-direction: column; gap: .55rem; }
.cm-cab { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 0; }
.cm-cab .dash-title { margin-right: auto; }
.cm-filtros { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.cm-buscar { flex: 1 1 260px; display: flex; align-items: center; gap: .45rem; padding: 0 .65rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg2); color: var(--muted); min-height: 38px; }
.cm-buscar:focus-within { border-color: var(--blue-b); }
.cm-buscar input { border: 0; background: none; box-shadow: none; padding: .35rem 0; min-height: 0; flex: 1; min-width: 0; color: var(--text); }
.cm-buscar input:focus { outline: none; box-shadow: none; }
.cm-tipos { display: flex; gap: .3rem; flex-wrap: wrap; }
.cm-tipos button { border: 1px solid var(--border); background: var(--bg2); color: var(--muted); border-radius: 999px; padding: .3rem .75rem; font-size: .8rem; font-weight: 600; min-height: 34px; cursor: pointer; white-space: nowrap; }
.cm-tipos button span { margin-left: .3rem; font-size: .72rem; opacity: .8; font-variant-numeric: tabular-nums; }
.cm-tipos button:hover { color: var(--text); }
.cm-tipos button[aria-checked=true] { background: rgba(0,136,255,.16); border-color: var(--blue-b); color: var(--text); }
.cm-tipos button:focus-visible { outline: 2px solid var(--blue-b); outline-offset: 1px; }
.cm-grid { height: max(320px, calc(100dvh - 520px)); }
.eye-grid .slick-cell.cm-ing { color: var(--green); } .eye-grid .slick-cell.cm-egr { color: var(--red); }
.eye-grid .slick-cell a { color: var(--cyan); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.eye-grid .slick-cell a:hover { text-decoration: underline; }
.cm-tarjeta { display: block; }
.cm-tarjeta-cab { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; font-size: .82rem; }
.cm-tarjeta-concepto { margin-top: .2rem; font-weight: 600; overflow-wrap: anywhere; }
.cm-tarjeta-det { margin: .2rem 0 0; color: var(--muted); font-size: .78rem; }
.cm-con-ticket { cursor: pointer; }
.cm-nuevo { border-color: var(--blue-b); box-shadow: 0 0 0 2px var(--cyan-glow); }
.cm-vacio-btn { margin-left: .4rem; }
#cm-vacio { display: flex; justify-content: center; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .7rem 1rem; }
#cm-vacio[hidden] { display: none; }
@media (min-width: 640px) {
  /* Mi caja: la tarjeta de movimientos ocupa el alto restante; la grilla, todo el alto de la tarjeta (mínimo 280 px) */
  .contenido:has(> #cm-listado) > #cm-listado { min-height: 440px; }
}
@media (hover: none) and (pointer: coarse) { .cm-tipos button { min-height: 42px; padding: .35rem .85rem; } .cm-buscar { min-height: 44px; } .cm-buscar input { min-height: 40px; } }
@media (max-width: 639px) {
  .cm-tipos { flex-wrap: nowrap; overflow-x: auto; margin: 0 -.2rem; padding: 0 .2rem .2rem; scrollbar-width: none; }
  .cm-buscar kbd, .cm-exportar kbd { display: none; }
  .cm-movs.dash { padding-left: .75rem; padding-right: .75rem; }
}
/* El header se ajusta al ancho: buscador y chips de sucursal/caja se acortan con … antes de desbordar */
.buscador { min-width: 0; }
.topbar-der { min-width: 0; }
#chip-sucursal, #chip-rol, #chip-caja { min-width: 0; overflow: hidden; }
#chip-sucursal span, #chip-rol span, #chip-caja .txt { overflow: hidden; text-overflow: ellipsis; }
/* Tablet: solo el icono mientras la conexión es buena o regular (no resta espacio a sucursal y caja); con problemas muestra el texto */
@media (max-width: 1279px) { .chip-red:is([data-estado=buena], [data-estado=regular], [data-estado=verificando]) .txt { display: none; } .chip-red:is([data-estado=buena], [data-estado=regular], [data-estado=verificando]) { padding: 0 .5rem; } }
@media (max-width: 639px) { .chip-red .txt { display: none; } .chip-red { padding: 0 .5rem; } .pop-red { position: fixed; left: 16px; right: 16px; top: 60px; width: auto; } }
@media (max-width: 639px) { .cl-pv-envoltura { max-height: none; overflow: visible; } .cl-pv-tabla td.acciones { width: auto; } .cl-pv-tabla .cl-pv-fila-botones { width: 100%; padding-top: .35rem; } .cl-pv-tabla .cl-pv-btn { flex: 1; justify-content: center; } }

/* ───── Celular ───── */
@media (max-width: 639px) {
  .logo-texto, #chip-sucursal span, #chip-rol span, #chip-caja .txt { display: none; }
  .buscador { flex: 0 0 40px; height: 40px; padding: 0; justify-content: center; margin-left: auto; }
  .buscador span, .buscador kbd { display: none; }
  .topbar-der { margin-left: 0; gap: .3rem; }
  .chip { padding: 0 .55rem; height: 36px; }
  .titulo { font-size: 1.5rem; }
  .contenido { padding: .8rem .75rem 1.4rem; }
  .venta-datos { grid-template-columns: 1fr; }
  .total-caja .total-monto { font-size: 1.75rem; }
  .total-caja .btn-primary { min-width: 128px; }
  .total-caja #total-igv { display: none; }

  /* Carrito en tarjetas */
  .items .tabla thead { display: none; }
  .items .tabla, .items .tabla tbody { display: block; }
  .items .tabla tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "prod quitar" "precio desc" "cant subtotal";
    gap: .25rem .6rem; padding: .7rem .8rem; border-top: 1px solid var(--border); background: var(--panel); transition: transform .15s; position: relative; }
  .items .tabla tbody tr:first-child { border-top: 0; }
  .items .tabla tbody tr.por-quitar { background: rgba(255,77,106,.18); }
  .items .tabla tbody tr td { display: block; padding: 0; border: 0; }
  .items .tabla td:nth-child(1) { display: none; }
  .items .tabla td:nth-child(2) { grid-area: prod; }
  .items .tabla td:nth-child(3) { grid-area: cant; width: auto; text-align: left; }
  .items .tabla td:nth-child(4) { grid-area: precio; text-align: left; color: var(--muted); font-size: .82rem; }
  .items .tabla td:nth-child(5) { grid-area: desc; color: var(--green); font-size: .8rem; text-align: right; }
  .items .tabla td:nth-child(5):not(:empty)::before { content: 'Desc. '; color: var(--muted); }
  .items .tabla td:nth-child(6) { grid-area: subtotal; align-self: center; font-size: 1.1rem; }
  .items .tabla td:nth-child(7) { grid-area: quitar; }
  .resultado { grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: .2rem .6rem; padding: .6rem .8rem; }
  .resultado > .foto-prod { grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 44px; }
  .resultado > span:nth-child(3) { grid-column: 2 / -1; grid-row: 1; font-weight: 600; }
  .resultado > span:nth-child(5) { display: none; }
  .items .tabla .foto-prod { width: 56px; height: 56px; border-radius: 8px; }
  .foto-vista { height: min(320px, 40vh); }

  .qr-pago { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .desglose-grupos { grid-template-columns: 1fr; }
  #total-extra { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .cobro-total .total-monto { font-size: 2.4rem; }
  .toasts { left: .75rem; right: .75rem; }
  .toast { min-width: 0; max-width: none; }
}

/* ───── Entrega 2: tablas, panel, caja, listados ───── */
/* Primera columna fija cuando la tabla es más ancha que la pantalla (tablet y computadora) */
.tabla-envoltura.desborda .tabla tbody td:first-child, .tabla-envoltura.desborda .tabla thead th:first-child { position: sticky; left: 0; z-index: 2; }
.tabla-envoltura.desborda .tabla tbody td:first-child { background: var(--panel); box-shadow: 1px 0 0 var(--border); }
.tabla-envoltura.desborda .tabla thead th:first-child { z-index: 3; }
.grid.fija.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.fija.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

@media (max-width: 959px) {
  .paginacion { flex-wrap: wrap; gap: .4rem; }
  .filtros .campo { flex: 1 1 150px; min-width: 0; }
  .lienzo { height: 230px; } .lienzo.alto { height: 260px; }
}

@media (max-width: 639px) {
  /* Tablas en tarjetas */
  .tabla-envoltura:has(.tabla-tarjetas) { overflow: visible; border: 0; }
  table.tabla-tarjetas, table.tabla-tarjetas tbody { display: block; }
  table.tabla-tarjetas thead { display: none; }
  table.tabla-tarjetas tbody tr { display: block; padding: .65rem .85rem; margin-bottom: .55rem; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
  table.tabla-tarjetas tbody tr:hover { background: var(--panel); }
  table.tabla-tarjetas tbody tr td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .2rem 0; border: 0; text-align: right; white-space: normal; min-height: 28px; }
  table.tabla-tarjetas tbody tr td::before { content: attr(data-label); color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-align: left; flex-shrink: 0; max-width: 45%; }
  table.tabla-tarjetas tbody tr td[data-label=""]::before { content: none; }
  table.tabla-tarjetas tbody tr td[data-label=""] { justify-content: flex-end; }
  table.tabla-tarjetas tbody tr td:first-child { font-weight: 700; color: var(--white); font-size: .95rem; padding-bottom: .35rem; margin-bottom: .2rem; border-bottom: 1px solid var(--border); }
  table.tabla-tarjetas tbody tr td:empty, table.tabla-tarjetas tbody tr td.sin-dato { display: none; }
  table.tabla-tarjetas tbody tr td.celda-unica { display: block; text-align: center; }
  table.tabla-tarjetas tbody tr td.celda-unica::before { content: none; }
  table.tabla-tarjetas tbody tr:has(td.celda-unica) { background: transparent; border-style: dashed; }
  table.tabla-tarjetas .acciones { justify-content: flex-end; }

  /* Panel e indicadores */
  .g-6 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; }
  .stat-box { padding: .7rem .75rem; }
  .stat-box .v { font-size: 1.35rem; overflow-wrap: anywhere; }
  .caja-resumen { gap: .55rem; }
  .caja-resumen .stat-box .v { font-size: 1.2rem !important; }
  .panel, .dash { padding: .9rem .85rem; }
  .ruta { display: none; }
  .titulo-fila { align-items: flex-start; }
  .filtros { gap: .55rem; }
  .filtros > .btn-primary, .filtros > button { flex: 1 1 100%; }

  /* Arqueo */
  .arqueo-fila { grid-template-columns: minmax(0,1.1fr) repeat(3, minmax(0,1fr)); gap: .35rem; font-size: .8rem; }
  .arqueo-seccion { padding: .6rem .65rem; }
  .arqueo-total .diferencia { font-size: 1.15rem; }
  .arqueo-totfila > span.texto-suave { visibility: hidden; }   /* el esperado ya se ve en la cabecera de la sección */
}

/* ───── Entrega 3: ajustes de la revisión ───── */
/* Los botones de las ventanas siempre a la vista: quedan fijos abajo aunque el contenido se desplace */
.modal-caja .modal-botones { position: sticky; bottom: -1.2rem; z-index: 2; background: var(--panel); margin-bottom: -1.2rem; padding: .7rem 0 1.2rem; }
/* La barra superior no encoge sus botones */
.topbar > .btn-icono, .topbar .logo, .topbar-der > .btn-icono, .usuario-menu { flex-shrink: 0; }
@media (max-height: 820px) and (min-height: 521px) {
  .modal { padding-top: 4vh; }
  .modal-caja { max-height: 92vh; }
}

/* Celular horizontal: poca altura, se compactan la barra del total y los datos de la venta */
@media (max-width: 959px) and (max-height: 520px) {
  .total-caja { grid-template-areas: "monto btn"; padding: .35rem 1rem calc(.35rem + env(safe-area-inset-bottom)); }
  .total-caja .l, .total-caja .total-det { display: none; }
  .total-caja .total-monto { font-size: 1.5rem; }
  .total-caja .btn-primary { min-height: 44px; }
  .pantalla-venta .contenido { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .venta-datos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .venta-datos > .panel { grid-column: auto; padding: .45rem .7rem !important; }
  .venta-datos .campo { margin: 0 !important; }
  .caja-tecla { padding: .45rem .7rem; min-height: 44px; }
  .pantalla-venta .toasts { bottom: auto; }
}

/* ───── Ventanas a pantalla completa: celular vertical u horizontal (poca altura) ───── */
@media (max-width: 639px), (max-height: 520px) {
  .modal { padding: 0; align-items: stretch; }
  .modal-caja, .modal-caja[style] { width: 100% !important; max-height: none; min-height: 100%; height: 100%; border-radius: 0; border: 0;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
  .modal-botones { position: sticky; bottom: calc(-1rem - env(safe-area-inset-bottom)); margin: auto -1rem calc(-1rem - env(safe-area-inset-bottom)); padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: var(--panel); border-top: 1px solid var(--border); }
  .modal-botones > * { flex: 1; }
  /* La línea de error no se encoge a una sola línea (min-height): con un mensaje largo quedaba tapada por los botones */
  .modal-caja > .error-linea { flex-shrink: 0; }
  #modal-buscar .modal-caja { display: block; }
  .modal-cab { position: sticky; top: -1rem; z-index: 3; margin: -1rem -1rem .6rem; padding: .7rem 1rem; background: var(--panel); border-bottom: 1px solid var(--border); }
  .arqueo-secciones { max-height: none; overflow: visible; }
  #modal-arqueo { padding-top: 0; }
  #modal-arqueo .modal-caja { max-height: none; }
}

/* ───── Pantallas táctiles (tablet o celular) ───── */
@media (hover: none) and (pointer: coarse) {
  .app { --alto-pie: 0px; }
  .barra-atajos, .pistas { display: none; }
  .app kbd { display: none; }
  .app .ayuda-grid kbd, .app .tabla kbd { display: inline-block; }
  input, select, textarea { font-size: 16px; min-height: 44px; }   /* 16 px evita el zoom automático en iPhone */
  .btn-icono { width: 44px; height: 44px; }
  .avatar { width: 40px; height: 40px; }
  .chip { height: 40px; }
  .btn-primary, .btn-outline { min-height: 46px; }
  .btn-chico { min-height: 40px; }
  .caja-tecla { min-height: 56px; }
  .forma { min-height: 64px; font-size: .84rem; }
  .cobro-condicion .forma { min-height: 48px; }
  .opcion-lista { min-height: 52px; }
  .resultado { min-height: 52px; }
  /* Carrito: botones − / + */
  .paso-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg3); color: var(--white); font-size: 1.3rem; font-weight: 700; line-height: 1; touch-action: manipulation; }
  .paso-btn:active { background: var(--blue); }
  .items .tabla td.cant { width: 160px; }
  .items .tabla td.cant input { width: 64px; min-height: 40px; text-align: center; }
  .items .tabla td { padding-top: .65rem; padding-bottom: .65rem; }
  .items [data-quitar], .items .item-acciones [data-desc] { width: 44px; height: 44px; }
  .items .foto-prod { width: 48px; height: 48px; }
  /* Cobro: teclado numérico propio */
  .teclado-num { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-top: .8rem; }
  .teclado-num button { min-height: 54px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg2); color: var(--white);
    font-family: 'Rajdhani', sans-serif; font-size: 1.6rem; font-weight: 700; touch-action: manipulation; }
  .teclado-num button:active { background: var(--blue); border-color: var(--blue-b); }
  .montos-rapidos { flex-wrap: wrap; }
  /* Avisos arriba: abajo taparían el botón Cobrar */
  .toasts, .pantalla-venta .toasts { top: calc(var(--alto-top) + .6rem); bottom: auto; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ───── Mantenedores simples (Productos › Unidades, Configuración › Tipos de lista de precios): pos-mantenedor-lista.js ───── */
.form-mantenedor { width: min(560px, 100%); }
.form-mantenedor .req { color: var(--red, #ff5c6c); font-weight: 700; margin-left: .15rem; }
.mt-obligatorio { margin: -.2rem 0 .5rem; font-size: .78rem; }
.mt-ayuda { margin: .1rem 0 0; font-size: .8rem; }
.mt-fila-eq { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.form-mantenedor .cl-combo-op { grid-template-columns: fit-content(45%) minmax(0, 1fr); }
.mt-color { display: flex; gap: .5rem; align-items: center; }
.mt-color input[type=color] { width: 44px; height: 38px; padding: 2px; flex: none; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); cursor: pointer; }
.mt-color input:not([type=color]) { flex: 1; font-family: ui-monospace, monospace; }
.mt-muestra { display: inline-block; width: 14px; height: 14px; flex: none; border-radius: 4px; border: 1px solid var(--border); vertical-align: -2px; }
.eye-grid .slick-cell .mt-muestra { margin-right: .45rem; }
.eye-grid .slick-cell.acciones .mt-quitar, .cl-tarjeta .mt-quitar { margin-left: .3rem; color: var(--red, #ff5c6c); }
.mt-quitar .ico { width: 16px; height: 16px; }
.mt-fila-clase { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); }
.mt-fila-clase.cp-fila-color { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.mt-fila-pr { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.mt-fila-clase + .mt-ayuda { margin: -.35rem 0 .6rem; }
.mt-desc { resize: vertical; min-height: 4.6rem; line-height: 1.4; overflow-y: auto; }
.mt-desc-cuenta { margin: -.35rem 0 .6rem; text-align: right; }
@media (max-width: 639px) { .mt-fila-eq, .mt-fila-clase, .mt-fila-pr { grid-template-columns: 1fr; } }
/* Productos de una clase o presentación: link, ventana de consulta y panel "Productos afectados" */
.mt-prod-link { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; font-variant-numeric: tabular-nums; }
.mt-prod-link:hover, .mt-prod-link:focus-visible { color: var(--text); }
.mt-prod-caja { width: min(760px, 100%); }
.mt-prod-buscar { width: 100%; margin: 0 0 .4rem; }
.mt-prod-contador { margin: 0 0 .4rem; font-size: .78rem; }
.mt-prod-lista { max-height: min(52vh, 460px); overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.mt-prod-tabla { font-size: .8rem; }
.mt-prod-tabla td, .mt-prod-tabla thead th { padding: .38rem .6rem; }
.mt-prod-tabla tr:first-child td { border-top: 0; }
.mt-prod-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
.mt-prod-cod, .mt-prod-uso { white-space: nowrap; }
.mt-prod-cod { font-family: ui-monospace, monospace; font-size: .76rem; }
.mt-prod-cargando { display: flex; align-items: center; gap: .5rem; padding: 1rem 0; }
.mt-prod-panel { margin: 0 0 .6rem; }
.mt-prod-panel-cuerpo { padding: .5rem .6rem .6rem; }
.mt-prod-panel .mt-prod-lista { max-height: 220px; }
@media (max-width: 639px) {
  .mt-prod-tabla thead { display: none; }
  .mt-prod-tabla, .mt-prod-tabla tbody { display: block; }
  .mt-prod-tabla tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .6rem; padding: .4rem .6rem; border-top: 1px solid var(--border); }
  .mt-prod-tabla tr:first-child { border-top: 0; }
  .mt-prod-tabla td { padding: 0; border: 0; }
  .mt-prod-tabla td:nth-child(2) { grid-column: 1 / -1; grid-row: 1; font-weight: 600; }
  .mt-prod-tabla td:nth-child(3), .mt-prod-tabla td:nth-child(4) { color: var(--muted); font-size: .76rem; }
}

/* ───── Productos › Listas de precios (db/32) ───── */
.lp-tabs { margin-bottom: .6rem; }
.lp-panel[hidden] { display: none; }
.lp-lista { display: flex; align-items: center; gap: .45rem; }
.lp-lista select { flex: 1; min-width: 170px; }
.lp-centro { text-align: center; }
.eye-grid .slick-header-column.lp-centro { text-align: center; }
.lp-no-visible { color: var(--gold); font-weight: 600; }
.lp-sin-listas { margin-top: .4rem; }
.lp-panel .cl-tarjeta .mt-muestra { margin-right: .35rem; }
@media (max-width: 639px) {
  .lp-filtros .lp-campo-lista { flex: 1 1 100%; }
  .lp-lista select { min-width: 0; }
  .lp-tabs .eye-tab { flex: 1; }
}

/* ───── Productos › Productos y precios (db/26) ───── */
.pd-filtros .pd-filtro-q { flex: 1 1 260px; }
.pd-filtros select { min-width: 150px; }
.pd-cab { flex-wrap: wrap; }
.pd-cab .pd-ayuda { font-size: .78rem; }
.eye-grid .slick-cell.pd-cod, .cl-tarjeta .pd-cod { font-family: ui-monospace, monospace; font-size: .78rem; letter-spacing: -.01em; }
.eye-grid .slick-cell.pd-cod:has(.pd-cod-alt) { line-height: 1.15; display: flex; flex-direction: column; justify-content: center; }
.pd-cod-alt { display: block; font-size: .7rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.eye-grid .slick-cell.pd-precio { font-variant-numeric: tabular-nums; }
.pd-sin { display: inline-block; padding: 0 .45rem; border-radius: 999px; font-size: .72rem; font-weight: 600; line-height: 1.5; color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); white-space: nowrap; }
.pd-gratis { color: var(--green); font-weight: 600; font-size: .8rem; }
.pd-tag { display: inline-block; margin-right: .4rem; padding: 0 .4rem; border-radius: 4px; font-size: .68rem; color: var(--muted); border: 1px solid var(--border); vertical-align: 1px; }
.pd-desde { color: var(--muted); font-size: .72rem; margin-left: .3rem; }
.pd-stock-0 { color: var(--red); }
.pd-guardando { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .76rem; }
.pd-guardando .eye-spinner { width: 12px; height: 12px; }
.eye-grid .slick-cell.editable { padding: 0; }
.pd-editor { width: 100%; height: 100%; min-height: 0; border-radius: 0; border: 2px solid var(--blue-b); padding: 0 .5rem; text-align: right; font-variant-numeric: tabular-nums; background: var(--bg2); }
.eye-grid .pd-btn-precio { display: none; }
.pd-btn-menu { min-width: 36px; padding: .2rem .5rem; font-size: 1.1rem; line-height: 1; letter-spacing: .05em; }
.pd-btn-menu[aria-expanded=true] { color: var(--cyan); }
.cl-tarjeta .cl-tarjeta-acciones { gap: .4rem; flex-wrap: wrap; }
.cl-tarjeta .pd-t-precio { font-size: 1rem; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }
.pd-menu { position: fixed; z-index: 120; min-width: 230px; max-width: calc(100vw - 16px); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radio); box-shadow: var(--sombra); padding: .35rem; }
.pd-menu button { display: flex; width: 100%; padding: .55rem .7rem; background: none; border: 0; border-radius: 4px; color: var(--text); font-size: .86rem; text-align: left; cursor: pointer; }
.pd-menu button:hover, .pd-menu button:focus-visible { background: var(--cyan-glow); outline: none; }
.pd-menu button.peligro { color: var(--red); }
.pd-menu button.peligro:first-of-type, .pd-menu button:not(.peligro) + button.peligro { border-top: 1px solid var(--border); border-radius: 0 0 4px 4px; margin-top: .25rem; padding-top: .7rem; }

/* Formulario de producto */
.pd-caja { width: min(940px, 100%); max-height: 92vh; }
@media (min-width: 640px) and (min-height: 521px) {
  .pd-caja .modal-cab { position: sticky; top: -1.2rem; z-index: 3; margin: -1.2rem -1.3rem .5rem; padding: .9rem 1.3rem .7rem; background: var(--panel); border-bottom: 1px solid var(--border); }
}
.pd-aviso { display: flex; align-items: center; gap: .45rem; margin: 0 0 .4rem; font-size: .78rem; color: var(--cyan); cursor: help; }
.pd-aviso .ico { width: 15px; height: 15px; flex: none; }
.pd-aviso b { color: var(--white); }
.pd-obligatorio { margin: 0 0 0 .6rem; font-family: inherit; font-weight: 400; letter-spacing: 0; }
.pd-fila-afecta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pd-seccion { border: 0; margin: 0 0 .6rem; padding: 0; min-width: 0; }
.pd-seccion > legend { font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; color: var(--white); padding: 0; margin: .2rem 0 .45rem; letter-spacing: .02em; }
.pd-fila-prod { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.pd-presentaciones { display: grid; gap: .7rem; }
.pd-pres { border: 1px solid var(--border); border-radius: var(--radio); background: var(--bg2); padding: .65rem .75rem .5rem; }
.pd-pres-nueva { border-style: dashed; }
.pd-leyenda-pres { display: flex; align-items: center; gap: .6rem; width: 100%; }
.pd-leyenda-pres > span { flex: 1; min-width: 0; }
.pd-plegar { font-family: inherit; letter-spacing: 0; }
/* Presentaciones registradas en acordeón: la cabecera resume código, precio por defecto y stock */
.pd-pres-plegable { padding: 0; }
.pd-acordeon > summary { list-style: none; cursor: pointer; margin: 0; padding: .6rem .75rem; border-radius: var(--radio); }
.pd-acordeon > summary::-webkit-details-marker { display: none; }
.pd-acordeon > summary::after { content: ''; flex: none; width: .45rem; height: .45rem; margin: 0 .2rem 0 .1rem; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; }
.pd-acordeon[open] > summary::after { transform: rotate(45deg); }
.pd-acordeon > summary:hover { background: color-mix(in srgb, var(--cyan) 6%, transparent); }
.pd-acordeon > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.pd-acordeon[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pd-pres-cuerpo { padding: .1rem .75rem .5rem; }
.pd-pres-resumen { display: flex; align-items: center; justify-content: flex-end; gap: .35rem 1rem; flex-wrap: wrap; font-size: .8rem; }
.pd-pres-resumen > span { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.pd-res-cod { color: var(--muted); font-variant-numeric: tabular-nums; }
.pd-res-precio b { color: var(--white); font-variant-numeric: tabular-nums; }
.pd-pres-cab { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.pd-pres-et { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.pd-pres-et > span:first-child { flex: 1; }
.pd-pres-et .pd-pres-quitar { width: 30px; height: 30px; margin: -.3rem -.3rem -.3rem 0; }
.pd-pres-nombre { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.pd-pres-nombre b { color: var(--white); }
.pd-pres-elegir { flex: 1; min-width: 0; margin: 0; }
.pd-pres-chip { flex: none; }
.pd-chip { display: inline-block; padding: .05rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; border: 1px solid; }
.pd-chip-ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
.pd-chip-nueva { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.pd-chip-sin { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.pd-pres-quitar { flex: none; }
.pd-pres-datos { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, .7fr) minmax(0, .7fr) auto; gap: 0 .7rem; align-items: end; }
.pd-pres-principal { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .8fr); }
.pd-pres-extra { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .8fr) auto; }
.pd-pres-eqtxt { margin: -.15rem 0 .35rem; font-size: .8rem; color: var(--cyan); font-weight: 600; }
.pd-pres-eqtxt:empty { display: none; }
.pd-mas { margin: 0 0 .4rem; }
.pd-mas > summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--text); padding: .2rem 0; list-style-position: inside; }
.pd-mas > summary .texto-suave { font-weight: 400; font-size: .76rem; margin-left: .3rem; }
.pd-mas[open] > summary { margin-bottom: .35rem; }
.cl-combo-crear { color: var(--cyan); font-weight: 600; }
.cl-combo-crear .cod { color: var(--cyan); font-size: 1rem; }
.pd-pn-caja { width: min(560px, 100%); }
.pd-pn-ayuda { margin: -.3rem 0 .6rem; }
.pd-pres-datos .campo { margin-bottom: .4rem; }
.pd-pres-usos { display: flex; gap: .8rem; padding-bottom: .9rem; }
.pd-check { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; white-space: nowrap; cursor: pointer; }
.pd-check input, .pd-tp-check input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--blue-b); }
.pd-pres-info { margin: -.1rem 0 .45rem; font-size: .78rem; }
.pd-pres-inv { border-top: 1px dashed var(--border); padding-top: .45rem; margin-bottom: .35rem; }
.pd-pres-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; }
.pd-pres-ctl .pd-check:has(input:disabled) { opacity: .55; cursor: default; }
.pd-pres-modo { font-size: .76rem; }
.pd-pres-lote { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 .7rem; margin-top: .45rem; }
.pd-pres-lote .campo { margin-bottom: .3rem; }
.pd-pres-lote-nota { grid-column: 1 / -1; margin: 0 0 .3rem; font-size: .78rem; color: var(--gold); }
.pd-pres-lote[hidden] { display: none; }
.pd-sin-stock { color: var(--muted); }
.pd-precios { border-top: 1px solid var(--border); padding-top: .5rem; }
.pd-sin-precio-fila { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.pd-sin-precio { margin: 0; font-size: .82rem; color: var(--gold); }
.pd-precios-solo { margin: 0 0 .2rem; display: flex; flex-direction: column; gap: .1rem; font-size: .84rem; }
.pd-tabla-precios { display: grid; gap: .35rem; }
.pd-tp-cab, .pd-tp-fila { display: grid; grid-template-columns: minmax(120px, 1.3fr) minmax(90px, 1fr) minmax(90px, 1fr) minmax(80px, .8fr) 72px 84px 36px; gap: .5rem; align-items: center; }
.pd-tp-cab { font-size: .72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.pd-tp-cab span:nth-child(n+2):nth-child(-n+4) { text-align: right; }
.pd-tp-cab span:nth-child(5), .pd-tp-cab span:nth-child(6) { text-align: center; }
.pd-tp-fila label { display: block; margin: 0; min-width: 0; }
.pd-tp-fila select, .pd-tp-fila input:not([type=checkbox]):not([type=radio]) { min-height: 36px; padding: .35rem .5rem; }
.pd-num { text-align: right; font-variant-numeric: tabular-nums; }
.pd-tp-et, .pd-tp-check > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pd-tp-check { display: flex !important; justify-content: center; align-items: center; gap: .35rem; cursor: pointer; }
.pd-tp-acc { display: flex; justify-content: flex-end; }
.pd-tp-quitar { color: var(--red); }
.pd-precios-acc { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .3rem; }
.pd-pie-pres { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .6rem; }
.pd-pie-pres .mt-ayuda { margin: 0; }
.pd-botones { flex-wrap: wrap; }
.pd-botones .pd-copiar { margin-right: auto; }

/* Cambiar precio y copiar precios */
.pd-precio-caja { width: min(460px, 100%); }
.pd-copiar-caja { width: min(760px, 100%); }
.pd-precio-de { margin: 0 0 .7rem; display: flex; flex-direction: column; font-size: .85rem; }
.pd-precio-de b { color: var(--white); }
.pd-precio-de span { color: var(--muted); font-size: .8rem; }
.pd-copiar-vista { margin-top: .4rem; }
.pd-copiar-tabla td.num, .pd-copiar-tabla th.num { text-align: right; white-space: nowrap; }
.pd-copiar-tabla .pd-omitida td { color: var(--muted); }
/* db/72: precio por debajo del mínimo (costo + % de ganancia de la clase + IGV/IVA): aviso en ámbar, no bloquea */
.pd-bajo { display: inline-block; margin-right: .35rem; padding: 0 .4rem; border-radius: 999px; font-size: .68rem; font-weight: 600; line-height: 1.5; color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); white-space: nowrap; vertical-align: middle; }
.pd-res-precio .pd-bajo { margin: 0 0 0 .35rem; }
.pd-precio-bajo { display: inline-flex; align-items: center; gap: .25rem; color: var(--gold); font-weight: 600; }
.pd-precio-bajo .ico { width: 14px; height: 14px; flex: none; }
input.pd-bajo-min, .pd-tp-fila input.pd-bajo-min:not([type=checkbox]):not([type=radio]) { border-color: var(--gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.pd-minimo { margin: .35rem 0 0; font-size: .8rem; color: var(--muted); }
.pd-minimo-aviso { color: var(--gold); }
p.pd-minimo-aviso { margin: .35rem 0 0; font-size: .8rem; }
.pd-copiar-tabla .pd-fila-bajo td { background: color-mix(in srgb, var(--gold) 6%, transparent); }
.pm-caja { width: min(760px, 100%); }
.pm-caja #pm-texto { margin: 0 0 .6rem; }
.pm-caja .num { text-align: right; white-space: nowrap; }

@media (max-width: 1023px) {
  .pd-tp-cab, .pd-tp-fila { grid-template-columns: minmax(110px, 1.2fr) minmax(80px, 1fr) minmax(80px, 1fr) minmax(70px, .8fr) 64px 76px 32px; gap: .4rem; }
}
@media (max-width: 639px) {
  .pd-filtros select { min-width: 0; }
  .pd-filtros > .campo:not(.pd-filtro-q) { flex: 1 1 40%; }
  .pd-fila-prod { grid-template-columns: 1fr; }
  .pd-caja .pd-aviso { font-size: .76rem; }
  .pd-pres { padding: .55rem .6rem .45rem; }
  .pd-pres-plegable { padding: 0; }
  .pd-acordeon > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .6rem; padding: .55rem .6rem; }
  .pd-acordeon > summary::after { grid-column: 2; grid-row: 1; align-self: center; }
  .pd-acordeon .pd-pres-resumen { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: .25rem .9rem; }
  .pd-pres-cuerpo { padding: .1rem .6rem .45rem; }
  .pd-pres-datos, .pd-pres-extra { grid-template-columns: 1fr 1fr; }
  .pd-pres-principal { grid-template-columns: minmax(0, 1fr) 6.5rem; }
  .pd-txt-largo { display: none; }
  .pd-pres-principal > .campo:first-child { grid-column: 1 / -1; }
  .pd-mas > summary .texto-suave { display: none; }
  .pd-obligatorio { display: none; }
  .pd-pres-usos { grid-column: 1 / -1; padding-bottom: .5rem; }
  .pd-pres-modo { flex-basis: 100%; }
  .pd-pres-lote { grid-template-columns: 1fr 1fr; }
  .pd-pres-lote .campo:nth-of-type(1) { grid-column: 1 / -1; }
  .pd-tp-cab { display: none; }
  .pd-tp-fila { grid-template-columns: 1fr 1fr; gap: .35rem .5rem; padding: .5rem 0; border-top: 1px dashed var(--border); }
  .pd-tp-fila:first-of-type { border-top: 0; }
  .pd-tp-fila .pd-tp-lista { grid-column: 1 / -1; }
  .pd-tp-et { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; font-size: .72rem; color: var(--muted); margin-bottom: .1rem; }
  .pd-tp-check { justify-content: flex-start; }
  .pd-tp-check > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: .85rem; color: var(--text); }
  .pd-tp-acc { grid-column: 1 / -1; }
  .pd-botones .pd-copiar { flex: 1 0 100%; margin: 0 0 -.2rem; }
}
/* ───── Botones de fila solo con ícono (grillas y tarjetas): Editar, Eliminar / Quitar (rojo), Recuperar (verde), Precio ───── */
.btn-fila { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0; border-radius: 6px;
  background: transparent; border: 1px solid var(--border); color: var(--cyan); transition: background .15s, border-color .15s; }
.btn-fila .ico { width: 17px; height: 17px; }
.btn-fila:hover, .btn-fila:focus-visible { background: var(--cyan-glow); border-color: var(--cyan); }
.btn-fila.peligro { color: var(--red); }
.btn-fila.peligro:hover, .btn-fila.peligro:focus-visible { background: color-mix(in srgb, var(--red) 14%, transparent); border-color: var(--red); }
.btn-fila.recuperar { color: var(--green); }
.btn-fila.recuperar:hover, .btn-fila.recuperar:focus-visible { background: color-mix(in srgb, var(--green) 14%, transparent); border-color: var(--green); }
.btn-fila + .btn-fila, .btn-fila + .pd-btn-menu { margin-left: .3rem; }
.eye-grid .slick-cell.acciones .btn-fila.mt-quitar, .cl-tarjeta .btn-fila.mt-quitar { margin-left: .3rem; color: var(--red); }
.cl-tarjeta .btn-fila { width: 40px; height: 40px; }
.cl-tarjeta .btn-fila + .btn-fila { margin-left: 0; }
@media (hover: none) and (pointer: coarse) { .btn-fila { width: 40px; height: 40px; } }
/* Fila recién grabada o recuperada */
.eye-grid .slick-cell.eye-resaltado, .cl-tarjeta.eye-resaltado { background: color-mix(in srgb, var(--green) 16%, transparent); transition: background .4s; }
/* Activos | Eliminados (junto al buscador de Clientes y Proveedores) */
.eye-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--panel); min-height: 40px; }
.eye-seg label { display: flex; margin: 0; cursor: pointer; }
.eye-seg input { position: absolute; opacity: 0; pointer-events: none; }
.eye-seg span { display: inline-flex; align-items: center; gap: .35rem; padding: 0 .9rem; font-size: .86rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.eye-seg label + label span { border-left: 1px solid var(--border); }
.eye-seg input:checked + span { background: var(--cyan-glow); color: var(--cyan); }
.eye-seg input:focus-visible + span { outline: 2px solid var(--blue-b); outline-offset: -2px; }
.eye-seg .ico { width: 15px; height: 15px; }
.filtros .eye-seg-campo { flex: 0 0 auto; min-width: 0; }
@media (max-width: 639px) { .filtros .eye-seg-campo { flex: 1 1 100%; } .eye-seg { display: flex; } .eye-seg label { flex: 1; } .eye-seg span { flex: 1; justify-content: center; min-height: 44px; } }
.cl-elim-fecha { font-variant-numeric: tabular-nums; }

/* ───── Inventario › Ingreso por stock inicial (db/33) ───── */
.ii-filtros .ii-filtro-q { flex: 1 1 240px; }
.ii-filtros input[type=date] { min-width: 150px; }
.ii-caja { width: min(980px, 100%); max-height: 92vh; }
.ii-cab { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1.8fr); gap: 0 .8rem; }
.ii-agregar { display: flex; align-items: flex-end; gap: .4rem .9rem; flex-wrap: wrap; }
.ii-buscar { flex: 1 1 320px; margin-bottom: .3rem; }
.ii-csv { display: flex; align-items: center; gap: .3rem .6rem; flex-wrap: wrap; padding-bottom: .55rem; }
.ii-plantillas { display: inline-flex; align-items: center; gap: .1rem; font-size: .82rem; }
.ii-plantillas .btn-texto { color: var(--cyan); padding: .3rem .45rem; }
.ii-items { display: grid; gap: .55rem; margin-top: .4rem; }
.ii-vacio { padding: 1.2rem; border: 1px dashed var(--border); border-radius: var(--radio); }
.ii-vacio[hidden] { display: none; }
.ii-item { border: 1px solid var(--border); border-radius: var(--radio); background: var(--bg2); padding: .55rem .7rem .4rem; transition: background .4s; }
.ii-item.eye-resaltado { background: color-mix(in srgb, var(--green) 14%, var(--bg2)); }
.ii-item-cab { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .35rem; }
.ii-n { flex: none; min-width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--bg3); color: var(--muted); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ii-prod { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; }
.ii-prod b { color: var(--white); }
.ii-prod span { color: var(--text); font-size: .88rem; }
.ii-prod small { flex-basis: 100%; color: var(--muted); font-size: .76rem; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; }
.ii-badge-lote { background: color-mix(in srgb, var(--cyan) 14%, transparent); color: var(--cyan); }
.ii-ya { color: var(--gold); }
.ii-item-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 .7rem; align-items: end; }
.ii-item-datos .campo, .ii-lote .campo { margin-bottom: .35rem; }
.ii-item-datos input[readonly] { background: var(--bg3); color: var(--muted); }
.ii-sub output { display: flex; align-items: center; justify-content: flex-end; min-height: 40px; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }
.ii-lotes { border-top: 1px dashed var(--border); margin-top: .2rem; padding-top: .4rem; }
.ii-lote { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr) auto; gap: 0 .6rem; align-items: end; }
.ii-lote .btn-fila { margin-bottom: .45rem; }
.ii-lote [data-campo=nro] { text-transform: uppercase; }
.ii-lote + .ii-lote .campo > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ii-totales { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 .3rem; font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ii-totales b, .ii-ver-total b { color: var(--white); font-size: 1rem; margin-left: .3rem; }
.ii-totales:empty { display: none; }
.ii-errores { margin: 0 0 .5rem; padding: .5rem .7rem .5rem 1.5rem; max-height: 180px; overflow-y: auto; border: 1px solid color-mix(in srgb, var(--red) 45%, var(--border)); border-radius: var(--radio); background: color-mix(in srgb, var(--red) 6%, transparent); font-size: .82rem; color: var(--text); }
.ii-errores[hidden] { display: none; }
.ii-errores li + li { margin-top: .15rem; }
.ii-errores .btn-texto { min-height: 0; padding: 0; color: var(--text); text-align: left; font-weight: 400; font-size: .82rem; letter-spacing: 0; text-decoration: underline dotted; }
.ii-errores .btn-texto:hover { color: var(--cyan); }
.ii-limpiar { margin-right: auto; color: var(--red); }
.ii-form .modal-botones { flex-wrap: wrap; }
.btn-outline.peligro { color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, var(--border)); }
.btn-outline.peligro:hover { background: color-mix(in srgb, var(--red) 12%, transparent); }
.ii-btn-anular { margin-right: auto; }
.ii-btn-anular[hidden] { display: none; }
.ii-nota { font-size: .8rem; padding: .5rem .7rem; margin: 0 0 .6rem; }
/* Detalle */
.ii-ver-cab { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem .9rem; margin: 0 0 .8rem; font-size: .86rem; }
.ii-ver-cab dt { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.ii-ver-cab dd { margin: .1rem 0 0; color: var(--text); overflow-wrap: anywhere; }
.ii-ver-ancho { grid-column: 1 / -1; }
.ii-ver-anulado dd { color: var(--red); }
.ii-det { border: 1px solid var(--border); border-radius: var(--radio); overflow: hidden; }
.ii-det-cab, .ii-det-item { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 110px 120px 130px; gap: .2rem .7rem; align-items: start; padding: .5rem .75rem; }
.ii-det-cab { background: var(--bg3); font-size: .68rem; color: var(--muted); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ii-det-item { border-top: 1px solid var(--border); font-size: .88rem; }
.ii-det-prod { display: flex; flex-wrap: wrap; gap: .1rem .4rem; align-items: baseline; min-width: 0; }
.ii-det-prod b { color: var(--white); }
.ii-det-prod small { flex-basis: 100%; color: var(--muted); font-size: .75rem; display: flex; flex-wrap: wrap; gap: .2rem .45rem; align-items: center; }
.ii-det-lotes { grid-column: 2 / -1; list-style: none; margin: .1rem 0 0; padding: .35rem 0 0; border-top: 1px dashed var(--border); display: grid; gap: .2rem; font-size: .8rem; }
.ii-det-lotes li { display: flex; flex-wrap: wrap; gap: .1rem 1.4rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ii-det-lotes li > b:first-child { min-width: 9rem; }
.ii-det-lotes li b { color: var(--text); font-weight: 600; }
.ii-ver-total { display: flex; justify-content: space-between; gap: .6rem; margin: .6rem 0 0; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Importación */
.ii-csv-caja { width: min(820px, 100%); max-height: 90vh; }
.ii-csv-resumen { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .7rem; padding: 0; }
.ii-csv-resumen li { border: 1px solid var(--border); border-radius: 999px; padding: .2rem .75rem; font-size: .84rem; background: var(--bg2); }
.ii-csv-resumen li.ok { border-color: color-mix(in srgb, var(--green) 50%, var(--border)); color: var(--green); }
.ii-csv-resumen li.mal { border-color: color-mix(in srgb, var(--red) 50%, var(--border)); color: var(--red); }
.ii-csv-errores { max-height: 42vh; overflow-y: auto; margin: .4rem 0 .6rem; }
.ii-csv-errores td { font-size: .82rem; }
@media (max-width: 1023px) {
  .ii-det-cab, .ii-det-item { grid-template-columns: 2rem minmax(0, 1fr) 96px 104px 116px; }
}
@media (max-width: 639px) {
  .ii-filtros > .campo:not(.ii-filtro-q):not(.eye-seg-campo) { flex: 1 1 40%; }
  .ii-filtros input[type=date] { min-width: 0; }
  .ii-cab { grid-template-columns: 1fr 1fr; }
  .ii-cab .ii-obs { grid-column: 1 / -1; }
  .ii-buscar { flex-basis: 100%; }
  .ii-item { padding: .5rem .55rem .35rem; }
  .ii-item-datos { grid-template-columns: 1fr 1fr; }
  .ii-item-datos .ii-sub { grid-column: 1 / -1; }
  .ii-item-datos .ii-sub { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
  .ii-sub output { min-height: 0; }
  .ii-lote { grid-template-columns: 1fr 1fr; padding: .35rem 0; }
  .ii-lote + .ii-lote { border-top: 1px dotted var(--border); }
  .ii-lote + .ii-lote .campo > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .ii-lote .campo:first-child { grid-column: 1 / -1; }
  .ii-lote .btn-fila { grid-column: 2; justify-self: end; margin: 0 0 .2rem; }
  .ii-ver-cab { grid-template-columns: 1fr 1fr; }
  .ii-det-cab { display: none; }
  .ii-det-item { grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; padding-left: 2.5rem; }
  .ii-det-item > .ii-n { position: absolute; left: .55rem; top: .5rem; }
  .ii-det-prod { grid-column: 1 / -1; }
  .ii-det-item > .num { display: flex; flex-direction: column; text-align: left; white-space: normal; }
  .ii-det-item > .num::before { content: attr(data-et); font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
  .ii-det-lotes { grid-column: 1 / -1; }
  .ii-det-lotes li { gap: .1rem .9rem; }
  .ii-det-lotes li > b:first-child { min-width: 0; flex-basis: 100%; }
  .ii-totales { font-size: .84rem; }
  .ii-limpiar { flex: 1 0 100%; margin: 0 0 -.2rem; }
}

/* ───── Almacén › Transformación de productos (db/76): reutiliza el formulario y el detalle del ingreso por stock inicial (ii-*);
   cada línea es «sale → entra» con la relación de la equivalencia, avisos y lotes. En celular, la flecha gira y los campos se apilan. */
.tr-fecha { display: flex; align-items: center; min-height: 40px; color: var(--text); font-variant-numeric: tabular-nums; }
.tr-cuerpo { display: grid; grid-template-columns: minmax(0, .9fr) auto minmax(0, 1.6fr) minmax(0, .9fr); gap: 0 .6rem; align-items: end; }
.tr-cuerpo .campo { margin-bottom: .35rem; }
.tr-flecha { align-self: end; padding-bottom: .9rem; color: var(--cyan); font-size: 1.15rem; font-weight: 700; line-height: 1; }
.tr-info { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; margin: 0 0 .3rem; font-size: .8rem; }
.tr-info .btn-outline { margin-left: auto; }
.tr-rel { color: var(--cyan); font-weight: 600; font-variant-numeric: tabular-nums; }
.tr-problema, .tr-aviso { margin: .1rem 0 .35rem; padding: .35rem .6rem; border-radius: var(--radio); font-size: .8rem; }
.tr-problema { color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); border: 1px solid color-mix(in srgb, var(--red) 35%, var(--border)); }
.tr-aviso { color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--border)); }
.tr-lotes { border-top: 1px dashed var(--border); margin-top: .2rem; padding: .4rem 0 .15rem; font-size: .82rem; }
.tr-lotes-cab { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .6rem; margin-bottom: .25rem; }
.tr-lotes-cab b { color: var(--text); }
.tr-lotes-cab .btn-texto { margin-left: auto; color: var(--cyan); }
.tr-lotes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tr-lotes ul b { color: var(--text); }
.tr-lotes > .tr-lote-man { display: inline-flex; flex-direction: column; width: min(220px, 48%); margin: 0 .6rem .35rem 0; vertical-align: top; }
.tr-lote-dest { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
.tr-lote-dest [data-campo=loteNro] { text-transform: uppercase; }
.tr-eq-caja { width: min(640px, 100%); }
.tr-eq-fila { display: grid; grid-template-columns: auto minmax(0, 1.4fr) auto minmax(0, .8fr) auto minmax(0, 1.4fr); gap: 0 .5rem; align-items: end; }
.tr-eq-uno, .tr-eq-signo { padding-bottom: 1.35rem; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-eq-uno { color: var(--white); }
.tr-det-item { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto minmax(0, 1fr); gap: .3rem .7rem; align-items: start; padding: .55rem .75rem; }
.tr-det-item + .tr-det-item { border-top: 1px solid var(--border); }
.tr-det-item > .ii-det-prod { grid-column: 2 / -1; }
.tr-det-item > .tr-sale { grid-column: 2; }
.tr-det-item > .tr-flecha { align-self: start; padding: 1.3rem 0 0; }
.tr-det-lado { display: flex; flex-direction: column; gap: .1rem; min-width: 0; font-size: .88rem; }
.tr-det-lado > b { color: var(--white); font-variant-numeric: tabular-nums; }
.tr-det-lado > small { color: var(--muted); font-size: .75rem; }
.tr-det-et { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.tr-sale .tr-det-et { color: var(--red); }
.tr-entra .tr-det-et { color: var(--green); }
.tr-det-lotes { grid-column: auto; margin-top: .3rem; }
.tr-det-lotes li { gap: .1rem .9rem; }
.tr-det-lotes li > b:first-child { min-width: 0; }
.tr-det-lotes-tit { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
@media (max-width: 639px) {
  .tr-cuerpo { grid-template-columns: 1fr 1fr; }
  .tr-cuerpo > .campo:first-child { grid-column: 1 / -1; }
  .tr-cuerpo > .tr-flecha { display: none; }
  .tr-info .btn-outline { margin-left: 0; }
  .tr-lotes > .tr-lote-man { width: 100%; margin-right: 0; }
  .tr-lote-dest { grid-template-columns: 1fr 1fr; }
  .tr-lote-dest .campo:first-child { grid-column: 1 / -1; }
  .tr-eq-fila { grid-template-columns: auto minmax(0, 1fr); }
  .tr-eq-fila > .tr-eq-signo { display: none; }
  .tr-eq-fila > .campo { grid-column: 2; }
  .tr-det-item { grid-template-columns: 2rem minmax(0, 1fr); padding: .5rem .55rem; }
  .tr-det-item > .ii-det-prod, .tr-det-item > .tr-sale, .tr-det-item > .tr-entra { grid-column: 2; }
  .tr-det-item > .tr-flecha { display: none; }
}

/* ───── Almacén › Transferencias (db/86): listado con pestañas Transferencias | Órdenes y formulario de envío (reutiliza ii-* y tr-*) ───── */
.tf-pendientes, .panel-transf { margin-bottom: .6rem; }
.panel-transf a { color: var(--cyan); font-weight: 600; }
.tf-pendientes .btn-texto { color: var(--cyan); font-weight: 600; }
.tf-tabs { overflow-x: auto; scrollbar-width: thin; margin-bottom: .6rem; }
.tf-tabs .eye-tab { white-space: nowrap; }
.tf-tabs .badge { margin-left: .3rem; }
.tf-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .7fr); gap: 0 .8rem; }
.tf-cab .tf-motivo { grid-column: 1 / 3; }
.tf-cab .tf-obs { grid-column: 1 / -1; }
.tf-cab optgroup { color: var(--muted); font-style: normal; }
.tf-recibir { margin: .1rem 0 .6rem; }
.tf-cuerpo { display: flex; flex-wrap: wrap; align-items: end; gap: .2rem .9rem; }
.tf-cuerpo .campo { width: min(180px, 100%); margin-bottom: .35rem; }
.tf-costo { padding-bottom: .9rem; font-size: .8rem; font-variant-numeric: tabular-nums; }
@media (max-width: 639px) {
  .tf-cab { grid-template-columns: 1fr 1fr; }
  .tf-cab .tf-motivo, .tf-cab .tf-obs { grid-column: 1 / -1; }
  .tf-cuerpo .campo { width: 100%; }
  .tf-costo { padding-bottom: .35rem; }
}

/* ───── Compras › Órdenes de compra (db/34): listado, formulario con detalle en SlickGrid y «Sugerir productos» ─────
   Las grillas del formulario y de las sugerencias crecen con la ventana (flex) con un mínimo de 5 filas (--oc-fila la pone el JS:
   38 px con mouse, 48 px táctil); el scroll horizontal queda dentro de la grilla. En celular, tarjetas. */
.oc-filtros select { min-width: 150px; }
.oc-aviso { display: flex; flex-direction: column; gap: .25rem; margin: 0 0 .7rem; padding: .5rem .8rem; }
.oc-aviso[hidden] { display: none; }
.oc-aviso p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; }
.oc-aviso .btn-texto { color: var(--gold); text-decoration: underline; padding: .1rem .2rem; min-height: 0; }
.oc-badge-proceso { background: color-mix(in srgb, var(--cyan) 14%, transparent); color: var(--cyan); }
.btn-fila.oc-autorizar { color: var(--green); }
.btn-fila.oc-autorizar:hover, .btn-fila.oc-autorizar:focus-visible { background: color-mix(in srgb, var(--green) 14%, transparent); border-color: var(--green); }
.oc-bajo { color: var(--gold); font-weight: 700; }
/* db/69: costo estimado con el precio de venta (sin último costo) */
.oc-estimado { display: inline-block; margin-left: .3rem; padding: 0 .35rem; border-radius: 999px; font-size: .72em; font-weight: 600; line-height: 1.5;
  color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); vertical-align: middle; cursor: help; }
.oc-ver-cab .oc-ver-prov { grid-column: span 2; }
.oc-ver-botones { flex-wrap: wrap; }

.oc-caja { width: min(1240px, 100%); height: min(94vh, 1000px); max-height: 94vh; display: flex; flex-direction: column; }
.oc-caja > * { flex-shrink: 0; }
.oc-cab { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 .8rem; }
.oc-cab .oc-prov { grid-column: span 3; }
.oc-cab > label:nth-of-type(1) { grid-column: span 2; }
.oc-cab .oc-obs { grid-column: span 6; }
.oc-cab .campo { margin-bottom: .55rem; }
.oc-barra { display: flex; align-items: flex-end; gap: .4rem .8rem; flex-wrap: wrap; }
.oc-buscar { flex: 1 1 360px; margin-bottom: .45rem; }
.oc-btn-sugerir { margin-bottom: .45rem; white-space: nowrap; }
.oc-detalle { flex: 1 1 0; min-height: calc(40px + 5 * var(--oc-fila, 38px)); display: flex; flex-direction: column; position: relative; }
.oc-det-grid { flex: 1 1 0; height: auto; min-height: calc(38px + 5 * var(--oc-fila, 38px)); }
.oc-det-grid[hidden], .oc-det-vacio[hidden], .oc-det-tarjetas[hidden] { display: none; }
.oc-det-vacio { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0; }
.oc-det-grid:not([hidden]) + .oc-det-tarjetas + .oc-det-vacio:not([hidden]) { position: absolute; inset: 38px 0 0; border: 0; pointer-events: none; }
.oc-det-tarjetas { display: grid; gap: .55rem; }
.oc-ayuda { margin: .35rem 0 .1rem; font-size: .78rem; }
.oc-ayuda:empty { display: none; }
.eye-grid .slick-cell.oc-editable { cursor: text; color: var(--text); background: color-mix(in srgb, var(--cyan) 5%, transparent); }
.eye-grid .slick-cell.oc-editable.active { background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.eye-grid .slick-cell.oc-sub { color: var(--white); font-weight: 700; }
.eye-grid .slick-cell.oc-n { color: var(--muted); }
.oc-falta { color: var(--red); font-weight: 700; }
.oc-editor { font-size: .9rem; }
.oc-form-botones { flex-wrap: wrap; }

.oc-sug-caja { width: min(1180px, 100%); height: min(90vh, 920px); max-height: 92vh; display: flex; flex-direction: column; }
.oc-sug-caja > * { flex-shrink: 0; }
.oc-sug-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 .8rem; }
.oc-sug-filtros [hidden] { display: none !important; }
.oc-sug-filtros .campo { margin-bottom: .5rem; }
.oc-sug-filtros select { min-width: 200px; }
.oc-sug-filtros input[type=number] { width: 120px; }
.oc-sug-q { flex: 1 1 200px; }
.oc-sug-filtros .check { margin-bottom: 1rem; }
.oc-sug-ayuda { margin: 0 0 .45rem; font-size: .8rem; }
.oc-sug-cuerpo { flex: 1 1 0; min-height: calc(40px + 5 * var(--oc-fila, 38px)); position: relative; display: flex; flex-direction: column; }
.oc-sug-grid { flex: 1 1 0; height: auto; min-height: calc(38px + 5 * var(--oc-fila, 38px)); }
.oc-sug-grid[hidden], .oc-sug-tarjetas[hidden] { display: none; }
.eye-grid .slick-cell.oc-sug-celda-sel { justify-content: center; padding: 0; }
.oc-sug-check { width: 18px; height: 18px; min-height: 0; accent-color: var(--blue-b); cursor: pointer; }
.eye-grid .slick-cell.oc-sugerido { color: var(--white); }
.oc-sug-sel { margin-right: auto; align-self: center; font-size: .84rem; }
.oc-sug-tarjetas { display: grid; gap: .45rem; }
.oc-sug-tarjeta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .2rem .65rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--radio); background: var(--bg2); cursor: pointer; }
.oc-sug-tarjeta.ya { opacity: .6; cursor: default; }
.oc-sug-t-prod { min-width: 0; display: flex; flex-wrap: wrap; gap: .1rem .4rem; align-items: baseline; }
.oc-sug-t-prod b { color: var(--white); }
.oc-sug-t-prod small { flex-basis: 100%; color: var(--muted); font-size: .76rem; }
.oc-sug-t-cant { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.oc-sug-t-cant small { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.oc-sug-t-cant b { color: var(--white); font-size: 1rem; }

/* 640–1279: rejilla de 12 columnas para que la cabecera ocupe 2 filas (3 en tableta) sin campos sueltos */
@media (max-width: 1279px) {
  .oc-cab { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .oc-cab > * { grid-column: span 2; }
  .oc-cab .oc-prov { grid-column: span 6; }
  .oc-cab > label:nth-of-type(1), .oc-cab > label:nth-of-type(2) { grid-column: span 3; }
  .oc-cab .oc-obs { grid-column: span 4; }
}
@media (max-width: 1023px) {
  .oc-cab > *, .oc-cab .oc-obs, .oc-cab > label:nth-of-type(2) { grid-column: span 4; }
  .oc-cab .oc-prov, .oc-cab > label:nth-of-type(1) { grid-column: span 6; }
  .oc-ver-cab .oc-ver-prov { grid-column: 1 / -1; }
}
/* Pantallas bajas (1024×768, 1366×768): se compacta el formulario para que el detalle tenga sus 5 filas sin scroll */
@media (min-width: 640px) and (max-height: 820px) {
  .oc-caja { height: 96vh; max-height: 96vh; }
  .oc-caja .modal-cab { margin-bottom: .4rem; }
  .oc-cab .campo { margin-bottom: .35rem; }
  .oc-buscar > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .oc-buscar, .oc-btn-sugerir { margin-bottom: .35rem; }
  .oc-ayuda { display: none; }
  .oc-caja .error-linea:empty { display: none; }
  .oc-caja .modal-botones { margin-top: .4rem; }
}
@media (max-width: 767px) {
  .oc-cab { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-cab > *, .oc-cab .oc-obs, .oc-cab > label:nth-of-type(1), .oc-cab > label:nth-of-type(2) { grid-column: span 1; }
  .oc-cab .oc-prov, .oc-cab .oc-obs { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .oc-filtros > .campo:not(.ii-filtro-q) { flex: 1 1 40%; }
  .oc-filtros select { min-width: 0; }
  .oc-caja, .oc-sug-caja { height: 100%; }
  .oc-detalle, .oc-sug-cuerpo { flex: none; min-height: 0; }
  .oc-det-vacio { flex: none; }
  .oc-btn-sugerir { flex: 1 1 100%; justify-content: center; }
  .oc-buscar { flex-basis: 100%; margin-bottom: .3rem; }
  .oc-sug-filtros > .campo { flex: 1 1 40%; }
  .oc-sug-filtros select, .oc-sug-filtros input[type=number] { min-width: 0; width: 100%; }
  .oc-sug-filtros .check { margin-bottom: .6rem; flex: 1 1 100%; }
  .oc-sug-sel { flex: 1 0 100%; text-align: center; margin: 0 0 -.2rem; }
  .oc-form-botones > .btn-outline:not([data-cerrar]) { flex: 1 1 45%; }
}

/* ───── Compras › Documentos de compra (db/40) ───── */
.dc-comp-tipo { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; border-radius: 4px; background: var(--bg3); color: var(--muted); font-size: .68rem; font-weight: 700; margin-right: .15rem; }
.dc-modo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .2rem 1.1rem; margin-bottom: .45rem; }
.dc-modo-op { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; font-size: .9rem; cursor: pointer; }
.dc-modo-op input { width: 18px; height: 18px; min-height: 0; accent-color: var(--blue-b); }
.dc-orden { flex: 1 1 320px; margin-bottom: 0; }
.dc-orden[hidden] { display: none; }
/* Cabecera: rejilla de 12 columnas, 3 filas en escritorio */
.dc-cab { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 .8rem; }
.dc-cab > * { grid-column: span 2; min-width: 0; }
.dc-cab .campo { margin-bottom: .55rem; }
.dc-cab .dc-prov { grid-column: span 4; }
.dc-cab .dc-obs { grid-column: span 8; }
.dc-cab .dc-igv { grid-column: span 2; align-self: center; margin-bottom: .55rem; }
/* db/70: egreso en caja de la compra */
.dc-cab .dc-egreso { grid-column: span 4; align-self: center; margin-bottom: .55rem; }
.dc-egreso:has(input:disabled) { color: var(--muted); cursor: not-allowed; }
.dc-cab .dc-nro input { text-transform: uppercase; }
.dc-cab .dc-total-comp input { font-weight: 700; }
.dc-cab input[readonly], .dc-cab input:disabled, .dc-cab select:disabled { background: var(--bg3); color: var(--muted); }
.dc-igv[hidden] { display: none; }
.dc-nota-orden { font-size: .8rem; padding: .45rem .7rem; margin: 0 0 .5rem; }
.dc-totales { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: .3rem 1.2rem; margin: .45rem 0 .2rem; font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.dc-totales:empty { display: none; }
.dc-totales b { color: var(--text); margin-left: .25rem; }
.dc-tot-n { margin-right: auto; }
.dc-tot-total b { color: var(--white); font-size: 1.05rem; }
.dc-cuadra { flex-basis: 100%; text-align: right; font-size: .82rem; font-weight: 600; }
.dc-cuadra.ok { color: var(--green); }
.dc-cuadra.mal { color: var(--red); }
.dc-totales-ver { margin-top: .6rem; }
.dc-lotes-btn { min-height: 0; padding: .1rem .2rem; font-weight: 600; letter-spacing: 0; text-align: left; }
.dc-lotes-btn small { color: var(--muted); font-weight: 400; }
.ii-item-datos .dc-lotes-btn { width: 100%; min-height: 40px; justify-content: flex-start; }
.dc-item-datos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dc-lotes-caja { width: min(820px, 100%); max-height: 90vh; }
.dc-lotes { border-top: 0; margin-top: 0; padding-top: 0; display: grid; gap: .1rem; }

@media (max-width: 1279px) {
  .dc-cab .dc-prov { grid-column: span 6; }
  .dc-cab > .dc-tipocomp, .dc-cab > .dc-nro, .dc-cab > .dc-fecha { grid-column: span 2; }
  .dc-cab .dc-obs { grid-column: span 4; }
  .dc-cab .dc-igv { grid-column: span 4; }
  .dc-cab .dc-egreso { grid-column: span 4; }
}
@media (max-width: 1023px) {
  .dc-cab { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dc-cab .dc-prov { grid-column: span 4; }
  .dc-cab .dc-obs { grid-column: 1 / -1; }
  .dc-cab .dc-igv { grid-column: span 2; }
  .dc-cab .dc-egreso { grid-column: span 4; }
}
@media (min-width: 640px) and (max-height: 820px) {
  .dc-cab .campo, .dc-cab .dc-igv, .dc-cab .dc-egreso { margin-bottom: .35rem; }
  .dc-modo { margin-bottom: .25rem; }
  .dc-nota-orden { margin-bottom: .3rem; padding: .3rem .6rem; }
  .dc-cab .oc-tc { margin-top: .1rem; line-height: 1.15; }
  .dc-caja .oc-detalle { min-height: calc(40px + 3 * var(--oc-fila, 38px)); }
  .dc-caja .oc-detalle .oc-det-grid { min-height: calc(38px + 3 * var(--oc-fila, 38px)); }
}
@media (max-width: 767px) {
  .dc-cab { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-cab > *, .dc-cab > .dc-tipocomp, .dc-cab > .dc-nro, .dc-cab > .dc-fecha { grid-column: span 1; }
  .dc-cab .dc-prov, .dc-cab .dc-obs, .dc-cab .dc-igv, .dc-cab .dc-egreso { grid-column: 1 / -1; }
  .dc-item-datos { grid-template-columns: 1fr 1fr; }
  .dc-item-datos .ii-sub { grid-column: auto; }
}
@media (max-width: 639px) {
  .dc-modo-op { flex: 1 1 45%; }
  .dc-orden { flex-basis: 100%; }
  .dc-totales { justify-content: space-between; gap: .2rem .8rem; }
  .dc-tot-n { flex-basis: 100%; }
  .dc-tot-total { flex-basis: 100%; text-align: right; }
}
/* Órdenes de compra: compras registradas de la orden (db/40) */
.oc-compras-tit { margin: 1rem 0 .4rem; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.oc-compras { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radio); overflow: hidden; }
.oc-compras li { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr) 6.5rem minmax(0, .8fr) auto auto; gap: .2rem .8rem; align-items: center; padding: .45rem .75rem; font-size: .86rem; font-variant-numeric: tabular-nums; }
.oc-compras li + li { border-top: 1px solid var(--border); }
.oc-compras li.anulada { opacity: .6; }
.oc-compras li.anulada .oc-compras-total { text-decoration: line-through; }
.oc-compras a { color: var(--cyan); }
.oc-compras-total { color: var(--white); text-align: right; }
@media (max-width: 639px) {
  .oc-compras li { display: flex; flex-wrap: wrap; gap: .1rem .6rem; }
  .oc-compras li > span:not(.badge) { color: var(--muted); font-size: .8rem; }
  .oc-compras-total { margin-left: auto; }
}
/* Facturación electrónica › Comprobantes electrónicos (db/43) */
.ce-resumen { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; }
.ce-resumen:empty { display: none; }
.ce-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .6rem .25rem .3rem; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: .84rem; cursor: pointer; font-variant-numeric: tabular-nums; }
.ce-chip:hover { border-color: var(--cyan); }
.ce-chip.activo { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; }
.ce-chip b { color: var(--white); }
.ce-descargas { display: flex; flex-wrap: wrap; gap: .4rem; }
.ce-descargas a { text-decoration: none; }
.ce-hist-titulo { margin: 1rem 0 .4rem; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ce-hist { border: 1px solid var(--border); border-radius: var(--radio); max-height: 16rem; overflow: auto; }
.ce-hist .tabla-vacia { margin: 0; padding: .6rem .75rem; }
.ce-hist-item { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .2rem .8rem; padding: .45rem .75rem; font-size: .86rem; }
.ce-hist-item + .ce-hist-item { border-top: 1px solid var(--border); }
.ce-hist-item small { display: block; color: var(--muted); font-size: .78rem; }
.ce-hist-resp { overflow-wrap: anywhere; }
.ce-hist-viejo { opacity: .65; }
.ce-tarjeta-resp { overflow-wrap: anywhere; font-size: .84rem; }
@media (max-width: 639px) {
  .ce-hist-item { grid-template-columns: 1fr; }
  .ce-chip { font-size: .8rem; }
}
/* Venta registrada: estado del envío a SUNAT / SII */
.exito-sunat { margin: .3rem auto 0; max-width: 34rem; font-size: .86rem; color: var(--muted); overflow-wrap: anywhere; }
.exito-sunat.enviando::before { content: ''; display: inline-block; width: .7em; height: .7em; margin-right: .4em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.05em; animation: gira .8s linear infinite; }
.exito-sunat.ok { color: var(--green); }
.exito-sunat.error { color: var(--red); }
.exito-sunat.pendiente { color: var(--gold); }
/* Impresión (db/71): formato en Cobrar y los dos botones de Venta registrada */
.cobro-formato { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.cobro-formatos { display: flex; flex: 1; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.cobro-recordar { flex: 1 1 100%; justify-content: flex-end; font-size: .84rem; }
.exito-formatos { display: contents; }
.cobro-formato .texto-suave { font-size: .84rem; white-space: nowrap; }
.cobro-formato .forma { flex: 1; flex-direction: row; justify-content: center; font-size: .86rem; padding: .45rem; }
#modal-exito .modal-botones { flex-wrap: wrap; }
@media (pointer: coarse) { .cobro-formato .forma { min-height: 44px; } }

/* ───── Clases de productos › Carga masiva con plantilla Excel (db/48) ───── */
.ci-caja { position: relative; width: min(980px, 100%); max-height: 90vh; }
.ci-pasos { list-style: none; counter-reset: paso; margin: 0 0 .6rem; padding: 0; display: grid; gap: .6rem; }
.ci-pasos > li { counter-increment: paso; display: grid; grid-template-columns: 1.7rem minmax(0, 1fr) auto; gap: .4rem .7rem; align-items: center; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); }
.ci-pasos > li::before { content: counter(paso); width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--bg3); color: var(--cyan); }
.ci-pasos > li > div { display: grid; gap: .1rem; min-width: 0; }
.ci-pasos > li > div .texto-suave { font-size: .8rem; }
.ci-zona { position: relative; display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .45rem .8rem; border: 1px dashed var(--border); border-radius: 8px; cursor: pointer; color: var(--muted); font-size: .85rem; max-width: 20rem; }
.ci-zona input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.ci-zona span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-zona:hover, .ci-zona:focus-within, .ci-zona-sobre { border-color: var(--cyan); color: var(--cyan); }
.ci-zona-ok { border-style: solid; color: var(--text); }
.ci-carga { border-radius: 10px; }
.ci-resumen { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .6rem; }
.ci-msj { flex: 1 1 100%; margin: 0 0 .2rem; }
.ci-chip { border: 1px solid var(--border); border-radius: 999px; padding: .25rem .8rem; min-height: 32px; font-size: .84rem; background: var(--bg2); color: var(--text); cursor: pointer; }
.ci-chip.ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, var(--border)); }
.ci-chip.mal { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, var(--border)); }
.ci-chip.gris { color: var(--muted); }
.ci-chip[aria-selected="true"] { background: var(--bg3); box-shadow: inset 0 0 0 1px currentColor; }
.ci-tabla-env { max-height: 46vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.ci-tabla { width: 100%; }
.ci-tabla td { font-size: .84rem; }
.ci-tabla .mt-muestra { margin-right: .35rem; }
.ci-tabla td:nth-child(5) { white-space: nowrap; }
.ci-tabla .ci-desc { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-motivo { color: var(--muted); font-size: .8rem; }
.ci-error .ci-motivo { color: var(--red); }
.ci-bajar-err { margin-top: .4rem; }
@media (max-width: 639px) {
  .ci-pasos > li { grid-template-columns: 1.7rem minmax(0, 1fr); }
  .ci-pasos > li > a, .ci-zona { grid-column: 1 / -1; max-width: none; justify-content: center; }
  .ci-tabla-env { max-height: none; }
  table.ci-tabla.tabla-tarjetas tbody tr, table.ci-tabla.tabla-tarjetas tbody tr:hover { background: var(--bg2); }
  table.ci-tabla.tabla-tarjetas tbody tr.ci-error { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); }
  .ci-tabla td:nth-child(5) { white-space: normal; }
  .ci-tabla .ci-desc { max-width: none; white-space: normal; overflow: visible; }
}

/* ───── Productos y precios › Carga masiva con plantilla Excel (db/50) ───── */
.pi-lista { margin: 0; min-width: 12rem; }
.pi-lista select { min-height: 40px; }
/* db/95: carga masiva de imágenes (zip) */
.im-nota { margin: 0 0 .5rem; font-size: .82rem; }
.im-avance { display: flex; align-items: center; gap: .6rem; margin: 0 0 .5rem; font-size: .84rem; }
.im-avance[hidden] { display: none; }
.im-avance progress { flex: 1 1 auto; height: 10px; accent-color: var(--blue-b); }
.im-sinc { margin-right: auto; }
.ci-chip.aviso { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.pi-totales { flex: 1 1 100%; margin: 0 0 .2rem; font-size: .84rem; }
.pi-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.pi-buscar { flex: 1 1 16rem; margin: 0; }
.pi-lista-env { max-height: max(220px, calc(90vh - 490px)); overflow: auto; display: grid; gap: .5rem; padding-right: .15rem; }
.pi-prod { border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); overflow: hidden; }
.pi-prod > header { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .45rem .7rem; background: var(--bg3); }
.pi-prod > header b { overflow-wrap: anywhere; }
.pi-prod > header .texto-suave { font-size: .8rem; margin-left: auto; }
.pi-prod-error { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); }
.pi-prod ul { list-style: none; margin: 0; padding: 0; }
.pi-pres { display: grid; grid-template-columns: 4.2rem minmax(8rem, 1.3fr) minmax(8rem, 1fr) minmax(7rem, .9fr) minmax(9rem, 1.4fr); gap: .3rem .6rem; align-items: start; padding: .4rem .7rem; border-top: 1px solid var(--border); font-size: .84rem; }
.pi-pres > span { min-width: 0; overflow-wrap: anywhere; }
.pi-fila { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.pi-res { display: flex; flex-wrap: wrap; gap: .25rem .4rem; align-items: baseline; }
.pi-error .ci-motivo { color: var(--red); }
.pi-aviso { color: var(--gold); font-size: .8rem; }
.pi-control { display: inline-block; margin-left: .25rem; padding: 0 .4rem; border: 1px solid var(--border); border-radius: 999px; font-size: .72rem; white-space: nowrap; color: var(--muted); }
.pi-mas { margin: .5rem auto 0; display: flex; }
@media (max-width: 639px) {
  .ci-pasos > li > .pi-lista { grid-column: 1 / -1; min-width: 0; width: 100%; }
  .pi-lista-env { max-height: none; }
  .pi-prod > header .texto-suave { margin-left: 0; flex-basis: 100%; }
  .pi-pres { grid-template-columns: minmax(0, 1fr) auto; }
  .pi-nombre { grid-column: 1; grid-row: 1; font-weight: 600; }
  .pi-fila { grid-column: 2; grid-row: 1; }
  .pi-cod, .pi-precio, .pi-res { grid-column: 1 / -1; }
  .pi-errores { width: 100%; justify-content: center; }
}

/* ───────── Configuración › Empresa y sucursales (db/61) ───────── */
.emp-pagina { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(0, 1.35fr); gap: 1rem; align-items: start; }
.emp-derecha { display: grid; gap: 1rem; min-width: 0; }
.emp-bloque { min-width: 0; scroll-margin-top: 80px; }
.emp-bloque h2 { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: 1.05rem; }
.emp-selector { margin: 0; min-width: 14rem; }
.emp-seccion { border: 1px solid var(--border); border-radius: 8px; padding: .6rem .9rem .2rem; margin: 0 0 .9rem; min-width: 0; }
.emp-seccion legend { padding: 0 .35rem; font-weight: 600; font-size: .9rem; }
.emp-seccion legend small { font-weight: 400; }
.emp-seccion input[readonly] { background: var(--bg3); color: var(--muted); cursor: default; }
.emp-seccion .campo small { font-size: .76rem; }
.emp-candado { width: .9em; height: .9em; vertical-align: -.1em; }
#emp-consultar { margin: 0 0 .9rem; }
.emp-datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem .9rem; margin: 0 0 .8rem; font-size: .85rem; }
.emp-datos dt { color: var(--muted); }
.emp-datos dd { margin: 0; overflow-wrap: anywhere; }
.emp-botones { display: flex; justify-content: flex-end; gap: .6rem; }
.emp-actualizado { margin: .4rem 0 0; font-size: .78rem; text-align: right; }
.emp-logo { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.emp-logo-caja { width: 220px; min-height: 80px; display: flex; align-items: center; justify-content: center; padding: .4rem; border: 1px dashed var(--border); border-radius: 6px; background: #fff; }
.emp-logo-caja img { max-width: 100%; max-height: 110px; image-rendering: pixelated; }
.emp-logo-caja .texto-suave { color: #666; }
.emp-logo-botones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.emp-logo-botones .alerta { margin: 0; }
.emp-logo-vista { display: flex; justify-content: center; padding: .6rem; margin-bottom: .8rem; background: #fff; border: 1px solid var(--border); border-radius: 6px; overflow: auto; }
.emp-logo-vista canvas { max-width: 100%; height: auto; image-rendering: pixelated; }
.emp-check { flex-direction: row; align-items: center; gap: .5rem; }
.emp-modal-ancho { width: min(680px, 100%); }
.emp-comparar td { vertical-align: top; overflow-wrap: anywhere; }
.emp-comparar tr.cambia td:last-child { color: var(--green); font-weight: 600; }
.emp-avisos { margin: .7rem 0 0; padding-left: 1.1rem; color: var(--gold); font-size: .84rem; }
.emp-filtros { margin-bottom: .6rem; }
.emp-grid { height: 300px; }
.emp-actual { margin-left: .4rem; }
@media (max-width: 1100px) {
  .emp-pagina { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .emp-logo-caja { width: 100%; }
  .emp-datos { grid-template-columns: minmax(0, 1fr); }
  .emp-datos dd { margin-bottom: .3rem; }
}

/* ───── Ventas › Notas de crédito (db/66): emisión ───── */
.nc-buscar { display: flex; align-items: flex-end; gap: .6rem; }
.nc-buscar .campo { flex: 1; margin-bottom: .6rem; }
.nc-buscar .btn-outline { margin-bottom: .6rem; }
.nc-cab { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 0 .8rem; }
.nc-items { max-height: 42vh; overflow: auto; margin: 0 0 .3rem; }
.nc-items .tabla td, .nc-items .tabla th { padding: .4rem .6rem; }
.nc-num { width: 96px; min-height: 32px; padding: .2rem .4rem; text-align: right; font-variant-numeric: tabular-nums; }
.nc-num[aria-invalid="true"] { border-color: var(--red); }
.nc-und { white-space: nowrap; }
.nc-efectivo { display: flex; align-items: center; gap: .45rem; margin: .7rem 0 .2rem; font-size: .9rem; cursor: pointer; }
@media (max-width: 639px) {
  .nc-cab { grid-template-columns: minmax(0, 1fr); }
  .nc-num { width: 72px; }
}

/* ───────────── Inventario › Kardex (db/63) ───────────── */
.kx-filtros .kx-producto { flex: 1 1 320px; min-width: 240px; }
.kx-filtros .kx-producto > label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .3rem; }
.kx-opciones { display: flex; align-items: flex-end; gap: .9rem; flex-wrap: wrap; }
.kx-opciones .check { min-height: 40px; }
.kx-filtros .kx-lote { min-width: 220px; }
.kx-resultado { position: relative; min-height: 120px; }
.kx-inicio { padding: 1.2rem 0; }
.kx-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: .8rem; }
.kx-titulo { font-family: 'Rajdhani', sans-serif; font-size: 1.25rem; font-weight: 700; margin: 0 0 .15rem; }
.kx-aviso { margin: 0 0 .6rem; }
.kx-totales { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 1rem; }
.kx-totales .stat-box .v { font-size: 1.4rem; }
.kx-contador { margin: 0 0 .45rem; }
.kx-grid { height: max(380px, calc(100dvh - 260px)); }
/* Computadora y tablet: como los demás listados (.eye-listado), la grilla ocupa el alto que queda hasta la barra de atajos;
   cabecera, avisos y totales con su alto natural (mínimo 280 px: en pantallas bajas se permite el scroll de la página). */
@media (min-width: 640px) {
  .kx-resultado { display: flex; flex-direction: column; }
  .kx-resultado > * { flex-shrink: 0; }
  .kx-resultado > #kx-contenido:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
  #kx-contenido > * { flex-shrink: 0; }
  #kx-contenido > .kx-grid { flex: 1 1 0; height: auto; min-height: 280px; }
}
.eye-grid .slick-cell.kx-celda-inicial { background: rgba(0,136,255,.08); }
.eye-grid .slick-cell.kx-ing { color: var(--green); } .eye-grid .slick-cell.kx-sal { color: var(--red); }
.kx-ing { color: var(--green); }
.kx-sal { color: var(--red); }
.kx-marca { margin-left: .35rem; font-size: .62rem; vertical-align: middle; }
.kx-tarjeta { border: 1px solid var(--border); border-radius: 8px; padding: .65rem .8rem; margin-bottom: .55rem; background: var(--panel); }
.kx-tarjeta.kx-inicial { display: flex; justify-content: space-between; background: rgba(0,136,255,.06); }
.kx-t-cab, .kx-t-saldo { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.kx-t-det { font-size: .8rem; margin: .2rem 0 .35rem; overflow-wrap: anywhere; }
.kx-t-saldo span:first-child { color: var(--muted); font-size: .78rem; }
.kx-t-saldo b { margin-right: auto; }
@media (max-width: 1180px) {
  .kx-totales { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .kx-totales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kx-filtros .campo, .kx-filtros .kx-producto, .kx-opciones { flex: 1 1 100%; }
  .kx-filtros .btn-primary { width: 100%; }
  .kx-cab { flex-direction: column; }
}

/* ───── Reportes › Reporte de ventas (db/74) ───── */
.rv-resultado { position: relative; min-height: 160px; }
.rv-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; margin-bottom: .8rem; }
.rv-kpis.rv-kpis-costos { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.rv-kpis:empty { display: none; }
.rv-kpis .stat-box .v { font-size: 1.35rem; overflow-wrap: anywhere; }
.rv-kpis .stat-box .d { font-weight: 500; }
.rv-aviso { margin: 0 0 .6rem; }
.rv-tabs { overflow-x: auto; scrollbar-width: thin; }
.rv-tabs .eye-tab { white-space: nowrap; }
.rv-contador { margin: 0 0 .45rem; }
.rv-grid { height: max(360px, calc(100dvh - 380px)); }
.rv-marca { margin-left: .3rem; font-size: .6rem; vertical-align: middle; }
/* Computadora y tablet: la grilla ocupa el alto que queda, como el Kardex */
@media (min-width: 640px) {
  .rv-resultado { display: flex; flex-direction: column; }
  .rv-resultado > * { flex-shrink: 0; }
  .rv-resultado > .rv-panel { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
  .rv-panel > * { flex-shrink: 0; }
  .rv-panel > .rv-grid { flex: 1 1 0; height: auto; min-height: 280px; }
}
@media (max-width: 1400px) { .rv-kpis.rv-kpis-costos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .rv-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .rv-kpis, .rv-kpis.rv-kpis-costos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .rv-filtros .campo { flex: 1 1 100%; }
  .rv-filtros .btn-primary { width: 100%; }
}
.rv-tarjetas { display: grid; gap: .5rem; }
.rv-tarjeta { border: 1px solid var(--border); border-radius: 8px; padding: .65rem .75rem; background: var(--panel, transparent); }
.rv-tarjeta.rv-total { border-color: var(--blue-b); background: rgba(0,136,255,.06); }
.rv-t-cab { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .35rem; }
.rv-t-cab span { font-size: .78rem; }
.rv-t-dato { display: flex; justify-content: space-between; gap: .6rem; font-size: .86rem; padding: .1rem 0; }
.rv-t-dato span { color: var(--muted); }

/* ───────── Página «En proceso de implementación» (db/75) ───────── */
.pagina-proceso { display: grid; gap: .9rem; max-width: 760px; }
.pagina-proceso p + p { margin-top: .5rem; }
.pagina-proceso-lista { display: grid; gap: .35rem; padding-left: 1.2rem; }
.pagina-proceso .lista-opciones { margin: 0 0 .6rem; }
.pagina-proceso-enlace { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pagina-proceso-enlace .texto-suave { font-size: .8rem; }
.pagina-proceso-botones { justify-content: flex-start; flex-wrap: wrap; }

/* Usuarios y permisos › Usuarios (db/81) */
.us-licencias { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .85rem; color: var(--muted); }
.us-licencias.agotadas { color: var(--gold); }
.us-check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; }
.us-check input, .us-rol input { flex: none; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--blue-b); cursor: pointer; }
.us-admin { align-self: end; min-height: 2.6rem; }
.us-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .4rem .9rem; margin: .4rem 0 .8rem; }
.us-rol { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .5rem; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.us-rol small { grid-column: 2; font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-rol:has(input:checked) { border-color: var(--blue-b); }
.us-empleado { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; margin: .3rem 0 .6rem; font-size: .9rem; }
.us-empleado dt { color: var(--muted); }
.us-empleado dd { margin: 0; }

/* ───── Configuración › Series y numeración (db/83) ───── */
.se-form { width: min(640px, 100%); }
.se-form #se-serie, .se-form #se-nombre { text-transform: uppercase; font-family: ui-monospace, monospace; letter-spacing: .04em; }
.se-form #se-serie[readonly], .se-form #se-digitos[readonly] { opacity: .7; }
.se-mono, .se-proximo { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.se-proximo { display: flex; align-items: center; min-height: 2.6rem; font-size: 1rem; font-weight: 600; }
.se-tipo-fijo { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; margin: .3rem 0 .8rem; font-size: .9rem; }
.se-tipo-fijo dt { color: var(--muted); }
.se-tipo-fijo dd { margin: 0; }
.se-aviso-venta { display: flex; align-items: center; gap: .4rem; margin-bottom: .6rem; }
.se-aviso-venta[hidden] { display: none; }
.se-nota { margin: .5rem 0 0; font-size: .8rem; }
.se-faltantes { width: min(560px, 100%); }
.se-faltantes-lista { display: grid; gap: .3rem; max-height: 50vh; overflow: auto; margin: .4rem 0 .7rem; }
.se-faltante { display: grid; grid-template-columns: auto 4.5rem 1fr; align-items: center; gap: .6rem; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.se-faltante input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--blue-b); }
.se-faltante:has(input:checked) { border-color: var(--blue-b); }
.se-faltante-serie { font-weight: 700; }

/* Configuración › Formatos de impresión (db/85): formulario a la izquierda y vista previa con datos de ejemplo a la derecha */
.fo-form { width: min(1100px, 100%); max-height: 92vh; }
.fo-cuerpo { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 1rem; align-items: start; }
.fo-campos { min-width: 0; }
.fo-campos textarea { resize: vertical; }
.fo-checks { display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem; }
.fo-ayuda { margin: .3rem 0 .5rem; font-size: .8rem; }
.fo-previa { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.fo-previa-cab { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.fo-previa-cab h3 { margin: 0; font-size: .95rem; }
.fo-marco { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: 8px; background: #e9ecef; }
.fo-aviso[hidden] { display: none; }
.fo-hueco { visibility: hidden; }
@media (max-width: 959px) {
  .fo-cuerpo { grid-template-columns: 1fr; }
  .fo-marco { height: 60vh; }
}

/* ───── Inventario › Stock por almacén (db/96) ───── */
.sk-filtros .sk-filtro-q { flex: 1 1 260px; }
.sk-filtros select { min-width: 170px; }
.sk-opciones { display: flex; align-items: flex-end; gap: .9rem; flex-wrap: wrap; }
.sk-opciones .check { min-height: 40px; }
.sk-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sk-kpis.sk-kpis-costos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sk-kpis button.stat-box { cursor: pointer; font: inherit; }
.sk-kpis .stat-box.activo { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; }
.sk-difiere { color: var(--gold); font-weight: 600; }
.sk-transito { color: var(--cyan); font-weight: 600; }
.btn-fila-hueco { display: inline-block; width: 32px; height: 1px; flex: none; }
.btn-fila-hueco + .btn-fila { margin-left: .3rem; }
.cl-tarjeta .btn-fila-hueco { display: none; }
@media (hover: none) and (pointer: coarse) { .btn-fila-hueco { width: 40px; } }
.sk-lotes-caja { width: min(760px, 100%); max-height: 92vh; }
.sk-lotes tfoot td { border-top: 1px solid var(--border); font-weight: 600; }
@media (max-width: 1400px) { .sk-kpis.sk-kpis-costos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .sk-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .sk-kpis, .sk-kpis.sk-kpis-costos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .sk-filtros > .campo, .sk-opciones { flex: 1 1 100%; }
  .sk-filtros select { min-width: 0; }
}