/* bot-chat.css — Bot Crediexpres · menú predefinido v2
   Incluye el FAB circular "BOT" (reemplaza al legacy ce-fab-whatsapp). */

/* ══ FAB: círculo + ícono robot + palabra BOT ══ */
html body a.ce-fab-bot{
  position:fixed; bottom:24px; right:24px; z-index:99998;
  width:66px; height:66px; border-radius:50%;
  background:linear-gradient(135deg,#1E5FFF 0%,#0A4FE0 100%);
  color:#fff !important;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  box-shadow:0 12px 32px -8px rgba(30,95,255,.5), 0 0 0 1px rgba(255,255,255,.12);
  text-decoration:none !important;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
html body a.ce-fab-bot svg{ width:26px; height:26px; display:block; }
html body a.ce-fab-bot .ce-fab-bot-txt{
  font-size:.58rem; font-weight:800; letter-spacing:.14em; line-height:1; color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif;
}
html body a.ce-fab-bot:hover{
  transform:scale(1.08);
  box-shadow:0 16px 40px -8px rgba(30,95,255,.6), 0 0 0 1px rgba(255,255,255,.15);
  color:#fff !important;
}
/* pulso sutil */
html body a.ce-fab-bot::before{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  background:#1E5FFF; opacity:.22; z-index:-1;
  animation:ceFabPulse 2.2s ease-out infinite;
}
@keyframes ceFabPulse{ 0%{transform:scale(1);opacity:.3} 100%{transform:scale(1.55);opacity:0} }
@media (prefers-reduced-motion: reduce){ html body a.ce-fab-bot::before{ animation:none; } }
@media (max-width:920px){
  html body a.ce-fab-bot{
    width:56px; height:56px;
    bottom:calc(88px + env(safe-area-inset-bottom)); right:16px; /* arriba del CTA bar móvil */
  }
  html body a.ce-fab-bot svg{ width:22px; height:22px; }
  html body a.ce-fab-bot .ce-fab-bot-txt{ font-size:.52rem; }
}

/* ══ Panel ══ */
.ce-bot-panel{
  position:fixed; bottom:104px; right:24px; z-index:99999;
  width:min(380px, calc(100vw - 32px)); height:min(580px, calc(100vh - 150px));
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid #E5EAF2; border-radius:20px;
  box-shadow:0 24px 60px -16px rgba(10,23,51,.28);
  font-family:'Plus Jakarta Sans',sans-serif;
  animation:ceBotIn .28s cubic-bezier(.16,1,.3,1);
}
@keyframes ceBotIn{ from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
/* BUG FIX 2026-07-06: [hidden] del UA pierde contra el display:flex de arriba →
   la X "no cerraba" (el panel seguía pintado). Regla explícita: */
.ce-bot-panel[hidden]{ display:none !important; }

.ce-bot-head{ display:flex; align-items:center; gap:12px; padding:16px 18px;
  background:linear-gradient(135deg,#1E5FFF 0%,#0A4FE0 100%); color:#fff; }
.ce-bot-ava{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.18); font-size:1.35rem; }
.ce-bot-head-txt{ display:flex; flex-direction:column; line-height:1.2; flex:1; }
.ce-bot-head-txt strong{ font-size:.98rem; }
.ce-bot-head-txt span{ font-size:.75rem; opacity:.85; }
html body .ce-bot-panel .ce-bot-x,
html body .ce-bot-panel .ce-bot-reset{
  background:transparent !important; border:0 !important; color:#fff !important;
  font-size:1.05rem; cursor:pointer; opacity:.85;
  width:34px; height:34px; display:grid; place-items:center; border-radius:10px;
  padding:0; line-height:1; font-family:inherit; box-shadow:none !important;
}
html body .ce-bot-panel .ce-bot-x:hover,
html body .ce-bot-panel .ce-bot-reset:hover{ opacity:1; background:rgba(255,255,255,.14) !important; color:#fff !important; }
html body .ce-bot-panel .ce-bot-reset{ font-size:1.2rem; }

/* ══ Mensajes ══ */
.ce-bot-msgs{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; background:#F7F9FC; }
.ce-bot-msg{ max-width:85%; padding:11px 14px; border-radius:16px; font-size:.9rem; line-height:1.5; }
.ce-bot-msg a{ color:#1E5FFF; font-weight:600; }
.ce-bot-bot{ align-self:flex-start; background:#fff; border:1px solid #EAEFF6; color:#1F2937; border-bottom-left-radius:5px; }
.ce-bot-bot b{ color:#0A1733; }
.ce-bot-user{ align-self:flex-end; background:linear-gradient(135deg,#1E5FFF,#0A4FE0); color:#fff; border-bottom-right-radius:5px; }

/* Typing */
.ce-bot-typing{ display:flex; gap:4px; }
.ce-bot-typing span{ width:7px; height:7px; border-radius:50%; background:#9AA8BE; animation:ceBotBlink 1.2s infinite; }
.ce-bot-typing span:nth-child(2){ animation-delay:.2s; } .ce-bot-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes ceBotBlink{ 0%,60%,100%{opacity:.3} 30%{opacity:1} }

/* ══ Opciones tipo menú (lista vertical dentro de la conversación) ══
   !important en color/background: Astra estila <button> globalmente y su
   hover pintaba el texto de blanco → "al pasar cursor no se ve" (bug Luis). */
/* Opciones estilo Telcel: botones AZULES SÓLIDOS, ancho completo, centrados */
.ce-bot-opts{ display:flex; flex-direction:column; gap:9px; align-self:stretch; margin-top:4px; }
html body .ce-bot-panel .ce-bot-opt{
  width:100%; text-align:center; display:flex; align-items:center; justify-content:center; gap:8px;
  border:0 !important; background:#1E5FFF !important; color:#fff !important;
  font-weight:600; font-size:.9rem; font-family:inherit; line-height:1.3;
  padding:14px 16px; border-radius:12px; cursor:pointer;
  transition:background .18s, transform .12s, box-shadow .18s;
  text-decoration:none !important;
  box-shadow:0 3px 10px -3px rgba(30,95,255,.35) !important;
}
html body .ce-bot-panel .ce-bot-opt::after{ content:''; }
html body .ce-bot-panel .ce-bot-opt:hover,
html body .ce-bot-panel .ce-bot-opt:focus{
  background:#0A4FE0 !important; color:#fff !important;
  transform:translateY(-1px); box-shadow:0 6px 16px -4px rgba(30,95,255,.5) !important;
}
/* Volver / Menú — secundario, gris suave (jerarquía clara) */
html body .ce-bot-panel .ce-bot-opt--back{
  background:#EEF2F7 !important; color:#5B6B85 !important; box-shadow:none !important; font-weight:600;
}
html body .ce-bot-panel .ce-bot-opt--back:hover{ background:#E2E8F0 !important; color:#3E4A61 !important; transform:none; box-shadow:none !important; }
/* CTA de conversión (Precalifícate/Agendar/WhatsApp) — gradiente, resalta */
html body .ce-bot-panel .ce-bot-opt--cta{
  background:linear-gradient(135deg,#1E5FFF,#0A4FE0) !important; color:#fff !important; font-weight:700;
  box-shadow:0 6px 16px -4px rgba(30,95,255,.5) !important;
}
html body .ce-bot-panel .ce-bot-opt--cta:hover{ filter:brightness(1.07); transform:translateY(-1px); color:#fff !important; }
/* "Que me contacten" — outline azul (acción secundaria) */
html body .ce-bot-panel .ce-bot-opt--cta2{
  background:#fff !important; border:1.5px solid #1E5FFF !important; color:#1E5FFF !important; font-weight:700;
  box-shadow:none !important;
}
html body .ce-bot-panel .ce-bot-opt--cta2:hover{ background:#EEF4FF !important; color:#1E5FFF !important; transform:none; }

/* ══ Formulario de captura ══ */
.ce-bot-lead{ display:flex; flex-direction:column; gap:8px; width:100%;
  background:#fff; border:1px solid #EAEFF6; border-radius:16px; padding:14px; }
.ce-bot-lead input,
.ce-bot-lead select{ border:1px solid #DDE5F0; border-radius:12px; padding:11px 14px; font-size:.9rem;
  outline:none; font-family:inherit; background:#fff; color:#1F2937; width:100%; }
.ce-bot-lead select{ cursor:pointer; appearance:auto; -webkit-appearance:auto; }
.ce-bot-lead select:invalid{ color:#94A3B8; }
.ce-bot-lead input:focus,
.ce-bot-lead select:focus{ border-color:#1E5FFF; }
.ce-bot-lead button{ border:0; border-radius:12px; padding:12px; cursor:pointer; font-weight:700; font-family:inherit;
  background:linear-gradient(135deg,#1E5FFF,#0A4FE0); color:#fff; font-size:.9rem; }
.ce-bot-lead button:disabled{ opacity:.5; cursor:default; }
.ce-bot-lead small{ font-size:.72rem; color:#94A3B8; text-align:center; }
.ce-bot-lead small a{ color:#64748B; }

@media (max-width:640px){
  .ce-bot-panel{
    bottom:calc(152px + env(safe-area-inset-bottom));
    right:12px; left:12px; width:auto;
    height:min(64vh, calc(100vh - 220px));
  }
}