@import url('../fonts/fuentes.css');

/* ChinHaojue · Inventario — tokens, base y clases compartidas.
   Fuente de verdad del diseño: DESIGN.md. Las vistas usan estas clases;
   sus estilos propios van en vendedor.css / inventario.css / admin.css.
   Regla: fuera de este bloque :root no se escriben colores sueltos, solo var(--…). */

/* ═════════════════════════════ Tokens ═════════════════════════════ */
:root {
  /* Color (DESIGN.md) */
  --rojo: #e3202a;
  --rojo-hover: #c8161f;
  --rojo-suave: #fdecec;
  --azul: #1d3b94;
  --azul-hover: #172f78;
  --azul-suave: #eaf0fb;
  --azul-noche: #0f1f52;
  --tinta: #161c2d;
  --gris: #5b647a;
  --linea: #dde2ec;
  --papel: #f4f6fa;
  --blanco: #ffffff;
  --ok: #127a3a;
  --ok-suave: #e6f4ea;
  --aviso: #a85a00;
  --aviso-suave: #fff3e0;
  --error: #c11a22;
  --error-suave: #fdecec;

  /* Derivados (mezclas de la paleta, no colores nuevos) */
  --linea-control: color-mix(in srgb, var(--gris) 42%, var(--blanco));   /* borde de inputs: contraste ≥ 3:1 */
  --azul-suave-hover: color-mix(in srgb, var(--azul) 14%, var(--blanco));
  --aviso-borde: color-mix(in srgb, var(--aviso) 35%, var(--blanco));
  --error-borde: color-mix(in srgb, var(--error) 30%, var(--blanco));
  --ok-borde: color-mix(in srgb, var(--ok) 30%, var(--blanco));
  --velo: color-mix(in srgb, var(--azul-noche) 58%, transparent);       /* fondo detrás de modales */
  --anillo-foco: color-mix(in srgb, var(--azul) 22%, transparent);
  --blanco-80: color-mix(in srgb, var(--blanco) 82%, transparent);
  --blanco-18: color-mix(in srgb, var(--blanco) 18%, transparent);

  /* Tipografía */
  --f-texto: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-titulo: 'Barlow Semi Condensed', 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --t-13: .7647rem;   /* 13px con base 17 */
  --t-14: .8235rem;
  --t-15: .8824rem;
  --t-17: 1rem;
  --t-20: 1.1765rem;
  --t-22: 1.2941rem;
  --t-24: 1.4118rem;
  --t-30: 1.7647rem;
  --t-40: 2.3529rem;
  --t-56: 3.2941rem;

  /* Espacio */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;

  /* Forma */
  --r-control: 10px;
  --r-tarjeta: 14px;
  --r-tile: 20px;
  --r-pill: 999px;
  --sombra-1: 0 1px 2px rgba(15, 31, 82, .06);
  --sombra-2: 0 12px 32px rgba(15, 31, 82, .18);

  /* Toque y layout */
  --toque: 52px;
  --toque-grande: 64px;
  --max: 1180px;
  --gutter: 16px;
  --barra: 56px;
  --dur: 150ms;

  /* Alias de nombres viejos (otras hojas los usan; apuntan a los tokens nuevos) */
  --rojo-osc: var(--rojo-hover);
  --rojo-claro: var(--rojo-suave);
  --azul-osc: var(--azul-hover);
  --azul-oscuro: var(--azul-noche);
  --azul-claro: var(--azul-suave);
  --fondo: var(--papel);
  --texto: var(--tinta);
  --muted: var(--gris);
  --borde: var(--linea-control);
  --ok-claro: var(--ok-suave);
  --aviso-claro: var(--aviso-suave);
  --error-claro: var(--error-suave);
  --foco: var(--azul);
  --sombra: var(--sombra-1);
  --sombra-alta: var(--sombra-2);
  --radio: var(--r-tarjeta);
  --radio-chico: var(--r-control);
}
@media (min-width: 720px) {
  :root { --gutter: 24px; --barra: 64px; }
}

/* ═════════════════════════════ Base ═════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 106.25%;          /* 17px respetando el tamaño que eligió el usuario */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--papel);
}
body {
  margin: 0;
  min-height: 100vh; min-height: 100dvh;
  font-family: var(--f-texto);
  font-size: var(--t-17);
  line-height: 1.45;
  background: var(--papel);
  color: var(--tinta);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.005em;
  color: var(--tinta);
}
p { margin: 0; }
a { color: var(--azul); text-underline-offset: 3px; }
@media (hover: hover) { a:hover { color: var(--azul-hover); } }
strong, b { font-weight: 700; }
small { font-size: var(--t-15); }
[hidden] { display: none !important; }
::selection { background: var(--azul-suave-hover); color: var(--tinta); }

