/* =========================================================== */
@import "ambient.css";

body {
    background: #060B14;
}

:root {
    --body: #171e33;
    --ambientVideo: #012591;
    --perfil-box: #171e33;
    --perfil-icono: #324577;
}

.card-container {
    background: #0a101e;
    border: 1px solid #151D33;
}

.card-container::-webkit-scrollbar {
    width: 4px;
    height: 0;
}

.card-container::-webkit-scrollbar-thumb {
    background: #151c30;
    border-radius: 10px;
}

.photo_contaniner {
    background: var(--perfil-box);

    .perfilIcon {
        position: absolute;
        display: flex;
        width: 10vh;
        height: 10vh;
        background: var(--perfil-icono);
        mask: url('images/profile.svg');
        mask-size: cover;
    }
}

/* ===================================== */
/* <<<<< la video en Señas de lenguas me camera >>>> */
#video_sign {
    visibility: hidden;
    opacity: 0;
    scale: .8;
    transition: .4s ease;
    z-index: 2;
}

#video_sign.video_active {
    scale: 1;
    opacity: 1;
    visibility: visible;
}

/* ===================================== */
/* <<<<< la video en file >>>>> */
#video_file {
    opacity: 0;
    scale: .8;
    transition: .4s ease;
    visibility: hidden;
    z-index: 3;
}

#video_file.video_file_active {
    scale: 1;
    opacity: 1;
    visibility: visible;
}

/* <<<< video la ambient desde lenguas de señas >>>> */
.ambient_captura {
    visibility: hidden;
    opacity: 0;
    scale: .8;
    transition: .4s ease;
    background: var(--ambientVideo);
    box-shadow: 0 0 15px 5px var(--ambientVideo);
    animation: ambientVideo 2s ease-in-out infinite alternate;

}

@keyframes ambientVideo {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.15);
    }
}

.ambient_captura::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: #001f7d;
    border-radius: 50%;
    box-shadow: 0 0 15px 5px #001f7d;
    animation: ambientVideoV2 2.5s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

@keyframes ambientVideoV2 {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* | */
/* | */
/* | */
/* └──┐ */
.ambient_captura.ambient_active {
    scale: 1;
    opacity: 1;
    visibility: visible;
}

/* ======================================= */
/* <<<< captura la un click play >>>> */
#capturePlay {
    transition: .4s ease;
    border: 1px solid #0A101E;

    .icon-captura {
        width: 20px;
        height: 20px;
        background: white;
        mask: url('images/capture.png');
        mask-size: cover;
    }
}

#capturePlay.capture_active {
    background: rgba(255, 0, 0, 0.658);
    box-shadow: 0 0 10px 2px rgba(255, 0, 0, 0.658);
    border: 1px solid rgba(255, 0, 0, 0.658);

    .icon-captura {
        mask: unset;
        width: 15px;
        height: 15px;
        border-radius: 80%;
    }
}

#capturePlay.capture_display {
    scale: .8;
    opacity: 0;
    visibility: hidden;
}

/* ============================== */
/* <<<<< close es su stop >>> */
.closebtn {
    transition: .4s ease;
    scale: .8;
    visibility: hidden;
    opacity: 0;
}

/* | */
/* | */
/* | */
/* └──┐ */
.closebtn.close_active {
    scale: 1;
    visibility: visible;
    opacity: 1;
}

/* ========================= ESTA LA MODAL ========================= */

/* Por defecto, la modal está oculta y centrada */
.modal-overlay-event {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;

    .form_event {
        scale: .8;
        transition: .3s ease;
        visibility: hidden;
    }
}

.modal-overlay-event.active_event {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-in-out;

    .form_event {
        scale: 1;
        transition: .4s ease;
        visibility: visible;
    }
}

/* Por defecto, la modal está asistencias  y no asistencias */
.modal-asistencia-event {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;

    .form_asistencia {
        scale: .8;
        transition: .3s ease;
        visibility: hidden;
    }
}

.modal-asistencia-event.active_asistencia {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-in-out;

    .form_asistencia {
        scale: 1;
        transition: .4s ease;
        visibility: visible;
    }
}

/* ========================= ESTA LA MODAL ========================= */