/*
 * Nutria Stephie — flotante fija en la esquina inferior IZQUIERDA
 * (el FAB de WhatsApp/llamada del sitio real vive en la esquina inferior
 * derecha — .fab-zone — así que nunca se superponen). En móvil se
 * desvanece sola mientras el usuario hace scroll o escribe en un campo
 * (teclado abierto) — no requiere que el usuario haga nada.
 */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&display=swap');

.nutria-stephie{
  --ns-pink:#e91e63;
  position:fixed;
  left:14px;
  bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  z-index:940; /* debajo de menús/modales, arriba del contenido normal */
  display:grid;
  grid-template-columns:min-content minmax(200px,300px);
  align-items:end;
  gap:10px;
  color:#2c1a1d;
  /* Quicksand, redondeada y cálida — se siente más "voz de personaje hablando"
     que la sans-serif genérica del resto del widget/sitio. */
  font-family:'Quicksand',system-ui,sans-serif;
  max-width:calc(100vw - 28px);
  pointer-events:none; /* el contenedor no bloquea clics; sus hijos sí */
  transition:opacity .2s ease, transform .2s ease;
  transform-origin:left bottom;
}
.nutria-stephie *{pointer-events:auto}

/* Se aparta sola mientras el usuario escribe en un campo (evita el teclado
   del celular), o mientras hace scroll — ambas automáticas, sin botones. */
.nutria-stephie.is-auto-collapsed,
.nutria-stephie.is-scroll-faded{
  opacity:.1;
  transform:scale(.55);
  pointer-events:none;
}

.nutria-stephie__peek{
  grid-row:1;grid-column:1;
  background:none;border:none;padding:0;cursor:pointer;
  position:relative;z-index:1;
  display:block;
}
.nutria-stephie__character{
  display:block;
  width:96px;height:auto;max-height:150px;object-fit:contain;
  filter:drop-shadow(0 10px 12px #2c1a1d20);
  transition:opacity .25s ease, transform .25s ease;
  font-size:0; /* si el WebP tarda una fracción de segundo, que no se vea el texto alternativo mientras carga */
}
/* Mientras "se asoma" (saludo discreto, sin globo abierto): en tono "warm"
   un ligero balanceo + puntito invitan a tocarla. En tono "serious" (Renal,
   Diagnóstico clínico) se queda quieta — nada que llame la atención de más
   en un momento donde el visitante puede estar procesando algo serio. */
.nutria-stephie.tone-warm.is-peeking .nutria-stephie__character{animation:ns-peek-sway 2.4s ease-in-out infinite}
@keyframes ns-peek-sway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-4deg)}}

.nutria-stephie__peek-dot{display:none}
.nutria-stephie.tone-warm.is-peeking .nutria-stephie__peek-dot{
  display:block;
  position:absolute;top:6px;right:6px;
  width:10px;height:10px;border-radius:50%;
  background:var(--ns-pink);border:2px solid #fff;
  animation:ns-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes ns-dot-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.75}}

