/* ==========================================================================
   FuenteCC — Ajustes responsive transversales
   Se carga AL FINAL en todas las páginas. Criterio: WCAG 2.2 — 1.4.10 Reflow (AA):
   a 320 px CSS de ancho el contenido no requiere desplazamiento horizontal
   (salvo tablas de datos, que se desplazan dentro de su contenedor).
   ========================================================================== */

/* ── Menú lateral: en tablets angostas y celulares pasa a panel deslizable ── */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    margin-left: 0 !important;
    transform: translateX(-100%);
    box-shadow: 8px 0 24px rgb(0 0 0 / .35);
  }
  body.sidebar-abierto .sidebar { transform: none; }
}

/* ── Celular (≤ 600 px): barra superior con lo esencial y formularios en una columna ── */
@media (max-width: 600px) {
  .topbar { padding: 0 10px; gap: 6px; }
  .topbar-sep, .conn-text { display: none; }
  .topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .topbar-sub { max-width: 30vw; }
  .topbar-meta { gap: 8px; }
  .app { padding: 12px; }
  .form-grid { grid-template-columns: 1fr !important; }
  .form-grid > * { grid-column: 1 / -1 !important; }
}

/* ── Celular chico (≤ 380 px) ── */
@media (max-width: 380px) {
  .topbar-meta .clock { display: none; }
  .login-card { padding: 28px 18px 22px; }
  .logo-wrap .logo-sub { letter-spacing: .12em; }
}

/* Toma de pedido (catálogo + carrito) */
@media (max-width: 900px) {
  .builder { grid-template-columns: 1fr; }
  .cart { position: sticky; bottom: 0; top: auto; max-height: 50vh; order: 2; padding: 12px 14px; border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 -6px 20px rgb(0 0 0 / .18); }
  .cart-title { margin-bottom: 4px; font-size: 1.05rem; }
  .cart-lines { max-height: 26vh; min-height: 0; }
  .cart-line { padding: 6px 0; }
  .cart-total { padding: 8px 0; }
  .cart-total strong { font-size: 1.3rem; }
  .product-grid, .product-grid.is-categories { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .category { min-height: 112px; }
}

/* Burbuja del chat de ayuda (esquina inferior derecha): el contenido termina
   con espacio libre bajo ella y, en pantallas angostas, los botones del carrito
   (fijo abajo) le dejan su esquina para no quedar tapados. */
body:has(#fcc-chat-ayuda) .app { padding-bottom: 88px; }
@media (max-width: 900px) {
  body:has(#fcc-chat-ayuda) .cart-actions { padding-right: 64px; }
}

/* Cocina (KDS) */
@media (max-width: 1000px) {
  .kds { grid-template-columns: 1fr; }
  .kds-col { min-height: auto; }
}

/* Caja */
@media (max-width: 1000px) {
  .caja-mesas, .llevar-cols { grid-template-columns: 1fr; }
}

/* Caja */
@media (max-width: 640px) {
  .pago-efectivo { grid-template-columns: 1fr; }
}

/* Administración */
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .input-precio { width: 110px; }
}

/* Superusuario: tarjetas de locales */
@media (max-width: 720px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi-value { font-size: 1.4rem; }
  .local-grid { grid-template-columns: 1fr; }
  .local-chip { max-width: 30vw; }
}

/* Pantalla de inventario */
@media (max-width: 720px) {
  .lineas input { width: 90px; }
  .lineas select.sel-producto { min-width: 160px; }
}