/* Buffet — pantalla de compra. Identidad de PGI, pensada para el celular.

   Sin fuentes externas, por el mismo motivo que el resto de la plataforma: el
   servidor corre en la red interna y puede no tener salida a internet. Una
   fuente que no baja rompe el diseño en el peor momento, que acá es la fila. */

:root {
  --azul:        #02557B;
  --azul-hondo:  #013C58;
  --azul-noche:  #01293C;
  --naranja:     #E5652C;
  --naranja-sec: #C24E1B;

  --papel:       #F4F6F8;
  --superficie:  #FFFFFF;
  --borde:       #DCE3E9;
  --tinta:       #16232B;
  --tinta-suave: #5D7080;

  /* Tonos derivados de los dos colores de la casa. Todo lo que se agregó para
     la góndola sale de acá: nada de una paleta nueva que haga parecer esto una
     aplicación de delivery cualquiera y no la facultad. */
  --azul-tenue:    #E8F0F6;
  --azul-tenue-2:  #D7E5EF;
  --azul-medio:    #2C6E90;
  --naranja-tenue: #FFF1E8;
  --naranja-tenue-2: #FBDDCB;
  /* El naranja de la casa sobre su propio tono claro no llega a 4.5:1, y los
     avisos de stock son letra chica. Este es el mismo color, un paso más hondo. */
  --naranja-hondo: #B03F12;
  --arena:         #FBEFE2;
  --arena-2:       #F2DFC7;
  --arena-tinta:   #9A5E1E;

  --ok:          #1E7A4C;
  --mal:         #A3241C;

  --radio:       12px;
  /* La tarjeta de producto va más redondeada que el resto: es lo que se toca y
     lo que tiene que leerse como una ficha de góndola, no como un renglón. */
  --radio-tarjeta: 16px;
  --sombra:      0 1px 2px rgba(1, 41, 60, .06), 0 8px 24px rgba(1, 41, 60, .07);
  --sombra-tarjeta: 0 1px 2px rgba(1, 41, 60, .05), 0 4px 14px rgba(1, 41, 60, .06);
  --titulo: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --texto:  "Roboto", "Segoe UI", system-ui, sans-serif;

  /* Alto de la barra fija de abajo: el contenido tiene que poder llegar hasta
     el final sin quedar tapado. */
  --barra-alto: 74px;

  /* Lo mide el JS al abrir: el buscador se pega justo debajo de la cabecera y
     la cabecera no siempre tiene el mismo alto. Este valor es solo el arranque,
     antes de la primera medición. */
  --cabecera-alto: 66px;

  /* Mínimo para apretar con el pulgar sin errarle, de parado. */
  --toque: 44px;

  /* Foto de producto: grande, que es lo que se mira primero al elegir comida. */
  --foto: 88px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--texto);
  color: var(--tinta);
  background: var(--papel);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--titulo); font-weight: 700; margin: 0; }
p { margin: 0 0 10px; }
.chico { font-size: 13px; }
.apagado { color: var(--tinta-suave); }

