/* ==========================================================================
   TANDA 3 - MANOLIN TORO ESCUDO BULLS (manolin-toro.css)
   ==========================================================================
   11 animaciones definidas para el SVG del toro Manolin estilo logo
   "Manolito Almacenes". Diseño angular tipo escudo con cuernos largos
   curvos blancos y paleta Chicago Bulls.

   Convención:
   - .manolin-toro-svg               → wrapper del SVG (clase obligatoria)
   - .manolin-toro-egg               → variante chica (huevito flotante)
   - .manolin-toro-avatar            → variante grande (en chat)
   - .toro-cara, .toro-cuerno-{izq|der}, .toro-ojo-{izq|der}, .toro-pupila,
     .toro-parpado-{izq|der}, .toro-hocico, .toro-resoplido-{izq|der}
                                     → elementos animables
   - .toro-cuerno-shine              → línea de brillo sobre cuernos
   - Modificadores aplicados al wrapper:
       .hover-glow                   → 6. hover glow
       .click-squash                 → 7. click squash & stretch (transient)
       .drag-vapor                   → 8. drag vapor (mientras se arrastra)
       .drop-polvo                   → 9. drop polvo (transient al soltar)
       .aura-mensaje                 → 11. aura roja al recibir mensaje
   - data-ruta="X" en un ancestro    → 10. expresiones según pantalla
   - .toro-mira-cursor + JS          → 4. mirada al cursor
   ========================================================================== */

/* ==========  Wrapper base  ========== */
.manolin-toro-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    overflow: visible;
}

.manolin-toro-svg svg {
    display: block;
    overflow: visible;
}

.manolin-toro-egg svg    { width: 100%;  height: 100%; }
.manolin-toro-avatar svg { width: 100%;  height: 100%; }

/* ============================================================
   FIX2 - Tamaño correcto dentro del huevito
   ============================================================
   El CSS de mobile.css fija .egg-face en 32x32px (muy chico).
   El huevito exterior es 48x48 redondo. Necesitamos que:
   1. El SVG ocupe TODO el huevito (no 32x32 sino 48x48)
   2. Los cuernos largos curvos puedan SOBRESALIR del círculo
      (visual épico: los cuernos asoman fuera del huevito redondo)
   ============================================================ */

/* Override del CSS viejo para .egg-face: que llene todo el huevito */
.manolin-egg .egg-face,
.manolin-egg .manolin-toro-svg {
    width: 100% !important;
    height: 100% !important;
}

/* Permitir que el SVG SE SALGA del huevito redondo */
.manolin-egg {
    overflow: visible !important;
}

/* Y darle al SVG un poco más de área para que los cuernos largos
   asomen claramente fuera del círculo */
.manolin-egg .manolin-toro-svg.manolin-toro-egg svg {
    width: 130% !important;
    height: 130% !important;
    margin: -15%;
}

/* En el chat avatar, hacer lo mismo: que sobresalga y sin fondo */
.mc-avatar.manolin-toro {
    overflow: visible !important;
}
.mc-avatar .manolin-toro-svg.manolin-toro-avatar svg {
    width: 120% !important;
    height: 120% !important;
    margin: -10%;
}

/* ============================================================
   1.  IDLE - respiración suave (siempre activa)
   ============================================================ */
.manolin-toro-svg .toro-cara {
    transform-origin: 40px 50px;
    transform-box: fill-box;
    animation: toro-respira 4.2s ease-in-out infinite;
}
@keyframes toro-respira {
    0%, 100% { transform: scale(1, 1); }
    50%      { transform: scale(1.018, 1.018); }
}

/* El hocico también respira sutilmente para coherencia */
.manolin-toro-svg .toro-hocico {
    transform-origin: 40px 50px;
    transform-box: fill-box;
    animation: toro-respira 4.2s ease-in-out infinite;
}

