/*
 * Estilos da plataforma.
 *
 * Fidelidade ao design é prioridade: cores, tipografia, espaçamentos, raios e
 * comportamento vieram do HTML aprovado. Todos os valores passam pelas
 * variáveis de tokens.css — não escreva cores ou tamanhos direto aqui.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * `hidden` precisa esconder de verdade. Sem isto, qualquer classe com
 * `display` (como .btn ou .bulk-bar) vence o estilo padrão do navegador: o
 * botão "Carregar mais" aparecia com a lista completa, e a barra
 * "0 registros marcados" ficava sempre visível no histórico.
 */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}
/* Rolagem suave para os atalhos da página — só para quem não pediu menos movimento. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--color-canvas-parchment);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  letter-spacing: var(--text-body-tracking);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  color: var(--color-primary-focus);
  text-decoration: underline;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

::placeholder {
  color: var(--color-ink-muted-48);
}

/* Foco sempre visível: a plataforma precisa ser usável só com o teclado. */
:focus-visible {
  outline: 2px solid var(--color-primary-focus);
  outline-offset: 2px;
}

/* Só para leitores de tela. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Pular direto para o conteúdo (primeiro Tab da página). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-canvas);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

/* Respeita quem prefere menos movimento. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================================
   Barra preta superior (global nav)
   ===================================================================== */

.global-nav {
  height: var(--height-global-nav);
  background: var(--color-surface-black);
  color: var(--color-on-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0 var(--gutter);
}

.global-nav__brand {
  font-size: var(--text-fine-size);
  line-height: 1;
  letter-spacing: var(--text-fine-tracking);
  color: var(--color-on-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.global-nav__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.global-nav__user {
  font-size: var(--text-fine-size);
  line-height: 1;
  letter-spacing: var(--text-fine-tracking);
  color: var(--color-on-dark-muted);
  white-space: nowrap;
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-mode {
  flex: none;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-status-rescheduled-bg);
  color: var(--color-status-rescheduled-fg);
  font-size: var(--text-micro-size);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  white-space: nowrap;
}

/* =====================================================================
   Barra de navegação da tela (sub-nav com vidro fosco)
   ===================================================================== */

.sub-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: var(--height-sub-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-xs) var(--gutter);
  background: rgba(245, 245, 247, 0.8);
  backdrop-filter: var(--blur-frosted);
  -webkit-backdrop-filter: var(--blur-frosted);
  border-bottom: 1px solid var(--color-hairline-soft);
}

.sub-nav__title {
  font-size: var(--text-tagline-size);
  font-weight: var(--weight-semibold);
  line-height: 1.19;
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.sub-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  margin-right: var(--space-xs);
}

.tab {
  height: var(--height-control-sm);
  padding: 0 var(--space-md);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-ink-muted-80);
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-tracking);
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}
.tab:hover {
  background: rgba(255, 255, 255, 0.6);
}
.tab[aria-selected='true'] {
  background: var(--color-canvas);
  border-color: var(--color-hairline);
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
}

/* =====================================================================
   Botões
   ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--transition-fast),
    background-color var(--transition-base),
    border-color var(--transition-base);
}
.btn:active:not(:disabled) {
  transform: scale(var(--press-scale));
}
.btn:disabled {
  cursor: not-allowed;
}

/* Ação principal: pílula azul. É a assinatura do sistema. */
.btn--primary {
  height: var(--height-control-sm);
  padding: 0 var(--space-lg);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-dark);
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-tracking);
}
.btn--primary:hover:not(:disabled) {
  background: var(--color-primary-focus);
}
.btn--primary:disabled {
  background: var(--color-canvas-parchment);
  color: var(--color-ink-muted-48);
}

.btn--primary-lg {
  height: var(--height-input);
  padding: 0 var(--space-lg);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-dark);
  font-size: var(--text-body-size);
  letter-spacing: var(--text-body-tracking);
}
.btn--primary-lg:hover:not(:disabled) {
  background: var(--color-primary-focus);
}
.btn--primary-lg:disabled {
  background: var(--color-canvas-parchment);
  color: var(--color-ink-muted-48);
}

/* Utilitário escuro — usado na barra preta. */
.btn--dark {
  height: 28px;
  padding: 0 15px;
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-on-dark);
  font-size: var(--text-caption-size);
  line-height: 1;
  letter-spacing: var(--text-caption-tracking);
}
.btn--dark:hover {
  background: var(--color-ink-muted-80);
}

/* Cápsula clara — ações secundárias (‹ Hoje ›, filtros). */
.btn--pearl {
  height: var(--height-control-sm);
  padding: 0 var(--space-md);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface-pearl);
  color: var(--color-ink-muted-80);
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-tracking);
}
.btn--pearl:hover {
  background: var(--color-divider-soft);
}

.btn--icon {
  width: var(--height-control);
  height: var(--height-control-sm);
  padding: 0;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface-pearl);
  color: var(--color-ink);
  font-size: var(--text-body-size);
  line-height: 1;
}
.btn--icon:hover {
  background: var(--color-divider-soft);
}

/* Botão de texto — mesma cor de link, sem caixa. */
.btn--text {
  height: auto;
  padding: 0;
  background: transparent;
  color: var(--color-primary);
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-tracking);
}
.btn--text:hover {
  text-decoration: underline;
}
/*
 * Botão de ação com cor de significado: fundo claro, borda e texto na cor. É
 * botão de verdade — altura, borda e estado de hover —, mas sem competir com o
 * azul do botão principal da página.
 */
.btn--action {
  height: 36px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-pill);
  border: 1px solid var(--action-border);
  background: var(--action-bg);
  color: var(--action-fg);
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}
.btn--action:hover {
  background: var(--action-bg-hover);
  border-color: var(--action-fg);
}
.btn--action:focus-visible {
  outline: 2px solid var(--action-fg);
  outline-offset: 2px;
}
.btn--action-warning {
  --action-bg: var(--color-action-warning-bg);
  --action-bg-hover: var(--color-action-warning-bg-hover);
  --action-border: var(--color-action-warning-border);
  --action-fg: var(--color-action-warning-fg);
}
.btn--action-danger {
  --action-bg: var(--color-action-danger-bg);
  --action-bg-hover: var(--color-action-danger-bg-hover);
  --action-border: var(--color-action-danger-border);
  --action-fg: var(--color-action-danger-fg);
}

.btn--danger {
  color: var(--color-danger);
}

.btn--close {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--color-chip-translucent);
  color: var(--color-ink);
  font-size: var(--text-body-size);
  line-height: 1;
}

/* =====================================================================
   Estrutura da página
   ===================================================================== */

.app-main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 28px var(--gutter) 112px;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.page-title {
  font-family: var(--font-display);
  font-size: var(--text-display-md-size);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.6px;
  margin-bottom: 6px;
  text-wrap: balance;
}

.page-subtitle {
  color: var(--color-ink-muted-80);
  text-wrap: pretty;
}

.card {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
}

.card--padded {
  padding: var(--space-lg);
}

.section-title {
  font-size: var(--text-tagline-size);
  font-weight: var(--weight-semibold);
  line-height: 1.19;
  letter-spacing: -0.3px;
}

.muted {
  color: var(--color-ink-muted-48);
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-tracking);
}

.fine {
  font-size: var(--text-fine-size);
  line-height: 1.3;
  letter-spacing: var(--text-fine-tracking);
  color: var(--color-ink-muted-48);
}
/* Linha de apoio abaixo do rótulo de uma opção. */
.fine--block {
  display: block;
}
/* Texto de abertura de um modal: alinhado à esquerda, coisa de leitura. */
.state__text--left {
  text-align: left;
  margin-bottom: 12px;
}

/* =====================================================================
   Login
   ===================================================================== */

.login-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-canvas-parchment);
}

.login-bar {
  height: var(--height-global-nav);
  background: var(--color-surface-black);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.login-bar span {
  font-size: var(--text-fine-size);
  line-height: 1;
  letter-spacing: var(--text-fine-tracking);
  color: var(--color-on-dark);
}

.login-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xxl) var(--gutter);
}

.login-card {
  width: 100%;
  max-width: 392px;
}

.login-title {
  font-family: var(--font-display);
  font-size: var(--text-display-lg-size);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: -0.6px;
  margin-bottom: var(--space-sm);
  text-wrap: balance;
}

.login-lead {
  color: var(--color-ink-muted-80);
  margin-bottom: var(--space-xl);
  text-wrap: pretty;
}

.field {
  display: block;
  margin-bottom: var(--space-md);
}

.field__label {
  display: block;
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  line-height: 1.29;
  letter-spacing: var(--text-caption-tracking);
  margin-bottom: var(--space-xs);
}

.input {
  width: 100%;
  height: var(--height-input);
  padding: 0 var(--space-md);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-size: var(--text-body-size);
  letter-spacing: var(--text-body-tracking);
  outline: none;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}
.input:focus {
  border-color: var(--color-primary-focus);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.16);
}

/* Campo de várias linhas (uma agenda por linha, por exemplo). */
.input--area {
  height: auto;
  min-height: 76px;
  padding: 10px var(--space-md);
  line-height: 1.4;
  resize: vertical;
}

.input--search {
  height: var(--height-control);
  padding: 0 var(--space-md) 0 38px;
  border-radius: var(--radius-pill);
  border-color: var(--color-hairline-soft);
}

.select {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-sm);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-tracking);
  cursor: pointer;
  outline: none;
}
.select:focus {
  border-color: var(--color-primary-focus);
}

/* =====================================================================
   Grade da semana
   ===================================================================== */

.agenda-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: flex-start;
}

.agenda-grid-card {
  flex: 1 1 620px;
  min-width: 0;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/*
 * Cabeçalho da agenda em três faixas: semana e navegação; filtro de mentores;
 * legenda dos símbolos. Cada faixa separada por um traço fino, para o olho
 * saber onde uma coisa termina e a outra começa.
 */
.agenda-head {
  padding: var(--gutter) var(--gutter) var(--space-md);
  border-bottom: 1px solid var(--color-divider-soft);
}

.agenda-head__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-divider-soft);
}

.agenda-head__week {
  font-size: var(--text-tagline-size);
  font-weight: var(--weight-semibold);
  line-height: 1.19;
  letter-spacing: -0.3px;
}

.agenda-head__month {
  font-size: var(--text-caption-size);
  line-height: 1.43;
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-ink-muted-80);
}

/* Cartões de mesma largura, em grade: alinhados em colunas, sem degraus. */
.legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-xs);
}

.legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--legend-border, var(--color-hairline));
  background: var(--legend-tint, var(--color-canvas-parchment));
}

.dot {
  width: var(--space-xs);
  height: var(--space-xs);
  border-radius: var(--radius-pill);
  flex: none;
  background: var(--dot-color, var(--color-primary));
}
.dot--sm {
  width: 6px;
  height: 6px;
}

.legend__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  font-size: var(--text-fine-size);
  line-height: 1.3;
  letter-spacing: var(--text-fine-tracking);
  color: var(--legend-color, var(--color-ink));
}
/* O nome também quebra linha em vez de ser cortado ("Franciele Joe…"). */
.legend__name {
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}
/* O horário quebra linha em vez de ser cortado: "18:00–1…" não diz nada. */
.legend__hours {
  display: flex;
  flex-wrap: wrap;
  column-gap: 6px;
  opacity: 0.8;
}
.legend__range {
  white-space: nowrap;
}

