/* ════════════════════════════════════════════════════════════════════
   SAIOS Portal · estilos v2 (feedback usuario 2026-07-20):
   · FUERA el degradado naranja→verde — naranja #F39200 sólido y vibrante
   · SOLO el símbolo champiñón (identidad de marca), no el logo completo
   · Espíritu Rappi: color pleno, tarjetas blancas grandes y redondas,
     tipografía gorda, burbujas flotantes y micro-animaciones
   · Verde queda SOLO semántico (buenas noticias)
   · Móvil primero · claro/oscuro · inputs 16px (iOS) · 100dvh (iPhone)
   ════════════════════════════════════════════════════════════════════ */
:root {
  --brand: #F39200;
  --brand-oscuro: #d97f00;
  /* El mismo gris con el que se blanquean las fotos (blanquear-fondo.ps1).
     Va en los marcos de imagen para que la foto y su marco sean una sola
     cosa; en blanco puro se veían las franjas del `contain`. NO cambia en
     modo oscuro: la foto trae ese fondo cocido dentro del JPEG. */
  --foto-fondo: #f2efe9;
  /* El ancho de la app. Móvil primero: en pantalla ancha NO se estira, se
     centra — y el encabezado y la barra de abajo miden lo mismo que el
     contenido, si no la app queda descuadrada. */
  --ancho: 560px;
  --verde: #2E7D46;
  --fondo: #f7f4ef;
  --tarjeta: #ffffff;
  --texto: #26221c;
  --texto-suave: #7a736a;
  --borde: #eee7dd;
  --rojo: #c0392b;
  --rojo-fondo: #fdeeec;
  --verde-fondo: #ecf6ef;
  --ambar-fondo: #fdf4e3;
  --sombra: 0 3px 14px rgba(40, 30, 10, .09);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #17140f;
    --tarjeta: #221e17;
    --texto: #f2ede5;
    --texto-suave: #a59c8e;
    --borde: #383226;
    --rojo: #ff8a7a;
    --rojo-fondo: #33201d;
    --verde-fondo: #1d2b21;
    --ambar-fondo: #2e2617;
    --sombra: 0 3px 14px rgba(0, 0, 0, .45);
  }
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
.oculto { display: none !important; }
/* Mientras se está en el ingreso, el lienzo entero es naranja: el
   `.login-wrap` solo cubre 100dvh y cualquier sobrante —barra del navegador
   recogiéndose, teclado, rebote del scroll— dejaba asomar el beige del body
   como una franja vacía arriba o abajo. */
body.en-login { background: var(--brand); }
button { font: inherit; cursor: pointer; }

/* ── Animaciones ───────────────────────────────────────────────────── */
@keyframes aparecer { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes brotar   { 0% { opacity: 0; transform: scale(.5); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes flotar   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }

/* ── Login: naranja pleno + burbujas + símbolo (momento de marca) ──── */
.login-wrap {
  min-height: 100vh;
  min-height: 100dvh;                 /* iOS: barras de Safari (lección SOS) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px 16px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  background: var(--brand);
  position: relative;
  overflow: hidden;
}
.burbuja {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  animation: flotar 7s ease-in-out infinite;
}
.burbuja.b1 { width: 220px; height: 220px; top: -70px; left: -60px; }
.burbuja.b2 { width: 130px; height: 130px; top: 12%; right: -40px; animation-delay: 1.6s; }
.burbuja.b3 { width: 90px; height: 90px; bottom: 18%; left: -28px; animation-delay: 3s; }
.burbuja.b4 { width: 170px; height: 170px; bottom: -60px; right: 8%; animation-delay: 2.2s; }

.login-hero { text-align: center; color: #fff; position: relative; animation: aparecer .5s ease-out both; }
.login-hero .simbolo {
  height: 108px; width: 108px;
  border-radius: 50%;
  background: #fff;                    /* aro blanco alrededor del símbolo */
  padding: 5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  animation: brotar .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
.login-hero h1 { font-size: 1.7rem; font-weight: 800; line-height: 1.2; margin-top: 14px; letter-spacing: -.02em; }
.login-hero p { margin-top: 6px; font-size: .9rem; opacity: .92; font-weight: 600; }

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--tarjeta);
  border-radius: 24px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .25);
  position: relative;
  animation: aparecer .55s ease-out .12s both;
}
#formLogin { padding: 24px 22px 20px; display: flex; flex-direction: column; gap: 6px; }
#formLogin label { font-size: .82rem; font-weight: 600; color: var(--texto-suave); margin-top: 8px; }
#formLogin input {
  font-size: 16px;                    /* iOS: no hacer zoom al enfocar */
  padding: 13px 14px;
  border: 1.5px solid var(--borde);
  border-radius: 14px;
  background: var(--fondo);
  color: var(--texto);
  outline: none;
  transition: border-color .15s;
}
#formLogin input:focus { border-color: var(--brand); }
#btnEntrar {
  margin-top: 16px;
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 15px;
  font-weight: 800;
  font-size: 1.02rem;
  transition: transform .1s, background .15s;
}
#btnEntrar:active { transform: scale(.97); background: var(--brand-oscuro); }
#btnEntrar:disabled { opacity: .6; }
.login-error {
  background: var(--rojo-fondo);
  color: var(--rojo);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: .85rem;
  margin-top: 10px;
}
/* Enlace de contraseña olvidada: presente pero sin competirle al botón
   naranja — quien viene a entrar no debe tropezarse con él. */
