/* ==========================================================================
   CARTA DIGITAL — Don Camarón
   Se ve en el celular, sobre la mesa, con poca luz. Todo está pensado
   móvil primero: áreas táctiles grandes, barra de pedido fija abajo al
   alcance del pulgar, y contraste alto.
   ========================================================================== */

.cuerpo-carta {
  /* Espacio abajo para que la barra fija del pedido no tape el último
     platillo. La variable la ajusta el JS según si la barra está o no. */
  padding-bottom: var(--hueco-barra, 0px);
}

/* ===================== ENCABEZADO ===================== */
.carta-cabeza {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
  padding-top: env(safe-area-inset-top);
}

.carta-cabeza__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) clamp(1rem, 4vw, 2rem);
  max-width: var(--ancho-max);
  margin-inline: auto;
}

.carta-cabeza__marca {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--gold);
  white-space: nowrap;
}
.carta-cabeza__marca span { color: var(--color-foreground); opacity: 0.6; margin-right: 0.28em; }

/* --- Chip de la mesa --- */
.chip-mesa {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  font-size: var(--text-xs);
  min-height: 44px;
}
.chip-mesa__punto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(47, 125, 15, 0.20);
}
.chip-mesa__texto { color: var(--color-muted-foreground); white-space: nowrap; }
.chip-mesa__texto strong { color: var(--gold); font-weight: 700; }
.chip-mesa__editar {
  color: var(--color-foreground);
  border-left: 1px solid var(--color-border);
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  max-width: 8.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--gold-dim);
  text-underline-offset: 3px;
}
.chip-mesa__editar:hover { color: var(--gold); }

/* --- Barra de categorías --- */
.categorias {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 clamp(1rem, 4vw, 2rem) var(--space-3);
  max-width: var(--ancho-max);
  margin-inline: auto;
  scroll-snap-type: x proximity;
}
.categorias::-webkit-scrollbar { display: none; }

.categoria-btn {
  flex-shrink: 0;
  /* 44px, no 40: es lo que pide la regla de area tactil y con el pulgar
     sobre una mesa se falla seguido en 40. */
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
  white-space: nowrap;
  scroll-snap-align: start;
  transition: color var(--dur-rapida) var(--ease-suave),
              border-color var(--dur-rapida) var(--ease-suave),
              background var(--dur-rapida) var(--ease-suave);
}
.categoria-btn:hover { color: var(--color-foreground); border-color: var(--gold-dim); }
.categoria-btn[aria-current="true"] {
  color: var(--color-on-accent);
  background: var(--gold-solid);
  border-color: var(--gold-solid);
}

/* ===================== LA CARTA ===================== */
.carta {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: var(--space-8) clamp(1rem, 4vw, 2rem) var(--space-16);
}

.aviso-solo-lectura {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-6);
  margin-bottom: var(--space-12);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgba(211, 168, 87, 0.10), transparent 60%), var(--color-card);
}
.aviso-solo-lectura h2 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.aviso-solo-lectura p {
  color: var(--color-muted-foreground);
  font-size: var(--text-sm);
  font-weight: 300;
  max-width: 52ch;
}
.aviso-solo-lectura .boton { flex-shrink: 0; }

.grupo-carta { margin-bottom: clamp(2.5rem, 6vw, 4rem); scroll-margin-top: 9.5rem; }

.grupo-carta__titulo {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-foreground);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--gold-dim);
  margin-bottom: var(--space-2);
}

/* --- Un platillo --- */
.item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5, 1.25rem);
  border-bottom: 1px solid var(--color-border);
}
.item:last-child { border-bottom: none; }

.item__datos { flex: 1; min-width: 0; }
.item__nombre { font-size: var(--text-base); margin-bottom: var(--space-1); }
.item__precio {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--gold);
}
/* Cuánto trae la orden. Información de apoyo: se lee si la buscas, no
   compite con el nombre ni con el precio. */
.item__medida,
.item__opciones {
  font-size: var(--text-xs);
  color: var(--color-muted-foreground);
  margin-top: var(--space-1);
}

/* Elegir la marca de la cerveza o el sabor del agua (18 de septiembre de 2026).
   Alto de 44px como los botones redondos: es lo que pide un dedo en un celular.
   Usa los mismos tokens que el resto de la carta — ni un color suelto. */
.item__opcion { margin-top: var(--space-2); }

.item__opcion-select {
  min-height: 44px;
  width: 100%;
  max-width: 15rem;
  padding: 0 var(--space-2);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-foreground);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.item__opcion-select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Control de cantidad: 44px mínimo por botón, separados, para el pulgar */
.item__control { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }

.redondo {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-foreground);
  transition: border-color var(--dur-rapida) var(--ease-suave),
              background var(--dur-rapida) var(--ease-suave),
              color var(--dur-rapida) var(--ease-suave);
}
.redondo:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.redondo:disabled { opacity: 0.3; cursor: not-allowed; }
.redondo svg { width: 18px; height: 18px; }

.redondo--agregar {
  border-color: var(--gold-dim);
  color: var(--gold);
}
.redondo--agregar:hover { background: var(--gold-solid); border-color: var(--gold-solid); color: var(--color-on-accent); }

.item__cantidad {
  min-width: 2ch;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.carta__estado { color: var(--color-muted-foreground); }
.carta__nota {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-muted-foreground);
  line-height: 1.8;
}

/* ===================== BARRA DEL PEDIDO ===================== */
.barra-pedido {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  padding: var(--space-4) clamp(1rem, 4vw, 2rem);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--color-background) 62%, transparent);
}
.barra-pedido__boton {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  min-height: 58px;
  padding-inline: var(--space-5, 1.25rem);
  background: var(--gold-solid);
  color: var(--color-on-accent);
  border-radius: var(--radius);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--text-sm);
  box-shadow: var(--sombra-alta);
  transition: background var(--dur-rapida) var(--ease-suave);
}
.barra-pedido__boton:hover { background: var(--gold); }

.barra-pedido__cuenta {
  display: grid;
  place-items: center;
  min-width: 28px; height: 28px;
  padding-inline: var(--space-2);
  background: var(--color-on-accent);
  color: var(--gold);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.barra-pedido__texto { flex: 1; text-align: left; }
.barra-pedido__total { font-family: var(--font-display); font-size: var(--text-lg); }

/* ===================== HOJAS (pedido y nombre) ===================== */
.fondo-oscuro {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(1, 26, 56, 0.68);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: aparecer var(--dur-media) var(--ease-suave);
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

.hoja {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  max-height: 88svh;
  background: var(--color-card);
  border-top: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--sombra-alta);
  animation: subir var(--dur-media) var(--ease-suave);
}
@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }

.hoja__asa {
  width: 40px; height: 4px;
  background: var(--color-border);
  border-radius: 999px;
  margin: var(--space-3) auto 0;
}

.hoja__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) clamp(1.25rem, 5vw, 2rem) var(--space-4);
}
.hoja__cabeza h2 { font-size: var(--text-2xl); }

.hoja__cerrar {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-muted-foreground);
  flex-shrink: 0;
  transition: color var(--dur-rapida), background var(--dur-rapida);
}
.hoja__cerrar:hover { color: var(--color-foreground); background: var(--color-muted); }
.hoja__cerrar svg { width: 20px; height: 20px; }

.hoja__cuerpo {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-inline: clamp(1.25rem, 5vw, 2rem);
}

.hoja__pie {
  padding: var(--space-4) clamp(1.25rem, 5vw, 2rem);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
}
.hoja__aviso {
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}
.hoja__aviso--error { color: var(--color-destructive); border-color: var(--color-destructive); }
.hoja__aviso--ok    { color: var(--color-success);     border-color: var(--color-success); }

/* --- Lista del pedido --- */
.pedido-lista { list-style: none; padding: 0; }
.pedido-lista li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.pedido-lista__datos { flex: 1; min-width: 0; }
.pedido-lista__nombre { font-size: var(--text-sm); }
.pedido-lista__unitario { font-size: var(--text-xs); color: var(--color-muted-foreground); }
.pedido-lista__importe {
  font-family: var(--font-display);
  color: var(--gold);
  flex-shrink: 0;
  min-width: 4.5ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pedido-vacio {
  padding-block: var(--space-12);
  text-align: center;
  color: var(--color-muted-foreground);
  font-size: var(--text-sm);
}

.pedido-cuentas { padding-block: var(--space-6); }
.pedido-cuentas__fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
}
.pedido-cuentas__fila--total {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--gold);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gold-dim);
}
.pedido-cuentas__nota {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-muted-foreground);
}

/* --- Campo de texto --- */
.hoja--nombre .hoja__cuerpo { padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom)); }

.campo { display: block; margin-bottom: var(--space-6); }
.campo__etiqueta {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}
.campo__entrada {
  width: 100%;
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--text-lg);
  transition: border-color var(--dur-rapida) var(--ease-suave);
}
.campo__entrada::placeholder { color: var(--color-muted-foreground); opacity: 0.6; }
.campo__entrada:focus { border-color: var(--gold); }
.campo__entrada[aria-invalid="true"] { border-color: var(--color-destructive); }

