﻿/*html body {
    outline: 3px solid magenta !important;
    outline-offset: -3px !important;
}*/

/* Pulso base */
@keyframes glowPulseXaf {
    0% {
        box-shadow: 0 0 0 rgba(0, 255, 153, .55);
    }

    50% {
        box-shadow: 0 0 18px rgba(0, 255, 153, .85);
    }

    100% {
        box-shadow: 0 0 0 rgba(0, 255, 153, .55);
    }
}

/* Outline pulsante (para VOLVER, por si el header recorta sombras) */
@keyframes backOutlinePulse {
    0% {
        outline-color: rgba(0, 255, 153, .25);
    }

    50% {
        outline-color: rgba(0, 255, 153, .95);
    }

    100% {
        outline-color: rgba(0, 255, 153, .25);
    }
}

/* === Nuevo / Guardar (ES/EN) — 1 repeticiones ~1s === */
button.dxbl-btn[data-action-name="Nuevo"],
button.dxbl-btn[data-action-name="New"],
button.dxbl-btn[data-action-name="Guardar"],
button.dxbl-btn[data-action-name="Save"] {
    position: relative;
    border-radius: 10px;
    animation: glowPulseXaf 1s ease-in-out 1 !important; /* 1×1s = ~1s */
    z-index: 1;
}

    button.dxbl-btn[data-action-name="Nuevo"]::after,
    button.dxbl-btn[data-action-name="New"]::after,
    button.dxbl-btn[data-action-name="Guardar"]::after,
    button.dxbl-btn[data-action-name="Save"]::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 12px;
        box-shadow: 0 0 16px rgba(0, 255, 153, .65);
        animation: glowPulseXaf 1s ease-in-out 1;
        pointer-events: none;
    }

    button.dxbl-btn[data-action-name="Nuevo"] span,
    button.dxbl-btn[data-action-name="New"] span,
    button.dxbl-btn[data-action-name="Guardar"] span,
    button.dxbl-btn[data-action-name="Save"] span {
        filter: drop-shadow(0 0 2px rgba(0, 255, 153, .6));
    }

/* === VOLVER / Back — combina glow + outline para que siempre se note === */
button.dxbl-btn[data-action-name="Volver"],
button.dxbl-btn[data-action-name="Back"],
button.dxbl-btn.navigate-back-icon-container {
    position: relative;
    border-radius: 10px;
    /* 1 animaciones en paralelo, 1 repeticiones */
    animation: glowPulseXaf 1s ease-in-out 1, backOutlinePulse 1s ease-in-out 1 !important;
    outline: 2px solid rgba(0, 255, 153, .6);
    outline-offset: 2px;
    z-index: 2;
}

    button.dxbl-btn[data-action-name="Volver"]::after,
    button.dxbl-btn[data-action-name="Back"]::after,
    button.dxbl-btn.navigate-back-icon-container::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 12px;
        box-shadow: 0 0 16px rgba(0, 255, 153, .65);
        animation: glowPulseXaf 1s ease-in-out 1;
        pointer-events: none;
    }

    button.dxbl-btn.navigate-back-icon-container .xaf-image,
    button.dxbl-btn[data-action-name="Volver"] .xaf-image,
    button.dxbl-btn[data-action-name="Back"] .xaf-image {
        filter: drop-shadow(0 0 6px rgba(0, 255, 153, .75));
    }

/* === Manuales (link de menú) — 1 repeticiones ~1s === */
a[href="Manuales_ListView"],
a[href$="Manuales_ListView"],
a[href*="/Manuales_ListView"] {
    position: relative;
    display: inline-block;
    border-radius: 8px;
    animation: glowPulseXaf 1s ease-in-out 1 !important;
}

    a[href="Manuales_ListView"]::after,
    a[href$="Manuales_ListView"]::after,
    a[href*="/Manuales_ListView"]::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 10px;
        box-shadow: 0 0 16px rgba(0, 255, 153, .65);
        animation: glowPulseXaf 1s ease-in-out 1;
        pointer-events: none;
    }

/* Helper: desactiva cualquier animación del elemento y sus pseudo-elementos */
.xaf-anim-off {
    animation: none !important;
}

    .xaf-anim-off::before,
    .xaf-anim-off::after {
        animation: none !important;
        content: none !important;
    }

