/* responsive.css — laptop, tablet y móvil.
   Como en la referencia: por debajo de 768 px la barra lateral pasa a panel deslizable de 18 rem,
   los diálogos ocupan el ancho menos 2 rem y apilan sus botones, y las tablas no tienen barra
   horizontal: lo secundario va a la fila desplegable "+". */

@media (max-width: 1100px) {
  .inicio-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inicio-graficos { grid-template-columns: minmax(0, 1fr); }
  .resumen-caja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tablero .columna-listo { grid-column: 1 / -1; }
  .pedido { grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); gap: 1rem; }
}

@media (max-width: 900px) {
  :root { --celda: 52px; }
  .pedido { grid-template-columns: minmax(0, 1fr); }
  .conmutador {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 3px; margin-bottom: 1rem;
    background: var(--campo); border-radius: var(--radio); }
  .conmutador-btn { height: 2.25rem; background: transparent; border: 0; border-radius: var(--radio-md); font-weight: 600; color: var(--muted-foreground); }
  .conmutador-btn.activo { background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px rgba(8, 24, 29, 0.08); }
  .pedido.ver-carta .ticket-panel { display: none; }
  .pedido.ver-ticket .carta { display: none; }
  .ticket-panel { position: static; }
  .papel { max-height: none; }
  .cobro { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

@media (max-width: 767px) {
  /* Barra lateral como panel deslizable; la versión plegada no aplica en móvil. */
  .riel {
    position: fixed; inset: 0 auto 0 0; width: var(--riel-movil); max-width: 85vw; z-index: 60;
    transform: translateX(-100%); transition: transform 0.2s ease-out; border-right: 0;
  }
  .menu-abierto .riel { transform: none; box-shadow: var(--sombra-elevada); }
  .menu-abierto .velo { display: block; position: fixed; inset: 0; z-index: 55; background: var(--overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

  .barra { padding: 0 1rem; gap: 0.5rem; }
  .barra-estado .chip:not(.chip-alerta) { display: none; }
  .contenido { padding: 1rem 1rem 3rem; }
  .encabezado { align-items: center; gap: 0.75rem; }

  .modal-fondo { padding: 1rem; }
  .modal, .modal-chico, .modal-ancho { width: 100%; max-height: calc(100svh - 2rem); }
  .modal-pie { flex-direction: column-reverse; }
  .modal-pie .btn { width: 100%; }

  #avisos { right: 1rem; left: 1rem; bottom: 1rem; width: auto; max-width: none; }

  .encabezado .barra-acciones { width: 100%; }
  .encabezado .barra-acciones:has(> :only-child) { width: auto; }
}

@media (max-width: 720px) {
  .tabla .sec { display: none; }
  .tabla .col-mas { display: table-cell; }
  .tabla th, .tabla td { padding-left: 0.4rem; padding-right: 0.4rem; }
  .tabla th:first-child, .tabla td:first-child { padding-left: 0.75rem; }
  .tabla th:last-child, .tabla td:last-child { padding-right: 0.5rem; }
  .tabla .col-n { width: 2.4rem; }
  .tabla .col-acciones { white-space: normal; }
  .fila-detalle dl { grid-template-columns: 1fr; }

  /* En pantallas angostas el plano pasa a una lista de fichas: las posiciones no caben. */
  .plano { grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); grid-template-rows: none !important; width: 100%; }
  .plano .mesa { grid-column: auto !important; grid-row: auto !important; min-height: 6.6rem; }
  .plano-destino { display: none; }
  .plano-edicion { background-image: none; }

  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo.mitad { grid-column: 1 / -1; }
  .campo.cuarto { grid-column: span 1; }
  .inicio-rejilla { grid-template-columns: minmax(0, 1fr); }
  .tablero { grid-template-columns: minmax(0, 1fr); }
  .carta-grilla { grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); }
  .carta-buscar { max-width: none; }
  .pago-fila { grid-template-columns: 1fr 1fr 2.25rem; }
  .pago-fila > :nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  .fila-compra { grid-template-columns: 1fr 1fr 2.25rem; padding-bottom: 0.5rem; }
  .fila-compra > :nth-child(1) { grid-column: 1 / -1; }
  .fila-compra > :nth-child(4) { grid-column: 1 / 3; }
  .fila-receta { grid-template-columns: 1fr 1fr 2.25rem; }
  .fila-receta > :nth-child(1) { grid-column: 1 / -1; }
  .barras li, .barras-reporte li { grid-template-columns: 1fr auto; }
  .barras-pista { grid-column: 1 / -1; grid-row: 2; }
  .filtros { width: 100%; }
  .filtros input[type="search"] { width: 100%; }
  /* Las pestañas se acomodan en varias líneas: en una tira desplazable, las últimas quedarían escondidas. */
  .pestanas { gap: 0.4rem; }
  .pestana { padding: 0 0.875rem; }
  .tabla-pie { justify-content: center; }
}

@media (max-width: 460px) {
  .resumen-caja { grid-template-columns: minmax(0, 1fr); }
  .form { grid-template-columns: minmax(0, 1fr); }
  .campo.cuarto { grid-column: 1 / -1; }
  .dato-valor { font-size: 1.375rem; }
  .barra-miga span { display: none; }
}

/* Pantallas táctiles: ningún control por debajo de 44 px (tablets de mozos, pantalla de cocina). */
@media (pointer: coarse) {
  :root { --control: 2.75rem; }
  .btn-chico, .paso-chico .btn, .tabla-paginas .btn, .cuenta-btn, .cat, .pin-usuario { height: 2.75rem; min-height: 2.75rem; }
  .btn-chico[aria-label]:not(:has(> span)), .paso-chico .btn, .tabla-paginas .btn, .cuenta-btn { width: 2.75rem; }
  .btn-grande { height: 3rem; min-height: 3rem; }
  .riel-enlace, .riel-boton { height: 2.75rem; }
  .btn-mas { width: 2.5rem; height: 2.5rem; }
  .filtros input[type="search"], .filtros select, .rango input { height: var(--control); }
  .modal-cabeza .btn { width: 2.75rem; height: 2.75rem; min-height: 2.75rem; }
  input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; }
  .pestana { height: var(--control); }
}