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

.dashboard-page,
.page{

    width:100%;

}

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

.page-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#fff;

    padding:25px 30px;

    border-radius:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    margin-bottom:25px;

}

.page-header h1{

    font-size:34px;

    color:#163A5F;

    margin-bottom:8px;

}

.page-header p{

    color:#64748B;

    font-size:15px;

}

.dashboard-time{

    font-size:36px;

    font-weight:700;

    color:#16A34A;

}

/* ==========================================================
   KPI
========================================================== */

.cards{

    display:grid;

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

    gap:22px;

    margin-bottom:30px;

}

.cards .card{

    background:#fff;

    border-radius:18px;

    padding:25px;

    border:none;

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

    transition:.25s;

}

.cards .card:hover{

    transform:translateY(-6px);

}

.card-icon{

    font-size:34px;

    margin-bottom:15px;

}

.card-title{

    color:#64748B;

    font-size:14px;

    margin-bottom:10px;

}

.card-value{

    font-size:32px;

    font-weight:bold;

    color:#163A5F;

}

/* ==========================================================
   SECCIONES
========================================================== */

.dashboard-section{

    background:#fff;

    border-radius:18px;

    padding:25px;

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

    margin-bottom:30px;

}

.dashboard-section h2{

    margin-bottom:20px;

    color:#163A5F;

}

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

.dashboard-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}

/* ==========================================================
   GRID
========================================================== */

.dashboard-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:25px;

    margin-bottom:30px;

}

/* ==========================================================
   CARD
========================================================== */

.dashboard-card{

    background:#fff;

    border-radius:18px;

    padding:25px;

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

}

.dashboard-card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.dashboard-card-header h2{

    font-size:22px;

    color:#163A5F;

}

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

.dashboard-table{

    width:100%;

    border-collapse:collapse;

}

.dashboard-table th{

    text-align:left;

    padding:14px;

    background:#F8FAFC;

    color:#334155;

}

.dashboard-table td{

    padding:14px;

    border-top:1px solid #E2E8F0;

}

/* ==========================================================
   ALERTAS
========================================================== */

.alert-item{

    display:flex;

    gap:15px;

    padding:16px;

    border-radius:12px;

    background:#F8FAFC;

    margin-bottom:15px;

}

.alert-item span{

    font-size:22px;

}

/* ==========================================================
   ACTIVIDAD
========================================================== */

.activity-item{

    display:flex;

    gap:15px;

    padding:16px;

    border-bottom:1px solid #E2E8F0;

}

.activity-item:last-child{

    border-bottom:none;

}

/* ==========================================================
   FINANZAS
========================================================== */

.financial-grid{

    display:grid;

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

    gap:20px;

}

.financial-item{

    background:#F8FAFC;

    border-radius:14px;

    padding:20px;

    text-align:center;

}

.financial-label{

    color:#64748B;

    display:block;

    margin-bottom:12px;

}

.financial-item h2{

    color:#16A34A;

    font-size:28px;

}

/* ==========================================================
   ESTADO
========================================================== */

.status-item{

    display:flex;

    justify-content:space-between;

    padding:14px 0;

    border-bottom:1px solid #E2E8F0;

}

.status-item:last-child{

    border-bottom:none;

}

/* ==========================================================
   GRÁFICOS
========================================================== */

.chart-placeholder{

    height:320px;

    border:2px dashed #CBD5E1;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    color:#94A3B8;

    font-size:22px;

}

/* ==========================================================
   INDICADORES
========================================================== */

.indicator-item{

    display:flex;

    justify-content:space-between;

    padding:14px 0;

    border-bottom:1px solid #E2E8F0;

}

.indicator-item:last-child{

    border-bottom:none;

}

/* ==========================================================
   SISTEMA
========================================================== */

.system-item{

    display:flex;

    justify-content:space-between;

    padding:12px 0;

    border-bottom:1px solid #E2E8F0;

}

.system-item:last-child{

    border-bottom:none;

}

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

@media(max-width:1200px){

    .cards{

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

    }

    .dashboard-grid{

        grid-template-columns:1fr;

    }

    .financial-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .cards{

        grid-template-columns:1fr;

    }

    .page-header{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

}