/* A legenda também é o filtro de mentores da agenda. */
.legend-filter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}
.legend-filter__label {
  font-size: var(--text-fine-size);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-muted-80);
  text-transform: uppercase;
  letter-spacing: 0.2px;
}
.legend-filter__clear {
  height: auto;
  padding: 0;
  font-size: var(--text-fine-size);
}
.legend__item--toggle {
  font: inherit;
  /* Botão centraliza o texto por padrão; quando o nome quebra linha no
     celular, o texto precisa continuar alinhado à esquerda como na legenda. */
  text-align: left;
  cursor: pointer;
  transition:
    opacity var(--transition-fast),
    box-shadow var(--transition-fast);
}
.legend__item--toggle:hover {
  box-shadow: 0 0 0 1px var(--legend-color) inset;
}
.legend__item--toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* Marcado: borda na cor do mentor, para ler o filtro sem depender só do ✓. */
.legend__item--toggle[aria-pressed='true'] {
  border-color: var(--legend-color);
  box-shadow: 0 0 0 1px var(--legend-color) inset;
}
/* Com filtro ativo, quem ficou de fora esmaece — continua clicável para somar. */
.legend__item--off {
  opacity: 0.45;
}
/* Espaço do ✓ reservado sempre, para marcar não mexer na largura do nome. */
.legend__check {
  flex: none;
  width: 12px;
  font-size: var(--text-fine-size);
  font-weight: var(--weight-semibold);
  color: var(--legend-color);
}

.grid-scroll {
  overflow: auto;
  max-height: 660px;
  scrollbar-gutter: stable;
}

.grid-inner {
  min-width: 660px;
}

.grid-row {
  display: grid;
  grid-template-columns: 62px repeat(var(--day-count, 5), minmax(0, 1fr));
}

.grid-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-hairline);
}

.grid-header__day {
  padding: 10px 6px var(--space-xs);
  text-align: center;
  border-left: 1px solid var(--color-divider-soft);
}

.grid-header__dow {
  font-size: var(--text-fine-size);
  line-height: 1.2;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-ink-muted-48);
}

.grid-header__num {
  font-size: var(--text-tagline-size);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.grid-header__day--today .grid-header__dow,
.grid-header__day--today .grid-header__num {
  color: var(--color-primary);
}

.grid-body-row {
  border-bottom: 1px solid var(--color-divider-soft);
}
.grid-body-row--hour {
  border-bottom-color: #e6e6e6;
}

.grid-time {
  padding: 3px 10px 0 0;
  text-align: right;
  font-size: var(--text-fine-size);
  line-height: 1.2;
  letter-spacing: var(--text-fine-tracking);
  color: var(--color-ink-muted-48);
}

.grid-cell {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-left: 1px solid var(--color-divider-soft);
  min-height: 34px;
}

.grid-gap {
  display: grid;
  grid-template-columns: 62px repeat(var(--day-count, 5), minmax(0, 1fr));
  background: var(--color-surface-pearl);
  border-bottom: 1px solid var(--color-divider-soft);
}
.grid-gap__label,
.grid-gap__text {
  padding: var(--space-xxs) 10px;
  font-size: var(--text-micro-size);
  line-height: 1.3;
  color: var(--color-ink-muted-48);
}
.grid-gap__label {
  text-align: right;
  padding-left: 0;
}
.grid-gap__text {
  grid-column: 2 / -1;
}

/* Bloco de 30 minutos. Livre = cor clara com o nome do mentor.
   Ocupado = cor sólida com o identificador da startup. */
.slot {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: left;
  padding: 0 7px;
  border: 1px solid var(--slot-border, var(--color-hairline));
  border-radius: var(--radius-sm);
  background: var(--slot-bg, var(--color-canvas));
  color: var(--slot-fg, var(--color-ink));
  cursor: pointer;
  font-size: var(--text-fine-size);
  line-height: 1.2;
  letter-spacing: var(--text-fine-tracking);
  overflow: hidden;
  transition:
    transform var(--transition-fast),
    filter var(--transition-base);
}
.slot:hover:not(:disabled) {
  filter: brightness(0.96);
}
.slot:active:not(:disabled) {
  transform: scale(var(--press-scale));
}
.slot__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slot--booked {
  font-weight: var(--weight-semibold);
}

/*
 * Continuação: a segunda metade de um encontro de uma hora (mentoria de
 * diagnóstico). É o mesmo compromisso, então mantém a cor do mentor — mas fica
 * um pouco mais discreto, com a borda esquerda tracejada, para a semana não
 * parecer ter duas mentorias ali.
 */
.slot--continua {
  opacity: 0.85;
  border-left: 2px dashed rgba(255, 255, 255, 0.65);
  font-weight: var(--weight-regular);
}

/*
 * Símbolo do prontuário no bloco ocupado: círculo branco com o sinal na cor do
 * aviso, para ser legível sobre a cor sólida de qualquer mentor. Nunca é só cor:
 * o sinal muda (! ou ⊘) e o leitor de tela recebe o texto no aria-label.
 */
.slot__flag {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: auto;
  border-radius: 50%;
  background: #ffffff;
  font-size: 11px;
  font-weight: var(--weight-bold);
  line-height: 1;
}
.slot__flag--missing {
  background: var(--color-action-danger-fg);
  color: #ffffff;
  box-shadow: 0 0 0 1.5px #ffffff;
}

/*
 * Nada preenchido no prontuário: o pior caso (conta como no-show). O bloco
 * inteiro ganha um contorno vermelho por dentro — por dentro para não ser
 * cortado pela célula da grade — além do símbolo sólido.
 */
.slot--prontuario-vazio {
  outline: 2px solid var(--color-action-danger-fg);
  outline-offset: -2px;
}
.slot__flag--incomplete {
  color: var(--color-warning-fg);
  box-shadow: 0 0 0 1px var(--color-warning-fg) inset;
  font-size: 10px;
}
.slot__flag--no-show {
  color: var(--color-status-no-show-fg);
  box-shadow: 0 0 0 1px var(--color-status-no-show-fg) inset;
}

/* Chave dos símbolos, abaixo da legenda — só aparece quando há algum. */
.flag-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-divider-soft);
  font-size: var(--text-fine-size);
  color: var(--color-ink-muted-80);
}
.flag-key__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.flag-key__item .slot__flag {
  margin-left: 0;
}
.slot--past,
.slot--blocked {
  cursor: default;
  opacity: 0.45;
}
.slot--past:hover,
.slot--blocked:hover {
  filter: none;
}

/* Versão do celular: um dia por vez, em lista. */
.day-chips {
  display: flex;
  gap: 6px;
  padding: 14px var(--space-md);
  overflow-x: auto;
  border-bottom: 1px solid var(--color-divider-soft);
}

.day-chip {
  flex: none;
  min-width: 60px;
  padding: var(--space-xs) 10px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface-pearl);
  color: var(--color-ink);
  cursor: pointer;
  text-align: center;
  transition: background-color var(--transition-base);
}
.day-chip[aria-pressed='true'] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-dark);
}
.day-chip__dow {
  display: block;
  font-size: var(--text-fine-size);
  line-height: 1.2;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.7;
}
.day-chip__num {
  display: block;
  font-size: var(--text-body-size);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: var(--text-body-tracking);
}

.mobile-slots {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
}

.mobile-slot {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid var(--slot-border, var(--color-hairline));
  border-radius: var(--radius-md);
  background: var(--slot-bg, var(--color-canvas));
  color: var(--slot-fg, var(--color-ink));
  cursor: pointer;
  text-align: left;
  transition:
    transform var(--transition-fast),
    filter var(--transition-base);
}
.mobile-slot:active:not(:disabled) {
  transform: scale(0.98);
}
.mobile-slot__time {
  flex: none;
  width: 92px;
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  line-height: 1.29;
  letter-spacing: var(--text-caption-tracking);
}
.mobile-slot__body {
  min-width: 0;
  flex: 1;
}
.mobile-slot__line1 {
  display: block;
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  line-height: 1.29;
  letter-spacing: var(--text-caption-tracking);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-slot__line2 {
  display: block;
  font-size: var(--text-fine-size);
  line-height: 1.3;
  letter-spacing: var(--text-fine-tracking);
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =====================================================================
   Próximas mentorias
   ===================================================================== */

.side-panel {
  flex: 1 1 300px;
  min-width: 0;
}

.side-panel__inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/*
 * No computador o painel tem a altura da grade, e a lista rola por dentro.
 *
 * O truque é a camada interna posicionada: sem ela, uma lista de vinte e tantas
 * mentorias esticava a linha inteira e a grade ia junto. Com o conteúdo fora do
 * fluxo, quem define a altura da linha é a grade — o painel a acompanha, e a
 * lista ganha a barra de rolagem. No celular (até 899px) o painel volta a fluir
 * embaixo da grade, com a altura do próprio conteúdo.
 */
@media (min-width: 900px) {
  .agenda-layout {
    align-items: stretch;
  }
  .side-panel {
    position: relative;
    /* Piso para a semana sem disponibilidade não espremer a lista. */
    min-height: 420px;
  }
  .side-panel__inner {
    position: absolute;
    inset: 0;
  }
  .upcoming-list {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    scrollbar-gutter: stable;
    /* Respiro para o cartão não encostar na barra de rolagem. */
    padding-right: var(--space-xxs);
  }
}

.side-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.upcoming-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.upcoming-card {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.upcoming-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.upcoming-card__mentor {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  font-size: var(--text-caption-size);
  line-height: 1.29;
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-ink-muted-80);
}
.upcoming-card__mentor span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upcoming-card__startup {
  font-size: var(--text-body-size);
  font-weight: var(--weight-semibold);
  line-height: 1.24;
  letter-spacing: var(--text-body-tracking);
  word-break: break-word;
  margin-bottom: 6px;
}

.upcoming-card__when {
  font-size: var(--text-caption-size);
  line-height: 1.43;
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-ink-muted-80);
}

/* Pé do cartão: as duas ações lado a lado, com o mesmo tamanho. */
.upcoming-card__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-divider-soft);
}
.upcoming-card__actions:empty {
  display: none;
}

.status-pill {
  flex: none;
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-fine-size);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: var(--text-fine-tracking);
  background: var(--color-status-processing-bg);
  color: var(--color-status-processing-fg);
}
.status-pill--scheduled {
  background: var(--color-status-scheduled-bg);
  color: var(--color-status-scheduled-fg);
}
.status-pill--done {
  background: var(--color-status-done-bg);
  color: var(--color-status-done-fg);
}
.status-pill--cancelled {
  background: var(--color-status-cancelled-bg);
  color: var(--color-status-cancelled-fg);
}
.status-pill--rescheduled {
  background: var(--color-status-rescheduled-bg);
  color: var(--color-status-rescheduled-fg);
}
.status-pill--failed {
  background: var(--color-status-failed-bg);
  color: var(--color-status-failed-fg);
}
/* Selo que também é botão (marcar desfecho): mantém a aparência do selo. */
.status-pill--action {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: filter var(--transition-fast);
}
.status-pill--action:hover {
  filter: brightness(0.94);
}

.status-pill--no-show {
  background: var(--color-status-no-show-bg);
  color: var(--color-status-no-show-fg);
}
.status-pill--vazio {
  background: var(--color-action-danger-fg);
  color: #ffffff;
}
.status-pill--moved {
  background: var(--color-status-moved-bg);
  color: var(--color-status-moved-fg);
}