/* Foco visible en todo */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
main:focus, main:focus-visible { outline: none; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.icono { display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 0; }
.icono svg { display: block; }

.noscript { padding: var(--e-5); text-align: center; font-size: var(--t-20); }

/* Números: siempre tabulares */
.num, .tabular, .input-numero { font-variant-numeric: tabular-nums; }

/* ═════════════════════════════ Barra superior ═════════════════════════════ */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--blanco);
  border-bottom: 3px solid var(--rojo);
  padding-top: env(safe-area-inset-top);
}
.topbar-in {
  max-width: var(--max);
  margin: 0 auto;
  min-height: var(--barra);
  padding: 2px max(var(--gutter), env(safe-area-inset-right)) 2px max(var(--gutter), env(safe-area-inset-left));
  display: flex; align-items: center; gap: var(--e-3);
}
.topbar-logo {
  flex: none;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--toque);
  margin-left: -6px;
  padding: 0 6px;
  border: 0; border-radius: var(--r-control);
  background: transparent;
  transition: background-color var(--dur);
}
@media (hover: hover) { .topbar-logo:hover { background: var(--papel); } }
.topbar-isotipo { width: 32px; height: 32px; display: block; flex: none; }
.topbar-wordmark { display: none; height: 26px; width: auto; }
.topbar-titulo {
  flex: 1; min-width: 0;
  margin: 0;
  font-family: var(--f-titulo);
  font-size: var(--t-20); font-weight: 700;
  color: var(--tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-usuario { display: flex; align-items: center; gap: var(--e-2); flex: none; }
.avatar.topbar-avatar { width: 36px; height: 36px; font-size: var(--t-17); }
.topbar-nombre { display: none; flex-direction: column; line-height: 1.15; max-width: 180px; min-width: 0; }
.topbar-nombre-texto { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-rol { font-size: var(--t-14); color: var(--gris); }
.topbar-salir {
  min-height: var(--toque); min-width: var(--toque);
  padding: 0 var(--e-3);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0;
  border-radius: var(--r-control);
  background: transparent; color: var(--gris);
  font-weight: 600;
  transition: background-color var(--dur), color var(--dur);
}
@media (hover: hover) { .topbar-salir:hover { background: var(--azul-suave); color: var(--azul); } }
.topbar-salir-texto { display: none; }

@media (min-width: 720px) {
  .topbar-wordmark { display: block; }
  .topbar-titulo {
    font-size: var(--t-22);
    padding-left: var(--e-4);
    border-left: 1px solid var(--linea);
    margin-left: var(--e-1);
  }
  .topbar-nombre { display: flex; }
  .topbar-usuario { gap: 10px; }
  .topbar-salir { border: 2px solid var(--linea); padding: 0 var(--e-4); margin-left: var(--e-2); }
  @media (hover: hover) { .topbar-salir:hover { border-color: var(--azul); } }
  .topbar-salir-texto { display: inline; }
}

/* ═════════════════════════════ Avatar ═════════════════════════════ */
.avatar {
  flex: none;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--azul-noche); color: var(--blanco);
  font-family: var(--f-titulo);
  font-size: var(--t-20); font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.avatar.rol-admin { background: var(--rojo); }
.avatar.rol-inventario { background: var(--azul); }
.avatar.rol-vendedor { background: var(--azul-noche); }

/* ═════════════════════════════ Contenido ═════════════════════════════ */
.contenido {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--e-4) max(var(--gutter), env(safe-area-inset-right)) var(--e-7) max(var(--gutter), env(safe-area-inset-left));
}
@media (min-width: 720px) { .contenido { padding-top: var(--e-5); } }
.btn.btn-atras {
  align-self: flex-start;
  margin-bottom: var(--e-4);
  padding: 0 var(--e-4) 0 var(--e-3);
  border-color: var(--linea);
  background: var(--blanco);
}
@media (hover: hover) { .btn.btn-atras:hover { border-color: var(--azul); background: var(--azul-suave); } }
.vista { display: flex; flex-direction: column; gap: var(--e-4); }
.vista h2 { font-size: var(--t-24); color: var(--tinta); }
.vista h3 { font-size: var(--t-20); font-weight: 600; }
.titulo-seccion { font-family: var(--f-titulo); font-size: var(--t-20); font-weight: 700; color: var(--azul); margin: 0; }

.pantalla-centro {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e-5); padding: var(--e-5) var(--gutter);
}
.pantalla-centro > .login-logo { width: min(280px, 80vw); }

/* ═════════════════════════════ Contenedores ═════════════════════════════ */
.card {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-1);
  padding: var(--e-4);
  min-width: 0;
}
@media (min-width: 720px) { .card { padding: 20px; } }
.stack { display: flex; flex-direction: column; gap: var(--e-4); }
.stack > * { min-width: 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) clamp(420px, 38vw, 460px); gap: var(--e-5); }
  /* Columna derecha (carrito, lo que llegó) pegada arriba; si es más alta que la pantalla, scrollea adentro */
  .split > :last-child {
    position: sticky; top: calc(var(--barra) + 16px);
    max-height: calc(100vh - var(--barra) - 112px); max-height: calc(100dvh - var(--barra) - 112px); /* cabe entero también antes de bajar (debajo de "← Inicio") */
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
.grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
@media (min-width: 480px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid-2 > *, .grid-3 > * { min-width: 0; }

/* ═════════════════════════════ Botones ═════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--toque);
  padding: 10px 20px;
  border: 2px solid var(--linea-control);
  border-radius: var(--r-control);
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-17); font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color var(--dur), border-color var(--dur), color var(--dur), transform var(--dur);
}
@media (hover: hover) { .btn:hover { background: var(--papel); color: var(--tinta); } }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primario { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }
@media (hover: hover) { .btn-primario:hover { background: var(--rojo-hover); border-color: var(--rojo-hover); color: var(--blanco); } }
/* Deshabilitado: gris plano (el rojo con opacidad se veía rosado, como roto o activo) */
.btn-primario:disabled, .btn-primario[aria-disabled="true"] {
  background: var(--linea); border-color: var(--linea); color: var(--gris); opacity: 1;
}
@media (hover: hover) {
  .btn-primario:disabled:hover, .btn-primario[aria-disabled="true"]:hover {
    background: var(--linea); border-color: var(--linea); color: var(--gris);
  }
}

.btn-secundario { background: var(--blanco); border-color: var(--azul); color: var(--azul); }
@media (hover: hover) { .btn-secundario:hover { background: var(--azul-suave); border-color: var(--azul-hover); color: var(--azul-hover); } }
@media (hover: hover) { .btn-secundario:disabled:hover { background: var(--blanco); } }

.btn-peligro { background: var(--blanco); border-color: var(--error); color: var(--error); }
@media (hover: hover) { .btn-peligro:hover { background: var(--error-suave); color: var(--error); } }

.btn-grande {
  min-height: var(--toque-grande);
  padding: 12px 24px;
  font-family: var(--f-titulo);
  font-size: var(--t-20); font-weight: 700;
  letter-spacing: .005em;
}
.btn-bloque { display: flex; width: 100%; }

/* Sobre rojo el foco es blanco con halo azul */
.btn-primario:focus-visible, .tile-principal:focus-visible {
  outline: 3px solid var(--blanco);
  outline-offset: -5px;
  box-shadow: 0 0 0 3px var(--azul);
}

.btn-texto {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--toque);
  padding: 0 var(--e-2);
  border: 0; border-radius: var(--r-control);
  background: transparent;
  color: var(--azul); font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;
}
@media (hover: hover) { .btn-texto:hover { color: var(--azul-hover); background: var(--azul-suave); } }

/* ═════════════════════════════ Chips, badges, pestañas ═════════════════════════════ */
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--toque);
  padding: 0 18px;
  border: 2px solid var(--linea-control);
  border-radius: var(--r-pill);
  background: var(--blanco);
  color: var(--tinta);
  font-weight: 600;
  white-space: nowrap;
  touch-action: manipulation;
  user-select: none;
  transition: background-color var(--dur), border-color var(--dur), color var(--dur), transform var(--dur);
}
@media (hover: hover) { .chip:hover { border-color: var(--azul); color: var(--azul); } }
.chip:active { transform: scale(.98); }
.chip.activo, .chip[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
@media (hover: hover) { .chip.activo:hover { background: var(--azul-hover); border-color: var(--azul-hover); color: var(--blanco); } }
.chip.chip-rojo.activo { background: var(--rojo-suave); border-color: var(--rojo); color: var(--error); }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--azul-suave); color: var(--azul);
  font-size: var(--t-14); font-weight: 600; line-height: 1.5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; vertical-align: middle;
}
.badge.ok { background: var(--ok-suave); color: var(--ok); }
.badge.aviso { background: var(--aviso-suave); color: var(--aviso); }
.badge.error { background: var(--error-suave); color: var(--error); }
.badge.gris { background: var(--papel); color: var(--gris); }

