/* Fase 7, Incremento D1 (docs/15 sección 3.5/7) — mismo sistema visual base
   que public/staff/styles.css, adaptado al tema oscuro ya existente:
   mobile-first (sin media query = 360px), tablet (768px), escritorio
   (1280px+), foco visible, contraste, animaciones con
   `prefers-reduced-motion`, controles táctiles >=44px. */

* { box-sizing: border-box; }
html, body { min-height: 100%; overscroll-behavior-y: none; }
body { margin: 0; font-family: var(--font-family-base); background: var(--page-bg); color: var(--text-primary); }
.wrap { width: 100%; max-width: 1000px; margin: 0 auto; padding: 12px; }
.login-box { max-width: 320px; margin: 40px auto; background: var(--surface-bg); padding: 20px; border-radius: 16px; }
.login-box label { display: block; font-size: 13px; margin-top: 8px; }
.login-box input { width: 100%; padding: 10px; margin: 6px 0; border-radius: 10px; border: 1px solid var(--border-color); background: var(--field-bg); color: var(--field-text); min-height: 44px; }
.login-box button { width: 100%; padding: 10px; margin-top: 10px; border: none; border-radius: 10px; background: var(--action-primary-strong-bg); color: var(--action-primary-strong-text); font-weight: 700; min-height: 44px; cursor: pointer; }
/* Pedido explícito del dueño ("bonito, no agresivo, que atrape a todo
   público"): radio de tarjeta más generoso (10px->16px, mismo criterio
   que el resto del archivo) y una sombra MUY sutil para dar profundidad
   real sobre el fondo oscuro -- nunca la restricción "cero box-shadow"
   del Incremento visual 4 original (docs/23), que era sobre no introducir
   color de urgencia/variable nueva, no una prohibición eterna de
   profundidad visual. gap del tablero 12px->16px para que el respiro
   entre tarjetas acompañe el radio más grande. */
/* Ronda 2 -- align-items:start evita que un bloque de mesa se estire hasta
   la altura del más alto de su fila (grid stretch, default): una nota
   larga en la mesa vecina ya no deja un hueco vacío bajo un bloque corto. */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; align-items: start; }
.card { background: var(--surface-bg); border-radius: 16px; padding: 14px; border-left: 6px solid var(--border-neutral); overflow-wrap: anywhere; box-shadow: var(--shadow-card-strong); }
.card.ENVIADO { border-color: var(--border-sent); }
.card.ACEPTADO { border-color: var(--state-warning-accent); }
.card.EN_PREPARACION { border-color: var(--state-progress-accent); }
.card.LISTO { border-color: var(--state-success-accent); }
/* Pedido explícito del dueño, referencia real (Toast/Square KDS): el
   tablero se lee desde lejos, no sostenido en la mano como un teléfono --
   nunca color de urgencia (eso lo decidió ya docs/23 que NO), solo tamaño
   de texto y peso más generosos en lo que de verdad hay que leer rápido:
   la mesa y los platos. .card-status/.card-elapsed (metadata secundaria)
   se quedan en 13px -- tests/kitchen-ui-visual4-css.test.ts fija ese valor
   a propósito y sigue siendo el correcto para ese texto secundario. */
.card h3 { margin: 0 0 4px; font-size: 20px; font-weight: 800; }
.card small { opacity: .7; }
.card ul { padding-left: 18px; margin: 8px 0; font-size: 16px; }
.card ul li { font-weight: 600; padding: 2px 0; }
/* docs/51 sección 11 -- atajo de "Corregir nombre" junto al alias. Icono
   secundario discreto (nunca el mismo peso que .actions button, que son
   las acciones primarias de la tarjeta), pero con área táctil real. */
.card-who { display: flex; align-items: center; gap: 6px; }
.rename-participant-btn { min-width: 32px; min-height: 32px; padding: 4px; border: none; border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 15px; line-height: 1; cursor: pointer; }
.rename-participant-btn:hover { background: var(--border-color); }
/* docs/51 sección 12 -- la nota ("sin cebolla", "salsa aparte") es una
   instrucción operativa real, nunca metadata secundaria: se lee en su
   propio color de énfasis en vez de heredar la opacidad .7 de .card small,
   para que nunca se pierda de vista entre el resto del texto atenuado.
   Primer incremento visual -- pasa de --state-warning-accent (compartido
   con la tarjeta ACEPTADO/botón Aceptar) a --accent-note-text, rol propio:
   una indicación del cliente no es un estado del pedido. */
