h1:focus { outline: none; }

/* ── Área segura (barra de status, entalhe, barra de gestos) ─────────
   Todo o layout usa estas duas variáveis em vez de env(safe-area-inset-*)
   direto. O iPhone e os WebViews novos informam o recuo pelo env(); WebViews
   antigos do Android (emulador, aparelhos sem atualização) informam zero, e o
   app ficava por baixo das barras. Nesses, o próprio app Android passa o
   tamanho real das barras em --android-inset-* (ver MainActivity) — vale o
   maior dos dois. */
:root {
    --safe-top: max(env(safe-area-inset-top, 0px), var(--android-inset-top, 0px));
    --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--android-inset-bottom, 0px));

    /* Distância da barra de navegação flutuante até a borda de baixo.
       iPhone: 22px (a linha de gestos fica por baixo, sem atrapalhar).
       Android: sempre ACIMA da barra do sistema (gestos ou 3 botões) + 10px —
       antes ela encostava na linha de gestos e sumia atrás dos botões. */
    --nav-bottom: max(22px, calc(var(--safe-bottom) - 12px), calc(var(--android-inset-bottom, 0px) + 10px));
}

/* ── Layout ─────────────────────────────────────────────────── */

/* Top padding: MudBlazor AppBar (~64px) + status bar safe area */
.mud-main-content { padding-top: calc(80px + var(--safe-top)); }

@media (max-width: 600px) {
    .mud-main-content { padding-top: calc(72px + var(--safe-top)); }
}

/* Push AppBar down so it doesn't sit behind the status bar */
.mud-appbar { padding-top: var(--safe-top) !important; }

/* More bottom padding so content clears the floating pill nav (+ Android nav bar inset) */
.mud-main-content.has-bottom-nav { padding-bottom: calc(84px + var(--nav-bottom)); }

/* Teclado aberto (tecladoIos.js): o menu de baixo não sobe junto, o teclado fica por cima */
html.teclado-aberto .bottom-nav,
html.teclado-aberto .bottom-fog { display: none !important; }

/* Hide bottom nav on desktop, remove extra padding */
@media (min-width: 960px) {
    .bottom-nav { display: none !important; }
    .mud-main-content.has-bottom-nav { padding-bottom: 0 !important; }
}

/* ── Toast interno (Snackbar) — estilo app moderno ──────────────
   A posição vem da classe de location do MudBlazor (bottom:24px). No mobile
   subimos o "bottom" para ficar ACIMA do bottom nav flutuante (~88px) com folga. */
.mud-snackbar-location-bottom-center,
.mud-snackbar-location-bottom-left,
.mud-snackbar-location-bottom-right {
    bottom: calc(98px + var(--nav-bottom)) !important;
}
@media (min-width: 960px) {
    /* desktop não tem bottom nav flutuante — volta ao rodapé normal */
    .mud-snackbar-location-bottom-center,
    .mud-snackbar-location-bottom-left,
    .mud-snackbar-location-bottom-right {
        bottom: 24px !important;
    }
}
/* O contêiner do MudBlazor fica em left:50% + translateX(-50%). Posicionado
   assim, um toast de largura automática só dispõe de METADE da tela e quebra
   cedo — foi por isso que a largura tinha ficado fixa, e com ela o texto curto
   ficava encostado no canto de uma caixa grande. O contêiner agora ocupa a
   faixa toda (12px de folga em cada lado) e centraliza; cada toast tem o
   tamanho do próprio texto, até o limite da faixa. */
.mud-snackbar-location-bottom-center {
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mud-snackbar {
    min-width: 0 !important;
    width: auto;
    max-width: 100%;
    padding-left: 20px !important;
    padding-right: 20px !important;
    justify-content: center;
    text-align: center;
    border-radius: 14px !important;
    box-shadow: 0 10px 34px rgba(0,0,0,0.24), 0 2px 8px rgba(0,0,0,0.14) !important;
    font-size: 0.9rem;
}
/* Em tela grande o teto continua, senão um texto longo atravessaria o monitor. */
@media (min-width: 600px) {
    .mud-snackbar { max-width: 560px; }
}

/* ── Campos de texto longo (observações, descrições) ────────── */
/* Crescem com o texto (AutoGrow), então o que importa aqui é o conforto:
   linha mais solta para não virar um bloco apertado, e, no celular, fonte de
   16px — abaixo disso o iPhone dá zoom sozinho ao focar o campo e a tela
   inteira escorrega para o lado. */
.mud-input-root textarea {
    line-height: 1.5;
    padding-top: 2px;
}
@media (max-width: 600px) {
    .mud-input-root textarea,
    .mud-input-root input { font-size: 16px !important; }
}
/* No desktop dá para puxar a borda e abrir mais espaço quando o texto é longo. */
@media (min-width: 960px) {
    .mud-input-root textarea { resize: vertical; }
}

/* ── Cabeçalho de página (CabecalhoPagina.razor) ───────────── */
/* Um tamanho de título para o app inteiro, com ou sem seta. flex + align-items
   em CSS puro: a classe "align-items-center" que várias páginas usavam é do
   Bootstrap e o MudBlazor a ignora — era isso que desalinhava seta e título. */
.cab { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; min-width: 0; }
.cab-textos { flex: 1 1 auto; min-width: 0; }
.cab-titulo {
    margin: 0;
    font-family: var(--mud-typography-h4-family);
    font-weight: 400;
    /* Cresce com a tela, mas com teto: no celular um nome de plano longo
       quebra em duas linhas sem empurrar o conteúdo para baixo. */
    font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2rem);
    line-height: 1.18;
    letter-spacing: 0.01em;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cab-sub { margin: 4px 0 0; font-size: 0.875rem; line-height: 1.4; color: var(--mud-palette-text-secondary); }
.cab-acoes { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.cab-voltar { display: inline-flex; flex-shrink: 0; }

/* Seta que fica presa ao rolar (cabecalho.js). Top, left e a animação de
   encaixe vêm do JS: a transformação acompanha a seta do cabeçalho quadro a
   quadro, o que uma transition de CSS não consegue com a página rolando. */
.voltar-flutuante {
    position: fixed; z-index: 1200; /* acima do conteúdo, abaixo da bottom nav (1300) e dos diálogos */
    visibility: hidden; pointer-events: none;
    transform-origin: center;
    will-change: transform;
}
.voltar-flutuante--visivel { visibility: visible; pointer-events: auto; }
/* Flutuando sobre conteúdo variado precisa de mais presença que no cabeçalho. */
.voltar-flutuante .btn-vidro {
    width: 44px; height: 44px;
    box-shadow:
        0 6px 22px color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--mud-palette-surface) 70%, transparent);
}

