/* ============================================================
   CursosAvila — Responsive Styles
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
    .sidebar { width: var(--sidebar-collapsed); }
    .sidebar .sidebar-brand { opacity: 0; width: 0; }
    .sidebar .sidebar-section-title { display: none; }
    .sidebar .nav-item span { opacity: 0; width: 0; }
    .sidebar .nav-item { justify-content: center; padding: 10px; }
    .sidebar .sidebar-user-info { display: none; }
    .main-content { margin-left: var(--sidebar-collapsed); }
    .charts-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .form-row-3 { grid-template-columns: 1fr 1fr; }
    .stepper-label { display: none; }
}

/* Mobile */
@media (max-width: 768px) {
    :root { --space-8: 1.25rem; }
    .sidebar { transform: translateX(-100%); width: var(--sidebar-width); }
    .sidebar.mobile-open { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .mobile-menu-btn { display: flex; }
    .page-header { flex-direction: column; align-items: flex-start; }
    .page-actions { width: 100%; }
    .page-actions .btn { flex: 1; }
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    .filters-bar { flex-direction: column; }
    .filters-bar .form-input, .filters-bar .form-select { max-width: 100%; }
    .search-input { max-width: 100% !important; }
    .data-table th:nth-child(n+5), .data-table td:nth-child(n+5) { display: none; }
    .pagination { flex-direction: column; text-align: center; }
    .form-row, .form-row-3 { grid-template-columns: 1fr; }
    .charts-grid { grid-template-columns: 1fr; }
    .modal { margin: var(--space-4); max-width: calc(100vw - 2rem); }
    .stepper { flex-wrap: wrap; }
    .stepper-line { width: 20px; }
    .app-header { padding: 0 var(--space-4); }
    .login-card { padding: var(--space-6); margin: var(--space-4); }
}

/* Small mobile */
@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .stepper-label { display: none; }
    .header-breadcrumb { display: none; }
}

/* Sidebar mobile overlay */
.sidebar-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: calc(var(--z-sidebar) - 1);
}
@media (max-width: 768px) {
    .sidebar-overlay.active { display: block; }
}