/* ==========================================================
   Botón flotante (tuenweb_whatsapp_btn) · estilos comunes
   Colores, tamaño y posición llegan como variables CSS desde el panel.
   El formulario se estiliza con el CSS propio de cada web (pestaña Formulario).
   ========================================================== */
.tw-wab{
  --tw-wab-lift:0px;
  position:fixed; bottom:calc(var(--tw-wab-y) + var(--tw-wab-lift)); z-index:var(--tw-wab-z);
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  font-family:inherit; font-size:15px; line-height:1.45; color:#1d2733;
  transition:bottom .25s ease, opacity .25s ease, transform .25s ease;
}
/* Con el panel abierto (acción expresa del visitante) se pone por encima del aviso de cookies
   en vez de esquivarlo: así el panel tiene todo el alto disponible. */
.tw-wab.is-open{ --tw-wab-lift:0px !important; z-index:10001; }
.tw-wab--right{ right:var(--tw-wab-x); }
.tw-wab--left{ left:var(--tw-wab-x); align-items:flex-start; }
.tw-wab.is-pending, .tw-wab.is-hidden{ opacity:0; transform:translateY(12px); pointer-events:none; visibility:hidden; }
.tw-wab *, .tw-wab *::before, .tw-wab *::after{ box-sizing:border-box; }
.tw-wab [hidden]{ display:none !important; }
.tw-wab svg{ width:100%; height:100%; display:block; }

@media (max-width:767px){ .tw-wab--desktop{ display:none !important; } }
@media (min-width:768px){ .tw-wab--mobile{ display:none !important; } }

/* Botón */
.tw-wab__btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  min-width:var(--tw-wab-size); height:var(--tw-wab-size); padding:0; border:0; border-radius:999px; cursor:pointer;
  background:var(--tw-wab-bg); color:var(--tw-wab-fg); text-decoration:none; font:inherit; font-weight:600;
  box-shadow:0 10px 24px -6px rgba(0,0,0,.35); transition:transform .2s ease, box-shadow .2s ease;
}
.tw-wab__btn:hover{ transform:scale(1.05); color:var(--tw-wab-fg); }
.tw-wab__btn:focus-visible{ outline:3px solid var(--tw-wab-accent); outline-offset:3px; }
.tw-wab__btn-icon, .tw-wab__btn-close{
  flex:none; width:var(--tw-wab-size); height:var(--tw-wab-size); display:grid; place-items:center;
  padding:calc(var(--tw-wab-size) * .22);
}
.tw-wab__btn-close{ display:none; padding:calc(var(--tw-wab-size) * .28); }
.tw-wab.is-open .tw-wab__btn-icon{ display:none; }
.tw-wab.is-open .tw-wab__btn-close{ display:grid; }
.tw-wab__btn-text{ padding-right:22px; white-space:nowrap; }
.tw-wab--left .tw-wab__btn{ flex-direction:row; }
.tw-wab.is-open .tw-wab__btn-text{ display:none; }
@media (max-width:767px){ .tw-wab:not(.tw-wab--text-mobile) .tw-wab__btn-text{ display:none; } }

/* Pulso */
.tw-wab--pulse .tw-wab__btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 0 var(--tw-wab-bg); animation:tw-wab-pulse 2.4s ease-out infinite;
}
.tw-wab.is-open .tw-wab__btn::after{ animation:none; }
@keyframes tw-wab-pulse{
  0%{ box-shadow:0 0 0 0 var(--tw-wab-bg); opacity:.55; }
  70%{ box-shadow:0 0 0 16px var(--tw-wab-bg); opacity:0; }
  100%{ opacity:0; }
}

