/* ============================================================
   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: 5px 0 7px !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 { margin-top: 3px !important; 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 { box-sizing: border-box !important; flex: 1 !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; padding: 0 !important; gap: 6px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
    .db-period-selector i { display: none !important; }
    .db-period-selector select { box-sizing: border-box !important; width: auto !important; max-width: none !important; min-width: 0 !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; padding: 2px 24px 2px 9px !important; border: 1px solid #dbe3ef !important; border-radius: 7px !important; background-color: #fff !important; color: #334155 !important; box-shadow: 0 1px 3px rgba(15, 23, 42, .06) !important; font-size: 0.68rem !important; font-weight: 500 !important; line-height: 1 !important; }
    .db-period-selector #db-mes-sel { flex: 1.15 1 0 !important; }
    .db-period-selector #db-anio-sel { flex: .85 1 0 !important; }
    .db-period-selector select:focus { border-color: #2563eb !important; box-shadow: 0 0 0 2px rgba(37, 99, 235, .12) !important; }
    .db-refresh-icon-btn { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; max-height: 28px !important; padding: 0 !important; flex-shrink: 0 !important; border: 1px solid #dbe3ef !important; border-radius: 7px !important; background: #fff !important; color: #0a2463 !important; box-shadow: 0 1px 3px rgba(15, 23, 42, .06) !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: 8px 6px; min-height: 64px; 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.55rem; line-height: 1.12; }
    .db-kpi-value { font-size: 0.8rem; line-height: 1.08; margin: 2px 0; }
    .db-kpi-sub   { font-size: 0.51rem; line-height: 1.12; }
    /* ── 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)); }
}