button {
  font: inherit; font-family: var(--titulo); font-weight: 600;
  cursor: pointer; border: 0; border-radius: 10px;
  padding: 13px 18px; background: var(--naranja); color: #fff;
  min-height: var(--toque);
  transition: background .15s ease, transform .05s ease;
}
button:hover { background: var(--naranja-sec); }
button:active { transform: translateY(1px); }
button:disabled, button:disabled:hover {
  background: #DDE3E8; color: var(--tinta-suave); cursor: not-allowed;
}
button:disabled:active { transform: none; }
.boton-sec { background: #EEF2F5; color: var(--azul); }
.boton-sec:hover { background: #E1E8EE; }
.ancho { width: 100%; }
/* Un botón que parece enlace: para acciones secundarias dentro de un texto,
   pero con alto de toque igual. */
.enlace {
  background: none; color: var(--azul); padding: 10px 0;
  font-family: var(--texto); font-weight: 600; text-decoration: underline;
}
.enlace:hover { background: none; color: var(--azul-hondo); }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }

/* ---------- Estados de pantalla completa ---------- */

.centro {
  min-height: 100%;
  display: grid; place-items: center; padding: 28px 20px; text-align: center;
}
.girando {
  width: 34px; height: 34px; margin: 0 auto 14px;
  border: 3px solid var(--borde); border-top-color: var(--azul);
  border-radius: 50%; animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .girando { animation-duration: 2.4s; }
}

.tarjeta-puerta, .tarjeta-fin {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 32px 26px; max-width: 420px; width: 100%;
}
.logo { height: 52px; width: auto; margin-bottom: 14px; }
.tarjeta-puerta h1, .tarjeta-fin h1, .tarjeta-fin h2 { font-size: 21px; margin-bottom: 8px; }
/* La misma tarjeta dentro de una hoja común (el cobro de deuda): centrada. */
.hoja > .tarjeta-fin { margin: 0 auto; text-align: center; }

.tilde {
  width: 58px; height: 58px; margin: 0 auto 14px;
  border-radius: 50%; background: #E4F1EA; color: var(--ok);
  display: grid; place-items: center; font-size: 30px; font-weight: 700;
}
.tilde.mal { background: #FDECEA; color: var(--mal); }
.tarjeta-fin > button { margin-top: 18px; width: 100%; }
.fin-cuenta { color: var(--naranja-sec); font-weight: 600; font-size: 14.5px; }

/* ---------- Cabecera ---------- */

.cabecera {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(160deg, var(--azul-noche), var(--azul) 70%);
  color: #fff;
}
.cabecera img {
  height: 34px; width: auto; background: #fff; padding: 4px 7px; border-radius: 6px;
}
/* El nombre cede espacio antes que el botón de la derecha: en un teléfono
   angosto el nombre largo del buffet se corta, el chip de la cuenta no. */
.cabecera-texto { flex: 1; min-width: 0; }
.cabecera-titulo {
  font-family: var(--titulo); font-weight: 700; font-size: 16px; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cabecera-sub {
  margin: 0; font-size: 11.5px; color: #9FC0D4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cabecera-der { margin-left: auto; display: flex; align-items: center; flex: none; }

/* Sesión: "Entrar" o el chip con nombre y saldo. Claros sobre el azul, sin
   naranja: el naranja de la cabecera se reserva para la deuda. */
.boton-entrar {
  padding: 9px 16px; font-size: 14px;
  background: rgba(255, 255, 255, .14); color: #fff;
  border: 1px solid rgba(255, 255, 255, .4);
}
.boton-entrar:hover { background: rgba(255, 255, 255, .26); }
.chip {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: 1px; padding: 5px 13px; border-radius: 22px; text-align: right;
  background: rgba(255, 255, 255, .14); color: #fff;
  border: 1px solid rgba(255, 255, 255, .32);
}
.chip:hover { background: rgba(255, 255, 255, .26); }
.chip-nombre { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.chip-saldo { font-size: 11.5px; font-weight: 600; line-height: 1.2; color: #BFD8E6; }
.chip-saldo.debe { color: #FFB38A; }
.chip-saldo.favor { color: #9FE0B8; }

/* ---------- Hoja ---------- */

.hoja {
  max-width: 720px; margin: 0 auto;
  padding: 18px 16px calc(var(--barra-alto) + 24px);
}
.hoja h1 { font-size: 20px; margin-bottom: 12px; }
.subtitulo { font-size: 15px; margin: 20px 0 8px; }

.aviso {
  border-left: 3px solid var(--naranja); background: #FFF4EE;
  padding: 11px 14px; border-radius: 0 8px 8px 0; font-size: 13.5px;
}
.error {
  color: var(--mal); background: #FDECEA; border-left: 3px solid var(--mal);
  padding: 10px 13px; border-radius: 0 6px 6px 0; font-size: 13.5px;
}
.vacio {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 30px 20px; text-align: center; color: var(--tinta-suave);
}
.vacio strong { display: block; font-family: var(--titulo); color: var(--tinta); margin-bottom: 4px; }

.enlace-atras {
  background: none; color: var(--azul); padding: 4px 0; margin-bottom: 8px;
  font-family: var(--texto); font-weight: 400; font-size: 14px;
}
.enlace-atras:hover { background: none; text-decoration: underline; }

/* ---------- Buscador y categorías ---------- */

/* Se pega debajo de la cabecera y se sale del padding de la hoja para que los
   chips lleguen hasta el borde: cortar el último chip contra el margen es lo
   que le avisa a la persona que la fila sigue y se puede arrastrar. */
.buscador {
  position: sticky; top: var(--cabecera-alto); z-index: 4;
  margin: -18px -16px 14px; padding: 12px 16px 10px;
  background: var(--papel);
  box-shadow: 0 8px 12px -10px rgba(1, 41, 60, .35);
}

.buscador-caja {
  display: flex; align-items: center; gap: 10px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 999px; padding: 0 4px 0 14px; min-height: 48px;
  box-shadow: 0 1px 2px rgba(1, 41, 60, .05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.buscador-caja:focus-within {
  border-color: var(--azul); box-shadow: 0 0 0 3px rgba(2, 85, 123, .16);
}
.buscador-lupa {
  width: 19px; height: 19px; flex: none;
  fill: none; stroke: var(--tinta-suave); stroke-width: 2; stroke-linecap: round;
}
.buscador-caja:focus-within .buscador-lupa { stroke: var(--azul); }
/* 16px clavados: con menos, el navegador del teléfono hace zoom al enfocar el
   campo y la persona queda con el catálogo movido de lugar. */
.buscador-campo {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font: inherit; font-size: 16px; color: var(--tinta);
  min-height: var(--toque); padding: 0;
}
.buscador-campo::placeholder { color: var(--tinta-suave); }
/* La cruz nativa de `type=search` sobra: ya hay una, y del tamaño del pulgar. */
.buscador-campo::-webkit-search-cancel-button,
.buscador-campo::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.buscador-limpiar {
  width: var(--toque); height: var(--toque); flex: none; padding: 0;
  border-radius: 50%; background: var(--azul-tenue); color: var(--azul);
  display: grid; place-items: center;
}
.buscador-limpiar:hover { background: var(--azul-tenue-2); }
.buscador-limpiar svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round;
}

/* Fila de categorías: se arrastra con el pulgar y engancha en cada chip. */
.chips {
  display: flex; gap: 8px; margin: 10px -16px 0; padding: 2px 16px;
  overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip-cat {
  flex: none; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  min-height: var(--toque); padding: 0 15px; border-radius: 999px;
  background: var(--superficie); border: 1px solid var(--borde);
  color: var(--azul-hondo); font-size: 14px; font-weight: 600;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.chip-cat:hover { background: var(--azul-tenue); }
.chip-cat.activa { background: var(--azul); border-color: var(--azul); color: #fff; }
.chip-cat.activa:hover { background: var(--azul-hondo); }
.chip-num {
  font-family: var(--texto); font-size: 12px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px;
  background: var(--azul-tenue); color: var(--azul-medio);
}
.chip-cat.activa .chip-num { background: rgba(255, 255, 255, .22); color: #fff; }

.buscar-estado {
  margin: 0 0 10px; font-size: 13px; color: var(--tinta-suave);
}
#sin-resultados strong { font-size: 16px; }
#sin-resultados span { display: block; }
#sin-resultados button { margin-top: 16px; }

/* ---------- Catálogo ---------- */

.grupo { margin-bottom: 24px; }
.grupo h2 {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 700; color: var(--tinta);
  letter-spacing: -.01em; margin-bottom: 10px;
}
/* Un filete naranja hace de viñeta: ordena la góndola de un vistazo sin gastar
   una línea de texto más. */
.grupo h2::before {
  content: ""; flex: none; width: 4px; height: 17px;
  border-radius: 2px; background: var(--naranja);
}
/* Buscando, el resultado es una lista sola: los títulos de categoría harían
   creer que falta lo que quedó en los otros grupos. */
#grupos.buscando .grupo h2 { display: none; }
#grupos.buscando .grupo { margin-bottom: 0; }

/* Repetir la última compra: arriba de todo, porque en la fila lo más rápido es
   lo mismo de ayer. Filete azul, no naranja, para no confundirlo con un aviso. */
.franja-repetir {
  display: flex; align-items: center; gap: 12px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-left: 4px solid var(--azul); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 10px 12px 10px 14px; margin-bottom: 14px;
}
.franja-repetir > div { flex: 1; min-width: 0; }
.franja-rotulo {
  margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-suave); font-weight: 600;
}
.franja-detalle {
  margin: 0; font-size: 14px; font-family: var(--titulo); font-weight: 600;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.franja-repetir button { white-space: nowrap; flex: none; }

/* La ficha: foto grande a la izquierda, nombre arriba y —abajo, en la misma
   línea— el precio y el contador. Es el orden en que se decide comprar algo:
   qué es, cuánto sale, lo llevo. */
.producto {
  display: grid; grid-template-columns: var(--foto) 1fr; gap: 14px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta);
  padding: 12px; margin-bottom: 10px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* El alto y el ancho van también en el HTML: sin eso, cada imagen que termina de
   bajar empuja la lista hacia abajo y el dedo cae en el producto equivocado. */
.producto-foto {
  width: var(--foto); height: var(--foto); border-radius: 12px; object-fit: cover;
  background: var(--azul-tenue); display: block; align-self: center;
}
/* Sin foto, la inicial sobre un fondo de la casa. Ocupa exactamente el mismo
   lugar que una foto: una fila con imagen y otra sin ella desalinean los
   precios y la lista se lee peor. */
.producto-foto.sin-foto {
  display: grid; place-items: center;
  font-family: var(--titulo); font-weight: 800; font-size: 32px; line-height: 1;
  -webkit-user-select: none; user-select: none;
}
.tono-0 { background: linear-gradient(150deg, var(--azul-tenue), var(--azul-tenue-2)); color: var(--azul-medio); }
.tono-1 { background: linear-gradient(150deg, var(--naranja-tenue), var(--naranja-tenue-2)); color: var(--naranja-sec); }
.tono-2 { background: linear-gradient(150deg, var(--arena), var(--arena-2)); color: var(--arena-tinta); }
.tono-3 { background: linear-gradient(150deg, #EDF2F5, #DBE6EC); color: var(--azul-hondo); }

/* Lo elegido se distingue por el filete y por el número del contador, no solo
   por color: en una pantalla al sol el color casi no se ve. El filete va como
   sombra interior y no como borde para que la tarjeta no se corra 3px al
   sumar la primera unidad. */
.producto.elegido {
  border-color: var(--naranja);
  box-shadow: inset 4px 0 0 var(--naranja), var(--sombra-tarjeta);
  background: linear-gradient(96deg, var(--naranja-tenue), var(--superficie) 42%);
}
.producto.agotado { opacity: .62; }

.producto-cuerpo {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 8px; min-height: var(--foto); min-width: 0;
}
/* Dos renglones y corta: un nombre largo no puede empujar el precio fuera de la
   tarjeta ni desalinear la lista. */
.producto-nombre {
  margin: 0; font-family: var(--titulo); font-weight: 600; font-size: 15.5px;
  line-height: 1.25; letter-spacing: -.005em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* Un solo aviso por producto, y el más urgente: no queda, ya te lo llevás todo,
   o queda poco. */
.producto-nota {
  display: inline-block; margin: 5px 0 0; padding: 2px 8px;
  border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
}
.producto-nota.poco { background: var(--naranja-tenue); color: var(--naranja-hondo); }
.producto-nota.tope { background: var(--azul-tenue); color: var(--azul-medio); }
.producto-nota.agotado { background: #EEF1F4; color: var(--tinta-suave); }

.producto-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.producto-precio {
  margin: 0; font-family: var(--titulo); font-weight: 800; font-size: 18px;
  letter-spacing: -.02em; color: var(--tinta);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Contador. Los botones son grandes a propósito: se usan de parado, con una
   mano y en movimiento. Sin nada elegido queda solo el "+", como en cualquier
   góndola de aplicación: el "−" no tiene nada que quitar y le come el ancho al
   precio. Al sumar, la píldora se abre. */
.contador {
  display: flex; align-items: center; flex: none;
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: 999px; padding: 3px;
}
.contador button {
  width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 50%;
  font-size: 21px; line-height: 1; display: grid; place-items: center;
  background: var(--superficie); color: var(--azul); border: 1px solid var(--borde);
}
.contador button:hover { background: var(--azul-tenue); }
.contador button.sumar { background: var(--naranja); color: #fff; border-color: var(--naranja); }
.contador button.sumar:hover { background: var(--naranja-sec); border-color: var(--naranja-sec); }
.contador button:disabled, .contador button:disabled:hover {
  background: #EDF0F3; color: #9AA9B4; border-color: var(--borde);
}
.contador.vacia { background: none; border-color: transparent; padding: 0; }
.contador.vacia [data-quitar], .contador.vacia .contador-valor { display: none; }
.contador.vacia button.sumar {
  width: var(--toque); height: var(--toque);
  box-shadow: 0 2px 8px rgba(229, 101, 44, .32);
}
.contador.vacia button.sumar:disabled { box-shadow: none; }
.contador-valor {
  min-width: 30px; text-align: center;
  font-family: var(--titulo); font-weight: 700; font-size: 16px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Resumen ---------- */

.resumen {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  overflow: hidden; margin-bottom: 14px;
}
.renglon {
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
  padding: 11px 15px; border-bottom: 1px solid #EDF1F4; font-size: 14.5px;
}
.renglon:last-child { border-bottom: 0; }
.renglon-monto { font-variant-numeric: tabular-nums; }
.renglon.total {
  background: #F7FAFC; font-family: var(--titulo); font-weight: 700; font-size: 16px;
}
.renglon-detalle { color: var(--tinta-suave); font-size: 12.5px; }

.simulada {
  background: var(--superficie); border: 1px dashed var(--naranja);
  border-radius: var(--radio); padding: 15px;
}
.acciones-simulada { display: grid; gap: 8px; margin-top: 10px; }
.acciones-simulada button { width: 100%; }

/* ---------- Medio de pago (revisión) ---------- */

.medios { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.medios legend {
  font-family: var(--titulo); font-weight: 700; font-size: 15px;
  padding: 0; margin-bottom: 8px;
}
/* Dos opciones grandes, del mismo tamaño que una tarjeta de producto: se
   eligen con el pulgar, no con el cursor. */
.opcion-medio {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 12px 14px; margin-bottom: 8px; min-height: 62px; cursor: pointer;
}
.opcion-medio.elegida { border-color: var(--naranja); border-left: 4px solid var(--naranja); }
.opcion-medio input { width: 22px; height: 22px; margin: 0; accent-color: var(--naranja); }
.opcion-titulo { display: block; font-family: var(--titulo); font-weight: 600; font-size: 15px; }
.opcion-detalle { display: block; color: var(--tinta-suave); font-size: 13px; }
/* La opción que no se puede usar sigue visible, con el motivo: que la persona
   sepa que existe y qué le falta, en vez de preguntar en el mostrador. */
.opcion-medio.no-disponible { cursor: not-allowed; background: #F7FAFC; }
.opcion-medio.no-disponible .opcion-titulo { color: var(--tinta-suave); }
.opcion-medio.no-disponible .opcion-detalle { color: var(--naranja-sec); }
#revision-arreglar { margin-bottom: 12px; }

/* ---------- Mi cuenta ---------- */

.cuenta-nombre { font-family: var(--titulo); font-weight: 600; font-size: 16px; margin: 0; }
.tarjeta-saldo {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 18px 16px; margin: 14px 0 18px;
}
.saldo-rotulo {
  margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-suave); font-weight: 600;
}
.saldo-grande {
  margin: 0 0 6px; font-family: var(--titulo); font-weight: 800;
  font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.saldo-grande.debe { color: var(--naranja-sec); }
.saldo-grande.favor { color: var(--ok); }
.lista-falta { list-style: none; margin: 8px 0 0; padding: 0; }
.lista-falta li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-top: 1px solid #EDF1F4; font-size: 14px;
}
.lista-falta li:first-child { border-top: 0; }
.lista-falta .enlace { flex: none; padding: 8px 0; }
.tarjeta-saldo > button { width: 100%; margin-top: 12px; }

.compra-previa .renglon-monto { font-family: var(--titulo); font-weight: 600; margin-top: 2px; }
.compra-previa button { align-self: center; padding: 10px 14px; }

/* ---------- Formularios chicos (pago de deuda) ---------- */

.mini-form { margin-top: 10px; }
.mini-form label {
  display: block; font-size: 13px; font-weight: 600; color: var(--tinta-suave);
  margin: 10px 0 4px;
}
.mini-form input {
  width: 100%; min-height: 48px; font: inherit; font-size: 18px;
  padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--superficie); color: var(--tinta); font-variant-numeric: tabular-nums;
}
.mini-form input:focus {
  border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px rgba(2, 85, 123, .15);
}
.mini-form .acciones-simulada { margin-top: 12px; }

/* ---------- Términos ---------- */

/* pre-wrap: el texto viene plano y los saltos de línea son los párrafos. El
   alto tope deja el botón de aceptar a la vista sin buscarlo al final. */
.texto-largo {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px 16px; margin-bottom: 8px;
  max-height: 55vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 14px; line-height: 1.55;
}
.check {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: var(--toque); padding: 10px 0; font-size: 15px; cursor: pointer;
}
.check input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--naranja); }

/* ---------- Barra fija ---------- */

.barra-pago {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--superficie); border-top: 1px solid var(--borde);
  box-shadow: 0 -6px 20px rgba(1, 41, 60, .08);
}
.barra-texto { min-width: 0; transform-origin: left center; --pico: 1.04; }
.barra-rotulo { margin: 0; font-size: 12px; color: var(--tinta-suave); }
.barra-total {
  margin: 0; font-family: var(--titulo); font-weight: 800; font-size: 22px;
  line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.barra-pago button {
  min-width: 158px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
/* Cuántas cosas hay, pegado al botón y no perdido en el rótulo: es el bollito
   del carrito de cualquier aplicación, y se entiende sin leerlo. Va blanco y no
   translúcido: el número translúcido sobre el naranja no llega al contraste
   mínimo, y es un número, no un adorno. */
.barra-cuenta {
  display: grid; place-items: center; min-width: 24px; height: 24px;
  padding: 0 6px; border-radius: 999px;
  background: #fff; color: var(--naranja-sec);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}

@media (min-width: 560px) {
  .barra-pago { max-width: 720px; margin: 0 auto; border-radius: 14px 14px 0 0; border: 1px solid var(--borde); }
}

/* En pantalla ancha la góndola va en dos columnas: la misma tarjeta estirada a
   720px queda con un desierto entre el nombre y el precio. */
@media (min-width: 620px) {
  .grupo-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
  .grupo-lista .producto { margin-bottom: 0; }
}

/* Teléfonos angostos: la foto cede antes que el contador, que es lo que se
   toca. */
@media (max-width: 359px) {
  :root { --foto: 72px; }
  .producto-precio { font-size: 17px; }
}

/* ---------- Latido ---------- */

/* Confirma que el toque entró. Es corto y es escala: no mueve nada de lugar ni
   obliga al navegador a rehacer la lista. */
@keyframes latido { 50% { transform: scale(var(--pico, 1.14)); } }
.late { animation: latido .28s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .late { animation: none; }
  .producto, .chip-cat, .buscador-caja { transition: none; }
}

/* El salto a la pasarela como enlace y no como redirección: en iPhone es la
   única forma de que se abra la app de Mercado Pago (ver `irAPagarAfuera`).
   Tiene que verse como el botón principal que es, no como un enlace suelto. */
.ir-a-pagar { text-align: center; padding: 8px 0 4px; }
.boton-ir {
  display: block; width: 100%; box-sizing: border-box;
  min-height: var(--toque, 44px); padding: 15px 18px;
  background: var(--naranja); color: #fff; text-decoration: none;
  border-radius: 12px; font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .18);
}
.boton-ir:active { transform: scale(.985); }
.ir-a-pagar .chico { margin: 10px 4px 0; }