/* ===== Chat en vivo — versión EMBEBIBLE para el sitio (lado IZQUIERDO) =====
   Todo va scopeado bajo #cl-chat para NO afectar los estilos del sitio.
   Incluye sus propias utilidades (form-control/btn) para no depender del
   Bootstrap del sitio. Iconos: Bootstrap Icons (font, se carga aparte). */

#cl-chat.cl-embed{
  --cl-sky:#006db7; --cl-sky2:#005a97; --cl-sky-osc:#052f5f; --cl-acc:#5b9bd5;
  --cl-light:#e8f0f8; --cl-bg:#eef4fb; --cl-txt:#0f2233; --cl-borde:#dbe6f1; --cl-rojo:#dc2626; --cl-gris:#5b6b7d;
  position:fixed; left:24px; right:auto; bottom:24px; z-index:99998;
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.4;
}
#cl-chat.cl-embed *{ box-sizing:border-box; }

/* utilidades propias (scopeadas) */
#cl-chat .form-control{ display:block; width:100%; border:1px solid #ddd; border-radius:20px; padding:9px 16px;
  font-size:14px; background:#fff; color:var(--cl-txt); }
#cl-chat .form-control:focus{ outline:0; border-color:var(--cl-sky); box-shadow:0 0 0 .2rem rgba(0,109,183,.18); }
#cl-chat textarea.form-control{ resize:vertical; }
#cl-chat .btn{ display:inline-block; border:0; cursor:pointer; border-radius:25px; font-size:14px; }
#cl-chat .btn-primary{ background:var(--cl-sky); color:#fff; text-transform:uppercase; font-weight:700; letter-spacing:.02em;
  padding:.62rem 1.4rem; box-shadow:0 6px 16px rgba(0,109,183,.28); }
#cl-chat .btn-primary:hover{ background:#0275c4; color:#fff; }
#cl-chat .w-100{ width:100%; } #cl-chat .mb-2{ margin-bottom:.5rem; }
#cl-chat .bi{ line-height:1; display:inline-flex; align-items:center; }

/* launcher */
#cl-chat .cl-launcher{ position:relative; width:64px; height:64px; border:0; border-radius:50%; cursor:pointer; padding:0;
  background:radial-gradient(circle at 32% 28%, #3a9fe0, var(--cl-sky) 55%, var(--cl-sky2));
  box-shadow:0 12px 30px rgba(0,109,183,.55), inset 0 -3px 8px rgba(0,0,0,.15); color:#fff;
  display:flex; align-items:center; justify-content:center; animation:cle-flota 3.4s ease-in-out infinite; transition:transform .2s; }
#cl-chat .cl-launcher::after{ content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(0,109,183,.5); animation:cle-pulso 2.4s ease-out infinite; }
#cl-chat .cl-launcher:hover{ transform:scale(1.08) rotate(-4deg); }
#cl-chat .cl-launcher .bi{ font-size:30px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
#cl-chat .cl-badge{ position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; border-radius:10px;
  background:var(--cl-rojo); color:#fff; font-size:11px; font-weight:700; display:none; align-items:center; justify-content:center;
  padding:0 5px; box-shadow:0 2px 6px rgba(0,0,0,.3); border:2px solid #fff; }

/* panel (abre a la izquierda) */
#cl-chat .cl-panel{ position:absolute; left:0; right:auto; bottom:84px; width:360px; max-width:calc(100vw - 44px);
  height:540px; max-height:calc(100vh - 130px); background:#fff; border-radius:22px; overflow:hidden;
  display:none; flex-direction:column; border:1px solid rgba(255,255,255,.6);
  box-shadow:0 24px 60px rgba(5,47,95,.4); transform-origin:bottom left; animation:cle-in .28s cubic-bezier(.2,.8,.3,1.2); }
#cl-chat.cl-abierto .cl-panel{ display:flex; }
#cl-chat.cl-abierto .cl-launcher{ animation:none; } #cl-chat.cl-abierto .cl-launcher::after{ display:none; }

#cl-chat .cl-header{ position:relative; background:linear-gradient(135deg,var(--cl-sky),var(--cl-sky-osc)); color:#fff;
  padding:15px 16px; display:flex; align-items:center; gap:11px; overflow:hidden; }
#cl-chat .cl-header::before{ content:""; position:absolute; right:-30px; top:-40px; width:130px; height:130px;
  background:radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); }
#cl-chat .cl-ava{ position:relative; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; flex:0 0 42px; } #cl-chat .cl-ava .bi{ font-size:22px; }
#cl-chat .cl-htxt{ z-index:1; } #cl-chat .cl-htxt strong{ display:block; font-size:15.5px; color:#fff; }
#cl-chat .cl-htxt span{ font-size:11.5px; opacity:.92; display:flex; align-items:center; gap:5px; color:#fff; }
#cl-chat .cl-htxt span span,#cl-chat #cl-estado{ color:#fff; }
#cl-chat .cl-dot{ width:8px; height:8px; border-radius:50%; background:#3ee07f; display:inline-block;
  box-shadow:0 0 0 0 rgba(62,224,127,.7); animation:cle-dotp 1.8s infinite; }
