/* =========================================================
   FiushPos — Carta pública

   Es la única pantalla del proyecto que ve alguien que no trabaja en el
   negocio, y casi siempre desde un celular. Por eso se diseña para pantalla
   angosta primero y se ensancha después, al revés que el resto de la app.

   No comparte CSS con ninguna vista del punto de venta: no hay topbar, ni
   componentes, ni nada que asuma sesión. Las variables se repiten acá
   porque este archivo tiene que poder abrirse solo.
   ========================================================= */

:root {
  color-scheme: dark;

  --brand: #ff7a1a;
  --brand-light: #ffa64d;
  /* El naranja apenas insinuado del fondo de los encabezados de categoría. */
  --brand-soft: rgba(255, 122, 26, 0.16);

  --surface-0: #0a0e18;
  --surface-1: #10141f;
  --surface-2: #161c2c;

  --text: #f5f6fa;
  --text-muted: #a7aec2;
  --text-light: #7b8298;

  --border-subtle: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.09);

  --radius-md: 10px;
  --radius-lg: 14px;
}

* { box-sizing: border-box; }
/* La misma regla que ya tienen lobby, caja_rapida, domicilios y
   configuracion, y que a esta hoja le faltaba. Sin ella, cualquier clase que
   fije `display` le gana al atributo `hidden` y el elemento no se oculta —
   pasó en producción con los pasos del pago, que se veían los cuatro a la vez
   con cifras de renders viejos.

   Las reglas `.clase[hidden]` sueltas que hay más abajo quedan de cuando esto
   no estaba: ya no hacen falta, pero tampoco molestan. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* La carta se abre dentro de una app instalada (la TWA de Android), y ahí los
   gestos de "página web" delatan al navegador: arrastrar hacia abajo recargaba
   la carta entera —con el pedido a medio armar— y al topar cualquier extremo
   Chrome pinta su resplandor de rebote.

   Tiene que ser `none` y no `contain`: `contain` solo impide que el scroll se
   encadene al padre, pero deja el resplandor y deja el recargar. */
html,
body {
  overscroll-behavior: none;
}

/* Ancho máximo del contenido. Lo comparten el encabezado, el cuerpo y el pie,
   así que los tres alinean por el mismo borde en cualquier pantalla.

   No es "el 100% de la pantalla" a propósito: en un monitor de 1900px una
   fila de tarjetas de borde a borde obliga a barrer la cabeza para leerla, y
   el nombre del plato queda a medio metro de su precio. 1400px entra cómodo
   con cuatro columnas, que es donde una carta se lee de un vistazo. */
:root { --ancho-contenido: 1400px; }

/* ================= Barra superior =================
   Pegajosa: en una carta larga, volver al pedido o saltar de categoría no
   puede obligar a subir hasta arriba. Mismas medidas que el referente. */
.carta-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(12, 14, 19, 0.92);
  backdrop-filter: blur(10px);
}

/* La franja es de borde a borde; lo que se centra es su contenido, con el
   mismo ancho que el cuerpo para que todo alinee. */
.topbar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: var(--ancho-contenido);
  margin: 0 auto;
}

/* margin-right auto: la marca empuja las acciones al otro extremo. */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  min-width: 0;
}

.topbar-marca {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  border: 1.5px solid var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.10);
  background: radial-gradient(circle at 32% 28%, #2a2013, #100c07 72%);
  color: var(--brand-light);
}

.topbar-marca svg { width: 18px; height: 18px; }

.topbar-brand-texto { min-width: 0; }

/* Un nombre largo se recorta en vez de empujar los botones fuera. */
.topbar-nombre {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-acciones { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.topbar-icono {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
}

.topbar-icono[hidden] { display: none; }
.topbar-icono:hover { background: var(--surface-2); }
.topbar-icono svg { width: 17px; height: 17px; }

.topbar-pedido {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
}

.topbar-pedido[hidden] { display: none; }
.topbar-pedido:hover { background: var(--surface-2); }
.topbar-pedido svg { width: 15px; height: 15px; flex: 0 0 auto; }

.topbar-pedido-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--brand);
  color: #1a0d02;
  font-size: 0.66rem;
  font-weight: 800;
}

.topbar-pedido-badge[hidden] { display: none; }

