/* ============================================================
   DASHBOARD — MÓVIL Y PANTALLAS ESTRECHAS
   Sistema de Administración de Condominios
   ============================================================
   El módulo no tenía carpeta responsive: sus reglas de adaptación vivían
   dentro de css/dashboard.css, mezcladas con las del escritorio.

   Se mueven enteras y sin tocar su contenido ni sus anchos: el cambio es de
   archivo, no de comportamiento.

   OJO CON LOS CORTES. Aquí hay seis anchos distintos —1200, 1100, 960, 768,
   520 y 360— y ninguno de los tres del sistema. Se dejan como estaban: el
   panel principal encoge por pasos porque sus tarjetas se reordenan varias
   veces, y unificarlo cambia lo que se ve. Es una decisión aparte.
   ============================================================ */

/* 1200px — KPI pasa a 3 columnas */
@media (max-width: 1200px) {
    .db-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .db-mora-scroll { max-height: 160px; }
}

/* 1100px — filas principales a 1 columna + bottom a 2 columnas */
@media (max-width: 1100px) {
    .db-main-row   { grid-template-columns: 1fr; }
    .db-bottom-row { grid-template-columns: minmax(0, 1fr) minmax(200px, 0.8fr); }
}

/* Tablet — KPI 2 columnas, todo en 1 columna.
   Iba a 960px, que no era corte de nada. Pasa a 1023, el techo de tablet en el
   sistema: de 1024 en adelante manda el escritorio. */
@media (max-width: 1023px) {
    .db-kpi-grid     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .db-kpi-value    { font-size: 0.9rem; }
    .db-kpi-label    { font-size: 0.56rem; }
    .db-kpi-sub      { font-size: 0.54rem; }
    .db-main-row     { grid-template-columns: 1fr; }
    .db-bottom-row   { grid-template-columns: 1fr; }
    .db-bottom-row > .db-card:first-child  { grid-column: auto; grid-row: auto; order: 10; }
    .db-bottom-row > .db-card:nth-child(2) { grid-column: auto; grid-row: auto; }
    .db-bottom-row > .db-card-mora         { grid-column: auto; grid-row: auto; }
}

/* Móvil pequeño — Dashboard compacto.
   Iba a 520px. Pasa a 480, que es el corte que ya usan Pagos, Cuentas por
   Pagar y Proveedores para lo mismo. */
@media (max-width: 480px) {
    /* ── Contención de overflow global del dashboard ─────────────────── */
    .db-wrap { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; }
    .db-card { overflow: hidden !important; max-width: 100% !important; }
    .db-donut-wrap canvas { max-width: 100% !important; }
    .db-vacias-scroll,
    .db-mora-scroll { overflow-x: auto !important; max-width: 100% !important; }
    .db-vacias-table,
    .db-mora-table { min-width: 0 !important; width: 100% !important; }

    /* ── Header: h2 en 1 línea + selector debajo ───────────────────── */
    .db-header { padding: 2px 0 8px !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; }
    .db-header-left { width: 100% !important; min-width: 0; overflow: hidden; }
    .db-header-left h2 { font-size: 0.82rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .db-header-left p  { display: none !important; }
    .db-h2-sub { display: none !important; }
    .db-header-actions { width: 100% !important; justify-content: flex-start !important; gap: 6px !important; align-items: center !important; }
    .db-period-selector { flex: 1 !important; height: 28px !important; padding: 0 8px !important; gap: 6px !important; border-radius: 8px !important; }
    .db-period-selector i { display: none !important; }
    .db-period-selector select { font-size: 0.72rem !important; flex: 1 !important; max-width: none !important; min-width: 0 !important; }
    .db-refresh-icon-btn { width: 28px !important; height: 28px !important; min-width: 28px !important; flex-shrink: 0 !important; border-radius: 8px !important; }
    .db-refresh-icon-btn i { font-size: 0.68rem !important; }

    /* ── KPI: 3 columnas compactas ───────────────────────────────────── */
    .db-kpi-grid  {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
    .db-kpi-card  { padding: 7px 6px; min-height: 58px; gap: 5px; border-radius: 9px; }
    .db-kpi-icon  { width: 28px; height: 28px; min-width: 28px; border-radius: 7px; font-size: 12px; }
    .db-kpi-label { font-size: 0.48rem; line-height: 1.05; }
    .db-kpi-value { font-size: 0.72rem; line-height: 1.05; margin: 1px 0; }
    .db-kpi-sub   { font-size: 0.46rem; line-height: 1.05; }
    .db-kpi-hint  { display: none; } /* No cabe en 3 columnas */

    /* ── Controles del chart ─────────────────────────────────────────── */
    .db-chart-controls { gap: 4px; }
    .db-chart-sel {
        font-size: 0.58rem;
        padding: 0.12rem 1.1rem 0.12rem 0.4rem;
        background-position: right 0.3rem center;
    }

    /* ── Accesos rápidos: 2 columnas fijas ───────────────────────────── */
    .db-quick-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .db-quick-action       { min-height: 44px; padding: 6px 8px; }
    .db-quick-action-title { font-size: 0.65rem; }
    .db-quick-action-desc  { font-size: 0.52rem; }

    /* ── Fila inferior: columna única ───────────────────────────────── */
    .db-bottom-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* Actividad reciente: columna completa, al fondo */
    .db-bottom-row > .db-card:first-child {
        grid-column: auto;
        order: 10;
    }
    .db-activity-list { min-width: 0; }

    /* Ocupación: donut compacto */
    .db-donut-wrap   { height: 110px; }
    .db-donut-pct    { font-size: 1rem; }
    .db-donut-lbl    { font-size: 0.52rem; }
    .db-donut-legend { margin-top: 0.4rem; gap: 0.25rem; }
    .db-legend-row   { font-size: 0.62rem; }
    .db-legend-val   { font-size: 0.62rem; }

    /* Mora crítica: compacta */
    .db-card-mora .db-card-title { font-size: 0.72rem; }
    .db-mora-scroll { max-height: 130px; }
    .db-mora-table  { font-size: 0.62rem; }
}

/* Fallback para pantallas muy estrechas (≤360px): 2 columnas KPI */
@media (max-width: 360px) {
    .db-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}