/* ── Botão circular de vidro (seta voltar, PDF) ────────────── */
/* Liquid Glass (iOS 26) / One UI: fundo translúcido desfocado, borda clara fina
   e um brilho interno no topo. Com o conteúdo rolando por trás no celular, o
   blur é o que o separa do fundo sem precisar de cor sólida. */
.btn-vidro {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; cursor: pointer; font: inherit;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-surface) 58%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
    /* Borda e brilho derivados da cor do texto: finos no claro e no escuro, sem
       depender de detectar o tema. Branco fixo virava um anel forte no escuro. */
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
    box-shadow:
        0 4px 16px color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--mud-palette-surface) 70%, transparent);
    transition: transform 0.12s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.btn-vidro:hover:not(:disabled) { background: color-mix(in srgb, var(--mud-palette-surface) 78%, transparent); }
.btn-vidro:active:not(:disabled) { transform: scale(0.92); }
.btn-vidro:disabled { cursor: default; opacity: 0.6; }
.btn-vidro:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
@media (prefers-reduced-transparency: reduce) {
    .btn-vidro { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--mud-palette-surface); }
}

/* ── "Texto secundário" do MudBlazor ────────────────────────── */
/* Color.Secondary em texto/ícone caía no vermelho da marca (#C62828).
   Legenda/data/subtítulo devem ser um cinza discreto, não sangue.
   Botões e chips usam outras classes, então mantêm o vermelho de propósito. */
.mud-typography.mud-secondary-text,
.mud-icon-root.mud-secondary-text { color: var(--mud-palette-text-secondary) !important; }

/* ── Transição de entrada de página ─────────────────────────── */
/* Recriado a cada navegação (via @key no ProtectedLayout) → replay. */
/* Sem fill-mode: ao terminar, o elemento volta a NÃO ter transform. Isso evita
   que o wrapper vire "containing block" e prenda overlays position:fixed
   (folha de reações, pickers) dentro dele em vez da viewport. */
/* Curta e discreta: roda a cada troca de menu, então não pode cansar. */
.page-enter { animation: page-enter 0.2s cubic-bezier(0.25, 1, 0.5, 1); }
@keyframes page-enter {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .page-enter { animation: none; }
}

/* ── Cards ──────────────────────────────────────────────────── */
.mud-card { border-radius: 14px !important; }
.mud-paper { border-radius: 14px !important; }
.cursor-pointer { cursor: pointer; }

/* ── Cartões de lista (treinos / corridas) ──────────────────── */
.plan-row {
    display: flex; align-items: stretch; gap: 0; min-height: 120px;
    transition: background 0.15s ease;
}
.plan-row-divider { border-bottom: 1px solid var(--mud-palette-divider); }
.plan-row:hover { background: rgba(128,128,128,0.05); }
.plan-row:active { background: rgba(128,128,128,0.10); }

