/* GUI — rodada «anterior/próxima, data da visita, horário, Diário e tutorial».

   Só o que é novo nesta rodada. O tocador, o calendário e o tutorial continuam
   com o CSS que já foi homologado; nada aqui redefine as regras deles. */

/* =====================================================================
   1. ANTERIOR / PRÓXIMA EM ATIVIDADE SEM NARRAÇÃO
   =====================================================================
   A mesma gramática do tocador — o ícone de faixa |◀ ▶| em roxo —, numa faixa
   de duas metades, porque aqui não há play no meio e há largura para o nome
   da vizinha. Alvo de toque ≥ 44px. */
.ad-roteiro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
  margin: 16px 0 10px;
}
.ad-rt-bt {
  appearance: none; font: inherit; cursor: pointer; min-width: 0; min-height: 52px;
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--linha); border-radius: var(--raio, 14px);
  background: var(--papel-2); color: var(--tinta); text-align: left;
}
.ad-rt-proxima { flex-direction: row-reverse; text-align: right; }
.ad-rt-ic { color: var(--acento); display: grid; place-items: center; flex: none; line-height: 0; }
.ad-rt-tx { display: flex; flex-direction: column; min-width: 0; }
.ad-rt-tx small { font-size: .7rem; color: var(--tinta-clara); text-transform: uppercase; letter-spacing: .05em; }
.ad-rt-tx strong {
  font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ad-rt-bt:not([disabled]):active { background: rgba(123, 79, 176, .08); }
.ad-rt-bt[disabled] { cursor: default; opacity: .45; }
.ad-rt-bt[disabled] strong { font-weight: 500; color: var(--tinta-fraca); }

/* =====================================================================
   3. INÍCIO EM DUAS PARTES — [ HH ] : [ MM ]
   =====================================================================
   Os dois `<select>` herdam a caixa de `.agenda-edit select` (44px, borda,
   raio). O par ocupa a coluna de «Início» inteira, sem vazar a 320px. */
.sel-hora-par {
  display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr);
  align-items: center; gap: 4px; min-width: 0;
}
.agenda-edit .sel-hora-par select {
  min-width: 0; text-align: center; text-align-last: center;
  font-variant-numeric: tabular-nums; padding: 0 4px;
}
.sel-hora-sep { font-weight: 700; color: var(--tinta-fraca); }
.agenda-edit .sel-hora-par select:disabled { color: var(--tinta-clara); background: var(--papel); }

/* =====================================================================
   5. TUTORIAL — O TOCADOR REAL NO PASSO «A NARRAÇÃO»
   =====================================================================
   A moldura da figura (`.tg-arte-real`) sai: quem desenha a caixa é o próprio
   `.pa` — fundo branco, borda e raio do tocador de verdade. Tudo o mais —
   cores, tamanhos, espaçamentos — é o CSS do tocador, sem cópia. */
.tg-arte.tg-arte-real.tg-arte-player {
  background: transparent; box-shadow: none; overflow: visible; pointer-events: none;
}
.tg-arte-player .pa { margin: 0; }