@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;600;700&family=Karla:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   Almacén del Barrio — sistema de diseño de ESTA demo (tokens + componentes)
   Identidad: ladrillo / pizarra / crema. Zilla Slab + Karla + IBM Plex Mono.
   Modo claro único, sin dark mode.
   ========================================================================== */

:root {
  /* ---- Marca ---- */
  --ladrillo: #A63A28;
  --ladrillo-osc: #7E2B1E;
  --ladrillo-cla: #C2543F;
  --ladrillo-suave: #F8EAE5;
  --ladrillo-suave-2: #FCF3F0;

  --pizarra: #22333F;
  --pizarra-osc: #18262F;
  --pizarra-cla: #2F4553;
  --pizarra-linea: #33495A;

  /* ---- Superficies y texto ---- */
  --crema: #F7F1E6;
  --crema-2: #FDFAF3;
  --crema-3: #FBF6EC;
  --blanco: #FFFFFF;
  --tinta: #26211C;
  --tinta-2: #6E655B;
  --tinta-3: #675D52;
  --linea: #E5DCCD;
  --linea-2: #F0E9DB;

  /* ---- Semánticos por MEDIO DE PAGO (mismos colores en toda la app) ---- */
  --pago-efectivo: #2E7D4F;
  --pago-efectivo-bg: #E6F1EA;
  --pago-tarjeta: #1A5FA8;
  --pago-tarjeta-bg: #E7EFF8;
  --pago-debito: #0E7490;
  --pago-debito-bg: #E1F1F5;
  --pago-transferencia: #6D4FA1;
  --pago-transferencia-bg: #EFEAF7;
  --pago-qr: #B07818;
  --pago-qr-bg: #FBF1DE;
  --pago-mixto-bg: #EFEBE3;

  /* ---- Estado ---- */
  --exito: #2E7D4F;
  --exito-bg: #E6F1EA;
  --exito-linea: #C9E0D3;
  --error: #C0392B;
  --error-osc: #99291D;
  --error-bg: #FBEAE7;
  --error-linea: #F1D2CB;
  --aviso: #B07818;
  --aviso-txt: #8A5D12;
  --aviso-bg: #FBF1DE;
  --aviso-linea: #EEDFBE;
  --info: #1A5FA8;
  --info-bg: #E7EFF8;

  /* ---- Semáforo de stock ---- */
  --stock-ok: #2E7D4F;
  --stock-ok-bg: #E6F1EA;
  --stock-medio: #B07818;
  --stock-medio-bg: #FBF1DE;
  --stock-bajo: #C0392B;
  --stock-bajo-bg: #FBEAE7;

  /* ---- Radios ---- */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* ---- Sombras: tintadas con pizarra, nunca negro puro ---- */
  --sombra-1: 0 1px 2px rgba(34, 51, 63, .07), 0 1px 1px rgba(34, 51, 63, .04);
  --sombra-2: 0 2px 6px rgba(34, 51, 63, .08), 0 6px 16px rgba(34, 51, 63, .06);
  --sombra-3: 0 8px 24px rgba(34, 51, 63, .11), 0 2px 6px rgba(34, 51, 63, .06);
  --sombra-4: 0 20px 52px rgba(24, 38, 47, .22), 0 4px 12px rgba(24, 38, 47, .12);
  --sombra-int: inset 0 1px 0 rgba(255, 255, 255, .55);

  /* ---- Espaciado ---- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-7: 32px;
  --e-8: 40px;

  /* ---- Movimiento ---- */
  --t-rapida: 120ms cubic-bezier(.4, 0, .2, 1);
  --t: 165ms cubic-bezier(.4, 0, .2, 1);
  --t-lenta: 240ms cubic-bezier(.22, .8, .3, 1);

  /* ---- Tipografía ---- */
  --f-ui: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-titulo: 'Zilla Slab', Georgia, 'Times New Roman', serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Roboto Mono', monospace;

  /* ---- Medidas de layout ---- */
  --side-w: 236px;
  --carrito-w: 384px;
  --ticket-w: 300px;
}

/* ============================ Reset moderno ============================== */

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

html { -webkit-text-size-adjust: 100%; height: 100%; }

body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

