/**
 * Iconos "Doodle" animados — menú de Mi Cuenta
 *
 * Estilo inspirado en Lordicon "Doodle Motif", recreado en SVG + CSS puro:
 * una mancha de color detrás del trazo que crece al hacer hover, más un
 * movimiento propio por icono (péndulo, giro, repique, dibujado...).
 *
 * Sin JS, sin librerías externas, sin peticiones a CDN.
 * Sólo se animan transform / opacity / stroke-dashoffset.
 *
 * Los iconos heredan el color del texto vía currentColor, así que el modo
 * claro/oscuro funciona solo. La mancha usa el rojo corporativo #e31937.
 *
 * v9.39.0: las reglas base cuelgan de .fx-ico y no del menú lateral. Los
 * MISMOS iconos los pinta el panel de usuario del navbar (.hada-acct__item),
 * y allí no había ninguna regla: sin `fill:none` el navegador rellena de
 * negro cada trazo, que es como se veían — manchas negras en modo oscuro.
 * El movimiento sí sigue atado a los dos contenedores que tienen hover.
 *
 * v9.42.0: el disparador se generaliza. Cualquier contenedor con la clase
 * `.fx-anima` anima su icono al pasar el ratón o con foco de teclado, y
 * `.fx-anima.is-anima` lo hace una vez sin hover (la ficha de producto se la
 * pone al entrar en pantalla, para que en el móvil también se vea). Los
 * iconos nuevos de la ficha están al final del archivo.
 *
 * @since 9.35.0
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

.fx-ico {
    /* Rojo corporativo Fenix. Se puede sobrescribir por tema si hiciera falta. */
    --fx-ico-blob: #e31937;
    --fx-ico-blob-soft: #f9a58a;
    --fx-ico-dur: .5s;
    --fx-ico-ease: cubic-bezier(.34, 1.56, .64, 1);
}

/* ==========================================================================
   Base del icono
   ========================================================================== */

.fx-ico {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    /* El trazo y la mancha se salen del viewBox al animarse. */
    overflow: visible;
}

