/* ============================================================================
   TORITO AVATAR · estilos del widget guía para citas.crececontoro.com
   Marca Toro Taxes. No modificar el logo ni los colores de marca.
   ========================================================================== */

.torito-widget{
  /* colores: usa las variables del sitio si existen, con respaldo de marca */
  --t-toro:#FF0009;
  --t-toro-dark:#BB0007;
  --t-ink:#14161B;
  --t-ink-soft:#5A6275;
  --t-bg:#FFFFFF;
  --t-line:#E7E9EE;
  --t-size:160px;                 /* ancho del avatar en desktop */

  position:fixed;
  right:max(16px, env(safe-area-inset-right));
  bottom:max(16px, env(safe-area-inset-bottom));
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  font-family:'Mont', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-user-select:none; user-select:none;
  pointer-events:none;            /* el contenedor no bloquea; los hijos sí */
}
.torito-widget > *{ pointer-events:auto; }

/* ---------- Burbuja de diálogo ---------- */
.torito-widget .torito-bubble{
  position:relative;
  pointer-events:none;             /* la burbuja NO bloquea clics de la página debajo */
  max-width:min(300px, 76vw);
  background:var(--t-bg);
  color:var(--t-ink);
  border:1px solid var(--t-line);
  border-radius:18px 18px 6px 18px;
  box-shadow:0 12px 34px rgba(20,22,27,.16), 0 2px 8px rgba(20,22,27,.08);
  padding:13px 15px;
  font-size:14.5px;
  line-height:1.45;
  opacity:0;
  transform:translateY(8px) scale(.96);
  transform-origin:bottom right;
  transition:opacity .25s ease, transform .25s cubic-bezier(.2,.9,.2,1.1);
}
.torito-widget[data-bubble="on"] .torito-bubble{ opacity:1; transform:translateY(0) scale(1); }
.torito-bubble::after{                 /* cola de la burbuja */
  content:""; position:absolute; right:26px; bottom:-9px;
  width:18px; height:18px; background:var(--t-bg);
  border-right:1px solid var(--t-line); border-bottom:1px solid var(--t-line);
  transform:rotate(45deg); border-radius:0 0 4px 0;
}
.torito-bubble .t-name{ color:var(--t-toro-dark); font-weight:800; }
.torito-bubble .t-text{ margin:0; }
.torito-widget .torito-bubble .t-skip{
  display:inline-block; margin-top:8px; font-size:12px; font-weight:700;
  color:var(--t-ink-soft); background:none; border:0; cursor:pointer; padding:0;
  text-decoration:underline; text-underline-offset:2px;
  pointer-events:auto;             /* este sí es clickeable */
}
.torito-bubble .t-skip:hover{ color:var(--t-toro-dark); }

/* ---------- Avatar (capas apiladas) ---------- */
.torito-avatar{
  position:relative;
  width:var(--t-size);
  aspect-ratio:925 / 960;          /* mismo encuadre de las capas */
  cursor:pointer;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.22));
  transition:transform .2s ease;
}
.torito-avatar:active{ transform:scale(.97); }

.torito-stage{
  position:absolute; inset:0;
  transform-origin:50% 92%;        /* pivota desde el "cuello" */
  animation:t-idle 5.2s ease-in-out infinite;
  will-change:transform;
}
.t-layer{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  -webkit-user-drag:none;
}
/* capa de ojos: se aplasta para el parpadeo */
.t-ojos{ transform-origin:49.6% 50.3%; }
.torito-stage.is-blinking .t-ojos{ animation:t-blink .14s ease-in-out; }

/* inercia sutil de cuernos y orejas (movimiento secundario) */
.t-cuernos{ transform-origin:50% 80%; animation:t-sway 5.2s ease-in-out infinite; animation-delay:.12s; }
.t-oreja-izq{ transform-origin:88% 30%; animation:t-flap 5.2s ease-in-out infinite; animation-delay:.16s; }
.t-oreja-der{ transform-origin:12% 30%; animation:t-flap 5.2s ease-in-out infinite; animation-delay:.20s; }

/* ---------- Estado: hablando (jaw bob + squash) ---------- */
.torito-stage.is-talking{ animation:t-talk .42s ease-in-out infinite; }

/* ---------- Controles ---------- */
.torito-controls{
  position:absolute; top:-6px; left:-6px;
  display:flex; gap:6px;
}
.torito-widget[data-collapsed="true"] .torito-controls{ display:none; }
.torito-btn{
  width:30px; height:30px; border-radius:999px;
  border:1px solid var(--t-line); background:var(--t-bg);
  color:var(--t-ink-soft); font-size:15px; line-height:1;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 4px 12px rgba(20,22,27,.14);
  transition:.15s;
}
.torito-btn:hover{ color:var(--t-toro-dark); border-color:var(--t-toro); transform:translateY(-1px); }
.torito-btn:focus-visible{ outline:2px solid var(--t-toro); outline-offset:2px; }
.torito-btn.is-on{ background:var(--t-toro); color:#fff; border-color:var(--t-toro); }

/* ---------- Burbuja "tap para reabrir" cuando está minimizado ---------- */
.torito-widget[data-collapsed="true"] .torito-bubble{ display:none; }
.torito-reopen{
  position:absolute; top:-4px; right:-4px;
  width:20px; height:20px; border-radius:999px;
  background:var(--t-toro); color:#fff; font-size:12px; font-weight:800;
  display:none; place-items:center; box-shadow:0 3px 8px rgba(0,0,0,.2);
}
.torito-widget[data-has-message="true"][data-collapsed="false"] .torito-reopen{ display:none; }

/* ---------- Responsive ---------- */
@media (max-width:560px){
  .torito-widget{ --t-size:118px; gap:8px; }
  .torito-bubble{ font-size:13.5px; padding:11px 13px; max-width:72vw; }
}
@media (max-width:380px){
  .torito-widget{ --t-size:104px; }
}

/* ---------- Keyframes ---------- */
@keyframes t-idle{
  0%,100%{ transform:rotate(-1.6deg) translateY(0) scale(1); }
  50%    { transform:rotate(1.6deg)  translateY(-4px) scale(1.012); }
}
@keyframes t-sway{
  0%,100%{ transform:rotate(-2.4deg); }
  50%    { transform:rotate(2.4deg); }
}
@keyframes t-flap{
  0%,100%{ transform:rotate(-1.8deg); }
  50%    { transform:rotate(2.2deg); }
}
@keyframes t-blink{
  0%   { transform:scaleY(1); }
  45%  { transform:scaleY(.08); }
  100% { transform:scaleY(1); }
}
@keyframes t-talk{
  0%,100%{ transform:translateY(0)    scaleY(1)    scaleX(1); }
  35%    { transform:translateY(-3px) scaleY(1.05) scaleX(.985); }
  70%    { transform:translateY(1px)  scaleY(.97)  scaleX(1.015); }
}

/* ---------- Accesibilidad: respeta reduce-motion ---------- */
@media (prefers-reduced-motion:reduce){
  .torito-stage,
  .torito-stage.is-talking,
  .t-cuernos,.t-oreja-izq,.t-oreja-der{ animation:none !important; }
  .torito-bubble{ transition:opacity .2s ease; transform:none; }
}