/* =========================================================
   Dashboard (DashboardPage.razor)
   Usa las tarjetas "st-" de estadisticas.css; aquí solo se
   ajusta la rejilla y lo propio del dashboard (prefijo "db-").
   ========================================================= */

.db-cards {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.db-card {
    min-width: 0;
}

/* La tarjeta de pagos por proyecto ocupa dos columnas cuando hay sitio */
.db-card--wide {
    grid-column: span 2;
}

@media (max-width: 760px) {
    .db-card--wide {
        grid-column: auto;
    }
}

/* ---------- Segundo bloque de cifras dentro de una tarjeta ---------- */
.db-cards .st-stats + .st-stats {
    margin-top: .8rem;
}

/* ---------- Pagos por proyecto: proyecto, mes actual y año ---------- */
.db-proj {
    max-height: 18rem;
    margin: .9rem 0 0;
    padding: 0 .4rem 0 0;
    overflow-y: auto;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(92, 200, 255, .4) transparent;
}

.db-proj-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.5rem 7.5rem;
    column-gap: .8rem;
    align-items: baseline;
    padding: .5rem 0;
    border-top: 1px solid rgba(92, 200, 255, .16);
}

.db-proj-row--head {
    border-top: 0;
    padding-top: 0;
    color: var(--steel);
    font-size: .75rem;
}

.db-proj-name {
    overflow: hidden;
    font-size: .95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-proj-val {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ---------- Avisos: filas pulsables ---------- */
.db-aviso {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 0;
    border-top: 1px solid rgba(92, 200, 255, .16);
    color: inherit;
    text-decoration: none;
}

.db-aviso:first-of-type {
    border-top: 0;
}

.db-aviso:hover {
    color: var(--sky);
}

.db-aviso-valor {
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.db-aviso-valor--ok {
    color: #5de0a0;
}

.db-aviso-valor--alerta {
    color: #ffc857;
}