/* ===========================================================
   CARTA CHE LOCO — estilos
   Paleta y tipografía reaproveitadas del sitio institucional
   de Che Loco (negro/cobre/crema, Fraunces + Inter).
   =========================================================== */

:root {
  --negro: #140f1b;
  --carbon: #1e1726;
  --marron: #2a2035;
  --crema: #f6efe3;
  --texto: var(--crema);
  --texto-claro: #c3b3a2;
  --cobre: #d97b3f;
  --cobre-claro: #e8995f;
  --borde-cobre: rgba(217, 123, 63, 0.25);
  --borde-cobre-fuerte: rgba(217, 123, 63, 0.5);

  /* Color fijo del precio dentro de las tarjetas de plato/pedido: se
     mantiene igual en las 12 categorías (un dorado cálido que resalta
     sobre cualquier tarjeta oscura) para que el precio siempre se
     reconozca igual, sin depender del tono de cada categoría
     (--cat-h, ver más abajo). El resto del texto de esas tarjetas usa
     --texto/--texto-claro, las mismas variables claras que ya usa el
     resto de la interfaz oscura. */
  --cobre-tarjeta: #ffcf7a;
  --borde-tarjeta-fuerte: rgba(255, 207, 122, 0.45);

  /* Tono de respaldo si --cat-h no está definido (no debería pasar:
     cada .categoria real lo fija según su data-categoria). */
  --cat-h: 24;

  --fuente-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --fuente-texto: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --radio-s: 10px;
  --radio-m: 16px;
  --radio-l: 22px;

  --dur: 0.28s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --h-header: 56px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0.001s;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: #14101d;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(50,60) rotate(-15) scale(1.3) translate(-12,-12)' stroke='%23f0a84a' stroke-width='1.5' opacity='0.14'%3E%3Cpath d='M4 10a8 8 0 0 1 16 0Z'/%3E%3Cpath d='M3 13.5h18'/%3E%3Cpath d='M3.5 16.5h17'/%3E%3Cpath d='M5 19.5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2'/%3E%3C/g%3E%3Cg transform='translate(230,40) rotate(20) scale(1.3) translate(-12,-12)' stroke='%23e8614f' stroke-width='1.5' opacity='0.13'%3E%3Cpath d='M12 3 3 19h18L12 3Z'/%3E%3C/g%3E%3Cg transform='translate(320,150) rotate(-10) scale(1.2) translate(-12,-12)' stroke='%23e0a53c' stroke-width='1.5' opacity='0.12'%3E%3Cpath d='M4 13a8 7 0 0 1 16 0Z'/%3E%3Cpath d='M8 13l1.5 2M12 13v2.4M16 13l-1.5 2'/%3E%3C/g%3E%3Cg transform='translate(40,220) rotate(12) scale(1.3) translate(-12,-12)' stroke='%23a060e0' stroke-width='1.5' opacity='0.12'%3E%3Cpath d='M8 3h8l-1 7a3 4 0 0 1-6 0Z'/%3E%3Cpath d='M12 10v11'/%3E%3Cpath d='M8 21h8'/%3E%3C/g%3E%3Cg transform='translate(180,190) rotate(-20) scale(1.2) translate(-12,-12)' stroke='%235fb8c9' stroke-width='1.5' opacity='0.13'%3E%3Cpath d='M5 4h11v9a5 5 0 0 1-5 5H9a4 4 0 0 1-4-4Z'/%3E%3Cpath d='M16 7h2a3 3 0 0 1 0 6h-2'/%3E%3C/g%3E%3Cg transform='translate(300,300) rotate(15) scale(1.3) translate(-12,-12)' stroke='%232ba89a' stroke-width='1.5' opacity='0.12'%3E%3Cpath d='M12 22 8 13h8Z'/%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3C/g%3E%3Cg transform='translate(90,320) rotate(-8) scale(1.1) translate(-12,-12)' stroke='%23d98fd0' stroke-width='1.5' opacity='0.11'%3E%3Cpath d='M6 2v6M8 2v6M10 2v6M8 8v14'/%3E%3Cpath d='M17 2c-2 1.5-2 4-2 7 0 1.2.8 2 2 2M17 22V11'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 88% 2%, rgba(232, 97, 79, 0.3), transparent 48%),
    radial-gradient(circle at 4% 18%, rgba(43, 168, 154, 0.26), transparent 46%),
    radial-gradient(circle at 92% 62%, rgba(160, 96, 224, 0.26), transparent 48%),
    radial-gradient(circle at 10% 92%, rgba(240, 168, 74, 0.26), transparent 46%),
    linear-gradient(160deg, #241b30 0%, #1a1324 45%, #100b16 100%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  color: var(--texto);
  font-family: var(--fuente-texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  line-height: 1.15;
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

input {
  font-family: inherit;
}

/* ===== CABECERA ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: rgba(20, 15, 27, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde-cobre);
}

.header-fila {
  height: var(--h-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.marca {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  margin: 0;
  letter-spacing: 0.01em;
}

.marca span {
  color: var(--cobre);
}

.header-botones {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icono-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--borde-cobre);
  background: transparent;
  color: var(--texto-claro);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform 0.15s var(--ease);
}

.icono-boton svg {
  width: 18px;
  height: 18px;
}

.icono-boton:active {
  transform: scale(0.92);
}

.icono-boton[aria-expanded="true"] {
  color: var(--negro);
  background-color: var(--cobre);
  border-color: var(--cobre);
}

/* Buscador: se abre con una animación de alto suave vía grid-template-rows,
   así solo se anima una propiedad por contenedor y no hay saltos de layout. */
.buscador {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.buscador.abierto {
  grid-template-rows: 1fr;
  opacity: 1;
}

.buscador-caja {
  overflow: hidden;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px;
  padding: 0;
}

.buscador.abierto .buscador-caja {
  padding: 2px 0 14px;
}

#campo-buscar {
  flex: 1;
  width: 100%;
  min-width: 0;
  background-color: var(--marron);
  border: 1px solid var(--borde-cobre);
  border-radius: 999px;
  padding: 10px 16px;
  color: var(--texto);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--dur) var(--ease);
}

#campo-buscar::placeholder {
  color: var(--texto-claro);
}

#campo-buscar:focus {
  border-color: var(--cobre);
}