.card .item-note { opacity: 1; color: var(--accent-note-text); font-weight: 700; }
/* Primer incremento visual -- modificadores en su propio color (distinto
   de la indicación de arriba y de los colores de estado), mismo texto
   exacto de siempre, solo envuelto en <span>. */
/* Ronda 2 -- font-size explícito (antes 16px, igual al plato): el plato
   debe dominar sobre su modificador, no solo distinguirse por color. */
.item-modifiers { color: var(--accent-modifier-text); font-weight: 600; font-size: 14px; }
/* docs/51 sección 10 (corrección post-revisión) -- "Para: Ana" identifica a
   quién es un plato de un pedido de personal. Primer incremento visual:
   texto principal en negrita (identidad, no estado) en vez del azul de
   --btn-deliver -- menos tonos compitiendo por atención en la misma línea. */
.card .item-assignee { opacity: 1; color: var(--text-primary); font-weight: 700; }

/* Primer incremento visual de Cocina (P2, auditoría 2026-09-18) --
   indicaciones largas ya no desalinean el tablero: resumen de 2-3 líneas
   por defecto (recorte puramente visual, nunca un substring en JS), botón
   real para ver/ocultar el texto completo sin truncarlo. */
.item-note-block { margin-top: 2px; }
/* :not([hidden]) es obligatorio -- "display" es una declaración de autor,
   así que gana sobre la regla del navegador "[hidden] { display: none }"
   (los estilos de autor siempre ganan sobre los del navegador, sin
   importar especificidad) y dejaría el resumen visible incluso ya oculto
   por el toggle de abajo. Bug real encontrado en la propia captura de
   pantalla de esta ronda, nunca a ojo. */
.item-note-clamp:not([hidden]) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item-note-toggle {
  display: block;
  margin-top: 2px;
  padding: 4px 0;
  min-height: 32px;
  border: none;
  background: transparent;
  color: var(--accent-note-text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* Incremento visual 4 (docs/23) — jerarquía operativa de tarjeta y estado
   vacío. Cero variable :root/.theme-kitchen nueva, cero box-shadow. */
.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
}
/* Ronda 2 -- la mesa ya es contexto del `.table-block` que envuelve la
   tarjeta; deja de heredar los 20px/800 de `.card h3` y pasa a metadato. */
.card-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
}
.card-status {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 3px 8px;
  border-radius: 999px;
  /* Primer incremento visual -- fondo propio (antes transparente) para que
     el estado se lea como una etiqueta real, nunca solo texto suelto.
     Nunca --state-warning-*/--state-danger-*/--state-progress-* (docs/23:
     el estado textual sigue siendo neutral, no una señal de urgencia). */
  background: var(--border-color);
}
/* Ronda 2 -- estados como sistema: cada uno con su propio color (tokens ya
   usados en borde/botón, cero color nuevo), texto siempre visible encima.
   Contraste AA real: gris+negro 7.37:1, ámbar+negro 9.68:1, naranja+negro
   7.87:1, verde+blanco 4.71:1. ENVIADO reutiliza el negro de warning-text
   (mismo valor, nunca un token nuevo solo para esto). */
.card.ENVIADO .card-status { background: var(--border-sent); color: var(--state-warning-strong-text); }
.card.ACEPTADO .card-status { background: var(--state-warning-strong-bg); color: var(--state-warning-strong-text); }
.card.EN_PREPARACION .card-status { background: var(--state-progress-strong-bg); color: var(--state-progress-strong-text); }
.card.LISTO .card-status { background: var(--state-success-strong-bg); color: var(--state-success-strong-text); }
.card-elapsed {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
}

.board-empty {
  grid-column: 1 / -1;
  width: min(100%, 560px);
  margin: 20px auto 0;
  text-align: center;
  padding: 32px 16px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-bg) 92%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.board-empty .icon--xl { color: var(--text-secondary); }
.board-empty-title {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--text-primary);
}
.board-empty-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.actions button { flex: 1; min-height: 44px; padding: 8px; border: none; border-radius: 10px; font-weight: 700; font-size: 15px; cursor: pointer; }
.btn-accept { background: var(--state-warning-strong-bg); color: var(--state-warning-strong-text); }
.btn-prep { background: var(--state-progress-strong-bg); color: var(--state-progress-strong-text); }
.btn-ready { background: var(--state-success-strong-bg); color: var(--state-success-strong-text); }
.btn-deliver { background: var(--state-info-strong-bg); color: var(--state-info-strong-text); }
/* Primer incremento visual -- Rechazar es la única acción que compite con
   otra en la MISMA tarjeta (ENVIADO: Aceptar + Rechazar); pasa a contorno
   (nunca relleno) para leerse como destructiva SECUNDARIA, nunca la misma
   prioridad visual que Aceptar. flex: 0 en vez de 1 -- ya no reparte el
   ancho por igual con el botón primario. */