/* Bocadillo de bienvenida */
.tw-wab__greeting{
  position:relative; max-width:260px; padding:14px 38px 14px 16px; border-radius:16px;
  background:#fff; box-shadow:0 14px 34px -10px rgba(0,0,0,.3); animation:tw-wab-in .3s ease;
}
.tw-wab__greeting p{ margin:0; cursor:pointer; font-size:14px; }
.tw-wab__greeting::after{
  content:""; position:absolute; bottom:-6px; right:calc(var(--tw-wab-size) / 2 - 6px);
  width:12px; height:12px; background:#fff; transform:rotate(45deg);
}
.tw-wab--left .tw-wab__greeting::after{ right:auto; left:calc(var(--tw-wab-size) / 2 - 6px); }
.tw-wab__greeting-close{
  position:absolute; top:8px; right:8px; width:24px; height:24px; padding:5px; border:0; border-radius:50%;
  background:#f1f4f7; color:#5b6672; cursor:pointer;
}
@media (max-width:767px){ .tw-wab__greeting--desktop{ display:none !important; } }

/* Panel */
.tw-wab__panel{
  width:min(360px, calc(100vw - 2 * var(--tw-wab-x))); max-height:min(640px, calc(100vh - var(--tw-wab-size) - var(--tw-wab-y) - var(--tw-wab-lift) - 40px));
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border-radius:18px; box-shadow:0 24px 60px -16px rgba(0,0,0,.38); animation:tw-wab-in .25s ease;
}
.tw-wab__head{
  display:flex; align-items:center; gap:8px; padding:14px 14px 14px 20px;
  background:var(--tw-wab-accent); color:#fff;
}
.tw-wab__head strong{ flex:1; font-size:16px; }
.tw-wab__icon-btn{
  flex:none; width:32px; height:32px; padding:7px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff;
}
.tw-wab__icon-btn:hover{ background:rgba(255,255,255,.28); }
.tw-wab__back{ margin-left:-8px; }
.tw-wab__body{ padding:18px 20px 20px; overflow-y:auto; }
.tw-wab__intro{ margin:0 0 14px; color:#5b6672; font-size:14px; }
.tw-wab__outside{ margin:0 0 14px; padding:10px 12px; border-radius:10px; background:#fff6e5; color:#7a4b00; font-size:13.5px; }

/* Opciones del modo mixto */
.tw-wab__options{ display:grid; gap:10px; }
.tw-wab__option{
  display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border:1px solid #e3e8ee; border-radius:12px;
  background:#fff; color:#1d2733; font:inherit; font-weight:600; text-align:left; text-decoration:none; cursor:pointer;
  transition:border-color .2s, background .2s;
}
.tw-wab__option:hover{ border-color:var(--tw-wab-accent); background:#f7fafc; color:#1d2733; }
.tw-wab__option svg{ flex:none; width:40px; height:40px; padding:9px; border-radius:50%; background:var(--tw-wab-accent); color:#fff; }
.tw-wab__option--whatsapp svg{ background:#25D366; }

/* Formulario: estructura mínima (el aspecto lo da el CSS propio de la web) */
.tw-wab__form form{ margin:0; }
.tw-wab__status{ margin:10px 0 0; font-size:13.5px; min-height:0; }
.tw-wab__status:empty{ display:none; }
.tw-wab__status.is-error{ color:#b3261e; }
.tw-wab__done{ text-align:center; padding:12px 0 4px; }
.tw-wab__done p{ margin:0; font-weight:600; }
.tw-wab__done::before{
  content:""; display:block; width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
  background:#1faa59 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9.5 16.2 5.3 12a1 1 0 1 0-1.4 1.4l4.9 4.9a1 1 0 0 0 1.4 0L20.1 8.4A1 1 0 0 0 18.7 7z'/%3E%3C/svg%3E") center / 30px no-repeat;
}
.tw-wab__hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

@keyframes tw-wab-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .tw-wab, .tw-wab *{ animation:none !important; transition:none !important; }
}
@media (max-width:480px){
  .tw-wab__panel{ width:calc(100vw - 2 * var(--tw-wab-x)); }
}