/**
 * Módulo `mesas` — reja de mesas (bloque mesa-archive).
 *
 * Solo lo que el DS NO tiene ya: la barra de acciones del mapa y la tarjeta de
 * mesa. Todo lo demás (btn, icon-chip, badge, bubble, page_header) sale del DS
 * sin duplicar nada, y los colores salen de los TOKENS — cero hex sueltos.
 */

/* ---- Barra de acciones del mapa ------------------------------------------- */

.mesas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 6px;
  background: var(--surface-page);
  box-shadow: var(--shadow-sm);
}

.mesas-toolbar__salepoint {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 279px;
}

.mesas-toolbar__label {
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--text-primary);
  white-space: nowrap;
}

.mesas-salepoint-select {
  flex: 1 0 0;
  min-width: 0;
}

/* `margin-left: auto` y no solo el space-between del contenedor: con una sola
   sucursal el selector no se pinta y las acciones son el ÚNICO hijo, así que sin
   esto se irían al inicio de la barra. */
.mesas-toolbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Tabs de zona: son botones del DS; aquí solo el ritmo entre ellos. */
.mesas-toolbar__zonas {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mesas-toolbar__divider {
  width: 1px;
  height: 40px;
  margin: 0 5px;
  border: 0;
  background: var(--border-light);
}

/* ---- Reja ----------------------------------------------------------------- */

.mesas-grid-wrapper {
  padding: 20px;
  border-radius: 6px;
  background: var(--surface-sunken);
}

.mesas-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1200px) {
  .mesas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .mesas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .mesas-grid { grid-template-columns: 1fr; }
}

/* ---- Tarjeta de mesa ------------------------------------------------------ */

.mesa-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--surface-page);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.mesa-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 50px;
  padding: 10px 10px 10px 20px;
  border-bottom: 1px solid var(--border-default);
}

.mesa-card__title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-primary);
}

.mesa-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 20px;
}

/* Píldora de capacidad: MISMO tono que el badge de estado, pero en relleno
   SÓLIDO. Consume el contrato de tonos del DS (fill + fg, el par papel+tinta),
   no colores propios: así hereda cualquier estado futuro (ocupado/reservado)
   sin tocar este archivo. */
.mesa-card__seats {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  background: var(--tone-fill);
  color: var(--tone-fg);
}

/* ===========================================================================
   Pantalla de SELECCIÓN DE MESA (entrada del POS · bloque `pos-mesas`)
   ---------------------------------------------------------------------------
   Reusa la tarjeta y la reja de arriba; aquí solo lo que esa pantalla añade:
   la columna de meseros, la cabecera con zonas y el papel OSCURO de la reja.
   Cero hex sueltos: todo sale de los tokens semánticos del DS.
   =========================================================================== */

.pos-mesas {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 30px;
}

@media (max-width: 900px) {
  /* En tablet vertical la columna de meseros pasa arriba: la reja es lo que se
     toca todo el tiempo y debe quedarse con el ancho completo. */
  .pos-mesas { grid-template-columns: 1fr; }
}

/* Alto FIJO de 50px, no el que resulte del texto: el título de la columna de meseros y
   la cabecera de la reja son dos cajas independientes, y sin una altura común la reja
   arranca unos píxeles más arriba (o más abajo) que la lista de meseros según lo que
   quepa en la cabecera. */
.pos-mesas__title {
  display: flex;
  align-items: center;
  height: 50px;
  margin: 0 0 15px;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* ---- Columna de meseros ---------------------------------------------------- */

.pos-mesas__staff-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--surface-page);
  box-shadow: var(--shadow-sm);
}

/* `cursor: pointer` explícito: dejó de ser un <a> cuando elegir mesero pasó a ser un
   filtro por AJAX dentro del salón, y un <span> no lo trae. */
.pos-staff {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 10px 15px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  color: var(--text-primary);
  text-decoration: none;
}

