@charset "UTF-8";
/* =========================================================================================
   SANTO PECADO SMASHBURGER · comanda.css — LA FIRMA «LA COMANDA» (dueño: frente S04)
   Fichero: web/estilos/comanda.css        Contrato: SPEC-F2-secciones §5
   -----------------------------------------------------------------------------------------
   QUÉ ES: el ticket de comanda de cocina, fijo en el borde de la página y presente de
   principio a fin. Papel (--sup-clara) con la tipografía de la casa, la cabecera en
   granate con tinta blanca (9,65:1) y el sello del local. El scroll no lo mueve: lo
   escribe (lo hace web/js/comanda.js).

   DESKTOP: ticket fijo en el borde derecho, colgado del centro.
   MÓVIL  : chip fino abajo que crece al toque y encoge solo (panel que sube con
            transform + opacity; nunca se anima nada más).
   REDUCED MOTION: las líneas aparecen sin caída, con la marca de tinta estática.

   REGLAS: 0 HEX literales; sin transition:all; solo transform / opacity / clip-path.
   Contraste: sobre el papel la tinta es negra (21:1) y el granate se usa como adorno de
   texto grande y como bloque; la mostaza solo como FONDO de la línea destacada, con tinta
   negra encima (11,41:1). El granate nunca es tinta sobre negro (MARCA §2.2).
   ========================================================================================= */

.sp-comanda {
  position: fixed;
  z-index: var(--z-cabecera);
  right: var(--esp-5);
  top: 50%;
  width: min(17rem, 24vw);
  transform: translateY(-50%) rotate(-1.1deg);
  pointer-events: none;               /* nunca roba clics a la página: solo su papel responde */
  font-family: var(--fuente-texto);
  color: var(--tinta-sobre-clara);
}

/* ------------------------------------------------------------------- el papel ---------- */
.sp-comanda__panel {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  max-height: min(72svh, 38rem);
  overflow: hidden;
  background-color: var(--sup-clara);
  color: var(--tinta-sobre-clara);
  border-top: 3px solid var(--sp-granate);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-alta), var(--sombra-tarjeta);
  transition:
    transform var(--dur-3) var(--ease-salida),
    opacity var(--dur-3) var(--ease-salida);
}

.sp-comanda__cabecera {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background-color: var(--sp-granate);
  color: var(--tinta-sobre-granate);
}
.sp-comanda__sello {
  --sello-tam: 4.6rem;
  --sello-tinta: var(--sp-blanco);
  flex: none;
}
.sp-comanda__datos { min-width: 0; }
.sp-comanda__local {
  margin: 0;
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-small);
  line-height: var(--lh-rotulo);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-sobre-granate);
}
.sp-comanda__dir {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-compacto);
  color: var(--tinta-sobre-granate);
  opacity: .88;
}
.sp-comanda__dir:empty { display: none; }

/* La comanda servida (el cierre del acto 11): banda mostaza con tinta negra. */
.sp-comanda__estado {
  display: none;
  margin: 0;
  padding: var(--esp-2) var(--esp-4);
  background-color: var(--sp-mostaza);
  color: var(--tinta-sobre-mostaza);
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
}
.sp-comanda.is-cerrada .sp-comanda__estado { display: block; }

/* El cierre es un recibo: la lista entera tiene que caber. Medido en el laboratorio F2-T11
   (acto 11, fondo real de la página): con el límite general, la 9ª línea («10 x Pecados»)
   quedaba cortada a media altura — 34 px en escritorio y 193 px en móvil de lista sin ver,
   y el corte se lee como texto roto, no como «hay más». El panel del cierre tiene el carril
   reservado por el footer y no tapa contenido, así que se le da la altura que necesita. */
.sp-comanda.is-cerrada .sp-comanda__panel {
  max-height: min(84svh, 42rem);
}

/* ------------------------------------------------------------------- las líneas -------- */
.sp-comanda__lineas {
  margin: 0;
  padding: var(--esp-2) var(--esp-4) var(--esp-3);
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sp-comanda__lineas:empty { padding-bottom: var(--esp-4); }

.sp-comanda__linea {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-5);
  border-bottom: 1px dashed color-mix(in oklab, var(--sp-negro) 26%, transparent);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-pequeno);
  color: var(--tinta-sobre-clara);
  animation: sp-comanda-cae var(--dur-4) both;
}
.sp-comanda__linea:last-child { border-bottom: 0; }

/* Marca de tinta de cada línea (el golpe del tampón). Con reduced motion queda estática. */
.sp-comanda__linea::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: .5rem;
  height: .5rem;
  margin-top: -.25rem;
  background-color: var(--sp-mostaza);
  border-radius: var(--radio-xs);
  animation: sp-comanda-tinta var(--dur-5) var(--ease-entrada) both;
}

.sp-comanda__qty {
  flex: none;
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--ls-cta);
  color: var(--sp-granate);              /* granate sobre papel claro: 9,65:1 */
}
.sp-comanda__nom {
  font-weight: var(--peso-texto-bold);
  line-height: var(--lh-compacto);
}

