@keyframes slideIn {
    from {
        transform: translateX(10%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
} 

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

*{
    box-sizing: border-box;
    transition: all 0.8s;
}

a{
    text-decoration: none;
    color: white;
}
:root{
    --main-color: #001629;
    --color-primario: #F3F4F4;
    --color-secundario: #01B401;
    --color-terciario: #007832;
    --color-texto: #414042;
    --color-btn-cancelar: #c9c9c9;
    --color-placeholder: #4A4A4A;
    --background-inputs: #D1D3D4;
    --color-transparente: #04060700;
}
body, html{
    margin: 0;
    padding: 0;

}

body{
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 16px;
}

main#cuerpo{
    align-items: center;
    background: var(--main-color);
    display: flex;
    height: 100vh;
    margin: 0;
    padding: 0;
    width: 100vw;
}

    .input-placa{
        text-transform: uppercase;
    }

    .input-placa::placeholder{
        text-transform: none;
    }

    .alerta-contenedor{
        border-radius: 20px;
        background: var(--main-color);
        color: var(--color-primario);
    }

    .alerta-contenedor .btn-confirmar{
        border: none;
        border-radius: 15px;
        box-shadow: none !important;
        background-color: var(--color-secundario) !important;
    }
    
    .alerta-contenedor .btn-cancelar{
        border: none;
        border-radius: 15px;
        box-shadow: none !important;
        background-color: rgb(165, 165, 165) !important;
    }

    .alerta-contenedor .swal2-timer-progress-bar {
        background-color: #2db910 !important; /* Cambia el color a tu preferencia */
      }

    main#cuerpo section#contenedor_pagina{
        display: flex;
        background: var(--color-primario);
        border-radius: 20px;
        flex-direction: column;
        width: 100vw;
        height: 96.5vh;
        margin-right: 16px;
        padding: 18px;
        overflow: hidden;

    }
        section#contenedor_pagina #nav_menu{
            display: flex;
            justify-content: space-between;

        }
        
            #nav_menu #cont_nombre_vista h1{
                font-size: 35px;
                margin: 0;
            }
            #nav_menu #cont_info_usuario{
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
                #cont_info_usuario #cont_contador_multitud{
                    display: flex;
                    align-items: center;
                    height: 40px;
                    background: #D9D9D9;
                    border-radius: 50px;
                    margin-right: 20px;
                }
                    #cont_contador_multitud ion-icon{
                        font-size: 37px;
                        font-weight: normal;
                        margin-left: 10px;
                    }
                    #cont_contador_multitud p{
                        font-size: 20px;
                        margin-right: 10px;
                        margin-left: 5px;
                    }

                #cont_info_usuario #btn_puerta{
                    align-items: center;
                    border-radius: 50px;
                    background: #D9D9D9;
                    cursor: pointer;
                    display: flex;
                    height: 40px;
                    justify-content: center;
                    margin-right: 20px;
                    width: 40px;
                }

                    #cont_info_usuario #btn_puerta svg{
                        height: 30px;
                        width: 30px;
                    }

                #cont_info_usuario #btn_notificaciones{
                    background: #D9D9D9;
                    width: 40px;
                    cursor: pointer;
                    height: 40px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    border-radius: 50px;
                    
                }                    
                    #cont_info_usuario #btn_notificaciones #contador_notificaciones {
                        position: absolute;
                        top: -5px;
                        right: -10px;
                        background-color: var(--color-secundario);
                        color: white;
                        border-radius: 50%;
                        padding: 3px 6px;
                        font-size: 12px;
                        font-weight: bold;
                    }
                    

                    #cont_info_usuario ion-icon{
                        font-size: 30px;
                        
                    }
                #cont_info_usuario #cont_perfil_user{
                    display: flex;
                    align-items: center;
                    height: 40px;
                    background: #D9D9D9;
                    border-radius: 50px;
                    margin-right: 20px;
                }
                    #cont_perfil_user ion-icon{
                        font-size: 32px;
                        margin-left: 10px;
                    }
                    #cont_perfil_user p{
                        font-size: 20px;
                        margin-right: 10px;
                    }
                #cont_info_usuario #btn_brigadistas{
                    display: flex;
                    align-items: center;
                    height: 40px;
                    cursor: pointer;
                    background: #EC8103;
                    border-radius: 50px;
                    border: none;
                    margin-right: 20px;
                }

                    #btn_brigadistas ion-icon{
                        font-size: 32px;
                        color: var(--color-primario);
                        margin-left: 10px;
                    }
                    #btn_brigadistas p{
                        color: var(--color-primario);
                        margin-left: 5px;
                        margin-right: 10px;
                        font-size: 20px;
                    }

