/* ============================================================
   GLOBAL TABS — PATRÓN RESPONSIVE REUTILIZABLE
   Sistema de Administración de Condominios
   ============================================================

   Contiene el patrón base de tabs responsive (flex-wrap).
   Los módulos pueden sobreescribir font-size, colores y
   bordes usando sus propias clases de tab con scope.

   USO
   ──────────────────────────────────────────────────────────
   <div class="tabs-container">
       <button class="tab-item tab-item--active">Tab 1</button>
       <button class="tab-item">Tab 2</button>
       <button class="tab-item">Tab 3</button>
   </div>

   En mobile: los tabs se distribuyen en 2 columnas (50% cada uno).
   En tablet: los tabs se ajustan automáticamente.
   En desktop: los tabs se muestran en fila sin wrap.

   ADOPCIÓN PROGRESIVA
   ──────────────────────────────────────────────────────────
   Los módulos existentes (pagos, directorio, cxp, nomina) tienen
   sus propias clases de tab (.pagos-tab, .cxp-tabs, etc.).
   Pueden adoptar estas clases base en Prioridad 2/3 si se decide
   unificar. Por ahora coexisten sin conflicto.

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

/* ── BASE: TODOS LOS BREAKPOINTS ────────────────────────────── */

.tabs-container {
    display: flex;
    width: 100%;
}

.tab-item {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    background: none;
    /* Los módulos definen colores, borders y padding */
}


/* ── MOBILE (< 768px) ───────────────────────────────────────── */

@media (max-width: 767px) {
    .tabs-container {
        flex-wrap: wrap;
        gap: 0;
    }

    .tab-item {
        /* 2 columnas en mobile */
        flex: 1 1 50%;
        max-width: 50%;
        min-height: 44px; /* touch target mínimo */
        font-size: 11px;
        text-align: center;
        padding: 6px 4px;
    }
}


/* ── TABLET (768px – 1023px) ────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1023px) {
    .tabs-container {
        flex-wrap: wrap;
    }

    .tab-item {
        flex: 1 1 auto;
        min-height: 40px;
        font-size: 13px;
    }
}


/* ── DESKTOP (≥ 1024px) ─────────────────────────────────────── */

@media (min-width: 1024px) {
    .tabs-container {
        flex-wrap: nowrap;
    }

    .tab-item {
        flex: 1 1 auto;
    }
}