/* ==========================================================================
   CREDICELL LOS RÍOS · Landing pública (maqueta, D28.20, 5 de septiembre)
   Escrita a mano, sin frameworks. Aislada por completo del sistema QR.

   Pulido visual del 5 de septiembre (tras la demo grabada por el dueno):
   mas aire en la barra superior, jerarquia tipografica en el modal de
   acceso y en el POS, iconos SVG propios como apoyo visual. Principios:
   espaciado en escala de 4px, un solo color de acento (el degradado de
   marca), tarjetas con borde + sombra suave sobre fondo gris claro, y
   numeros tabulares para que las cifras se alineen. Ninguna regla de las
   auditorias previas (overflow del POS, scroll del modal de ayuda,
   posicion inicial de la burbuja en movil) se quita: se conservan con
   sus comentarios originales.
   ========================================================================== */

:root{
  --tinta:#111114;
  --gris-900:#111827;
  --gris-700:#374151;
  --gris-600:#4b5563;
  --gris-500:#6b7280;
  --gris-400:#9ca3af;
  --gris-300:#d1d5db;
  --gris-200:#e5e7eb;
  --gris-100:#f3f4f6;
  --gris-50:#f9fafb;
  --grad-start:#667eea;
  --grad-end:#764ba2;
  --marca-suave:#eef0fd;
  --marca-borde:#dfe3fb;
  --ambar:#d97706;
  --ambar-claro:#fef3c7;
  --ambar-borde:#fde68a;
  --ambar-texto:#78350f;
  /* estados de cobranza (mismos 4 colores que ya usaba el JS) */
  --verde:#16a34a;   --verde-suave:#dcfce7;   --verde-texto:#15803d;
  --ambar-e:#d97706; --ambar-e-suave:#fef3c7; --ambar-e-texto:#b45309;
  --naranja:#ea580c; --naranja-suave:#ffedd5; --naranja-texto:#c2410c;
  --rojo:#ef4444;    --rojo-suave:#fee2e2;    --rojo-texto:#b91c1c;
  --sombra-tarjeta:0 1px 2px rgba(17,24,39,.04), 0 6px 18px -8px rgba(17,24,39,.10);
  --radio:16px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--gris-50); color:var(--gris-900); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
/* Auditoria nocturna (5 de septiembre, hallazgo DETALLE): bloquea el
   scroll de fondo mientras cualquier overlay esta abierto (ver
   actualizarInertPublico en landing.js, que pone/quita esta clase). */
