/* AR-POS Food — estilos complementarios a Tailwind */

[x-cloak] { display: none !important; }

/* ---------- Base móvil (se siente app instalada, no página web) ---------- */
html {
  -webkit-tap-highlight-color: transparent; /* sin destello gris al tocar */
  -webkit-text-size-adjust: 100%;           /* sin inflado de fuente en horizontal */
}
body { font-feature-settings: "ss01", "cv11"; text-rendering: optimizeLegibility; }

/* Controles: respuesta inmediata (sin retraso de 300 ms) y sin selección al mantener presionado */
button, a, [role="button"], label:has(> input[type="radio"]), label:has(> input[type="checkbox"]), summary {
  touch-action: manipulation;
}
button, [role="button"], summary, .tap {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* iOS hace zoom en campos < 16px: en pantallas táctiles todos los campos usan 16px */
@media (pointer: coarse) {
  input, textarea, select { font-size: 16px !important; }
}

/* ---------- Superficies del navegador con la marca ---------- */
::selection { background: rgb(var(--brand) / .22); color: inherit; }
input, textarea { caret-color: rgb(var(--brand)); }
::placeholder { color: #766D64; opacity: 1; }            /* ≥ 4.5:1 sobre blanco */
.bg-ink ::placeholder, [class*="bg-[#1"] ::placeholder, [class*="bg-white/"]::placeholder { color: rgb(255 255 255 / .6); }
input[type="number"] { font-variant-numeric: tabular-nums; }

/* Foco visible SIEMPRE con teclado (reemplaza los outline-none) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid rgb(var(--brand));
  outline-offset: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }

/* Validación: sólo después de que la persona interactuó con el campo */
input:user-invalid, textarea:user-invalid, select:user-invalid {
  border-color: #C0392B !important;
  box-shadow: 0 0 0 3px rgb(192 57 43 / .12);
}

/* Formulario enviándose: bloquea doble envío y muestra que está trabajando */
form[aria-busy="true"] button[type="submit"], form[aria-busy="true"] button:not([type]) {
  opacity: .6;
  cursor: progress;
  pointer-events: none;
}

/* Respuesta al presionar (el feedback llega al tocar, no al soltar) */
.press { transition: transform 120ms cubic-bezier(.2, .8, .2, 1), filter 120ms; }
.press:active { transform: scale(.97); }

/* Íconos SVG en línea */
.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Fondo base: papel cálido liso (la textura de marca vive sólo en la cinta de papel picado) */
.bg-grain { background-color: #FBF6EE; }

/* Cinta tipo "papel picado" para cabeceras */
.picado {
  height: 14px;
  background:
    linear-gradient(135deg, rgb(var(--brand)) 25%, transparent 25%) -7px 0,
    linear-gradient(225deg, rgb(var(--brand)) 25%, transparent 25%) -7px 0;
  background-size: 14px 14px;
  opacity: .9;
}

/* Números tabulares en tablas y montos */
.tabular { font-variant-numeric: tabular-nums; }

/* Botones del POS: sin selección de texto ni zoom por doble toque */
.tap { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.tap:active { transform: scale(.96); }

/* Pulso del botón de emergencia */
@keyframes sos-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(192, 57, 43, .55); }
  70%  { box-shadow: 0 0 0 18px rgba(192, 57, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
}
.sos { animation: sos-pulse 2.2s infinite; }

/* Respiración del punto "en vivo" */
@keyframes live { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.live-dot { animation: live 1.6s ease-in-out infinite; }

/* Scroll horizontal limpio para tabs de categorías */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Sólo visible en papel (ver print.css) */
.print-only { display: none; }

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