/* Barra superior do app, usada em todas as páginas de atividade.
   Classes com prefixo "ab-" para não colidir com o CSS de cada atividade. */
.ab {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  min-height: 52px;
  padding: calc(6px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 6px max(12px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--ab-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ab-line);
  color: var(--ab-ink);
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ab-bg: #ffffff; --ab-ink: #1d2a44; --ab-line: rgba(29, 42, 68, .14); --ab-accent: #3a5bd9;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ab { --ab-bg: #131a29; --ab-ink: #e9eef8; --ab-line: rgba(233, 238, 248, .14); --ab-accent: #8aa2ff; }
}
:root[data-theme="dark"] .ab { --ab-bg: #131a29; --ab-ink: #e9eef8; --ab-line: rgba(233, 238, 248, .14); --ab-accent: #8aa2ff; }

.ab-back {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 40px; padding: 0 14px 0 8px; border-radius: 999px;
  color: var(--ab-accent); text-decoration: none; font-weight: 700; font-size: 16px;
  background: color-mix(in srgb, var(--ab-accent) 12%, transparent);
  -webkit-tap-highlight-color: transparent;
}
.ab-back svg { width: 22px; height: 22px; }
.ab-back:active { transform: scale(.96); }
.ab-back:focus-visible { outline: 3px solid var(--ab-accent); outline-offset: 2px; }
.ab-title {
  flex: 1; min-width: 0; text-align: center; font-weight: 700; font-size: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-right: 70px; /* equilibra o botão da esquerda para o título ficar no centro */
}
@media (max-width: 420px) { .ab-title { padding-right: 0; text-align: left; } }

@media print { .ab { display: none !important; } }

/* No iPad em modo app, evita o "puxar para atualizar" e o zoom acidental com toque duplo */
html { -webkit-text-size-adjust: 100%; }
button, a, [role="button"] { touch-action: manipulation; }

body[data-app-title] { margin: 0; }