/* --------------------------------------Estilo spinner de carga --------------------------------------------------------*/
#contenedor_spinner{
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    position: fixed;
    background: rgba(37, 37, 37, 0.597);
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 2000;
}

    #contenedor_spinner #spinner {
        border-radius: 13px;
        background-color: var(--color-secundario);
        bottom: 50%;
        height: 70px;
        left: 50%;
        position: fixed;
        right: 50%;
        top: 45%;
        width: 70px;
        z-index: 2100;
    }

    #contenedor_spinner.mostrar_spinner #spinner{
        animation: spin 1s infinite;
    }

#contenedor_spinner.mostrar_spinner{
    opacity: 1;
    pointer-events: auto;
}


/*----------------------------------- Estilos generales para el fondo y modal de notificaciones -------------------------------------------*/
#contenedor_notificaciones{
    height: 100vh;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 100vw;
    transition: opacity 0.3s ease;
    top: 0;
    z-index: 60;
}

#contenedor_notificaciones.mostrar {
    opacity: 1;
    pointer-events: auto;
}

    #contenedor_notificaciones .contenedor-ppal-modal{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: absolute;
        right: 0;
        overflow: hidden;
        width: clamp(500px, 30%, 650px);
        border-radius: 20px 0 20px 20px;
        background: var(--main-color);
        transition: top 0.5s ease;  
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
        z-index: 55;
    }

        #contenedor_notificaciones .contenedor-ppal-modal .contenedor-titulo-modal {
            color: var(--color-primario);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.7em;
        }

            #contenedor_notificaciones .contenedor-ppal-modal .contenedor-titulo-modal ion-icon{
                font-size: 30px;
                cursor: pointer;
            }

        #contenedor_notificaciones .contenedor-ppal-modal .contenedor-modal::-webkit-scrollbar{
            background: transparent;
            width: 8px;
            height: 8px;
        }

        #contenedor_notificaciones .contenedor-ppal-modal .contenedor-modal::-webkit-scrollbar-thumb{
            border-radius: 20px;
            background-color: rgb(180, 180, 180);
        }

        #contenedor_notificaciones .contenedor-ppal-modal .contenedor-modal{
            height: 90.5vh;
            background: var(--color-primario);
            border-radius: 20px;
            padding: 20px 5px;
            overflow-y: auto;
        }

            #contenedor_notificaciones .contenedor-ppal-modal .contenedor-modal #mensaje_respuesta{
                left: 15%;
                position: absolute;
                top: 50%;
            }

            #contenedor_notificaciones .contenedor-ppal-modal .contenedor-modal .contenedor-alerta {
                box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
                border-radius: 15px;
                display: flex;
                flex-direction: column;
                margin-bottom: 15px;
                padding: 5px 0;
                width: 100%;
            }
            
                .contenedor-ppal-modal .contenedor-modal .contenedor-alerta .contenedor-mensaje-alerta {
                    align-items: start;
                    border: none;
                    border-radius: 15px;
                    border-left: 4px solid var(--main-color);
                    display: flex;
                    flex-direction: column;
                    padding: 10px;
                    row-gap: 8px;
                    width: 95%;
                }

                    .contenedor-modal .contenedor-alerta .contenedor-mensaje-alerta #contenedor_btns_notificacion{
                        column-gap: 12px;
                        display: flex;
                        width: 100%;
                    }

                        .contenedor-alerta .contenedor-mensaje-alerta #contenedor_btns_notificacion button{
                            border: none;
                            background: none;
                            border-bottom: 2px solid;
                            cursor: pointer;
                            font-size: 16px;
                            color: var(--color-secundario);
                        }

                        .contenedor-alerta .contenedor-mensaje-alerta #contenedor_btns_notificacion .btn-novedad{
                            color: rgb(90, 90, 90);
                        }
                    