.buscador-limpiar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background-color: var(--marron);
  color: var(--texto-claro);
}

.buscador-limpiar svg {
  width: 14px;
  height: 14px;
}

#centinela-top {
  position: absolute;
  top: 0;
  height: 1px;
}

.oculta-busqueda {
  display: none;
}

/* ===== PROMOCIONES (carrusel compacto: solo título y precio) ===== */
.promos {
  padding: 12px 0 4px;
}

.promos-pista {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  padding: 2px 16px 8px;
  scrollbar-width: none;
}

.promos-pista::-webkit-scrollbar {
  display: none;
}

.promo-tarjeta {
  --promo-h: 24;
  scroll-snap-align: start;
  flex: 0 0 152px;
  width: 152px;
  padding: 10px 12px;
  background: linear-gradient(160deg, hsl(var(--promo-h), 46%, 24%) 0%, hsl(var(--promo-h), 50%, 15%) 100%);
  border: 1px solid hsla(var(--promo-h), 70%, 60%, 0.3);
  border-top: 3px solid hsl(var(--promo-h), 70%, 55%);
  border-radius: var(--radio-s);
  box-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.6);
}

.promo-tarjeta:nth-child(3n+1) { --promo-h: 340; }
.promo-tarjeta:nth-child(3n+2) { --promo-h: 45; }
.promo-tarjeta:nth-child(3n) { --promo-h: 190; }

.promo-subtitulo {
  margin: 0 0 3px;
  color: var(--cobre-claro);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.3;
}

.promo-tarjeta h3 {
  font-size: 0.82rem;
  line-height: 1.2;
  margin-bottom: 3px;
}

.promo-precio {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.2;
  color: var(--cobre);
  margin: 0;
}

.promo-precio-sufijo {
  font-family: var(--fuente-texto);
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--cobre-claro);
}

/* ===== CONTENIDO DE LA CARTA (acordeón) ===== */
#carta-contenido {
  padding: 10px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Cada categoría tiene su propio tono (--cat-h, grados de matiz HSL),
   asignado abajo por data-categoria. A partir de ese único número se
   calculan el fondo del acordeón, el ícono, los títulos de grupo y el
   acento de las tarjetas de plato — así cada categoría se siente con
   una identidad de color propia sin tener que repetir una paleta
   completa por categoría. */
.categoria {
  background: linear-gradient(160deg, hsl(var(--cat-h), 42%, 16%) 0%, hsl(var(--cat-h), 46%, 9%) 100%);
  border: 1px solid hsla(var(--cat-h), 70%, 60%, 0.3);
  border-radius: var(--radio-m);
  overflow: hidden;
  scroll-margin-top: calc(var(--h-header) + 10px);
  transition: border-color var(--dur) var(--ease);
}