.campo__ayuda {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-muted-foreground);
}
/* El error va junto al campo, no solo en el placeholder (regla UX) */
.campo__error {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-destructive);
}

/* ===================== AVISO FLOTANTE ===================== */
.tostada {
  position: fixed;
  left: 50%;
  bottom: calc(6.5rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 90;
  padding: var(--space-3) var(--space-6);
  background: var(--color-card);
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  font-size: var(--text-sm);
  white-space: nowrap;
  box-shadow: var(--sombra-alta);
  animation: tostar var(--dur-media) var(--ease-suave);
}
@keyframes tostar {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ===================== ESCRITORIO ===================== */
@media (min-width: 768px) {
  .hoja {
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 3rem));
    max-height: 82svh;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gold-dim);
    animation: aparecer var(--dur-media) var(--ease-suave);
  }
  .hoja__asa { display: none; }
  .hoja__cabeza { padding-top: var(--space-8); }

  .lista-carta {
    column-count: 2;
    column-gap: clamp(2.5rem, 6vw, 5rem);
  }
  /* Sin esto, una categoría se parte a la mitad entre las dos columnas */
  .grupo-carta { break-inside: avoid; }
}

@media (max-width: 480px) {
  .aviso-solo-lectura { flex-direction: column; align-items: stretch; }
  .aviso-solo-lectura .boton { width: 100%; }
  .carta-cabeza__fila { flex-wrap: wrap; }
}

/* --- Encabezado de la carta --- */
.carta__encabezado { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.carta__titulo {
  font-size: var(--text-3xl);
  margin-top: var(--space-4);
}
.carta__subtitulo {
  margin-top: var(--space-3);
  color: var(--color-muted-foreground);
  font-size: var(--text-lg);
  font-weight: 300;
}
/* En dos columnas, el encabezado debe ocupar el ancho completo, no partirse */
@media (min-width: 768px) {
  .carta__encabezado { column-span: all; }
}

.carta__legal {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-muted-foreground);
}
.carta__legal a { color: var(--gold); border-bottom: 1px solid var(--gold-dim); }

/* Área táctil de la marca y del botón de nombre. Se agranda la zona que
   responde al dedo, no el texto: el diseño se ve igual. */
.carta-cabeza__marca,
.chip-mesa__editar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* El ancho del boton del nombre depende de que tan largo sea: con "Ana" o
   "Luis" se quedaba en 38px. El minimo lo deja siempre alcanzable. */
.chip-mesa__editar { min-width: 44px; }

/* ==========================================================================
   BOTÓN DE VOLVER
   Antes solo el logo llevaba al inicio, y nadie lo adivinaba: la gente
   terminaba usando la flecha del navegador. Ahora se ve la flecha.
   ========================================================================== */
.carta-cabeza__volver {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding-right: var(--space-2);
  border-radius: var(--radius);
  transition: color var(--dur-rapida) var(--ease-suave);
}
.carta-cabeza__volver svg {
  width: 20px;
  height: 20px;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform var(--dur-media) var(--ease-suave);
}
.carta-cabeza__volver:hover svg { transform: translateX(-3px); }

/* ==========================================================================
   ELEGIR MESA
   ========================================================================== */
.aviso-solo-lectura__texto { flex: 1; min-width: min(100%, 22rem); }
.aviso-solo-lectura__acciones {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.hoja__explica {
  color: var(--color-muted-foreground);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

.rejilla-mesas {
  display: grid;
  /* Se acomodan solas: 4 por renglón en un celular, más en pantalla grande */
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--space-3);
  padding-bottom: var(--space-8);
}

.mesa-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* Cómodo para el pulgar: bastante más que el mínimo de 44px */
  min-height: 68px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-background);
  transition: border-color var(--dur-rapida) var(--ease-suave),
              background var(--dur-rapida) var(--ease-suave),
              color var(--dur-rapida) var(--ease-suave);
}
.mesa-btn:hover {
  border-color: var(--gold);
  background: var(--color-muted);
}
.mesa-btn__num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--gold);
  line-height: 1;
}
.mesa-btn__cap {
  font-size: var(--text-xs);
  color: var(--color-muted-foreground);
}

/* Una mesa ocupada se marca, pero se deja tocar: puede ser justo la suya,
   y el mesero la sentó desde el tablero antes de que ordenara. */
.mesa-btn--ocupada { opacity: 0.55; }
.mesa-btn--ocupada .mesa-btn__num { color: var(--color-muted-foreground); }

@media (max-width: 480px) {
  .aviso-solo-lectura__acciones { width: 100%; }
  .aviso-solo-lectura__acciones .boton { flex: 1 1 auto; }
}