.tabs {
  display: flex; gap: var(--e-1);
  overflow-x: auto;
  border-bottom: 2px solid var(--linea);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  min-height: 56px;
  padding: 0 20px;
  border: 0; border-bottom: 4px solid transparent;
  border-radius: var(--r-control) var(--r-control) 0 0;
  margin-bottom: -2px;
  background: transparent;
  color: var(--gris);
  font-family: var(--f-titulo);
  font-size: var(--t-20); font-weight: 700;
  white-space: nowrap;
  transition: color var(--dur), background-color var(--dur), border-color var(--dur);
}
@media (hover: hover) { .tab:hover { color: var(--azul); background: var(--azul-suave); } }
.tab.activo, .tab[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--rojo); }
.tab:focus-visible { outline-offset: -3px; }

/* ═════════════════════════════ KPIs ═════════════════════════════ */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
@media (min-width: 720px) {
  .kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e-4); }
}
.kpis.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 559px) {
  .kpis.kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis.kpis-3 > :first-child { grid-column: 1 / -1; }
}
.kpi {
  container-type: inline-size;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-1);
  padding: 14px var(--e-4) var(--e-4);
  min-width: 0;
}
@media (min-width: 720px) { .kpi { padding: var(--e-4) 20px 18px; } }
.kpi-label { font-size: var(--t-15); font-weight: 500; color: var(--gris); }
.kpi-valor {
  font-family: var(--f-titulo);
  font-size: var(--t-30);
  font-size: clamp(1.45rem, 15cqi, 2.3529rem);
  font-weight: 700; line-height: 1.1;
  color: var(--azul-noche);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.kpi-nota { font-size: var(--t-14); color: var(--gris); }
.kpi-cargando {
  display: block;
  width: 70%; max-width: 160px; height: .9em; margin: .12em 0;
  border-radius: 6px;
  background: var(--papel);
  animation: latir 1.2s ease-in-out infinite;
}

/* Monto con "Bs" chico (ui.dinero) */
.dinero { display: inline-flex; align-items: baseline; gap: .2em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dinero-bs { font-size: .58em; font-weight: 600; color: var(--gris); letter-spacing: .01em; }
.dinero-num { font-family: inherit; }

/* ═════════════════════════════ Formularios ═════════════════════════════ */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > label, .campo > .campo-label { font-weight: 600; font-size: var(--t-15); color: var(--tinta); }
.campo input, .campo select, .campo textarea, .input-grande {
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  border: 2px solid var(--linea-control);
  border-radius: var(--r-control);
  background: var(--blanco);
  color: var(--tinta);
  font-size: var(--t-20);
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur), box-shadow var(--dur);
}
input::placeholder, textarea::placeholder { color: var(--gris); opacity: .75; }
.campo input::placeholder, .campo textarea::placeholder, .input-grande::placeholder, .buscador-input::placeholder {
  color: var(--gris); opacity: .8; font-weight: 400;
}
@media (hover: hover) { .campo input:hover, .campo select:hover, .campo textarea:hover, .input-grande:hover { border-color: var(--gris); } }
.campo select {
  padding-right: 48px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--azul) 50%),
    linear-gradient(135deg, var(--azul) 50%, transparent 50%);
  background-position: calc(100% - 24px) 50%, calc(100% - 17px) 50%;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .input-grande:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 4px var(--anillo-foco);
  outline: none;
}
.campo input:disabled, .campo select:disabled, .campo textarea:disabled {
  background: var(--papel); color: var(--gris); border-color: var(--linea);
}
.campo input[type="checkbox"], .campo input[type="radio"] {
  width: 26px; min-height: 26px; height: 26px; padding: 0;
  -webkit-appearance: auto; appearance: auto; accent-color: var(--azul);
}
.campo input[type="date"] { min-width: 0; }
.campo .ayuda, .ayuda { font-size: var(--t-15); color: var(--gris); line-height: 1.35; }
.input-numero { font-variant-numeric: tabular-nums; }

.casilla {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: var(--toque);
  font-weight: 600;
  cursor: pointer;
}
.casilla input { width: 26px; height: 26px; accent-color: var(--azul); flex: none; margin: 0; }

.form-error { margin: 0; color: var(--error); font-weight: 600; }
.form-error:not(:empty) {
  padding: 10px 14px;
  border-radius: var(--r-control);
  background: var(--error-suave);
  border-left: 4px solid var(--error);
}
.form-error:empty { display: none; }

/* ═════════════════════════════ Texto ═════════════════════════════ */
.muted { color: var(--gris); }
.num-grande {
  font-family: var(--f-titulo);
  font-size: var(--t-40); font-weight: 700; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.num-heroe {
  font-family: var(--f-titulo);
  font-size: clamp(2.6rem, 11vw, var(--t-56)); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
  color: var(--tinta);
}
.tachado { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--gris); }
.texto-der { text-align: right; }
.peligro-texto { color: var(--error); }
.ok-texto { color: var(--ok); }
.aviso-texto { color: var(--aviso); }

