/* ============================================
   JEKEMIPOS - TABLET & MOBILE OPTIMIZATION
   Incluir en TODOS los HTML de JekemiPOS
   ============================================ */

/* ----- 1. VIEWPORT & BODY BASE ----- */
/* Previene el zoom automático de iOS al hacer focus en inputs */
/* Previene scroll horizontal accidental */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-x: hidden;
  /* Usa dynamic viewport height para que el teclado virtual no descuadre */
  height: 100dvh;
}

body {
  overflow-x: hidden;
  /* Mejora el scroll en iOS/Android */
  -webkit-overflow-scrolling: touch;
  /* Evita selección de texto accidental al tocar rápido */
  -webkit-user-select: none;
  user-select: none;
  /* Previene pull-to-refresh accidental en Android Chrome */
  overscroll-behavior-y: contain;
}

/* Permitir selección en inputs y textareas */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}


/* ----- 2. INPUTS - FIX "NO DEJA ESCRIBIR" ----- */
/* CRÍTICO: font-size >= 16px previene el auto-zoom de iOS al hacer focus */
input,
textarea,
select,
[contenteditable="true"] {
  font-size: 16px !important;
  min-height: 44px;
  /* Mejora la apariencia en iOS */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Borde visible para saber dónde tocar */
  border: 1.5px solid #ccc;
  border-radius: 8px;
  padding: 10px 12px;
  /* Quita sombra interna de iOS */
  -webkit-box-shadow: none;
  box-shadow: none;
  /* Color de fondo explícito para que se vea el campo */
  background-color: #fff;
  /* Transición suave al hacer focus */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #FF9100;
  box-shadow: 0 0 0 3px rgba(255, 145, 0, 0.25);
  outline: none;
}

/* Fix: inputs type number - quitar spinners que molestan en touch */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* Placeholder más visible */
input::placeholder,
textarea::placeholder {
  color: #999;
  font-size: 14px;
}


/* ----- 3. BOTONES & TOUCH TARGETS ----- */
/* Tamaño mínimo táctil: 44x44px (Apple) / 48x48dp (Google) */
button,
.btn,
[role="button"],
a.btn,
input[type="submit"],
input[type="button"] {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 16px;
  /* Previene delay de 300ms en toque */
  touch-action: manipulation;
  /* Cursor pointer para consistencia */
  cursor: pointer;
  /* Previene text selection al tocar rápido */
  -webkit-user-select: none;
  user-select: none;
  /* Feedback visual al tocar */
  -webkit-tap-highlight-color: rgba(255, 145, 0, 0.2);
}

/* Active state para feedback táctil inmediato */
button:active,
.btn:active,
[role="button"]:active {
  transform: scale(0.97);
  opacity: 0.9;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

/* Todos los elementos clickeables: sin delay */
a, label, summary {
  touch-action: manipulation;
}


/* ----- 4. LAYOUT - FIX "NO SE VE TODO" ----- */
/* Contenedores principales deben usar dvh, no vh */
.app-container,
.main-container,
.pos-container,
#app,
main {
  min-height: 100dvh;
  /* Flex para que el contenido se adapte */
  display: flex;
  flex-direction: column;
}

/* Scrollable areas con mejor comportamiento touch */
.scroll-area,
.product-grid,
.order-list,
.menu-items,
[data-scrollable] {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Previene que el scroll se "escape" al body */
  overscroll-behavior: contain;
}


/* ----- 5. MODALES - FIX TECLADO TAPA MODAL ----- */
.modal,
.modal-content,
.popup,
.dialog {
  /* En tablets, los modales deben poder scrollear */
  max-height: 85dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Cuando un modal está abierto, prevenir scroll del body */
body.modal-open,
body.has-modal {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}


/* ----- 6. TABLAS RESPONSIVAS ----- */
/* Tablas que no caben en pantalla: scroll horizontal */
.table-responsive,
table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Celdas de tabla con padding táctil */
td, th {
  padding: 10px 8px;
  white-space: nowrap;
}


/* ----- 7. MEDIA QUERIES PARA TABLETS ----- */

/* Tablets pequeñas (7"-8"): ~600px-768px */
@media screen and (min-width: 600px) and (max-width: 768px) {
  /* Grids: máximo 2-3 columnas */
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  
  /* Texto más legible */
  body {
    font-size: 15px;
  }
  
  /* Headers/toolbars más compactos */
  .toolbar, .header, .nav-bar {
    padding: 8px 12px;
  }
}

/* Tablets medianas (9"-10"): ~769px-1024px */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px;
  }
  
  body {
    font-size: 16px;
  }
}

