/* ASISTENTE · la burbuja y el panel de chat de la landing (lab/asistente.js). */
.as-raiz{ --as-azul:#0071E3; position:fixed; right:20px; bottom:20px; z-index:900; font-family:'Helvetica Neue',Helvetica,Inter,Arial,sans-serif; color:#1D1D1F; }
.as-burbuja{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 16px 0 5px; border:1px solid rgba(29,29,31,.08); border-radius:999px;
  background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); color:#1D1D1F;
  font-family:inherit; font-size:14px; font-weight:600; letter-spacing:-.01em; cursor:pointer;
  box-shadow:0 12px 30px -14px rgba(18,28,45,.35); transition:transform .2s ease, box-shadow .2s ease; }
.as-burbuja:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(18,28,45,.42); }
.as-burbuja:focus{ outline:none; }
.as-burbuja:focus-visible, .as-cerrar:focus-visible, .as-enviar:focus-visible, .as-sug button:focus-visible{ outline:2px solid var(--as-azul); outline-offset:2px; }
.as-burbuja i{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--as-azul); color:#fff; flex:none; }
.as-burbuja svg{ width:18px; height:18px; display:block; margin-top:1px; }
.as-raiz.abierto .as-burbuja{ display:none; }
.as-panel{ position:absolute; right:0; bottom:0; width:min(400px, calc(100vw - 40px)); height:min(620px, calc(100vh - 40px)); background:#fff; border-radius:24px;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.06); display:flex; flex-direction:column; overflow:hidden; animation:asEntra .3s cubic-bezier(.22,1,.36,1); }
.as-panel[hidden]{ display:none; }
@keyframes asEntra{ from{ opacity:0; transform:translateY(12px) scale(.98); } }
.as-cab{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 16px 14px 20px; border-bottom:1px solid rgba(0,0,0,.06); }
.as-cab b{ display:block; font-size:16px; } .as-cab small{ display:block; font-size:12.5px; color:#1f7a35; font-weight:600; margin-top:2px; }
.as-cerrar{ width:40px; height:40px; border-radius:50%; border:0; background:rgba(118,118,128,.12); font-size:15px; cursor:pointer; color:#1D1D1F; }
.as-msgs{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; overscroll-behavior:contain; }
.as-msg{ max-width:88%; padding:10px 14px; border-radius:18px; font-size:14.5px; line-height:1.45; overflow-wrap:anywhere; }
.as-msg p{ margin:0; } .as-msg p + p{ margin-top:6px; }
.as-msg ul{ margin:6px 0 0; padding-left:18px; } .as-msg li{ margin:3px 0; }
.as-msg a{ color:var(--as-azul); font-weight:600; }
.as-asistente{ align-self:flex-start; background:#F2F2F7; border-bottom-left-radius:6px; }
.as-usuario{ align-self:flex-end; background:var(--as-azul); color:#fff; border-bottom-right-radius:6px; }
.as-error{ background:rgba(255,59,48,.1); color:#8a1d16; }
.as-pensando{ display:flex; gap:4px; padding:4px 0; }
.as-pensando i{ width:7px; height:7px; border-radius:50%; background:rgba(29,29,31,.4); animation:asPunto 1s infinite ease-in-out; }
.as-pensando i:nth-child(2){ animation-delay:.15s; } .as-pensando i:nth-child(3){ animation-delay:.3s; }
@keyframes asPunto{ 0%,80%,100%{ opacity:.3; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-3px); } }
.as-sug{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 10px; }
.as-sug[hidden]{ display:none; }
.as-sug button{ min-height:36px; padding:0 12px; border-radius:999px; border:1px solid rgba(0,113,227,.3); background:#fff; color:var(--as-azul); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.as-sug button:hover{ background:rgba(0,113,227,.06); }
.as-accion{ display:inline-flex; align-items:center; min-height:40px; margin-top:10px; padding:0 16px; border:0; border-radius:999px; background:var(--as-azul); color:#fff; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.as-accion:hover{ filter:brightness(1.08); } .as-accion:focus-visible{ outline:2px solid var(--as-azul); outline-offset:2px; }
.as-form{ display:flex; gap:8px; padding:12px 12px 14px; border-top:1px solid rgba(0,0,0,.06); }
.as-form input{ flex:1; min-width:0; height:46px; border-radius:999px; border:1px solid rgba(0,0,0,.12); padding:0 16px; font-size:16px; font-family:inherit; color:#1D1D1F; background:#fff; }
.as-form input:focus{ outline:none; border-color:var(--as-azul); box-shadow:0 0 0 3px rgba(0,113,227,.15); }
.as-enviar{ width:46px; height:46px; flex:none; border-radius:50%; border:0; background:var(--as-azul); color:#fff; display:grid; place-items:center; cursor:pointer; }
.as-enviar svg{ width:20px; height:20px; }
.as-oculto{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
/* Teléfono y tableta angosta: burbuja chica, fuera del área segura, en el mismo renglón que la
   píldora de cotizar (que le deja 64 px a la derecha, ver cotiza-rapida.css). */
@media (max-width:820px){
  .as-raiz{ right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); }
  .as-burbuja span{ display:none; }
  .as-burbuja{ width:44px; height:44px; padding:0; justify-content:center; }
  .as-burbuja i{ width:36px; height:36px; }
  .as-burbuja svg{ width:17px; height:17px; }
  /* Lo último de la página sube por encima de la burbuja. */
  body{ padding-bottom:calc(68px + env(safe-area-inset-bottom,0px)); }
}
@media (max-width:560px){
  .as-raiz.abierto{ inset:0; right:0; bottom:0; }
  .as-panel{ position:fixed; inset:0; width:100%; height:100%; border-radius:0; }
}
@media (prefers-reduced-motion:reduce){ .as-panel{ animation:none; } .as-pensando i{ animation:none; } .as-burbuja{ transition:none; } }