.btn-reject { flex: 0 1 auto; background: transparent; border: 1px solid var(--state-danger-strong-bg); color: var(--state-danger-strong-bg); font-weight: 600; }
header { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 16px; padding: 12px 14px; background: var(--surface-bg); border-radius: 16px; box-shadow: var(--shadow-card-strong); }
header h2 { margin: 0; font-size: clamp(20px, 4vw, 26px); line-height: 1.15; }
/* Ronda 2 -- "Cocina" deja de ir entre paréntesis (leía como nombre
   técnico de módulo); pasa a contexto discreto bajo el título real. */
.header-title { display: flex; flex-direction: column; gap: 2px; }
.header-context { align-self: flex-start; margin: 0; padding: 3px 8px; border: 1px solid var(--border-color); border-radius: var(--radius-pill); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
/* docs/51 incremento 1 -- agrupa "Ver historial" y "Salir" para que
   `justify-content: space-between` de arriba siga separando el título de
   AMBOS botones como un solo bloque, en vez de intercalar un tercer hijo
   directo entre el título y "Salir". header > button (regla siguiente,
   protegida por tests/operational-ui-polish.test.ts) ya no tiene ningún
   botón directo que darle estilo en este archivo -- se conserva igual para
   no romper esa prueba, y el estilo real de ambos botones ahora vive en
   .header-actions button, mismo valores. */
.header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
header > button { min-height: 44px; padding: 8px 14px; border: none; border-radius: 10px; background: var(--border-color); color: var(--text-primary); font-weight: 700; cursor: pointer; }
.header-actions button { min-height: 44px; padding: 8px 14px; border: none; border-radius: 10px; background: var(--border-color); color: var(--text-primary); font-weight: 700; cursor: pointer; }
/* docs/51 incremento 1 -- interruptor de historial: mismo tamaño táctil que
   "Salir", pero con borde en vez de relleno para leerse como la acción
   secundaria de las dos (nunca un segundo botón del mismo peso visual que
   "Salir", que es destructivo/de cierre de sesión). */
.header-actions .secondary-button { background: transparent; border: 1px solid var(--border-color); }
/* Ronda 2 de pulido -- "Salir" pasa a discreto (sin relleno ni borde,
   texto secundario): "Ver historial" es la navegación secundaria CLARA de
   las dos; "Salir" no debe competir con la operación del tablero. */
.header-actions .ghost-button { background: transparent; border: none; color: var(--text-secondary); font-weight: 600; }

/* docs/51 incremento 1 -- bloque por mesa/sesión: el tablero agrupa varias
   tarjetas bajo un encabezado común en vez de una lista plana (sección 3).
   .board sigue siendo el mismo grid de auto-fill que antes (protegido por
   tests/kitchen-ui-visual4-css.test.ts) -- ahora arregla bloques en vez de
   tarjetas sueltas; cada bloque arregla sus propias tarjetas en columna. */
.table-block { background: var(--page-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.table-block-header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0 4px; }
.table-block-header h3 { margin: 0; font-size: 17px; font-weight: 800; }
.table-block-count { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.table-block-cards { display: flex; flex-direction: column; gap: 10px; }

/* Fase 7, Incremento D1: mensajes de estado — reemplazan `style="color:..."`
   inline anterior (docs/15 sección 8). Tonos ajustados al fondo oscuro. */
.msg-error { color: var(--state-danger-fg); }
.msg-success { color: var(--state-success-fg); }

/* Foco visible — nunca `outline: none` sin sustituto. */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* Retroalimentación visual al pasar el mouse/pulsar — mismo criterio que
   public/staff/styles.css. */
button:not(:disabled):hover { filter: brightness(1.15); }
button:not(:disabled):active { filter: brightness(0.9); }
button:disabled { opacity: .5; cursor: not-allowed; }

button, .actions button, .login-box button { transition: transform var(--transition-duration-base) ease, filter var(--transition-duration-fast) ease; }
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

@media (min-width: 768px) {
  .wrap { padding: 16px; }
}

@media (min-width: 1280px) {
  .board { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* Incremento visual 6 (docs/25 sección F.5) — skeleton del tablero, solo el
   primer intento de carga. */
.board-skeleton-card { height: 140px; width: 100%; }