.categoria[data-categoria="entrantes"] { --cat-h: 350; }
.categoria[data-categoria="ensaladas"] { --cat-h: 30; }
.categoria[data-categoria="parrilla"] { --cat-h: 60; }
.categoria[data-categoria="hamburguesas"] { --cat-h: 90; }
.categoria[data-categoria="milanesas"] { --cat-h: 120; }
.categoria[data-categoria="pasta-pizza"] { --cat-h: 150; }
.categoria[data-categoria="mar"] { --cat-h: 180; }
.categoria[data-categoria="hotdogs"] { --cat-h: 210; }
.categoria[data-categoria="infantil"] { --cat-h: 240; }
.categoria[data-categoria="postres"] { --cat-h: 270; }
.categoria[data-categoria="bebidas"] { --cat-h: 300; }
.categoria[data-categoria="vinos-cocteles"] { --cat-h: 330; }

.categoria.abierta {
  border-color: hsla(var(--cat-h), 75%, 62%, 0.65);
}

.categoria.oculta-busqueda {
  display: none;
}

.categoria-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  color: var(--texto);
  text-align: left;
  transition: transform 0.15s var(--ease);
}

.categoria-toggle:active {
  transform: scale(0.99);
}

.categoria-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: hsl(var(--cat-h), 45%, 16%);
  border: 1px solid hsla(var(--cat-h), 70%, 60%, 0.4);
  color: hsl(var(--cat-h), 78%, 62%);
}

.categoria-icono svg {
  width: 15px;
  height: 15px;
}

.categoria-titulo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  align-self: center;
}

.categoria-titulo h2 {
  font-size: 1.02rem;
  line-height: 1.2;
}

.categoria-cuenta {
  align-self: center;
  flex-shrink: 0;
  color: var(--texto-claro);
  font-size: 0.76rem;
  white-space: nowrap;
}

.categoria-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: hsl(var(--cat-h), 85%, 74%);
  transition: transform var(--dur) var(--ease);
}

.categoria-chevron svg {
  width: 100%;
  height: 100%;
}

.categoria-toggle[aria-expanded="true"] .categoria-chevron {
  transform: rotate(180deg);
}

/* Panel colapsable: anima grid-template-rows (0fr -> 1fr), la misma
   técnica del buscador — una sola propiedad por contenedor, sin medir
   alturas en JS y sin saltos al abrir/cerrar. */
.categoria-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.categoria-toggle[aria-expanded="true"] + .categoria-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.categoria-panel-inner {
  overflow: hidden;
  min-height: 0;
}

/* El padding y el borde del panel viven en este hijo, no en
   .categoria-panel-inner: ese es el grid item que el truco 0fr->1fr
   necesita poder reducir a una altura de contenido real 0, y el
   padding/borde de un elemento siempre suman a su propia caja aunque
   el contenido interno sea nulo (por eso con ellos ahí, el panel
   "cerrado" nunca llegaba a 0px). */
.categoria-panel-contenido {
  padding: 12px 14px 16px;
  border-top: 1px solid hsla(var(--cat-h), 60%, 55%, 0.3);
}

.categoria-nota {
  margin: 0 0 14px;
  color: var(--texto-claro);
  font-size: 0.86rem;
  font-style: italic;
}

.grupo {
  margin-top: 16px;
}

.grupo:first-child {
  margin-top: 0;
}

.grupo-titulo {
  margin: 0 0 2px 2px;
  font-family: var(--fuente-titulo);
  font-size: 1.04rem;
  color: hsl(var(--cat-h), 85%, 74%);
}

.grupo-nota {
  margin: 0 0 8px 2px;
  color: var(--texto-claro);
  font-size: 0.8rem;
  font-style: italic;
}

.platos {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plato {
  background-color: hsl(var(--cat-h), 60%, 18%);
  color: var(--texto);
  border: 1px solid hsla(var(--cat-h), 60%, 55%, 0.35);
  border-top: 3px solid hsl(var(--cat-h), 75%, 58%);
  border-radius: var(--radio-s);
  padding: 12px 14px;
  transition: transform 0.15s var(--ease), border-color var(--dur) var(--ease);
}

.plato:active {
  transform: scale(0.98);
  border-color: hsla(var(--cat-h), 70%, 60%, 0.6);
}

.plato-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
}

.plato-nombre {
  flex: 1;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 0.98rem;
}

.plato-precio {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.plato-agregar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--borde-cobre);
  background-color: var(--carbon);
  color: var(--cobre);
  transition: transform 0.15s var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.plato-agregar svg {
  width: 16px;
  height: 16px;
}

.plato-agregar:active,
.plato-agregar.agregado {
  transform: scale(0.85);
  background-color: var(--cobre);
  color: var(--negro);
}

.precio {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--cobre-tarjeta);
  white-space: nowrap;
}

