/* Transiciones suaves para refrescos de contenido */
.content-refresh-transition {
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

.content-refreshing {
    opacity: 0.5;
    transform: scale(0.998);
    pointer-events: none;
}

/* Animaci�n de fade-in para carga inicial */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.4s ease-in-out;
}

.fade-in-up {
    animation: fadeInUp 0.5s ease-out;
}

/* Estado de carga inicial - contenido oculto */
.loading-initial {
    opacity: 0;
}

/* Overlay de carga suave */
.refresh-overlay {
    position: relative;
}

.refresh-overlay.refreshing::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--ins-body-bg-rgb), 0.5);
    backdrop-filter: blur(2px);
    z-index: 10;
    animation: fadeIn 0.15s ease-in-out;
}

/* Transici�n para cards */
.card.content-refresh-transition {
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

.card.content-refreshing {
    opacity: 0.5;
    transform: scale(0.998);
}

/* Transici�n para el header de entidad */
.entity-header-transition {
    transition: opacity 0.2s ease-in-out;
}

.entity-header-refreshing {
    opacity: 0.6;
}

/* Clase helper para envolver contenido que se refresca */
.smooth-refresh-container {
    transition: opacity 0.25s ease-in-out;
}

.smooth-refresh-container.refreshing {
    opacity: 0.5;
}

/* Skeleton loader opcional para carga inicial */
.skeleton {
    background: linear-gradient(90deg, 
        var(--ins-tertiary-bg) 25%, 
        var(--ins-secondary-bg) 50%, 
        var(--ins-tertiary-bg) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Breadcrumb loading state */
.breadcrumb-loading {
    opacity: 0.6;
    transition: opacity 0.3s ease-in-out;
}

/* EnumFilter m�ltiple - ancho fijo para evitar cambios de tama�o */
.enum-filter-multiple {
    width: 300px !important;
    max-width: 300px !important;
}

/* Mejorar la visualizaci�n del placeholder en Choices.js */
.choices__inner .choices__placeholder {
    opacity: 0.6;
}

/* Reserva el espacio del logo del tenant para que el men� no baile mientras carga */
.sidenav-menu .sidenav-user {
    min-height: 135px;
}