/* ------------------------------------------------ */
/* ------------------- LAYOUT --------------------- */
/* ------------------------------------------------ */

.container {
    width: 100%;
}

.responsive-pc1 {
    display: flex;
    width: 100%;
}

.responsive-pc2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 10px;
}

.responsive-pc3 {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

/* ------------------------------------------------ */
/* -------------------- HEAD ---------------------- */
/* ------------------------------------------------ */

.head {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    padding: 20px;
    background: url('../../multimedia/Fondo-Card3.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid #353941;
    border-radius: 10px;
}

.head>h1 {
    color: white;
}

.head>p {
    color: #696a73;
}

.head>svg {
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: var(--textoPrincipalColor);
}

/* ------------------------------------------------ */
/* -------------------- FASE ---------------------- */
/* ------------------------------------------------ */

.fase {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 10px;
    border: 1px solid #353941;
    border-radius: 10px;
    background-color: #081018;
}

.fase li {
    padding: 5px;
    border-radius: 5px;
}

.fase .select {
    border-bottom: 1px solid var(--textoPrincipalColor);
}

.fase .select a {
    color: var(--textoPrincipalColor);
}

.fase li a {
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    color: white;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.2s;
}

.fase li a:hover {
    color: var(--textoPrincipalColor);
}

/* --------------------------------------------------------- */
/* -------------------- GENERAL STYLE ---------------------- */
/* --------------------------------------------------------- */

.card-menus, .notificaciones {
    padding: 10px;
    border: 1px solid #353941;
    border-radius: 10px;
    background-color: #081018;
}

.card-menus .head-cuenta {
    display: flex;
    align-items: center;
    gap: 5px;
}

.card-menus .head-cuenta svg {
    width: 20px;
    height: 20px;
    color: var(--textoPrincipalColor);
}

.card-menus .head-cuenta h1 {
    font-size: 16px;
    color: var(--textoPrincipalColor);
}

.card-menus ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border: 1px solid #353941;
    border-radius: 10px;
    margin-top: 10px;
    position: relative;
    justify-content: center;
}


.card-menus ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.card-menus ul li .container-svg {
    padding: 5px;
    border: 1px solid #353941;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-menus ul li .flecha-opcion-perfil {
    position: absolute;
    right: 0px;
    cursor: pointer;
    transition: 0.2s ease-in;
}

.card-menus ul li .flecha-opcion-perfil:hover {
    color: var(--textoPrincipalColor);
    scale: 1.1;
}

.card-menus .btns-colores {
    display: flex;
    position: absolute;
    right: 0;
    gap: 10px;
}

.card-menus .btns-colores .verde{
    background: #A3E635;
}

.card-menus .btns-colores .azul{
    background: #3B82F6;
}

.card-menus .btns-colores .rosa {
    background: #ff5094;
}

.card-menus .btns-colores button {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
}

.container-modals {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #0000006e;
    z-index: 100;
}

.container-modals .modal {
    background-color: #081018;
    border: 1px solid var(--textoPrincipalColor);
    box-shadow: 0 0 12px var(--textoPrincipalColor);
    border-radius: 10px;
    padding: 10px;
}

.modal-editar-usuario {
    display: none;
    flex-direction: column;
}

.modal .head-modal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
}

.modal .head-modal>div>div {
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--textoPrincipalColor);
    border-radius: 50%;
}

.modal .head-modal>div>div svg {
    color: var(--textoPrincipalColor);
}

.modal .contenido-modal {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid #353941;
    border-radius: 10px;
    margin-top: 5px;
}

.modal .contenido-modal>div>ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal .contenido-modal>div>ul li {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.modal .contenido-modal>div>ul li p {
    font-size: 12px;
}

.modal .container-input-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 10px;
}

.modal .container-input-modal input {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: #0e1822;
    border: 1px solid #353941;
    color: #696a73;
    padding: 10px;
    font-family: "Goldman", sans-serif;
    font-size: 11px;
    transition: 0.5s ease-in;
    outline: none;
}

.modal .container-input-modal input:not([readonly]):focus {
    border: 1px solid var(--textoPrincipalColor);
    box-shadow: 0 0 12px var(--textoPrincipalColor);
}

.modal .container-input-modal.error-lock input {
    border: 1px solid #EF4444;
    box-shadow: 0 0 12px #EF4444;
    animation: shake .35s ease;
}

.modal .container-input-modal.error-lock svg {
    color: #EF4444;
    transition: .35s ease;
}

@keyframes shake {

    0%   { transform: translateX(0); }

    20%  { transform: translateX(-4px); }

    40%  { transform: translateX(4px); }

    60%  { transform: translateX(-3px); }

    80%  { transform: translateX(3px); }

    100% { transform: translateX(0); }

}

.modal .container-input-modal svg {
    position: absolute;
    right: 5px;
    width: 10%;
    height: 50%;
}

.modal .informacion-modal {
    padding: 10px;
    border: 1px solid #353941;
    margin-top: 10px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    gap: 5px;
}

