/* Chat Mall del Parrillero · sistema de diseño MDP (carbón + caramelo) · 06-11-2026 */
a[aria-label="Chatea con nosotros por WhatsApp"]{display:none !important;}

#wa-float{
  --c-carbon:#111111; --c-carbon-2:#1B1A18; --c-carbon-line:#2E2B28;
  --c-caramelo:#D9A066; --c-caramelo-700:#8A5A2B; --c-crema:#F4F1EC;
  --c-tinta-suave:#6B6560; --c-linea:#E1E1E1; --c-gris:#C9C2B8;
  position:fixed; right:20px; bottom:80px; z-index:2147483000;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--c-carbon);
}
#wa-float *{box-sizing:border-box;}

#wa-btn{
  width:60px; height:60px; border:0; border-radius:50%; cursor:pointer;
  background:var(--c-carbon); color:var(--c-caramelo);
  box-shadow:0 10px 24px rgba(17,17,17,.35), 0 2px 6px rgba(0,0,0,.2);
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s ease; position:relative; margin-left:auto;
}
#wa-btn:hover{transform:scale(1.05);}
#wa-btn:active{transform:scale(.97);}
#wa-btn:focus-visible{outline:3px solid var(--c-caramelo); outline-offset:3px;}
#wa-btn .wa-btn-ico{width:28px; height:28px; stroke:currentColor;}
#wa-btn .wa-btn-x,#wa-btn .wa-ping{display:none;}
#wa-float.wa-open #wa-btn{display:none !important;}

#wa-panel{
  position:absolute; right:0; bottom:76px; width:390px; max-width:calc(100vw - 32px);
  height:640px; max-height:calc(100vh - 170px);
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.28), 0 4px 14px rgba(0,0,0,.14);
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
#wa-float.wa-open #wa-panel{opacity:1; transform:none; pointer-events:auto;}

#wa-head{
  background:#fff; color:var(--c-carbon); padding:12px 14px 12px 16px;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 8px; flex:0 0 auto; border:0; border-bottom:1px solid var(--c-linea);
}
#wa-head .wa-avatar,#wa-head [data-wa-status]{display:none !important;}
.wa-head-brand{flex:1; min-width:0; display:flex; align-items:center;}
.wa-logo{display:block; height:24px; width:auto; max-width:190px; object-fit:contain;}
.wa-head-actions{display:flex; align-items:center; gap:8px;}
.wa-head-actions a,.wa-head-actions button{
  width:40px; height:40px; border:1px solid var(--c-linea); background:#fff; color:var(--c-carbon);
  border-radius:30px; display:flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer;
  position:relative; padding:0; transition:border-color .15s ease;
}
.wa-head-actions a:hover,.wa-head-actions button:hover{border-color:var(--c-carbon);}
.wa-head-actions a:focus-visible,.wa-head-actions button:focus-visible{outline:2px solid var(--c-caramelo-700); outline-offset:2px;}
#wa-close{font-size:0;}
.wa-cart-badge{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px;
  border-radius:9px; background:var(--c-carbon); color:var(--c-caramelo); font-size:10.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.wa-track{
  display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer;
  background:var(--c-caramelo); color:var(--c-carbon); border-radius:30px; padding:8px 14px; min-height:36px;
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-family:inherit;
  order:3;
}
.wa-track:hover{filter:brightness(1.05);}
.wa-track:focus-visible{outline:2px solid var(--c-carbon); outline-offset:2px;}
#wa-head > .wa-head-brand{order:1; flex:1 1 calc(100% - 110px);} #wa-head > .wa-head-actions{order:2;}

#wa-msgs{
  flex:1 1 auto; min-height:0; overflow-y:auto; padding:20px 16px 8px; background:#fff;
  display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
}
#wa-msgs::-webkit-scrollbar{width:6px;}
#wa-msgs::-webkit-scrollbar-thumb{background:var(--c-linea); border-radius:6px;}
.wa-bubble{
  max-width:86%; padding:12px 14px; font-size:15px; line-height:1.45;
  word-wrap:break-word; white-space:normal; animation:wa-in .2s ease;
}
@keyframes wa-in{from{opacity:0; transform:translateY(5px);}to{opacity:1; transform:none;}}
.wa-bot{align-self:flex-start; background:var(--c-crema); color:var(--c-carbon); border-radius:16px 16px 16px 4px;}
.wa-user{align-self:flex-end; background:var(--c-carbon); color:var(--c-crema); border-radius:16px 16px 4px 16px;}
.wa-bubble a{color:var(--c-caramelo-700); text-decoration:underline; font-weight:600; word-break:break-word;}
.wa-user a{color:var(--c-caramelo);}
.wa-bubble strong{font-weight:800;}
.wa-from{display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--c-tinta-suave); margin-bottom:4px;}
.wa-typing{align-self:flex-start; background:var(--c-crema); border-radius:16px 16px 16px 4px; padding:14px 16px; display:inline-flex; gap:4px;}
.wa-typing span{width:7px; height:7px; border-radius:50%; background:var(--c-gris); animation:wa-bounce 1.2s infinite;}
.wa-typing span:nth-child(2){animation-delay:.18s;} .wa-typing span:nth-child(3){animation-delay:.36s;}
@keyframes wa-bounce{0%,60%,100%{transform:translateY(0); opacity:.5;}30%{transform:translateY(-4px); opacity:1;}}