/* Tablets grandes / iPad Pro (11"-13"): ~1025px-1366px */
@media screen and (min-width: 1025px) and (max-width: 1366px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px;
  }
}

/* ----- 8. ORIENTACIÓN ----- */
/* Landscape: aprovechar ancho */
@media screen and (orientation: landscape) and (max-height: 600px) {
  /* En landscape con poco alto, compactar headers */
  .toolbar, .header, .nav-bar {
    padding: 4px 12px;
    min-height: 40px;
  }
  
  /* Modales no deben ocupar todo el alto */
  .modal-content {
    max-height: 80dvh;
  }
}

/* Portrait: aprovechar alto */
@media screen and (orientation: portrait) {
  .modal-content {
    max-height: 90dvh;
    width: 95vw;
  }
}


/* ----- 9. TECLADO VIRTUAL ABIERTO ----- */
/* Clase que el JS agrega cuando detecta teclado */
body.keyboard-open {
  /* Reducir elementos fijos para dar espacio */
}

body.keyboard-open .toolbar-bottom,
body.keyboard-open .footer-bar,
body.keyboard-open .bottom-nav {
  /* Ocultar barras inferiores cuando el teclado está abierto */
  display: none !important;
}

body.keyboard-open .modal-content {
  /* Modal más pequeño con teclado abierto */
  max-height: 50dvh;
  margin-top: 10px;
}


