.navItem,
.profileButton,
.iconButton {
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-weight: 900;
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--motion-quick),
    background var(--motion-quick),
    border-color var(--motion-quick),
    box-shadow var(--motion-quick),
    filter var(--motion-quick);
  will-change: transform;
}

.navItem:active,
.profileButton:active,
.iconButton:active,
.statsPrintButton:active {
  transform: translateY(1px) scale(0.985);
}

.navItem {
  min-height: 74px;
  padding: 8px 5px;
  display: grid;
  place-items: center;
  gap: 5px;
  background: transparent;
  color: var(--ink-soft);
  text-align: center;
}

.navItem svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.navItem span {
  font-size: 0.68rem;
}

.navItem:hover,
.navItem:focus-visible,
.navItem.active {
  color: var(--ink);
  background: rgba(76, 155, 255, 0.16);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.navItem.active {
  box-shadow: inset 0 3px 0 var(--brand);
}

.searchBox {
  position: relative;
  min-height: 42px;
  padding: 0 11px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  z-index: 18;
}

.searchBox:hover,
.searchBox:focus-within {
  border-color: var(--line);
  box-shadow: none;
}

.searchBox input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  box-shadow: var(--focus);
}

.searchBox svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
}

input,
select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink);
}

.searchBox input {
  width: 100%;
  min-height: 40px;
  border: 0;
  background: transparent;
}

.searchResultsPanel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 8px;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-strong);
  box-shadow: var(--shadow-lifted);
  backdrop-filter: blur(22px);
  transform-origin: top;
  animation: searchResultsEnter 240ms var(--motion-emphasis) both;
  z-index: 24;
}

.searchResultItem {
  min-height: 48px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  text-align: left;
  transition: transform var(--motion-quick), background var(--motion-quick), border-color var(--motion-quick);
}

.searchResultItem:hover,
.searchResultItem:focus-visible {
  border-color: var(--line-strong);
  background: rgba(76, 155, 255, 0.14);
  transform: translateY(-1px);
}

.searchResultIcon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(76, 155, 255, 0.16);
  color: #99c8ff;
  font-size: 0.78rem;
  font-weight: 900;
}

.searchResultIcon.aluno {
  background: rgba(61, 220, 151, 0.16);
  color: #92f1c8;
}

.searchResultIcon.turma {
  background: rgba(242, 184, 75, 0.16);
  color: #ffd991;
}

.searchResultIcon.disciplina {
  background: rgba(154, 137, 255, 0.17);
  color: #d5ceff;
}

.searchResultText strong,
.searchResultText small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.searchResultText strong {
  font-size: 0.84rem;
}

.searchResultText small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.68rem;
}

.searchResultsPanel .emptyState {
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 12px;
}

.searchResultsPanel .emptyState strong {
  font-size: 0.78rem;
}

.searchResultsPanel .emptyState span {
  font-size: 0.7rem;
}

select {
  padding: 7px 9px;
}

input[type="checkbox"] {
  width: 14px;
  height: 14px;
  min-height: 14px;
  padding: 0;
}

option {
  color: #10243e;
}

.themePicker {
  min-height: 42px;
  padding: 6px;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.profileThemePanel {
  padding: 8px 9px 10px;
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.profileThemePanel > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.profileThemePanel .themePicker {
  min-height: 34px;
  padding: 0;
  justify-content: flex-start;
  border: 0;
  background: transparent;
}

.themeDot {
  width: 24px;
  height: 24px;
  border: 2px solid transparent;
  border-radius: 999px;
}

.themeDot.active {
  border-color: var(--ink);
}

.themeAurora {
  background: linear-gradient(135deg, #1d6ef2 0 52%, #e3263a 52% 100%);
}

.themeClaro {
  background: linear-gradient(135deg, #ffffff 0 48%, #98d0ff 48% 100%);
}

.themeMono {
  background: linear-gradient(135deg, #050609 0 48%, #7b8492 48% 100%);
}

.profileBox {
  position: relative;
}

.profileButton {
  width: 100%;
  height: 42px;
  min-height: 42px;
  padding: 4px 7px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink);
  text-align: left;
}

.profileButton:hover,
.profileButton:focus-visible,
.iconButton:hover,
.iconButton:focus-visible {
  border-color: var(--line-strong);
  background: rgba(76, 155, 255, 0.12);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.profileAvatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--school-red), var(--brand-strong));
  color: #fff;
  font-size: 0.76rem;
}

.profileButton strong,
.profileButton small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profileButton small {
  color: var(--muted);
  font-size: 0.68rem;
}

.profileMenu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 210px;
  padding: 9px;
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 42%),
    var(--surface-strong);
  box-shadow: var(--shadow-lifted);
  backdrop-filter: blur(22px);
  transform-origin: top right;
  animation: profileMenuEnter 240ms var(--motion-emphasis) both;
  z-index: 20;
}

.profileMenu a,
.profileMenu button {
  min-height: 34px;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  transition: transform var(--motion-quick), background var(--motion-quick), color var(--motion-quick);
}

.profileMenu a:hover,
.profileMenu a:focus-visible,
.profileMenu button:hover,
.profileMenu button:focus-visible {
  background: var(--surface-soft);
  transform: translateX(2px);
}

.profileThemePanel .themeDot {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 7px 14px rgba(0, 0, 0, 0.18);
}

.profileThemePanel .themeDot:hover,
.profileThemePanel .themeDot:focus-visible {
  transform: translateY(-1px) scale(1.04);
}

.profileThemePanel .themeDot.active {
  border-color: var(--ink);
}

.profileThemePanel .themeDot.themeAurora {
  background: linear-gradient(135deg, #1d6ef2 0 52%, #e3263a 52% 100%);
}

.profileThemePanel .themeDot.themeClaro {
  background: linear-gradient(135deg, #ffffff 0 48%, #98d0ff 48% 100%);
}

.profileThemePanel .themeDot.themeMono {
  background: linear-gradient(135deg, #050609 0 48%, #7b8492 48% 100%);
}

.systemTitle {
  display: flex;
  gap: 12px;
  align-items: center;
}

.topBrandLogo {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

body[data-view="notas"] .notesStatsSection .systemTitle {
  gap: 0;
}

body[data-view="notas"] .notesStatsSection .topBrandLogo {
  display: none;
}

body[data-view="notas"] .notesStatsSection .systemTitle h1 {
  color: var(--stats-ink, var(--ink));
  font-size: clamp(1rem, 1.7vw, 1.28rem);
  font-weight: 900;
  text-transform: uppercase;
}

body[data-view="notas"] .notesStatsSection .systemTitle p:last-child {
  max-width: 760px;
  color: var(--stats-muted, var(--ink-soft));
  font-size: 0.86rem;
  line-height: 1.35;
}

.iconButton {
  width: 38px;
  min-height: 38px;
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink);
}

.statusDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--warn);
}

.panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
  transform: translate3d(0, 0, 0);
  transition: transform var(--motion-smooth), box-shadow var(--motion-smooth), border-color var(--motion-smooth), background var(--motion-smooth);
}

.panelWide {
  min-width: 0;
}

.appFatalError {
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 79, 100, 0.48);
  border-radius: 14px;
  background: rgba(141, 20, 37, 0.22);
  color: var(--ink);
  font-weight: 800;
}

