/* GastroCore 360 — CHASIS NATIVO
   Quita los "tells" que delatan que esto es una web y no una app instalada:
   el recuadro azul al tocar, el rebote del scroll, el zoom al escribir, el
   texto que se selecciona solo. Ninguno duele por separado; juntos producen
   la sensación de "está bien pero se nota que es web".

   Se carga DESPUÉS de tokens.css y ANTES de admin/portal/employee/kds, así
   cualquier hoja puede pisar una regla puntual si tiene motivo.

   Aquí NO se pinta nada: solo se corrige comportamiento táctil y de plataforma.
   Antes de esto cada hoja resolvía un pedazo distinto (tap-highlight solo en
   employee, safe-area en tres de cinco, overscroll en ninguna). Esta es la
   fuente única. */

/* ── Táctil ───────────────────────────────────────────────────────────────── */

/* El recuadro translúcido al tocar es el tell más visible que existe.
   Lo apagamos y damos feedback propio con :active más abajo. */
* { -webkit-tap-highlight-color: transparent; }

/* Sin esto el documento rebota al final del scroll y aparece el
   pull-to-refresh del navegador: dos gestos que en una app no existen.
   Importa sobre todo en el KDS y el POS, donde el rebote en plena
   comanda se lee como que la pantalla se trabó. */
html, body { overscroll-behavior: none; }

/* El scroll de un panel no debe contagiarse al fondo: si el mozo scrollea
   la lista de productos y termina moviendo la página entera, pierde el sitio. */
.gc-table-wrap, .gc-modal__body, .gc-drawer__body,
.pos-products, .pos-cart, .kds-column, .portal-cats { overscroll-behavior: contain; }

/* Elimina la espera por si viene un doble-tap para hacer zoom. Es latencia
   pura en cada toque, y en el POS son cientos de toques por turno. */
button, a, label, summary,
[role="button"], [role="tab"], .gc-btn { touch-action: manipulation; }

/* El chrome de la app no es texto para copiar: sin esto, mantener el dedo
   apoyado en un botón lo selecciona y abre el menú de copiar. El contenido
   real (nombres de plato, importes, notas del pedido) queda seleccionable
   a propósito — el mozo a veces necesita copiar una nota. */
nav, header, footer, .gc-btn, .gc-nav__item, .gc-tab,
[role="button"], [role="tab"], .kds-counter { -webkit-user-select: none; user-select: none; }

/* Mantener presionada una imagen abre "Guardar imagen"; arrastrarla la despega
   del layout. En una app instalada eso no pasa. */
img { -webkit-user-drag: none; }

/* Feedback por debajo de ~100ms: el cerebro lo lee como respuesta física del
   botón. Más lento se siente laggy aunque la acción sea instantánea. */
.gc-btn:active, [role="button"]:active { transform: scale(.97); }
.gc-btn { transition: transform .06s var(--gc-ease-out, ease-out); }

/* ── Entrada táctil ───────────────────────────────────────────────────────── */
/* Se gatea por capacidad del puntero y no por ancho: una tablet de 1024px es
   táctil y un laptop de 1024px no. El ancho miente, `pointer` no. */

@media (pointer: coarse) {

  /* iOS hace zoom automático al enfocar un campo de menos de 16px y después
     no vuelve solo: la pantalla queda corrida y parece que la app se rompió.
     La especificidad (dos :not) alcanza para ganarle a las reglas de clase
     que fijan 12-15px, sin recurrir a !important. */
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea { font-size: 17px; }

  /* El pulpejo del dedo cubre ~9mm: por debajo de 44px el error de toque es
     sistemático, y en cocina o salón un toque errado desordena el servicio. */
  .gc-btn, .gc-tab, .gc-nav__item, .gc-theme-toggle,
  .portal-add-btn, .portal-cart-qty button, .portal-qty__btn, .mesa__edit-btn,
  [role="button"], [role="tab"] { min-height: 44px; }

  /* Las tarjetas de producto del POS son el objetivo que más se toca de toda
     la app — decenas de veces por pedido — y el método de pago se elige una
     vez por venta pero bajo presión. Los dos merecen el piso de 44px. */
  .pos-product-card, .pos-pay-btn { min-height: 44px; }

  /* Los +/- de cantidad son los que más se tocan del portal y los más chicos:
     además del alto, necesitan ancho para no errarle al de al lado. */
  .portal-cart-qty button, .portal-qty__btn { min-width: 44px; }

  /* Los xs siguen siendo visualmente chicos pero con área usable: 40px es
     una concesión deliberada para las acciones de fila en tablas densas,
     donde 44px rompería el ritmo vertical. native-feel:ok decisión de diseño */
  .gc-btn--xs { min-height: 40px; }
}

/* ── Bordes de pantalla ───────────────────────────────────────────────────── */
/* Requiere viewport-fit=cover en el meta viewport; sin eso, env() vale 0.
   max() mantiene un padding decente en pantallas sin notch. */

.gc-safe-b { padding-bottom: max(var(--gc-sp-3, 12px), env(safe-area-inset-bottom)); }
.gc-safe-t { padding-top:    max(var(--gc-sp-3, 12px), env(safe-area-inset-top)); }
/* Los insets laterales solo aparecen en horizontal — que es exactamente como
   se monta una tablet de cocina. */
.gc-safe-x { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* ── Altura estable ───────────────────────────────────────────────────────── */
/* 100vh incluye la barra de URL móvil: cuando se retrae al scrollear, la
   altura cambia y el layout pega un salto. dvh sigue la altura real.
   Las hojas usan var(--gc-vh) para no repetir el fallback en cada regla. */

:root { --gc-vh: 100vh; }
@supports (height: 100dvh) { :root { --gc-vh: 100dvh; } }

/* ── Accesibilidad de base ────────────────────────────────────────────────── */

/* El foco se ve para quien usa teclado y se calla para quien usa el dedo.
   Las hojas que ya definen su propio anillo (portal, admin) lo pisan. */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--gc-brand, #0D6E5A); outline-offset: 2px; }

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