.card-hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: fadeIn 0.5s ease-out forwards;
}

.card-hover-effect:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

/* Keyframes for smooth entry */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure button is always visible and clickable */
.btn-force-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10;
}

/* FIX CRÍTICO: Empleos Dark Mode Override - FORZA MODO CLARO */
/* 1. Fondo de la Sección principal (detrás de la tarjeta) */
body:not(.dark-mode) .section-dark {
    background: transparent !important;
    backdrop-filter: none !important;
}

/* 2. Tarjeta del formulario */
body:not(.dark-mode) .card-hover-effect {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

/* 3. Textos Generales */
body:not(.dark-mode) .card-hover-effect h1,
body:not(.dark-mode) .card-hover-effect h2,
body:not(.dark-mode) .card-hover-effect h3,
body:not(.dark-mode) .card-hover-effect label,
body:not(.dark-mode) .card-hover-effect p {
    color: #333333 !important;
}

/* 4. Inputs y Textareas */
body:not(.dark-mode) .card-hover-effect .form-control {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    color: #333333 !important;
}

body:not(.dark-mode) .card-hover-effect .form-control::placeholder {
    color: #999999 !important;
}

/* 5. Textos pequeños */
body:not(.dark-mode) .card-hover-effect small {
    color: #666666 !important;
}