/* Línea protagonista (la del acto 4, al pararse el visitante): fondo mostaza, tinta negra. */
.sp-comanda__linea.is-premio {
  border-bottom-color: transparent;
  border-radius: var(--radio-sm);
  padding-inline: var(--esp-3);
  background-color: var(--sp-mostaza);
  color: var(--tinta-sobre-mostaza);
  box-shadow: var(--sombra-mostaza);
}
.sp-comanda__linea.is-premio .sp-comanda__qty { color: var(--tinta-sobre-mostaza); }
.sp-comanda__linea.is-premio::before { background-color: var(--sp-negro); }

@keyframes sp-comanda-cae {
  from { opacity: 0; transform: translate3d(0, -.55rem, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes sp-comanda-tinta {
  from { opacity: 0; transform: scale(2.2); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------------------------- el pie ------------ */
.sp-comanda__pie {
  padding: var(--esp-3) var(--esp-4) var(--esp-4);
  border-top: 1px solid color-mix(in oklab, var(--sp-negro) 14%, transparent);
}
.sp-comanda__pie[hidden] { display: none; }
.sp-comanda__boton { width: 100%; }

/* ------------------------------------------------------------------- el chip (móvil) --- */
.sp-comanda__chip { display: none; }

/* =========================================================================================
   MÓVIL — el ticket se corta: chip fino abajo, panel que sube al toque y encoge solo.
   ========================================================================================= */
@media (max-width: 900px) {
  .sp-comanda {
    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    width: auto;
    transform: none;
  }

  .sp-comanda__chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    width: fit-content;
    margin: 0 auto var(--esp-3);
    padding: var(--esp-2) var(--esp-5);
    min-height: 2.25rem;                        /* chip fino */
    pointer-events: auto;
    cursor: pointer;
    background-color: var(--sup-clara);
    color: var(--sp-granate);
    border: 2px solid var(--sp-granate);
    border-radius: var(--radio-pill);
    font-family: var(--fuente-rotulo);
    font-weight: var(--peso-rotulo);
    font-size: var(--fs-small);
    line-height: var(--lh-rotulo);
    letter-spacing: var(--ls-rotulo);
    text-transform: uppercase;
    box-shadow: var(--sombra-alta);
    transition: transform var(--dur-2) var(--ease-salida);
  }
  .sp-comanda__chip:active { transform: translateY(1px); }
  .sp-comanda__chip-marca {
    width: .5rem;
    height: .5rem;
    background-color: currentColor;
    -webkit-mask: url('../img/iconos/icono-flecha.svg') center / contain no-repeat;
    mask: url('../img/iconos/icono-flecha.svg') center / contain no-repeat;
    transform: rotate(180deg);                   /* apunta hacia arriba: el panel sube */
    transition: transform var(--dur-2) var(--ease-salida);
  }
  .sp-comanda--abierta .sp-comanda__chip-marca { transform: none; }
  .sp-comanda--activa .sp-comanda__chip { box-shadow: var(--sombra-alta), var(--sombra-mostaza); }

  .sp-comanda__panel {
    position: absolute;
    left: var(--esp-4);
    right: var(--esp-4);
    bottom: 100%;
    margin-bottom: var(--esp-2);
    max-height: min(56svh, 24rem);
    transform: translateY(calc(100% + 1.5rem));
    opacity: 0;
    pointer-events: none;
    /* F8-T04: un panel plegado NO puede seguir en el orden de tabulación (medido: tabulando en
       el cierre se llegaba al recibo y a su botón «Pedir» con el panel a opacidad 0). Con
       `visibility: hidden` sale del recorrido del teclado y del lector de pantalla, y el
       retardo de la transición conserva el deslizamiento de cierre. */
    visibility: hidden;
    transition: opacity var(--dur-3) var(--ease-salida), visibility 0s linear var(--dur-3);
  }
  .sp-comanda--abierta .sp-comanda__panel {
    transform: none;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity var(--dur-3) var(--ease-salida), visibility 0s;
  }

  /* Cierre en móvil: la lista del recibo (9 líneas) no cabe en el límite general; con el
     cierre abierto el panel sube lo necesario para que se lea entera (medido: 193 px de
     lista fuera en el laboratorio F2-T11). Sigue siendo un panel que abre el visitante. */
  .sp-comanda.is-cerrada .sp-comanda__panel {
    max-height: min(74svh, 36rem);
  }
}

/* =========================================================================================
   PREFERS-REDUCED-MOTION — sin caída: la línea aparece de golpe con su marca de tinta
   estática (el significado se conserva; lo que se quita es el movimiento).
   ========================================================================================= */
@media (prefers-reduced-motion: reduce) {
  .sp-comanda__linea,
  .sp-comanda__linea::before {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .sp-comanda { transform: translateY(-50%); }    /* sin giro decorativo */
  .sp-comanda__chip:active { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .sp-comanda { transform: none; }
}