/* ========================================
   AJUSTE FINAL PARA CELULARES
   ======================================== */
@media screen and (max-width: 900px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body.body-home {
        background: #f6f8fb !important;
    }

    body.body-home header.page-header,
    body.body-home main.main-content,
    body.body-home .footer-content {
        width: min(100% - 18px, 680px) !important;
        max-width: 680px !important;
        margin-inline: auto !important;
    }

    body.body-home header.page-header .topbar {
        min-height: 58px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: max(8px, env(safe-area-inset-top)) 0 8px !important;
        background: #f6f8fb !important;
    }

    body.body-home header.page-header .brand {
        min-width: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    body.body-home header.page-header .brand img {
        width: 38px !important;
        height: 38px !important;
    }

    body.body-home header.page-header .brand span {
        max-width: 168px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 14px !important;
    }

    body.body-home .mobile-home-actions {
        display: flex !important;
        justify-content: flex-end !important;
        width: auto !important;
    }

    body.body-home .mobile-home-actions .btn-logout {
        display: none !important;
    }

    body.body-home .mobile-menu-toggle {
        width: 44px !important;
        height: 44px !important;
        display: inline-grid !important;
        place-items: center !important;
        padding: 10px !important;
        border: 1px solid #dbe5f2 !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
    }

    body.body-home .hero-panel {
        margin: 8px 0 10px !important;
        padding: 14px !important;
        border: 1px solid #dbe5f2 !important;
        border-left: 5px solid #1492a7 !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
    }

    body.body-home .hero-panel::before,
    body.body-home .hero-panel::after {
        display: none !important;
    }

    body.body-home .hero-copy {
        max-width: 100% !important;
    }

    body.body-home .hero-title-row {
        align-items: center !important;
        gap: 9px !important;
    }

    body.body-home .hero-main-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 17px !important;
    }

    body.body-home .hero-panel h1 {
        color: #0b2454 !important;
        font-size: 24px !important;
        line-height: 1.1 !important;
    }

    body.body-home .hero-description {
        color: #344054 !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    body.body-home .today-card {
        position: static !important;
        color: #344054 !important;
        text-shadow: none !important;
    }

    body.body-home .today-label,
    body.body-home .today-card strong {
        color: #344054 !important;
    }

    body.body-home .hero-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    body.body-home .hero-action {
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 10px !important;
        font-size: 13px !important;
        text-align: center !important;
    }

    body.body-home .overview-grid,
    body.body-home .insight-column {
        display: none !important;
    }

    body.body-home .workbench,
    body.body-home .featured-column {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.body-home .priority-panel,
    body.body-home .area-section {
        width: 100% !important;
        padding: 12px !important;
        border: 1px solid #dbe5f2 !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
    }

    body.body-home .panel-title,
    body.body-home .area-heading {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
        padding-bottom: 8px !important;
    }

    body.body-home .panel-title {
        grid-template-columns: 1fr !important;
    }

    body.body-home .panel-title h2,
    body.body-home .area-heading h2 {
        font-size: 21px !important;
        line-height: 1.15 !important;
    }

    body.body-home .area-heading p {
        display: none !important;
    }

    body.body-home .priority-grid,
    body.body-home .area-grid,
    body.body-home .compact-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-auto-flow: row !important;
        grid-auto-rows: auto !important;
        gap: 8px !important;
    }

    body.body-home .dashboard-card,
    body.body-home .priority-card,
    body.body-home .recommended-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        column-gap: 10px !important;
        row-gap: 3px !important;
        padding: 10px !important;
        border-left-width: 4px !important;
        writing-mode: horizontal-tb !important;
    }

    body.body-home .dashboard-card .card-icon {
        grid-row: 1 / span 2 !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    body.body-home .dashboard-card .card-kicker {
        min-height: 0 !important;
        overflow: hidden !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.body-home .dashboard-card h3 {
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: visible !important;
        color: #111827 !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        white-space: normal !important;
        writing-mode: horizontal-tb !important;
    }

    body.body-home .dashboard-card p {
        display: none !important;
    }

    body.body-home .card-link {
        grid-column: 3 !important;
        grid-row: 1 / span 2 !important;
        align-self: center !important;
        justify-self: end !important;
        min-height: 32px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
}

@media screen and (max-width: 430px) {
    body.body-home header.page-header .brand span {
        max-width: 138px !important;
    }

    body.body-home .hero-actions {
        grid-template-columns: 1fr !important;
    }

    body.body-home .dashboard-card,
    body.body-home .priority-card,
    body.body-home .recommended-card {
        grid-template-columns: 36px minmax(0, 1fr) !important;
    }

    body.body-home .card-link {
        grid-column: 2 !important;
        grid-row: 3 !important;
        justify-self: start !important;
        margin-top: 5px !important;
    }
}

@media screen and (max-width: 680px) {
    body:not(.body-login):not(.body-home) {
        background: #f6f8fb !important;
    }

    body:not(.body-login):not(.body-home) header.page-header,
    body:not(.body-login):not(.body-home) main.main-content,
    body:not(.body-login):not(.body-home) .footer-content {
        width: min(100% - 18px, 680px) !important;
        max-width: 680px !important;
        margin-inline: auto !important;
    }

    body:not(.body-login):not(.body-home) :where(
        .workspace-grid,
        .container-alumnos,
        .dashboard-grid,
        .area-grid,
        .metric-grid,
        .filters-grid,
        .form-grid,
        .controls-grid,
        .picker-grid,
        .settings-grid,
        .bulk-actions,
        .form-row
    ) {
        grid-template-columns: 1fr !important;
    }

    body:not(.body-login):not(.body-home) :where(.form-actions, .bulk-actions, .data-actions, .preview-actions, .report-actions, .actions-row) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body:not(.body-login):not(.body-home) :where(.form-actions, .bulk-actions, .data-actions, .preview-actions, .report-actions, .actions-row) :where(a, button) {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
    }

    body:not(.body-login):not(.body-home) :where(.table-wrapper, .table-zone, .records-list, .list-wrapper, .grade-table-wrapper, .attendance-table-wrapper) {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body:not(.body-login):not(.body-home) table {
        min-width: 640px;
    }
}

@media screen and (max-width: 680px) {
    html body.body-docentes #tableZone {
        overflow: visible !important;
    }

    html body.body-docentes .registered-teachers-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
    }

    html body.body-docentes .registered-teachers-table colgroup,
    html body.body-docentes .registered-teachers-table thead {
        display: none !important;
    }

    html body.body-docentes .registered-teachers-table tbody {
        display: grid !important;
        gap: 12px;
    }

    html body.body-docentes .registered-teachers-table tbody tr {
        display: grid !important;
        overflow: hidden;
        border: 1px solid rgba(47, 143, 85, 0.16);
        border-radius: 10px;
        background: #ffffff;
        box-shadow: 0 5px 14px rgba(47, 143, 85, 0.07);
    }

    html body.body-docentes .registered-teachers-table tbody td {
        display: flex !important;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-width: 0;
        padding: 10px 12px !important;
        border-bottom: 1px solid rgba(47, 143, 85, 0.1);
        text-align: right;
        overflow-wrap: anywhere;
    }

    html body.body-docentes .registered-teachers-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 34%;
        color: #527260;
        font-weight: 800;
        text-align: left;
    }

    html body.body-docentes .registered-teachers-table tbody td:last-child {
        border-bottom: 0;
    }

    html body.body-docentes .registered-teachers-table .row-actions {
        justify-content: flex-end;
    }

    html body.body-docentes .registered-teachers-table .row-actions .btn-mini {
        width: auto !important;
        min-height: 34px !important;
        padding: 0 14px;
    }
}

