/* =========================================================
   Navegação de competência
   ========================================================= */

.period-switch {
  min-height: 46px;

  padding: 5px;

  border-radius:
    var(--radius-md);

  display: flex;
  align-items: center;

  gap: 7px;

  color: var(--text-primary);

  background:
    var(--surface-card);

  box-shadow:
    var(--shadow-1);
}

.period-switch > div {
  min-width: 145px;

  text-align: center;
}

.period-switch small {
  display: block;

  color: var(--text-secondary);

  font-size: 11px;
  font-weight: 900;

  letter-spacing: .11em;

  text-transform: uppercase;
}

.period-switch strong {
  font-size: var(--font-size-sm);
}

.period-arrow {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  border-radius: 9px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--text-primary);

  background:
    var(--surface-muted);

  font-weight: 900;

  transition:
    color var(--motion-fast),
    background var(--motion-fast);
}

.period-arrow:hover {
  color: var(--brand-700);

  background: var(--brand-100);

  text-decoration: none;
}