/* =========================================================
   Botón flotante de WhatsApp + panel estilo chat (js/wa-form.js)
   ========================================================= */
.wa-float{
  position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:1040;
  width:60px; height:60px; border-radius:999px; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(15,17,21,.25);
  transition:transform .16s cubic-bezier(.2,.8,.2,1);
}
.wa-float:hover, .wa-float:focus{color:#fff; transform:scale(1.05); text-decoration:none}
.wa-float:active{transform:scale(.95)}
.wa-float svg{width:30px; height:30px}
@media (max-width:720px){ .wa-float{width:54px; height:54px; right:14px} }

.wa-modal, .wa-modal *{box-sizing:border-box}
.wa-modal{
  position:fixed; inset:auto 20px calc(96px + env(safe-area-inset-bottom, 0px)) auto; margin:0;
  width:min(400px, calc(100% - 40px)); max-height:calc(100dvh - 120px); padding:0;
  flex-direction:column; overflow:hidden;
  border:0; border-radius:20px; background:#EFEAE2; color:#0F1115; box-shadow:0 24px 60px rgba(15,17,21,.3);
  font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  opacity:0; transform:scale(.12);
  transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s cubic-bezier(.2,.8,.2,1);
}
.wa-modal[open]{display:flex}
.wa-modal.is-open{opacity:1; transform:none}
.wa-modal::backdrop{background:rgba(15,17,21,.45); opacity:0; transition:opacity .28s}
.wa-modal.is-open::backdrop{opacity:1}
.wa-modal-head{flex:0 0 auto; display:flex; gap:10px; align-items:center; padding:10px 12px 10px 14px; background:#075E54; color:#fff}
.wa-avatar{flex:0 0 auto; width:38px; height:38px; border-radius:999px; background:#fff; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:#075E54}
.wa-who{min-width:0}
.wa-who h2{margin:0; font-size:17px; font-weight:800; line-height:1.2; color:#fff}
.wa-who p{margin:1px 0 0; display:flex; align-items:center; gap:6px; font-size:12px; line-height:1.3; color:rgba(255,255,255,.82)}
.wa-dot{flex:0 0 auto; width:8px; height:8px; border-radius:999px; background:#25D366; box-shadow:0 0 0 2px rgba(37,211,102,.3)}
.wa-modal-close{margin-left:auto; flex:0 0 auto; width:34px; height:34px; border:0; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center}
.wa-modal-close:hover{background:rgba(255,255,255,.22)}
.wa-modal-body{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:12px; display:flex; flex-direction:column; gap:10px}

/* Burbujas de chat */
.wa-bubble{position:relative; align-self:flex-start; max-width:88%; margin:0 0 0 8px; background:#fff; padding:7px 12px; border-radius:0 12px 12px 12px;
  font-size:14px; line-height:1.4; box-shadow:0 1px 1px rgba(15,17,21,.12)}
.wa-bubble::before{content:""; position:absolute; top:0; left:-8px; border-top:10px solid #fff; border-left:8px solid transparent}
.wa-bubble-out{align-self:flex-end; margin:0 8px 0 0; background:#D9FDD3; border-radius:12px 0 12px 12px}
.wa-bubble-out::before{left:auto; right:-8px; border-top-color:#D9FDD3; border-left:0; border-right:8px solid transparent}
.wa-bubble[hidden], .wa-modal-form[hidden], .wa-modal-ok[hidden]{display:none}

/* Formulario */
.wa-modal-form{display:flex; flex-direction:column; gap:9px; background:#fff; border-radius:14px; padding:14px; margin:0; box-shadow:0 1px 1px rgba(15,17,21,.08)}
.wa-field{display:flex; flex-direction:column; gap:3px}
.wa-field label{margin:0; font-size:13px; font-weight:700; line-height:1.3}
.wa-input{width:100%; min-height:36px; padding:6px 12px; border:1.5px solid #D5D9E0; border-radius:10px; background:#F7F8FA; color:#0F1115; font:inherit; font-size:15px; line-height:1.25}
.wa-input:focus{outline:none; border-color:#25D366; background:#fff}
textarea.wa-input{min-height:0; height:56px; resize:vertical}
.wa-input[aria-invalid="true"]{border-color:#FF213A}
.wa-opt{font-weight:500; color:#545A66}
.wa-productos{border:0; margin:0; padding:0; min-width:0}
.wa-productos legend{border:0; width:auto; padding:0; margin:0 0 6px; font-size:13px; font-weight:700; line-height:1.3; color:#0F1115}
.wa-productos .opts{display:flex; flex-wrap:wrap; gap:6px}
.wa-productos .opts label{display:inline-flex; align-items:center; gap:6px; min-height:34px; margin:0; padding:0 12px; border-radius:999px;
  background:#F2F3F5; border:1px solid transparent; font-size:13px; font-weight:600; cursor:pointer}
.wa-productos input{width:16px; height:16px; margin:0; accent-color:#25D366}
.wa-productos label:has(input:checked){background:#E7F8EE; border-color:#25D366}
.wa-productos[aria-invalid="true"] .opts label{border-color:#FF213A}
.wa-modal-status{margin:0; font-size:13px; line-height:1.3; color:#C8102E}
.wa-modal-status:empty{display:none}
.wa-privacy{margin:0; font-size:12px; line-height:1.35; color:#545A66; text-align:center}
.wa-recaptcha{margin:0; font-size:11px; line-height:1.35; color:#545A66; text-align:center}
.wa-recaptcha a{color:inherit; text-decoration:underline}
/* El sello flotante de reCAPTCHA taparía el botón de WhatsApp; Google permite ocultarlo si se muestra el aviso en el formulario */
.grecaptcha-badge{visibility:hidden}
.wa-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.wa-modal-ok{display:flex; flex-direction:column; gap:14px}

.wa-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; margin-top:3px; padding:0 18px;
  border:0; border-radius:999px; background:#25D366; color:#fff; font:inherit; font-size:16px; font-weight:700; cursor:pointer; text-decoration:none}
.wa-btn:hover, .wa-btn:focus{background:#1EBE5A; color:#fff; text-decoration:none}

.wa-grid{display:flex; flex-direction:column; gap:9px}

/* Computador / portátil: panel más ancho y compacto para que quepa sin scroll */
@media (min-width:721px){
  .wa-modal{width:min(620px, calc(100% - 40px))}
  .wa-modal-head{padding:8px 12px 8px 14px}
  .wa-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px 10px}
  .wa-modal-body{padding:10px 12px; gap:8px}
  .wa-bubble{padding:6px 12px}
  .wa-modal-form{gap:7px; padding:12px 14px}
  .wa-field{gap:2px}
  .wa-input{min-height:32px; padding:4px 11px; font-size:14px}
  textarea.wa-input{height:38px}
  .wa-productos legend{margin-bottom:4px}
  .wa-productos .opts{gap:4px 5px}
  .wa-productos .opts label{min-height:26px; padding:0 10px; font-size:12.5px}
  .wa-productos input{width:14px; height:14px}
  .wa-btn{min-height:40px; margin-top:1px}
}

@media (max-width:720px){
  .wa-modal{inset:auto 10px calc(84px + env(safe-area-inset-bottom, 0px)) 10px; width:auto; max-height:calc(100dvh - 100px)}
}
@media (max-height:760px){
  .wa-modal{bottom:calc(12px + env(safe-area-inset-bottom, 0px)); max-height:calc(100dvh - 24px)}
}
@media (prefers-reduced-motion:reduce){
  .wa-modal, .wa-modal::backdrop, .wa-float{transition:none}
}