/* Trazo: hereda el color del texto del enlace (dark/light automático). */
.fx-ico .ln {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Mancha de color: la firma del estilo doodle. */
.fx-ico .bl {
    fill: var(--fx-ico-blob);
    stroke: none;
    opacity: .9;
}

.fx-ico .bl2 {
    fill: var(--fx-ico-blob-soft);
    stroke: none;
    opacity: .85;
}

/* En reposo la mancha está encogida; al hover crece con rebote. */
.fx-ico .bl,
.fx-ico .bl2 {
    transform-origin: center;
    transform: scale(.55);
    transition: transform var(--fx-ico-dur) var(--fx-ico-ease), opacity .3s;
}

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .fx-ico .bl,
:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .fx-ico .bl2,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .fx-ico .bl,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .fx-ico .bl2,
:is(.fenix-account-nav-item.active, .hada-acct__item.is-current) .fx-ico .bl,
:is(.fenix-account-nav-item.active, .hada-acct__item.is-current) .fx-ico .bl2 {
    transform: scale(1);
}

/* ==========================================================================
   Animación por icono
   Cada bloque se dispara con :hover y con :focus-visible (accesibilidad:
   quien navega con teclado ve el mismo efecto).
   ========================================================================== */

/* --- Mi Carrito: oscila como un péndulo ---------------------------------- */
.fx-ico.ic-cart .swing { transform-origin: 50% 14%; }

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-cart .swing,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-cart .swing {
    animation: fxSwing 1.1s var(--fx-ico-ease);
}

@keyframes fxSwing {
      0% { transform: rotate(0); }
     20% { transform: rotate(15deg); }
     45% { transform: rotate(-11deg); }
     68% { transform: rotate(6deg); }
     85% { transform: rotate(-3deg); }
    100% { transform: rotate(0); }
}

/* --- Notificaciones: la campana repica y el badajo golpea ---------------- */
.fx-ico.ic-bell .swing { transform-origin: 50% 18%; }

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-bell .swing,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-bell .swing {
    animation: fxSwing 1.1s var(--fx-ico-ease);
}

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-bell .clap,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-bell .clap {
    animation: fxClap 1.1s var(--fx-ico-ease);
}

@keyframes fxClap {
    0%, 100% { transform: translateX(0); }
         25% { transform: translateX(2.5px); }
         60% { transform: translateX(-2px); }
}

/* --- Mis Datos: la cabeza de la silueta gira 360° ------------------------ */
.fx-ico.ic-user .head {
    transform-origin: 50% 33%;
    /* transform-box es lo que hace que el origen se calcule sobre la propia
       figura y no sobre el lienzo completo del SVG. */
    transform-box: fill-box;
}

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-user .head,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-user .head {
    animation: fxSpinY .7s ease-in-out;
}

@keyframes fxSpinY {
    to { transform: rotateY(360deg); }
}

/* --- Mis Listas: el corazón late ---------------------------------------- */
.fx-ico.ic-heart .beat {
    transform-origin: center;
    transform-box: fill-box;
}

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-heart .beat,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-heart .beat {
    animation: fxBeat .7s var(--fx-ico-ease);
}

@keyframes fxBeat {
    0%, 100% { transform: scale(1); }
         30% { transform: scale(1.22); }
         55% { transform: scale(.94); }
}

/* --- Contraseña: el arco del candado se abre ---------------------------- */
.fx-ico.ic-lock .shackle {
    transform-origin: 75% 100%;
    transform-box: fill-box;
}

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-lock .shackle,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-lock .shackle {
    animation: fxUnlock .6s var(--fx-ico-ease) forwards;
}

@keyframes fxUnlock {
    to { transform: translateY(-2px) rotate(-26deg); }
}

/* --- Buscar SDC: la lupa barre ------------------------------------------ */
:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-search .sweep,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-search .sweep {
    animation: fxSweep .8s var(--fx-ico-ease);
}

@keyframes fxSweep {
    0%, 100% { transform: translate(0, 0); }
         35% { transform: translate(-2.5px, -2px); }
         70% { transform: translate(2px, 1.5px); }
}

/* --- Garantías / Tickets / Base de Conocimiento / Panel ------------------
   El trazo se dibuja solo. Cada path declara su longitud real en el atributo
   style="--len:N" (medida con getTotalLength()); si se cambia el path hay que
   volver a medirla, porque un --len menor que el trazo lo deja invisible. */
.fx-ico.ic-draw .ln {
    stroke-dasharray: var(--len, 200);
    stroke-dashoffset: 0;
}

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-draw .ln,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-draw .ln {
    animation: fxDraw 1s ease forwards;
}

@keyframes fxDraw {
      0% { stroke-dashoffset: var(--len, 200); }
    100% { stroke-dashoffset: 0; }
}

/* --- Capacitaciones: el birrete se inclina ------------------------------- */
.fx-ico.ic-cap .tilt { transform-origin: 50% 60%; }

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-cap .tilt,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-cap .tilt {
    animation: fxTilt .8s var(--fx-ico-ease);
}

@keyframes fxTilt {
    0%, 100% { transform: rotate(0); }
         35% { transform: rotate(-11deg) translateY(-1px); }
         70% { transform: rotate(5deg); }
}

/* --- Mis Solicitudes: el check se marca --------------------------------- */
.fx-ico.ic-clip .tick {
    stroke-dasharray: 22;
    stroke-dashoffset: 22;
}

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-clip .tick,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-clip .tick {
    animation: fxTick .5s .15s ease forwards;
}

@keyframes fxTick {
    to { stroke-dashoffset: 0; }
}

/* --- Cerrar Sesión: la flecha sale -------------------------------------- */
:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-out .arrow,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-out .arrow {
    animation: fxOut .7s var(--fx-ico-ease);
}

@keyframes fxOut {
    0%, 100% { transform: translateX(0); }
         50% { transform: translateX(3.5px); }
}

/* --- Mis Envíos: el camión arranca -------------------------------------- */
/* (v9.35.0) Tres secciones del menú las inyectan otros módulos —Mis
   Cotizaciones, Mi Equipo y Mis Envíos— y necesitaban su propio icono.
   Mis Cotizaciones reutiliza .ic-draw; estas dos traen movimiento propio. */
.fx-ico.ic-truck .van {
    transform-origin: center;
    transform-box: fill-box;
}

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-truck .van,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-truck .van {
    animation: fxDrive .8s var(--fx-ico-ease);
}

@keyframes fxDrive {
    0%, 100% { transform: translateX(0); }
         30% { transform: translateX(-2.5px); }
         65% { transform: translateX(3px); }
}

/* --- Mi Equipo: el segundo compañero aparece ----------------------------- */
.fx-ico.ic-team .pal {
    transform-origin: 20% 50%;
    transform-box: fill-box;
}

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-team .pal,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-team .pal {
    animation: fxJoin .6s var(--fx-ico-ease);
}

@keyframes fxJoin {
      0% { transform: translateX(-4px) scale(.7); opacity: .3; }
    100% { transform: translateX(0) scale(1); opacity: 1; }
}

/* ==========================================================================
   Iconos de la ficha de producto (v9.42.0)
   PROVISIONALES hasta que lleguen los de Claude Design: cambian los trazos,
   no estas reglas, porque el brief fija el nombre de cada grupo animado.
   ========================================================================== */

/* --- Comparar: las barras crecen desde la base, una tras otra ----------- */
.fx-ico.ic-comparar .barras rect {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-comparar .barras rect,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-comparar .barras rect {
    animation: fxCrece .6s var(--fx-ico-ease) both;
}
:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-comparar .barras .b2,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-comparar .barras .b2 { animation-delay: .1s; }
:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-comparar .barras .b3,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-comparar .barras .b3 { animation-delay: .2s; }

@keyframes fxCrece {
    0% { transform: scaleY(.25); }
    100% { transform: scaleY(1); }
}

/* --- Ficha técnica: la flecha baja a descargar -------------------------- */
:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-ficha .flecha,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-ficha .flecha {
    animation: fxBaja .8s ease-in-out;
}

@keyframes fxBaja {
    0%, 100% { transform: translateY(0); }
    35% { transform: translateY(2.6px); }
    60% { transform: translateY(-1px); }
}

/* --- Copiar modelo: la hoja de delante se separa y vuelve --------------- */
:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-copiar .hoja,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-copiar .hoja {
    animation: fxCopia .7s var(--fx-ico-ease);
}

@keyframes fxCopia {
    0%, 100% { transform: translate(0, 0); }
    45% { transform: translate(2.4px, 2.4px); }
}

/* --- Conectividad: un punto recorre la red ------------------------------ */
.fx-ico.ic-conectividad .pulso {
    stroke-width: 3.4;
    stroke-dasharray: .01 var(--len, 53);
    stroke-dashoffset: 0;
    opacity: 0;
}

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-conectividad .pulso,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-conectividad .pulso {
    animation: fxPulso 1.2s linear;
}

@keyframes fxPulso {
    0% { stroke-dashoffset: 0; opacity: 1; }
    90% { opacity: 1; }
    100% { stroke-dashoffset: calc(var(--len, 53) * -1); opacity: 0; }
}

/* --- Imagen: el encuadre se abre y vuelve ------------------------------- */
.fx-ico.ic-imagen .esquinas { transform-origin: 16px 16px; }

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-imagen .esquinas,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-imagen .esquinas {
    animation: fxEncuadre .7s var(--fx-ico-ease);
}

@keyframes fxEncuadre {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.14); }
}

