/* =========================================================
   Modulo Cash Flow - estilos namespaced 'cf-' (tema CLARO).
   Reutiliza las clases base del portal (.card, .bal-kpi-*) y los TOKENS
   de assets/z_theme.css (:root). Aqui solo el layout propio del modulo;
   no pisa estilos globales ni redefine colores/tipografias del tema.
   ========================================================= */

.cf-root {
    padding: var(--space-1) 0 var(--space-6);
}

.cf-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.cf-header h1 {
    font-size: 1.4rem;
    margin: 0;
    color: var(--color-text);
}

.cf-sub {
    font-size: 0.85rem;
    color: var(--color-text-soft);
}

.cf-tabs {
    margin-bottom: var(--space-4);
}

/* Tarjetas KPI en fila (las clases bal-kpi-* vienen de z_theme.css). */
.cf-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* Grafico en 2 columnas; el primero ocupa toda la fila. */
.cf-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.cf-box h3 {
    font-size: 0.95rem;
    margin: 0 0 var(--space-2);
    color: var(--color-text);
}

.cf-full {
    grid-column: 1 / -1;
}

.cf-sug {
    margin-bottom: var(--space-4);
}

.cf-sug h3 {
    font-size: 0.95rem;
    margin: 0 0 var(--space-2);
    color: var(--color-text);
}

.cf-sug ul {
    margin: 0;
    padding-left: var(--space-5);
}

.cf-sug li {
    margin: var(--space-1) 0;
    color: var(--color-text-soft);
    line-height: 1.4;
}

.cf-toolbar {
    font-size: 0.85rem;
    color: var(--color-text-soft);
    margin-bottom: var(--space-2);
}

/* AG Grid del modulo: hereda el tema de marca .ag-theme-portal
   (font-family IBM Plex, odd-row, hover y border). Aqui se PRESERVA el layout
   propio de cashflow: header CLARO compacto, revirtiendo el header navy del tema.
   Se usa selector directo y MAS especifico (.cf-aggrid.ag-theme-portal) para
   ganarle a `.ag-theme-portal .ag-header`. Texto/iconos OSCUROS para que se lean
   sobre el header claro. ETAPA 3 · TANDA 2.2. */
.cf-aggrid.ag-theme-portal .ag-header {
    background: var(--color-surface-soft);
    border-bottom: 1px solid var(--color-border);
}
.cf-aggrid.ag-theme-portal .ag-header-cell,
.cf-aggrid.ag-theme-portal .ag-header-group-cell,
.cf-aggrid.ag-theme-portal .ag-header-cell-text,
.cf-aggrid.ag-theme-portal .ag-header-group-text,
.cf-aggrid.ag-theme-portal .ag-header-icon,
.cf-aggrid.ag-theme-portal .ag-header-cell .ag-icon {
    color: var(--color-text);
}
/* densidad compacta propia de la matriz */
.cf-aggrid.ag-theme-alpine.ag-theme-portal {
    --ag-font-size: 0.8rem;
}

/* Flujo de caja: encabezados Proy (gris itálica) / Real (semibold) + separador
   de mes (borde izq en la columna Proy de cada grupo-mes). Solo tokens del tema. */
.cf-aggrid .cf-h-proy .ag-header-cell-text {
    color: var(--color-text-soft);
    font-style: italic;
}
.cf-aggrid .cf-h-real .ag-header-cell-text {
    font-weight: 600;
}
.cf-aggrid .cf-h-proy,
.cf-aggrid .ag-cell.cf-cell-proy {
    border-left: 1px solid var(--color-border);
}

/* Responsive: en pantallas chicas, una sola columna. */
@media (max-width: 1100px) {
    .cf-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
    .cf-grid2 {
        grid-template-columns: 1fr;
    }
}