/*
 * Prontuário no histórico. Mesmos símbolos dos blocos da agenda, e cores que
 * separam o que está em dia (verde), o que falta cobrar (amarelo e vermelho) e
 * o que ninguém conseguiu conferir (cinza).
 */
.prontuario-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 4px;
  border-radius: var(--radius-pill);
  font-size: var(--text-fine-size);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: var(--text-fine-tracking);
  white-space: nowrap;
  background: var(--color-canvas-parchment);
  color: var(--color-ink-muted-80);
}
/* Selo que vira botão (administradores): mesma aparência, com resposta ao toque. */
.prontuario-pill--action {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: filter var(--transition-fast);
}
.prontuario-pill--action:hover {
  filter: brightness(0.94);
}
.prontuario-pill__simbolo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  box-shadow: 0 0 0 1px currentColor inset;
}
.prontuario-pill--registered {
  background: var(--color-status-done-bg);
  color: var(--color-status-done-fg);
}
/*
 * Preenchimento tardio: o registro existe, então conta como preenchido — o
 * contorno é o que diz que ele chegou depois da cobrança.
 */
.prontuario-pill--late {
  background: var(--color-status-done-bg);
  color: var(--color-status-done-fg);
  box-shadow: 0 0 0 1px currentColor inset;
}
.prontuario-pill--incomplete {
  background: var(--color-warning-bg);
  color: var(--color-warning-fg);
}
/* O pior caso é o único selo sólido da coluna: tem de saltar aos olhos. */
.prontuario-pill--missing {
  background: var(--color-action-danger-fg);
  color: #ffffff;
}
.prontuario-pill--no-show {
  background: var(--color-status-no-show-bg);
  color: var(--color-status-no-show-fg);
}
/* Não conferido é ausência de informação, não problema: contorno, sem fundo. */
.prontuario-pill--unchecked {
  background: transparent;
  box-shadow: 0 0 0 1px var(--color-hairline) inset;
}

/*
 * Destaque do histórico: as mentorias dos dois dias úteis anteriores. Uma
 * coluna por dia, a mais recente primeiro; no celular, uma embaixo da outra.
 */
.recentes {
  margin-bottom: var(--space-lg);
}
.recentes__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.recentes__head .fine {
  margin: 2px 0 0;
}
.recentes__total {
  flex: none;
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-muted-80);
}
.recentes__dias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-md);
}
.recentes__dia {
  min-width: 0;
  padding: var(--space-md);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  background: var(--color-canvas);
}
.recentes__dia-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-xxs);
  border-bottom: 1px solid var(--color-divider-soft);
}
.recentes__dia-titulo {
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.recentes__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.recentes__vazio {
  margin: var(--space-sm) 0 0;
}
.recent-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.recent-item + .recent-item {
  margin-top: 2px;
}
.recent-item:hover {
  background: var(--color-surface-pearl);
}
.recent-item:focus-visible {
  outline: 2px solid var(--color-primary-focus);
  outline-offset: 1px;
}
.recent-item__time {
  align-self: start;
  padding-top: 1px;
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
.recent-item__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.recent-item__startup {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.recent-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.recent-item__mentor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 2px;
  font-size: var(--text-fine-size);
  color: var(--color-ink-muted-80);
}
/* Atalho do prontuário: um ícone discreto, que acende ao passar o mouse. */
.recent-item__sheet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  color: var(--color-ink-muted-48);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}
.recent-item__sheet:hover {
  background: var(--color-primary-tint);
  color: var(--color-primary);
}
.recent-item__sheet:focus-visible {
  outline: 2px solid var(--color-primary-focus);
  outline-offset: 1px;
}
/* O pior caso do prontuário também se destaca aqui, como na lista. */
.recent-item--alerta {
  background: var(--color-action-danger-bg);
  box-shadow: inset 3px 0 0 var(--color-action-danger-fg);
}
.recent-item--alerta:hover {
  background: var(--color-action-danger-bg-hover);
}
.recent-item--alerta .status-pill--no-show {
  background: var(--color-canvas);
  box-shadow: 0 0 0 1px var(--color-action-danger-border) inset;
}
@media (max-width: 599px) {
  .recentes__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .recentes__dias {
    grid-template-columns: 1fr;
  }
}

/*
 * Desempenho por mentor (Histórico, sem filtro de mentor). Uma linha por
 * mentor: nome, a barra dividida pelas categorias — com o número de cada uma
 * DENTRO da parte dela — e o total.
 */
.perf {
  margin-bottom: var(--space-lg);
  padding: var(--gutter);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  background: var(--color-canvas);
}
.perf__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}
.perf__head .fine {
  margin: -4px 0 0;
}
/* Seletor de período do cartão: pílulas compactas, como as abas. */
.perf__periodos {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-canvas-parchment);
}
.perf__periodo {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-muted-80);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-caption-size);
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}
.perf__periodo:hover {
  color: var(--color-ink);
}
.perf__periodo[aria-pressed='true'] {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
  box-shadow: 0 0 0 1px var(--color-hairline);
}
.perf__periodo:focus-visible {
  outline: 2px solid var(--color-primary-focus);
  outline-offset: 2px;
}
.perf__vazio {
  margin: var(--space-sm) 0 0;
}
@media (max-width: 699px) {
  .perf__head {
    flex-direction: column;
  }
}

/*
 * Situação das mentorias do filtro, em faixa horizontal entre a barra de
 * filtros e a lista. Só aparece com algum filtro aplicado.
 */
.filtro-resumo {
  display: grid;
  grid-template-columns: minmax(160px, auto) repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-sm) var(--space-lg);
  padding: var(--space-md) var(--gutter);
  border-bottom: 1px solid var(--color-divider-soft);
  background: var(--color-surface-pearl);
  animation: fade-in 0.24s ease-out;
}
.filtro-resumo__total {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.filtro-resumo__titulo {
  font-size: var(--text-fine-size);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-muted-80);
}
.filtro-resumo__total .metric__value {
  font-size: var(--text-display-md-size);
}
.filtro-resumo__item .rank-row__top {
  margin-bottom: 6px;
}
@media (max-width: 899px) {
  .filtro-resumo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .filtro-resumo__total {
    grid-column: 1 / -1;
  }
}
.perf__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin: var(--space-sm) 0 var(--space-md);
  padding: 0;
  list-style: none;
  font-size: var(--text-fine-size);
  color: var(--color-ink-muted-80);
}
.perf__legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.perf__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.perf__row {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr) 56px;
  align-items: center;
  gap: var(--space-md);
  padding: 10px 0;
  border-top: 1px solid var(--color-divider-soft);
}
.perf__row--head {
  padding: 0 0 6px;
  border-top: 0;
  font-size: var(--text-fine-size);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-muted-48);
}
.perf__rows {
  margin: 0;
  padding: 0;
}
.perf__mentor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.perf__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.perf__total {
  justify-self: end;
  font-size: var(--text-body-size);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
.perf__row--head .perf__total {
  font-size: var(--text-fine-size);
  color: var(--color-ink-muted-48);
}
.perf__track {
  display: flex;
  gap: 2px;
  height: 30px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  transform-origin: left;
  animation: grow-x 0.6s var(--ease-out) both;
}
/*
 * Cada parte é um contêiner: o número se adapta à largura que a parte tem.
 * Larga: "8 · 30%". Estreita: só "8". Estreitíssima: nada (fica no título que
 * aparece ao passar o mouse).
 */
.perf__segmento {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: var(--fatia, 1) 1 0;
  min-width: 4px;
  container-type: inline-size;
  color: #ffffff;
  cursor: default;
}
.perf__valor {
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--text-fine-size);
  font-variant-numeric: tabular-nums;
}
.perf__valor strong {
  font-size: var(--text-caption-size);
  font-weight: var(--weight-bold);
}
.perf__pct {
  opacity: 0.85;
}
@container (max-width: 64px) {
  .perf__pct {
    display: none;
  }
}
@container (max-width: 16px) {
  .perf__valor {
    display: none;
  }
}
/* Cores por categoria: fundo na barra e na legenda. */
.perf__segmento.perf--registered,
.perf__swatch.perf--registered {
  background: var(--color-perf-registered);
}
.perf__segmento.perf--incomplete,
.perf__swatch.perf--incomplete {
  background: var(--color-perf-incomplete);
}
.perf__segmento.perf--scheduled,
.perf__swatch.perf--scheduled {
  background: var(--color-perf-scheduled);
}
.perf__segmento.perf--moved,
.perf__swatch.perf--moved {
  background: var(--color-perf-moved);
}
.perf__segmento.perf--noShow,
.perf__swatch.perf--noShow {
  background: var(--color-perf-no-show);
}
/* O pior caso é o único listrado: salta aos olhos mesmo sem cor. As listras são
   escuras o bastante para o número branco continuar legível. */
.perf__segmento.perf--missing,
.perf__swatch.perf--missing {
  background: repeating-linear-gradient(
    135deg,
    var(--color-perf-missing) 0 5px,
    color-mix(in srgb, var(--color-perf-missing) 78%, #ffffff) 5px 9px
  );
}
.perf__segmento.perf--other {
  background: var(--color-perf-other);
}
/* Fundos claros levam número escuro. */
.perf__segmento.perf--incomplete,
.perf__segmento.perf--other {
  color: var(--color-ink);
}
@media (max-width: 699px) {
  .perf__row--head {
    display: none;
  }
  .perf__row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 8px;
  }
  .perf__track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* No alerta de nada preenchido: de quem são, com a fatia de cada mentor. */
.vazio-mentores {
  margin-top: var(--space-sm);
}
.vazio-mentores__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-fine-size);
  font-weight: var(--weight-semibold);
  color: var(--color-action-danger-fg);
}
.vazio-mentores__bar {
  display: flex;
  gap: 2px;
  max-width: 560px;
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius-pill);
}
.vazio-mentores__fatia {
  flex: var(--fatia, 1) 1 0;
  min-width: 3px;
  background: var(--dot-color);
}
/* Mentores que a pessoa não acompanha: uma fatia cinza, sem nome. */
.vazio-mentores__fatia--outros {
  background: var(--color-perf-other);
}
.vazio-mentores__item--outros .dot {
  background: var(--color-perf-other);
}
.vazio-mentores__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-md);
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-fine-size);
  color: var(--color-ink-muted-80);
}
.vazio-mentores__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vazio-mentores__item strong {
  color: var(--color-ink);
}
.vazio-mentores__n {
  color: var(--color-ink-muted-48);
}

/* Linha do histórico com nada preenchido no prontuário. */
.table__row--alerta {
  background: var(--color-action-danger-bg);
  box-shadow: inset 3px 0 0 var(--color-action-danger-fg);
}
.table__row--alerta:hover {
  background: var(--color-action-danger-bg-hover);
}
/* O selo de no-show tem o mesmo fundo da linha: branco, para não sumir. */
.table__row--alerta .status-pill--no-show {
  background: var(--color-canvas);
  box-shadow: 0 0 0 1px var(--color-action-danger-border) inset;
}

/*
 * Alerta do topo do histórico: quantas mentorias estão sem nada no prontuário,
 * com o atalho para listá-las. Fica antes da tabela, porque a linha em si pode
 * estar em outra página.
 */
