/* Ajuste global movil del sistema */
@media (max-width: 780px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    body,
    .page-container,
    .content-area,
    .filters-bar,
    .tabs-container,
    .calendar-header,
    .calendar-grid,
    .chart-container,
    .table-container,
    .modal-content,
    .module-toolbar,
    .notas-tab-panel,
    .student-tools-card,
    .card,
    .panel,
    .section-card,
    .info-card,
    .summary-card,
    .task-card,
    .data-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .page-container,
    .content-area,
    .filters-bar,
    .tabs-container,
    .calendar-header,
    .calendar-grid,
    .module-toolbar {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .filters-bar,
    .form-grid,
    .task-create-grid,
    .notas-toolbar,
    .notas-summary-grid,
    .home-grid,
    .alumnado-detail-layout,
    .workspace-main-layout,
    .student-cards-view,
    .help-grid {
        grid-template-columns: 1fr !important;
    }

    .top-bar,
    .module-toolbar,
    .filters-bar,
    .form-actions,
    .attendance-toolbar,
    .notas-tab-panel-head,
    .calendar-header {
        flex-wrap: wrap !important;
    }

    input,
    select,
    textarea,
    button,
    .btn,
    .filter-select,
    .form-control,
    .form-select,
    .search-box,
    .search-box input {
        max-width: 100% !important;
    }

    .table-container,
    .table-responsive,
    .table-card,
    .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    iframe,
    .module-iframe,
    .alumnado-notas-iframe,
    .alumnado-asistencia-iframe {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
    }

    .modal,
    .modal.show {
        padding: 10px !important;
    }
}

/* Dashboard movil: header limpio y menu tipo canvas */
@media (max-width: 760px) {
    .page-wrapper,
    .main-container,
    .app-container,
    .app-body,
    #dashboardHomeContent,
    .module-workspace,
    .module-workspace .card,
    .module-workspace .card-body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .page-wrapper {
        overflow-x: hidden !important;
    }

    .main-container,
    .page-wrapper.pinned .main-container,
    .page-wrapper.toggled .main-container {
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

    .app-container {
        padding-top: 64px !important;
        background: transparent !important;
    }

    .app-body {
        min-height: calc(100vh - 64px) !important;
        padding: 8px !important;
        background: transparent !important;
    }

    .app-header,
    .app-header.sticky-header {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        width: 100% !important;
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        padding: 8px 12px !important;
        margin: 0 !important;
        z-index: 3200 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: rgba(3, 10, 22, 0.96) !important;
        border-bottom: 1px solid rgba(246, 196, 77, 0.34) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32) !important;
        backdrop-filter: blur(14px) !important;
        transform: none !important;
    }

    .app-header > .d-flex:first-child,
    .toggle-sidebar,
    .pin-sidebar,
    #toggle-sidebar,
    #pin-sidebar,
    .app-header .breadcrumb,
    .app-header .chat-toggle-btn,
    .app-header .action-icon,
    .app-header .header-actions > .dropdown:not(:has(.user-settings)) {
        display: none !important;
    }

    .app-brand-sm,
    .app-brand-sm.d-lg-none,
    .app-brand-sm.d-sm-block {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        cursor: pointer !important;
    }

    .app-brand-sm a {
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        height: 48px !important;
        padding: 0 !important;
    }

    .app-brand-sm .logo {
        display: block !important;
        width: auto !important;
        max-width: 128px !important;
        height: 48px !important;
        object-fit: contain !important;
    }

    .app-header > .d-flex.align-items-center.gap-3.ms-auto {
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
    }

    .app-header .header-actions,
    .app-header.sticky-header .header-actions {
        display: flex !important;
        align-items: center !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-left: 0 !important;
        background: transparent !important;
        gap: 0 !important;
    }

    .app-header .header-actions > .dropdown:has(.user-settings) {
        display: block !important;
    }

    .app-header .user-settings,
    .app-header.sticky-header .user-settings {
        display: inline-flex !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding: 3px !important;
        margin: 0 !important;
        border: 1px solid rgba(246, 196, 77, 0.58) !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.08) !important;
        transform: none !important;
    }

    #headerUserAvatar,
    .app-header .user-settings img {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    .app-header .dropdown-menu {
        position: fixed !important;
        top: 62px !important;
        right: 8px !important;
        left: auto !important;
        width: min(320px, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
        z-index: 3400 !important;
    }

    .sidebar-wrapper,
    .page-wrapper.pinned .sidebar-wrapper,
    .page-wrapper.toggled .sidebar-wrapper {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(320px, 86vw) !important;
        max-width: 86vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        padding: 14px 12px 18px !important;
        z-index: 3300 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: linear-gradient(180deg, rgba(6, 22, 43, 0.98), rgba(3, 15, 31, 0.99)) !important;
        border-right: 1px solid rgba(246, 196, 77, 0.42) !important;
        box-shadow: 24px 0 50px rgba(0, 0, 0, 0.46) !important;
        transform: translateX(-105%) !important;
        transition: transform 0.24s ease !important;
        clip-path: none !important;
    }

    body.mobile-menu-open .sidebar-wrapper,
    .page-wrapper.mobile-menu-open .sidebar-wrapper,
    .page-wrapper.toggled .sidebar-wrapper {
        transform: translateX(0) !important;
    }

    body.mobile-menu-open::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 3250;
        background: rgba(0, 0, 0, 0.54);
        backdrop-filter: blur(2px);
    }

    .sidebar-wrapper .app-brand,
    .sidebar-wrapper .app-brand.p-3 {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 0 14px !important;
        margin: 0 0 12px !important;
        display: flex !important;
        border-bottom: 1px solid rgba(246, 196, 77, 0.18) !important;
    }

    .sidebar-wrapper .app-brand .logo {
        height: 52px !important;
        width: auto !important;
        max-width: 150px !important;
    }

    .sidebar-wrapper .app-brand .brand-title {
        display: inline-block !important;
        color: #ffd978 !important;
    }

    .sidebarMenuScroll {
        width: 100% !important;
        overflow: visible !important;
    }

    .sidebar-menu {
        display: grid !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        align-items: stretch !important;
    }

    .sidebar-menu > li,
    .sidebar-menu > li.treeview {
        width: 100% !important;
        min-width: 0 !important;
        display: block !important;
    }

    .sidebar-menu > li > a {
        width: 100% !important;
        min-height: 48px !important;
        height: auto !important;
        justify-content: flex-start !important;
        flex-direction: row !important;
        gap: 10px !important;
        padding: 11px 12px !important;
        border-radius: 12px !important;
    }

    .sidebar-menu .treeview-menu,
    .sidebar-menu > li.treeview.submenu-open > .treeview-menu,
    .sidebar-menu > li.treeview.active > .treeview-menu,
    .sidebar-menu > li.treeview:hover > .treeview-menu,
    .sidebar-menu > li.treeview:focus-within > .treeview-menu {
        position: static !important;
        display: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        transform: none !important;
        margin: 6px 0 8px !important;
        padding: 6px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(246, 196, 77, 0.16) !important;
    }

    .sidebar-menu > li.treeview.submenu-open > .treeview-menu,
    .sidebar-menu > li.treeview.active > .treeview-menu {
        display: grid !important;
        gap: 4px !important;
    }

    .sidebar-menu .treeview-menu > li > a {
        min-height: 40px !important;
        padding: 9px 10px !important;
        border-radius: 10px !important;
        white-space: normal !important;
    }

    #dashboardHomeContent {
        min-height: auto !important;
        padding: 0 !important;
    }

    .module-workspace.is-full-module .card,
    .module-workspace .card {
        height: auto !important;
        min-height: calc(100vh - 80px) !important;
        border-radius: 0 !important;
    }

    .module-workspace.is-full-module .module-iframe,
    .module-iframe {
        width: 100% !important;
        min-height: calc(100vh - 82px) !important;
        height: calc(100vh - 82px) !important;
        border-radius: 0 !important;
    }
}

