/* ============================================
   GLOBAL - TABLET (768px - 1023px)
   Sistema de Administración de Condominios
   ============================================

   CONTENIDO:
   - Form grid: 2 columnas en tablet
   - Stats grid: 2 columnas en tablet
   - Utilidad .hide-tablet
   - Grids inline (JS): 4+ columnas → 2 columnas
   - Sidebar grids (2fr 1fr, 1fr 220px) → full width

   ============================================ */

/* ============================================
   FORMULARIOS - GRIDS (TABLET)
   ============================================ */

@media screen and (max-width: 1024px) {
    /* Tablet: 2 columnas */
    .form-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   CARDS Y GRIDS (TABLET)
   ============================================ */

@media screen and (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   UTILIDADES (TABLET)
   ============================================ */

/* Ocultar en tablet */
@media screen and (max-width: 1024px) {
    .hide-tablet {
        display: none !important;
    }
}

/* ============================================
   GRIDS DE FORMULARIOS INLINE (TABLET)
   ============================================ */

@media screen and (max-width: 1024px) {
    /* 4+ columnas → 2 columnas */
    div[style*="grid-template-columns: repeat(4"],
    div[style*="grid-template-columns: repeat(5"],
    div[style*="grid-template-columns: repeat(6"],
    div[style*="grid-template-columns:repeat(4"],
    div[style*="grid-template-columns:repeat(5"],
    div[style*="grid-template-columns:repeat(6"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Layout 2fr 1fr sidebar → full width */
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns:2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Sidebar grids 1fr 220px → full width */
    div[style*="grid-template-columns: 1fr 220px"],
    div[style*="grid-template-columns:1fr 220px"] {
        grid-template-columns: 1fr !important;
    }
}