/* ==========================================================================
   BANDA DE "VERSIÓN DE MUESTRA"
   Solo aparece en el sitio subido a internet, donde la cocina no está al
   alcance. Va arriba de todo, antes de que la persona arme su pedido:
   enterarse hasta el final de que no sirve es la peor forma de descubrirlo.
   ========================================================================== */
.banda-muestra {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: var(--ancho-max);
  margin: var(--space-6) auto 0;
  padding: var(--space-4) clamp(1rem, 4vw, 2rem);
  border: 1px solid var(--gold-dim);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: rgba(211, 168, 87, 0.10);
}
.banda-muestra svg {
  width: 22px;
  height: 22px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 1px;
}
.banda-muestra p {
  font-size: var(--text-sm);
  color: var(--color-muted-foreground);
  line-height: 1.6;
}
.banda-muestra strong { color: var(--color-foreground); }

/* ==========================================================================
   CAPA DE MARCA — 28 de agosto de 2026
   La carta pasó de negro y oro a la estética del logo. Aquí solo va lo que
   cambió; el resto del archivo es estructura ya probada.
   ========================================================================== */

/* El camarón coronado junto al nombre, igual que en la barra del sitio. */
.carta-cabeza__logo { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; }
.carta-cabeza__volver { display: inline-flex; align-items: center; gap: var(--space-2); }
.carta-cabeza__marca span { opacity: 0.65; margin-right: 0.25em; }

/* La cabecera de la carta va azul marino, como la barra del sitio: es la
   misma marca y el cliente pasa de una a otra sin sentir que cambió de
   negocio. Antes era casi negra, del tema anterior. */
.carta-cabeza {
  --color-foreground:       #FFFFFF;
  --color-muted-foreground: #B9C9DE;
  --color-border:           rgba(211, 168, 87, 0.28);
  --gold:                   var(--oro);
  --gold-dim:               rgba(211, 168, 87, 0.30);
  background: rgba(1, 26, 56, 0.96);
  color: #FFFFFF;
}

/* Los botones de categoría viven dentro de la cabecera azul. */
/* La categoria activa se marca con aria-current="true" (asi la pone
   js/menu.js, linea 192). Al principio se escribio aria-selected y la regla
   no agarraba a nadie: el boton activo se quedaba oro con letras blancas,
   1.88:1. Lo cachó la auditoria de contraste sobre la pagina pintada. */
.categoria-btn { color: var(--color-muted-foreground); }
.categoria-btn[aria-current="true"] {
  background: var(--oro);
  color: var(--azul);
  border-color: var(--oro);
}

/* La barra flotante del pedido: es el boton mas importante de la carta y
   estaba oro con letras blancas. Va en rojo, el color del logo, con blanco
   encima (5.24:1). */
.barra-pedido__boton { background: var(--rojo); color: #FFFFFF; }
.barra-pedido__boton:hover { background: var(--rojo-hondo); }
.barra-pedido__cuenta { background: #FFFFFF; color: var(--rojo); }

/* El chip de la mesa: es el dato más importante de la pantalla cuando se
   entró por un código QR, así que va en oro sobre el azul. */
.chip-mesa { border-color: var(--gold-dim); }
.chip-mesa__texto { color: #FFFFFF; }
.chip-mesa__texto strong { color: var(--oro); }

/* ==========================================================================
   CAPA PREMIUM — 29 de agosto de 2026
   Misma idea que en el sitio: el logo es lo único fuerte; todo lo demás se
   adelgaza. Aquí además manda una regla práctica: esto se usa con el celular
   en una mano, con hambre y con prisa. Elegante sí, pero nada de adivinar
   dónde tocar.
   ========================================================================== */

/* --- Cabecera: más fina, con línea de oro ------------------------------- */
.carta-cabeza { border-bottom: 1px solid rgba(211, 168, 87, 0.28); }
.carta-cabeza__logo { border-radius: var(--radius-marca); }
.carta-cabeza__marca {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
}

/* --- Categorías: pestañas de línea, no pastillas rellenas -------------- */
.categoria-btn {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
}
.categoria-btn[aria-current="true"] {
  background: transparent;
  color: var(--oro);
  border-bottom-color: var(--oro);
}

/* --- Los platillos: nombre en sans, precio en serif --------------------- */
.platillo-carta__nombre, .platillo__nombre { font-weight: 500; }
.platillo-carta__precio, .platillo__precio {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--oro-hondo);
}
.platillo-carta__descripcion { font-weight: 400; line-height: var(--leading-body); }

/* --- Los grupos de la carta -------------------------------------------- */
.grupo__titulo, .categoria__titulo {
  font-family: var(--font-body);
  letter-spacing: var(--tracking-wider);
  font-weight: 500;
}

/* --- La barra del pedido: se queda ROJA, a propósito -------------------- */
/* Es el único botón sólido de toda la carta. Aquí lo elegante cedería ante
   lo práctico: si el botón de "ver mi pedido" no se ve de inmediato, el
   cliente no pide, y ningún restaurante paga por un sitio bonito que no
   vende. El resto de la pantalla es lo bastante callado para que este rojo
   no compita con nada. */
.barra-pedido__boton {
  font-family: var(--font-body);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius);
  box-shadow: var(--sombra-media);
}
.barra-pedido__total { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); }

