/* =====================================================================
   TaskBoard — Responsive (tablet y móvil)
   ===================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    :root { --sidebar-width: 210px; --list-width: 250px; }
}

/* Móvil y tablet chico: sidebar colapsable */
@media (max-width: 860px) {
    .app-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "topbar"
            "main";
    }
    .sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 260px;
        z-index: 500;
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-backdrop {
        position: fixed; inset: 0; background: var(--bg-overlay);
        z-index: 400; display: none;
    }
    .sidebar-backdrop.open { display: block; }
    .menu-toggle { display: inline-flex; }
    .topbar-title { max-width: 45vw; }

    .page { padding: var(--space-4); }
    .boards-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

    .board-toolbar { padding: 10px 14px; }
    .filters-bar { padding: 8px 14px; }
    .kanban { padding: var(--space-3); }

    :root { --list-width: 82vw; }

    .modal { max-width: 94vw !important; margin: auto; }
    .modal-body { max-height: 66vh; }

    .table-view-wrap { padding: 0 10px 10px; }
}

@media (max-width: 480px) {
    .topbar { padding: 0 12px; }
    .board-toolbar-left, .board-toolbar-right { gap: 6px; }
    .selection-bar { flex-direction: column; align-items: flex-start; }
    :root { --list-width: 88vw; }
}

/* Impresión: ocultar chrome de la app */
@media print {
    .sidebar, .topbar, .board-toolbar, .filters-bar { display: none !important; }
}