/*----------------------------------- Estilos generales para el fondo de modal -------------------------------------------*/
#contenedor_modales {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    position: fixed;
    background: rgba(37, 37, 37, 0.7);
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 160;
}

/* ------------------------------------------------Estilos generales para cada modal ---------------------------------------*/
#contenedor_modales .contenedor-ppal-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--main-color);
    border-radius: 35px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

/*----------------------------------- Clase para mostrar el contenedor de fondo ------------------------------------------*/
#contenedor_modales.mostrar {
    opacity: 1;
    pointer-events: auto;
}

#contenedor_modales .contenedor-titulo-modal{
    color: var(--color-primario);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7em;
    animation: slideIn 0.5s ease-out;
}

#contenedor_modales .contenedor-titulo-modal h2{
    font-size: 1.5em;
    width: 100%;
    text-align: center;
    margin-left: 14px;
}

#contenedor_modales .contenedor-titulo-modal ion-icon{
    font-size: 30px;
    cursor: pointer;
}
                
#contenedor_modales .contenedor-ppal-modal .contenedor-info-modal{
    height: 100%;
    background: var(--color-primario);
    border-radius: 20px;    
    overflow-y: auto;
    scrollbar-width: none;
}

#contenedor_modales #cont_info_modales{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.oculto{
    display: none !important;
}

/*---------------------------------------------- Estilos Modal Novedad Usuario ----------------------------------------------- */
#contenedor_modales #modal_novedad_usuario{
    width: clamp(450px, 32%, 650px);
}

    #contenedor_modales #modal_novedad_usuario #cont_info_modales{
        width: 100%;
    }

        #contenedor_modales #modal_novedad_usuario #cont_info_modales #formulario_novedad_usuario{
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
        }
   
            #modal_novedad_usuario #cont_info_modales #formulario_novedad_usuario #contenedor_cajas_novedad_usuario {
                column-gap: 20px;
                display: grid;
                grid-template-columns: repeat(1, 1fr);
                padding: 1.5em;
                row-gap: 20px;
                width: 100%;
            }

                #cont_info_modales #formulario_novedad_usuario #contenedor_cajas_novedad_usuario .input-caja-registro{
                    animation: slideIn 0.5s ease-out;
                    color: var(--color-placeholder);
                    font-size: 16px;
                }

                    #formulario_novedad_usuario #contenedor_cajas_novedad_usuario .input-caja-registro .label-input{
                        color: var(--color-placeholder);
                        display: flex;
                        font-size: 20px;
                        margin-bottom: 5px;
                        padding-left: 10px;
                    }
                
                    #formulario_novedad_usuario #contenedor_cajas_novedad_usuario .input-caja-registro .campo{
                        background: var(--background-inputs);
                        border: none;
                        border-radius: 13px;
                        font-size: 16px;
                        height: 60px;
                        margin-top: 5px;
                        padding: 10px;
                        width: 100%;
                    }

                    #formulario_novedad_usuario #contenedor_cajas_novedad_usuario .input-caja-registro .campo::placeholder{
                        color: var(--color-placeholder);
                        font-size: 16px;
                    } 
                 
            #modal_novedad_usuario #cont_info_modales #formulario_novedad_usuario #contenedor_btns_novedad_usuario {
                display: flex;
                width: 100%;
            }

                #cont_info_modales #formulario_novedad_usuario #contenedor_btns_novedad_usuario button {
                    align-items: center;
                    background-color: var(--color-btn-cancelar);
                    border: none;
                    cursor: pointer;
                    color: var(--color-placeholder);
                    display: flex;
                    font-size: 20px;
                    height: 60px;
                    justify-content: center;
                    width: 50%;
                }
                        
                #cont_info_modales #formulario_novedad_usuario #contenedor_btns_novedad_usuario #btn_registrar_novedad_usuario {
                    background-color: var(--color-secundario);
                    color: var(--color-primario);
                }

