/* =============================================================
   Nómina Inteligente — Media Queries Responsive
   Mobile first: base = móvil, min-width para desktop
   Breakpoints: 480, 768, 1024, 1280, 1536
   ============================================================= */

/* =============================================================
   MOBILE (base - menos de 480px)
   ============================================================= */

/* Sidebar: drawer oculto en móvil */
@media (max-width: 767px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition-base);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .main-wrapper {
        margin-left: 0;
    }

    .sidebar.collapsed ~ .main-wrapper {
        margin-left: 0;
    }

    .sidebar-overlay.active {
        display: block;
    }

    .header__center {
        display: none;
    }

    /* En mobile, el botón lupa reemplaza al buscador del centro.
       Al tocarlo se abre el .search-overlay full-screen. */
    .header__search-mobile-toggle {
        display: flex;
    }

    .header__user-info {
        display: none;
    }

    /* Filtros de listado: columna en mobile */
    .empresas-filters {
        flex-direction: column;
    }
    .empresas-filters__search,
    .empresas-filters__estatus {
        width: 100%;
        min-width: 0;
    }

    /* Paginación: centrada en mobile */
    .pagination {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .pagination__nav {
        justify-content: center;
    }

    /* Detail grid: 1 columna en mobile */
    .detail-grid {
        grid-template-columns: 1fr;
    }

    /* Tabs en mobile: scroll horizontal (1 fila) en vez de wrap (2+ filas).
       Patrón estándar de Instagram/YouTube/Gmail. Oculta scrollbar nativo. */
    .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar {
        display: none;
    }
    .tabs__item {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--text-xs);
    }

    .main-content {
        padding: var(--space-md);
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Forms: full width en móvil */
    .form-row--2,
    .form-row--3,
    .form-row--4 {
        grid-template-columns: 1fr;
    }

    /* Toasts */
    .toast-container {
        left: var(--space-md);
        right: var(--space-md);
        bottom: var(--space-md);
    }

    .toast {
        max-width: 100%;
    }

    /* Modal full-width en móvil */
    .modal-backdrop {
        padding: var(--space-md);
        align-items: flex-end;
    }

    .modal {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 85vh;
    }
}

/* =============================================================
   TABLET (768px+)
   ============================================================= */

@media (min-width: 768px) {
    /* Sidebar colapsable en tablet */
    .sidebar--tablet-collapsed {
        width: var(--sidebar-collapsed-width);
    }

    .sidebar--tablet-collapsed ~ .main-wrapper {
        margin-left: var(--sidebar-collapsed-width);
    }

    .form-row--2 { grid-template-columns: 1fr 1fr; }
}

/* =============================================================
   DESKTOP PEQUEÑO (1024px+)
   ============================================================= */

@media (min-width: 1024px) {
    .sidebar {
        width: var(--sidebar-width);
    }

    .main-wrapper {
        margin-left: var(--sidebar-width);
    }

    .form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* =============================================================
   DESKTOP (1280px+)
   ============================================================= */

@media (min-width: 1280px) {
    .form-row--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* =============================================================
   DESKTOP GRANDE (1536px+)
   ============================================================= */

@media (min-width: 1536px) {
    .main-content {
        padding: var(--space-2xl);
    }
}

/* =============================================================
   UTILIDADES RESPONSIVE
   ============================================================= */

/* Ocultar en rangos */
@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet { display: none !important; }
}

@media (min-width: 1024px) {
    .hide-desktop { display: none !important; }
}

/* Mostrar solo en rangos */
@media (min-width: 768px) {
    .show-mobile-only { display: none !important; }
}

@media (max-width: 767px), (min-width: 1024px) {
    .show-tablet-only { display: none !important; }
}

@media (max-width: 1023px) {
    .show-desktop-only { display: none !important; }
}