/* ==========================================================================
   Indicador flutuante da semana do ano

   Bolha fixa na borda direita, à meia altura da janela. O canto superior
   direito é ocupado pelo botão de exportação em PDF e a base pelo rodapé fixo
   dos decks de slides, de modo que a borda central permanece livre em todas as
   estruturas de página do acervo.

   Fechado, o elemento exibe apenas o número da semana. Aberto — por cursor,
   foco de teclado ou toque —, expande para a esquerda e revela `Semana x/y`.
   A expansão para a esquerda mantém a âncora à direita, de modo que o elemento
   nunca ultrapassa a borda da janela.

   Comportamento em js/semana-ano.js; injeção em scripts/apply-semana.mjs.
   ========================================================================== */

.semana-badge {
  --semana-fechado: 42px;
  --semana-aberto: 168px;

  position: fixed;
  top: 50%;
  right: 14px;
  z-index: 9998;
  transform: translateY(-50%);

  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--semana-fechado);
  height: var(--semana-fechado);
  padding: 0;
  overflow: hidden;

  border: 1px solid rgba(46, 38, 64, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(46, 38, 64, 0.14);

  color: #2e2640;
  font-family: 'Manrope', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;

  transition:
    width 0.24s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.24s ease;
}

.semana-badge__n {
  flex: 0 0 auto;
}

/* Os dois rótulos partem de largura zero para que a bolha fique circular no
   estado fechado, e não elíptica. */
.semana-badge__rotulo,
.semana-badge__total {
  flex: 0 0 auto;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition:
    max-width 0.24s cubic-bezier(0.2, 0.7, 0.3, 1),
    opacity 0.16s ease;
}

/* O espaço separa o rótulo do número; a fração permanece sem espaço, de modo
   que a leitura seja `Semana 37/53`. */
.semana-badge__rotulo {
  margin-right: 0;
  font-weight: 600;
  color: #635c78;
  transition:
    max-width 0.24s cubic-bezier(0.2, 0.7, 0.3, 1),
    margin-right 0.24s cubic-bezier(0.2, 0.7, 0.3, 1),
    opacity 0.16s ease;
}

.semana-badge__total {
  color: #635c78;
}

.semana-badge:hover,
.semana-badge:focus-visible,
.semana-badge[aria-expanded='true'] {
  width: var(--semana-aberto);
  box-shadow: 0 6px 20px rgba(46, 38, 64, 0.22);
}

.semana-badge:hover .semana-badge__rotulo,
.semana-badge:focus-visible .semana-badge__rotulo,
.semana-badge[aria-expanded='true'] .semana-badge__rotulo {
  max-width: 80px;
  margin-right: 5px;
  opacity: 1;
}

.semana-badge:hover .semana-badge__total,
.semana-badge:focus-visible .semana-badge__total,
.semana-badge[aria-expanded='true'] .semana-badge__total {
  max-width: 48px;
  opacity: 1;
}

.semana-badge:focus-visible {
  outline: 2px solid #855ede;
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .semana-badge {
    --semana-fechado: 38px;
    right: 10px;
    font-size: 0.76rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .semana-badge,
  .semana-badge__rotulo,
  .semana-badge__total {
    transition: none;
  }
}

/* O indicador é elemento de tela e não integra a página exportada. */
@media print {
  .semana-badge {
    display: none !important;
  }
}