/* ============================================================================ bp.css — EL SISTEMA VISUAL DE BIG PIZZA Una sola hoja para las 11 pantallas. Mismo método que se usó en bolt.com.ar y wooten.com.ar, con el color de Big Pizza. Las reglas: 1. Fondo parejo, naranja SÓLO de detalle. Un elemento naranja por pantalla. 2. Inter, pesos 500-600. La jerarquía la hacen el tamaño y el aire. 3. Nada con esquina viva. 4. Cero emojis: dibujos propios. 5. DENSIDAD. Esto lo mira un empleado toda la noche: tiene que ver todo sin buscar. Es lo único que hay que respetarle a Ayres. 6. El color de estado (verde/amarillo/rojo) NO es el color de marca. Son cosas distintas y no se mezclan. ========================================================================== */ @font-face{ font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url(/fuentes/InterVariable.woff2) format('woff2'); } /* ── Los colores ────────────────────────────────────────────────────────── Vienen en dos juegos. El panel arranca oscuro (cansa menos de noche, que es cuando más se usa) pero el local puede pasarlo a claro con un botón: una cocina con sol de frente necesita lo contrario. Se cambia poniendo data-tema="claro" en el . */ :root{ --bp-bg:#0B0B0C; --bp-sup:#141416; --bp-sup2:#1B1B1E; --bp-linea:rgba(255,255,255,.09); --bp-linea2:rgba(255,255,255,.17); --bp-txt:#F3F1EE; --bp-mut:#9A958E; --bp-mut2:#6C675F; --bp-nar:#F7941D; --bp-nar-suave:rgba(247,148,29,.13); --bp-nar-linea:rgba(247,148,29,.34); --bp-nar-txt:#0F0A03; /* texto sobre naranja */ /* Estados: nada que ver con la marca */ --bp-ok:#35C275; --bp-ok-suave:rgba(53,194,117,.13); --bp-ok-linea:rgba(53,194,117,.32); --bp-espera:#E3B341;--bp-espera-suave:rgba(227,179,65,.13);--bp-espera-linea:rgba(227,179,65,.32); --bp-mal:#F2555A; --bp-mal-suave:rgba(242,85,90,.13); --bp-mal-linea:rgba(242,85,90,.34); --bp-info:#4F9BFF; --bp-info-suave:rgba(79,155,255,.12); --bp-info-linea:rgba(79,155,255,.3); --bp-r-chico:10px; --bp-r:16px; --bp-r-grande:22px; --bp-pill:999px; /* Candado, como máscara: hereda el color del texto que lo acompaña. Va acá y no como suelto porque lo dibuja un ::after. */ --bp-candado:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10h12v10H6z'/%3E%3Cpath d='M8.5 10V7a3.5 3.5 0 0 1 7 0v3' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); } :root[data-tema="claro"]{ --bp-bg:#F7F6F3; --bp-sup:#FFFFFF; --bp-sup2:#F1EFEA; --bp-linea:rgba(20,16,10,.11); --bp-linea2:rgba(20,16,10,.22); --bp-txt:#17150F; --bp-mut:#5F5A52; --bp-mut2:#8B857B; /* ⚠️ Sobre blanco el #F7941D NO se lee (ya nos pasó). En claro el naranja de los textos se oscurece; el de los fondos rellenos sigue siendo el de marca. */ --bp-nar:#A65900; --bp-nar-suave:rgba(247,148,29,.16); --bp-nar-linea:rgba(166,89,0,.3); --bp-nar-txt:#FFFFFF; --bp-ok:#0E7A42; --bp-ok-suave:rgba(14,122,66,.1); --bp-ok-linea:rgba(14,122,66,.28); --bp-espera:#94620A;--bp-espera-suave:rgba(148,98,10,.1); --bp-espera-linea:rgba(148,98,10,.28); --bp-mal:#B02A2F; --bp-mal-suave:rgba(176,42,47,.09); --bp-mal-linea:rgba(176,42,47,.28); --bp-info:#1B5FA8; --bp-info-suave:rgba(27,95,168,.09); --bp-info-linea:rgba(27,95,168,.26); } /* ── Base ────────────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} body.bp{ margin:0;background:var(--bp-bg);color:var(--bp-txt); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-feature-settings:'cv02','cv03','cv04','cv11'; font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased; } body.bp a{color:inherit;text-decoration:none} .bp-num{font-variant-numeric:tabular-nums} /* ── La barra de arriba ──────────────────────────────────────────────────── */ .bp-barra{ position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px; padding:11px 18px;background:color-mix(in srgb,var(--bp-bg) 88%,transparent); border-bottom:1px solid var(--bp-linea); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); } .bp-marca{font-size:1.02rem;font-weight:600;letter-spacing:-.03em;margin-right:10px;white-space:nowrap; display:inline-flex;align-items:center;gap:8px} .bp-marca b{color:var(--bp-nar);font-weight:600} .bp-marca-logo{display:inline-flex;align-items:center} .bp-marca .bp-negocio{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase} .bp-nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0} .bp-nav::-webkit-scrollbar{display:none} /* 2-sep-2026 (captura de Maxi): en pantalla ancha la nav se cortaba en "As…" sin ningún indicio de que había más pestañas (el scroll está oculto). En desktop la barra se parte en dos filas antes que esconder una pestaña. */ @media(min-width:781px){ .bp-nav{flex-wrap:wrap;overflow:visible} } .bp-nav a{ display:inline-flex;align-items:center;gap:7px;white-space:nowrap; font-size:.86rem;font-weight:500;color:var(--bp-mut); padding:8px 14px;border-radius:var(--bp-pill);transition:.15s; } .bp-nav a:hover{color:var(--bp-txt);background:var(--bp-sup)} .bp-nav a.on{color:var(--bp-txt);background:var(--bp-sup2)} .bp-nav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round;opacity:.85} .bp-barra-der{display:flex;align-items:center;gap:9px;margin-left:auto;flex-shrink:0} /* La barra en el celular. Es el bug que reportó Maxi el 6-ago: la barra era un flex sin wrap, así que en pantalla angosta lo que no entraba se perdía —y se perdían Conversaciones y Clientes, que son las últimas. Acá el header se parte en filas, las pestañas se deslizan de costado sin cortarse, y lo de la derecha (interruptores, botones) baja en vez de empujar la página. */ @media(max-width:820px){ .bp-barra{flex-wrap:wrap;padding:10px 13px;row-gap:9px} .bp-marca{flex:0 0 auto;margin-right:0} /* 6-sep-2026 (Maxi, viendo el panel en la demo): "en dos renglones queda desparejo". En pantalla angosta la barra se arma en filas parejas: la marca sola arriba; el estado, el reloj, la demora, el color y Salir en UNA fila de la misma altura; y las pestanas en una grilla de 3 x 3, todas del mismo ancho, sin scroll escondido. */ .bp-barra-der{flex:1 0 100%;min-width:0;flex-wrap:nowrap;justify-content:flex-start;gap:6px} .bp-barra-der > *{height:34px;flex:0 0 auto;display:inline-flex;align-items:center;box-sizing:border-box} .bp-barra-der .bp-vivo{flex:1 1 120px;min-width:0;justify-content:center;overflow:hidden;text-overflow:ellipsis;padding:6px 10px} .bp-barra-der .bp-chip{white-space:nowrap} /* Pantallas que sólo tienen el botón del color: va a la derecha de la marca, no en una fila sola. */ .bp-barra-der.bp-solo-tema{flex:0 0 auto;margin-left:auto} .bp-nav{order:3;flex:1 0 100%;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;overflow:visible} .bp-nav a{padding:8px 6px;font-size:.82rem;justify-content:center;min-width:0} .bp-nav a svg{flex:none} } @media(max-width:600px){ .bp-marca{flex-direction:column;align-items:flex-start;gap:5px} .bp-barra-der{gap:5px} .bp-barra-der .bp-vivo{font-size:.72rem;padding:6px 8px} .bp-barra-der .bp-btn-chico{padding:6px 10px} .bp-nav a{font-size:.78rem;padding:8px 4px;gap:5px} } /* El estado de la conexión: que la pantalla diga que está mirando (de Ayres) */ .bp-vivo{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;color:var(--bp-mut); border:1px solid var(--bp-linea);border-radius:var(--bp-pill);padding:6px 13px;white-space:nowrap} .bp-late{width:7px;height:7px;border-radius:50%;background:var(--bp-ok);flex:none; box-shadow:0 0 0 0 color-mix(in srgb,var(--bp-ok) 60%,transparent);animation:bp-latido 2.4s infinite} @keyframes bp-latido{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bp-ok) 55%,transparent)} 70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent} } .bp-vivo.cortado .bp-late{background:var(--bp-mal);animation:none} /* ── Botones ─────────────────────────────────────────────────────────────── */ .bp-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:inherit;font-size:.86rem;font-weight:560;letter-spacing:-.01em; border-radius:var(--bp-pill);padding:9px 18px;cursor:pointer; background:var(--bp-sup);border:1px solid var(--bp-linea);color:var(--bp-txt); transition:background .16s,border-color .16s,transform .16s;white-space:nowrap; } .bp-btn:hover{background:var(--bp-sup2);border-color:var(--bp-linea2)} .bp-btn:active{transform:scale(.97)} .bp-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;flex:none} .bp-btn-nar{background:var(--bp-nar);color:var(--bp-nar-txt);border-color:transparent;font-weight:600} .bp-btn-nar:hover{background:color-mix(in srgb,var(--bp-nar) 88%,#fff);border-color:transparent} .bp-btn-mal{color:var(--bp-mal);border-color:var(--bp-mal-linea)} .bp-btn-mal:hover{background:var(--bp-mal-suave)} .bp-btn-chico{padding:6px 13px;font-size:.8rem} .bp-btn-icono{padding:8px;width:34px;height:34px;border-radius:50%} .bp-btn-icono svg{width:16px;height:16px} /* ── Chips y estados ─────────────────────────────────────────────────────── */ .bp-chip{ display:inline-flex;align-items:center;gap:7px; font-size:.72rem;font-weight:560;letter-spacing:.05em;text-transform:uppercase; border-radius:var(--bp-pill);padding:4px 11px;border:1px solid var(--bp-linea); color:var(--bp-mut);white-space:nowrap; } .bp-chip.ok{color:var(--bp-ok);border-color:var(--bp-ok-linea);background:var(--bp-ok-suave)} .bp-chip.espera{color:var(--bp-espera);border-color:var(--bp-espera-linea);background:var(--bp-espera-suave)} .bp-chip.mal{color:var(--bp-mal);border-color:var(--bp-mal-linea);background:var(--bp-mal-suave)} .bp-chip.info{color:var(--bp-info);border-color:var(--bp-info-linea);background:var(--bp-info-suave)} /* La respuesta rápida que está cargada en la caja. Se ve cuál es de un vistazo y volver a tocarla la saca: antes dos toques armaban un mensaje que decía "ya salió" y "en 20 minutos" a la vez. */ .bp-chip.sel{color:var(--bp-txt);border-color:var(--bp-nar);background:var(--bp-nar-suave);font-weight:600} .bp-chip.nar{color:var(--bp-nar);border-color:var(--bp-nar-linea);background:var(--bp-nar-suave)} /* Cuadradito de estado — pega mejor con las puntas redondeadas que un anillo */ .bp-cuadro{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none} .bp-cuadro svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round} /* ── El reloj del pedido ────────────────────────────────────────────────── Minutos transcurridos, no la hora de entrada: "hace 18 min" se entiende al toque, "20:14" hay que calcularlo. El color cambia solo. */ .bp-reloj{ display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:560; font-variant-numeric:tabular-nums;color:var(--bp-mut); border-radius:var(--bp-pill);padding:4px 11px;border:1px solid var(--bp-linea); } .bp-reloj svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .bp-reloj.tibio{color:var(--bp-espera);border-color:var(--bp-espera-linea);background:var(--bp-espera-suave)} .bp-reloj.tarde{color:var(--bp-mal);border-color:var(--bp-mal-linea);background:var(--bp-mal-suave)} .bp-reloj.tarde svg{animation:bp-tic 1s steps(2) infinite} @keyframes bp-tic{50%{opacity:.35}} /* ── Las tres columnas ───────────────────────────────────────────────────── */ .bp-tablero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; padding:14px 18px 24px;align-items:start} @media(max-width:1100px){.bp-tablero{grid-template-columns:1fr;gap:20px}} .bp-col-cab{display:flex;align-items:center;gap:10px;padding:0 2px 11px; position:sticky;top:53px;background:var(--bp-bg);z-index:20} .bp-col-t{font-size:.76rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--bp-mut)} .bp-col-n{font-size:.76rem;font-weight:700;font-variant-numeric:tabular-nums; background:var(--bp-sup2);border:1px solid var(--bp-linea);border-radius:var(--bp-pill); padding:2px 9px;color:var(--bp-txt)} .bp-col-n.hay{background:var(--bp-nar-suave);border-color:var(--bp-nar-linea);color:var(--bp-nar)} .bp-col-lista{display:flex;flex-direction:column;gap:12px} /* ── La tarjeta del pedido ───────────────────────────────────────────────── */ .bp-ped{ background:var(--bp-sup);border:1px solid var(--bp-linea);border-radius:var(--bp-r-grande); overflow:hidden;transition:border-color .18s,transform .18s; } .bp-ped:hover{border-color:var(--bp-linea2)} .bp-ped.nuevo{border-color:var(--bp-nar-linea);animation:bp-entra .5s cubic-bezier(.16,1,.3,1)} @keyframes bp-entra{from{opacity:0;transform:translateY(-10px)}} .bp-ped.tarde{border-color:var(--bp-mal-linea)} .bp-ped-cab{display:flex;align-items:center;gap:9px;padding:12px 15px; border-bottom:1px solid var(--bp-linea);flex-wrap:wrap} .bp-ped-id{font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--bp-mut2)} .bp-ped-cab .bp-reloj{margin-left:auto} .bp-ped-cuerpo{padding:14px 15px} .bp-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px} .bp-items li{font-size:.94rem;line-height:1.45} .bp-items .cant{font-weight:700;color:var(--bp-nar);font-variant-numeric:tabular-nums; display:inline-block;min-width:1.6em} .bp-items .var{color:var(--bp-mut)} .bp-items .det{display:block;margin-top:3px;font-size:.85rem;color:var(--bp-espera); padding-left:1.6em;font-weight:500} /* Los avisos: aclaración del cliente, cambios, programado */ .bp-aviso{display:flex;gap:10px;align-items:flex-start;margin-top:11px;padding:10px 12px; border-radius:var(--bp-r-chico);font-size:.86rem;line-height:1.45; border:1px solid var(--bp-linea);background:var(--bp-sup2);color:var(--bp-txt)} .bp-aviso svg{width:15px;height:15px;flex:none;margin-top:2px;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .bp-aviso.cambio{background:var(--bp-espera-suave);border-color:var(--bp-espera-linea);color:var(--bp-espera);cursor:pointer} .bp-aviso.hora{background:var(--bp-info-suave);border-color:var(--bp-info-linea);color:var(--bp-info)} .bp-aviso.plata{background:var(--bp-mal-suave);border-color:var(--bp-mal-linea);color:var(--bp-mal)} /* ❌ WhatsApp no pudo entregar un mensaje. Mismo peso visual que el de plata: los dos significan "esto no pasó y alguien lo tiene que resolver a mano". */ .bp-aviso.mal{background:var(--bp-mal-suave);border-color:var(--bp-mal-linea);color:var(--bp-mal)} .bp-datos{margin-top:12px;padding-top:11px;border-top:1px solid var(--bp-linea); display:flex;flex-direction:column;gap:6px;font-size:.86rem;color:var(--bp-mut)} .bp-datos b{color:var(--bp-txt);font-weight:560} .bp-datos .fila{display:flex;gap:9px;align-items:flex-start} .bp-datos svg{width:14px;height:14px;flex:none;margin-top:3px;fill:none;stroke:currentColor; stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--bp-mut2)} .bp-total{display:flex;align-items:baseline;justify-content:space-between;gap:10px; margin-top:12px;padding-top:11px;border-top:1px solid var(--bp-linea)} .bp-total-l{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bp-mut2)} .bp-total-v{font-size:1.32rem;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .bp-ped-pie{display:flex;gap:7px;padding:12px 15px;border-top:1px solid var(--bp-linea); background:var(--bp-sup2);flex-wrap:wrap;align-items:center} /* 6-sep-2026: "el texto sobresale" (Maxi). Con min-width:120px el boton naranja se achicaba por debajo de su propio texto ("Marcar en camino") y las letras se salian de la pildora. Ningun boton del pie se achica mas que su contenido; en columnas angostas el naranja ocupa la fila entera y el resto reparte la de abajo, parejo. */ .bp-ped-pie .bp-btn{min-width:max-content} .bp-ped-pie .bp-btn-nar{flex:1 1 auto} @media(max-width:1100px){ .bp-ped-pie .bp-btn-nar{flex:1 1 100%} .bp-ped-pie .bp-btn:not(.bp-btn-nar):not(.bp-btn-icono){flex:1 1 auto} } /* ── La línea de tiempo del pedido ───────────────────────────────────────── */ .bp-pasos{display:flex;align-items:center;gap:0;padding:11px 15px;border-bottom:1px solid var(--bp-linea)} .bp-paso{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;min-width:0} .bp-paso-p{width:9px;height:9px;border-radius:50%;background:var(--bp-linea2);z-index:2;flex:none} .bp-paso.hecho .bp-paso-p{background:var(--bp-ok)} .bp-paso.ahora .bp-paso-p{background:var(--bp-nar);box-shadow:0 0 0 4px var(--bp-nar-suave)} .bp-paso-t{font-size:.66rem;color:var(--bp-mut2);white-space:nowrap;overflow:hidden; text-overflow:ellipsis;max-width:100%} .bp-paso.ahora .bp-paso-t{color:var(--bp-nar);font-weight:560} .bp-paso.hecho .bp-paso-t{color:var(--bp-mut)} .bp-paso::before{content:'';position:absolute;top:4px;left:-50%;right:50%;height:1px; background:var(--bp-linea2);z-index:1} .bp-paso:first-child::before{display:none} .bp-paso.hecho::before,.bp-paso.ahora::before{background:var(--bp-ok)} /* ── Los números de arriba ───────────────────────────────────────────────── */ .bp-kpis{display:flex;margin:14px 18px 0;background:var(--bp-sup); border:1px solid var(--bp-linea);border-radius:var(--bp-r-grande);overflow:hidden} .bp-kpi{flex:1;padding:14px 18px;min-width:0} .bp-kpi+.bp-kpi{border-left:1px solid var(--bp-linea)} .bp-kpi-n{font-size:1.5rem;font-weight:600;letter-spacing:-.03em;line-height:1; font-variant-numeric:tabular-nums} .bp-kpi-l{font-size:.73rem;color:var(--bp-mut);margin-top:6px} @media(max-width:700px){.bp-kpi{padding:11px 12px}.bp-kpi-n{font-size:1.2rem}.bp-kpi-l{font-size:.68rem}} /* ── Filtros ─────────────────────────────────────────────────────────────── */ .bp-filtros{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:14px 18px 0} .bp-sel{ background:var(--bp-sup);border:1px solid var(--bp-linea);color:var(--bp-txt); border-radius:var(--bp-pill);padding:8px 34px 8px 15px;font-family:inherit;font-size:.86rem; outline:none;cursor:pointer;appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A958E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;background-size:15px; } .bp-sel:focus{border-color:var(--bp-nar-linea)} /* Interruptor (sonido, auto-imprimir, en vivo) */ .bp-sw{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:.84rem; color:var(--bp-mut);user-select:none} .bp-sw input{position:absolute;opacity:0;width:0;height:0} .bp-sw-p{width:36px;height:21px;border-radius:var(--bp-pill);background:var(--bp-sup2); border:1px solid var(--bp-linea);position:relative;transition:.18s;flex:none} .bp-sw-p::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px; border-radius:50%;background:var(--bp-mut2);transition:.18s} .bp-sw input:checked + .bp-sw-p{background:var(--bp-nar-suave);border-color:var(--bp-nar-linea)} .bp-sw input:checked + .bp-sw-p::after{left:18px;background:var(--bp-nar)} .bp-sw input:focus-visible + .bp-sw-p{outline:2px solid var(--bp-nar);outline-offset:2px} .bp-sw:has(input:checked){color:var(--bp-txt)} /* Bloqueado. Lo usa la comandera de escritorio, que deja "Imprimir solo" tildado y sin poder apagarse: sin esto el interruptor se ve igual que cualquier otro y alguien lo toca diez veces sin entender por qué no pasa nada. Con el candadito se entiende que está así a propósito. 🔴 Sin filtro de saturación acá: apagaba tanto el naranja que un interruptor PRENDIDO y bloqueado se veía igual que uno apagado — justo al revés de lo que hay que comunicar. La opacidad y el candado alcanzan. */ .bp-sw:has(input:disabled){cursor:not-allowed;opacity:.8} .bp-sw:has(input:disabled)::after{ content:'';width:11px;height:11px;flex:none;margin-left:1px; background:currentColor;opacity:.55; -webkit-mask:var(--bp-candado) center/contain no-repeat; mask:var(--bp-candado) center/contain no-repeat} /* ── Cuando no hay nada ──────────────────────────────────────────────────── */ .bp-vacio{text-align:center;padding:34px 18px;border:1px dashed var(--bp-linea); border-radius:var(--bp-r-grande);color:var(--bp-mut2);font-size:.88rem;line-height:1.6} /* El hueco de "todavía no elegiste nada" no tiene por qué ser un rectángulo vacío: la foto se funde con el fondo y el cartel queda flotando encima. */ .bp-vacio-foto{position:relative;overflow:hidden;border-style:solid; min-height:230px;display:grid;place-items:center} .bp-vacio-foto > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:.3;filter:saturate(.85) contrast(1.05); /* se apaga hacia los bordes: no hay corte, se disuelve en el negro */ -webkit-mask-image:radial-gradient(120% 95% at 50% 42%,#000 8%,transparent 74%); mask-image:radial-gradient(120% 95% at 50% 42%,#000 8%,transparent 74%); animation:bp-acerca 44s ease-in-out infinite alternate} .bp-vacio-foto > span{position:relative;z-index:1;max-width:34ch; padding:11px 20px;border-radius:var(--bp-pill); background:color-mix(in srgb,var(--bp-bg) 55%,transparent); backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)} :root[data-tema="claro"] .bp-vacio-foto > img{opacity:.2} @media(prefers-reduced-motion:reduce){.bp-vacio-foto > img{animation:none}} /* ── El pedido nuevo tapa la pantalla ───────────────────────────────────── No es un cartelito: si entra un pedido hay que verlo sí o sí, y se acepta tocando en cualquier lado. */ .bp-entrante{position:fixed;inset:0;z-index:900;display:none;place-items:center;padding:24px; background:color-mix(in srgb,var(--bp-bg) 92%,transparent); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer} .bp-entrante.se-ve{display:grid;animation:bp-aparece .3s ease} @keyframes bp-aparece{from{opacity:0}} @media(prefers-reduced-motion:reduce){.bp-entrante.se-ve{animation:none}} .bp-entrante-caja{text-align:center;max-width:620px;width:100%} .bp-entrante-t{font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--bp-nar);margin-bottom:16px} .bp-entrante-n{font-size:clamp(3rem,11vw,5.4rem);font-weight:600;letter-spacing:-.045em;line-height:1} .bp-entrante-d{font-size:1.05rem;color:var(--bp-mut);margin-top:14px} .bp-entrante-x{margin-top:30px;font-size:.9rem;color:var(--bp-mut2)} /* ── 7-ago-2026: EL CARTEL TIENE QUE SERVIR, NO SÓLO VERSE ──────────────── Maxi: "en ningún local llegó una alarma de ese pedido ni se generó una tarjeta; tiene que salir en panel con cartel profesional". El cartel viejo mostraba el número, la dirección y el total sobre una foto: lindo, pero no decía QUÉ pidieron, no tenía ningún botón y no insistía. Ahora es una pieza de trabajo: qué hay que cocinar, hace cuánto que espera —el número sube solo, que es lo que genera urgencia de verdad— y un botón grande para tomarlo. El punto naranja late al ritmo de la alarma. */ /* El aro que late detrás de todo: es lo que hace que se note desde lejos, aunque el empleado esté de espaldas y lo vea de reojo. */ .bp-entrante.se-ve::before{ content:'';position:absolute;left:50%;top:50%;width:min(150vw,1100px);aspect-ratio:1; transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:-1; background:radial-gradient(circle,var(--bp-nar-suave) 0%,transparent 62%); animation:bp-latido 1.6s ease-in-out infinite} @keyframes bp-latido{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.94)} 50% {opacity:1; transform:translate(-50%,-50%) scale(1.04)}} .bp-ent-caja{width:100%;max-width:620px;text-align:left; background:color-mix(in srgb,var(--bp-sup) 96%,transparent); border:1px solid var(--bp-linea2);border-radius:30px;overflow:hidden; box-shadow:0 40px 120px -30px rgba(0,0,0,.95); animation:bp-ent-entra .42s cubic-bezier(.16,.9,.3,1) both} @keyframes bp-ent-entra{from{opacity:0;transform:translateY(26px) scale(.97)}} /* Cabecera: la etiqueta que late + hace cuánto espera */ .bp-ent-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:20px 26px;border-bottom:1px solid var(--bp-linea)} .bp-ent-eti{display:inline-flex;align-items:center;gap:9px; background:var(--bp-nar-suave);border:1px solid var(--bp-nar-linea);color:var(--bp-nar); border-radius:999px;padding:7px 16px 7px 13px; font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase} .bp-ent-punto{width:9px;height:9px;border-radius:50%;background:var(--bp-nar); animation:bp-punto 1.6s ease-in-out infinite} @keyframes bp-punto{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--bp-nar-linea)} 50%{opacity:.55;box-shadow:0 0 0 7px transparent}} .bp-ent-reloj{margin-left:auto;font-size:.82rem;color:var(--bp-mut); font-variant-numeric:tabular-nums} .bp-ent-reloj b{color:var(--bp-txt);font-weight:600} /* El cuerpo: número, entrega y — lo que faltaba — QUÉ pidieron */ .bp-ent-cuerpo{padding:24px 26px} .bp-ent-fila{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap} .bp-ent-num{font-size:clamp(2.2rem,6vw,3.1rem);font-weight:600;letter-spacing:-.04em;line-height:1} .bp-ent-total{margin-left:auto;font-size:clamp(1.5rem,4vw,2rem);font-weight:600; letter-spacing:-.03em;color:var(--bp-nar);font-variant-numeric:tabular-nums} .bp-ent-donde{margin-top:12px;font-size:1.02rem;color:var(--bp-txt);line-height:1.45} .bp-ent-donde span{color:var(--bp-mut)} .bp-ent-items{list-style:none;margin:18px 0 0;padding:16px 0 0; border-top:1px solid var(--bp-linea);display:flex;flex-direction:column;gap:8px} .bp-ent-items li{display:flex;gap:12px;align-items:baseline;font-size:1rem;line-height:1.35} .bp-ent-items b{color:var(--bp-nar);font-weight:600;min-width:2.1em;font-variant-numeric:tabular-nums} .bp-ent-items i{font-style:normal;color:var(--bp-mut);font-size:.88rem} .bp-ent-nota{margin-top:14px;padding:11px 14px;border-radius:14px; background:var(--bp-nar-suave);border:1px solid var(--bp-nar-linea); font-size:.92rem;color:var(--bp-txt);line-height:1.4} /* El botón. Uno solo y grande: a las tres de la mañana no se elige entre tres. */ .bp-ent-pie{padding:0 26px 24px} .bp-ent-btn{width:100%;border:none;border-radius:999px;padding:18px;cursor:pointer; background:var(--bp-nar);color:var(--bp-nar-txt);font-family:inherit; font-size:1.05rem;font-weight:600;letter-spacing:-.01em; transition:transform .2s cubic-bezier(.16,.9,.3,1),box-shadow .2s} .bp-ent-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px var(--bp-nar-linea)} .bp-ent-btn:active{transform:translateY(1px)} .bp-ent-ayuda{text-align:center;margin-top:12px;font-size:.82rem;color:var(--bp-mut2)} /* 🔇 Si el navegador bloquea el sonido, HAY QUE DECIRLO. Antes la alarma fallaba en silencio (el catch se la comía) y el local no tenía forma de enterarse de que estaba sordo. */ .bp-sinsonido{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:940; display:none;align-items:center;gap:10px;cursor:pointer; background:var(--bp-sup2);border:1px solid var(--bp-nar-linea);border-radius:999px; padding:11px 20px;font-size:.9rem;font-weight:550;color:var(--bp-txt); box-shadow:0 16px 40px -14px rgba(0,0,0,.9)} .bp-sinsonido.se-ve{display:flex;animation:bp-latido-suave 2s ease-in-out infinite} /* 🔴 12-ago-2026 — En el celular este cartel caía justo encima del recuadro de abajo ("… esperando respuesta", la caja de responder) y se pisaban los dos. Se levanta lo suficiente para que convivan. */ @media(max-width:1000px){ .bp-sinsonido{bottom:96px;max-width:calc(100vw - 32px);text-align:center} } @keyframes bp-latido-suave{0%,100%{opacity:1}50%{opacity:.72}} @media(max-width:560px){ .bp-ent-top,.bp-ent-cuerpo{padding-left:18px;padding-right:18px} .bp-ent-pie{padding-left:18px;padding-right:18px} .bp-ent-caja{border-radius:24px} } @media(prefers-reduced-motion:reduce){ .bp-entrante.se-ve::before,.bp-ent-punto,.bp-sinsonido.se-ve{animation:none} .bp-ent-caja{animation:none} } /* ══════════════════════════════════════════════════════════════════════════ SEGUNDA PARTE — las pantallas que no son el tablero de pedidos (Gestión, Métricas, Avisos). Mismo criterio: nada de esquina viva, el naranja de a uno por pantalla, los estados con SU color, y densidad. ══════════════════════════════════════════════════════════════════════════ */ /* ── Los dibujos ────────────────────────────────────────────────────────── Todos los íconos del panel son trazo, nunca relleno, y nunca un emoji: un emoji lo dibuja distinto cada aparato y no es de la marca. */ .bp-ic{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block;vertical-align:-2px} .bp-ic.ch{width:13px;height:13px;vertical-align:-1px} .bp-ic.g{width:18px;height:18px;vertical-align:-3px} .bp-nar{color:var(--bp-nar)} /* ── El envoltorio de una pantalla de lectura/carga ───────────────────── */ .bp-pag{max-width:900px;margin:0 auto;padding:16px 18px 30px} .bp-pag.ancho{max-width:1060px} @media(max-width:640px){.bp-pag{padding:13px 12px 26px}} /* ── Sección: título chico en mayúscula + su dibujo ───────────────────── */ .bp-sec{background:var(--bp-sup);border:1px solid var(--bp-linea); border-radius:var(--bp-r-grande);margin-bottom:13px;overflow:hidden} .bp-sec-cab{display:flex;align-items:center;gap:9px;padding:12px 16px; border-bottom:1px solid var(--bp-linea);flex-wrap:wrap} .bp-sec-t{font-size:.76rem;font-weight:600;letter-spacing:.11em; text-transform:uppercase;color:var(--bp-mut)} .bp-sec-cab>svg{color:var(--bp-mut2)} .bp-sec-der{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .bp-sec-cuerpo{padding:14px 16px} .bp-ayuda{font-size:.84rem;color:var(--bp-mut);line-height:1.5;margin:0 0 12px} .bp-ayuda:last-child{margin-bottom:0} .bp-ayuda b{color:var(--bp-txt);font-weight:560} .bp-ayuda code{background:var(--bp-sup2);border:1px solid var(--bp-linea); border-radius:var(--bp-r-chico);padding:1px 7px;font-size:.94em} /* Subtítulo dentro de una sección (las categorías de productos) */ .bp-sub{display:flex;align-items:center;gap:7px;margin:18px 0 4px; font-size:.71rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--bp-mut2)} .bp-sub:first-child{margin-top:0} /* ── Campos: todo en píldora ─────────────────────────────────────────── */ .bp-in{background:var(--bp-sup2);border:1px solid var(--bp-linea);color:var(--bp-txt); border-radius:var(--bp-pill);padding:8px 15px;font-family:inherit;font-size:.88rem; font-weight:500;outline:none;transition:border-color .15s;min-width:0} .bp-in:focus{border-color:var(--bp-nar-linea)} .bp-in::placeholder{color:var(--bp-mut2)} .bp-in.num{width:98px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600} .bp-in.chico{width:96px} /* un precio de 5 cifras entra entero: si se recorta, no sirve */ .bp-in.todo{width:100%} .bp-ta{background:var(--bp-sup2);border:1px solid var(--bp-linea);color:var(--bp-txt); border-radius:var(--bp-r);padding:11px 14px;font-family:inherit;font-size:.87rem; line-height:1.55;width:100%;outline:none;resize:vertical;transition:border-color .15s} .bp-ta:focus{border-color:var(--bp-nar-linea)} .bp-ta::placeholder{color:var(--bp-mut2)} .bp-campo{display:block;margin-bottom:13px} .bp-campo:last-child{margin-bottom:0} .bp-campo-l{display:block;font-size:.77rem;color:var(--bp-mut);margin-bottom:6px;letter-spacing:.01em} /* Fila de lista: el nombre a la izquierda, lo que se toca a la derecha */ .bp-fila{display:flex;align-items:center;gap:12px;padding:8px 0; border-bottom:1px solid var(--bp-linea);flex-wrap:wrap} .bp-fila:last-child{border-bottom:none} .bp-fila-n{flex:1;min-width:110px;font-size:.9rem;font-weight:500} /* Agotado / cerrado = ya resuelto: tiene que pesar menos que lo que sí se vende */ .bp-fila.apagado{opacity:.42} .bp-precios{display:flex;align-items:center;gap:6px} .bp-precios small{font-size:.66rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--bp-mut2)} /* ── El interruptor con color de estado ────────────────────────────────── El naranja del bp-sw es el de marca y va UNO por pantalla. Cuando el interruptor dice un estado (disponible / abierto / pausado) usa el color del estado, que es otra cosa. */ .bp-sw.ok input:checked + .bp-sw-p{background:var(--bp-ok-suave);border-color:var(--bp-ok-linea)} .bp-sw.ok input:checked + .bp-sw-p::after{background:var(--bp-ok)} .bp-sw.mal input:checked + .bp-sw-p{background:var(--bp-mal-suave);border-color:var(--bp-mal-linea)} .bp-sw.mal input:checked + .bp-sw-p::after{background:var(--bp-mal)} .bp-sw.info input:checked + .bp-sw-p{background:var(--bp-info-suave);border-color:var(--bp-info-linea)} .bp-sw.info input:checked + .bp-sw-p::after{background:var(--bp-info)} .bp-sw.ch .bp-sw-p{width:31px;height:18px} .bp-sw.ch .bp-sw-p::after{width:12px;height:12px} .bp-sw.ch input:checked + .bp-sw-p::after{left:15px} .bp-sw.ancho{width:118px} .bp-sw svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round;flex:none} /* Interruptor que ocupa toda una fila, con su explicación abajo */ .bp-sw-fila{display:flex;align-items:flex-start;gap:11px;padding:9px 0; border-bottom:1px solid var(--bp-linea)} .bp-sw-fila:last-child{border-bottom:none} .bp-sw-fila .bp-sw{padding-top:1px} .bp-sw-txt{flex:1;min-width:0} .bp-sw-t{font-size:.9rem;font-weight:560;color:var(--bp-txt)} .bp-sw-d{font-size:.8rem;color:var(--bp-mut);line-height:1.45;margin-top:2px} /* ── La barra de guardar ───────────────────────────────────────────────── Fija abajo y con el texto de qué guarda: si el botón no lo dice, nadie sabe si le pisa los precios o los horarios. */ .bp-guardar{position:fixed;left:0;right:0;bottom:0;z-index:50; display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap; padding:11px 18px;border-top:1px solid var(--bp-linea); background:color-mix(in srgb,var(--bp-bg) 90%,transparent); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} .bp-guardar-t{font-size:.79rem;color:var(--bp-mut);text-align:center} body.bp.con-guardar{padding-bottom:78px} /* ── La tapa de la clave ─────────────────────────────────────────────── */ .bp-tapa{position:fixed;inset:0;z-index:80;display:grid;place-items:center; padding:24px;background:var(--bp-bg)} .bp-tapa-caja{width:100%;max-width:350px;text-align:center;background:var(--bp-sup); border:1px solid var(--bp-linea);border-radius:var(--bp-r-grande);padding:30px 26px} .bp-tapa-m{font-size:1.15rem;font-weight:600;letter-spacing:-.03em} .bp-tapa-m b{color:var(--bp-nar);font-weight:600} .bp-tapa-d{font-size:.85rem;color:var(--bp-mut);margin-top:5px;line-height:1.5} .bp-tapa-caja .bp-in{width:100%;text-align:center;margin:18px 0 11px} .bp-tapa-caja .bp-btn{width:100%} /* ── Barras de proporción (cuánto se vendió de cada cosa) ─────────────── */ .bp-bar{display:flex;align-items:center;gap:12px;padding:6px 0} .bp-bar+.bp-bar{border-top:1px solid var(--bp-linea)} .bp-bar-n{width:152px;flex:none;font-size:.88rem;font-weight:500; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bp-bar-t{flex:1;min-width:40px;height:8px;border-radius:var(--bp-pill); background:var(--bp-sup2);border:1px solid var(--bp-linea);overflow:hidden} /* El naranja se apaga hacia la cola: la barra "avanza" hacia su número en vez de ser un bloque de color plano. */ .bp-bar-f{height:100%;border-radius:var(--bp-pill); background:linear-gradient(90deg,color-mix(in srgb,var(--bp-nar) 55%,transparent),var(--bp-nar)); transition:width .45s cubic-bezier(.16,1,.3,1)} /* El más vendido va lleno; los que siguen, cada vez más apagados. Se ve el orden sin leer un solo número. */ .bp-bar:nth-child(n+2) .bp-bar-f{opacity:.82} .bp-bar:nth-child(n+4) .bp-bar-f{opacity:.62} .bp-bar:nth-child(n+6) .bp-bar-f{opacity:.46} .bp-bar-v{width:94px;flex:none;text-align:right;font-size:.85rem;font-weight:560; font-variant-numeric:tabular-nums} @media(max-width:560px){.bp-bar-n{width:104px;font-size:.84rem}.bp-bar-v{width:76px;font-size:.8rem}} /* La franja de números, sin margen propio, para meterla dentro de .bp-pag */ .bp-kpis.plano{margin:0 0 13px} .bp-kpi.grande{padding:18px 20px} .bp-kpi.grande .bp-kpi-n{font-size:2rem} @media(max-width:700px){.bp-kpi.grande{padding:13px 12px}.bp-kpi.grande .bp-kpi-n{font-size:1.35rem}} .bp-kpi-x{font-size:.72rem;color:var(--bp-mut2);margin-top:3px;font-variant-numeric:tabular-nums} /* ── Tabla de detalle ────────────────────────────────────────────────── */ .bp-tabla{width:100%;border-collapse:collapse;font-size:.88rem} .bp-tabla th{text-align:left;padding:0 10px 9px 0;font-size:.69rem;font-weight:600; letter-spacing:.11em;text-transform:uppercase;color:var(--bp-mut2);white-space:nowrap} .bp-tabla td{padding:9px 10px 9px 0;border-top:1px solid var(--bp-linea);vertical-align:middle} .bp-tabla th:last-child,.bp-tabla td:last-child{padding-right:0} .bp-tabla .der{text-align:right;font-variant-numeric:tabular-nums;font-weight:560} .bp-tabla tbody tr:hover td{background:var(--bp-sup2)} /* ── Chips que se pueden tocar (los filtros) ─────────────────────────── */ button.bp-chip{cursor:pointer;font-family:inherit;background:transparent;transition:.15s} button.bp-chip:hover:not(:disabled){color:var(--bp-txt);border-color:var(--bp-linea2)} button.bp-chip:disabled{opacity:.4;cursor:default} .bp-chip.on{color:var(--bp-txt);background:var(--bp-sup2);border-color:var(--bp-linea2)} .bp-chip.mal.on{color:var(--bp-mal);border-color:var(--bp-mal-linea);background:var(--bp-mal-suave)} .bp-chip svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;flex:none} .bp-chip .n{opacity:.62;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0} .bp-sep{width:1px;height:20px;background:var(--bp-linea);margin:0 3px;flex:none} /* ── La fila de una sesión de WhatsApp ───────────────────────────────── */ .bp-ses{background:var(--bp-sup2);border:1px solid var(--bp-linea); border-radius:var(--bp-r);padding:12px 14px;margin-bottom:9px} .bp-ses:last-child{margin-bottom:0} .bp-ses.mal{border-color:var(--bp-mal-linea);background:var(--bp-mal-suave)} .bp-ses-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .bp-ses-n{font-size:.94rem;font-weight:600} .bp-ses-cab .bp-btn{margin-left:auto} .bp-qr{margin-top:12px;text-align:center} .bp-qr img{background:#fff;padding:10px;width:206px;height:206px;object-fit:contain; border-radius:var(--bp-r);border:1px solid var(--bp-linea)} .bp-qr-x{font-size:.78rem;color:var(--bp-mut);margin-top:7px;line-height:1.45} /* ── La lista de avisos ──────────────────────────────────────────────── */ .bp-av{display:flex;gap:12px;background:var(--bp-sup);border:1px solid var(--bp-linea); border-radius:var(--bp-r);padding:12px 14px;margin-bottom:8px;transition:border-color .16s} .bp-av:hover{border-color:var(--bp-linea2)} .bp-av.urg{border-color:var(--bp-mal-linea)} .bp-av.visto{opacity:.5} .bp-av.visto.urg{border-color:var(--bp-linea)} .bp-av-c{flex:1;min-width:0} .bp-av-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .bp-av-t{font-size:.93rem;font-weight:560;line-height:1.4;margin-top:6px} .bp-av-x{font-size:.86rem;color:var(--bp-mut);line-height:1.55;margin-top:4px; white-space:pre-wrap;word-break:break-word} .bp-av-x b{color:var(--bp-txt);font-weight:600} .bp-av-x i{color:var(--bp-mut2)} .bp-av-x a{color:var(--bp-info);text-decoration:underline} .bp-av-pie{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:8px; font-size:.74rem;color:var(--bp-mut2);font-variant-numeric:tabular-nums} .bp-av-acc{margin-left:auto;flex:none} .bp-punto{width:7px;height:7px;border-radius:50%;background:var(--bp-mal);flex:none} .bp-cuando{font-size:.76rem;color:var(--bp-mut2);font-variant-numeric:tabular-nums;white-space:nowrap} .bp-bloque{margin-bottom:20px} .bp-bloque-t{display:flex;align-items:center;gap:8px;margin:0 2px 9px; font-size:.74rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--bp-mut)} .bp-bloque-t.urg{color:var(--bp-mal)} @media(max-width:560px){.bp-av-acc{margin-left:0}} /* El cuadradito de estado, con sus colores (los del estado, no los de marca) */ .bp-cuadro.ok{background:var(--bp-ok-suave);color:var(--bp-ok)} .bp-cuadro.espera{background:var(--bp-espera-suave);color:var(--bp-espera)} .bp-cuadro.mal{background:var(--bp-mal-suave);color:var(--bp-mal)} .bp-cuadro.info{background:var(--bp-info-suave);color:var(--bp-info)} .bp-cuadro.neutro{background:var(--bp-sup2);color:var(--bp-mut2)} /* Los filtros, sin margen propio, para meterlos dentro de .bp-pag */ .bp-filtros.plano{padding:0 0 13px} /* ── Mensajito de resultado ──────────────────────────────────────────── */ .bp-msg{font-size:.83rem;font-weight:500;min-height:18px} .bp-msg.ok{color:var(--bp-ok)} .bp-msg.mal{color:var(--bp-mal)} .bp-msg.espera{color:var(--bp-mut)} /* ══════════════════════════════════════════════════════════════════════════ TERCERA PARTE — la bandeja de Conversaciones y la base de Clientes. La bandeja es el molde de Linear: la lista angosta a la izquierda y la charla al lado. Abrir una charla NO te saca de la lista, porque mientras se contesta una hay que seguir viendo quién más está esperando. Todo lo de acá está pensado para leerse de un vistazo a un metro de distancia y sin scrollear: filas de dos renglones, nada de tarjetas. ══════════════════════════════════════════════════════════════════════════ */ /* La bandeja necesita más ancho que una pantalla de lectura: son dos columnas y la de la derecha es una charla. */ .bp-pag.bandeja{max-width:1400px} /* ── El buscador: la lupa adentro del campo ──────────────────────────── */ .bp-busca{position:relative;display:flex;align-items:center;flex:1;min-width:150px} .bp-busca>svg{position:absolute;left:14px;width:14px;height:14px;fill:none;stroke:currentColor; stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--bp-mut2);pointer-events:none} .bp-busca .bp-in{width:100%;padding-left:36px} .bp-sec-der .bp-busca{flex:0 1 250px} /* ── El punto de estado ────────────────────────────────────────────────── El .bp-punto de arriba nace rojo (los avisos). Acá se le dan los otros colores de estado: gris = recién llegó, ámbar = va tardando, rojo = ya es tarde. El rojo late, para que el ojo lo encuentre solo. */ .bp-punto.ok{background:var(--bp-ok)} .bp-punto.espera{background:var(--bp-espera)} .bp-punto.gris{background:var(--bp-mut2)} .bp-punto.late{animation:bp-punto-late 1.5s ease-in-out infinite} @keyframes bp-punto-late{50%{opacity:.25}} /* ── La franja de arriba: cuánta gente está esperando ───────────────────── Sin nadie esperando NO desaparece: queda en calma, y esa es la prueba de que la pantalla está mirando (si desapareciera, nadie sabría si el panel se colgó o si de verdad no hay nadie). */ .bp-alerta{display:flex;align-items:center;gap:10px;padding:9px 16px;margin-bottom:12px; border:1px solid var(--bp-mal-linea);background:var(--bp-mal-suave);color:var(--bp-txt); border-radius:var(--bp-pill);font-size:.88rem;font-weight:560;cursor:pointer; transition:border-color .16s} .bp-alerta:hover{border-color:var(--bp-mal)} .bp-alerta-x{margin-left:auto;font-size:.77rem;font-weight:500;color:var(--bp-mut);text-align:right} .bp-alerta.calma{border-color:var(--bp-linea);background:transparent;color:var(--bp-mut); font-weight:500;cursor:default} .bp-alerta.calma:hover{border-color:var(--bp-linea)} /* ── La bandeja: lista al costado, charla al lado ───────────────────────── El corte va en 1001px porque es el mismo ancho que mira el JS para decidir qué se ve. Más angosto que eso: una vista o la otra. */ .bp-bandeja{display:grid;grid-template-columns:1fr;gap:13px;align-items:start} @media(min-width:1001px){ .bp-bandeja{grid-template-columns:minmax(290px,352px) minmax(0,1fr);gap:15px} } /* La caja: lo mismo que .bp-sec pero sin margen abajo (la bandeja usa gap) */ .bp-caja{background:var(--bp-sup);border:1px solid var(--bp-linea); border-radius:var(--bp-r-grande);overflow:hidden} .bp-caja.abierta{overflow:visible} /* para que el cuadro de responder se pegue abajo */ .bp-caja-cab{display:flex;align-items:center;gap:7px;padding:9px 11px; border-bottom:1px solid var(--bp-linea);flex-wrap:wrap} .bp-caja .vacio{padding:30px 20px;text-align:center;color:var(--bp-mut2); font-size:.85rem;line-height:1.65} /* ── Las filas de charlas ──────────────────────────────────────────────── Dos renglones: quién es y qué escribió. La tercera línea de etiquetas sale sólo si hay algo que decir. */ .bp-charlas .item{position:relative;padding:8px 13px 9px;cursor:pointer; border-bottom:1px solid var(--bp-linea);transition:background .13s} .bp-charlas .item:last-child{border-bottom:none} .bp-charlas .item:hover{background:var(--bp-sup2)} .bp-charlas .item::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:2px; border-radius:0 var(--bp-pill) var(--bp-pill) 0;background:transparent} .bp-charlas .item.esp-amb::before{background:var(--bp-espera)} .bp-charlas .item.esp-rojo::before{background:var(--bp-mal)} .bp-charlas .item.sel{background:var(--bp-sup2)} .bp-charlas .item.sel::before{background:var(--bp-txt)} .bp-charlas .top{display:flex;align-items:center;gap:7px;min-width:0} .bp-charlas .num{font-size:.87rem;font-weight:560;letter-spacing:-.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .bp-charlas .cuando{margin-left:auto;flex:none;font-size:.72rem;color:var(--bp-mut2); font-variant-numeric:tabular-nums;white-space:nowrap} .bp-charlas .prev{margin-top:2px;font-size:.79rem;color:var(--bp-mut);line-height:1.4; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bp-charlas .prev b{color:var(--bp-mut2);font-weight:600} .bp-charlas .marcas{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:5px} /* La etiqueta chiquita de una fila (sucursal, pedido, la atiende alguien) */ .bp-eti{display:inline-flex;align-items:center;font-size:.63rem;font-weight:700; letter-spacing:.07em;text-transform:uppercase;border-radius:var(--bp-pill);padding:2px 8px; border:1px solid var(--bp-linea);color:var(--bp-mut2);white-space:nowrap;flex:none} .bp-eti+.bp-eti{margin-left:5px} .bp-eti.ok{color:var(--bp-ok);border-color:var(--bp-ok-linea);background:var(--bp-ok-suave)} .bp-eti.info{color:var(--bp-info);border-color:var(--bp-info-linea);background:var(--bp-info-suave)} .bp-eti.mal{color:var(--bp-mal);border-color:var(--bp-mal-linea);background:var(--bp-mal-suave)} .bp-eti.espera{color:var(--bp-espera);border-color:var(--bp-espera-linea);background:var(--bp-espera-suave)} /* Cuánto hace que espera: el semáforo de la fila (gris, ámbar, rojo) */ .bp-espera-t{margin-left:auto;flex:none;font-size:.71rem;font-weight:600;white-space:nowrap; font-variant-numeric:tabular-nums;border-radius:var(--bp-pill);padding:2px 8px; border:1px solid var(--bp-linea);color:var(--bp-mut)} .bp-espera-t.amb{color:var(--bp-espera);border-color:var(--bp-espera-linea);background:var(--bp-espera-suave)} .bp-espera-t.rojo{color:var(--bp-mal);border-color:var(--bp-mal-linea);background:var(--bp-mal-suave)} /* ── La charla abierta ───────────────────────────────────────────────── */ .bp-charla-q{font-size:.92rem;font-weight:600;letter-spacing:-.015em;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bp-charla-x{margin-left:auto;font-size:.75rem;color:var(--bp-mut2);text-align:right} .bp-charla-x b{color:var(--bp-ok);font-weight:560} .bp-avisos:not(:empty){padding:12px 14px 0} .bp-avisos .bp-aviso{margin-top:0;margin-bottom:8px} .bp-chat{padding:13px 14px} /* 🔴 El width:fit-content no es cosmético: sin él la burbuja es un div normal y se estira SIEMPRE al 76%, así que "ok" y un párrafo ocupan lo mismo y no se lee de un vistazo quién dijo qué. Con esto la burbuja mide el texto. */ .bp-chat .msg{max-width:76%;width:fit-content;padding:8px 12px;margin-bottom:8px; font-size:.87rem;line-height:1.5; white-space:pre-wrap;word-wrap:break-word;border:1px solid var(--bp-linea); background:var(--bp-sup2);border-radius:var(--bp-r);border-bottom-left-radius:6px} .bp-chat .msg.bot{margin-left:auto;background:var(--bp-nar-suave);border-color:var(--bp-nar-linea); border-bottom-left-radius:var(--bp-r);border-bottom-right-radius:6px} /* Lo que escribió una persona del local va con el verde de "resuelto": de un vistazo se ve qué contestó el bot y qué contestó alguien. */ .bp-chat .msg.persona{background:var(--bp-ok-suave);border-color:var(--bp-ok-linea)} .bp-chat .quien-msg{font-size:.63rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--bp-mut2);margin-bottom:3px} .bp-chat .msg.bot .quien-msg{text-align:right} .bp-chat .msg.persona .quien-msg{color:var(--bp-ok)} /* ❌ 12-ago-2026: la burbuja de un mensaje que WhatsApp NO pudo entregar. Antes se veía idéntica a una que salió bien y el encargado cerraba la charla convencido de que había contestado. El borde rojo y el renglón de abajo son toda la diferencia entre enterarse y no enterarse. */ /* Aviso mandado desde el panel (listo para retirar / salió / entregado). 15-ago-2026 */ .bp-chat .msg.aviso{border-style:dashed} .bp-chat .msg.aviso .quien-msg{color:var(--bp-nar)} /* ✓ / ✓✓ / ✓✓ leído, como WhatsApp */ .bp-chat .tick{margin-left:8px;font-size:.78rem;letter-spacing:-.12em;color:var(--bp-mut2);font-weight:600} .bp-chat .tick.leido{color:#2F8FE0} .bp-chat .msg.fallado{border-color:var(--bp-mal-linea);background:var(--bp-mal-suave)} .bp-chat .msg.fallado .no-llego{margin-top:6px;padding-top:5px;border-top:1px solid var(--bp-mal-linea); color:var(--bp-mal);font-size:.74rem;font-weight:600;line-height:1.35;white-space:normal} /* ── La hora de cada mensaje y el corte de día ──────────────────────────── 8-ago-2026: leer una charla sin saber cuándo pasó cada cosa no sirve para averiguar nada. La hora va al lado de quién habló, en gris, sin robarle atención al texto; y el día se corta con una línea, porque una charla puede arrancar un martes y seguir el jueves. */ .bp-chat .hora-msg{font-weight:500;letter-spacing:0;text-transform:none; color:var(--bp-mut2);opacity:.75;margin-left:8px;font-variant-numeric:tabular-nums} .bp-chat .msg.bot .hora-msg{margin-left:0;margin-right:8px;float:left} .bp-chat .dia-sep{display:flex;align-items:center;gap:12px;margin:18px 0 12px; color:var(--bp-mut2);font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase} .bp-chat .dia-sep::before,.bp-chat .dia-sep::after{content:'';flex:1;height:1px;background:var(--bp-linea)} /* ── Contestarle al cliente ──────────────────────────────────────────── */ .bp-responder{border-top:1px solid var(--bp-linea);background:var(--bp-sup2);padding:11px 13px; border-radius:0 0 var(--bp-r-grande) var(--bp-r-grande)} .bp-responder .bp-ta{background:var(--bp-sup);min-height:52px} .bp-rapidas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px} .bp-responder-pie{display:flex;align-items:center;gap:10px;margin-top:8px} .bp-responder-h{flex:1;min-width:120px;font-size:.75rem;color:var(--bp-mut);line-height:1.4} /* ── Tabla larga: el encabezado no se va de pantalla ───────────────────── La base de clientes son cientos de filas. Angostas y con el encabezado pegado arriba, se leen sin perder de vista qué es cada columna. */ .bp-scroll{max-height:min(64vh,640px);overflow:auto} /* Sin esto las filas se ven asomar por ARRIBA del encabezado pegado */ .bp-sec-cuerpo.bp-scroll{padding-top:0} .bp-tabla.fija thead th{position:sticky;top:0;z-index:2;background:var(--bp-sup); padding:2px 10px 9px 0;box-shadow:inset 0 -1px 0 var(--bp-linea)} .bp-tabla.densa td{padding:6px 10px 6px 0;font-size:.86rem} .bp-tabla .tel{font-variant-numeric:tabular-nums;white-space:nowrap} .bp-tabla .tel a{color:var(--bp-info)} .bp-tabla .tel a:hover{text-decoration:underline} /* El número que dice algo bueno (recuperados) va con el color del estado */ .bp-kpi-n.ok{color:var(--bp-ok)} @media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ══════════════════════════════════════════════════════════════════════════ FOTO DE FONDO CON LOS CONTROLES FLOTANDO ENCIMA La misma pieza que se usa en wooten.com.ar y bolt.com.ar. Va donde suma —el ingreso, la banda de números, las métricas— y NUNCA detrás de la lista de pedidos: ahí la foto pelea con lo que el empleado tiene que leer. ⚠️ La foto tiene que fundirse con el fondo. Si es clara y pareja queda como una estampilla pegada: las que están en /fotos/ se eligieron midiendo el brillo, no a ojo. ══════════════════════════════════════════════════════════════════════════ */ /* 🔴 El position:relative es SÓLO para los bloques que están en el flujo (la banda de números, el hueco del chat). Los que ya son fixed —la pantalla de ingreso, el cartel del pedido entrante— lo conservan: si .bp-foto se los pisa, dejan de cubrir la pantalla y el cartel directamente no se ve. */ .bp-foto{position:relative;overflow:hidden;isolation:isolate} .bp-entrante.bp-foto,.bp-tapa.bp-foto,.bp-login.bp-foto{position:fixed;inset:0} /* 🔴 Acá el fondo va OPACO, no traslúcido: el cartel tapa el tablero entero y detrás no puede quedar leyéndose la lista de pedidos. La foto va encima de ese negro (z-index -2) y el velo del ::after encima de la foto. */ .bp-entrante.bp-foto{background:var(--bp-bg);backdrop-filter:none;-webkit-backdrop-filter:none} .bp-entrante.bp-foto::after{background: radial-gradient(120% 90% at 50% 50%,color-mix(in srgb,var(--bp-bg) 74%,transparent) 0%, color-mix(in srgb,var(--bp-bg) 90%,transparent) 100%)} .bp-foto > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .bp-foto::after{content:'';position:absolute;inset:0;z-index:-1; background: linear-gradient(100deg,color-mix(in srgb,var(--bp-bg) 94%,transparent) 0%, color-mix(in srgb,var(--bp-bg) 82%,transparent) 42%, color-mix(in srgb,var(--bp-bg) 55%,transparent) 100%), linear-gradient(to bottom,transparent 40%,var(--bp-bg) 100%)} /* La foto se acerca despacio: el panel está vivo sin distraer */ .bp-foto > img{animation:bp-acerca 40s ease-in-out infinite alternate} @keyframes bp-acerca{from{transform:scale(1)}to{transform:scale(1.07)}} /* Lo que flota encima: vidrio, nunca un rectángulo opaco */ .bp-vidrio{ background:color-mix(in srgb,var(--bp-sup) 62%,transparent); border:1px solid color-mix(in srgb,var(--bp-txt) 12%,transparent); backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4); border-radius:var(--bp-r-grande); } .bp-btn.vidrio{ background:color-mix(in srgb,var(--bp-sup) 55%,transparent); border-color:color-mix(in srgb,var(--bp-txt) 15%,transparent); backdrop-filter:blur(16px) saturate(1.35);-webkit-backdrop-filter:blur(16px) saturate(1.35); } .bp-btn.vidrio:hover{background:color-mix(in srgb,var(--bp-sup) 78%,transparent)} /* La banda de números, ahora sobre la foto */ .bp-kpis.bp-foto{border-radius:var(--bp-r-grande);border:1px solid var(--bp-linea)} .bp-kpis.bp-foto .bp-kpi{background:transparent} /* El ingreso: foto a pantalla completa y la caja flotando. 🔴 El background:transparent no sobra: conversaciones.html y clientes.html declaran su propio `.bp-login{background:var(--bp-bg)}` en un