@charset "utf-8";

/*====================================================
=            RESET GENERAL
====================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    font-family:Arial, Helvetica, sans-serif;

    display:flex;

    height:100vh;

    background:#f4f6f9;

}


/*====================================================
=            LAYOUT GENERAL
====================================================*/


.sidebar{

    width:240px;

    flex-shrink:0;

}


.main-area{

    flex-grow:1;

    display:flex;

    flex-direction:column;

    overflow:hidden;

}


main.content{

    flex-grow:1;

    background:#fff;

    overflow-y:auto;

    padding:15px;

}



/*====================================================
=            SIDEBAR
====================================================*/


nav.sidebar{

    width:240px;

    height:100vh;

    background:#fff;

    display:flex;

    flex-direction:column;

    padding-top:20px;

    box-shadow:2px 0 10px rgba(0,0,0,.25);

    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;

}



nav.sidebar>a{

    color:#000;

    text-decoration:none;

    font-size:18px;

    padding:15px 25px;

    display:block;

    transition:.3s;

    border-left:4px solid transparent;

    font-weight:600;

}



nav.sidebar>a:hover{

    background:#c0392b;

    color:#fff;

    border-left:4px solid #EB5304;

}



/*====================================================
=            MENUS SIDEBAR
====================================================*/


nav.sidebar ul{

    list-style:none;

    margin:0;

    padding:0;

}



.sidebar .menu>a{

    display:block;

    padding:12px 15px;

    border-radius:6px 6px 0 0;

    color:#fff;

    font-weight:bold;

    text-decoration:none;

    transition:.3s;

}



/*====================================================
=            MENU ROJO
====================================================*/


.menu-rojo>a{

    background:#b71c1c;

}


.menu-rojo>a:hover{

    background:#8e1515;

}


.menu-rojo>a::before{

    content:"📋 ";

}



/*====================================================
=            MENU AZUL
====================================================*/


.menu-azul>a{

    background:#1565c0;

}


.menu-azul>a:hover{

    background:#0d47a1;

}


.menu-azul>a::before{

    content:"📊 ";

}



/*====================================================
=            SUBMENUS
====================================================*/


.sidebar .submenu{

    display:none;

    margin-top:0;

    padding-top:0;

    overflow:hidden;

}



.sidebar .submenu.activo{

    display:block;

}



/*====================================================
=            SUBMENU ROJO
====================================================*/


.menu-rojo .submenu{

    background:#fdecea;

    border-left:5px solid #b71c1c;

}



.menu-rojo .submenu a{

    display:block;

    padding:11px 15px 11px 28px;

    color:#7f0000;

    text-decoration:none;

    font-size:15px;

    border-bottom:1px solid #ddd;

    transition:.3s;

}



.menu-rojo .submenu a:hover{

    background:#b71c1c;

    color:white;

}



/*====================================================
=            SUBMENU AZUL
====================================================*/


.menu-azul .submenu{

    background:#e3f2fd;

    border-left:5px solid #1565c0;

}



.menu-azul .submenu a{

    display:block;

    padding:11px 15px 11px 28px;

    color:#0d47a1;

    text-decoration:none;

    font-size:15px;

    border-bottom:1px solid #ddd;

    transition:.3s;

}



.menu-azul .submenu a:hover{

    background:#1565c0;

    color:white;

}



.submenu li:last-child a{

    border-bottom:none;

}



/* evita espacios entre menus */

.sidebar > ul > li{

    margin-bottom:12px;

}



/*====================================================
=            CERRAR SESION
====================================================*/


nav.sidebar .logout{

    margin-top:auto;

    background:#c0392b;

    color:#fff;

    text-align:center;

    padding:12px;

    font-weight:bold;

    border-top:2px solid #922b21;

}



nav.sidebar .logout:hover{

    background:#e74c3c;

}



/*====================================================
=            TOPBAR
====================================================*/


header.topbar{

    height:60px;

    background:#c0392b;

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 25px;

}



/* PARTE IZQUIERDA */

.topbar-left{

    display:flex;

    align-items:center;

}



/* PARTE DERECHA */

.topbar-right{

    display:flex;

    align-items:center;

    gap:15px;

}

.logout-top{

    color:white;

    text-decoration:none;

    font-weight:bold;

    padding:10px 15px;

    border-radius:6px;

    background:#8e1515;

    transition:.3s;

}


.logout-top:hover{

    background:#5f0f0f;

    color:white;

}


/*====================================================
=            DROPDOWN USUARIO
====================================================*/


.dropdown{

    position:relative;

}



.dropdown button{

    background:none;

    border:none;

    color:#fff;

    cursor:pointer;

    padding:8px 12px;

    font-size:16px;

}