.wa-prods{display:flex; flex-direction:column; gap:8px; align-self:stretch; animation:wa-in .2s ease;}
.wa-prod{display:flex; flex-direction:column; gap:8px; background:#fff; border:1px solid var(--c-linea); border-radius:12px; padding:10px; color:var(--c-carbon);}
.wa-prod:hover{border-color:var(--c-carbon);}
.wa-prod-link{display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit;}
.wa-prod-img{width:60px; height:60px; flex:0 0 auto; border-radius:8px; background:var(--c-crema) center/cover no-repeat;}
.wa-prod-info{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;}
.wa-prod-tit{font-size:14px; font-weight:700; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.wa-prod-precio{font-size:14px; font-weight:800;}
.wa-prod-ver{font-size:12px; font-weight:600; color:var(--c-tinta-suave);}
.wa-prod-add{
  display:block; width:100%; border:0; cursor:pointer; min-height:40px; padding:8px 10px;
  background:var(--c-carbon); color:var(--c-caramelo); font-family:inherit;
  font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.wa-prod-add:disabled{opacity:.7; cursor:default;}

#wa-quick{display:flex; flex-wrap:wrap; gap:8px; padding:4px 16px 12px; background:#fff; flex:0 0 auto; max-height:40%; overflow-y:auto;}
.wa-topics{display:flex; flex-direction:column; align-items:flex-start; gap:8px; animation:wa-in .2s ease;}
#wa-quick:empty{display:none;}
.wa-quick-label{flex-basis:100%; width:100%; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--c-tinta-suave); margin:4px 0 0;}
.wa-topic{
  display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 16px;
  border:1.5px solid var(--c-carbon); border-radius:30px; background:#fff; color:var(--c-carbon);
  font-family:inherit; font-size:15px; font-weight:600; cursor:pointer; text-align:left; max-width:100%;
  transition:background .15s ease, color .15s ease;
}
.wa-topic .wa-topic-arr{font-size:18px; line-height:1; color:var(--c-caramelo-700);}
.wa-topic:hover{background:var(--c-carbon); color:#fff;}
.wa-topic:hover .wa-topic-arr{color:var(--c-caramelo);}
.wa-topic.wa-topic-soft{border-color:var(--c-gris); color:var(--c-tinta-suave);}
.wa-topic.wa-topic-soft:hover{background:var(--c-crema); color:var(--c-carbon);}
.wa-topic:focus-visible,.wa-chip:focus-visible{outline:2px solid var(--c-caramelo-700); outline-offset:2px;}
.wa-chip{
  border:1.5px solid var(--c-carbon); background:#fff; color:var(--c-carbon);
  padding:8px 14px; min-height:40px; border-radius:30px; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
  line-height:1.2; max-width:100%; white-space:normal; text-align:left; transition:background .15s ease, color .15s ease;
}
.wa-chip:hover{background:var(--c-carbon); color:#fff;}
.wa-chip.wa-chip-dark{background:var(--c-carbon); color:var(--c-caramelo);}
.wa-chip.wa-chip-dark:hover{background:#000;}
.wa-chip.wa-chip-ghost{border-color:var(--c-linea); color:var(--c-tinta-suave);}
.wa-chip.wa-chip-ghost:hover{background:var(--c-crema); color:var(--c-carbon);}

.wa-ticket{align-self:stretch; display:flex; flex-direction:column; gap:10px; border:1px solid var(--c-linea); border-radius:12px; padding:14px; background:#fff; animation:wa-in .2s ease;}
.wa-ticket label{display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--c-tinta-suave);}
.wa-ticket label span{font-weight:600; text-transform:none; letter-spacing:0;}
.wa-ticket input,.wa-ticket textarea{
  width:100%; border:1px solid var(--c-linea); border-radius:8px; padding:11px 12px; font-size:16px;
  font-family:inherit; color:var(--c-carbon); background:#fff; text-transform:none; letter-spacing:0; font-weight:400;
}
.wa-ticket input:focus,.wa-ticket textarea:focus{outline:2px solid var(--c-carbon); outline-offset:0; border-color:transparent;}
.wa-ticket textarea{resize:vertical; min-height:80px;}
.wa-ticket button{
  min-height:48px; border:0; background:var(--c-caramelo); color:var(--c-carbon); cursor:pointer; font-family:inherit;
  font-size:14px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
}
.wa-ticket button:disabled{opacity:.6; cursor:default;}
.wa-ticket-err{font-size:13px; color:#991B1B; min-height:0;}
.wa-ticket-err:empty{display:none;}

#wa-form{display:flex; align-items:center; gap:8px; padding:10px 16px 8px; border-top:1px solid var(--c-linea); background:#fff; flex:0 0 auto;}
#wa-input{
  flex:1; min-width:0; height:48px; border:1px solid var(--c-linea); background:var(--c-crema); border-radius:30px; padding:0 18px;
  font-size:16px; color:var(--c-carbon); outline:none; font-family:inherit;
}
#wa-input:focus{border-color:var(--c-carbon);}
#wa-input:disabled{opacity:.6;}
#wa-send{
  width:48px; height:48px; flex:0 0 auto; border:0; border-radius:30px; cursor:pointer;
  background:var(--c-carbon); color:var(--c-caramelo); display:flex; align-items:center; justify-content:center;
}
#wa-send:disabled{opacity:.5; cursor:default;}
#wa-send:focus-visible{outline:2px solid var(--c-caramelo-700); outline-offset:2px;}

.wa-foot{display:flex; justify-content:center; padding:2px 16px 12px; background:#fff; border:0; flex:0 0 auto;}
.wa-foot a{font-size:12px; color:var(--c-tinta-suave); text-decoration:underline;}
.wa-foot a:hover{color:var(--c-carbon);}
.wa-foot:empty{display:none;}

@media (max-width:480px){
  #wa-float{right:14px; bottom:74px;}
  #wa-panel{
    position:fixed; left:10px; right:10px; bottom:144px; top:auto; width:auto; max-width:none;
    height:calc(100vh - 160px); height:calc(100dvh - 160px); max-height:none; border-radius:16px;
  }
  .wa-logo{height:22px;}
}
@media (prefers-reduced-motion:reduce){
  #wa-panel,.wa-bubble,.wa-prods,.wa-ticket{transition:none; animation:none;}
  .wa-typing span{animation:none;}
}