/* ELENA-WEB — GENERADO: no se edita a mano.
   Fuente: plugin/plantillas/elena.css (partida del bloque de la pagina de pruebas el 23/09/2026,
   elena_web_bloque.html 35.834 / 67d33c76, ya sin el boton Continuar).
   ---------------------------------------------------------------------------------
   Estilos del widget flotante y de la ventana de conversacion. NO estan aqui los de la tarjeta
   CTA de media pagina: el fondo, la animacion y los textos los pone Alberto con Elementor en
   cada pagina; el boton es del modulo CTA (plantilla cta.css).

   23/09/2026- la animacion de la casilla se llama ew-resalte-latido. El 21/09 se le puso el
   mismo nombre que a la de la X, la segunda pisaba a la primera y la X dejo de latir en rojo.
   El guardian aborta ahora si dos @keyframes se llaman igual en cualquier CSS del plugin.      */

/* ======================= WIDGET FLOTANTE ======================= */
.ew-widget-on .joinchat { display: none !important; }
#ew-widget { position: fixed; right: 20px; bottom: 20px; z-index: 99990; display: none; align-items: flex-end; gap: 10px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
#ew-widget.ew-visible { display: flex; }
#ew-widget-boton { width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; flex-shrink: 0;
  background: var(--ew-avatar-fondo, #2563EB) var(--ew-avatar, none) 50% 15% / 130% no-repeat; color: #fff;
  box-shadow: 0 0 0 3px #fff, 0 0 12px 4px rgba(30,110,255,.6), 0 6px 18px rgba(0,0,0,.25); transition: transform .15s; }
#ew-widget-boton:hover { transform: scale(1.06); }
#ew-widget-saludo { display: none; position: relative; background: #fff; color: #111; font-size: 14px; line-height: 1.45; padding: 10px 30px 10px 14px; border-radius: 14px; border-bottom-right-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.18); max-width: 230px; cursor: pointer; margin-bottom: 10px; }
#ew-widget-saludo.ew-visible { display: block; }
#ew-widget-saludo-x { position: absolute; top: 4px; right: 6px; border: 0; background: transparent; color: #999; font-size: 14px; cursor: pointer; line-height: 1; padding: 4px; }
.ew-abierto #ew-widget { display: none; }

/* ======================= LA FOTO, O LA E (1.1.4, 29/09/2026) =======================
   La foto se elige en Ajustes -> Forms ASC. Con foto, el plugin imprime en la cabecera de la pagina tres
   variables: --ew-avatar (la foto), --ew-avatar-fondo (blanco) y --ew-avatar-letra (vacia). SIN esas variables
   —no hay foto, o la pagina viene de una cache anterior, o el estilo de la cabecera no llega— lo que se pinta
   por defecto es un circulo azul #2563EB con una E blanca (decision de Alberto). Es a proposito que el valor
   por defecto sea la E y no la foto: asi no existe ningun estado en el que ELENA salga con un circulo en blanco.
   No se toca display, para no pisar que el avatar grande solo exista en pantalla ancha y el pequeno en movil. */
#ew-widget-boton::after, #ew-avatar-mini::after, #ew-avatar::after {
  content: var(--ew-avatar-letra, "E"); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-family: "League Spartan", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 700; line-height: 1; color: #fff; }
#ew-widget-boton::after { font-size: 30px; }
#ew-avatar-mini::after { font-size: 20px; }
#ew-avatar::after { font-size: 68px; }

/* ======================= INTERFAZ ======================= */
#ew-overlay { display: none; position: fixed; inset: 0; z-index: 999999; background: rgba(10,10,30,.55); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); align-items: center; justify-content: center; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
#ew-overlay.ew-activo { display: flex; }
#ew-overlay *, #ew-overlay *::before, #ew-overlay *::after { box-sizing: border-box; }
#ew-modal { position: relative; background: #efefef; display: flex; flex-direction: column; }
#ew-contenido { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* Cabecera */
#ew-cabecera { position: relative; display: flex; align-items: center; gap: 12px; background: #efefef; border-bottom: 1px solid #ddd; flex-shrink: 0; }
#ew-avatar-mini { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: var(--ew-avatar-fondo, #2563EB) var(--ew-avatar, none) 50% 15% / 130% no-repeat; color: #fff; box-shadow: 0 0 0 2px #c0c0c0, 0 0 8px 2px rgba(30,110,255,.55); }
#ew-nombre { font-size: 18px; font-weight: 700; color: #111; display: flex; align-items: center; gap: 7px; }
.ew-insignia { background: #1d72e8; color: #fff; border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
#ew-rol { color: #777; font-size: 13px; margin-top: 2px; }
#ew-estado { color: #22c55e; font-size: 12px; font-weight: 600; margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.ew-punto { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 5px #22c55e; }

/* La X: discreta mientras se habla, roja y latiendo despacio cuando ELENA da la conversacion por terminada */
#ew-cerrar { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #efefef; color: #9a9a9a; font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 20; transition: background .3s, color .3s; }
#ew-cerrar:hover { background: #e2e2e2; color: #666; }
#ew-cerrar.ew-fin { background: #e0524a; color: #fff; animation: ew-latido 2.2s ease-in-out infinite; }
#ew-cerrar.ew-fin:hover { background: #c9433c; }
@keyframes ew-latido {
  0%   { box-shadow: 0 0 0 0 rgba(224,82,74,.55); transform: scale(1); }
  50%  { box-shadow: 0 0 0 9px rgba(224,82,74,0); transform: scale(1.08); }
  100% { box-shadow: 0 0 0 0 rgba(224,82,74,0); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { #ew-cerrar.ew-fin { animation: none; } }

/* Mensajes */
#ew-mensajes { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; background: #f2f2f2; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#ew-mensajes::-webkit-scrollbar { width: 5px; }
#ew-mensajes::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.ew-burbuja { position: relative; max-width: 80%; padding: 8px 12px 18px; border-radius: 16px; line-height: 1.5; word-break: break-word; white-space: pre-line; }
.ew-burbuja.ew-bot { background: #fff; color: #111; border-top-left-radius: 4px; align-self: flex-start; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.ew-burbuja.ew-cliente { background: #1d72e8; color: #fff; border-top-right-radius: 4px; align-self: flex-end; box-shadow: 0 1px 2px rgba(29,114,232,.3); }
.ew-hora { position: absolute; right: 10px; bottom: 3px; font-size: 10.5px; opacity: .6; }
.ew-escribiendo { display: flex; gap: 5px; align-self: flex-start; padding: 12px 14px; background: #fff; border-radius: 16px; border-top-left-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.ew-escribiendo span { width: 8px; height: 8px; background: #999; border-radius: 50%; animation: ew-bote 1.2s infinite; }
.ew-escribiendo span:nth-child(2) { animation-delay: .2s; }
.ew-escribiendo span:nth-child(3) { animation-delay: .4s; }
@keyframes ew-bote { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

/* Botones de respuesta */
.ew-opciones { display: flex; flex-wrap: wrap; gap: 8px; align-self: stretch; justify-content: flex-end; margin-top: 2px; }
.ew-opcion { background: #fff; color: #1d72e8; border: 1.5px solid #1d72e8; border-radius: 20px; padding: 9px 16px; font-family: inherit; font-size: 14.5px; line-height: 1.3; cursor: pointer; text-align: left; transition: background .15s, color .15s; }
.ew-opcion:hover { background: #1d72e8; color: #fff; }

/* Casillas y zona de escritura */
#ew-pie-conversacion { flex-shrink: 0; background: #fff; border-top: 1px solid #e0e0e0; }
.ew-casilla { display: none; align-items: flex-start; gap: 10px; padding: 0 16px 10px; font-size: 13px; line-height: 1.45; color: #333; }
.ew-casilla.ew-visible { display: flex; }
.ew-casilla input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: #1d72e8; cursor: pointer; }
.ew-casilla a { color: #1d72e8; }
.ew-casilla-texto { flex: 1; }
/* 21/09/2026, decision de Alberto. Cuando ELENA vuelve a pedir la misma casilla, la casilla late en el azul
   del marco del avatar para llevar la vista del cliente al punto exacto. Se apaga en cuanto la marca. */
.ew-casilla.ew-resalte { margin: 0 10px 10px; padding: 8px 8px 8px 10px; border-radius: 12px; background: rgba(30,110,255,.07); animation: ew-resalte-latido 1.6s ease-in-out infinite; }
@keyframes ew-resalte-latido {
  0%, 100% { box-shadow: 0 0 0 1px rgba(30,110,255,.45), 0 0 0 0 rgba(30,110,255,.30); }
  50% { box-shadow: 0 0 0 2px rgba(30,110,255,.80), 0 0 10px 3px rgba(30,110,255,.45); }
}
@media (prefers-reduced-motion: reduce) { .ew-casilla.ew-resalte { animation: none; box-shadow: 0 0 0 2px rgba(30,110,255,.80); } }
#ew-escritura { display: flex; align-items: flex-end; gap: 10px; }
#ew-campo-caja { flex: 1; min-width: 0; background: #f2f2f2; border-radius: 22px; padding: 0 16px; display: flex; align-items: center; }
#ew-texto, #ew-dato { flex: 1; width: 100%; border: 0; outline: 0; background: transparent; resize: none; font-family: inherit; font-size: 16px; line-height: 1.45; color: #111; padding: 10px 0; }
#ew-texto { max-height: 120px; overflow-y: auto; }
#ew-dato { display: none; }
#ew-texto::placeholder, #ew-dato::placeholder { color: #aaa; }
#ew-enviar { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; background: #1d72e8; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, opacity .15s; }
#ew-enviar:hover { background: #1560c5; }
#ew-enviar:disabled { opacity: .45; cursor: default; }
#ew-enviar::after { content: ''; display: block; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 13px solid #fff; margin-left: 3px; }

/* ---- PC y tablet en horizontal: ventana ancha sobre el ahumado ---- */
@media (min-width: 768px) and (min-height: 520px) and (orientation: landscape) {
  #ew-overlay { padding: 24px; }
  #ew-modal { width: 92vw; max-width: 760px; height: calc(88vh - 72px); max-height: 760px; min-height: 460px; margin-top: 72px; border-radius: 28px; box-shadow: 0 24px 64px rgba(0,0,0,.35); }
  #ew-contenido { border-radius: 28px; }
  #ew-avatar { position: absolute; top: -72px; left: -16px; width: 148px; height: 148px; border-radius: 50%; z-index: 10; background: var(--ew-avatar-fondo, #2563EB) var(--ew-avatar, none) 50% 15% / 130% no-repeat; color: #fff;
    box-shadow: 0 0 0 3px #c0c0c0, 0 0 18px 8px rgba(30,110,255,.85), 0 0 40px 20px rgba(15,70,220,.45), 0 0 70px 30px rgba(10,50,180,.2); }
  #ew-avatar-mini { display: none; }
  #ew-cabecera { padding: 16px 60px 14px 148px; min-height: 88px; }
  #ew-nombre { font-size: 20px; }
  #ew-mensajes { padding: 18px 28px; }
  .ew-burbuja { font-size: 15px; max-width: 72%; }
  #ew-escritura { padding: 12px 20px; }
  .ew-casilla { padding: 0 24px 12px; }
}

/* ---- Móvil y tablet en vertical: pantalla completa, al modo de WhatsApp ---- */
@media not all and (min-width: 768px) and (min-height: 520px) and (orientation: landscape) {
  #ew-overlay { padding: 0; align-items: stretch; justify-content: stretch; -webkit-backdrop-filter: none; backdrop-filter: none; background: #efefef; }
  #ew-modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; }
  #ew-avatar { display: none; }
  #ew-cabecera { padding: 10px 56px 10px 14px; min-height: 62px; padding-top: max(10px, env(safe-area-inset-top)); }
  #ew-cerrar { top: 15px; top: calc(max(10px, env(safe-area-inset-top)) + 5px); }
  #ew-rol { font-size: 12.5px; }
  #ew-estado { display: none; }
  #ew-mensajes { padding: 12px 10px; }
  .ew-burbuja { font-size: 15.5px; max-width: 85%; }
  .ew-opciones { flex-direction: column; align-items: flex-end; }
  .ew-opcion { font-size: 15.5px; padding: 10px 16px; }
  #ew-escritura { padding: 8px 8px; }
  #ew-pie-conversacion { padding-bottom: env(safe-area-inset-bottom); }
}