body {
  min-height: 100%;
  margin: 0;
  font-family: var(--f-ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: var(--ladrillo); text-decoration: none; }
a:hover { text-decoration: underline; }

table { border-collapse: collapse; width: 100%; }

hr { border: 0; border-top: 1px solid var(--linea); margin: var(--e-5) 0; }

::selection { background: var(--ladrillo-suave); color: var(--ladrillo-osc); }

/* Los number del POS sin flechitas: el teclado numérico es el que manda */
input[type='number'] { -moz-appearance: textfield; }
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ============================= Tipografía =============================== */

h1, .t-h1 { font-family: var(--f-titulo); font-weight: 700; font-size: 27px; line-height: 1.16; letter-spacing: -.012em; }
h2, .t-h2 { font-family: var(--f-titulo); font-weight: 600; font-size: 21px; line-height: 1.22; letter-spacing: -.008em; }
h3, .t-h3 { font-family: var(--f-titulo); font-weight: 600; font-size: 17px; line-height: 1.3; }
h4, .t-h4 { font-family: var(--f-ui); font-weight: 700; font-size: 14.5px; line-height: 1.35; }

.t-titulo { font-family: var(--f-titulo); font-weight: 600; letter-spacing: -.008em; }

.t-etiqueta {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.t-sec { color: var(--tinta-2); }
.t-terc { color: var(--tinta-3); }
.t-chico { font-size: 13px; }
.t-mini { font-size: 12px; }
.t-mono { font-family: var(--f-mono); font-size: .92em; letter-spacing: .01em; }
.t-fuerte { font-weight: 700; }

/* Todo número de plata es tabular: las columnas quedan alineadas siempre */
.precio, .money, .num, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.precio-grande {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}

.precio-xl {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.precio-unidad { font-size: .72em; font-weight: 600; color: var(--tinta-2); }

/* Código de barras siempre en mono */
.codigo {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}

/* ============================== Botones ================================= */

.btn {
  --btn-bg: var(--blanco);
  --btn-fg: var(--tinta);
  --btn-bd: var(--linea);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-ui);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .005em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--sombra-1);
  transition: background var(--t), border-color var(--t), color var(--t),
              box-shadow var(--t), transform var(--t-rapida);
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--sombra-2); }
.btn:active { transform: translateY(0); box-shadow: var(--sombra-1); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primario {
  --btn-bg: var(--ladrillo);
  --btn-fg: #FFF6F3;
  --btn-bd: var(--ladrillo);
}
.btn--primario:hover { --btn-bg: var(--ladrillo-osc); --btn-bd: var(--ladrillo-osc); }

.btn--secundario {
  --btn-bg: var(--blanco);
  --btn-fg: var(--pizarra);
  --btn-bd: var(--linea);
}
.btn--secundario:hover { --btn-bg: var(--crema-2); --btn-bd: #D5C9B4; }

.btn--oscuro {
  --btn-bg: var(--pizarra);
  --btn-fg: #EFF3F5;
  --btn-bd: var(--pizarra);
}
.btn--oscuro:hover { --btn-bg: var(--pizarra-osc); --btn-bd: var(--pizarra-osc); }

.btn--peligro {
  --btn-bg: var(--error);
  --btn-fg: #fff;
  --btn-bd: var(--error);
}
.btn--peligro:hover { --btn-bg: var(--error-osc); --btn-bd: var(--error-osc); }

.btn--fantasma {
  --btn-bg: transparent;
  --btn-fg: var(--tinta-2);
  --btn-bd: transparent;
  box-shadow: none;
}
.btn--fantasma:hover {
  --btn-bg: var(--ladrillo-suave);
  --btn-fg: var(--ladrillo-osc);
  box-shadow: none;
  transform: none;
}

/* Cobrar: la única acción verde de la app (plata que entra) */
.btn--cobrar {
  --btn-bg: var(--pago-efectivo);
  --btn-fg: #fff;
  --btn-bd: var(--pago-efectivo);
}
.btn--cobrar:hover { --btn-bg: #266742; --btn-bd: #266742; }

.btn--ambar {
  --btn-bg: #96650F;
  --btn-fg: #fff;
  --btn-bd: #96650F;
}
.btn--ambar:hover { --btn-bg: #7D540C; --btn-bd: #7D540C; }

.btn--sm { min-height: 33px; padding: 0 12px; font-size: 13px; border-radius: var(--r-xs); }
.btn--sm svg { width: 15px; height: 15px; }
.btn--lg { min-height: 52px; padding: 0 26px; font-size: 16px; border-radius: var(--r-md); }
.btn--xl {
  min-height: 66px;
  padding: 0 28px;
  font-size: 19px;
  border-radius: var(--r-md);
  letter-spacing: .01em;
}
.btn--bloque { display: flex; width: 100%; }

.btn[disabled], .btn.is-deshabilitado, .btn[aria-disabled='true'] {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: saturate(.65);
}

.btn--cargando { pointer-events: none; position: relative; color: transparent !important; }
.btn--cargando::after {
  content: '';
  position: absolute;
  width: 17px; height: 17px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ab-girar .7s linear infinite;
}
.btn--secundario.btn--cargando::after,
.btn--fantasma.btn--cargando::after { border-color: rgba(38, 33, 28, .2); border-top-color: var(--tinta); }

@keyframes ab-girar { to { transform: rotate(360deg); } }

/* Botón icónico cuadrado */
.btn-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  color: var(--tinta-2);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.btn-icono:hover { background: var(--ladrillo-suave); color: var(--ladrillo-osc); }
.btn-icono svg { width: 19px; height: 19px; }
.btn-icono--peligro:hover { background: var(--error-bg); color: var(--error); }

/* Acceso rápido del dashboard: botón grande con ícono arriba */
.btn-acceso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 118px;
  padding: 16px 17px;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: var(--blanco);
  color: var(--tinta);
  text-align: left;
  box-shadow: var(--sombra-1);
  transition: transform var(--t-rapida), box-shadow var(--t), border-color var(--t);
}
.btn-acceso:hover { transform: translateY(-2px); box-shadow: var(--sombra-3); border-color: #D9CDB8; }
.btn-acceso__ico {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--ladrillo-suave);
  color: var(--ladrillo);
}
.btn-acceso__ico svg { width: 21px; height: 21px; }
.btn-acceso__txt { font-family: var(--f-titulo); font-weight: 600; font-size: 16px; line-height: 1.2; }
.btn-acceso--fuerte { background: var(--ladrillo); border-color: var(--ladrillo); color: #FFF6F3; }
.btn-acceso--fuerte .btn-acceso__ico { background: rgba(255, 255, 255, .16); color: #fff; }

/* =============================== Badges ================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 23px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--linea-2);
  color: var(--tinta-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge--sin-punto::before { display: none; }

/* Medios de pago: mismo color en badges, tarjetas, tablas y gráficos */
.badge--efectivo { background: var(--pago-efectivo-bg); color: var(--pago-efectivo); }
.badge--tarjeta { background: var(--pago-tarjeta-bg); color: var(--pago-tarjeta); }
.badge--debito { background: var(--pago-debito-bg); color: var(--pago-debito); }
.badge--transferencia { background: var(--pago-transferencia-bg); color: var(--pago-transferencia); }
.badge--qr { background: var(--pago-qr-bg); color: var(--pago-qr); }
.badge--mixto { background: var(--pago-mixto-bg); color: #5C5347; }
.badge--mixto::before { background: linear-gradient(90deg, var(--pago-efectivo) 50%, var(--pago-qr) 50%); }

.badge--ok { background: var(--exito-bg); color: var(--exito); }
.badge--aviso { background: var(--aviso-bg); color: var(--aviso-txt); }
.badge--error { background: var(--error-bg); color: var(--error); }
.badge--marca { background: var(--ladrillo-suave); color: var(--ladrillo-osc); }
.badge--neutro { background: var(--linea-2); color: var(--tinta-2); }

.badge--solido { background: var(--ladrillo); color: #fff; }
.badge--solido::before { display: none; }

.badge--contador {
  min-width: 21px; height: 21px;
  padding: 0 7px;
  justify-content: center;
  background: var(--ladrillo);
  color: #fff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.badge--contador::before { display: none; }

/* "+1" del código alternativo, "× kg" del pesable */
.tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  background: var(--linea-2);
  color: var(--tinta-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.tag--kg { background: var(--ladrillo-suave); color: var(--ladrillo-osc); }
.tag--alt { font-family: var(--f-mono); letter-spacing: 0; }

/* ================================ Chips ================================= */

.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 6px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chips--envuelve { flex-wrap: wrap; overflow: visible; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--linea);
  border-radius: var(--r-pill);
  background: var(--blanco);
  color: var(--tinta-2);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
}
.chip:hover { background: var(--ladrillo-suave-2); border-color: #E4CCC4; color: var(--ladrillo-osc); }

.chip.is-activo {
  background: var(--pizarra);
  border-color: var(--pizarra);
  color: #fff;
  box-shadow: var(--sombra-2);
}

.chip__ico { font-size: 15px; line-height: 1; }

.chip__contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--linea-2);
  color: var(--tinta-2);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.chip.is-activo .chip__contador { background: rgba(255, 255, 255, .18); color: #fff; }

/* Segmentado (Hoy / Esta semana / Este mes) */
.segmentado {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--crema-3);
  gap: 2px;
}
.segmentado__op {
  padding: 6px 14px;
  border-radius: var(--r-xs);
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta-2);
  transition: background var(--t), color var(--t), box-shadow var(--t);
}
.segmentado__op:hover { color: var(--tinta); }
.segmentado__op.is-activo { background: var(--blanco); color: var(--pizarra); box-shadow: var(--sombra-1); }

/* ============================== Formularios ============================= */

.campo { display: block; margin-bottom: var(--e-4); }

.campo__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--tinta-2);
}
.campo__label .req { color: var(--error); }

.input, .textarea, .select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--blanco);
  color: var(--tinta);
  font-size: 15px;
  box-shadow: var(--sombra-1);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}

.input::placeholder, .textarea::placeholder { color: var(--tinta-3); }
.input:hover, .textarea:hover, .select:hover { border-color: #D5C9B4; }

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--ladrillo);
  box-shadow: 0 0 0 3px rgba(166, 58, 40, .17);
}

.textarea { min-height: 84px; resize: vertical; line-height: 1.5; }

.select {
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E655B' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

.input--mono { font-family: var(--f-mono); letter-spacing: .02em; }
.input--num { text-align: right; font-variant-numeric: tabular-nums; }
.input--lg { min-height: 52px; font-size: 17px; }

/* Input gigante del modal de peso / "paga con" */
.input--gigante {
  min-height: 74px;
  padding: 8px 16px;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -.02em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.campo__ayuda { margin-top: 5px; font-size: 12.5px; color: var(--tinta-3); }

.campo.is-error .input,
.campo.is-error .textarea,
.campo.is-error .select { border-color: var(--error); background: #FFFCFB; }
.campo.is-error .campo__ayuda { color: var(--error); font-weight: 600; }

.campo--fila { display: flex; gap: var(--e-3); }
.campo--fila > * { flex: 1; }

/* Prefijo $ pegado al input */
.input-money { position: relative; }
.input-money .input { padding-left: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.input-money::before {
  content: '$';
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--tinta-3);
  font-weight: 700;
  pointer-events: none;
}

/* Buscador con lupa */
.buscador { position: relative; }
.buscador .input { padding-left: 40px; }
.buscador__ico {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  color: var(--tinta-3);
  pointer-events: none;
}
.buscador__estado {
  position: absolute;
  right: 11px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pago-efectivo);
  pointer-events: none;
}
.buscador__estado::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: ab-latido 1.8s ease-in-out infinite;
}
@keyframes ab-latido { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Edición inline de la tabla de productos */
.inline-edit {
  width: 100%;
  min-width: 74px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.inline-edit:hover { background: var(--crema-3); border-color: var(--linea); }
.inline-edit:focus {
  outline: none;
  background: var(--blanco);
  border-color: var(--ladrillo);
  box-shadow: 0 0 0 3px rgba(166, 58, 40, .15);
}
.inline-edit.is-guardado { animation: ab-flash-ok 900ms ease; }
.inline-edit.is-invalido { animation: ab-sacudir 320ms ease; border-color: var(--error); }

@keyframes ab-flash-ok {
  0% { background: var(--exito-bg); border-color: var(--exito-linea); }
  100% { background: transparent; border-color: transparent; }
}
@keyframes ab-sacudir {
  10%, 90% { transform: translateX(-2px); }
  30%, 70% { transform: translateX(3px); }
  50% { transform: translateX(-3px); }
}

/* Switch */
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__pista {
  width: 42px; height: 24px;
  border-radius: var(--r-pill);
  background: #D8CDBA;
  position: relative;
  flex: none;
  transition: background var(--t);
}
.switch__pista::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sombra-1);
  transition: transform var(--t);
}
.switch input:checked + .switch__pista { background: var(--ladrillo); }
.switch input:checked + .switch__pista::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__pista { outline: 2px solid var(--ladrillo); outline-offset: 2px; }
.switch__txt { font-size: 13px; font-weight: 600; color: var(--tinta-2); }

/* =============================== Stepper ================================ */

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--blanco);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  user-select: none;
}
.stepper__btn {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  color: var(--pizarra);
  font-size: 18px;
  line-height: 1;
  transition: background var(--t), color var(--t);
}
.stepper__btn:hover { background: var(--ladrillo-suave); color: var(--ladrillo-osc); }
.stepper__btn:active { background: #F0DBD4; }
.stepper__btn[disabled] { color: var(--tinta-3); opacity: .5; cursor: not-allowed; background: transparent; }
.stepper__btn svg { width: 15px; height: 15px; }
.stepper__valor {
  min-width: 42px;
  padding: 0 4px;
  align-self: stretch;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--linea-2);
  border-right: 1px solid var(--linea-2);
}
.stepper--sm .stepper__btn { width: 28px; height: 28px; }
.stepper--sm .stepper__valor { min-width: 34px; font-size: 13.5px; }
.stepper--lg .stepper__btn { width: 44px; height: 44px; font-size: 20px; }
.stepper--lg .stepper__valor { min-width: 56px; font-size: 17px; }

/* ================================ Cards ================================= */

.card {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--t), border-color var(--t), transform var(--t-rapida);
}
.card--clic { cursor: pointer; }
.card--clic:hover { box-shadow: var(--sombra-3); border-color: #D9CDB8; transform: translateY(-2px); }
.card--plana { box-shadow: none; }

.card__cabecera {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 13px 17px;
  border-bottom: 1px solid var(--linea-2);
}
.card__cuerpo { padding: 17px; }
.card__pie {
  padding: 13px 17px;
  border-top: 1px solid var(--linea-2);
  background: var(--crema-3);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* KPI del dashboard */
.kpi {
  position: relative;
  padding: 16px 17px 15px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}
.kpi::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--kpi-color, var(--ladrillo));
}
.kpi__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.kpi__valor {
  margin-top: 6px;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: -.018em;
  font-variant-numeric: tabular-nums;
}
.kpi__pie { margin-top: 4px; font-size: 12.5px; color: var(--tinta-3); }