.panelHeader {
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.panelHeader h3 {
  margin-bottom: 0;
  font-size: 1.02rem;
}

.panelHint {
  max-width: 330px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
  text-align: right;
}

.rankingItem,
.classResultCard,
.emptyState {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  transform: translate3d(0, 0, 0);
  transition: transform var(--motion-smooth), box-shadow var(--motion-smooth), border-color var(--motion-smooth), background var(--motion-smooth);
}

.rankingItem:hover,
.classResultCard:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.movementChart {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(rgba(255, 255, 255, 0.065) 1px, transparent 1px) 0 0 / 100% 25%,
    var(--surface-muted);
}

.movementBars {
  min-height: 330px;
  padding: 24px 20px 10px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
}

.movementBar {
  min-width: 0;
  min-height: 260px;
  padding: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.movementBar:hover .barPair {
  transform: translateY(-3px);
}

.barPair {
  height: 220px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 3px;
  transition: transform 0.18s ease;
}

.barPair i {
  width: 17px;
  height: var(--bar-height);
  min-height: 0;
  position: relative;
  border-radius: 5px 5px 2px 2px;
}

.barPair i::before {
  content: attr(data-value);
  position: absolute;
  left: 50%;
  top: -22px;
  transform: translateX(-50%);
  min-width: 20px;
  padding: 2px 4px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--ink);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.barBlue {
  background: linear-gradient(180deg, #65a9ff, var(--brand-strong));
}

.barRed {
  background: linear-gradient(180deg, #ff7786, #c9142b);
}

.barLabel {
  min-height: 54px;
  display: grid;
  align-content: start;
  gap: 2px;
  text-align: center;
}

.barLabel strong,
.barLabel small {
  display: block;
}

.barLabel strong {
  font-size: 0.8rem;
}

.barLabel small {
  color: var(--muted);
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1.08;
  text-transform: uppercase;
}

.donutMeter,
.smallDonut {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--surface-strong) 0 50%, transparent 51%),
    conic-gradient(var(--brand-strong) 0 var(--percent), var(--error) var(--percent) 100%);
}

.donutMeter {
  width: min(260px, 76vw);
  margin: 0 auto 12px;
}

.donutMeter strong,
.donutMeter span {
  grid-area: 1 / 1;
}

.donutMeter strong {
  transform: translateY(-9px);
  font-size: 2rem;
}

.donutMeter span {
  width: 92px;
  transform: translateY(24px);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.chip {
  min-height: 24px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(76, 155, 255, 0.15);
  color: #badcff;
  font-size: 0.72rem;
  font-weight: 900;
}

.chip.ok {
  background: rgba(61, 220, 151, 0.15);
  color: #9df1ca;
}

.chip.warn {
  background: rgba(242, 184, 75, 0.16);
  color: #ffd990;
}

.chip.error {
  background: rgba(255, 79, 100, 0.16);
  color: #ffadb7;
}

.chip.violet {
  background: rgba(154, 137, 255, 0.17);
  color: #d5ceff;
}

.chip.mutedChip {
  background: rgba(255, 255, 255, 0.10);
  color: var(--ink-soft);
}

.rankingList {
  display: grid;
  gap: 8px;
}

.rankingItem {
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}

.rankingItem strong,
.rankingItem small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rankingItem small {
  color: var(--muted);
  font-size: 0.72rem;
}

.studentPhotoAvatar {
  position: relative;
  width: 34px;
  height: 34px;
  display: block;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 38%, hsl(var(--avatar-hue) 54% 82%) 0 19%, transparent 20%),
    radial-gradient(circle at 50% 84%, hsl(calc(var(--avatar-hue) + 22) 54% 48%) 0 32%, transparent 33%),
    linear-gradient(145deg, hsl(var(--avatar-hue) 58% 34%), hsl(calc(var(--avatar-hue) + 44) 64% 52%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 8px 18px rgba(0, 0, 0, 0.18);
}

.studentPhotoAvatar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: hsl(var(--avatar-hue) 45% 86%);
  transform: translateX(-50%);
}

.studentPhotoAvatar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 22px;
  height: 13px;
  border-radius: 999px 999px 6px 6px;
  background: hsl(calc(var(--avatar-hue) + 35) 58% 42%);
  transform: translateX(-50%);
}

.studentPhotoAvatar.gold {
  border-color: #ffd34f;
}

.studentPhotoAvatar.silver {
  border-color: #d9e1eb;
}

.studentPhotoAvatar.bronze {
  border-color: #d88a55;
}

.studentAlertName {
  color: #ff8f9a;
}

.classResultCard {
  padding: 10px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.smallDonut strong {
  font-size: 0.82rem;
}

.classResultCard strong,
.classResultCard span {
  display: block;
}

.classResultCard span {
  color: var(--muted);
  font-size: 0.75rem;
}

.statusFilters label {
  min-height: 30px;
  padding: 5px 8px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 900;
}

.statusFilters input {
  accent-color: var(--brand-strong);
}

.notesBoard {
  overflow: visible;
}

.notesTableWrap {
  overflow: visible;
}

.notesTable {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: clamp(0.56rem, 0.70vw, 0.78rem);
}

.notesTable th:nth-child(1),
.notesTable td:nth-child(1) {
  width: 4%;
}

.notesTable th:nth-child(2),
.notesTable td:nth-child(2) {
  width: 18%;
}

.notesTable th:nth-child(3),
.notesTable td:nth-child(3) {
  width: 4.5%;
}

.notesTable th:nth-last-child(1),
.notesTable td:nth-last-child(1) {
  width: 7%;
}

.notesTable th,
.notesTable td {
  padding: 5px 3px;
  border: 1px solid rgba(176, 210, 246, 0.18);
  color: var(--ink);
  text-align: center;
  vertical-align: middle;
}

.notesTable th {
  background: rgba(76, 155, 255, 0.15);
  color: var(--ink-soft);
  font-size: 0.64rem;
  text-transform: uppercase;
}

.notesTable tbody tr:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.035);
}

.notesTable tbody tr:hover td {
  background: rgba(76, 155, 255, 0.10);
}

.notesIndex {
  width: 28px;
}

.notesNameCell {
  position: relative;
  text-align: left !important;
}

.studentNameButton {
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 900;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scoreCell,
.profileNotesTable td {
  font-variant-numeric: tabular-nums;
}

.scoreLow {
  background: #d51f35 !important;
  color: #fff !important;
  font-weight: 900;
}

.resultCell {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.6rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emptyTableCell {
  height: 80px;
  color: var(--muted) !important;
  text-align: center !important;
}

.studentPeek {
  position: absolute;
  left: calc(100% + 7px);
  top: -8px;
  width: 255px;
  padding: 9px;
  display: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
  z-index: 25;
}

.notesNameCell:hover .studentPeek,
.studentNameButton:focus + .studentPeek {
  display: grid;
  gap: 8px;
}

.emptyState {
  padding: 9px;
  display: grid;
  gap: 6px;
}

.emptyState strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emptyState span {
  color: var(--muted);
  font-size: 0.74rem;
}

.progressTrack {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
}

.progressTrack span {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: var(--ok);
}

.progressTrack span.error {
  background: var(--error);
}

body[data-view="notas"] {
  --notes-bg: linear-gradient(150deg, rgba(10, 38, 74, 0.96) 0%, rgba(5, 21, 47, 0.98) 46%, rgba(7, 31, 67, 0.96) 100%);
  --notes-panel: linear-gradient(145deg, rgba(18, 54, 98, 0.80), rgba(8, 30, 62, 0.68));
  --notes-panel-line: rgba(122, 166, 225, 0.24);
  --notes-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 22px 58px rgba(0, 0, 0, 0.18);
  --notes-select-menu: linear-gradient(145deg, rgba(23, 64, 112, 0.985), rgba(7, 24, 50, 0.985));
  --notes-select-menu-line: rgba(128, 177, 244, 0.30);
  --notes-select-menu-shadow: 0 28px 78px rgba(0, 0, 0, 0.42);
  --notes-select-option-bg: rgba(255, 255, 255, 0.035);
  --notes-select-option-ink: #f6fbff;
  --notes-select-option-muted: rgba(205, 221, 244, 0.72);
  --notes-select-option-hover: rgba(76, 155, 255, 0.16);
  --notes-select-option-active: linear-gradient(135deg, rgba(76, 155, 255, 0.28), rgba(61, 220, 151, 0.08)), rgba(255, 255, 255, 0.05);
  --notes-ink: #f8fbff;
  --notes-muted: rgba(211, 225, 246, 0.76);
  --notes-soft: rgba(226, 238, 255, 0.88);
  --notes-table-bg: linear-gradient(180deg, rgba(12, 47, 91, 0.70), rgba(5, 23, 52, 0.72));
  --notes-table-line: rgba(126, 177, 255, 0.16);
  --notes-head-bg: rgba(37, 94, 167, 0.35);
  --notes-row-bg: rgba(255, 255, 255, 0.035);
  --notes-row-alt: rgba(255, 255, 255, 0.048);
  --notes-row-hover: rgba(76, 155, 255, 0.105);
  --notes-column-hover: rgba(127, 188, 255, 0.065);
  --notes-note-chip-bg: rgba(76, 155, 255, 0.16);
  --notes-note-chip-ink: #b9dcff;
  --notes-score-bg: rgba(255, 255, 255, 0.075);
  --notes-filter-bg: linear-gradient(180deg, #f8fbff 0%, #e8f2ff 100%);
  --notes-filter-label: #eef6ff;
  --notes-filter-label-active: #dceeff;
  --notes-filter-label-hover: #e3f1ff;
  --notes-filter-ink: #09223e;
  --notes-filter-line: rgba(101, 146, 197, 0.24);
  --notes-peek-bg: #031126;
  --notes-peek-ink: #ffffff;
  --notes-peek-muted: #b9d5f8;
  --notes-side-item: rgba(255, 255, 255, 0.035);
  background:
    var(--notes-bg),
    #061631;
}

body[data-theme="claro"][data-view="notas"] {
  --notes-bg: linear-gradient(150deg, rgba(244, 249, 255, 0.98) 0%, rgba(225, 240, 255, 0.96) 52%, rgba(240, 247, 255, 0.98) 100%);
  --notes-panel: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(226, 242, 255, 0.78));
  --notes-panel-line: rgba(49, 105, 168, 0.18);
  --notes-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 22px 58px rgba(33, 88, 150, 0.12);
  --notes-select-menu: linear-gradient(145deg, rgba(255, 255, 255, 0.992), rgba(229, 243, 255, 0.992));
  --notes-select-menu-line: rgba(48, 105, 168, 0.24);
  --notes-select-menu-shadow: 0 26px 70px rgba(44, 89, 138, 0.20);
  --notes-select-option-bg: rgba(18, 105, 211, 0.055);
  --notes-select-option-ink: #10243e;
  --notes-select-option-muted: rgba(53, 81, 111, 0.70);
  --notes-select-option-hover: rgba(18, 105, 211, 0.13);
  --notes-select-option-active: rgba(18, 105, 211, 0.13);
  --notes-ink: #10243e;
  --notes-muted: rgba(53, 81, 111, 0.78);
  --notes-soft: rgba(37, 67, 102, 0.88);
  --notes-table-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(225, 240, 255, 0.76));
  --notes-table-line: rgba(49, 105, 168, 0.16);
  --notes-head-bg: rgba(18, 105, 211, 0.13);
  --notes-row-bg: rgba(18, 105, 211, 0.028);
  --notes-row-alt: rgba(18, 105, 211, 0.055);
  --notes-row-hover: rgba(18, 105, 211, 0.115);
  --notes-column-hover: rgba(18, 105, 211, 0.075);
  --notes-note-chip-bg: rgba(18, 105, 211, 0.12);
  --notes-note-chip-ink: #0f4f9f;
  --notes-score-bg: rgba(18, 75, 145, 0.105);
  --notes-filter-bg: linear-gradient(180deg, #ffffff 0%, #eaf4ff 100%);
  --notes-filter-label: #f3f9ff;
  --notes-filter-label-active: #d7ebff;
  --notes-filter-label-hover: #e4f2ff;
  --notes-filter-ink: #0f2744;
  --notes-filter-line: rgba(49, 105, 168, 0.22);
  --notes-peek-bg: #ffffff;
  --notes-peek-ink: #10243e;
  --notes-peek-muted: #526d8b;
  --notes-side-item: rgba(18, 105, 211, 0.055);
}

body[data-theme="mono"][data-view="notas"] {
  --notes-bg: linear-gradient(150deg, rgba(9, 10, 14, 0.98) 0%, rgba(18, 19, 25, 0.98) 50%, rgba(8, 9, 13, 0.98) 100%);
  --notes-panel: linear-gradient(145deg, rgba(42, 44, 52, 0.88), rgba(13, 14, 19, 0.78));
  --notes-panel-line: rgba(255, 255, 255, 0.18);
  --notes-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 64px rgba(0, 0, 0, 0.30);
  --notes-select-menu: linear-gradient(145deg, rgba(42, 44, 52, 0.992), rgba(10, 11, 15, 0.992));
  --notes-select-menu-line: rgba(255, 255, 255, 0.22);
  --notes-select-menu-shadow: 0 30px 78px rgba(0, 0, 0, 0.46);
  --notes-select-option-bg: rgba(255, 255, 255, 0.040);
  --notes-select-option-ink: #f7f8fb;
  --notes-select-option-muted: rgba(216, 220, 228, 0.72);
  --notes-select-option-hover: rgba(255, 255, 255, 0.105);
  --notes-select-option-active: rgba(255, 255, 255, 0.125);
  --notes-ink: #f7f8fb;
  --notes-muted: rgba(216, 220, 228, 0.74);
  --notes-soft: rgba(231, 234, 240, 0.86);
  --notes-table-bg: linear-gradient(180deg, rgba(32, 34, 41, 0.78), rgba(13, 14, 19, 0.78));
  --notes-table-line: rgba(255, 255, 255, 0.14);
  --notes-head-bg: rgba(255, 255, 255, 0.105);
  --notes-row-bg: rgba(255, 255, 255, 0.032);
  --notes-row-alt: rgba(255, 255, 255, 0.060);
  --notes-row-hover: rgba(255, 255, 255, 0.105);
  --notes-column-hover: rgba(255, 255, 255, 0.070);
  --notes-note-chip-bg: rgba(255, 255, 255, 0.115);
  --notes-note-chip-ink: #f2f4f8;
  --notes-score-bg: rgba(255, 255, 255, 0.085);
  --notes-filter-bg: linear-gradient(180deg, #2b2d35 0%, #16171d 100%);
  --notes-filter-label: #22242b;
  --notes-filter-label-active: #3a3d47;
  --notes-filter-label-hover: #333641;
  --notes-filter-ink: #f7f8fb;
  --notes-filter-line: rgba(255, 255, 255, 0.20);
  --notes-peek-bg: #08090d;
  --notes-peek-ink: #ffffff;
  --notes-peek-muted: #c5cad4;
  --notes-side-item: rgba(255, 255, 255, 0.055);
}

body[data-theme="claro"][data-view="notas"] .notesPrintButton {
  border-color: rgba(18, 105, 211, 0.34);
  background: linear-gradient(135deg, #1269d3 0%, #005ab8 100%);
  color: #ffffff;
}

body[data-theme="mono"][data-view="notas"] .notesPrintButton {
  border-color: rgba(255, 255, 255, 0.28);
  background: linear-gradient(135deg, #f3f5f8, #9aa2b1);
  color: #090a0e;
}

body[data-view="notas"] .notesSelectCard,
body[data-view="notas"] .notesBoardModern,
body[data-view="notas"] .notesSidePanel,
body[data-view="notas"] .notesPrintButton {
  border: 1px solid var(--notes-panel-line);
  border-radius: 22px;
  background: var(--notes-panel);
  box-shadow: var(--notes-panel-shadow);
}

body[data-view="notas"] .notesSelectCard,
body[data-view="notas"] .notesBoardModern,
body[data-view="notas"] .notesSidePanel,
body[data-view="notas"] .notesPrintButton {
  animation: notesRiseIn 560ms var(--motion-emphasis) both;
}

body[data-view="notas"] .notesSelectCard {
  position: relative;
  min-height: 82px;
  padding: 0;
  overflow: visible;
  transform: perspective(900px) rotateX(0deg) translate3d(0, 0, 0);
  transition: transform var(--motion-smooth), box-shadow var(--motion-smooth), border-color var(--motion-smooth);
  z-index: 4;
}

body[data-view="notas"] .notesSelectCard:hover,
body[data-view="notas"] .notesSelectCard:focus-within {
  border-color: rgba(126, 177, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--shadow-lifted);
  transform: perspective(900px) rotateX(1.5deg) translateY(-2px);
}

body[data-view="notas"] .notesSelectCard.is-open {
  border-color: rgba(126, 177, 255, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 34px 90px rgba(0, 0, 0, 0.34);
  z-index: 30;
}

body[data-view="notas"] .statsSelectNative {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

body[data-view="notas"] .statsSelectButton {
  position: relative;
  width: 100%;
  min-height: 82px;
  padding: 17px 56px 14px 20px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 0;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.10), transparent 45%),
    transparent;
  color: var(--notes-ink);
  text-align: left;
  overflow: hidden;
}

body[data-view="notas"] .statsSelectButton .movementIcon {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  padding: 5px;
  border: 1px solid rgba(126, 177, 255, 0.24);
  border-radius: 12px;
  background: rgba(76, 155, 255, 0.12);
  color: #8fc1ff;
  filter: none;
}

body[data-view="notas"] .statsSelectText {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  gap: 7px;
}

body[data-view="notas"] .statsSelectButton strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--notes-ink);
  font-size: 1.34rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

body[data-view="notas"] .statsSelectCaption {
  color: var(--notes-muted);
  font-size: 0.86rem;
}

body[data-view="notas"] .statsSelectChevron {
  position: absolute;
  right: 25px;
  top: 34px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #f5f8ff;
  border-bottom: 2px solid #f5f8ff;
  transform: rotate(45deg);
  transition: transform var(--motion-smooth), top var(--motion-smooth);
  z-index: 1;
}

body[data-view="notas"] .notesSelectCard.is-open .statsSelectChevron {
  top: 38px;
  transform: rotate(225deg);
}

body[data-view="notas"] .statsSelectGlow {
  position: absolute;
  right: -32px;
  top: -42px;
  width: 130px;
  height: 130px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(76, 155, 255, 0.26), transparent 66%);
  opacity: 0;
  transform: scale(0.82);
  transition: opacity var(--motion-smooth), transform var(--motion-smooth);
}

body[data-view="notas"] .notesSelectCard:hover .statsSelectGlow,
body[data-view="notas"] .notesSelectCard.is-open .statsSelectGlow {
  opacity: 1;
  transform: scale(1);
}

body[data-view="notas"] .movementIcon {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

body[data-view="notas"] .movementIcon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.95;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-view="notas"] .statsSelectMenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  padding: 8px;
  max-height: min(312px, calc(100vh - 160px));
  display: grid;
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--notes-select-menu-line);
  border-radius: 14px;
  background: var(--notes-select-menu);
  box-shadow: var(--notes-select-menu-shadow);
  backdrop-filter: blur(22px);
  transform-origin: top;
  animation: selectMenuEnter 260ms var(--motion-emphasis) both;
  z-index: 30;
}

body[data-view="notas"] .statsSelectOption {
  position: relative;
  min-height: 48px;
  padding: 9px 34px 9px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(86px, auto);
  gap: 10px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--notes-select-option-bg);
  color: var(--notes-select-option-ink);
  text-align: left;
  animation: selectOptionEnter 240ms var(--motion-emphasis) both;
  animation-delay: calc(var(--option-index) * 28ms);
  transition: transform var(--motion-quick), background var(--motion-quick), border-color var(--motion-quick), box-shadow var(--motion-quick);
}

body[data-view="notas"] .statsSelectOption strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.86rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

body[data-view="notas"] .statsSelectOption span {
  min-width: 0;
  justify-self: end;
  overflow: hidden;
  color: var(--notes-select-option-muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

body[data-view="notas"] .statsSelectOption:hover,
body[data-view="notas"] .statsSelectOption:focus-visible {
  border-color: rgba(126, 177, 255, 0.40);
  background: var(--notes-select-option-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateX(3px);
}

body[data-view="notas"] .statsSelectOption.active {
  border-color: rgba(76, 155, 255, 0.62);
  background: var(--notes-select-option-active);
}

body[data-view="notas"] .statsSelectOption.active::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 14px;
  border-right: 2px solid #7eb1ff;
  border-bottom: 2px solid #7eb1ff;
  transform: translateY(-58%) rotate(45deg);
}

body[data-view="notas"] .notesPrintButton {
  min-height: 70px;
  padding: 0 24px;
  display: flex;
  gap: 13px;
  align-items: center;
  justify-content: center;
  border-color: rgba(82, 142, 252, 0.52);
  background: linear-gradient(135deg, #236bff 0%, #1657d4 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  white-space: nowrap;
  transition: transform var(--motion-smooth), box-shadow var(--motion-smooth), filter var(--motion-smooth);
}

body[data-view="notas"] .notesPrintButton:hover,
body[data-view="notas"] .notesPrintButton:focus-visible {
  box-shadow: 0 22px 55px rgba(35, 107, 255, 0.36);
  filter: saturate(1.12);
  transform: translateY(-2px) scale(1.01);
}

body[data-view="notas"] .notesPrintButton svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-view="notas"] .notesBoardModern {
  position: relative;
  overflow: visible;
}

body[data-view="notas"] .notesSidePanel {
  position: relative;
  overflow: hidden;
}

body[data-view="notas"] .notesStatsSection {
  margin-top: 16px;
  padding-top: 2px;
}

body[data-view="notas"] .notesBoardModern::before,
body[data-view="notas"] .notesSidePanel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 30%, rgba(255, 255, 255, 0.055) 44%, transparent 60% 100%);
  background-size: 220% 100%;
  opacity: 0.52;
  animation: panelLightSweep 10s var(--motion-standard) infinite;
}

body[data-view="notas"] .notesBoardModern > *,
body[data-view="notas"] .notesSidePanel > * {
  position: relative;
  z-index: 1;
}

body[data-view="notas"] .notesBoardHeader {
  gap: 14px;
  align-items: start;
}

body[data-view="notas"] .notesBoardHeader h2 {
  margin-bottom: 4px;
  color: var(--notes-ink);
  font-size: 1.3rem;
  line-height: 1.08;
  text-transform: uppercase;
}

body[data-view="notas"] .notesBoardHeader p:last-child {
  margin-bottom: 0;
  color: var(--notes-muted);
  font-size: 0.86rem;
}

body[data-view="notas"] .notesFilterMenu {
  position: relative;
  justify-self: end;
  z-index: 420;
}

body[data-view="notas"] .notesFilterButton {
  min-height: 36px;
  padding: 0 12px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(126, 177, 255, 0.24);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--notes-ink);
  font-weight: 900;
  transition: transform var(--motion-quick), border-color var(--motion-quick), background var(--motion-quick), box-shadow var(--motion-quick);
}

