/* === Plexi widget: chatbot/mascota flotante ===============================
   Markup lo inyecta widget.js; las páginas solo necesitan importar el CSS
   y llamar Plexi.init({ ... }). El widget se autoposiciona fixed.
   ========================================================================= */

.plexi-widget{
  position:fixed; bottom:10px; z-index:1050;
  display:flex; align-items:flex-end; gap:6px;
  pointer-events:none;
}
.plexi-widget.plxw-left { left:10px; }
.plexi-widget.plxw-right{ right:10px; }

.plexi-widget .plxw-scaler{
  position:relative;
  animation:plxBob 4s ease-in-out infinite;
}
@keyframes plxBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.plexi-widget .plxw-stage{
  position:absolute; bottom:0;
  width:340px; height:500px;
  pointer-events:auto; cursor:pointer;
}
.plexi-widget.plxw-left  .plxw-stage{ left:0;  transform-origin:bottom left;  }
.plexi-widget.plxw-right .plxw-stage{ right:0; transform-origin:bottom right; }

.plexi-widget .plxw-stage img{
  position:absolute;
  user-select:none; -webkit-user-drag:none; pointer-events:none;
}
.plexi-widget .plxw-body { left:0; top:0; width:340px;
  transform: scaleX(var(--plxw-fx, 1)); transform-origin:50% 50%; }
.plexi-widget .plxw-eyes { transition:transform .12s ease-out;
  transform: scaleX(var(--plxw-fx, 1)); transform-origin:50% 50%; }
.plexi-widget .plxw-mouth{ transition:transform .08s ease-out;
  transform: scaleX(var(--plxw-fx, 1)); transform-origin:50% 50%; }
.plexi-widget .plxw-eyes.plxw-blink{
  transform: scaleX(var(--plxw-fx, 1)) scaleY(.08); }

/* Cuando el wrap está marcado como volteado, los sprites se espejan vía variable CSS */
.plexi-widget.plxw-flip{ --plxw-fx: -1; }

/* Cuerpos con cara dibujada (plexi_celebrate, plexi_sad): ocultar sprites */
.plexi-widget.plxw-face-baked .plxw-eyes,
.plexi-widget.plxw-face-baked .plxw-mouth{ display:none; }

/* Globo de diálogo */
.plexi-widget .plxw-bubble{
  position:relative;
  max-width:220px; min-width:140px;
  background:#fff; border:2px solid #1f2937; border-radius:14px;
  padding:9px 12px; font-size:13px; line-height:1.35; color:#1f2937;
  box-shadow:0 4px 0 rgba(0,0,0,.08);
  opacity:0; transform:translateY(6px) scale(.96);
  transition:opacity .18s ease, transform .18s ease;
  margin-bottom:30px;
}
.plexi-widget .plxw-bubble.show{ opacity:1; transform:none; }