/* ═════════════════════════════ Listas ═════════════════════════════ */
.lista {
  display: flex; flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}
.lista-item {
  display: flex; align-items: center; gap: var(--e-3);
  width: 100%;
  min-height: 60px;
  padding: 10px var(--e-4);
  border: 0; border-bottom: 1px solid var(--linea);
  background: var(--blanco);
  color: inherit; text-align: left; text-decoration: none;
  font-size: var(--t-17);
  transition: background-color var(--dur);
}
.lista-item:last-child { border-bottom: 0; }
@media (hover: hover) { button.lista-item:hover, a.lista-item:hover, .lista-item[tabindex]:hover { background: var(--azul-suave); } }
button.lista-item:active, a.lista-item:active { background: var(--azul-suave-hover); }
.lista-item[tabindex] { cursor: pointer; }
.lista-item:focus-visible { outline-offset: -3px; }
/* Piezas opcionales de un ítem: título + subtítulo a la izquierda, dato a la derecha */
.lista-item-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lista-item-titulo { font-weight: 600; overflow-wrap: anywhere; }
.lista-item-sub { font-size: var(--t-15); color: var(--gris); overflow-wrap: anywhere; }
.lista-item-der { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.lista-item-num { font-family: var(--f-titulo); font-size: var(--t-20); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ═════════════════════════════ Barra fija al pie (celular) ═════════════════════════════ */
.pie-fijo {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 15;
  padding: var(--e-3) max(var(--gutter), env(safe-area-inset-right)) calc(var(--e-3) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  background: var(--blanco);
  border-top: 1px solid var(--linea);
  box-shadow: var(--sombra-2);
}
.pie-fijo .btn { width: 100%; }
body:has(.pie-fijo) .contenido { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
body:has(.pie-fijo) #toasts { bottom: calc(104px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  .pie-fijo { position: static; padding: 0; background: transparent; border: 0; box-shadow: none; }
  body:has(.pie-fijo) .contenido { padding-bottom: var(--e-7); }
}
@media (min-width: 900px) {
  /* En pantallas largas (Excel, Corregir stock) la acción principal queda a la vista pegada
     abajo, sin tener que bajar hasta el final. Fondo opaco y filete: lo de atrás no se transparenta.
     No aplica al carrito, a la nota de ingreso, a Cobrar (el botón va en su columna) ni a Cierre
     de caja (imprimir va arriba, en la tarjeta de la fecha). */
  .pie-fijo:not(.venta-pie):not(.ingreso-pie):not(.caja-pie) {
    position: sticky; bottom: 0; z-index: 5;
    padding: var(--e-3) 0;
    background: var(--papel);
    border-top: 1px solid var(--linea);
  }
}

/* ═════════════════════════════ Pantalla de éxito ═════════════════════════════ */
.exito {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e-3);
  padding: var(--e-6) var(--e-4);
  text-align: center;
}
.exito > .icono:first-child, .exito-check {
  width: 96px; height: 96px;
  margin-bottom: var(--e-2);
  border-radius: 50%;
  background: var(--ok-suave); color: var(--ok);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok-suave) 50%, transparent);
  display: grid; place-items: center;
  animation: aparecer .28s cubic-bezier(.2, .9, .3, 1.3);
}
.exito > .icono:first-child svg, .exito-check svg { width: 52px; height: 52px; stroke-width: 2.5; }
.exito h2, .exito .exito-titulo { font-size: var(--t-30); margin: 0; color: var(--tinta); }
.exito p { margin: 0; font-size: var(--t-17); max-width: 520px; }
.exito .row { justify-content: center; }
.exito .stack { width: 100%; max-width: 380px; margin-top: var(--e-3); gap: var(--e-3); }
.exito .btn { min-width: 240px; }
@media (max-width: 559px) { .exito .btn { min-width: 0; width: 100%; } }

/* ═════════════════════════════ Estados: cargando, vacío, error ═════════════════════════════ */
.cargando {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e-3);
  padding: var(--e-7) var(--e-4);
  color: var(--gris);
  font-weight: 500;
}
.cargando-inicial { min-height: 100vh; min-height: 100dvh; }
.cargando-isotipo { width: 56px; height: 56px; margin-bottom: var(--e-2); }
.cargando-inicial .spinner { width: 28px; height: 28px; border-width: 3px; }
.spinner {
  width: 40px; height: 40px;
  border: 4px solid var(--azul-suave);
  border-top-color: var(--azul);
  border-radius: 50%;
  animation: girar .8s linear infinite;
}
.vacio {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--e-3);
  padding: var(--e-6) var(--e-4);
  text-align: center; color: var(--gris);
}
.vacio-icono {
  width: 88px; height: 88px;
  margin-bottom: var(--e-1);
  border-radius: 50%;
  background: var(--azul-suave); color: var(--azul);
  display: grid; place-items: center;
}
.vacio p, .vacio-texto { margin: 0; max-width: 440px; font-size: var(--t-17); color: var(--tinta); }
.vacio .btn { margin-top: var(--e-2); }
.error-box {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--e-3);
  padding: var(--e-6) var(--e-4);
  background: var(--blanco);
  border: 1px solid var(--error-borde);
  border-radius: var(--r-tarjeta);
  text-align: center;
}
.error-box-icono {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--error-suave); color: var(--error);
  display: grid; place-items: center;
}
.error-box > .icono { color: var(--error); }
.error-box-texto { margin: 0; font-size: var(--t-20); font-weight: 600; max-width: 460px; color: var(--tinta); }

/* ═════════════════════════════ Login ═════════════════════════════ */
/* Inicio de sesión normal: usuario + contraseña o PIN. En computadora, panel de marca a la
   izquierda y formulario a la derecha; en celular, logo arriba y formulario debajo. */
