/*
 * Capa final de distribucion responsive.
 * Corrige la cascada de estilos historicos sin alterar vistas de impresion,
 * tablas academicas especializadas ni comportamiento de los componentes.
 */

body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #appMain,
body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #appMain .module,
body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #appMain .module > *,
body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #appMain :is(form, fieldset, section, article, header, nav, div, label) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #appMain {
  width: auto !important;
  max-width: 100% !important;
  overflow-x: clip;
}

body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #appMain .module {
  width: 100%;
  overflow-x: clip;
}

/* Formularios y filtros reutilizados: tantas columnas como permita el ancho. */
body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #appMain :is(
  .form-grid,
  .filter-grid,
  .filters-row,
  .users-filter-row,
  .table-tools,
  .report-filter-grid,
  .report-unified-filters,
  .report-controls,
  .report-options,
  .report-massive-options,
  .utp-analytics-filters,
  .utp-report-filters,
  .utp-risk-filter-bar,
  .achievement-filters,
  .subject-filter-bar
) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)) !important;
  gap: 8px !important;
  align-items: end !important;
}

body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #appMain :is(.form-grid, .filter-grid, .filters-row, .report-filter-grid, .report-unified-filters) > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #appMain :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #appMain label > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100% !important;
}

/* Cabeceras y grupos de acciones pueden continuar en una fila nueva. */
body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #appMain :is(
  .list-card-head,
  .card-head,
  .panel-head,
  .section-head,
  .toolbar-head,
  .report-panel-head,
  .config-section-head,
  .professors-card-head,
  .form-actions,
  .module-actions-inline,
  .module-head-actions,
  .module-hero-actions,
  .list-card-actions,
  .table-actions,
  .report-actions,
  .bulk-actions,
  .report-inline-actions,
  .report-secondary-actions,
  .module-compact-actions,
  .module-compact-session
) {
  min-width: 0 !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
}

/* Evita palabras en vertical cuando un control recibe poco ancho. */
body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #appMain :is(
  button,
  .btn-primary,
  .btn-soft,
  .btn-ghost,
  .btn-danger,
  .nav-btn,
  label,
  h1,
  h2,
  h3,
  h4,
  th,
  td
) {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}

body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #appMain :is(button, .btn-primary, .btn-soft, .btn-ghost, .btn-danger, .nav-btn) {
  min-width: max-content;
  max-width: 100% !important;
  white-space: normal !important;
  line-height: 1.2 !important;
}

/* Reportes conserva el estilo institucional y deja que pestanas y acciones fluyan. */
body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #module-informes .report-center-categories {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)) !important;
  gap: 8px !important;
}

/* Neutraliza la antigua barra horizontal de navegacion, de mayor especificidad. */
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .report-center-categories {
  display: grid !important;
  flex-flow: initial !important;
  overflow: visible !important;
}

html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .report-center-categories > button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: initial !important;
}

body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #module-informes :is(.report-center-categories, .report-inner-tabs) button {
  min-width: min(100%, 132px) !important;
  width: auto;
  max-width: 100% !important;
}

body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #module-informes :is(.report-workspace, .report-unified-panel, .report-control-panel, .report-config-card) {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

@media (max-width: 900px) {
  html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .report-center-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* El desplazamiento queda limitado al dato ancho, nunca a toda la pagina. */
body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #appMain :is(
  .table-wrap,
  .smart-table,
  .permission-table-wrap,
  .monthly-attendance-table-wrap,
  .daily-attendance-table-wrap,
  .academic-report-table-scroll,
  .achievement-table-scroll,
  .usuarios-table-desktop,
  .guardian-table-wrap,
  .utp-critical-table-wrap,
  .ficha-table-wrapper
) {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 760px) {
  body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #appMain :is(
    .form-grid,
    .filter-grid,
    .filters-row,
    .users-filter-row,
    .table-tools,
    .report-filter-grid,
    .report-unified-filters,
    .report-controls,
    .report-options,
    .report-massive-options,
    .utp-analytics-filters,
    .utp-report-filters,
    .utp-risk-filter-bar,
    .achievement-filters,
    .subject-filter-bar
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #appMain :is(
    .form-actions,
    .module-actions-inline,
    .module-head-actions,
    .module-hero-actions,
    .list-card-actions,
    .table-actions,
    .report-actions,
    .bulk-actions,
    .report-inline-actions,
    .report-secondary-actions
  ) > :is(button, a.btn-primary, a.btn-soft, a.btn-ghost, label.btn-primary, label.btn-soft, select) {
    flex: 1 1 min(100%, 160px) !important;
    width: auto !important;
    min-width: min(100%, 132px) !important;
    justify-content: center !important;
  }
}