body[data-view="notas"] .notesFilterButton:hover,
body[data-view="notas"] .notesFilterButton:focus-visible,
body[data-view="notas"] .notesFilterButton[aria-expanded="true"] {
  border-color: rgba(126, 177, 255, 0.52);
  background: rgba(76, 155, 255, 0.15);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.20);
  transform: translateY(-1px);
}

body[data-view="notas"] .notesFilterButton svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
}

body[data-view="notas"] .notesFilterPopover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(306px, calc(100vw - 42px));
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid var(--notes-filter-line);
  border-radius: 14px;
  background: var(--notes-filter-bg);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.78) inset;
  backdrop-filter: none;
  isolation: isolate;
  transform-origin: top right;
  animation: selectMenuEnter 240ms var(--motion-emphasis) both;
  z-index: 430;
}

body[data-view="notas"] .notesFilterPopover label {
  min-height: 30px;
  padding: 5px 7px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid var(--notes-filter-line);
  border-radius: 10px;
  background: var(--notes-filter-label);
  color: var(--notes-filter-ink);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--motion-quick), background var(--motion-quick), border-color var(--motion-quick), box-shadow var(--motion-quick), color var(--motion-quick);
}

body[data-view="notas"] .notesFilterPopover input {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  appearance: none;
  border: 1px solid rgba(160, 205, 255, 0.58);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.28);
}