/* ========================================
   MENU MOVIL GLOBAL SIMPLIFICADO
   ======================================== */
.global-mobile-menu-button {
    display: none;
}

@media screen and (max-width: 680px) {
    html body:not(.body-login):not(.body-home) header.page-header .topbar.global-mobile-menu-ready,
    html body:not(.body-login):not(.body-home) header.page-header nav.topbar.global-mobile-menu-ready {
        position: sticky !important;
        top: 0 !important;
        z-index: 80 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: max(8px, env(safe-area-inset-top)) 0 8px !important;
        overflow: visible !important;
        background: rgba(246, 248, 251, 0.96) !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
        backdrop-filter: blur(14px) !important;
    }

    html body:not(.body-login):not(.body-home) header.page-header .topbar.global-mobile-menu-ready .brand {
        min-width: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    html body:not(.body-login):not(.body-home) header.page-header .topbar.global-mobile-menu-ready .brand img {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 auto !important;
    }

    html body:not(.body-login):not(.body-home) header.page-header .topbar.global-mobile-menu-ready .brand span {
        max-width: min(58vw, 230px) !important;
        overflow: hidden !important;
        color: #111827 !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body:not(.body-login):not(.body-home) header.page-header .topbar.global-mobile-menu-ready .global-mobile-menu-button {
        grid-column: 2 !important;
        width: 44px !important;
        height: 44px !important;
        display: inline-grid !important;
        place-items: center !important;
        gap: 4px !important;
        padding: 10px !important;
        border: 1px solid #dbe5f2 !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        color: #111827 !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
        cursor: pointer !important;
    }

    html body:not(.body-login):not(.body-home) header.page-header .topbar.global-mobile-menu-ready .global-mobile-menu-button span {
        width: 20px !important;
        height: 2px !important;
        display: block !important;
        border-radius: 999px !important;
        background: currentColor !important;
        transition: transform 0.18s ease, opacity 0.18s ease !important;
    }

    html body:not(.body-login):not(.body-home) header.page-header .topbar.global-mobile-menu-ready.mobile-menu-open .global-mobile-menu-button span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    html body:not(.body-login):not(.body-home) header.page-header .topbar.global-mobile-menu-ready.mobile-menu-open .global-mobile-menu-button span:nth-child(2) {
        opacity: 0 !important;
    }

    html body:not(.body-login):not(.body-home) header.page-header .topbar.global-mobile-menu-ready.mobile-menu-open .global-mobile-menu-button span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    html body:not(.body-login):not(.body-home) header.page-header .topbar.global-mobile-menu-ready .topbar-actions {
        position: absolute !important;
        top: calc(100% + 6px) !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 90 !important;
        width: 100% !important;
        max-width: none !important;
        display: none !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 10px !important;
        overflow: visible !important;
        border: 1px solid #dbe5f2 !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16) !important;
    }

    html body:not(.body-login):not(.body-home) header.page-header .topbar.global-mobile-menu-ready.mobile-menu-open .topbar-actions {
        display: grid !important;
    }

    html body:not(.body-login):not(.body-home) header.page-header .topbar.global-mobile-menu-ready .topbar-actions :where(a, button, .btn-logout, .btn-secondary, .btn-primary, .btn-warning) {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
        padding: 0 12px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        line-height: 1.1 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    html body:not(.body-login):not(.body-home) header.page-header .topbar.global-mobile-menu-ready .topbar-actions :where(.user-info, .admin-chip, #superadminName) {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 36px !important;
        justify-content: center !important;
        padding: 8px 10px !important;
        overflow: hidden !important;
        border-radius: 8px !important;
        background: #f6f8fb !important;
        color: #344054 !important;
        font-size: 13px !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body:not(.body-login):not(.body-home) header.page-header .hero-panel {
        margin-top: 8px !important;
        padding: 12px !important;
    }

    html body:not(.body-login):not(.body-home) header.page-header .hero-panel :where(.eyebrow, .status-pill, .hero-description, .hero-panel p:not(.eyebrow):not(.status-pill), .summary-grid, .hero-summary, .quick-summary, .hero-console) {
        display: none !important;
    }

    html body:not(.body-login):not(.body-home) header.page-header .hero-panel h1,
    html body:not(.body-login):not(.body-home) header.page-header .hero-copy h1 {
        font-size: 22px !important;
        line-height: 1.12 !important;
    }

    html body:not(.body-login):not(.body-home) .mobile-hint {
        display: none !important;
    }
}
/* Accesos compactos y menu de acciones de cada pagina. */
.card-title-short { display: none; }
html body:not(.body-login) header.page-header .topbar.global-mobile-menu-ready .topbar-actions[data-compact-mobile-actions] a.mobile-only-menu-link { display: none !important; }
@media screen and (max-width: 900px) {
    html body:not(.body-login) header.page-header .topbar.global-mobile-menu-ready .topbar-actions[data-compact-mobile-actions] a.mobile-only-menu-link { display: inline-flex !important; }
    html body.body-home .priority-grid.priority-grid,
    html body.body-home .area-grid.area-grid,
    html body.body-home .compact-grid.compact-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    html body.body-home a.dashboard-card.dashboard-card {
        display: flex !important; flex-direction: column !important;
        align-items: center !important; justify-content: center !important;
        gap: 8px !important; padding: 12px 6px !important;
        min-height: 104px !important; height: auto !important;
        border-left-width: 1px !important; text-align: center !important;
    }
    html body.body-home a.dashboard-card.dashboard-card .card-icon {
        width: 36px !important; height: 36px !important;
        display: grid !important; place-items: center !important;
        font-size: 22px !important; margin: 0 !important;
    }
    html body.body-home a.dashboard-card.dashboard-card h3 {
        font-size: 12px !important; line-height: 1.3 !important;
        text-align: center !important; min-height: 0 !important;
        overflow-wrap: anywhere !important;
    }
    html body.body-home a.dashboard-card.dashboard-card :is(.card-link,.card-kicker,p,.card-title-full) { display: none !important; }
    html body.body-home a.dashboard-card.dashboard-card .card-title-short { display: inline !important; }
    html body:not(.body-login) header.page-header .topbar.global-mobile-menu-ready {
        position: relative !important; display: grid !important;
        grid-template-columns: minmax(0,1fr) 44px !important;
        overflow: visible !important; align-items: center !important;
    }
    html body:not(.body-login) header.page-header .topbar.global-mobile-menu-ready button.compact-menu-toggle {
        display: grid !important; place-items: center !important;
        width: 44px !important; height: 44px !important; padding: 10px !important;
        grid-column: 2 !important; background: #fff !important;
        border: 1px solid #cbd9e7 !important; border-radius: 10px !important;
    }
    .compact-menu-toggle svg { width: 24px; height: 24px; fill: none; stroke: #0f4c81; stroke-width: 2; stroke-linecap: round; }
    html body:not(.body-login) header.page-header .topbar.global-mobile-menu-ready .topbar-actions[data-compact-mobile-actions] {
        display: none !important; position: absolute !important;
        top: calc(100% + 6px) !important; right: 0 !important; left: 0 !important;
        width: 100% !important; max-height: 70vh !important; overflow-y: auto !important;
        padding: 12px !important; margin: 0 !important; gap: 8px !important;
        background: #fff !important; border: 1px solid #d5e3f1 !important;
        border-radius: 12px !important; box-shadow: 0 12px 28px #10243d26 !important;
        z-index: 1000 !important; grid-template-columns: 1fr !important;
    }
    html body:not(.body-login) header.page-header .topbar.global-mobile-menu-ready.mobile-menu-open .topbar-actions[data-compact-mobile-actions] { display: grid !important; }
    html body:not(.body-login) header.page-header .topbar.global-mobile-menu-ready .topbar-actions[data-compact-mobile-actions] :is(a,button) { width: 100% !important; justify-content: flex-start !important; min-height: 44px !important; }
}
@media screen and (max-width: 359px) {
    html body.body-home .priority-grid.priority-grid,
    html body.body-home .area-grid.area-grid,
    html body.body-home .compact-grid.compact-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}