/*---------------------------------------------- Estilos Modal permiso Usuario ----------------------------------------------- */
#contenedor_modales #modal_permiso_usuario{
    width: clamp(450px, 32%, 650px);
}

    #contenedor_modales #modal_permiso_usuario #cont_info_modales{
        width: 100%;
    }

        #contenedor_modales #modal_permiso_usuario #cont_info_modales #formulario_permiso_usuario{
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
        }
   
            #modal_permiso_usuario #cont_info_modales #formulario_permiso_usuario #contenedor_cajas_permiso_usuario {
                column-gap: 20px;
                display: grid;
                grid-template-columns: repeat(1, 1fr);
                padding: 1.5em;
                row-gap: 20px;
                width: 100%;
            }

                #cont_info_modales #formulario_permiso_usuario #contenedor_cajas_permiso_usuario .input-caja-registro{
                    animation: slideIn 0.5s ease-out;
                    color: var(--color-placeholder);
                    font-size: 16px;
                }

                    #formulario_permiso_usuario #contenedor_cajas_permiso_usuario .input-caja-registro .label-input{
                        color: var(--color-placeholder);
                        display: flex;
                        font-size: 20px;
                        margin-bottom: 5px;
                        padding-left: 10px;
                    }
                
                    #formulario_permiso_usuario #contenedor_cajas_permiso_usuario .input-caja-registro .campo{
                        background: var(--background-inputs);
                        border: none;
                        border-radius: 13px;
                        font-size: 16px;
                        height: 60px;
                        margin-top: 5px;
                        padding: 10px;
                        width: 100%;
                    }

                    #formulario_permiso_usuario #contenedor_cajas_permiso_usuario .input-caja-registro .campo::placeholder{
                        color: var(--color-placeholder);
                        font-size: 16px;
                    } 
                 
            #modal_permiso_usuario #cont_info_modales #formulario_permiso_usuario #contenedor_btns_permiso_usuario {
                display: flex;
                width: 100%;
            }

                #cont_info_modales #formulario_permiso_usuario #contenedor_btns_permiso_usuario button {
                    align-items: center;
                    background-color: var(--color-btn-cancelar);
                    border: none;
                    cursor: pointer;
                    color: var(--color-placeholder);
                    display: flex;
                    font-size: 20px;
                    height: 60px;
                    justify-content: center;
                    width: 50%;
                }
                        
                #cont_info_modales #formulario_permiso_usuario #contenedor_btns_permiso_usuario #btn_registrar_permiso_usuario {
                    background-color: var(--color-secundario);
                    color: var(--color-primario);
                }

/*---------------------------------------------- Estilos Modal permiso Vehiculo ----------------------------------------------- */
#contenedor_modales #modal_permiso_vehiculo{
    width: clamp(450px, 32%, 650px);
}

    #contenedor_modales #modal_permiso_vehiculo #cont_info_modales{
        width: 100%;
    }

        #contenedor_modales #modal_permiso_vehiculo #cont_info_modales #formulario_permiso_vehiculo{
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
        }
   
            #modal_permiso_vehiculo #cont_info_modales #formulario_permiso_vehiculo #contenedor_cajas_permiso_vehiculo {
                column-gap: 20px;
                display: grid;
                grid-template-columns: repeat(1, 1fr);
                padding: 1.5em;
                row-gap: 20px;
                width: 100%;
            }

                #cont_info_modales #formulario_permiso_vehiculo #contenedor_cajas_permiso_vehiculo .input-caja-registro{
                    animation: slideIn 0.5s ease-out;
                    color: var(--color-placeholder);
                    font-size: 16px;
                }

                    #formulario_permiso_vehiculo #contenedor_cajas_permiso_vehiculo .input-caja-registro .label-input{
                        color: var(--color-placeholder);
                        display: flex;
                        font-size: 20px;
                        margin-bottom: 5px;
                        padding-left: 10px;
                    }
                
                    #formulario_permiso_vehiculo #contenedor_cajas_permiso_vehiculo .input-caja-registro .campo{
                        background: var(--background-inputs);
                        border: none;
                        border-radius: 13px;
                        font-size: 16px;
                        height: 60px;
                        margin-top: 5px;
                        padding: 10px;
                        width: 100%;
                    }

                    #formulario_permiso_vehiculo #contenedor_cajas_permiso_vehiculo .input-caja-registro .campo::placeholder{
                        color: var(--color-placeholder);
                        font-size: 16px;
                    } 
                 
            #modal_permiso_vehiculo #cont_info_modales #formulario_permiso_vehiculo #contenedor_btns_permiso_vehiculo {
                display: flex;
                width: 100%;
            }

                #cont_info_modales #formulario_permiso_vehiculo #contenedor_btns_permiso_vehiculo button {
                    align-items: center;
                    background-color: var(--color-btn-cancelar);
                    border: none;
                    cursor: pointer;
                    color: var(--color-placeholder);
                    display: flex;
                    font-size: 20px;
                    height: 60px;
                    justify-content: center;
                    width: 50%;
                }
                        
                #cont_info_modales #formulario_permiso_vehiculo #contenedor_btns_permiso_vehiculo #btn_registrar_permiso_vehiculo {
                    background-color: var(--color-secundario);
                    color: var(--color-primario);
                }

