/* Punto Yacana · paleta de marca (ver gestion_inventario_final/docs/plan_vidriera_web.md).
   Verde y amarillo van siempre DE FONDO con texto carbón: como texto sobre
   el lavanda no se leen (1,4 : 1). Para verde como texto, --verde-texto. */
:root {
  --fondo: #F7F7FF;
  --tarjeta: #FFFFFF;
  --borde: #E1E1F2;
  --texto: #19242E;
  --texto-2: #5F6B77;
  --verde: #C2E03F;
  --verde-claro: #D4EC6E;
  --verde-texto: #5A7300;
  --amarillo: #FFC514;
  --rojo: #C62828;
  --carbon-2: #2A3743;
  --tinte-amarillo: #FFF6D6;
  --tinte-verde: #F2F8D8;
  --tinte-lavanda: #ECEBFB;
  --marca: 'Stardos Stencil', serif;
  --sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radio: 14px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.4;
  padding-bottom: 96px;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }

/* ---------- Encabezado ---------- */
/* Fijo y con su lugar reservado en el body (app.js lo mide): achicarlo no
   mueve la página. Con sticky, al achicarse la página subía, el corte del
   scroll se cruzaba al revés y el encabezado se abría y cerraba solo. */
.encabezado {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  background: var(--texto);
  color: var(--fondo);
  padding: 14px 16px 14px;
  border-radius: 0 0 22px 22px;
  transition: padding .2s, border-radius .2s;
  overflow: hidden;
  /* Por defecto, la mañana. Arriba siempre oscuro: el amarillo y el gris
     del texto tienen que leerse a cualquier hora. */
  --cielo-a: #19242E; --cielo-b: #2B4650;
  --astro: #FFC514; --halo: rgba(255, 197, 20, .18); --astro-y: -4px;
  --sierra-lejos: #24363F; --sierra-cerca: #1D2C34; --estrellas: 0;
  background: linear-gradient(180deg, var(--cielo-a) 35%, var(--cielo-b));
}
.encabezado[data-momento="mediodia"] {
  --cielo-b: #2A3F52; --astro: #FFE17A; --halo: rgba(255, 225, 122, .16); --astro-y: -16px;
  --sierra-lejos: #253545; --sierra-cerca: #1E2B38;
}
.encabezado[data-momento="tarde"] {
  --cielo-b: #3A3B47; --astro: #FFB020; --halo: rgba(255, 176, 32, .18); --astro-y: 2px;
  --sierra-lejos: #2C2E3A; --sierra-cerca: #232530;
}
.encabezado[data-momento="atardecer"] {
  --cielo-a: #1A2230; --cielo-b: #5A3430; --astro: #FF8A3D; --halo: rgba(255, 138, 61, .28); --astro-y: 16px;
  --sierra-lejos: #3A2830; --sierra-cerca: #2A1F27;
}
.encabezado[data-momento="noche"] {
  --cielo-a: #0F1620; --cielo-b: #1C2838; --astro: #E9E4CF; --halo: rgba(233, 228, 207, .06); --astro-y: -26px;
  --sierra-lejos: #1A2533; --sierra-cerca: #141D28; --estrellas: 1;
}
.paisaje { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .2s; }
.paisaje .estrellas { fill: #E9E4CF; opacity: calc(var(--estrellas) * .7); }
.paisaje .astro { transform: translateY(var(--astro-y)); transition: transform 1.5s ease-out; }
.paisaje .astro-disco { fill: var(--astro); }
.paisaje .astro-halo { fill: var(--halo); }
.paisaje .sierra-lejos { fill: var(--sierra-lejos); }
.paisaje .sierra-cerca { fill: var(--sierra-cerca); }

/* Estaciones (hemisferio sur). Van encima de los colores de la hora, en
   translúcido: de noche se apagan solas con el cielo. Primavera: árboles en
   flor y pétalos. Verano: pasto dorado y golondrinas. Otoño: copas ocres y
   hojas que caen. Invierno: nieve en las cumbres, copos y árboles pelados. */
.encabezado {
  --pasto: #7FA83A; --pasto-op: .22; --copa: rgba(110, 155, 58, .75); --flor: #F4A6C6; --cae: #F4A6C6;
}
.encabezado[data-estacion="verano"] { --pasto: #C9A23A; --pasto-op: .2; --copa: rgba(63, 107, 53, .8); }
.encabezado[data-estacion="otono"] { --pasto: #B5652A; --pasto-op: .24; --copa: rgba(201, 119, 46, .8); --cae: #E09A3A; }
.encabezado[data-estacion="invierno"] { --pasto: #B8C7D6; --pasto-op: .1; --cae: #EEF2F6; }
.paisaje .pasto { fill: var(--pasto); opacity: var(--pasto-op); }
.paisaje .copa { fill: var(--copa); }
.paisaje .tronco { stroke: #5B4636; stroke-width: 1.4; stroke-linecap: round; }
.paisaje .flores { fill: var(--flor); }
.paisaje .nieve { fill: #E9EEF2; opacity: .85; }
.paisaje .aves { fill: none; stroke: rgba(233, 228, 207, .55); stroke-width: .9; stroke-linecap: round; }
.paisaje .caen { fill: var(--cae); opacity: .8; }
.paisaje .caen ellipse { transform-box: fill-box; transform-origin: center; animation: caer 11s linear infinite; }
.paisaje .caen ellipse:nth-child(2) { animation-duration: 13s; animation-delay: -4s; }
.paisaje .caen ellipse:nth-child(3) { animation-duration: 10s; animation-delay: -7s; }
.paisaje .caen ellipse:nth-child(4) { animation-duration: 14s; animation-delay: -2s; }
.paisaje .caen ellipse:nth-child(5) { animation-duration: 12s; animation-delay: -9s; }
.paisaje .caen ellipse:nth-child(6) { animation-duration: 15s; animation-delay: -11s; }
@keyframes caer {
  0% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(-18px, 70px) rotate(200deg); }
  100% { transform: translate(8px, 142px) rotate(400deg); }
}
.paisaje .nieve, .paisaje .aves, .paisaje .caen, .paisaje .flores { display: none; }
.encabezado[data-estacion="invierno"] .nieve,
.encabezado[data-estacion="verano"] .aves,
.encabezado[data-estacion="primavera"] .caen,
.encabezado[data-estacion="otono"] .caen,
.encabezado[data-estacion="invierno"] .caen,
.encabezado[data-estacion="primavera"] .flores { display: inline; }
.encabezado[data-estacion="invierno"] .copa { display: none; }
.encabezado[data-momento="noche"] .aves { display: none; }
.encabezado[data-momento="noche"] .arboles,
.encabezado[data-momento="noche"] .caen { opacity: .45; }
.encabezado.compacto .paisaje { opacity: 0; }
.encabezado.compacto { background: var(--texto); }
.marca, .buscador { position: relative; }
.marca { display: flex; align-items: center; gap: 10px; max-width: 1200px; margin: 0 auto; }
.sol { width: 56px; height: auto; transition: width .2s; }
.marca-texto { display: flex; flex-direction: column; line-height: 1; color: var(--amarillo); }
.marca-punto { font-family: var(--marca); font-size: 15px; letter-spacing: 2px; }
.marca-nombre { font-family: var(--marca); font-size: 30px; letter-spacing: 1px; }
.marca-bajada { font-size: 12px; color: #C9CED6; margin-top: 4px; }
.local {
  margin-left: auto; align-self: flex-start;
  background: none; border: 0; color: #C9CED6; font-size: 12px;
  display: flex; align-items: center; gap: 4px; padding: 4px; text-align: right;
}
.local i { color: var(--verde); font-size: 15px; }
.boton-cuenta {
  align-self: flex-start; flex: none;
  background: var(--carbon-2); border: 0; border-radius: 16px; color: var(--fondo);
  font-size: 12px; font-weight: 700; padding: 5px 10px 5px 6px;
  display: flex; align-items: center; gap: 4px; max-width: 120px;
}
.boton-cuenta i { color: var(--amarillo); font-size: 18px; }
.boton-cuenta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buscador {
  display: flex; align-items: center; gap: 8px;
  max-width: 1200px; margin: 12px auto 0;
  background: var(--carbon-2); border-radius: 12px; padding: 0 12px;
}
.buscador i { color: var(--verde); font-size: 18px; }
.buscador input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--fondo);
  padding: 11px 0; font-size: 16px; outline: none;
}
.buscador input::placeholder { color: #AEB6C0; }

/* Al bajar: una sola línea con el sol chico, YACANA y el buscador. */
.encabezado.compacto { padding: 8px 16px; border-radius: 0; }
.encabezado.compacto .marca-punto,
.encabezado.compacto .marca-bajada,
.encabezado.compacto .local,
.encabezado.compacto .boton-cuenta { display: none; }
.encabezado.compacto .marca-nombre { font-size: 22px; }
.encabezado.compacto .sol { width: 30px; }
.encabezado.compacto { display: flex; align-items: center; gap: 10px; }
.encabezado.compacto .marca { margin: 0; gap: 8px; flex: none; }
.encabezado.compacto .buscador { margin: 0; flex: 1; min-width: 0; }
.encabezado.compacto .buscador input { padding: 8px 0; }

main { max-width: 1200px; margin: 0 auto; padding: 14px 16px 0; }

/* ---------- Productos gancho ---------- */
.gancho-pista {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
  scrollbar-width: none;
}
.gancho-pista::-webkit-scrollbar { display: none; }
.gancho-item {
  flex: 0 0 100%; scroll-snap-align: start;
  background: var(--verde); border-radius: 20px; padding: 14px;
  display: flex; align-items: center; gap: 10px;
  position: relative; overflow: hidden; min-height: 150px;
}
.gancho-item::before {
  content: ''; position: absolute; right: -40px; top: -40px;
  width: 160px; height: 160px; border-radius: 50%; background: var(--verde-claro);
}
.gancho-info { flex: 1; position: relative; min-width: 0; }
.gancho-nombre { font-weight: 800; font-size: 18px; margin: 0 0 10px; line-height: 1.2; }
.gancho-precio-fila { display: flex; align-items: center; gap: 10px; }
.precio-cartel {
  background: var(--amarillo); font-weight: 800; font-size: 21px;
  padding: 2px 11px; border-radius: 10px; transform: rotate(-3deg);
}
.gancho-foto {
  position: relative; width: 110px; height: 120px; flex: none;
  background: var(--tarjeta); border-radius: 16px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 46px;
}
.gancho-foto img { width: 100%; height: 100%; object-fit: contain; }
.gancho-puntos { display: flex; gap: 5px; justify-content: center; margin: 9px 0 4px; }
.gancho-puntos button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px;
  background: var(--borde); transition: width .2s, background .2s;
}
.gancho-puntos button.activo { width: 20px; background: var(--texto); }

/* ---------- Categorías ---------- */
.categorias {
  display: flex; gap: 10px; overflow-x: auto; padding: 12px 0 6px;
  scrollbar-width: none;
}
.categorias::-webkit-scrollbar { display: none; }
.categoria {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0; font-size: 12px; width: 66px;
}
.categoria span.icono-cat {
  width: 52px; height: 52px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  border: 2px solid transparent; transition: transform .15s;
}
.categoria .nombre-cat { max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.categoria.activa span.icono-cat { border-color: var(--texto); }
.categoria.activa .nombre-cat { font-weight: 800; }
.categoria:active span.icono-cat { transform: scale(.94); }

/* ---------- Listado ---------- */
.seccion-titulo {
  display: flex; align-items: center; gap: 6px;
  font-size: 17px; font-weight: 800; margin: 18px 0 10px;
}
.seccion-titulo i { color: #E8A400; }
.grilla {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .grilla { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.producto {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 8px; display: flex; flex-direction: column;
  transition: border-color .15s;
}
.producto.en-pedido { border: 2px solid var(--verde); padding: 7px; }
.producto-foto {
  aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 40px;
}
.producto-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* Sin foto: el amanecer serrano de la marca (rayos y sierras) sobre el tinte
   de la categoría, con el ícono en un círculo. Escala con el font-size de la
   caja que lo contiene. */
.sin-foto {
  width: 100%; height: 100%; display: grid; place-items: center;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L14 9 L28 12 L44 4 L58 8 L72 2 L86 9 L100 6 V24 H0Z' fill='%2319242E' fill-opacity='.07'/%3E%3Cpath d='M0 20 Q25 13 50 18 T100 17 V24 H0Z' fill='%2319242E' fill-opacity='.08'/%3E%3C/svg%3E") bottom / 100% 26% no-repeat,
    repeating-conic-gradient(from -90deg at 50% 62%, rgba(255, 255, 255, .5) 0deg 7deg, transparent 7deg 18deg);
}
.sin-foto i {
  font-size: .72em; width: 2.2em; height: 2.2em; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tarjeta); color: var(--texto);
  box-shadow: 0 0 0 .35em rgba(255, 255, 255, .45);
}
.producto-nombre { font-size: 13.5px; font-weight: 600; margin: 8px 0 2px; line-height: 1.3; flex: 1; }
.producto-desc { font-size: 12px; color: var(--texto-2); margin: 0 0 4px; }
.producto-pie { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }
.precio { font-weight: 800; font-size: 16px; white-space: nowrap; }

.boton-mas {
  width: 34px; height: 34px; border-radius: 11px; border: 0;
  background: var(--verde); color: var(--texto); font-size: 19px;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.boton-mas.rebote { animation: rebote .3s; }
@keyframes rebote { 40% { transform: scale(1.2); } }
.cantidad {
  display: flex; align-items: center; background: var(--texto); color: var(--verde);
  border-radius: 11px; height: 34px; flex: none;
}
.cantidad button { background: none; border: 0; color: inherit; width: 28px; height: 34px; font-size: 16px; }
.cantidad span { min-width: 18px; text-align: center; font-weight: 800; font-size: 14px; }

.estado { text-align: center; color: var(--texto-2); margin: 32px 0; }
.estado.error { color: var(--rojo); }

/* ---------- Pie ---------- */
.pie { margin: 36px 0 16px; font-size: 12px; color: var(--texto-2); }
.confianza {
  list-style: none; padding: 12px; margin: 0 0 12px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  color: var(--texto); font-weight: 600;
}
.confianza li { display: flex; align-items: center; gap: 6px; }
.confianza i { font-size: 18px; color: var(--verde-texto); }
@media (min-width: 640px) { .confianza { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Barra de pedido ---------- */
.barra-pedido {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.barra-pedido button {
  pointer-events: auto;
  width: 100%; max-width: 560px; margin: 0 auto; display: flex;
  align-items: center; justify-content: space-between;
  background: var(--texto); color: var(--fondo); border: 0; border-radius: 18px;
  padding: 8px 8px 8px 16px; text-align: left;
}
.barra-resumen { display: flex; flex-direction: column; font-size: 12px; color: #C9CED6; }
.barra-resumen strong { font-size: 18px; color: var(--fondo); font-weight: 800; }
.barra-resumen strong.salto { animation: salto .35s; }
@keyframes salto { 40% { transform: translateY(-3px); color: var(--amarillo); } }
.barra-accion {
  background: var(--verde); color: var(--texto); border-radius: 13px;
  padding: 11px 16px; font-weight: 800; font-size: 14px;
}

/* ---------- Hoja del pedido ---------- */
.hoja {
  border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 560px;
  max-height: 92vh; border-radius: 22px 22px 0 0; background: var(--fondo); color: var(--texto);
}
.hoja::backdrop { background: rgba(25, 36, 46, .55); }
.hoja[open] { animation: subir .25s ease-out; }
@keyframes subir { from { transform: translateY(40px); opacity: .4; } }
@media (min-width: 960px) {
  .hoja { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; border-radius: 22px 0 0 22px; }
  .hoja[open] { animation: deslizar .25s ease-out; }
  @keyframes deslizar { from { transform: translateX(40px); opacity: .4; } }
}
.hoja-cuerpo { padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 4px; }
.hoja-manija { width: 42px; height: 4px; border-radius: 2px; background: var(--borde); margin: 0 auto 8px; }
.hoja-titulo { display: flex; align-items: center; justify-content: space-between; }
.hoja-titulo h2 { margin: 0; font-size: 19px; font-weight: 800; }
.icono { background: none; border: 0; font-size: 22px; padding: 6px; }

.renglones {
  list-style: none; margin: 8px 0; padding: 0 10px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
}
.renglon { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.renglon + .renglon { border-top: 1px solid var(--borde); }
.renglon-foto { width: 42px; height: 42px; border-radius: 8px; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.renglon-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.renglon-texto { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }
.renglon-texto small { display: block; color: var(--texto-2); font-weight: 400; }

fieldset { border: 0; margin: 8px 0 0; padding: 0; }
legend { font-size: 13px; font-weight: 800; margin-bottom: 6px; padding: 0; }
select, .campo input {
  width: 100%; background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 10px; padding: 10px 12px; font-size: 16px;
}
.opciones-entrega { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opcion input { position: absolute; opacity: 0; }
.opcion span {
  display: block; background: var(--tarjeta); border: 2px solid var(--borde);
  border-radius: 12px; padding: 9px 10px; font-size: 14px; font-weight: 700;
}
.opcion small { display: block; font-weight: 400; color: var(--texto-2); font-size: 12px; }
.opcion input:checked + span { border-color: var(--texto); }
.opcion input:focus-visible + span { outline: 3px solid var(--amarillo); }
.chips-pago { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--borde); background: var(--tarjeta);
  border-radius: 18px; padding: 6px 13px; font-size: 13px; font-weight: 600;
}
.chip[aria-pressed="true"] { background: var(--texto); color: var(--fondo); border-color: var(--texto); }
.chips-subcategoria { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
.chips-subcategoria::-webkit-scrollbar { display: none; }
.chips-subcategoria .chip { flex: none; }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 800; margin-top: 10px; }
.campo input { font-weight: 400; }
.error { color: var(--rojo); font-size: 12px; font-weight: 600; margin: 2px 0 0; }

.total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; font-size: 14px; }
.total strong { font-size: 22px; font-weight: 800; }
.aclaracion { margin: 0 0 8px; font-size: 12px; color: var(--texto-2); }
.boton-whatsapp {
  border: 0; background: var(--verde); color: var(--texto); border-radius: 14px;
  padding: 14px; font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.boton-whatsapp i { font-size: 21px; }
.invitar-cuenta { margin: 12px 0 0; font-size: 13px; color: var(--texto-2); }
.invitar-cuenta button {
  border: 1px solid var(--borde); background: var(--tarjeta); border-radius: 18px;
  padding: 5px 12px; font-size: 13px; font-weight: 700; color: var(--texto);
  display: inline-flex; align-items: center; gap: 5px; margin-right: 2px;
}

/* ---------- Pantalla de espera (tienda en prueba) ---------- */
.espera { position: fixed; inset: 0; z-index: 100; background: var(--fondo); }
.espera iframe { border: 0; width: 100%; height: 100%; display: block; }
.espera-acceso {
  position: absolute; left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.espera-acceso p { margin: 0; font-size: 13px; color: var(--texto-2); }
.espera-acceso p:empty { display: none; }
.espera-acceso button {
  border: 1px solid var(--borde); background: var(--tarjeta); border-radius: 18px;
  padding: 8px 16px; font-size: 14px; font-weight: 700; color: var(--texto);
  display: inline-flex; align-items: center; gap: 6px;
}

/* ---------- Mi cuenta ---------- */
.cuenta-quien { margin: 2px 0 6px; font-size: 13px; color: var(--texto-2); overflow-wrap: anywhere; }
.cuenta-subtitulo { margin: 10px 0 4px; font-size: 14px; font-weight: 800; }
.mis-pedidos {
  list-style: none; margin: 0; padding: 0 12px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  overflow-y: auto; max-height: 55vh;
}
.mis-pedidos:empty { display: none; }
.mi-pedido { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.mi-pedido + .mi-pedido { border-top: 1px solid var(--borde); }
.mi-pedido-texto { flex: 1; min-width: 0; font-size: 13px; }
.mi-pedido-texto small { display: block; color: var(--texto-2); }
.mi-pedido .chip { flex: none; display: flex; align-items: center; gap: 4px; }
.cuenta-acciones { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 12px; }
.cuenta-acciones .ticket-volver { color: var(--texto); }
.cuenta-acciones .borrar { color: var(--rojo); }

/* ---------- Ticket del pedido ---------- */
.ticket-dialogo {
  border: 0; padding: 16px; background: none; width: 100%; max-width: 400px;
  max-height: 100vh; overflow-y: auto; color: var(--texto);
}
.ticket-dialogo::backdrop { background: rgba(25, 36, 46, .92); }
.ticket {
  position: relative; background: var(--tarjeta); text-align: center;
  padding: 60px 20px 30px; margin-top: 34px; border-radius: 18px 18px 0 0;
  /* Borde de abajo cortado como papel de ticket. */
  -webkit-mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 0 / 18px 100%;
  mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 0 / 18px 100%;
}
.ticket-dialogo[open] .ticket { animation: imprimir .6s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes imprimir { from { transform: translateY(-24px); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.ticket-sol {
  position: absolute; z-index: 1; top: 12px; left: 50%; width: 76px; height: 76px; margin-left: -38px;
  border-radius: 50%; background: var(--texto); display: grid; place-items: center;
  box-shadow: 0 0 0 5px var(--tarjeta);
}
.ticket-sol::before {
  content: ''; position: absolute; inset: -18px; border-radius: 50%; z-index: -1;
  background: repeating-conic-gradient(var(--amarillo) 0deg 8deg, transparent 8deg 20deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 78%, #000 80%, #000 96%, transparent 98%);
  mask: radial-gradient(circle closest-side, transparent 78%, #000 80%, #000 96%, transparent 98%);
}
.ticket-dialogo[open] .ticket-sol { animation: amanecer .7s .2s cubic-bezier(.3, 1.5, .5, 1) both; }
.ticket-dialogo[open] .ticket-sol::before { animation: girar 18s linear infinite; }
@keyframes amanecer { from { transform: translateY(30px) scale(.4); opacity: 0; } }
@keyframes girar { to { transform: rotate(1turn); } }
.ticket-sol img { width: 48px; height: auto; }
.ticket-marca { font-family: var(--marca); letter-spacing: 2px; font-size: 14px; color: var(--verde-texto); margin: 0; }
.ticket h2 { font-size: 24px; font-weight: 800; margin: 4px 0 6px; }
.ticket-sub { font-size: 13.5px; color: var(--texto-2); margin: 0 0 14px; }
.ticket-codigo {
  display: inline-block; margin: 0 0 14px; padding: 4px 12px; border-radius: 10px;
  background: var(--amarillo); font-size: 13px; transform: rotate(-2deg);
}
.ticket-codigo strong { font-size: 16px; letter-spacing: 1px; }
.ticket-renglones {
  list-style: none; margin: 0; padding: 12px 0; text-align: left; font-size: 13px;
  border-top: 2px dashed var(--borde); border-bottom: 2px dashed var(--borde);
  max-height: 30vh; overflow-y: auto;
}
.ticket-renglones li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.ticket-renglones li span:last-child { white-space: nowrap; font-weight: 600; }
.ticket-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 4px; }
.ticket-total strong { font-size: 22px; font-weight: 800; }
.ticket-entrega { margin: 0; font-size: 12.5px; color: var(--texto-2); text-align: left; }
.ticket-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ticket-reabrir, .ticket-volver {
  background: none; border: 0; color: var(--fondo); font-size: 14px; font-weight: 600;
  text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px;
}
.ticket-volver { color: #AEB6C0; font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* En el carrusel el fondo ya es verde: el botón va en carbón. */
.gancho-item .boton-mas { background: var(--texto); color: var(--verde); }
.gancho-foto i { font-size: 56px; color: var(--texto-2); }
@media (min-width: 960px) { .gancho-item { flex-basis: calc(50% - 6px); } }

/* Al elegir una categoría la página baja hasta acá: que no quede debajo del encabezado. */
.categorias { scroll-margin-top: 64px; }

/* ---------- Filas de la portada ---------- */
.seccion-titulo h2 { margin: 0; font-size: inherit; font-weight: inherit; }
.ver-todo {
  margin-left: auto; background: none; border: 0; padding: 4px 0;
  color: var(--verde-texto); font-weight: 800; font-size: 13px;
}
.fila {
  display: grid; grid-auto-flow: column; gap: 10px;
  grid-auto-columns: calc((100% - 10px) / 2.15);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 0 16px;
}
.fila::-webkit-scrollbar { display: none; }
.fila > * { scroll-snap-align: start; }
@media (min-width: 640px) { .fila { grid-auto-columns: calc((100% - 30px) / 3.3); } }
@media (min-width: 960px) { .fila { grid-auto-columns: calc((100% - 50px) / 5.3); } }
.tarjeta-ver-todo {
  border: 2px dashed var(--borde); border-radius: var(--radio); background: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-weight: 800; font-size: 14px; color: var(--texto);
}
.tarjeta-ver-todo i {
  width: 44px; height: 44px; border-radius: 50%; background: var(--verde);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.volver {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 18px;
  padding: 6px 12px; font-size: 13px; font-weight: 700;
}

/* ---------- Flechas de las filas (sólo con mouse) ---------- */
.fila-marco { position: relative; }
.flecha {
  display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--borde);
  background: var(--tarjeta); color: var(--texto); font-size: 20px;
  align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(25, 36, 46, .15);
}
.flecha:hover { background: var(--verde); border-color: var(--verde); }
.flecha-izq { left: -8px; }
.flecha-der { right: -8px; }
@media (hover: hover) and (pointer: fine) {
  .flecha { display: flex; }
}

/* ---------- Asistente con IA ---------- */
/* Carbón con un brillo verde/amarillo: es la única pieza "oscura" del cuerpo
   de la página, así se distingue de las tarjetas de producto sin salirse de
   la paleta. */
:root { --brillo: linear-gradient(135deg, var(--verde) 0%, var(--amarillo) 100%); }

.asistente-promo {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 14px 0 4px; padding: 16px; border-radius: 20px;
  background: var(--texto); color: var(--fondo);
}
.asistente-promo::before, .asistente-promo::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(40px); opacity: .55;
}
.asistente-promo::before { width: 220px; height: 220px; right: -60px; top: -90px; background: var(--verde); }
.asistente-promo::after { width: 180px; height: 180px; left: -70px; bottom: -110px; background: var(--amarillo); opacity: .35; }
.promo-etiqueta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 20px; color: var(--texto); background: var(--brillo);
}
.asistente-promo h2 { margin: 10px 0 12px; font-size: 19px; font-weight: 800; line-height: 1.25; max-width: 30ch; }
.promo-ejemplos { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
.promo-ejemplos::-webkit-scrollbar { display: none; }
.promo-ejemplos button {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(247, 247, 255, .18); background: rgba(247, 247, 255, .08); color: var(--fondo);
  border-radius: 14px; padding: 9px 12px; font-size: 13px; font-weight: 700;
  backdrop-filter: blur(6px); transition: background .15s, border-color .15s;
}
.promo-ejemplos button i { font-size: 17px; color: var(--verde); }
.promo-ejemplos button:hover { background: rgba(247, 247, 255, .16); border-color: var(--verde); }
.promo-abrir {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; color: var(--verde); font-weight: 800; font-size: 14px; padding: 4px 0;
}
@media (min-width: 960px) {
  .asistente-promo { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; align-items: center; padding: 20px 24px; }
  .asistente-promo h2 { font-size: 22px; margin-bottom: 0; }
  .promo-etiqueta { grid-column: 1; justify-self: start; }
  .promo-ejemplos { grid-column: 1 / -1; margin: 14px 0 0; padding: 0; flex-wrap: wrap; }
  .promo-abrir { grid-column: 2; grid-row: 1 / span 2; margin: 0; background: var(--brillo); color: var(--texto); padding: 12px 18px; border-radius: 14px; }
}

.estado-asistente {
  display: flex; align-items: center; gap: 6px; margin: -16px auto 24px;
  border: 0; border-radius: 14px; padding: 10px 16px; font-weight: 800;
  background: var(--texto); color: var(--fondo);
}
.estado-asistente i { color: var(--verde); }

/* Botón flotante: sube cuando aparece la barra del pedido. */
.fab-asistente {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 19;
  display: flex; align-items: center; gap: 7px;
  border: 0; border-radius: 28px; padding: 12px 18px 12px 14px;
  background: var(--texto); color: var(--fondo); font-weight: 800; font-size: 14px;
  box-shadow: 0 8px 24px rgba(25, 36, 46, .3), 0 0 0 2px rgba(194, 224, 63, .55);
  transition: bottom .2s, transform .15s;
}
.fab-asistente i {
  width: 26px; height: 26px; border-radius: 50%; background: var(--brillo); color: var(--texto);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.fab-asistente:hover { transform: translateY(-2px); }
.con-pedido .fab-asistente { bottom: calc(86px + env(safe-area-inset-bottom)); }
@media (max-width: 639px) {
  .fab-asistente { padding: 0; width: 54px; height: 54px; justify-content: center; }
  .fab-asistente span { display: none; }
  .fab-asistente i { width: 34px; height: 34px; font-size: 20px; }
}

/* ---------- Panel del chat ---------- */
.hoja-asistente { height: 90vh; height: 90dvh; max-height: 90dvh; }
@media (min-width: 960px) { .hoja-asistente { max-width: 460px; height: 100vh; max-height: 100vh; } }
.asis-cuerpo { height: 100%; display: flex; flex-direction: column; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
.asis-cabecera { display: flex; align-items: center; gap: 10px; padding: 2px 12px 10px 16px; border-bottom: 1px solid var(--borde); }
.asis-titulo { flex: 1; min-width: 0; }
.asis-titulo h2 { margin: 0; font-size: 17px; font-weight: 800; }
.asis-titulo small { color: var(--texto-2); font-size: 12px; }
.asis-avatar {
  flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--texto); color: var(--verde);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  box-shadow: inset 0 0 0 2px rgba(194, 224, 63, .45);
}
.asis-avatar.chico { width: 28px; height: 28px; border-radius: 9px; font-size: 15px; }

.asis-mensajes {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 12px 8px; display: flex; flex-direction: column; gap: 12px;
}
.asis-fila { display: flex; gap: 8px; align-items: flex-start; }
.asis-fila:last-child { animation: aparecer .25s ease-out; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } }
.asis-del-usuario { justify-content: flex-end; }
.asis-columna { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.asis-burbuja {
  max-width: 100%; padding: 10px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.45;
  white-space: pre-line; overflow-wrap: anywhere;
}
.asis-del-asistente .asis-burbuja { background: var(--tarjeta); border: 1px solid var(--borde); border-top-left-radius: 5px; align-self: flex-start; }
.asis-del-usuario .asis-burbuja { background: var(--texto); color: var(--fondo); border-bottom-right-radius: 5px; max-width: 85%; }
.asis-error { display: flex; gap: 6px; color: var(--rojo); }
.asis-error i { font-size: 18px; flex: none; }
.asis-reintentar, .asis-sugerencias button, .asis-ejemplos button {
  align-self: flex-start; border: 1px solid var(--borde); background: var(--tarjeta);
  border-radius: 14px; padding: 7px 12px; font-size: 13px; font-weight: 700; text-align: left;
  transition: border-color .15s, background .15s;
}
.asis-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; }
.asis-sugerencias button:hover, .asis-ejemplos button:hover, .asis-reintentar:hover { border-color: var(--texto); }
.asis-ejemplos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-left: 36px; }
.asis-ejemplos button { display: flex; flex-direction: column; gap: 6px; padding: 11px 12px; border-radius: 16px; align-self: stretch; }
.asis-ejemplos button i {
  width: 30px; height: 30px; border-radius: 10px; background: var(--tinte-verde);
  display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--verde-texto);
}

.asis-pensando { display: flex; align-items: center; gap: 4px; }
.asis-pensando span { width: 7px; height: 7px; border-radius: 50%; background: var(--verde-texto); animation: latido 1s infinite ease-in-out; }
.asis-pensando span:nth-child(2) { animation-delay: .15s; }
.asis-pensando span:nth-child(3) { animation-delay: .3s; }
.asis-pensando em { font-style: normal; font-size: 12.5px; color: var(--texto-2); margin-left: 6px; }
@keyframes latido { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* La propuesta: los productos del catálogo, editables antes de agregarlos. */
.propuesta {
  border-radius: 18px; padding: 2px; background: var(--brillo);
  box-shadow: 0 6px 20px rgba(25, 36, 46, .08);
}
.prop-cabecera {
  display: flex; align-items: center; gap: 6px; padding: 7px 12px 6px;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
}
.prop-lista { list-style: none; margin: 0; padding: 2px 10px; background: var(--tarjeta); border-radius: 16px 16px 0 0; }
.prop-renglon { display: flex; align-items: center; gap: 9px; padding: 9px 0; transition: opacity .15s; }
.prop-renglon + .prop-renglon { border-top: 1px solid var(--borde); }
.prop-renglon.descartado { opacity: .45; }
.prop-check input { width: 18px; height: 18px; accent-color: var(--texto); margin: 0; display: block; }
.prop-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; }
.prop-nombre { font-weight: 700; }
.prop-texto small { color: var(--texto-2); font-size: 12px; }
.prop-precio { font-weight: 800; font-size: 13px; margin-top: 2px; }
.prop-cantidad { height: 30px; }
.prop-cantidad button { width: 26px; height: 30px; font-size: 14px; }
.prop-cant-fija { font-weight: 800; font-size: 13px; color: var(--texto-2); }
.prop-pie { background: var(--tarjeta); border-radius: 0 0 16px 16px; padding: 4px 10px 10px; }
.prop-agregar {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; border-radius: 13px; padding: 12px; font-weight: 800; font-size: 14px;
  background: var(--texto); color: var(--fondo);
}
.prop-agregar i { color: var(--verde); font-size: 18px; }
.prop-agregar:disabled { opacity: .45; cursor: default; }
.prop-agregar.listo { background: var(--verde); color: var(--texto); }
.prop-agregar.listo i { color: var(--texto); }
.prop-faltan {
  display: flex; gap: 7px; margin: 0; padding: 9px 12px; border-radius: 14px;
  background: var(--tinte-amarillo); font-size: 13px; line-height: 1.4;
}
.prop-faltan i { color: #B07D00; font-size: 17px; flex: none; margin-top: 1px; }

.asis-redactar {
  display: flex; align-items: flex-end; gap: 8px; margin: 8px 12px 0;
  background: var(--tarjeta); border: 1.5px solid var(--borde); border-radius: 18px; padding: 6px 6px 6px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.asis-redactar:focus-within { border-color: var(--texto); box-shadow: 0 0 0 4px rgba(194, 224, 63, .35); }
.asis-redactar textarea {
  flex: 1; min-width: 0; border: 0; outline: none; resize: none; background: none;
  font: inherit; font-size: 16px; line-height: 1.4; padding: 7px 0; max-height: 120px;
}
.asis-enviar {
  flex: none; width: 38px; height: 38px; border-radius: 12px; border: 0;
  background: var(--brillo); color: var(--texto); font-size: 19px;
  display: flex; align-items: center; justify-content: center;
}
.asis-enviar:disabled { opacity: .4; cursor: default; }
.asis-aviso { margin: 6px 16px 0; font-size: 11px; color: var(--texto-2); text-align: center; line-height: 1.35; }

/* ---------- Pedidos que van a la app (pedidos.js) ---------- */
.enlace {
  border: 0; background: none; padding: 6px 0; color: var(--verde-texto);
  font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; gap: 4px;
}
.aviso-cerrado {
  margin: 8px 0 0; padding: 10px 12px; border-radius: 12px;
  background: var(--tinte-amarillo); border: 1px solid var(--amarillo); font-size: 14px;
}
textarea#nota {
  width: 100%; background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 16px; font-weight: 400; resize: vertical;
}
.si-falta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.si-falta span { font-size: 11px; color: var(--texto-2); font-weight: 400; }
.si-falta .chip { padding: 3px 9px; font-size: 11px; }
.boton-pedido {
  border: 0; background: var(--verde); color: var(--texto); border-radius: 14px;
  padding: 12px 14px; font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.renglon.fuera .renglon-texto, .renglon.fuera strong { text-decoration: line-through; color: var(--texto-2); }
.renglon.pendiente { background: var(--tinte-amarillo); margin: 0 -10px; padding: 9px 10px; }

.chip-seguimiento {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 30; border: 0; border-radius: 22px; padding: 10px 16px;
  background: var(--texto); color: var(--fondo); font-weight: 800; font-size: 14px;
  display: flex; align-items: center; gap: 8px; box-shadow: 0 6px 20px rgba(25, 36, 46, .3);
}
body.con-pedido .chip-seguimiento { bottom: calc(86px + env(safe-area-inset-bottom)); }
.chip-seguimiento .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); }

.hoja-seguimiento { height: 92vh; height: 92dvh; }
@media (min-width: 960px) { .hoja-seguimiento { height: 100vh; } }
.seg-cuerpo { height: 100%; display: flex; flex-direction: column; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
.seg-cabecera { display: flex; align-items: flex-start; gap: 10px; padding: 0 12px 8px 16px; }
.seg-cabecera-texto { flex: 1; min-width: 0; }
.seg-cabecera h2 { margin: 0; font-size: 13px; font-weight: 700; color: var(--texto-2); }
.seg-cabecera p { margin: 2px 0 0; font-size: 18px; font-weight: 800; }
.seg-pasos { list-style: none; margin: 0; padding: 0 16px 10px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.seg-pasos li { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--texto-2); }
.seg-pasos .seg-barra { height: 6px; border-radius: 3px; background: var(--borde); }
.seg-pasos li.hecho .seg-barra { background: var(--verde); }
.seg-pasos li.actual strong { color: var(--texto); }
.seg-pasos strong { font-weight: 700; }
.seg-pasos .seg-cancelado { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 6px; color: var(--rojo); font-size: 14px; font-weight: 700; }
.seg-pestanas { display: flex; border-bottom: 1px solid var(--borde); }
.seg-pestanas button {
  flex: 1; border: 0; background: none; padding: 12px; font-size: 15px; font-weight: 600;
  color: var(--texto-2); border-bottom: 3px solid transparent;
}
.seg-pestanas button[aria-selected="true"] { color: var(--texto); font-weight: 800; border-bottom-color: var(--texto); }
.seg-error { padding: 6px 16px 0; }
.seg-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.seg-mensajes { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.seg-sistema { align-self: center; margin: 0; max-width: 90%; text-align: center; font-size: 12px; color: var(--texto-2); background: var(--tinte-lavanda); border-radius: 8px; padding: 5px 10px; }
.seg-fila { display: flex; }
.seg-fila.mia { justify-content: flex-end; }
.seg-burbuja {
  max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: 15px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-top-left-radius: 5px;
  display: flex; flex-direction: column; gap: 2px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.seg-fila.mia .seg-burbuja { background: var(--verde); border-color: var(--verde); border-radius: 14px; border-top-right-radius: 5px; }
.seg-burbuja strong { font-size: 12px; color: var(--verde-texto); }
.seg-burbuja small { align-self: flex-end; font-size: 11px; color: var(--texto-2); }
.seg-fila.mia .seg-burbuja small { color: var(--carbon-2); }
.seg-propuesta { background: var(--tarjeta); border: 2px solid var(--borde); border-radius: 14px; padding: 12px; }
.seg-propuesta.esperando { border-color: var(--amarillo); }
.seg-propuesta.aceptada { border-color: var(--verde-texto); }
.seg-propuesta.rechazada { border-color: var(--rojo); }
.seg-propuesta-titulo { margin: 0 0 6px; display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.seg-propuesta ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.seg-propuesta li.mas { color: var(--verde-texto); }
.seg-propuesta li.menos { color: var(--rojo); }
.seg-propuesta li.total { border-top: 1px solid var(--borde); margin-top: 6px; padding-top: 6px; font-weight: 800; }
.seg-propuesta-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.seg-propuesta-botones .ticket-volver { border: 1px solid var(--texto); border-radius: 14px; color: var(--texto); background: var(--tarjeta); font-weight: 800; }
#seg-form { margin: 0 14px; }
.seg-pedido { flex: 1; overflow-y: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.seg-pedido .borrar { color: var(--rojo); }
.seg-si-acepta { text-align: right; color: #8A6400; font-weight: 700; }

/* ---------- Pulido: sombras, microinteracciones y carga ---------- */
/* Sombras teñidas con el carbón de la marca, nunca negro duro. */
:root {
  --sombra-1: 0 1px 2px rgba(25, 36, 46, .06), 0 2px 8px rgba(25, 36, 46, .05);
  --sombra-2: 0 2px 4px rgba(25, 36, 46, .06), 0 10px 24px rgba(25, 36, 46, .10);
  --ease: cubic-bezier(.2, .7, .3, 1);
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
h1, h2, h3 { text-wrap: balance; }
.producto-nombre, .producto-desc { text-wrap: pretty; }

.producto { box-shadow: var(--sombra-1); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.producto-foto img { transition: transform .35s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .producto:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: #CFCFE8; }
  .producto:hover .producto-foto img { transform: scale(1.04); }
  .boton-mas:hover { filter: brightness(1.06); transform: scale(1.06); }
  .barra-pedido button:hover { box-shadow: var(--sombra-2); }
  .categoria:hover span.icono-cat { transform: translateY(-2px); }
  .tarjeta-ver-todo:hover { border-color: var(--verde-texto); }
}
.boton-mas, .cantidad button, .barra-accion, .volver, .ver-todo { transition: transform .15s var(--ease), filter .15s, background .15s; }
.boton-mas:active, .barra-accion:active, .volver:active { transform: scale(.95); }
.barra-pedido button { box-shadow: 0 8px 24px rgba(25, 36, 46, .28); transition: box-shadow .2s; }
.gancho-item { box-shadow: var(--sombra-1); }
.asistente-promo { box-shadow: 0 10px 28px rgba(25, 36, 46, .18); }

/* Más aire entre secciones. */
.seccion-titulo { margin: 26px 0 12px; font-size: 18px; letter-spacing: -.01em; }
.grilla, .fila { gap: 12px; }
@media (min-width: 960px) { main { padding-top: 20px; } .grilla, .fila { gap: 16px; } }

/* El listado entra con un fundido corto. */
#listado > * { animation: entrar .35s var(--ease) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

/* Carga: esqueletos en lugar de pantalla vacía. */
.esqueleto-titulo, .esqueleto-tarjeta {
  border-radius: var(--radio);
  background: linear-gradient(100deg, var(--tinte-lavanda) 30%, #F6F5FE 50%, var(--tinte-lavanda) 70%) 0 0 / 220% 100%;
  animation: brillo 1.3s linear infinite;
}
.esqueleto-titulo { width: 160px; height: 20px; margin: 26px 0 12px; border-radius: 8px; }
.esqueleto-tarjeta { aspect-ratio: 3 / 4; border: 1px solid var(--borde); }
@keyframes brillo { to { background-position: -120% 0; } }
.esqueleto { animation: none; }
@media (min-width: 960px) { .esqueleto-tarjeta:nth-child(n+6) { display: none; } }

/* ---------- Segunda pasada: paleta, carrusel, asistente, tarjetas y pedido ---------- */
:root { --noche: #0B0F19; --noche-2: #151C2B; --gris-campo: #F1F2F9; --brillo-lima: rgba(194, 224, 63, .18); }

/* Header: un solo tono noche que no corte contra el cuerpo. */
.encabezado, .encabezado[data-momento] { --cielo-a: var(--noche); }
.encabezado { box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(11, 15, 25, .18); }
.encabezado.compacto { background: rgba(11, 15, 25, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.buscador { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .08); transition: border-color .2s, box-shadow .2s; }
.buscador:focus-within { border-color: rgba(194, 224, 63, .5); box-shadow: 0 0 0 4px var(--brillo-lima); }

/* Carrusel: carbón con el lima sólo como acento. La foto sobresale. */
.gancho-item {
  background: radial-gradient(120% 140% at 100% 0%, #26331F 0%, var(--noche-2) 45%, var(--noche) 100%);
  color: var(--fondo); overflow: visible; margin-top: 14px; min-height: 160px;
  border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 10px 28px rgba(11, 15, 25, .25);
}
.gancho-item::before {
  right: 10px; top: 10px; width: 130px; height: 130px; filter: blur(34px); opacity: .45; background: var(--verde);
}
.gancho-pista { overflow-y: visible; padding-top: 14px; margin-top: -14px; }
.gancho-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px; color: var(--verde); border: 1px solid rgba(194, 224, 63, .4); background: rgba(194, 224, 63, .1);
}
.gancho-nombre { font-size: 17px; margin-bottom: 12px; }
.precio-cartel { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; padding: 2px 12px; box-shadow: 0 6px 16px rgba(255, 197, 20, .3); }
.gancho-foto {
  width: 128px; height: 138px; margin: -26px 0 0; transform: rotate(3deg); border-radius: 18px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .45); transition: transform .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .gancho-item:hover .gancho-foto { transform: rotate(0) scale(1.04); } }
.gancho-puntos button.activo { background: var(--texto); }

/* Asistente: resplandor y atajos en cápsulas. */
.asistente-promo {
  background: linear-gradient(160deg, var(--noche-2), var(--noche));
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 0 25px rgba(194, 224, 63, .15), 0 12px 32px rgba(11, 15, 25, .25);
}
.promo-ejemplos button {
  border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .22);
  transition: transform .2s var(--ease), background .2s, border-color .2s;
}
@media (hover: hover) and (pointer: fine) { .promo-ejemplos button:hover { transform: scale(1.05); } }

/* Categorías. */
.categoria span.icono-cat { box-shadow: var(--sombra-1); }
.categoria.activa span.icono-cat { box-shadow: 0 0 0 3px var(--brillo-lima), var(--sombra-1); }

/* Tarjetas: etiqueta de categoría > nombre > precio > agregar. */
.producto { padding: 10px; border-color: #ECECF6; }
.producto.en-pedido { padding: 9px; }
.producto-foto { border-radius: 12px; }
.producto-cat { display: block; margin: 10px 0 0; font-size: 11px; color: var(--texto-2); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.producto-nombre { margin: 2px 0 4px; font-weight: 600; min-height: 2.6em; }
.producto-pie { margin-top: 8px; padding-top: 10px; border-top: 1px solid #F0F0F8; }
.precio { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }

/* Pedido: campos, foco y separadores. */
select, .campo input, .campo textarea, .hoja textarea {
  background: var(--gris-campo); border: 1px solid transparent; border-radius: 14px; padding: 13px 14px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
select:focus, .campo input:focus, .campo textarea:focus, .hoja textarea:focus {
  outline: none; background: var(--tarjeta); border-color: var(--verde-texto); box-shadow: 0 0 0 4px var(--brillo-lima);
}
.hoja textarea { width: 100%; font-size: 16px; }
.hoja-cuerpo { gap: 0; }
.hoja-cuerpo > fieldset, .hoja-cuerpo > .campo, .hoja-cuerpo > label.campo { padding-bottom: 14px; margin-top: 14px; border-bottom: 1px solid #ECECF6; }
.hoja-cuerpo > .total { border-bottom: 0; }
.chip { transition: background .15s, color .15s, border-color .15s; }
.boton-whatsapp {
  background: var(--noche); color: var(--fondo); border-radius: 16px;
  box-shadow: 0 8px 20px rgba(11, 15, 25, .25); transition: transform .15s var(--ease), box-shadow .2s;
}
.boton-whatsapp i { color: var(--verde); }
.boton-whatsapp:hover { box-shadow: 0 8px 24px rgba(194, 224, 63, .35); }
.boton-whatsapp:active { transform: scale(.98); }

/* El pasto y las sierras en tonos pizarra: sin el verde bosque contra el cuerpo claro. */
.encabezado { --pasto-op: .07; --sierra-lejos: #172131; --sierra-cerca: #111A27; }
.encabezado[data-momento] { --sierra-lejos: #172131; --sierra-cerca: #111A27; }
textarea#nota { background: var(--gris-campo); border: 1px solid transparent; border-radius: 14px; padding: 13px 14px; }
textarea#nota:focus { background: var(--tarjeta); border-color: var(--verde-texto); }

/* ---------- Tercera pasada: panel del pedido y chat del asistente ---------- */
:root {
  --campo-bg: #F8FAFC; --campo-borde: #E2E8F0; --lima-foco: rgba(163, 200, 40, .3);
  --grad-lima: linear-gradient(135deg, #C9E64A 0%, #A6D12B 100%);
}
.hoja { background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }

/* Ítems del pedido: tarjetas aparte. */
.renglones { padding: 0; background: none; border: 0; display: flex; flex-direction: column; gap: 8px; }
.renglon { padding: 10px; gap: 12px; background: #F8FAFC; border: 1px solid #F1F5F9; border-radius: 16px; }
.renglon + .renglon { border-top: 1px solid #F1F5F9; }
.renglon-foto { width: 56px; height: 56px; border-radius: 10px; }

/* Selectores segmentados. */
#chips-pago, #chips-cuando { display: flex; flex-wrap: nowrap; gap: 2px; padding: 4px; background: #F1F5F9; border-radius: 14px; }
#chips-pago .chip, #chips-cuando .chip {
  flex: 1; border: 0; background: transparent; border-radius: 11px; padding: 9px 8px; font-size: 13px; font-weight: 600; color: var(--texto-2);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
#chips-pago .chip[aria-pressed="true"], #chips-cuando .chip[aria-pressed="true"] {
  background: #fff; color: #0F172A; font-weight: 700; box-shadow: 0 1px 3px rgba(15, 23, 42, .12), 0 1px 2px rgba(15, 23, 42, .06);
}

/* Campos: fondo y borde suaves, íconos a la izquierda, foco lima. */
select, .campo input, textarea#nota {
  background-color: var(--campo-bg); border: 1px solid var(--campo-borde); border-radius: 14px;
}
select:focus, .campo input:focus, textarea#nota:focus {
  background-color: var(--campo-bg); border-color: #A6D12B; box-shadow: 0 0 0 3px var(--lima-foco);
}
#nombre, #telefono, #direccion, #sucursal {
  background-repeat: no-repeat; background-position: 14px center; background-size: 20px; padding-left: 44px;
}
#nombre { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); }
#telefono { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
#direccion { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='11' r='3'/%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3C/svg%3E"); }
#sucursal {
  appearance: none; -webkit-appearance: none; padding-right: 42px; font-weight: 600;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A7300' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='11' r='3'/%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: 14px center, right 14px center; background-size: 20px, 18px;
}

/* Desglose y botón principal. */
.desglose { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #F1F5F9; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--texto-2); }
.desglose div { display: flex; justify-content: space-between; }
.desglose dt, .desglose dd { margin: 0; }
.desglose dd { font-weight: 700; color: var(--texto); }
.desglose #desglose-entrega { color: var(--verde-texto); }
.total { margin-top: 8px; }
.boton-whatsapp {
  background: var(--grad-lima); color: var(--texto); font-weight: 800; flex-direction: row-reverse;
  box-shadow: 0 10px 24px rgba(163, 200, 40, .3); transition: transform .2s var(--ease), box-shadow .2s;
}
.boton-whatsapp i { color: var(--texto); }
.boton-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(163, 200, 40, .4); }
.boton-whatsapp:active { transform: translateY(0) scale(.98); }

/* Promo del asistente: borde degradado lima → dorado. */
.asistente-promo {
  background: linear-gradient(160deg, #0F172A, #1E293B) padding-box, linear-gradient(135deg, var(--verde), var(--amarillo), rgba(255, 255, 255, .15)) border-box;
  border: 1px solid transparent;
}
.promo-ejemplos button { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .15); color: #fff; }
.promo-ejemplos button:nth-child(1) i { color: #F4A261; }
.promo-ejemplos button:nth-child(2) i { color: #FF6B5E; }
.promo-ejemplos button:nth-child(3) i { color: var(--verde); }
.promo-ejemplos button:nth-child(4) i { color: #6EC1FF; }

/* Chat: burbujas, entrada en pastilla y envío circular. */
.asis-del-asistente .asis-burbuja { background: #1E293B; color: #F1F5F9; border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px 18px 18px 5px; }
.asis-del-usuario .asis-burbuja { background: #E6F2B0; color: #1C2A00; border-radius: 18px 18px 5px 18px; }
.asis-pensando span { background: var(--verde); box-shadow: 0 0 8px rgba(194, 224, 63, .7); }
.asis-pensando em { color: #94A3B8; }
.asis-redactar { border-radius: 999px; padding: 6px 6px 6px 18px; background: #fff; border: 1px solid var(--campo-borde); box-shadow: 0 8px 24px rgba(15, 23, 42, .1); }
.asis-redactar:focus-within { border-color: #A6D12B; box-shadow: 0 0 0 3px var(--lima-foco), 0 8px 24px rgba(15, 23, 42, .1); }
.asis-enviar { width: 40px; height: 40px; border-radius: 50%; background: #E2E8F0; color: #94A3B8; opacity: 1; transition: background .2s, color .2s, transform .15s, box-shadow .2s; }
.asis-redactar:has(textarea:not(:placeholder-shown)) .asis-enviar:not(:disabled) { background: var(--grad-lima); color: var(--texto); box-shadow: 0 4px 12px rgba(163, 200, 40, .45); }
.asis-redactar:has(textarea:not(:placeholder-shown)) .asis-enviar:not(:disabled):hover { transform: scale(1.08); }
.asis-enviar:disabled { opacity: .5; }

/* ---------- Cuarta pasada: header, categorías, tarjetas, barra y paneles ---------- */
/* Sucursal y cuenta en un solo bloque. */
.usuario-bloque {
  margin-left: auto; align-self: flex-start; display: flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
}
.usuario-bloque .local { margin: 0; align-self: center; padding: 5px 10px 5px 8px; border-radius: 999px; transition: background .2s; }
.usuario-bloque .boton-cuenta { align-self: center; border-radius: 999px; background: rgba(255, 255, 255, .08); padding: 5px 11px 5px 7px; transition: background .2s; }
.usuario-bloque .local:not([hidden]) + .boton-cuenta:not([hidden]) { box-shadow: -1px 0 0 rgba(255, 255, 255, .12); }
.usuario-bloque .local:hover, .usuario-bloque .boton-cuenta:hover { background: rgba(255, 255, 255, .12); }
.usuario-bloque:not(:has(> :not([hidden]))) { display: none; }
.encabezado.compacto .usuario-bloque { display: none; }

/* Buscador: brillo al pasar y lupa con más contraste. */
.buscador i { color: #D4EC6E; font-size: 20px; }
@media (hover: hover) { .buscador:hover { border-color: rgba(212, 236, 110, .35); box-shadow: 0 0 0 3px rgba(194, 224, 63, .1), 0 0 20px rgba(194, 224, 63, .12); } }

/* Asistente: patrón de puntos y más aire. */
.asistente-promo {
  background:
    radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.2px) 0 0 / 18px 18px padding-box,
    linear-gradient(160deg, #0F172A, #1E293B) padding-box,
    linear-gradient(135deg, var(--verde), var(--amarillo), rgba(255, 255, 255, .15)) border-box;
  padding: 22px 20px; margin: 20px 0 8px;
}
.promo-ejemplos { gap: 10px; }
.promo-ejemplos button { padding: 11px 16px; }
@media (min-width: 960px) { .asistente-promo { padding: 28px 32px; } .promo-ejemplos { margin-top: 18px; } }

/* Categorías: más aire, flechas en la PC y la elegida bien marcada. */
.categorias { gap: 14px; padding: 16px 4px 12px; }
.categoria { width: 72px; position: relative; padding-bottom: 8px; color: var(--texto-2); transition: color .2s; }
.categoria .nombre-cat { max-width: 72px; }
.categoria::after {
  content: ''; position: absolute; left: 22px; right: 22px; bottom: 0; height: 3px; border-radius: 3px;
  background: var(--verde-texto); transform: scaleX(0); transition: transform .25s var(--ease);
}
.categoria.activa { color: var(--texto); }
.categoria.activa::after { transform: scaleX(1); }
.categoria.activa span.icono-cat { border-color: transparent; background: var(--verde) !important; box-shadow: 0 6px 16px rgba(163, 200, 40, .35); }
.marco-categorias .flecha { top: 40px; width: 34px; height: 34px; font-size: 17px; }
.marco-categorias .flecha-izq { left: -6px; }
.marco-categorias .flecha-der { right: -6px; }

/* Tarjetas: precio contundente, pie de alto fijo y + con buen tamaño táctil. */
.producto-pie { min-height: 51px; flex-wrap: nowrap; }
.precio { font-size: 18px; font-weight: 800; color: #0F172A; }
.boton-mas { width: 40px; height: 40px; border-radius: 12px; font-size: 21px; }
.cantidad { height: 40px; border-radius: 12px; animation: crecer .2s var(--ease); }
.cantidad button { width: 32px; height: 40px; }
@keyframes crecer { from { transform: scale(.85); opacity: 0; } }
@media (max-width: 639px) { .producto-pie { gap: 4px; } .precio { font-size: 16.5px; } .cantidad button { width: 26px; } .cantidad span { min-width: 16px; } }

/* Barra del pedido: entra desde abajo. */
.barra-pedido:not([hidden]) { animation: barra-entra .35s var(--ease); }
@keyframes barra-entra { from { transform: translateY(110%); opacity: 0; } }
body { padding-bottom: 112px; }

/* Pedido y asistente: mismo panel (radio, sombra, tipografía y ancho). */
.hoja { box-shadow: 0 -10px 40px rgba(15, 23, 42, .18); }
.hoja-titulo h2, .asis-titulo h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.asis-cabecera { border-bottom-color: #F1F5F9; }
@media (min-width: 960px) {
  .hoja, .hoja-asistente { max-width: 480px; box-shadow: -10px 0 40px rgba(15, 23, 42, .18); }
}
@media (max-width: 639px) { .producto.en-pedido .precio { font-size: 15px; letter-spacing: -.02em; } }

/* Las sombras no se cortan en seco: los carriles con scroll recortan todo lo
   que sale de su caja, así que se les da relleno y se compensa con margen. */
.fila { padding: 8px 16px 30px; margin: -8px -16px -26px; }
.gancho-pista { padding: 14px 16px 34px; margin: -14px -16px -34px; scroll-padding: 0 16px; }
.gancho-puntos { position: relative; }
.categorias { padding: 16px 16px 12px; margin: 0 -16px; scroll-padding: 0 16px; }

/* Los carriles que se deslizan se esfuman en los costados en vez de cortarse en seco. */
.fila, .gancho-pista, .categorias {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
@media (min-width: 1240px) {
  .fila, .gancho-pista, .categorias {
    margin-left: -40px; margin-right: -40px; padding-left: 40px; padding-right: 40px; scroll-padding: 0 40px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
}

/* Carrusel: el hueco entre tarjetas es el doble del relleno lateral, así la
   anterior y la siguiente quedan fuera de vista y sólo se ve la sombra. */
.gancho-pista {
  -webkit-mask-image: none; mask-image: none;
  gap: 32px; padding-left: 16px; padding-right: 16px; margin-left: -16px; margin-right: -16px; scroll-padding: 0 16px; }
@media (min-width: 960px) { .gancho-item { flex-basis: calc(50% - 16px); } }
.precio-cartel { white-space: nowrap; }
.usuario-bloque .local span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
@media (max-width: 639px) { .precio-cartel { font-size: 24px; } }
.usuario-bloque { min-width: 0; flex-shrink: 1; }
.usuario-bloque .boton-cuenta span { max-width: 80px; }
@media (max-width: 479px) { .usuario-bloque .local span { max-width: 62px; } .marca-nombre { font-size: 27px; } }