.alerta-vazio {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding: var(--space-md) var(--gutter);
  border: 1px solid var(--color-action-danger-border);
  border-left: 4px solid var(--color-action-danger-fg);
  border-radius: var(--radius-lg);
  background: var(--color-action-danger-bg);
  color: var(--color-action-danger-fg);
}
.alerta-vazio__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-action-danger-fg);
  color: #ffffff;
  font-size: 20px;
  font-weight: var(--weight-bold);
}
.alerta-vazio__body {
  flex: 1;
  min-width: 0;
}
.alerta-vazio__title {
  display: block;
  font-size: var(--text-body-size);
}
.alerta-vazio__text {
  margin: 2px 0 0;
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-ink-muted-80);
}
.alerta-vazio__action {
  flex: none;
  height: var(--height-control);
  padding: 0 18px;
  border: 0;
  background: var(--color-action-danger-fg);
  color: #ffffff;
  font-weight: var(--weight-semibold);
}
.alerta-vazio__action:hover {
  filter: brightness(0.92);
}
.alerta-vazio__tag {
  flex: none;
  font-size: var(--text-fine-size);
  font-weight: var(--weight-semibold);
}
@media (max-width: 599px) {
  .alerta-vazio {
    flex-wrap: wrap;
  }
  .alerta-vazio__action {
    width: 100%;
  }
}

.alert-inline {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-top: 10px;
  padding: var(--space-xs) 10px;
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-sm);
  background: var(--color-warning-bg);
  color: var(--color-warning-fg);
  font-size: var(--text-fine-size);
  line-height: 1.3;
  letter-spacing: var(--text-fine-tracking);
}

/* =====================================================================
   Histórico
   ===================================================================== */

.metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
  margin-bottom: var(--space-lg);
}

.metric {
  flex: 1 1 232px;
  min-width: 0;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--gutter);
}

.metric__label {
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  line-height: 1.29;
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-ink-muted-80);
  margin-bottom: 10px;
}

.metric__value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 14px;
}

.metric__value {
  font-family: var(--font-display);
  font-size: var(--text-display-lg-size);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -1px;
}

.metric__unit {
  font-size: var(--text-body-size);
  line-height: 1.24;
  letter-spacing: var(--text-body-tracking);
  color: var(--color-ink-muted-48);
}

.rank-row {
  margin-bottom: 10px;
}
.rank-row:last-child {
  margin-bottom: 0;
}
.rank-row__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  font-size: var(--text-caption-size);
  line-height: 1.29;
  letter-spacing: var(--text-caption-tracking);
}
.rank-row__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-row__count {
  flex: none;
  font-weight: var(--weight-semibold);
}
/*
 * Dois números em destaque lado a lado: as realizadas com prontuário
 * preenchido (o que se quer ver crescer) e o total do período.
 */
.metric__duo {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}
.metric__destaque {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.metric__destaque .metric__value {
  color: var(--color-status-done-fg);
}
.metric__destaque--total {
  padding-left: var(--space-md);
  border-left: 1px solid var(--color-divider-soft);
}
.metric__destaque--total .metric__value {
  color: var(--color-ink);
}
/* Agendamentos: os dois meses têm o mesmo peso — nenhum é "o principal". */
.metric__duo--agenda .metric__destaque .metric__value {
  color: var(--color-ink);
}
/* Os dois meses dividem a largura por igual; "agendamentos em" numa linha,
   "setembro/2026" na outra. */
.metric__duo--agenda .metric__destaque {
  flex: 1 1 0;
}
.metric__duo--agenda .metric__duo-label {
  max-width: 16ch;
}
.metric__duo--agenda + .fine {
  margin-top: 6px;
}
.metric__duo-label {
  max-width: 12ch;
  margin-top: 2px;
  font-size: var(--text-fine-size);
  line-height: 1.3;
  color: var(--color-ink-muted-48);
}
/* Gráfico de situação dentro de um cartão de indicador. */
.metric__chart {
  margin-top: 10px;
}
.metric__caption {
  margin-top: var(--space-xs);
}

.rank-row__track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-divider-soft);
  overflow: hidden;
}
.rank-row__fill {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}
/*
 * Cores por categoria no gráfico de situação (sempre com número ao lado).
 * Vêm DEPOIS da regra geral da barra: antes, a regra geral vinha por último e
 * pintava as três de azul.
 */
.rank-row__fill--done {
  background: var(--color-status-done-fg);
}
.rank-row__fill--no-show {
  background: var(--color-status-no-show-fg);
}
.rank-row__fill--scheduled {
  background: var(--color-status-scheduled-fg);
}
.rank-row__fill--moved {
  background: var(--color-status-moved-fg);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: flex-end;
  padding: var(--gutter);
  border-bottom: 1px solid var(--color-divider-soft);
}

.filters__field {
  display: block;
  /* 150px: com os seis filtros, o "Exportar" ainda cabe na mesma linha a 1280px. */
  flex: 1 1 150px;
  min-width: 0;
}

.filters__label {
  display: block;
  font-size: var(--text-fine-size);
  line-height: 1.3;
  letter-spacing: var(--text-fine-tracking);
  color: var(--color-ink-muted-48);
  margin-bottom: 6px;
}

.table-scroll {
  overflow-x: auto;
}

.table {
  min-width: 1000px;
}
.table--selectable {
  min-width: 1040px;
}

.table__head,
.table__row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr) 112px 118px 86px 128px 140px;
  gap: var(--space-sm);
  padding: 13px var(--gutter);
  align-items: center;
}

/* Com seleção (só administradores), entra uma coluna de caixas na frente. */
.table--selectable .table__head,
.table--selectable .table__row {
  grid-template-columns: 28px minmax(0, 1.7fr) minmax(0, 1.1fr) 112px 118px 86px 128px 140px;
}

.table--selectable input[type='checkbox'] {
  width: 17px;
  height: 17px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-primary);
}

/* Barra de ações em lote: aparece só quando há registros marcados. */
.bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-sm) var(--gutter);
  background: var(--color-surface-pearl);
  border-bottom: 1px solid var(--color-hairline);
}

.bulk-bar__count {
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}

.bulk-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.table__head {
  padding: var(--space-sm) var(--gutter);
  background: var(--color-canvas-parchment);
  border-bottom: 1px solid var(--color-hairline);
  font-size: var(--text-fine-size);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--color-ink-muted-80);
}

.table__row {
  border-bottom: 1px solid var(--color-divider-soft);
  font-size: var(--text-caption-size);
  line-height: 1.29;
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-ink-muted-80);
  transition: background-color var(--transition-fast);
}
.table__row:hover {
  background: var(--color-surface-pearl);
}

.table__startup {
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table__mentor {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}
.table__mentor span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table__foot {
  padding: 14px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  justify-content: space-between;
}

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* =====================================================================
   Administração
   ===================================================================== */

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

/*
 * Grade de cartões da administração.
 *
 * `align-items: start` é o que impede um cartão alto de esticar os vizinhos —
 * cada um fica na própria altura natural. O cartão de disponibilidade é o mais
 * denso da página e ocupa duas colunas quando há espaço.
 */
/*
 * Grade de cartões da administração.
 *
 * `align-items: stretch` (o padrão) é proposital: os dois cartões de uma linha
 * ficam com a MESMA altura, e o rodapé de cada um encosta na base. Com
 * `start`, cada cartão ficava na altura natural do conteúdo e a linha terminava
 * torta — chegava a sobrar 450px de vazio ao lado de um cartão curto.
 *
 * Para isso funcionar, todo cartão segue a mesma anatomia: cabeçalho, corpo que
 * estica e rodapé fixo na base (ver `.admin-card`).
 */
/*
 * Cartão de prontuários.
 *
 * O corpo é uma coluna: controles no topo e o relatório embaixo, ocupando a
 * altura que sobra. As listas rolam DENTRO das colunas — sem isso, 30 dias de
 * resultado passavam do teto de 640px do cartão e vazavam sobre os cartões de
 * baixo.
 */
.prontuario-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-height: 0;
}

.prontuario-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-sm) var(--space-md);
}
.prontuario-controls__group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-xs);
}
.prontuario-controls .btn {
  height: var(--height-control);
}
/* O traço só separa os dois grupos quando eles cabem na mesma linha; quando o
   período desce para a linha de baixo, ele sobraria solto no fim da primeira. */
.prontuario-controls__divider {
  display: none;
  align-self: stretch;
  width: 1px;
  background: var(--color-divider-soft);
}
@media (min-width: 1200px) {
  .prontuario-controls__divider {
    display: block;
  }
}
.prontuario-controls__date {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prontuario-controls__date .input {
  width: 168px;
  height: var(--height-control);
}

.prontuario-report {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
  min-height: 0;
}
.prontuario-report__summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Um grupo por coluna; quantas couberem, com no mínimo 240px cada. */
.prontuario-report__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-sm);
  flex: 1;
  min-height: 0;
}
.prontuario-report__group {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.prontuario-report__title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--color-canvas-parchment);
  border-bottom: 1px solid var(--color-hairline);
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
}
/* Na varredura, o grupo do pior caso vem primeiro e em vermelho. */
.prontuario-report__group--vazio {
  border-color: var(--color-action-danger-border);
}
.prontuario-report__group--vazio .prontuario-report__title {
  background: var(--color-action-danger-bg);
  color: var(--color-action-danger-fg);
  border-bottom-color: var(--color-action-danger-border);
}

.prontuario-report__title .slot__flag {
  margin-left: 0;
}
.prontuario-report__count {
  margin-left: auto;
  color: var(--color-ink-muted-80);
}
.prontuario-report__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 240px;
  overflow: auto;
  scrollbar-gutter: stable;
}
.prontuario-report__item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-divider-soft);
}
.prontuario-report__item:last-child {
  border-bottom: 0;
}
.prontuario-report__startup {
  font-size: var(--text-caption-size);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

@media (max-width: 599px) {
  .prontuario-controls__date {
    flex: 1 1 140px;
  }
  .prontuario-controls__date .input {
    width: 100%;
  }
}

.slot__flag--unreadable {
  color: var(--color-ink-muted-80);
  box-shadow: 0 0 0 1px var(--color-ink-muted-80) inset;
}

.admin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

/*
 * Duas colunas é o teto de propósito.
 *
 * Esta página é feita de formulários e listas, não de blocos de painel. Com
 * três colunas os cartões ficam estreitos demais para uma linha como
 * "08:00–09:00 · Seg Ter Qua Qui Sex · Remover", que passa a quebrar. Com duas,
 * cada cartão recebe cerca de 690px — largura confortável para ler e preencher —
 * e nenhum cartão precisa ocupar mais de uma coluna, o que evitaria buracos na
 * grade.
 */
@media (min-width: 1024px) {
  .admin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
   * Teto de altura do cartão.
   *
   * É ele que impede um cartão de 30 linhas dominar a grade. Como a altura da
   * linha é a maior das duas alturas naturais, e nenhuma passa daqui, o
   * resultado é uma página de alturas parecidas — com as listas preenchendo o
   * espaço que a esticada deu, em vez de deixarem buraco.
   *
   * Só no desktop: no celular, rolagem dentro de rolagem atrapalha mais do que
   * ajuda, e os cartões ficam empilhados mesmo.
   */
  .admin-card {
    max-height: 640px;
  }
}

/* Cartão em coluna: cabeçalho, corpo elástico e rodapé na base. */
.admin-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

/* O corpo absorve a sobra de altura; o rodapé fica sempre embaixo. */
.admin-card__body {
  flex: 1;
  min-height: 0;
  margin-top: var(--space-md);
}

/* O primeiro campo do corpo não precisa do espaço de topo do próprio campo. */
.admin-card__body > .field:first-child {
  margin-top: 0;
}

.admin-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-divider-soft);
}