.pos-staff__name {
  flex: 1 0 0;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* La flecha solo aparece en el seleccionado: marca a dónde va la próxima mesa
   que toques, que es justo lo que la selección significa aquí. */
.pos-staff__arrow { display: none; }

.pos-staff.is-selected {
  border-color: var(--surface-inverse);
  background: var(--surface-inverse);
  color: var(--text-on-color);
}

.pos-staff.is-selected .pos-staff__arrow { display: inline-flex; }

.pos-staff.is-selected .avatar {
  background: var(--surface-raised);
  color: var(--text-on-color);
}

/* ---- Cabecera de la reja --------------------------------------------------- */

.pos-mesas__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.pos-mesas__head .pos-mesas__title { margin-bottom: 0; }

.pos-mesas__zonas {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* `--border-strong` y no `--border-light`: esta cabecera va sobre el papel de la página, y
   ahí el borde claro (#F0F3F6 sobre un fondo casi igual) no se ve. El de la toolbar del
   archive sí puede ser claro, porque va sobre una tarjeta blanca. */
.pos-mesas__divider {
  width: 1px;
  height: 40px;
  margin: 0 5px;
  border: 0;
  background: var(--border-strong);
}

/* ---- Reja sobre papel oscuro ----------------------------------------------- */

/* Mismo papel que la barra de tabs de la caja (`--surface-raised`): esta pantalla
   ES la caja, y el contraste hace que las tarjetas blancas salten como el objeto
   táctil que son. El archive de administración se queda claro a propósito. */
.mesas-grid-wrapper--pos {
  background: var(--surface-raised);
  border-radius: 12px;
  min-height: 360px;
}

.mesa-card--pos {
  text-decoration: none;
  color: inherit;
}

a.mesa-card--pos:hover {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-md);
}

/* Fuera de servicio: se ve, no se toca. Se atenúa la tarjeta entera en vez de
   esconderla — el mesero necesita saber que la mesa existe y por qué no puede
   usarla. */
.mesa-card--pos.is-disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* "Resalta, no esconde": las mesas del mesero seleccionado se marcan con un
   filete, sin sacar del mapa las de los demás (hay que poder ayudarles). */
.mesa-card--pos.is-mine {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 1px var(--brand-accent), var(--shadow-sm);
}

.mesa-card__waiter {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}

.mesa-card__waiter-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* ===========================================================================
   LA PANTALLA DEL SALÓN (`pos-mesas-screen`)
   ---------------------------------------------------------------------------
   Markup PROPIO, no el lightbox del DS: se probó con él y no encaja. El
   componente trae tarjeta (papel blanco, radio, sombra) y cabecera con tache
   —esto no es un modal con un formulario, es una pantalla de trabajo— y mide
   `100% - var(--lightbox-inset-start)` porque el dashboard le cede el ancho del
   sidebar. Aquí el salón ocupa el 100%.

   Queda un `fixed` con `z-index: 9` y nada más: sin velo y sin tache. El 9 es
   deliberado y NO un 99 rebajado por gusto: 99 es la capa de lo que se abre
   ENCIMA de todo (lightbox y bubble del DS valen 99), y el salón no es eso —es
   una pantalla de trabajo, y lo que se abra desde ella tiene que quedar por
   delante. Con los dos empatados en 99 el ganador lo decidía el orden del DOM.
   Empieza
   DEBAJO del header (15 de aire + 70 de alto + 10 de margen) para que la barra
   de caja —sucursal, bloqueo y CIERRE— siga visible y clicable: taparla sería
   repetir el problema que esta pantalla vino a resolver (para cerrar caja había
   que meterse a una mesa).
   =========================================================================== */

.pos-mesas-screen {
  position: fixed;
  top: 95px;
  left: 0;
  width: 100%;
  height: calc(100dvh - 95px);
  z-index: 9;

  /* Ocupa el ancho COMPLETO —el fondo llega hasta el borde, sin costura— pero el
     CONTENIDO se aparta del sidebar: la barra se pinta POR ENCIMA de esta capa, así que
     sin ese hueco la columna de meseros quedaba debajo de ella y no se podía tocar. Se
     lee el mismo dato que usa el contenido de la página (`--sidebar-reserved`) y no un
     ancho a mano, que se desincroniza a ≥1920. */
  /* Los 30 de la derecha son los de `.page-pos #dashboard_page_content`: con 15 el hueco
     disponible era 15px más ancho y el `.container` de dentro caía 7px a la derecha del
     `.container` del header. Se ve poco y se nota: las dos cajas tienen que coincidir. */
  padding: 0 30px 15px calc(var(--sidebar-reserved) + 15px);
  overflow: auto;
  background: var(--surface-sunken-light);
}

/* `hidden` lo pone el PHP y lo quita el JS. Explícito porque `.pos-mesas-screen`
   trae `display: block` de serie y un `[hidden]` sin ayuda no siempre gana. */
.pos-mesas-screen[hidden] {
  display: none;
}

/* El botón "Mesas" del header sigue al salón (contrato `data-pos-mesas-hide`): se
   esconde mientras está abierto —ir a las mesas estando en las mesas no significa
   nada— y vuelve al cerrarlo. Cada consumidor del contrato hace que su `[hidden]`
   gane en SU css; aquí hace falta porque `.btn` es `inline-flex`. */
.pos-mesas-open[hidden] {
  display: none;
}

/* Dentro del salón el margen superior sobra: ya lo pone el padding de arriba. */
.pos-mesas-screen .pos-mesas {
  margin-top: 0;
}

/* Mientras viaja el refresco (abrir, cambiar de zona o de mesero): se atenúa y no
   acepta más toques, que es más honesto que un spinner sobre datos que ya no son
   los buenos. */
.pos-mesas-screen.is-loading .pos-mesas {
  opacity: .5;
  pointer-events: none;
}

/* La mesa desde la que se abrió el salón (se está vendiendo en ella): se marca para que
   "cambiar de mesa" no obligue a recordar de cuál se venía.
   `--border-strong` y no `--surface-inverse`: la reja de la caja va sobre papel OSCURO y
   un filete oscuro ahí no existe (probado: invisible). Tampoco `--brand-accent`, que ya
   significa otra cosa en esta reja ("mesa del mesero elegido"). */
.mesa-card--pos.is-current {
  outline: 2px solid var(--border-strong);
  outline-offset: 2px;
}

/* ═══ EL MODO «PARA LLEVAR» DE LA REJA (plan 46, fase B) ═══════════════════════════════════════
 *
 * Tres clases y ninguna toca la tarjeta de mesa: `.mesa-card--nueva` (el disparador de "Nueva
 * orden"), `.mesa-card--llevar` (la tarjeta de una orden viva) y `.mesa-card__canal` (por dónde
 * entró el pedido). Viven en la sección `--pos` porque sólo existen dentro de la caja: el archive
 * de administración NO lista mesas efímeras, así que nunca las pinta.
 *
 * ⚠ Estas reglas están DUPLICADAS en `juicy-app/apps/web/src/pos/restaurant/salon.css`, y no es un
 * descuido: el bundle del front nuevo no importa las hojas de los módulos del vertical, así que la
 * única forma de que la pantalla de React tenga estilo es traerlas. Lo caro de una segunda fuente
 * es que se mueva UNA — el cerrojo contra eso está en `salon.test.ts`, que fija los valores del
 * lado de React. Es el mismo trato que ya tiene `.mesa-card__listo`.
 * ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* «NUEVA ORDEN». Filete DISCONTINUO y sin papel propio: es un hueco que invita a llenarse, no una
   orden que ya existe. Es lo que hace que el mesero no la lea como una tarjeta más de la reja. */
.mesa-card--nueva {
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 150px;
  cursor: pointer;
  border-style: dashed;
  border-color: var(--border-strong);
  background: transparent;
  box-shadow: none;
  color: var(--text-primary);
}

.mesa-card--nueva:hover {
  border-color: var(--brand-accent);
  color: var(--brand-accent);
}

.mesa-card--nueva i {
  font-size: 28px;
  line-height: 1;
}

/* Mientras viaja el alta. No se desbloquea al volver: en éxito la página navega, y dejarla
   pulsable durante ese medio segundo es como se abren dos órdenes para un solo cliente. */
.mesa-card--nueva.is-loading {
  opacity: .5;
  pointer-events: none;
}

/* La orden para llevar comparte TODO con una tarjeta de mesa menos las sillas. Lo único que hay
   que decir aquí es que el hueco de la píldora de capacidad —que ahora lleva una bolsa y ningún
   número— no se quede estrecho y descuadre la cabecera respecto a las demás tarjetas. */
.mesa-card--llevar .mesa-card__seats {
  padding: 4px 8px;
  font-size: 13px;
}

/* El canal (hoy siempre «Local»). Mismo sitio que `.mesa-card__listo` —el pie de la tarjeta— y
   deliberadamente MÁS callado que él: aquel es un aviso que reclama al mesero, éste es un dato. */
.mesa-card__canal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0 10px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}