/* ========================================================================== 26 · LA BANDEJA DE WHATSAPP Rehecha el 23 de septiembre de 2026 con el mismo lenguaje del Resumen: una cabecera que respira, tarjetas sin bordes de color, un solo acento —el rojo— para lo que hay que mirar. Y tres cosas propias de esta pantalla: 1. **LO URGENTE ES ROJO LLENO, Y NADA MÁS LO ES.** Un cliente que pidió una persona es la única cosa de la bandeja que tiene a alguien esperando del otro lado. Tarjeta arriba de la lista, franja arriba del chat, anillo que late en su círculo. Todo lo demás —sin leer, por cotizar, cerrado— va en tonos suaves: si todo grita, nada se oye. 2. **SE PARECE A WHATSAPP A PROPÓSITO.** Las burbujas, el verde de lo nuestro, la hora abajo a la derecha, las palomitas, el día pegado arriba. Quien atiende ya sabe leer eso; aprender otra cosa en hora pico es un error esperando a pasar. 3. **LO QUE SE MUEVE ES `transform` Y `opacity`.** La bandeja se usa en el computador de la caja con VectorPOS abierto al lado. Nada acá anima un alto ni un ancho. Las burbujas comparten `.wa__b` con el probador de la pestaña IA (12-ia.css): quien prueba y quien atiende miran la misma conversación. Lo de acá solo las afina dentro de `.wag__burbujas`. ========================================================================== */ /* -------------------------------------------------------------------------- La cabecera -------------------------------------------------------------------------- */ .wab__cab-d { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .8rem; } .wab__cab-d:empty { display: none; } .wab__canal { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem .45rem .7rem; border-radius: 99px; background: var(--surface); border: 1px solid var(--linea-sutil); font-size: .82rem; font-weight: 600; color: var(--tinta-2); } .wab__canal i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--verde-cl); } .wab__canal i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--verde-cl); animation: tbl-onda 2.8s var(--ease-suave) infinite; } .wab__canal small { font-weight: 500; color: var(--tinta-3); font-size: .76rem; } .wab__canal--off { background: var(--rojo-sua); border-color: rgba(176,30,36,.25); color: var(--rojo); } .wab__canal--off i { background: var(--rojo); } .wab__canal--off i::after { display: none; } /* -------------------------------------------------------------------------- La rejilla — su alto lo mide el JS: lo que queda de ventana -------------------------------------------------------------------------- */ .wag { display: grid; grid-template-columns: minmax(290px, 380px) minmax(0, 1fr); gap: 14px; height: var(--wa-alto, min(76vh, 760px)); animation: tbl-entra .6s var(--ease) .05s both; } .wag__col, .wag__hilo { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border: 1px solid var(--linea-sutil); border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(33, 22, 16, .04), 0 10px 30px rgba(33, 22, 16, .05); } .wag__hilo { position: relative; } /* --- Buscar ---------------------------------------------------------------- */ .wag__buscar { position: relative; padding: 12px 12px 10px; } .wag__buscar .ico { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; font-size: 1rem; } .wag__buscar input { width: 100%; padding: .62rem .9rem .62rem 2.35rem; border-radius: 12px; border: 1.5px solid transparent; background: var(--crema); font-size: .9rem; transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); } .wag__buscar input:focus { outline: none; background: #fff; border-color: rgba(240, 144, 30, .55); box-shadow: 0 0 0 4px rgba(240, 144, 30, .12); } /* -------------------------------------------------------------------------- LO URGENTE — la tarjeta que contesta «¿por dónde empiezo?» -------------------------------------------------------------------------- */ .waurg { display: grid; gap: 8px; padding: 0 12px 10px; } .waurg:empty { display: none; } .waurg__b { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: .75rem; width: 100%; padding: .72rem .75rem .72rem .7rem; border-radius: 16px; text-align: left; color: #fff; background: linear-gradient(125deg, var(--rojo-vivo), var(--rojo) 60%, var(--rojo-osc)); box-shadow: 0 10px 24px rgba(176, 30, 36, .3); animation: waurg-entra .55s var(--resorte) both; transition: transform .25s var(--resorte), box-shadow .25s var(--ease); } .waurg__b:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(176, 30, 36, .38); } @keyframes waurg-entra { from { opacity: 0; transform: translateY(-8px) scale(.96); } } /* El brillo que cruza: una vez cada pocos segundos, suave. Es lo que hace que la tarjeta se note de reojo sin parpadear. */ .waurg__b::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); transform: translateX(-100%); animation: wa-brillo 3.6s var(--ease-io) 1s infinite; } @keyframes wa-brillo { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } } .waurg__ico { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; background: rgba(255, 255, 255, .18); } .waurg__b--rojo .waurg__ico::before, .waurg__b--rojo .waurg__ico::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); animation: wa-anillo 2.2s var(--ease-suave) infinite; } .waurg__b--rojo .waurg__ico::after { animation-delay: 1.1s; } @keyframes wa-anillo { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } } .waurg__t { flex: 1; min-width: 0; font-size: .86rem; font-weight: 600; line-height: 1.25; } .waurg__t b { font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; margin-right: .1rem; vertical-align: -.08em; } .waurg__t small { display: block; margin-top: .15rem; font-size: .74rem; font-weight: 500; opacity: .85; } .waurg__ir { flex: none; display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .7rem; border-radius: 99px; background: #fff; color: var(--rojo); font-size: .78rem; font-weight: 800; transition: gap .25s var(--resorte); } .waurg__b:hover .waurg__ir { gap: .5rem; } .waurg__b--ambar { color: var(--nori); background: linear-gradient(125deg, var(--amarillo), var(--naranja-cl) 45%, var(--naranja)); box-shadow: 0 10px 24px rgba(240, 144, 30, .28); } .waurg__b--ambar:hover { box-shadow: 0 14px 30px rgba(240, 144, 30, .36); } .waurg__b--ambar .waurg__ico { background: rgba(22, 16, 13, .1); } .waurg__b--ambar .waurg__ir { background: var(--nori); color: var(--amarillo); } /* -------------------------------------------------------------------------- Los filtros: todos a la vista, en dos renglones si hace falta Iban en una fila que se deslizaba de lado, con el borde derecho difuminado. En la columna de la lista cabían cuatro y los otros tres —Atendidas, Con Kenji, Cerradas— quedaban fuera sin que nada dijera que existían: en el computador de la caja no hay barra de desplazamiento que lo delate. -------------------------------------------------------------------------- */ .wag__filtros { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 12px 11px; border-bottom: 1px solid var(--linea-sutil); } .wafil { flex: none; display: inline-flex; align-items: center; gap: .32rem; padding: .34rem .62rem; border-radius: 99px; font-size: .77rem; font-weight: 600; color: var(--tinta-3); background: var(--crema); transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--resorte); } .wafil:hover { color: var(--tinta); background: var(--crema-2); } .wafil:active { transform: scale(.96); } .wafil--on, .wafil--on:hover { background: var(--nori); color: var(--crema); } .wafil__n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 .3rem; border-radius: 99px; background: var(--verde-cl); color: #fff; font-size: .66rem; font-weight: 800; font-variant-numeric: tabular-nums; } .wafil--rojo .wafil__n { background: var(--rojo-vivo); } .wafil--ambar .wafil__n { background: var(--naranja); color: var(--nori); } /* -------------------------------------------------------------------------- La lista -------------------------------------------------------------------------- */ .wag__lista { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; transition: opacity .2s var(--ease); } .wag__lista--cargando { opacity: .5; } .wac { position: relative; display: flex; gap: .7rem; width: 100%; /* El borde existe siempre, transparente: el del proceso activo solo le da color, y la fila no salta dos píxeles al empezar o terminar uno. */ padding: calc(.68rem - 2px) calc(.7rem - 2px); border: 2px solid transparent; border-radius: 14px; text-align: left; color: var(--tinta); transition: background .2s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .wac + .wac { margin-top: 2px; } .wac:hover { background: var(--crema); } .wac--on, .wac--on:hover { background: var(--crema-2); } .wac--espera { background: linear-gradient(90deg, rgba(210, 38, 45, .1), rgba(210, 38, 45, .02) 75%); } .wac--espera:hover { background: linear-gradient(90deg, rgba(210, 38, 45, .15), rgba(210, 38, 45, .04) 75%); } .wac--espera::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--rojo-vivo); } /* EL PROCESO ACTIVO — del «hola» a que el pedido se entrega (`waProceso`). Una etapa, un borde. Color fuerte solo donde alguien tiene que moverse: pidiendo verde y entero; punteado cuando le toca al cliente y no contesta por confirmar naranja con halo: la única etapa en que la caja debe algo en cocina gris y entero, sin halo: solo esperar en camino gris punteado: lo mismo, ya en la calle La bandeja ya tiene rojo para «espera persona» y ámbar para «por cotizar»; si cada etapa fuera un color vivo, al final nada resaltaría. */ .wac--proceso { margin-block: 4px; } .wac--proceso-activo { border-color: var(--verde-cl); box-shadow: 0 0 0 3px var(--verde-sua); } .wac--proceso-quieto { border-color: rgba(21, 122, 71, .5); border-style: dashed; } .wac--proceso-por_confirmar { border-color: var(--naranja); box-shadow: 0 0 0 3px var(--ambar-sua); } .wac--proceso-en_cocina { border-color: rgba(33, 22, 16, .3); } .wac--proceso-en_camino { border-color: rgba(33, 22, 16, .38); border-style: dashed; } .chapa--proceso { background: var(--verde-sua); color: var(--verde); } .chapa--proceso-quieto { background: transparent; box-shadow: inset 0 0 0 1px rgba(21, 122, 71, .35); } .chapa--confirmar { background: var(--naranja); color: var(--nori); } .chapa--etapa { background: rgba(33, 22, 16, .07); color: var(--tinta-2); } .wac__l3 .chapa b { font-variant-numeric: tabular-nums; } .wac__vivo { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--verde-cl); box-shadow: 0 0 0 0 rgba(30, 158, 92, .5); animation: wac-vivo 1.8s var(--ease-suave) infinite; } @keyframes wac-vivo { 70% { box-shadow: 0 0 0 5px rgba(30, 158, 92, 0); } 100% { box-shadow: 0 0 0 0 rgba(30, 158, 92, 0); } } .wac--entra { animation: wac-entra .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms); } .wac--llega { animation: wac-llega .6s var(--resorte) both; } .wac--cambia { animation: wac-cambia 1.1s var(--ease) both; } @keyframes wac-entra { from { opacity: 0; transform: translateX(-8px); } } @keyframes wac-llega { from { opacity: 0; transform: scale(.94) translateY(-6px); } } @keyframes wac-cambia { from { background-color: rgba(247, 183, 51, .28); } } .wac__ini { position: relative; flex: 0 0 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; align-self: flex-start; color: #fff; font-weight: 700; font-size: .9rem; letter-spacing: .02em; background: linear-gradient(145deg, var(--rojo-vivo), var(--rojo-osc)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); } .wac__ini--norte { background: linear-gradient(145deg, var(--naranja-cl), #C96F0E); color: var(--nori); } .wac__pulso { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--rojo-vivo); animation: wa-anillo-c 1.9s var(--ease-suave) infinite; } @keyframes wa-anillo-c { from { transform: scale(1); opacity: .9; } to { transform: scale(1.32); opacity: 0; } } .wac__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; } .wac__l1, .wac__l2 { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; } .wac__l2 { align-items: center; } .wac__l3 { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .25rem; } .wac__quien { font-weight: 600; font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wac__hora { flex: none; font-size: .72rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; } .wac__previo { font-size: .82rem; color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wac__previo em { font-style: normal; font-weight: 600; color: var(--tinta-2); } .wac__previo .wag__ok, .wac__previo .wag__leido, .wac__previo .wag__fallo { margin-right: .25rem; } .wac__adj { width: 13px; height: 13px; vertical-align: -2px; opacity: .75; } .wac--nuevo .wac__quien { font-weight: 800; } .wac--nuevo .wac__previo { color: var(--tinta-2); } .wac--nuevo .wac__hora { color: var(--verde); font-weight: 700; } .wac__n { flex: none; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 .35rem; border-radius: 99px; background: var(--verde-cl); color: #fff; font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums; animation: tbl-aparece .3s var(--ease) both; } .wac__l3 .chapa { display: inline-flex; align-items: center; gap: .25rem; } .wac__l3 .chapa .ico { width: 1.1em; height: 1.1em; } .wac__alerta { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem .2rem .45rem; border-radius: 99px; background: var(--rojo-vivo); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .01em; } .wac__alerta .ico { width: 12px; height: 12px; } .wac__alerta b { font-variant-numeric: tabular-nums; } .wag__nada { display: grid; justify-items: center; gap: .5rem; padding: 3rem 1.2rem; text-align: center; color: var(--tinta-3); font-size: .86rem; } .wag__nada .ico { font-size: 2rem; opacity: .4; } /* -------------------------------------------------------------------------- El chat -------------------------------------------------------------------------- */ .wah { position: relative; z-index: 4; display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem .65rem .9rem; border-bottom: 1px solid var(--linea-sutil); background: var(--surface); } .wah__ini { flex-basis: 40px; height: 40px; align-self: center; } .wah__quien { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .wah__quien strong { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wah__dato { font-size: .76rem; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wah__volver { display: none; flex: none; width: 36px; height: 36px; border-radius: 50%; place-items: center; color: var(--tinta-2); } .wah__volver:hover { background: var(--crema-2); } .wah__estado { flex: none; display: inline-flex; align-items: center; gap: .42rem; padding: .3rem .7rem; border-radius: 99px; font-size: .74rem; font-weight: 700; white-space: nowrap; } .wah__estado i { position: relative; width: 7px; height: 7px; border-radius: 50%; } .wah__estado--kenji { background: var(--verde-sua); color: var(--verde); } .wah__estado--kenji i { background: var(--verde-cl); } .wah__estado--persona { background: var(--ambar-sua); color: #A8650E; } .wah__estado--persona i { background: var(--naranja); } .wah__estado--cerrada { background: var(--crema-2); color: var(--tinta-3); } .wah__estado--cerrada i { background: var(--arena); } .wah__estado--espera { background: var(--rojo-vivo); color: #fff; } .wah__estado--espera i { background: #fff; } .wah__estado--espera i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; animation: tbl-onda 1.8s var(--ease-suave) infinite; } .wah__acciones { flex: none; display: flex; align-items: center; gap: .4rem; } .wah__acciones .btn { padding: .45rem .75rem; font-size: .82rem; border-radius: 10px; } .wah__acciones .btn .ico { font-size: .95rem; } .wah__mas { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--tinta-2); font-size: 1.15rem; transition: background .2s var(--ease); } .wah__mas:hover, .wah__mas[aria-expanded="true"] { background: var(--crema-2); } /* «Pedido #…» — la vuelta del botón de WhatsApp de cada ficha de Pedidos. Una pastilla y no un botón más: se lee como un dato del chat que además lleva a algún sitio. El punto dice por dónde va, con los colores de las chapas. */ .wah__ped { --punto: var(--verde-cl); display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .55rem 0 .7rem; border-radius: 999px; border: 1px solid var(--linea); background: var(--surface); color: var(--tinta); font-size: .82rem; white-space: nowrap; transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); } .wah__ped > .ico:first-child { font-size: 1rem; color: var(--rojo); } .wah__ped > .ico:last-child { font-size: .8rem; color: var(--tinta-3); transition: transform .2s var(--ease); } .wah__ped b { font-weight: 700; font-variant-numeric: tabular-nums; } .wah__ped i { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--punto); } .wah__ped:hover { background: var(--crema); border-color: rgba(176, 30, 36, .35); } .wah__ped:hover > .ico:last-child { transform: translateX(2px); color: var(--rojo); } .wah__ped:active { transform: scale(.97); } .wah__ped:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; } .wah__ped--espera { --punto: var(--naranja); } .wah__ped--espera i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--naranja); animation: tbl-onda 1.8s var(--ease-suave) infinite; } .wah__ped--listo { --punto: var(--arena); color: var(--tinta-2); } .wah__ped--anulado { --punto: var(--rojo-vivo); color: var(--tinta-2); } @media (prefers-reduced-motion: reduce) { .wah__ped--espera i::after { animation: none; } } .wamenu { position: relative; } .wamenu__lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 240px; padding: .35rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--linea); box-shadow: 0 18px 50px rgba(22, 16, 13, .22); transform-origin: top right; animation: menu-entra .26s var(--resorte) both; } .wamenu__o { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .58rem .65rem; border-radius: 9px; text-align: left; font-size: .88rem; font-weight: 500; transition: background .15s var(--ease), transform .15s var(--ease); } .wamenu__o .ico { color: var(--tinta-3); } .wamenu__o:hover { background: var(--crema); transform: translateX(2px); } .wamenu__o--peligro, .wamenu__o--peligro .ico { color: var(--rojo); } /* -------------------------------------------------------------------------- LA ALERTA — «pidió hablar con una persona» -------------------------------------------------------------------------- */ .waal { position: relative; z-index: 3; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; } .waal--rojo { color: #fff; background: linear-gradient(120deg, var(--rojo-vivo), var(--rojo) 55%, var(--rojo-osc)); box-shadow: 0 8px 20px rgba(126, 20, 24, .22); animation: waal-entra .5s var(--resorte) both; } @keyframes waal-entra { from { opacity: 0; transform: translateY(-10px); } } .waal--rojo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%); transform: translateX(-100%); animation: wa-brillo 4.2s var(--ease-io) .8s infinite; } .waal__ico { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; background: rgba(255, 255, 255, .16); } .waal--rojo .waal__ico::before, .waal--rojo .waal__ico::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .75); animation: wa-anillo 2.2s var(--ease-suave) infinite; } .waal--rojo .waal__ico::after { animation-delay: 1.1s; } .waal__t { flex: 1; min-width: 0; line-height: 1.35; } .waal__t b { display: block; font-family: var(--display); font-size: 1.14rem; font-weight: 700; letter-spacing: -.012em; } .waal__t span { display: block; font-size: .86rem; opacity: .92; } .waal__d { flex: none; display: flex; align-items: center; gap: .6rem; } .waal__reloj { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .65rem; border-radius: 99px; background: rgba(0, 0, 0, .2); font-size: .8rem; font-variant-numeric: tabular-nums; } .waal__b { display: inline-flex; align-items: center; gap: .45rem; padding: .66rem 1.05rem; border-radius: 12px; background: #fff; color: var(--rojo); font-weight: 800; font-size: .9rem; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); transition: transform .25s var(--resorte), gap .25s var(--resorte); } .waal__b:hover { transform: translateY(-1px) scale(1.03); gap: .65rem; } .waal__b.btn--ocupado { pointer-events: none; opacity: .8; } /* El pedido en curso del chat: una línea, y el camino a su ficha. */ .waal--pedido { padding: .5rem 1rem; gap: .65rem; background: var(--crema-2); color: var(--tinta); border-bottom: 1px solid var(--linea); font-size: .86rem; animation: waal-entra .4s var(--ease) both; } /* Con «Ya pagó», «Enlace» y «Cambiar o cancelar» no caben en media pantalla: los botones bajan a otra línea antes de que el texto quede de una palabra. */ .waal--pedido { flex-wrap: wrap; } .waal--pedido .waal__t { flex-basis: 11rem; } .waal--pedido .waal__ico { width: 30px; height: 30px; font-size: .95rem; background: var(--surface); color: var(--rojo); } .waal--pedido .waal__t b { display: inline; font-family: var(--sans); font-size: .9rem; } .waal__b--suave { padding: .45rem .8rem; font-size: .82rem; background: var(--nori); color: var(--crema); box-shadow: none; } /* La ✕ de la sugerencia «Pasar a cocina»: quitarla sin abrir nada. */ .waal__x { flex: none; width: 30px; height: 30px; margin-right: -.4rem; border-radius: 50%; display: grid; place-items: center; color: var(--tinta-3); font-size: .95rem; transition: background .2s var(--ease), color .2s var(--ease); } .waal__x:hover, .waal__x:focus-visible { background: var(--surface); color: var(--tinta); } /* -------------------------------------------------------------------------- El hilo -------------------------------------------------------------------------- */ .wag__marco { position: relative; flex: 1; min-height: 9rem; display: flex; } /* El mínimo del hilo, con las franjas que se le peguen arriba (`#wa-alerta`) y abajo (`#wa-dom`): ellas no se encogen ni se recortan, y la bandeja crece para que quepa todo (`waAltoMinimo` en js/19-whatsapp.js). */ #wa-alerta, #wa-dom { flex: none; } .wag__burbujas { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .9rem clamp(.8rem, 4%, 2.4rem) 1.2rem; display: flex; flex-direction: column; /* El papel del chat: crema con un punteado de la marca, que es lo que el fondo de WhatsApp hace con sus dibujitos — separa el hilo de todo lo demás sin competir con las burbujas. */ background-color: #F5EADB; background-image: radial-gradient(rgba(126, 20, 24, .06) 1px, transparent 1.3px), radial-gradient(rgba(240, 144, 30, .08) 1px, transparent 1.3px); background-size: 24px 24px, 24px 24px; background-position: 0 0, 12px 12px; } #wa-dias { display: flex; flex-direction: column; gap: .3rem; } .wag__jornada { display: flex; flex-direction: column; gap: .3rem; } /* La etiqueta del día NO flota. Pegada arriba del hilo tapaba un renglón de la burbuja que pasaba por debajo —el 8 de octubre de 2026, el «Total» del resumen—. Se quitó primero en el celular y después en todas partes. */ .wag__dia { align-self: center; position: relative; z-index: 2; margin: .45rem 0 .3rem; pointer-events: none; } .wag__dia span { display: inline-block; padding: .26rem .8rem; border-radius: 9px; background: rgba(255, 253, 249, .94); color: var(--tinta-2); font-size: .72rem; font-weight: 600; box-shadow: 0 1px 2px rgba(33, 22, 16, .12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .wag__antes { align-self: center; display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .6rem; padding: .4rem .85rem; border-radius: 99px; background: rgba(255, 253, 249, .9); color: var(--tinta-2); font-size: .78rem; font-weight: 600; box-shadow: 0 1px 2px rgba(33, 22, 16, .12); } .wag__antes:hover { background: #fff; color: var(--tinta); } /* --- Las burbujas, afinadas para la bandeja -------------------------------- */ .wag__burbujas .wa__b { position: relative; max-width: min(74%, 520px); padding: .45rem .7rem .3rem; border: 0; border-radius: 12px; font-size: .92rem; line-height: 1.42; box-shadow: 0 1px 1.5px rgba(33, 22, 16, .13); animation: none; } .wag__burbujas .wa__b.entra { animation: wa-burbuja .42s var(--resorte) both; } .wag__burbujas .wa__b--mio.entra { transform-origin: bottom right; } .wag__burbujas .wa__b--ellos.entra { transform-origin: bottom left; } @keyframes wa-burbuja { from { opacity: 0; transform: translateY(8px) scale(.94); } } .wag__burbujas .wa__b--ellos { background: var(--surface); border-top-left-radius: 3px; } .wag__burbujas .wa__b--mio { background: #D9FDD3; color: #112B0D; border-top-right-radius: 3px; } /* Lo que dijo Kenji, un verde apenas más pálido que lo de una persona: se distingue de un vistazo quién dijo qué sin tener que leer la firma. */ .wag__burbujas .wa__b--kenji { background: #E9F6E2; } /* La colita, como WhatsApp: solo en la primera de cada tanda. */ .wag__burbujas .wa__b--ellos::before, .wag__burbujas .wa__b--mio::before { content: ""; position: absolute; top: 0; width: 10px; height: 12px; background: inherit; } .wag__burbujas .wa__b--ellos::before { left: -7px; clip-path: polygon(100% 0, 0 0, 100% 100%); } .wag__burbujas .wa__b--mio::before { right: -7px; clip-path: polygon(0 0, 100% 0, 0 100%); } .wag__burbujas .wa__b--ellos + .wa__b--ellos, .wag__burbujas .wa__b--mio + .wa__b--mio { border-radius: 12px; margin-top: -.12rem; } .wag__burbujas .wa__b--ellos + .wa__b--ellos::before, .wag__burbujas .wa__b--mio + .wa__b--mio::before { display: none; } .wag__burbujas .wa__b--ellos:not(.wa__b--ellos + .wa__b--ellos), .wag__burbujas .wa__b--mio:not(.wa__b--mio + .wa__b--mio) { margin-top: .35rem; } .wag__burbujas .wa__b a { color: #0B6BA8; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; } .wag__burbujas [data-tmp] { opacity: .88; } .wag__burbujas .wa__b--fallo { box-shadow: 0 0 0 1.5px rgba(210, 38, 45, .55); } .wag__pie { display: flex; justify-content: flex-end; align-items: center; gap: .1rem; margin: .1rem -.2rem 0 1.5rem; float: right; font-size: .68rem; color: var(--tinta-3); white-space: nowrap; font-variant-numeric: tabular-nums; position: relative; top: .3rem; } .wag__burbujas .wa__b::after { content: ""; display: block; clear: both; } .wag__firma-k { width: .95em; height: .95em; margin-right: .18rem; color: var(--naranja); } .wag__ok { color: var(--tinta-3); letter-spacing: -.18em; margin-left: .2rem; } .wag__leido { color: #34A6E0; letter-spacing: -.18em; margin-left: .2rem; } .wag__fallo { color: var(--rojo-vivo); margin-left: .2rem; } .wag__vuela { display: inline-flex; margin-left: .3rem; } .wag__vuela .ico { width: .95em; height: .95em; animation: aro-gira 2.4s linear infinite; } .wag__nosalio { display: flex; align-items: center; gap: .5rem; clear: both; margin-top: .45rem; padding-top: .35rem; border-top: 1px dashed rgba(210, 38, 45, .35); font-size: .75rem; font-weight: 600; color: var(--rojo); } .wag__nosalio button { font-weight: 800; text-decoration: underline; text-underline-offset: 2px; color: var(--rojo); } /* El relevo: una pastilla centrada, no una burbuja. */ .wag__burbujas .wa__relevo { margin: .5rem 0; } /* La raya «Aquí empezó el proceso», delante del mensaje que lo abrió. */ .wag__inicio { align-self: center; margin: .55rem 0 .2rem; } .wag__inicio span { display: inline-flex; align-items: center; gap: .4rem; padding: .26rem .8rem; border-radius: 99px; background: var(--verde-sua); color: var(--verde); font-size: .72rem; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(21, 122, 71, .25); } .wag__burbujas .wa__relevo span { padding: .3rem .85rem; border-radius: 99px; background: rgba(255, 253, 249, .88); box-shadow: 0 1px 2px rgba(33, 22, 16, .1); color: var(--tinta-2); } /* --- Los días vacíos y la espera ------------------------------------------ */ .wag__sin, .wag__fallo-carga { margin: auto; display: grid; justify-items: center; gap: .5rem; padding: 2rem; text-align: center; color: var(--tinta-3); font-size: .88rem; } .wag__sin .ico { font-size: 2rem; opacity: .4; } .wag__cargando, .wapick__cargando { display: flex; gap: .35rem; justify-content: center; padding: 2.5rem; } .wag__cargando i, .wapick__cargando i { width: 8px; height: 8px; border-radius: 50%; background: var(--arena); animation: puntea 1.1s ease-in-out infinite; } .wag__cargando i:nth-child(2), .wapick__cargando i:nth-child(2) { animation-delay: .16s; } .wag__cargando i:nth-child(3), .wapick__cargando i:nth-child(3) { animation-delay: .32s; } /* --- Bajar al último ------------------------------------------------------ */ .wag__bajar { position: absolute; right: 18px; bottom: 16px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--tinta-2); font-size: 1.1rem; box-shadow: 0 4px 16px rgba(33, 22, 16, .22); animation: wa-bajar .3s var(--resorte) both; transition: transform .2s var(--resorte); } .wag__bajar:hover { transform: translateY(-2px); } @keyframes wa-bajar { from { opacity: 0; transform: translateY(10px) scale(.8); } } .wag__bajar span { position: absolute; top: -6px; right: -5px; min-width: 20px; height: 20px; padding: 0 .3rem; display: grid; place-items: center; border-radius: 99px; background: var(--verde-cl); color: #fff; font-size: .68rem; font-weight: 800; } .wag__bajar span:empty { display: none; } .wag__bajar--n { animation: wa-bajar .3s var(--resorte) both, late .5s var(--resorte) .3s 2; } /* -------------------------------------------------------------------------- Los adjuntos -------------------------------------------------------------------------- */ .wag__img { display: block; max-width: 100%; max-height: 280px; border-radius: 9px; margin: .1rem -.35rem .15rem; } .wag__audio { display: block; width: 100%; max-width: 260px; margin: .1rem 0; } /* El sticker: sin burbuja detrás y sin esquinas redondeadas. Un sticker es un recorte con fondo transparente, y una caja de color alrededor le dibuja justamente el borde que no tiene. El alto va acá y no se deja al archivo porque son 512 px de lado. */ .wag__burbujas .wa__b--sticker { background: none; box-shadow: none; padding: 0; } .wag__burbujas .wa__b--sticker::before { display: none; } .wa__b--sticker .wag__pie { float: none; justify-content: center; margin: .1rem 0 0; top: 0; width: fit-content; padding: .12rem .5rem; border-radius: 99px; background: rgba(255, 253, 249, .88); } .wa__b--mio.wa__b--sticker .wag__pie { margin-left: auto; } .wag__sticker { display: block; width: 140px; height: 140px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(33, 22, 16, .12)); } .wa__b--sticker.entra .wag__sticker { animation: wa-sticker .6s var(--resorte) both; } @keyframes wa-sticker { from { transform: scale(.5) rotate(-8deg); opacity: 0; } } .wag__guardar { display: inline-flex; align-items: center; gap: .3rem; margin: .2rem 0; padding: .26rem .6rem; border-radius: 99px; background: var(--surface); color: var(--tinta-2); font-size: .72rem; font-weight: 700; box-shadow: 0 1px 3px rgba(33, 22, 16, .16); opacity: 0; transition: opacity .2s var(--ease); } .wa__b:hover .wag__guardar, .wag__guardar:focus-visible, .wag__guardar--ya { opacity: 1; } .wag__guardar--ya { color: var(--verde); pointer-events: none; } .wag__guardar .ico { color: var(--naranja); } @media (hover: none) { .wag__guardar { opacity: 1; } } /* --- Las reacciones --------------------------------------------------------- El emoji pegado al borde de abajo, como en WhatsApp: a la izquierda en lo del cliente, a la derecha en lo nuestro. La burbuja que lo lleva se separa de la siguiente para que no lo tape. */ .wag__burbujas .wa__b--reac { margin-bottom: .95rem; } .wag__reac { position: absolute; bottom: -.95rem; z-index: 1; display: inline-flex; align-items: center; gap: .05rem; padding: .06rem .34rem; border-radius: 99px; background: var(--surface); box-shadow: 0 1px 3px rgba(33, 22, 16, .2); font-size: .9rem; line-height: 1.35; white-space: nowrap; cursor: default; } .wag__reac b { font-size: .68rem; font-weight: 700; color: var(--tinta-3); margin-left: .15rem; } .wa__b--ellos .wag__reac { left: .55rem; } .wa__b--mio .wag__reac { right: .55rem; } .wa__b--reac.entra .wag__reac { animation: wa-reac .38s var(--resorte) both; } @keyframes wa-reac { from { transform: scale(.3); opacity: 0; } } /* La carita para reaccionar: al lado de la burbuja, fuera de ella, y solo al pasar por encima. Se va con un poco de retraso para que dé tiempo a llegar a ella cruzando el hueco. En pantallas táctiles no hay «pasar por encima»: ahí está siempre, apagada. */ .wag__reaccionar { position: absolute; top: 50%; translate: 0 -50%; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 253, 249, .92); color: var(--tinta-3); box-shadow: 0 1px 3px rgba(33, 22, 16, .16); opacity: 0; transition: opacity .18s var(--ease) .3s, color .15s; } .wag__reaccionar .ico { width: 16px; height: 16px; } .wa__b--ellos > .wag__reaccionar { right: -36px; } .wa__b--mio > .wag__reaccionar { left: -36px; } .wa__b:hover > .wag__reaccionar, .wag__reaccionar:focus-visible, .wa__b:has(> .wareac) > .wag__reaccionar { opacity: 1; transition-delay: 0s; } .wag__reaccionar:hover { color: var(--naranja); } @media (hover: none) { .wag__reaccionar { opacity: .6; } } .wareac { position: absolute; bottom: calc(100% + 6px); z-index: 4; display: flex; align-items: center; gap: .1rem; padding: .25rem .35rem; border-radius: 99px; background: var(--surface); box-shadow: 0 6px 22px rgba(33, 22, 16, .22), 0 1px 3px rgba(33, 22, 16, .12); animation: wa-reacbar .22s var(--resorte) both; } .wa__b--ellos > .wareac { left: 0; transform-origin: bottom left; } .wa__b--mio > .wareac { right: 0; transform-origin: bottom right; } .wareac--abajo { bottom: auto; top: calc(100% + 6px); } @keyframes wa-reacbar { from { opacity: 0; transform: scale(.7) translateY(6px); } } .wareac button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; line-height: 1; transition: transform .15s var(--resorte), background .15s; } .wareac button:hover, .wareac button:focus-visible { transform: scale(1.22); background: var(--crema); } .wareac .wareac--ya { background: rgba(37, 211, 102, .18); } .wareac .wareac__mas { font-size: 1rem; color: var(--tinta-3); background: rgba(33, 22, 16, .06); } .wareac .wareac__mas .ico { width: 18px; height: 18px; } /* «Otro emoji»: la rejilla entera, con su propio scroll. */ .wareac--mas { display: grid; grid-template-columns: repeat(8, 34px); gap: .1rem; max-height: 210px; overflow-y: auto; border-radius: 14px; padding: .35rem; } .wareac--mas button { width: 34px; height: 34px; font-size: 1.25rem; } .wareac--mas button:hover { transform: none; } /* La nota de voz trae debajo lo que dijo, marcado como transcripción. */ .wag__transcrito { display: block; margin-top: .4rem; padding-top: .35rem; border-top: 1px dashed var(--linea); font-size: .86rem; font-style: italic; color: var(--tinta-2); } /* Y la que no se entendió: lo que oyó Whisper, más apagado, para que nadie lo lea como algo que el cliente dijo. */ .wag__transcrito--no { color: var(--tinta-3); } /* La ubicación: un recorte de mapa de verdad, reservado antes de cargar. */ .wag__ubic { display: block; text-decoration: none; color: inherit; } .wag__mapa { display: block; width: 100%; max-width: 300px; border-radius: 9px; margin-top: .1rem; background: var(--crema-2); aspect-ratio: 44 / 26; } .wag__ubic-t { display: inline-flex; align-items: center; gap: .3rem; margin-top: .3rem; font-size: .8rem; color: var(--tinta-2); } .wag__ubic-t .ico { width: 13px; height: 13px; } .wag__ubic:hover .wag__ubic-t { color: var(--rojo); text-decoration: underline; } /* El botón «Enviar ubicación» que vio el cliente debajo del texto: se pinta como lo pinta WhatsApp, para que quien lee el hilo vea lo mismo que él. No hace nada al pulsarlo: es del cliente. */ .wag__boton { display: flex; align-items: center; justify-content: center; gap: .35rem; clear: both; margin: .45rem -.7rem -.3rem; padding: .5rem 0 .45rem; border-top: 1px solid rgba(33, 22, 16, .1); font-size: .86rem; font-weight: 600; color: #0B8A5B; } .wag__boton .ico { width: 13px; height: 13px; } /* Los botones del flujo compacto: tres debajo del resumen, uno con el enlace a la página del pedido. En el probador se tocan; en la bandeja son del cliente y solo se ven. */ .wag__botones { display: flex; flex-direction: column; clear: both; margin: .45rem -.7rem -.3rem; } .wag__botones .wag__boton { margin: 0; border-radius: 0; background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; } a.wag__boton { text-decoration: none; } .wag__boton--toca { cursor: pointer; } .wag__boton--toca:hover { background: rgba(11, 138, 91, .07); } /* «Aceptar pedido», pegado al resumen vigente: este SÍ se pulsa, y es de la caja, no del cliente. Lleno y verde para que no se confunda con el botón pintado de arriba. Ver `waMarcarResumen`. */ .wag__aceptar { display: flex; align-items: center; justify-content: center; gap: .4rem; clear: both; width: calc(100% + 1.4rem); margin: .55rem -.7rem -.3rem; padding: .55rem .7rem; border: 0; border-radius: 0 0 10px 10px; cursor: pointer; background: #0B8A5B; color: #fff; font: inherit; font-size: .88rem; font-weight: 700; } .wag__aceptar:hover { background: #097a50; } .wag__aceptar:disabled { opacity: .6; cursor: progress; } /* La ventana de «Aceptar pedido»: lo que va, a quién y el total. */ .waacep__l { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; } .waacep__l li { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: baseline; padding: .5rem .65rem; border-radius: 11px; background: var(--crema); font-size: .92rem; } .waacep__l small { display: block; color: var(--tinta-3); font-size: .78rem; } .waacep__l i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--tinta-2); } .waacep__d { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: .8rem 0 0; font-size: .86rem; } .waacep__d dt { color: var(--tinta-3); } .waacep__d dd { margin: 0; overflow-wrap: anywhere; } .wag__aceptar .ico { width: 14px; height: 14px; } /* La nota de voz. */ .wav { display: flex; align-items: center; gap: .55rem; min-width: 220px; padding: .15rem 0; } .wav__b { flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--verde); color: #fff; transition: background .2s var(--ease), transform .2s var(--resorte); } .wav__b:hover { background: var(--verde-cl); transform: scale(1.06); } .wav__b .ico { width: 15px; height: 15px; } .wav__ondas { flex: 1; display: flex; align-items: center; gap: 2px; height: 30px; min-width: 0; } .wav__ondas i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--arena); transition: background .2s var(--ease); } .wav__ondas i.wav--ya { background: var(--verde); } .wav__t { flex: 0 0 auto; font-size: .72rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; } .wag__doc { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; border-radius: 9px; background: rgba(33, 22, 16, .05); color: var(--tinta); text-decoration: none; font-size: .86rem; } .wag__doc:hover { background: rgba(33, 22, 16, .09); } .wag__doc .ico { width: 15px; height: 15px; } /* El visor de fotos y PDF, encima del chat (`waVisor`). La foto se ajusta a la pantalla sin recortarse; el PDF ocupa casi todo, que es para leerlo. */ .velo--visor { padding: clamp(.5rem, 2vw, 1.25rem); background: rgba(22,16,13,.82); } .visor { display: flex; flex-direction: column; gap: .5rem; max-width: 100%; max-height: calc(var(--visible, 100vh) - 1rem); animation: modal-entra .3s var(--resorte) both; } .visor--pdf { width: min(960px, 100%); height: calc(var(--visible, 100vh) - 2rem); } .visor__barra { display: flex; align-items: center; gap: .4rem; color: #fff; min-width: 0; } .visor__t { flex: 1; min-width: 0; display: flex; align-items: center; gap: .4rem; font-size: .9rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .visor__t > span { overflow: hidden; text-overflow: ellipsis; } .visor__t .ico { flex: 0 0 auto; width: 16px; height: 16px; } .visor__b { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .7rem; border: 0; border-radius: 9px; background: rgba(255,255,255,.14); color: #fff; font: inherit; font-size: .84rem; text-decoration: none; cursor: pointer; } .visor__b:hover { background: rgba(255,255,255,.26); } .visor__b .ico { width: 15px; height: 15px; } @media (max-width: 560px) { .visor__b span { display: none; } } .visor__lienzo { min-height: 0; border-radius: 10px; cursor: zoom-in; } .visor__img { display: block; max-width: 100%; max-height: calc(var(--visible, 100vh) - 5rem); margin: 0 auto; object-fit: contain; border-radius: 10px; background: #fff; user-select: none; } /* Acercada: el lienzo toma la pantalla y se desplaza; la foto pierde sus topes. */ .visor__lienzo--zoom { width: calc(100vw - 2.5rem); height: calc(var(--visible, 100vh) - 5rem); overflow: auto; cursor: zoom-out; background: #fff; overscroll-behavior: contain; } .visor__lienzo--zoom .visor__img { max-width: none; max-height: none; border-radius: 0; } .visor__marco { flex: 1; width: 100%; border: 0; border-radius: 10px; background: #fff; } .wag__roto { color: var(--tinta-3); font-style: italic; font-size: .84rem; } .wag__roto .ico { width: 13px; height: 13px; vertical-align: -2px; } /* -------------------------------------------------------------------------- El pie: escribir -------------------------------------------------------------------------- */ .wag__escribir { position: relative; z-index: 4; padding: .6rem .7rem .5rem; background: var(--surface); border-top: 1px solid var(--linea-sutil); } .wacomp { display: flex; align-items: flex-end; gap: .55rem; } .wacomp__caja { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: .1rem; padding: .22rem .3rem; border-radius: 24px; background: var(--crema); border: 1.5px solid transparent; transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); } .wacomp__caja:focus-within { background: #fff; border-color: rgba(240, 144, 30, .45); box-shadow: 0 0 0 3px rgba(240, 144, 30, .1); } .wacomp textarea { flex: 1; min-width: 0; resize: none; border: 0; background: transparent; outline: none; padding: .52rem .25rem; font-size: .95rem; line-height: 1.4; max-height: 150px; color: var(--tinta); } .wacomp__b { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--tinta-3); font-size: 1.28rem; transition: color .2s var(--ease), background .2s var(--ease), transform .25s var(--resorte); } .wacomp__b:hover { color: var(--tinta); background: var(--crema-2); } /* El clip de adjuntar es un