@media (max-width: 560px) {
  html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .report-center-categories {
    grid-template-columns: minmax(0, 1fr) !important;
  }

}

@media (max-width: 420px) {

  body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #appMain :is(
    .form-actions,
    .module-actions-inline,
    .module-head-actions,
    .module-hero-actions,
    .list-card-actions,
    .table-actions,
    .report-actions,
    .bulk-actions,
    .report-inline-actions,
    .report-secondary-actions
  ) > :is(button, a.btn-primary, a.btn-soft, a.btn-ghost, label.btn-primary, label.btn-soft, select) {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}

/* Filtros de matricula: conservar palabras completas en todos los modulos. */
html body.is-authenticated:not(.report-print-body):not(.report-pdf-render) main#appMain :is(#module-informes, .module) .student-status-filters {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  gap: 4px !important;
  width: fit-content !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 3px !important;
  border-radius: 10px !important;
}
html body.is-authenticated:not(.report-print-body):not(.report-pdf-render) main#appMain :is(#module-informes, .module) .student-status-filters > button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 4px 10px !important;
  border-radius: 7px !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Repartir los nueve controles sin columnas estrechas ni filas reservadas. */
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .mini-toolbar.report-filter-grid.report-unified-filters {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important;
  grid-auto-rows: auto !important;
  align-items: end !important;
  gap: 12px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .report-filter-grid.report-unified-filters > :is(label, .report-status-filter) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  gap: 5px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes :is(.report-workspace, .report-config-card, .report-unified-panel) {
  height: auto !important;
  min-height: 0 !important;
  gap: 12px !important;
  align-content: start !important;
  grid-template-columns: minmax(0, 1fr) !important;
}
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .report-config-card {
  padding: 16px !important;
}
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .report-config-head {
  margin: 0 0 12px !important;
  padding: 0 0 10px !important;
  min-height: 0 !important;
}
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes :is(.report-inline-actions, .report-secondary-actions, .report-center-categories.report-integral-only) {
  display: flex !important;
  flex-flow: row wrap !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 0 !important;
}
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes :is(.report-inline-actions, .report-secondary-actions, .report-center-categories.report-integral-only) > button {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 36px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* Menor separacion vertical en la configuracion de Informes. */
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .mini-toolbar.report-filter-grid.report-unified-filters { row-gap: 6px !important; column-gap: 10px !important; }
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .report-filter-grid.report-unified-filters > :is(label, .report-status-filter) { gap: 3px !important; }
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .report-workspace { gap: 8px !important; margin-block: 8px !important; padding: 0 !important; }
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes :is(.report-config-card, .report-observation-editor, .report-insights) { margin: 0 !important; padding: 10px 12px !important; min-height: 0 !important; height: auto !important; }
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .report-config-card { gap: 6px !important; }
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .report-config-head { margin: 0 0 6px !important; padding: 0 0 6px !important; }
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes :is(.report-inline-actions, .report-secondary-actions) { margin: 4px 0 0 !important; padding: 0 !important; }
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .report-observation-editor > .list-card-head { margin: 0 0 8px !important; padding: 6px 8px !important; min-height: 0 !important; height: auto !important; }
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .report-observation-editor > .list-card-head h3 { color: #12385d !important; margin: 0 !important; }
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .report-observation-layout { gap: 6px 12px !important; margin: 0 !important; padding: 0 !important; align-items: start !important; }
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes :is(.report-period-field, .report-observation-box) { margin: 0 !important; padding: 6px 8px !important; min-height: 0 !important; gap: 3px !important; }
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .report-observation-grid { gap: 6px !important; margin: 0 !important; }
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .report-observation-box textarea { min-height: 52px !important; height: 52px; padding: 6px 8px !important; margin: 0 !important; }
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .report-observation-actions { margin: 0 !important; padding: 0 !important; }
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .report-insights .layout-insight-grid { margin: 6px 0 !important; gap: 0 !important; }
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .report-insights .layout-insight { min-height: 0 !important; height: auto !important; padding: 8px 12px !important; }
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-informes .report-insights .institutional-info-note { margin-top: 6px !important; padding: 6px 10px !important; min-height: 0 !important; }

/*
 * Calificaciones: el contenido debe medir el espacio disponible a la derecha
 * del menu. La regla generica de esta hoja usaba width:auto y, con algunas
 * combinaciones de zoom/cascada, el dashboard se calculaba contra el viewport
 * completo; por eso la primera tarjeta quedaba debajo del menu lateral.
 */
@media screen and (min-width: 768px) {
  html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain {
    margin-left: var(--pl-sidebar-width, 250px) !important;
    width: calc(100% - var(--pl-sidebar-width, 250px)) !important;
    max-width: calc(100% - var(--pl-sidebar-width, 250px)) !important;
  }
}

html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-calificaciones .grade-dashboard-compact,
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-calificaciones .grade-filters-row,
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-calificaciones .grade-reference-kpis,
html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-calificaciones .grade-reference-kpis .layout-insight-grid {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  box-sizing: border-box !important;
}

html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain #module-calificaciones .grade-reference-kpis .layout-insight {
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* El menu y JavaScript usan ahora el mismo breakpoint de tablet. */
@media screen and (max-width: 980px) {
  :root {
    --preview-sidebar-width: 0px;
    --shell-sidebar-width: 0px;
  }

  html body.is-authenticated:not(.report-print-body):not(.report-pdf-render) .mobile-menu-toggle.mobile-menu-toggle {
    display: grid !important;
    position: fixed !important;
    top: max(8px, calc(var(--shell-topbar-height) - 37px)) !important;
    left: 8px !important;
    right: auto !important;
    width: 30px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    place-items: center !important;
    z-index: 1110 !important;
  }

  html body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #mainNav#mainNav {
    position: fixed !important;
    inset: var(--shell-topbar-height) auto 0 0 !important;
    display: flex !important;
    width: min(292px, 86vw) !important;
    max-width: min(292px, 86vw) !important;
    height: calc(100dvh - var(--shell-topbar-height)) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    transform: translate3d(-105%, 0, 0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .2s ease !important;
    z-index: 1100 !important;
  }

  html body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #mainNav#mainNav.open {
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
  }

  html body.is-authenticated.menu-open:not(.report-print-body):not(.report-pdf-render) main#appMain#appMain {
    visibility: hidden !important;
  }
}

/* Barras de desplazamiento: conservar acceso por rueda, teclado y gesto tactil
   sin ocupar espacio visual ni generar una barra horizontal en la pagina. */
html:has(body.is-authenticated:not(.report-print-body):not(.report-pdf-render)),
body.is-authenticated:not(.report-print-body):not(.report-pdf-render) {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

body.is-authenticated:not(.report-print-body):not(.report-pdf-render) :is(.app-shell, #appMain, #appMain .module) {
  max-width: 100% !important;
  overflow-x: clip !important;
}

body.is-authenticated:not(.report-print-body):not(.report-pdf-render) :is(#mainNav, #appMain *) {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.is-authenticated:not(.report-print-body):not(.report-pdf-render) :is(#mainNav, #appMain *)::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #appMain :is(
  .table-wrap,
  .data-table-wrap,
  .responsive-table,
  .table-responsive,
  .smart-table,
  .permission-table-wrap,
  .monthly-attendance-table-wrap,
  .daily-attendance-table-wrap,
  .academic-report-table-scroll,
  .achievement-table-scroll,
  .achievement-summary-scroll,
  .usuarios-table-desktop,
  .guardian-table-wrap,
  .utp-critical-table-wrap,
  .ficha-table-wrapper,
  [class*="table-wrap"],
  [class*="table-scroll"]
) {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* Los contenedores estructurales crecen con su contenido; el scroll queda
   reservado para tablas, menus, modales y componentes que realmente lo usan. */
body.is-authenticated:not(.report-print-body):not(.report-pdf-render) #appMain :is(
  .card,
  .panel-listado,
  .list-table-card,
  .report-workspace,
  .config-card,
  .course-context,
  .dashboard-home,
  .staff-dashboard-home,
  .teacher-dashboard-home,
  .utp-panel
):not(.modal):not([role="dialog"]) {
  height: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
}

@media screen and (max-width: 980px) {
  html body.is-authenticated:not(.guardian-portal-only):not(.report-print-body):not(.report-pdf-render) main#appMain {
    width: 100% !important;
    max-width: 100% !important;
  }
}