/* Se puede desplazar de costado: en un celular angosto los tres enlaces no
   entran, y esconderlos sería peor que dejarlos arrastrar. */
.topbar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  max-width: var(--ancho-contenido);
  margin: 10px auto 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  /* Se arrastra de costado, así que topa sus extremos todo el tiempo: sin esto
     cada topada pinta el resplandor de rebote de Chrome sobre la barra. */
  overscroll-behavior-x: none;
}

.topbar-nav[hidden] { display: none; }
.topbar-nav::-webkit-scrollbar { display: none; }

.topbar-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.topbar-nav a svg { width: 13px; height: 13px; opacity: 0.85; }
.topbar-nav a:hover { color: var(--text); }
.topbar-nav a.is-active { color: var(--brand-light); }

.topbar-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -11px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}

.carta-zona {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Solo lo ve el dueño previsualizando. Se distingue del resto para que no
   se confunda con información del negocio. */
.carta-aviso {
  margin: 12px 0 0;
  padding: 8px 12px;
  border: 1px dashed var(--brand);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-light);
}

/* ================= Cuerpo ================= */
.carta-cuerpo {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: 16px 16px 40px;
}

.carta-estado {
  padding: 32px 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-light);
}

/* ================= Cerrado =================
   Ocupa el lugar de la carta, así que tiene el peso de una portada y no el
   de un aviso al margen: es lo único que el cliente va a leer, y de acá
   tiene que salir sabiendo a qué hora volver. */
.carta-cerrado {
  margin: 28px 0 12px;
  padding: 28px 22px;
  text-align: center;
  border: 1px solid var(--borde, rgba(255,255,255,.12));
  border-radius: var(--radius-lg, 16px);
  background: var(--superficie-2, rgba(255,255,255,.03));
}
.carta-cerrado-marca {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--brand-light);
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.carta-cerrado-titulo {
  margin: 16px 0 8px;
  font-size: 15px; font-weight: 600;
  color: var(--text-light);
}
/* La frase del negocio es lo importante de este bloque: va grande, con el
   ancho cortado para que no quede un renglón de lado a lado que no se lee. */
.carta-cerrado-horario {
  margin: 0 auto;
  max-width: 44ch;
  font-size: 19px; font-weight: 700; line-height: 1.5;
}

/* ================= Categorías =================
   El corte entre una categoría y la siguiente tiene que ser evidente: en una
   carta larga, un título suelto del mismo color que el resto no separa nada.
   Mismas medidas que la carta del referente. */
.seccion { padding-top: 34px; }

/* La línea de corte va solo ENTRE secciones: arriba de la primera sobraría. */
.seccion + .seccion {
  margin-top: 30px;
  border-top: 1px solid var(--border);
}

.seccion-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 10px 14px;
  /* La barra naranja de la izquierda marca el arranque del bloque, y la linea
     que sigue al titulo lo acompaña hasta el borde. Antes habia ademas un
     degradado naranja de fondo: en el celular, sobre el fondo oscuro, no se
     leia como un realce sino como un resplandor rojizo detras del titulo, y
     molestaba mas de lo que ordenaba. La barra y la linea solas separan igual
     las secciones. */
  border-left: 4px solid var(--brand);
}

.seccion-icono {
  font-size: 1.35rem;
  line-height: 1;
}

.seccion-titulo {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-light);
  white-space: nowrap;
}

/* Ocupa lo que sobre después del título y se desvanece: acompaña al nombre
   hasta el borde sin competir con él. */
.seccion-linea {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), rgba(255, 122, 26, 0.04));
}

/* Dos columnas ya desde el celular, como la carta del referente: con la foto
   arriba, una sola columna deja tarjetas enormes y obliga a bajar muchísimo
   para ver el catálogo. */
.seccion-platos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* ================= Plato =================
   La foto va ARRIBA y ocupa el ancho de la tarjeta: en una carta el plato se
   elige mirando, y una miniatura al costado no vende nada. */
.plato {
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* aspect-ratio y no un alto fijo: la foto tiene que crecer con la tarjeta.
   Con `height: 170px` una tarjeta angosta salía casi cuadrada y una ancha
   quedaba como una franja. 3/2 es la proporción de la carta del referente. */
.plato-foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--surface-2), rgba(255, 255, 255, 0.06));
}

