/* ============================================================
   Widget embebido de la Asesora Virtual — ahora con la paleta REAL de Odex
   (naranja/marino, ver assets/css/sitio_publico.css) en vez del tema oscuro
   que tenía el Vendedor Online de página completa. El logo real de Odex va
   arriba de todo, sobre fondo blanco.
   ============================================================ */
#asesora-abrir{position:fixed;right:22px;bottom:22px;z-index:70;display:flex;align-items:center;gap:10px;background:#fff;color:var(--sp-brand-dark,#142349);border:1.5px solid var(--sp-brand,#ff8e1d);padding:6px 20px 6px 6px;border-radius:30px;cursor:pointer;box-shadow:0 10px 30px rgba(20,35,73,.2);transition:transform .15s;font-family:inherit;}
#asesora-abrir:hover{transform:translateY(-2px) scale(1.02);}
#asesora-abrir img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--sp-brand,#ff8e1d);}
#asesora-abrir span{font-size:13px;font-weight:700;}
#asesora-abrir.as-oculto{display:none;}

.as-panel{position:fixed;right:22px;bottom:22px;z-index:80;width:380px;max-width:calc(100vw - 24px);height:min(600px,calc(100vh - 40px));background:var(--sp-cream,#F7F8FB);border-radius:22px;box-shadow:0 20px 60px rgba(20,35,73,.35);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--sp-line,#E4E7EE);}
.as-panel[hidden]{display:none;}

.as-panel-logo{background:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--sp-line,#E4E7EE);}
.as-panel-logo img{height:30px;width:auto;}
#asesora-cerrar{background:none;border:none;color:var(--sp-ink-soft,#636a6c);font-size:18px;cursor:pointer;padding:4px 8px;line-height:1;}
#asesora-cerrar:hover{color:var(--sp-brand-dark,#142349);}

.as-panel-header{display:flex;align-items:center;gap:12px;padding:12px 16px;background:linear-gradient(120deg,var(--sp-accent-soft,#FFEEDC),#fff);border-bottom:1px solid var(--sp-line,#E4E7EE);}
.as-panel-header img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--sp-brand,#ff8e1d);flex-shrink:0;}
.as-panel-header img.as-hablando{animation:as-avatar-habla 1s ease-in-out infinite;}
@keyframes as-avatar-habla{0%,100%{box-shadow:0 0 0 0 rgba(255,142,29,.5);}50%{box-shadow:0 0 0 6px rgba(255,142,29,.15);}}
.as-panel-header .as-nombre{font-weight:700;font-size:14.5px;color:var(--sp-brand-dark,#142349);}
.as-panel-header .as-estado{font-size:11.5px;color:var(--sp-ink-soft,#636a6c);display:flex;align-items:center;gap:5px;}
.as-panel-header .as-punto-vivo{width:6px;height:6px;border-radius:50%;background:var(--sp-brand,#ff8e1d);animation:vo-parpadeo 1.8s ease-in-out infinite;}
@keyframes vo-parpadeo{0%,100%{opacity:1;}50%{opacity:.35;}}

.as-mensajes{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--sp-cream,#F7F8FB);}
/* Los mensajes reusan las clases .vo-msg-* (mismo JS que el Vendedor Online de página completa) pero
   acá, dentro de .as-panel, se pisan con la paleta clara en vez del tema oscuro de vendedor_online.css. */
.as-panel .vo-msg{color:var(--sp-ink,#142349);}
.as-panel .vo-msg-asistente{background:#fff;border:1px solid var(--sp-line,#E4E7EE);}
.as-panel .vo-msg-usuario{background:var(--sp-accent-soft,#FFEEDC);border:1px solid #FBD9AE;color:var(--sp-brand-dark,#142349);}
.as-panel .vo-msg-lead{background:#E9F7EF;border:1px solid #B8E6C9;color:#1B5E3A;}
.as-panel .vo-typing{background:#fff;border:1px solid var(--sp-line,#E4E7EE);border-radius:16px;}
.as-panel .vo-typing span{background:var(--sp-ink-soft,#636a6c);}

.as-input-row{display:flex;gap:6px;padding:12px;border-top:1px solid var(--sp-line,#E4E7EE);background:#fff;}
.as-input-row input[type="text"]{flex:1;background:var(--sp-cream,#F7F8FB);border:1px solid var(--sp-line,#E4E7EE);color:var(--sp-ink,#142349);border-radius:22px;padding:10px 16px;font-size:13.5px;min-height:40px;}
.as-input-row input[type="text"]::placeholder{color:var(--sp-ink-soft,#636a6c);}
.as-input-row input[type="text"]:focus{outline:none;border-color:var(--sp-brand,#ff8e1d);}
.as-input-row button{border:none;border-radius:50%;width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s,background .15s;}
.as-btn-enviar{background:var(--sp-brand,#ff8e1d);color:#fff;}
.as-btn-enviar:hover{transform:scale(1.06);}
.as-btn-enviar:disabled{opacity:.5;cursor:wait;}
.as-btn-mute,.as-btn-mic{background:var(--sp-cream,#F7F8FB);border:1px solid var(--sp-line,#E4E7EE) !important;color:var(--sp-ink-soft,#636a6c);}
.as-btn-mute.activo{color:var(--sp-brand,#ff8e1d);border-color:var(--sp-brand,#ff8e1d) !important;}
.as-btn-mic.escuchando{background:#C0392B;border-color:#C0392B !important;color:#fff;animation:as-mic-pulso 1.1s ease-in-out infinite;}
@keyframes as-mic-pulso{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.5);}50%{box-shadow:0 0 0 7px rgba(192,57,43,0);}}

@media(max-width:480px){
  .as-panel{right:8px;bottom:8px;width:calc(100vw - 16px);}
  #asesora-abrir{right:12px;bottom:12px;}
  #asesora-abrir span{display:none;}
  #asesora-abrir{padding:6px;}
}