.plan-media {
    width: 92px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
/* Brilho sutil no canto pra dar profundidade ao bloco de cor */
.plan-media::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.28), transparent 60%);
}
.plan-media .mud-icon-root { font-size: 2.1rem !important; color: #fff !important; z-index: 1; }

.plan-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 14px 16px; }
.plan-title { font-weight: 700; font-size: 0.95rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plan-trail { display: flex; align-items: center; gap: 6px; padding-right: 12px; flex-shrink: 0; }

/* Paleta de destaque dos ícones — variada, não só o verde padrão */
.plan-media--a0 { background: linear-gradient(135deg, var(--mud-palette-primary), color-mix(in srgb, var(--mud-palette-primary) 75%, black)); }
.plan-media--a1 { background: linear-gradient(135deg, #2BB3A3, #1E8E82); }
.plan-media--a2 { background: linear-gradient(135deg, #4C8DFF, #2E6FE0); }
.plan-media--a3 { background: linear-gradient(135deg, #9B6DFF, #7C4DE0); }
.plan-media--a4 { background: linear-gradient(135deg, #F0A83C, #D98A1E); }
.plan-media--a5 { background: linear-gradient(135deg, #F06B4D, #D64F32); }
.plan-media--muted { background: linear-gradient(135deg, #A8ADA2, #8A8F84); }

/* ── Exercise card ──────────────────────────────────────────── */
.exercise-card {
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    overflow: hidden;
}
.exercise-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
    transform: translateY(-1px);
}

/* Media column — stretches full card height */
.exercise-media-col {
    width: 110px;
    flex-shrink: 0;
    position: relative;
    border-radius: 12px 0 0 12px;
    overflow: hidden;
}
.exercise-media-clickable {
    cursor: pointer;
}
.exercise-media-clickable:hover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.18);
    border-radius: 12px 0 0 12px;
    transition: background 0.15s;
}
.exercise-media-fill {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.exercise-media-icon-bg {
    background: rgba(15, 76, 117, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Névoa sob a bottom nav (One UI) ────────────────────────── */
/* Faixa fixa no rodapé que desfoca e dissolve o conteúdo que passa por baixo
   da pill. A máscara faz o blur perder força para cima, evitando a "borda"
   dura de um scrim comum. Não captura toque. */
.bottom-fog {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(48px + var(--safe-bottom));
    z-index: 1200; /* acima do conteúdo, abaixo da pill (1300) */
    pointer-events: none;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    -webkit-mask-image: linear-gradient(to top, #000 40%, rgba(0, 0, 0, 0.6) 70%, transparent 100%);
    mask-image: linear-gradient(to top, #000 40%, rgba(0, 0, 0, 0.6) 70%, transparent 100%);
}

/* Só no mobile — no desktop a bottom nav nem existe */
@media (min-width: 960px) {
    .bottom-fog { display: none !important; }
}

/* ── Bottom navigation — floating frosted pill (One UI style) ── */
.bottom-nav {
    position: fixed;
    /* Mesma posição em Android e iPhone: 22px da borda. O inset da barra de
       gestos não é somado — no iPhone ele tem ~34px e deixava a pill bem mais
       alta que no Android. Só quando o inset é maior que a folga (ex.: iPad com
       teclado) ela sobe o necessário para não encostar no indicador. */
    bottom: var(--nav-bottom);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1300;
    width: max-content;
    /* Grade de colunas iguais: num contêiner do tamanho do conteúdo, 1fr faz
       todas as abas ficarem com a largura da maior (ex.: "Dashboard"). */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    /* Cinco abas com larguras iguais podem passar da tela: nunca mais larga que ela. */
    max-width: calc(100vw - 20px);
    box-sizing: border-box;
    align-items: center;
    gap: 2px;
    /* Altura parecida com as barras nativas (WhatsApp no iOS, One UI no Android):
       a nossa pill era visivelmente mais rasa que as do sistema. */
    padding: 6px 7px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.20),
        0 2px 8px  rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.60);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Dark mode: handled inline by BottomNav.razor via ThemeState injection */

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    gap: 3px;
    padding: 7px 13px;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.61rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 9999px;
    transition: background 0.22s ease, color 0.22s ease, transform 0.15s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: 0.02em;
}
/* Active item: handled inline by BottomNav.razor */
.bottom-nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bottom-nav-item.active { font-weight: 700; }
/* Lucide é só contorno: o item ativo ganha peso engrossando o traço, já que
   não existe a versão preenchida que o Material tinha. */
.bottom-nav-item.active .mud-icon-root g { stroke-width: 2.6; }
/* Cinco abas (aluno com corrida) em tela estreita: aperta a folga lateral em vez
   de deixar a pill passar da largura da tela. */
@media (max-width: 420px) {
    .bottom-nav-item { padding: 7px 8px; letter-spacing: 0; }
}
.bottom-nav-item:not(.active):hover {
    background: rgba(0, 0, 0, 0.05);
}
.bottom-nav-item:active { transform: scale(0.88); }
.bottom-nav-item svg,
.bottom-nav-item .mud-icon-root { font-size: 1.25rem !important; transition: transform 0.2s ease; }

/* "Pop" ao virar item ativo (troca de aba) */
.bottom-nav-item.active .mud-icon-root,
.bottom-nav-item.active svg { animation: nav-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes nav-pop {
    0%   { transform: scale(0.7); }
    60%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .bottom-nav-item.active .mud-icon-root,
    .bottom-nav-item.active svg { animation: none; }
}

/* Teclado aberto no iPhone: o iOS desloca a área visível e o que é fixo sumia
   atrás do relógio (tecladoIos.js mede o deslocamento). "translate" e não
   "transform" para não brigar com a animação da seta flutuante. */
.mud-appbar, .mud-drawer, .voltar-flutuante { translate: 0 var(--teclado-desvio, 0px); }

/* ── AppBar polish ──────────────────────────────────────────── */
.mud-appbar { backdrop-filter: blur(8px); }

/* Barra de cima translúcida com blur — só no mobile (efeito "glass") */
@media (max-width: 600px) {
    .mud-appbar {
        background-color: color-mix(in srgb, var(--mud-palette-appbar-background) 60%, transparent) !important;
        backdrop-filter: blur(20px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
        box-shadow: none !important;
        border-bottom: 1px solid rgba(128, 128, 128, 0.16);
    }
}

/* ── NavMenu ────────────────────────────────────────────────── */
.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 14px;
    text-decoration: none;
}
.nav-brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.nav-user-section {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    /* Somar 12px à safe area inteira deixava ~46pt vazios no iPhone. O
       indicador de início ocupa só a faixa final da área segura, então dá para
       descer o bloco para dentro dela. O max() mantém os 12px no Android, onde a
       área de gestos é pequena e a conta daria quase zero. */
    /* Rodapé do menu (conta): no iPhone desce para dentro da área segura, mas
       sem encostar no indicador de início (com -22px sobravam 12px e o texto
       ficava em cima da linha de gestos); no Android fica acima da barra do
       sistema, para não sumir atrás dos botões. */
    padding-bottom: max(12px, calc(var(--safe-bottom) - 6px), calc(var(--android-inset-bottom, 0px) + 8px));
    border-top: 1px solid var(--mud-palette-divider);
    margin-top: auto;
}
.nav-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--mud-palette-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.nav-user-avatar-img {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.mud-drawer .mud-nav-link { border-radius: 8px; margin: 2px 8px; }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Telas estreitas (iPhone 13/SE, Androids compactos) ──────────
   Abaixo de ~430px de largura os componentes do MudBlazor mantêm padding e
   tamanho de fonte de desktop: dois botões lado a lado (ex.: REGISTRAR +
   HISTÓRICO) estouram o card, e títulos longos quebram em linhas feias.
   As regras abaixo valem para o app inteiro — apertam o padding, reduzem um
   pouco o texto e fazem o rótulo cortar com reticências em vez de vazar. */
@media (max-width: 430px) {
    /* Botões de texto/ícone+texto. Exclui o MudIconButton (só ícone), que
       ficaria com a área de toque espremida e desalinhada. */
    .mud-button-root:not(.mud-icon-button) {
        min-width: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* NÃO truncar: o rótulo tem que aparecer inteiro. Reduzimos a fonte e
       apertamos o espaçamento; quem cede espaço é o container, não o texto. */
    .mud-button-root:not(.mud-icon-button) .mud-button-label {
        font-size: 0.76rem;
        letter-spacing: 0.01em;
        white-space: nowrap;
        overflow: visible;
    }

    /* O ícone do StartIcon come muita largura no tamanho padrão */
    .mud-button-icon-start {
        margin-right: 4px !important;
    }
    .mud-button-icon-start .mud-icon-root {
        font-size: 1.05rem !important;
    }

    /* Chips de metadado (séries / reps / carga / descanso) */
    .mud-chip {
        font-size: 0.72rem;
    }

    /* Títulos de página: h4/h5 em 390px estouravam para 2–3 linhas */
    .mud-typography-h4 { font-size: 1.5rem; }
    .mud-typography-h5 { font-size: 1.25rem; }
    .mud-typography-h6 { font-size: 1.05rem; }

    /* Abas: sem isso o texto some no overflow horizontal */
    .mud-tab { min-width: 0; padding-left: 12px; padding-right: 12px; font-size: 0.8rem; }

    /* A miniatura fixa de 110px come quase 1/3 da largura num iPhone 13 e é o
       que espremia a coluna do conteúdo (título, chips e botões). */
    .exercise-media-col { width: 84px; }

    /* Diálogos ganham largura útil (o padrão deixa margens gordas) */
    .mud-dialog { margin: 12px !important; }
    .mud-dialog-content { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Emoji de bandeira: sem esta fonte o Windows desenha as duas letras do país
   ("BR" em vez de 🇧🇷). Android, iOS e macOS já têm fonte própria, então a
   local aparece primeiro e a do Google só entra quando falta. */
.bandeira {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1.05em;
    line-height: 1;
}

/* Abas em pílula. Nasceram na tela do aluno e agora são o padrão do app, então
   ficam aqui em vez de repetidas em cada página. O overflow-x é o que salva em
   telas estreitas: com muitas abas elas rolam em vez de quebrar a linha. */
.seg-pill {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 4px;
    background: rgba(128,128,128,0.10);
    border-radius: 9999px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.seg-pill::-webkit-scrollbar { display: none; }

.seg-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.seg-btn--active {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.seg-btn-count { font-size: 0.72rem; opacity: 0.7; }

/* Ação principal do treino (iniciar/finalizar). Ocupa a largura toda no celular,
   onde é o alvo do polegar, e para de crescer no web — um botão de 1200px de
   largura não parece um botão. */
.acao-treino {
    width: 100%;
    border-radius: 12px;
    height: 52px;
    font-weight: 700;
}
@media (min-width: 720px) {
    .acao-treino { max-width: 360px; }
}

/* ── Editor de exercício (plano, pool de fichas, pool de ciclos) ──────
   As três telas editam o mesmo exercício; o visual mora aqui para não
   divergirem a cada ajuste. */

/* Tipo em botões: ícone + nome lado a lado, quebrando linha no celular
   em vez de espremer os quatro. */
.tipo-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tipo-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 9999px; cursor: pointer;
    font: inherit; font-size: 0.78rem; font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tipo-btn:hover { color: var(--mud-palette-text-primary); }
.tipo-btn:active { transform: scale(0.96); }
.tipo-btn .mud-icon-root { font-size: 1.05rem !important; }
.tipo-btn--on {
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}
.tipo-btn--on .mud-icon-root g { stroke-width: 2.4; }

/* Campos do exercício em grade: caixas do mesmo tamanho, alinhadas em
   coluna, e o número de colunas cai sozinho conforme a tela estreita. */
.ex-campos {
    display: grid; gap: 12px; margin-top: 14px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    align-items: start;
}
/* Carga e ritmo recebem texto ("Leve a moderada"): duas colunas, sem cortar. */
.ex-campos .f-carga { grid-column: span 2; }
.ex-campos .f-pace  { grid-column: span 2; }
@media (max-width: 420px) {
    .ex-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Setas de +/- do MudBlazor: no dedo roubam largura do número e são piores
   que digitar. Ficam só no desktop, onde o mouse as usa. */
@media (max-width: 600px) {
    .ex-campos .mud-input-numeric-spin { display: none; }
}

/* ── Menu lateral no celular ─────────────────────────────────
   O MudBlazor encosta o topo do drawer na altura padrão da AppBar, mas no
   celular a barra desce pela status bar (padding da safe area) e fica mais
   alta que isso — por isso o menu cobria o logo e o título no Android/iPhone,
   e não no navegador, onde não existe safe area. */
/* O MudBlazor usa uma altura de AppBar menor abaixo de 600px (e outra em
   paisagem); por isso a conta do topo é repetida por faixa, somando só a
   safe area em cima do valor que ele já calcula. */
@media (min-width: 600px) and (max-width: 959px) {
    .mud-drawer-fixed.mud-drawer-temporary.mud-drawer-clipped-always,
    .mud-drawer-fixed.mud-drawer-responsive.mud-drawer-clipped-always {
        top: calc(var(--mud-appbar-height) + var(--safe-top));
        height: calc(100% - var(--mud-appbar-height) - var(--safe-top));
    }
}
@media (max-width: 599px) and (orientation: portrait) {
    .mud-drawer-fixed.mud-drawer-temporary.mud-drawer-clipped-always,
    .mud-drawer-fixed.mud-drawer-responsive.mud-drawer-clipped-always {
        top: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/8 + var(--safe-top));
        height: calc(100% - (var(--mud-appbar-height) - var(--mud-appbar-height)/8) - var(--safe-top));
    }
}
@media (max-width: 599px) and (orientation: landscape) {
    .mud-drawer-fixed.mud-drawer-temporary.mud-drawer-clipped-always,
    .mud-drawer-fixed.mud-drawer-responsive.mud-drawer-clipped-always {
        top: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/4 + var(--safe-top));
        height: calc(100% - (var(--mud-appbar-height) - var(--mud-appbar-height)/4) - var(--safe-top));
    }
}
@media (max-width: 959px) {
    /* O rodapé do menu (avatar/conta) já desconta a barra de gestos sozinho
       (.nav-user-section). Somar o inset aqui também deixava, no iPhone, um
       vão bem maior que no Android embaixo da conta. */
}

/* ── Assinatura do Kroppo no rodapé ──────────────────────────
   Discreta: com a marca do personal na barra de cima, isto é o que lembra
   o aluno (e o próprio personal) de qual plataforma está por baixo. */
.rodape-kroppo {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 28px 0 4px;
    font-size: 0.72rem; letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    opacity: 0.75;
}

/* Logo do personal nunca estoura o espaço de quem o hospeda: nas células do
   calendário ele divide ~30px com o número do dia, e um logo deitado passava
   por cima dos dias vizinhos. */
.brand-logo-img { max-width: 100%; max-height: 100%; }

/* Widget "não sou um robô" (Turnstile) nas telas de login/cadastro */
/* No canto de CIMA: embaixo, com o teclado aberto, ele cobria o botão e os
   campos. Em cima só há o espaço vazio acima do logo. Um pouco menor (85%). */
.captcha-caixa {
    position: fixed; z-index: 1200;
    right: max(10px, env(safe-area-inset-right)); top: calc(var(--safe-top, 0px) + 10px);
    width: 310px; max-width: calc(100vw - 24px); height: 70px;
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    transform: scale(0.85); transform-origin: top right;
}

/* ── Conversa sobre o treino (ConversaTreinoDialog) ───────────────────
   Celular: folha de baixo, como os comentários do desafio.
   Tela grande: popup comum do MudBlazor. */
.conversa-dialog .conv-alca { display: none; }
/* O MudDialog rola a janela inteira quando o conteúdo é maior que ela (o
   conteúdo não encolhe numa coluna flex sem min-height: 0) — aí o título e a
   alça subiam junto. Assim, título e rodapé (caixa de escrever) ficam parados
   e só o conteúdo rola. */
.mud-dialog.conversa-dialog { overflow: hidden; }
.conversa-dialog .mud-dialog-content { min-height: 0; overscroll-behavior: contain; }
.conversa-dialog .mud-dialog-actions:has(.conv-escrever) { border-top: 1px solid var(--mud-palette-divider); }
.conv-titulo { display: flex; align-items: center; gap: 10px; }
.conv-titulo-txt { display: flex; flex-direction: column; min-width: 0; }
.conv-nome { font-weight: 700; font-size: 1.02rem; }
.conv-sub { font-size: 0.78rem; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-lista { display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
.conv-msg { display: flex; align-items: flex-start; gap: 4px; max-width: 88%; }
.conv-msg--minha { align-self: flex-end; flex-direction: row-reverse; }
.conv-balao { background: rgba(128,128,128,0.10); border-radius: 14px 14px 14px 4px; padding: 7px 11px; min-width: 0; }
.conv-msg--minha .conv-balao {
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    border-radius: 14px 14px 4px 14px;
}
.conv-topo { display: flex; align-items: baseline; gap: 8px; }
.conv-autor { font-size: 0.76rem; font-weight: 700; }
.conv-hora { font-size: 0.66rem; color: var(--mud-palette-text-secondary); }
.conv-texto { font-size: 0.9rem; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; }
/* Vídeo curto na conversa: tamanho de "story" pequeno, toca dentro do balão. */
.conv-video { display: block; width: 220px; max-width: 100%; max-height: 320px; margin-top: 6px; border-radius: 10px; background: #000; object-fit: contain; }
.conv-exercicio { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 0.72rem; font-weight: 700; opacity: 0.8; }
.conv-exercicio .mud-icon-root { font-size: 0.9rem; }
.conv-video-bar { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; }
.conv-video-dica { font-size: 0.78rem; color: var(--mud-palette-text-secondary); text-align: center; }
.ev-botao { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; user-select: none;
    padding: 8px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
    color: var(--mud-palette-primary); font-size: 0.85rem; font-weight: 700; }
.ev-botao:active { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); }
.ev-compacto { padding: 0; width: 40px; height: 40px; border: none; border-radius: 50%; flex-shrink: 0; }
.ev-enviando { pointer-events: none; opacity: 0.8; }
.ev-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.conv-apagar { opacity: 0.55; margin-top: 2px; }
.conv-escrever { display: flex; align-items: flex-end; gap: 6px; width: 100%; }
.conv-escrever .mud-input-control { margin: 0; }

@media (max-width: 959px) {
    /* Mesma estrutura da folha dos comentários do desafio (.reactors-sheet):
       presa embaixo, de ponta a ponta, sem depender do posicionamento do
       contêiner do MudBlazor (que deixava margens e centralizava). */
    .mud-dialog.conversa-dialog {
        /* bottom/max-height seguem a área visível (tecladoIos.js): com o teclado
           aberto a folha fica logo acima dele, inteira e com o título à vista —
           antes o iOS empurrava a página e o topo da folha sumia atrás do relógio. */
        position: fixed !important; left: 0 !important; right: 0 !important; bottom: var(--teclado-base, 0px) !important; top: auto !important;
        margin: 0 !important; width: 100% !important; max-width: 100% !important;
        max-height: min(85vh, calc(var(--vv-altura, 100vh) - var(--safe-top) - 12px));
        border-radius: 18px 18px 0 0 !important;
        /* A segunda sombra prolonga a folha para baixo, na cor dela: com o teclado
           do iPhone aberto, entre a folha e o teclado (e atrás da barra translúcida
           dele) aparecia a página. Fechado, isso fica fora da tela. O deslocamento
           passa do espalhamento em 24px (mais que o raio da borda): sem isso o topo
           da sombra ficava reto na altura da folha e pintava os cantos arredondados. */
        box-shadow: 0 -6px 24px rgba(0,0,0,0.25), 0 calc(50vh + 24px) 0 50vh var(--mud-palette-surface);
        animation: conversa-sobe 0.2s ease-out;
    }
    /* A alça fica presa ao centro da folha, não do título: o título reserva
       espaço à direita para o X (escondido no celular) e a alça saía torta. */
    .conversa-dialog .conv-alca {
        display: block; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
        width: 48px; height: 5px; border-radius: 3px; background: rgba(128,128,128,0.45);
    }
    .conversa-dialog .mud-dialog-title { padding-top: 26px; }
    .conversa-dialog .mud-dialog-actions { padding-bottom: calc(12px + var(--safe-bottom)); }
    /* Fecha arrastando para baixo (folha.js) ou tocando fora: sem o X. */
    .mud-dialog.conversa-dialog .mud-button-close { display: none; }
    /* Nem o botão "Fechar": a folha fecha arrastando ou tocando fora. Se ele
       for o único botão, a barra de ações some junto (sem faixa vazia). */
    .conversa-dialog .fechar-desktop { display: none !important; }
    .conversa-dialog .mud-dialog-actions:has(> .fechar-desktop:only-child) { display: none; }
    /* Sem a caixa de escrever no rodapé (barra de ações), o fim do conteúdo não pode
       ficar sob a barra de gestos do iPhone — inclusive quando a caixa está dentro do
       conteúdo, como no detalhe da corrida. */
    .mud-dialog.conversa-dialog:not(:has(.mud-dialog-actions .conv-escrever)) .mud-dialog-content { padding-bottom: calc(16px + var(--safe-bottom)); }
    .conversa-dialog .mud-dialog-title { cursor: grab; user-select: none; }
    @keyframes conversa-sobe { from { transform: translateY(100%); } }
}

/* Botão de enviar das conversas e comentários: redondo, na cor principal,
   ícone branco. Desabilitado fica apagado, mas no mesmo lugar. */
.btn-enviar.mud-icon-button {
    width: 42px; height: 42px; padding: 0; flex-shrink: 0;
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text, #fff) !important;
    border-radius: 50%;
}
.btn-enviar.mud-icon-button .mud-icon-root { font-size: 1.15rem; margin-left: -2px; margin-top: 1px; }
.btn-enviar.mud-icon-button:disabled,
.btn-enviar.mud-icon-button.mud-disabled { opacity: 0.45; }
/* O botão fica embaixo, alinhado à última linha, quando a caixa cresce (como no WhatsApp). */
.conv-escrever, .coment-escrever { align-items: flex-end; }

/* Caixa de escrever (CaixaMensagem): cresce para baixo até ~5 linhas, depois rola.
   Mesmo raio dos balões (14px). */
.caixa-msg { flex: 1; min-width: 0; display: flex; }
.caixa-msg textarea {
    flex: 1; min-width: 0; resize: none; box-sizing: border-box;
    field-sizing: content; min-height: 42px; max-height: 132px; overflow-y: auto;
    padding: 10px 14px; border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-inputs); background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit; font-size: 0.95rem; line-height: 1.35;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.caixa-msg textarea::placeholder { color: var(--mud-palette-text-secondary); opacity: 0.8; }
.caixa-msg textarea:focus { outline: none; border: 2px solid var(--mud-palette-primary); padding: 9px 13px; }

/* ── Modais: mesmo visual em todo o app ─────────────────────────────────
   Cantos arredondados como as folhas e cartões (18px). As caixas de confirmação
   (ShowMessageBoxAsync: "Encerrar treino?", "Excluir?"...) vinham com o visual
   padrão do MudBlazor — cantos retos e dois botões só de texto. Aqui o botão
   principal (o último, à direita) fica preenchido e os botões em pílula. */
.mud-dialog { border-radius: 18px !important; }
.mud-dialog .mud-dialog-actions { gap: 6px; padding: 8px 16px 16px; }
.mud-dialog .mud-dialog-actions .mud-button-root { border-radius: 9999px; padding-left: 16px; padding-right: 16px; }
.mud-dialog .mud-dialog-actions > .mud-button-text.mud-button-text-primary:last-child {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}
.mud-dialog .mud-dialog-actions > .mud-button-text.mud-button-text-primary:last-child:hover {
    background: var(--mud-palette-primary-darken);
}

/* ── Pools do personal (Fichas, Ciclos, Modelos de corrida): um cartão por item,
   como os planos no perfil do aluno, em vez de uma caixa única com linhas. */
.pool-cartoes { display: flex; flex-direction: column; gap: 10px; }
.pool-cartoes > div {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}

/* ── Barra de botões no fim dos formulários (salvar / modelo / cancelar) ──
   Tela grande: lado a lado. Celular: em grade de 2 colunas, sem botão solto
   sobrando numa linha; com 3 botões, o principal (o 1º) ocupa a linha inteira. */
.acoes-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@media (max-width: 600px) {
    .acoes-form { display: grid; grid-template-columns: 1fr 1fr; }
    .acoes-form > :first-child:nth-last-child(3),
    .acoes-form > :first-child:only-child { grid-column: 1 / -1; }
    .acoes-form > .mud-button-root { width: 100%; white-space: nowrap; min-width: 0; }
}

/* Selo da Biblioteca Kroppo: exercício pronto, com vídeo, mantido pela Kroppo. */
.kroppo-selo {
    display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; margin-left: 6px;
    padding: 1px 7px; border-radius: 999px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    background: var(--mud-palette-primary); color: var(--mud-palette-primary-text, #fff); white-space: nowrap;
}

/* ── Reordenar exercícios (montador de treino, pool de fichas e de ciclos) ──
   A bolinha do número é a alça de arrastar (planReorder.js). touch-action:none
   impede o navegador de rolar a página quando o dedo sai dali. */
.ex-num-drag { cursor: grab; touch-action: none; user-select: none; }
.ex-num-drag:active { cursor: grabbing; }
.ex-num-drag:hover { box-shadow: 0 0 0 3px rgba(143,175,28,0.35); }
/* Quem está na mão ganha destaque; os outros saem de foco. */
.pb-ex-lifted {
    position: relative; z-index: 3; transform: scale(1.02);
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
    border-color: var(--mud-palette-primary) !important;
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}
.pb-ex-dimmed { opacity: 0.45; filter: blur(1.5px); transition: opacity 0.15s ease-out, filter 0.15s ease-out; }
.pb-ex-drop { border-color: var(--mud-palette-primary) !important; border-style: dashed !important; opacity: 1 !important; filter: none !important; }
/* Confirmação de que a troca aconteceu. */
.pb-ex-moved { animation: pb-moved 0.7s ease-out; }
@keyframes pb-moved {
    0%   { background: rgba(143,175,28,0.30); transform: scale(1.015); }
    60%  { background: rgba(143,175,28,0.16); transform: scale(1); }
    100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .pb-ex-moved { animation-duration: 0.01ms; } }
.ex-mover { display: flex; flex-direction: column; flex-shrink: 0; margin: -6px 0; }
.ex-mover .mud-icon-button { padding: 1px; }

/* ── Menu lateral: itens rolam, perfil preso embaixo ── */
.nav-raiz { height: 100%; overflow: hidden; }
.nav-rolagem { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.nav-raiz > .nav-user-section {
    flex-shrink: 0; margin-top: 0 !important;
    background: var(--mud-palette-drawer-background, var(--mud-palette-surface));
}

/* ── Sem barras de rolagem em tela de toque ──
   No celular a barra (branca no iPhone) destoa do app e não ajuda: rola-se com o
   dedo. Áreas internas que rolam (listas, menu, folhas) também ficam sem ela.
   Com mouse (pointer: fine) a barra continua, porque lá ela é útil. */
@media (pointer: coarse) {
    * { scrollbar-width: none; }
    *::-webkit-scrollbar { display: none; width: 0; height: 0; }
}

/* ── Campos do exercício (editor de plano, pool de fichas e de ciclos) ──
   Quatro campos curtos lado a lado, sem que a carga roube duas colunas. */
.pb-campos {
    display: grid; gap: 10px; margin: 14px 0 18px; align-items: start;
    grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 620px;
}
.pb-campos .mud-input-control { margin: 0 !important; }
@media (max-width: 960px) { .pb-campos .mud-input-numeric-spin { display: none; } }
@media (max-width: 520px) {
    .pb-campos { gap: 14px 6px; margin: 12px 0 14px; }
    .pb-campos .mud-input-label { font-size: 0.8rem; }
}
@media (max-width: 440px) {
    .pb-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* GIF do exercício no tooltip do ícone de vídeo (IconeVideoExercicio). */
.pb-gif { display: block; width: 220px; height: auto; border-radius: 8px; }
.mud-tooltip.pb-gif-tip { padding: 4px; }

/* ── Painel do aluno (personal) ── */
.ap-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px; }
@media (max-width:700px) { .ap-kpis { grid-template-columns:repeat(2,1fr); } }
.ap-kpi { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:14px; background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default); }
.ap-kpi-rot { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--mud-palette-text-secondary); }
.ap-kpi-val { font-size:1.6rem; font-weight:700; line-height:1.2; }
.ap-kpi-sub { font-size:.75rem; color:var(--mud-palette-text-secondary); }
.ap-card { padding:16px; border-radius:14px !important; border:1px solid var(--mud-palette-lines-default); margin-bottom:12px; }
.ap-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.ap-titulo { font-weight:600; }
.ap-sub { font-size:.8rem; color:var(--mud-palette-text-secondary); }
.ap-vazio { font-size:.85rem; color:var(--mud-palette-text-secondary); padding:8px 0; }
.ap-chip { font-size:.75rem; font-weight:600; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.ap-bom { background:rgba(46,160,67,.15); color:#2ea043; }
.ap-medio { background:rgba(210,153,34,.18); color:#c08a1e; }
.ap-ruim { background:rgba(218,54,51,.14); color:#da3633; }
.ap-neutro { background:var(--mud-palette-action-default-hover); color:var(--mud-palette-text-secondary); }
.ap-barras { position:relative; display:flex; gap:6px; align-items:flex-end; height:150px; }
.ap-barra-col { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; min-width:0; }
.ap-barra-area { flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; }
.ap-barra { width:min(70%,34px); background:var(--mud-palette-primary); opacity:.45; border-radius:6px 6px 2px 2px; min-height:2px; }
.ap-barra-ok { opacity:1; }
.ap-barra-num { font-size:.72rem; font-weight:600; height:16px; }
.ap-barra-rot { font-size:.65rem; color:var(--mud-palette-text-secondary); margin-top:4px; }
.ap-meta-linha { position:absolute; left:0; right:0; border-top:2px dashed var(--mud-palette-secondary); margin-bottom:20px; pointer-events:none; }
.ap-vol { display:grid; grid-template-columns:96px 1fr 70px; align-items:center; gap:10px; margin:6px 0; }
.ap-vol-grupo { font-size:.82rem; }
.ap-vol-num { font-size:.78rem; text-align:right; color:var(--mud-palette-text-secondary); }
.ap-vol-trilho { position:relative; height:10px; border-radius:999px; background:var(--mud-palette-action-default-hover); overflow:hidden; }
.ap-vol-faixa { position:absolute; top:0; bottom:0; background:rgba(46,160,67,.22); }
.ap-vol-barra { position:absolute; top:2px; bottom:2px; left:0; border-radius:999px; background:var(--mud-palette-primary); }
.ap-sit-dentro { background:#2ea043; }
.ap-sit-abaixo, .ap-sit-zerado { background:#d29922; }
.ap-sit-acima { background:#da3633; }
.ap-carga { display:grid; grid-template-columns:1fr 90px auto; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--mud-palette-lines-default); }
.ap-carga:first-of-type { border-top:none; }
.ap-carga-nome { display:flex; flex-direction:column; min-width:0; }
.ap-spark { width:90px; height:30px; color:var(--mud-palette-primary); }
.ap-tags { display:flex; flex-wrap:wrap; gap:4px; margin:2px 0; }
.ap-tag { font-size:.68rem; font-weight:600; padding:1px 8px; border-radius:999px; background:var(--mud-palette-action-default-hover); color:var(--mud-palette-text-secondary); }
.ap-cat { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--mud-palette-primary); margin:14px 0 2px; }
.ap-cat:first-of-type { margin-top:0; }
.ap-cat + .ap-carga { border-top:none; }