/* ----- 10. SAFE AREAS (iPads con notch / bordes) ----- */
@supports (padding: env(safe-area-inset-top)) {
  .toolbar, .header, .nav-bar {
    padding-top: max(8px, env(safe-area-inset-top));
  }
  
  .footer-bar, .bottom-nav, .toolbar-bottom {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}


/* ----- 11. SCROLLBARS VISIBLES EN TOUCH ----- */
/* En tablets, scrollbars delgados pero visibles */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:active {
  background: rgba(0, 0, 0, 0.4);
}


/* ----- 12. UTILIDADES RÁPIDAS ----- */
/* Usar en elementos que necesiten scroll touch */
.touch-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Elementos que no deben ser seleccionables */
.no-select {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Forzar que un input sea editable (debug) */
.force-editable {
  -webkit-user-select: text !important;
  user-select: text !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* Full height dinámico */
.full-dvh {
  height: 100dvh;
}

/* Hide on small tablets */
@media screen and (max-width: 768px) {
  .hide-small-tablet {
    display: none !important;
  }
}

/* Hide on keyboard open */
body.keyboard-open .hide-on-keyboard {
  display: none !important;
}


/* ============================================
   JEKEMIPOS — MOBILE PHONE (<600px)
   ============================================ */
@media screen and (max-width: 599px) {

  /* ----- 1. NAV SUPERIOR (sec-nav) — scrollable horizontal ----- */
  .sec-nav {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 8px !important;
  }
  .sec-nav::-webkit-scrollbar { display: none; }
  .sec-nav-btn {
    display: inline-block !important;
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
    flex: none !important;
  }
  /* Ocultar SVGs en nav para ahorrar espacio */
  .sec-nav-btn svg { display: none !important; }
  .toolbar-sep { display: none !important; }


  /* ----- 2. TABS DE MARCA (Jekemi/Taquería/Combos) — scrollable ----- */
  .marca-tabs {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .marca-tabs::-webkit-scrollbar { display: none; }
  .marca-tab {
    flex: none !important;
    display: inline-block !important;
    padding: 10px 14px !important;
    font-size: 0.78rem !important;
    white-space: nowrap !important;
    min-width: auto !important;
  }
  /* SVG en tabs de marca: ocultar para ahorrar ancho */
  .marca-tab svg { display: none !important; }


  /* ----- 3. CATEGORÍAS — ya scrollable, reforzar ----- */
  .cat-scroll {
    overflow-x: auto !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding: 8px 10px !important;
    scrollbar-width: none;
  }
  .cat-scroll::-webkit-scrollbar { display: none; }
  .cat-btn {
    display: inline-block !important;
    white-space: nowrap !important;
    flex: none !important;
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
    min-height: 32px;
  }


  /* ----- 4. GRID DE PRODUCTOS — 2 columnas en celular ----- */
  .productos-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }
  .prod-card {
    min-height: 140px !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
  }
  .prod-card * {
    pointer-events: auto !important;
  }
  .prod-card-img {
    height: 80px !important;
  }
  .prod-card-placeholder {
    height: 80px !important;
    pointer-events: none !important;
  }
  .prod-nombre {
    font-size: 0.72rem !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
  }
  .prod-precio {
    font-size: 0.8rem !important;
  }


  /* ----- 5. LAYOUT — stacked con orden colapsable ----- */
  body { overflow: auto !important; }
  #app { height: auto !important; min-height: 100dvh; overflow: visible !important; }

  .main-layout {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }

  #menu-panel {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--borde) !important;
    flex: none !important;
    overflow: visible !important;
  }

  /* Productos grid: scroll interno, altura máxima para ver bien */
  #menu-panel .productos-grid {
    max-height: 55dvh;
    overflow-y: auto;
  }

  /* Panel de orden: por defecto colapsado en móvil */
  #orden-panel {
    width: 100% !important;
    height: auto !important;
    flex: none !important;
    overflow: visible !important;
    position: relative;
  }

  /* Cuando el panel está colapsado, solo mostrar totales y botones */
  #orden-panel.mobile-collapsed .orden-header,
  #orden-panel.mobile-collapsed .orden-tipo,
  #orden-panel.mobile-collapsed #btn-asignar-cliente-wrap,
  #orden-panel.mobile-collapsed #cliente-asignado,
  #orden-panel.mobile-collapsed .items-lista {
    display: none !important;
  }

  /* Orden expandida ocupa toda la pantalla */
  #orden-panel.mobile-expanded {
    position: fixed !important;
    inset: 0 !important;
    z-index: 90 !important;
    background: var(--fondo) !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Botón flotante "Ver orden" */
  #mobile-fab-orden {
    display: flex !important;
  }


  /* ----- 6. HEADER — compacto en celular ----- */
  header {
    padding: 6px 10px !important;
    flex-wrap: wrap;
    gap: 4px;
  }
  .header-logo { font-size: 1rem !important; }
  .header-sucursal { display: none !important; }
  .header-user { display: none !important; }
  /* Ocultar botones secundarios del header (NO los del dropdown) */
  header > div > #btn-cambiar-sede,
  header > div > #btn-lista-precio,
  header > div > a[href="/mercado"],
  header > div > a[href="/admin"] {
    display: none !important;
  }


  /* ----- 7. ORDEN TIPO (Mostrador/Mesa/Domicilio) — compacto ----- */
  .orden-tipo {
    padding: 6px 8px !important;
    gap: 4px !important;
  }
  .tipo-btn {
    padding: 8px 6px !important;
    font-size: 0.73rem !important;
    min-height: 36px;
  }


  /* ----- 8. BOTONES DE PAGO — accesibles ----- */
  .btns-pago {
    padding: 8px 10px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .btn-pago {
    padding: 12px 8px !important;
    font-size: 0.82rem !important;
    min-height: 48px;
    flex: 1 1 auto !important;
  }
  /* El botón Cobrar destaca más */
  .btn-pago.btn-efectivo {
    flex: 1 1 100% !important;
    order: -1;
    font-size: 1rem !important;
  }


  /* ----- 9. TOTALES — compactos ----- */
  .orden-totales {
    padding: 6px 10px !important;
  }


  /* ----- 10. MODAL COBRO — full screen en móvil ----- */
  #modal-pago {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .cobro-wrap {
    max-width: 100% !important;
    border-radius: 0 !important;
    max-height: 100dvh !important;
    height: 100dvh;
  }
  .cobro-body {
    flex-direction: column !important;
  }
  .cobro-right {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid var(--borde);
  }
  .cobro-medios {
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 8px !important;
  }
  .cobro-medio-btn {
    min-width: 48px !important;
    padding: 6px 4px !important;
  }
  .cobro-medio-label {
    font-size: 0.55rem !important;
  }


  /* ----- 11. ITEMS LISTA — touch-friendly ----- */
  .item-row {
    padding: 6px 0 !important;
    min-height: 44px;
    align-items: center;
  }
  .cant-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 1rem !important;
  }


  /* ----- 12. MODALES GENERALES — full-width en móvil ----- */
  .caja-card,
  .config-card,
  .inv-card,
  .stats-card,
  .hist-card,
  .ventas-card,
  .caja-inner {
    max-width: 100% !important;
    border-radius: 12px !important;
    padding: 16px !important;
  }


  /* ----- 13. TOUCH SAFETY — ningún overlay invisible ----- */
  .prod-card::before,
  .prod-card::after {
    pointer-events: none !important;
  }
  .prod-card-body {
    pointer-events: auto !important;
  }


  /* ----- 14. TOUCH DELAY FIX — eliminar 300ms tap delay ----- */
  .prod-card {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(232, 98, 42, 0.15);
  }
  /* También en botones de categoría y tipo */
  .cat-btn,
  .marca-tab,
  .tipo-btn,
  .btn-pago,
  .cant-btn,
  .sec-nav-btn {
    touch-action: manipulation !important;
  }


  /* ----- 15. MENÚ HAMBURGUESA — visible solo en móvil ----- */
  #mobile-menu-wrap {
    display: block !important;
  }

}


