/* Animación de escribiendo (tres puntitos) */
.cedive-typing { display:inline-flex; gap:2px; }
.cedive-typing span { animation:cedive-dot 1.2s infinite; font-size:2em; }
.cedive-typing span:nth-child(2) { animation-delay:.2s; }
.cedive-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes cedive-dot { 0%,100%{opacity:.3} 50%{opacity:1} }
/* Botón cerrar (X) mejorado */
.cedive-header #cedive-close {
  margin-left:auto;
  background:rgba(255,255,255,0.85);
  color:var(--cedive-accent);
  border:none;
  border-radius:50%;
  width:32px;
  height:32px;
  font-size:1.6em;
  font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,0.10);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .18s, color .18s, transform .18s;
}
.cedive-header #cedive-close:hover {
  background:var(--cedive-accent);
  color:#fff;
  transform:scale(1.12) rotate(-10deg);
}
/* Estilos para widget del chatbot CEDIVE */
:root{
  --cedive-bg:#fff;
  --cedive-accent:#06a6d6;
  --cedive-text:#222;
}
.cedive-launch {
  position: fixed;
  right: 40px;
  bottom: 40px;
  width: 150px;
  height: 150px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.cedive-launch-tooltip {
  position: absolute;
  bottom: 100%;
  left: 35%;
  transform: translate(-50%, -6px);
  background: rgba(255,255,255,0.95);
  color: var(--cedive-accent);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}

.cedive-launch-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 7px;
  border-style: solid;
  border-color: rgba(255,255,255,0.95) transparent transparent transparent;
}

.cedive-launch.show-tooltip .cedive-launch-tooltip,
.cedive-launch:hover .cedive-launch-tooltip,
.cedive-launch:focus-visible .cedive-launch-tooltip {
  transform: translate(-50%, -20px);
  opacity: 1;
  visibility: visible;
}

.cedive-launch.is-open .cedive-launch-tooltip {
  opacity: 0;
  transform: translate(-50%, -4px);
  visibility: hidden;
}

/* Efecto hover */
.cedive-launch:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(0, 174, 255, 0.6));
}

/* Opcional: efecto suave al hacer clic */
.cedive-launch:active {
  transform: scale(0.96);
  filter: drop-shadow(0 0 6px rgba(0, 174, 255, 0.4));
}

.cedive-launch-avatar{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

.cedive-launch{z-index:9999}


#cedive-chatbot {
  position: fixed;
  right: 60px;
  bottom: 60px;
  width: 320px !important;
  max-width: 320px !important;
  min-width: 320px !important;
  max-height: 500px !important;
  min-height: 500px !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(6, 74, 102, 0.18), 0 6px 18px rgba(0,0,0,0.08);
  border: 1px solid rgba(6,166,214,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(243,250,255,0.98) 100%);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  font-family: Arial,Helvetica,sans-serif;
  transform-origin: 100% 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.95);
  z-index: 10000;
  transition: opacity .36s cubic-bezier(.2,.8,.2,1), transform .36s cubic-bezier(.2,.8,.2,1);
}

.cedive-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.cedive-open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.cedive-open.cedive-opening {
  animation: cedive-pop .52s cubic-bezier(.2,.8,.2,1);
}

@keyframes cedive-pop{
  0%{opacity:0;transform:translateY(30px) scale(.9)}
  60%{opacity:1;transform:translateY(-10px) scale(1.06)}
  80%{transform:translateY(4px) scale(.98)}
  100%{transform:translateY(0) scale(1)}
}

/* botón flotante con pulso y pequeño rebote al abrir */
.cedive-launch{transition:transform .18s ease}
.cedive-launch.pulse{animation:cedive-pulse 2.6s infinite}
@keyframes cedive-pulse{0%{transform:scale(1)}50%{transform:scale(1.04)}100%{transform:scale(1)}}
.cedive-launch:active{transform:scale(.96)}

