/* Vista previa de WhatsApp (.wav), pieza que no sale (.wa-falta) y cotizador por WhatsApp (.dgf-wa).
   Usa los tokens y botones de site.css. La vista previa se inspira en un chat, sin copiar la interfaz de WhatsApp: encabezado en azul de marca. */

/* ---------- Vista previa con forma de chat ---------- */
.wav{margin:0;width:100%;max-width:420px;border-radius:22px;overflow:hidden;background:var(--blanco);box-shadow:0 0 0 1px rgba(3,31,60,.09),0 22px 44px -28px rgba(3,31,60,.5)}
.wav-cab{display:flex;align-items:center;gap:11px;padding:11px 16px 11px 12px;color:var(--blanco);background:linear-gradient(115deg,var(--abismo) 0%,var(--noche) 55%,var(--azul-tinta) 100%)}
.wav-av{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--wa);color:var(--blanco);box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.wav-av .ico{width:22px;height:22px}
.wav-nom{display:grid;gap:1px;line-height:1.15;min-width:0}
.wav-nom b{font-family:var(--titulo);font-size:15.5px;font-weight:700;letter-spacing:-.005em}
.wav-nom small{font-size:12.5px;color:#E6F5FC}
.wav-chat{padding:16px 14px 20px;background-color:#EAF6FB;background-image:radial-gradient(rgba(5,101,176,.1) 1.1px,transparent 1.2px);background-size:16px 16px;max-height:min(46vh,320px);overflow:auto;overscroll-behavior:contain}
.wav-globo{position:relative;margin:0 6px 0 auto;width:fit-content;max-width:100%;padding:9px 13px 10px;border-radius:16px 16px 4px 16px;background:#DDF7CF;color:#14301D;font-size:15.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 1px 1px rgba(3,31,60,.14),0 8px 18px -12px rgba(3,31,60,.35)}
.wav-globo::after{content:"";position:absolute;right:-6px;bottom:0;width:12px;height:14px;background:#DDF7CF;clip-path:polygon(0 0,0 100%,100% 100%);border-bottom-right-radius:3px}
.wav-globo.pop{animation:wav-pop .38s var(--resorte)}
@keyframes wav-pop{from{transform:translateY(5px) scale(.97);opacity:.55}to{transform:none;opacity:1}}

/* ---------- Pieza que no sale ---------- */
.wa-falta{display:grid;gap:14px;padding:4px 0 2px;text-align:left;container:wafalta/inline-size}
.wa-falta-t{margin:0;font-size:16px;font-weight:600;line-height:1.5;color:var(--negro);max-width:60ch}
.wa-falta-cuerpo{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:end}
.wa-falta-acc{display:grid;gap:10px;justify-items:start;align-content:end}
/* El bloque se acomoda al ancho de SU caja (tarjeta del buscador, lista de marca, landing), no al de la pantalla */
@container wafalta (min-width:600px){.wa-falta-cuerpo{grid-template-columns:minmax(0,420px) auto;gap:18px 22px}}
@container wafalta (max-width:520px){.wa-falta-acc{justify-items:stretch}.wa-falta a.btn{justify-content:space-between}.wa-falta-nota{max-width:none}}
.wa-falta-nota{margin:0;font-size:13.5px;line-height:1.4;color:var(--gris);max-width:28ch}
.wa-falta a.btn{color:var(--blanco);text-decoration:none}
.wa-falta .wav-chat{max-height:200px}
.wa-falta{animation:wa-entra .5s var(--resorte)}
@keyframes wa-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Dentro del aviso amarillo de las listas por marca: se vuelve tarjeta blanca */
.cat-vacio:has(.wa-falta){background:var(--blanco);color:var(--negro);font-weight:400;box-shadow:inset 0 0 0 1px var(--linea);padding:20px 22px}
.cat-vacio .wa-falta-t{color:var(--negro)}
/* En la página del catálogo sin fichas */
.cat-vacio-pag .wa-falta{margin-top:18px}
.cat-vacio-pag .wa-falta-t{color:var(--negro)}
.res-vacio .wa-falta{margin-top:6px}

/* ---------- Cotizador por WhatsApp (/cotizar/) ---------- */
.dgf-wa .dgf-aviso{display:flex;gap:12px;align-items:flex-start;margin:0 0 20px;padding:13px 16px;border-radius:16px;background:var(--niebla);box-shadow:inset 0 0 0 1px var(--linea);font-size:15px;line-height:1.45;color:var(--negro)}
.dgf-wa .dgf-aviso i{flex:none;width:30px;height:30px;border-radius:10px;background:var(--blanco);color:var(--azul-tinta);display:grid;place-items:center;box-shadow:0 0 0 1px var(--linea)}
.dgf-wa .dgf-aviso i .ico{width:18px;height:18px}
.dgf-wa .dgf-aviso b{font-family:var(--titulo)}
.dgf-wa-vista{margin:6px 0 22px;padding-top:22px;border-top:1px solid var(--linea);display:grid;gap:12px}
.dgf-wa-vista h3{margin:0;font-size:17px;font-weight:700}
.dgf-wa-vista .wav{max-width:480px}
.dgf-wa-vista .wav-chat{max-height:min(44vh,340px)}
.dgf-wa-corte{margin:0;padding:11px 14px;border-radius:14px;background:var(--aviso);color:var(--aviso-tinta);font-size:14.5px;line-height:1.4}
.dgf-wa-corte[hidden]{display:none}
.dgf-wa-pie{display:grid;gap:12px;justify-items:start}
.dgf-wa .btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;filter:saturate(.55);box-shadow:none}
.dgf-wa .btn[aria-disabled="true"]::after,.dgf-wa .btn[aria-disabled="true"] .btn-ico::before{animation:none;opacity:0}
.dgf-wa .btn[aria-disabled="true"]:hover{transform:none}
.dgf-wa-estado{margin:0;font-size:14.5px;line-height:1.4;color:var(--gris);min-height:1.4em}
.dgf-wa-estado.mal{color:var(--rojo);font-weight:700}
.dgf-wa-estado.ok{color:var(--verde);font-weight:700}

@media (max-width:560px){
  .dgf-wa .btn{width:100%}
  .dgf-wa-pie{justify-items:stretch}
  .wav-globo{font-size:15px;margin-right:4px}
}
@media (prefers-reduced-motion:reduce){
  .wav-globo.pop,.wa-falta{animation:none}
}