.plato-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.plato-foto-vacia { font-size: 2.2rem; opacity: 0.5; }

.plato-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
  padding: 9px 12px 10px;
}

.plato-nombre {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  word-break: break-word;
}

/* Una sola línea: con dos, la descripción empujaba el precio y el botón, y
   en una fila de cuatro tarjetas ninguna quedaba a la misma altura. */
.plato-descripcion {
  margin: 0;
  font-size: 0.76rem;
  font-style: italic;
  line-height: 1.25;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* margin-top auto: el precio y el contador quedan pegados abajo aunque la
   descripción sea corta, así todas las tarjetas de una fila alinean el dato
   que la gente busca. */
.plato-fila {
  margin-top: auto;
  padding-top: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Píldora: el precio es el dato que se busca de un vistazo y en un fondo
   oscuro un texto suelto se pierde entre el nombre y la descripción. */
.plato-precio {
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(255, 122, 26, 0.14);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
}

/* El contador es UNA píldora con borde, no tres controles sueltos: así se
   lee como un solo control y no compite con el botón de agregar. */
.plato-contador {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.plato-contador-boton {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
}

.plato-contador-boton:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }
.plato-contador-boton:disabled { opacity: 0.35; cursor: default; }

.plato-contador-valor {
  min-width: 16px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
}

.plato-nota {
  width: 100%;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.plato-nota[hidden] { display: none; }
.plato-nota::placeholder { color: var(--text-light); }

.plato-acciones { display: flex; gap: 8px; align-items: center; margin-top: 8px; }

.plato-boton-nota {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  background: #9ea7b5;
}

/* Verde cuando el plato ya lleva una nota escrita: de un vistazo se ve
   cuáles se pidieron con cambios. */
.plato-boton-nota[data-con-nota] { background: #2d7b5d; }

/* El botón que de verdad se toca: ocupa todo lo que queda. */
.plato-agregar {
  flex: 1 1 auto;
  padding: 7px 10px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a0d02;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
}

.plato-agregar:hover { background: var(--brand-light); }

.plato-nota { margin-top: 6px; }

/* Observaciones: opciones + texto libre, plegadas detrás del 💬. */
.plato-observaciones { display: flex; flex-direction: column; }
.plato-observaciones[hidden] { display: none; }

/* Las opciones del plato: píldoras que se encienden al elegirlas. */
.plato-opciones { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.plato-opciones-titulo { flex: 1 1 100%; font-size: 10px; color: var(--text-light); }
.plato-opcion {
  padding: 3px 8px;
  font: inherit;
  font-size: 10px;
  line-height: 1.3;
  cursor: pointer;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.plato-opcion.is-elegida { background: var(--brand); border-color: var(--brand); color: #1a0d02; font-weight: 700; }

/* "Adicionales" / "Nota" en el renglón del pedido: pastilla negra. */
.pedido-renglon-tag {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 10px; font-weight: 700; font-style: normal;
  line-height: 1.7;
  vertical-align: 1px;
}

/* ================= Pie ================= */
.carta-pie {
  padding: 20px 16px 32px;
  border-top: 1px solid var(--border-subtle);
  text-align: center;
  font-size: 12px;
  color: var(--text-light);
}
.carta-pie p { margin: 0; }
.carta-pie-link { color: var(--brand-light); font-weight: 600; text-decoration: none; }
.carta-pie-link:hover { text-decoration: underline; }

/* ================= Pantalla ancha =================
   Las columnas NO se fijan por breakpoint: se dejan caber solas con
   auto-fill. Así cada ancho usa las que entren —2 en una tablet, 3 en un
   portátil, 4 en un monitor— sin una lista de breakpoints que mantener y sin
   que a 1439px sobre media pantalla esperando al siguiente corte.

   El mínimo de 300px es lo que necesita una tarjeta para que la foto, el
   nombre y el precio convivan sin romperse. */
@media (min-width: 720px) {
  .carta-head { padding: 32px 24px 20px; }
  .carta-negocio { font-size: 30px; }
  .carta-cuerpo { padding: 24px 24px 48px; }
  .carta-pie { padding-inline: 24px; }

  /* 200px de mínimo deja tarjetas de ~215px, que es la medida de la carta
     del referente: cuatro columnas en un portátil y las que entren en un
     monitor, sin que ninguna se estire hasta parecer un banner.

     auto-fill y no una cuenta fija de columnas porque acá el catálogo NO
     ocupa el ancho de la pantalla: al lado tiene la columna del pedido, así
     que un breakpoint sobre el viewport mediría lo que no es. */
  .seccion-platos {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* ---- ¿Cuánto sale el domicilio? (docs/etapa_3_tarifa_domicilio.md §8.2) ----
   Solo aparece si el negocio activó la tarifa. Va arriba del catálogo porque
   es la pregunta que el cliente hace antes de mirar los precios. */





/* Botón ancho: en un celular se toca con el pulgar. */



@media (min-width: 720px) {
  /* Texto a la izquierda, botón a la derecha: apilado ocupaba tres renglones
     de ancho completo para decir una sola cosa. */



  /* El mapa NO se estira a todo el ancho: un mapa de 1400px para marcar un
     punto no ayuda a nadie, y aleja el valor calculado de donde se mira. */
}





/* La barra superior es pegajosa: sin este margen, al saltar a una categoría
   su encabezado queda escondido detrás de ella. */
.seccion { scroll-margin-top: 120px; }

/* Botón de instalar. Mismo aspecto que "Su pedido": son las dos acciones con
   texto de la barra. En pantalla angosta pierde la etiqueta y queda redondo,
   porque ahí compite por el espacio con el nombre del negocio. */
.topbar-instalar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
}

.topbar-instalar[hidden] { display: none; }
.topbar-instalar:hover { background: var(--surface-2); }
.topbar-instalar svg { width: 15px; height: 15px; flex: 0 0 auto; }

@media (max-width: 600px) {
  .topbar-instalar { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .topbar-instalar span { display: none; }
}

/* ================= Cajones laterales =================
   Los dos paneles que entran desde la derecha —el índice de categorías y el
   pedido— comparten forma. Nunca hay dos abiertos a la vez, así que también
   comparten el fondo oscuro. */
.cajon-fondo {
  position: fixed;
  inset: 0;
  z-index: 29;
  background: rgba(0, 0, 0, 0.55);
}

.cajon-fondo[hidden] { display: none; }

.cajon {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  width: min(88vw, 380px);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  /* La sombra lo despega del catálogo: sin ella, sobre un fondo oscuro el
     cajón y la página se leen como una sola superficie. */
  box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35);
  background: var(--surface-1);
  /* Fuera de pantalla, y vuelve deslizándose. No se usa display:none para que
     la transición exista. */
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.cajon.is-open { transform: translateX(0); }

.cajon-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border);
}

.cajon-cabecera h2 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-light);
}

.cajon-cerrar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
}

.cajon-cerrar:hover { color: var(--text); background: var(--surface-2); }

/* ---- Índice de categorías ---- */
.categorias-cajon-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  overflow-y: auto;
}

.categorias-cajon-lista a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
}

.categorias-cajon-lista a:hover { background: var(--surface-2); }
.categorias-cajon-lista .icono { font-size: 1.05rem; line-height: 1; }

/* ---- Su pedido ----
   Mismas medidas que el cajón de la carta del referente. El renglón va
   [contador] [nombre] [Quitar]: el contador primero porque es lo que se toca,
   y sin el precio por renglón — el total está abajo y la tarjeta ya lo dice,
   así que repetirlo llenaba de números un panel angosto. */
.carta-pedido-cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 18px 22px;
  overflow-y: auto;
}

.carta-pedido-vacio {
  padding: 30px 4px;
  text-align: center;
  font-size: 0.84rem;
  color: var(--text-muted);
}

.carta-pedido-vacio[hidden] { display: none; }

.carta-pedido-items { display: flex; flex-direction: column; }

.pedido-renglon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}