/* Cola del globo apuntando a Plexi (depende del lado) */
.plexi-widget .plxw-bubble::before,
.plexi-widget .plxw-bubble::after{
  content:""; position:absolute; bottom:14px; border:9px solid transparent;
}
.plexi-widget.plxw-left  .plxw-bubble::before{ left:-16px;  border-right-color:#1f2937; }
.plexi-widget.plxw-left  .plxw-bubble::after { left:-13px;  border-right-color:#fff; }
.plexi-widget.plxw-right .plxw-bubble::before{ right:-16px; border-left-color:#1f2937; }
.plexi-widget.plxw-right .plxw-bubble::after { right:-13px; border-left-color:#fff; }

.plexi-widget .plxw-caret{
  display:inline-block; width:1ch;
  animation:plxCaret 1s steps(2) infinite;
}
@keyframes plxCaret{ 50%{opacity:0} }

/* Ocultar en móvil para no estorbar */
@media (max-width:767.98px){ .plexi-widget{ display:none; } }

/* Estado cerrado (lo controla la página vía clase) */
.plexi-widget.plxw-closed{ display:none !important; }

/* Pulso para llamar la atención sobre el botón de ayuda durante el tour */
@keyframes plxwBtnPulse{
  0%,100% { box-shadow: 0 0 0 0 rgba(23,162,184,.55); }
  50%     { box-shadow: 0 0 0 10px rgba(23,162,184,0); }
}
.plxw-pulse{
  animation: plxwBtnPulse 1.4s ease-out infinite;
  border-color:#17a2b8 !important;
}

/* === Modo chat: bubble más amplio + input + botón enviar ============= */
.plexi-widget.plxw-chat .plxw-bubble{
  max-width:340px; min-width:240px;
  padding-bottom:10px;
}
.plexi-widget .plxw-chatform{
  display:none;
  margin-top:10px;
  border-top:1px dashed #d1d5db;
  padding-top:8px;
  gap:6px;
  align-items:stretch;
}
.plexi-widget.plxw-chat .plxw-chatform{ display:flex; }
.plexi-widget .plxw-chatform input{
  flex:1; min-width:0;
  border:1px solid #cbd5e1; border-radius:8px;
  padding:6px 10px; font:inherit; font-size:13px;
  outline:none; pointer-events:auto;
  background:#f9fafb;
}
.plexi-widget .plxw-chatform input:focus{
  border-color:#17a2b8; background:#fff;
}
.plexi-widget .plxw-chatform button{
  border:0; background:#17a2b8; color:#fff;
  border-radius:8px; padding:6px 12px; cursor:pointer;
  font:600 13px inherit; pointer-events:auto;
}
.plexi-widget .plxw-chatform button:disabled{
  background:#9ca3af; cursor:not-allowed;
}
.plexi-widget .plxw-chatform button:hover:not(:disabled){ filter:brightness(1.05); }

.plexi-widget .plxw-counter{
  display:none;
  margin-top:4px;
  font-size:10px; color:#9ca3af;
  text-align:right; line-height:1;
}
.plexi-widget.plxw-chat .plxw-counter{ display:block; }

/* "Pensando..." mientras la IA responde */
.plxw-thinking{
  display:inline-block;
  font-style:italic; color:#6b7280;
}
.plxw-thinking::after{
  content:''; display:inline-block; width:1.5ch;
  animation: plxwDots 1.2s steps(4) infinite;
  overflow:hidden; vertical-align:bottom;
}
@keyframes plxwDots{
  0%   { content:''; }
  25%  { content:'.'; }
  50%  { content:'..'; }
  75%  { content:'...'; }
  100% { content:''; }
}
/* fallback para navegadores que no soportan content en keyframes */
@supports not (content: ''){
  .plxw-thinking::after{ content:'...'; animation:none; }
}

/* === Launcher: mini botón flotante para invocar a Plexi cuando está cerrado === */
.plx-launcher{
  position:fixed; bottom:18px; right:18px;
  z-index:1049;
  width:60px; height:60px;
  border-radius:50%;
  border:3px solid #fff;
  background:#dbeafe url('plexi_1.png') no-repeat center center / 90% auto;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .2s ease;
  padding:0;
}
.plx-launcher:hover{
  transform:scale(1.08);
  box-shadow:0 6px 20px rgba(0,0,0,.22);
}
.plx-launcher::after{
  content:'?';
  position:absolute; top:-4px; right:-4px;
  width:22px; height:22px; border-radius:50%;
  background:#17a2b8; color:#fff;
  font:700 13px/22px system-ui,sans-serif;
  text-align:center;
  border:2px solid #fff;
}
/* Ocultar cuando Plexi está abierto (lo controla JS) */
.plx-launcher.plx-launcher-hidden{ display:none; }

/* Ocultar en móvil igual que el widget */
@media (max-width:767.98px){ .plx-launcher{ display:none; } }

/* Botón de cerrar manual (lo dibuja la página, no widget.js) */
.plexi-widget .plxw-close{
  position:absolute; top:-6px; right:-6px;
  width:26px; height:26px; border-radius:50%;
  background:#fff; border:2px solid #1f2937; color:#1f2937;
  font:600 14px/1 system-ui,sans-serif; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 0 rgba(0,0,0,.08);
  pointer-events:auto; z-index:2;
}
.plexi-widget .plxw-close:hover{ background:#fee2e2; }