/* Avatar do aluno: foto quando existe, senão as duas primeiras letras do nome. */

.student-avatar {
  --avatar-size: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  width: var(--avatar-size);
  height: var(--avatar-size);
  user-select: none;
}
.student-avatar--sm { --avatar-size: 1.75rem; }
.student-avatar--md { --avatar-size: 2.5rem; }
.student-avatar--lg { --avatar-size: 4rem; }
.student-avatar--xl { --avatar-size: 11rem; }

/* Anel nobre e container de recorte da foto/iniciais */
.student-avatar__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
  background: var(--avatar-bg, #6B1D2F);
  color: #fff;
  font-weight: 700;
  font-size: calc(var(--avatar-size) * 0.38);
  line-height: 1;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 1.5px rgba(197, 160, 89, 0.75), 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Avatar do aluno ativo: pinta com --child-accent (definida no <body> pelo layout e atualizada ao vivo pelo seletor de cor). */
.student-avatar--live .student-avatar__frame {
  background: var(--child-accent, var(--avatar-bg, #6B1D2F));
}

.student-avatar__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--avatar-x, 50%) var(--avatar-y, 50%);
  transform: scale(var(--avatar-zoom, 1));
  transform-origin: var(--avatar-x, 50%) var(--avatar-y, 50%);
}

.student-avatar__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

/* Badge clássico com o símbolo/ícone da virtude posicionado sobre o anel */
.student-avatar__virtue-badge {
  position: absolute;
  bottom: -0.1em;
  right: -0.1em;
  width: calc(var(--avatar-size) * 0.42);
  height: calc(var(--avatar-size) * 0.42);
  min-width: 1.1rem;
  min-height: 1.1rem;
  border-radius: 9999px;
  background: #FAF7F0;
  color: #7A5A12;
  border: 1px solid #C5A059;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
  z-index: 2;
  pointer-events: none;
}

:is(.dark, [data-theme="dark"]) .student-avatar__virtue-badge {
  background: #0F1E36;
  border-color: #C5A059;
  color: #E2C98A;
}

.student-avatar__virtue-badge svg {
  width: 72%;
  height: 72%;
}

.student-avatar[hidden] { display: none; }
img.student-avatar { object-fit: cover; }

/* Editor de enquadramento em modal (edição do aluno) */
.photo-framing-stage {
  touch-action: none;
  display: block;
  line-height: 0;
  cursor: grab;
  outline-offset: 2px;
}
.photo-framing-stage:active { cursor: grabbing; }
.photo-framing-stage:focus-visible { outline: 2px solid #C5A059; }
.photo-framing-stage[data-empty] { cursor: default; touch-action: auto; }

.photo-framing-stage-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--avatar-x, 50%) var(--avatar-y, 50%);
  transform: scale(var(--avatar-zoom, 1));
  transform-origin: var(--avatar-x, 50%) var(--avatar-y, 50%);
  will-change: object-position, transform;
}

dialog.photo-framing-dialog {
  display: none;
  border: 1px solid var(--color-border, rgba(197, 160, 89, 0.3));
  background-color: var(--color-card, #ffffff);
  color: var(--color-foreground, #070e1a);
  border-radius: 1rem;
  padding: 0;
  max-width: 28rem;
  width: calc(100% - 2rem);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
dialog.photo-framing-dialog[open] {
  display: block;
}
dialog.photo-framing-dialog::backdrop {
  background-color: rgba(7, 14, 26, 0.80);
  backdrop-filter: blur(4px);
}