/**
 * Autorys - Globo de contacto
 * Developed by Autorys
 * https://autorys.com
 *
 * [Autorys · Globo de contacto] Un solo botón flotante con tres vías:
 * WhatsApp, chat en esta misma página (Karla) y Telegram.
 */

#autorys-contact{
  position:fixed;right:22px;bottom:22px;z-index:999999;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
#autorys-contact [hidden]{display:none !important}

/* --- Botón flotante --- */
.ac-btn{
  position:relative;width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;
  background:#1E88F5;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  transition:transform .2s ease, background .2s ease;
  animation:acPulse 2.4s infinite;
}
.ac-btn:hover{transform:scale(1.06);background:#1266c4}
.ac-btn:focus-visible{outline:3px solid #9cc9fb;outline-offset:3px}
.ac-btn svg{width:28px;height:28px;display:block;pointer-events:none}
.ac-btn .ac-i-close{display:none}
#autorys-contact:not([data-state="closed"]) .ac-btn{animation:none}
#autorys-contact:not([data-state="closed"]) .ac-btn .ac-i-open{display:none}
#autorys-contact:not([data-state="closed"]) .ac-btn .ac-i-close{display:block}

@keyframes acPulse{
  0%  {box-shadow:0 0 0 0 rgba(30,136,245,.45), 0 14px 34px rgba(0,0,0,.28)}
  70% {box-shadow:0 0 0 16px rgba(30,136,245,0), 0 14px 34px rgba(0,0,0,.28)}
  100%{box-shadow:0 0 0 0 rgba(30,136,245,0), 0 14px 34px rgba(0,0,0,.28)}
}

/* --- Menú de opciones --- */
.ac-panel{
  position:absolute;right:0;bottom:78px;width:310px;max-width:calc(100vw - 32px);
  background:#fff;color:#1f2d38;border-radius:18px;padding:16px;
  box-shadow:0 24px 60px rgba(15,23,32,.35);animation:acIn .18s ease-out;
}
.ac-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px}
.ac-title{margin:4px 0 0;font-size:15px;font-weight:600;line-height:1.35;flex:1;color:#1f2d38}
.ac-close{
  border:0;background:transparent;color:#7a8c99;width:32px;height:32px;border-radius:50%;
  cursor:pointer;font-size:22px;line-height:1;flex-shrink:0;
}
.ac-close:hover{background:#f2f6fa;color:#1f2d38}

.ac-opt{
  display:flex;align-items:center;gap:12px;width:100%;margin-top:8px;padding:12px;
  border-radius:12px;border:1px solid #e3eaf0;background:#fff;color:#1f2d38;
  text-decoration:none;cursor:pointer;font:inherit;text-align:left;
  transition:background .15s ease, border-color .15s ease;
}
.ac-opt:hover{background:#f5f8fb;border-color:#cfdbe5}
.ac-opt:focus-visible{outline:3px solid #9cc9fb;outline-offset:2px}
.ac-ico{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ac-ico svg{width:22px;height:22px;display:block}
.ac-wa  .ac-ico{background:#25D366}
.ac-web .ac-ico{background:#1E88F5}
.ac-tg  .ac-ico{background:#229ED9}
.ac-txt{display:flex;flex-direction:column;min-width:0}
.ac-txt b{font-size:14px;font-weight:600;color:#1f2d38}
.ac-txt span{font-size:12.5px;color:#6b7c89;margin-top:2px}

/* --- Chat de Karla dentro de la página --- */
.ac-chat{
  position:absolute;right:0;bottom:78px;width:380px;height:min(620px, calc(100vh - 120px));
  background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(15,23,32,.38);animation:acIn .18s ease-out;
}
.ac-chat iframe{width:100%;height:100%;border:0;display:block}

@keyframes acIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* --- Celular: el chat ocupa toda la pantalla y se cierra desde su propio botón --- */
@media (max-width:640px){
  #autorys-contact{right:16px;bottom:16px}
  .ac-btn{width:56px;height:56px}
  .ac-panel{bottom:70px}
  .ac-chat{position:fixed;inset:0;width:100%;height:100%;border-radius:0}
  #autorys-contact[data-state="chat"] .ac-btn{display:none}
  html.ac-lock, html.ac-lock body{overflow:hidden}
}

@media (prefers-reduced-motion:reduce){
  .ac-btn{animation:none}
  .ac-panel, .ac-chat{animation:none}
}