/* close animation */
.cedive-closing{animation:cedive-close .28s ease forwards}
@keyframes cedive-close{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(20px) scale(.94)}}
.cedive-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  background:linear-gradient(135deg, var(--cedive-accent), #048bbc);
  color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,0.12);
}
.cedive-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.85);box-shadow:0 4px 10px rgba(0,0,0,0.12)}
.cedive-title{font-weight:700;font-size:1.05rem;letter-spacing:.4px}
#cedive-messages{flex:1;padding:14px;overflow:auto;background:linear-gradient(180deg,#f6fbff 0%,#edf6fb 100%)}
.cedive-msg{margin-bottom:12px;display:flex;animation:cedive-float-in .28s ease}
.cedive-msg.bot{justify-content:flex-start}
.cedive-msg.client{justify-content:flex-end}
.msg-bubble{max-width:75%;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,0.92);color:var(--cedive-text);box-shadow:0 6px 18px rgba(13,85,119,0.08);border:1px solid rgba(6,166,214,0.08)}
.cedive-msg.bot .msg-bubble{background:#fff;border-color:rgba(6,166,214,0.1)}
.cedive-msg.client .msg-bubble{background:linear-gradient(135deg,var(--cedive-accent),#05b3e8);color:#fff;box-shadow:0 8px 18px rgba(4,139,188,0.35);border:none}
.cedive-msg.bot .msg-bubble a{color:#25D366;text-decoration:underline;font-weight:600;transition:color .2s ease}
.cedive-msg.bot .msg-bubble a:hover{color:#128C7E;text-decoration:none}
.cedive-form{display:flex;gap:10px;padding:10px 12px;border-top:1px solid rgba(6,166,214,0.16);background:rgba(255,255,255,0.96);backdrop-filter:blur(8px)}
.cedive-form input{flex:1;padding:10px 12px;border:1px solid rgba(6,166,214,0.18);border-radius:10px;font-size:.95rem;background:rgba(255,255,255,0.92);transition:border-color .2s, box-shadow .2s}
.cedive-form input:focus{outline:none;border-color:var(--cedive-accent);box-shadow:0 0 0 3px rgba(6,166,214,0.18)}
.cedive-form button{background:linear-gradient(135deg,var(--cedive-accent),#05b3e8);color:#fff;border:none;padding:10px 18px;border-radius:10px;cursor:pointer;box-shadow:0 10px 18px rgba(6,166,214,0.22);font-weight:600;transition:transform .18s ease, box-shadow .18s ease}
.cedive-form button:hover{transform:translateY(-1px);box-shadow:0 12px 22px rgba(6,166,214,0.28)}
.cedive-form button:active{transform:translateY(0);box-shadow:0 6px 14px rgba(6,166,214,0.2)}

@keyframes cedive-float-in{
  from{opacity:0;transform:translateY(6px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}



/* adaptativo */
@media (max-width:420px){
  /* El chatbot ocupa toda la pantalla */
  #cedive-chatbot {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: auto !important;
    min-height: auto !important;
    border-radius: 0;
    box-shadow: none;
    z-index: 10000;
  }

  /* Ajustes visuales internos */
  .cedive-header {
    border-radius: 0;
    padding: 12px;
  }

  #cedive-messages {
    padding: 14px;
  }

  .cedive-form {
    padding: 10px;
  }

  /* El botón flotante se hace más pequeño */
  .cedive-launch {
    right: 16px;
    bottom: 16px;
    width: 120px;
    height: 120px;
  }
  .cedive-launch-tooltip {
    font-size: 0.85rem;
    padding: 6px 14px;
    transform: translate(-60%, -4px);  
    font-size: 0.6;
  }
  .cedive-launch.show-tooltip .cedive-launch-tooltip,
  .cedive-launch:hover .cedive-launch-tooltip,
  .cedive-launch:focus-visible .cedive-launch-tooltip {
    transform: translate(-60%, -16px);
  }
}