.login {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--e-5) + env(safe-area-inset-top)) var(--gutter) calc(var(--e-5) + env(safe-area-inset-bottom));
  background: var(--papel);
}
.login-tarjeta {
  width: 100%; max-width: 980px;
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-tile);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}
.login-marca { display: none; }
.login-panel {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--e-5);
  padding: var(--e-6) var(--e-5) var(--e-5);
  min-width: 0;
}
.login-logo { width: min(240px, 70vw); height: auto; display: block; margin: 0 auto; }
.login-form { display: flex; flex-direction: column; gap: var(--e-4); width: 100%; max-width: 400px; margin: 0 auto; }
.login-form-cabeza { display: grid; gap: 2px; }
.login-titulo { font-size: var(--t-30); line-height: 1.1; text-wrap: balance; }
.login-sub { margin: 0; color: var(--gris); font-size: var(--t-17); }
.login-form .campo > label { font-size: var(--t-17); font-weight: 600; }
.campo .login-input { min-height: 56px; font-size: var(--t-20); }
.campo .login-input[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 3px var(--error-suave); }
.login-clave-caja { position: relative; display: flex; align-items: center; }
.campo .login-clave-input { padding-right: 64px; letter-spacing: .04em; }
.login-ver-clave {
  position: absolute; right: 4px;
  width: var(--toque); height: var(--toque);
  border: 0; border-radius: var(--r-control);
  background: transparent; color: var(--gris);
  display: grid; place-items: center;
}
@media (hover: hover) { .login-ver-clave:hover { background: var(--azul-suave); color: var(--azul); } }
.login-ver-clave[aria-pressed="true"] { color: var(--azul); }
.login-recordar {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; cursor: pointer;
  font-size: var(--t-17); color: var(--tinta);
}
.login-recordar input { width: 24px; height: 24px; margin: 0; accent-color: var(--azul); flex: none; }
.login-error { margin: 0; min-height: 1.4em; color: var(--error); font-weight: 600; line-height: 1.35; }
.login-error:empty { min-height: 0; margin-top: calc(-1 * var(--e-4)); }
.login-entrar { margin-top: 2px; }
.login-ayuda { margin: 0; text-align: center; color: var(--gris); font-size: var(--t-15); }

@media (min-width: 880px) {
  .login-tarjeta { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 560px; }
  .login-marca {
    display: flex; flex-direction: column; justify-content: center; gap: var(--e-3);
    padding: var(--e-7, 56px) var(--e-6);
    background: var(--azul);
    color: var(--blanco);
    position: relative;
    border-right: 6px solid var(--rojo);
  }
  .login-marca-isotipo { width: 72px; height: 72px; display: block; border-radius: 16px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); margin-bottom: var(--e-2); }
  .login-marca-logo { width: min(300px, 100%); height: auto; display: block; margin-bottom: var(--e-4); }
  .login-marca-titulo {
    margin: 0;
    font-family: var(--f-titulo); font-weight: 800;
    font-size: var(--t-40); line-height: 1.05;
  }
  .login-marca-texto { margin: 0; font-size: var(--t-20); color: rgba(255, 255, 255, .82); }
  .login-marca-pie {
    position: absolute; left: var(--e-6); bottom: var(--e-5);
    margin: 0; font-size: var(--t-15); color: rgba(255, 255, 255, .7);
  }
  .login-panel { justify-content: center; padding: var(--e-6); }
  /* El logo completo ya está en el panel azul (versión blanca): acá solo el formulario. */
  .login-panel .login-logo { display: none; }
}
@media (max-width: 559px) {
  .login { align-items: flex-start; padding-top: calc(var(--e-4) + env(safe-area-inset-top)); }
  .login-tarjeta { border: 0; box-shadow: none; background: transparent; border-radius: 0; }
  .login-panel { padding: var(--e-3) 0 0; gap: var(--e-5); }
  .login-titulo { font-size: var(--t-24); }
}

/* ═════════════════════════════ Inicio ═════════════════════════════ */
.inicio { gap: 20px; }
.inicio-cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-2) var(--e-4); }
.inicio-cabecera-textos { min-width: 0; }
.inicio-saludo { font-size: var(--t-30); margin: 0; overflow-wrap: anywhere; }
.inicio-sub { color: var(--gris); font-size: var(--t-17); margin-top: 2px; }
.inicio-fecha {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--gris); font-weight: 500;
}
.inicio-fecha .icono { color: var(--azul); }
@media (max-width: 559px) { .inicio-fecha { font-size: var(--t-15); } }

.tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 560px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); } }
@media (min-width: 960px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); } }
.tile {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  min-height: 80px;
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4);
  border: 1px solid var(--linea);
  border-radius: var(--r-tile);
  background: var(--blanco);
  box-shadow: var(--sombra-1);
  color: var(--tinta);
  text-align: left;
  min-width: 0;
  touch-action: manipulation;
  transition: border-color var(--dur), background-color var(--dur), transform var(--dur);
}
@media (hover: hover) { .tile:hover { border-color: var(--azul); background: color-mix(in srgb, var(--azul-suave) 55%, var(--blanco)); } }
.tile:active { transform: scale(.98); }
.tile-icono {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--azul-suave); color: var(--azul);
  display: grid; place-items: center;
  flex: none;
}
.tile-textos { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile-titulo {
  font-family: var(--f-titulo);
  font-size: var(--t-22); font-weight: 700; line-height: 1.15;
  overflow-wrap: anywhere;
}
.tile-ayuda { font-size: var(--t-15); color: var(--gris); line-height: 1.3; }
.tile-flecha { flex: none; color: var(--azul); opacity: .55; transition: opacity var(--dur), transform var(--dur); }
@media (hover: hover) { .tile:hover .tile-flecha { opacity: 1; transform: translateX(2px); } }

.tile-principal {
  grid-column: 1 / -1;
  min-height: 104px;
  padding: var(--e-4) var(--e-3) var(--e-4) 20px;
  background: var(--rojo); border-color: var(--rojo); color: var(--blanco);
  box-shadow: var(--sombra-1);
}
@media (hover: hover) { .tile-principal:hover { background: var(--rojo-hover); border-color: var(--rojo-hover); } }
.tile-principal .tile-icono { width: 64px; height: 64px; border-radius: 16px; background: var(--blanco-18); color: var(--blanco); }
.tile-principal .tile-titulo { font-size: var(--t-30); font-weight: 800; }
.tile-principal .tile-ayuda { color: var(--blanco-80); font-size: var(--t-17); }
.tile-principal .tile-flecha { color: var(--blanco); opacity: .9; }
@media (max-width: 419px) {
  /* "Llegó mercadería" entra en una línea en un celular de 360–390px */
  .tile-principal { gap: var(--e-3); }
  .tile-principal .tile-icono { width: 56px; height: 56px; }
  .tile-principal .tile-titulo { font-size: clamp(var(--t-24), 7.2vw, var(--t-30)); }
}

@media (min-width: 960px) {
  /* Tiles verticales en escritorio; el principal sigue horizontal y a todo el ancho */
  .tile:not(.tile-principal) {
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: var(--e-3);
    min-height: 150px;
    padding: 20px;
  }
  .tile:not(.tile-principal) .tile-flecha { position: absolute; top: 20px; right: 16px; }
  .tile-principal { min-height: 128px; padding: var(--e-5) var(--e-5) var(--e-5) 28px; gap: 20px; }
  .tile-principal .tile-icono { width: 72px; height: 72px; border-radius: var(--r-tile); }
  .tile-principal .tile-titulo { font-size: var(--t-40); }
}

/* Admin (más de 6 tiles): tiles horizontales de 80px también en escritorio, en 3 columnas.
   Los 11 entran en ~4 renglones y "Nueva venta" queda a la vista sin bajar. */
@media (min-width: 960px) {
  .inicio-compacto { gap: var(--e-3); }
  .inicio-compacto .tile:not(.tile-principal) {
    flex-direction: row; align-items: center;
    gap: 14px;
    min-height: 80px;
    padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4);
  }
  .inicio-compacto .tile:not(.tile-principal) .tile-flecha { position: static; }
  .inicio-compacto .tile:not(.tile-principal) .tile-titulo { font-size: var(--t-20); }
  .inicio-compacto .tile:not(.tile-principal) .tile-ayuda {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .inicio-compacto .tile-principal { min-height: 112px; padding-top: var(--e-4); padding-bottom: var(--e-4); }
  .inicio-compacto .tile-principal .tile-icono { width: 64px; height: 64px; }
}

.inicio-resumen { gap: var(--e-3); }
.kpi-principal .kpi-valor { color: var(--azul-noche); }
.inicio-alerta {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 64px;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--aviso-borde);
  border-left: 5px solid var(--aviso);
  border-radius: var(--r-tarjeta);
  background: var(--aviso-suave);
  color: var(--aviso);
  text-align: left;
  transition: background-color var(--dur), transform var(--dur);
}
@media (hover: hover) { .inicio-alerta:hover { background: color-mix(in srgb, var(--aviso) 8%, var(--aviso-suave)); } }
.inicio-alerta:active { transform: scale(.99); }
.inicio-alerta-icono { flex: none; color: var(--aviso); display: grid; place-items: center; }
.inicio-alerta-texto .inicio-alerta-negativos { color: var(--error); font-weight: 700; }
.inicio-alerta-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--tinta); }
.inicio-alerta-texto strong { font-weight: 700; }
.inicio-alerta-texto span { color: var(--gris); font-size: var(--t-15); }
.inicio-alerta-ver {
  flex: none;
  display: inline-flex; align-items: center; gap: 2px;
  font-weight: 700; color: var(--aviso);
}
.inicio-ok {
  display: flex; align-items: center; gap: var(--e-2);
  min-height: 52px;
  padding: 10px var(--e-4);
  border: 1px solid var(--ok-borde);
  border-radius: var(--r-tarjeta);
  background: var(--ok-suave);
  margin: 0; font-weight: 600;
}
.inicio-aviso-error {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--error-borde);
  border-radius: var(--r-tarjeta);
  background: var(--error-suave);
  color: var(--error);
}
.inicio-aviso-error-texto { flex: 1 1 200px; color: var(--tinta); font-weight: 600; }

/* ═════════════════════════════ Toasts ═════════════════════════════ */
#toasts {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 100;
  width: min(calc(100vw - 32px), 440px);
  display: flex; flex-direction: column; gap: var(--e-2);
  pointer-events: none;
}
@media (min-width: 900px) {
  #toasts, body:has(.pie-fijo) #toasts {
    left: auto; right: 24px; bottom: auto;
    top: calc(var(--barra) + 16px);
    transform: none;
    width: 400px;
  }
}
.toast {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 56px;
  padding: 12px var(--e-4) 12px var(--e-3);
  border-radius: var(--r-tarjeta);
  background: var(--tinta); color: var(--blanco);
  font-weight: 600;
  box-shadow: var(--sombra-2);
  pointer-events: auto;
  cursor: pointer;
  animation: subir .2s ease-out;
  transition: opacity .2s, transform .2s;
}
.toast-icono {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ok); color: var(--blanco);
}
.toast-icono svg { stroke-width: 2.5; }
.toast-error .toast-icono { background: var(--rojo); }
.toast-aviso .toast-icono { background: var(--aviso); }
.toast.saliendo { opacity: 0; transform: translateY(8px); }
.toast-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
@media (min-width: 900px) {
  .toast { animation-name: bajar; }
  .toast.saliendo { transform: translateX(12px); }
}

