/* Libro de Calificaciones: ajuste visual final, sin alterar datos ni controles. */
@media screen {
  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones .grade-sheet-card {
    padding: clamp(8px, 1.2vw, 14px) !important;
    overflow: visible !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones .grade-sheet-heading {
    gap: 8px 14px !important;
    padding: 8px 0 10px !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones .grade-spreadsheet-help {
    margin: 0 0 8px !important;
    padding: 6px 9px !important;
    font-size: .76rem !important;
    line-height: 1.3 !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones .grade-table-wrap {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 8px !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet :is(th, td) {
    position: static !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    padding: 2px 3px !important;
    vertical-align: middle !important;
    font-size: clamp(10px, .82vw, 12px) !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-overflow: clip !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet :is(thead tr, tbody tr) {
    height: auto !important;
    min-height: 0 !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet tbody td {
    min-height: 0 !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet :is(th, td):first-child {
    width: 1% !important;
    min-width: 28px !important;
    padding-inline: 3px !important;
    white-space: nowrap !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet :is(th, td):nth-child(2) {
    width: auto !important;
    min-width: clamp(135px, 18vw, 220px) !important;
    max-width: 260px !important;
    padding-inline: 6px !important;
    text-align: left !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet :is(th, td):nth-child(n+3):not(:nth-last-child(-n+2)) {
    width: 34px !important;
    padding-inline: 2px !important;
    white-space: nowrap !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet :is(th, td):nth-last-child(2) {
    width: 1% !important;
    min-width: 58px !important;
    white-space: nowrap !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet :is(th, td):last-child {
    width: 1% !important;
    min-width: 88px !important;
    max-width: 170px !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet .student-cell {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet .grade-input {
    display: block !important;
    width: 4.2ch !important;
    min-width: 3.7ch !important;
    max-width: 4.2ch !important;
    height: 25px !important;
    min-height: 25px !important;
    margin-inline: auto !important;
    padding: 2px 1px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet select.grade-input {
    width: 4.8ch !important;
    min-width: 4.8ch !important;
    max-width: 4.8ch !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet .student-risk-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet .student-risk-badge {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 2px 5px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media screen and (min-width: 901px) and (max-width: 1250px) {
  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet .grade-input {
    width: 3.7ch !important;
    min-width: 3.7ch !important;
    max-width: 3.7ch !important;
    font-size: 11px !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet select.grade-input {
    width: 4.3ch !important;
    min-width: 4.3ch !important;
    max-width: 4.3ch !important;
  }
}

/* Escritorio: proporciones basadas en el contenido observado en el libro. */
@media screen and (min-width: 901px) {
  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones .grade-table-wrap {
    display: flex !important;
    justify-content: center !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet {
    width: 100% !important;
    max-width: 1040px !important;
    margin-inline: auto !important;
    table-layout: fixed !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet :is(th, td):nth-child(2) {
    width: 250px !important;
    min-width: 220px !important;
    max-width: 330px !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet :is(th, td):nth-last-child(2) {
    width: 70px !important;
    min-width: 70px !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet :is(th, td):last-child {
    width: 220px !important;
    min-width: 210px !important;
    max-width: 270px !important;
    padding-inline: 4px !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet .student-risk-badges {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    width: 100% !important;
    gap: 3px !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet .student-risk-badges > :only-child {
    grid-column: 1 / -1 !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet .student-risk-badge {
    display: inline-flex !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 20px !important;
    padding: 2px 4px !important;
    border-radius: 999px !important;
    font-size: 9.5px !important;
    line-height: 1.05 !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain#appMain #module-calificaciones #gradeSpreadsheet .repetition-risk-mark,
  html body.is-authenticated:not(.report-print-body) #appMain#appMain#appMain #module-calificaciones #gradeSpreadsheet .repetition-risk-mark > span {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 20px !important;
    padding: 2px 4px !important;
    gap: 3px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain#appMain #module-calificaciones #gradeSpreadsheet .repetition-risk-mark > span {
    min-height: 0 !important;
    padding: 0 !important;
  }

  /* La vista anual contiene el doble de columnas y usa todo el ancho disponible. */
  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet:has(thead th:nth-child(18)) {
    max-width: 100% !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet:has(thead th:nth-child(18)) :is(th, td):nth-child(2) {
    width: 190px !important;
    min-width: 160px !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet:has(thead th:nth-child(18)) :is(th, td):last-child {
    width: 220px !important;
    min-width: 190px !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet:has(thead th:nth-child(18)) :is(th, td):nth-child(n+3):not(:nth-last-child(-n+2)) {
    width: auto !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet:has(thead th:nth-child(18)) .grade-input,
  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet:has(thead th:nth-child(18)) select.grade-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 10px !important;
  }
}

/* Tablet y celular: cada estudiante se convierte en una ficha fluida. */
@media screen and (max-width: 900px) {
  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet,
  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet tbody {
    display: block !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet thead {
    display: none !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet tbody tr {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 6px !important;
    padding: 7px !important;
    overflow: visible !important;
    border-radius: 8px !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet tbody td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 12px !important;
    text-align: center !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet tbody td:first-child {
    grid-column: 1 !important;
    min-width: 0 !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet tbody td:nth-child(2) {
    grid-column: 2 / -1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: left !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet tbody td:nth-last-child(2) {
    grid-column: 1 / 3 !important;
    min-width: 0 !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet tbody td:nth-child(n+3):not(:nth-last-child(-n+2)) {
    width: auto !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet tbody td:last-child {
    grid-column: 3 / -1 !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet tbody td[data-label]::before {
    margin-bottom: 2px !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet .grade-input,
  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet select.grade-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 31px !important;
    min-height: 31px !important;
    font-size: 14px !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet .student-risk-badges {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
    gap: 3px !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain#appMain #module-calificaciones #gradeSpreadsheet .repetition-risk-mark,
  html body.is-authenticated:not(.report-print-body) #appMain#appMain#appMain #module-calificaciones #gradeSpreadsheet .repetition-risk-mark > span {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 3px 5px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain#appMain #module-calificaciones #gradeSpreadsheet .repetition-risk-mark > span {
    padding: 0 !important;
  }
}

@media screen and (max-width: 600px) {
  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones .grade-sheet-card {
    padding: 7px !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet tbody tr {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 6px !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet tbody td:nth-child(2),
  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet tbody td:last-child {
    grid-column: 2 / -1 !important;
  }

  html body.is-authenticated:not(.report-print-body) #appMain#appMain #module-calificaciones #gradeSpreadsheet tbody td:nth-last-child(2) {
    grid-column: 1 / 2 !important;
  }
}

@media print {
  #module-calificaciones #gradeSpreadsheet {
    width: 100% !important;
    table-layout: auto !important;
  }

  #module-calificaciones #gradeSpreadsheet :is(th, td) {
    height: auto !important;
    padding: 2px !important;
    font-size: 8pt !important;
    vertical-align: middle !important;
  }

  #module-calificaciones #gradeSpreadsheet .grade-input {
    width: 4ch !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 1px !important;
    text-align: center !important;
  }
}