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

   CONTENIDO
   - Formularios: .form-grid en 2 columnas para tablet
   - Cards/stats: .stats-grid en 2 columnas para tablet
   - Visibilidad: .hide-tablet (rango tablet puro)

   BREAKPOINT CANÓNICO
   - tablet: min-width: 768px AND max-width: 1023px

   NOTA: Las reglas div[style*=...] que existían aquí
   se movieron a la sección de DEUDA TÉCNICA al final
   de este archivo — están compensando inline styles de JS.

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


/* ── FORMULARIOS — GRIDS EN TABLET ──────────────────────────── */

@media screen and (min-width: 768px) and (max-width: 1023px) {
    /* Formularios de 4+ columnas → 2 columnas en tablet */
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ── CARDS Y STATS — GRIDS EN TABLET ────────────────────────── */

@media screen and (min-width: 768px) and (max-width: 1023px) {
    /* Stats panels de 4+ columnas → 2 columnas en tablet */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ── VISIBILIDAD — TABLET PURO ───────────────────────────────── */

/*
 * .hide-tablet oculta SOLO en el rango tablet (768px-1023px).
 * En mobile y desktop el elemento se muestra normalmente.
 *
 * CAMBIO vs versión anterior: antes era max-width: 1024px,
 * lo que también ocultaba en mobile. Ahora es rango cerrado.
 * Si necesitas ocultar en mobile Y tablet, usar:
 *   .hide-mobile + .hide-tablet (ambas clases)
 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet {
        display: none !important;
    }
}


/* ============================================================
   ⚠ DEUDA TÉCNICA — PARCHES TEMPORALES (TABLET)
   ============================================================

   Las reglas div[style*=...] que siguen existen porque JS
   genera inline styles y el tablet no los sobreescribe solo
   con las clases globales.

   PLAN: eliminar cuando JS use clases .form-grid-* en lugar
   de style.gridTemplateColumns (Prioridad 3 del plan).

   Ver: responsive_arquitectura_plan.txt en el escritorio
   ============================================================ */

/* ── GRUPO B (TABLET): GRIDS DE FORMULARIOS INLINE (JS) ─────── */
/*
 * CAUSA: misma que en global/mobile.css Grupo B.
 * Estos selectores reducen grids de 4+ cols a 2 cols en tablet.
 * En mobile, global/mobile.css Grupo B los colapsa a 1 col.
 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    /* 4+ columnas → 2 columnas en tablet */
    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 en tablet */
    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 en tablet */
    div[style*="grid-template-columns: 1fr 220px"],
    div[style*="grid-template-columns:1fr 220px"] {
        grid-template-columns: 1fr !important;
    }
}