/* ═════════════════════════════ Modales ═════════════════════════════ */
body.con-modal { overflow: hidden; }
.modal-fondo {
  position: fixed; inset: 0;
  z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--velo);
  animation: fundido .15s ease-out;
}
/* Celular: hoja inferior a ancho completo */
.modal {
  position: relative;
  width: 100%;
  max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column;
  background: var(--blanco);
  border-radius: var(--r-tile) var(--r-tile) 0 0;
  box-shadow: var(--sombra-2);
  animation: hoja .22s cubic-bezier(.2, .8, .2, 1);
}
.modal-agarre {
  display: block; flex: none;
  width: 44px; height: 5px;
  margin: 8px auto 0;
  border-radius: var(--r-pill);
  background: var(--linea);
}
@media (min-width: 560px) {
  .modal-fondo { align-items: center; padding: var(--e-5); }
  .modal {
    max-width: 560px;
    max-height: 88vh; max-height: 88dvh;
    border-radius: var(--r-tile);
    animation: emerger .18s ease-out;
  }
  .modal-agarre { display: none; }
}
.modal-cabecera {
  display: flex; align-items: center; gap: var(--e-2);
  padding: 6px 8px 6px 20px;
  border-bottom: 1px solid var(--linea);
}
@media (min-width: 560px) { .modal-cabecera { padding: 10px 10px 10px var(--e-5); } }
.modal-cabecera h2 { flex: 1; margin: 0; font-size: var(--t-24); min-width: 0; overflow-wrap: anywhere; }
.modal-cerrar {
  width: var(--toque); height: var(--toque);
  border: 0; border-radius: var(--r-control);
  background: transparent; color: var(--gris);
  display: grid; place-items: center;
  flex: none;
  transition: background-color var(--dur), color var(--dur);
}
.modal-cerrar:focus-visible { outline-offset: -3px; } /* el borde del modal recortaba el anillo */
.modal:focus { outline: none; }
@media (hover: hover) { .modal-cerrar:hover { background: var(--papel); color: var(--tinta); } }
.modal-cuerpo {
  flex: 1; overflow-y: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@media (min-width: 560px) { .modal-cuerpo { padding: 20px var(--e-5) var(--e-5); } }
.modal-mensaje { margin: 0; font-size: var(--t-20); line-height: 1.4; }
.modal-acciones {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: var(--e-3) 20px calc(var(--e-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea);
  background: var(--blanco);
  border-radius: 0 0 var(--r-tile) var(--r-tile);
}
@media (max-width: 559px) { .modal-acciones { border-radius: 0; } }
@media (min-width: 560px) { .modal-acciones { padding: var(--e-4) var(--e-5); } }
.modal-acciones .btn { flex: 1 1 140px; min-height: 56px; }

/* ═════════════════════════════ Buscador de productos ═════════════════════════════ */
.buscador { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.buscador-caja { position: relative; display: flex; align-items: center; }
.buscador-caja > .icono { position: absolute; left: 18px; color: var(--azul); pointer-events: none; }
.buscador-input {
  width: 100%;
  min-height: 60px;
  padding: 12px 58px 12px 54px;
  border: 2px solid var(--linea-control);
  border-radius: var(--r-control);
  background: var(--blanco);
  color: var(--tinta);
  font-size: var(--t-20);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur), box-shadow var(--dur);
}
@media (hover: hover) { .buscador-input:hover { border-color: var(--gris); } }
.buscador-input:focus { border-color: var(--azul); box-shadow: 0 0 0 4px var(--anillo-foco); outline: none; }
.buscador-input::-webkit-search-cancel-button { display: none; }
.buscador-limpiar {
  position: absolute; right: 4px;
  width: var(--toque); height: var(--toque);
  border: 0; border-radius: var(--r-control);
  background: transparent; color: var(--gris);
  display: grid; place-items: center;
}
@media (hover: hover) { .buscador-limpiar:hover { background: var(--papel); color: var(--tinta); } }
.buscador-estado { font-size: var(--t-15); padding: 0 var(--e-1); color: var(--gris); }
.buscador-estado:empty { display: none; }
.buscador-resultados {
  display: flex; flex-direction: column;
  max-height: min(60vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-1);
}
.buscador-resultados:empty { display: none; }
.buscador-item { min-height: 64px; padding: 10px 14px 10px var(--e-4); }
.buscador-item.activo { background: var(--azul-suave); box-shadow: inset 4px 0 0 var(--azul); }
.buscador-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.buscador-nombre { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.buscador-meta { font-size: var(--t-15); color: var(--gris); overflow-wrap: anywhere; }
.buscador-datos { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.buscador-precio {
  font-family: var(--f-titulo);
  font-size: var(--t-20); font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--tinta);
}
.buscador-stock { white-space: nowrap; }
.buscador-agregar {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--azul-suave); color: var(--azul);
  display: grid; place-items: center;
  transition: background-color var(--dur), color var(--dur);
}
.buscador-agregar svg { stroke-width: 2.5; }
@media (hover: hover) { .buscador-item:hover .buscador-agregar { background: var(--azul); color: var(--blanco); } }
.buscador-item.activo .buscador-agregar, .buscador-item:active .buscador-agregar { background: var(--azul); color: var(--blanco); }
.buscador-crear { color: var(--azul); min-height: 64px; }
.buscador-crear .buscador-nombre { color: var(--azul); font-weight: 700; }
.buscador-crear-icono {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--azul-suave); color: var(--azul);
  display: grid; place-items: center;
}
.buscador-error { margin: 0; padding: 14px var(--e-4); }

/* ═════════════════════════════ Contador ═════════════════════════════ */
.contador {
  display: inline-flex; align-items: stretch;
  border: 2px solid var(--linea-control);
  border-radius: var(--r-control);
  background: var(--blanco);
  overflow: hidden;
  flex: none;
}
.contador-btn {
  width: var(--toque); min-height: var(--toque);
  border: 0;
  background: var(--azul-suave); color: var(--azul);
  display: grid; place-items: center;
  touch-action: manipulation;
  transition: background-color var(--dur);
}
@media (hover: hover) { .contador-btn:hover { background: var(--azul-suave-hover); } }
.contador-btn:active { background: var(--azul-suave-hover); }
.contador-btn:disabled { color: var(--gris); background: var(--papel); opacity: .6; cursor: not-allowed; }
.contador-num, .contador-input {
  width: 60px; min-height: var(--toque);
  border: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--f-titulo);
  font-size: var(--t-24); font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.contador-num { cursor: text; }
.contador-input { padding: 0 4px; box-shadow: inset 0 0 0 2px var(--azul); }
.contador :focus-visible { outline-offset: -3px; }

/* ═════════════════════════════ Tablas ═════════════════════════════ */
.tabla-wrap {
  width: 100%;
  overflow-x: auto;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-1);
  -webkit-overflow-scrolling: touch;
}
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-15); }
.tabla th {
  padding: 12px 14px;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
  color: var(--gris);
  font-size: var(--t-14); font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.tabla td { padding: 10px 14px; height: 52px; border-top: 1px solid var(--linea); vertical-align: middle; }
.tabla tbody tr:first-child td { border-top: 0; }
.tabla .texto-der { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 559px) {
  /* Celdas más justas en celular: el texto (nombre del producto) gana ancho y no queda en 4 renglones */
  .tabla th, .tabla td { padding-left: 10px; padding-right: 10px; }
  .tabla th:first-child, .tabla td:first-child { padding-left: 14px; }
  .tabla th:last-child, .tabla td:last-child { padding-right: 14px; }
}
.tabla tr.fila-tocable { cursor: pointer; }
.tabla tr.fila-tocable td { height: var(--toque); transition: background-color var(--dur); }
@media (hover: hover) { .tabla tr.fila-tocable:hover td { background: var(--azul-suave); } }
.tabla tr.fila-tocable:focus-visible { outline: 3px solid var(--azul); outline-offset: -3px; }
.tabla .tabla-vacia { padding: var(--e-6) var(--e-4); text-align: center; color: var(--gris); }
@media (min-width: 720px) { .tabla { font-size: var(--t-17); } }

/* ═════════════════════════════ Gráfico de barras ═════════════════════════════ */
.grafico { position: relative; margin: 0; padding: 24px 0 0; min-width: 0; }
.grafico-vacio { padding: var(--e-5); text-align: center; color: var(--gris); }
.grafico-eje { position: absolute; top: 0; left: 0; font-size: var(--t-13); color: var(--gris); font-variant-numeric: tabular-nums; }
.grafico-barras {
  display: flex; align-items: flex-end;
  gap: clamp(2px, 1%, 8px);
  border-bottom: 2px solid var(--linea);
  background-image: linear-gradient(to bottom, var(--linea) 1px, transparent 1px);
  background-size: 100% 25%;
}
.grafico-col {
  flex: 1 1 0; min-width: 0;
  height: 100%;
  display: flex; align-items: flex-end;
  cursor: pointer;
}
.grafico-barra {
  width: 100%;
  background: var(--azul);
  border-radius: 5px 5px 0 0;
  transition: background-color var(--dur);
}
@media (hover: hover) { .grafico-col:hover .grafico-barra { background: var(--azul-hover); } }
.grafico-col.ultimo .grafico-barra { background: var(--rojo); }
@media (hover: hover) { .grafico-col.ultimo:hover .grafico-barra { background: var(--rojo-hover); } }
.grafico-etiquetas {
  display: flex;
  gap: clamp(2px, 1%, 8px);
  margin-top: 6px;
}
.grafico-etiquetas span {
  flex: 1 1 0; min-width: 0;
  font-size: var(--t-13); color: var(--gris);
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: visible;
}
.grafico-etiquetas span.oculta { visibility: hidden; }
.grafico-tip {
  position: absolute; top: 0;
  z-index: 2;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px;
  border-radius: var(--r-control);
  background: var(--tinta); color: var(--blanco);
  font-size: var(--t-15);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--sombra-2);
  pointer-events: none;
  white-space: nowrap;
}
.grafico-tip strong { font-weight: 600; }
.grafico-tip-detalle { opacity: .8; font-size: var(--t-14); }