#cl-chat .cl-acts{ margin-left:auto; display:flex; align-items:center; gap:2px; z-index:1; }
#cl-chat .cl-mute,#cl-chat .cl-x{ background:transparent; border:0; color:#fff; cursor:pointer; opacity:.85; padding:4px 6px; line-height:1; }
#cl-chat .cl-mute .bi{ font-size:18px; } #cl-chat .cl-x{ font-size:26px; }
#cl-chat .cl-mute:hover,#cl-chat .cl-x:hover{ opacity:1; }

#cl-chat .cl-body{ flex:1; overflow-y:auto; padding:16px 14px; color:var(--cl-txt);
  background:radial-gradient(circle at 15% 8%, rgba(0,109,183,.06), transparent 42%),
    radial-gradient(circle at 92% 96%, rgba(5,47,95,.06), transparent 42%), linear-gradient(180deg,#f7fbff,#eef4fb); }
#cl-chat .cl-intro{ text-align:center; padding:10px 4px; }
#cl-chat .cl-introic{ width:60px; height:60px; margin:4px auto 10px; border-radius:50%;
  background:linear-gradient(135deg,var(--cl-sky),var(--cl-sky-osc)); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 22px rgba(0,109,183,.35); } #cl-chat .cl-introic .bi{ font-size:29px; color:#fff; }
#cl-chat .cl-intro h4{ margin:0 0 4px; color:var(--cl-sky-osc); font-size:18px; font-weight:700; }
#cl-chat .cl-intro p{ margin:0 0 14px; font-size:13px; color:var(--cl-gris); }
#cl-chat .cl-intro .form-control{ text-align:left; }

#cl-chat .cl-fila{ text-align:center; padding:22px 12px; }
#cl-chat .cl-ring{ position:relative; width:96px; height:96px; margin:0 auto 6px; }
#cl-chat .cl-ring span{ position:absolute; inset:0; border-radius:50%; border:3px solid var(--cl-sky); opacity:0; animation:cle-ring 2.2s ease-out infinite; }
#cl-chat .cl-ring span:nth-child(2){ animation-delay:.7s; } #cl-chat .cl-ring span:nth-child(3){ animation-delay:1.4s; }
#cl-chat .cl-turno{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:40px; font-weight:800; color:var(--cl-sky-osc); line-height:1; }
#cl-chat .cl-turno small{ font-size:10px; font-weight:600; color:var(--cl-gris); margin-top:2px; text-transform:uppercase; letter-spacing:.03em; }
#cl-chat .cl-fila p{ font-size:13px; color:var(--cl-txt); margin-top:12px; }

#cl-chat .cl-msg{ display:flex; margin-bottom:11px; animation:cle-msgin .28s ease; }
#cl-chat .cl-msg .b{ max-width:82%; padding:9px 13px; border-radius:16px; font-size:13.5px; line-height:1.45;
  box-shadow:0 2px 8px rgba(5,47,95,.08); word-wrap:break-word; }
#cl-chat .cl-msg.u{ justify-content:flex-end; }
#cl-chat .cl-msg.u .b{ background:linear-gradient(135deg,var(--cl-sky),var(--cl-sky2)); color:#fff; border-bottom-right-radius:5px; }
#cl-chat .cl-msg.a .b{ background:#fff; border:1px solid var(--cl-borde); color:var(--cl-txt); border-bottom-left-radius:5px; }
#cl-chat .cl-msg.s{ justify-content:center; }
#cl-chat .cl-msg.s .b{ background:rgba(5,47,95,.08); color:var(--cl-sky-osc); font-size:11.5px; padding:4px 13px; border-radius:20px; box-shadow:none; }
#cl-chat .cl-time{ font-size:9.5px; opacity:.7; display:block; margin-top:3px; text-align:right; }

#cl-chat .cl-foot{ display:flex; align-items:center; gap:8px; padding:10px 16px; background:#fff; border-top:1px solid var(--cl-borde); }
#cl-chat .cl-foot .form-control{ height:38px; border-radius:19px; padding:4px 15px; font-size:13.5px; line-height:1.2; }
#cl-chat .cl-send{ width:38px; height:38px; flex:0 0 38px; border:0; border-radius:50%; cursor:pointer; color:#fff;
  background:linear-gradient(135deg,var(--cl-sky),var(--cl-sky2)); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(0,109,183,.35); transition:transform .15s; } #cl-chat .cl-send .bi{ font-size:18px; }
#cl-chat .cl-send:hover{ transform:scale(1.08); } #cl-chat .cl-send:disabled{ opacity:.45; box-shadow:none; }
#cl-chat .cl-err{ color:var(--cl-rojo); font-size:12px; margin:4px 0; }

@keyframes cle-flota{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }
@keyframes cle-pulso{ 0%{ box-shadow:0 0 0 0 rgba(0,109,183,.5);} 70%{ box-shadow:0 0 0 18px rgba(0,109,183,0);} 100%{ box-shadow:0 0 0 0 rgba(0,109,183,0);} }
@keyframes cle-dotp{ 0%{ box-shadow:0 0 0 0 rgba(62,224,127,.7);} 70%{ box-shadow:0 0 0 6px rgba(62,224,127,0);} 100%{ box-shadow:0 0 0 0 rgba(62,224,127,0);} }
@keyframes cle-in{ from{ opacity:0; transform:translateY(16px) scale(.96);} to{ opacity:1; transform:translateY(0) scale(1);} }
@keyframes cle-msgin{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
@keyframes cle-ring{ 0%{ transform:scale(.5); opacity:.9;} 100%{ transform:scale(1); opacity:0;} }