/* ═══════════════════════════════════════════════════════════════
   BATSKILL · estilos oficiales de la mascota de Webskill
   Usa los tokens del brand book. Ningún color fuera del sistema.
   ═══════════════════════════════════════════════════════════════ */

.ws-batskill{
  position:fixed;
  left:22px;              /* esquina inferior IZQUIERDA · el WhatsApp se queda con la derecha */
  bottom:22px;
  z-index:999999 !important;
  display:flex;
  flex-direction:row-reverse;   /* personaje a la izquierda, globo a su derecha */
  align-items:flex-end;
  gap:10px;
  opacity:0;
  visibility:hidden;
  transform:translateY(16px);
  transition:opacity 450ms cubic-bezier(.16,1,.3,1),
             transform 450ms cubic-bezier(.16,1,.3,1),
             visibility 0s linear 450ms;
}
.ws-batskill[data-visible="true"]{
  opacity:1;
  visibility:visible;
  transform:none;
  transition-delay:0s;
}

/* ── El personaje ─────────────────────────────────────────── */
.ws-batskill__sprite{
  width:96px;
  height:96px;
  display:grid;
  place-items:center;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  cursor:pointer;
  border:none;
  padding:0;
  background-color:transparent;   /* nunca un círculo de color detrás */
  animation:batskillFlota 3.4s ease-in-out infinite;
  transition:transform 300ms cubic-bezier(.16,1,.3,1);
}
.ws-batskill__sprite-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  pointer-events:none;
}
.ws-batskill[data-panel="true"] .ws-batskill__sprite{
  width:192px;
  height:192px;
}
.ws-batskill__sprite[data-pose="idle"]   {background-image:url("poses/batskill-idle.png")}
.ws-batskill__sprite[data-pose="hello"]  {background-image:url("poses/batskill-hello.png")}
.ws-batskill__sprite[data-pose="fly"]    {background-image:url("poses/batskill-fly.png")}
.ws-batskill__sprite[data-pose="think"]  {background-image:url("poses/batskill-think.png")}
.ws-batskill__sprite[data-pose="work"]   {background-image:url("poses/batskill-work.png")}
.ws-batskill__sprite[data-pose="success"]{background-image:url("poses/batskill-success.png")}
.ws-batskill__sprite[data-pose="error"]  {background-image:url("poses/batskill-error.png")}

.ws-batskill__sprite:focus-visible{
  outline:2px solid var(--ws-azulejo,#1F5FA8);
  outline-offset:4px;
}

/* Entrada: llega volando desde la izquierda, fuera de pantalla */
.ws-batskill[data-entrando="true"] .ws-batskill__sprite{
  animation:batskillEntra 600ms cubic-bezier(.16,1,.3,1);
}
@keyframes batskillEntra{
  0%  {transform:translate(-90px,-30px) scale(.84)}
  60% {transform:translate(10px,4px) scale(1.03)}
  100%{transform:translate(0,0) scale(1)}
}

/* Flotación permanente, muy leve */
@keyframes batskillFlota{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-7px)}
}

/* ── Gesto: se aparta al pasar el ratón ───────────────────── */
.ws-batskill[data-gesto="esquiva"] .ws-batskill__sprite{
  animation:batskillEsquiva 700ms cubic-bezier(.34,1.56,.64,1);
}
@keyframes batskillEsquiva{
  0%  {transform:translate(0,0) rotate(0)}
  30% {transform:translate(14px,-10px) rotate(8deg)}
  60% {transform:translate(-6px,-4px) rotate(-4deg)}
  100%{transform:translate(0,0) rotate(0)}
}

/* ── Gesto: saludo con rebote al reclamar atención ────────── */
.ws-batskill[data-gesto="saluda"] .ws-batskill__sprite{
  animation:batskillSaluda 900ms cubic-bezier(.34,1.56,.64,1);
}
@keyframes batskillSaluda{
  0%  {transform:translateY(0) scale(1)}
  25% {transform:translateY(-14px) scale(1.06)}
  50% {transform:translateY(0) scale(1)}
  70% {transform:translateY(-7px) scale(1.03)}
  100%{transform:translateY(0) scale(1)}
}