.dropdown button:hover{

    background:#3498db;

}



.dropdown-content{

    display:none;

    position:absolute;

    right:0;

    min-width:180px;

    background:#fff;

    border-radius:4px;

    overflow:hidden;

    box-shadow:0 8px 16px rgba(0,0,0,.2);

}



.dropdown-content a{

    display:block;

    color:#333;

    padding:12px 16px;

    text-decoration:none;

}



.dropdown-content a:hover{

    background:#ddd;

}



.dropdown.show .dropdown-content{

    display:block;

}

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


.login-container{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f4f6f9;

}



.login-card{


    width:420px;

    background:#ffffff;

    padding:35px;

    border-radius:15px;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

    text-align:center;

    border-top:6px solid #b71c1c;


}



.login-logo img{


    width:110px;

    height:auto;

    margin-bottom:15px;


}



.login-card h1{


    color:#2c3e50;

    font-size:25px;

    margin-bottom:10px;


}



.login-subtitle{


    color:#666;

    font-size:15px;

    margin-bottom:25px;


}



.login-card form{


    text-align:left;


}



.login-card label{


    display:block;

    color:#333;

    font-weight:bold;

    margin-bottom:6px;


}



.login-card input{


    width:100%;

    padding:12px;

    margin-bottom:18px;

    border:1px solid #ccc;

    border-radius:8px;

    font-size:15px;


}



.login-card input:focus{


    outline:none;

    border-color:#b71c1c;

    box-shadow:0 0 5px rgba(183,28,28,.3);


}



.login-card button{


    width:100%;

    padding:13px;

    background:#b71c1c;

    color:white;

    border:none;

    border-radius:8px;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;


}



.login-card button:hover{


    background:#8e1515;


}



.login-footer{


    margin-top:25px;

    font-size:12px;

    color:#888;


}

/*====================================================
=            BIENVENIDA DASHBOARD
====================================================*/


.welcome-panel{

    background:#ffffff;

    width:100%;

    min-height:170px;

    border-radius:15px;

    padding:30px;

    margin-bottom:30px;

    display:flex;

    align-items:center;

    gap:30px;

    box-shadow:0 5px 15px rgba(0,0,0,.12);

    border-left:8px solid #b71c1c;

}



/* ICONO PRINCIPAL */


.welcome-icon{

    width:95px;

    height:95px;

    border-radius:50%;

    background:#fdecea;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:48px;

    flex-shrink:0;

}



/* TITULO */


.welcome-panel h1{

    margin:0 0 15px 0;

    color:#2c3e50;

    font-size:32px;

    font-weight:700;

}



/* TEXTO */


.welcome-panel p{

    margin:0;

    color:#555;

    font-size:17px;

    line-height:1.7;

    max-width:900px;

}



/* DESTACAR NOMBRE DEL SISTEMA */


.welcome-panel strong{

    color:#b71c1c;

}

/*====================================================
=            NUEVO DASHBOARD ADMIN
====================================================*/


.dashboard-cards{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

    width:100%;

}



.admin-card{

    background:#ffffff;

    border-radius:15px;

    padding:30px;

    min-height:240px;

    box-shadow:0 5px 15px rgba(0,0,0,.15);

    transition:.3s;

}



.admin-card:hover{

    transform:none;

}



.admin-card h2{

    color:#2c3e50;

    font-size:22px;

    margin-bottom:15px;

}



.admin-card p{

    color:#666;

    line-height:1.6;

    font-size:15px;

}



/* ICONOS */


.admin-card .card-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:35px;

    margin-bottom:20px;

}


.card-icon.rojo{

    background:#fdecea;

}


.card-icon.azul{

    background:#e3f2fd;

}


.card-icon.verde{

    background:#e8f5e9;

}


.card-icon.morado{

    background:#f3e5f5;

}


.card-icon.naranja{

    background:#fff3e0;

}

/*====================================================
=            LINKS TOPBAR
====================================================*/


.top-link{

    color:white;

    text-decoration:none;

    font-size:16px;

    font-weight:bold;

    padding:10px 15px;

    margin-right:15px;

    border-radius:6px;

    transition:.3s;

}



.top-link:hover{

    background:#8e1515;

    color:white;

}



/* BOTON USUARIOS */

.dropdown button{

    border-radius:6px;

    font-weight:bold;

}



.dropdown button:hover{

    background:#8e1515;

}



/* MENU DESPLEGABLE */


.dropdown-content a{

    font-size:14px;

}


.dropdown-content a:hover{

    background:#fdecea;

    color:#b71c1c;

}

/*====================================================
=            PAGINAS ADMINISTRATIVAS
====================================================*/


