/* ── Variables ── */
:root {
    --azul:   #1D3557;
    --fondo:  #F4F6F9;
    --borde:  #DEE2E6;
    --muted:  #6C757D;
}

body {
    background: var(--fondo);
    font-family: 'Segoe UI', Helvetica Neue, Arial, sans-serif;
}

/* ── Header ── */
.dh {
    background: linear-gradient(135deg, #1D3557 0%, #2C5282 100%);
    padding: 1.2rem 2rem;
    border-bottom: 3px solid #457B9D;
}
.dh h1 { color: #fff; font-size: 1.35rem; font-weight: 700; margin: 0; }
.dh p  { color: #A8C8E8; font-size: 0.78rem; margin: .15rem 0 0; }

/* ── Filtros ── */
.filtros {
    background: #fff;
    border-bottom: 1px solid var(--borde);
    padding: .6rem 1.5rem;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}
.fl {
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 2px;
}
.fg { min-width: 155px; }

/* ── Sección ── */
.sec-title {
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--azul);
    letter-spacing: .07em;
    border-bottom: 2px solid var(--azul);
    padding: .05rem 0 .25rem;
    margin: .9rem 0 .6rem;
}

/* ── Contenido principal ── */
.main { padding: .6rem 1.4rem 2rem; }

/* ── KPI Cards ── */
.kpi-card {
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 5px rgba(0,0,0,.09) !important;
    background: #fff !important;
    height: 100%;
}
.kpi-t {
    font-size: .69rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: .15rem;
}
.kpi-v { font-size: 1.8rem; font-weight: 800; margin: 0; line-height: 1.1; }
.kpi-s { font-size: .69rem; color: var(--muted); margin: .15rem 0 0; }

/* ── Gráficos ── */
.graf-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0,0,0,.09);
    padding: .7rem .9rem;
    height: 100%;
}
.graf-title {
    font-size: .75rem;
    font-weight: 700;
    color: var(--azul);
    margin-bottom: .2rem;
}

/* ── Insight ── */
.insight {
    background: #EBF5FB;
    border-left: 3px solid #2980B9;
    padding: .4rem .75rem;
    border-radius: 0 4px 4px 0;
    font-size: .75rem;
    color: #1A5276;
    margin-bottom: .4rem;
}

/* ── Tabla Dash ── */
.dash-table-container .dash-spreadsheet-container
  .dash-spreadsheet-inner td,
.dash-table-container .dash-spreadsheet-container
  .dash-spreadsheet-inner th {
    font-size: 11px !important;
    padding: 5px 7px !important;
}