/* ============================================
   DOMICILIO.HTML — MOBILE (<600px)
   Scoped: #panels, #panel-izq, #panel-der
   ============================================ */
@media screen and (max-width: 599px) {

  /* Layout: stackear paneles */
  #panels {
    flex-direction: column !important;
    overflow: visible !important;
  }
  #panel-izq {
    width: 100% !important;
    min-width: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--borde);
    max-height: 45dvh;
  }
  #panel-der {
    width: 100% !important;
    flex: 1 !important;
    overflow-y: auto !important;
  }

  /* Filtros: wrap en header del panel */
  .panel-hdr {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .panel-hdr .filtro-fecha,
  .panel-hdr .filtro-sel {
    flex: 1 1 45% !important;
    min-width: 0 !important;
  }
  .panel-hdr .panel-titulo {
    flex: 1 1 100%;
  }

  /* Botones de acción: táctiles */
  .btn-ac {
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 0.8rem !important;
  }
  .pedido-acciones {
    gap: 6px !important;
  }

  /* Modales: full width */
  .modal-box {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 16px !important;
  }
  .modal-box.sm,
  .modal-box.md {
    width: 95vw !important;
    max-width: 95vw !important;
  }

  /* Medios de pago: 2 columnas */
  .medios-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Formularios: 1 columna */
  .frow {
    grid-template-columns: 1fr !important;
  }

  /* Wizard y detalle footers: wrap */
  .wiz-footer,
  .det-footer {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .wiz-footer button,
  .det-footer button {
    flex: 1 1 45% !important;
    min-height: 44px !important;
  }

  /* Tipo toggle (Mostrador/Domicilio) */
  .tipo-toggle {
    flex-wrap: wrap !important;
  }
  .tipo-toggle button {
    flex: 1 1 45% !important;
    min-height: 40px !important;
  }
}


/* ============================================
   CAJA.HTML — MOBILE (<600px)
   Scoped: .contenido, .kpi-grid, .tabs
   ============================================ */
@media screen and (max-width: 599px) {

  /* KPI grid: 2 columnas en móvil */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  /* Tabs: indicador de scroll con fade derecho */
  .tabs {
    position: relative;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs::after {
    content: '';
    position: sticky;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    flex-shrink: 0;
    background: linear-gradient(to right, transparent, var(--card));
    pointer-events: none;
  }
  .tab {
    padding: 10px 14px !important;
    font-size: 0.78rem !important;
  }

  /* Contenido: padding reducido */
  .contenido {
    padding: 12px 10px !important;
  }

  /* Tablas de movimientos: scroll horizontal */
  .card table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .card thead,
  .card tbody,
  .card tr {
    display: revert;
  }

  /* Formularios: 1 columna */
  .mrow {
    grid-template-columns: 1fr !important;
  }

  /* Medios de pago domicilio: 2 columnas */
  .medm {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Botones de acción domicilio */
  .dom-acc button {
    min-height: 40px !important;
    font-size: 0.78rem !important;
  }

  /* Stat rows: font más grande */
  .stat-row {
    font-size: 0.82rem !important;
    padding: 6px 0 !important;
  }

  /* Cards padding reducido */
  .card {
    padding: 14px !important;
  }
}

/* KPI grid: 1 columna en pantallas muy pequeñas */
@media screen and (max-width: 379px) {
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================
   ADMIN.HTML — MOBILE (<600px)
   Scoped: .admin-grid, modals, body overflow
   ============================================ */
@media screen and (max-width: 599px) {

  /* CRÍTICO: permitir scroll en body (admin usa overflow:hidden) */
  body:has(.admin-grid) {
    overflow: auto !important;
    height: auto !important;
  }
  body:has(.admin-grid) #app {
    height: auto !important;
    overflow: visible !important;
  }

  /* Admin grid: cards más compactas */
  .admin-section-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 8px !important;
  }

  /* TODOS los modales: max-width 95vw */
  .caja-card,
  .config-card,
  .inv-card,
  .stats-card,
  .hist-card,
  .ventas-card,
  .cat-card,
  .wiz-card,
  .detalle-card {
    max-width: 95vw !important;
    width: 100% !important;
    padding: 16px !important;
    max-height: 90dvh !important;
  }

  /* Tablas: scroll horizontal con touch */
  .inv-tabla,
  .hist-tabla,
  .stats-tabla,
  .ventas-tabla,
  .caja-tabla {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Stats y ventas grids: 2 columnas */
  .stats-kpis,
  .ventas-resumen {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .caja-resumen {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Wizard steps: scrollable horizontal */
  .wiz-steps {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0 !important;
  }
  .wiz-steps::-webkit-scrollbar { display: none; }
  .wiz-step {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 0.72rem !important;
    padding: 8px 10px !important;
  }

  /* Config tabs: scrollable horizontal */
  .config-tabs,
  .caja-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px !important;
  }
  .config-tabs::-webkit-scrollbar,
  .caja-tabs::-webkit-scrollbar { display: none; }
  .config-tab,
  .caja-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 0.75rem !important;
    padding: 6px 10px !important;
  }

  /* Inline widths en config: override */
  .config-panel input,
  .config-panel select,
  .config-panel textarea {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Filtros inventario: wrap */
  .inv-filtros {
    flex-wrap: wrap !important;
  }
  .inv-filtros input,
  .inv-filtros select {
    flex: 1 1 45% !important;
    min-width: 0 !important;
  }

  /* Hist filtros: wrap */
  .hist-filtros {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .hist-filtros input,
  .hist-filtros select {
    flex: 1 1 45% !important;
  }

  /* Header admin: compacto */
  body:has(.admin-grid) header {
    flex-wrap: wrap !important;
    padding: 8px 12px !important;
    gap: 6px !important;
  }
}

/* Admin: pantallas muy pequeñas */
@media screen and (max-width: 379px) {
  .stats-kpis,
  .ventas-resumen {
    grid-template-columns: 1fr !important;
  }
  .caja-resumen {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================
   MERCADO.HTML — MOBILE (<600px)
   Scoped: #nav, #main, .kpi-grid, .ped-card
   ============================================ */
@media screen and (max-width: 599px) {

  /* Body: permitir scroll */
  body:has(#nav) {
    overflow: auto !important;
    height: auto !important;
  }
  body:has(#nav) #app {
    height: auto !important;
    overflow: visible !important;
  }

  /* Nav lateral → tabs horizontales arriba */
  #main {
    flex-direction: column !important;
    overflow: visible !important;
  }
  #nav {
    width: 100% !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 8px !important;
    gap: 4px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--borde);
    flex-shrink: 0 !important;
  }
  #nav::-webkit-scrollbar { display: none; }
  .nav-btn {
    flex-direction: row !important;
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    font-size: 0.75rem !important;
    gap: 6px !important;
    white-space: nowrap !important;
    min-height: 40px;
  }
  .nav-btn .nav-ic {
    font-size: 1rem !important;
  }
  .nav-sep { display: none !important; }

  /* Contenido: padding reducido */
  #contenido {
    padding: 10px !important;
  }

  /* Header: compacto, wrap */
  #header {
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .h-fecha {
    font-size: 0.68rem !important;
    white-space: nowrap !important;
  }
  .h-spacer { display: none !important; }
  .h-stat {
    font-size: 0.68rem !important;
    padding: 2px 6px !important;
  }

  /* KPI grid: 2 columnas */
  body:has(#nav) .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .kpi-val {
    font-size: 1.1rem !important;
  }

  /* Medios pago: 2 columnas */
  body:has(#nav) .medios-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Doble columna (canal/marca): stack */
  .dos-cols {
    grid-template-columns: 1fr !important;
  }

  /* Pedido cards: fix encimado */
  .ped-card {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .ped-num {
    width: auto !important;
    flex-shrink: 0 !important;
  }
  .ped-info {
    flex: 1 1 calc(100% - 60px) !important;
    min-width: 0 !important;
  }
  .ped-total {
    flex: 0 0 auto !important;
  }
  .ped-acciones {
    flex: 1 1 100% !important;
    justify-content: flex-start !important;
  }
  .btn-ac {
    min-height: 36px !important;
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
  }

  /* Kanban: columnas más estrechas */
  .kanban-col {
    min-width: 180px !important;
  }

  /* Tablas: scroll horizontal */
  .mini-tabla,
  .tabla-desp,
  .detalle-tabla {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Modal detalle: full width */
  .detalle-card {
    max-width: 95vw !important;
    padding: 16px !important;
  }
  .detalle-resumen {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Prep cards: wrap */
  .prep-card {
    flex-wrap: wrap !important;
  }
}

/* Mercado: pantallas muy pequeñas */
@media screen and (max-width: 379px) {
  body:has(#nav) .kpi-grid {
    grid-template-columns: 1fr !important;
  }
  body:has(#nav) .medios-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================
   KDS.HTML — MOBILE (<600px)
   Scoped: #kds-screen, .kds-grid, .kds-card
   ============================================ */
@media screen and (max-width: 599px) {

  /* Body: scroll */
  body:has(#kds-screen) {
    overflow: auto !important;
    height: auto !important;
  }

  /* KDS grid: 1 columna (cards son 400px min) */
  .kds-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  /* Card body: stack prep/ready en columna */
  .kds-body {
    grid-template-columns: 1fr !important;
  }
  .kds-seccion:first-child {
    border-right: none !important;
    border-bottom: 1px solid var(--borde);
  }

  /* Header KDS: compacto, wrap */
  .kds-header {
    flex-wrap: wrap !important;
    padding: 6px 10px !important;
    gap: 6px !important;
  }
  .kds-titulo {
    font-size: 0.85rem !important;
  }

  /* Tabs KDS */
  .kds-tab {
    padding: 8px !important;
    font-size: 0.8rem !important;
  }

  /* Botones de acción en items */
  .btn-conf,
  .btn-back {
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
  }
  .btn-listo {
    min-height: 44px !important;
    font-size: 0.85rem !important;
  }

  /* Avg wrap: stack si no cabe */
  .avg-wrap {
    flex-wrap: wrap !important;
  }

  /* Tabla despachados */
  .desp-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}


/* ============================================
   TURNERO.HTML — MOBILE (<600px)
   Scoped: #turnero-screen, .turnero-body
   ============================================ */
@media screen and (max-width: 599px) {

  /* Body: scroll */
  body:has(#turnero-screen) {
    overflow: auto !important;
    height: auto !important;
  }
  #turnero-screen {
    height: auto !important;
    min-height: 100dvh;
  }

  /* Layout: stack vertical (listos arriba, prep abajo) */
  .turnero-body {
    flex-direction: column !important;
    overflow: visible !important;
  }
  .turnero-listos {
    border-right: none !important;
    border-bottom: 2px solid #222;
    padding: 16px !important;
    overflow: visible !important;
  }
  .turnero-enprep {
    width: 100% !important;
    padding: 16px !important;
  }

  /* Header: compacto */
  .turnero-header {
    padding: 10px 16px !important;
  }
  .turnero-logo {
    font-size: 1.1rem !important;
  }
  .turnero-reloj {
    font-size: 0.95rem !important;
  }

  /* Números: escalar para que quepan */
  .turnero-num-big {
    font-size: 2.8rem !important;
  }
  .turnero-num-card {
    padding: 16px 12px !important;
    border-radius: 14px !important;
  }
  .turnero-nums {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 10px !important;
  }

  /* En preparación: más compacto */
  .turnero-prep-item {
    font-size: 1.4rem !important;
    padding: 8px 0 !important;
  }
}