/*
 * Formulário de liberar usuário.
 *
 * Os três controles tinham alturas diferentes (campo 48px, seletor 40px, botão
 * 36px). Alinhados pela base, os rótulos terminavam em degraus. Aqui eles
 * compartilham a mesma altura e a mesma linha de base.
 */
.admin-add-user {
  display: grid;
  /* O campo de e-mail precisa caber um endereço inteiro; por isso o botão
     desce para a própria linha quando a coluna é estreita. */
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: var(--space-sm);
  align-items: end;
}

.admin-add-user > .btn {
  grid-column: 1 / -1;
  justify-self: start;
}

@media (min-width: 1280px) {
  .admin-add-user {
    grid-template-columns: minmax(0, 1fr) 140px auto;
  }
  .admin-add-user > .btn {
    grid-column: auto;
  }
}

.admin-add-user .input,
.admin-add-user .select,
.admin-add-user .btn {
  height: var(--height-control);
}

.admin-add-user .filters__label {
  margin-bottom: 6px;
}

@media (max-width: 599px) {
  .admin-add-user {
    grid-template-columns: 1fr;
  }
}

/*
 * Corpo com rolagem própria. O rodapé fica FORA da área rolável, então o botão
 * de ação continua sempre visível — é o que evita a pessoa rolar até o fim para
 * achar "Salvar".
 */
.admin-card__body--scroll {
  overflow: auto;
  scrollbar-gutter: stable;
  /* Respiro para o conteúdo não encostar na barra de rolagem. */
  padding-right: var(--space-xxs);
}

/* Cartões cujo conteúdo é largo ocupam a linha inteira. */
.admin-card--largo {
  grid-column: 1 / -1;
}

@media (max-width: 1023px) {
  .admin-card--largo {
    grid-column: auto;
  }
}

/*
 * Lista que cresce sem limite: ela PREENCHE o corpo do cartão e rola dentro dele.
 *
 * O teto de altura fica no cartão (`.admin-card`), não aqui. Com um teto na
 * própria lista, ela parava em 264px dentro de um corpo de 491px e sobrava um
 * buraco embaixo — que foi exatamente o que aconteceu no cartão de auditoria.
 */
.admin-list--scroll {
  height: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
}

/*
 * Quem acompanha cada mentor: tabela pessoa × mentor.
 *
 * O cabeçalho e a coluna dos e-mails ficam presos ao rolar — com dez pessoas e
 * seis colunas, sem isso a pessoa perde de vista de quem é a caixa que está
 * marcando. No celular a tabela rola para o lado dentro do cartão.
 */
.follow-table__wrap {
  overflow: auto;
}
.follow-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-tracking);
}
.follow-table th,
.follow-table td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-divider-soft);
  background: var(--color-canvas);
}
.follow-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  min-width: 112px;
  text-align: center;
  font-weight: 600;
  vertical-align: bottom;
  border-bottom-color: var(--color-hairline);
}
.follow-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 240px;
  text-align: left;
  font-weight: 400;
}
.follow-table thead .follow-table__corner {
  left: 0;
  z-index: 2;
  text-align: left;
}
/* A linha inteira acende: é o que guia o olho do e-mail até a caixa. */
.follow-table tbody tr:hover > * {
  background: var(--color-surface-pearl);
}
.follow-table td {
  text-align: center;
}
.follow-table input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.follow-table__mentor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.follow-table__count {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: var(--text-fine-size);
  letter-spacing: var(--text-fine-tracking);
  color: var(--color-ink-muted-80);
}
/* Mentor sem ninguém marcado cai no padrão — e isso precisa saltar aos olhos. */
.follow-table__count--default {
  color: var(--color-action-warning-fg);
}
.follow-table__email {
  overflow-wrap: anywhere;
}
/*
 * No celular a coluna dos e-mails, presa à esquerda, ocupava 240 dos 290px do
 * cartão e escondia as caixas. Estreita, o e-mail quebra em duas linhas e
 * sobra espaço para ver pelo menos uma coluna de mentor ao lado.
 */
@media (max-width: 599px) {
  .follow-table tbody th,
  .follow-table thead .follow-table__corner {
    min-width: 0;
    width: 132px;
    max-width: 132px;
  }
  .follow-table thead th {
    min-width: 96px;
  }
  .follow-table th,
  .follow-table td {
    padding: var(--space-xs);
  }
}
.follow-hint {
  margin-top: var(--space-sm);
}
.follow-status {
  margin-left: auto;
}

/* Auditoria: filtro no topo, uma ação por linha, com a categoria em etiqueta. */
.audit-filter {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.audit-filter .select {
  flex: 1;
  min-width: 0;
  height: var(--height-control);
}
.audit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.audit-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider-soft);
}
.audit-item:last-child {
  border-bottom: 0;
}
.audit-item__text {
  font-size: var(--text-caption-size);
  line-height: 1.35;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.audit-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-fine-size);
  font-weight: var(--weight-semibold);
  background: var(--color-status-processing-bg);
  color: var(--color-status-processing-fg);
}
.audit-tag--agendamento,
.audit-tag--importacao {
  background: var(--color-status-scheduled-bg);
  color: var(--color-status-scheduled-fg);
}
.audit-tag--reagendamento {
  background: var(--color-status-rescheduled-bg);
  color: var(--color-status-rescheduled-fg);
}
.audit-tag--cancelamento,
.audit-tag--exclusao {
  background: var(--color-status-cancelled-bg);
  color: var(--color-status-cancelled-fg);
}
.audit-tag--desfecho {
  background: var(--color-status-done-bg);
  color: var(--color-status-done-fg);
}

.admin-card__title {
  font-size: var(--text-tagline-size);
  font-weight: var(--weight-semibold);
  line-height: 1.19;
  letter-spacing: -0.3px;
  margin-bottom: var(--space-xs);
}

.admin-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--space-md);
}

.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider-soft);
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-tracking);
}
.admin-row:last-child {
  border-bottom: 0;
}

.tag {
  display: inline-block;
  padding: 2px var(--space-xs);
  border-radius: var(--radius-xs);
  background: var(--color-canvas-parchment);
  color: var(--color-ink-muted-80);
  font-size: var(--text-fine-size);
  letter-spacing: var(--text-fine-tracking);
}
.tag--provisional {
  background: var(--color-warning-bg);
  color: var(--color-warning-fg);
}
.tag--error {
  background: var(--color-status-cancelled-bg);
  color: var(--color-status-cancelled-fg);
}
.tag--ok {
  background: var(--color-status-done-bg);
  color: var(--color-status-done-fg);
}

/* Formulário de configurações em duas colunas, para o cartão não esticar. */
@media (min-width: 1024px) {
  .admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-lg);
  }
  .admin-form-grid > .admin-form-grid__full {
    grid-column: 1 / -1;
  }
}

/* ---- Disponibilidade: faixa de horário + dias da semana ---- */

.availability {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

/* Em duas colunas, os mentores ficam lado a lado em vez de empilhadas. */
@media (min-width: 1024px) {
  .availability {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md) var(--space-lg);
  }
  .availability__mentor + .availability__mentor {
    padding-top: 0;
    border-top: 0;
  }
}

.availability__mentor + .availability__mentor {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-divider-soft);
}

.availability__name {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: 10px;
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  line-height: 1.29;
  letter-spacing: var(--text-caption-tracking);
}

.availability__range {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: 6px 0;
}

.availability__time {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 0 0 auto;
  min-width: 124px;
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--text-caption-tracking);
  font-variant-numeric: tabular-nums;
}

.weekday-toggles {
  display: flex;
  gap: var(--space-xxs);
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.weekday-toggle {
  min-width: 42px;
  height: 30px;
  padding: 0 var(--space-xs);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-canvas);
  color: var(--color-ink-muted-48);
  font-size: var(--text-fine-size);
  letter-spacing: var(--text-fine-tracking);
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    transform var(--transition-fast);
}
.weekday-toggle:hover {
  border-color: var(--color-primary-border);
}
.weekday-toggle:active {
  transform: scale(var(--press-scale));
}

/* Dia ativo: o mesmo azul de ação usado em todo o sistema. */
.weekday-toggle[aria-pressed='true'] {
  background: var(--color-primary-tint);
  border-color: var(--color-primary-border);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

/*
 * Seleção destrutiva.
 *
 * No cartão e no modal de adicionar, chip azul quer dizer "o mentor atende".
 * No modal de remover, o chip marca o que vai ser apagado — usar azul ali faria
 * o mesmo visual significar duas coisas opostas. Por isso a seleção é vermelha.
 */
.weekday-toggles--danger .weekday-toggle[aria-pressed='true']:not(:disabled) {
  background: var(--color-status-cancelled-bg);
  border-color: var(--color-danger);
  color: var(--color-danger);
  font-weight: var(--weight-semibold);
}
.weekday-toggles--danger .weekday-toggle:not(:disabled):hover {
  border-color: var(--color-danger);
}

/* Botão de confirmação de uma ação destrutiva. */
.btn--destructive {
  background: var(--color-danger);
}
.btn--destructive:hover:not(:disabled) {
  background: #a82217;
}
.btn--destructive:disabled {
  background: var(--color-canvas-parchment);
  color: var(--color-ink-muted-48);
}

/* Dia que já está cadastrado: marcado, porém sem ação — não há o que criar. */
.weekday-toggle--existing,
.weekday-toggle:disabled {
  cursor: default;
  background: var(--color-divider-soft);
  border-color: var(--color-hairline);
  color: var(--color-ink-muted-48);
  font-weight: var(--weight-regular);
}
.weekday-toggle:disabled:hover {
  border-color: var(--color-hairline);
}

/* Rótulo de campo com atalhos à direita ("Marcar todos" / "Limpar"). */
.field__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

/* No celular os chips viram alvo de toque, e 30px de altura é apertado demais. */
@media (max-width: 899px) {
  .weekday-toggle {
    min-width: 48px;
    height: 40px;
  }
}

/* =====================================================================
   Tutorial (roteiro de implantação)
   ===================================================================== */

.tutorial {
  max-width: 880px;
}

/* ---- topo: progresso ---- */

.tutorial__hero {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}

.tutorial__hero-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.tutorial__hero-numero {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.tutorial__percent {
  font-family: var(--font-display);
  font-size: var(--text-display-lg-size);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -1px;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.tutorial__hero-detalhe {
  font-size: var(--text-body-size);
  letter-spacing: var(--text-body-tracking);
  color: var(--color-ink-muted-80);
}

.tutorial__barra {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-divider-soft);
  overflow: hidden;
}

.tutorial__barra-fill {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  transition: width 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.tutorial__proximo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-primary-tint);
}

.tutorial__proximo-rotulo {
  font-size: var(--text-fine-size);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.tutorial__proximo-titulo {
  flex: 1;
  min-width: 0;
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-ink);
}

/* Estado final: tudo concluído. */
.tutorial__hero--pronto {
  text-align: center;
  border-color: var(--color-status-done-fg);
  background: var(--color-status-done-bg);
}

.tutorial__selo {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-sm);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-status-done-fg);
  color: var(--color-on-dark);
  font-size: var(--text-lead-size);
}