body[data-view="notas"] .notesFilterPopover input:checked {
  border-color: rgba(125, 194, 255, 0.92);
  background:
    linear-gradient(135deg, transparent 0 38%, #ffffff 39% 48%, transparent 49%),
    linear-gradient(45deg, transparent 0 43%, #ffffff 44% 53%, transparent 54%),
    linear-gradient(180deg, #49a4ff, #2477de);
  box-shadow: 0 0 16px rgba(73, 164, 255, 0.28);
}

body[data-view="notas"] .notesFilterPopover span {
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-view="notas"] .notesFilterPopover label:has(input:checked) {
  border-color: rgba(44, 120, 220, 0.42);
  background: var(--notes-filter-label-active);
  color: var(--notes-filter-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80), 0 12px 24px rgba(31, 92, 168, 0.14);
}

body[data-view="notas"] .notesFilterPopover label:hover {
  border-color: rgba(44, 120, 220, 0.44);
  background: var(--notes-filter-label-hover);
  transform: translateY(-1px);
}

body[data-view="notas"] .notesTableMeta {
  margin: 5px 0 8px;
  position: relative;
  z-index: 400;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  color: var(--notes-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

body[data-view="notas"] .notesTableAnnotations {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

body[data-view="notas"] .notesTableAnnotations span:first-child {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--notes-note-chip-bg);
  color: var(--notes-note-chip-ink);
  font-weight: 900;
  text-transform: uppercase;
}

body[data-view="notas"] .notesTableWrap {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow: visible;
  border: 1px solid var(--notes-table-line);
  border-radius: 16px;
  background: var(--notes-table-bg);
}

body[data-view="notas"] .tableScrollHint {
  display: none;
  margin: 0 0 8px;
  color: var(--notes-muted);
  font-size: 0.76rem;
}

body[data-view="notas"] .notesTable {
  border-collapse: separate;
  border-spacing: 0 2px;
  table-layout: fixed;
  font-size: clamp(0.64rem, 0.64vw, 0.76rem);
}

body[data-view="notas"] .notesTable th:nth-child(1),
body[data-view="notas"] .notesTable td:nth-child(1) {
  width: 4%;
}

body[data-view="notas"] .notesTable th:nth-child(2),
body[data-view="notas"] .notesTable td:nth-child(2) {
  width: 11%;
}

body[data-view="notas"] .notesTable th:nth-child(3),
body[data-view="notas"] .notesTable td:nth-child(3) {
  width: 23%;
}

body[data-view="notas"] .notesTable th:nth-last-child(1),
body[data-view="notas"] .notesTable td:nth-last-child(1) {
  width: 18%;
}

body[data-view="notas"] .notesTable th,
body[data-view="notas"] .notesTable td {
  border: 0;
  background: var(--notes-row-bg);
  color: var(--notes-soft);
  transition: background 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

body[data-view="notas"] .notesTable th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 6px 4px;
  background: var(--notes-head-bg);
  color: var(--notes-ink);
  font-size: 0.68rem;
  box-shadow: inset 0 -1px 0 rgba(126, 177, 255, 0.18);
}

body[data-view="notas"] .notesTable td {
  padding: 2px 4px;
}

body[data-view="notas"] .notesTable td:first-child,
body[data-view="notas"] .notesTable th:first-child {
  border-radius: 11px 0 0 11px;
}

body[data-view="notas"] .notesTable td:last-child,
body[data-view="notas"] .notesTable th:last-child {
  border-radius: 0 11px 11px 0;
}

body[data-view="notas"] .notesTable tbody tr:nth-child(odd) td {
  background: var(--notes-row-alt);
}

body[data-view="notas"] .notesTable tbody tr:hover td {
  background: var(--notes-row-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

body[data-view="notas"] .notesTable tbody tr:hover,
body[data-view="notas"] .notesTable tbody tr:focus-within {
  position: relative;
  z-index: 120;
}

body[data-view="notas"] .notesTable th.is-column-hover,
body[data-view="notas"] .notesTable td.is-column-hover {
  background: var(--notes-column-hover);
  box-shadow: inset 0 0 0 1px rgba(126, 177, 255, 0.035);
}

body[data-view="notas"] .notesIndex {
  color: var(--notes-ink);
  font-size: 0.86rem;
  font-weight: 900;
}

body[data-view="notas"] .notesStatusCell,
body[data-view="notas"] .resultCell,
body[data-view="notas"] .scoreCell {
  overflow: hidden;
}

body[data-view="notas"] .statusPill,
body[data-view="notas"] .scorePill,
body[data-view="notas"] .notesResultPill {
  min-height: 20px;
  padding: 2px 6px;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  color: #f8fbff;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
  transition: transform var(--motion-quick), filter var(--motion-quick), box-shadow var(--motion-quick);
}

body[data-view="notas"] .statusPill {
  white-space: nowrap;
}

body[data-view="notas"] .notesResultPill {
  min-height: 24px;
  padding-right: 5px;
  padding-left: 5px;
  font-size: 0.60rem;
}

body[data-view="notas"] .statusPill:hover,
body[data-view="notas"] .scorePill:hover,
body[data-view="notas"] .notesResultPill:hover {
  filter: saturate(1.14);
  transform: translateY(-1px);
}

body[data-view="notas"] .statusPill.ok,
body[data-view="notas"] .notesResultPill.ok {
  background: linear-gradient(180deg, #0f6d47, #084d32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 8px 18px rgba(8, 111, 73, 0.22);
}

body[data-view="notas"] .statusPill.warn,
body[data-view="notas"] .notesResultPill.warn {
  background: linear-gradient(180deg, #a35d18, #7d4310);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px rgba(199, 121, 42, 0.20);
}

body[data-view="notas"] .statusPill.error,
body[data-view="notas"] .notesResultPill.error,
body[data-view="notas"] .scorePill.scoreLow {
  background: linear-gradient(180deg, #c51f35, #8d1425);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 8px 18px rgba(197, 31, 53, 0.24);
}

body[data-view="notas"] .statusPill.info,
body[data-view="notas"] .notesResultPill.info {
  background: linear-gradient(180deg, #0c6870, #084b50);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 8px 18px rgba(12, 104, 112, 0.22);
}

body[data-view="notas"] .statusPill.violet,
body[data-view="notas"] .notesResultPill.violet {
  background: linear-gradient(180deg, #5544ba, #3f328d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 8px 18px rgba(85, 68, 186, 0.22);
}

body[data-view="notas"] .statusPill.mutedChip {
  background: linear-gradient(180deg, #c9732f, #a6531d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px rgba(166, 83, 29, 0.20);
}

body[data-view="notas"] .scorePill {
  background: var(--notes-score-bg);
  color: var(--notes-soft);
  font-variant-numeric: tabular-nums;
}

body[data-view="notas"] .scorePill.scoreMissing {
  border: 1px dashed var(--notes-table-line);
  background: transparent;
  color: var(--notes-muted);
  box-shadow: none;
}

body[data-view="notas"] .notesNameCell {
  position: relative;
  z-index: 3;
  overflow: visible;
}

body[data-view="notas"] .notesNameCell:hover,
body[data-view="notas"] .notesNameCell:focus-within {
  z-index: 500;
}

body[data-view="notas"] .studentNameButton {
  min-height: 24px;
  padding: 2px 0;
  color: var(--notes-ink);
  font-size: 0.82rem;
  line-height: 1.12;
  overflow: visible;
  text-overflow: clip;
  text-transform: uppercase;
  white-space: normal;
}

body[data-view="notas"] .attentionStudent {
  width: 100%;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}

body[data-view="notas"] .studentNameButton:hover,
body[data-view="notas"] .studentNameButton:focus-visible {
  color: #8fc1ff;
}

body[data-view="notas"] .studentPeek {
  left: calc(100% + 10px);
  top: 50%;
  width: 132px;
  min-height: 150px;
  padding: 12px;
  display: none;
  place-items: center;
  border-color: rgba(126, 177, 255, 0.68);
  border-radius: 24px;
  background: var(--notes-peek-bg);
  color: var(--notes-peek-ink);
  box-shadow: 0 34px 92px rgba(0, 0, 0, 0.76), 0 0 0 1px rgba(255, 255, 255, 0.065) inset;
  backdrop-filter: none;
  animation: selectMenuEnter 220ms var(--motion-emphasis) both;
  pointer-events: none;
  transform: translateY(-50%);
  z-index: 520;
}

body[data-view="notas"] .notesNameCell:hover .studentPeek,
body[data-view="notas"] .studentNameButton:focus + .studentPeek {
  display: grid;
}

body[data-view="notas"] .studentPeekPhoto {
  width: 108px;
  height: 126px;
  border-radius: 20px;
}

body[data-view="notas"] .profilePhoto {
  width: 94px;
  height: 110px;
  border-radius: 22px;
}

body[data-view="notas"] .notesSidePanel {
  padding: 18px;
  display: grid;
  gap: 12px;
  animation-delay: 170ms;
}

body[data-view="notas"] .notesInsightsTitle h3 {
  margin-bottom: 0;
  color: var(--notes-ink);
  font-size: 1.08rem;
  line-height: 1.05;
  text-transform: none;
}

body[data-view="notas"] .notesInsightBlock {
  padding: 13px;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(126, 177, 255, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 48%),
    var(--notes-side-item);
}

body[data-view="notas"] .notesInsightHeader {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) minmax(32px, auto);
  gap: 8px;
  align-items: center;
}

body[data-view="notas"] .notesInsightHeader .movementIcon {
  width: 22px;
  height: 22px;
  color: #ff6678;
}

body[data-view="notas"] .notesInsightHeader span {
  color: var(--notes-soft);
  font-size: 0.77rem;
  font-weight: 900;
  line-height: 1.12;
}

body[data-view="notas"] .notesInsightHeader strong {
  color: #ff6678;
  font-size: 1.7rem;
  line-height: 1;
  text-align: right;
}

body[data-view="notas"] .notesAttentionList {
  max-height: 286px;
  display: grid;
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-color: rgba(126, 177, 255, 0.72) rgba(255, 255, 255, 0.06);
  scrollbar-gutter: stable;
}

body[data-view="notas"] .attentionStudent {
  min-height: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid rgba(143, 184, 239, 0.10);
  background: transparent;
  animation: notesRiseIn 420ms var(--motion-emphasis) both;
  animation-delay: calc(180ms + var(--row-index) * 42ms);
  cursor: pointer;
  transition: transform var(--motion-quick), background var(--motion-quick);
}

body[data-view="notas"] .attentionStudent:hover {
  background: rgba(76, 155, 255, 0.10);
  transform: translateX(2px);
}

body[data-view="notas"] .attentionStudent strong,
body[data-view="notas"] .attentionStudent span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-view="notas"] .attentionStudent strong {
  color: var(--notes-ink);
  font-size: 0.78rem;
}

body[data-view="notas"] .attentionStudent span {
  color: var(--notes-muted);
  font-size: 0.68rem;
  font-weight: 800;
}

body[data-view="notas"] .notesDisciplineList {
  display: grid;
  gap: 8px;
}

body[data-view="notas"] .disciplineInsightRow {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(88px, 1fr) 24px;
  gap: 8px;
  align-items: center;
  animation: notesRiseIn 420ms var(--motion-emphasis) both;
  animation-delay: calc(220ms + var(--row-index) * 40ms);
}

body[data-view="notas"] .disciplineInsightRow span,
body[data-view="notas"] .disciplineInsightRow strong {
  overflow: hidden;
  color: var(--notes-soft);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-view="notas"] .disciplineInsightRow strong {
  color: var(--notes-ink);
  text-align: right;
}

body[data-view="notas"] .progressTrack {
  height: 8px;
  background: rgba(255, 255, 255, 0.10);
}

body[data-view="notas"] .progressTrack span {
  background: linear-gradient(90deg, #37e788, #6bb5ff);
  transition: width var(--motion-smooth);
}

body[data-view="notas"] .progressTrack span.error {
  background: linear-gradient(90deg, #2c7dff, #3e91ff);
}

@keyframes notesRiseIn {
  from {
    opacity: 0;
    translate: 0 14px;
    scale: 0.988;
    filter: blur(8px);
  }

  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: blur(0);
  }
}

@keyframes scoreBreath {
  0%,
  100% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }

  50% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 12px rgba(76, 155, 255, 0.13);
  }
}

@media (max-width: 900px) {
  body[data-view="notas"] .notesTableWrap {
    overflow-x: auto;
  }

  body[data-view="notas"] .notesTable {
    min-width: 980px;
  }
}

@media (max-width: 760px) {
  body[data-view="notas"] .notesBoardHeader,
  body[data-view="notas"] .notesTableMeta {
    grid-template-columns: 1fr;
  }

  body[data-view="notas"] .notesFilterMenu {
    justify-self: start;
  }

  body[data-view="notas"] .notesFilterPopover {
    left: 0;
    right: auto;
    grid-template-columns: 1fr;
  }
}

.profilePhoto {
  width: 72px;
}

.resultPill {
  width: fit-content;
  max-width: 210px;
  min-height: 23px;
  padding: 4px 10px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d4dde8;
  border-radius: 999px;
  background: #edf3f9;
  color: #102646;
  font-size: 0.64rem;
  font-weight: 900;
}
.studentProfileCard {
  margin-bottom: 12px;
  padding: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(126, 177, 255, 0.24);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 52%),
    rgba(255, 255, 255, 0.035);
}

.studentProfileCard strong,
.studentProfileCard span {
  display: block;
}

.studentProfileCard span {
  margin: 2px 0 7px;
  color: rgba(211, 225, 246, 0.76);
}

.studentProfileCard strong {
  color: #f8fbff;
  font-size: 1.02rem;
  line-height: 1.08;
  text-transform: uppercase;
}

.profileNotesTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  table-layout: fixed;
  font-size: 0.74rem;
}

.profileNotesTable th,
.profileNotesTable td {
  padding: 5px;
  border: 0;
  background: rgba(255, 255, 255, 0.04);
  color: #e8f1ff;
  text-align: center;
}

.profileNotesTable th {
  background: rgba(37, 94, 167, 0.28);
  color: rgba(226, 238, 255, 0.86);
  text-transform: uppercase;
}

.profileNotesTable td:first-child,
.profileNotesTable th:first-child {
  border-radius: 12px 0 0 12px;
  color: #f8fbff;
  font-weight: 900;
}

.profileNotesTable td:last-child,
.profileNotesTable th:last-child {
  border-radius: 0 12px 12px 0;
}

.profileScorePill {
  min-height: 24px;
  font-size: 0.66rem;
}

@media (max-width: 1180px) {
  body[data-view="notas"] .tableScrollHint {
    display: block;
  }

  .notesTableWrap {
    overflow-x: auto;
  }

  .notesTable {
    min-width: 920px;
  }

  .studentPeek {
    left: 0;
    top: 100%;
  }
}

@media (max-width: 760px) {
  .navItem {
    min-height: 56px;
  }

  .navItem span {
    font-size: 0.62rem;
  }

  .panelHeader {
    display: grid;
  }

  .panelHint {
    max-width: none;
    text-align: left;
  }

  .movementBars {
    overflow-x: auto;
    grid-template-columns: repeat(12, minmax(58px, 1fr));
  }

}

body[data-view="notas"] .notesStatsSection .statsSelectCard,
body[data-view="notas"] .notesStatsSection .statsGlass,
body[data-view="notas"] .notesStatsSection .movementStatCard,
body[data-view="notas"] .notesStatsSection .statsPrintButton {
  border: 1px solid var(--stats-line, rgba(122, 166, 225, 0.24));
  border-radius: 22px;
  background: var(--stats-panel, linear-gradient(145deg, rgba(18, 54, 98, 0.78), rgba(8, 30, 62, 0.66)));
  box-shadow: var(--stats-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 22px 58px rgba(0, 0, 0, 0.18));
}

body[data-view="notas"] .notesStatsSection .statsSelectCard,
body[data-view="notas"] .notesStatsSection .statsPrintButton,
body[data-view="notas"] .notesStatsSection .statsGlass,
body[data-view="notas"] .notesStatsSection .movementStatCard,
body[data-view="notas"] .notesStatsSection .statsDashboardFooter,
body[data-view="notas"] .notesStatsSection .classResultsPanel {
  animation: statsRiseIn 560ms var(--motion-emphasis) both;
}

body[data-view="notas"] .notesStatsSection .statsTopRow > :nth-child(1) {
  animation-delay: 40ms;
}

body[data-view="notas"] .notesStatsSection .statsTopRow > :nth-child(2) {
  animation-delay: 85ms;
}

body[data-view="notas"] .notesStatsSection .statsTopRow > :nth-child(4) {
  animation-delay: 130ms;
}

body[data-view="notas"] .notesStatsSection .movementStatCard:nth-child(1) {
  animation-delay: 110ms;
}

body[data-view="notas"] .notesStatsSection .movementStatCard:nth-child(2) {
  animation-delay: 155ms;
}

body[data-view="notas"] .notesStatsSection .movementStatCard:nth-child(3) {
  animation-delay: 200ms;
}

body[data-view="notas"] .notesStatsSection .movementStatCard:nth-child(4) {
  animation-delay: 245ms;
}

body[data-view="notas"] .notesStatsSection .statsRankingPanel {
  animation-delay: 170ms;
}

body[data-view="notas"] .notesStatsSection .statsChartPanel {
  animation-delay: 250ms;
}

body[data-view="notas"] .notesStatsSection .statsDonutPanel {
  animation-delay: 310ms;
}

body[data-view="notas"] .notesStatsSection .statsGlass {
  position: relative;
  overflow: hidden;
}

body[data-view="notas"] .notesStatsSection .statsGlass::before,
body[data-view="notas"] .notesStatsSection .movementStatCard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 28%, rgba(255, 255, 255, 0.075) 42%, transparent 58% 100%);
  background-size: 220% 100%;
  opacity: 0.62;
  animation: panelLightSweep 9s var(--motion-standard) infinite;
}

body[data-view="notas"] .notesStatsSection .movementStatCard {
  position: relative;
  overflow: hidden;
}

body[data-view="notas"] .notesStatsSection .movementStatCard > * {
  position: relative;
  z-index: 1;
}

body[data-view="notas"] .notesStatsSection .statsSelectCard {
  position: relative;
  min-height: 82px;
  padding: 0;
  overflow: visible;
  transform: perspective(900px) rotateX(0deg) translate3d(0, 0, 0);
  transition: transform var(--motion-smooth), box-shadow var(--motion-smooth), border-color var(--motion-smooth);
  z-index: 4;
}

body[data-view="notas"] .notesStatsSection .statsSelectCard:hover,
body[data-view="notas"] .notesStatsSection .statsSelectCard:focus-within {
  border-color: var(--stats-line-strong, rgba(126, 177, 255, 0.56));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--shadow-lifted);
  transform: perspective(900px) rotateX(1.5deg) translateY(-2px);
}

body[data-view="notas"] .notesStatsSection .statsSelectCard.is-open {
  border-color: var(--stats-line-active, rgba(126, 177, 255, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 34px 90px rgba(0, 0, 0, 0.34);
  z-index: 30;
}

body[data-view="notas"] .notesStatsSection .statsSelectNative {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

body[data-view="notas"] .notesStatsSection .statsSelectButton {
  position: relative;
  width: 100%;
  min-height: 82px;
  padding: 17px 56px 14px 20px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 0;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.10), transparent 45%),
    transparent;
  color: var(--stats-ink, #f8fbff);
  text-align: left;
  overflow: hidden;
}

body[data-view="notas"] .notesStatsSection .statsSelectButton .movementIcon {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  padding: 5px;
  border: 1px solid rgba(126, 177, 255, 0.24);
  border-radius: 12px;
  background: rgba(76, 155, 255, 0.12);
  color: #8fc1ff;
  filter: none;
}

body[data-view="notas"] .notesStatsSection .statsSelectText {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  gap: 7px;
}

body[data-view="notas"] .notesStatsSection .statsSelectButton strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--stats-ink, #f8fbff);
  font-size: 1.34rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

body[data-view="notas"] .notesStatsSection .statsSelectCaption {
  color: var(--stats-muted, rgba(205, 221, 244, 0.82));
  font-size: 0.86rem;
}

body[data-view="notas"] .notesStatsSection .statsSelectChevron {
  position: absolute;
  right: 25px;
  top: 34px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #f5f8ff;
  border-bottom: 2px solid #f5f8ff;
  transform: rotate(45deg);
  transition: transform var(--motion-smooth), top var(--motion-smooth);
  z-index: 1;
}

body[data-view="notas"] .notesStatsSection .statsSelectGlow {
  position: absolute;
  right: -32px;
  top: -42px;
  width: 130px;
  height: 130px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(76, 155, 255, 0.28), transparent 66%);
  opacity: 0;
  transform: scale(0.82);
  transition: opacity var(--motion-smooth), transform var(--motion-smooth);
}

body[data-view="notas"] .notesStatsSection .statsSelectCard:hover .statsSelectGlow,
body[data-view="notas"] .notesStatsSection .statsSelectCard.is-open .statsSelectGlow {
  opacity: 1;
  transform: scale(1);
}

body[data-view="notas"] .notesStatsSection .statsSelectCard.is-open .statsSelectChevron {
  top: 38px;
  transform: rotate(225deg);
}

body[data-view="notas"] .notesStatsSection .statsSelectMenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  padding: 8px;
  max-height: min(312px, calc(100vh - 160px));
  display: grid;
  gap: 6px;
  border: 1px solid var(--stats-menu-line, rgba(128, 177, 244, 0.30));
  border-radius: 14px;
  background: var(--stats-menu, linear-gradient(145deg, rgba(23, 64, 112, 0.985), rgba(7, 24, 50, 0.985)));
  box-shadow: var(--stats-menu-shadow, 0 28px 78px rgba(0, 0, 0, 0.42));
  backdrop-filter: blur(22px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform-origin: top;
  animation: selectMenuEnter 260ms var(--motion-emphasis) both;
}

body[data-view="notas"] .notesStatsSection .statsSelectOption {
  position: relative;
  min-height: 48px;
  padding: 9px 34px 9px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: #f6fbff;
  text-align: left;
  animation: selectOptionEnter 240ms var(--motion-emphasis) both;
  animation-delay: calc(var(--option-index) * 28ms);
  transition: transform var(--motion-quick), background var(--motion-quick), border-color var(--motion-quick), box-shadow var(--motion-quick);
}

body[data-view="notas"] .notesStatsSection .statsSelectOption strong {
  font-size: 0.86rem;
  font-weight: 900;
  text-transform: uppercase;
}

body[data-view="notas"] .notesStatsSection .statsSelectOption span {
  color: rgba(205, 221, 244, 0.72);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

body[data-view="notas"] .notesStatsSection .statsSelectOption:hover,
body[data-view="notas"] .notesStatsSection .statsSelectOption:focus-visible {
  border-color: rgba(126, 177, 255, 0.40);
  background: rgba(76, 155, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateX(3px);
}

body[data-view="notas"] .notesStatsSection .statsSelectOption.active {
  border-color: rgba(76, 155, 255, 0.62);
  background:
    linear-gradient(135deg, rgba(76, 155, 255, 0.28), rgba(227, 38, 58, 0.08)),
    rgba(255, 255, 255, 0.05);
}

body[data-view="notas"] .notesStatsSection .statsSelectOption.active::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 14px;
  border-right: 2px solid #7eb1ff;
  border-bottom: 2px solid #7eb1ff;
  transform: translateY(-58%) rotate(45deg);
}

body[data-view="notas"] .notesStatsSection .statsPrintButton {
  min-height: 70px;
  padding: 0 26px;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  border-color: rgba(82, 142, 252, 0.52);
  background: linear-gradient(135deg, #236bff 0%, #1657d4 100%);
  color: #fff;
  font-size: 1.03rem;
  font-weight: 900;
  white-space: nowrap;
  transition: transform var(--motion-smooth), box-shadow var(--motion-smooth), filter var(--motion-smooth);
}

body[data-view="notas"] .notesStatsSection .statsPrintButton:hover,
body[data-view="notas"] .notesStatsSection .statsPrintButton:focus-visible {
  box-shadow: 0 22px 55px rgba(35, 107, 255, 0.36);
  filter: saturate(1.12);
  transform: translateY(-2px) scale(1.01);
}

body[data-view="notas"] .notesStatsSection .statsPrintButton svg {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-view="notas"] .notesStatsSection .statsIntroBlock h2 {
  margin-bottom: 12px;
  color: #fbfdff;
  font-size: 1.78rem;
  line-height: 1.05;
  text-transform: uppercase;
}

body[data-view="notas"] .notesStatsSection .statsIntroBlock h2,
body[data-view="notas"] .notesStatsSection .statsIntroBlock > p {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

body[data-view="notas"] .notesStatsSection .statsIntroBlock p {
  margin-bottom: 0;
  color: rgba(211, 225, 246, 0.82);
  font-size: 1.02rem;
}

body[data-view="notas"] .notesStatsSection .movementStatCard {
  height: 100%;
  min-height: 118px;
  padding: 20px 15px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

body[data-view="notas"] .notesStatsSection .movementStatCard.ok .movementIcon {
  color: #37e788;
}

body[data-view="notas"] .notesStatsSection .movementStatCard.error .movementIcon {
  color: #ff374f;
}

body[data-view="notas"] .notesStatsSection .movementStatCard.info .movementIcon,
body[data-view="notas"] .notesStatsSection .movementStatCard .movementIcon.star {
  color: #327dff;
}

body[data-view="notas"] .notesStatsSection .movementStatBody span {
  display: block;
  color: rgba(215, 226, 243, 0.86);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: normal;
}

body[data-view="notas"] .notesStatsSection .movementStatValue {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

body[data-view="notas"] .notesStatsSection .movementStatValue strong {
  color: #f9fcff;
  font-size: 1.72rem;
  line-height: 1;
}

body[data-view="notas"] .notesStatsSection .movementStatBadge {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
}

body[data-view="notas"] .notesStatsSection .movementStatBadge.ok {
  background: rgba(45, 204, 116, 0.18);
  color: #38dd87;
}

body[data-view="notas"] .notesStatsSection .movementStatBadge.error {
  background: rgba(255, 54, 79, 0.16);
  color: #ff3a52;
}

body[data-view="notas"] .notesStatsSection .movementStatBadge.info {
  background: rgba(42, 125, 255, 0.18);
  color: #45a0ff;
}

body[data-view="notas"] .notesStatsSection .movementIcon {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.22));
}

body[data-view="notas"] .notesStatsSection .movementStatCard .movementIcon {
  width: 32px;
  height: 32px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.055);
  filter: none;
}

body[data-view="notas"] .notesStatsSection .movementIcon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.95;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-view="notas"] .notesStatsSection .statsRankingPanel {
  padding: 19px 22px 10px;
  min-height: 253px;
  max-height: 253px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 34px;
}

body[data-view="notas"] .notesStatsSection .statsRankingHeader {
  margin-bottom: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}

body[data-view="notas"] .notesStatsSection .statsRankingHeader .movementIcon {
  width: 18px;
  height: 18px;
  color: #ffbd22;
}

body[data-view="notas"] .notesStatsSection .statsRankingHeader h3,
body[data-view="notas"] .notesStatsSection .statsPanelTitle h3 {
  margin-bottom: 0;
  color: #f4f8ff;
  font-size: 1rem;
  line-height: 1.1;
  text-transform: uppercase;
}

body[data-view="notas"] .notesStatsSection .rankingList {
  gap: 0;
  height: 164px;
  min-height: 164px;
  align-content: start;
  grid-auto-rows: 42px;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: contain;
  padding-right: 10px;
  scrollbar-color: rgba(126, 177, 255, 0.72) rgba(255, 255, 255, 0.06);
  scrollbar-gutter: stable both-edges;
}

body[data-view="notas"] .notesStatsSection .rankingList.is-expanded {
  overflow-y: auto;
}

body[data-view="notas"] .notesStatsSection .rankingList::-webkit-scrollbar {
  width: 8px;
}

body[data-view="notas"] .notesStatsSection .rankingList::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

body[data-view="notas"] .notesStatsSection .rankingList::-webkit-scrollbar-thumb {
  border: 2px solid rgba(8, 30, 62, 0.82);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(126, 177, 255, 0.92), rgba(35, 107, 255, 0.70));
}

body[data-view="notas"] .notesStatsSection .rankingItem {
  height: 42px;
  min-height: 42px;
  padding: 0;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid rgba(143, 184, 239, 0.12);
  border-radius: 0;
  background: transparent;
  animation: rankingItemEnter 420ms var(--motion-emphasis) both;
  animation-delay: calc(220ms + var(--rank-index) * 55ms);
  transition: transform var(--motion-quick), background var(--motion-quick);
}

body[data-view="notas"] .notesStatsSection .rankingItem.rankingExtra {
  display: none;
}

body[data-view="notas"] .notesStatsSection .rankingList.is-expanded .rankingItem.rankingExtra {
  display: grid;
  animation: rankingExtraReveal 300ms var(--motion-emphasis) both;
  animation-delay: calc((var(--rank-index) - 3) * 30ms);
}

body[data-view="notas"] .notesStatsSection .rankingItem:hover {
  background: rgba(255, 255, 255, 0.035);
  transform: translateX(4px);
}

body[data-view="notas"] .notesStatsSection .rankingItem strong {
  color: #f6f9ff;
  font-size: 0.71rem;
  font-weight: 800;
}

body[data-view="notas"] .notesStatsSection .rankingItem small {
  display: block;
  margin-top: 2px;
  color: rgba(204, 220, 244, 0.72);
  font-size: 0.64rem;
  line-height: 1.1;
}

body[data-view="notas"] .notesStatsSection .rankingItem b {
  min-width: 58px;
  padding: 7px 8px;
  border-radius: 999px;
  background: rgba(62, 105, 179, 0.33);
  color: #e8f1ff;
  font-size: 1rem;
  text-align: center;
}

body[data-view="notas"] .notesStatsSection .statsRankingLink {
  width: 100%;
  min-height: 34px;
  padding: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  border: 0;
  background: transparent;
  color: #f5f8ff;
  font-size: 0.78rem;
  text-align: left;
  transition: color var(--motion-quick), transform var(--motion-quick);
}

body[data-view="notas"] .notesStatsSection .statsRankingLink:hover,
body[data-view="notas"] .notesStatsSection .statsRankingLink:focus-visible {
  color: #8fc0ff;
  transform: translateX(3px);
}

body[data-view="notas"] .notesStatsSection .statsRankingLink b {
  font-size: 1.9rem;
  line-height: 0.78;
}

body[data-view="notas"] .notesStatsSection .statsChartPanel,
body[data-view="notas"] .notesStatsSection .statsDonutPanel {
  padding: 22px 22px 13px;
}

body[data-view="notas"] .notesStatsSection .statsPanelHeader {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

body[data-view="notas"] .notesStatsSection .statsPanelHeader.compact {
  margin-bottom: 0;
}

body[data-view="notas"] .notesStatsSection .statsLegend {
  margin-top: 17px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  color: #e3eefc;
  font-size: 0.78rem;
}

body[data-view="notas"] .notesStatsSection .statsLegend span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

body[data-view="notas"] .notesStatsSection .legendDot {
  width: 13px;
  height: 13px;
  display: inline-block;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 2px 7px rgba(0, 0, 0, 0.16);
}

body[data-view="notas"] .notesStatsSection .legendDot.blue {
  background: linear-gradient(145deg, #5aa8ff, #246dff);
}

body[data-view="notas"] .notesStatsSection .legendDot.red {
  background: linear-gradient(145deg, #ff8491, #e3263a);
}

body[data-view="notas"] .notesStatsSection .movementChart {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-view="notas"] .notesStatsSection .statsChartCanvas {
  height: 330px;
  padding-top: 34px;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 7px;
  box-sizing: border-box;
}

body[data-view="notas"] .notesStatsSection .statsYAxis {
  padding-top: 0;
  padding-bottom: 68px;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  color: rgba(224, 236, 252, 0.92);
  font-size: 0.83rem;
}

body[data-view="notas"] .notesStatsSection .movementBars {
  position: relative;
  min-height: 0;
  height: 296px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
  overflow: visible;
}

body[data-view="notas"] .notesStatsSection .movementBars::before {
  content: "";
  position: absolute;
  inset: 0 0 66px 0;
  background: linear-gradient(to bottom, rgba(129, 166, 219, 0.12) 1px, transparent 1px) 0 0 / 100% 25%;
  border-bottom: 1px solid rgba(129, 166, 219, 0.17);
  pointer-events: none;
}

body[data-view="notas"] .notesStatsSection .movementBar {
  position: relative;
  z-index: 1;
  min-height: 0;
  height: 100%;
  padding: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 61px;
  gap: 6px;
  border: 0;
  background: transparent;
  color: #f4f8ff;
  transition: transform var(--motion-smooth), background var(--motion-smooth), box-shadow var(--motion-smooth), filter var(--motion-smooth);
}

body[data-view="notas"] .notesStatsSection .movementBar:hover,
body[data-view="notas"] .notesStatsSection .movementBar:focus-visible {
  transform: translateY(-4px);
  filter: saturate(1.08);
}

body[data-view="notas"] .notesStatsSection .movementBar.active {
  border-radius: 10px;
  background: rgba(46, 112, 226, 0.14);
  box-shadow: inset 0 0 0 1px rgba(84, 151, 255, 0.25);
}

body[data-view="notas"] .notesStatsSection .barPair {
  height: 221px;
  align-self: end;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 3px;
}

body[data-view="notas"] .notesStatsSection .barPair i {
  width: 26px;
  height: var(--bar-height);
  position: relative;
  border-radius: 6px 6px 2px 2px;
  transform-origin: bottom;
  animation:
    statsBarGrow 760ms var(--motion-emphasis) both,
    statsBarBreathe 6.4s ease-in-out infinite;
  animation-delay:
    calc(260ms + var(--bar-index) * 36ms),
    calc(1500ms + var(--bar-index) * 110ms);
  will-change: scale, translate;
}

body[data-view="notas"] .notesStatsSection .barPair i::before {
  content: attr(data-value);
  position: absolute;
  left: 50%;
  top: -24px;
  transform: translateX(-50%);
  width: 28px;
  padding: 3px 0;
  border-radius: 6px;
  background: rgba(14, 31, 58, 0.88);
  color: #f5f8ff;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

body[data-view="notas"] .notesStatsSection .barPair i.isZero {
  height: 0;
}

body[data-view="notas"] .notesStatsSection .barPair i.isZero::before {
  top: auto;
  bottom: 3px;
}

body[data-view="notas"] .notesStatsSection .barBlue {
  background: linear-gradient(180deg, #87ceff 0%, #3f8dff 24%, #1767ee 48%, #65b6ff 72%, #1459df 100%);
  background-size: 100% 340%;
  box-shadow: 0 8px 20px rgba(16, 69, 151, 0.18);
  animation-name: statsBarGrow, statsBarBreathe, blueBarFlow;
  animation-duration: 760ms, 6.4s, 9.8s;
  animation-timing-function: var(--motion-emphasis), ease-in-out, ease-in-out;
  animation-iteration-count: 1, infinite, infinite;
  animation-delay:
    calc(260ms + var(--bar-index) * 36ms),
    calc(1500ms + var(--bar-index) * 110ms),
    calc(900ms + var(--bar-index) * 95ms);
}

body[data-view="notas"] .notesStatsSection .barRed {
  width: 18px;
  background: linear-gradient(180deg, #ffabb5 0%, #ff5268 24%, #d81d34 50%, #ff8495 74%, #b91227 100%);
  background-size: 100% 340%;
  box-shadow: 0 8px 20px rgba(124, 18, 36, 0.16);
  animation-name: statsBarGrow, statsBarBreathe, redBarFlow;
  animation-duration: 760ms, 6.4s, 10.6s;
  animation-timing-function: var(--motion-emphasis), ease-in-out, ease-in-out;
  animation-iteration-count: 1, infinite, infinite;
  animation-delay:
    calc(260ms + var(--bar-index) * 36ms),
    calc(1500ms + var(--bar-index) * 110ms),
    calc(1050ms + var(--bar-index) * 105ms);
}

body[data-view="notas"] .notesStatsSection .barLabel {
  min-height: 66px;
  display: grid;
  align-content: start;
  gap: 3px;
  color: #ecf4ff;
  text-align: center;
  animation: chartLabelEnter 500ms var(--motion-emphasis) both;
  animation-delay: calc(420ms + var(--bar-index) * 34ms);
}

body[data-view="notas"] .notesStatsSection .barLabel .movementIcon {
  width: 23px;
  height: 23px;
  margin: 0 auto 2px;
  color: rgba(231, 241, 255, 0.88);
}

body[data-view="notas"] .notesStatsSection .barLabel strong {
  color: #f4f8ff;
  font-size: 0.68rem;
  font-weight: 900;
}

body[data-view="notas"] .notesStatsSection .barLabel small {
  display: block;
  width: 100%;
  margin: 0 auto;
  color: rgba(207, 222, 244, 0.80);
  font-size: 0.46rem;
  font-weight: 800;
  line-height: 1.12;
  overflow-wrap: normal;
  word-break: normal;
  text-transform: uppercase;
}

body[data-view="notas"] .notesStatsSection .statsChartFootnote {
  margin: 11px -22px -13px;
  min-height: 39px;
  padding: 11px 21px;
  border-top: 1px solid rgba(125, 164, 220, 0.13);
  color: rgba(215, 229, 249, 0.78);
  font-size: 0.75rem;
}

body[data-view="notas"] .notesStatsSection .statsDonutBody {
  min-height: 341px;
  display: grid;
  grid-template-columns: 70px 277px 82px;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

body[data-view="notas"] .notesStatsSection .donutMeter {
  position: relative;
  isolation: isolate;
  width: min(277px, 100%);
  margin: 0 auto;
  background:
    radial-gradient(circle, #0a2548 0 49%, rgba(10, 37, 72, 0.64) 50%, transparent 51%);
  transform-origin: center;
  animation:
    donutEnter 780ms var(--motion-emphasis) both,
    donutBreathe 7.4s ease-in-out infinite;
  animation-delay: 260ms, 1300ms;
  box-shadow:
    0 0 0 1px rgba(156, 204, 255, 0.18),
    0 11px 0 rgba(4, 17, 37, 0.58),
    inset -14px -18px 26px rgba(0, 0, 0, 0.22),
    inset 10px 12px 22px rgba(255, 255, 255, 0.07),
    0 26px 54px rgba(0, 0, 0, 0.30);
}

body[data-view="notas"] .notesStatsSection .donutMeter::before,
body[data-view="notas"] .notesStatsSection .donutMeter::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

body[data-view="notas"] .notesStatsSection .donutMeter::before {
  inset: 0;
  z-index: 0;
  background: conic-gradient(from -126deg, #e3263a 0 calc(100% - var(--percent)), #236bff calc(100% - var(--percent)) 100%);
  filter: saturate(1.05) brightness(1);
  opacity: 0.96;
  -webkit-mask: radial-gradient(circle, transparent 0 48%, #000 49% 100%);
  mask: radial-gradient(circle, transparent 0 48%, #000 49% 100%);
  animation: donutToneFlow 10.8s ease-in-out infinite;
  box-shadow:
    inset 0 18px 18px rgba(255, 255, 255, 0.10),
    inset 0 -22px 22px rgba(0, 0, 0, 0.28);
}

body[data-view="notas"] .notesStatsSection .donutMeter::after {
  inset: 0;
  z-index: 1;
  background:
    conic-gradient(from -126deg, rgba(255, 255, 255, 0.18) 0 10%, transparent 18% 39%, rgba(0, 0, 0, 0.24) 55% 75%, transparent 85% 100%),
    radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.18), transparent 25%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.10), transparent 46%);
  opacity: 0.54;
  -webkit-mask: radial-gradient(circle, transparent 0 48%, #000 49% 100%);
  mask: radial-gradient(circle, transparent 0 48%, #000 49% 100%);
}

body[data-view="notas"] .notesStatsSection .donutMeter strong {
  position: relative;
  z-index: 2;
  color: #f9fcff;
  transform: translateY(-13px);
  font-size: 3.12rem;
  line-height: 1;
}

body[data-view="notas"] .notesStatsSection .donutMeter span {
  position: relative;
  z-index: 2;
  width: 145px;
  transform: translateY(42px);
  color: #f4f8ff;
  font-size: 0.9rem;
  line-height: 1.35;
}

body[data-view="notas"] .notesStatsSection .statsDonutLegend {
  display: grid;
  gap: 5px;
  color: #e8f2ff;
}

body[data-view="notas"] .notesStatsSection .statsDonutLegend.left {
  justify-items: start;
}

body[data-view="notas"] .notesStatsSection .statsDonutLegend.right {
  justify-items: start;
}

body[data-view="notas"] .notesStatsSection .statsDonutLegend .legendDot {
  margin-bottom: 8px;
}

body[data-view="notas"] .notesStatsSection .statsDonutLegend span,
body[data-view="notas"] .notesStatsSection .statsDonutLegend small {
  color: rgba(224, 236, 252, 0.87);
  font-size: 0.82rem;
  line-height: 1.25;
}

body[data-view="notas"] .notesStatsSection .statsDonutLegend strong {
  color: #f8fbff;
  font-size: 1.5rem;
  line-height: 1;
}

body[data-view="notas"] .notesStatsSection .statsDonutNote {
  min-height: 68px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(133, 174, 230, 0.17);
  border-radius: 12px;
  background: rgba(12, 36, 72, 0.46);
  color: rgba(224, 236, 252, 0.88);
  font-size: 0.86rem;
  line-height: 1.45;
  animation: noteEnter 520ms var(--motion-emphasis) both;
  animation-delay: 450ms;
}

body[data-view="notas"] .notesStatsSection .statsDonutNote .movementIcon {
  width: 31px;
  height: 31px;
  color: #2c7cff;
}

body[data-view="notas"] .notesStatsSection .classResultsPanel {
  margin-top: 12px;
  border-color: var(--stats-line, rgba(122, 166, 225, 0.24));
  background: var(--stats-panel, linear-gradient(145deg, rgba(18, 54, 98, 0.78), rgba(8, 30, 62, 0.66)));
}

body[data-view="notas"] .notesStatsSection .classResultCard {
  animation: resultCardEnter 420ms var(--motion-emphasis) both;
}

body[data-view="notas"] .notesStatsSection .disciplineAlertCard {
  grid-template-columns: 38px minmax(0, 1fr);
  border-color: rgba(255, 79, 100, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 79, 100, 0.08), transparent 52%),
    var(--surface-soft);
}

body[data-theme="claro"][data-view="notas"] .notesStatsSection {
  --stats-ink: #10243e;
  --stats-muted: rgba(53, 81, 111, 0.78);
  --stats-line: rgba(49, 105, 168, 0.18);
  --stats-line-strong: rgba(18, 105, 211, 0.38);
  --stats-line-active: rgba(18, 105, 211, 0.54);
  --stats-panel: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(233, 245, 255, 0.74));
  --stats-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 24px 60px rgba(33, 88, 150, 0.13);
  --stats-menu: linear-gradient(145deg, rgba(255, 255, 255, 0.992), rgba(229, 243, 255, 0.992));
  --stats-menu-line: rgba(48, 105, 168, 0.24);
  --stats-menu-shadow: 0 26px 70px rgba(44, 89, 138, 0.20);
}

body[data-theme="mono"][data-view="notas"] .notesStatsSection {
  --stats-ink: #f7f8fb;
  --stats-muted: rgba(216, 220, 228, 0.74);
  --stats-line: rgba(255, 255, 255, 0.17);
  --stats-line-strong: rgba(255, 255, 255, 0.30);
  --stats-line-active: rgba(255, 255, 255, 0.42);
  --stats-panel: linear-gradient(145deg, rgba(42, 44, 52, 0.84), rgba(15, 16, 21, 0.76));
  --stats-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 24px 64px rgba(0, 0, 0, 0.30);
  --stats-menu: linear-gradient(145deg, rgba(42, 44, 52, 0.992), rgba(10, 11, 15, 0.992));
  --stats-menu-line: rgba(255, 255, 255, 0.22);
  --stats-menu-shadow: 0 30px 78px rgba(0, 0, 0, 0.46);
}

body[data-theme="claro"][data-view="notas"] .notesStatsSection .statsPanelTitle h3,
body[data-theme="claro"][data-view="notas"] .notesStatsSection .statsRankingHeader h3,
body[data-theme="claro"][data-view="notas"] .notesStatsSection .movementStatValue strong,
body[data-theme="claro"][data-view="notas"] .notesStatsSection .rankingItem strong,
body[data-theme="claro"][data-view="notas"] .notesStatsSection .donutMeter strong,
body[data-theme="claro"][data-view="notas"] .notesStatsSection .statsDonutLegend strong,
body[data-theme="claro"][data-view="notas"] .notesStatsSection .classResultCard strong,
body[data-theme="claro"][data-view="notas"] .notesStatsSection .barLabel strong {
  color: var(--stats-ink);
}

body[data-theme="claro"][data-view="notas"] .notesStatsSection .statsLegend,
body[data-theme="claro"][data-view="notas"] .notesStatsSection .statsYAxis,
body[data-theme="claro"][data-view="notas"] .notesStatsSection .movementStatBody span,
body[data-theme="claro"][data-view="notas"] .notesStatsSection .rankingItem small,
body[data-theme="claro"][data-view="notas"] .notesStatsSection .statsDonutLegend span,
body[data-theme="claro"][data-view="notas"] .notesStatsSection .statsDonutLegend small,
body[data-theme="claro"][data-view="notas"] .notesStatsSection .statsChartFootnote,
body[data-theme="claro"][data-view="notas"] .notesStatsSection .statsDashboardFooter,
body[data-theme="claro"][data-view="notas"] .notesStatsSection .barLabel small,
body[data-theme="claro"][data-view="notas"] .notesStatsSection .classResultCard span {
  color: var(--stats-muted);
}

body[data-theme="claro"][data-view="notas"] .notesStatsSection .statsSelectOption {
  background: rgba(18, 105, 211, 0.055);
  color: var(--stats-ink);
}

body[data-theme="claro"][data-view="notas"] .notesStatsSection .statsSelectOption span {
  color: rgba(53, 81, 111, 0.70);
}

body[data-theme="claro"][data-view="notas"] .notesStatsSection .statsSelectOption:hover,
body[data-theme="claro"][data-view="notas"] .notesStatsSection .statsSelectOption:focus-visible,
body[data-theme="claro"][data-view="notas"] .notesStatsSection .statsSelectOption.active {
  background: rgba(18, 105, 211, 0.13);
}

body[data-theme="claro"][data-view="notas"] .notesStatsSection .movementBars::before {
  background: linear-gradient(to bottom, rgba(49, 105, 168, 0.14) 1px, transparent 1px) 0 0 / 100% 25%;
  border-bottom-color: rgba(49, 105, 168, 0.18);
}

body[data-theme="claro"][data-view="notas"] .notesStatsSection .barPair i::before {
  background: rgba(255, 255, 255, 0.92);
  color: #10243e;
  box-shadow: 0 8px 18px rgba(44, 89, 138, 0.12);
}

body[data-theme="claro"][data-view="notas"] .notesStatsSection .donutMeter {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 49%, rgba(18, 105, 211, 0.08) 50%, transparent 51%);
}

body[data-theme="claro"][data-view="notas"] .notesStatsSection .donutMeter::before {
  background: conic-gradient(from -126deg, #e3263a 0 calc(100% - var(--percent)), #1269d3 calc(100% - var(--percent)) 100%);
}

body[data-theme="claro"][data-view="notas"] .notesStatsSection .donutMeter span,
body[data-theme="claro"][data-view="notas"] .notesStatsSection .statsDonutNote {
  color: var(--stats-ink);
}

body[data-theme="claro"][data-view="notas"] .notesStatsSection .statsDonutNote {
  border-color: rgba(49, 105, 168, 0.16);
  background: rgba(255, 255, 255, 0.62);
}

body[data-theme="mono"][data-view="notas"] .notesStatsSection .statsPrintButton {
  border-color: rgba(255, 255, 255, 0.28);
  background: linear-gradient(135deg, #f3f5f8, #9aa2b1);
  color: #090a0e;
}

body[data-theme="mono"][data-view="notas"] .notesStatsSection .barBlue {
  background: linear-gradient(180deg, #f7f8fb 0%, #c5cbd6 24%, #838b99 48%, #e9edf5 72%, #727a87 100%);
  background-size: 100% 340%;
  box-shadow: 0 0 18px rgba(247, 248, 251, 0.16);
}

body[data-theme="mono"][data-view="notas"] .notesStatsSection .donutMeter {
  background:
    radial-gradient(circle, #15171d 0 49%, rgba(255, 255, 255, 0.06) 50%, transparent 51%);
}

body[data-theme="mono"][data-view="notas"] .notesStatsSection .donutMeter::before {
  background: conic-gradient(from -126deg, #c34958 0 calc(100% - var(--percent)), #d8dce6 calc(100% - var(--percent)) 100%);
}

@keyframes statsRiseIn {
  from {
    opacity: 0;
    translate: 0 16px;
    scale: 0.985;
    filter: blur(10px);
  }

  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: blur(0);
  }
}

@keyframes selectMenuEnter {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    filter: blur(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes profileMenuEnter {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.965);
    filter: blur(9px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes searchResultsEnter {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes selectOptionEnter {
  from {
    opacity: 0;
    translate: 0 -6px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes panelLightSweep {
  0%,
  56% {
    background-position: 180% 0;
    opacity: 0.10;
  }

  72% {
    opacity: 0.58;
  }

  100% {
    background-position: -60% 0;
    opacity: 0.10;
  }
}

@keyframes rankingItemEnter {
  from {
    opacity: 0;
    translate: 14px 0;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes rankingExtraReveal {
  from {
    opacity: 0;
    translate: 0 -8px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes statsBarGrow {
  from {
    opacity: 0;
    scale: 1 0.08;
  }

  to {
    opacity: 1;
    scale: 1 1;
  }
}

@keyframes statsBarBreathe {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -3px;
  }
}

@keyframes blueBarFlow {
  0%,
  100% {
    background-position: 50% 8%;
  }

  50% {
    background-position: 50% 82%;
  }
}

@keyframes redBarFlow {
  0%,
  100% {
    background-position: 50% 82%;
  }

  50% {
    background-position: 50% 12%;
  }
}

@keyframes chartLabelEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes donutEnter {
  from {
    opacity: 0;
    scale: 0.82;
    filter: blur(8px);
  }

  to {
    opacity: 1;
    scale: 1;
    filter: blur(0);
  }
}

@keyframes donutBreathe {
  0%,
  100% {
    scale: 1;
  }

  50% {
    scale: 1.018;
  }
}

@keyframes donutToneFlow {
  0%,
  100% {
    filter: saturate(1.02) brightness(0.98) hue-rotate(0deg);
  }

  50% {
    filter: saturate(1.18) brightness(1.06) hue-rotate(8deg);
  }
}

@keyframes noteEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes resultCardEnter {
  from {
    opacity: 0;
    translate: 0 10px;
    scale: 0.98;
  }

  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@media (max-width: 1120px) {
  body[data-view="notas"] .notesStatsSection .movementBars {
    grid-template-columns: repeat(12, minmax(62px, 1fr));
    overflow-x: auto;
  }

  body[data-view="notas"] .notesStatsSection .statsDonutBody {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

@media (max-width: 600px) {
  body[data-view="notas"] .notesStatsSection .statsSelectCard {
    min-height: 74px;
  }

  body[data-view="notas"] .notesStatsSection .statsSelectButton {
    min-height: 74px;
    padding: 15px 48px 12px 18px;
  }

  body[data-view="notas"] .notesStatsSection .statsSelectButton strong {
    font-size: 1.34rem;
  }

  body[data-view="notas"] .notesStatsSection .statsSelectChevron {
    right: 22px;
    top: 30px;
  }

  body[data-view="notas"] .notesStatsSection .statsSelectCard.is-open .statsSelectChevron {
    top: 34px;
  }

  body[data-view="notas"] .notesStatsSection .statsPrintButton {
    min-height: 61px;
  }

  body[data-view="notas"] .notesStatsSection .movementStatCard {
    min-height: 104px;
    padding: 18px 13px;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 9px;
  }

  body[data-view="notas"] .notesStatsSection .movementStatBody span {
    font-size: 0.61rem;
    line-height: 1.15;
    white-space: normal;
  }

  body[data-view="notas"] .notesStatsSection .movementStatValue {
    margin-top: 10px;
    gap: 8px;
    flex-wrap: wrap;
  }

  body[data-view="notas"] .notesStatsSection .movementStatValue strong {
    font-size: 1.55rem;
  }

  body[data-view="notas"] .notesStatsSection .movementStatBadge {
    padding: 4px 8px;
    font-size: 0.72rem;
  }

  body[data-view="notas"] .notesStatsSection .statsPanelHeader {
    gap: 10px;
  }

  body[data-view="notas"] .notesStatsSection .statsChartPanel,
  body[data-view="notas"] .notesStatsSection .statsDonutPanel {
    padding: 20px 18px 13px;
  }

  body[data-view="notas"] .notesStatsSection .statsChartFootnote {
    margin-right: -18px;
    margin-left: -18px;
    padding-right: 18px;
    padding-left: 18px;
  }
}