/* Ajustes compartidos para touch-first rules. Only applies to phones and tablets. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(39, 86, 154, .16);
}

@media (pointer: coarse) {
  html body button, html body input[type="button"], html body input[type="submit"],
  html body input[type="reset"], html body select, html body summary,
  html body [role="button"], html body a[class*="button"], html body .nav-link,
  html body .nav-section-toggle, html body .icon-button, html body .mobile-menu,
  html body .primary-button, html body .secondary-button, html body .action-button,
  html body .btn, html body .btn-primary, html body .btn-secondary,
  html body .btn-warning, html body .btn-submit, html body .btn-upload,
  html body .btn-back, html body .btn-logout {
    min-height: 44px !important;
  }

  input[type="checkbox"], input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: #27569a;
  }

  button, a, input, select, textarea, label {
    touch-action: manipulation;
  }
}

@media screen and (max-width: 1024px) {
  img, svg, canvas, video, iframe {
    max-width: 100%;
  }

  .main-content, main.main-content, .page-header,
  .container, .content, .workspace, .page-content {
    min-width: 0;
    max-width: 100%;
  }

  .table-wrapper, .table-zone, .report-table-wrapper,
  .attendance-table-wrapper, .students-table-wrapper,
  .table-responsive, [data-table-scroll] {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  dialog, [role="dialog"] {
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .modal-content, .modal-dialog, .modal-card,
  .dialog-content, .dialog-card, .popup-content {
    max-width: min(100%, calc(100vw - 24px));
    max-height: calc(100dvh - 32px);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media screen and (max-width: 760px) {
  html { scroll-padding-top: 76px; }

  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select, textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents automatic focus zoom on iOS. */
  }

  textarea { min-height: 96px !important; }

  button, input[type="button"], input[type="submit"], input[type="reset"],
  select, .btn, .btn-primary, .btn-secondary, .btn-warning, .btn-submit,
  .btn-upload, .btn-back, .btn-logout {
    min-height: 44px !important;
  }

  .page-header, main.main-content, .main-content {
    min-width: 0;
    max-width: 100%;
  }

  .form-grid, .filters-grid, .controls-grid, .settings-grid,
  .form-row-grid, .filter-grid, .filters-row {
    min-width: 0;
  }

  .form-grid > *, .filters-grid > *, .controls-grid > *,
  .settings-grid > *, .form-row-grid > *, .filter-grid > * {
    min-width: 0;
    max-width: 100%;
  }

  .modal-content, .modal-dialog, .modal-card,
  .dialog-content, .dialog-card, .popup-content {
    width: 100%;
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 14px;
  }

  /* Tablas densas conservan todas sus columnas y se desplazan dentro de su panel. */
  table { max-width: 100%; }

  .establishment-form input, .establishment-form select {
    min-height: 46px;
    font-size: 16px;
  }

  .body-establecimientos .page-header,
  .body-establecimientos .main-content {
    width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  .body-establecimientos .establishment-form-panel,
  .body-establecimientos .establishment-list-panel {
    padding: 16px !important;
  }

  .body-establecimientos .establishments-table {
    min-width: 760px;
  }

  .body-establecimientos .row-actions .action-button {
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .body-login .login-access {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

@media screen and (max-width: 420px) {
  .modal-content, .modal-dialog, .modal-card,
  .dialog-content, .dialog-card, .popup-content {
    max-width: calc(100vw - 16px);
    padding-left: 14px;
    padding-right: 14px;
  }

  .body-establecimientos .page-header,
  .body-establecimientos .main-content {
    width: calc(100% - 20px) !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
}

@media screen and (max-height: 520px) and (max-width: 900px) {
  body.body-login { min-height: 100%; overflow-y: auto; }
  .body-login .login-access {
    min-height: 100vh;
    min-height: 100dvh;
    align-items: flex-start;
    overflow-y: auto;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .body-login .login-card {
    max-height: none !important;
  }
}

/* The dashboard has its own fixed header and scrolling content area. */
@media screen and (max-width: 1180px) {
  html body.dashboard-home.menu-open .dashboard-content { display: none !important; }
  html body.dashboard-home .sidebar-close {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.1) !important;
    color: white !important;
    font-size: 26px !important;
  }
}

@media screen and (min-width: 721px) and (max-width: 1180px) {
  html body.dashboard-home .sidebar { z-index: 40 !important; }
  html body.dashboard-home .sidebar .brand-block {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 44px !important;
    gap: 8px !important;
    padding: 12px !important;
  }
}

@media screen and (max-width: 1024px) {
  html body.dashboard-home #modulesModal.modal-backdrop { padding: 8px !important; }
  html body.dashboard-home #modulesModal .floating-modal {
    width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 12px !important;
  }
  html body.dashboard-home #modulesModal .modal-head { padding: 8px 10px !important; gap: 6px !important; }
  html body.dashboard-home #modulesModal .modal-head h2 { font-size: 15px !important; }
  html body.dashboard-home #modulesModal .modal-head p,
  html body.dashboard-home #modulesModal .modal-foot { display: none !important; }
  html body.dashboard-home #modulesModal .close-button { width: 40px !important; height: 40px !important; min-height: 40px !important; flex: 0 0 40px; }
  html body.dashboard-home #modulesModal .modal-body { padding: 7px !important; }
  html body.dashboard-home #modulesModal .module-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  html body.dashboard-home #modulesModal .module-list a {
    min-width: 0 !important;
    min-height: 68px !important;
    grid-template-rows: 26px minmax(24px, auto) !important;
    gap: 3px !important;
    padding: 5px 2px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    text-align: center !important;
  }
  html body.dashboard-home #modulesModal .module-icon { width: 26px !important; height: 26px !important; }
  html body.dashboard-home #modulesModal .module-icon svg { width: 19px !important; height: 19px !important; }
  html body.dashboard-home #modulesModal .module-title {
    display: -webkit-box !important;
    max-width: 100% !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow-wrap: anywhere !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
  }
  html body.dashboard-home #modulesModal .module-action { display: none !important; }
}

@media screen and (max-width: 720px) {
  html body.dashboard-home .topbar {
    width: 100vw !important;
    box-sizing: border-box !important;
    right: 0 !important;
    left: 0 !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px 44px !important;
    grid-template-rows: 44px 44px !important;
    gap: 4px 6px !important;
    min-height: 0 !important;
    padding: 6px 10px !important;
  }

  html body.dashboard-home .mobile-menu,
  html body.dashboard-home .icon-button {
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  html body.dashboard-home .mobile-menu { grid-column: 1; grid-row: 1; }
  html body.dashboard-home .topbar-title {
    grid-column: 2;
    grid-row: 1;
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden;
  }
  html body.dashboard-home #notificationsButton,
  html body.dashboard-home #allModulesButton { display: inline-grid !important; }
  html body.dashboard-home .topbar-title strong,
  html body.dashboard-home .topbar-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html body.dashboard-home #notificationsButton { grid-column: 3; grid-row: 1; }
  html body.dashboard-home #allModulesButton { grid-column: 4; grid-row: 1; }
  html body.dashboard-home .user-chip {
    grid-column: 1 / 3;
    grid-row: 2;
    width: auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  html body.dashboard-home .topbar > .secondary-button {
    display: inline-flex !important;
    grid-column: 3 / 5;
    grid-row: 2;
    justify-content: center;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 5px !important;
    overflow: hidden;
    font-size: 10px !important;
    white-space: nowrap;
  }
  html body.dashboard-home { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
  html body.dashboard-home .page { padding-top: 104px !important; }
  html body.dashboard-home .dashboard-content {
    inset: 104px auto 0 0 !important;
    width: 100vw !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  html body.dashboard-home .dashboard-content.content {
    width: 100% !important;
    padding: 14px 12px 28px !important;
  }
  html body.dashboard-home .page-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    padding-left: 56px !important;
  }
  html body.dashboard-home .page-head > * {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body.dashboard-home .page-head::before {
    width: 44px !important;
    height: 44px !important;
    font-size: 23px !important;
  }
  html body.dashboard-home .page-head h1 {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere;
  }
  html body.dashboard-home .page-head .date-pill,
  html body.dashboard-home .page-head .date-chip,
  html body.dashboard-home .page-head .date-badge {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    justify-content: flex-start !important;
  }
  html body.dashboard-home .content > section,
  html body.dashboard-home .metrics,
  html body.dashboard-home .grid-main,
  html body.dashboard-home .grid-bottom,
  html body.dashboard-home .charts,
  html body.dashboard-home .quick-grid,
  html body.dashboard-home .module-list {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body.dashboard-home .metric {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 14px !important;
  }
  html body.dashboard-home .metric-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 24px !important;
  }
  html body.dashboard-home .metric > div:not(.metric-icon) {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }
  html body.dashboard-home .trend { grid-column: 2 !important; }
  html body.dashboard-home .panel,
  html body.dashboard-home .panel * { min-width: 0; }
}

@media screen and (min-width: 721px) and (max-width: 1180px) {
  html body.dashboard-home .dashboard-content {
    inset: 68px 0 0 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  html body.dashboard-home .dashboard-content.content {
    width: 100% !important;
    padding-inline: 18px !important;
  }
}

/* Mobile dashboard: compact navigation, functional shortcuts and readable tables. */
@media screen and (max-width: 720px) {
  html body.dashboard-home .topbar {
    grid-template-rows: 44px !important;
    min-height: 56px !important;
    padding: 6px 10px !important;
  }
  html body.dashboard-home .user-chip,
  html body.dashboard-home .topbar > .secondary-button { display: none !important; }
  html body.dashboard-home .page { padding-top: 56px !important; }
  html body.dashboard-home .dashboard-content { inset: 56px auto 0 0 !important; }
  html body.dashboard-home .content > .metrics,
  html body.dashboard-home .content > .grid-main,
  html body.dashboard-home .content > .grid-bottom { display: none !important; }
  html body.dashboard-home .page-head { padding-left: 0 !important; }
  html body.dashboard-home .page-head::before { display: none !important; }
  html body.dashboard-home .page-head h1 { font-size: clamp(20px, 5.8vw, 26px) !important; }
  html body.dashboard-home .page-head p { display: none !important; }
  html body.dashboard-home .content > .panel { margin-top: 8px !important; }
  html body.dashboard-home .panel-head { min-height: 48px; padding: 8px 10px !important; }
  html body.dashboard-home .panel-head h2 { font-size: 14px !important; }
  html body.dashboard-home .panel-head .link-button { min-height: 40px !important; font-size: 11px !important; }
  html body.dashboard-home .quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 8px !important;
  }
  html body.dashboard-home .quick-card {
    min-height: 76px !important;
    grid-template-rows: 28px minmax(0, auto) !important;
    justify-items: center !important;
    gap: 4px !important;
    padding: 7px 4px !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    font-size: 10px !important;
    text-align: center !important;
  }
  html body.dashboard-home .quick-icon { width: 28px !important; height: 28px !important; border-radius: 7px !important; font-size: 16px !important; box-shadow: none !important; }
  html body.dashboard-home .quick-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.1 !important; }
  html body.dashboard-home .quick-action { display: none !important; }
  html body.dashboard-home.menu-open .dashboard-content { display: none !important; }
  html body.dashboard-home .sidebar {
    display: flex !important;
    flex-direction: column !important;
    z-index: 40 !important;
    width: min(300px, 86vw) !important;
    height: 100dvh !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    box-sizing: border-box !important;
  }
  html body.dashboard-home .sidebar .brand-block {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 44px !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  html body.dashboard-home .sidebar .brand-block img { width: 38px !important; height: 38px !important; }
  html body.dashboard-home .sidebar .brand-block strong { font-size: 12px !important; }
  html body.dashboard-home .sidebar .brand-block span { font-size: 10px !important; }
  html body.dashboard-home .sidebar-close {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.1) !important;
    color: white !important;
    font-size: 26px !important;
  }
  html body.dashboard-home .sidebar .nav-scroll { flex: 1 1 auto !important; min-height: 0 !important; }
  html body.dashboard-home .sidebar .sidebar-foot { flex: 0 0 auto; padding: 9px 14px !important; }
  html body.dashboard-home .sidebar-logout {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    margin-top: 8px !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 9px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
  }
}

@media screen and (max-width: 760px) {
  html body { font-size: 14px; }
  h1 { font-size: clamp(20px, 5.5vw, 26px); }
  h2 { font-size: clamp(16px, 4.4vw, 20px); }
  html body:not(.body-login) .summary-grid,
  html body:not(.body-login) .stats-grid,
  html body:not(.body-login) .summary-card,
  html body:not(.body-login) .stat-card,
  html body:not(.body-login) .metric-card,
  html body:not(.body-login) .kpi-grid,
  html body:not(.body-login) .kpi-card { display: none !important; }
  .grade-input { min-width: 42px !important; min-height: 44px !important; font-size: 16px !important; }
  body.body-calificaciones .table-zone {
    max-height: calc(100dvh - 205px);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.body-calificaciones .grades-table th:first-child,
  body.body-calificaciones .grades-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 8;
    background: #f4f8fd;
  }
  body.body-calificaciones .grades-table th:nth-child(2),
  body.body-calificaciones .grades-table td:nth-child(2) {
    position: sticky;
    left: 46px;
    z-index: 7;
    width: clamp(150px, 46vw, 182px) !important;
    min-width: clamp(150px, 46vw, 182px) !important;
    max-width: clamp(150px, 46vw, 182px) !important;
    background: #fff;
    box-shadow: 8px 0 12px rgba(39,77,138,.11);
  }
  body.body-calificaciones .grades-table thead th:first-child,
  body.body-calificaciones .grades-table thead th:nth-child(2) { z-index: 18; background: #edf4fc; }
  body.body-calificaciones .grades-table td.student-name,
  body.body-calificaciones .grades-table .student-name {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.15 !important;
  }
  body.body-asistencia .table-zone {
    max-height: calc(100dvh - 185px);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.body-asistencia .attendance-table th:nth-child(2),
  body.body-asistencia .attendance-table td.student-name {
    width: clamp(150px, 48vw, 188px) !important;
    min-width: clamp(150px, 48vw, 188px) !important;
    max-width: clamp(150px, 48vw, 188px) !important;
  }
  body.body-asistencia .attendance-table td.student-name {
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    height: auto !important;
    min-height: 54px !important;
    line-height: 1.15 !important;
  }
  body.body-asistencia .attendance-table .attendance-checkbox {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
  }
}

@media screen and (min-width: 721px) and (max-width: 1180px) {
  html body.dashboard-home .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html body.dashboard-home .metric { min-width: 0 !important; padding: 12px !important; }
}

/* Compacta las páginas de trabajo; el panel principal conserva su diseño propio. */
@media screen and (min-width: 761px) and (max-width: 1024px) {
  html body:not(.dashboard-home):not(.body-home):not(.body-login) {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header nav.topbar {
    min-height: 56px !important;
    padding-block: 5px !important;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) main.main-content,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header {
    margin-inline: 10px !important;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .hero-panel {
    min-height: 0 !important;
    padding: 16px 18px !important;
  }
}

@media screen and (max-width: 760px) {
  :root { --app-edge: 7px; }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) {
    padding-top: 52px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) h1 {
    font-size: clamp(19px, 5vw, 23px) !important;
    line-height: 1.12 !important;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) h2 {
    font-size: clamp(15px, 4vw, 18px) !important;
    line-height: 1.2 !important;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) h3 { font-size: 14px !important; }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) p,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .helper-text,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .section-description { font-size: 11.5px !important; }

  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header nav.topbar {
    height: 52px !important;
    min-height: 52px !important;
    padding: 4px max(7px, env(safe-area-inset-left)) !important;
    gap: 6px !important;
    overflow: hidden !important;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .brand {
    flex: 0 0 34px !important;
    min-width: 34px !important;
    gap: 0 !important;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .brand img {
    width: 31px !important;
    height: 31px !important;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .brand span,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .topbar-actions .user-info,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .topbar-actions .admin-chip,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .topbar-actions .user-chip {
    display: none !important;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .topbar-actions {
    flex: 1 1 auto !important;
    width: 0 !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .topbar-actions::-webkit-scrollbar { display: none; }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .topbar-actions > a,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .topbar-actions > button {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    padding: 6px 9px !important;
    font-size: 10px !important;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .topbar-actions .topbar-action-expand {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .topbar-actions .topbar-action-expand .topbar-action-icon {
    width: 17px !important;
    height: 17px !important;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) main.main-content,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .footer-content {
    width: auto !important;
    max-width: none !important;
    margin-left: 7px !important;
    margin-right: 7px !important;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) main.main-content { padding-bottom: 12px !important; }

  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .hero-panel {
    min-height: 0 !important;
    margin: 6px 0 8px !important;
    padding: 10px 12px !important;
    border-left-width: 3px !important;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .hero-panel h1 { font-size: 20px !important; }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .hero-panel p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .hero-panel .status-pill,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .quick-summary,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .hero-summary,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .summary-grid { display: none !important; }

  html body:not(.dashboard-home):not(.body-home):not(.body-login) main.main-content > section,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) main.main-content > article,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) main.main-content > aside,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .database-panel,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .form-panel,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .list-panel,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .report-panel,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .attendance-report-panel,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .settings-panel,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .form-section,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .section-manual,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .section-masiva,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .attendance-book,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .grade-book,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .course-picker,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .empty-state {
    padding: 11px !important;
    border-radius: 8px !important;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .section-header h2,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .panel-header h2 { font-size: 15px !important; }

  html body:not(.dashboard-home):not(.body-home):not(.body-login) .form-grid,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .filters-grid,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .settings-grid,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .report-grid,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .filters {
    min-width: 0 !important;
    gap: 8px !important;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) label { font-size: 11px !important; }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) input:not([type="checkbox"]):not([type="radio"]),
  html body:not(.dashboard-home):not(.body-home):not(.body-login) select,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) textarea {
    min-width: 0 !important;
    min-height: 42px !important;
    font-size: 16px !important;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) textarea { min-height: 78px !important; }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) button,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .btn,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .btn-primary,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .btn-secondary,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .btn-warning {
    font-size: 11px !important;
  }

  html body:not(.dashboard-home):not(.body-home):not(.body-login) table th,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) table td {
    padding: 5px !important;
    font-size: 10.5px !important;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .table-zone,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .table-wrapper,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .table-responsive {
    max-width: 100% !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .action-button,
  html body:not(.dashboard-home):not(.body-home):not(.body-login) .row-actions button {
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 5px !important;
  }

  /* Libro de notas: el alumno queda visible y se liberan columnas para ingresar notas. */
  body.body-calificaciones header.page-header .hero-panel p,
  body.body-calificaciones header.page-header .hero-panel .status-pill,
  body.body-calificaciones .book-title p,
  body.body-calificaciones .helper-row { display: none !important; }
  body.body-calificaciones header.page-header .hero-panel { padding-block: 8px !important; }
  body.body-calificaciones .course-picker { gap: 8px !important; padding: 9px !important; }
  body.body-calificaciones .course-picker p { display: none !important; }
  body.body-calificaciones .course-picker h2 { font-size: 14px !important; }
  body.body-calificaciones .book-header { padding: 9px !important; }
  body.body-calificaciones .book-title h2 { font-size: 15px !important; }
  body.body-calificaciones .filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  body.body-calificaciones .filters > label { min-width: 0 !important; }
  body.body-calificaciones .filters > label[for="studentSearch"] { grid-column: 1 / -1; }
  body.body-calificaciones .filters #btnSave { grid-column: 1 / -1; width: 100% !important; }
  body.body-calificaciones .table-zone {
    max-height: 58dvh !important;
    margin: 0 !important;
    overflow: auto !important;
    border-radius: 7px !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.body-calificaciones .grades-table {
    width: max-content !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    font-size: 10px !important;
  }
  body.body-calificaciones .grades-table th,
  body.body-calificaciones .grades-table td { padding: 4px 2px !important; }
  body.body-calificaciones .grades-table th:first-child,
  body.body-calificaciones .grades-table td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 9 !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    background: #f1f6fc !important;
  }
  body.body-calificaciones .grades-table th:nth-child(2),
  body.body-calificaciones .grades-table td:nth-child(2) {
    position: sticky !important;
    left: 42px !important;
    z-index: 8 !important;
    width: clamp(92px, 30vw, 122px) !important;
    min-width: clamp(92px, 30vw, 122px) !important;
    max-width: clamp(92px, 30vw, 122px) !important;
    padding-inline: 5px !important;
    background: #fff !important;
    box-shadow: 6px 0 9px rgba(39,77,138,.12) !important;
  }
  body.body-calificaciones .grades-table thead th:first-child,
  body.body-calificaciones .grades-table thead th:nth-child(2) {
    z-index: 20 !important;
    background: #eaf3fc !important;
  }
  body.body-calificaciones .grades-table .student-name {
    display: table-cell !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    text-overflow: clip !important;
    font-size: 10px !important;
    line-height: 1.12 !important;
    text-align: left !important;
  }
  body.body-calificaciones .grades-table th:nth-child(n+3):nth-child(-n+12),
  body.body-calificaciones .grades-table td:nth-child(n+3):nth-child(-n+12) {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }
  body.body-calificaciones .grades-table th:nth-child(13),
  body.body-calificaciones .grades-table td:nth-child(13) {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
  }
  body.body-calificaciones .grades-table th:nth-child(14),
  body.body-calificaciones .grades-table td:nth-child(14) {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
  }
  body.body-calificaciones .grades-table .grade-input {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 40px !important;
    padding: 0 2px !important;
    font-size: 16px !important;
    text-align: center !important;
  }
  body.body-calificaciones .grades-table .student-order-handle {
    width: 20px !important;
    min-width: 20px !important;
    height: 26px !important;
    min-height: 26px !important;
    margin-right: 1px !important;
  }
  body.body-calificaciones .grades-table .student-order-handle svg { width: 13px !important; height: 13px !important; }
  body.body-calificaciones .grades-table .student-number-value { font-size: 9px !important; }

  /* La lista de asistencia también libera espacio sin ocultar nombres. */
  body.body-asistencia .attendance-table th:nth-child(2),
  body.body-asistencia .attendance-table td.student-name {
    width: clamp(108px, 32vw, 132px) !important;
    min-width: clamp(108px, 32vw, 132px) !important;
    max-width: clamp(108px, 32vw, 132px) !important;
  }
  body.body-asistencia .attendance-table td.student-name {
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    font-size: 10px !important;
    line-height: 1.12 !important;
  }
}

@media screen and (max-height: 540px) and (max-width: 760px) {
  html body:not(.dashboard-home):not(.body-home):not(.body-login) header.page-header .hero-panel p { display: none !important; }
  body.body-calificaciones .table-zone { max-height: calc(100dvh - 225px) !important; }
  body.body-calificaciones .course-picker { padding-block: 7px !important; }
  body.body-calificaciones .book-header { padding-block: 7px !important; }
}