.seccion { margin-bottom: var(--e-7); }
.seccion__titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
}

/* ==================== Tablas densas (estilo POS) ======================== */

.tabla-wrap {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: auto;
  box-shadow: var(--sombra-1);
}

.tabla { width: 100%; font-size: 14px; }

.tabla thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 9px 13px;
  background: var(--crema-3);
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--tinta-2);
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}

.tabla tbody td {
  padding: 9px 13px;
  border-bottom: 1px solid var(--linea-2);
  vertical-align: middle;
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background var(--t); }
.tabla tbody tr:hover { background: var(--crema-3); }

.tabla .num, .tabla .der { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .cen { text-align: center; }
.tabla__total td { font-weight: 700; background: var(--crema-3); border-top: 1px solid var(--linea); }

/* Fila desplegable del historial de ventas */
.tabla tr.is-abierta { background: var(--ladrillo-suave-2); }
.tabla tr.fila-detalle td { padding: 0; background: var(--crema-2); border-bottom: 1px solid var(--linea); }
.tabla tr.fila-detalle .detalle { padding: 14px 16px; }

.tabla--densa tbody td { padding: 7px 12px; }
.tabla--clic tbody tr { cursor: pointer; }

/* ===================== Tile con inicial (fallback de foto) ============== */

.tile-inicial {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
  border-radius: var(--r-sm);
  background: var(--tile-bg, var(--ladrillo-suave));
  color: var(--tile-fg, var(--ladrillo-osc));
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.6em;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  user-select: none;
}
.tile-inicial--sm { width: 40px; font-size: 17px; }
.tile-inicial--md { width: 56px; font-size: 23px; }
.tile-inicial--xs { width: 32px; font-size: 14px; border-radius: var(--r-xs); }

/* Variantes suaves por categoría (se aplican con clase o con --tile-bg) */
.tile-inicial--verde { --tile-bg: var(--pago-efectivo-bg); --tile-fg: #23603D; }
.tile-inicial--azul { --tile-bg: var(--pago-tarjeta-bg); --tile-fg: #14497F; }
.tile-inicial--cian { --tile-bg: var(--pago-debito-bg); --tile-fg: #0B5A70; }
.tile-inicial--violeta { --tile-bg: var(--pago-transferencia-bg); --tile-fg: #543D80; }
.tile-inicial--ambar { --tile-bg: var(--pago-qr-bg); --tile-fg: #8A5D12; }
.tile-inicial--pizarra { --tile-bg: #E4E9EC; --tile-fg: var(--pizarra); }

/* Foto de producto */
.foto-prod {
  object-fit: cover;
  background: var(--crema);
  border-radius: var(--r-sm);
}

/* ========================= Semáforo de stock ============================ */

.sem {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--sem-fg, var(--stock-ok));
  white-space: nowrap;
}
.sem__punto {
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px var(--sem-halo, transparent);
}
.sem__unidad { font-weight: 600; font-size: 12.5px; color: var(--tinta-3); }
.sem__alerta { width: 14px; height: 14px; flex: none; }

.sem--verde { --sem-fg: var(--stock-ok); --sem-halo: var(--stock-ok-bg); }
.sem--ambar { --sem-fg: var(--stock-medio); --sem-halo: var(--stock-medio-bg); }
.sem--rojo { --sem-fg: var(--stock-bajo); --sem-halo: var(--stock-bajo-bg); }
.sem--cero { --sem-fg: var(--stock-bajo); --sem-halo: var(--stock-bajo-bg); }
.sem--cero .sem__punto { animation: ab-latido 1.6s ease-in-out infinite; }

/* Píldora de stock sobre la card del POS */
.stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--stock-ok-bg);
  color: var(--stock-ok);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stock-pill--ambar { background: var(--stock-medio-bg); color: var(--aviso-txt); }
.stock-pill--rojo { background: var(--stock-bajo-bg); color: var(--stock-bajo); }

/* =================== Medios de pago: tarjetas y botones ================= */

/* La clase de medio define --medio-color y --medio-bg; todo lo demás la usa */
.medio--efectivo { --medio-color: var(--pago-efectivo); --medio-bg: var(--pago-efectivo-bg); }
.medio--tarjeta { --medio-color: var(--pago-tarjeta); --medio-bg: var(--pago-tarjeta-bg); }
.medio--debito { --medio-color: var(--pago-debito); --medio-bg: var(--pago-debito-bg); }
.medio--transferencia { --medio-color: var(--pago-transferencia); --medio-bg: var(--pago-transferencia-bg); }
.medio--qr { --medio-color: var(--pago-qr); --medio-bg: var(--pago-qr-bg); }

/* Tarjeta de total por medio (cierre de caja) */
.pago-card {
  position: relative;
  padding: 15px 16px 14px;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: var(--blanco);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  transition: box-shadow var(--t), transform var(--t-rapida);
}
.pago-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--medio-color, var(--tinta-2));
}
.pago-card:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); }

.pago-card__cab { display: flex; align-items: center; gap: 8px; }
.pago-card__ico {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: none;
  border-radius: var(--r-xs);
  background: var(--medio-bg, var(--linea-2));
  color: var(--medio-color, var(--tinta-2));
}
.pago-card__ico svg { width: 16px; height: 16px; }
.pago-card__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.pago-card__valor {
  margin-top: 10px;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.pago-card__pie { margin-top: 3px; font-size: 12.5px; color: var(--tinta-3); }
.pago-card.is-vacia .pago-card__valor { color: var(--tinta-3); }

/* Tarjeta "Total" pizarra oscura */
.pago-card--total {
  background: var(--pizarra);
  border-color: var(--pizarra);
  color: #EEF2F4;
  box-shadow: var(--sombra-3);
}
.pago-card--total::before { background: var(--ladrillo); }
.pago-card--total .pago-card__label { color: rgba(238, 242, 244, .68); }
.pago-card--total .pago-card__valor { color: #fff; font-size: 28px; }
.pago-card--total .pago-card__pie { color: rgba(238, 242, 244, .6); }
.pago-card--total .pago-card__ico { background: rgba(255, 255, 255, .12); color: #fff; }

/* Botón de selección de medio en el POS (grilla de 5) */
.medio-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 68px;
  padding: 8px 4px;
  border: 1.5px solid var(--linea);
  border-radius: var(--r-md);
  background: var(--blanco);
  color: var(--tinta-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
  transition: border-color var(--t), background var(--t), color var(--t), box-shadow var(--t), transform var(--t-rapida);
}
.medio-btn svg { width: 21px; height: 21px; color: var(--medio-color, var(--tinta-3)); transition: color var(--t); }
.medio-btn:hover { border-color: var(--medio-color, #D5C9B4); background: var(--crema-2); transform: translateY(-1px); }
.medio-btn.is-activo {
  background: var(--medio-bg, var(--linea-2));
  border-color: var(--medio-color, var(--tinta-2));
  color: var(--medio-color, var(--tinta));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--medio-color, #999) 16%, transparent);
}
.medio-btn.is-activo svg { color: var(--medio-color); }

/* ===================== Sidebar oscura (pizarra) ========================= */

.side {
  display: flex;
  flex-direction: column;
  width: var(--side-w);
  flex: none;
  height: 100vh;
  position: sticky;
  top: 0;
  background: var(--pizarra);
  color: #DCE3E7;
  border-right: 1px solid var(--pizarra-osc);
  z-index: 40;
}

/* Marca arriba */
.side__marca {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 17px 16px 15px;
  border-bottom: 1px solid var(--pizarra-linea);
}
.side__iso {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--ladrillo);
  color: #fff;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.side__wordmark {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.12;
  letter-spacing: .015em;
  color: #fff;
  text-transform: uppercase;
}
.side__wordmark span {
  display: block;
  font-family: var(--f-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  color: rgba(220, 227, 231, .55);
  text-transform: uppercase;
}

/* Navegación */
.side__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.side__grupo {
  padding: 14px 8px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(220, 227, 231, .38);
}
.side__link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border-radius: var(--r-sm);
  color: rgba(220, 227, 231, .78);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  transition: background var(--t), color var(--t);
}
.side__link:hover { background: var(--pizarra-cla); color: #fff; text-decoration: none; }
.side__link svg { width: 19px; height: 19px; flex: none; opacity: .85; }
.side__link.is-activo {
  background: var(--ladrillo);
  color: #fff;
  box-shadow: var(--sombra-2);
}
.side__link.is-activo svg { opacity: 1; }
.side__link__contador {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .13);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Pie con el turno */
.side__pie {
  padding: 13px 14px 15px;
  border-top: 1px solid var(--pizarra-linea);
  background: var(--pizarra-osc);
}
.side__turno {
  display: flex;
  align-items: center;
  gap: 10px;
}
.side__turno__ava {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--pizarra-cla);
  color: #fff;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 14px;
}
.side__turno__txt { min-width: 0; line-height: 1.25; }
.side__turno__label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(220, 227, 231, .45);
}
.side__turno__valor {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side__version {
  margin-top: 11px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: rgba(220, 227, 231, .34);
  letter-spacing: .02em;
}

/* Scrollbar propia de la sidebar (sobre oscuro) */
.side__nav { scrollbar-color: #3C5566 transparent; }
.side__nav::-webkit-scrollbar-thumb { background: #3C5566; }

/* =============================== Toasts ================================= */

/* A) Toast GRANDE centrado arriba — el del escaneo, se lee de lejos */
.toasts-escaneo {
  position: fixed;
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  z-index: 9200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(620px, calc(100vw - 32px));
  pointer-events: none;
}

.toast-gr {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 24px 15px 18px;
  border-radius: var(--r-md);
  background: var(--pago-efectivo);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.005em;
  box-shadow: var(--sombra-4);
  animation: ab-toast-baja 220ms cubic-bezier(.22, .9, .3, 1);
}
.toast-gr.is-saliendo { animation: ab-toast-sube 180ms ease forwards; }
.toast-gr__ico {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}
.toast-gr__ico svg { width: 20px; height: 20px; }
.toast-gr__txt { min-width: 0; }
.toast-gr__txt small {
  display: block;
  margin-top: 2px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 500;
  opacity: .82;
  letter-spacing: .02em;
}
.toast-gr--error { background: var(--error); }
.toast-gr--aviso { background: var(--aviso); }
.toast-gr--pizarra { background: var(--pizarra); }

@keyframes ab-toast-baja {
  from { opacity: 0; transform: translateY(-16px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ab-toast-sube {
  to { opacity: 0; transform: translateY(-10px) scale(.98); }
}

/* B) Toast chico de esquina — confirmaciones de trabajo (guardado, ajustes) */
.toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9000;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 9px;
  width: min(360px, calc(100vw - 28px));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: var(--pizarra);
  color: #E8EDF0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: var(--sombra-4);
  animation: ab-toast-der 200ms cubic-bezier(.22, .9, .3, 1);
}
.toast.is-saliendo { animation: ab-toast-sale 170ms ease forwards; }
.toast__ico {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
.toast__ico svg { width: 13px; height: 13px; }
.toast__txt { min-width: 0; }
.toast__txt b { display: block; font-weight: 700; }
.toast__txt span { display: block; font-weight: 500; font-size: 12.5px; opacity: .78; }
.toast--ok .toast__ico { background: var(--pago-efectivo); }
.toast--error { background: #5B1F16; }
.toast--error .toast__ico { background: var(--error); }
.toast--aviso .toast__ico { background: var(--aviso); }

@keyframes ab-toast-der {
  from { opacity: 0; transform: translateX(18px) scale(.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes ab-toast-sale {
  to { opacity: 0; transform: translateX(12px) scale(.98); }
}

/* ========================= Overlay y modales ============================ */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(15, 25, 32, .58);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-lenta), visibility var(--t-lenta);
}
.overlay.is-abierto { opacity: 1; visibility: visible; }

.modal {
  position: fixed;
  z-index: 900;
  left: 50%;
  top: 50%;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 56px);
  overflow: auto;
  transform: translate(-50%, -47%) scale(.98);
  opacity: 0;
  visibility: hidden;
  background: var(--blanco);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-4);
  transition: opacity var(--t-lenta), transform var(--t-lenta), visibility var(--t-lenta);
}
.modal.is-abierto { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.modal--angosto { width: min(400px, calc(100vw - 32px)); }
.modal--ancho { width: min(640px, calc(100vw - 32px)); }

.modal__cabecera {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 18px 20px 10px;
}
.modal__titulo { font-family: var(--f-titulo); font-weight: 600; font-size: 19px; line-height: 1.2; }
.modal__cerrar { margin-left: auto; }
.modal__cuerpo { padding: 0 20px 20px; }
.modal__pie {
  display: flex;
  gap: 10px;
  padding: 13px 20px;
  border-top: 1px solid var(--linea-2);
  background: var(--crema-3);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  position: sticky;
  bottom: 0;
}
.modal__pie .btn { flex: 1; }

/* Cabecera de éxito (venta completada) */
.modal__exito {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 26px 20px 14px;
  text-align: center;
}
.modal__exito__check {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--exito-bg);
  color: var(--exito);
  animation: ab-pop 320ms cubic-bezier(.2, 1.4, .4, 1);
}
.modal__exito__check svg { width: 30px; height: 30px; }
@keyframes ab-pop {
  from { transform: scale(.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ====================== Ticket térmico (impresión) ====================== */

.ticket {
  width: var(--ticket-w);
  margin: 0 auto;
  padding: 16px 18px 18px;
  background: #fff;
  border: 1px dashed #B9AE9A;
  border-radius: var(--r-xs);
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.5;
  color: #1A1714;
  font-variant-numeric: tabular-nums;
}

.ticket__cab { text-align: center; padding-bottom: 8px; }
.ticket__negocio {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ticket__dir { font-size: 11px; line-height: 1.4; }
.ticket__sep {
  border: 0;
  border-top: 1px dashed #C3B8A4;
  margin: 8px 0;
}
.ticket__meta { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }

.ticket__lineas { width: 100%; font-size: 11.5px; }
.ticket__lineas td { padding: 2px 0; vertical-align: top; }
.ticket__lineas .der { text-align: right; white-space: nowrap; }
.ticket__lineas .desc { padding-right: 8px; }
.ticket__lineas .cant { font-size: 10.5px; color: #4A423A; }

.ticket__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
}
.ticket__fila {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
}
.ticket__pie {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
}
.ticket__gracias { font-weight: 600; letter-spacing: .06em; }
.ticket__codigo {
  margin-top: 8px;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: .18em;
}

/* Solo se ve al imprimir */
.solo-impresion { display: none; }

/* Impresión: SÓLO el ticket.
   El contenedor del ticket (el modal) tiene que ser hijo directo de <body>
   y llevar la clase .imprimible. */
@media print {
  @page { size: 80mm auto; margin: 5mm; }

  html, body {
    background: #fff !important;
    height: auto !important;
  }

  body > * { display: none !important; }

  body > .imprimible {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* dentro del contenedor sobrevive únicamente el ticket */
  .imprimible > *:not(.ticket) { display: none !important; }
  .modal__cabecera, .modal__pie, .modal__exito, .no-imprimir { display: none !important; }

  .ticket {
    width: auto !important;
    max-width: 72mm;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #000 !important;
    font-size: 11px;
  }

  .solo-impresion { display: block !important; }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================ Estados vacíos ============================ */

.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--e-3);
  padding: 46px 24px;
  color: var(--tinta-2);
}
.vacio__ico {
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--ladrillo-suave);
  color: var(--ladrillo);
}
.vacio__ico svg { width: 30px; height: 30px; }
.vacio__titulo { font-family: var(--f-titulo); font-weight: 600; font-size: 17px; color: var(--tinta); }
.vacio p { max-width: 36ch; font-size: 13.5px; }
.vacio--ok .vacio__ico { background: var(--exito-bg); color: var(--exito); }
.vacio--compacto { padding: 26px 18px; gap: 8px; }
.vacio--compacto .vacio__ico { width: 48px; height: 48px; }
.vacio--compacto .vacio__ico svg { width: 22px; height: 22px; }

/* ============================== Aviso / nota ============================ */

.aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: var(--aviso-bg);
  border: 1px solid var(--aviso-linea);
  color: #6E4A0E;
  font-size: 13px;
  line-height: 1.45;
}
.aviso svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.aviso--verde { background: var(--exito-bg); border-color: var(--exito-linea); color: #235C3C; }
.aviso--rojo { background: var(--error-bg); border-color: var(--error-linea); color: #8E2A1E; }
.aviso--neutro { background: var(--crema-3); border-color: var(--linea); color: var(--tinta-2); }

/* Hint sutil (la nota de honestidad del escaneo simulado) */
.hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--tinta-3);
}
.hint svg { width: 14px; height: 14px; flex: none; }

/* ============================== Accesibilidad =========================== */

:focus-visible {
  outline: 2px solid var(--ladrillo);
  outline-offset: 2px;
  border-radius: 4px;
}
.side :focus-visible { outline-color: #E58B76; }

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

/* ============================== Scrollbars ============================== */

* {
  scrollbar-width: thin;
  scrollbar-color: #D6CAB6 transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #DCD1BD;
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: #C2B49B; background-clip: content-box; }

/* ============================== Utilidades ============================== */

.u-fila { display: flex; align-items: center; }
.u-col { display: flex; flex-direction: column; }
.u-entre { justify-content: space-between; }
.u-centro { justify-content: center; }
.u-al-inicio { align-items: flex-start; }
.u-base { align-items: baseline; }
.u-envuelve { flex-wrap: wrap; }
.u-crece { flex: 1; min-width: 0; }
.u-auto { margin-left: auto; }

.u-g1 { gap: 4px; } .u-g2 { gap: 8px; } .u-g3 { gap: 12px; }
.u-g4 { gap: 16px; } .u-g5 { gap: 20px; } .u-g6 { gap: 24px; }

.u-mt1 { margin-top: 4px; } .u-mt2 { margin-top: 8px; } .u-mt3 { margin-top: 12px; }
.u-mt4 { margin-top: 16px; } .u-mt5 { margin-top: 20px; } .u-mt6 { margin-top: 24px; }
.u-mb2 { margin-bottom: 8px; } .u-mb3 { margin-bottom: 12px; } .u-mb4 { margin-bottom: 16px; }
.u-mb5 { margin-bottom: 20px; } .u-mb6 { margin-bottom: 24px; }

.u-der { text-align: right; }
.u-izq { text-align: left; }
.u-cen { text-align: center; }
.u-nowrap { white-space: nowrap; }
.u-1linea { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-2lineas {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.oculto { display: none !important; }
.u-relativo { position: relative; }
.u-divisor { height: 1px; background: var(--linea); margin: var(--e-4) 0; }
.u-contenedor { width: min(1180px, 100% - 40px); margin-inline: auto; }

.grid { display: grid; gap: var(--e-4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ====================== Objetivos táctiles (dedo) ======================= */

@media (pointer: coarse) {
  .stepper__btn { width: 44px; height: 44px; }
  .stepper--sm .stepper__btn { width: 38px; height: 38px; }
  .btn-icono { width: 44px; height: 44px; }
  .chip { height: 42px; }
  /* iOS Safari hace zoom al enfocar un campo con fuente < 16px */
  .input, .textarea, .select { font-size: 16px; }
}

@media (max-width: 900px) {
  .grid--4, .grid--5, .grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4, .grid--5, .grid--6 { grid-template-columns: minmax(0, 1fr); }
  .toasts { right: 12px; left: 12px; bottom: 12px; width: auto; }
  .toast-gr { font-size: 16px; padding: 13px 18px 13px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}