.precio-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 9px;
  border: 1px solid var(--borde-tarjeta-fuerte);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cobre-tarjeta);
  white-space: nowrap;
}

.precio-chip-etiqueta {
  font-family: var(--fuente-texto);
  font-weight: 500;
  color: var(--texto-claro);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.precio-pendiente {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--texto-claro);
  opacity: 0.85;
  white-space: nowrap;
}

.plato-desc {
  margin: 5px 0 0;
  color: var(--texto-claro);
  font-size: 0.87rem;
}

.plato-nota {
  margin: 4px 0 0;
  color: var(--texto-claro);
  font-size: 0.78rem;
  font-style: italic;
  opacity: 0.85;
}

.plato-pendiente .plato-nombre {
  color: var(--texto-claro);
  font-style: italic;
  font-weight: 500;
}

/* ===== SIN RESULTADOS ===== */
.sin-resultados {
  padding: 60px 24px;
  text-align: center;
  color: var(--texto-claro);
}

.sin-resultados p {
  margin: 0 0 6px;
}

.sin-resultados-sugerencia {
  font-size: 0.86rem;
  opacity: 0.8;
}

/* ===== PIE ===== */
.pie {
  margin-top: 24px;
  padding: 32px 20px 100px;
  text-align: center;
  background-color: var(--carbon);
  border-top: 1px solid var(--borde-cobre);
}

.pie-marca {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  margin: 0 0 14px;
}

.pie-marca span {
  color: var(--texto-claro);
  font-weight: 400;
  font-family: var(--fuente-texto);
  font-size: 0.9rem;
}

.pie-horario {
  list-style: none;
  margin: 0 auto 14px;
  padding: 0;
  max-width: 280px;
  font-size: 0.86rem;
}

.pie-horario li {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  color: var(--texto-claro);
  border-bottom: 1px dashed rgba(246, 239, 227, 0.08);
}

.pie-horario li:last-child {
  border-bottom: none;
}

.pie-horario li span:first-child {
  color: var(--texto);
}

.pie-cerrado span:last-child {
  opacity: 0.6;
}

.pie-direccion {
  margin: 0;
  color: var(--texto-claro);
  font-size: 0.82rem;
}

/* ===== BOTÓN VOLVER ARRIBA ===== */
.volver-arriba {
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 18;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--borde-cobre);
  background-color: var(--cobre);
  color: var(--negro);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.volver-arriba.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.volver-arriba svg {
  width: 18px;
  height: 18px;
}

.volver-arriba:active {
  transform: scale(0.92);
}

/* ===== SELECTOR DE IDIOMA (HOJA INFERIOR) ===== */
.hoja-fondo {
  position: fixed;
  inset: 0;
  z-index: 29;
  background-color: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.hoja-fondo.visible {
  opacity: 1;
}

.hoja {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  background-color: var(--carbon);
  border: 1px solid var(--borde-cobre);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -16px 40px -12px rgba(0, 0, 0, 0.6);
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.hoja.abierta {
  transform: translateY(0);
}

.hoja-manija {
  width: 36px;
  height: 4px;
  margin: 10px auto 2px;
  border-radius: 999px;
  background-color: var(--borde-cobre-fuerte);
  flex-shrink: 0;
}

.hoja-titulo {
  flex-shrink: 0;
  padding: 10px 20px 4px;
  font-size: 1.05rem;
  color: #fff;
}

.hoja-lista {
  list-style: none;
  margin: 0;
  padding: 6px 10px 14px;
  overflow-y: auto;
}

.idioma-opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 13px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radio-s);
  color: var(--texto);
  font-size: 0.98rem;
  text-align: left;
  transition: background-color 0.15s var(--ease);
}

.idioma-opcion:active {
  background-color: var(--marron);
}

.idioma-opcion.activa {
  color: var(--cobre-claro);
  font-weight: 600;
}

.idioma-opcion.proximamente {
  color: var(--texto-claro);
  opacity: 0.45;
}

.idioma-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--cobre);
}

/* ===== BARRA FIJA "MI PEDIDO" ===== */
.barra-pedido {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  border: none;
  border-radius: 999px;
  background-color: var(--cobre);
  color: var(--negro);
  font-family: var(--fuente-texto);
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.55);
  transform: translateY(140%);
  opacity: 0;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.barra-pedido.visible {
  transform: translateY(0);
  opacity: 1;
}

.barra-pedido-texto {
  font-weight: 700;
  font-size: 0.95rem;
}

.barra-pedido-total {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.05rem;
}

.volver-arriba.con-barra-pedido {
  bottom: 86px;
}

