body{

    background:#f1f5f9;

    color:#0f172a;
}

/*==========================
HEADER
==========================*/

.admin-container{

    width:100%;

    min-height:100vh;
}

.admin-header{

    height:80px;

    background:#0f172a;

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 40px;
}

.logo h2{

    font-size:26px;

    margin-bottom:4px;
}

.logo span{

    color:#94a3b8;

    font-size:14px;
}

.admin-user{

    font-weight:600;
}

/*==========================
TABS
==========================*/

.top-tabs{

    display:flex;

    gap:12px;

    padding:24px 40px;

    background:#ffffff;

    border-bottom:1px solid #e2e8f0;
}

.tab-btn{

    padding:14px 24px;

    border:none;

    background:transparent;

    cursor:pointer;

    border-radius:12px;

    font-size:15px;

    font-weight:600;

    transition:.25s;
}

.tab-btn:hover{

    background:#f1f5f9;
}

.tab-btn.active{

    background:#0f172a;

    color:#ffffff;
}

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

main{

    padding:40px;
}

.tab-content{

    display:none;
}

.tab-content.active{

    display:block;
}

/*==========================
KPIs
==========================*/

.kpi-grid{

    display:grid;

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

    gap:25px;

    margin-bottom:35px;
}

.kpi-card{

    background:#ffffff;

    border-radius:18px;

    padding:28px;

    box-shadow:0 10px 30px rgba(15,23,42,.06);
}

.kpi-card h3{

    color:#64748b;

    font-size:15px;

    margin-bottom:12px;
}

.kpi-card span{

    font-size:42px;

    font-weight:700;

    color:#0f172a;
}

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

.panel{

    background:#ffffff;

    border-radius:18px;

    padding:30px;

    box-shadow:0 10px 30px rgba(15,23,42,.06);
}

.panel h2{

    margin-bottom:25px;

    font-size:24px;
}

/*==========================
TABLA
==========================*/

.table{

    width:100%;

    border-collapse:collapse;
}

.table th{

    text-align:left;

    padding:16px;

    background:#f8fafc;

    color:#64748b;

    font-size:14px;
}

.table td{

    padding:18px 16px;

    border-bottom:1px solid #edf2f7;
}

.table tr:hover{

    background:#fafafa;
}

.table select{

    width:100%;

    padding:10px 14px;

    border-radius:10px;

    border:1px solid #cbd5e1;

    outline:none;
}

/*==========================
CARDS
==========================*/

.cards-grid{

    display:grid;

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

    gap:30px;
}

.asesor-card,
.catalog-card{

    background:#ffffff;

    border-radius:18px;

    padding:35px;

    text-align:center;

    box-shadow:0 10px 30px rgba(15,23,42,.06);
}

.asesor-card h3{

    margin-bottom:15px;
}

.asesor-card p{

    color:#64748b;

    margin-bottom:12px;
}

.asesor-card span{

    display:block;

    font-size:42px;

    font-weight:700;

    margin-bottom:25px;
}

.catalog-card{

    cursor:pointer;

    transition:.25s;
}

.catalog-card:hover{

    transform:translateY(-5px);
}

.catalog-card{

    font-size:58px;
}

.catalog-card h3{

    margin-top:20px;
}

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

.btn-modal{

    background:#0f172a;

    color:white;

    border:none;

    padding:14px 22px;

    border-radius:12px;

    cursor:pointer;
}

/*==========================
MODAL
==========================*/

.modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    justify-content:center;

    align-items:center;
}

.modal-content{

    width:500px;

    background:white;

    border-radius:20px;

    padding:35px;

    position:relative;
}

.close-modal{

    position:absolute;

    right:25px;

    top:20px;

    font-size:28px;

    cursor:pointer;
}

.modal ul{

    margin-top:20px;

    padding-left:18px;
}

.modal li{

    margin-bottom:8px;
}