/* ═════════════════════════════ Selector de fechas ═════════════════════════════ */
.selector-fechas { display: flex; flex-direction: column; gap: 10px; }
.selector-fechas-chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
@media (max-width: 559px) {
  /* En celular, 2 filas de 3: todas las opciones (y la elegida) a la vista, sin deslizar */
  .selector-fechas-chips {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible; margin: 0; padding: 0;
  }
  .selector-fechas-chips .chip {
    min-width: 0; padding: 0 var(--e-1);
    font-size: var(--t-15); line-height: 1.15;
    white-space: normal; text-align: center;
  }
  .selector-fechas-chips .chip .icono { display: none; }
}
.selector-fechas-panel {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3);
  padding: var(--e-3);
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  background: var(--blanco);
}
.selector-fechas-rango { margin: 0; font-weight: 600; color: var(--gris); font-variant-numeric: tabular-nums; }

/* ═════════════════════════════ Formulario de producto ═════════════════════════════ */
.form-producto { gap: var(--e-4); }

/* ═════════════════════════════ Animaciones ═════════════════════════════ */
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes vibrar {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-7px); }
  80% { transform: translateX(7px); }
}
@keyframes subir { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bajar { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hoja { from { transform: translateY(100%); } to { transform: none; } }
@keyframes emerger { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fundido { from { opacity: 0; } to { opacity: 1; } }
@keyframes aparecer { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes latir { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .btn:active, .chip:active, .tile:active, .inicio-alerta:active { transform: none; }
@media (hover: hover) { .tile:hover .tile-flecha { transform: none; } }
  .spinner { animation: girar 1.5s linear infinite !important; }
}

/* ═════════════════════════════ Impresión ═════════════════════════════ */
#print-area { display: none; }

@media print {
  @page { margin: 12mm; }
  html, body { background: var(--blanco) !important; color: var(--tinta); font-family: var(--f-texto); font-size: 11pt; }
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block !important; }
  #print-area * { color: var(--tinta); box-shadow: none !important; }
  #print-area h1, #print-area h2, #print-area h3 { margin: 0 0 6px; font-family: var(--f-titulo); }
  #print-area p { margin: 0 0 4px; }
  #print-area img { max-width: 240px; height: 56px; width: auto; }
  #print-area table { width: 100%; border-collapse: collapse; margin: 8px 0; }
  #print-area th, #print-area td { padding: 4px 6px; border-bottom: 1px solid var(--linea-control); text-align: left; vertical-align: top; }
  #print-area th { border-bottom: 1.5px solid var(--tinta); font-weight: 600; }
  #print-area .texto-der, #print-area .der { text-align: right; font-variant-numeric: tabular-nums; }
  #print-area .total { font-family: var(--f-titulo); font-size: 15pt; font-weight: 700; }
  #print-area .print-centro { text-align: center; }
  #print-area .print-firma { margin-top: 48px; display: flex; gap: 48px; }
  #print-area .print-firma > div { flex: 1; border-top: 1px solid var(--tinta); padding-top: 4px; text-align: center; }
  #print-area tr, #print-area img { page-break-inside: avoid; break-inside: avoid; }
}