.login-enlace {
  display: block;
  width: 100%;
  margin-top: 12px;
  background: none;
  border: 0;
  padding: 6px;
  color: var(--texto-suave);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.login-enlace:active { color: var(--brand); }
.login-enlace:disabled { opacity: .5; text-decoration: none; }
.login-aviso {
  background: var(--verde-fondo);
  color: var(--verde);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: .85rem;
  margin-top: 10px;
  line-height: 1.45;
}
.login-nota { text-align: center; font-size: .78rem; color: var(--texto-suave); margin-top: 14px; line-height: 1.5; }

/* ── App: encabezado claro con el símbolo ─────────────────────────── */
.app-wrap { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
/* La app es de UNA columna (móvil primero). En pantalla ancha el contenido
   se quedaba en 560 px pero el encabezado y la barra de abajo seguían yendo
   de borde a borde: dos franjas enormes a los lados y la app descuadrada
   (visto en pantalla 2026-08-02). Ahora las tres piezas miden lo mismo. */
.cinta {
  background: var(--tarjeta);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  box-shadow: var(--sombra);
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
}
.cinta img { height: 36px; width: 36px; border-radius: 50%; }
.cinta-titulo { font-weight: 800; font-size: 1rem; flex: 1; letter-spacing: -.01em; }
.cinta-titulo span { color: var(--brand); font-weight: 800; }
.cinta button {
  background: var(--fondo);
  border: 0;
  color: var(--texto-suave);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 1rem;
}

.contenido {
  flex: 1;
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 16px 14px calc(84px + env(safe-area-inset-bottom));
}
.cargando { text-align: center; color: var(--texto-suave); padding: 48px 0; }

.saludo { margin: 4px 0 14px; animation: aparecer .4s ease-out both; }
.saludo h1 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.saludo .cli { color: var(--texto-suave); font-size: .88rem; margin-top: 2px; }

.tarjeta {
  background: var(--tarjeta);
  border-radius: 20px;
  box-shadow: var(--sombra);
  padding: 18px;
  margin-bottom: 14px;
  animation: aparecer .45s ease-out both;
}

/* Tarjeta de saldo: héroe naranja con el símbolo de marca de fondo.
   Es un GLOBO tocable: el detalle de facturas nace replegado (primera
   entrada amable — feedback usuario 2026-07-20). */
.tarjeta-saldo {
  background: var(--brand);
  color: #fff;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s;
}
.tarjeta-saldo:active { transform: scale(.98); }
.saldo-toggle {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  font-weight: 700;
  background: rgba(255, 255, 255, .2);
  border-radius: 20px;
  padding: 6px 13px;
}
.saldo-toggle .chev { display: inline-block; transition: transform .2s; }
.tarjeta-saldo.abierto .chev { transform: rotate(180deg); }
.tarjeta-saldo .marca {
  position: absolute;
  right: -26px;
  bottom: -30px;
  height: 130px;
  width: 130px;
  opacity: .16;
  border-radius: 50%;
}
.saldo-label { font-size: .85rem; opacity: .92; font-weight: 600; }
.saldo-valor { font-size: 2.1rem; font-weight: 800; margin: 3px 0; letter-spacing: -.02em; }
.saldo-frescura { font-size: .76rem; opacity: .85; }

.banner { border-radius: 16px; padding: 13px 15px; font-size: .9rem; margin-bottom: 14px; line-height: 1.45; animation: aparecer .5s ease-out .08s both; }
.banner.mora { background: var(--ambar-fondo); }
.banner.bloqueado { background: var(--rojo-fondo); color: var(--rojo); }
.banner.aldia { background: var(--verde-fondo); color: var(--verde); }
@media (prefers-color-scheme: dark) { .banner.aldia { color: #7fc796; } }

.seccion-titulo { font-size: 1rem; font-weight: 800; margin: 20px 0 10px; letter-spacing: -.01em; }

.factura {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--tarjeta);
  border-radius: 16px;
  box-shadow: var(--sombra);
  padding: 13px 15px;
  margin-bottom: 10px;
  animation: aparecer .4s ease-out both;
}
.factura .num { font-weight: 700; font-size: .92rem; }
.factura .meta { font-size: .78rem; color: var(--texto-suave); margin-top: 2px; }
.factura .sede {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 2px 9px;
  margin-top: 5px;
}
.factura .valor { text-align: right; white-space: nowrap; }
.factura .valor .monto { font-weight: 800; }
.factura .valor .vence { font-size: .74rem; color: var(--texto-suave); margin-top: 2px; }
.factura.vencida { border-left: 5px solid var(--rojo); }
.factura.vencida .valor .vence { color: var(--rojo); font-weight: 700; }

/* Facturas seleccionables para pagar (slice 4) */
.factura.seleccionable { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.factura.seleccionable .chk-fact { width: 21px; height: 21px; accent-color: var(--brand); flex-shrink: 0; }
.factura.seleccionable .fact-cuerpo { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.micro-ayuda { font-size: .78rem; color: var(--texto-suave); margin: -4px 0 10px; }

.barra-pago { background: var(--verde); }

.datos-pago .datos-titulo { font-weight: 800; font-size: .9rem; margin: 10px 0 8px; }
.datos-fila { display: flex; align-items: center; font-size: .9rem; padding: 4px 0; gap: 10px; }
.datos-fila span { color: var(--texto-suave); flex: 1; }
.qr-wrap { text-align: center; }
.qr-wrap img { width: 100%; max-width: 240px; border-radius: 14px; }
.qr-nota { font-size: .8rem; color: var(--texto-suave); margin-top: 6px; }
.btn-copiar {
  border: 1.5px solid var(--borde);
  background: var(--fondo);
  border-radius: 9px;
  padding: 4px 9px;
  font-size: .85rem;
}
.btn-copiar:active { background: var(--borde); }
.cat-tabs button.deshabilitado { opacity: .5; }
.adjuntar { display: flex; align-items: center; gap: 14px; cursor: pointer; user-select: none; transition: transform .1s; }
.adjuntar:active { transform: scale(.98); }
.mini-comp { height: 52px; width: 52px; object-fit: cover; border-radius: 10px; margin-left: auto; }

.vacio { text-align: center; color: var(--texto-suave); padding: 34px 12px; font-size: .95rem; line-height: 1.6; }

/* ── "Te está faltando": carrusel horizontal de recompra vencida ───── */
.carrusel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carrusel::-webkit-scrollbar { display: none; }
.mini {
  min-width: 160px;
  max-width: 180px;
  flex-shrink: 0;
  background: var(--tarjeta);
  border-radius: 16px;
  box-shadow: var(--sombra);
  padding: 13px 14px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s;
  animation: aparecer .45s ease-out both;
}
.mini:active { transform: scale(.96); }
.mini-nombre { font-weight: 700; font-size: .84rem; line-height: 1.25; }
.mini-meta { font-size: .72rem; color: var(--texto-suave); margin-top: 5px; line-height: 1.4; }
.mini-precio { font-weight: 800; font-size: .98rem; margin-top: 6px; color: var(--brand); }
.mini-precio span { font-weight: 400; font-size: .68rem; color: var(--texto-suave); }
.mini-cta {
  display: inline-block;
  font-size: .76rem;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  border-radius: 20px;
  padding: 5px 14px;
  margin-top: 9px;
}

/* Chip de recompra vencida en Mi lista de siempre */
.chip-falta { background: var(--ambar-fondo); color: #a86d00; }
@media (prefers-color-scheme: dark) { .chip-falta { color: #e5b45e; } }

/* ── Tarjeta-enlace (ocupa el espacio bajo el globo replegado) ─────── */
.tarjeta-link {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s;
}
.tarjeta-link:active { transform: scale(.98); }
.link-icono { font-size: 1.7rem; }
.link-titulo { font-weight: 800; font-size: .98rem; }
.link-sub { font-size: .8rem; color: var(--texto-suave); margin-top: 2px; }
.link-chev { margin-left: auto; font-size: 1.5rem; color: var(--texto-suave); }

/* ── Inicio (fusión F4 + ideas Ara) ────────────────────────────────── */
.linea-cta { cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; }
.linea-cta strong { white-space: nowrap; margin-left: 10px; }

.hero-repetir {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--brand);
  color: #fff;
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 14px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--sombra);
  transition: transform .1s;
  animation: aparecer .45s ease-out both;
}
.hero-repetir:active { transform: scale(.98); }
.hero-icono { font-size: 1.9rem; }
.hero-titulo { font-weight: 800; font-size: 1.05rem; }
.hero-sub { font-size: .8rem; opacity: .92; margin-top: 2px; }

.agita { display: flex; align-items: center; gap: 14px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .1s; }
.agita:active { transform: scale(.97); }

/* ── El champiñón que juega ────────────────────────────────────────── */
@keyframes champiBaila {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  25% { transform: rotate(6deg) translateY(-4px); }
  50% { transform: rotate(-5deg) translateY(0); }
  75% { transform: rotate(8deg) translateY(-6px); }
}
@keyframes champiBrinca {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  15% { transform: translateY(2px) scale(1.12, .82); }     /* se agacha */
  40% { transform: translateY(-34px) scale(.92, 1.1) rotate(-10deg); }
  60% { transform: translateY(-34px) scale(.92, 1.1) rotate(10deg); }
  85% { transform: translateY(2px) scale(1.1, .86); }      /* aterriza */
}
@keyframes chispaGira {
  0% { transform: rotate(0) translateX(34px) scale(.7); opacity: .4; }
  50% { opacity: 1; transform: rotate(180deg) translateX(38px) scale(1.15); }
  100% { transform: rotate(360deg) translateX(34px) scale(.7); opacity: .4; }
}
.champi-idle {
  height: 46px; width: 46px; border-radius: 50%;
  animation: champiBaila 2.6s ease-in-out infinite;
}
.champi-escena { position: relative; height: 120px; display: flex; align-items: flex-end; justify-content: center; }
.champi-salta {
  height: 76px; width: 76px; border-radius: 50%;
  animation: champiBrinca 1.05s cubic-bezier(.36, 0, .34, 1) infinite;
  transform-origin: 50% 100%;
}
.chispa { position: absolute; top: 40px; font-size: 1.1rem; animation: chispaGira 1.2s linear infinite; }
.chispa.c2 { animation-delay: .6s; }
.champi-feliz {
  height: 64px; width: 64px; border-radius: 50%;
  animation: champiBaila 1.6s ease-in-out infinite;
}

.sorpresa-fondo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  animation: aparecer .2s ease-out both;
}
.sorpresa-card {
  background: var(--tarjeta);
  border-radius: 24px;
  padding: 26px 22px;
  width: 100%;
  max-width: 340px;
  text-align: center;
  animation: brotar .45s cubic-bezier(.34, 1.56, .64, 1) both;
}
.sorpresa-emoji { font-size: 2.6rem; }
.sorpresa-titulo { font-weight: 800; font-size: 1.1rem; margin-top: 8px; }
.sorpresa-nombre { margin-top: 10px; font-size: .95rem; font-weight: 700; }
.sorpresa-precio { color: var(--brand); font-weight: 800; font-size: 1.2rem; margin-top: 6px; }
.sorpresa-precio span { font-weight: 400; font-size: .7rem; color: var(--texto-suave); }
.sorpresa-acciones { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.sorpresa-fila { display: flex; gap: 9px; }
.btn-otra {
  flex: 1;
  border: 1.5px solid var(--borde);
  background: none;
  color: var(--texto);
  border-radius: 12px;
  padding: 10px;
  font-weight: 700;
  font-size: .9rem;
}
.btn-otra:active { background: var(--fondo); }

/* ── Catálogo (slice 2) ────────────────────────────────────────────── */
.cat-cats {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-cats::-webkit-scrollbar { display: none; }
.cat-cats button {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--texto-suave);
  border-radius: 14px;
  padding: 6px 13px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.cat-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.cat-tabs button {
  flex: 1;
  border: 1.5px solid var(--borde);
  background: var(--tarjeta);
  color: var(--texto-suave);
  border-radius: 22px;
  padding: 9px 10px;
  font-size: .85rem;
  font-weight: 700;
  transition: all .15s;
}
.cat-tabs button.activo {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
/* ── Sede de entrega (2026-08-01) ───────────────────────────────────── */
/* Al comprador se le DICE a dónde va: no es una decisión suya, es un dato
   que tiene que poder confirmar de un vistazo antes de mandar el pedido. */
.sede-fija {
  background: var(--verde-fondo);
  color: var(--verde);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: .9rem;
  margin-bottom: 12px;
  line-height: 1.45;
}
.sede-fija span { display: block; color: var(--texto-suave); font-size: .82rem; margin-top: 2px; }
.sede-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.sede-op {
  text-align: left;
  border: 1.5px solid var(--borde);
  background: var(--tarjeta);
  color: var(--texto);
  border-radius: 14px;
  padding: 11px 13px;
  transition: border-color .15s, background .15s;
}
.sede-op strong { display: block; font-size: .95rem; }
.sede-op span { display: block; color: var(--texto-suave); font-size: .82rem; margin-top: 2px; }
.sede-op.activo { border-color: var(--brand); background: var(--brand-suave, rgba(243, 146, 0, .08)); }
.sede-op.activo strong { color: var(--brand); }

/* Pago contra entrega (2026-08-02) */
.pago-contado {
  background: var(--verde-fondo);
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 12px;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--verde);
}
.pago-contado span { display: block; color: var(--texto-suave); font-size: .82rem; margin-top: 3px; }
/* Pasado el tope deja de ser un dato y pasa a ser un freno. */
.pago-contado.excedido { background: var(--rojo-fondo); color: var(--rojo); }

/* Por vencer (2026-08-02): un escalón POR DEBAJO de la mora, que ya usa el
   ámbar. Todavía no debe nada —es un recordatorio— y pintarlo igual que el
   regaño gasta la alarma que sí importa el día que de verdad se venza. */
.banner.porvencer {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--brand);
  color: var(--texto);
}

.buscador-wrap { position: relative; margin-bottom: 12px; }
.buscador {
  width: 100%;
  font-size: 16px;                    /* iOS: sin zoom */
  padding: 12px 44px 12px 14px;
  border: 1.5px solid var(--borde);
  border-radius: 14px;
  background: var(--tarjeta);
  color: var(--texto);
  outline: none;
}
.buscador:focus { border-color: var(--brand); }
.buscador::-webkit-search-cancel-button { display: none; }  /* usamos la ✕ propia */
.buscador-x {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: var(--fondo);
  color: var(--texto-suave);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: .9rem;
  line-height: 1;
}
.buscador-x:active { background: var(--borde); }

.producto {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--tarjeta);
  border-radius: 16px;
  box-shadow: var(--sombra);
  padding: 12px 14px;
  margin-bottom: 9px;
}
.producto.agotado { opacity: .55; }
.prod-nombre { font-weight: 700; font-size: .9rem; }
.prod-extra { font-size: .76rem; color: var(--texto-suave); margin-top: 2px; }
.prod-chips { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.prod-chips .um { font-size: .72rem; color: var(--texto-suave); }
.sem {
  font-size: .7rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 9px;
}
.sem-disp { background: var(--verde-fondo); color: var(--verde); }
@media (prefers-color-scheme: dark) { .sem-disp { color: #7fc796; } }
.sem-pocas { background: var(--ambar-fondo); color: #a86d00; }
@media (prefers-color-scheme: dark) { .sem-pocas { color: #e5b45e; } }
.sem-agotado { background: var(--fondo); color: var(--texto-suave); border: 1px solid var(--borde); }
.prod-lado { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.prod-precio { text-align: right; white-space: nowrap; }
.prod-precio .precio { font-weight: 800; font-size: .95rem; }
.prod-precio .precio.sin { color: var(--texto-suave); font-weight: 400; }
.prod-precio .masiva { display: block; font-size: .68rem; color: var(--texto-suave); }

/* ── Carrito (slice 3) ─────────────────────────────────────────────── */
.btn-agregar {
  border: 1.5px solid var(--brand);
  background: none;
  color: var(--brand);
  font-weight: 800;
  font-size: .8rem;
  border-radius: 20px;
  padding: 5px 16px;
  transition: all .12s;
}
.btn-agregar:active { background: var(--brand); color: #fff; transform: scale(.95); }
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--brand);
  border-radius: 20px;
  color: #fff;
}
.stepper button {
  border: 0;
  background: none;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  width: 32px;
  height: 30px;
  line-height: 1;
}
.stepper span { min-width: 22px; text-align: center; font-weight: 800; font-size: .9rem; }

.barra-carrito {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(64px + env(safe-area-inset-bottom));
  background: var(--brand);
  color: #fff;
  border-radius: 16px;
  padding: 13px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .9rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  cursor: pointer;
  z-index: 30;
  animation: aparecer .3s ease-out both;
  max-width: 536px;
  margin: 0 auto;
}
.barra-carrito:active { transform: scale(.98); }

.desglose { display: flex; justify-content: space-between; font-size: .9rem; color: var(--texto-suave); padding: 3px 0; }
.desglose.total { color: var(--texto); font-weight: 800; font-size: 1.05rem; border-top: 1.5px solid var(--borde); margin-top: 6px; padding-top: 9px; }

.confirmo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .92rem;
  margin: 14px 2px 10px;
  cursor: pointer;
  user-select: none;
}
.confirmo input { width: 20px; height: 20px; accent-color: var(--brand); }
.confirmo.deshabilitado { opacity: .5; }
.btn-enviar {
  width: 100%;
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 15px;
  font-weight: 800;
  font-size: 1.02rem;
  transition: transform .1s, opacity .15s;
}
.btn-enviar:active { transform: scale(.98); }
.btn-enviar:disabled { opacity: .45; }

.exito { text-align: center; padding: 40px 14px; animation: aparecer .4s ease-out both; }
.exito-icono { font-size: 3.2rem; animation: brotar .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.exito h1 { font-size: 1.5rem; font-weight: 800; margin-top: 10px; }
.exito-num { color: var(--texto-suave); margin-top: 6px; }
.exito p { color: var(--texto-suave); margin: 14px 0 22px; line-height: 1.5; }

/* Chips de estado de Mis pedidos (idioma del cliente) */
.est-prep { background: var(--ambar-fondo); color: #a86d00; }
@media (prefers-color-scheme: dark) { .est-prep { color: #e5b45e; } }
.est-camino { background: #e8f0fe; color: #1a56b0; }
@media (prefers-color-scheme: dark) { .est-camino { background: #1c2637; color: #8ab4f8; } }
.est-entregado { background: var(--verde-fondo); color: var(--verde); }
@media (prefers-color-scheme: dark) { .est-entregado { color: #7fc796; } }
.est-cancelado { background: var(--fondo); color: var(--texto-suave); border: 1px solid var(--borde); }

/* ── Barra inferior (5 secciones, F4-B1) ───────────────────────────── */
.navbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: var(--tarjeta);
  border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 20;
  /* `fixed` no hereda la columna: se centra con left/right en 0 y márgenes
     automáticos, que es lo único que funciona con posición fija. */
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
}
.navbar button {
  flex: 1;
  background: none;
  border: 0;
  padding: 8px 0 6px;
  font-size: .68rem;
  font-weight: 600;
  color: var(--texto-suave);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: transform .1s;
}
.navbar button:active { transform: scale(.92); }
.navbar button span { font-size: 1.2rem; }
.navbar button.activo { color: var(--brand); font-weight: 800; }

.toast {
  position: fixed;
  bottom: calc(74px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: var(--texto);
  color: var(--fondo);
  border-radius: 22px;
  padding: 9px 20px;
  font-size: .85rem;
  font-weight: 600;
  box-shadow: var(--sombra);
  z-index: 50;
  animation: aparecer .25s ease-out both;
}

/* ── Recordatorio de ruta por zona (F4-B3; lo configura el panel ADMIN) ─
   Dato útil, no alarma: vive junto al selector de entrega. Si falta
   media jornada para el corte se pone ámbar. */
.aviso-ruta {
  background: var(--verde-fondo);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: .84rem;
  line-height: 1.5;
  margin-top: 10px;
  animation: aparecer .4s ease-out both;
}
.aviso-ruta.urge { background: var(--ambar-fondo); }

/* ── Promos curadas por Setas (panel ADMIN) ────────────────────────── */
.promo-etq {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 3px 9px;
  margin-bottom: 7px;
}
.mini.promo { border: 1.5px solid var(--brand); }
.sorpresa-mensaje { font-size: .8rem; color: var(--texto-suave); margin-top: 5px; }
.mini.mirado { border: 1.5px dashed var(--brand); }

/* ── Código promocional en el carrito (slice 1.7) ──────────────────── */
.codigo-fila { display: flex; gap: 8px; align-items: center; }
.codigo-fila .buscador { flex: 1; text-transform: uppercase; }
.btn-codigo {
  border: 1.5px solid var(--brand);
  background: none;
  color: var(--brand);
  font-weight: 800;
  font-size: .88rem;
  border-radius: 12px;
  padding: 11px 18px;
  white-space: nowrap;
}
.btn-codigo:active { transform: scale(.96); }
.codigo-ok { color: var(--verde); font-size: .84rem; margin-top: 8px; font-weight: 600; }
.desglose.descuento span:last-child { color: var(--verde); font-weight: 700; }

/* ── Se te olvida algo (recordatorio en el carrito, slice 1.7) ─────── */
.olvidos { display: grid; gap: 8px; }
.olvido {
  display: flex; align-items: center; gap: 12px;
  background: var(--ambar-fondo);
  border-radius: 14px;
  padding: 11px 14px;
}
.olvido-info { flex: 1; min-width: 0; }

/* ── Fotos de los productos (2026-07-25) ─────────────────────────────
   Se antoja lo que se ve. La foto es opcional a propósito: el producto
   sin foto se sigue viendo como toda la vida, así el catálogo se puede
   ir llenando de a poco sin que nada se vea a medias. */
/* `contain` y no `cover`: la foto del proveedor trae el producto centrado
   con aire alrededor, y recortarla se comía justo el producto. El fondo
   va BLANCO siempre —también en modo oscuro— porque las fotos vienen
   sobre blanco y cualquier otro color se ve como un marco sucio. */
/* El marco lleva el MISMO gris del fondo de la foto (2026-08-02): con
   `contain` sobran franjas a los lados cuando la foto no es cuadrada, y
   en blanco puro se veían como dos tiras claras pegadas a la imagen. */
.prod-foto {
  width: 58px; height: 58px; flex-shrink: 0;
  object-fit: contain; border-radius: 13px; background: var(--foto-fondo);
}
.producto .prod-info { flex: 1; min-width: 0; }

.mini.con-foto { overflow: hidden; }
.mini-foto {
  display: block;
  width: calc(100% + 28px);
  height: 96px;
  object-fit: contain;
  background: var(--foto-fondo);
  margin: -13px -14px 10px;
}

.sorpresa-foto-wrap { position: relative; }
.sorpresa-foto {
  display: block; width: 100%; height: 168px;
  object-fit: contain; background: var(--foto-fondo); border-radius: 18px;
  animation: brotar .45s cubic-bezier(.34, 1.56, .64, 1) both;
}
.champi-mini {
  position: absolute; right: -6px; bottom: -10px;
  height: 52px; width: 52px; border-radius: 50%;
  background: var(--tarjeta);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  animation: champiBaila 1.6s ease-in-out infinite;
}

/* ── Ficha ampliada del producto (2026-07-26) ────────────────────────
   El cliente paga por algo que no puede tocar: aquí lo ve en grande,
   gira entre las fotos del empaque y sabe cuánto le cuesta el gramo. */
.producto.tocable { cursor: pointer; }
.producto.tocable:active { background: var(--fondo); }
.prod-foto-wrap { position: relative; flex-shrink: 0; }
.prod-nfotos {
  position: absolute; right: -4px; bottom: -4px;
  background: var(--texto); color: #fff; font-size: .6rem; font-weight: 700;
  padding: 2px 6px; border-radius: 20px; letter-spacing: .02em;
}

.ficha-ov {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 70;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: aparecer .2s ease-out both; overflow-y: auto;
}
.ficha-card {
  position: relative; background: var(--tarjeta); border-radius: 24px;
  width: 100%; max-width: 520px; max-height: 92dvh; overflow-y: auto;
  animation: brotar .35s cubic-bezier(.34, 1.56, .64, 1) both;
}
.ficha-cerrar {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: #26221c;
  font-size: 1rem; cursor: pointer; box-shadow: var(--sombra);
}

.ficha-carrusel { position: relative; overflow: hidden; border-radius: 24px 24px 0 0; background: var(--foto-fondo); }
.fc-pista { display: flex; transition: transform .28s ease-out; }
.fc-hoja { flex: 0 0 100%; }
.fc-hoja img { width: 100%; height: 280px; object-fit: contain; display: block; background: var(--foto-fondo); }
.fc-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: #26221c;
  font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: var(--sombra);
}
.fc-flecha.izq { left: 8px; }
.fc-flecha.der { right: 8px; }
.fc-puntos { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; }
.fc-puntos span { width: 7px; height: 7px; border-radius: 50%; background: rgba(0, 0, 0, .22); transition: .2s; }
.fc-puntos span.on { background: var(--brand); width: 18px; border-radius: 4px; }
.fc-lupa {
  position: absolute; bottom: 8px; left: 0; right: 0; text-align: center;
  font-size: .68rem; color: var(--texto-suave); pointer-events: none;
}
.ficha-sinfoto { display: flex; justify-content: center; padding: 26px 0 4px; }
.ficha-sinfoto img { width: 84px; opacity: .5; }

.ficha-cuerpo { padding: 16px 20px 22px; }
.ficha-marca {
  font-size: .72rem; font-weight: 700; color: var(--brand);
  text-transform: uppercase; letter-spacing: .06em;
}
.ficha-nombre { font-size: 1.12rem; margin: 4px 0 8px; line-height: 1.3; }
.ficha-chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ficha-precio { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ficha-precio .precio { font-size: 1.5rem; font-weight: 750; }
.ficha-porunidad {
  font-size: .82rem; font-weight: 650; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 11%, transparent);
  padding: 3px 10px; border-radius: 20px;
}
.ficha-dato { font-size: .84rem; color: var(--texto-suave); margin-top: 6px; }
.ficha-tuyo {
  margin-top: 12px; padding: 10px 12px; border-radius: 12px;
  background: var(--verde-fondo); color: var(--verde); font-size: .84rem;
}
.ficha-nota { margin-top: 12px; font-size: .78rem; color: var(--texto-suave); line-height: 1.45; }
.ficha-acciones { margin-top: 18px; }
.ficha-acciones .btn-agregar, .ficha-acciones .stepper { width: 100%; justify-content: center; }

.zoom-ov {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .93); z-index: 80;
  display: flex; align-items: center; justify-content: center;
  animation: aparecer .18s ease-out both;
}
.zoom-ov img { max-width: 100%; max-height: 100dvh; object-fit: contain; }
.zoom-cerrar, .zoom-flecha {
  position: absolute; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .16); color: #fff;
}
.zoom-cerrar { top: 14px; right: 14px; width: 40px; height: 40px; font-size: 1.1rem; }
.zoom-flecha { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 1.7rem; line-height: 1; }
.zoom-flecha.izq { left: 12px; }
.zoom-flecha.der { right: 12px; }

/* ── Ficha: descripción y las tiras de abajo (2026-07-26) ────────────
   Lo que hace Rappi y funciona: el producto no termina en el producto.
   Debajo van los que se compran CON él (de las ventas reales) y los
   parecidos de su categoría; tocar uno cambia la ficha sin cerrarla. */
.ficha-atras {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  border: 0; border-radius: 20px; padding: 7px 14px;
  background: rgba(255, 255, 255, .92); color: #26221c;
  font: inherit; font-size: .82rem; font-weight: 650;
  cursor: pointer; box-shadow: var(--sombra);
}
.ficha-desc {
  margin-top: 14px; font-size: .9rem; line-height: 1.55;
  color: var(--texto-suave); white-space: pre-line;
}
.ficha-seccion { margin-top: 24px; }
.fs-titulo {
  font-size: .95rem; font-weight: 700; margin-bottom: 10px;
}
/* Tira horizontal: en el celular se arrastra, y el borde de la card no
   se lleva el scroll de la página. */
.fs-tira {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
  margin: 0 -20px; padding-left: 20px; padding-right: 20px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.fs-tira::-webkit-scrollbar { height: 5px; }
.fs-tira::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 3px; }
.mini-rel {
  flex: 0 0 108px; scroll-snap-align: start;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px;
  padding: 8px; cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: border-color .15s, transform .15s;
}
.mini-rel:active { transform: scale(.97); }
.mini-rel:hover { border-color: var(--brand); }
.mr-foto {
  height: 84px; border-radius: 10px; overflow: hidden; background: var(--foto-fondo);
  display: flex; align-items: center; justify-content: center;
}
.mr-foto img { width: 100%; height: 100%; object-fit: contain; }
.mr-foto .mr-champi { width: 42px; height: 42px; opacity: .35; }
.mr-nombre {
  font-size: .72rem; line-height: 1.3; margin-top: 7px; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.mr-precio { font-size: .74rem; font-weight: 700; color: var(--brand); margin-top: 3px; }


/* ── Productos al peso ───────────────────────────────────────────── */
.um.pesado { color: var(--brand); font-weight: 650; }
.stepper.peso span { min-width: 58px; font-variant-numeric: tabular-nums; }
.ficha-pesos { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 16px; }
.ficha-pesos button {
  font: inherit; font-size: .82rem; font-weight: 650; padding: 8px 15px;
  border-radius: 20px; border: 1px solid var(--borde);
  background: var(--tarjeta); color: var(--texto); cursor: pointer;
}
.ficha-pesos button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.ficha-pesado {
  margin-top: 14px; padding: 12px 14px; border-radius: 14px;
  background: var(--ambar-fondo); color: #7d5300; font-size: .82rem; line-height: 1.5;
}
.ficha-pesado .fp-titulo { font-weight: 700; margin-bottom: 3px; }
.ficha-estimado {
  margin-top: 9px; text-align: center; font-size: .86rem; color: var(--texto-suave);
}
.ficha-estimado strong { color: var(--texto); }
.nota-peso {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--borde);
  font-size: .78rem; line-height: 1.5; color: var(--texto-suave);
}

/* ── Poka-yoke del carrito ───────────────────────────────────────── */
.producto.agotado-carrito { border: 1px solid var(--rojo); background: var(--rojo-fondo); }
.carrito-agotado, .aviso-cantidad {
  font-size: .76rem; line-height: 1.4; margin-top: 4px;
}
.carrito-agotado { color: var(--rojo); }
.aviso-cantidad { color: var(--texto-suave); }
.enlace-quitar {
  background: none; border: 0; padding: 0; font: inherit; font-size: inherit;
  font-weight: 700; color: var(--brand); text-decoration: underline; cursor: pointer;
}

/* Deshacer: no interrumpe a nadie y salva igual que un "¿seguro?" */
.deshacer {
  position: fixed; left: 50%; bottom: 86px; transform: translate(-50%, 24px);
  z-index: 75; display: flex; align-items: center; gap: 16px;
  background: var(--texto); color: var(--tarjeta);
  padding: 11px 14px 11px 18px; border-radius: 30px; box-shadow: 0 6px 22px rgba(0,0,0,.28);
  font-size: .86rem; max-width: calc(100vw - 32px);
  opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s;
}
.deshacer.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.deshacer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deshacer button {
  background: none; border: 0; font: inherit; font-weight: 700; cursor: pointer;
  color: var(--brand); padding: 0; flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .deshacer { transition: none; }
  .deshacer.visible { transform: translate(-50%, 0); }
}

/* "Ya lo pesamos": el valor REAL antes de que llegue el camión */
.factura.pesado { flex-wrap: wrap; }
.pesado {
  flex-basis: 100%; margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--borde); font-size: .82rem;
}
.pes-titulo { font-weight: 700; margin-bottom: 8px; }
.pes-fila { display: flex; justify-content: space-between; color: var(--texto-suave); }
.pes-fila.real { color: var(--texto); font-weight: 700; }
.pes-fila span:last-child { font-variant-numeric: tabular-nums; }
.pes-dif { margin-top: 4px; font-size: .76rem; font-weight: 700; }
.pes-dif.sube { color: var(--brand); }
.pes-dif.baja { color: var(--verde); }
.pes-lineas {
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--borde);
  display: flex; flex-direction: column; gap: 4px; font-size: .76rem; color: var(--texto-suave);
}
.pes-lineas > div { display: flex; justify-content: space-between; gap: 10px; }
.pes-lineas strong { color: var(--texto); }
.pes-pie {
  margin-top: 10px; padding: 8px 11px; border-radius: 10px;
  background: var(--ambar-fondo); color: #7d5300; font-size: .78rem;
}

/* La barra naranja del carrito FLOTA sobre el contenido. Con la
   cuadrícula abierta la pantalla es corta y se le montaba encima al
   buscador: no se podía ni escribir. Con carrito lleno, el contenido
   reserva su sitio. */
body.con-barra .contenido {
  padding-bottom: calc(150px + env(safe-area-inset-bottom));
}

/* Centinela del render por lotes: sin alto propio no dispara. */
.cat-fondo { height: 1px; }

/* ════════════════════════════════════════════════════════════════════
   CATEGORÍAS — un solo banner que las contiene (2026-07-26)

   Antes cada categoría era una ficha suelta sobre el fondo de la
   página: diecisiete rectángulos flotando, cada uno pidiendo atención.
   Ahora el marco es UNO —esta tarjeta— y las categorías se mueven
   dentro de él. El fondo se queda quieto; lo que viaja es el contenido.

   De paso resuelve lo del escritorio: la rueda del mouse desplaza la
   tira, el degradado del borde avisa que hay más, y las flechas viven
   sobre el mismo banner en vez de flotar sobre la página.
   ════════════════════════════════════════════════════════════════════ */
.cat-tira-wrap {
  position: relative;
  background: var(--tarjeta);
  border-radius: 20px;
  box-shadow: var(--sombra);
  padding: 10px 6px;
  margin-bottom: 14px;
  overflow: hidden;                    /* el degradado no se sale del marco */
}
.cat-tira-wrap.oculto { display: none; }

.cat-cats {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding: 0 4px;
  margin: 0;
}
.cat-cats::-webkit-scrollbar { display: none; }

/* Icono arriba, nombre debajo: el usuario probó los chips de solo icono
   y dudó él mismo (🫙 salsas contra 🥫 conservas). Si duda quien conoce
   el catálogo, el cliente se pierde. */
.cat-cats button {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 76px; padding: 7px 4px 6px;
  border: 0; background: transparent; color: var(--texto-suave);
  border-radius: 14px;
  transition: background .16s, color .16s;
}
.cat-cats button:hover .cc-ico { background: var(--fondo); }
.cat-cats .cc-ico {
  font-size: 1.4rem; line-height: 1;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent;                 /* sin globo: el icono va suelto */
  transition: background .16s, transform .16s, box-shadow .16s;
}
.cat-cats .cc-txt {
  font-size: .64rem; font-weight: 700; line-height: 1.2; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 70px;
}
.cat-cats .cc-n {
  font-size: .58rem; font-weight: 600; opacity: .62;
  font-variant-numeric: tabular-nums;
}
/* La categoría elegida: se marca el icono, no todo el bloque. Menos
   ruido y el nombre se sigue leyendo igual. */
.cat-cats button.activo { color: var(--texto); }
.cat-cats button.activo .cc-ico {
  background: var(--brand);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--brand) 45%, transparent);
}
.cat-cats button:active .cc-ico { transform: scale(.92); }

/* Hay más de lo que cabe: el borde se difumina en vez de cortar seco. */
.cat-tira-wrap.hay-mas::after, .cat-tira-wrap.hay-antes::before {
  content: ''; position: absolute; top: 8px; bottom: 8px; width: 40px;
  pointer-events: none; z-index: 1;
}
.cat-tira-wrap.hay-mas::after {
  right: 0; background: linear-gradient(to right, transparent, var(--tarjeta) 72%);
}
.cat-tira-wrap.hay-antes::before {
  left: 0; background: linear-gradient(to left, transparent, var(--tarjeta) 72%);
}
.tira-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto);
  font-size: 1rem; line-height: 1; box-shadow: var(--sombra); display: none;
}
.tira-flecha.izq { left: 5px; }
.tira-flecha.der { right: 5px; }
.cat-tira-wrap.hay-antes .tira-flecha.izq,
.cat-tira-wrap.hay-mas .tira-flecha.der { display: block; }
/* En el celular sobran: ahí se desliza con el dedo. */
@media (max-width: 640px) { .tira-flecha { display: none !important; } }

/* Centinela del render por lotes: sin alto propio no dispara. */
.cat-fondo { height: 1px; }

/* Encabezado de lo que se está viendo: la categoría elegida o los
   resultados de la búsqueda. Los chips son chicos y el icono activo se
   pierde al hacer scroll; esto dice sin ambigüedad dónde está parado. */
.cat-titulo {
  display: flex; align-items: baseline; gap: 8px; margin: 0 2px 12px;
}
.cat-titulo.oculto { display: none; }
.cat-titulo .ct-ico { font-size: 1.05rem; }
.cat-titulo .ct-nom { font-weight: 800; font-size: 1.05rem; letter-spacing: -.015em; }
.cat-titulo .ct-n {
  font-size: .76rem; font-weight: 600; color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

/* Cuando la búsqueda no da nada, decir QUÉ no dio y ofrecer la salida:
   un "no encontramos productos" a secas deja al cliente atascado. */
.vacio-busca { text-align: center; padding: 34px 16px; color: var(--texto-suave); }
.vacio-busca .vb-emoji { font-size: 2rem; }
.vacio-busca .vb-txt { margin-top: 10px; line-height: 1.5; }
.vacio-busca .vb-txt strong { color: var(--texto); }
.vacio-busca button {
  margin-top: 14px; border: 0; border-radius: 20px; padding: 10px 20px;
  background: var(--brand); color: #fff; font-weight: 700; font-size: .88rem;
}

/* ── Detalle del pedido, en la pestaña Pedidos ───────────────────────
   El cliente veía el total pero no QUÉ pidió. Se despliega en la misma
   tarjeta: renglón por renglón, y si ya se pesó, lo que de verdad salió. */
.factura.ped { flex-wrap: wrap; cursor: pointer; }
.factura.ped:active { background: var(--fondo); }
.ped-abrir {
  flex-basis: 100%; margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--borde);
  font-size: .78rem; font-weight: 700; color: var(--brand);
  display: flex; align-items: center; gap: 5px;
}
.ped-abrir .chev { display: inline-block; transition: transform .2s; }
.ped-abrir .chev.abierto { transform: rotate(180deg); }
.ped-detalle { flex-basis: 100%; }
.ped-detalle.oculto { display: none; }
.pd { margin-top: 12px; font-size: .82rem; }
.pd-fila {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--borde);
}
.pd-fila:last-of-type { border-bottom: 0; }
.pd-nombre { line-height: 1.3; }
.pd-cant, .pd-valor { color: var(--texto-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-valor { min-width: 78px; text-align: right; }
.pd-aj { color: var(--brand); font-weight: 700; }
.pd-total {
  display: flex; justify-content: space-between; margin-top: 10px; padding-top: 9px;
  border-top: 1.5px solid var(--borde); font-size: .95rem;
}
.pd-nota { margin-top: 9px; font-size: .78rem; color: var(--texto-suave); }
.pd-vacio { margin-top: 10px; font-size: .82rem; color: var(--texto-suave); }

/* Cuándo pasar por el pedido (recoge en bodega) */
.aviso-bodega {
  background: var(--ambar-fondo); color: #7d5300;
  border-radius: 14px; padding: 11px 13px; margin-bottom: 12px;
  font-size: .84rem; line-height: 1.45;
}
.aviso-bodega .ab-pie {
  display: block; margin-top: 4px; font-size: .74rem; opacity: .85;
}

/* "Pasa por él a las…" — en el pedido y al confirmarlo */
.recoger {
  flex-basis: 100%; margin-top: 10px; padding: 9px 12px; border-radius: 12px;
  background: var(--ambar-fondo); color: #7d5300; font-size: .8rem; line-height: 1.4;
}
.recoger.listo { background: var(--verde-fondo); color: var(--verde); }
.exito-bodega {
  margin: 14px 0 4px; padding: 12px 14px; border-radius: 14px;
  background: var(--ambar-fondo); color: #7d5300; font-size: .88rem; line-height: 1.45;
}