﻿@font-face {
    font-family: 'guardianlight';
    src: url('../lms branding/fonts/guardiansanslight.woff') format('woff');
}
@font-face {
    font-family: 'guardianregular';
    src: url('../lms branding/fonts/guardiansansregular.woff') format('woff');
}
@font-face {
    font-family: 'guardiansemibold';
    src: url('../lms branding/fonts/guardiansanssemibold.woff') format('woff');
}
body {
    font-family: guardianregular !important;
    color:#1A1446;
}


/* Estilos personalizados para el overlay del loader */
.loader-overlay {
    background-color: rgba(255, 255, 255, 0.7); /* Blanco semitransparente */
    backdrop-filter: blur(3px); /* Desenfoque sutil */
    -webkit-backdrop-filter: blur(3px);
}

/* Animación del spinner */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spinner {
    border: 4px solid rgba(6, 116, 140, 0.2); /* Color base del borde */
    border-top: 4px solid #06748C; /* Color del borde superior (azul de tu botón) */
    border-radius: 50%; /* Lo hace circular */
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite; /* Aplica la animación */
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.gradient-bg {
    /*background: linear-gradient(135deg, #06748C 0%, #343741 100%);*/
    background-color: #FFD000;
}

.option-card {
    transition: all 0.3s ease;
    backface-visibility: hidden;
}




/* Estilos personalizados para el overlay de las modales (reusados) */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Animación para entrada de modales */
.modal-enter {
    opacity: 0;
    transform: scale(0.95);
}

.modal-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.modal-leave {
    opacity: 1;
    transform: scale(1);
}

.modal-leave-active {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}