html.sin-scroll-de-fondo{ overflow:hidden; }
button{ font-family:inherit; cursor:pointer; }
input{ font-family:inherit; }
.grad-text{ background:linear-gradient(135deg, var(--grad-start), var(--grad-end)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tono-verde{ --c:var(--verde); --c-suave:var(--verde-suave); --c-texto:var(--verde-texto); }
.tono-ambar{ --c:var(--ambar-e); --c-suave:var(--ambar-e-suave); --c-texto:var(--ambar-e-texto); }
.tono-naranja{ --c:var(--naranja); --c-suave:var(--naranja-suave); --c-texto:var(--naranja-texto); }
.tono-rojo{ --c:var(--rojo); --c-suave:var(--rojo-suave); --c-texto:var(--rojo-texto); }

/* ---------- Encabezado: dos filas con aire propio, acciones agrupadas a la
   derecha y el subrayado de la categoria activa apoyado sobre el borde
   inferior de la barra (antes flotaba a otra altura que el resto). ---------- */
.topbar{ background:#fff; border-bottom:1px solid var(--gris-200); position:sticky; top:0; z-index:10; }
.topbar-fila{ display:flex; align-items:center; gap:28px; padding:18px 40px 14px; max-width:1200px; margin:0 auto; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; letter-spacing:-.01em; color:var(--grad-start); flex-shrink:0; }
.logo svg{ width:34px; height:34px; }
.logo b{ color:var(--tinta); }
.buscador{ flex:1; display:flex; align-items:center; gap:10px; background:var(--gris-100); border:1px solid var(--gris-200); border-radius:9999px; padding:0 18px; height:44px; color:var(--gris-500); max-width:560px; margin:0 auto; }
.buscador input{ border:0; background:none; outline:none; flex:1; height:100%; font-size:14.5px; color:var(--gris-700); }
.buscador input::placeholder{ color:var(--gris-500); }
.topbar-acciones{ display:flex; align-items:center; gap:12px; flex-shrink:0; margin-left:auto; }
.btn-ingresar{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 22px; background:linear-gradient(135deg, var(--grad-start), var(--grad-end)); color:#fff; border:0; border-radius:12px; font-weight:700; font-size:14.5px; flex-shrink:0; box-shadow:0 8px 18px -8px rgba(102,126,234,.65); }
.btn-ingresar:hover{ opacity:.92; }
.btn-carrito{ position:relative; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:1.5px solid var(--gris-200); background:#fff; border-radius:12px; color:var(--gris-700); flex-shrink:0; }
.btn-carrito:hover{ background:var(--gris-100); }
.carrito-contador{ position:absolute; top:-7px; right:-7px; min-width:19px; height:19px; padding:0 5px; border-radius:9999px; background:var(--grad-start); color:#fff; font-size:10.5px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
.topbar-categorias{ display:flex; gap:28px; padding:0 40px; max-width:1200px; margin:0 auto; overflow-x:auto; }
.cat-item{ font-size:13.5px; font-weight:600; color:var(--gris-600); white-space:nowrap; cursor:default; padding:8px 0 12px; border-bottom:2px solid transparent; }
.cat-item.activo{ color:var(--grad-start); border-bottom-color:var(--grad-start); }

/* ---------- Aviso de maqueta (reutilizado en varios lugares) ---------- */
.aviso-maqueta{ display:flex; gap:12px; align-items:flex-start; padding:14px 18px; background:var(--ambar-claro); border:1px solid var(--ambar-borde); border-radius:14px; }
/* Auditoria nocturna (5 de septiembre, hallazgo DETALLE de accesibilidad):
   texto blanco sobre var(--ambar) (#d97706) daba 3.19:1, por debajo del
   minimo WCAG AA de 4.5:1 para texto de 9.5px. --ambar-e-texto (#b45309,
   ya existente en el proyecto para los estados de cobranza) da 5.03:1,
   cumple AA, y sigue siendo un ambar reconocible como el mismo acento. */
.badge-maqueta{ flex-shrink:0; margin-top:2px; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; background:var(--ambar-e-texto); color:#fff; padding:3px 8px; border-radius:9999px; }
.aviso-maqueta p{ margin:0; font-size:12.5px; color:var(--ambar-texto); line-height:1.55; }
.aviso-pagina{ width:min(1200px, calc(100% - 80px)); margin:20px auto 0; }
.pos-main > .aviso-maqueta{ margin-bottom:20px; }
.modal-aviso{ margin:18px 0 2px; padding:12px 14px; }

/* ---------- Hero: texto + ilustracion propia, en dos columnas ---------- */
.hero{ max-width:1200px; margin:0 auto; padding:44px 40px 8px; display:grid; grid-template-columns:1.15fr .85fr; gap:32px; align-items:center; }
.hero-texto h1{ font-size:2.35rem; margin:0 0 14px; line-height:1.15; letter-spacing:-.02em; }
.hero-texto p{ color:var(--gris-600); font-size:16.5px; line-height:1.55; margin:0 0 22px; max-width:520px; }
.hero-pilares{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0; }
.hero-pilares li{ display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--gris-200); border-radius:9999px; padding:6px 14px 6px 6px; font-size:13px; font-weight:600; color:var(--gris-700); }
.hero-pilares svg{ width:28px; height:28px; padding:6px; border-radius:9999px; background:var(--marca-suave); color:var(--grad-start); flex-shrink:0; }
.hero-arte{ justify-self:center; width:min(100%, 320px); }
.hero-arte svg{ width:100%; height:auto; display:block; }

/* ---------- Catálogo: la imagen de cada tarjeta pasa de un icono al 55% de
   opacidad sobre gris a un icono nitido dentro de un disco blanco sobre
   fondo lavanda, para que se lea como "imagen" y no como hueco. ---------- */
.catalogo{ max-width:1200px; margin:32px auto 48px; padding:0 40px; display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:22px; }
.tarjeta-producto{ background:#fff; border:1px solid var(--gris-200); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease; }
.tarjeta-producto:hover{ transform:translateY(-2px); box-shadow:var(--sombra-tarjeta); }
.tarjeta-producto-img{ height:150px; background:linear-gradient(160deg, #f4f5fc 0%, #eceefb 100%); display:flex; align-items:center; justify-content:center; color:var(--grad-start); }
.tarjeta-producto-img svg{ width:64px; height:64px; padding:14px; background:#fff; border-radius:9999px; box-shadow:0 8px 18px -10px rgba(102,126,234,.6); }
.tarjeta-producto-cuerpo{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:4px; flex:1; }
.tarjeta-producto-cat{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--grad-start); }
.tarjeta-producto-nombre{ font-size:14.5px; font-weight:700; color:var(--gris-900); line-height:1.3; min-height:38px; }
.tarjeta-producto-precio{ font-size:1.35rem; font-weight:800; margin-top:6px; letter-spacing:-.01em; }
.tarjeta-producto-cuotas{ font-size:12.5px; color:var(--gris-500); margin-bottom:14px; }
.btn-agregar-carrito{ margin-top:auto; width:100%; border:1.5px solid var(--grad-start); background:#fff; color:var(--grad-start); font-weight:700; font-size:13px; padding:10px; border-radius:10px; transition:background .15s ease, color .15s ease; }
.btn-agregar-carrito:hover{ background:var(--grad-start); color:#fff; }
.btn-agregar-carrito.agregado{ background:var(--grad-start); color:#fff; }

/* ---------- Carrito ---------- */
.modal-carrito{ max-width:440px; }
.carrito-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--gris-100); }
.carrito-item-nombre{ font-size:13.5px; font-weight:600; }
.carrito-item-precio{ font-size:13px; color:var(--gris-600); white-space:nowrap; font-variant-numeric:tabular-nums; }
.carrito-item-quitar{ border:0; background:none; color:var(--gris-500); font-size:12px; text-decoration:underline; padding:0; }
.carrito-vacio{ color:var(--gris-500); font-size:13.5px; padding:24px 0; text-align:center; }
/* Auditoria nocturna (5 de septiembre, hallazgo MEDIO): antes toda
   .modal-acceso hacia el scroll junto con la X (position:absolute
   dentro de la misma caja), asi que en pantallas cortas la X se
   desplazaba fuera de vista igual que le pasaba al modal de ayuda antes
   de su propio arreglo (ver .modal-ayuda/.modal-ayuda-scroll). Aqui
   #carrito-lista (los items, la parte que puede crecer) es la UNICA
   parte que hace scroll; el titulo de arriba y el total+boton de abajo
   quedan siempre fijos y visibles. */
#carrito-lista{ margin-top:14px; flex:1; min-height:0; overflow-y:auto; }
.carrito-total{ display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:1.15rem; padding:14px 0 6px; margin-top:6px; border-top:1.5px solid var(--gris-200); }
#btn-finalizar-carrito:disabled{ background:var(--gris-300); box-shadow:none; cursor:not-allowed; }

/* ---------- Tarjetas del POS / Supervisor (base compartida) ---------- */
.resumen-tienda, .pos-busqueda, .resultado-cliente, .tabla-tiendas{ background:#fff; border:1px solid var(--gris-200); border-radius:var(--radio); box-shadow:var(--sombra-tarjeta); }
.resumen-icono{ width:46px; height:46px; border-radius:14px; background:var(--marca-suave); color:var(--grad-start); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ---------- Resumen de cobranza (POS y Supervisor): cabecera con icono,
   cifra grande con unidad, barra apilada con la distribucion y cuatro
   celdas tenidas con el color de su estado. ---------- */
.resumen-tienda{ padding:22px 24px 24px; margin-bottom:20px; }
.resumen-cabecera{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.resumen-cabecera-izq{ display:flex; align-items:center; gap:14px; min-width:0; }
.resumen-tienda-titulo{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gris-500); margin:0 0 4px; }
.resumen-tienda-total{ margin:0; display:flex; align-items:baseline; gap:6px; }
.resumen-total-num{ font-size:2.1rem; font-weight:800; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.resumen-total-unidad{ font-size:13px; color:var(--gris-500); font-weight:600; }
.resumen-alcance{ flex-shrink:1; min-width:0; font-size:12px; font-weight:700; color:var(--grad-start); background:var(--marca-suave); border:1px solid var(--marca-borde); padding:6px 12px; border-radius:9999px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52%; }
.resumen-barra{ display:flex; gap:3px; height:10px; border-radius:9999px; overflow:hidden; margin-bottom:16px; }
.resumen-barra span{ display:block; height:100%; background:var(--c); border-radius:9999px; }
.resumen-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.resumen-celda{ display:flex; flex-direction:column; gap:4px; padding:12px 10px 12px 12px; border-radius:12px; background:var(--c-suave); border-left:3px solid var(--c); min-width:0; }
.resumen-celda-valor{ font-size:1.35rem; font-weight:800; line-height:1.1; color:var(--gris-900); font-variant-numeric:tabular-nums; }
.resumen-celda-etiqueta{ font-size:11.5px; font-weight:600; color:var(--gris-600); line-height:1.3; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.resumen-celda .punto{ width:8px; height:8px; border-radius:9999px; background:var(--c); flex-shrink:0; }
@media (max-width:520px){ .resumen-grid{ grid-template-columns:repeat(2, 1fr); } }

/* ---------- Pie ---------- */
.pie{ text-align:center; padding:28px 24px; color:var(--gris-500); font-size:12.5px; border-top:1px solid var(--gris-200); }

/* ---------- Overlays (acceso de tienda / POS) ---------- */
.overlay{ position:fixed; inset:0; background:rgba(17,17,20,.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
.overlay.oculto{ display:none; }
/* Jessica (5 de septiembre, hallazgo MEDIO): en apaisado angosto (ej.
   667x375) .modal-acceso podia ser mas alto que la pantalla y quedaba
   cortado, con la X fuera de vista y sin forma de bajar. max-height +
   overflow-y basico alcanza para el modal de acceso/carrito (contenido
   corto, la X rara vez se aleja demasiado); el modal de ayuda necesita
   ademas el tratamiento de mas abajo porque su contenido si es largo. */
/* Auditoria nocturna (5 de septiembre, hallazgo MEDIO): antes esta caja
   entera hacia scroll (overflow-y:auto), asi que .modal-cerrar
   (position:absolute dentro de la misma caja) se iba con el contenido
   en pantallas cortas, igual que le pasaba al modal de ayuda antes de su
   propio arreglo. Ahora es una columna flex de alto acotado que NUNCA
   hace scroll ella misma (overflow:hidden): la X, que sigue siendo
   hermana directa de #paso-codigo/#paso-pin/#paso-supervisor y de
   #carrito-lista, nunca entra en el area que se desplaza. Cada paso del
   acceso (mas abajo) y #carrito-lista (arriba) son quienes de verdad
   scrollean, cada uno por su cuenta. */
.modal-acceso{ background:#fff; border-radius:22px; padding:32px 32px 30px; width:100%; max-width:420px; max-height:calc(100vh - 40px); display:flex; flex-direction:column; overflow:hidden; position:relative; box-shadow:0 30px 70px -24px rgba(17,17,20,.5); }
#paso-codigo, #paso-pin, #paso-supervisor{ flex:1; min-height:0; overflow-y:auto; }
.modal-cerrar{ position:absolute; top:14px; right:14px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:0; background:var(--gris-100); color:var(--gris-600); padding:0; border-radius:9999px; }
.modal-cerrar:hover{ background:var(--gris-200); color:var(--gris-900); }
/* Cabecera del modal: icono, etiqueta de paso, titulo y lead con
   separaciones distintas entre si (antes todo iba a 4-6px, sin jerarquia). */
.modal-cabecera{ display:flex; flex-direction:column; gap:6px; padding-right:36px; }
.modal-icono{ width:48px; height:48px; border-radius:14px; background:var(--marca-suave); color:var(--grad-start); display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.modal-paso{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--grad-start); }
.modal-acceso h2{ margin:0; font-size:1.45rem; line-height:1.2; letter-spacing:-.015em; }
.t-lead{ color:var(--gris-600); font-size:14px; line-height:1.55; margin:0; }
.t-etiqueta{ display:block; font-size:14px; font-weight:700; color:var(--gris-900); margin:2px 0 0; }
.t-etiqueta-mini{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--verde-texto); }
.t-mini{ font-size:12.5px; color:var(--gris-500); line-height:1.5; }
.campo{ margin-top:20px; }
.campo label, .pos-busqueda label{ display:block; font-size:13px; font-weight:600; color:var(--gris-700); margin:0 0 8px; }
.modal-acceso input, .pos-busqueda input{ width:100%; border:1.5px solid var(--gris-300); border-radius:12px; padding:13px 14px; font-size:15px; outline:none; transition:border-color .15s ease, box-shadow .15s ease; }
.modal-acceso input:focus, .pos-busqueda input:focus{ border-color:var(--grad-start); box-shadow:0 0 0 4px rgba(102,126,234,.16); }
.input-pin{ text-align:center; font-size:1.5rem !important; letter-spacing:.35em; font-weight:700; padding-left:calc(14px + .35em) !important; }
.error-form{ color:#dc2626; font-size:12.5px; min-height:16px; margin:8px 0 0; }
.btn-primary{ width:100%; margin-top:20px; border:0; color:#fff; font-weight:700; font-size:15px; padding:14px; border-radius:14px; background:linear-gradient(135deg, var(--grad-start), var(--grad-end)); box-shadow:0 10px 22px -10px rgba(102,126,234,.7); }
.btn-primary:hover{ opacity:.94; }
.btn-secundario{ display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 16px; border:1px solid var(--gris-200); background:#fff; color:var(--gris-700); font-size:13px; font-weight:600; border-radius:12px; }
.btn-secundario:hover{ background:var(--gris-100); }
.btn-enlace-supervisor{ display:block; width:100%; text-align:center; border:0; background:none; color:var(--gris-500); font-size:12.5px; text-decoration:underline; padding:0; margin-top:16px; }
.btn-enlace-supervisor:hover{ color:var(--gris-700); }
.tienda-encontrada{ display:flex; align-items:center; gap:12px; margin-top:20px; padding:12px 14px; border-radius:14px; background:var(--verde-suave); border:1px solid #bbf7d0; }
.tienda-encontrada-check{ width:32px; height:32px; border-radius:9999px; background:var(--verde); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tienda-encontrada-texto{ min-width:0; }
.oculto{ display:none !important; }

/* ---------- Panel de Supervisor (solo lectura, todas las tiendas) ---------- */
.pos-main-ancho{ max-width:960px; }
.tabla-seccion{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 12px; padding:0 2px; }
.tabla-seccion h2{ margin:0; font-size:1.05rem; letter-spacing:-.01em; }
.tabla-seccion span{ font-size:12.5px; color:var(--gris-500); }
.tabla-tiendas{ overflow:hidden; }
.tabla-tiendas-fila{ display:grid; grid-template-columns:2.2fr .8fr 1fr 1.7fr; gap:14px; align-items:center; padding:13px 22px; border-bottom:1px solid var(--gris-100); font-size:13.5px; }
.tabla-tiendas-fila:last-child{ border-bottom:0; }
.tabla-tiendas-fila:not(.encabezado):hover{ background:var(--gris-50); }
.tabla-tiendas-fila.encabezado{ font-weight:700; color:var(--gris-500); font-size:11px; text-transform:uppercase; letter-spacing:.06em; background:var(--gris-50); padding:11px 22px; }
.tabla-tiendas-nombre{ display:block; font-weight:700; }
.tabla-tiendas-ciudad{ display:block; color:var(--gris-500); font-size:12px; margin-top:1px; }
.tabla-num{ font-weight:700; font-variant-numeric:tabular-nums; }
.chip-estado{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:9999px; background:var(--c-suave); color:var(--c-texto); white-space:nowrap; font-variant-numeric:tabular-nums; }
.chip-estado::before{ content:''; width:7px; height:7px; border-radius:9999px; background:var(--c); flex-shrink:0; }
.tabla-estado{ display:flex; align-items:center; gap:10px; }
.tabla-mora-barra{ flex:1; height:8px; border-radius:9999px; background:var(--gris-100); overflow:hidden; }
.tabla-mora-barra span{ display:block; height:100%; border-radius:9999px; background:var(--c); }
.tabla-estado-pct{ font-size:12px; color:var(--gris-500); font-variant-numeric:tabular-nums; min-width:34px; text-align:right; }
@media (max-width:640px){
  .tabla-tiendas-fila{ grid-template-columns:1fr 1fr; row-gap:6px; }
  .tabla-tiendas-fila.encabezado{ display:none; }
  .tabla-estado{ grid-column:1 / -1; }
  /* Auditoria nocturna (5 de septiembre, hallazgo DETALLE): con el
     encabezado oculto en movil, "Clientes" y "Mora crítica" quedaban
     como cifras sueltas sin decir a que columna pertenecian (la de
     "Tienda" no lo necesita, ya muestra el nombre real; "Estado
     general" ya lleva su propia etiqueta via data-label tambien, para
     quedar consistente con las otras dos). */
  [data-label]::before{ content:attr(data-label); display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gris-500); margin-bottom:2px; }
}

/* ---------- POS (mismo lenguaje visual que el POS del sistema QR) ---------- */
#overlay-pos{ background:linear-gradient(180deg, #f2f3fb 0%, var(--gris-50) 260px); flex-direction:column; align-items:stretch; justify-content:flex-start; padding:0; }
/* Bug preexistente encontrado al verificar el boton de ayuda (5 de
   septiembre, no relacionado con Charlotte): a #overlay-supervisor le
   faltaba esta misma regla. Sin ella, hereda flex-direction:row de la
   clase base .overlay y centra pos-header + main como si fueran dos
   columnas en vez de apilarlos, desbordando la tabla de las 16 tiendas
   fuera del viewport en cualquier ancho. Se corrige aqui, en espejo
   exacto de #overlay-pos arriba (misma estructura interna: un
   .pos-header seguido de un <main>), para que el panel de supervisor
   se vea como siempre debio verse. */
#overlay-supervisor{ background:linear-gradient(180deg, #f2f3fb 0%, var(--gris-50) 260px); flex-direction:column; align-items:stretch; justify-content:flex-start; padding:0; }
.pos-header{ display:flex; align-items:center; gap:18px; padding:14px 40px; background:#fff; border-bottom:1px solid var(--gris-200); }
.pos-marca{ display:flex; align-items:center; gap:10px; flex-shrink:0; min-width:0; }
.pos-marca svg{ width:30px; height:30px; color:var(--grad-start); flex-shrink:0; }
.pos-titulo{ font-weight:800; font-size:1.05rem; letter-spacing:-.01em; white-space:nowrap; flex-shrink:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.pos-rol{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#fff; background:linear-gradient(135deg, var(--grad-start), var(--grad-end)); padding:4px 9px; border-radius:9999px; flex-shrink:0; }
.pos-tienda-chip{ display:inline-flex; align-items:center; gap:8px; min-width:0; flex:0 1 auto; margin-right:auto; padding:7px 13px; border-radius:9999px; background:var(--gris-100); border:1px solid var(--gris-200); color:var(--gris-700); font-size:13px; font-weight:600; }
.pos-tienda-chip svg{ flex-shrink:0; color:var(--grad-start); }
.pos-tienda{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Jessica (5 de septiembre, hallazgo CRITICO): #overlay-pos/#overlay-supervisor
   cubren el viewport (position:fixed;inset:0) pero no declaraban overflow,
   asi que el contenido mas alto que la pantalla (la tabla de 16 tiendas, un
   resultado de POS largo) quedaba inalcanzable: no habia forma de llegar a
   el ni con scroll ni con teclado. pos-header ya no crece (flex-shrink
   implicito de un item sin flex:1), y pos-main toma el resto del alto
   (flex:1) y ahora es el que scrollea (min-height:0 es necesario porque un
   item flex no se encoge bajo el tamano de su contenido si no se declara
   explicitamente: sin esto, min-height:0 nunca se activaria y overflow no
   tendria ningun efecto). */
.pos-main{ flex:1; min-height:0; overflow-y:auto; width:100%; max-width:760px; margin:0 auto; padding:28px 40px 48px; }
.pos-busqueda{ padding:22px 24px 20px; }
.pos-busqueda-cabecera{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.pos-busqueda-cabecera .resumen-icono{ width:40px; height:40px; border-radius:12px; }
.pos-busqueda-cabecera h2{ margin:0; font-size:1.1rem; letter-spacing:-.01em; }
.pos-busqueda-cabecera p{ margin:2px 0 0; font-size:13px; color:var(--gris-500); }
.pos-busqueda-fila{ display:flex; gap:12px; }
.pos-busqueda-fila input{ flex:1; font-size:1.25rem; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.pos-busqueda-fila .btn-primary{ width:auto; flex:0 0 auto; margin-top:0; padding:0 28px; }
#landing-pos-aviso{ margin:10px 0 0; }
#landing-pos-aviso:empty{ display:none; }
.pos-resultado{ width:100%; margin:20px 0 0; }
.resultado-cliente{ padding:22px 24px; }
.resultado-cabecera{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.resultado-avatar{ width:46px; height:46px; border-radius:9999px; background:linear-gradient(135deg, var(--grad-start), var(--grad-end)); color:#fff; font-weight:800; font-size:15px; letter-spacing:.02em; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.resultado-cliente h3{ margin:0; font-size:1.1rem; letter-spacing:-.01em; }
.resultado-sub{ margin:2px 0 0; font-size:12.5px; color:var(--gris-500); }
.resultado-cupo{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.resultado-cupo-valor{ font-size:1.7rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.resultado-cliente .t-mini{ margin:0 0 6px; }
.resultado-cliente .fila{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:13.5px; padding:10px 0; border-top:1px solid var(--gris-100); color:var(--gris-600); }
.resultado-cliente .fila b{ color:var(--gris-900); font-variant-numeric:tabular-nums; }

/* ---------- Ayuda / Charlotte (D28.22, 5 de septiembre): banco de
   preguntas ya escrito, sin motor de IA real todavia. Botones anidados
   dentro de #overlay-pos y #overlay-supervisor respectivamente (nunca al
   reves, seccion 22 de DECISIONES.md), asi que su propio overlay padre
   ya se encarga de ocultarlos. position:fixed, esquina inferior derecha,
   z-index:20. Corregido el 5 de septiembre (auditoria nocturna): este
   comentario decia que ese 20 se comparaba directamente con el 10 del
   topbar y el 100 de .overlay, como si los tres vivieran en el mismo
   contexto de apilamiento. No es asi: el boton es hijo DIRECTO de
   #overlay-pos/#overlay-supervisor, que son position:fixed y por lo
   tanto crean su PROPIO contexto de apilamiento nuevo (cualquier
   elemento con position:fixed lo hace, sin importar su z-index). El
   20 del boton solo se compara contra sus hermanos DENTRO de ese
   contexto (pos-header, main, overlay-ayuda-pos/-supervisor), nunca
   contra el topbar ni contra otro .overlay distinto. Funciona igual
   (el boton siempre queda encima de pos-header/main y detras de la
   ayuda anidada cuando esta se abre), pero por esta razon, no por
   una comparacion directa de numeros entre contextos distintos. En
   pantallas anchas (>640px) .pos-main es
   angosto y centrado (max-width:760px), asi que la esquina inferior
   derecha del viewport queda siempre libre, verificado con el resultado
   del POS y con la tabla de 16 tiendas del supervisor visibles a la vez.

   En movil (media query de abajo) esa misma esquina SI se ocupa: el
   aviso, el resumen y el resultado del POS son de ancho completo y ya
   casi llenan un viewport tipico de telefono por si solos (medido: a
   375x812 el resultado del cliente ya empieza a los 697px de los 812
   disponibles), asi que cualquier burbuja fija abajo terminaria tapando
   ese resultado (o, en supervisor, alguna fila de la tabla) sin importar
   el tamano del boton. Por eso en movil el boton se reubica arriba,
   justo debajo del header (que sí tiene alto fijo, nunca crece): probado
   con muestreo denso de puntos (elementFromPoint) a 320px y 375px de
   ancho, sin ningun texto ni control debajo del boton en esa posicion. ---------- */
.btn-ayuda-flotante{
  position:fixed; bottom:20px; right:20px; z-index:20;
  width:46px; height:46px; border-radius:9999px; border:0;
  background:linear-gradient(135deg, var(--grad-start) 0%, var(--grad-end) 100%);
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px -8px rgba(102,126,234,.7);
  cursor:grab; touch-action:none;
}
.btn-ayuda-flotante:active{ transform:scale(0.94); cursor:grabbing; }
/* Jessica (5 de septiembre, hallazgo MEDIO): .modal-ayuda scrolleaba
   entero, asi que la X (position:absolute dentro del mismo contenedor)
   se iba con el scroll y no habia forma de volver a alcanzarla sin
   arrastrar de nuevo hasta arriba. Se separa en dos: .modal-ayuda pasa a
   ser una columna flex de alto acotado (la X y el titulo quedan fuera
   del area que scrollea, siempre visibles), y .modal-ayuda-scroll (nuevo,
   envuelve el aviso + la lista de preguntas en el HTML) es la unica parte
   que se desplaza. */
.modal-ayuda{ max-width:480px; max-height:80vh; display:flex; flex-direction:column; overflow:hidden; }
.ayuda-cabecera{ display:flex; align-items:center; gap:14px; padding-right:36px; }
.ayuda-avatar{ width:46px; height:46px; border-radius:9999px; background:linear-gradient(135deg, var(--grad-start), var(--grad-end)); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 8px 18px -8px rgba(102,126,234,.7); }
.ayuda-cabecera h2{ font-size:1.25rem; }
.ayuda-cabecera .t-lead{ margin-top:2px; font-size:13.5px; }
.modal-ayuda-scroll{ overflow-y:auto; min-height:0; margin-top:16px; padding-right:2px; }
.modal-ayuda-scroll .modal-aviso{ margin-top:0; }
.ayuda-lista{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.ayuda-item{ margin:0; padding:14px 16px; border-radius:14px; background:var(--gris-50); border:1px solid var(--gris-100); }
.ayuda-item:last-child{ margin-bottom:0; }
.ayuda-item p{ margin:0 0 6px; font-size:13.5px; line-height:1.55; color:var(--gris-700); }
.ayuda-item p:last-child{ margin-bottom:0; }
.ayuda-item strong{ color:var(--gris-900); display:flex; gap:9px; align-items:flex-start; }
.ayuda-item strong::before{ content:''; width:6px; height:6px; margin-top:7px; border-radius:2px; background:var(--grad-start); flex-shrink:0; }

@media (max-width:640px){
  /* Jessica (5 de septiembre, hallazgo MEDIO): top:100px alcanzaba justo
     cuando el header envolvia a 2 lineas (97px), pero entre 527 y 640px
     (POS) / cerca de 640px (supervisor) el header ya cabe en 1 linea
     (61px) y el boton terminaba tocando la primera linea del aviso
     "Simulado" de abajo (solape medido de 2px). Con la burbuja ahora
     arrastrable el usuario puede moverla igual, pero se corrige el punto
     de partida con mas margen para que no arranque solapada.
     Pulido del 5 de septiembre: el aviso "Simulado" del POS/Supervisor
     reserva ademas su franja derecha (padding-right) para que, mida lo
     que mida el header, nunca haya texto debajo del punto de partida de
     la burbuja. */
  .btn-ayuda-flotante{ bottom:auto; top:120px; right:16px; width:34px; height:34px; }
  .pos-main > .aviso-maqueta{ padding-right:60px; }
  .topbar-fila{ flex-wrap:wrap; padding:14px 16px 10px; gap:12px; }
  .buscador{ order:3; max-width:none; width:100%; height:42px; }
  .topbar-categorias{ padding:0 16px; gap:20px; }
  .btn-ingresar{ height:42px; padding:0 16px; }
  .btn-carrito{ width:42px; height:42px; }
  .aviso-pagina{ width:calc(100% - 32px); margin-top:16px; }
  .aviso-maqueta{ flex-direction:column; gap:8px; padding:12px 14px; }
  .hero{ grid-template-columns:1fr; padding:28px 16px 4px; gap:18px; text-align:center; }
  .hero-texto h1{ font-size:1.75rem; }
  .hero-texto p{ font-size:15px; margin-left:auto; margin-right:auto; }
  .hero-pilares{ justify-content:center; }
  .hero-arte{ order:-1; width:min(100%, 220px); }
  .catalogo{ padding:0 16px; margin-top:24px; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
  .tarjeta-producto-img{ height:120px; }
  .modal-acceso{ padding:26px 22px 24px; }
  /* Header del POS/Supervisor en movil: SIEMPRE dos lineas (marca + Salir
     arriba, chip de tienda abajo, ~108px), para que el punto de partida
     de la burbuja (top:120px) quede siempre justo debajo. La marca se
     encoge con puntos suspensivos antes que dejar saltar a "Salir". */
  .pos-header{ padding:12px 16px; flex-wrap:wrap; gap:10px; }
  /* flex-basis 0 a proposito: con flex-wrap, un item con base "auto" fuerza
     el salto de linea de "Salir" antes de encogerse; con base 0 la marca
     ocupa lo que sobra y trunca su texto si hace falta. */
  .pos-marca{ flex:1 1 0; min-width:0; gap:8px; }
  .pos-titulo{ font-size:.98rem; }
  .pos-tienda-chip{ order:3; flex:1 1 100%; margin-right:0; }
  .btn-secundario{ margin-left:auto; padding:0 12px; flex-shrink:0; }
  .pos-main{ padding:16px; }
  .resumen-tienda, .pos-busqueda, .resultado-cliente{ padding:18px 16px; }
  .resumen-cabecera{ flex-direction:column; gap:10px; }
  .resumen-alcance{ max-width:100%; align-self:flex-start; }
  .resumen-celda-etiqueta{ white-space:normal; }
  .pos-busqueda-fila{ flex-direction:column; }
  .pos-busqueda-fila .btn-primary{ width:100%; padding:14px; }
  .tabla-seccion{ flex-direction:column; align-items:flex-start; gap:2px; }
}
/* Telefonos muy angostos (320-420px): con la etiqueta "Supervisor" y el
   boton Salir ya no cabe "Credicell Los Ríos" completo en la primera
   linea del header; se oculta solo el sufijo y queda "Credicell" + rol. */
@media (max-width:420px){
  .pos-titulo-sufijo{ display:none; }
  .pos-rol{ font-size:9.5px; letter-spacing:.05em; padding:3px 7px; }
}