.tutorial__hero--pronto .tutorial__barra {
  background: rgba(29, 107, 51, 0.15);
}
.tutorial__hero--pronto .tutorial__barra-fill {
  background: var(--color-status-done-fg);
}

.tutorial__pronto-titulo {
  font-family: var(--font-display);
  font-size: var(--text-display-md-size);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.6px;
  color: var(--color-status-done-fg);
  margin-bottom: var(--space-xs);
}

.tutorial__pronto-texto {
  font-size: var(--text-caption-size);
  line-height: 1.43;
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-ink-muted-80);
  margin-bottom: var(--space-md);
  text-wrap: pretty;
}

/* ---- mapa da jornada ---- */

.tutorial__mapa {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xxs);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.tutorial__marco {
  flex: 1 1 0;
  min-width: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xs) var(--space-xxs);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--transition-base);
}
.tutorial__marco:hover {
  background: var(--color-surface-pearl);
}

.tutorial__marco-bola {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-hairline);
  background: var(--color-canvas);
  color: var(--color-ink-muted-48);
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
}

.tutorial__marco--completa .tutorial__marco-bola {
  background: var(--color-status-done-fg);
  border-color: var(--color-status-done-fg);
  color: var(--color-on-dark);
}
.tutorial__marco--atual .tutorial__marco-bola {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-dark);
}

.tutorial__marco-nome {
  font-size: var(--text-fine-size);
  line-height: 1.3;
  letter-spacing: var(--text-fine-tracking);
  color: var(--color-ink-muted-80);
  text-wrap: balance;
}
.tutorial__marco--atual .tutorial__marco-nome {
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
}

.tutorial__marco-contagem {
  font-size: var(--text-micro-size);
  color: var(--color-ink-muted-48);
  font-variant-numeric: tabular-nums;
}

.tutorial__trilho {
  flex: 0 0 auto;
  align-self: center;
  width: 20px;
  height: 2px;
  margin-top: -18px;
  background: var(--color-hairline);
}
.tutorial__trilho--completo {
  background: var(--color-status-done-fg);
}

/* ---- etapas ---- */

.tutorial__etapas {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tutorial__etapa {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  scroll-margin-top: 72px;
}

.tutorial__etapa--completa {
  border-color: var(--color-status-done-bg);
}

.tutorial__etapa-topo {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg) var(--space-sm);
}

.tutorial__etapa-icone {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-canvas-parchment);
  color: var(--color-ink-muted-80);
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
}

.tutorial__etapa--completa .tutorial__etapa-icone {
  background: var(--color-status-done-bg);
  color: var(--color-status-done-fg);
}

.tutorial__etapa-nome {
  font-size: var(--text-tagline-size);
  font-weight: var(--weight-semibold);
  line-height: 1.19;
  letter-spacing: -0.3px;
}

.tutorial__etapa-contagem {
  flex: none;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-canvas-parchment);
  color: var(--color-ink-muted-80);
  font-size: var(--text-fine-size);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.tutorial__etapa-contagem--completa {
  background: var(--color-status-done-bg);
  color: var(--color-status-done-fg);
}

.tutorial__etapa-contexto {
  padding: 0 var(--space-lg) var(--space-md);
  margin: 0;
  font-size: var(--text-caption-size);
  line-height: 1.43;
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-ink-muted-80);
  border-bottom: 1px solid var(--color-divider-soft);
  text-wrap: pretty;
}

/* ---- passos ---- */

.tutorial__passo {
  border-bottom: 1px solid var(--color-divider-soft);
}
.tutorial__passo:last-child {
  border-bottom: 0;
}

.tutorial__passo-topo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transition-fast);
  scroll-margin-top: 80px;
}
.tutorial__passo-topo:hover {
  background: var(--color-surface-pearl);
}

.tutorial__marca {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-fine-size);
  border: 1.5px solid var(--color-hairline);
  background: var(--color-canvas);
  color: var(--color-ink-muted-48);
}
.tutorial__marca--feito {
  background: var(--color-status-done-fg);
  border-color: var(--color-status-done-fg);
  color: var(--color-on-dark);
}
.tutorial__marca--bloqueado {
  background: var(--color-divider-soft);
  border-color: var(--color-divider-soft);
}

.tutorial__passo-titulo {
  display: block;
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  line-height: 1.29;
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-ink);
}

.tutorial__passo--feito .tutorial__passo-titulo {
  color: var(--color-ink-muted-80);
}
.tutorial__passo--bloqueado .tutorial__passo-titulo {
  color: var(--color-ink-muted-48);
}

.tutorial__passo-detalhe {
  display: block;
  margin-top: 2px;
  font-size: var(--text-fine-size);
  line-height: 1.3;
  letter-spacing: var(--text-fine-tracking);
  color: var(--color-ink-muted-48);
}

.tutorial__badges {
  display: flex;
  gap: var(--space-xxs);
  flex: none;
}

.tutorial__badge {
  padding: 2px var(--space-xs);
  border-radius: var(--radius-xs);
  background: var(--color-canvas-parchment);
  color: var(--color-ink-muted-80);
  font-size: var(--text-micro-size);
  line-height: 1.6;
  white-space: nowrap;
}
.nivel--facil {
  background: var(--color-status-done-bg);
  color: var(--color-status-done-fg);
}
.nivel--medio {
  background: var(--color-status-rescheduled-bg);
  color: var(--color-status-rescheduled-fg);
}
.nivel--tecnico {
  background: var(--color-primary-tint);
  color: var(--color-primary);
}

.tutorial__chevron {
  flex: none;
  color: var(--color-ink-muted-48);
  font-size: var(--text-caption-size);
}

/* ---- corpo do passo ---- */

.tutorial__passo-corpo {
  padding: 0 var(--space-lg) var(--space-md) calc(var(--space-lg) + 22px + var(--space-sm));
}

.tutorial__onde {
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: var(--space-xxs) 10px;
  border-radius: var(--radius-xs);
  background: var(--color-canvas-parchment);
  font-size: var(--text-fine-size);
  letter-spacing: var(--text-fine-tracking);
  color: var(--color-ink-muted-80);
}
.tutorial__onde strong {
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}

.tutorial__porque,
.tutorial__paragrafo {
  font-size: var(--text-caption-size);
  line-height: 1.5;
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-ink-muted-80);
  margin-bottom: var(--space-sm);
  text-wrap: pretty;
}
.tutorial__porque strong {
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}

.tutorial__blocos {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-sm) 0;
}

.tutorial__lista {
  margin: 0;
  padding-left: var(--space-lg);
  font-size: var(--text-caption-size);
  line-height: 1.6;
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-ink-muted-80);
}
.tutorial__lista li {
  margin-bottom: 6px;
  text-wrap: pretty;
}

/* ---- comandos copiáveis ---- */

.tutorial__comando-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.tutorial__comando {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-ink);
}

.tutorial__comando code {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-fine-size);
  line-height: 1.6;
  color: var(--color-on-dark);
  white-space: pre-wrap;
  word-break: break-all;
}

.tutorial__copiar {
  flex: none;
  padding: var(--space-xxs) 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-on-dark);
  font-size: var(--text-micro-size);
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.tutorial__copiar:hover {
  background: rgba(255, 255, 255, 0.14);
}

.tutorial__comando-explica {
  margin: 0;
  font-size: var(--text-fine-size);
  line-height: 1.4;
  letter-spacing: var(--text-fine-tracking);
  color: var(--color-ink-muted-48);
}

/* ---- caixas de dica e atenção ---- */

.tutorial__callout {
  display: flex;
  gap: var(--space-xs);
  padding: 10px var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-hairline);
  background: var(--color-surface-pearl);
  font-size: var(--text-fine-size);
  line-height: 1.45;
  letter-spacing: var(--text-fine-tracking);
  color: var(--color-ink-muted-80);
  text-wrap: pretty;
}

.tutorial__callout-rotulo {
  flex: none;
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}

.tutorial__callout--atencao {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning-fg);
}
.tutorial__callout--atencao .tutorial__callout-rotulo {
  color: var(--color-warning-fg);
}

/* ---- resultado e erros ---- */

.tutorial__resultado {
  margin-top: var(--space-sm);
  padding: 10px var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-status-done-bg);
  color: var(--color-status-done-fg);
  font-size: var(--text-fine-size);
  line-height: 1.45;
  letter-spacing: var(--text-fine-tracking);
  text-wrap: pretty;
}
.tutorial__resultado strong {
  font-weight: var(--weight-semibold);
}

.tutorial__erros {
  margin-top: var(--space-sm);
}
.tutorial__erros summary {
  cursor: pointer;
  font-size: var(--text-fine-size);
  letter-spacing: var(--text-fine-tracking);
  color: var(--color-primary);
  padding: var(--space-xxs) 0;
}

.tutorial__erro {
  margin-top: var(--space-xs);
  padding-left: var(--space-sm);
  border-left: 2px solid var(--color-hairline);
}
.tutorial__erro-sintoma {
  font-size: var(--text-fine-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--text-fine-tracking);
  color: var(--color-ink);
}
.tutorial__erro-solucao {
  font-size: var(--text-fine-size);
  line-height: 1.45;
  letter-spacing: var(--text-fine-tracking);
  color: var(--color-ink-muted-80);
  text-wrap: pretty;
}

.tutorial__acoes {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

/* ---- desenhos explicativos ---- */

.dg-wrap {
  margin: 0;
  padding: var(--space-sm);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-surface-pearl);
  overflow-x: auto;
}

.dg {
  display: block;
  width: 100%;
  min-width: 480px;
  height: auto;
}

.dg-box {
  fill: var(--color-canvas);
  stroke: var(--color-hairline);
  stroke-width: 1;
}
.dg-box--painel {
  fill: var(--color-canvas);
}
.dg-box--url {
  fill: var(--color-canvas);
}
.dg-box--destaque {
  fill: var(--color-primary-tint);
  stroke: var(--color-primary-border);
}
.dg-box--ativo {
  fill: var(--color-primary-tint);
  stroke: var(--color-primary-border);
}
.dg-box--erro {
  fill: var(--color-status-cancelled-bg);
  stroke: var(--color-status-cancelled-fg);
}

.dg-t {
  font-family: var(--font-text);
  font-size: 13px;
  fill: var(--color-ink);
}
.dg-t--forte {
  font-weight: 600;
}
.dg-t--mudo {
  fill: var(--color-ink-muted-80);
}
.dg-t--nota {
  fill: var(--color-ink-muted-48);
  font-size: 12px;
}
.dg-t--destaque {
  fill: var(--color-primary);
  font-weight: 600;
}
.dg-t--ativo {
  fill: var(--color-primary);
  font-weight: 600;
}
.dg-t--erro {
  fill: var(--color-status-cancelled-fg);
  font-weight: 600;
}

.dg-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  fill: var(--color-ink);
}

.dg-linha {
  stroke: var(--color-primary);
  stroke-width: 1.5;
  fill: none;
}

@media (max-width: 899px) {
  .tutorial__passo-corpo {
    padding-left: var(--space-lg);
  }
  .tutorial__percent {
    font-size: var(--text-display-md-size);
  }
  .tutorial__badges {
    display: none;
  }
  .tutorial__marco {
    min-width: 92px;
  }
}