.modal .informacion-modal p {
    color: #696a73;
}

.modal .informacion-modal svg {
    color: var(--textoPrincipalColor);
}

.modal .container-btns-modal {
    display: flex;
    margin-top: 10px;
    align-items: center;
    justify-content: right;
    gap: 10px;
}

.modal .container-btns-modal button {
    border: 1px solid;
    border-radius: 5px;
    font-family: "Goldman", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


.modal .container-btns-modal .cerrarModal {
    border-color: #696a73;
    background-color: transparent;
    color: #F8FAFC;
    transition: 0.2s ease-in;
}

.modal .container-btns-modal .AceptarModal {
    background-color: var(--textoPrincipalColor);
    color: #081018;
    transition: 0.2s ease-in;
}

.modal .container-btns-modal .cerrarModal:hover {
    background-color: #F8FAFC;
    color: #081018;
}


.cerra-modal {
    cursor: pointer;
    transition: 0.5s ease-in;
}

.cerra-modal:hover {
    color: var(--textoPrincipalColor);
    scale: 1.1;
}

.modal-editar-password {
    display: flex;
    flex-direction: column;
}

.modal-editar-password .contenido-modal-password {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid #353941;
    border-radius: 10px;

}

.modal-editar-password .contenido-modal-password ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
}

.modal-editar-password .informacion-modal {
    padding: 15px;
    border: 1px solid #353941;
    margin-top: 15px;
    border-radius: 10px;
    width: 70%;
}

.modal-editar-password .informacion-modal ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 30px;
    padding: 0;
    margin: 0;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.modal-editar-password .informacion-modal ul li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-editar-password .informacion-modal ul li span {
    min-width: 5px;
    min-height: 5px;
    background-color: var(--textoPrincipalColor);
    border-radius: 50%;
}

.modal-editar-password .informacion-modal ul li p {
    font-size: 11px;
    margin: 0;
    padding: 0;
}

.modal-editar-notificaciones {
    display: flex;
    flex-direction: column;
}

.modal-editar-notificaciones .contenido-modal-notificaciones {
    padding: 10px;
    border: 1px solid #353941;
    border-radius: 10px;
}

.modal-editar-notificaciones .contenido-modal-notificaciones>p {
    font-size: 12px;
    color: #696a73;
}

.modal-editar-notificaciones .contenido-modal-notificaciones>ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin-top: 10px;
    gap: 10px;
}

.modal-editar-notificaciones .contenido-modal-notificaciones>ul li {
    display: flex;
    padding: 10px;
    border: 1px solid #353941;
    border-radius: 10px;
    width: 100%;
    align-items: center;
    position: relative;
    gap: 10px;
}

.modal-editar-notificaciones .contenido-modal-notificaciones>ul li .container-svg {
    padding: 5px;
    border: 1px solid #353941;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-editar-notificaciones .contenido-modal-notificaciones> ul li input {
    position: absolute;
    right: 10px;
}

.contenido-modal-notificaciones {
    position: relative;
}

