body {
    background-color: #01010a;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: white;
}


.logo {
    width: 100px;
    font-size: 120px;
    display: inline-block;
    transition: transform 3.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center center;
}

.logo:hover {
    transform: translateY(-20px) rotate(360deg);
}




main {
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 90vh;
}

.contenedor_login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 0 10px #02ffab;
    background-color: #11111b;
    padding: 40px 10px 0;
}

.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #01010a;
    padding: 10px;
}

.nombre_titulo {
    display: flex;
    text-align: center;
    height: 5vh; 
}

.unidad {
    height: 3vh;
}

.usuario, .contraseña {
    color: #000000;
    width: 80%;
    padding: 10px;
    margin: 10px 0;
    border: solid 1px #3cff00;
    border-radius: 5px;
    box-shadow: 0 0 5px #02ffab;
    background-color: #57575fb7;
    font-size: 20px;
}

.usuario:hover, .contraseña:hover {
    background-color: #ffffff;
}

.boton_login:hover {
    background-color: #238839;
}

.boton_login {
    color: #000000;
    font-size: 20px;
    margin: 10px 120px;
    background-color: #57575fb7;
    border-radius: 10px;
    cursor: pointer;
}
.terminos_condicioness {
    display: flex;
    text-align: center;
    flex-direction: column;
    height: 10vh;
   
}

.terminos_condiciones {
    display: flex;
    text-align: center;
    flex-direction: column;
    margin-top: 10px;
    height: 15vh;
    padding: 0px;
    gap: 5px;
    margin: 10px;
    padding: 0;
  
}



.bloqueo a {
    text-decoration: underline;
    color: rgb(255, 166, 0);
}

.recuperacion a {
    text-decoration: underline;
    color: rgb(255, 0, 0);
}

.footer {
    text-align: center;
}



.terminos a {
    text-decoration: underline;
    color: #3cd33c; 
}

#mensaje-checkbox {
    margin-top: 1px;
    color: #ffffff;
}


/* =========================
   RESPONSIVE CELULARES
   ========================= */

@media (max-width: 800px) {

    .contenedor_login {
        width: 80%;
        padding: 30px 10px;
       
    }

    .logo {
        width: 60px;
    }

    .nombre_titulo {
        font-size: 17px;
        height: 15px;
    }

    .unidad {
        height: auto;
        font-size: 14px;
    }

    .usuario,
    .contraseña {
        width: 80%;
        font-size: 16px;
    }

    .boton_login {
        width: 50%;
        font-size: 18px;
        margin: 15px;
        height: 30px;
        padding-bottom: 18px;
        background-color: antiquewhite;
    }

    .terminos_condicioness {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 20px 0;
    }

    .bloqueo {
        padding: 0px;
    }
   

    .footer {
        font-size: 12px;
        padding: 10px;
    }

}

/* ==========================================================
   AJUSTES RESPONSIVE COMPLEMENTARIOS
   Solo adapta distribucion y dimensiones; conserva la paleta.
========================================================== */

@media (max-width: 1024px) {
    .formulario-usuarios,
    .estadisticas,
    .busqueda,
    .contenedor,
    .contenedor_button,
    .formulario,
    .formu_nuevo,
    .div_guardar,
    .div_camara,
    .div-actualizar,
    .botones-camara,
    .contenedor-button,
    .informacion,
    .acciones,
    .panel-centinela__header {
        flex-wrap: wrap;
    }

    .campo-militar,
    .campo-personal,
    .campo-acceso,
    .campo-vehiculo,
    .campo-estado {
        max-width: 100%;
    }

    img, video, iframe, canvas {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    *, *::before, *::after {
        box-sizing: border-box;
    }

    html, body {
        max-width: 100%;
    }

    .formulario-usuarios,
    .estadisticas,
    .busqueda,
    .contenedor,
    .contenedor_button,
    .formulario,
    .formu_nuevo,
    .datos_persona,
    .datos_vehiculo,
    .div_guardar,
    .div_camara,
    .div-actualizar,
    .botones-camara,
    .contenedor-button,
    .acciones,
    .guardar,
    .panel-centinela,
    .panel-centinela__header,
    .panel-centinela__controls {
        max-width: 100%;
    }

    input, select, textarea, button {
        max-width: 100%;
    }

    textarea {
        width: 100%;
    }

    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .contenedor_button,
    .div_guardar,
    .div_camara,
    .contenedor-button {
        gap: 16px;
        padding: 16px;
    }

    .panel-centinela {
        padding: 15px;
    }

    .panel-centinela__message,
    .centinela-chat__message {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .formulario-usuarios,
    .estadisticas,
    .busqueda,
    .contenedor,
    .contenedor_button,
    .formulario,
    .formu_nuevo,
    .div_guardar,
    .div_camara,
    .div-actualizar,
    .botones-camara,
    .contenedor-button,
    .acciones,
    .guardar {
        gap: 10px;
    }

    .campo-militar,
    .campo-personal,
    .campo-acceso,
    .campo-vehiculo,
    .campo-estado,
    .contenedor_login {
        width: 100%;
        max-width: 100%;
    }

    .contenedor_button,
    .div_guardar,
    .div_camara,
    .contenedor-button,
    .acciones {
        padding: 12px;
    }

    .logo {
        max-width: 100%;
    }

    .menu_horizontal {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .menu-btn {
        flex: 0 0 auto;
        font-size: clamp(16px, 4vw, 22px);
    }

    .panel-centinela h2 {
        font-size: clamp(20px, 6vw, 28px);
    }

    .centinela-chat {
        min-height: 140px;
        max-height: 50vh;
    }
}