/*------------------------------------------- Estilos Modal registrar Vehiculos -------------------------------------------*/
#contenedor_modales #modal_vehiculo{
    width: clamp(450px, 32%, 650px);
}

    #contenedor_modales #modal_vehiculo #cont_info_modales{
        width: 100%;
    }

        #contenedor_modales #modal_vehiculo #cont_info_modales #formulario_vehiculo{
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
        }
   
            #modal_vehiculo #cont_info_modales #formulario_vehiculo #contenedor_cajas_vehiculo {
                column-gap: 20px;
                display: grid;
                grid-template-columns: repeat(1, 1fr);
                padding: 1.5em;
                row-gap: 20px;
                width: 100%;
            }

                #cont_info_modales #formulario_vehiculo #contenedor_cajas_vehiculo .input-caja-registro{
                    animation: slideIn 0.5s ease-out;
                    color: var(--color-placeholder);
                    font-size: 16px;
                }

                    #formulario_vehiculo #contenedor_cajas_vehiculo .input-caja-registro .label-input{
                        color: var(--color-placeholder);
                        display: flex;
                        font-size: 20px;
                        margin-bottom: 5px;
                        padding-left: 10px;
                    }
                
                    #formulario_vehiculo #contenedor_cajas_vehiculo .input-caja-registro .campo{
                        background: var(--background-inputs);
                        border: none;
                        border-radius: 13px;
                        font-size: 16px;
                        height: 60px;
                        margin-top: 5px;
                        padding: 10px;
                        width: 100%;
                    }

                    #formulario_vehiculo #contenedor_cajas_vehiculo .input-caja-registro .campo::placeholder{
                        color: var(--color-placeholder);
                        font-size: 16px;
                    } 
                 
            #modal_vehiculo #cont_info_modales #formulario_vehiculo #contenedor_btns_vehiculo {
                display: flex;
                width: 100%;
            }

                #cont_info_modales #formulario_vehiculo #contenedor_btns_vehiculo button {
                    align-items: center;
                    background-color: var(--color-btn-cancelar);
                    border: none;
                    color: var(--color-placeholder);
                    cursor: pointer;
                    display: flex;
                    font-size: 20px;
                    height: 60px;
                    justify-content: center;
                    width: 50%;
                }
                        
                #cont_info_modales #formulario_vehiculo #contenedor_btns_vehiculo #btn_registrar_vehiculo {
                    background-color: var(--color-secundario);
                    color: var(--color-primario);
                }