.nutria-stephie__bubble{
  grid-row:1;grid-column:2;
  position:relative;
  padding:14px 16px;
  background:#fff;
  border:1px solid #2c1a1d12;
  border-radius:20px;
  box-shadow:0 12px 32px #2c1a1d16;
  font-size:13.5px;
  max-width:100%;
  transition:opacity .2s ease, transform .2s ease;
}
/* "piquito" del globo, apuntando hacia el personaje a la izquierda */
.nutria-stephie__bubble::before{
  content:"";position:absolute;left:-9px;bottom:16px;
  width:0;height:0;border-style:solid;
  border-width:8px 10px 8px 0;
  border-color:transparent #2c1a1d1f transparent transparent;
}
.nutria-stephie__bubble::after{
  content:"";position:absolute;left:-8px;bottom:17px;
  width:0;height:0;border-style:solid;
  border-width:7px 9px 7px 0;
  border-color:transparent #fff transparent transparent;
}
.nutria-stephie__bubble.is-hidden{
  opacity:0;
  transform:translateY(4px) scale(.98);
  pointer-events:none;
}
.nutria-stephie[data-level="quiet"] .nutria-stephie__bubble{padding:10px 12px}
.nutria-stephie__message{margin:0 0 10px;line-height:1.45;font-weight:500}
.nutria-stephie__bubble:has(.nutria-stephie__action[hidden]) .nutria-stephie__message{margin-bottom:0}
.nutria-stephie__action{
  display:inline-block;padding:8px 13px;border-radius:999px;
  background:var(--ns-pink);color:#fff;text-decoration:none;font-weight:700;font-size:12.5px;
}
.nutria-stephie__action[hidden]{display:none}
.nutria-stephie__action:focus-visible,
.nutria-stephie__close:focus-visible,
.nutria-stephie__peek:focus-visible,
.nutria-stephie__reopen:focus-visible{outline:2px solid #1B4A47;outline-offset:2px}
.nutria-stephie[data-level=green] .nutria-stephie__action{background:#24875d}
.nutria-stephie[data-level=yellow] .nutria-stephie__action{background:#b87800}
.nutria-stephie[data-level=red] .nutria-stephie__action{background:#b43a4b}
/* "Intervención prioritaria" comparte el dibujo rojo (no hay un 5to WebP),
   pero se distingue con el mismo tono de rojo profundo que ya usa esa
   insignia en el resultado real (badgeColor:'#8B2A1A' en quiz.js). */
.nutria-stephie[data-level="red-priority"] .nutria-stephie__action{background:#8B2A1A}
.nutria-stephie[data-level="red-priority"] .nutria-stephie__bubble{border-color:#8B2A1A40}

.nutria-stephie__close{
  position:absolute;top:-8px;left:78px;z-index:5;
  width:22px;height:22px;border-radius:50%;
  background:#fff;border:1px solid #2c1a1d1f;color:#6b5f57;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 10px #2c1a1d1a;
}
.nutria-stephie.is-peeking .nutria-stephie__close{display:none} /* mientras solo se asoma, no hay nada que "cerrar" todavía */
.nutria-stephie.is-closed .nutria-stephie__close,
.nutria-stephie.is-closed .nutria-stephie__peek,
.nutria-stephie.is-closed .nutria-stephie__bubble{display:none}

.nutria-stephie__reopen{
  width:52px;height:52px;border-radius:50%;overflow:hidden;
  border:2px solid #fff;box-shadow:0 8px 20px #2c1a1d26;
  background:#fff9f4;cursor:pointer;padding:0;
}
.nutria-stephie__reopen-icon{width:100%;height:100%;object-fit:cover;object-position:center 20%}

.nutria-stephie.is-closing{opacity:.85}

@media(max-width:620px){
  .nutria-stephie{
    /* deja libre el CTA fijo inferior del sitio (.sticky-cta, ~58px + safe-area) */
    bottom:calc(70px + env(safe-area-inset-bottom, 0px));
    /* ancho total acotado (no min-content/1fr) para que el globo nunca alcance
       el botón flotante de WhatsApp del sitio (.fab-zone, esquina inferior derecha) */
    max-width:min(calc(100vw - 28px), 268px);
    grid-template-columns:64px minmax(160px,190px);
    gap:6px;
  }
  .nutria-stephie__character{width:64px;max-height:100px}
  .nutria-stephie__bubble{padding:10px 12px;font-size:13px}
  .nutria-stephie__message{line-height:1.55}
  .nutria-stephie__bubble::before,
  .nutria-stephie__bubble::after{bottom:12px}
  .nutria-stephie__close{left:50px}
}

@media(prefers-reduced-motion:reduce){
  .nutria-stephie,
  .nutria-stephie__character,
  .nutria-stephie__bubble{transition:none}
  .nutria-stephie.is-peeking .nutria-stephie__character{animation:none}
  .nutria-stephie__peek-dot{animation:none !important}
}