.pedido-renglon:last-child { border-bottom: none; }

/* El contador, más chico que el de las tarjetas: acá el panel es angosto y
   compite con el nombre del plato. */
.pedido-renglon-contador {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 3px 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.pedido-renglon-contador .plato-contador-boton { width: 20px; height: 20px; font-size: 0.9rem; }

.pedido-renglon-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pedido-renglon-nombre { word-break: break-word; }
.pedido-renglon-nota { font-size: 0.72rem; font-style: italic; color: var(--text-muted); }

.pedido-renglon-quitar {
  flex: 0 0 auto;
  padding: 0;
  font: inherit;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  background: none;
}

.pedido-renglon-quitar:hover { color: var(--text); }

.carta-pedido-totales { margin-top: 4px; display: flex; flex-direction: column; }
.carta-pedido-totales[hidden] { display: none; }

.carta-pedido-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.carta-pedido-fila[hidden] { display: none; }

.carta-pedido-fila.is-total {
  padding: 12px 0;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

/* El número del total, en naranja y más grande: es lo que el cliente vino a
   buscar cuando abre el pedido. */
.carta-pedido-fila.is-total span:last-child {
  font-size: 1rem;
  color: var(--brand-light);
}

.carta-pedido-nota {
  margin: 4px 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-light);
}

.carta-pedido-vaciar {
  margin-top: 14px;
  width: 100%;
  padding: 10px 14px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
}

.carta-pedido-vaciar:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }

/* ================= "Vuela al carrito" =================
   Al tocar Agregar sale una burbuja desde el botón hasta el botón del pedido.
   No es adorno: el carrito es un cajón cerrado, y sin esto no hay nada que
   diga adónde fue lo que se acaba de agregar. */
.vuela-al-pedido {
  position: fixed;
  z-index: 3000;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--brand);
  background-size: cover;
  background-position: center;
  font-size: 1.2rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  opacity: 1;
  transform: translate(0, 0) scale(1);
  transition: transform 0.62s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease 0.12s;
  will-change: transform, opacity;
}

/* El botón da un respingo cuando la burbuja llega: cierra el movimiento y
   confirma que el artículo entró. */
@keyframes pedidoRespingo {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.topbar-pedido.is-respingo { animation: pedidoRespingo 0.28s ease; }

/* Quien pidió no ver animaciones no las ve. */
@media (prefers-reduced-motion: reduce) {
  .cajon { transition: none; }
  .vuela-al-pedido { display: none; }
  .topbar-pedido.is-respingo { animation: none; }
}

/* ---- Paso 2: los datos ---- */
.carta-pedido-confirmar {
  margin-top: 14px;
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  color: #06210f;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  /* Verde y no naranja: es el botón que cierra el paso, y tiene que
     distinguirse de "Agregar", que es el que se toca todo el tiempo. */
  background: #22c55e;
}

.carta-pedido-confirmar:hover { background: #34d977; }

.pedido-datos-titulo {
  margin: 0 0 14px;
  font-size: 0.95rem;
  font-weight: 700;
}

.pedido-campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }

.pedido-campo > span {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
}

.pedido-campo input {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 0.84rem;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.pedido-campo input:focus { outline: 1px solid var(--brand); }

.pedido-campo-titulo {
  display: block;
  margin-bottom: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* El panel es angosto: el mapa acá va más bajo que en Configuración. */
.pedido-datos .selub-mapa { height: 190px; }

.pedido-direccion {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.pedido-direccion[hidden] { display: none; }

.pedido-direccion-fila {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.pedido-direccion-fila strong { color: var(--text); text-align: right; }


/* Cómo se llegó al valor del domicilio, justo debajo de su fila: la ruta
   medida, el estimado mientras responde el servidor, o el motivo de que no
   haya cobertura. Antes esto vivía en un bloque aparte, arriba en la carta;
   ahora va donde el cliente está mirando el número. */
.pedido-domicilio-detalle {
  margin: -2px 0 8px;
  font-size: 12px;
  color: var(--text-light);
}
.pedido-domicilio-detalle[hidden] { display: none; }

/* ================= El cierre por botones =================
   docs/etapa_3_pedido_desde_la_carta.md §7. Todo se toca; lo único que se
   escribe es el monto en efectivo. Por eso los objetivos son grandes: esto se
   usa con el pulgar, de pie, casi siempre en la calle. */
.pedido-pago { display: flex; flex-direction: column; gap: 12px; }

.pedido-pago-total {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* Dos opciones grandes, una al lado de la otra si entran. */
.pedido-opciones { display: flex; flex-wrap: wrap; gap: 10px; }

.pedido-opcion {
  flex: 1 1 140px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  min-height: 84px;
  padding: 14px 12px;
  font: inherit; font-size: 15px; font-weight: 700;
  color: var(--text);
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.pedido-opcion[hidden] { display: none; }
.pedido-opcion:hover { border-color: var(--brand); }
.pedido-opcion-icono { font-size: 22px; line-height: 1; }

/* Los billetes: rejilla, no una fila que se desborde. "Completo" ocupa el
   ancho entero porque es la respuesta más probable y la que no tiene vuelto. */
.pedido-billetes { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }

.pedido-billete {
  padding: 14px 10px;
  font: inherit; font-size: 16px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.pedido-billete:hover { border-color: var(--brand); }
.pedido-billete:disabled { opacity: .5; cursor: default; }
.pedido-billete.is-exacto {
  grid-column: 1 / -1;
  font-size: 15px;
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-light);
}

.pedido-otro-monto {
  padding: 10px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: transparent;
}
.pedido-otro-monto[hidden] { display: none; }

.pedido-otro-campo { display: flex; flex-direction: column; gap: 8px; }
.pedido-otro-campo[hidden] { display: none; }
/* Grande y tabular: es una cifra, se lee de un vistazo y se teclea con el
   pulgar. */
.pedido-otro-input {
  width: 100%;
  padding: 12px 14px;
  font: inherit; font-size: 20px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}
.pedido-otro-input:focus { outline: none; border-color: var(--brand); }

/* Los datos de la cuenta: lo que el cliente va a copiar en su app del banco. */
.pedido-cuenta {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.pedido-cuenta-entidad { margin: 0; font-size: 16px; font-weight: 800; }
.pedido-cuenta-titular { margin: 2px 0 12px; font-size: 13px; color: var(--text-muted); }
.pedido-cuenta-numero-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pedido-cuenta-numero {
  flex: 1 1 auto;
  font-size: 20px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  word-break: break-all;
}
.pedido-cuenta-copiar {
  flex: 0 0 auto;
  padding: 9px 16px;
  font: inherit; font-size: 13px; font-weight: 700;
  color: #1a0d02;
  cursor: pointer;
  border: none;
  border-radius: 999px;
  background: var(--brand);
}
.pedido-cuenta-copiar.is-copiado { background: var(--brand-light); }

/* La captura del pago. */
.pedido-cuenta-instruccion { margin: 0; font-size: 13px; color: var(--text-muted); }
.pedido-captura-elegida {
  margin: 0;
  font-size: 12px;
  color: var(--brand-light);
  word-break: break-all;
}

/* Llegó. Es el final del recorrido: tiene que sentirse como tal. */
.pedido-listo { padding: 22px 6px; text-align: center; }
.pedido-listo-marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-light);
  font-size: 26px; font-weight: 800;
}
.pedido-listo-titulo { margin: 14px 0 6px; font-size: 18px; }
.pedido-listo-numero { margin: 0 0 10px; font-size: 14px; color: var(--brand-light); font-weight: 700; }
.pedido-listo-detalle { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.6; }

.pedido-datos-error {
  margin: 10px 0 0;
  padding: 8px 12px;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  font-size: 0.76rem;
  line-height: 1.4;
  color: #fca5a5;
}

.pedido-datos-error[hidden] { display: none; }

.pedido-volver {
  margin-top: 10px;
  width: 100%;
  padding: 8px;
  font: inherit;
  font-size: 0.76rem;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
  border: 0;
  background: none;
}

.pedido-volver:hover { color: var(--text); }

/* ---- Paso 3: así queda ---- */
.pedido-resumen {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}

.pedido-resumen-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-light);
}

.pedido-resumen-editar {
  padding: 5px 12px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #06210f;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  background: #22c55e;
}

.pedido-resumen-fila {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: 0.8rem;
}

.pedido-resumen-fila.is-total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-weight: 800;
}

.pedido-resumen-fila.is-total span:last-child { color: var(--brand-light); }

.pedido-resumen-datos {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pedido-resumen-datos .pedido-resumen-fila { font-size: 0.76rem; color: var(--text-muted); }