/* 
 * Vivero Financiero - Estilos Globales y de Utilidad (Phase 1 Refactor)
 * Este archivo centraliza las clases de utilidad que reemplazan el CSS inline inyectado vía JavaScript.
 */

.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.d-flex {
    display: flex !important;
}

.d-block {
    display: block !important;
}

.d-none {
    display: none !important;
}

.opacity-0 {
    opacity: 0 !important;
}

.opacity-30 {
    opacity: 0.3 !important;
}

.opacity-100 {
    opacity: 1 !important;
}

/* Modificadores de Tutorial interactivo */
.step-disabled {
    pointer-events: none !important;
    opacity: 0.3 !important;
    filter: grayscale(100%);
}

.guide-highlight {
    position: relative;
    z-index: 1000 !important;
    box-shadow: 0 0 15px 5px rgba(241, 196, 15, 0.8) !important;
    border-radius: 10px;
    animation: pulseHighlight 1.5s infinite;
}

@keyframes pulseHighlight {
    0% { box-shadow: 0 0 10px 2px rgba(241, 196, 15, 0.6); }
    50% { box-shadow: 0 0 20px 8px rgba(241, 196, 15, 0.9); }
    100% { box-shadow: 0 0 10px 2px rgba(241, 196, 15, 0.6); }
}