/* --- Detección: una línea de escaneo baja por la silueta ---------------- */
.fx-ico.ic-deteccion .escaneo { opacity: 0; }

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-deteccion .escaneo,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-deteccion .escaneo {
    animation: fxEscaneo 1s ease-in-out;
}

@keyframes fxEscaneo {
    0% { transform: translateY(0); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateY(14px); opacity: 0; }
}

/* --- Instalación: la llave aprieta -------------------------------------- */
.fx-ico.ic-instalacion .llave {
    transform-box: fill-box;
    transform-origin: 30% 70%;
}

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-instalacion .llave,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-instalacion .llave {
    animation: fxAprieta .8s var(--fx-ico-ease);
}

@keyframes fxAprieta {
    0%, 100% { transform: rotate(0); }
    35% { transform: rotate(-25deg); }
    70% { transform: rotate(6deg); }
}

/* --- Grabación: el LED del disco parpadea ------------------------------- */
.fx-ico.ic-grabacion .led {
    fill: currentColor;
    stroke: none;
}

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-grabacion .led,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-grabacion .led {
    animation: fxLed .9s steps(1, end);
}

@keyframes fxLed {
    0%, 50% { opacity: 1; }
    25%, 75% { opacity: .15; }
}

/* --- Protección: la gota cae y rebota ----------------------------------- */
.fx-ico.ic-proteccion .gota {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-proteccion .gota,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-proteccion .gota {
    animation: fxGota .8s ease-in;
}

@keyframes fxGota {
    0% { transform: translateY(-5px); opacity: .2; }
    55% { transform: translateY(0) scaleY(1); opacity: 1; }
    72% { transform: scaleY(.88); }
    100% { transform: scaleY(1); }
}

/* --- Audio: las ondas aparecen una tras otra ---------------------------- */
:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-audio .ondas path,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-audio .ondas path {
    animation: fxOnda .6s ease-out both;
}
:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-audio .ondas .o2,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-audio .ondas .o2 { animation-delay: .18s; }

@keyframes fxOnda {
    0% { opacity: 0; transform: translateX(-2px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* --- Noche: la luna se mece y la estrella titila ------------------------ */
.fx-ico.ic-noche .luna,
.fx-ico.ic-noche .estrella {
    transform-box: fill-box;
    transform-origin: center;
}

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-noche .luna,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-noche .luna {
    animation: fxMece .9s var(--fx-ico-ease);
}
:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-noche .estrella,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-noche .estrella {
    animation: fxTitila .9s ease-in-out;
}

@keyframes fxMece {
    0%, 100% { transform: rotate(0); }
    35% { transform: rotate(-12deg); }
    70% { transform: rotate(6deg); }
}

@keyframes fxTitila {
    0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
    30% { transform: scale(.4) rotate(45deg); opacity: .3; }
    60% { transform: scale(1.25) rotate(90deg); opacity: 1; }
}

/* --- Energía: destello del rayo ----------------------------------------- */
.fx-ico.ic-energia .rayo {
    transform-box: fill-box;
    transform-origin: center;
}

:is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .ic-energia .rayo,
:is(.fenix-account-nav-item:focus-visible, .hada-acct__item:focus-visible, .fx-anima:focus-visible) .ic-energia .rayo {
    animation: fxDestello .55s ease-out;
}

@keyframes fxDestello {
    0%, 100% { transform: scale(1); opacity: 1; }
    20% { transform: scale(1.16); opacity: .35; }
    45% { transform: scale(.96); opacity: 1; }
    65% { opacity: .6; }
}

/* ==========================================================================
   Accesibilidad y táctil
   ========================================================================== */

/* En pantallas táctiles no hay hover: la mancha se deja siempre visible para
   que el icono no se vea "a medias" en móvil. */
@media (hover: none) {
    .fx-ico .bl,
    .fx-ico .bl2 {
        transform: scale(1);
    }
}

/* Respeta la preferencia del sistema: sin movimiento, pero con el icono
   completo y legible. */
@media (prefers-reduced-motion: reduce) {
    .fx-ico *,
    :is(.fenix-account-nav-item:hover, .hada-acct__item:hover, .fx-anima:hover, .fx-anima.is-anima) .fx-ico * {
        animation: none !important;
        transition: none !important;
    }

    .fx-ico .bl,
    .fx-ico .bl2 {
        transform: scale(1);
    }

    .fx-ico .ln,
    .fx-ico .tick {
        stroke-dashoffset: 0 !important;
    }
}