/* ============================================================================
   WIDGET DE CHAT CODEINGENIO -- estilos
   ============================================================================

   TODAS las clases empiezan por "cgi-". No es manía: este CSS se carga DENTRO
   de codeingenio.com, junto al CSS del sitio. Si usáramos nombres genéricos
   como .boton o .mensaje, chocarían con los del sitio y se romperían mutuamente
   de formas difíciles de diagnosticar. El prefijo garantiza que nada de aquí
   afecte a la web ni al revés.

   Identidad: ámbar #F2A01E, Urbanist, negro y neutros.
   Prohibidos: el verde de WhatsApp (salvo en su botón), el morado y el bronce.

   EXCEPCIÓN, por decisión de marca: los orbes que giran alrededor de la
   burbuja flotante son morados y verde neón. Están fuera de la paleta a
   propósito — su trabajo es no pasar desapercibidos sobre una web ámbar y
   negra. La excepción empieza y termina en el botón flotante: dentro de la
   ventana del chat sigue mandando el ámbar.
   ============================================================================ */

.cgi-raiz {
  /* Los colores viven aquí. Para adaptar el widget a otro cliente basta con
     cambiar estas variables: ni una línea más del archivo. */
  --cgi-ambar: #F2A01E;
  --cgi-ambar-osc: #D98A12;
  --cgi-ambar-sua: rgba(242, 160, 30, .13);
  --cgi-negro: #0B0B0D;
  --cgi-panel: #141417;
  --cgi-panel-alt: #1C1C21;
  --cgi-borde: #2A2A31;
  --cgi-texto: #ECECEF;
  --cgi-tenue: #8B8B95;
  --cgi-wa: #25D366;          /* SOLO para el botón de WhatsApp */
  --cgi-radio: 16px;
  --cgi-sombra: 0 12px 40px rgba(0, 0, 0, .45);

  /* Separación de la burbuja respecto al borde inferior de la ventana.
     Se sube por encima de los 22px habituales para que no quede montada
     sobre el footer del sitio. Si en otro cliente el footer es más alto o
     más bajo, este es el único número que hay que tocar: la ventana del
     chat se recoloca sola a partir de él. */
  --cgi-margen-inf: 122px;

  /* Separación respecto al borde derecho. Mismo criterio que el margen
     inferior: se despega de la esquina para no chocar con lo que el sitio
     tenga ahí (botones de subir, avisos de cookies, el propio footer). */
  --cgi-margen-lat: 122px;

  font-family: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cgi-texto);
  -webkit-font-smoothing: antialiased;
}
.cgi-raiz *, .cgi-raiz *::before, .cgi-raiz *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
   MODO BURBUJA -- botón flotante y ventana emergente
   --------------------------------------------------------------------------- */
.cgi-burbuja-btn {
  position: fixed; right: var(--cgi-margen-lat); bottom: var(--cgi-margen-inf); z-index: 99998;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--cgi-ambar); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(242, 160, 30, .38);
  transition: transform .18s ease, box-shadow .18s ease;
  padding: 0;
}
.cgi-burbuja-btn:hover { transform: scale(1.07); box-shadow: 0 8px 28px rgba(242,160,30,.5); }
.cgi-burbuja-btn:active { transform: scale(.97); }
/* El destello NUNCA rota: ni en hover, ni al abrir, ni en animaciones.
   Lo que gira son las órbitas, que viven en su propio contenedor. */
.cgi-burbuja-btn svg { width: 27px; height: 27px; display: block; position: relative; z-index: 2; }

/* --- HALO ---------------------------------------------------------------
   Un aro ámbar que se expande y se desvanece cada 2,6 s. Es lo que hace que
   el ojo llegue a la burbuja aunque el resto de la web sea oscura y sobria.
   Va en ::after para no añadir un elemento más al DOM. */
