/**
 * css/dashboard.css
 *
 * Dashboard de estadísticas ACADEMO.
 * Paleta:
 *   #013678 (azul primario, del banner)
 *   #1E6292 (azul secundario, del menú y sidebar)
 */

.academo-estadisticas-dashboard {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 15px 40px 15px;
    font-family: 'Lato', 'Open Sans', Arial, sans-serif;
    color: #1f1f1f;
}

/* --- Encabezado --- */
.academo-dash-titulo {
    margin: 0 0 10px 0;
    padding-bottom: 12px;
    border-bottom: 3px solid #013678;
    color: #013678;
    font-size: 28px;
    font-weight: 700;
}
.academo-dash-intro {
    margin: 10px 0 25px 0;
    color: #555;
    font-size: 16px;
    line-height: 1.5;
}

/* --- Stat tiles --- */
.academo-dash-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 35px;
}
.academo-dash-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px 15px;
    background: #013678;
    color: #ffffff;
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: transform .2s ease;
}
.academo-dash-tile:nth-child(2) { background: #1E6292; }
.academo-dash-tile:nth-child(3) { background: #013678; }
.academo-dash-tile:nth-child(4) { background: #1E6292; }
.academo-dash-tile:hover { transform: translateY(-2px); }

.academo-dash-tile-numero {
    display: block;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.academo-dash-tile-label {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.95;
}

/* --- Pestañas --- */
.academo-dash-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    padding: 0;
    border-bottom: 3px solid #1E6292;
}
.academo-dash-tab {
    appearance: none;
    background: #e8e8e8;
    color: #333;
    border: none;
    padding: 12px 22px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    transition: background-color .15s ease, color .15s ease;
}
.academo-dash-tab:hover { background: #d0d0d0; }
.academo-dash-tab.is-active {
    background: #1E6292;
    color: #ffffff;
}

/* --- Paneles --- */
.academo-dash-paneles {
    background: #ffffff;
    border: 1px solid #e2e2e2;
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 25px;
    min-height: 480px;
}
.academo-dash-panel { display: none; }
.academo-dash-panel.is-active { display: block; }

.academo-dash-chart {
    width: 100%;
    min-height: 400px;
    margin-bottom: 20px;
}
.academo-dash-cargando {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    color: #999;
    font-style: italic;
}

/* --- Tablas --- */
.academo-dash-tabla {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
    font-size: 14px;
}
.academo-dash-tabla thead th {
    background: #013678;
    color: #ffffff;
    padding: 10px 12px;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 13px;
}
.academo-dash-tabla thead th.al-izq { text-align: left; }
.academo-dash-tabla tbody td {
    padding: 10px 12px;
    text-align: center;
    border-bottom: 1px solid #eee;
    font-variant-numeric: tabular-nums;
}
.academo-dash-tabla tbody td.al-izq { text-align: left; }
.academo-dash-tabla tbody tr:nth-child(even) { background: #f8f9fb; }
.academo-dash-tabla tbody tr:hover { background: #f0f4fa; }
.academo-dash-vacio { color: #999; font-style: italic; }

/* --- Nota al pie --- */
.academo-dash-nota {
    margin-top: 25px;
    padding: 12px 15px;
    background: #f0f4fa;
    border-left: 3px solid #1E6292;
    color: #555;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 0 4px 4px 0;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .academo-dash-tiles { grid-template-columns: repeat(2, 1fr); }
    .academo-dash-tile-numero { font-size: 26px; }
    .academo-dash-tab { padding: 10px 14px; font-size: 13px; }
    .academo-dash-paneles { padding: 15px; }
}

@media (max-width: 500px) {
    .academo-dash-tiles { grid-template-columns: 1fr; }
    .academo-dash-titulo { font-size: 22px; }
    .academo-dash-tabla { font-size: 12px; }
    .academo-dash-tabla thead th,
    .academo-dash-tabla tbody td { padding: 8px 6px; }
}