/* ==========================================
   SISTEMA SEGURIDAD WEB
   ESTILOS LOGIN + PANEL
========================================== */


:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;

    --dark:#0f172a;

    --dark2:#020617;

    --white:#ffffff;

    --gray:#64748b;

    --danger:#dc2626;

    --success:#16a34a;

}



/* RESET */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



body{

    font-family:'Segoe UI',Arial,sans-serif;

}



/* ==========================================
   LOGIN
========================================== */


.login-body{


    min-height:100vh;


    display:flex;


    justify-content:center;


    align-items:center;



    background:


    linear-gradient(

    135deg,

    #020617,

    #1e3a8a

    );


}



.login-container{


    width:400px;


    background:white;


    padding:40px;


    border-radius:20px;


    box-shadow:


    0 15px 40px rgba(0,0,0,.4);



}



.login-logo{


    text-align:center;


    margin-bottom:20px;


}



.login-logo i{


    font-size:70px;


    color:#2563eb;


}



.login-title{


    text-align:center;


    font-size:28px;


    font-weight:700;


    color:#0f172a;


    margin-bottom:10px;


}



.login-subtitle{


    text-align:center;


    color:#64748b;


    margin-bottom:30px;


}



/* CAMPOS */


.form-label{


    font-weight:600;


    color:#334155;


}



.form-control{


    height:45px;


    border-radius:10px;


    border:1px solid #cbd5e1;


}



.form-control:focus{


    border-color:#2563eb;


    box-shadow:


    0 0 0 3px rgba(37,99,235,.15);


}



/* BOTON */


.btn-login{


    width:100%;


    height:45px;


    border:none;


    border-radius:10px;


    background:#2563eb;


    color:white;


    font-size:16px;


    font-weight:600;


    cursor:pointer;


    transition:.3s;


}



.btn-login:hover{


    background:#1d4ed8;


    transform:translateY(-2px);


}



/* ALERTAS */


.alert{


    border-radius:10px;


}



/* ==========================================
   PANEL ADMINISTRATIVO
========================================== */



.sidebar{


    position:fixed;


    left:0;


    top:0;


    width:260px;


    height:100vh;


    background:#0f172a;


    color:white;


}



.sidebar-header{


    padding:25px;


    text-align:center;


    border-bottom:1px solid rgba(255,255,255,.1);


}



.sidebar-header i{


    font-size:50px;


    color:#38bdf8;


}



.sidebar-header h3{


    margin-top:10px;


}



.menu{


    list-style:none;


    padding:20px;


}



.menu li{


    margin-bottom:10px;


}



.menu a{


    display:flex;


    gap:12px;


    align-items:center;


    padding:12px;


    border-radius:10px;


    color:#cbd5e1;


    text-decoration:none;


}



.menu a:hover,


.menu a.active{


    background:#2563eb;


    color:white;


}



/* CONTENIDO */


.main-content{


    margin-left:260px;


    padding:30px;


}



/* BARRA SUPERIOR */


.topbar{


    background:white;


    padding:20px;


    border-radius:15px;


    display:flex;


    justify-content:space-between;


    box-shadow:


    0 5px 20px rgba(0,0,0,.1);


}



/* TARJETAS */


.card-security{


    background:white;


    padding:25px;


    border-radius:15px;


    box-shadow:


    0 5px 20px rgba(0,0,0,.1);


}



.card-security i{


    font-size:40px;


    color:#2563eb;


}



/* TABLAS */


.table-container{


    background:white;


    padding:25px;


    border-radius:15px;


    box-shadow:


    0 5px 20px rgba(0,0,0,.1);


}



/* BADGES */


.badge-security{


    padding:7px 12px;


    border-radius:20px;


}



.badge-danger{


    background:#fee2e2;


    color:#991b1b;


}



.badge-success{


    background:#dcfce7;


    color:#166534;


}



/* RESPONSIVE */


@media(max-width:800px){


.sidebar{


width:80px;


}



.main-content{


margin-left:80px;


}



.sidebar-header h3,

.sidebar-header small,

.menu a span{


display:none;


}



.login-container{


width:90%;


}



}