/*----------------------------------------------------- Estilos Modal registrar visitante -------------------------------------------*/
#contenedor_modales #modal_visitante{
   width: clamp(550px, 50%, 980px);
}

    #contenedor_modales #modal_visitante #cont_info_modales{
        width: 100%;
    }

        #contenedor_modales #modal_visitante #cont_info_modales #formulario_visitante{
            display: flex;
            flex-direction: column;
            width: 100%;
        }

            #modal_visitante #cont_info_modales #formulario_visitante #contenedor_cajas_visitante{
                align-items: end;
                column-gap: 20px;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                padding: 1.5em;
                row-gap: 20px;
                width: 100%;
            }

                #formulario_visitante #contenedor_cajas_visitante  .input-caja-registro{
                    animation: slideIn 0.5s ease-out;
                    color: var(--color-placeholder);
                    font-size: 16px;
                    width: 100%;
                }
                
                    #contenedor_cajas_visitante  .input-caja-registro .label-input{
                        color: var(--color-placeholder);
                        display: flex;
                        font-size: 20px;
                        margin-bottom: 5px;
                        padding-left: 10px;
                    }
                
                    #contenedor_cajas_visitante  .input-caja-registro .campo{
                        background: var(--background-inputs);
                        border: none;
                        border-radius: 13px;
                        font-size: 16px;
                        height: 60px;
                        margin-top: 5px;
                        padding: 10px;
                        width: 100%;
                    }

                    #contenedor_cajas_visitante .input-caja-registro .campo::placeholder{
                        color: var(--color-placeholder);
                        font-size: 16px;
                    }

            #modal_visitante #cont_info_modales #formulario_visitante #contenedor_btns_visitante {
                display: flex;
                width: 100%;
            }

                #cont_info_modales #formulario_visitante #contenedor_btns_visitante button {
                    align-items: center;
                    background-color: var(--color-btn-cancelar);
                    border: none;
                    color: var(--color-placeholder);
                    cursor: pointer;
                    display: flex;
                    font-size: 20px;
                    height: 60px;
                    justify-content: center;
                    width: 50%;
                }

                #cont_info_modales #formulario_visitante #contenedor_btns_visitante #btn_atras_visitante {
                    display: none;
                }  

                #cont_info_modales #formulario_visitante #contenedor_btns_visitante #btn_siguiente_visitante {
                    background-color: var(--color-secundario);
                    color: var(--color-primario);
                    display: none;
                }

                #cont_info_modales #formulario_visitante #contenedor_btns_visitante #btn_registrar_visitante{
                    background-color: var(--color-secundario);
                    color: var(--color-primario);
                }

/*---------------------------------------------- Estilos Modal Habilitar Usuario ----------------------------------------------- */
#contenedor_modales #modal_habilitar_usuario{
    width: clamp(450px, 32%, 650px);
}

    #contenedor_modales #modal_habilitar_usuario #cont_info_modales{
        width: 100%;
    }

        #contenedor_modales #modal_habilitar_usuario #cont_info_modales #formulario_habilitar_usuario{
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
        }
   
            #modal_habilitar_usuario #cont_info_modales #formulario_habilitar_usuario #contenedor_cajas_habilitar {
                column-gap: 20px;
                display: grid;
                grid-template-columns: repeat(1, 1fr);
                padding: 1.5em;
                row-gap: 20px;
                width: 100%;
            }

                #cont_info_modales #formulario_habilitar_usuario #contenedor_cajas_habilitar .input-caja-registro{
                    animation: slideIn 0.5s ease-out;
                    color: var(--color-placeholder);
                    font-size: 16px;
                }

                    #formulario_habilitar_usuario #contenedor_cajas_habilitar .input-caja-registro .label-input{
                        color: var(--color-placeholder);
                        display: flex;
                        font-size: 20px;
                        margin-bottom: 5px;
                        padding-left: 10px;
                    }
                
                    #formulario_habilitar_usuario #contenedor_cajas_habilitar .input-caja-registro .campo{
                        background: var(--background-inputs);
                        border: none;
                        border-radius: 13px;
                        font-size: 16px;
                        height: 60px;
                        margin-top: 5px;
                        padding: 10px;
                        width: 100%;
                    }

                    #formulario_habilitar_usuario #contenedor_cajas_habilitar .input-caja-registro .campo::placeholder{
                        color: var(--color-placeholder);
                        font-size: 16px;
                    } 
                 
            #modal_habilitar_usuario #cont_info_modales #formulario_habilitar_usuario #contenedor_btns_habilitar_usuario {
                display: flex;
                width: 100%;
            }

                #cont_info_modales #formulario_habilitar_usuario #contenedor_btns_habilitar_usuario button {
                    align-items: center;
                    background-color: var(--color-btn-cancelar);
                    border: none;
                    color: var(--color-placeholder);
                    display: flex;
                    font-size: 20px;
                    height: 60px;
                    justify-content: center;
                    width: 50%;
                }
                        
                #cont_info_modales #formulario_habilitar_usuario #contenedor_btns_habilitar_usuario #btn_habilitar {
                    background-color: var(--color-secundario);
                    color: var(--color-primario);
                }