/* ── Globo de diálogo ─────────────────────────────────────── */
.ws-batskill__globo{
  position:relative;
  max-width:220px;
  margin-bottom:18px;
  padding:11px 15px;
  background:var(--ws-fondo-azul,#174A85);
  color:var(--ws-papel,#FDFDFB);
  font-family:var(--ws-font,'Onest',sans-serif);
  font-size:13.5px;
  font-weight:600;
  line-height:1.4;
  opacity:0;
  transform:translateX(-10px) scale(.96);
  transform-origin:left bottom;
  pointer-events:none;
  transition:opacity 300ms cubic-bezier(.16,1,.3,1),
             transform 300ms cubic-bezier(.16,1,.3,1);
}
.ws-batskill[data-hablando="true"] .ws-batskill__globo{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.ws-batskill[data-panel="true"] .ws-batskill__globo{
  opacity:0;
  pointer-events:none;
}
.ws-batskill__globo::after{
  content:"";
  position:absolute;
  left:-7px;
  bottom:14px;
  border:7px solid transparent;
  border-right-color:var(--ws-fondo-azul,#174A85);
  border-left:0;
}

/* ── Botón de cierre ──────────────────────────────────────── */
.ws-batskill__cerrar{
  position:absolute;
  top:-6px;
  left:-6px;
  width:44px;              /* área táctil mínima */
  height:44px;
  display:grid;
  place-items:center;
  background:transparent;
  border:none;
  cursor:pointer;
  opacity:0;
  transition:opacity 200ms;
}
.ws-batskill:hover .ws-batskill__cerrar,
.ws-batskill__cerrar:focus-visible{opacity:1}
.ws-batskill__cerrar::before{
  content:"";
  width:22px;height:22px;
  background:var(--ws-fondo-azul,#174A85);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.ws-batskill__cerrar::after{
  content:"×";
  position:absolute;
  color:var(--ws-papel,#FDFDFB);
  font-size:15px;
  line-height:1;
  font-family:var(--ws-font,'Onest',sans-serif);
}

/* ── Panel conversacional ────────────────────────────────── */
.ws-batskill__panel{
  position:absolute;
  left:176px;
  bottom:8px;
  width:min(380px,calc(100vw - 230px));
  max-height:min(560px,calc(100vh - 48px));
  padding:0;
  display:grid;
  grid-template-rows:auto minmax(160px,1fr) auto auto;
  background:var(--ws-papel,#FDFDFB);
  border:1px solid var(--ws-linea,#E2D9C8);
  box-shadow:0 22px 70px rgba(23,74,133,.18);
  opacity:0;
  transform:translateX(-12px) translateY(8px) scale(.97);
  transform-origin:left bottom;
  pointer-events:none;
  overflow:hidden;
  transition:opacity 260ms cubic-bezier(.16,1,.3,1),
             transform 260ms cubic-bezier(.16,1,.3,1);
}
.ws-batskill[data-panel="true"] .ws-batskill__panel{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.ws-batskill__panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  background:var(--ws-fondo-azul,#174A85);
  color:var(--ws-papel,#FDFDFB);
  font-family:var(--ws-font,'Onest',sans-serif);
}
.ws-batskill__panel-head strong{
  display:block;
  font-size:15px;
  font-weight:800;
  line-height:1.1;
}
.ws-batskill__panel-head span{
  display:block;
  margin-top:3px;
  color:rgba(253,253,251,.72);
  font-size:11px;
  font-weight:600;
  line-height:1.2;
}
.ws-batskill__panel-close{
  flex:0 0 auto;
  min-height:34px;
  padding:0 10px;
  border:1px solid rgba(253,253,251,.34);
  background:transparent;
  color:var(--ws-papel,#FDFDFB);
  font-family:var(--ws-font,'Onest',sans-serif);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.ws-batskill__messages{
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px 16px 28px 16px !important;
  overflow:auto;
  overscroll-behavior:contain;
}
.ws-batskill__msg{
  max-width:86%;
  padding:10px 12px;
  font-family:var(--ws-font,'Onest',sans-serif);
  font-size:13.5px;
  font-weight:600;
  line-height:1.42;
}
.ws-batskill__msg--bot{
  align-self:flex-start;
  background:var(--ws-blanco,#FFF);
  border:1px solid var(--ws-linea,#E2D9C8);
  color:var(--ws-tinta,#2B2118);
}
.ws-batskill__msg--user{
  align-self:flex-end;
  background:var(--ws-azulejo,#1F5FA8);
  color:var(--ws-blanco,#FFF);
}
.ws-batskill__quick{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:16px 16px 20px !important;
}
.ws-batskill__chip{
  min-height:32px;
  padding:0 10px;
  border:1px solid var(--ws-azulejo,#1F5FA8);
  background:transparent;
  color:var(--ws-azulejo,#1F5FA8);
  font-family:var(--ws-font,'Onest',sans-serif);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.ws-batskill__chip:hover,
.ws-batskill__chip:focus-visible{
  background:var(--ws-azulejo,#1F5FA8);
  color:var(--ws-blanco,#FFF);
}
.ws-batskill__form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  padding:12px;
  border-top:1px solid var(--ws-linea,#E2D9C8);
  background:var(--ws-papel-hondo,#F6F5F1);
}
.ws-batskill__form input{
  min-width:0;
  min-height:42px;
  border:1px solid var(--ws-linea,#E2D9C8);
  background:var(--ws-blanco,#FFF);
  color:var(--ws-tinta,#2B2118);
  font-family:var(--ws-font,'Onest',sans-serif);
  font-size:14px;
  line-height:1.2;
  padding:0 12px;
}
.ws-batskill__form button{
  min-height:42px;
  padding:0 14px;
  border:1px solid var(--ws-azulejo,#1F5FA8);
  background:var(--ws-azulejo,#1F5FA8);
  color:var(--ws-blanco,#FFF);
  font-family:var(--ws-font,'Onest',sans-serif);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}

/* ── Móvil ────────────────────────────────────────────────── */
@media (max-width:600px){
  .ws-batskill{left:14px;right:14px;bottom:14px;width:auto;height:calc(100dvh - 28px);display:block;pointer-events:none}
  .ws-batskill__sprite{position:absolute;left:0;bottom:0;width:72px;height:72px}
  .ws-batskill[data-visible="true"] .ws-batskill__sprite,
  .ws-batskill[data-visible="true"] .ws-batskill__cerrar,
  .ws-batskill[data-panel="true"] .ws-batskill__panel{pointer-events:auto}
  .ws-batskill[data-panel="true"] .ws-batskill__sprite{width:96px;height:96px}
  .ws-batskill__globo{position:absolute;left:82px;bottom:12px;max-width:170px;font-size:12.5px}
  .ws-batskill__panel{
    left:0;
    right:0;
    bottom:108px;
    width:auto;
    max-height:calc(100dvh - 140px);
  }
  .ws-batskill__messages{padding:14px}
  .ws-batskill__msg{max-width:92%;font-size:13px}
  .ws-batskill__quick{padding:0 14px 10px}
  .ws-batskill__form{grid-template-columns:1fr}
}

/* ── Accesibilidad ────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .ws-batskill,
  .ws-batskill__sprite,
  .ws-batskill__globo{
    animation:none !important;
    transition-duration:.01ms !important;
  }
  .ws-batskill[data-gesto] .ws-batskill__sprite{animation:none !important;transform:none !important}
}


/* Boton de accion "Solicitar una cita" dentro de una respuesta informativa.
   Secundario respecto al enlace de servicio: relleno neutro y borde discontinuo. */
.ws-batskill__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}
.ws-batskill__action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  max-width:100%;
  padding:0 12px;
  border:1px dashed var(--ws-linea,#E2D9C8);
  border-radius:999px;
  background:var(--ws-papel-hondo,#F6F5F1);
  color:var(--ws-tinta,#2B2118);
  font-family:var(--ws-font,'Onest',sans-serif);
  font-size:12px;
  font-weight:600;
  line-height:1.3;
  text-align:center;
  white-space:normal;
  cursor:pointer;
}
.ws-batskill__action:hover,
.ws-batskill__action:focus-visible{
  border-color:var(--ws-azulejo,#1F5FA8);
  color:var(--ws-azulejo,#1F5FA8);
  outline:2px solid var(--ws-azulejo,#1F5FA8);
  outline-offset:2px;
}
@media (max-width:480px){
  .ws-batskill__action{
    width:100%;
  }
}