/* =====================================================================
   Modais
   ===================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.32);
  animation: fade-in 0.18s ease-out;
}

.modal {
  width: 100%;
  max-width: 448px;
  max-height: 92vh;
  overflow: auto;
  background: var(--color-canvas);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  animation: rise-in 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.modal--wide {
  max-width: 560px;
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.modal__title {
  font-size: var(--text-tagline-size);
  font-weight: var(--weight-semibold);
  line-height: 1.19;
  letter-spacing: -0.3px;
}

.modal__slot {
  background: var(--color-canvas-parchment);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: var(--gutter);
}

.modal__slot-mentor {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: 6px;
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  line-height: 1.29;
  letter-spacing: var(--text-caption-tracking);
}

/*
 * Rodapé do modal: grade de duas colunas, botões do mesmo tamanho.
 *
 * Antes era uma linha de botão azul seguido de ações em texto, que quebrava de
 * qualquer jeito quando havia muitas (no detalhe: Fechar · Tentar novamente ·
 * Reagendar · Cancelar mentoria). Agora toda ação é botão de verdade, com a
 * mesma altura e o mesmo arredondamento, em duas colunas — e, quando sobra
 * uma, ela ocupa a linha inteira. Assim o rodapé fica alinhado com duas,
 * três ou quatro ações.
 *
 * Ordem: as ações secundárias primeiro, a principal por último (à direita, ou
 * embaixo, na linha inteira). No celular, uma embaixo da outra.
 *
 * O rótulo pode quebrar em duas linhas: é melhor do que ser cortado.
 */
.modal__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: var(--gutter);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-divider-soft);
}
.modal__actions > .btn {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: var(--height-control);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  font-size: var(--text-button-size);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--text-caption-tracking);
  white-space: normal;
  text-align: center;
}
.modal__actions > .btn:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.modal__actions > .btn:hover {
  text-decoration: none;
}
.modal__actions > .btn:focus-visible {
  outline: 2px solid var(--color-primary-focus);
  outline-offset: 2px;
}
@media (max-width: 479px) {
  .modal__actions {
    grid-template-columns: 1fr;
  }
}

/* Secundário neutro: Voltar, Fechar, Cancelar (sem desfazer nada). */
.btn--ghost {
  border: 1px solid var(--color-hairline);
  background: var(--color-surface-pearl);
  color: var(--color-ink);
  transition: background-color var(--transition-fast);
}
.btn--ghost:hover:not(:disabled) {
  background: var(--color-divider-soft);
}

/* Secundário de ação: a pílula de contorno azul do design ("ghost pill"). */
.btn--outline {
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  transition: background-color var(--transition-fast);
}
.btn--outline:hover:not(:disabled) {
  background: var(--color-primary-tint);
}

/*
 * Atalhos da mentoria: prontuário, Google Agenda, Meet e pasta. Blocos do
 * mesmo tamanho, em duas colunas, com ícone e uma linha que diz o que abrem.
 */
.link-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  margin-bottom: var(--gutter);
}
.link-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  color: var(--color-ink);
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}
a.link-tile:hover {
  border-color: var(--color-primary-border);
  background: var(--color-primary-tint);
}
a.link-tile:focus-visible {
  outline: 2px solid var(--color-primary-focus);
  outline-offset: 2px;
}
.link-tile__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--color-canvas-parchment);
  color: var(--color-primary);
}
.link-tile__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.link-tile__title {
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
}
.link-tile__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-fine-size);
  line-height: 1.3;
  color: var(--color-ink-muted-48);
}
.link-tile__out {
  flex: none;
  display: inline-flex;
  color: var(--color-ink-muted-48);
}
a.link-tile:hover .link-tile__out {
  color: var(--color-primary);
}
/* Sem endereço: bloco apagado, que explica por que não abre. */
.link-tile--off {
  cursor: default;
  opacity: 0.55;
}
.link-tile--off .link-tile__icon {
  color: var(--color-ink-muted-48);
}
/* O prontuário leva a cor da situação que a última conferência encontrou. */
.link-tile--ok .link-tile__icon {
  background: var(--color-status-done-bg);
  color: var(--color-status-done-fg);
}
.link-tile--ok .link-tile__sub {
  color: var(--color-status-done-fg);
}
.link-tile--warning {
  border-color: var(--color-action-warning-border);
}
.link-tile--warning .link-tile__icon {
  background: var(--color-warning-bg);
  color: var(--color-warning-fg);
}
.link-tile--warning .link-tile__sub {
  color: var(--color-warning-fg);
}
.link-tile--danger {
  border-color: var(--color-action-danger-border);
  background: var(--color-action-danger-bg);
}
.link-tile--danger .link-tile__icon {
  background: var(--color-action-danger-fg);
  color: #ffffff;
}
.link-tile--danger .link-tile__sub {
  color: var(--color-action-danger-fg);
  font-weight: var(--weight-semibold);
}
a.link-tile--danger:hover {
  border-color: var(--color-action-danger-fg);
  background: var(--color-action-danger-bg-hover);
}
/* Só o atalho do prontuário (modal de desfecho): uma coluna, logo abaixo das opções. */
.link-tiles--single {
  grid-template-columns: 1fr;
  margin: var(--space-md) 0 0;
}
@media (max-width: 479px) {
  .link-tiles {
    grid-template-columns: 1fr;
  }
}

/* Lembrete de prontuários: uma linha por mentoria, com o atalho para a planilha. */
.reminder-list {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  max-height: 360px;
  overflow: auto;
}
.reminder-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-divider-soft);
}
.reminder-item:last-child {
  border-bottom: 0;
}
/* Nada preenchido no prontuário: vem primeiro e destacado em vermelho. */
.reminder-item--vazio {
  background: var(--color-action-danger-bg);
  box-shadow: inset 3px 0 0 var(--color-action-danger-fg);
}
.reminder-item__main {
  min-width: 0;
}
.reminder-item__startup {
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.reminder-item__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
  font-size: var(--text-caption-size);
  color: var(--color-ink-muted-80);
}
.reminder-item__link {
  flex: none;
  height: var(--height-control-sm);
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

/* Seletores de mentor e horário do modal de agendamento. */
/*
 * Seletores lado a lado dos modais (mentor, dia, horário; nova data e horário;
 * período da importação).
 *
 * Tudo com a mesma medida: mesma altura, fonte, borda e cantos, seja campo de
 * data ou lista. Antes, "Dia" era um campo de texto (48px, fonte maior, cantos
 * mais redondos) entre dois seletores de 40px, e cada campo tinha uma largura
 * escolhida à parte. Agora as larguras seguem uma regra só: partes iguais, e o
 * seletor de mentor — que mostra nomes — um pouco mais largo.
 */
.booking-when {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.booking-when > .field {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}
.booking-when > .field--wide {
  flex-grow: 1.4;
}
.booking-when .input,
.booking-when .select {
  height: var(--height-control);
  padding: 0 12px;
  border-radius: var(--radius-md);
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-tracking);
}
/* O aviso logo abaixo dos seletores não pode encostar no rótulo "Startup". */
.booking-when + p {
  margin-bottom: var(--space-md);
}
@media (max-width: 479px) {
  .booking-when {
    flex-direction: column;
  }
}

/* Agendas lidas na prévia da importação, e o aviso de uma que não abriu. */
.import-agendas {
  margin-top: 12px;
}
.fine--alerta {
  color: var(--color-danger);
}

/* Recado dentro da lista de escolha: "carregando", "nenhuma encontrada". */
.picker__aviso {
  padding: 16px 14px;
}

.search-wrap {
  position: relative;
  margin-bottom: 10px;
}
.search-wrap__icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-caption-size);
  color: var(--color-ink-muted-48);
  pointer-events: none;
}

.picker {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  max-height: 212px;
  overflow: auto;
}

.picker__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--color-divider-soft);
  background: var(--color-canvas);
  color: var(--color-ink);
  cursor: pointer;
  text-align: left;
  font-size: var(--text-caption-size);
  line-height: 1.29;
  letter-spacing: var(--text-caption-tracking);
  transition: background-color var(--transition-fast);
}
.picker__item:hover {
  background: var(--color-canvas-parchment);
}
.picker__item[aria-selected='true'] {
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}
.picker__item:disabled {
  cursor: not-allowed;
  color: var(--color-ink-muted-48);
}
.picker__name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*
 * Nome com o ponto da cor do mentor. O ponto só tem tamanho dentro de um
 * container flex (`.dot` não define `display`), por isso a variante.
 */
.picker__name--com-ponto {
  display: flex;
  align-items: center;
  gap: 8px;
}
.picker__mark {
  flex: none;
  color: var(--color-primary);
}

.segmented {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--gutter);
}
.segmented__option {
  flex: 1;
  padding: 10px var(--space-sm);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  color: var(--color-ink-muted-80);
  cursor: pointer;
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-tracking);
  transition: background-color var(--transition-base);
}
.segmented__option[aria-pressed='true'] {
  background: var(--color-primary-tint);
  border-color: var(--color-primary-border);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.preview {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: var(--gutter);
  font-size: var(--text-caption-size);
  line-height: 1.43;
  letter-spacing: var(--text-caption-tracking);
}
.preview__row {
  display: flex;
  gap: var(--space-xs);
  padding: 5px 0;
}
.preview__key {
  flex: none;
  width: 92px;
  color: var(--color-ink-muted-48);
}
.preview__value {
  min-width: 0;
  word-break: break-word;
}
.preview__code {
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.preview__description {
  margin-top: var(--space-xs);
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--color-canvas-parchment);
  font-size: var(--text-fine-size);
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--color-ink-muted-80);
  max-height: 132px;
  overflow: auto;
}

.detail-startup {
  font-family: var(--font-display);
  font-size: var(--text-lead-size);
  font-weight: var(--weight-semibold);
  line-height: 1.14;
  letter-spacing: -0.5px;
  /* Identificador é uma palavra só e pode ser longo: quebra só se não couber. */
  overflow-wrap: anywhere;
  margin-bottom: var(--space-md);
}

/* Detalhe da mentoria com nada preenchido no prontuário: bloco vermelho. */
.alert-inline--danger {
  align-items: center;
  margin: var(--space-xs) 0 0;
  padding: var(--space-sm) 12px;
  border-color: var(--color-action-danger-border);
  background: var(--color-action-danger-bg);
  color: var(--color-action-danger-fg);
  font-size: var(--text-caption-size);
}
/* Título do alerta em linha própria, e a explicação logo abaixo. */
.alert-inline--danger strong {
  display: block;
  margin-bottom: 2px;
}
.alert-inline__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-action-danger-fg);
  color: #ffffff;
  font-weight: var(--weight-bold);
}

.detail-prontuario--alerta {
  color: var(--color-warning-fg);
  font-weight: var(--weight-semibold);
}

.detail-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--color-canvas-parchment);
  border-radius: var(--radius-md);
  margin-bottom: var(--gutter);
  font-size: var(--text-caption-size);
  line-height: 1.29;
  letter-spacing: var(--text-caption-tracking);
}

/* Passos do agendamento, mostrados durante e depois da operação. */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: var(--space-md) 0;
}
.step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-ink-muted-80);
}
.step__mark {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-fine-size);
  background: var(--color-divider-soft);
  color: var(--color-ink-muted-48);
}
.step--done .step__mark {
  background: var(--color-status-done-bg);
  color: var(--color-status-done-fg);
}
.step--failed .step__mark {
  background: var(--color-status-cancelled-bg);
  color: var(--color-status-cancelled-fg);
}
.step--running .step__mark {
  background: var(--color-primary-tint);
  color: var(--color-primary);
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-hairline);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-pill);
  animation: spin 0.7s linear infinite;
}

