/* ==========================================================================
   BRASA — capa de equivalencias
   Las pantallas de administración se escribieron con nombres de clase de una
   generación anterior. Aquí cada uno resuelve al objeto equivalente del
   sistema, para que toda la plataforma hable el mismo idioma visual sin
   reescribir veintitrés pantallas línea por línea.
   Esta capa debe encoger: cada pantalla que adopte el vocabulario nativo
   permite borrar un bloque.
   ========================================================================== */

/* --- Superficies ---------------------------------------------------------- */
.card, .panel, .plate {
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  border: 0;
}
.card-hover { transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.divide-soft > * + * { border-top: 1px solid var(--line-2); }
.truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.glass { background: var(--paper); }

/* --- Botones: variantes sobre la base del sistema ------------------------- */
.btn-primary   { --btn-bg: var(--brasa);   --btn-fg: var(--brasa-on);   --btn-bg-h: var(--brasa-deep);   --btn-sh: var(--sh-brasa); }
.btn-success   { --btn-bg: var(--verde);   --btn-fg: var(--verde-on);   --btn-bg-h: var(--verde-deep);   --btn-sh: var(--sh-verde); }
.btn-danger    { --btn-bg: var(--brasa);   --btn-fg: var(--brasa-on);   --btn-bg-h: var(--brasa-deep); }
.btn-warning   { --btn-bg: var(--oro);     --btn-fg: var(--oro-on);     --btn-bg-h: var(--oro-lit);      --btn-sh: var(--sh-oro); }
.btn-dark      { --btn-bg: var(--coal-800);--btn-fg: var(--coal-ink);   --btn-bg-h: var(--coal-700); }
.btn-secondary { --btn-bg: var(--cream-2); --btn-fg: var(--ink);        --btn-bg-h: var(--cream-3); }
.btn-outline   { --btn-bg: transparent;    --btn-fg: var(--ink);        --btn-bg-h: var(--cream-2); box-shadow: inset 0 0 0 2px var(--cream-3); }
.btn-ghost     { --btn-bg: transparent;    --btn-fg: var(--ink-2);      --btn-bg-h: var(--cream-2); }

.btn.btn-xs    { min-height: 32px; padding: 0 .75rem; font-size: .8125rem; gap: .3125rem; }
.btn.btn-xs svg{ width: 15px; height: 15px; }
.btn.btn-sm    { min-height: 38px; padding: 0 1rem; font-size: .875rem; }
.btn.btn-sm svg{ width: 17px; height: 17px; }
.btn.btn-lg    { min-height: 52px; padding: 0 1.75rem; font-size: 1rem; }
.btn.btn-xl    { min-height: 60px; padding: 0 2rem; font-size: 1.0625rem; }
.btn.btn-block { display: flex; width: 100%; }
.btn.btn-icon  { padding: 0; width: 44px; }
.btn.btn-icon.btn-xs { width: 32px; }
.btn.btn-icon.btn-sm { width: 38px; }
.btn.btn-icon.btn-lg { width: 52px; }

/* --- Campos --------------------------------------------------------------- */
.input {
  width: 100%; min-height: 48px; padding: .6875rem 1rem;
  font-family: inherit; font-size: .9375rem; font-weight: 500; color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--cream-3);
  border-radius: var(--r-sm);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.input::placeholder { color: var(--ink-3); font-weight: 500; }
.input:hover { border-color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--brasa); box-shadow: 0 0 0 4px var(--brasa-soft); }
.input:disabled { background: var(--cream-2); color: var(--ink-3); cursor: not-allowed; border-color: var(--cream-2); }
.input-sm  { min-height: 40px; padding: .4375rem .75rem; font-size: .875rem; border-radius: var(--r-xs); }
.input-lg  { min-height: 56px; font-size: 1.0625rem; }
.input-error { border-color: var(--brasa) !important; }
.input-error:focus { box-shadow: 0 0 0 4px var(--brasa-soft) !important; }

.label {
  display: block; margin-bottom: .4375rem;
  font-size: .8125rem; font-weight: 700; color: var(--ink-2);
  letter-spacing: -.005em; text-transform: none;
}
.help { margin-top: .375rem; font-size: .8125rem; color: var(--ink-3); }
.error-text { margin-top: .375rem; font-size: .8125rem; color: var(--brasa-deep); font-weight: 600; }