/* ============================================================
   2.  RESOPLIDO - vapor saliendo de las fosas cada ~6 s
   ============================================================ */
.manolin-toro-svg .toro-resoplido {
    opacity: 0;
    transform-origin: 50% 50%;
    transform-box: fill-box;
    animation: toro-resoplido-anim 6s ease-out infinite;
}
.manolin-toro-svg .toro-resoplido-der {
    animation-delay: 0.35s;
}
@keyframes toro-resoplido-anim {
    0%, 75%, 100% {
        opacity: 0;
        transform: translateY(0) scaleY(1);
    }
    78% {
        opacity: 0.95;
        transform: translateY(-1px) scaleY(1);
    }
    87% {
        opacity: 0.55;
        transform: translateY(-7px) scaleY(1.4);
    }
    96% {
        opacity: 0;
        transform: translateY(-13px) scaleY(1.8);
    }
}

/* ============================================================
   3.  PESTAÑEO - cada 4-5 s (los párpados bajan brevemente)
   ============================================================ */
.manolin-toro-svg .toro-parpado {
    animation: toro-pestaneo 4.6s ease-in-out infinite;
}
.manolin-toro-svg .toro-parpado-der {
    /* leve desfase para que no parpadeen exactamente igual */
    animation-delay: 0.04s;
}
@keyframes toro-pestaneo {
    0%, 92%, 100% { stroke-width: 0; }
    94%, 96%       { stroke-width: 6; }
    98%            { stroke-width: 0; }
}

/* ============================================================
   4.  MIRADA AL CURSOR - el JS pone variables --mira-x/y en el wrapper.
       El componente solo declara la transición y la transformación.
   ============================================================ */
.manolin-toro-svg.toro-mira-cursor .toro-pupila {
    transition: transform 0.18s cubic-bezier(.4, 0, .3, 1);
    transform: translate(var(--mira-x, 0px), var(--mira-y, 0px));
}

/* ============================================================
   5.  SHINE EN CUERNOS - barrido de luz cada 5 s
   ============================================================ */
.manolin-toro-svg .toro-cuerno-shine {
    animation: toro-cuerno-brillo 5.5s linear infinite;
}
.manolin-toro-svg .toro-cuerno-der .toro-cuerno-shine {
    animation-delay: 0.3s;
}
@keyframes toro-cuerno-brillo {
    0%, 80%, 100% { opacity: 0.65; }
    85%           { opacity: 1;    stroke-width: 2; }
    92%           { opacity: 0.85; }
}

/* ============================================================
   6.  HOVER GLOW - resplandor rojo + leve rebote cuando pasa el cursor
   ============================================================ */
.manolin-toro-svg.hover-glow,
.manolin-egg:hover .manolin-toro-svg,
.mc-avatar:hover .manolin-toro-svg {
    filter: drop-shadow(0 0 9px rgba(232, 53, 80, 0.75))
            drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
    animation: toro-hover-bounce 0.7s ease-in-out;
}
@keyframes toro-hover-bounce {
    0%   { transform: scale(1)    rotate(0deg); }
    35%  { transform: scale(1.09) rotate(-3deg); }
    70%  { transform: scale(0.97) rotate(2deg); }
    100% { transform: scale(1)    rotate(0deg); }
}

/* ============================================================
   7.  CLICK SQUASH & STRETCH - feedback al click (clase transient)
   ============================================================ */
.manolin-toro-svg.click-squash {
    animation: toro-squash 0.36s cubic-bezier(.36, .07, .19, .97);
}
@keyframes toro-squash {
    0%   { transform: scale(1, 1); }
    35%  { transform: scale(1.18, 0.82); }
    65%  { transform: scale(0.92, 1.10); }
    100% { transform: scale(1, 1); }
}

/* ============================================================
   8.  DRAG VAPOR - cuando se arrastra el huevito, vapor más rápido + tilt
   ============================================================ */