.contenido-modal-notificaciones .sin-logros {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background-color: #081018;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}

.contenido-modal-notificaciones .sin-logros img {
    height: 50%;
    width: 50%;
    margin: 0;
    padding: 0;
}

.contenido-modal-notificaciones .sin-logros h1 {
    font-size: 16px;
    margin-bottom: 10px;
    text-align: center;
    font-weight: 400;
}

.contenido-modal-notificaciones .sin-logros p {
    font-size: 11px;
    text-align: center;
    color: #696a73;
}

.contenido-modal-notificaciones .sin-logros div {
    width: 200px;
    height: 30px;
    border: 1px solid var(--textoPrincipalColor);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.contenido-modal-notificaciones .sin-logros div p {
    font-size: 11px;
    color: var(--textoPrincipalColor);
}

.container-btn button {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: transparent;
    color: #EF4444;
    border: 1px solid #EF4444;
    border-radius: 10px;
    width: 100%;
    height: 30px;
    cursor: pointer;
    transition: 0.5s ease;
}

.modal-descargar-archivos {
    display: flex;
    flex-direction: column;
}

.contenido-modal-descargas {
    border: 1px solid #353941;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contenido-modal-descargas h1 {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
}

.contenido-modal-descargas img {
    width: 250px;
}


@media (max-width: 1000px) {
    .responsive-pc3 {
        display: none;
    }

    .head>h1 {
        font-size: 14px;
    }

    .head>p {
        font-size: 10px;
    }

    .head>svg {
        width: 30px;
        height: 30px;
    }

    .fase {
        width: 100%;
    }

    .card-menus ul li h1 {
        font-size: 14px;
        font-weight: 400;
    }

    .card-menus ul li p {
        font-size: 10px;
        color: #696a73;
    }

    .switch {
        position: absolute;
        right: 0px;
        display: inline-block;
        width: 25px;
        height: 15px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .switch .slider {
        position: absolute;
        inset: 0;
        background-color: #52525B;
        border-radius: 999px;
        cursor: pointer;
        transition: .3s ease;
    }

    .switch .slider::before {
        content: "";
        position: absolute;
        width: 11px;
        height: 11px;
        left: 2px;
        top: 2px;
        background-color: white;
        border-radius: 50%;
        transition: .3s ease;
    }

    .switch input:checked + .slider {
        background-color: var(--textoPrincipalColor);
    }

    .switch input:checked + .slider::before {
        transform: translateX(10px);
    }

    .modal {
        width: 90%;
    }

    .modal .head-modal svg {
        width: 20px;
        height: 20px;
    }

    .modal .contenido-modal>div>div {
        display: none;
    }

    .modal .contenido-modal .container-input-modal {
        width: 90%;
        height: 30px;
        color: white;
    }

    .modal .contenido-modal .informacion-modal p {
        font-size: 10px;
    }

    .modal .container-btns-modal button {
        width: 90px;
        height: 25px;
        font-size: 12px;
    }

    .modal-editar-password .contenido-modal-password>div>ul>li p {
        font-size: 12px;
    }

    .modal-editar-password .informacion-modal div p {
        margin-bottom: 15px;
        font-size: 11px;
    }

    .modal-editar-password .informacion-modal ul li p {
        font-size: 10px;
    }

    .modal-editar-notificaciones .contenido-modal-notificaciones>ul li div h1 {
        font-size: 11px;
    }

    .modal-editar-notificaciones .contenido-modal-notificaciones>ul li div p {
        font-size: 10px;
        color: #696a73;
    }
}

/* ------------------------------------------------ */
/* ---------------------- PC ---------------------- */
/* ------------------------------------------------ */

@media (min-width: 1000px) {

    .container {
        width: 100%;
        margin: 10px;
    }

    .container>.responsive-pc1 {
        display: flex;
        width: 100%;
        gap: 20px;
        justify-content: space-between;
    }

    .container>.responsive-pc1>.responsive-pc2 {
        width: 75%;
    }

    .responsive-pc3 {
        width: 25%;
    }

    .head>h1 {
        font-size: 22px;
    }

    .head>p {
        font-size: 12px;
    }

    .head>svg {
        width: 40px;
        height: 40px;
    }

    .fase {
        width: 100%;
        gap: 20%;
        align-items: center;
        justify-content: center;
    }

    .card-menus ul li h1 {
        font-size: 16px;
        font-weight: 400;
    }

    .card-menus ul li p {
        font-size: 11px;
        color: #696a73;
    }
    
    .switch {
        position: absolute;
        right: 10px;
        display: inline-block;
        width: 40px;
        height: 20px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .switch .slider {
        position: absolute;
        inset: 0;
        background-color: #52525B;
        border-radius: 999px;
        cursor: pointer;
        transition: .3s ease;
    }

    .switch .slider::before {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        left: 2px;
        top: 2px;
        background-color: white;
        border-radius: 50%;
        transition: .3s ease;
    }

    .switch input:checked + .slider {
        background-color: var(--textoPrincipalColor);
    }

    .switch input:checked + .slider::before {
        transform: translateX(20px);
    }

    .responsive-pc3 .card-menus ul li h1 {
        font-size: 12px;
    }

    .modal {
        width: 50%;
    }

    .modal .contenido-modal>div>div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 50%;
    }

    .modal .contenido-modal>div>div .info-svg-usuario svg {
        width: 15px;
        height: 15px;
    }

    .modal .contenido-modal>div>div .info-svg-usuario p {
        font-size: 14px;
    }

    .svg-usuario-modal {
        width: 80px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid var(--textoPrincipalColor);
        border-radius: 50%;
    }

    .svg-usuario-modal svg {
        width: 60%;
        height: 60%;
    }

    .modal .head-modal svg {
        width: 20px;
        height: 20px;
    }

    .modal .contenido-modal>div {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .modal .contenido-modal ul {
        width: 50%;
    }

    .modal .contenido-modal .container-input-modal {
        width: 90%;
        height: 30px;
        color: white;
    }

    .modal .contenido-modal .informacion-modal {
        width: 60%;
    }

    .modal .contenido-modal .informacion-modal p {
        font-size: 10px;
    }

    .modal-editar-password .contenido-modal-password>div>ul>li p {
        font-size: 12px;
    }

    .modal .container-btns-modal button {
        width: 90px;
        height: 25px;
        font-size: 12px;
    }

    .modal-editar-password .informacion-modal div p {
        margin-bottom: 15px;
        font-size: 14px;
    }

    .modal-editar-password .informacion-modal ul li p {
        font-size: 11px;
    }

    .modal-editar-notificaciones .contenido-modal-notificaciones>ul li div h1 {
        font-size: 14px;
    }

    .modal-editar-notificaciones .contenido-modal-notificaciones>ul li div p {
        font-size: 12px;
        color: #696a73;
    }
}