/* --- Las hojas que suben desde abajo ----------------------------------- */
.hoja__titulo, .hoja h2 { font-family: var(--font-display); font-weight: 600; }
.hoja__total, .total-linea strong { font-family: var(--font-display); font-weight: 600; }

/* --- Botones redondos de cantidad: línea fina, no relleno -------------- */
.redondo {
  border: 1px solid var(--color-border);
  background: transparent;
  border-radius: 50%;
}
.redondo:hover { border-color: var(--oro-hondo); color: var(--oro-hondo); }

/* ══════════════════════════════════════════════════════════════════════════
   COMER AQUÍ / PARA LLEVAR — 6 de septiembre de 2026

   Dos botones grandes, no un menú desplegable ni una casilla. Se usa con el
   pulgar, de pie, con el celular en una mano y a veces sin lentes: cada
   opción mide más de 44 px de alto y dice en una línea qué significa.

   La opción elegida se marca con COLOR Y BORDE GRUESO, no solo con color:
   quien no distingue bien los tonos tiene que poder ver cuál está activa.
   ══════════════════════════════════════════════════════════════════════════ */
.donde-come {
  margin: 0 0 var(--space-8, 2rem);
  padding: var(--space-5, 1.25rem);
  background: var(--color-card, #fff);
  border: 1px solid var(--color-border, #EEDFC6);
  border-radius: 10px;
}
.donde-come--hoja { margin: 0 0 1.25rem; }

.donde-come__pregunta {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-muted-foreground, #6C7C90);
}

.donde-come__opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.donde-come__opcion {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 60px;              /* muy por encima del mínimo táctil de 44 px */
  padding: 0.75rem 0.85rem;
  text-align: left;
  background: transparent;
  border: 2px solid var(--color-border, #EEDFC6);
  border-radius: 8px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: border-color 160ms ease, background 160ms ease;
}
.donde-come__opcion:hover { border-color: var(--oro-hondo, #8A5206); }
.donde-come__opcion:focus-visible {
  outline: 2px solid var(--color-ring, #D71605);
  outline-offset: 2px;
}

.donde-come__opcion.es-activa {
  border-color: var(--rojo, #D71605);
  background: color-mix(in srgb, var(--rojo, #D71605) 7%, transparent);
}

.donde-come__icono { font-size: 1.5rem; line-height: 1; flex: none; }
.donde-come__texto { display: flex; flex-direction: column; min-width: 0; }
.donde-come__texto b { font-size: 0.95rem; font-weight: 700; line-height: 1.2; }
.donde-come__texto small {
  font-size: 0.7rem;
  color: var(--color-muted-foreground, #6C7C90);
  line-height: 1.35;
  margin-top: 0.1rem;
}

/* En pantallas angostas los dos botones se apilan: partidos a la mitad, el
   texto de abajo se corta a dos palabras por renglón y se lee peor. */
@media (max-width: 380px) {
  .donde-come__opciones { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   NOTA PARA LA COCINA — 10 de septiembre de 2026

   Botón que abre un campo, en vez de un campo siempre abierto: casi ningún
   pedido lleva nota. El campo sigue las reglas de formularios de la base de
   diseño: etiqueta visible (el texto gris de ejemplo no cuenta como
   etiqueta), 16 px de letra para que el iPhone no haga zoom al tocarlo,
   44 px de alto mínimo para el dedo, y foco visible con el anillo de marca.
   ══════════════════════════════════════════════════════════════════════════ */
.nota-pedido { margin: 0 0 1.25rem; }

.nota-pedido__abrir {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-foreground);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.nota-pedido__abrir:hover { border-color: var(--oro-hondo); background: var(--color-muted); }
.nota-pedido__abrir svg { width: 18px; height: 18px; flex: none; }
.nota-pedido__abrir[aria-expanded="true"] { display: none; }

.nota-pedido__abrir:focus-visible,
.nota-pedido__texto:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.nota-pedido__campo {
  padding: var(--space-4);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.nota-pedido__etiqueta {
  display: block;
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-card-foreground);
}
.nota-pedido__etiqueta span { font-weight: 400; color: var(--color-muted-foreground); }

.nota-pedido__texto {
  display: block;
  width: 100%;
  min-height: 4.5rem;
  resize: vertical;
  padding: var(--space-3);
  font: inherit;
  font-size: var(--text-base);   /* 16 px: con menos, el iPhone hace zoom al escribir */
  line-height: 1.5;
  color: var(--color-card-foreground);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.nota-pedido__pie {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.nota-pedido__ayuda { margin: 0; font-size: var(--text-xs); color: var(--color-muted-foreground); }
.nota-pedido__cuenta {
  flex: none;
  font-size: var(--text-xs);
  color: var(--color-muted-foreground);
  font-variant-numeric: tabular-nums;
}
.nota-pedido__cuenta.casi-lleno { color: var(--color-accent); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .nota-pedido__abrir { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   LA CUENTA DE LA MESA EN EL CELULAR (20 de septiembre de 2026)
   Todo con los tokens que ya usa la carta: ni un color suelto. El botón
   cumple los 44px de área táctil, como el resto de lo que se toca. */
.chip-cuenta {
  margin-left: auto;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-card);
  color: var(--color-foreground);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.chip-cuenta:hover { border-color: var(--color-primary); }
.chip-cuenta:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.cuenta-estado { color: var(--color-muted-foreground); font-size: var(--text-sm); }

.cuenta-lista { list-style: none; margin: 0; padding: 0; }
.cuenta-lista li {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.cuenta-lista__nombre { flex: 1; }
.cuenta-lista__importe { font-variant-numeric: tabular-nums; white-space: nowrap; }

.cuenta-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--space-4);
  font-size: var(--text-lg, 1.125rem);
  font-weight: 700;
}
.cuenta-nota {
  margin-top: var(--space-2);
  color: var(--color-muted-foreground);
  font-size: var(--text-sm);
}

/* ══════════════════════════════════════════════════════════════════════
   PAGAR DESDE LA MESA (13 de octubre de 2026)
   Mismas reglas que la nota para la cocina: etiqueta visible (el "0" gris
   no es etiqueta), 16 px de letra para que el iPhone no haga zoom, 44 px de
   alto para el dedo, foco visible con el anillo de marca, y el aviso del
   "cero de más" con texto, no solo con color. Ni un color suelto: tokens. */
.hoja__pie--dos { display: flex; flex-direction: column; gap: var(--space-3); }
.hoja__pie--dos .boton { width: 100%; }

.pago-mesa { padding-top: var(--space-4); }
.pago-mesa__etiqueta {
  display: block;
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-card-foreground);
}
.pago-mesa__etiqueta span { font-weight: 400; color: var(--color-muted-foreground); }

.pago-mesa__campo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-4);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.pago-mesa__campo:focus-within { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.pago-mesa__signo { font-weight: 700; color: var(--color-muted-foreground); }
.pago-mesa__entrada {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-lg);   /* más de 16 px: el iPhone no hace zoom */
  font-variant-numeric: tabular-nums;
  color: var(--color-card-foreground);
}

.pago-mesa__ayuda {
  min-height: 1.4em;
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-muted-foreground);
}
.pago-mesa__ayuda--ojo { color: var(--color-accent); font-weight: 700; }
.pago-mesa__ayuda--mal { color: var(--color-destructive); font-weight: 700; }

.pago-mesa .pedido-cuentas { padding-block: var(--space-4); }
.pago-mesa .pedido-cuentas__fila { padding-block: var(--space-1); }
.pago-mesa .pedido-cuentas__fila span:last-child { font-variant-numeric: tabular-nums; }
.pago-mesa .pedido-cuentas__fila--total { color: var(--color-foreground); }

.pago-mesa__nota {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-muted-foreground);
}

/* ══════════════════════════════════════════════════════════════════════
   EL MINI MENÚ DE LA MESA (14 de octubre de 2026)
   El recuadro "Mesa 1 | nombre" ahora es UN botón (con su flechita, para que
   se note que abre algo). Las opciones van grandes, a lo ancho y con 56 px de
   alto: se tocan con el pulgar sin apuntar. Íconos dibujados (SVG), no
   emojis, y ni un color suelto: tokens de la carta. */
.chip-mesa__boton {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.chip-mesa__boton:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; border-radius: 999px; }
.chip-mesa__boton:hover .chip-mesa__editar { color: var(--oro); }
.chip-mesa__flecha { width: 14px; height: 14px; color: var(--oro); flex-shrink: 0; }

.menu-mesa__estado {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-muted-foreground);
}
.menu-mesa__opciones {
  display: grid;
  gap: var(--space-3);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
}
.opcion-mesa {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-card);
  color: var(--color-card-foreground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-rapida), background var(--dur-rapida);
}
.opcion-mesa:hover { border-color: var(--color-primary); background: var(--color-muted); }
.opcion-mesa:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.opcion-mesa__icono { width: 24px; height: 24px; flex-shrink: 0; color: var(--color-primary); }
.opcion-mesa__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opcion-mesa__texto strong { font-size: var(--text-base); font-weight: 700; }
.opcion-mesa__texto small { font-size: var(--text-xs); color: var(--color-muted-foreground); }

/* La opción de pagar es la que se viene a buscar: en rojo, como el botón
   principal de la carta (blanco sobre rojo, 5.24:1). */
.opcion-mesa--fuerte { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.opcion-mesa--fuerte:hover { background: var(--rojo-hondo); border-color: var(--rojo-hondo); }
.opcion-mesa--fuerte .opcion-mesa__icono,
.opcion-mesa--fuerte .opcion-mesa__texto small { color: var(--color-on-primary); }

/* "Mesa 6: 2 Aguachile, 1 Ceviche. ¿Es su mesa?" — antes de la propina. */
.pago-mesa__resumen {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-muted);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--color-card-foreground);
}

@media (prefers-reduced-motion: reduce) {
  .opcion-mesa { transition: none; }
}

/* "MI CUENTA" SALÍA INVISIBLE (14 oct 2026). La cabecera azul cambia el color
   del texto a blanco (--color-foreground), pero el botón conservaba su fondo
   de tarjeta blanco: blanco sobre blanco. Nadie lo había visto porque desde
   internet el botón no se pintaba; se vio el día que se prendió. Ahora va
   como el recuadro de la mesa: borde dorado y texto blanco sobre el azul. */
.carta-cabeza .chip-cuenta { background: transparent; color: #FFFFFF; border-color: var(--gold-dim); }
.carta-cabeza .chip-cuenta:hover { border-color: var(--oro); }
.carta-cabeza .chip-cuenta:focus-visible { outline-color: var(--oro); }

/* ══════════════════════════════════════════════════════════════════════════
   NEW RICH — 18 de octubre de 2026
   La carta entra al mismo lenguaje que la portada: cabecera en TINTA con oro,
   y la carta sobre MARFIL con texto en tinta completa (17.25:1). Es la zona
   donde se decide con el celular en la mano, a veces en la calle y con sol:
   por eso es clara y no negra ("lo claro va donde se decide").
   Los tokens de marfil los pone la clase .bloque-marfil del <body> (tokens.css).
   Solo presentación: no se tocó js/menu.js ni la lógica de pedidos y pago.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- Cabecera en tinta (antes azul marino del logo anterior) ------------- */
.carta-cabeza {
  --color-foreground:       var(--marfil);
  --color-muted-foreground: var(--texto-2-oscuro);
  --color-border:           var(--oro-linea);
  --color-card:             var(--tinta-2);
  --color-ring:             var(--oro);
  --gold:                   var(--oro);
  --gold-dim:               var(--oro-linea);
  background: color-mix(in srgb, var(--tinta) 97%, transparent);
  color: var(--marfil);
  border-bottom: 1px solid var(--oro-linea);
}
.carta-cabeza__marca { color: var(--oro); }
.carta-cabeza__marca span { color: var(--marfil); opacity: 0.8; }
.chip-mesa__texto { color: var(--marfil); }
.carta-cabeza .chip-cuenta { color: var(--marfil); border-color: var(--oro-linea); display: inline-flex; align-items: center; gap: var(--space-2); }
.chip-cuenta__icono { width: 18px; height: 18px; color: var(--oro); flex-shrink: 0; }
.categoria-btn { color: var(--texto-2-oscuro); }
.categoria-btn:hover { color: var(--marfil); }
.categoria-btn[aria-current="true"] { color: var(--oro); border-bottom-color: var(--oro); }

/* --- Encabezado de la carta: Cormorant grande, sin etiqueta encima ------- */
.carta { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.carta__encabezado {
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--tinta);
}
.carta__titulo {
  margin-top: 0;
  font-weight: 300;
  font-size: var(--text-4xl);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--tinta);
}
.carta__subtitulo {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--texto-2-claro);
}

/* --- Aviso "está viendo la carta": tarjeta blanca, sin degradado --------- */
.aviso-solo-lectura {
  background: var(--color-card);
  border: 1px solid var(--marfil-linea);
  border-radius: var(--radius);
}
.aviso-solo-lectura h2 { font-weight: 400; font-size: var(--text-2xl); color: var(--tinta); }
.aviso-solo-lectura p { font-weight: 400; color: var(--texto-2-claro); }
.bloque-marfil .boton--linea { border-color: var(--linea-control); color: var(--tinta); }
.bloque-marfil .boton--linea:hover:not(:disabled) { border-color: var(--tinta); color: var(--tinta); background: var(--marfil-2); }

.banda-muestra {
  border-color: var(--marfil-linea);
  border-left-color: var(--oro-hondo);
  background: color-mix(in srgb, var(--oro) 12%, var(--marfil));
}
.banda-muestra svg { color: var(--oro-hondo); }
.banda-muestra p { color: var(--tinta); }

/* --- Categorías y platillos: como una carta impresa ---------------------- */
.grupo-carta__titulo {
  font-weight: 400;
  font-size: var(--text-2xl);
  color: var(--tinta);
  padding-top: var(--space-8);
  border-bottom: 1px solid var(--tinta);
}
.item { border-bottom-color: var(--marfil-linea); }
/* El nombre del platillo es un <h3>: sin esto heredaba Cormorant a 16 px y en
   el celular se leía delgadísimo. Lo que se lee de verdad va en Montserrat. */
.item__nombre {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--tinta);
}
/* Cormorant nunca abajo de 20 px (MASTER.md): a 15 px el trazo se deshace. */
.item__precio {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--oro-hondo);
}
.item__medida, .item__opciones { color: var(--texto-2-claro); }
.item__opcion-select { border-color: var(--linea-control); }

/* Botones de cantidad: borde de control medido (3.62:1), el + en oro hondo. */
.redondo { border-color: var(--linea-control); color: var(--tinta); }
.redondo:hover:not(:disabled) { border-color: var(--tinta); color: var(--tinta); background: var(--marfil-2); }
.redondo--agregar { border-color: var(--oro-hondo); color: var(--oro-hondo); }
.redondo--agregar:hover:not(:disabled) { background: var(--tinta); border-color: var(--tinta); color: var(--oro); }
.item__cantidad { color: var(--tinta); font-weight: 600; }

.carta__nota { border-top-color: var(--tinta); color: var(--texto-2-claro); font-size: var(--text-sm); }
.carta__legal { color: var(--texto-2-claro); }
.carta__legal a { color: var(--tinta); border-bottom-color: var(--oro-hondo); }

/* --- Comer aquí / para llevar: íconos dibujados en vez de emojis -------- */
.donde-come { border-color: var(--marfil-linea); border-radius: var(--radius); }
.donde-come__pregunta { color: var(--texto-2-claro); }
.donde-come__opcion { border-color: var(--marfil-linea); border-radius: var(--radius); }
.donde-come__opcion:hover { border-color: var(--linea-control); }
.donde-come__opcion.es-activa { border-color: var(--tinta); background: var(--marfil-2); }
.donde-come__icono { width: 26px; height: 26px; color: var(--oro-hondo); }
.donde-come__icono svg { width: 100%; height: 100%; }
.donde-come__texto small { color: var(--texto-2-claro); }

/* --- Hojas (pedido, nombre, mesa, cuenta) -------------------------------- */
.fondo-oscuro { background: color-mix(in srgb, var(--tinta) 72%, transparent); }
.hoja { border-radius: var(--radius) var(--radius) 0 0; border-top-color: var(--oro-hondo); }
.hoja h2 { font-weight: 400; color: var(--tinta); }
.pedido-lista__importe, .pedido-cuentas__fila--total { color: var(--oro-hondo); }
.pedido-cuentas__fila--total { border-top-color: var(--tinta); }
.campo__etiqueta { color: var(--oro-hondo); }
.campo__entrada { border-color: var(--linea-control); }
.campo__entrada:focus { border-color: var(--tinta); }
.mesa-btn { border-color: var(--marfil-linea); }
.mesa-btn:hover { border-color: var(--tinta); }
.mesa-btn__num { color: var(--tinta); }
.opcion-mesa__icono { color: var(--oro-hondo); }
.opcion-mesa--fuerte .opcion-mesa__icono { color: var(--color-on-primary); }
@media (min-width: 768px) {
  .hoja { border-radius: var(--radius); border-color: var(--marfil-linea); }
}
/* Importes de la hoja del pedido: Cormorant a 20 px como mínimo. */
.pedido-lista__importe { font-weight: 600; font-size: 1.25rem; }
/* Medidas y guarniciones a 15 px (antes 13): es lo que más texto corre en la
   carta, y se lee de pie con el celular en la mano. El inspector lo marcó. */
.item__medida, .item__opciones { font-size: var(--text-sm); line-height: 1.5; }