/* =====================================================================
   Estados: carregando, vazio e erro
   ===================================================================== */

.state {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
}
.state__title {
  font-size: var(--text-body-size);
  font-weight: var(--weight-semibold);
  line-height: 1.24;
  letter-spacing: var(--text-body-tracking);
  margin-bottom: 6px;
}
.state__text {
  font-size: var(--text-caption-size);
  line-height: 1.43;
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-ink-muted-80);
}
.state__actions {
  margin-top: var(--space-md);
}

/*
 * Esqueleto de carregamento: um brilho que atravessa o bloco, em vez de o
 * bloco inteiro piscar — dá a sensação de "chegando", não de "travado".
 */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-divider-soft) 0%,
    var(--color-surface-pearl) 45%,
    var(--color-divider-soft) 90%
  );
  background-size: 220% 100%;
  border-radius: var(--radius-sm);
  animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton--line {
  height: 14px;
  margin-bottom: var(--space-xs);
}
/* Esqueleto da página antes do JavaScript (index.html): classes, e não
   `style=""`, porque a política de segurança bloqueia estilo embutido. */
.skeleton--titulo {
  width: 60%;
  height: 40px;
}
.skeleton--texto {
  width: 90%;
}
.noscript-aviso {
  padding: var(--space-lg);
  text-align: center;
}
.skeleton--block {
  height: 320px;
}

.error-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-status-cancelled-fg);
  border-radius: var(--radius-md);
  background: var(--color-status-cancelled-bg);
  color: var(--color-status-cancelled-fg);
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-tracking);
  margin-bottom: var(--space-md);
}

/* =====================================================================
   Aviso flutuante (toast)
   ===================================================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  z-index: 70;
  max-width: min(92vw, 520px);
  padding: var(--space-sm) var(--gutter);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-on-dark);
  font-size: var(--text-caption-size);
  line-height: 1.43;
  letter-spacing: var(--text-caption-tracking);
  text-align: center;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toast-in var(--duration-enter) var(--ease-spring);
}
.toast--error {
  background: var(--color-status-cancelled-fg);
}

/* =====================================================================
   Barra inferior (celular)
   ===================================================================== */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  background: rgba(245, 245, 247, 0.86);
  backdrop-filter: var(--blur-frosted);
  -webkit-backdrop-filter: var(--blur-frosted);
  border-top: 1px solid var(--color-hairline-soft);
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav__item {
  flex: 1;
  min-height: 56px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: var(--text-fine-size);
  line-height: 1.3;
  letter-spacing: var(--text-fine-tracking);
  color: var(--color-ink-muted-80);
}
.bottom-nav__item[aria-selected='true'] {
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
}

/* =====================================================================
   Responsivo
   ===================================================================== */

.only-wide {
  display: initial;
}
.only-narrow {
  display: none;
}

@media (max-width: 899px) {
  .only-wide {
    display: none !important;
  }
  .only-narrow {
    display: initial;
  }

  .app-main {
    padding: var(--gutter) var(--space-md) 96px;
  }
  .page-title {
    font-size: var(--text-lead-size);
  }
  .table__head,
  .table__row {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) 104px 110px 78px 118px 132px;
  }
  .table--selectable .table__head,
  .table--selectable .table__row {
    grid-template-columns: 28px minmax(0, 1.6fr) minmax(0, 1.1fr) 104px 110px 78px 118px 132px;
  }
}

@media (max-width: 480px) {
  .login-title {
    font-size: var(--text-display-md-size);
  }
  .sub-nav {
    padding: var(--space-xs) var(--space-md);
  }
  .modal {
    padding: var(--space-md);
  }
}

/* =====================================================================
   Movimento
   ---------------------------------------------------------------------
   Tudo curto e só com opacidade e deslocamento. A regra é animar quando
   algo MUDA — trocar de aba, de semana, chegar dado novo, confirmar uma
   ação —, e nunca a cada clique pequeno. A regra de `prefers-reduced-motion`
   no topo do arquivo desliga tudo isto para quem pediu menos movimento.
   ===================================================================== */

@keyframes item-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes slide-from-right {
  from {
    opacity: 0;
    transform: translateX(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes slide-from-left {
  from {
    opacity: 0;
    transform: translateX(-22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: none;
  }
}
@keyframes grow-y {
  from {
    transform: scaleY(0);
  }
  to {
    transform: none;
  }
}
@keyframes pop {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  60% {
    opacity: 1;
    transform: scale(1.12);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes dim {
  to {
    opacity: 0.45;
  }
}
@keyframes shimmer {
  from {
    background-position: 110% 0;
  }
  to {
    background-position: -110% 0;
  }
}
@keyframes backdrop-out {
  to {
    opacity: 0;
  }
}
@keyframes modal-out {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
@keyframes toast-out {
  to {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
}
/* Anel que se expande e some: "é esta aqui". Duas vezes, e para. */
@keyframes destaque {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 102, 204, 0.5);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 102, 204, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 102, 204, 0);
  }
}
@keyframes destaque-fundo {
  0%,
  40% {
    background-color: var(--color-primary-tint);
  }
  100% {
    background-color: transparent;
  }
}

/* ---------- Troca de tela ---------- */

/* A tela nova aparece; os blocos dela sobem um depois do outro. */
.tela-entrando {
  animation: fade-in 0.24s ease-out both;
}
.tela-entrando .agenda-layout > *,
.tela-entrando .metrics > *,
.tela-entrando .admin-grid > *,
.tela-entrando .upcoming-list > *,
.tela-entrando .tutorial__etapas > *,
.tela-entrando .recentes__dias > *,
.tela-entrando .perf,
.tela-entrando .alerta-vazio,
.tela-entrando .card {
  animation: item-in var(--duration-enter) var(--ease-out) both;
  /* Teto de oito passos: numa lista longa, o último não fica esperando. */
  animation-delay: calc(min(var(--i, 0), 8) * var(--stagger-step));
}

/* O título da barra troca junto com a aba. */
.sub-nav__title.is-trocando {
  animation: fade-in 0.24s ease-out;
}

/*
 * Aba escolhida: a pílula branca desliza até ela, em vez de sumir de uma e
 * aparecer na outra. Sem o indicador (antes do primeiro cálculo), vale o
 * fundo da própria aba.
 */
.tabs__indicator {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--w, 0);
  height: var(--height-control-sm);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-canvas);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--x, 0), -50%);
}
.tabs--indicador .tabs__indicator {
  opacity: 1;
}
.tabs--animado .tabs__indicator {
  transition:
    transform var(--duration-slide) var(--ease-out),
    width var(--duration-slide) var(--ease-out);
}
.tabs--indicador .tab[aria-selected='true'] {
  border-color: transparent;
  background: transparent;
}
.bottom-nav__item {
  transition:
    color var(--transition-base),
    transform var(--transition-fast);
}
.bottom-nav__item:active {
  transform: scale(var(--press-scale));
}

/* ---------- Agenda: troca de semana ---------- */

/* Enquanto a semana nova carrega, a antiga esmaece — não parece travado. */
.agenda-grid-card.is-carregando .grid-scroll,
.agenda-grid-card.is-carregando .mobile-slots {
  animation: dim 0.2s ease-out forwards;
  pointer-events: none;
}
/* A semana (ou o dia, no celular) nova entra pelo lado para onde se andou. */
.entra-pela-direita {
  animation: slide-from-right var(--duration-slide) var(--ease-out) both;
}
.entra-pela-esquerda {
  animation: slide-from-left var(--duration-slide) var(--ease-out) both;
}
.entra-suave {
  animation: fade-in 0.24s ease-out both;
}

/* ---------- Reação: a mentoria que acabou de mudar ---------- */

.slot.is-destaque,
.mobile-slot.is-destaque {
  animation: destaque 0.9s ease-out 0.2s 2;
}
.upcoming-card.is-destaque {
  animation:
    destaque 0.9s ease-out 0.2s 2,
    destaque-fundo 2.2s ease-out both;
}
.table__row.is-destaque {
  animation: destaque-fundo 2.2s ease-out both;
}

/* ---------- Histórico ---------- */

/* As barras dos cartões crescem da esquerda. */
.rank-row__fill {
  transform-origin: left;
  animation: grow-x 0.6s var(--ease-out) both;
  animation-delay: 0.1s;
}
/* A lista chega em cascata curta, a cada filtro. */
.table__row {
  animation: fade-in 0.22s ease-out both;
  animation-delay: calc(min(var(--i, 0), 14) * 16ms);
}

/* ---------- Modais ---------- */

.modal-backdrop {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal-backdrop.is-saindo {
  animation: backdrop-out var(--duration-exit) ease-in forwards;
  pointer-events: none;
}
.modal-backdrop.is-saindo .modal {
  animation: modal-out var(--duration-exit) ease-in forwards;
}
/*
 * Um modal que abre logo depois de outro (detalhe → reagendar): o fundo já
 * está escuro, então não pisca de novo — só a janela troca.
 */
.modal-backdrop--continuo {
  animation: none;
}
/* Conteúdo trocado dentro do modal (carregando → detalhe; passos → resultado). */
#modal-body > * {
  animation: fade-in 0.2s ease-out;
}

/* Passos do agendamento concluído: um de cada vez, e a marca "estala". */
.steps--resultado .step {
  animation: item-in 0.3s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.steps--resultado .step--done .step__mark,
.steps--resultado .step--failed .step__mark {
  animation: pop 0.36s var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * 90ms + 0.12s);
}

/* Opção escolhida no desfecho: o ✓ estala ao marcar. */
.picker__item[aria-checked='true'] .picker__mark {
  animation: pop 0.3s var(--ease-spring);
}

/* ---------- Avisos e alertas ---------- */

.toast.is-saindo {
  animation: toast-out var(--duration-exit) ease-in forwards;
}
.toast__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 12px;
  font-weight: var(--weight-bold);
  animation: pop 0.36s var(--ease-spring) 0.08s both;
}
.alerta-vazio__icon {
  animation: pop 0.4s var(--ease-spring) 0.25s both;
}

/* ---------- Botões e atalhos ---------- */

/* Botão ocupado: um anel girando no lugar do texto. */
.btn[aria-busy='true'] {
  position: relative;
  color: transparent !important;
  --spinner: var(--color-ink-muted-80);
}
.btn[aria-busy='true']::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  margin: auto;
  border: 2px solid var(--spinner);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
/* Ocupado não é o mesmo que indisponível: mantém a cor do botão. */
.btn--primary[aria-busy='true']:disabled,
.btn--primary-lg[aria-busy='true']:disabled {
  background: var(--color-primary);
  --spinner: #ffffff;
}
.btn--ghost[aria-busy='true'],
.btn--pearl[aria-busy='true'] {
  --spinner: var(--color-ink-muted-80);
}

/* Atalhos e cartões levantam um pixel ao passar o mouse. */
.link-tile,
.upcoming-card {
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-base);
}
a.link-tile:hover {
  transform: translateY(-1px);
}
a.link-tile:active {
  transform: scale(0.98);
}
.upcoming-card:hover {
  border-color: var(--color-primary-border);
}