.manolin-toro-svg.drag-vapor,
.manolin-shell.drag .manolin-toro-svg {
    animation: toro-drag-tilt 0.5s ease-in-out infinite alternate;
}
.manolin-toro-svg.drag-vapor .toro-resoplido,
.manolin-shell.drag .manolin-toro-svg .toro-resoplido {
    animation: toro-resoplido-anim 1.4s ease-out infinite !important;
    opacity: 0.7;
}
@keyframes toro-drag-tilt {
    0%   { transform: rotate(-4deg); }
    100% { transform: rotate(4deg); }
}

/* ============================================================
   9.  DROP POLVO - al soltar después de drag, mini squash
   ============================================================ */
.manolin-toro-svg.drop-polvo {
    animation: toro-drop 0.5s cubic-bezier(.36, .07, .19, .97);
}
@keyframes toro-drop {
    0%   { transform: translateY(-3px) scale(1, 1); }
    50%  { transform: translateY(2px)  scale(1.08, 0.88); }
    100% { transform: translateY(0)    scale(1, 1); }
}

/* ============================================================
  10.  EXPRESIONES POR RUTA - el ancestro tiene data-ruta="X"
       (ventas/cierre/admin/error/celebracion). Activa pequeñas
       variantes en cejas/parpados para cambiar el "humor".
   ============================================================ */
[data-ruta="ventas"] .manolin-toro-svg .toro-cara,
[data-ruta="celebracion"] .manolin-toro-svg .toro-cara {
    /* Más alegre: respiración un toque más rápida */
    animation-duration: 3.2s;
}

[data-ruta="cierre"] .manolin-toro-svg .toro-pupila,
[data-ruta="caja"] .manolin-toro-svg .toro-pupila {
    /* Concentrado: pupilas un toque más grandes */
    transform: scale(1.1);
    transform-box: fill-box;
}

[data-ruta="error"] .manolin-toro-svg {
    /* Preocupado: sin shine en cuernos para parecer apagado */
    filter: saturate(0.85) brightness(0.95);
}

[data-ruta="error"] .manolin-toro-svg .toro-resoplido {
    /* En error, vapor más frecuente */
    animation-duration: 3s !important;
}

/* ============================================================
  11.  AURA AL RECIBIR MENSAJE - destello rojo expansivo (clase transient)
   ============================================================ */
.manolin-toro-svg.aura-mensaje {
    animation: toro-aura 1.6s ease-out;
}
@keyframes toro-aura {
    0% {
        filter: drop-shadow(0 0 0 rgba(200, 16, 46, 0));
        transform: scale(1);
    }
    25% {
        filter: drop-shadow(0 0 14px rgba(200, 16, 46, 0.95))
                drop-shadow(0 0 4px rgba(255, 80, 100, 0.85));
        transform: scale(1.08);
    }
    60% {
        filter: drop-shadow(0 0 8px rgba(200, 16, 46, 0.55));
        transform: scale(1);
    }
    100% {
        filter: drop-shadow(0 0 0 rgba(200, 16, 46, 0));
        transform: scale(1);
    }
}

/* ==========================================================================
   ACCESIBILIDAD - prefers-reduced-motion: deshabilitar animaciones largas
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .manolin-toro-svg .toro-cara,
    .manolin-toro-svg .toro-hocico,
    .manolin-toro-svg .toro-resoplido,
    .manolin-toro-svg .toro-parpado,
    .manolin-toro-svg .toro-cuerno-shine,
    .manolin-toro-svg.hover-glow,
    .manolin-toro-svg.click-squash,
    .manolin-toro-svg.drag-vapor,
    .manolin-toro-svg.drop-polvo,
    .manolin-toro-svg.aura-mensaje {
        animation: none !important;
        transition: none !important;
    }
    /* Mantenemos pestañeo simple sin animación: párpados siempre cerrados un instante NO */
    .manolin-toro-svg .toro-parpado {
        stroke-width: 0;
    }
}