/* Submenus moviles definitivos: flotan encima del sistema como en PC */
@media (max-width: 760px) {
    body.mobile-menu-open,
    body.mobile-menu-open .page-wrapper,
    body.mobile-menu-open .main-container {
        overflow-x: visible !important;
    }

    body.mobile-menu-open .sidebar-wrapper,
    .page-wrapper.mobile-menu-open .sidebar-wrapper,
    body.mobile-menu-open .page-wrapper.pinned .sidebar-wrapper,
    body.mobile-menu-open .page-wrapper.toggled .sidebar-wrapper,
    .page-wrapper.mobile-menu-open.pinned .sidebar-wrapper,
    .page-wrapper.mobile-menu-open.toggled .sidebar-wrapper {
        width: 52vw !important;
        max-width: 52vw !important;
        overflow: visible !important;
        transform: none !important;
        contain: none !important;
        clip-path: none !important;
        z-index: 7000 !important;
    }

    body.mobile-menu-open .sidebarMenuScroll,
    body.mobile-menu-open .sidebar-menu,
    body.mobile-menu-open .sidebar-menu > li.treeview {
        overflow: visible !important;
        contain: none !important;
        clip-path: none !important;
    }

    body.mobile-menu-open .sidebar-menu > li.treeview > .treeview-menu,
    .page-wrapper.mobile-menu-open .sidebar-menu > li.treeview > .treeview-menu {
        position: fixed !important;
        top: var(--mobile-submenu-top, 76px) !important;
        left: 52vw !important;
        right: auto !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: calc(48vw - 6px) !important;
        min-width: 0 !important;
        max-width: calc(48vw - 6px) !important;
        max-height: calc(100vh - var(--mobile-submenu-top, 76px) - 12px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 1px solid rgba(246, 196, 77, 0.48) !important;
        border-radius: 0 14px 14px 0 !important;
        background: linear-gradient(180deg, rgba(6, 22, 43, 0.99), rgba(3, 15, 31, 1)) !important;
        box-shadow: 18px 18px 42px rgba(0, 0, 0, 0.42) !important;
        transform: none !important;
        z-index: 9000 !important;
    }

    body.mobile-menu-open .sidebar-menu > li.treeview.submenu-open > .treeview-menu,
    .page-wrapper.mobile-menu-open .sidebar-menu > li.treeview.submenu-open > .treeview-menu {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        gap: 4px !important;
    }

    body.mobile-menu-open .sidebar-menu > li.treeview.active:not(.submenu-open) > .treeview-menu,
    .page-wrapper.mobile-menu-open .sidebar-menu > li.treeview.active:not(.submenu-open) > .treeview-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.mobile-menu-open .sidebar-menu > li.treeview.submenu-open > a,
    .page-wrapper.mobile-menu-open .sidebar-menu > li.treeview.submenu-open > a {
        border-color: rgba(255, 217, 120, 0.9) !important;
        background: linear-gradient(180deg, rgba(246, 196, 77, 0.28), rgba(246, 196, 77, 0.12)) !important;
    }

    body.mobile-menu-open .sidebar-menu .treeview-menu > li,
    body.mobile-menu-open .sidebar-menu .treeview-menu > li > a {
        width: 100% !important;
    }

    body.mobile-menu-open .sidebar-menu .treeview-menu > li > a {
        display: flex !important;
        align-items: center !important;
        min-height: 42px !important;
        padding: 9px 8px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }
}

@media (max-width: 420px) {
    body.mobile-menu-open .sidebar-wrapper,
    .page-wrapper.mobile-menu-open .sidebar-wrapper {
        width: 50vw !important;
        max-width: 50vw !important;
    }

    body.mobile-menu-open .sidebar-menu > li.treeview > .treeview-menu,
    .page-wrapper.mobile-menu-open .sidebar-menu > li.treeview > .treeview-menu {
        left: 50vw !important;
        width: calc(50vw - 6px) !important;
        max-width: calc(50vw - 6px) !important;
    }
}

/* Legibilidad del submenu movil */
@media (max-width: 760px) {
    body.mobile-menu-open .sidebar-menu .treeview-menu,
    .page-wrapper.mobile-menu-open .sidebar-menu .treeview-menu {
        color: #ffffff !important;
    }

    body.mobile-menu-open .sidebar-menu .treeview-menu > li > a,
    .page-wrapper.mobile-menu-open .sidebar-menu .treeview-menu > li > a {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(246, 196, 77, 0.18) !important;
    }

    body.mobile-menu-open .sidebar-menu .treeview-menu > li > a i,
    .page-wrapper.mobile-menu-open .sidebar-menu .treeview-menu > li > a i {
        color: #ffffff !important;
    }

    body.mobile-menu-open .sidebar-menu .treeview-menu > li > a:hover,
    body.mobile-menu-open .sidebar-menu .treeview-menu > li > a:focus,
    body.mobile-menu-open .sidebar-menu .treeview-menu > li.active > a,
    .page-wrapper.mobile-menu-open .sidebar-menu .treeview-menu > li > a:hover,
    .page-wrapper.mobile-menu-open .sidebar-menu .treeview-menu > li > a:focus,
    .page-wrapper.mobile-menu-open .sidebar-menu .treeview-menu > li.active > a {
        color: #ffffff !important;
        background: linear-gradient(180deg, rgba(246, 196, 77, 0.28), rgba(246, 196, 77, 0.12)) !important;
        border-color: rgba(246, 196, 77, 0.5) !important;
    }
}

/* Cabecera movil invertida para separarla del contenido */
@media (max-width: 760px) {
    .app-header,
    .app-header.sticky-header {
        background: linear-gradient(180deg, #ffffff 0%, #fff6dc 48%, #f6c44d 100%) !important;
        border-bottom: 3px solid #061528 !important;
        box-shadow: 0 14px 34px rgba(3, 15, 31, 0.28) !important;
        color: #061528 !important;
    }

    .app-brand-sm,
    .app-brand-sm a,
    .app-header .header-actions {
        color: #061528 !important;
    }

    .app-header .user-settings,
    .app-header.sticky-header .user-settings {
        background: #ffffff !important;
        border: 2px solid #061528 !important;
        box-shadow: 0 8px 18px rgba(6, 21, 40, 0.18) !important;
    }

    #headerUserAvatar,
    .app-header .user-settings img {
        border: 2px solid #061528 !important;
        background: #ffffff !important;
    }
}