.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-left: 2.875rem; }
.input-group .input-icon {
  position: absolute; left: 1rem; width: 19px; height: 19px;
  color: var(--ink-3); pointer-events: none; z-index: 1;
}

.checkbox, .radio {
  appearance: none; width: 22px; height: 22px; flex: none;
  border: 2px solid var(--cream-3); background: var(--paper);
  cursor: pointer; position: relative;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.checkbox { border-radius: var(--r-xs); }
.radio { border-radius: 50%; }
.checkbox:checked, .radio:checked { background: var(--brasa); border-color: var(--brasa); }
.checkbox:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; border-radius: 1px; transform: rotate(43deg);
}
.radio:checked::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }

.switch-track {
  width: 50px; height: 30px; flex: none;
  border-radius: var(--r-pill);
  background: var(--cream-3); position: relative;
  transition: background-color var(--med) var(--ease);
}
.switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: var(--sh-1);
  transition: transform var(--med) var(--pop);
}
.switch input:checked + .switch-track { background: var(--verde); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--azul); outline-offset: 2px; }

/* --- Marcas de estado ----------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .25rem .625rem;
  border-radius: var(--r-pill);
  font-size: .75rem; font-weight: 700; white-space: nowrap;
  background: var(--grafito-soft); color: var(--grafito-deep);
}
.badge svg { width: 14px; height: 14px; flex: none; }
.badge-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-slate                 { background: var(--grafito-soft); color: var(--grafito-deep); }
.badge-blue, .badge-cyan     { background: var(--azul-soft);    color: var(--azul-deep); }
.badge-emerald               { background: var(--verde-soft);   color: var(--verde-deep); }
.badge-amber                 { background: var(--oro-soft);     color: var(--oro-deep); }
.badge-orange                { background: var(--naranja-soft); color: var(--naranja-deep); }
.badge-rose, .badge-pink     { background: var(--brasa-soft);   color: var(--brasa-deep); }
.badge-violet, .badge-indigo { background: var(--uva-soft);     color: var(--uva-deep); }
.badge-solid-blue    { background: var(--azul);  color: #fff; }
.badge-solid-emerald { background: var(--verde); color: #fff; }
.badge-solid-rose    { background: var(--brasa); color: #fff; }
.badge-solid-amber   { background: var(--oro);   color: var(--oro-on); }

/* --- Filtros y pestañas --------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: .4375rem;
  min-height: 38px; padding: 0 .875rem; flex: none;
  border-radius: var(--r-pill);
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--cream-3);
  font-family: inherit; font-size: .8125rem; font-weight: 700; color: var(--ink-2);
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease), transform var(--fast) var(--pop);
}
.chip:hover  { box-shadow: inset 0 0 0 2px var(--ink-3); color: var(--ink); }
.chip:active { transform: scale(.95); }
.chip.is-active { background: var(--coal-900); color: #fff; box-shadow: none; }

.tabs {
  display: inline-flex; gap: .25rem; padding: .3125rem;
  background: var(--cream-2); border-radius: var(--r-pill);
  border-bottom: 0; overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  min-height: 38px; padding: 0 1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .4375rem;
  border-radius: var(--r-pill);
  font-family: inherit; font-size: .875rem; font-weight: 700;
  color: var(--ink-2); white-space: nowrap; cursor: pointer;
  border-bottom: 0; margin-bottom: 0;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.tab:hover { color: var(--ink); }
.tab.is-active { background: var(--paper); color: var(--ink); box-shadow: var(--sh-1); }

/* --- Tablas --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--cream-2);
  padding: .75rem 1rem; text-align: left; white-space: nowrap;
  font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 0;
}
.table tbody td {
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2); vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--fast) var(--ease); }
.table tbody tr:hover { background: var(--cream); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-compact tbody td { padding: .5625rem .75rem; }

/* --- Instrumentos --------------------------------------------------------- */
.stat-card {
  background: var(--paper); border: 0;
  border-radius: var(--r-md);
  padding: 1.125rem 1.25rem;
  box-shadow: var(--sh-1);
  position: relative;
  /* La tarjeta se mide a sí misma para que la cifra se adapte a su columna.
     Sin esto, una cifra es una sola palabra que no se parte: empuja la columna,
     la columna empuja la rejilla y el documento entero acaba más ancho que la
     ventana. Pasaba en reportes, 1069px en una ventana de 1024. */
  container-type: inline-size;
}
/* Nada dentro de la tarjeta puede negarse a encoger. */
.stat-card > *, .stat-card > * > * { min-width: 0; }
.stat-label {
  font-size: .6875rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.stat-value {
  margin-top: .3125rem;
  /* Grande cuando hay sitio, y nunca más ancha que su tarjeta. El suelo de
     1.125rem se sostiene: por debajo, una cifra de dinero deja de leerse de un
     vistazo, que es lo único que se le pide a una tarjeta de estas. */
  font-size: clamp(1.125rem, 13cqi, 1.875rem);
  font-weight: 900; letter-spacing: -.035em; line-height: 1.05;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.stat-delta { margin-top: .375rem; display: inline-flex; align-items: center; gap: .3125rem; font-size: .8125rem; font-weight: 700; }
.stat-delta.up   { color: var(--verde-deep); }
.stat-delta.down { color: var(--brasa-deep); }
.stat-icon {
  width: 42px; height: 42px; flex: none;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
}

/* --- Capas flotantes ------------------------------------------------------ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(26, 21, 18, .5);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--med) var(--ease);
}
.modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.modal-box {
  width: 100%; max-width: 34rem; max-height: calc(100vh - 2rem);
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
  transform: translateY(16px) scale(.97); opacity: 0;
  transition: transform var(--med) var(--pop), opacity var(--fast) var(--ease);
}
.modal-backdrop.is-open .modal-box { transform: none; opacity: 1; }
.modal-sm { max-width: 26rem; } .modal-lg { max-width: 48rem; }
.modal-xl { max-width: 68rem; } .modal-full { max-width: calc(100vw - 2rem); height: calc(100vh - 2rem); }
.modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 0; flex: none;
}
.modal-body { padding: 0 1.5rem 1.5rem; overflow-y: auto; overscroll-behavior: contain; flex: 1; }
.modal-footer {
  display: flex; align-items: center; gap: .625rem; justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--line-2);
  background: var(--cream);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  flex: none;
}

/* --- Carga y vacío -------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--cream-2) 25%, var(--cream-3) 37%, var(--cream-2) 63%);
  background-size: 300% 100%;
  border-radius: var(--r-sm);
  animation: wait-pan 1.4s ease-in-out infinite;
}
.spinner {
  width: 18px; height: 18px; flex: none;
  border: 2.5px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin 640ms linear infinite; opacity: .85;
}
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 3rem 1.5rem; text-align: center;
}
.empty-state h3 { font-size: 1.0625rem; font-weight: 800; color: var(--ink); }
.empty-state p  { font-size: .875rem; color: var(--ink-3); max-width: 34ch; }
.empty-state svg { width: 40px; height: 40px; color: var(--ink-3); margin-bottom: .375rem; }

/* --- Retrato -------------------------------------------------------------- */
.avatar {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--coal-800); color: #fff;
  font-size: .8125rem; font-weight: 800; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 32px; height: 32px; font-size: .6875rem; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.0625rem; }

/* --- Contador ------------------------------------------------------------- */
.qty-stepper {
  display: inline-flex; align-items: center;
  background: var(--cream-2); border: 0;
  border-radius: var(--r-pill); padding: .25rem;
  overflow: visible;
}
.qty-stepper button {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink);
  box-shadow: var(--sh-1);
  font-family: inherit; font-size: 1rem; font-weight: 800; cursor: pointer;
  transition: transform var(--fast) var(--pop), background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.qty-stepper button:hover:not(:disabled)  { background: var(--brasa); color: #fff; }
.qty-stepper button:active:not(:disabled) { transform: scale(.88); }
.qty-stepper button:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.qty-stepper .qty-value {
  min-width: 40px; padding: 0 .375rem; text-align: center;
  border: 0;
  font-size: .9375rem; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* --- Opción escogible ----------------------------------------------------- */
.mod-option {
  display: flex; align-items: center; gap: .75rem;
  min-height: 52px; padding: .625rem .875rem;
  background: var(--paper);
  border: 0;
  box-shadow: inset 0 0 0 2px var(--cream-3);
  border-radius: var(--r-sm);
  cursor: pointer; text-align: left;
  transition: box-shadow var(--fast) var(--ease), background-color var(--fast) var(--ease), transform var(--fast) var(--pop);
}
.mod-option:hover  { box-shadow: inset 0 0 0 2px var(--ink-3); }
.mod-option:active { transform: scale(.99); }
.mod-option.is-selected {
  background: var(--brasa-soft);
  box-shadow: inset 0 0 0 2.5px var(--brasa);
}

/* --- Caja de medios ------------------------------------------------------- */
.media-box { position: relative; flex: none; overflow: hidden; background: var(--cream-2); border-radius: var(--r-sm); }
.media-box > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card > .media-box:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
.media-4-3  { aspect-ratio: 4/3; height: auto; }
.media-16-9 { aspect-ratio: 16/9; height: auto; }
.media-1-1  { aspect-ratio: 1; height: auto; }

/* --- Mesas del salón ------------------------------------------------------ */
.table-card {
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1875rem;
  padding: .75rem; text-align: center; cursor: pointer; position: relative;
  background: var(--paper); border: 0;
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.table-card:hover  { transform: translateY(-3px); box-shadow: var(--sh-2); }
.table-card:active { transform: scale(.97); }
.table-card .t-name  { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.table-card .t-meta  { font-size: .75rem; font-weight: 600; color: var(--ink-3); }
.table-card .t-total { font-size: .875rem; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.table-card .t-flag  { display: none; }
.table-card .t-call  {
  position: absolute; top: .5rem; right: .5rem;
  padding: .125rem .4375rem; border-radius: var(--r-pill);
  background: var(--brasa); color: #fff;
  font-size: .625rem; font-weight: 900; letter-spacing: .04em;
  animation: blink 1.1s steps(2, jump-none) infinite;
}
.table-card.st-available { background: var(--verde-soft); }
.table-card.st-available .t-total { color: var(--verde-deep); }
.table-card.st-occupied  { background: var(--azul-soft); }
.table-card.st-ordered,
.table-card.st-preparing { background: var(--naranja-soft); }
.table-card.st-ready     { background: var(--verde); box-shadow: var(--sh-verde); }
.table-card.st-ready .t-name,
.table-card.st-ready .t-meta,
.table-card.st-ready .t-total { color: #fff; }
.table-card.st-billing   { background: var(--uva-soft); }
.table-card.st-reserved  { background: var(--grafito-soft); }
.table-card.st-disabled  { background: var(--cream-2); opacity: .5; cursor: not-allowed; }

/* --- Herramienta emergente ------------------------------------------------ */
.tooltip { position: relative; }
.tooltip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: .375rem .625rem; border-radius: var(--r-xs);
  background: var(--coal-900); color: #fff;
  font-size: .75rem; font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 85;
  box-shadow: var(--sh-2);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--pop);
}
.tooltip:hover::after { opacity: 1; transform: translateX(-50%); }

/* --- Rótulo de producto heredado ------------------------------------------ */
.product-badge {
  padding: .1875rem .5rem; border-radius: var(--r-pill);
  font-size: .6875rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  background: var(--coal-900); color: #fff;
}
.product-badge.hot   { background: var(--oro);     color: var(--oro-on); }
.product-badge.new   { background: var(--azul);    color: #fff; }
.product-badge.must  { background: var(--uva);     color: #fff; }
.product-badge.out   { background: var(--grafito); color: #fff; }

/* --- Selector de icono de categoría --------------------------------------- */
.icon-grid { display: grid; gap: .375rem; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
.icon-key {
  min-height: 52px; display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--cream-2); color: var(--ink-2); cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--pop);
}
.icon-key:hover  { background: var(--cream-3); color: var(--ink); }
.icon-key:active { transform: scale(.92); }
.icon-key.is-on  { background: var(--brasa); color: #fff; box-shadow: var(--sh-brasa); }
.cat-mark { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); }

/* --- Restos del vocabulario anterior -------------------------------------- */
.plate-label {
  font-size: .6875rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.filter {
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: 38px; padding: 0 .875rem; flex: none;
  border-radius: var(--r-pill);
  background: var(--paper); box-shadow: inset 0 0 0 2px var(--cream-3);
  font-family: inherit; font-size: .8125rem; font-weight: 700; color: var(--ink-2);
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.filter:hover { box-shadow: inset 0 0 0 2px var(--ink-3); color: var(--ink); }
.filter.is-active, .filter.is-on, .filter[aria-pressed="true"] {
  background: var(--coal-900); color: #fff; box-shadow: none;
}
.level { height: 8px; background: var(--cream-2); border-radius: var(--r-pill); overflow: hidden; }
.level > i {
  display: block; height: 100%; width: 100%;
  background: var(--verde); border-radius: var(--r-pill);
  transform-origin: left center; transform: scaleX(var(--level, 0));
  transition: transform var(--slow) var(--ease);
}
.level--brasa > i, .level--red > i   { background: var(--brasa); }
.level--amber > i, .level--oro > i   { background: var(--oro); }
.level--naranja > i                  { background: var(--naranja); }
.level--azul > i, .level--blue > i   { background: var(--azul); }
.level--green > i, .level--verde > i { background: var(--verde); }
.level--slate > i, .level--grafito > i { background: var(--grafito); }
.tagname {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--coal-800); color: #fff;
  font-size: .8125rem; font-weight: 800; overflow: hidden;
}
.tagname--sm { width: 32px; height: 32px; font-size: .6875rem; }
.tagname--lg { width: 56px; height: 56px; font-size: 1.0625rem; }
.notice-line {
  display: flex; align-items: flex-start; gap: .5rem;
  margin-top: .375rem; padding: .5rem .75rem;
  border-radius: var(--r-xs);
  background: var(--oro-soft); color: var(--oro-deep);
  font-size: .8125rem; font-weight: 600; line-height: 1.4;
}
.notice-line svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.seam-y { width: 1px; height: 24px; background: var(--line); flex: none; }
.menu-pop {
  position: absolute; z-index: 80;
  min-width: 12rem; padding: .4375rem;
  background: var(--paper); border-radius: var(--r-md);
  box-shadow: var(--sh-3);
}
.menu-pop a, .menu-pop button {
  display: flex; align-items: center; gap: .625rem; width: 100%;
  padding: .625rem .75rem; border-radius: var(--r-xs);
  font-size: .875rem; font-weight: 600; color: var(--ink-2);
  text-align: left; cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.menu-pop a:hover, .menu-pop button:hover { background: var(--cream-2); color: var(--ink); }
.menu-pop a svg, .menu-pop button svg { width: 18px; height: 18px; flex: none; }
.menu-pop hr { margin: .3125rem .25rem; }

/* --- Movimiento heredado -------------------------------------------------- */
.slide-up { animation: rise var(--med) var(--pop); }
.pop-in   { animation: fade-in var(--fast) var(--ease); }
.scrollbar-hidden { scrollbar-width: none; }
.scrollbar-hidden::-webkit-scrollbar { display: none; }

/* ==========================================================================
   LAS MEDIDAS MANDAN
   Un campo o un botón declara su propio ancho para verse bien solo; cuando la
   pantalla le pone `w-40` encima, esa medida es una decisión de composición y
   debe ganar. Por eso estas reglas van al final de todo.
   ========================================================================== */
.w-auto{width:auto}.w-full{width:100%}.w-screen{width:100vw}.w-px{width:1px}.w-fit{width:fit-content}
.w-1{width:.25rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}
.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-10{width:2.5rem}
.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-20{width:5rem}
.w-24{width:6rem}.w-28{width:7rem}.w-32{width:8rem}.w-36{width:9rem}.w-40{width:10rem}
.w-44{width:11rem}.w-48{width:12rem}.w-52{width:13rem}.w-56{width:14rem}.w-64{width:16rem}
.w-72{width:18rem}.w-80{width:20rem}.w-96{width:24rem}
.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.h-px{height:1px}
.h-1{height:.25rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}
.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-10{height:2.5rem}
.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-20{height:5rem}
.h-24{height:6rem}.h-28{height:7rem}.h-32{height:8rem}.h-40{height:10rem}.h-44{height:11rem}
.h-48{height:12rem}.h-52{height:13rem}.h-56{height:14rem}.h-64{height:16rem}.h-80{height:20rem}
.min-w-0{min-width:0}.min-h-0{min-height:0}.min-h-screen{min-height:100vh}.min-w-full{min-width:100%}
.max-w-xs{max-width:20rem}.max-w-sm{max-width:24rem}.max-w-md{max-width:28rem}.max-w-lg{max-width:32rem}
.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}
.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-full{max-width:100%}
.max-w-32{max-width:8rem}.max-w-40{max-width:10rem}.max-w-48{max-width:12rem}.max-w-96{max-width:24rem}
.max-h-full{max-height:100%}.max-h-screen{max-height:100vh}.max-h-40{max-height:10rem}
.max-h-56{max-height:14rem}.max-h-64{max-height:16rem}.max-h-72{max-height:18rem}.max-h-80{max-height:20rem}
.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-none{flex:none}.flex-initial{flex:0 1 auto}
.grow{flex-grow:1;min-width:0}.grow-0{flex-grow:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}

/* Ocultar es una orden; las variantes por ancho pesan lo mismo para poder
   volver a mostrar lo que `hidden` escondió. */
.hidden { display: none !important; }
[hidden] { display: none !important; }
@media (min-width: 640px) {
  .sm\:hidden { display: none !important; }
  .sm\:block { display: block !important; } .sm\:flex { display: flex !important; }
  .sm\:inline { display: inline !important; } .sm\:inline-block { display: inline-block !important; }
  .sm\:inline-flex { display: inline-flex !important; } .sm\:grid { display: grid !important; }
}
@media (min-width: 768px) {
  .md\:hidden { display: none !important; }
  .md\:block { display: block !important; } .md\:flex { display: flex !important; }
  .md\:inline { display: inline !important; } .md\:inline-block { display: inline-block !important; }
  .md\:inline-flex { display: inline-flex !important; } .md\:grid { display: grid !important; }
}
@media (min-width: 1024px) {
  .lg\:hidden { display: none !important; }
  .lg\:block { display: block !important; } .lg\:flex { display: flex !important; }
  .lg\:inline { display: inline !important; } .lg\:inline-block { display: inline-block !important; }
  .lg\:inline-flex { display: inline-flex !important; } .lg\:grid { display: grid !important; }
}
@media (min-width: 1280px) {
  .xl\:hidden { display: none !important; }
  .xl\:block { display: block !important; } .xl\:flex { display: flex !important; }
  .xl\:inline-flex { display: inline-flex !important; } .xl\:grid { display: grid !important; }
}

/* ==========================================================================
   PISO DE OBJETIVO TÁCTIL
   Va al final de esta hoja porque es la última en cargarse: aquí ninguna
   equivalencia heredada puede volver a encoger un control.
   ========================================================================== */
.check, .radio, .checkbox { width: 24px; height: 24px; }
.check:checked::after, .checkbox:checked::after { left: 7px; top: 3px; }

.btn.btn-sm, .btn--sm   { min-height: 38px; }
.btn.btn-xs, .btn--xs   { min-height: 34px; }
.btn.btn-icon.btn-xs, .btn--round.btn--xs { width: 34px; }

/* Un enlace que es una acción por sí solo —no una palabra dentro de un
   párrafo— también es algo que se pulsa. */
.card a:not(.btn):not(.rail-link),
.grid-table a:not(.btn), .table a:not(.btn),
.stat a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 24px;
}
.check, .radio, .checkbox { width: 26px; height: 26px; }
.check:checked::after, .checkbox:checked::after { left: 8px; top: 4px; height: 11px; }

/* ==========================================================================
   PANTALLA ESTRECHA
   Lo que en un escritorio cabe en una fila, en un teléfono se desplaza o se
   envuelve. Nada empuja el documento a lo ancho: una página que se mueve en
   horizontal se siente rota aunque no lo esté.
   ========================================================================== */

/* Las pestañas y los carriles de filtro se desplazan dentro de su caja. */
.tabs, .tab-row {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar, .tab-row::-webkit-scrollbar { display: none; }

/* Un botón nunca se deja aplastar hasta perder su icono. */
.btn { flex-shrink: 0; }
.btn.btn-block, .btn--block { flex-shrink: 1; }

/* Toda tabla se desplaza dentro de su tarjeta, esté o no envuelta. En
   pantalla ancha la tabla ocupa lo que hay; solo cuando no cabe se le
   permite crecer y desplazarse. */
.table-wrap, .table-scroll { overflow-x: auto; max-width: 100%; }
.card > .table, .card > .grid-table { display: block; overflow-x: auto; }
@media (max-width: 1023px) {
  .table, .grid-table { min-width: max-content; }
}

@media (max-width: 767px) {
  /* Las acciones de la barra se desplazan en vez de desbordar. */
  .bar-acts {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .bar-acts::-webkit-scrollbar { display: none; }
  .bar { flex-wrap: wrap; }
  /* Las rejillas de dos columnas se apilan. */
  .lg\:col-span-2, .md\:col-span-2 { min-width: 0; }
  .grid { min-width: 0; }
}

/* `.tabs` era inline-flex y por eso su ancho máximo no lo contenía: pasa a
   flex en línea propia, que es como se usa en todas las pantallas. */
.tabs { display: flex; width: fit-content; max-width: 100%; }
.tabs .tab { flex: none; }

/* --------------------------------------------------------------------------
   EL TECLADO DEL TELÉFONO

   iOS amplía la página al enfocar un campo cuya letra baje de 16 px, y al
   ampliarla descuadra todo lo demás: el usuario termina pellizcando la
   pantalla para volver. No es una preferencia del sistema operativo que se
   pueda apagar; la única defensa es no bajar de 16 en el teléfono.

   En escritorio se conservan los 15 px, que es lo que pide la retícula.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .field, .select, .textarea,
  .field--sm, .select--sm,
  .input, .input-sm, .textarea-sm,
  input[type="text"], input[type="search"], input[type="number"],
  input[type="tel"], input[type="email"], input[type="password"],
  input[type="date"], input[type="time"], select, textarea {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   EL PIE DE UN DIÁLOGO EN UNA PANTALLA ESTRECHA

   Un pie con `justify-content: flex-end` que no cabe no recorta por la
   derecha: empuja sus botones **fuera del borde izquierdo**, donde no hay
   forma de alcanzarlos ni desplazándose. En un teléfono de 320 px, «Cancelar»
   quedaba medio fuera en cinco diálogos del panel y no había manera de
   pulsarlo entero.

   La solución no es encoger la letra: es dejar que el pie se envuelva y que
   los botones ocupen la línea, que además es más fácil de acertar con el dedo.
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .modal-footer, .panel-foot {
    flex-wrap: wrap;
    justify-content: stretch;
    padding: .875rem 1rem;
  }
  .modal-footer > .btn, .panel-foot > .btn { flex: 1 1 8rem; }
  /* `mr-auto` separa un botón del grupo en escritorio; envuelto, ese margen
     dejaría un hueco absurdo. */
  .modal-footer > .mr-auto, .panel-foot > .mr-auto { margin-right: 0 !important; }
}

/* El escalón de cantidad y su total compiten por la misma fila dentro del
   cuadro del plato. En pantalla estrecha se reparten en dos. */
@media (max-width: 380px) {
  .modal-footer .qty-stepper, .panel-foot .qty-stepper { flex: 0 0 auto; }
  .qty-stepper button { width: 32px; height: 32px; }
}

/* ==========================================================================
   LO QUE EL MARCADO PEDÍA Y NADIE HABÍA ESCRITO

   Una clase que ninguna hoja define no falla: el elemento se queda sin estilo
   y nadie se entera. `qa/clases.php` las busca; esto las cubre. Todas salen de
   la ley de paleta y de la escala de espacio que ya usa el sistema.
   ========================================================================== */

/* --- Espacio ------------------------------------------------------------- */
.mt-2\.5{margin-top:.625rem}.mb-2\.5{margin-bottom:.625rem}
.pt-2\.5{padding-top:.625rem}.pb-0\.5{padding-bottom:.125rem}
.pt-0{padding-top:0}.pt-0\.5{padding-top:.125rem}.pt-5{padding-top:1.25rem}
.pb-20{padding-bottom:5rem}
.mx-4{margin-left:1rem;margin-right:1rem}
.space-y-0\.5>*+*{margin-top:.125rem}

/* --- Retícula y colocación ---------------------------------------------- */
.place-items-center{place-items:center}
@media (min-width:1024px){.lg\:col-span-1{grid-column:span 1/span 1}}

/* --- Tipografía ---------------------------------------------------------- */
.tracking-widest{letter-spacing:.1em}
.text-\[9px\]{font-size:11px}   /* el suelo de la casa son 11 px */

/* --- Color: los tonos más oscuros faltaban y el texto heredaba ---------- */
.text-emerald-900,.text-green-800,.text-green-900{color:var(--verde-deep)}
.text-blue-900,.text-sky-800,.text-cyan-800{color:var(--azul-deep)}
.text-red-900,.text-rose-800,.text-rose-900{color:var(--brasa-deep)}
.text-amber-900,.text-orange-800,.text-orange-900,.text-yellow-800{color:var(--oro-deep)}
.text-violet-800,.text-violet-900,.text-purple-800,.text-indigo-800{color:var(--uva-deep)}
.border-rose-200,.border-red-200{border-color:var(--brasa-soft)}
.bg-white\/95{background-color:rgba(255,255,255,.95)}
.bg-blue-50\/60{background-color:var(--azul-soft)}
.hover\:bg-amber-100:hover{background-color:var(--oro-soft)}
.opacity-40{opacity:.4}

/* --- Tiras que se deslizan a lo ancho ------------------------------------
   Una tira horizontal —las categorías de la carta, las pestañas del panel, una
   tabla ancha— escondía su barra de desplazamiento y no ofrecía nada a cambio.
   Con el dedo se resuelve solo; con un ratón, no: la tira parece una tira que
   se acabó, y lo que queda a la derecha no existe. La hoja ya lo prometía
   —«el velo del borde derecho avisa de que la tira sigue»— pero la regla nunca
   llegó a escribirse.

   `data-desliza` dice por dónde queda contenido y `data-velo` con qué se pinta
   el aviso. Los dos los pone `app.js` midiendo, no por nombre de clase: así la
   tira que se añada mañana avisa igual sin tocar nada aquí. */
[data-desliza] {
  --velo: 2.25rem;
  /* Lo pisa `app.js` con el color que midió detrás de la tira. */
  --velo-fondo: transparent;
}

/* Máscara, para la tira corriente. No hay que saber de qué color es el fondo,
   así que vale sobre crema, sobre papel y sobre carbón. */
[data-velo="mascara"][data-desliza="der"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--velo)), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - var(--velo)), transparent);
}
[data-velo="mascara"][data-desliza="izq"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--velo));
          mask-image: linear-gradient(to right, transparent, #000 var(--velo));
}
[data-velo="mascara"][data-desliza="ambos"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--velo), #000 calc(100% - var(--velo)), transparent);
          mask-image: linear-gradient(to right, transparent, #000 var(--velo), #000 calc(100% - var(--velo)), transparent);
}

/* Capa, para la tira que se queda pegada arriba mientras se recorre la carta.
   A esa no se le puede poner máscara: la máscara vuelve transparente también su
   fondo, y por el hueco asomaban los platos que van pasando por debajo. Aquí el
   velo es una capa encima, pintada del color que `app.js` midió en la propia
   tira, y el fondo se queda entero. Se pega al borde del área visible, así que
   acompaña el desplazamiento sin ocupar sitio. */
[data-velo="capa"]::before,
[data-velo="capa"]::after {
  content: "";
  position: sticky; z-index: 2;
  flex: none; width: var(--velo); align-self: stretch;
  opacity: 0; transition: opacity var(--fast) var(--ease);
  pointer-events: none;
}
[data-velo="capa"]::before {
  left: 0; margin-right: calc(var(--velo) * -1);
  background: linear-gradient(to right, var(--velo-fondo), transparent);
}
[data-velo="capa"]::after {
  right: 0; margin-left: calc(var(--velo) * -1);
  background: linear-gradient(to left, var(--velo-fondo), transparent);
}
[data-velo="capa"][data-desliza="izq"]::before,
[data-velo="capa"][data-desliza="ambos"]::before { opacity: 1; }
[data-velo="capa"][data-desliza="der"]::after,
[data-velo="capa"][data-desliza="ambos"]::after { opacity: 1; }

/* Con ratón hace falta además algo que agarrar. Aparece al acercarse y no
   antes: una barra permanente debajo de cada tira ensucia una pantalla que se
   mira durante todo un turno. */
@media (pointer: fine) {
  [data-desliza]:hover,
  [data-desliza]:focus-within {
    scrollbar-width: thin;
    scrollbar-color: var(--cream-3) transparent;
  }
  [data-desliza]:hover::-webkit-scrollbar,
  [data-desliza]:focus-within::-webkit-scrollbar { display: block; height: 8px; }
  [data-desliza]:hover::-webkit-scrollbar-track,
  [data-desliza]:focus-within::-webkit-scrollbar-track { background: transparent; }
  /* Sin los triangulitos de los extremos: son de otro siglo y no se pulsan. */
  [data-desliza]::-webkit-scrollbar-button { display: none; }
  [data-desliza]:hover::-webkit-scrollbar-thumb,
  [data-desliza]:focus-within::-webkit-scrollbar-thumb {
    background: var(--cream-3);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: var(--r-pill);
  }
  [data-desliza]:hover::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }
}