/* ---------------------------------------- Estilos Modal Brigadistas ---------------------------------------------------*/
#contenedor_modales #modal_brigadistas{
    width: clamp(350px, 25%, 500px);
    background-color: #EC8103;
}

    #contenedor_modales #modal_brigadistas .contenedor-titulo-modal{
        justify-content: end;
        padding: 5px 8px;
    }

    #contenedor_modales #modal_brigadistas #cont_info_modales{
        display:  flex;
        flex-direction: column;
        min-height: 250px;
        padding: 1em;
        row-gap: 5px;
        width: 100%;
    }

        #contenedor_modales #modal_brigadistas #cont_info_modales #mensaje_respuesta{
            align-items: center;
            padding: 100px 0;
        }

        #contenedor_modales #modal_brigadistas #cont_info_modales .document-card-brigadista {
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            font-family: Arial, sans-serif;
            transition: all 0.3s ease;
            width: 100%;
        }
  
            #modal_brigadistas #cont_info_modales .document-card-brigadista .card-header {
                align-items: center;
                display: flex;
                justify-content: space-between;
                padding: 8px
            }
  
                #cont_info_modales .document-card-brigadista .card-header .document-title {
                    font-size: 0.9em;
                    font-weight: bold;
                    color: #333;
                    margin: 0;
                }
  
                #cont_info_modales .document-card-brigadista .card-header .document-meta {
                    font-size: 1em;
                    color: #555;
                    margin-top: 5px;
                }

/*------------------------------------------------- Estilos Modal seleccionar puerta --------------------------------------------*/
#contenedor_modales #modal_puerta{
    width: clamp(450px, 32%, 650px);
}

    #contenedor_modales #modal_puerta #cont_info_modales{
        width: 100%;
    }

        #contenedor_modales #modal_puerta #cont_info_modales #formulario_puerta{
            display: flex;
            flex-direction: column;
            width: 100%;
        }

            #modal_puerta #cont_info_modales #formulario_puerta #contenedor_cajas_puerta{
                column-gap: 20px;
                display: grid;
                grid-template-columns: repeat(1, 1fr);
                padding: 1.5em;
                row-gap: 20px;
                width: 100%;
            }

            #cont_info_modales #formulario_puerta #contenedor_cajas_puerta .caja-checkbox{
                animation: slideIn 0.5s ease-out;
                align-items: center;
                column-gap: 20px;
                display: flex;
                width: 100%;
            }

                #formulario_puerta #contenedor_cajas_puerta .caja-checkbox .label-input{
                    color: var(--color-placeholder);
                    display: flex;
                    font-size: 20px;
                }

                #formulario_puerta #contenedor_cajas_puerta .caja-checkbox .checkbox-puerta{
                    appearance: none; 
                    border: none;
                    border-radius: 13px;
                    width: 60px;
                    height: 60px;
                    background: var(--background-inputs); 
                    cursor: pointer;
                }
                    
                #formulario_puerta #contenedor_cajas_puerta .caja-checkbox .checkbox-puerta:checked {
                    background-color: var(--color-secundario);
                }

                #formulario_puerta #contenedor_cajas_puerta .caja-checkbox ion-icon{
                    color: var(--color-btn-cancelar);
                    font-size: 50px;
                }
                 
            #modal_puerta #cont_info_modales #formulario_puerta #contenedor_btns_puerta {
                display: flex;
                width: 100%;
            }

                #cont_info_modales #formulario_puerta #contenedor_btns_puerta button {
                    align-items: center;
                    background-color: var(--color-btn-cancelar);
                    border: none;
                    color: var(--color-placeholder);
                    display: flex;
                    font-size: 20px;
                    height: 60px;
                    justify-content: center;
                    width: 50%;
                }
   
                #cont_info_modales #formulario_puerta #contenedor_btns_puerta #btn_guardar_puerta {
                    background-color: var(--color-secundario);
                    color: var(--color-primario);
                }