/* ===== PANEL "MI PEDIDO" ===== */
.hoja-pedido {
  max-height: 80vh;
}

.pedido-lista {
  flex: 1 1 auto;
  min-height: 0;
  list-style: none;
  margin: 0;
  padding: 6px 20px 4px;
  overflow-y: auto;
}

.pedido-vacio {
  margin: 10px 20px 20px;
  color: var(--texto-claro);
  font-size: 0.92rem;
}

.pedido-item {
  --cat-h: 265;
  background-color: hsl(var(--cat-h), 60%, 18%);
  color: var(--texto);
  border: 1px solid hsla(var(--cat-h), 60%, 55%, 0.35);
  border-top: 3px solid hsl(var(--cat-h), 75%, 58%);
  border-radius: var(--radio-s);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.pedido-item-fila1 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.pedido-item-nombre {
  flex: 1;
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
}

.pedido-quitar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--texto-claro);
}

.pedido-quitar svg {
  width: 13px;
  height: 13px;
}

.pedido-quitar:active {
  color: var(--cobre-tarjeta);
}

.pedido-item-fila2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.pedido-item-precio {
  color: var(--texto-claro);
  font-size: 0.82rem;
}

.pedido-item-controles {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pedido-paso {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--borde-cobre);
  background-color: var(--carbon);
  color: var(--texto);
  font-size: 1rem;
  line-height: 1;
}

.pedido-paso:active {
  background-color: var(--cobre);
  color: var(--negro);
  border-color: var(--cobre);
}

.pedido-item-cantidad {
  min-width: 18px;
  text-align: center;
  font-weight: 700;
  font-family: var(--fuente-titulo);
}

.pedido-pie {
  flex-shrink: 0;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--borde-cobre);
  background-color: var(--carbon);
}

.pedido-total-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  font-family: var(--fuente-titulo);
}

.pedido-total-fila span:first-child {
  font-size: 0.95rem;
  color: var(--texto-claro);
  font-weight: 500;
}

#pedido-total-valor {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cobre);
}

.pedido-botones {
  display: flex;
  gap: 10px;
}

.pedido-boton-limpiar,
.pedido-boton-camarero {
  padding: 13px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.88rem;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.pedido-boton-limpiar {
  flex: 1;
  border: 1px solid var(--borde-cobre);
  background: transparent;
  color: var(--texto-claro);
}

.pedido-boton-limpiar.confirmando {
  border-color: #c44b3a;
  color: #e8795f;
}

.pedido-boton-camarero {
  flex: 1.4;
  border: none;
  background-color: var(--cobre);
  color: var(--negro);
}

/* ===== PANEL "ELEGIR VARIANTE" ===== */
.variante-opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radio-s);
  color: var(--texto);
  font-size: 0.98rem;
  text-align: left;
  transition: background-color 0.15s var(--ease);
}

.variante-opcion:active {
  background-color: var(--marron);
}

.variante-opcion-precio {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  color: var(--cobre);
}

/* ===== VISTA DE PANTALLA COMPLETA PARA EL CAMARERO ===== */
.vista-camarero {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background-color: var(--negro);
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease);
}

.vista-camarero.visible {
  transform: translateY(0);
}

.vista-camarero-cabecera {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--borde-cobre);
}

.vista-camarero-marca {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  margin: 0;
}

.vista-camarero-marca span {
  color: var(--cobre);
}

.vista-camarero-titulo {
  flex-shrink: 0;
  padding: 20px 20px 6px;
  font-size: 1.4rem;
}

.vista-camarero-lista {
  flex: 1;
  overflow-y: auto;
  margin: 0;
  padding: 10px 20px calc(40px + env(safe-area-inset-bottom, 0px));
  list-style: none;
}

.vista-camarero-item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px dashed rgba(246, 239, 227, 0.15);
  font-size: 1.25rem;
}

.vista-camarero-item:last-child {
  border-bottom: none;
}

.vista-camarero-cantidad {
  flex-shrink: 0;
  min-width: 2ch;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  color: var(--cobre);
}

.vista-camarero-nombre {
  font-family: var(--fuente-titulo);
  font-weight: 600;
}

/* ===== PANTALLAS CHICAS ===== */
@media (max-width: 380px) {
  .plato-cabecera {
    flex-wrap: wrap;
  }

  .plato-precio {
    justify-content: flex-start;
  }
}

/* ===== PANTALLAS MÁS GRANDES (tablet / escritorio) ===== */
@media (min-width: 720px) {
  .header-fila,
  #carta-contenido,
  .pie {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  .buscador-caja {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  .promo-tarjeta {
    flex-basis: 360px;
  }
}