.page-header{

    background:#fff;

    border-radius:15px;

    padding:25px;

    display:flex;

    align-items:center;

    gap:25px;

    margin-bottom:25px;

    box-shadow:0 4px 12px rgba(0,0,0,.12);

    border-left:8px solid #1565c0;

}



.page-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:40px;

    background:#e3f2fd;

}



.page-header h1{

    margin:0 0 10px;

    color:#2c3e50;

    font-size:28px;

}



.page-header p{

    margin:0;

    color:#666;

}



/* TABLA */


.table-card{

    background:#fff;

    padding:25px;

    border-radius:15px;

    box-shadow:0 4px 12px rgba(0,0,0,.12);

}



.admin-table{

    width:100%;

    border-collapse:collapse;

}



.admin-table thead{

    background:#1565c0;

    color:white;

}



.admin-table th{

    padding:14px;

    text-align:left;

}



.admin-table td{

    padding:12px;

    border-bottom:1px solid #ddd;

    color:#444;

}



.admin-table tbody tr:hover{

    background:#e3f2fd;

}



.empty-message{

    background:#fff;

    padding:25px;

    border-radius:12px;

    text-align:center;

    color:#777;

}

/*====================================================
=        GESTION ESTUDIANTES
====================================================*/


.filter-card{

    background:#fff;

    padding:20px;

    border-radius:12px;

    margin-bottom:25px;

    box-shadow:0 4px 12px rgba(0,0,0,.12);

}



.filter-card label{

    font-weight:bold;

    color:#444;

    margin-right:10px;

}



.filter-card select{

    padding:10px;

    border-radius:8px;

    border:1px solid #ccc;

}



/* FORMULARIO EDICION */


.form-card{

    background:#fff;

    width:500px;

    margin:20px auto;

    padding:30px;

    border-radius:15px;

    box-shadow:0 4px 12px rgba(0,0,0,.15);

}



.form-card label{

    display:block;

    margin-bottom:15px;

    font-weight:bold;

}



.form-card input,
.form-card select{

    width:100%;

    padding:11px;

    margin-top:5px;

    border-radius:8px;

    border:1px solid #ccc;

}



.form-card button{

    width:100%;

    padding:12px;

    background:#b71c1c;

    color:white;

    border:none;

    border-radius:8px;

    font-weight:bold;

    cursor:pointer;

}



.form-card button:hover{

    background:#8e1515;

}



/* TABLA */


.table-card{

    background:#fff;

    padding:25px;

    border-radius:15px;

    box-shadow:0 4px 12px rgba(0,0,0,.12);

}



.admin-table{

    width:100%;

    border-collapse:collapse;

}



.admin-table th{

    background:#1565c0;

    color:white;

    padding:14px;

}



.admin-table td{

    padding:12px;

    border-bottom:1px solid #ddd;

}



.admin-table tr:hover{

    background:#e3f2fd;

}



.admin-table a{

    color:#b71c1c;

    text-decoration:none;

    font-weight:bold;

}



.admin-table a:hover{

    text-decoration:underline;

}

/*====================================================
=       FORMULARIOS ADMINISTRATIVOS
====================================================*/


.panel-card form{

    margin-top:20px;

}


/* ETIQUETAS */

.panel-card label{

    display:block;

    font-weight:600;

    color:#34495e;

    margin-bottom:6px;

    font-size:15px;

}



/* INPUTS Y SELECT */

.panel-card input[type="text"],
.panel-card input[type="email"],
.panel-card input[type="password"],
.panel-card input[type="file"],
.panel-card select{


    width:100%;

    padding:12px 14px;

    border:1px solid #ccd1d9;

    border-radius:8px;

    background:#fff;

    font-size:15px;

    color:#34495e;

    transition:.3s;

}



/* EFECTO AL SELECCIONAR */

.panel-card input:focus,
.panel-card select:focus{


    outline:none;

    border-color:#1565c0;

    box-shadow:0 0 5px rgba(21,101,192,.35);

}



/* INPUT ARCHIVO */

.panel-card input[type="file"]{


    padding:10px;

    background:#f8f9fa;

}



/* BOTONES GENERALES */

.panel-card button{


    width:100%;

    padding:13px;

    border:none;

    border-radius:8px;

    background:#1565c0;

    color:white;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}



/* BOTON HOVER */

.panel-card button:hover{


    background:#0d47a1;

    transform:translateY(-2px);

    box-shadow:0 4px 10px rgba(0,0,0,.2);

}



/* BOTON INGRESAR */

.boton-enviar{

    background:#2e7d32 !important;

    width:auto !important;

    padding:13px 35px !important;

}



.boton-enviar:hover{


    background:#1b5e20 !important;

}

.form-group{

    margin-bottom:15px;

}