@media(min-width: 768px) and (max-width: 1023px){
    main#cuerpo{
        display: block;
    }

    main#cuerpo section#contenedor_pagina{
        height: 94vh;
    }

    section#contenedor_pagina #nav_menu{
        display: none;
    }

     /*-------------------------------------------------- Estilos generales para cada modal ------------------------------------*/
    #contenedor_modales .contenedor-titulo-modal h2{
        font-size: 1.2em;
    }

}

@media (max-width: 767px) {
    main#cuerpo{
        display: block;
    }

    main#cuerpo section#contenedor_pagina{
        align-items: center;
        min-height: 100vh;
    }    
    
    section#contenedor_pagina #nav_menu{
        display: none;
    }

    /* --------------------------------------- Estilos modal notificaciones----------------------------------------------------------*/
    #contenedor_notificaciones .contenedor-ppal-modal{
        width: clamp(300px, 100%, 500px);
    }

    /* --------------------------------------- Estilos generales para cada modal ----------------------------------------------------------*/
    #contenedor_modales .contenedor-titulo-modal h2{
        font-size: 1.2em;
        text-align: left;
    }

    /* ------------------------------------------------- Estilos Modal Novedad Usuario ---------------------------------------*/
    #contenedor_modales #modal_novedad_usuario{
        width: clamp(300px, 92.5%, 500px);
    }

        #modal_novedad_usuario #cont_info_modales #formulario_novedad_usuario #contenedor_cajas_novedad_usuario{
            padding: 1em;
            row-gap: 10px;
        }

    /* ------------------------------------------------- Estilos Permiso Usuario ---------------------------------------*/
    #contenedor_modales #modal_permiso_usuario{
        width: clamp(300px, 92.5%, 500px);
    }

        #modal_permiso_usuario #cont_info_modales #formulario_permiso_usuario #contenedor_cajas_permiso_usuario{
            padding: 1em;
            row-gap: 10px;
        }

     /* ------------------------------------------------- Estilos Modal Permiso Vehiculo ---------------------------------------*/
    #contenedor_modales #modal_permiso_vehiculo{
        width: clamp(300px, 92.5%, 500px);
    }

        #modal_permiso_vehiculo #cont_info_modales #formulario_permiso_vehiculo #contenedor_cajas_permiso_vehiculo{
            padding: 1em;
            row-gap: 10px;
        }

    /* ----------------------------------------- Estilos Modal registrar visitante ---------------------------------------------*/
    #contenedor_modales #modal_visitante{
        width: clamp(300px, 92.5%, 500px);
    }
        #modal_visitante #cont_info_modales #formulario_visitante #contenedor_cajas_visitante{
            grid-template-columns: repeat(1, 1fr);
            padding: 1em;
            row-gap: 10px;
        }
          
            #cont_info_modales #formulario_visitante #contenedor_cajas_visitante .seccion-02{
                display: none;
            }

        #cont_info_modales #formulario_visitante #contenedor_btns_visitante #btn_siguiente_visitante {
            display: flex;
        }

        #cont_info_modales #formulario_visitante #contenedor_btns_visitante #btn_registrar_visitante{
            display: none;
        }

    /* ------------------------------------------------- Estilos Modal Habilitar Usuario ---------------------------------------*/
    #contenedor_modales #modal_habilitar_usuario{
        width: clamp(300px, 92.5%, 500px);
    }

        #modal_habilitar_usuario #cont_info_modales #formulario_habilitar_usuario #contenedor_cajas_habilitar{
            padding: 1em;
            row-gap: 10px;
        }

    /* ------------------------------------------------- Estilos Modal Seleccionar Puerta ---------------------------------------*/
    #contenedor_modales #modal_puerta{
        width: clamp(300px, 92.5%, 500px);
    }

        #modal_puerta #cont_info_modales #formulario_puerta #contenedor_cajas_puerta{
            padding: 1em;
            row-gap: 10px;
        }

    /* -------------------------------------------------- Estilos Modal Brigadistas ----------------------------------------*/
    #contenedor_modales #modal_brigadistas{
        width: clamp(300px, 92.5%, 500px);
    }
}