/* =====================================
   ERP DEIVTEL
   GRAFITO EXECUTIVE EDITION
===================================== */


*{
    box-sizing:border-box;
}


body{

    margin:0;

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

    background:#f3f4f6;

    color:#374151;

}



/* ==========================
   BARRA SUPERIOR
========================== */


.header{

    background:#111827;

    color:white;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 30px;

}





.header h2{

    margin:0;

    font-size:22px;

}





.usuario{

    font-size:14px;

    color:#d1d5db;

}






/* ==========================
   MENU LATERAL
========================== */


.sidebar{


    width:250px;

    height:100vh;

    background:#1f2937;

    position:fixed;

    left:0;

    top:0;

    padding-top:20px;

}



.sidebar h2{


    color:white;

    text-align:center;

    margin-bottom:30px;

}



.sidebar a{


    display:block;

    color:#d1d5db;

    padding:15px 25px;

    text-decoration:none;

    transition:.3s;

}



.sidebar a:hover{


    background:#374151;

    color:white;

}







/* ==========================
   CONTENIDO
========================== */


.contenido{


    margin-left:250px;

    padding:30px;

}






/* ==========================
   TARJETAS
========================== */


.card{


    background:white;

    border-radius:18px;

    padding:25px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.08);

    margin-bottom:20px;

}





.card h3{

    margin-top:0;

    color:#111827;

}





.numero{


    font-size:38px;

    font-weight:bold;

    color:#2563eb;

}






/* ==========================
   BOTONES
========================== */


.btn{


    display:inline-block;

    padding:10px 18px;

    border-radius:10px;

    text-decoration:none;

    font-weight:bold;

    color:white;

}



.btn-primary{

    background:#2563eb;

}



.btn-success{

    background:#16a34a;

}



.btn-danger{

    background:#dc2626;

}



.btn-dark{

    background:#111827;

}







/* ==========================
   TABLAS
========================== */


table{


    width:100%;

    border-collapse:collapse;

}



th{


    background:#111827;

    color:white;

    padding:14px;

}



td{


    padding:12px;

    border-bottom:1px solid #e5e7eb;

}





tr:hover{


    background:#f9fafb;

}






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


input,
select,
textarea{


    width:100%;

    padding:12px;

    border:

    1px solid #d1d5db;

    border-radius:10px;

    margin-bottom:15px;

}




label{


    font-weight:bold;

    margin-bottom:5px;

    display:block;

}