.cgi-burbuja-btn::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--cgi-ambar);
  animation: cgi-halo 2.6s ease-out infinite;
  pointer-events: none; z-index: 0;
}
@keyframes cgi-halo {
  0%   { transform: scale(1);    opacity: .65; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}

/* --- ÓRBITAS ------------------------------------------------------------
   Tres anillos concéntricos de radio distinto, cada uno con un punto que lo
   recorre. Giran a velocidades distintas y el del medio al revés: si los tres
   fueran iguales el conjunto parecería una sola rueda, y lo que se busca es
   sensación de movimiento vivo.

   pointer-events: none es obligatorio. Los anillos son más grandes que el
   botón y sin esto se comerían los clics del borde. */
.cgi-orbitas {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.cgi-orbita {
  position: absolute; inset: -13px; border-radius: 50%;
  animation: cgi-orbitar 7s linear infinite;
}
.cgi-orbe {
  position: absolute; top: -3px; left: 50%; margin-left: -3px;
  width: 6px; height: 6px; border-radius: 50%;
}

/* Radios, velocidades y sentidos distintos para cada anillo. */
.cgi-orbita-1 { inset: -9px;  animation-duration: 5.5s; }
.cgi-orbita-2 { inset: -15px; animation-duration: 8s; animation-direction: reverse; }
.cgi-orbita-3 { inset: -21px; animation-duration: 11s; }

/* --- COLOR DE LOS ORBES ---
   Dos morados y un verde, por encargo. Se salen de la paleta de la marca a
   propósito: es justo lo que los hace saltar sobre una web ámbar y negra.

   El doble box-shadow no es capricho: el primero es el halo cercano y denso,
   el segundo el resplandor amplio y tenue. Con una sola sombra el punto se ve
   plano; con dos parece que emite luz.

   Los dos morados llevan tonos distintos por lo mismo que las órbitas llevan
   velocidades distintas: dos puntos idénticos se leen como repetición, dos
   parecidos se leen como profundidad. */
.cgi-orbita-1 .cgi-orbe {
  background: #A855F7;
  box-shadow: 0 0 10px 2px rgba(168, 85, 247, .9),
              0 0 20px 5px rgba(168, 85, 247, .45);
}
.cgi-orbita-2 .cgi-orbe {
  width: 5px; height: 5px; margin-left: -2.5px; top: -2.5px;
  background: #C77DFF;
  box-shadow: 0 0 9px 2px rgba(199, 125, 255, .9),
              0 0 18px 5px rgba(199, 125, 255, .4);
}
/* Verde deliberadamente lejos del #25D366 de WhatsApp: el widget tiene un
   botón de WhatsApp de verdad, y dos verdes parecidos en pantalla harían
   pensar que el orbe también lleva ahí. */
.cgi-orbita-3 .cgi-orbe {
  width: 5px; height: 5px; margin-left: -2.5px; top: -2.5px;
  background: #2BFFB0;
  box-shadow: 0 0 10px 2px rgba(43, 255, 176, .9),
              0 0 20px 5px rgba(43, 255, 176, .4);
}

@keyframes cgi-orbitar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Al abrir el chat el botón deja de reclamar atención: ya cumplió su función
   y seguir parpadeando pasaría de llamativo a molesto. */
.cgi-raiz.cgi-abierto .cgi-burbuja-btn::after,
.cgi-raiz.cgi-abierto .cgi-orbitas { opacity: 0; }
.cgi-burbuja-btn::after, .cgi-orbitas { transition: opacity .25s ease; }

/* --- MENSAJE FLOTANTE ---------------------------------------------------
   La invitación que aparece al lado de la burbuja unos segundos después de
   cargar la página. La burbuja llama la atención; esto explica para qué.

   Se apoya en las mismas variables de margen que el botón, así que sigue a
   la burbuja allá donde se la coloque sin tocar un solo número aquí. */
.cgi-invitacion {
  position: fixed; z-index: 99997;
  right: calc(var(--cgi-margen-lat) + 74px);   /* 58 del botón + 16 de aire */
  bottom: calc(var(--cgi-margen-inf) + 9px);   /* centrada con el botón */
  max-width: 236px;
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 13px;
  background: var(--cgi-panel);
  border: 1px solid var(--cgi-borde);
  border-radius: 13px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  font-size: 13.5px; line-height: 1.4; color: var(--cgi-texto);
  cursor: pointer;
  opacity: 0; transform: translateX(10px) scale(.96);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.cgi-invitacion.cgi-visible { opacity: 1; transform: none; pointer-events: auto; }
.cgi-invitacion:hover { border-color: var(--cgi-ambar); }

/* La puntita que apunta al botón. Un rombo girado 45° al que se le pintan
   solo los dos lados que quedan hacia fuera. */
.cgi-invitacion::after {
  content: ''; position: absolute; right: -5px; bottom: 17px;
  width: 9px; height: 9px;
  background: var(--cgi-panel);
  border-right: 1px solid var(--cgi-borde);
  border-top: 1px solid var(--cgi-borde);
  transform: rotate(45deg);
}
.cgi-invitacion-texto { flex: 1; }
.cgi-invitacion-texto strong { color: var(--cgi-ambar); font-weight: 600; }

/* La X de descartar. 24px de área táctil aunque el aspa mida 9:
   por debajo de eso, en móvil se falla el toque. */
.cgi-invitacion-cerrar {
  flex: none; width: 24px; height: 24px; margin: -3px -4px 0 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--cgi-tenue); border-radius: 6px; line-height: 1;
}
.cgi-invitacion-cerrar:hover { background: var(--cgi-panel-alt); color: var(--cgi-texto); }
.cgi-invitacion-cerrar svg { width: 12px; height: 12px; display: block; }

/* Con el chat abierto sobra: la invitación ya se aceptó. */
.cgi-raiz.cgi-abierto .cgi-invitacion {
  opacity: 0; transform: translateX(10px) scale(.96); pointer-events: none;
}

/* Puntito de aviso cuando hay mensaje de bienvenida sin leer */
.cgi-punto {
  position: absolute; top: 3px; right: 3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #E5484D; border: 2px solid var(--cgi-negro);
}

.cgi-ventana {
  position: fixed; right: var(--cgi-margen-lat); z-index: 99999;
  /* 70px = alto de la burbuja (58) + separación (12). La ventana se apoya
     siempre justo encima del botón, suba o baje éste. */
  bottom: calc(var(--cgi-margen-inf) + 70px);
  width: 384px; height: 588px;
  max-height: calc(100vh - var(--cgi-margen-inf) - 108px);
  /* Con el margen lateral separado del borde, en pantallas estrechas de
     escritorio los 384px se saldrían por la izquierda. */
  max-width: calc(100vw - var(--cgi-margen-lat) - 16px);
  background: var(--cgi-negro);
  border: 1px solid var(--cgi-borde); border-radius: var(--cgi-radio);
  box-shadow: var(--cgi-sombra);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(14px) scale(.98);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.cgi-ventana.cgi-abierta { opacity: 1; transform: none; pointer-events: auto; }

/* ---------------------------------------------------------------------------
   MODO INLINE -- incrustado en la página de contacto
   --------------------------------------------------------------------------- */
.cgi-raiz.cgi-modo-inline {
  display: block; width: 100%; height: 100%;
  min-height: 460px;
}
.cgi-raiz.cgi-modo-inline .cgi-ventana {
  position: static; width: 100%; height: 100%; min-height: 460px;
  max-height: none; right: auto; bottom: auto;
  opacity: 1; transform: none; pointer-events: auto;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   CABECERA
   --------------------------------------------------------------------------- */
.cgi-cabecera {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 17px; background: var(--cgi-panel);
  border-bottom: 1px solid var(--cgi-borde); flex: none;
}
.cgi-cabecera-icono {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--cgi-ambar-sua);
  display: flex; align-items: center; justify-content: center;
}
.cgi-cabecera-icono svg { width: 19px; height: 19px; }
.cgi-cabecera-txt { flex: 1; min-width: 0; }
.cgi-cabecera-titulo { font-weight: 700; font-size: 15px; }
.cgi-cabecera-est { font-size: 12px; color: var(--cgi-tenue); display: flex;
                    align-items: center; gap: 5px; }
.cgi-punto-vivo { width: 6px; height: 6px; border-radius: 50%; background: #3FB950; }
.cgi-cerrar {
  background: none; border: none; color: var(--cgi-tenue); cursor: pointer;
  padding: 6px; border-radius: 7px; line-height: 0; flex: none;
}
.cgi-cerrar:hover { background: var(--cgi-panel-alt); color: var(--cgi-texto); }

/* ---------------------------------------------------------------------------
   MENSAJES
   --------------------------------------------------------------------------- */
.cgi-mensajes {
  flex: 1; overflow-y: auto; padding: 17px;
  display: flex; flex-direction: column; gap: 11px;
  scrollbar-width: thin; scrollbar-color: var(--cgi-borde) transparent;
}
.cgi-mensajes::-webkit-scrollbar { width: 7px; }
.cgi-mensajes::-webkit-scrollbar-thumb { background: var(--cgi-borde); border-radius: 4px; }

.cgi-msg {
  max-width: 85%; padding: 11px 14px; border-radius: 14px;
  font-size: 14.5px; word-wrap: break-word; overflow-wrap: anywhere;
  animation: cgi-entrada .22s ease;
}
@keyframes cgi-entrada {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
.cgi-msg-bot {
  background: var(--cgi-panel); border: 1px solid var(--cgi-borde);
  border-bottom-left-radius: 5px; align-self: flex-start;
}
.cgi-msg-yo {
  background: var(--cgi-ambar); color: #1A1206; font-weight: 500;
  border-bottom-right-radius: 5px; align-self: flex-end;
}
.cgi-msg strong { font-weight: 700; }
.cgi-msg a { color: var(--cgi-ambar); text-decoration: underline; }
.cgi-msg-yo a { color: #1A1206; }
.cgi-msg ul { margin: 6px 0 0; padding-left: 19px; }
.cgi-msg li { margin-bottom: 3px; }

/* Indicador de "escribiendo": tres puntos que rebotan */
.cgi-escribiendo {
  display: flex; gap: 4px; padding: 13px 15px;
  background: var(--cgi-panel); border: 1px solid var(--cgi-borde);
  border-radius: 14px; border-bottom-left-radius: 5px;
  align-self: flex-start; width: fit-content;
}
.cgi-escribiendo span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cgi-tenue);
  animation: cgi-rebote 1.3s infinite;
}
.cgi-escribiendo span:nth-child(2) { animation-delay: .18s; }
.cgi-escribiendo span:nth-child(3) { animation-delay: .36s; }
@keyframes cgi-rebote {
  0%, 60%, 100% { transform: none; opacity: .45; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Cursor parpadeante mientras llega el streaming */
.cgi-cursor {
  display: inline-block; width: 2px; height: 15px; background: var(--cgi-ambar);
  margin-left: 2px; vertical-align: text-bottom; animation: cgi-parpadeo .9s infinite;
}
@keyframes cgi-parpadeo { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

/* ---------------------------------------------------------------------------
   SUGERENCIAS RÁPIDAS
   --------------------------------------------------------------------------- */
.cgi-sugerencias { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 17px 13px; flex: none; }
.cgi-sug {
  background: transparent; border: 1px solid var(--cgi-borde);
  color: var(--cgi-texto); padding: 7px 13px; border-radius: 18px;
  font-size: 13px; cursor: pointer; font-family: inherit;
  transition: border-color .15s, color .15s, background .15s;
}
.cgi-sug:hover { border-color: var(--cgi-ambar); color: var(--cgi-ambar);
                 background: var(--cgi-ambar-sua); }

/* ---------------------------------------------------------------------------
   ENTRADA DE TEXTO
   --------------------------------------------------------------------------- */
.cgi-pie { padding: 13px 15px; background: var(--cgi-panel);
           border-top: 1px solid var(--cgi-borde); flex: none; }
.cgi-entrada { display: flex; gap: 9px; align-items: flex-end; }
.cgi-texto {
  flex: 1; background: var(--cgi-negro); border: 1px solid var(--cgi-borde);
  border-radius: 12px; padding: 11px 13px; color: var(--cgi-texto);
  font-family: inherit; font-size: 14.5px; resize: none;
  max-height: 108px; min-height: 42px; line-height: 1.4;
  /* 16px en móvil evita que iOS haga zoom automático al enfocar el campo,
     un salto visual muy molesto que descoloca toda la página. */
}
@media (max-width: 480px) { .cgi-texto { font-size: 16px; } }
.cgi-texto:focus { outline: none; border-color: var(--cgi-ambar); }
.cgi-texto::placeholder { color: var(--cgi-tenue); }

.cgi-enviar {
  background: var(--cgi-ambar); border: none; border-radius: 12px;
  width: 42px; height: 42px; flex: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: filter .15s, opacity .15s;
}
.cgi-enviar:hover:not(:disabled) { filter: brightness(1.1); }
.cgi-enviar:disabled { opacity: .38; cursor: not-allowed; }
.cgi-enviar svg { width: 18px; height: 18px; }

.cgi-legal { text-align: center; font-size: 11px; color: var(--cgi-tenue); margin-top: 9px; }
.cgi-legal a { color: var(--cgi-tenue); text-decoration: underline; }

/* Botón de WhatsApp: el ÚNICO sitio donde se permite el verde de WhatsApp. */
.cgi-wa-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--cgi-wa); color: #04310F; font-weight: 600; font-size: 13.5px;
  padding: 8px 14px; border-radius: 10px; text-decoration: none; margin-top: 9px;
}
.cgi-wa-btn:hover { filter: brightness(1.07); text-decoration: none; }
.cgi-wa-btn svg { width: 16px; height: 16px; }

.cgi-error {
  background: rgba(229,72,77,.12); border: 1px solid rgba(229,72,77,.35);
  color: #FF9DA0; font-size: 13.5px; padding: 10px 13px; border-radius: 11px;
  align-self: stretch;
}

/* ---------------------------------------------------------------------------
   MÓVIL -- la ventana pasa a ocupar la pantalla completa
   --------------------------------------------------------------------------- */
@media (max-width: 520px) {
  .cgi-raiz:not(.cgi-modo-inline) .cgi-ventana {
    right: 0; bottom: 0; left: 0; top: 0;
    width: 100%; height: 100%; border-radius: 0; border: none;
    /* Los dos topes se anulan: en móvil la ventana ocupa la pantalla entera.
       Sin resetear max-width, el tope del escritorio (100vw menos los
       márgenes) seguía aplicándose aquí y dejaba la ventana más estrecha que
       la pantalla, pegada a la izquierda por el left: 0. Eso era el chat
       "corrido de lado". */
    max-height: none; max-width: none;
  }
  /* Se ajustan las variables, no las reglas: así el botón y el mensaje
     flotante se recolocan juntos sin repetir números.
     76px de alto (menos que los 122 del escritorio, porque en pantalla corta
     subirla tanto la dejaría en mitad del contenido) y el lateral pegado al
     borde, que en móvil no sobra ancho. */
  .cgi-raiz { --cgi-margen-inf: 76px; --cgi-margen-lat: 16px; }

  /* El anillo exterior se recorta: 21px de radio extra pegados al borde
     derecho se salen de la pantalla en móvil. */
  .cgi-orbita-3 { display: none; }

  /* En pantallas de 320px los 236px fijos se salían por la izquierda. */
  .cgi-invitacion {
    max-width: calc(100vw - var(--cgi-margen-lat) - 88px);
  }
}

/* Respeta a quien pidió menos animaciones en su sistema operativo.
   Es accesibilidad real: hay personas con trastornos vestibulares a las que
   el movimiento en pantalla les provoca mareo. */
@media (prefers-reduced-motion: reduce) {
  .cgi-raiz *, .cgi-raiz *::before, .cgi-raiz *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
  /* Las órbitas y el halo se ocultan del todo. Congelarlos dejaría tres
     puntos clavados en el mismo sitio y un aro fijo alrededor del botón:
     ruido visual sin ningún propósito. El botón sigue siendo un botón. */
  .cgi-orbitas, .cgi-burbuja-btn::after { display: none; }
}