/* ══ IDENTIDADE CLUTCH (a partir de 2026-10-20) ═════════════════════════
   "Sob pressão, os melhores aparecem."
   Paleta e formas do protótipo de Desempenho, escolhidas pelo dono para o
   site inteiro (substituem as 4 regras do manual de 2026-07).

   REGRAS:
   1. Formas: botão e campo 8 px; card e modal 16 px; chip e selo em pílula.
      A foto da tela de perfil continua redonda.
   2. Terracota só no que decide: ação principal, chip ativo e dado de
      destaque. Os demais botões são bloco elevado com linha de 1 px.
   3. Todo número, unidade, data e ID em JetBrains Mono. Sem exceção.
   4. Separação por linha de 1 px e bloco de cor; sombra só no painel
      lateral, que fica sobre o conteúdo.

   PALETA (tokens abaixo; escuro é o original, claro deriva dele):
     fundo #262120 · painel #2f2926 · elevado #383130/#423936 · linha #463d38
     texto #ece2d6 · areia #c9b8a5 · secundário #a8998a · apagado #7a6d62
     terracota #c0603d (hover #d9774f) · logo #AB4726
     abaixo #6f625a · acima #d9a67a · ganho #8fb07a
   ══════════════════════════════════════════════════════════════════════ */

/* Fontes locais: o app roda offline (WASM), então nada de CDN.
   Inter substitui a Helvetica Neue do manual — Helvetica Neue é licenciada
   da Apple e não pode ser embarcada; Inter é OFL e tem o mesmo desenho
   grotesco neutro, inclusive no peso 800 que os títulos exigem. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/inter-latin-700-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('fonts/inter-latin-800-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');
}

/* Identidade (2026-10-20): paleta e formas do protótipo de Desempenho, escolhidas pelo
   dono para o site inteiro. Escuro é o desenho original; claro deriva dele com os mesmos
   papéis (fundo, painel, elevado, linha, terracota). Nunca cor fixa fora destes tokens. */
:root {
    --bg: #e6ddd1;
    --surface: #fbf8f4;
    --surface-2: #efe8df;
    --raise: #e3d8ca;
    --modal-surface: #fbf8f4;
    --field-bg: #f5f0ea;
    --text: #2a2320;
    --text-muted: #6b5e54;
    --text-faint: #8e8074;
    --sand: #8a6a55;
    --border: #d3c5b5;
    --grid: #e2d8cb;
    --accent: #b5532f;
    --accent-hover: #c0603d;
    --accent-soft: rgba(181, 83, 47, .12);
    --band: rgba(138, 106, 85, .08);
    --band-line: rgba(138, 106, 85, .3);
    --on-accent: #ffffff;
    --below: #a8998a;
    --above: #b9773f;
    --good: #4f7d3c;
    --sidebar-bg: #2f2926;
    --sidebar-text: #ece2d6;
    --topbar-bg: #262120;
    --action-bg: var(--accent);
    --action-text: var(--on-accent);
    --action-border: transparent;
    --focus-ring: #2a2320;

    /* Formas: botão e campo 8 px, card 16 px, chip e selo em pílula. */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-sm: none;
    --shadow-md: none;

    --danger: #9a4a1f;
    --danger-bg: rgba(181, 83, 47, .10);
    --danger-text: #9a4a1f;
    --success-bg: rgba(79, 125, 60, .12);
    --success-text: #4f7d3c;
    --warning-bg: rgba(185, 119, 63, .14);
    --warning-text: #8a5a2e;

    /* Mapa de dores (EVA 0–10) e esforço: degraus sólidos da paleta; o número mantém
       a leitura para quem não distingue cor. */
    --pain-0: #efe8df;
    --pain-1: #a8998a;
    --pain-2: #b9773f;
    --pain-3: #b5532f;
    --pain-4: #7a3a20;

    --effort-0: #4f7d3c;
    --effort-1: #8a6a55;
    --effort-2: #b9773f;
    --effort-3: #b5532f;
    --effort-4: #7a2e17;
    --effort-text-on-light: #fbf8f4;
    --effort-text-on-dark: #fbf8f4;
}

:root[data-theme="dark"] {
    --bg: #262120;
    --surface: #2f2926;
    --surface-2: #383130;
    --raise: #423936;
    --modal-surface: #2f2926;
    --field-bg: #262120;
    --text: #ece2d6;
    --text-muted: #a8998a;
    --text-faint: #7a6d62;
    --sand: #c9b8a5;
    --border: #463d38;
    --grid: #41382f;
    --accent: #c0603d;
    --accent-hover: #d9774f;
    --accent-soft: rgba(192, 96, 61, .18);
    --band: rgba(201, 184, 165, .08);
    --band-line: rgba(201, 184, 165, .3);
    --on-accent: #ffffff;
    --below: #6f625a;
    --above: #d9a67a;
    --good: #8fb07a;
    --sidebar-bg: #2f2926;
    --sidebar-text: #ece2d6;
    --topbar-bg: #262120;
    --action-bg: var(--accent);
    --action-text: var(--on-accent);
    --action-border: transparent;
    --focus-ring: #c9b8a5;

    --shadow-sm: none;
    --shadow-md: none;

    --danger: #d9a67a;
    --danger-bg: rgba(217, 166, 122, .12);
    --danger-text: #d9a67a;
    --success-bg: rgba(143, 176, 122, .14);
    --success-text: #8fb07a;
    --warning-bg: rgba(217, 166, 122, .14);
    --warning-text: #d9a67a;

    --pain-0: #383130;
    --pain-1: #6f625a;
    --pain-2: #a8998a;
    --pain-3: #d9a67a;
    --pain-4: #c0603d;

    --effort-0: #8fb07a;
    --effort-1: #c9b8a5;
    --effort-2: #d9a67a;
    --effort-3: #c0603d;
    --effort-4: #8f3a22;
    --effort-text-on-light: #262120;
    --effort-text-on-dark: #ece2d6;
}

/* Regras 1 e 4 impostas globalmente. O !important existe aqui porque o
   Bootstrap (folha de terceiros, carregada antes desta) arredonda e sombreia
   os próprios componentes — sem isso, todo componente novo dele reintroduz
   canto redondo pela porta dos fundos. É regra de marca, não preferência.
   O foco usa outline, que não é box-shadow e sobrevive a esta regra. */
*,
*::before,
*::after {
    border: 0 !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text);
}

/* Regra 3: TODO número, unidade, data e ID em mono. Aplicada por classe
   (.mono) e diretamente nos campos numéricos, que são sempre dado. */
.mono,
input[type="number"],
input[type="date"],
input[type="time"] {
    font-family: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* Regra 3 aplicada nas classes que já existem e são semanticamente dado:
   valores de estatística, células de carga/reps/tempo, rótulos de eixo,
   cronômetros e badges numéricos. Fica aqui, e não espalhado por 19 páginas,
   porque a regra é do sistema, não de uma tela. */
.stat-value,
.stat-label,
.c-kg,
.c-reps,
.c-time,
.c-speed,
.stopwatch-value,
.c-set,
.chart-label,
.rest-timer-value,
.active-workout-time,
.progression-best strong,
.roster-cell-date,
.delta-up,
.delta-down,
.delta-flat,
.set-tag,
.sets-head,
.builder-set input,
.session-stats .stat-value {
    font-family: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* Unidade a 40% do corpo do número (manual, slide 07). */
.unit {
    font-family: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
    font-size: 0.4em;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* Títulos: peso 800, tracking fechado, sem itálico e sem caixa mista. */
h1, h2, h3, .display {
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* --- Marca --- */
/* O pico em ferrugem é parte inseparável do símbolo em todas as composições. */
:root {
    --brand-line: #C9B8A5;
    --brand-peak: var(--accent);
}

.brand-mark {
    display: inline-flex;
    flex: none;
    line-height: 0;
}

.brand-mark svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Logotipo: tracking −4,5%, peso 800, caixa alta (manual, slide 03). */
.brand-word {
    font-weight: 800;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.brand-mark-nav {
    width: 1.75rem;
    height: 1.75rem;
}

/* Fica no app.css, não no scoped do AuthLayout: o BrandMark é componente
   filho e o CSS isolado do layout não alcança o markup dele. */
.brand-mark-auth {
    width: 3.5rem;
    height: 3.5rem;
}

/* Régua de marca monocromática: a ferrugem pertence ao CTA da composição. */
.brand-rule {
    width: 4rem;
    height: 1px;
    background-color: var(--text);
    margin: 1.5rem 0;
}

/* --- Capa de marca (Início) --- */
.brand-cover {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 0;
}

.brand-mark-cover {
    width: 5rem;
    height: 5rem;
    margin-bottom: 1.5rem;
}

/* Display 64/0.95 (manual, slide 07). */
.brand-cover-word {
    font-size: 4rem;
    line-height: 0.95;
    letter-spacing: -0.045em;
    margin: 0;
}

.brand-cover-slogan {
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 400;
    margin: 0.75rem 0 0;
    color: var(--text);
}

.brand-cover-material,
.brand-cover-user-label {
    font-family: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0;
}

.brand-cover-user {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    margin: 2.5rem 0 0;
    padding-top: 1rem;
    width: 100%;
}

.brand-cover-user .mono {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Link não é botão: a afordância vem do sublinhado. */
a, .btn-link {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

a:hover, .btn-link:hover {
    color: var(--text);
    text-decoration-thickness: 1px;
}

/* As variantes preservam a semântica; a regra global de marca no fim da folha
   unifica o preenchimento ferrugem dos botões. */
.btn-primary {
    position: relative;
    color: var(--action-text);
    background-color: var(--action-bg);
    border-color: var(--action-border);
}

.btn-primary::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 1px;
    background-color: var(--accent);
    pointer-events: none;
}

.btn-primary:hover:not(:disabled) {
    color: var(--action-text);
    background-color: var(--action-bg);
    border-color: var(--action-border);
}

/* A paleta padrão do Bootstrap não pertence à marca. */
.btn-secondary {
    color: var(--text);
    background-color: var(--surface-2);
    border-color: var(--border);
}

.btn-secondary:hover:not(:disabled) {
    color: var(--text);
    background-color: var(--surface);
    border-color: var(--text-muted);
}

/* O Bootstrap tem regra própria para botão desabilitado (`.btn-secondary:disabled`,
   especificidade 0,2,0) que vence a nossa `.btn-secondary` (0,1,0). Sem estas linhas
   todo botão desabilitado volta à paleta padrão, fora das cinco cores,
   das 5. Só aparece quando a tela tem um botão desabilitado, que é por que passou
   batido nas auditorias anteriores. */
.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--action-text);
    background-color: var(--action-bg);
    border-color: var(--action-border);
    opacity: 0.5;
}

.btn-secondary:disabled,
.btn-secondary.disabled {
    color: var(--text);
    background-color: var(--surface-2);
    border-color: var(--border);
    opacity: 0.5;
}

.btn-danger:disabled,
.btn-danger.disabled {
    color: var(--text);
    background-color: transparent;
    border-color: var(--action-border);
    opacity: 0.5;
}

/* Mesma história em :focus e :active — o Bootstrap repinta o botão com a paleta
   padrão e essas regras também têm
   especificidade maior que a nossa de classe simples. Aqui foco e toque não
   mudam a cor: quem sinaliza foco é o outline de alto contraste, e o toque já tem o
   scale(0.98). Sem isto, clicar num botão secundário o deixa cinza. */
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    color: var(--action-text);
    background-color: var(--action-bg);
    border-color: var(--action-border);
}

.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active {
    color: var(--text);
    background-color: var(--surface-2);
    border-color: var(--border);
}

.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
    color: var(--action-text);
    background-color: var(--action-bg);
    border-color: var(--action-border);
}

/* Campos de formulário seguem o tema (senão ficam brancos no modo noite) */
.form-control,
.form-select,
.form-select-inline,
.mini,
select.form-control,
textarea.form-control {
    background-color: var(--field-bg);
    color: var(--text);
    border-color: var(--border);
}

.form-control::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.form-control:disabled,
.form-control[disabled] {
    background-color: var(--surface-2);
    color: var(--text-muted);
}

/* Somente leitura NÃO é desabilitado: o valor está lá para ser lido e copiado, então
   mantém a cor de texto cheia — só o fundo muda, para não parecer editável.

   Sem esta regra o Bootstrap pinta o campo de cinza claro, fora da paleta, e
   no tema ferro o texto claro cai em cima de fundo quase branco. A regra de tema
   acima cobria `:disabled` e `[disabled]`, mas não `[readonly]`, que é seletor
   separado lá. */
.form-control[readonly] {
    background-color: var(--surface-2);
    color: var(--text);
}

/* Avaliação aberta em "Ver": o fieldset desabilitado trava os campos, mas o valor é
   para ler — texto cheio, e placeholder some para não passar por dado registrado. */
.assessment-form {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.assessment-form:disabled .form-control,
.assessment-form:disabled .form-select-inline {
    color: var(--text);
}

.assessment-form:disabled ::placeholder {
    color: transparent;
}

/* Foco usa alto contraste por tema; ferrugem não atinge 3:1 nos dois fundos. */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-select-inline:focus-visible,
.form-check-input:focus-visible,
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
    box-shadow: none;
}

/* Foco por clique/toque não precisa do anel; só a navegação por teclado. */
.btn:focus:not(:focus-visible),
.form-control:focus:not(:focus-visible) {
    box-shadow: none;
}

/* O Bootstrap repinta o campo EM FOCO com a paleta dele, e
   `.form-control:focus` (0,2,0) vence a nossa
   `.form-control` (0,1,0). No tema escuro o campo clareava inteiro ao receber o
   cursor. Vale para o app todo, não só para esta tela: é a mesma armadilha já
   corrigida nos botões em :disabled/:active, agora nos campos.
   A auditoria só acusa com um campo FOCADO — por isso passou batido até aqui. */
.form-control:focus,
.form-select:focus,
.form-select-inline:focus,
select.form-control:focus,
textarea.form-control:focus {
    background-color: var(--field-bg);
    color: var(--text);
    border-color: var(--focus-ring);
}

/* Botões: raio consistente com o resto da UI, alvo de toque confortável, transição sutil. */
.btn {
    border-radius: 0;
    min-height: 2.75rem;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.1s ease;
}

.btn:active:not(:disabled) {
    transform: scale(0.98);
}

/* --- Ícones (Iconoir inline via <Icon>, cor herdada — nunca cor fixa) --- */
.icon {
    display: inline-flex;
    flex: none;
    vertical-align: middle;
    color: currentColor;
}

.icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.icon-20 { width: 1.25rem; height: 1.25rem; }
.icon-24 { width: 1.5rem; height: 1.5rem; }
.icon-28 { width: 1.75rem; height: 1.75rem; }
.icon-32 { width: 2rem; height: 2rem; }

/* Seta de expandir/recolher: cor do texto principal (quase preto no claro, quase branco
   no escuro). Antes era um <img> branco fixo, invisível no tema claro. */
.toggle-icon { color: var(--text); }

/* --- Skeleton (loading) --- Regra 4 proíbe gradiente, então o shimmer virou
   pulso de cor sólida: bloco de cimento que escurece e clareia. --- */
.skeleton {
    display: block;
    border-radius: 0;
    background: var(--surface-2);
    animation: skeleton-pulse 1.4s steps(2, end) infinite;
}

.skeleton-text {
    height: 0.9rem;
    margin: 0.4rem 0;
}

.skeleton-text.short {
    width: 55%;
}

.skeleton-card {
    height: 4.25rem;
    margin-bottom: 0.75rem;
}

@keyframes skeleton-pulse {
    0%, 100% { background-color: var(--surface-2); }
    50% { background-color: var(--border); }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}

/* Splash de boot do app (antes da sessão reidratar, antes do Router montar). */
.app-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
}

.app-loading-brand {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.app-loading-bar {
    width: 8rem;
    height: 0.35rem;
    border-radius: 0;
}

/* --- Empty state — ícone + título + descrição + ação; "nunca telas em branco" --- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 2.5rem 1.5rem;
    color: var(--text-muted);
}

.empty-state .icon {
    color: var(--text-muted);
    opacity: 0.55;
    margin-bottom: 0.25rem;
}

.empty-state h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text);
}

.empty-state p {
    margin: 0;
    max-width: 26rem;
    font-size: 0.9rem;
}

.empty-state .btn {
    margin-top: 0.5rem;
}

.empty-state.compact {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 0.75rem 0;
    gap: 0.6rem;
}

.empty-state.compact .icon {
    margin-bottom: 0;
}

.empty-state.compact p {
    font-size: 0.85rem;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* Validação segue a paleta: verde e vermelho do template não existem aqui. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--text-muted);
}

.invalid {
    outline: 1px solid var(--focus-ring);
}

.validation-message {
    color: var(--text);
    padding-left: 0.5rem;
}

/* Barra de erro: bloco escuro acessível e uma régua de ferrugem. */
.blazor-error-boundary {
    background-color: var(--sidebar-bg);
    padding: 1rem;
    color: var(--sidebar-text);
}

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

.darker-border-checkbox.form-check-input {
    border-color: var(--border);
}

/* Switch de tema: dois blocos sólidos, com o ativo destacado pelo fundo.
   Sem sol/lua/estrelas — aquele widget usava amarelo e azul, cores que não
   existem na paleta de 5. */
.theme-switch {
    display: flex;
    border: 1px solid var(--border);
}

.theme-switch-option {
    flex: 1;
    padding: 0.35rem 0.5rem;
    background: none;
    border: none;
    /* Tokens da PÁGINA, não da barra lateral. O alternador nasceu dentro do menu e
       trouxe o --sidebar-text ao mudar para /configuracoes — e esse token vale
       #C9B8A5 nos DOIS temas, que é exatamente o --surface do cimento: a opção
       inativa ficava escrita da cor do próprio card, invisível.

       Cor cheia nas duas opções, e não texto apagado na inativa: com 0,6rem o
       --text-muted cai para 3,85:1 no cimento. Quem separa ativo de inativo aqui é o
       bloco sólido, não o tom da letra. */
    color: var(--text);
    font-family: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.theme-switch-option.is-on {
    background-color: var(--surface-2);
    /* Quem contrasta com a superfície é o --text herdado da regra acima. */
}


/* Painel administrativo */
.admin-toolbar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.access-denied {
    padding: 2rem 1rem;
    text-align: center;
}

/* Card único (16px de respiro, raio 12-20px, sombra suave) — admin-card/progress-card/
   auth-card compartilham a mesma base pra não duplicar a mesma regra três vezes. */
.card,
.admin-card,
.progress-card {
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: var(--surface);
    box-shadow: none;
}

.card h2,
.admin-card h2,
.progress-card h2 {
    font-size: 1.15rem;
    margin: 0 0 0.75rem;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.admin-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

/* Chips e ações de ícone ao lado de um .btn ficam com a mesma altura dele. */
.admin-actions > .chip-btn,
.admin-actions > .builder-icon-action {
    min-height: 2.75rem;
}

/* Link com cara de botão centraliza o texto como o <button> ao lado. */
.admin-actions > a.btn,
.admin-actions > a.chip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ...e o chip também com o mesmo texto do .btn (Cancelar igual a Salvar). */
.admin-actions > .chip-btn {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
}

.admin-card > .form-group + .form-group {
    margin-top: 1rem;
}

.form-select-inline {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 0;
    font: inherit;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

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

/* O UA stylesheet do navegador aplica border-color: gray por padrão em <table>,
   herdado por thead/tbody/tr/th/td mesmo nos lados sem border-style (invisíveis).
   Não pinta nada, mas aparece fora da paleta na auditoria — zera aqui pra não
   poluir toda tela com tabela. */
table, thead, tbody, tr, th, td {
    border-color: var(--border);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    white-space: nowrap;
}

.row-actions {
    display: flex;
    gap: 0.75rem;
}

.muted {
    color: var(--text-muted);
}

.link-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}

.link-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    flex-wrap: wrap;
}

.invite-input {
    max-width: 20rem;
}

/* Configurações do aparelho */
.settings-scope {
    font-size: 0.85rem;
    margin: -0.5rem 0 1rem;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    min-height: 2.75rem;
}

.settings-stack {
    display: grid;
    gap: 2px;
}

.settings-hint {
    font-size: 0.78rem;
    margin: 0.25rem 0 0;
}

.settings-volume {
    margin-top: 0.75rem;
}

/* O endereço é longo e não pode empurrar o botão para fora: o campo encolhe até
   caber (min-width: 0 vence o tamanho intrínseco do input) e o texto rola dentro
   dele. Em JetBrains Mono porque é um identificador, não uma frase. */
.settings-feed input {
    flex: 1;
    min-width: 0;
    font-family: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
    font-size: 0.8rem;
}

/* O controle cresce e a leitura fica fixa à direita, para o número não dançar
   junto com o cursor.

   O range é desenhado à mão porque o controle nativo entra fora da marca por dois
   caminhos que o resto do CSS não alcança: as cores do trilho e do polegar são do
   sistema (cinza 197 e 118, fora da paleta), e o polegar é REDONDO por
   pseudo-elemento — e pseudo-elemento não é alcançado pelo `*` que zera os raios. */
.settings-volume input[type="range"] {
    flex: 1;
    min-width: 8rem;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    /* Altura de alvo de toque, mesmo com o trilho fino. */
    height: 2.5rem;

    /* O UA deixa color e border-color próprios no elemento (cinza 197 e 118). Não
       pintam nada — o fundo é transparente e não há border-style —, mas aparecem
       fora da paleta na auditoria. Mesma armadilha do <table>, zerada do mesmo
       jeito, para o achado não virar ruído permanente. */
    color: var(--text);
    border-color: var(--border);
}

.settings-volume input[type="range"]::-webkit-slider-runnable-track {
    height: 2px;
    background: var(--border);
}

.settings-volume input[type="range"]::-moz-range-track {
    height: 2px;
    background: var(--border);
}

/* Bloco sólido, não pastilha. Em --text e não em ferrugem: nesta rota o item
   ativo do menu já é o ponto de ferrugem da tela (regra 2). */
.settings-volume input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0.75rem;
    height: 1.25rem;
    background: var(--text);
    border: none;
    border-radius: 0;
    /* Centra o bloco no trilho de 2 px: (2 - 20) / 2. */
    margin-top: -0.56rem;
}

.settings-volume input[type="range"]::-moz-range-thumb {
    width: 0.75rem;
    height: 1.25rem;
    background: var(--text);
    border: none;
    border-radius: 0;
}

.settings-volume input[type="range"]:disabled::-webkit-slider-thumb {
    background: var(--text-muted);
}

.settings-volume input[type="range"]:disabled::-moz-range-thumb {
    background: var(--text-muted);
}

.settings-volume-value {
    min-width: 3.5rem;
    text-align: right;
}

/* Regra 3: unidade a 40% do corpo do número. */
.settings-volume-value .unit {
    font-size: 0.4em;
    margin-left: 0.15em;
}

/* Agenda: painel de convites pendentes */
.pending-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.75rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--text);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    min-height: 2.75rem;
}

.pending-chevron {
    color: var(--text-muted);
}

/* Agenda: grade do mês */
.cal-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.cal-title {
    flex: 1;
    text-align: center;
    margin: 0;
    text-transform: capitalize;
}

.cal-subtitle {
    margin-top: 1.25rem;
}

/* 7 colunas fixas. Em 375 px cada célula fica com ~45 px, que é o mínimo para o
   número caber com alvo de toque. */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.cal-weekday {
    background: var(--surface);
    padding: 0.35rem 0.2rem;
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cal-day {
    background: var(--surface);
    border: none;
    border-radius: 0;
    min-height: 3rem;
    padding: 0.3rem 0.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    color: var(--text);
    cursor: pointer;
    font: inherit;
}

.cal-day:hover {
    background: var(--surface-2);
}

/* Dia de fora do mês continua clicável, só recuado — some-lo abriria buracos na
   grade e mudaria a altura ao trocar de mês. */
.cal-day.is-other .cal-daynum {
    color: var(--text-muted);
    opacity: 0.6;
}

.cal-day.is-selected {
    background: var(--surface-2);
}

/* "Hoje" é marcador SEPARADO de "selecionado": o peso preserva a referência
   temporal sem introduzir uma borda unilateral. */
.cal-day.is-today .cal-daynum {
    font-weight: 800;
}

/* Dia bloqueado: régua sólida no rodapé da célula.
   Listra diagonal seria `repeating-linear-gradient`, e gradiente é proibido pela
   regra 4 — a auditoria acusa `background-image` com gradient. Fundo cheio também
   não serve: brigaria com o dia selecionado, que é o estado sendo manipulado. */
.cal-day.is-blocked {
    position: relative;
}

.cal-day.is-blocked::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--text-muted);
}

/* No celular a grade encosta na borda do card. Com o respiro de 1.25rem de cada
   lado sobram 288 px para 7 colunas, e a célula fica com 40 px — abaixo dos 44 de
   alvo de toque. A margem negativa devolve exatamente esse respiro. */
@media (max-width: 640px) {
    .cal-grid {
        margin-left: -1.25rem;
        margin-right: -1.25rem;
    }
}

.cal-daynum {
    font-size: 0.85rem;
}

.cal-dots {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Marcador em bloco neutro. Ferrugem por dia marcado seria até 35 pontos numa
   grade de 6 semanas (regra 2) — a ferrugem da tela é do item ativo do menu. */
.cal-dot {
    width: 5px;
    height: 5px;
    background: var(--text-muted);
}

.cal-dot.is-confirmed {
    background: var(--text);
}

.cal-block {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.6rem;
    background: var(--surface-2);
    margin-bottom: 0.5rem;
}

/* Agenda: lista do dia */
.appt-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.appt-item {
    padding: 0.75rem 0;
}

.appt-item.is-open {
    padding-left: 0.75rem;
}

.appt-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.appt-when {
    font-size: 1.05rem;
}

.appt-who {
    font-weight: 600;
}

.appt-note {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
}

/* Selo da recorrência. Em texto secundário, não em bloco: é contexto do compromisso,
   não uma segunda ação disputando atenção com os botões. */
.appt-series {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.appt-series-mark {
    font-size: 0.9rem;
}

/* Ação destrutiva rara vira link, não chip: encerrar a recorrência ao lado de
   "Aceitar" e "Cancelar" com o mesmo peso convidaria ao clique errado. */
.linkish {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    color: var(--text-muted);
    font: inherit;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.linkish:hover {
    color: var(--text);
}

.appt-thread {
    list-style: none;
    padding: 0.5rem 0 0;
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.appt-form {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}

/* Filtros das solicitações */
.request-filters {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-bottom: 0.75rem;
}

.filter-chips,
.filter-fields {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.filter-field .form-control {
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
}

.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    color: var(--text-muted);
}

.filter-search {
    flex: 1;
    min-width: 12rem;
}

/* Chip escolhido: fundo sólido de alto contraste. */
.chip-btn.is-on {
    background: var(--surface-2);
}

.request-count {
    font-size: 0.78rem;
    margin: 0.6rem 0 0;
    text-align: right;
}

/* Solicitações do aluno ao personal */
.request-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}

.request-item {
    padding: 0.75rem 0;
}

/* A que pede resposta ganha recuo, sem repetir ferrugem pela lista. */
.request-item.is-open {
    padding-left: 0.75rem;
}

.request-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.request-who {
    font-weight: 600;
}

.request-when {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-left: auto;
}

/* A conversa. Sem balão e sem lado alternado: bloco de cor sólida e linha de 1 px
   (regra 4), e a fala de quem lê se distingue pelo fundo, não por posição. */
.request-thread {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.request-msg {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.6rem;
    background: var(--surface-2);
}

.request-msg.is-mine {
    background: none;
    border: 1px solid var(--border);
}

.request-msg-head {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.8rem;
    flex-wrap: wrap;
}

.request-msg-body {
    white-space: pre-wrap;
}

.badge-status {
    font-size: 0.875rem;
    padding: 0.15rem 0.5rem;
    border-radius: 0;
    background: var(--surface-2);
    color: var(--text);
}

/* Card "Em breve" dos planos do aluno (AiPlansComingSoon): selo acima do título. */
.ai-plans-soon { display: grid; gap: 8px; justify-items: start; }

.badge-status.accepted {
    background: var(--success-bg);
    color: var(--success-text);
}

.badge-status.pending {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.badge-status.rejected {
    background: var(--danger-bg);
    color: var(--danger-text);
}

/* Montador de plano / execução */
.plan-builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    gap: 1rem;
    align-items: start;
}

.plan-builder-editor {
    min-width: 0;
}

.plan-builder-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
    margin-bottom: 1.5rem;
}

.plan-builder-head .form-group {
    margin-bottom: 0;
}

.plan-builder-name {
    flex: 1 1 18rem;
}

.plan-builder-frequency {
    flex: 0 0 10rem;
}

/* Divisão rotina → exercício (opção C, escolhida em 2026-10-19): a rotina ganha a
   linha de 1 px e cada exercício vira um bloco sólido um degrau abaixo do card
   (regra 4: linha de 1 px e bloco de cor sólida, sem sombra). No tema escuro o
   degrau é o ferro fundido do fundo; no claro, a rotina ativa já está em
   cimento, então o degrau inverte para a poeira de aço.
   A linha é outline, não border: a regra global `* { border: 0 !important }`
   zera toda borda (o .billing-plan.is-current usa o mesmo recurso). */
.builder-routine,
.routine-card,
.diet-meal-editor,
.diet-meal,
.plan-card {
    --card-inset: var(--bg);
    outline: 1px solid var(--border);
    outline-offset: -1px;
}

.builder-routine.is-active {
    background: var(--surface-2);
}

:root:not([data-theme="dark"]) .builder-routine.is-active {
    --card-inset: var(--surface);
}

.builder-routine-head,
.builder-exercise-head,
.plan-exercise-library-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.builder-routine-head .form-group {
    flex: 1 1 18rem;
    margin: 0;
}

.builder-routine-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.builder-routine-state,
.builder-circuit-toolbar .muted,
.builder-exercise-meta {
    font-size: 0.925rem;
}

.builder-empty {
    padding: 1rem 0;
}

.builder-routine-title {
    font-size: 1.25rem;
}

.routine-set-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding-top: 0.5rem;
}

.routine-set-summary > span {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
}

.routine-set-summary > .routine-set-summary-label {
    font-size: 0.8125rem;
    font-weight: 800;
}

.builder-exercise {
    padding: 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--card-inset, transparent);
}

/* Espaço entre blocos, nunca dentro de um circuito: lá o grupo é uma peça só. */
.builder-exercise + .builder-exercise:not(.is-circuit:not(.circuit-first)) {
    margin-top: 8px;
}

.builder-exercise[draggable="true"] {
    cursor: grab;
}

.builder-exercise[draggable="true"]:active {
    cursor: grabbing;
}

.builder-exercise input,
.builder-exercise textarea,
.builder-exercise select,
.builder-exercise button {
    cursor: auto;
}

/* Circuito: os exercícios do grupo viram um bloco só, costurado por um trilho
   ferrugem contínuo à esquerda (regra 2: ponto funcional, não fundo). As emendas
   internas ficam retas para o bloco ler como uma peça; os cantos de fora seguem
   o raio único da marca. */
.builder-exercise.is-circuit,
.exercise-block.is-circuit {
    position: relative;
    padding: 16px 16px 16px 24px;
    background: var(--surface-2);
}

.builder-exercise.is-circuit {
    background: var(--card-inset, var(--surface-2));
}

.builder-exercise.is-circuit::before,
.exercise-block.is-circuit::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--accent);
}

.is-circuit:not(.circuit-last) {
    margin-bottom: 0;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.is-circuit:not(.circuit-first) {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.is-circuit.circuit-first::before {
    border-top-left-radius: var(--radius-md);
}

.is-circuit.circuit-last::before {
    border-bottom-left-radius: var(--radius-md);
}

/* Na execução, o exercício da vez ganha contorno: é o que fazer agora. */
.exercise-block.is-circuit-now {
    outline: 1px solid var(--accent);
    outline-offset: -1px;
}

.circuit-tag {
    margin-right: 8px;
    color: var(--accent);
    font-weight: 800;
}

.circuit-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.circuit-hint {
    margin: -8px 0 16px;
    font-size: 0.8125rem;
}

.circuit-rounds {
    display: flex;
    gap: 8px;
    margin: -8px 0 16px;
}

.circuit-rounds span {
    width: 24px;
    height: 4px;
    background: var(--border);
}

.circuit-rounds span.is-done {
    background: var(--accent);
}

.builder-exercise.is-selected-for-circuit {
    background: var(--surface-2);
    border-color: var(--action-bg);
}

.builder-circuit-selection-state {
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 800;
}

.builder-circuit-toolbar,
.builder-circuit-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.builder-circuit-toolbar {
    padding: 1rem 0;
}

.builder-circuit-heading {
    margin-bottom: 0.75rem;
    font-size: 0.925rem;
    font-weight: 800;
}

.builder-exercise.is-dragging {
    opacity: 0.55;
}

.builder-exercise-head {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Sem espaço, Trocar e a lixeira descem de linha em vez de sair da tela. */
.builder-exercise-head > div {
    display: grid;
    gap: 0.2rem;
    flex: 1 1 8rem;
    min-width: 0;
}

.builder-exercise-capa,
.plan-exercise-capa {
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.builder-exercise-media-trigger {
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    flex: 0 0 3.5rem;
    overflow: hidden;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.builder-exercise-meta {
    display: block;
}

.builder-sets {
    margin: 1rem 0 0 0.5rem;
}

.builder-notes .muted {
    display: block;
    margin-top: 0.25rem;
    text-align: right;
    font-size: 0.8rem;
}

.workout-note {
    margin: 0.75rem 0;
    padding: 0.75rem;
    color: var(--text-muted);
    white-space: pre-wrap;
}

.set-method-picker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.set-method-help-wrap {
    position: relative;
    display: inline-flex;
}

.set-method-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: auto;
    padding: 0;
    color: var(--text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.set-method-help.is-compact {
    width: 2rem;
    min-height: 2rem;
    padding: 0;
    border-color: var(--border);
    text-decoration: none;
}

.set-method-dismiss-layer {
    position: fixed;
    z-index: 30;
    inset: 0;
    width: 100vw;
    height: 100vh;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
}

.set-method-popover {
    position: absolute;
    z-index: 31;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    display: grid;
    gap: 0.5rem;
    width: min(22rem, calc(100vw - 2rem));
    padding: 1rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    line-height: 1.45;
    transform: translateX(-50%);
}

.workout-summary-tabs {
    display: flex;
    gap: 0.75rem;
}

.workout-summary-tabs .is-active {
    color: var(--action-text);
    background: var(--action-bg);
}

.workout-summary-content {
    display: grid;
    grid-template-columns: minmax(12rem, 22rem) minmax(12rem, 1fr);
    gap: 1.5rem;
    align-items: center;
    min-height: 0;
}

.muscle-body-map {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.muscle-body-map > img {
    display: block;
    width: 100%;
    height: auto;
}

.muscle-body-map-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.muscle-body-map.is-interactive .muscle-body-map-overlay {
    pointer-events: auto;
}

.muscle-map-region {
    fill: transparent;
}

.muscle-body-map.is-interactive .muscle-map-region {
    cursor: pointer;
    pointer-events: all;
}

.muscle-body-map.is-interactive .muscle-map-region:focus-visible {
    outline: none;
    stroke: var(--accent);
    stroke-width: 4px;
}

.muscle-map-region.is-active {
    fill: var(--accent);
    fill-opacity: 0.5;
}

.workout-summary-trigger {
    width: 100%;
    padding: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.workout-summary-trigger .muscle-body-map {
    pointer-events: none;
}

.workout-summary-overlay {
    position: fixed;
    z-index: 50;
    inset: 0;
    display: flex;
    align-items: flex-start;
    background: transparent;
}

.workout-summary-modal {
    width: 100%;
    height: clamp(14rem, 24dvh, 20rem);
    padding: 1rem;
    overflow: auto;
    background: var(--modal-surface);
}

/* Abas à esquerda, título centralizado, fechar à direita. Em tela estreita o
   título sobe para a primeira linha e os botões ficam embaixo. */
.workout-summary-modal-toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "tabs title close";
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 0.75rem;
}

.workout-summary-modal-toolbar .workout-summary-tabs {
    grid-area: tabs;
}

.workout-summary-modal-toolbar .workout-summary-title {
    grid-area: title;
    margin: 0;
    text-align: center;
}

.workout-summary-modal-toolbar .workout-summary-close {
    grid-area: close;
    justify-self: end;
}

@media (max-width: 640px) {
    .workout-summary-modal-toolbar {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title title"
            "tabs close";
    }
}

.workout-summary-modal .muscle-body-map {
    max-height: calc(clamp(14rem, 24dvh, 20rem) - 5rem);
}

.workout-summary-modal .muscle-body-map > img {
    max-height: calc(clamp(14rem, 24dvh, 20rem) - 5rem);
    object-fit: contain;
}

.workout-summary-modal .workout-summary-side {
    max-height: calc(clamp(14rem, 24dvh, 20rem) - 5rem);
    overflow-y: auto;
}

/* Cards compactos: cabem mais grupos por linha. O rótulo "Séries por grupo
   muscular" aparece uma vez no título, não em cada card. */
.workout-summary-title {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 800;
}

.workout-summary-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.workout-summary-list li {
    display: grid;
    overflow: hidden;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.picker-section {
    margin: 16px 0 8px;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 800;
}

.workout-summary-list span {
    padding: 8px 8px 0;
    font-size: 0.8125rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.workout-summary-list strong {
    padding: 4px 8px 8px;
    font-size: 1.75rem;
    line-height: 1;
}

.security-password-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.builder-set {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.75rem 0;
}

.builder-icon-btn,
.builder-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}

.builder-icon-btn {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    padding: 0;
}

.builder-icon-action {
    gap: 0.5rem;
    min-height: 2rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.925rem;
    font-weight: 600;
}

.builder-icon-btn:hover,
.builder-icon-action:hover,
.builder-icon-btn.is-on {
    border-color: var(--border);
    background: var(--surface-2);
}

.builder-icon-btn:disabled {
    cursor: default;
    opacity: 0.4;
}

.builder-icon-btn.circuit-select.is-on {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

.icon-down .icon {
    transform: rotate(180deg);
}

.repetition-range {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.plan-exercise-library {
    position: sticky;
    top: 4.5rem;
    display: grid;
    gap: 0.75rem;
    /* Altura fixa da janela: a lista fica com o que sobra (mínimo ~3 itens) e rola por
       dentro, para o boneco caber embaixo sem rolar a página. Linhas: abas, título,
       filtros, lista e boneco. */
    height: calc(100dvh - 5.5rem);
    grid-template-rows: auto auto auto minmax(11rem, 1fr) auto;
    padding: 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow-y: auto;
}

.plan-exercise-library .filter-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.plan-exercise-library .filter-fields .filter-search,
.plan-exercise-library .filter-fields .checkbox-row {
    grid-column: 1 / -1;
}

/* Boneco separado da lista: linha de 1 px e título próprio. */
.plan-exercise-library .workout-summary-trigger {
    display: grid;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 !important;
    text-align: left;
}

/* Boneco 4:3: limitar a largura encolhe a altura sem cortar a figura. */
.plan-exercise-library .muscle-body-map {
    max-width: 18rem;
    margin: 0 auto;
}

.builder-map-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
}

.plan-exercise-library h3 {
    margin: 0;
}

.plan-exercise-list {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    margin: 0;
    padding: 0;
}

.plan-exercise-item {
    display: grid;
    grid-template-columns: 2rem 3.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-height: 4.5rem;
}

.plan-exercise-add {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    cursor: pointer;
}

.plan-exercise-add:hover {
    color: var(--sidebar-text);
    background: var(--sidebar-bg);
}

.plan-exercise-item.is-selected {
    background: var(--surface-2);
}

.plan-exercise-add.is-selected {
    color: var(--sidebar-text);
    background: var(--sidebar-bg);
}

.plan-exercise-name {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    font-size: 0.95rem;
}

.plan-exercise-name .muted {
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .plan-builder-layout {
        grid-template-columns: 1fr;
    }

    .plan-exercise-library {
        position: static;
        height: auto;
        grid-template-rows: auto auto auto 18rem auto;
    }
}

@media (max-width: 640px) {
    .builder-routine-head {
        align-items: stretch;
        flex-direction: column;
    }

    .builder-routine-actions {
        justify-content: flex-start;
    }

    .builder-icon-btn,
    .plan-exercise-add {
        width: 2.75rem;
        height: 2.75rem;
        flex-basis: 2.75rem;
    }

    .workout-summary-content,
    .security-password-grid {
        grid-template-columns: 1fr;
    }
}

.mini {
    width: 5rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: 0;
}

/* Telas de autenticacao (Login, Cadastro), usadas dentro do AuthLayout.
   Mesma base do .card, só com mais respiro e sombra um pouco mais presente
   (fica centralizado e isolado na tela, sem outros cards ao redor). */
.auth-card {
    padding: 2rem;
    border-radius: 0;
    background: var(--surface);
    box-shadow: none;
}

.auth-card h1 {
    margin: 0 0 0.25rem;
    font-size: 1.6rem;
}

.auth-subtitle {
    margin: 0 0 1.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.auth-field-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.auth-card .form-group {
    margin-bottom: 1rem;
}

.auth-card .form-group label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.auth-password-control {
    position: relative;
}

.auth-password-control .form-control {
    min-height: 2.75rem;
    padding-right: 3.25rem;
}

.password-visibility-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 8px;
    transform: translateY(-50%);
}

/* Só o desenho, sem fundo: a máscara pinta o olho com a cor do texto do tema, que
   continua legível sobre o campo no claro e no escuro (o SVG branco sumiria no claro). */
.password-visibility-icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--text);
    -webkit-mask: url(icons/white/eye.svg) center / contain no-repeat;
    mask: url(icons/white/eye.svg) center / contain no-repeat;
}

/* Preenchimento automático do navegador pinta o campo de claro (ou amarelo) por conta
   própria; no tema escuro o texto e o olho, claros, sumiam. Mantém as cores do tema. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset;
    caret-color: var(--text);
    transition: background-color 9999s ease-out 0s;
}

.password-visibility-icon.is-hidden {
    -webkit-mask-image: url(icons/white/eye-closed.svg);
    mask-image: url(icons/white/eye-closed.svg);
}

.auth-error,
.auth-info,
.auth-success {
    margin: 0;
    padding: 1rem 5.75rem 1rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
}

.auth-error {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.auth-info,
.auth-success {
    background: var(--success-bg);
    color: var(--success-text);
}

/* Avisos operacionais flutuam como notificações do sistema, sem deslocar a tela. */
.app-toast {
    position: fixed;
    right: 1rem;
    bottom: var(--toast-offset, 1rem);
    z-index: 1300;
    box-sizing: border-box;
    width: min(26rem, calc(100vw - 2rem));
    max-height: min(50vh, 20rem);
    overflow: auto;
    box-shadow: none;
    animation: app-toast-in 0.18s ease-out;
}

.app-toast[hidden] {
    display: none !important;
}

.app-toast-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    min-width: 4.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 8px;
    color: var(--action-text);
    background: var(--action-bg);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* Aviso com ações (ex.: depois de replicar): mensagem em cima e, embaixo, Abrir e Editar
   à esquerda do Fechar, na mesma linha, em vez do Fechar solto no canto. */
.auth-info.toast-with-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-right: 1rem;
}

.toast-with-actions > span {
    flex: 1 1 100%;
}

.toast-with-actions .app-toast-close {
    position: static;
}

/* Mesma altura do Fechar: os três são alvos de toque lado a lado. */
.toast-with-actions .chip-btn {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.app-toast-close:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

@keyframes app-toast-in {
    from { opacity: 0; transform: translateY(0.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .app-toast {
        animation: none;
    }
}

.auth-linkbutton {
    background: none;
    border: none;
    padding: 0;
    color: var(--text);
    cursor: pointer;
    font-size: inherit;
    text-decoration: underline;
}

.auth-linkbutton:disabled {
    color: var(--text-muted);
    cursor: default;
}

.auth-submit {
    width: 100%;
    padding: 0.6rem;
    font-size: 1rem;
    margin-top: 0.25rem;
}

.auth-switch {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.auth-card .validation-message {
    display: block;
    margin-top: 0.35rem;
    color: var(--text);
    font-size: 0.85rem;
}

.auth-external {
    margin: 1.5rem 0;
    padding-bottom: 1.5rem;
}

.auth-external h2 {
    margin: 0 0 1rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.auth-provider-list {
    display: grid;
    gap: 0.5rem;
}

/* Provedores são alternativas equivalentes, não CTAs: nenhum deles usa ferrugem. */
.auth-provider {
    width: 100%;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
}

.auth-provider-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    fill: currentColor;
}

.auth-provider:hover:not(:disabled) {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-color: var(--border);
}

.auth-provider-unavailable {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Título com ação ao lado (ex.: o lápis do perfil). */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.page-head h1 {
    margin: 0;
}

/* Perfil em leitura: rótulo acima e valor abaixo.
   Sem caixa de input desabilitada — campo cinza convida a clicar no que não é
   editável, e a lista de definição já diz que é conteúdo, não formulário. */
/* Ajuda do formato de importação. <details> recolhido: é referência de consulta, não
   parte do fluxo — quem já sabe o formato não precisa vê-la toda vez. */
.import-help summary {
    cursor: pointer;
    font-weight: 700;
}

.import-sample {
    margin: 0.75rem 0 0;
    padding: 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 0;
    font-size: 0.75rem;
    /* O exemplo é largo: rola dentro do próprio bloco em vez de empurrar a página. */
    overflow-x: auto;
    white-space: pre;
}

/* Cartão do personal (/meu-personal). A única exceção totalmente redonda continua
   sendo a foto da própria tela de perfil (.profile-photo). */
.trainer-head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.trainer-avatar {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: 0;
    flex-shrink: 0;
}

.trainer-avatar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    color: var(--text-muted);
}

.trainer-since {
    font-size: 0.8rem;
    margin: 0.15rem 0 0;
}

/* O espaço acima já vem de .trainer-contact-actions; margem aqui desalinha
   o WhatsApp do "Encerrar vínculo" na mesma linha. */

.professional-location,
.professional-profile-status,
.professional-field-hint {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
}

.professional-catalog {
    margin-top: 2rem;
}

.catalog-heading h2 {
    margin-bottom: 0.25rem;
}

.catalog-heading p {
    margin-top: 0;
}

.catalog-filter-grid,
.professional-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
}

.catalog-filters .form-group,
.professional-profile-grid .form-group {
    margin-bottom: 0;
}

.professional-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
}

.professional-card {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.professional-card h3 {
    margin: 0;
    font-size: 1.05rem;
}

.professional-description {
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.professional-card > .professional-description {
    flex: 1;
    margin: 1rem 0;
}

.professional-card-actions,
.catalog-pager {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.professional-card-actions .btn {
    min-width: 7rem;
}

.trainer-contact-actions {
    align-items: center;
    margin-top: 1rem;
}

.trainer-contact-actions .btn,
.trainer-contact-actions .chip-btn {
    min-height: 2.75rem;
    padding: 0.65rem 0.85rem;
    font-size: 1rem;
    font-weight: 600;
}

.empty-state-action {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.professional-rating {
    color: var(--text);
    margin: 0.5rem 0 0;
}

.professional-rating-empty {
    margin: 0.5rem 0 0;
}

.catalog-pager {
    justify-content: center;
    margin-top: 1.5rem;
}

.professional-profile-editor {
    max-width: 48rem;
}

.professional-profile-editor .page-head {
    margin-bottom: 1rem;
}

.professional-profile-editor .page-head h2 {
    margin-bottom: 0;
}

.professional-profile-editor form {
    display: grid;
    gap: 1rem;
}

.professional-profile-editor form > .admin-actions {
    margin-top: 0;
}

.professional-description-input {
    resize: vertical;
    min-height: 8rem;
}

.professional-publish-toggle {
    min-height: 2.75rem;
    margin-top: 0;
}

.profile-facts {
    margin: 0;
}

.profile-facts dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-top: 1rem;
}

.profile-facts dd {
    margin: 0.15rem 0 0;
    padding-bottom: 0.75rem;
    font-size: 1rem;
}

.profile-facts dd:last-child {
    padding-bottom: 0;
}

.profile-social-links {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* --- Foto de perfil ---
   A foto DESTA tela permanece redonda por decisão do dono. A exceção vive só aqui,
   no `.profile-photo`, e não numa classe genérica de avatar. */
.profile-photo-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
}

.profile-photo {
    flex: none;
    width: 6rem;
    height: 6rem;
    border: 1px solid var(--border);
    background: var(--surface-2);
    overflow: hidden;
    /* A exceção. O recorte quadrado vem pronto do servidor (256/512), então o círculo
       é só a máscara — a imagem já está centrada e não deforma.

       O !important é obrigatório aqui porque a regra global de 8 px também usa
       `!important` para neutralizar os raios inconsistentes do Bootstrap. */
    border-radius: 50% !important;
}

.profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Iniciais no lugar da foto: diferencia contas melhor que silhueta genérica.
   Em mono, como todo dado/ID do sistema (regra 3). */
.profile-photo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.profile-photo-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

/* O <label> embrulha o InputFile escondido, então precisa se comportar como botão. */
.profile-photo-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
}

.profile-photo-actions .btn.disabled {
    opacity: 0.5;
    cursor: default;
}

.profile-photo-hint {
    margin: 0;
    font-size: 0.78rem;
}

/* Evolução (métricas corporais e check-ins) */
.progress-forms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.metric-grid label,
.notes-label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.notes-label {
    margin-bottom: 0.75rem;
}

.progress-section {
    margin-top: 1.5rem;
}

.progress-section h2 {
    font-size: 1.15rem;
    margin: 0 0 0.75rem;
}

.progress-chart {
    width: 100%;
    max-width: 640px;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
}

.chart-axis {
    stroke: var(--border);
    stroke-width: 1;
}

.chart-label {
    fill: var(--text-muted);
    font-size: 13px;
}

.chart-line {
    stroke: var(--text);
    stroke-width: 2;
}

.chart-dot {
    fill: var(--text);
}

.chart-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.chart-header h2 {
    margin: 0;
}

.progression-selectors {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: baseline;
}

.progression-best {
    margin-top: 0.5rem;
}

.compare-selectors {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

/* Direção pela seta (▲/▼), sem cor de "bom/ruim": para métricas corporais,
   subir ou descer não é intrinsecamente positivo ou negativo. */
.delta-up,
.delta-down {
    color: var(--text);
    white-space: nowrap;
}

.delta-flat {
    color: var(--text-muted);
    white-space: nowrap;
}

/* --- Painel inicial --- */
.home-greeting {
    margin-bottom: 1.5rem;
}

.home-block {
    margin-bottom: 2rem;
}

.home-block h2 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
}

/* Semana: sete blocos de largura igual, sempre na mesma posição. */
.week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.35rem;
}

.week-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.6rem 0.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
}

/* Regra 2: são sete blocos e vários acendem — dia treinado não pode ser ferrugem.
   O preenchimento sólido já separa do resto. */
.week-day.is-trained {
    background: var(--surface-2);
    border-color: var(--text-muted);
}

.week-day-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.week-day-number {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.week-day.is-trained .week-day-number {
    color: var(--text);
}

.week-summary {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
}

.next-workout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
}

.next-workout-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.next-workout-name {
    font-weight: 700;
    font-size: 1.15rem;
}

/* --- Playlist ---
   Sobrou o atalho: o app não lê mais capa, nome nem faixas do Spotify (a Web API
   exige Premium na conta dona do app). As regras de capa e lista de faixas foram
   removidas junto com a marcação que as usava — CSS órfão vira ruído e engana quem
   procura de onde vem um estilo.

   O player embutido segue fora: o iframe do Spotify traz canto arredondado, verde e
   gradiente, não é estilizável, e brigaria com as regras 1, 2 e 4 do CLUTCH. */
.playlist {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 1rem;
}

.playlist-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}

.playlist-desc {
    font-size: 0.82rem;
    margin: 0;
}

/* --- Cupons de parceiros --- */
/* Faixa que rola na horizontal: é carrossel sem script, e o dedo já sabe arrastar.
   Em tela larga os cards ficam lado a lado e a rolagem nem aparece. */
.coupon-strip {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

/* Regra 1: canto reto. Regra 2: nenhum cupom leva ferrugem — são vários na faixa,
   e o CTA da tela já é o "Começar" do próximo treino. */
.coupon-card {
    flex: 0 0 16rem;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
}

.coupon-card-image {
    width: 100%;
    height: 8rem;
    object-fit: cover;
    display: block;
}

.coupon-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 0.75rem;
}

.coupon-card-store {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.coupon-card-title {
    font-weight: 700;
    font-size: 1rem;
}

.coupon-card-desc {
    font-size: 0.8rem;
}

/* O código é para copiar: mono e emoldurado, como um campo de dado. */
.coupon-card-code {
    padding: 0.2rem 0.5rem;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
}

/* Logo da loja e imagem do cupom no painel admin. */
.store-logo {
    width: 3.5rem;
    height: 2.5rem;
    border: 1px solid var(--border);
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.store-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* O <label> embrulha um InputFile escondido; precisa se comportar como botão. */
.chip-btn.disabled {
    opacity: 0.5;
    cursor: default;
}

label.chip-btn {
    cursor: pointer;
}

/* --- Notícias ---
   Regra 2: nenhum bloco de notícia leva ferrugem. São vários por tela, e ferrugem
   repetida deixa de destacar qualquer coisa. O único ponto preenchido da fatia é o
   "Ler em <fonte>" do detalhe, que é a decisão daquela tela. */

/* Faixa do início: mesma mecânica do carrossel de cupons — rola com o dedo, sem script. */
.news-strip {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0 0 0.5rem;
    margin: 0 0 0.75rem;
    list-style: none;
}

.news-brief {
    display: flex;
    flex-direction: column;
    width: 12rem;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}

.news-strip > li {
    flex: 0 0 12rem;
}

.news-brief:hover {
    border-color: var(--text-muted);
}

.news-brief-image {
    width: 100%;
    height: 6.5rem;
    object-fit: cover;
    display: block;
}

.news-brief-title {
    padding: 0.6rem 0.75rem;
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.3;
}

/* Lista completa em uma coluna. */
.news-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.news-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 0;
    color: var(--text);
    text-decoration: none;
}

.news-item:hover .news-item-title {
    text-decoration: underline;
}

/* Regra 1: miniatura quadrada de canto reto, como a capa da playlist. */
.news-item-image {
    flex: none;
    width: 7rem;
    height: 5rem;
    object-fit: cover;
    display: block;
    border: 1px solid var(--border);
}

.news-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.news-item-source {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.news-item-title {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
}

.news-item-summary {
    font-size: 0.82rem;
    line-height: 1.4;
}

.news-item-date {
    font-size: 0.75rem;
}

.news-pager {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 0.5rem;
}

/* --- Detalhe da notícia --- */
.news-article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 44rem;
}

.news-article h1 {
    margin: 0;
}

.news-article-date {
    margin: 0;
    font-size: 0.8rem;
}

.news-article-image {
    width: 100%;
    max-height: 20rem;
    object-fit: cover;
    display: block;
    border: 1px solid var(--border);
}

.news-article-summary {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
}

.news-article-note {
    margin: 0;
    font-size: 0.78rem;
}

/* --- Painel de fontes --- */
/* Endereço de feed é longo e empurraria a tabela; quebra em vez de esticar. */
.news-feed-url {
    max-width: 18rem;
    overflow-wrap: anywhere;
    font-size: 0.8rem;
}

/* O erro da última leitura é o dado que muda a decisão do admin: fica visível na
   linha, e não escondido num log. */
.news-source-error {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--danger-text);
}

/* --- Conquistas --- */
.achievement-score {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
}

.achievement-score-value {
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 700;
    color: var(--text);
}

.achievement-family {
    margin-bottom: 2rem;
}

.achievement-family h2 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
}

.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.75rem;
}

/* Regra 1: card de canto reto. Regra 2: nem o card desbloqueado leva ferrugem —
   são 17 na tela, e ferrugem repetida 17 vezes deixa de ser ponto de decisão.
   Quem separa conquistado de pendente é a opacidade e o peso da borda. */
.achievement-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
}

.achievement-card.is-unlocked {
    background: var(--surface-2);
    border-color: var(--text-muted);
}

.achievement-card.is-locked {
    opacity: 0.72;
}

.achievement-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.achievement-title {
    font-weight: 700;
    font-size: 1rem;
}

.achievement-check {
    flex: none;
    color: var(--text);
}

.achievement-desc {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.achievement-meta {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Barra de progresso: bloco sólido sobre bloco sólido, sem gradiente (regra 4)
   e sem canto arredondado (regra 1). */
.achievement-bar {
    height: 0.35rem;
    background: var(--border);
    margin-top: 0.35rem;
}

.achievement-bar-fill {
    display: block;
    height: 100%;
    background: var(--text-muted);
}

/* --- Evolução por treino --- */
.routine-progress {
    padding-top: 0;
    padding-bottom: 0;
}

/* O cabeçalho inteiro é o botão de abrir: alvo grande, sem depender de acertar
   uma setinha. Sem moldura de botão — quem separa os blocos é a linha do card. */
.routine-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    min-height: 3.5rem;
    padding: 1rem 0;
    background: none;
    border: none;
    text-align: left;
    color: var(--text);
    cursor: pointer;
}

.routine-progress-title {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.routine-progress-name {
    font-weight: 700;
    font-size: 1.05rem;
}

.routine-progress-plan {
    font-size: 0.9rem;
}

.routine-progress-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.routine-progress-date {
    margin-left: 0.25rem;
}

/* Recorde por exercício. Regra 2: são vários por treino, então nada de ferrugem —
   o destaque vem do corpo do número, não da cor. */
.pr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.pr-tile {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.pr-label {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.pr-value {
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 700;
    color: var(--text);
}

.pr-caption {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.subsection-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.patologias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.35rem 0.75rem;
    font-size: 0.88rem;
}

.patologias-grid label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 400;
}

.add-row-btn {
    margin-top: 0.5rem;
    display: inline-block;
}

/* Histórico: tela própria, então sem régua de separação em volta — a lista já é
   o conteúdo da página, e uma linha solta no topo sugeriria um bloco anterior. */
.session-history h2 {
    font-size: 1.15rem;
    margin: 0 0 0.75rem;
}

.session-detail {
    display: block;
    background: var(--surface-2);
    padding: 0.5rem 0.75rem;
}

.workout-feedback-summary {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1rem;
    margin: 0 0 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.workout-feedback-summary dt {
    font-weight: 700;
}

.workout-feedback-summary dd {
    margin: 0;
    white-space: pre-wrap;
}

.session-exercise-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.session-exercise-item {
    display: block;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.session-exercise-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.session-exercise-media-trigger,
.session-exercise-capa {
    width: 4rem;
    height: 4rem;
    flex: 0 0 4rem;
    border-radius: var(--radius-sm);
}

.session-exercise-media-trigger {
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.session-exercise-capa {
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
}

.comp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.5rem 0.75rem;
}

.comp-grid .form-group {
    margin-bottom: 0;
}

.circumference-grid .form-group > label {
    display: block;
    min-height: 3rem;
}

@media (max-width: 640px) {
    .circumference-grid .form-group > label {
        min-height: auto;
    }
}

.comp-grid .unit {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.75rem;
}

/* Mapa de dores */
.painmap-wrap {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.painmap-figure {
    flex: 1 1 32rem;
    min-width: min(100%, 22rem);
    max-width: 44rem;
}

.painmap-panel {
    flex: 1 1 16rem;
    min-width: 15rem;
}

.eva-instruction {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0.4rem 0;
}

.eva-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.eva-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 0.82rem;
    font-family: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
}

.eva-btn.active {
    background: var(--action-bg);
    color: var(--action-text);
}

.eva-dot {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0;
    margin-right: 0.4rem;
    vertical-align: middle;
}

.painmap-list-title {
    font-weight: 600;
    margin: 1rem 0 0.5rem;
}

/* Fotos da avaliação (não persistidas) */
/* width: dentro do <li> flex da .link-list a grade encolhia ao conteúdo e o auto-fill
   cabia uma coluna só: as fotos ficavam uma abaixo da outra. */
.photo-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.photo-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 0.4rem;
    background: var(--surface-2);
}

.photo-item img {
    width: 100%;
    height: 7rem;
    object-fit: cover;
    border-radius: 0;
}

/* A miniatura é um botão: tocar amplia a foto. */
.photo-open {
    display: block;
    width: 100%;
    padding: 0;
    background: transparent;
    cursor: zoom-in;
}

/* Foto ampliada: ocupa a tela, setas nas laterais para a foto vizinha. */
.photo-viewer {
    gap: 8px;
}

.photo-viewer-figure {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin: 0;
    max-width: min(64rem, 100%);
}

.photo-viewer-figure img {
    max-width: 100%;
    max-height: calc(100vh - 8rem);
    object-fit: contain;
}

.photo-viewer-figure figcaption {
    display: flex;
    gap: 16px;
    color: var(--text-muted);
}

.photo-viewer-nav,
.photo-viewer-close {
    display: grid;
    place-items: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    background: transparent;
    color: var(--text);
}

.photo-viewer-nav:hover,
.photo-viewer-close:hover {
    background: var(--surface-2);
}

/* Lado sem foto: o espaço da seta fica, para a foto não pular de lugar ao navegar. */
.photo-viewer-nav:disabled {
    visibility: hidden;
}

.photo-viewer-close {
    position: absolute;
    top: 16px;
    right: 16px;
}

/* --- Sessão de treino (tela "Treinar", inspirada em apps de log de treino) --- */
.session-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
}

.workout-overview {
    margin: 1rem 0 1.5rem;
}

.workout-overview h2 {
    margin-top: 0;
}

.workout-overview .session-stats {
    margin: 0;
}

.workout-overview-grid {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.workout-feedback-modal {
    max-width: 40rem;
}

.effort-scale {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(2.75rem, 1fr));
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
}

.effort-option {
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
    font-weight: 700;
    box-shadow: none;
}

.effort-option.selected {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

.effort-band-0 { background: var(--effort-0); color: var(--effort-text-on-light); }
.effort-band-1 { background: var(--effort-1); color: var(--effort-text-on-light); }
.effort-band-2 { background: var(--effort-2); color: var(--effort-text-on-light); }
.effort-band-3 { background: var(--effort-3); color: var(--effort-text-on-dark); }
.effort-band-4 { background: var(--effort-4); color: var(--effort-text-on-dark); }

.workout-observation {
    margin-top: 0.5rem;
    resize: vertical;
}

.stat-tile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem 1rem;
    background: var(--surface);
    /* Regra 4: separação por linha, não por sombra. */
    border: 1px solid var(--border);
    text-align: left;
}

/* Rótulo pequeno em mono caixa alta, abaixo do número (manual, slide 08). */
.stat-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

/* Número protagonista: o dado é o que decide, então ele domina o bloco. */
.stat-value {
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
    color: var(--text);
}

.exercise-block {
    margin-bottom: 1.75rem;
}

.exercise-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.exercise-media-trigger {
    width: 4rem;
    height: 4rem;
    padding: 0;
    flex: 0 0 4rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface-2);
    cursor: pointer;
}

.exercise-media-thumb {
    display: flex;
    width: 4rem;
    height: 4rem;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    border-radius: 0;
}

/* Menu de ações do exercício (trocar / excluir) */
.exercise-menu {
    position: relative;
    margin-left: auto;
}

/* Captura o clique fora para fechar o menu. Fica transparente de propósito: não é
   um véu de modal, só a área de "clicar fora". Sem isto o menu só fecharia pelo
   próprio botão, e resolver por JS aqui seria interop para um problema de CSS. */
.menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: transparent;
}

.exercise-menu-list {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 11;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    /* Regra 4: sem sombra — o menu se separa do fundo por linha e cor sólida. */
    border: 1px solid var(--border);
}

/* Regra 2: item de menu não é CTA e ainda se repete; ferrugem só no rótulo
   destrutivo, que é decisão e aparece uma vez por menu. */
.exercise-menu-item {
    min-height: 2.75rem;
    padding: 0.6rem 0.9rem;
    text-align: left;
    white-space: nowrap;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.exercise-menu-item:hover:not(:disabled) {
    background: var(--surface-2);
}

.exercise-menu-item.is-destructive {
    color: var(--danger-text);
}

/* Regra 2: numa tela com vários exercícios, nome em ferrugem viraria vários
   pontos de ferrugem. O nome é rótulo, não decisão. */
.exercise-name {
    color: var(--text);
    font-weight: 700;
    font-size: 1.05rem;
}

.sets-table {
    display: flex;
    flex-direction: column;
}

.sets-row {
    display: grid;
    grid-template-columns: 3rem 1.8fr 1fr 1fr 3rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.25rem;
    border-radius: 0;
}

.sets-row.entry .c-reps {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
}

.set-target {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* accent-soft, não surface-2: o bloco do circuito já é surface-2 e a série feita
   sumia dentro dele. */
.sets-row.done {
    background: var(--accent-soft);
    margin-bottom: 0.3rem;
}

/* Exercicio sem carga (peso corporal) tem uma coluna a menos: sem isso a grade de
   4 colunas ficaria com um vao no lugar do KG. */
.sets-table.tracking-compact .sets-row {
    grid-template-columns: 3rem 1.8fr 2fr 3rem;
}

/* Exercicio de tempo troca KG e REPS por TEMPO e KM/H. O tempo leva o cronometro
   junto, por isso a coluna dele e a mais larga. */
.sets-table.tracking-timed .sets-row {
    grid-template-columns: 3rem 1.4fr 2.4fr 1fr 3rem;
}

.sets-table.tracking-duration .sets-row {
    grid-template-columns: 3rem 1.4fr 2.4fr 3rem;
}

.sets-row .c-kg,
.sets-row .c-reps,
.sets-row .c-time,
.sets-row .c-speed,
.sets-row .c-rpe,
.sets-row .c-check,
.sets-row .c-delete {
    text-align: center;
}

.c-check,
.c-delete {
    display: flex;
    align-items: center;
    justify-content: center;
}

.exercise-rest-editor {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.75rem 0;
}

.exercise-rest-editor label {
    font-weight: 600;
}

.exercise-rest-editor .set-input {
    width: 5rem;
}

.sets-row .c-speed .set-input {
    width: 3.2rem;
}

/* --- Cronometro da serie de tempo ---
   Regra 2: sem ferrugem. Correndo, o botao inverte (bloco solido) — e estado, nao
   CTA, e a tela ja gasta o ponto de ferrugem no "Concluir treino". */
.stopwatch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
}

.stopwatch-btn:hover:not(:disabled) {
    border-color: var(--text-muted);
}

.stopwatch-btn.is-running {
    background: var(--surface-2);
    border-color: var(--text);
}

.stopwatch-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Correndo, o campo vira mostrador: mesma largura dos dois inputs somados, para a
   linha nao pular de tamanho ao iniciar e parar. */
.stopwatch-value {
    min-width: 4.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Duracao editada como minutos : segundos — segundos crus seriam ruins de digitar. */
.sets-row .c-time.time-input {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}

.sets-row .c-time.time-input .set-input {
    width: 3rem;
}

.time-sep {
    color: var(--text-muted);
    font-weight: 700;
}

.c-set {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

.set-tag {
    font-size: 0.62rem;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 0.05rem 0.3rem;
}

.set-input {
    width: 100%;
    max-width: 4rem;
    text-align: center;
    padding: 0.35rem 0.25rem;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
    color: var(--text);
}

.set-type {
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.65rem;
    max-width: 5.5rem;
    padding: 0.1rem;
}

/* Check da série: caixa quadrada com o "visto" desenhado a linha.
   Regra 2 — o check se repete a cada série, então NÃO pode ser ferrugem: preenchido
   em ferrugem, um treino de 12 séries teria 12 pontos disputando com o CTA. Quem
   marca a série concluída é a linha inteira, que ganha bloco de cor sólida (.done).
   Regra 4 — o visto é feito de duas bordas, não de ícone com preenchimento. */
.set-check {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: none;
    width: 2rem;
    height: 2rem;
    /* !important: a regra global `* { border:0 !important }` apagava a caixa e o visto. */
    border: 1px solid var(--text-faint) !important;
    background: var(--field-bg);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.set-check:hover:not(:disabled) {
    border-color: var(--text) !important;
}

.set-check:checked {
    border-color: var(--accent) !important;
    background: var(--accent);
}

/* Centrado por transform, não por deslocamento fixo: assim o visto acompanha
   qualquer mudança de tamanho da caixa sem precisar recalcular a mão. */
.set-check:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.35rem;
    height: 0.7rem;
    border: solid var(--on-accent) !important;
    border-width: 0 2px 2px 0 !important;
    border-radius: 0 !important;
    transform: translate(-50%, -60%) rotate(45deg);
}

.set-check:disabled {
    opacity: 0.5;
    cursor: default;
}

.row-actions-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
}

.remove-btn:hover:not(:disabled) {
    color: var(--danger);
    border-color: var(--action-border);
}

/* Ação compacta para adicionar uma série. */
.add-set {
    align-self: flex-start;
    margin-top: 0.5rem;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 600;
    padding: 0.25rem;
}

.rest-timer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    animation: rest-timer-in 0.2s ease;
}

.rest-timer-floating {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    z-index: 19;
    width: min(42rem, calc(100vw - 2rem));
    margin: 0;
    transform: translateX(-50%);
}

.rest-timer-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.rest-timer-value {
    margin-right: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

/* --- Rodape suspenso do treino em andamento ---
   Flutua sobre qualquer tela enquanto houver treino ativo. Tres zonas: voltar
   (esquerda), tempo | nome (centro, com divisor vertical) e descartar (direita). */
.active-workout-bar {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: stretch;
    width: min(32rem, calc(100vw - 2rem));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    animation: active-workout-in 0.2s ease;
}

@keyframes active-workout-in {
    from { opacity: 0; transform: translateX(-50%) translateY(0.5rem); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Sem 'color' aqui de propósito: um seletor com elemento (0,1,1) venceria as
   classes de cada zona (0,1,0) e o vermelho do descarte não apareceria. */
.active-workout-bar button {
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.active-workout-back,
.active-workout-discard {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3.5rem;
    padding: 0.75rem;
}

/* Regra 2: o rodapé já tem a lixeira na família da ferrugem; duas marcas
   num componente de 3 zonas seria excesso. A seta fica em texto claro. */
.active-workout-back {
    color: var(--sidebar-text);
}

.active-workout-back:hover,
.active-workout-discard:hover {
    background: var(--surface-2);
}

.active-workout-discard {
    color: var(--danger-text);
}

/* Centro dividido na vertical: tempo de um lado, nome do treino do outro. */
.active-workout-info {
    flex: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.5rem 0.25rem;
    color: var(--text);
    text-align: left;
}

.active-workout-time {
    padding-right: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    white-space: nowrap;
}

.active-workout-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

/* Botao so-icone: alvo de toque confortavel mesmo com o icone pequeno. */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.4rem;
    color: var(--text-muted);
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.icon-btn:hover {
    color: var(--text);
    background: var(--border);
}

.icon-btn[aria-pressed="true"] {
    color: var(--text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

@keyframes rest-timer-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.add-exercise {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0.5rem 0 1.5rem;
}

.add-exercise .form-select-inline {
    flex: 1;
    max-width: 20rem;
}

.session-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* A semântica destrutiva permanece no texto e na confirmação da ação. */
.btn-danger {
    position: relative;
    background-color: transparent;
    color: var(--text);
    border: 1px solid var(--action-border);
}

.btn-danger:hover:not(:disabled) {
    background-color: var(--action-bg);
    color: var(--action-text);
    border-color: var(--action-border);
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Acima da gaveta lateral (.perf-drawer, 1201): a confirmação global pedida de
       dentro da ficha do aluno abria por trás dela e só aparecia ao fechar. */
    z-index: 1250;
    padding: 1rem;
}

.modal-card {
    background: var(--modal-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 26rem;
    width: 100%;
    box-shadow: none;
}

.exercise-modal-header {
    position: sticky;
    top: -1.5rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: -1.5rem -1.5rem 1rem;
    padding: 1rem 1.5rem;
    background: var(--surface);
}

.exercise-modal-header h2 {
    margin: 0;
}

.modal-card h2 {
    margin-top: 0;
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

/* Modal que carrega exemplo de arquivo: 26rem espremeria o JSON numa coluna. Rola
   sozinho quando a tela é baixa, senão as ações somem embaixo do rodapé. */
.modal-wide {
    max-width: 40rem;
    max-height: 85vh;
    overflow-y: auto;
}

/* Lado a lado enquanto couber, empilhando no celular. O .modal-actions padrão empilha
   sempre, o que aqui sobraria espaço à toa com três ações curtas. */
.modal-acoes {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0;
}

/* Todas as ações do modal ocupam a mesma faixa: tamanho diferente entre elas sugere
   uma hierarquia que este modal não tem. */
.modal-acoes .btn {
    flex: 1 1 10rem;
}

.import-limites {
    margin: 0 0 1rem;
}

/* Tamanho da página à esquerda, navegação à direita: a escolha é ajuste raro e a
   navegação é o gesto repetido, que fica onde o polegar já está no fim da lista. */
.paginacao {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.paginacao .filter-field {
    min-width: 8rem;
}

.paginacao-navegacao {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Largura mínima para "1 de 17" não empurrar os botões a cada troca de página. */
.paginacao-posicao {
    min-width: 5rem;
    text-align: center;
}

/* Filtro do catálogo: os campos crescem juntos e quebram em vez de espremer o
   "Buscar", que é o que se usa em 90% das vezes. */
.filtro-catalogo {
    align-items: flex-end;
    gap: 0.75rem;
}

.filtro-catalogo .filter-field {
    flex: 1 1 10rem;
    min-width: 0;
}

.filtro-catalogo .filter-search {
    flex: 2 1 16rem;
}

/* Seletor de exercício (acrescentar / trocar durante o treino) */
.picker-card {
    max-width: 30rem;
    display: flex;
    flex-direction: column;
    max-height: min(80vh, 40rem);
}

.picker-card h2 {
    margin-bottom: 0.75rem;
}

.picker-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    overflow-y: auto;
}

/* Regra 2: o item se repete por todo o catálogo, então nada de ferrugem aqui;
   o realce do toque é bloco sólido. */
/* Grade, e não flex-column, para a capa ocupar a coluna da esquerda inteira com o
   nome e o meta empilhados ao lado. Sem capa a primeira coluna fica com largura
   zero e o texto não desalinha. */
.picker-item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.6rem;
    row-gap: 0.15rem;
    align-items: center;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6rem 0.5rem;
    text-align: left;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.picker-item:hover:not(:disabled) {
    background: var(--surface-2);
}

.picker-item-name {
    font-weight: 600;
    grid-column: 2;
}

.picker-item-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    grid-column: 2;
}

/* A capa ocupa as duas linhas da grade, à esquerda do nome e do meta. */
.picker-item-capa {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 2.75rem;
    height: 2.75rem;
    object-fit: cover;
    border-radius: 0;
    background: var(--surface-2);
}

/* --- Mídia do exercício (capa e animação) ---
   Regra 1: cantos retos também aqui. A exceção redonda vale só para a foto de perfil. */
.exercise-capa {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: 0;
    background: var(--surface-2);
}

/* Sem capa, o espaço continua reservado: linha que encolhe faz a tabela "pular" ao
   rolar por uma lista em que só parte dos exercícios tem imagem. */
.exercise-capa-vazia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.col-capa {
    width: 2.5rem;
}

/* A animação é o conteúdo principal do modal: ocupa a largura e limita a altura para
   as ações não saírem da tela. */
.exercise-animation {
    display: block;
    width: 100%;
    max-width: 20rem;
    margin: 0 auto 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
}

.exercise-video {
    display: block;
    width: 100%;
    max-height: 60vh;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    cursor: pointer;
}

.exercise-video-player {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    margin: 0 auto 1rem;
}

.exercise-youtube {
    aspect-ratio: 16 / 9;
    max-height: none;
}

.personal-video-tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
}

.personal-video-link {
    display: flex;
    gap: 0.5rem;
    flex: 1 1 20rem;
}

.personal-video-link .form-control {
    min-width: 12rem;
}

.exercise-animation-vazia {
    display: flex;
    min-height: 12rem;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.exercise-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 1rem;
}

.exercise-tag {
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.exercise-steps {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.exercise-steps li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.exercise-description {
    margin: 0 0 1rem;
    line-height: 1.5;
}

/* --- Roster de alunos (página "Meus alunos") --- */
.student-section {
    margin-top: 2rem;
}

.student-section > h2,
.student-catalog .catalog-heading h2 {
    margin-bottom: 0.75rem;
}

.student-gym-selector {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.student-gym-selector label {
    margin: 0;
    font-weight: 700;
}

.pending-sent-title {
    margin-top: 1.5rem;
}

.student-catalog-card {
    min-height: 10rem;
}

.student-invite-action {
    margin-top: auto;
    padding-top: 1.5rem;
}

.roster-filter {
    display: block;
    width: 100%;
    margin: 1rem 0;
}

.roster-list {
    /* Container query, e não media query: quem espreme a linha é a barra lateral, e
       a largura da viewport não conta essa parte. Num notebook de 961px com o menu
       aberto a lista fica com ~655px, e a media query de 900px nem dispara. */
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
}

.roster-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 6rem 16rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

/* --- Ritmo: quatro semanas em barras ---
   Regra 2: sem ferrugem. São quatro por aluno e dezenas por tela — ferrugem repetida
   deixa de destacar qualquer coisa. */
.roster-pace {
    display: flex;
    align-items: flex-end;
    gap: 0.2rem;
    height: 2rem;
}

.pace-bar {
    position: relative;
    display: block;
    width: 0.7rem;
    height: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.pace-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--text-muted);
}

/* A semana em curso ainda vai receber treino: contorno marcado em vez de barra
   igual às outras, para não ser lida como resultado fechado. */
.pace-bar.is-current {
    border-color: var(--text);
    border-style: dashed;
}

.roster-head {
    background: var(--surface-2);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
}

.roster-name {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.roster-email {
    font-size: 0.78rem;
}

.roster-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Ação compacta com o mesmo preenchimento dos demais botões. */
.chip-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 0;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chip-btn:hover {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-color: var(--action-border);
}

/* No dedo, o chip precisa do mesmo alvo que .btn, .icon-btn e .picker-item já têm:
   com 0,3rem de respiro ele fica com 31 px de altura, e campo de formulário com 35-38.
   No mouse a compactação é proposital — chip é ação secundária —, então o mínimo só
   entra na largura de celular, onde o alvo é o polegar. */
@media (max-width: 640px) {
    .chip-btn,
    .form-control,
    .form-select-inline {
        min-height: 2.75rem;
    }
}

.roster-count {
    margin-top: 1rem;
    text-align: right;
}

/* Fica fora da .roster-list, então não é alcançado pelo container query da lista. */
@media (max-width: 640px) {
    .roster-count {
        text-align: left;
    }
}

/* Empilha quando a LISTA fica estreita, não a janela: a 5 colunas o nome do aluno
   caía para 96px e o objetivo para 29px com o menu aberto. A coluna de ritmo agravou
   um aperto que já existia — o layout em blocos abaixo já estava pronto, só nunca
   entrava, porque o gatilho olhava para a janela inteira. */
@container (max-width: 780px) {
    .roster-head {
        display: none;
    }

    .roster-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    /* No celular a linha vira bloco: as barras ganham o rótulo ao lado, como as
       outras células. */
    .roster-pace {
        justify-content: flex-start;
    }

    .roster-row span[data-label]::before {
        content: attr(data-label) ": ";
        color: var(--text-muted);
        font-size: 0.75rem;
    }

    .roster-actions {
        justify-content: flex-start;
        margin-top: 0.5rem;
    }

}

/* Nutrição multiprofissional. Blocos sólidos, linhas de 1 px e cantos retos:
   nenhuma superfície nova cria sombra, gradiente ou outro ponto de ferrugem. */
.diet-summary,
.diet-editor,
.diet-history {
    display: grid;
    gap: 1rem;
}

.diet-food-search {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.diet-food-search .form-group {
    flex: 1 1 18rem;
    margin: 0;
}

.diet-meta,
.diet-meal-head,
.diet-item-editor {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.diet-meta > div:first-child,
.diet-meal-head .form-group,
.diet-item-editor .form-group:first-child {
    flex: 1 1 15rem;
}

.diet-version {
    display: grid;
    justify-items: end;
    gap: 0.5rem;
}

.diet-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    border: 1px solid var(--border);
    background: var(--surface);
}

.nutrition-value {
    display: grid;
    gap: 0.5rem;
    padding: 1rem;
}

.nutrition-value-number {
    font-size: 1.35rem;
    font-weight: 700;
}

/* Cada alimento é um bloco um degrau abaixo do card da refeição (opção C). */
.diet-item-editor {
    margin-top: 8px;
    padding: 16px;
    background: var(--card-inset);
}

/* Combobox de alimento: campo e lista formam uma caixa só, separados por linha de 1 px. */
.food-combobox {
    position: relative;
}

.food-combobox.is-open .form-control {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.food-combobox-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    /* Abaixo do painel de macros fixo (3): ao rolar, a lista passa por baixo dele. */
    z-index: 2;
    max-height: 18rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    background: var(--field-bg);
    border-top: 1px solid var(--border) !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.food-combobox-option {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 2.75rem;
    padding: 8px 16px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.food-combobox-option:hover,
.food-combobox-option:focus-visible {
    background: var(--surface-2);
}

.food-combobox-more {
    justify-content: center;
    color: var(--text-muted);
}

.food-combobox-status {
    padding: 8px 16px;
}

.diet-meal .table-scroll {
    margin-top: 8px;
    padding: 8px 16px;
    background: var(--card-inset);
}

/* Painel de macros do editor: acompanha a rolagem e recalcula a cada alteração.
   top = altura da .app-toolbar (também sticky); com 0 ele grudava atrás dela. */
.diet-macros-live {
    position: sticky;
    top: 3.5rem;
    z-index: 3;
    padding: 0;
}

.diet-meal-editor {
    position: relative;
}

/* Expandir e lixeira no canto do card; o cabeçalho reserva o espaço para não passar por baixo. */
.diet-meal-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.diet-meal-remove {
    width: 2.75rem;
    height: 2.75rem;
    flex-basis: 2.75rem;
}

.diet-meal-editor > .diet-meal-head {
    padding-right: 7rem;
}

.diet-meal-title {
    margin: 0;
    font-size: 1.1rem;
}

/* Macros da refeição numa linha: o rótulo uma vez, depois os quatro valores. */
.meal-macros {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
    margin-top: 8px;
    font-size: 0.875rem;
}

.meal-macros-label {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 800;
}

.diet-add-item {
    justify-self: start;
    margin-top: 1rem;
}

.diet-item-editor .form-group {
    margin: 0;
}

.diet-revision-detail {
    padding-top: 1rem;
}

/* Troca de alimento: busca livre numa linha, ajuste de gramas com alvo de toque. */
.food-swap-search,
.food-swap-grams {
    display: flex;
    align-items: center;
    gap: 8px;
}

.food-swap-search .form-control {
    flex: 1 1 auto;
}

.food-swap-grams .form-control {
    width: 7rem;
    text-align: center;
}

.food-swap-compare {
    margin: 8px 0 0;
}

/* Registro da refeição: abre dentro do card, com os alimentos um degrau abaixo (opção C). */
.meal-log-open {
    margin-top: 16px;
}

.meal-log-form {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

/* Linha de 1 px separando o registro dos macros da dieta (a borda global é zerada). */
.meal-log-form::before {
    content: "";
    height: 1px;
    margin-bottom: 8px;
    background: var(--border);
}

.meal-log-date {
    max-width: 12rem;
    margin: 0;
}

.meal-log-item {
    align-items: center;
}

.meal-log-item-name {
    flex: 1 1 15rem;
    font-weight: 600;
}

.meal-log-add {
    margin-top: 8px;
}

.meal-log-add-results {
    max-height: 16rem;
}

.meal-log-choice {
    padding: 16px;
    background: var(--surface-2);
}

.meal-log-choice p {
    margin: 0 0 8px;
}

.meal-logs {
    display: grid;
    gap: 8px;
}

.meal-logs > p {
    margin: 0;
}

.meal-log-list,
.plan-card-routines {
    list-style: none;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.meal-log-list li,
.plan-card-routines li {
    padding: 8px 16px;
    background: var(--card-inset);
}

.meal-log-list p,
.plan-card-routines p {
    margin: 0;
    font-size: 0.875rem;
}

/* Meus treinos: plano recolhido como as refeições; rotinas e volume um degrau abaixo. */
.plan-card-title {
    margin: 0;
    font-size: 1.1rem;
}

.plan-card-routines {
    margin-top: 16px;
}

/* Nome e contagem à esquerda, expandir à direita, mesmo no celular: o botão é um
   alvo de 44 px e não precisa da largura inteira. */
.plan-card > .diet-meal-head,
.plan-card > .diet-meal-head .plan-card-title {
    min-width: 0;
}

@media (max-width: 640px) {
    .plan-card > .diet-meal-head {
        flex-direction: row;
        align-items: center;
    }
}

.plan-card > .diet-meal-head .plan-card-title {
    flex: 1 1 auto;
}

.plan-card-volume li {
    background: var(--card-inset);
}

.plan-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.meal-log-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
}

@media (max-width: 640px) {
    .diet-version {
        justify-items: start;
    }

    .diet-meal-head,
    .diet-item-editor {
        align-items: stretch;
        flex-direction: column;
    }

    .diet-meal-head .form-group,
    .diet-item-editor .form-group:first-child {
        flex-basis: auto;
        width: 100%;
    }

}
/* Notificações: bloco sólido, sem sombra. */
.notification-list {
    display: grid;
    gap: 8px;
}

.notification-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.notification-item.is-unread {
    background: var(--surface-2);
}

.notification-item h2 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.notification-item p {
    margin: 0 0 8px;
}

.notification-item time {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Botões (identidade 2026-10-20): só a ação principal é terracota. O resto é bloco
   elevado com linha de 1 px; chip é pílula com contorno e fica terracota quando ativo.
   !important porque o Bootstrap e a regra global de reset vêm antes. */
.btn,
.icon-btn,
.builder-icon-btn,
.builder-icon-action,
.plan-exercise-add,
.remove-btn,
.add-set {
    color: var(--text) !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600;
}

.btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled),
.builder-icon-btn:hover:not(:disabled),
.builder-icon-action:hover:not(:disabled),
.plan-exercise-add:hover:not(:disabled),
.remove-btn:hover:not(:disabled),
.add-set:hover:not(:disabled) {
    background: var(--raise) !important;
}

.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:disabled,
.builder-icon-btn.is-on,
.plan-exercise-add.is-selected,
.add-set {
    color: var(--on-accent) !important;
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

.btn-primary:hover:not(:disabled),
.builder-icon-btn.is-on:hover,
.plan-exercise-add.is-selected:hover,
.add-set:hover:not(:disabled) {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

.btn-danger,
.btn-danger:focus,
.btn-danger:active {
    color: var(--danger-text) !important;
    background: transparent !important;
    border-color: var(--danger-text) !important;
}

.btn-danger:hover:not(:disabled) {
    background: var(--danger-bg) !important;
}

.chip-btn {
    color: var(--text-muted) !important;
    background: transparent !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-pill) !important;
    min-height: 32px;
}

.chip-btn:hover:not(:disabled) {
    color: var(--text) !important;
    background: var(--surface-2) !important;
}

.chip-btn.is-active,
.chip-btn[aria-pressed="true"],
.chip-btn[aria-current="page"] {
    color: var(--on-accent) !important;
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* Exceção pedida: o olho da senha é só o desenho, sem o bloco de ação atrás. */
.icon-btn.password-visibility-toggle {
    background: none !important;
}

.btn-primary::before {
    content: none;
}

@media (max-width: 640px) {
    .notification-item {
        align-items: stretch;
        flex-direction: column;
    }
}

/* --- Cobrança (planos, PIX, minha assinatura) --- */
.billing-options {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.billing-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.billing-toggle .chip-btn {
    min-height: 2.75rem;
    gap: 0.5rem;
}

/* Todo chip é ferrugem pela regra global; aqui o escolhido fica ferrugem e o resto neutro. */
.billing-toggle .chip-btn:not(.is-on) {
    color: var(--text) !important;
    background: var(--surface-2) !important;
}

.billing-discount {
    font-size: 0.75rem;
}

.billing-method-hint {
    margin: 0;
}

.billing-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.billing-plan {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.billing-plan.is-current {
    outline: 1px solid var(--border);
}

.billing-plan > .btn {
    margin-top: auto;
    min-height: 2.75rem;
}

.billing-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.billing-plan-head h2 {
    margin: 0;
}

.billing-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
}

.billing-price-value {
    font-size: 2rem;
    font-weight: 700;
}

.billing-price-monthly {
    flex-basis: 100%;
    font-size: 0.875rem;
}

.billing-features {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.billing-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.billing-pix {
    display: grid;
    justify-items: start;
    gap: 0.75rem;
    max-width: 32rem;
}

.billing-pix-qr {
    width: 15rem;
    height: 15rem;
    image-rendering: pixelated;
}

.billing-pix-code {
    width: 100%;
    font-size: 0.8rem;
    word-break: break-all;
}

.billing-return {
    max-width: 36rem;
}

/* =====================================================================
   Componentes do protótipo de Desempenho (gráficos, indicadores, painel).
   Seguem os tokens do tema; os !important vencem o reset global.
   ===================================================================== */
.perf {
    --p-bg: var(--bg); --p-panel: var(--surface); --p-panel-2: var(--surface-2); --p-raise: var(--raise); --p-line: var(--border); --p-grid: var(--grid);
    --p-fg: var(--text); --p-sand: var(--sand); --p-muted: var(--text-muted); --p-faint: var(--text-faint);
    --p-tc: var(--accent); --p-tc-hi: var(--accent-hover); --p-tc-soft: var(--accent-soft);
    --p-below: var(--below); --p-above: var(--above); --p-good: var(--good);
    --p-band: var(--band); --p-band-line: var(--band-line);
    --p-mono: "JetBrains Mono", ui-monospace, monospace;
    color: var(--p-fg);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    display: grid;
    gap: 18px;
    min-width: 0;
}
.perf .mono { font-family: var(--p-mono); font-variant-numeric: tabular-nums; }
.perf button { font: inherit; color: inherit; cursor: pointer; }
.perf button:focus-visible, .perf input:focus-visible, .perf [tabindex]:focus-visible { outline: 2px solid var(--p-sand); outline-offset: 2px; }
.perf-page { background: var(--p-bg); padding: 20px; border-radius: 16px !important; }

.perf-card { background: var(--p-panel); border-radius: 16px !important; display: grid; min-width: 0; }
.perf-card-head { padding: 18px 22px 14px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--p-line) !important; border-radius: 0 !important; }
.perf-eyebrow { font: 500 11px var(--p-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--p-faint); margin: 0 0 4px; }
.perf-card-head h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--p-fg); }
.perf-card-body { padding: 16px 22px 20px; display: grid; gap: 14px; min-width: 0; }
.perf-crumb { background: var(--p-panel-2); border-radius: 8px !important; padding: 4px 10px; font-size: 13px; font-weight: 600; color: var(--p-sand) !important; }
.perf-crumb:hover { background: var(--p-raise); color: var(--p-fg) !important; }

.perf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.perf-chip { font-size: 13px; font-weight: 600; color: var(--p-muted) !important; background: transparent; border: 1px solid var(--p-line) !important; border-radius: 999px !important; padding: 5px 12px; min-height: 32px; }
.perf-chip:hover { color: var(--p-fg) !important; }
.perf-chip[aria-pressed="true"] { background: var(--p-tc); border-color: var(--p-tc) !important; color: #fff !important; }
.perf-seg { display: inline-flex; flex-wrap: wrap; background: var(--p-bg); border-radius: 10px !important; padding: 3px; gap: 2px; }
.perf-seg button { font-size: 13px; font-weight: 600; background: none; color: var(--p-muted) !important; padding: 6px 12px; border-radius: 8px !important; min-height: 32px; }
.perf-seg button:hover { color: var(--p-fg) !important; }
.perf-seg button[aria-pressed="true"] { background: var(--p-raise); color: var(--p-fg) !important; }
.perf-row-ctl { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.perf-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--p-muted); }
.perf-legend span { display: inline-flex; align-items: center; gap: 6px; }
.perf-legend i { width: 10px; height: 10px; border-radius: 2px !important; display: inline-block; }
.perf-legend i.ghostk { background: none; border: 1px dashed var(--p-sand) !important; }
.perf-legend i.bandk { background: var(--p-band); border: 1px dashed var(--p-band-line) !important; }
.perf-btn { background: var(--p-panel-2); border: 1px solid var(--p-line) !important; border-radius: 8px !important; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--p-fg) !important; min-height: 36px; text-decoration: none; display: inline-flex; align-items: center; }
.perf-btn:hover { background: var(--p-raise); }
.perf-btn.quiet { background: none; color: var(--p-muted) !important; }
.perf-empty { color: var(--p-muted); font-size: 13.5px; margin: 0; padding: 10px 0; }

.perf-scroll { overflow-x: auto; padding-bottom: 4px; min-width: 0; }
.perf-chart { --h: 270px; --ax: 56px; position: relative; display: grid; grid-template-columns: var(--ax) 1fr; min-width: var(--minw, 0px); }
.perf-ytitle { position: absolute; left: 9px; top: calc(24px + var(--h) / 2); transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; font: 500 11px var(--p-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--p-faint); }
.perf-yaxis { position: relative; height: var(--h); margin-top: 24px; }
.perf-yaxis span { position: absolute; right: 11px; transform: translateY(50%); font: 12px var(--p-mono); color: var(--p-muted); }
.perf-yaxis span::after { content: ""; position: absolute; right: -11px; top: 50%; width: 5px; border-top: 1px solid var(--p-muted) !important; border-radius: 0 !important; }
.perf-plot { position: relative; min-width: 0; }
.perf-grid { position: absolute; left: 0; right: 0; top: 24px; height: var(--h); pointer-events: none; border-left: 1px solid var(--p-muted) !important; border-radius: 0 !important; }
.perf-grid i { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--p-grid) !important; border-radius: 0 !important; }
.perf-grid i.base { border-top: 1px solid var(--p-muted) !important; }
.perf-cols { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.perf-col { display: grid; grid-template-rows: 24px var(--h) auto; justify-items: center; min-width: 0; }
.perf-col .v { font: 600 12.5px var(--p-mono); align-self: end; padding-bottom: 3px; color: var(--p-fg); }
.perf-slot { width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; background: none; padding: 0; border-radius: 0 !important; }
.perf-slot:hover { background: var(--p-band); }
.perf-slot .b { width: min(46%, 42px); border-radius: 4px 4px 0 0 !important; transition: height .55s cubic-bezier(.2, .7, .2, 1); position: relative; z-index: 1; background: var(--p-tc); }
.perf-slot .b.below { background: var(--p-below); }
.perf-slot .b.above { background: var(--p-above); }
.perf-slot:hover .b { filter: brightness(1.12); }
.perf-slot .ghost { position: absolute; bottom: 0; width: min(46%, 42px); border: 1px dashed var(--p-sand) !important; border-bottom: 0 !important; border-radius: 4px 4px 0 0 !important; opacity: .6; z-index: 2; pointer-events: none; transition: height .55s cubic-bezier(.2, .7, .2, 1); }
.perf-slot .cband { position: absolute; left: 50%; transform: translateX(-50%); width: min(70%, 62px); background: var(--p-band); border-top: 1px dashed var(--p-band-line) !important; border-bottom: 1px dashed var(--p-band-line) !important; border-radius: 0 !important; pointer-events: none; }
.perf-lab { margin-top: 10px; max-width: 100%; padding: 2px 4px; text-align: center; font: 500 12.5px/1.3 "Inter", sans-serif; background: none; text-wrap: balance; overflow-wrap: anywhere; border-radius: 6px !important; color: var(--p-fg) !important; }
.perf-lab::after { content: " ›"; color: var(--p-tc); }
.perf-lab:hover { color: var(--p-tc-hi) !important; background: var(--p-panel-2); }
.perf-lab.static { cursor: default; color: var(--p-muted) !important; }
.perf-lab.static::after { content: ""; }
.perf-xtitle { text-align: center; font: 500 11px var(--p-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--p-faint); margin-top: 8px; padding-left: 56px; }
.perf-fig { margin: 0; font-size: 13px; color: var(--p-muted); max-width: 84ch; }
.perf-fig b { color: var(--p-sand); font-family: var(--p-mono); font-weight: 600; }

.perf-breakdown { display: grid; gap: 10px; border-top: 1px solid var(--p-line) !important; border-radius: 0 !important; padding-top: 14px; }
.perf-breakdown h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--p-fg); }
.perf-bd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.perf-bd { background: var(--p-panel-2); border-radius: 10px !important; padding: 12px 14px; display: grid; gap: 6px; min-width: 0; }
.perf-bd-h { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; font-size: 14px; }
.perf-bd ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 12.5px; color: var(--p-muted); }
.perf-bd li button { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 2px 4px; border-radius: 5px !important; background: none; text-align: left; color: var(--p-muted) !important; }
.perf-bd li button:hover:not(:disabled) { background: var(--p-raise); color: var(--p-fg) !important; }
.perf-bd li button:disabled { cursor: default; opacity: 1; }
.perf-bd li span:last-child { white-space: nowrap; color: var(--p-sand); }
.perf-bd li.sec span:first-child::before { content: "sec · "; color: var(--p-faint); }

.perf-goals { border-top: 1px solid var(--p-line) !important; border-radius: 0 !important; padding-top: 16px; display: grid; gap: 12px; }
.perf-goals-h { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.perf-goals-h h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--p-fg); }
.perf-goals-h p { margin: 2px 0 0; font-size: 13px; color: var(--p-muted); max-width: 62ch; }
.perf-gl { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.perf-gi { background: var(--p-panel-2); border-radius: 10px !important; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.perf-gi .gn { font-weight: 600; font-size: 14px; }
.perf-gi .gv { font-size: 12px; color: var(--p-muted); text-align: right; }
.perf-gi .range { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--p-faint); }
.perf-gi input { width: 56px; min-height: 36px; background: var(--p-bg); border: 1px solid var(--p-line) !important; border-radius: 6px !important; color: var(--p-fg); font: 500 13px var(--p-mono); padding: 5px 6px; text-align: center; }
.perf .st { font: 600 11px var(--p-mono); margin-left: auto; padding: 2px 7px; border-radius: 999px !important; color: var(--p-faint); }
.perf .st.below { background: rgba(111, 98, 90, .35); color: var(--p-sand); }
.perf .st.in { background: var(--p-tc-soft); color: var(--p-tc-hi); }
.perf .st.above { background: rgba(217, 166, 122, .18); color: var(--p-above); }

/* Desempenho (Estatísticas) */
.perf-who { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.perf-who h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.015em; color: var(--p-fg); }
.perf-who p { margin: 2px 0 0; color: var(--p-muted); font-size: 14px; }
.perf-sec-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin-top: 6px; }
.perf-sec-head h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--p-fg); }
.perf-sec-head p { margin: 2px 0 0; color: var(--p-muted); font-size: 13.5px; }
.perf-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.perf-kpi { background: var(--p-panel); border: 1px solid transparent !important; border-radius: 14px !important; padding: 14px 16px; text-align: left; display: grid; gap: 4px; min-width: 0; }
.perf-kpi:hover { border-color: var(--p-line) !important; background: var(--p-panel-2); }
.perf-kpi > span { font: 500 11px var(--p-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--p-faint); }
.perf-kpi b { font: 600 26px var(--p-mono); letter-spacing: -.02em; color: var(--p-fg); }
.perf-kpi b small { font-size: 13px; color: var(--p-muted); font-weight: 500; letter-spacing: 0; }
.perf-kpi em { font-style: normal; font-size: 12.5px; color: var(--p-muted); }
.perf-kpi em.up, .perf .up { color: var(--p-good); }
.perf-kpi em.down { color: var(--p-above); }
.perf .flat { color: var(--p-muted); }
.perf-kpi svg { width: 100%; height: 28px; display: block; margin-top: 2px; }
.perf-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 18px; }
.perf-prs, .perf-checkins, .perf-exlist, .perf-slist { display: grid; gap: 8px; }
.perf-pr { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; background: var(--p-panel-2); border-radius: 12px !important; padding: 12px 14px; text-align: left; }
.perf-pr:hover { background: var(--p-raise); }
.perf-medal { width: 34px; height: 34px; border-radius: 10px !important; background: var(--p-tc-soft); color: var(--p-tc-hi); display: grid; place-items: center; font: 700 12px var(--p-mono); grid-row: span 2; }
.perf-pr .pn { font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perf-pr .pv { font: 600 15px var(--p-mono); text-align: right; white-space: nowrap; }
.perf-pr .pd { font-size: 12.5px; color: var(--p-muted); min-width: 0; }
.perf-pr .pg { font: 600 12px var(--p-mono); color: var(--p-good); text-align: right; white-space: nowrap; }
.perf-tbl { overflow-x: auto; }
.perf:not(.perf-plain) table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.perf:not(.perf-plain) th { font: 500 11px var(--p-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--p-faint); text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--p-line) !important; border-radius: 0 !important; white-space: nowrap; background: none; }
.perf:not(.perf-plain) th:first-child, .perf:not(.perf-plain) th:nth-child(2) { text-align: left; }
.perf:not(.perf-plain) td { padding: 9px 8px; border-bottom: 1px solid var(--p-line) !important; border-radius: 0 !important; text-align: right; font-family: var(--p-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--p-fg); background: none; }
.perf:not(.perf-plain) td:first-child { color: var(--p-faint); text-align: left; width: 28px; }
.perf:not(.perf-plain) td:nth-child(2) { font-family: "Inter", sans-serif; text-align: left; white-space: normal; min-width: 180px; }
.perf:not(.perf-plain) tbody tr { cursor: pointer; }
.perf:not(.perf-plain) tbody tr:hover td { background: var(--p-panel-2); }
.perf-minibar { display: inline-block; height: 6px; border-radius: 3px !important; background: var(--p-tc); vertical-align: middle; margin-right: 8px; opacity: .85; }
.perf-ci { display: grid; grid-template-columns: 64px 1fr auto; gap: 2px 14px; align-items: center; padding: 12px 14px; background: var(--p-panel-2); border-radius: 12px !important; text-align: left; }
.perf-ci:hover { background: var(--p-raise); }
.perf-ci .d { font: 600 13px var(--p-mono); color: var(--p-sand); grid-row: span 2; line-height: 1.25; }
.perf-ci .d small { display: block; color: var(--p-faint); font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.perf-ci .r { font-weight: 600; }
.perf-ci .m { font-size: 12.5px; color: var(--p-muted); }
.perf-ci .tag { font: 600 11px var(--p-mono); padding: 3px 8px; border-radius: 999px !important; background: var(--p-tc-soft); color: var(--p-tc-hi); grid-row: span 2; white-space: nowrap; }
.perf-ci .tag.none { background: none; color: var(--p-faint); }
.perf-rules { padding: 18px 22px; font-size: 14px; color: var(--p-muted); }
.perf-rules summary { cursor: pointer; color: var(--p-fg); font-weight: 700; }
.perf-rules ul { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 6px; }

.perf-scrim { position: fixed; inset: 0; background: rgba(15, 12, 11, .6); z-index: 1200; border-radius: 0 !important; }
.perf-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--p-panel); z-index: 1201; box-shadow: -20px 0 60px rgba(0, 0, 0, .45) !important; border-radius: 0 !important; display: flex; flex-direction: column; animation: perf-drawer-in .28s cubic-bezier(.2, .7, .2, 1); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
@keyframes perf-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
.perf-dh { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 20px 22px 14px; border-bottom: 1px solid var(--p-line) !important; border-radius: 0 !important; }
.perf-dh h3 { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.25; color: var(--p-fg); }
.perf-dh p { margin: 3px 0 0; color: var(--p-muted); font-size: 13px; }
.perf-x { background: var(--p-panel-2); border-radius: 8px !important; width: 44px; height: 44px; color: var(--p-sand) !important; font-size: 18px; flex: none; }
.perf-x:hover { background: var(--p-raise); }
.perf-db { padding: 16px 22px 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; flex: 1; min-height: 0; }
.perf-db > * { flex-shrink: 0; }
.perf-db > .perf-seg { align-self: flex-start; }
.perf-dstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.perf-dstat { background: var(--p-panel-2); border-radius: 10px !important; padding: 10px 12px; }
.perf-dstat span { display: block; font: 500 10.5px var(--p-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--p-faint); }
.perf-dstat b { font: 600 18px var(--p-mono); }
.perf-lc { width: 100%; height: auto; display: block; max-width: 100%; }
.perf-lc text { font-family: var(--p-mono); font-size: 11px; fill: var(--p-muted); }
.perf-lc .gl2 { stroke: var(--p-grid); stroke-dasharray: 3 4; }
.perf-lc .ax { stroke: var(--p-muted); }
.perf-lc .ln { fill: none; stroke: var(--p-tc); stroke-width: 2.2; }
.perf-lc .ar { fill: var(--p-tc-soft); }
.perf-lc .pt { fill: var(--p-panel); stroke: var(--p-tc); stroke-width: 2; }
.perf-lc .pt.pr { fill: var(--p-tc); }
.perf-lc .bar { fill: var(--p-tc); }
.perf-lc .bar.dim { fill: var(--p-below); }
.perf-lc .vl { fill: var(--p-fg); font-weight: 600; }
.perf-srow { display: grid; grid-template-columns: minmax(64px, auto) 1fr auto; gap: 12px; font-size: 13px; padding: 8px 10px; border-radius: 8px !important; background: var(--p-panel-2); align-items: baseline; }
.perf-srow .sd { font-family: var(--p-mono); color: var(--p-sand); }
.perf-srow .ss { font-family: var(--p-mono); color: var(--p-muted); overflow-wrap: anywhere; }
.perf-srow .sb { font-family: var(--p-mono); font-weight: 600; white-space: nowrap; }
.perf-srow.pr .sb::after { content: " PR"; color: var(--p-tc-hi); font-size: 11px; }
.perf-dsec h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--p-sand); }
.perf-exr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 12px; background: var(--p-panel-2); border-radius: 10px !important; text-align: left; }
.perf-exr:hover { background: var(--p-raise); }
.perf-exr .en { font-weight: 600; font-size: 14px; }
.perf-exr .es { font: 12.5px var(--p-mono); color: var(--p-muted); grid-column: 1 / -1; overflow-wrap: anywhere; }
.perf-exr .eb { font: 600 13px var(--p-mono); color: var(--p-sand); white-space: nowrap; }

/* Troca e comparação de planos (Estatísticas). */
.perf-plan-pick { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: flex-end; }
.perf:not(.perf-plain) table.perf-compare td:first-child { color: var(--p-fg); font-family: "Inter", sans-serif; width: auto; white-space: normal; }
.perf:not(.perf-plain) table.perf-compare td:nth-child(2), .perf:not(.perf-plain) table.perf-compare th:nth-child(2) { font-family: var(--p-mono); text-align: right; min-width: 0; }
.perf:not(.perf-plain) table.perf-compare tbody tr { cursor: default; }
.perf:not(.perf-plain) table.perf-compare td.down { color: var(--p-above); }
.perf-compare-title { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: var(--p-fg); }
.perf-compare-title span { font: 500 11px var(--p-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--p-faint); margin-left: 8px; }

/* Meus treinos: rotinas à esquerda, volume à direita. */
.plan-card-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; margin-top: 16px; }
.plan-card-split .plan-card-routines { margin-top: 0; }

@media (max-width: 1100px) { .plan-card-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .perf-two { grid-template-columns: 1fr; } .perf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
    .perf-chart { --h: 230px; --ax: 48px; }
    .perf-card-head, .perf-card-body { padding-left: 14px; padding-right: 14px; }
    .perf-dh, .perf-db { padding-left: 16px; padding-right: 16px; }
    .perf-kpi b { font-size: 22px; }
    .perf-page { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .perf-slot .b, .perf-slot .ghost, .perf-drawer { transition: none; animation: none; } }

/* =====================================================================
   Identidade (2026-10-20): formas do protótipo no app inteiro. A regra global
   `* { border: 0; border-radius: 8px; box-shadow: none }` continua como base (ela
   neutraliza o Bootstrap); aqui cada componente ganha a forma dele, com !important
   pelo mesmo motivo.
   ===================================================================== */
.admin-card,
.progress-card,
.card,
.professional-card,
.routine-card,
.builder-routine,
.diet-meal,
.diet-meal-editor,
.billing-plan,
.auth-card {
    border-radius: var(--radius-lg) !important;
    background: var(--surface);
}

.admin-card,
.progress-card {
    border: 0 !important;
    padding: 18px 22px;
}

/* Linha de 1 px nos cards que precisam de separação (opção C da dieta e treinos). */
.builder-routine,
.routine-card,
.diet-meal-editor,
.diet-meal {
    outline: 0;
    border: 1px solid var(--border) !important;
}

.modal-card {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border) !important;
}

.form-control,
.form-select,
.form-select-inline,
.mini,
select.form-control,
textarea.form-control {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
}

.form-control:focus,
.form-select:focus,
.form-select-inline:focus,
textarea.form-control:focus {
    border-color: var(--sand) !important;
}

.form-check-input {
    border: 1px solid var(--text-faint) !important;
    border-radius: var(--radius-sm) !important;
}

.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent) !important;
}

label,
.form-label {
    color: var(--text-muted);
    font-weight: 600;
}

.badge-status,
.app-toast-close {
    border-radius: var(--radius-pill) !important;
}

.auth-error,
.auth-info,
.auth-success {
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    background: var(--surface);
}

.auth-error { border-color: var(--danger-text) !important; }

/* Tabelas: cabeçalho em mono caixa-alta apagado, linhas de 1 px. */
.admin-table th {
    font: 500 11px 'JetBrains Mono', monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-faint);
    background: transparent;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
}

.admin-table td {
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: transparent;
}

.admin-table tbody tr:hover td {
    background: var(--surface-2);
}

/* Títulos: Inter 800 com o leve aperto do protótipo. */
h1, h2, h3 {
    letter-spacing: -.01em;
}

h1 {
    font-weight: 800;
}

.muted {
    color: var(--text-muted);
}

.picker-item:hover:not(:disabled),
.plan-exercise-item:hover {
    background: var(--surface-2);
}

/* Controles nativos (faixa de volume, caixas de seleção) seguem o tema e a terracota. */
input,
select,
textarea {
    color: var(--text);
    accent-color: var(--accent);
}

/* Raiz dos SVGs de gráfico não pinta nada; o desenho vem das classes de cada traço. */
.perf svg {
    fill: none;
}

/* --- Biblioteca de treinos (2026-10-21) ------------------------------------------------
   Grade de pastas com Fem/Masc, Treinos Clutch (fixos) e "Meus treinos" (PlanManager).
   Terracota só no chip ativo (aria-pressed, regra já existente); o resto é bloco e linha. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.library-search {
    margin: 16px 0;
    max-width: 32rem;
}

.library-section-title {
    margin: 24px 0 8px;
    font-size: 1.05rem;
}

.library-drop {
    padding: 8px 0;
}

.library-grid,
.library-cards {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.library-folder {
    display: grid;
    gap: 8px;
}

.library-folder-name {
    padding: 0;
    background: transparent;
    color: var(--text);
    font-weight: 800;
    font-size: 1.05rem;
    text-align: left;
    cursor: pointer;
}

.library-folder-subs .mono,
.library-tabs .mono { margin-left: 4px; }

.library-folder-subs,
.library-tabs,
.library-crumb,
.library-inline-form,
.library-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.library-tabs {
    margin: 8px 0 16px;
}

.library-inline-form {
    margin: 8px 0 16px;
}

.library-inline-form .form-control {
    max-width: 20rem;
}

.library-move {
    position: relative;
    display: inline-flex;
}

.library-move-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    display: grid;
    gap: 8px;
    min-width: 16rem;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
}

.library-move-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.library-apply-list {
    list-style: none;
    margin: 16px 0;
    padding: 0;
    display: grid;
    gap: 8px;
    max-height: 18rem;
    overflow-y: auto;
}

.library-apply-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Treino Clutch: selo, chave de nível e números. */
.clutch-card-head {
    display: grid;
    gap: 4px;
}

.clutch-badge {
    justify-self: start;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--accent) !important;
    border-radius: var(--radius-pill) !important;
}

.clutch-level {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}

.clutch-level-btn.is-off {
    text-decoration: line-through;
    color: var(--text-faint);
}

.clutch-info-btn {
    min-width: 2.75rem;
    font-weight: 800;
}

.clutch-reason {
    margin: 0 0 8px;
}

.clutch-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 8px 0;
}

.clutch-stats div {
    display: grid;
    gap: 4px;
}

.clutch-stats dt {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.clutch-stats dd {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.clutch-routines {
    margin: 0 0 8px;
}

.clutch-routine h4,
.clutch-volume h4,
.clutch-guide h4 {
    margin: 0 0 8px;
}

.clutch-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.clutch-table th,
.clutch-table td {
    padding: 8px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
}

.clutch-table th {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.clutch-groups {
    display: block;
    font-size: 0.75rem;
}

.clutch-biset {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.75rem;
    color: var(--accent);
}

.clutch-next td {
    padding-top: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.clutch-core td,
.clutch-cardio td {
    background: var(--surface-2);
}

.clutch-bar-row {
    display: grid;
    grid-template-columns: 9rem 1fr 3rem;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    font-size: 0.85rem;
}

.clutch-bar {
    position: relative;
    height: 12px;
    background: var(--surface-2);
}

.clutch-band {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--accent-soft);
    border-radius: 0 !important;
}

.clutch-fill {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    background: var(--text-muted);
}

.clutch-fill.is-in { background: var(--accent); }
.clutch-fill.is-above { background: var(--text); }

.clutch-guide {
    display: grid;
    gap: 16px;
}

.clutch-guide-level {
    padding: 16px;
    background: var(--surface-2);
    border-radius: var(--radius-lg) !important;
}

.clutch-guide-level.is-focus {
    outline: 1px solid var(--accent);
}

.clutch-guide-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.clutch-guide-level dl {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 8px 16px;
    margin: 8px 0 0;
}

.clutch-guide-level dt {
    color: var(--text-muted);
}

.clutch-guide-level dd {
    margin: 0;
}

.clutch-refs {
    padding-left: 24px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.perf-eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

@media (max-width: 640px) {
    .library-grid,
    .library-cards {
        grid-template-columns: 1fr;
    }

    .clutch-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .clutch-bar-row {
        grid-template-columns: 6rem 1fr 2.5rem;
    }

    .clutch-guide-level dl {
        grid-template-columns: 1fr;
    }

    .library-move-menu {
        position: fixed;
        left: 16px;
        right: 16px;
        top: auto;
        bottom: 16px;
    }
}

/* --- Editor de plano: métodos e montagem rápida (2026-10-21) -------------------------
   Campo que acompanha a matriz: borda tracejada. Editado à mão: borda terracota e o botão
   "voltar a acompanhar". Sugestão, parecidos e copiar são blocos com linha de 1 px. */
.builder-default {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 16px;
    padding: 8px 16px;
    background: var(--surface-2);
    border-radius: var(--radius-md) !important;
}

.builder-handle {
    cursor: grab;
    color: var(--text-faint);
    font-weight: 800;
    letter-spacing: -2px;
    user-select: none;
    padding: 0 4px;
}

.builder-order {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.builder-order .builder-icon-btn {
    min-width: 2rem;
}

.builder-quick-list {
    list-style: none;
    margin: 8px 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.builder-quick-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--surface-2);
    border-radius: var(--radius-md) !important;
}

.builder-exercise-method {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.builder-exercise-method label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.builder-set.is-matrix > span:first-child {
    font-weight: 800;
    color: var(--accent);
}

.builder-set.is-linked input.mini,
.builder-stage.is-linked input.mini {
    border: 1px dashed var(--text-faint) !important;
}

.builder-set.is-edited input.mini,
.builder-stage.is-edited input.mini {
    border: 1px solid var(--accent) !important;
}

.builder-relink {
    font-size: 0.75rem;
}

.builder-rir {
    width: 4rem;
}

.builder-stage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px 24px;
    font-size: 0.85rem;
}

.builder-set-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.builder-similar,
.builder-suggestion,
.builder-copy {
    display: grid;
    gap: 8px;
    margin: 8px 0;
    padding: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
}

.builder-similar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.builder-similar li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.builder-similar small {
    display: block;
}

.builder-suggestion-param {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.builder-suggestion-preview {
    margin: 0;
    padding: 8px 16px;
    white-space: pre-wrap;
    font-size: 0.8rem;
    background: var(--field-bg);
    border-radius: var(--radius-md) !important;
}

.builder-suggestion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.builder-method-modal {
    max-width: 34rem;
    display: grid;
    gap: 8px;
}

.builder-method-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.builder-panel-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

/* Visão do aluno: a rotina num "celular", atualizada ao vivo. */
.routine-preview-phone {
    display: grid;
    gap: 8px;
    max-width: 22rem;
    margin: 0 auto;
    padding: 16px;
    background: var(--bg);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
}

.routine-preview-exercise {
    padding: 8px 16px;
    background: var(--surface);
    border-radius: var(--radius-md) !important;
}

.routine-preview-exercise.is-combined {
    border-left: 1px solid var(--accent) !important;
}

.routine-preview-exercise h4 {
    margin: 0 0 4px;
    font-size: 0.95rem;
}

.routine-preview-combo,
.routine-preview-notes,
.routine-preview-rest {
    margin: 0 0 4px;
    font-size: 0.8rem;
}

.routine-preview-combo span {
    display: block;
}

.routine-preview-sets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
    font-size: 0.85rem;
}

.routine-preview-sets li {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: 0 8px;
}

.routine-preview-sets small {
    grid-column: 2;
}

.routine-preview-rir,
.routine-preview-method {
    margin-left: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.routine-preview-method {
    color: var(--accent);
}

.routine-preview-stage {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.train-stage {
    margin: -4px 0 8px 48px;
}

/* --- Meus alunos (2026-10-21) ----------------------------------------------------------
   Lista por gravidade: linha no desktop, cartão no celular (container query, como a lista
   antiga: quem estreita a linha é o menu lateral). Terracota só no chip ativo e no
   "Convidar aluno"; alerta é texto colorido em pílula com contorno, nunca fundo cheio. */
.mya-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.mya-head h1 { margin-bottom: 0; }
.mya-head p { margin: 4px 0 0; }

.mya-head-actions,
.mya-chips,
.mya-tools,
.mya-actions,
.mya-bulk-actions,
.mya-invite-actions,
.mya-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.mya-chips { margin: 24px 0 16px; }
.mya-chip-count { margin-left: 4px; opacity: .8; }
.mya-tools { margin-bottom: 16px; }
.mya-tools input[type="search"] { flex: 1 1 16rem; max-width: 28rem; }
.mya-tools select { flex: 0 0 auto; width: auto; }

.mya-list {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--surface);
}

.mya-row {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(14rem, 2.2fr) 1.4fr 1fr 1fr 1fr 19rem;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 !important;
}

.mya-row:first-child { border-top: 0 !important; }
.mya-row.is-selected { background: var(--accent-soft); }

.mya-row-head {
    padding-top: 8px;
    padding-bottom: 8px;
    background: var(--surface-2);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mya-row-head span:last-child { text-align: right; }
.mya-empty { padding: 24px 16px; border-top: 1px solid var(--border) !important; border-radius: 0 !important; }
.mya-check { width: 20px; height: 20px; accent-color: var(--accent); }

.mya-who { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.mya-who-text { display: grid; gap: 2px; min-width: 0; }
.mya-who-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mya-avatar {
    display: inline-grid;
    flex: 0 0 40px;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill) !important;
    background: var(--surface-2);
    color: var(--sand);
    font-size: .8rem;
    font-weight: 800;
}

.mya-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

.mya-badge {
    padding: 0 8px;
    border: 1px solid currentColor !important;
    border-radius: var(--radius-pill) !important;
    font-size: .72rem;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
}

.mya-badge.is-bad,
.mya-row .is-bad { color: var(--danger-text); }
.mya-badge.is-warn,
.mya-row .is-warn { color: var(--warning-text); }
.mya-badge.is-good { color: var(--success-text); }

.mya-cell { display: grid; gap: 2px; min-width: 0; }
.mya-cell b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mya-cell small { font-size: .78rem; }
.mya-faint { color: var(--text-faint); }

.mya-dots { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }

.mya-dots i {
    width: 10px;
    height: 10px;
    border: 1px solid var(--text-faint) !important;
    border-radius: var(--radius-pill) !important;
}

.mya-dots i.is-on { background: var(--text-muted); border-color: var(--text-muted) !important; }
.mya-dots .mono { margin-left: 4px; font-size: .8rem; color: var(--text-muted); }

.mya-actions { justify-content: flex-end; flex-wrap: nowrap; }
.mya-more { position: relative; }

.mya-more-btn {
    min-width: 40px;
    min-height: 40px;
    background: var(--surface-2);
    border: 1px solid var(--border) !important;
    color: var(--text);
    font-size: 1.1rem;
    line-height: 1;
}

.mya-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    display: grid;
    min-width: 13rem;
    padding: 8px 0;
    background: var(--surface);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
}

.mya-menu button,
.mya-menu a {
    padding: 8px 16px;
    background: transparent;
    color: var(--text);
    text-align: left;
    text-decoration: none;
    border-radius: 0 !important;
}

.mya-menu button:hover,
.mya-menu a:hover { background: var(--surface-2); }
.mya-menu hr { margin: 8px 0; border-top: 1px solid var(--border) !important; border-radius: 0 !important; opacity: 1; }
.mya-menu .is-danger { color: var(--danger-text); }

.mya-confirm {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: var(--danger-bg);
    border: 1px solid var(--danger-text) !important;
    border-radius: var(--radius-md) !important;
}

.mya-bulk {
    position: sticky;
    bottom: 16px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
}

.mya-compose { display: grid; flex-basis: 100%; gap: 8px; }
.mya-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.mya-invites { margin-top: 24px; }

.mya-invites summary {
    display: flex;
    align-items: baseline;
    gap: 16px;
    min-height: 40px;
    cursor: pointer;
}

.mya-invites-title { font-size: 1.15rem; font-weight: 800; }

.mya-invite {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 !important;
}

.mya-invite > div { display: grid; gap: 2px; min-width: 0; }
.mya-invite.is-old { opacity: .75; }
.mya-invite-toggle { margin-top: 16px; }

.perf-drawer.mya-sheet { width: min(960px, 100%); }
/* Montando ou editando treino na ficha do aluno: a gaveta ocupa a tela toda, o
   montador tem duas colunas e não cabe nos 960 px. */
.perf-drawer.mya-sheet:has(.plan-builder-layout) { width: 100%; }

.mya-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.mya-kpis > div {
    display: grid;
    gap: 4px;
    padding: 8px 16px;
    background: var(--surface-2);
    border-radius: var(--radius-md) !important;
}

.mya-kpis span { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.mya-kpis b { font-size: 1.15rem; }

.mya-tabs {
    display: flex;
    gap: 8px;
    margin: 16px 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
}

.mya-tabs button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 16px;
    background: transparent;
    color: var(--text-muted);
    border-bottom: 1px solid transparent !important;
    border-radius: 0 !important;
}

.mya-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent) !important; }

.mya-invite-form,
.mya-invite-link { display: grid; gap: 16px; }
.mya-invite-link { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border) !important; border-radius: 0 !important; }

.alert-limits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

/* Cartão: cabeçalho some, as quatro células viram 2×2 com o rótulo em cima e as ações
   descem para a linha de baixo, ocupando a largura (toque confortável, sem rolagem lateral). */
@container (max-width: 860px) {
    .mya-row { grid-template-columns: 24px 1fr 1fr; align-items: start; gap: 8px 16px; }
    .mya-row-head { display: none; }
    .mya-row-head + .mya-row { border-top: 0 !important; }
    .mya-who { grid-column: 2 / -1; }
    .mya-row > .mya-cell:nth-of-type(even) { grid-column: 2; }
    .mya-cell::before {
        content: attr(data-label);
        font-size: .68rem;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--text-faint);
    }
    .mya-actions { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
    .mya-actions .mya-open { margin-left: auto; }
}

@media (max-width: 600px) {
    .mya-invite { grid-template-columns: 1fr; gap: 8px; }
    /* Histórico de treinos: nome em cima, selo à esquerda e "Abrir" à direita. */
    .mya-invite.plan-history { grid-template-columns: 1fr auto; }
    .plan-history > div { grid-column: 1 / -1; }
    .plan-history > .badge-status { justify-self: start; }
    .mya-kpis b { font-size: 1rem; }
}

/* Nota fixa na tela (auth-info vira aviso flutuante que some sozinho). */
.inline-note {
    margin: 8px 0;
    padding: 8px 16px;
    background: var(--surface-2);
    border-radius: var(--radius-md) !important;
    color: var(--text);
}

/* Ações dentro da nota (ex.: cadastro com e-mail que já tem conta): alvo de toque de 44 px. */
.inline-note .row-actions { margin-top: 8px; flex-wrap: wrap; gap: 8px; }
/* Histórico da avaliação: Ver, Editar, Fotos, PDF e Apagar não cabem em 360 px numa linha. */
.link-list .row-actions { flex-wrap: wrap; gap: 8px; }
.inline-note .chip-btn { min-height: 44px; }

/* --- Início por papel (2026-10-22) ------------------------------------------------------
   Protótipo aprovado: cupons em carrossel no topo, cartões em grade de 12 colunas.
   Terracota só no que decide ("Ver oferta", "Começar") e no dado de destaque. */
.coupon-carousel {
    position: relative;
    margin: 16px 0;
    padding: 16px 24px 24px;
    background: var(--surface);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
}

.coupon-carousel-head,
.coupon-carousel-nav,
.home-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.coupon-carousel-head { margin-bottom: 8px; }
.coupon-carousel-head h2 { margin: 0; font-size: 1rem; }

.coupon-arrow {
    width: 40px;
    height: 40px;
    background: var(--surface-2);
    border: 1px solid var(--border) !important;
    color: var(--text);
    font: 700 1.1rem "JetBrains Mono", monospace;
}

.coupon-slide {
    display: grid;
    grid-template-columns: 112px 1fr auto;
    gap: 24px;
    align-items: center;
    animation: coupon-in .35s ease;
}

@keyframes coupon-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

.coupon-slide-image {
    width: 112px;
    height: 112px;
    object-fit: cover;
    background: var(--surface-2);
}

.coupon-slide-initials {
    display: grid;
    place-items: center;
    color: var(--sand);
    font-size: 1.6rem;
    font-weight: 800;
}

.coupon-slide-body { display: grid; gap: 4px; min-width: 0; }

.coupon-slide-store {
    font: 600 0.7rem "JetBrains Mono", monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.coupon-slide-title { font-size: 1.25rem; font-weight: 800; }

.coupon-slide-code {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-self: start;
    margin-top: 4px;
    padding: 4px 4px 4px 12px;
    border: 1px dashed var(--border) !important;
    font-weight: 700;
}

.coupon-slide-code button {
    min-height: 32px;
    padding: 0 12px;
    background: var(--surface-2);
    color: var(--text);
    font-size: .8rem;
    font-weight: 600;
}

.coupon-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }

.coupon-dots button {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
}

.coupon-dots button::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill) !important;
    background: var(--border);
}

.coupon-dots button[aria-current="true"]::before { width: 24px; background: var(--accent); }

.coupon-progress {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 1px;
    background: var(--border);
    border-radius: 0 !important;
}

.coupon-progress i {
    display: block;
    height: 1px;
    width: 100%;
    background: var(--accent);
    border-radius: 0 !important;
    transform-origin: left;
    animation: coupon-progress linear forwards;
}

.coupon-progress i.is-paused { animation-play-state: paused; }

@keyframes coupon-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
    .coupon-slide { animation: none; }
    .coupon-progress { display: none; }
}

.home-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.home-card {
    grid-column: span 6;
    min-width: 0;
    padding: 16px 24px 24px;
    background: var(--surface);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
}

.home-card h2 { margin: 0 0 16px; font-size: 1.05rem; }
.home-card-head { margin-bottom: 16px; align-items: baseline; }
.home-card-head h2 { margin: 0; }
.home-card p { margin: 0; }
.home-span-12 { grid-column: span 12; }
.home-span-8 { grid-column: span 8; }
.home-span-4 { grid-column: span 4; }
.home-foot { margin-top: 16px !important; font-size: .8rem; }
.home-delta { color: var(--text-muted); font-size: .8rem; }

.home-bars { display: grid; gap: 8px; }

.home-bar-row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) 4.5rem;
    gap: 16px;
    align-items: center;
    font-size: .85rem;
}

.home-bar-row > .mono { text-align: right; }

.home-track {
    position: relative;
    display: block;
    height: 12px;
    background: var(--surface-2);
    border-radius: 4px !important;
}

.home-fill {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    background: var(--sand);
    border-radius: 0 4px 4px 0 !important;
}

.home-fill.is-hit { background: var(--accent); }

.home-multiples {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.home-multiples p { margin: 4px 0 !important; }
.sparkline { display: block; width: 100%; height: 28px; }

@media (max-width: 900px) {
    .home-card, .home-span-8, .home-span-4 { grid-column: span 12; }
}

@media (max-width: 600px) {
    .coupon-carousel { padding: 16px; }
    .coupon-slide { grid-template-columns: 72px 1fr; gap: 16px; }
    .coupon-slide-image { width: 72px; height: 72px; }
    .coupon-slide-action { grid-column: 1 / -1; justify-content: center; }
    .home-card { padding: 16px; }
    .home-card-head { flex-wrap: wrap; }
    .home-bar-row { grid-template-columns: 5.5rem minmax(0, 1fr) 4rem; gap: 8px; }
}

/* Início do personal: números da carteira, listas com atalho e colunas por dia. */
.home-kpis { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.home-kpi { display: grid; gap: 4px; padding: 16px; background: var(--surface-2); }
.home-kpi span { font-size: .75rem; color: var(--text-muted); }
.home-kpi b { font-size: 1.75rem; font-weight: 700; }
.home-kpi small { font-size: .75rem; }
.home-list { display: grid; }
.home-list > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--border) !important; border-radius: 0 !important; }
.home-list > div:first-child { border-top: 0 !important; }
.home-list > div > span:first-child { display: grid; gap: 2px; min-width: 0; }
.home-list .mya-badges { margin-top: 0; }
/* Últimas atividades (início do personal): um check-in por linha, toque abre o histórico. */
.home-feed { display: grid; margin: 0; padding: 0; list-style: none; }
.home-feed > li + li { border-top: 1px solid var(--border) !important; border-radius: 0 !important; }
.home-feed-item { display: grid; gap: 4px; min-height: 48px; padding: 8px 0; color: inherit; text-decoration: none; }
.home-feed-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.home-feed-head time { flex: none; font-size: .75rem; }
.home-feed-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.home-feed-stats small { color: var(--text-muted); }
.home-feed-pr { color: var(--accent); font-weight: 700; }
.home-feed-note { color: var(--text-muted); font-style: italic; overflow-wrap: anywhere; }
.home-columns { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; align-items: end; height: 140px; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; }
.home-column { display: flex; align-items: flex-end; height: 100%; }
.home-column i { display: block; width: 100%; min-height: 1px; background: var(--sand); border-radius: 4px 4px 0 0 !important; }
.home-column:last-child i { background: var(--accent); }
.home-columns-axis { position: relative; height: 20px; margin-top: 4px; font-size: .7rem; color: var(--text-faint); }
.home-columns-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.home-columns-axis span:first-child { transform: none; }

/* Início do nutricionista: variação de peso com o zero no meio da trilha. */
.home-diverging::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: 50%; width: 1px; background: var(--text-faint); }
.home-diverging .home-fill { border-radius: 4px !important; }

/* --- Início do aluno v2 (tela_treino/PROMPT 4): celular primeiro --- */
.home-greeting-sub { margin: -8px 0 16px !important; font-size: .85rem; }
.home-greeting-sub::first-letter { text-transform: uppercase; }
/* Celular: uma coluna na ordem do prompt (as colunas somem e os cards se ordenam). */
.sh-grid { display: grid; gap: 16px; }
.sh-col { display: contents; }
.sh-o1 { order: 1; } .sh-o2 { order: 2; } .sh-o3 { order: 3; } .sh-o4 { order: 4; }
.sh-o5 { order: 5; } .sh-o6 { order: 6; } .sh-o7 { order: 7; }
.sh-card { min-width: 0; padding: 16px; background: var(--surface); border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; }
.sh-card h2 { margin: 0; font-size: 1rem; font-weight: 800; }
.sh-card p { margin: 0; }
.sh-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.sh-eyebrow { font: 700 .7rem "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.sh-card h2.sh-today-title { margin: 8px 0 0; font-size: 1.35rem; line-height: 1.2; }
.sh-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sh-tag { padding: 4px 12px; font-size: .75rem; color: var(--sand); background: var(--surface-2); border-radius: var(--radius-pill) !important; }
.sh-hint { display: inline-block; margin-top: 16px; padding: 4px 12px; font-size: .75rem; background: var(--accent-soft); border-radius: var(--radius-pill) !important; }
.sh-cta { display: flex !important; width: 100%; min-height: 48px; margin-top: 16px; align-items: center; justify-content: center; font-weight: 700; }
.sh-divider { height: 1px; margin: 16px 0; background: var(--border); }
.sh-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sh-day { display: grid; justify-items: center; gap: 2px; padding: 8px 0; font: 600 .65rem "JetBrains Mono", monospace; color: var(--text-faint); background: var(--surface-2); border-radius: var(--radius-md) !important; }
.sh-day b { font-size: .9rem; color: var(--text); }
.sh-day.is-past b, .sh-day.is-future b { color: var(--text-faint); }
.sh-day.is-done { color: var(--on-accent); background: var(--accent); }
.sh-day.is-done b { color: var(--on-accent); }
.sh-day.is-today { outline: 2px solid var(--accent); outline-offset: 1px; }
.sh-week-sum { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 8px; font-size: .85rem; }
.sh-num { font-size: 1.15rem; font-weight: 700; }
.sh-big { font-size: 1.9rem; font-weight: 700; }
.sh-big-line { margin: 16px 0 8px !important; }
.sh-big-line .sh-big { margin-right: 8px; }
.sh-small { font-size: .75rem; }
.sh-faint { color: var(--text-faint); }
.sh-link-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin-top: 8px; color: var(--text); text-decoration: none; }
.sh-link-row > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.sh-more { font-size: .75rem; font-weight: 600; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.sh-more.is-accent { color: var(--accent); }
.sh-foot { margin-top: 16px !important; font-size: .8rem; }
.sh-empty { padding: 24px 0 8px; text-align: center; }
.sh-empty p { margin-top: 4px !important; }

/* Comece por aqui */
.sh-bar { height: 6px; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-pill) !important; }
.sh-bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill) !important; }
.sh-checks { margin: 8px 0 0; padding: 0; list-style: none; }
.sh-checks li + li { border-top: 1px solid var(--border) !important; border-radius: 0 !important; }
.sh-checks a { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 56px; padding: 8px 0; color: var(--text); text-decoration: none; }
.sh-checks small { display: block; color: var(--text-muted); font-size: .75rem; }
.sh-box { display: grid; place-items: center; width: 24px; height: 24px; font-size: .75rem; color: var(--on-accent); border: 2px solid var(--border) !important; border-radius: var(--radius-pill) !important; }
.sh-checks .is-ok .sh-box { background: var(--good); border-color: var(--good) !important; }
.sh-checks .is-ok b { color: var(--text-muted); font-weight: 600; text-decoration: line-through; }
.sh-chevron { color: var(--text-muted); font-size: 1.2rem; }

/* Sua evolução: chave seletora, barras previsto × feito × hoje e colunas por semana */
.sh-seg { display: flex; gap: 2px; padding: 4px; background: var(--surface-2); border-radius: var(--radius-pill) !important; }
.sh-seg button { flex: 1; min-height: 40px; padding: 0 8px; font-size: .8rem; font-weight: 600; color: var(--text-muted); background: transparent; border-radius: var(--radius-pill) !important; }
.sh-seg button[aria-selected="true"] { color: var(--on-accent); background: var(--accent); }
.sh-seg + * { margin-top: 16px !important; }
.sh-rows { display: grid; gap: 8px; margin-top: 8px; }
.sh-row { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) 3.5rem; gap: 8px; align-items: center; font-size: .8rem; }
.sh-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-val { text-align: right; font-size: .75rem; }
.sh-track { position: relative; height: 12px; overflow: hidden; background: var(--surface-2); border-radius: 4px !important; }
.sh-track > span { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 0 !important; }
.sh-plan { background: var(--raise); }
.sh-fill { background: var(--accent); }
.sh-fill.is-sand { background: var(--sand); }
/* Treino de hoje: contorno tracejado em vez de listra (a marca não usa gradiente). */
.sh-proj { background: var(--accent-soft); border: 1px dashed var(--accent) !important; }
.sh-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; font-size: .75rem; color: var(--text-muted); }
.sh-legend span { display: inline-flex; align-items: center; gap: 8px; }
.sh-sw { display: inline-block; width: 12px; height: 8px; background: var(--accent); border-radius: 2px !important; }
.sh-sw.is-plan { background: var(--raise); }
.sh-sw.is-proj { background: var(--accent-soft); border: 1px dashed var(--accent) !important; }
.sh-cols { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; height: 160px; padding-left: 16px; }
.sh-col-bar { display: grid; grid-template-rows: 1fr auto; gap: 4px; min-width: 0; }
.sh-col-area { position: relative; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; }
.sh-col-area i { position: relative; display: block; width: 60%; min-height: 2px; background: var(--sand); border-radius: 4px 4px 0 0 !important; }
.sh-col-area i.is-hit { background: var(--accent); }
.sh-col-area i.is-current { background: transparent; border: 1px dashed var(--accent) !important; border-bottom: 0 !important; }
.sh-col-area b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 2px; font-size: .75rem; }
.sh-col-bar small { font-size: .65rem; text-align: center; color: var(--text-faint); }
/* A linha da meta mede a altura da área das barras (160 px menos o rótulo de baixo). */
.sh-goal { position: absolute; left: 0; right: 0; margin-bottom: 20px; border-top: 1px dashed var(--text-faint) !important; border-radius: 0 !important; pointer-events: none; }
.sh-goal span { position: absolute; left: 0; top: -8px; font-size: .65rem; color: var(--text-faint); }
.sh-ach { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 8px 0; border-top: 1px solid var(--border) !important; border-radius: 0 !important; font-size: .85rem; }
.sh-ach small { grid-column: 1 / -1; font-size: .75rem; }
.sh-ach .sh-bar { grid-column: 1 / -1; }

/* Personal */
.sh-person { display: flex; align-items: center; gap: 16px; }
.sh-person > span:last-child { display: grid; gap: 2px; min-width: 0; }
.sh-person small { font-size: .8rem; }
.sh-avatar { display: grid; place-items: center; flex: none; width: 48px; height: 48px; font-weight: 800; color: var(--sand); background: var(--surface-2); border-radius: var(--radius-pill) !important; }
.sh-appt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; margin-top: 16px; padding: 8px 16px; color: var(--text); text-decoration: none; background: var(--surface-2); border-radius: var(--radius-md) !important; }
.sh-appt > span:first-child { display: grid; min-width: 0; font-size: .85rem; }
.sh-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.sh-actions .btn { display: flex; align-items: center; justify-content: center; min-height: 48px; }

/* Cupons compactos (fim do início do aluno) */
.coupon-carousel.is-compact { padding: 16px; }
.coupon-carousel.is-compact .coupon-carousel-head h2 { font: 700 .7rem "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.coupon-carousel.is-compact .coupon-arrow,
.coupon-carousel.is-compact .coupon-progress { display: none; }
.coupon-carousel.is-compact .coupon-slide { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.coupon-carousel.is-compact .coupon-slide-image { width: 48px; height: 48px; }
.coupon-carousel.is-compact .coupon-slide-title { font-size: .95rem; }
.coupon-carousel.is-compact .coupon-slide-action { grid-column: auto; min-height: 44px; }
.coupon-carousel.is-compact .coupon-dots { margin-top: 8px; }

/* Computador: duas colunas, treino/passos/personal à esquerda; evolução/corpo/cupons à direita. */
@media (min-width: 960px) {
    .sh-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
    .sh-col { display: grid; gap: 16px; align-content: start; }
    .sh-card { padding: 24px; }
    .sh-card h2.sh-today-title { font-size: 1.6rem; }
    .sh-actions { grid-template-columns: repeat(2, minmax(0, 200px)); }
}

/* --- Execução do treino v2 (tela_treino/PROMPT 5): celular primeiro --- */
/* Cabeçalho fixo de no máximo ~110 px: treino, bloco atual, relógio e progresso. */
.tr-head { position: sticky; top: 0; z-index: 6; margin: 0 -16px 16px; padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; }
@media (max-width: 640px) { .tr-head { top: 3.5rem; } }
.tr-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tr-head-title { display: grid; min-width: 0; }
.tr-head-title h1 { margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-head-title span { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.tr-clock { flex: none; font-size: 1.35rem; font-weight: 700; }
.tr-progress { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 8px 0 4px; }
.tr-progress span { height: 4px; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-pill) !important; }
.tr-progress i { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill) !important; }
.tr-head-stats { display: flex; justify-content: space-between; gap: 16px; font-size: .75rem; color: var(--text-muted); }
.tr-head-stats b { color: var(--text); }

.tr-layout { display: grid; gap: 16px; min-width: 0; }
.tr-main, .tr-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
/* No celular o recado e a lista vêm antes do bloco atual (recado) e depois (lista). */
.tr-side { display: contents; }
.tr-recado { order: -1; }
.tr-list { order: 2; }

.tr-block { padding: 16px; background: var(--surface); border: 1px solid var(--accent) !important; border-radius: var(--radius-lg) !important; }
.tr-block.is-finished { border-color: var(--border) !important; }
.tr-block-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tr-block-head h2 { margin: 4px 0 0; font-size: 1.2rem; font-weight: 800; }
.tr-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.tr-other { min-height: 40px; }
.tr-combination { margin: 8px 0 16px !important; font-size: .85rem; }
.tr-small { font-size: .75rem; }

.tr-block .exercise-block,
.tr-block .exercise-block.is-circuit { margin: 0; padding: 16px 0 0; background: transparent; border: 0 !important; outline: 0; }
.tr-block .exercise-block.is-circuit::before { content: none; }
/* No circuito, o exercício da vez ganha a barra lateral (o resto do bloco fica neutro). */
.tr-block .exercise-block.is-circuit-now { position: relative; padding-left: 12px; }
.tr-block .exercise-block.is-circuit-now::before { content: ""; position: absolute; top: 16px; bottom: 0; left: 0; width: 3px; background: var(--accent); }
.tr-block .exercise-block + .exercise-block { margin-top: 8px; border-top: 1px solid var(--border) !important; border-radius: 0 !important; }
.tr-block .exercise-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.tr-block .exercise-media-thumb { width: 48px; height: 48px; }
.tr-ex-title { display: grid; gap: 2px; min-width: 0; }
.tr-ex-title small { font-size: .75rem; }
.tr-ex-title .circuit-tag { margin-right: 4px; color: var(--accent); }
.tr-block .exercise-menu .icon-btn { width: 44px; height: 44px; }
.tr-method { margin: 8px 0 0 !important; font-size: .85rem; color: var(--text-muted); }
.tr-method-text { margin: 4px 0 0 !important; font-size: .8rem; }
.tr-badge { display: inline-block; padding: 2px 8px; font-size: .7rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: var(--radius-pill) !important; }
.tr-badge.is-muted { color: var(--text-muted); background: var(--surface-2); }
.tr-note { margin-top: 8px; font-size: .85rem; }
.tr-note summary { min-height: 32px; font-weight: 700; cursor: pointer; }
.tr-note p { margin: 4px 0 0 !important; color: var(--text-muted); }

/* Séries: feitas (resumo + desfazer), a atual (campos completos) e as próximas (prévia). */
.tr-block .sets-table { display: grid; gap: 8px; margin-top: 16px; }
/* .sets-table na frente: as regras antigas .sets-table.tracking-* (colunas fixas de 3rem)
   eram mais específicas e espremiam a série dos exercícios sem carga e de tempo. A
   explicação do método ocupa a largura toda; o ✓ fica ao lado do título da série. */
.tr-block .sets-table .sets-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head check" "meta meta" "note note" "fields fields" "stage stage"; gap: 4px 8px; align-items: center; margin: 0; padding: 8px 16px; text-align: left; background: var(--surface-2); border-radius: var(--radius-md) !important; }
.tr-block .sets-row.is-current { padding: 12px; background: var(--surface); border: 1px solid var(--accent) !important; }
.tr-block .sets-row.done { background: var(--accent-soft); }
.tr-set-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.tr-block .c-set { font-size: .75rem; font-weight: 700; color: var(--text-muted); text-align: left; }
.tr-block .is-current .c-set { color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.tr-done-summary { font-size: .85rem; }
.tr-set-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 !important; }
.tr-block .set-target { font-size: .75rem; white-space: normal; }
.tr-block .set-target b { color: var(--text); }
.tr-block .tr-method-text { grid-area: note; }
.tr-fields { grid-area: fields; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 8px; margin-top: 8px; }
.tr-fields.is-compact { grid-template-columns: minmax(0, 8rem) auto; justify-content: space-between; align-items: center; margin-top: 0; }
.tr-block .sets-row .tr-field { display: grid; justify-items: stretch; gap: 4px; min-width: 0; margin: 0; text-align: left; }
.tr-field > span:first-child { font-size: .75rem; color: var(--text-muted); }
.tr-stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; min-height: 48px; background: var(--surface-2); border-radius: var(--radius-md) !important; }
.is-compact .tr-stepper { grid-template-columns: minmax(0, 1fr); min-height: 40px; }
.tr-stepper button { height: 48px; font-size: 1.3rem; font-weight: 700; color: var(--text); background: transparent; }
.tr-block .tr-stepper .set-input { width: 100%; min-width: 0; height: 48px; padding: 0 4px; font-size: 1.15rem; text-align: center; background: transparent; }
.is-compact .tr-stepper .set-input { height: 40px; font-size: .95rem; }
.tr-block .c-time .tr-stepper { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 48px; }
.tr-block .c-time .stopwatch-value { grid-column: 1 / 4; text-align: center; font-size: 1.15rem; }
/* Preparação antes de contar e meta atingida: o mostrador muda de cor junto com o bipe. */
.tr-block .c-time .stopwatch-prep { font-size: .95rem; white-space: nowrap; color: var(--text-muted); }
.tr-block .stopwatch-value.is-target { color: var(--success-text); }
.tr-block .stopwatch-btn { width: 44px; height: 44px; margin: 2px; }
.tr-block .c-speed .set-input { width: 100%; height: 48px; text-align: center; }
.tr-check { grid-area: check; display: grid !important; place-items: center; min-width: 48px; min-height: 48px; padding: 0 8px; font-weight: 700; color: var(--accent); border: 1px solid var(--accent) !important; border-radius: var(--radius-md) !important; cursor: pointer; }
.tr-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tr-check:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.is-next .tr-check { min-width: 40px; min-height: 40px; color: var(--text-muted); border-color: var(--border) !important; }
.tr-check.is-on { min-height: 40px; font-size: .75rem; color: var(--text-muted); border-color: var(--border) !important; }
.tr-block .train-stage { grid-area: stage; }
.tr-block .remove-btn { justify-self: end; width: 40px; height: 40px; }
.tr-block .add-set { justify-self: start; min-height: 40px; }
.tr-block .exercise-rest-editor { margin: 8px 0 0; font-size: .85rem; }
.tr-block .exercise-rest-editor .set-input { width: 4.5rem; min-height: 40px; text-align: center; }
.tr-block .circuit-link { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .75rem; color: var(--text-muted); }

/* Recado do personal e lista de blocos */
.tr-recado, .tr-list { padding: 16px; background: var(--surface); border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; }
.tr-recado summary { min-height: 32px; font-weight: 800; cursor: pointer; }
.tr-recado ul { display: grid; gap: 8px; margin: 8px 0 0; padding-left: 20px; font-size: .9rem; }
.tr-recado li::marker { color: var(--accent); }
.tr-list h2 { margin: 0 0 8px; font-size: 1rem; font-weight: 800; }
.tr-list-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--border) !important; border-radius: 0 !important; }
.tr-list-row > span:first-child { display: grid; min-width: 0; }
.tr-list-row.is-done b { color: var(--text-muted); }
.tr-list-row .chip-btn { min-height: 40px; }

.rest-timer-floating { flex-wrap: wrap; justify-content: center; }
.rest-timer-floating .rest-timer-value { margin-right: 0; }

/* Computador: bloco atual à esquerda; recado e lista de blocos à direita. */
@media (min-width: 960px) {
    .tr-head { margin: 0 0 16px; }
    .tr-layout { grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr); align-items: start; }
    .tr-side { display: grid; position: sticky; top: 120px; }
    .tr-recado, .tr-list { order: 0; }
}

/* Execução v2, fase 2: pulado, troca do dia, elástico e etapas */
.tr-skipped { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; margin: 8px 0 0 !important; padding: 8px 16px; font-size: .85rem; color: var(--text-muted); background: var(--surface-2); border-radius: var(--radius-md) !important; }
.tr-swapped { margin: 8px 0 0 !important; font-size: .8rem; }
.tr-swapped b { color: var(--text); }
.tr-band { grid-column: 1 / -1; }
.tr-band-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tr-band-options button { min-height: 44px; font-weight: 700; color: var(--text); background: var(--surface-2); border: 1px solid var(--border) !important; border-radius: var(--radius-pill) !important; }
.tr-band-options button[aria-checked="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent) !important; }
.tr-stages { grid-area: stage; display: grid; gap: 8px; margin-top: 8px; }
.tr-stage { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem; gap: 8px; align-items: center; }
.tr-stage:has(.chip-btn) { grid-template-columns: minmax(0, 1fr) 4rem 4rem; }
.tr-stage .chip-btn { grid-column: 1 / -1; justify-self: start; min-height: 40px; }
.tr-stage-label { font-size: .8rem; color: var(--text-muted); }
.tr-block .tr-stage .set-input { width: 100%; min-height: 44px; text-align: center; background: var(--surface-2); border-radius: var(--radius-md) !important; }

/* Execução v2, fase 3: fim do treino */
.workout-feedback-modal { max-height: calc(100dvh - 32px); overflow-y: auto; }
.tr-zone { margin: 8px 0 16px !important; font-size: .85rem; color: var(--text-muted); }
.tr-end { display: grid; gap: 16px; margin: 8px 0 16px; }
.tr-end-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tr-end-stats span { display: grid; gap: 2px; padding: 8px; text-align: center; background: var(--surface-2); border-radius: var(--radius-md) !important; }
.tr-end-stats b { font-size: 1.2rem; }
.tr-end-stats small { font-size: .7rem; color: var(--text-muted); }
.tr-end-equiv { margin: 0 !important; font-size: .9rem; }
.tr-unlocked { border: 1px solid var(--accent) !important; }
.tr-unlocked h2 { color: var(--accent); }
.tr-unlocked ul { display: grid; gap: 8px; margin: 8px 0 16px; padding: 0; list-style: none; }
.tr-unlocked li { display: flex; align-items: center; gap: 16px; }
.tr-unlocked li > svg { flex: none; color: var(--accent); }
.tr-unlocked li > span { display: grid; gap: 2px; }
.tr-done-list ul { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.tr-done-list li + li { padding-top: 8px; border-top: 1px solid var(--border) !important; border-radius: 0 !important; }
.tr-end-block h3 { margin: 0 0 8px; font-size: .85rem; font-weight: 800; }
.tr-end-block ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: .85rem; }
.tr-end-block li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid var(--border) !important; border-radius: 0 !important; }

/* Execução v2, fase 4: compartilhar */
.share-sheet { display: grid; gap: 16px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.share-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.share-head h2 { margin: 0; font-size: 1.1rem; }
.share-preview { display: block; width: min(100%, 280px); aspect-ratio: 9 / 16; margin: 0 auto; background: var(--surface-2); border-radius: var(--radius-md) !important; }
.share-preview.is-post { aspect-ratio: 4 / 5; width: min(100%, 320px); }
.share-photo { display: grid; gap: 8px; }
.share-photo-options, .share-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.share-photo-options .chip-btn, .share-toggles .chip-btn { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; }
.share-toggles .chip-btn[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent) !important; }

/* --- Autoavaliação do aluno (PROMPT 6) ---
   Uma coluna de até 480 px (celular primeiro). Cores do protótipo traduzidas para os
   tokens: painel = surface, elevado = surface-2/raise, linha = border, terracota = accent.
   A regra global zera borda e raio, por isso cada forma vem com !important. */
.sa { --sa-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace; max-width: 480px; margin: 0 auto; }
.sa h1 { font-size: 24px; line-height: 1.2; font-weight: 800; margin: 4px 0 0; }
.sa h2 { font-size: 16px; font-weight: 800; margin: 0 0 12px; }
.sa .unit { font-size: 13px; margin-left: 4px; color: var(--text-muted); font-family: var(--sa-mono); }
.sa-small { font-size: 12px; }
.sa-eyebrow { font: 700 11px var(--sa-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.sa-lead { color: var(--text-muted); font-size: 14px; margin: 4px 0 0; }
.sa-stack { display: grid; gap: 16px; }
.sa-card { background: var(--surface); border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; padding: 16px; display: grid; gap: 8px; }
.sa-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sa-card-head h2 { margin: 0; }

.sa-bar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 8px 0; background: var(--bg); }
.sa-title { flex: 1; font-weight: 700; font-size: 15px; }
.sa-icon { width: 44px; height: 44px; display: grid; place-items: center; background: transparent; color: var(--text); border-radius: var(--radius-md) !important; cursor: pointer; }
.sa-icon:disabled { opacity: 0; pointer-events: none; }
.sa-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 4px; }
.sa-steps i { height: 4px; border-radius: var(--radius-pill) !important; background: var(--raise); }
.sa-steps i.done, .sa-steps i.cur { background: var(--accent); }
.sa-steps i.cur { opacity: .55; }
.sa-step-label { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; }

.sa-foot { position: sticky; bottom: 0; z-index: 5; display: grid; gap: 4px; padding: 16px 0; margin-top: 8px; background: var(--bg); border-top: 1px solid var(--border) !important; border-radius: 0 !important; }
.sa-block { width: 100%; min-height: 48px; justify-content: center; }
.sa-ghost { background: transparent !important; color: var(--text-muted) !important; min-height: 44px; }
.sa-link { background: none; color: var(--accent-hover); font-weight: 600; font-size: 13px; cursor: pointer; padding: 8px 0; min-height: 44px; }

.sa-callout { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: var(--radius-md) !important; background: var(--surface-2); font-size: 13px; text-align: left; margin: 0; }
.sa-callout.warn { background: var(--warning-bg); }
.sa-callout.ok { background: var(--success-bg); }
.sa-callout .ic { flex: none; width: 20px; height: 20px; border-radius: var(--radius-pill) !important; display: grid; place-items: center; font: 700 12px var(--sa-mono); background: var(--above); color: var(--on-accent); }
.sa-callout.ok .ic { background: var(--good); }
.sa-callout .ic.sand { background: var(--sand); }

/* Abertura */
.sa-timeline { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; text-align: center; font-size: 10px; color: var(--text-muted); }
.sa-timeline span::before { content: ""; display: block; height: 4px; border-radius: var(--radius-pill) !important; background: var(--raise); margin-bottom: 8px; }
.sa-need { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sa-need div { background: var(--surface-2); border-radius: var(--radius-md) !important; padding: 16px 8px 8px; text-align: center; font-size: 12px; color: var(--sand); }
.sa-need svg, .sa-ptips svg { fill: none; stroke: var(--accent-hover); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sa-need svg { width: 32px; height: 32px; display: block; margin: 0 auto 8px; }
.sa-tips { display: grid; gap: 8px; }
.sa-tips div { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; font-size: 13px; }
.sa-tips b.k { width: 28px; height: 28px; border-radius: var(--radius-md) !important; background: var(--accent-soft); color: var(--accent-hover); display: grid; place-items: center; font-size: 12px; }

/* Saúde */
.sa-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sa-goal { min-height: 64px; padding: 12px; text-align: left; background: var(--surface-2); color: var(--text); border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; cursor: pointer; font-size: 14px; }
.sa-goal[aria-pressed="true"] { border-color: var(--accent) !important; background: var(--accent-soft); }
.sa-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sa-chip { min-height: 36px; padding: 6px 12px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border) !important; border-radius: var(--radius-pill) !important; font-size: 12px; font-weight: 600; cursor: pointer; }
.sa-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent) !important; color: var(--on-accent); }
.sa-yn { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border) !important; border-radius: 0 !important; font-size: 14px; }
.sa-yn:first-child { border-top: 0 !important; padding-top: 0; }
.sa-extra { grid-column: 1 / -1; }
.sa-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: var(--radius-pill) !important; }
.sa-seg button { min-width: 52px; min-height: 36px; padding: 6px 12px; background: transparent; color: var(--text-muted); border-radius: var(--radius-pill) !important; font-size: 13px; font-weight: 600; cursor: pointer; }
.sa-seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.sa-seg.full { display: flex; }
.sa-seg.full button { flex: 1; }

/* Número grande + régua */
.sa-big { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 8px; }
.sa-pm { width: 52px; height: 52px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; font: 400 26px var(--sa-mono); cursor: pointer; }
.sa-bignum { display: flex; justify-content: center; align-items: baseline; margin: 0; }
.sa-bignum input { width: 5.2ch; padding: 0; background: transparent; color: var(--text); text-align: center; font-size: 48px; font-weight: 700; line-height: 1; border-bottom: 1px dashed transparent !important; border-radius: 0 !important; }
.sa-bignum input:focus { outline: 0; border-bottom-color: var(--accent) !important; }
.sa-bignum.md input { font-size: 40px; width: 5ch; }
.sa-ruler { position: relative; height: 60px; margin-top: 8px; overflow: hidden; touch-action: none; cursor: grab; user-select: none; border-radius: 0 !important;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.sa-ruler:active { cursor: grabbing; }
.sa-ruler svg { width: 100%; height: 60px; display: block; }
.sa-ruler line { stroke: var(--text-faint); }
.sa-ruler line.mid { stroke: var(--text-muted); }
.sa-ruler line.maj { stroke: var(--sand); stroke-width: 1.5; }
.sa-ruler line.last { stroke: var(--above); stroke-width: 2; stroke-dasharray: 3 2; }
.sa-ruler text { fill: var(--text-muted); font: 11px var(--sa-mono); }
.sa-ruler text.last { fill: var(--above); font-size: 9px; }
.sa-caret { position: absolute; left: 50%; top: 0; bottom: 14px; width: 3px; margin-left: -1.5px; background: var(--accent); border-radius: 2px !important; pointer-events: none; }
.sa-delta { text-align: center; font-size: 12px; font-weight: 600; min-height: 18px; color: var(--text-muted); }
.sa-delta .sa-callout { margin-top: 8px; font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; }
.sa-pill { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill) !important; background: var(--surface-2); }
.sa-pill.good { background: var(--success-bg); color: var(--good); }

.sa-toggle { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.sa-sw { position: relative; width: 46px; height: 28px; border-radius: var(--radius-pill) !important; background: var(--raise); }
.sa-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: var(--radius-pill) !important; background: var(--text); transition: transform .15s; }
.sa-sw[aria-checked="true"] { background: var(--accent); }
.sa-sw[aria-checked="true"]::after { transform: translateX(18px); background: var(--on-accent); }
.sa-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sa-mini label { display: grid; gap: 2px; margin: 0; padding: 8px; background: var(--surface-2); border-radius: var(--radius-md) !important; font-size: 12px; color: var(--text-muted); }
.sa-mini label > span { display: flex; align-items: baseline; gap: 4px; }
.sa-mini input { width: 100%; padding: 0; background: transparent; color: var(--text); font-size: 20px; font-weight: 700; }
.sa-mini input:focus { outline: 0; }

/* Medidas */
/* O boneco anatômico tem frente e costas lado a lado: precisa da largura do card
   para a região da medida aparecer. */
.sa-mgrid { display: grid; gap: 12px; }
.sa-body .muscle-body-map { width: 100%; }
.sa-howto { display: grid; gap: 8px; }
.sa-howto h2 { font-size: 22px; margin: 0; }
.sa-howto p { font-size: 13px; color: var(--sand); margin: 0; }
.sa-howto ul { padding: 0; margin: 0; list-style: none; display: grid; gap: 4px; font-size: 12px; color: var(--text-muted); }
.sa-howto li::before { content: "· "; color: var(--accent-hover); font-weight: 700; }
.sa-tag { justify-self: start; padding: 2px 8px; border-radius: var(--radius-pill) !important; background: var(--accent-soft); color: var(--accent-hover); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sa-tag.opt { background: var(--surface-2); color: var(--text-muted); }
.sa-group-t { display: flex; justify-content: space-between; align-items: center; min-height: 32px; }
.sa-mlist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sa-mitem { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; padding: 8px; background: var(--surface-2); color: var(--text); border: 1px solid transparent !important; border-radius: var(--radius-md) !important; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
.sa-mitem .v { font-weight: 700; color: var(--text-muted); }
.sa-mitem.done .v { color: var(--good); }
.sa-mitem.skip .v { color: var(--text-faint); }
.sa-mitem.cur { border-color: var(--accent) !important; }

/* Fotos */
.sa-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sa-pslot { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4.6; margin: 0; overflow: hidden; cursor: pointer; background: var(--surface-2); border: 1px dashed var(--border) !important; border-radius: var(--radius-md) !important; }
.sa-pslot input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sa-pslot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sa-pslot .ghost { position: absolute; inset: 8% 14% 14%; width: 72%; height: 78%; pointer-events: none; }
.sa-pslot .ghost path, .sa-pslot .ghost circle { fill: none; stroke: var(--sand); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: .7; }
.sa-pslot.has { border-style: solid !important; border-color: var(--good) !important; }
.sa-pslot.has .ghost path, .sa-pslot.has .ghost circle { stroke: var(--on-accent); opacity: .55; }
.sa-pslot .lbl { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 4px; text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--sidebar-text); background: var(--topbar-bg); border-radius: var(--radius-md) !important; opacity: .85; pointer-events: none; }
.sa-pslot .plus { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 22px; border-radius: var(--radius-pill) !important; pointer-events: none; }
.sa-pslot.has .plus { display: none; }
.sa-ptips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 12px; color: var(--sand); }
.sa-ptips span { display: flex; gap: 8px; align-items: center; }
.sa-ptips svg { width: 18px; height: 18px; flex: none; }

/* Como está */
.sa-scale { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--border) !important; border-radius: 0 !important; }
.sa-scale:first-child { border-top: 0 !important; padding-top: 0; }
.sa-scale .top { display: flex; justify-content: space-between; align-items: baseline; }
.sa-scale .top .num { font-size: 22px; }
.sa-scale .ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-faint); }
.sa-dots10 { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.sa-dots10 button { height: 36px; padding: 0; background: var(--surface-2); color: var(--text-faint); font-size: 12px; font-weight: 700; border-radius: var(--radius-md) !important; cursor: pointer; }
.sa-dots10 button.fill { color: var(--on-accent); }

/* Resultado */
.sa-hero { text-align: center; padding: 8px 0; }
.sa-seal { display: inline-flex; padding: 4px 12px; border-radius: var(--radius-pill) !important; background: var(--accent-soft); color: var(--accent-hover); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sa-hero h1 { margin-top: 8px; }
.sa-kpi { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sa-kpi .num { font-size: 32px; font-weight: 700; line-height: 1; }
.sa-kpi .num.xl { font-size: 46px; }
.sa-kpi .unit { font-size: 18px; }
.sa-d { padding: 2px 8px; border-radius: var(--radius-pill) !important; background: var(--surface-2); font-size: 13px; font-weight: 700; }
.sa-d.good { background: var(--success-bg); color: var(--good); }
.sa-d.bad { background: var(--accent-soft); color: var(--accent-hover); }
.sa-zbar { position: relative; margin: 32px 0 48px; }
.sa-zbar.short { margin: 16px 0 8px; }
.sa-zbar .segs { display: flex; height: 12px; gap: 2px; overflow: hidden; border-radius: var(--radius-pill) !important; }
.sa-zbar .segs i { display: block; height: 100%; border-radius: 0 !important; }
.sa-zbar .zl { display: flex; margin-top: 8px; font-size: 10px; color: var(--text-muted); }
.sa-zbar .zl span { text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sa-zbar .mk { position: absolute; top: 6px; transform: translate(-50%, -50%); pointer-events: none; }
.sa-zbar .mk.main { z-index: 3; width: 20px; height: 20px; background: var(--text); border: 3px solid var(--bg) !important; border-radius: var(--radius-pill) !important; outline: 2px solid var(--text); }
.sa-zbar .mk.main::after { content: attr(data-l); position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font: 700 12px var(--sa-mono); color: var(--text); white-space: nowrap; }
.sa-zbar .mk.prev { z-index: 2; width: 14px; height: 14px; background: var(--bg); border: 3px solid var(--text-muted) !important; border-radius: var(--radius-pill) !important; }
.sa-zbar .mk.oth { top: 26px; width: 22px; height: 18px; transform: translate(-50%, 0); background: var(--raise); color: var(--text); font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; border-radius: var(--radius-sm) !important; }
.sa-zbar .mk.oth.lvl2 { top: 48px; }
.sa-zbar .mk.oth::before { content: ""; position: absolute; left: 50%; top: -8px; height: 8px; border-left: 1px solid var(--text-muted) !important; border-radius: 0 !important; }
.sa-srcs { display: grid; gap: 8px; font-size: 12px; }
.sa-srcs > div { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; }
.sa-srcs .k { width: 22px; height: 18px; background: var(--raise); font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; border-radius: var(--radius-sm) !important; }
.sa-srcs .k.main { background: var(--text); color: var(--bg); }
.sa-srcs .k.prev { background: transparent; border: 2px dashed var(--text-muted) !important; }
.sa-srcs .v { font-weight: 700; }
.sa-split { display: flex; height: 36px; overflow: hidden; border-radius: var(--radius-md) !important; font-size: 12px; font-weight: 700; }
.sa-split div { display: flex; align-items: center; padding: 0 8px; white-space: nowrap; border-radius: 0 !important; color: var(--topbar-bg); }
.sa-split .lean { background: var(--good); }
.sa-split .fat { background: var(--above); justify-content: flex-end; }
.sa-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sa-minikpi .num { font-size: 26px; font-weight: 700; }
.sa-minikpi .num.md { font-size: 20px; }
.sa-mrow { display: grid; grid-template-columns: 96px 1fr 96px; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border) !important; border-radius: 0 !important; font-size: 13px; }
.sa-mrow:first-of-type { border-top: 0 !important; }
.sa-mrow .vals { font-size: 12px; color: var(--text-muted); text-align: right; }
.sa-mrow .vals b { color: var(--text); }
.sa-mrow .dv { position: relative; height: 10px; }
.sa-mrow .dv::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; border-left: 1px solid var(--border) !important; border-radius: 0 !important; }
.sa-mrow .dv i { position: absolute; top: 0; height: 10px; border-radius: 3px !important; }
.sa-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sa-cmp div { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-md) !important; }
.sa-cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sa-cmp span { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; font-size: 11px; font-weight: 700; color: var(--sidebar-text); background: var(--topbar-bg); border-radius: var(--radius-sm) !important; opacity: .85; }
.sa-sees { display: grid; gap: 8px; font-size: 13px; }
.sa-sees div { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.sa-sees div::before { content: "→"; color: var(--accent-hover); font-weight: 700; }

/* Selo "Autoavaliação" no histórico de avaliações. */
.sa-origin { margin-left: 8px; font-size: .75rem; }

/* Estimativa pela foto (BETA): selo, consentimento e a faixa "IA" na barra de gordura. */
.sa-beta { margin-left: 4px; padding: 2px 6px; border-radius: var(--radius-sm) !important; background: var(--above); color: var(--on-accent); font-size: 9px; font-weight: 700; letter-spacing: .08em; vertical-align: 2px; }
.sa-toggle:disabled { opacity: .6; cursor: not-allowed; }
.sa-consent { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; margin: 0; padding: 12px; background: var(--surface-2); border-radius: var(--radius-md) !important; font-size: 13px; cursor: pointer; }
.sa-consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); }
.sa-zbar .mk.range { top: 0; height: 12px; transform: none; z-index: 2; background: var(--warning-bg); border: 1px solid var(--above) !important; border-radius: var(--radius-pill) !important; }

/* Comentários de uma avaliação. */
.asc { display: grid; gap: 8px; }
.asc h2 { margin: 0; }
.asc-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.asc-list li { padding: 8px 12px; background: var(--surface-2); border-radius: var(--radius-md) !important; }
.asc-list p { margin: 4px 0 0; white-space: pre-wrap; }
.asc-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.asc-actions { display: flex; justify-content: flex-end; }

@media (max-width: 380px) {
    .sa-bignum input { font-size: 40px; }
    .sa-mrow { grid-template-columns: 84px 1fr 88px; }
}

/* ===== Dieta: montar e ver (PROMPT 7) =====
   Celular primeiro. Macros sempre nas mesmas cores: P terracota, C areia escura, G verde. */
.macro-dot { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: var(--radius-pill) !important; vertical-align: 1px; }
.is-protein { background: var(--accent); }
.is-carb { background: var(--above); }
.is-fat { background: var(--good); }
.macro-bar { display: flex; height: 8px; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-pill) !important; }
.macro-bar i { display: block; height: 100%; border-radius: 0 !important; }

.food-swatch { flex: 0 0 auto; width: 24px; height: 24px; background-color: var(--sand); border: 1px solid var(--border) !important; border-radius: var(--radius-pill) !important; }
.food-estimate { margin-left: 4px; color: var(--above); font-weight: 700; cursor: help; }
.food-source { margin-left: 8px; padding: 0 8px; font: 700 10px/18px "JetBrains Mono", monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border) !important; border-radius: var(--radius-pill) !important; white-space: nowrap; }
.food-source.is-new { color: var(--accent); border-color: var(--accent) !important; }

.diet-builder { display: grid; gap: 16px; }
.diet-builder .chip-btn, .diet-view .chip-btn, .diet-sheet .chip-btn { min-height: 44px; padding: 0 16px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row.is-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.chip-row.is-scroll > * { flex: 0 0 auto; }

/* Faixa de totais: fica no topo enquanto a lista rola, sem cobrir os campos. */
.diet-totals-strip { position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: center; padding: 8px 0; background: var(--bg); border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; }
.diet-totals-kcal { font-size: 22px; font-weight: 700; }
.diet-totals-macros { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--text-muted); }
.diet-totals-macros b { color: var(--text); }
.diet-totals-strip .macro-bar { grid-column: 1 / -1; }

.diet-name-field { margin: 0; }
.diet-meal-card { display: grid; gap: 8px; cursor: pointer; border: 1px solid var(--border) !important; }
.diet-meal-card.is-active { border-color: var(--accent) !important; }
.diet-meal-card-head { display: grid; grid-template-columns: minmax(0, 1fr) 84px 44px; gap: 8px; align-items: center; }
.diet-meal-card-head .builder-icon-btn { width: 44px; height: 44px; flex-basis: 44px; }
.diet-meal-name { padding-left: 12px; padding-right: 12px; font-weight: 700; }
/* O relógio nativo come metade do campo no celular; tocar no campo já abre o seletor. */
.diet-meal-time { padding-right: 8px; }
.diet-meal-time::-webkit-calendar-picker-indicator { display: none; }
.diet-name-chips .chip-btn { display: inline-flex; gap: 8px; align-items: center; }
.diet-name-chips .mono { font-size: 12px; opacity: .75; }
.diet-meal-sum { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--text-muted); }
.diet-meal-sum b { color: var(--text); }
.diet-on-table { color: var(--accent); background: var(--accent-soft); border-radius: var(--radius-pill) !important; font-size: 12px; }
.diet-meal-notes { margin: 0; }

.diet-items, .diet-detail-items, .diet-mesa-legend, .diet-other-meals ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.diet-item { background: var(--surface-2); border-radius: var(--radius-md) !important; }
.diet-item.is-new { animation: diet-item-in .5s ease-out; }
@keyframes diet-item-in { from { background: var(--accent-soft); } to { background: var(--surface-2); } }
.diet-item-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; min-height: 56px; padding: 8px 16px; color: var(--text); text-align: left; background: transparent !important; }
.diet-item-text { display: grid; min-width: 0; }
.diet-item-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diet-item-measure { font-size: 13px; color: var(--text-muted); }
.diet-item-kcal { font-weight: 700; }
.diet-item .diet-item-editor { display: grid; gap: 16px; margin: 0; padding: 0 16px 16px; background: transparent; }
.diet-item-field { display: grid; gap: 8px; }
.diet-item-label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.diet-qty { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 8px; align-items: center; }
.diet-qty-btn { height: 48px; font-size: 24px; font-weight: 700; color: var(--text); background: var(--raise) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; }
.diet-qty-value { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0; }
.diet-qty-value input { width: 80px; text-align: center; font-size: 20px; font-weight: 700; }
.diet-qty-value span { color: var(--text-muted); font-size: 14px; }
.diet-item-equals { margin: 0; font-size: 13px; color: var(--text-muted); }
.diet-item-equals b { color: var(--text); }
.diet-add-item { justify-self: start; border-style: dashed !important; }
.diet-sources { font-size: 12px; }

/* Busca de alimento: folha de baixo no celular, janela no computador. */
.diet-sheet-backdrop { position: fixed; inset: 0; z-index: 1250; background: var(--bg); opacity: .72; border-radius: 0 !important; }
.diet-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1251; display: flex; flex-direction: column; max-height: 88vh; background: var(--surface); border-top: 1px solid var(--border) !important; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; padding-bottom: env(safe-area-inset-bottom, 0px); animation: diet-sheet-in .22s ease-out; }
@keyframes diet-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.food-search-head { display: grid; gap: 8px; padding: 16px 16px 8px; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; }
.food-search-head p { margin: 0; font-size: 13px; }
.food-search-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.food-search-top input { min-height: 44px; }
.food-search-results { overflow-y: auto; padding: 8px 16px 16px; display: grid; gap: 8px; align-content: start; }
.food-search-group { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.food-result { display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; gap: 8px; align-items: center; width: 100%; min-height: 56px; padding: 8px; color: var(--text); text-align: left; background: transparent !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; }
.food-result:hover { background: var(--surface-2) !important; }
.food-result-text { display: grid; gap: 4px; min-width: 0; }
.food-result-name { font-weight: 600; }
.food-result-measure { font-size: 13px; color: var(--text-muted); }
.food-result-measure strong { color: var(--text); }
.food-search-empty { display: grid; gap: 8px; justify-items: center; padding: 24px 0; text-align: center; }
.food-search-more { justify-self: center; }
.food-search-categories .chip-btn { display: inline-flex; gap: 8px; align-items: center; }
.food-search-categories .mono { opacity: .75; }
/* A miniatura da mesa sobe para o topo durante a busca: a folha começa abaixo dela. */
.food-search-sheet { max-height: calc(100vh - 168px); }

/* Mesa 3D: painel lateral no computador; miniatura flutuante e folha no celular. */
.diet-mesa-side { display: none; }
.diet-mesa-host { position: relative; overflow: hidden; background: var(--bg); border-radius: var(--radius-lg) !important; }
.diet-mesa-main { height: 320px; }
.diet-mesa-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: flex-start; }
.diet-mesa-head h2 { margin: 0; font-size: 18px; }
.diet-mesa-head p { margin: 0; font-size: 13px; }
.eyebrow { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .1em; }
.diet-mesa-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.seg { display: inline-flex; padding: 2px; background: var(--surface-2); border: 1px solid var(--border) !important; border-radius: var(--radius-pill) !important; }
.seg button { min-height: 40px; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: transparent !important; border-radius: var(--radius-pill) !important; }
.seg button[aria-pressed="true"] { color: var(--on-accent); background: var(--accent) !important; }
.diet-plate-check { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--text-muted); }
.diet-plate-check .is-ok { color: var(--good); }
.diet-ring { display: inline-block; width: 12px; height: 12px; margin-right: 4px; border: 1px solid var(--text-faint) !important; border-radius: var(--radius-pill) !important; vertical-align: -1px; }
.diet-mesa-legend li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.diet-mesa-fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: grid; gap: 2px; width: 136px; padding: 8px; color: var(--text); text-align: center; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; transition: top .2s, bottom .2s; }
.diet-mesa-fab.is-raised { z-index: 1252; top: 16px; bottom: auto; }
/* Treino em andamento: a barra dele fica embaixo; a miniatura sobe para não cobrir. */
body:has(.active-workout-bar) .diet-mesa-fab:not(.is-raised) { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.diet-mesa-fab-host { height: 88px; pointer-events: none; }
.diet-mesa-fab b { font-size: 13px; }
.diet-mesa-fab small { overflow: hidden; color: var(--text-muted); white-space: nowrap; text-overflow: ellipsis; }
.diet-mesa-sheet { display: grid; gap: 16px; padding: 16px; overflow-y: auto; }
.diet-mesa-sheet .diet-mesa-main { height: 340px; }

/* Canvas e etiquetas desenhados pelo mesa3d.js. */
.c3 { position: absolute; inset: 0; touch-action: none; }
.c3 canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; }
.c3 canvas:active { cursor: grabbing; }
.c3 .lbls { position: absolute; inset: 0; pointer-events: none; }
.c3 .pill { position: absolute; display: flex; gap: 8px; padding: 4px 12px; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; font: 700 12px "Inter", sans-serif; color: var(--sidebar-text); background: var(--topbar-bg); white-space: nowrap; opacity: .9; border-radius: var(--radius-pill) !important; }
.c3 .pill span { font: 600 11px "JetBrains Mono", monospace; color: var(--sand); }
.c3 .hint { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; font: 600 11px "JetBrains Mono", monospace; color: var(--sidebar-text); background: var(--topbar-bg); opacity: .8; pointer-events: none; border-radius: var(--radius-md) !important; }
.c3 .fail { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; font-size: 13px; color: var(--text-muted); }
.diet-mesa-fab .c3 .lbls, .diet-mesa-fab .c3 .hint { display: none; }

/* Ver dieta */
.diet-view { display: grid; gap: 16px; padding-bottom: 136px; }
.diet-view-head h2 { margin: 0; }
.diet-view-head p { margin: 4px 0 0; }
.diet-today { display: grid; gap: 8px; }
.diet-today-head { display: flex; justify-content: space-between; align-items: baseline; }
.diet-today-kcal { margin: 0; font-size: 15px; }
.diet-today-kcal b { font-size: 28px; }
.diet-today-bars { display: grid; gap: 8px; }
.diet-today-bar { display: grid; grid-template-columns: 16px minmax(0, 1fr) 72px; gap: 8px; align-items: center; font-size: 13px; }
.diet-today-bar > .mono { text-align: right; }
.diet-progress { display: block; height: 8px; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-pill) !important; }
.diet-progress i { display: block; height: 100%; border-radius: 0 !important; }
.diet-meal-strip { padding-bottom: 4px; }
.diet-meal-tab { display: grid; gap: 2px; min-width: 120px; min-height: 64px; padding: 8px 16px; text-align: left; color: var(--text); background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; }
.diet-meal-tab[aria-selected="true"] { border-color: var(--accent) !important; }
.diet-meal-tab-name { font-weight: 700; white-space: nowrap; }
.diet-meal-tab-state { font-size: 12px; color: var(--text-muted); }
.diet-meal-tab.is-done .diet-meal-tab-state, .diet-state-text.is-done { color: var(--good); }
.diet-meal-tab.is-now .diet-meal-tab-state, .diet-state-text.is-now { color: var(--accent); font-weight: 700; }
.diet-state { border-radius: var(--radius-pill) !important; font-size: 12px; white-space: nowrap; }
.diet-state.is-done { color: var(--success-text); background: var(--success-bg); }
.diet-state.is-now { color: var(--on-accent); background: var(--accent); }
.diet-view-body { display: grid; gap: 16px; }
.diet-view-main { display: grid; gap: 16px; align-content: start; }
.diet-meal-detail { display: grid; gap: 16px; }
.diet-meal-detail-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.diet-meal-detail-head h3 { margin: 0; }
.diet-meal-detail-head p { margin: 4px 0 0; font-size: 13px; }
.diet-detail-items li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; }
.diet-detail-text { display: grid; gap: 2px; min-width: 0; }
.diet-detail-text strong { font-size: 16px; }
.diet-detail-text .muted { font-size: 13px; }
.diet-detail-numbers { display: grid; justify-items: end; font-size: 13px; }
.diet-meal-observation { margin: 0; padding: 8px 16px; font-size: 14px; background: var(--surface-2); border-left: 1px solid var(--accent) !important; border-radius: 0 var(--radius-md) var(--radius-md) 0 !important; }
.diet-done-at { align-self: center; font-weight: 600; color: var(--good); }
.diet-other-meals { display: grid; gap: 8px; }
.diet-other-meals h3 { margin: 0; font-size: 15px; }
.diet-other-meals button { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; width: 100%; min-height: 48px; padding: 0 8px; color: var(--text); text-align: left; background: transparent !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; font-size: 14px; }
.diet-state-text { font-size: 12px; color: var(--text-muted); }

/* Celular: o nome da refeição ganha a linha inteira; o horário desce para baixo dele. */
@media (max-width: 479px) {
    .diet-meal-card-head { grid-template-columns: minmax(0, 1fr) 44px; }
    .diet-meal-card-head .diet-meal-name { grid-row: 1; grid-column: 1; }
    .diet-meal-card-head .builder-icon-btn { grid-row: 1; grid-column: 2; }
    .diet-meal-card-head .diet-meal-time { grid-row: 2; grid-column: 1; width: 96px; }
}

@media (min-width: 1000px) {
    .diet-builder, .diet-view-body { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
    .diet-mesa-side { position: sticky; top: 16px; display: grid; gap: 16px; padding: 16px; background: var(--surface); border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; }
    .diet-mesa-fab { display: none; }
    .diet-view { padding-bottom: 0; }
    .diet-sheet { left: 50%; right: auto; bottom: auto; top: 8vh; width: min(640px, 92vw); max-height: 84vh; transform: translateX(-50%); border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; animation: none; }
    .diet-mesa-fab.is-raised { display: none; }
    .food-search-sheet { max-height: 84vh; }
    /* No computador a busca fica à esquerda do painel da mesa, que continua visível para o
       alimento apagado aparecer no prato ao passar o mouse num resultado. */
    .diet-builder ~ .diet-sheet-backdrop { right: 448px; }
    .diet-builder ~ .food-search-sheet { left: auto; right: 464px; width: min(560px, calc(100vw - 720px)); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .diet-item.is-new, .diet-sheet { animation: none; }
    .diet-mesa-fab { transition: none; }
}

/* Ficha do aluno > Histórico: treinos finalizados, 20 por página. */
.workout-history { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.workout-history li { display: grid; gap: 8px; padding: 16px; background: var(--surface-2); border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; }
.workout-history-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.workout-history-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .8rem; color: var(--text-muted); }
.workout-history-stats b { margin-left: 4px; font-size: 1rem; color: var(--text); }
.workout-history-stats .unit { font-size: .7rem; }
.workout-history + .catalog-pager { gap: 4px; }
.workout-history + .catalog-pager .chip-btn { min-width: 44px; min-height: 44px; padding: 0 12px !important; }
.plan-history-title { margin-top: 24px; }

/* Admin > Planos: um cartão por plano, preço por ciclo em JetBrains Mono. */
.billing-plans-title { margin-top: 24px; }
.billing-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 16px; }
.billing-plan-card { display: grid; gap: 8px; align-content: start; padding: 16px; background: var(--surface); border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; }
.billing-plan-card.is-off { opacity: .6; }
.billing-plan-card header { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.billing-plan-card header > div { display: grid; gap: 4px; }
.billing-plan-card p { margin: 0; font-size: .85rem; }
.billing-plan-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.billing-plan-prices div { display: grid; gap: 4px; align-content: space-between; padding: 8px; background: var(--surface-2); border-radius: var(--radius-md) !important; }
.billing-plan-prices dt { font-size: .7rem; font-weight: 400; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.billing-plan-prices dd { margin: 0; font-size: 1rem; color: var(--text); }
.billing-plan-prices .unit { font-size: .6rem; }
.billing-plan-features { display: grid; gap: 4px; margin: 0; padding-left: 16px; font-size: .85rem; }
.billing-plan-card footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border) !important; font-size: .85rem; }

/* Admin > Contas: busca e filtros; no celular um embaixo do outro. */
.users-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 8px; margin: 16px 0 8px; }
.users-filters .form-control { min-height: 48px; }
.users-count { margin: 8px 0; font-size: .85rem; }

/* Termos e Política: página de leitura, largura de texto (~70 caracteres), sem o menu do app. */
.legal-shell { min-height: 100vh; background: var(--bg); color: var(--text); }
.legal-top { border-radius: 0 !important; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border) !important; }
.legal-brand { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 800; letter-spacing: .08em; color: var(--text); text-decoration: none; }
.brand-mark-legal { width: 1.75rem; height: 1.75rem; }
.legal-nav { display: flex; gap: 8px; }
.legal-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; color: var(--text); text-decoration: none; border: 1px solid var(--border) !important; border-radius: var(--radius-pill) !important; }
.legal-nav a.active { color: var(--accent); border-color: var(--accent) !important; }
.legal-doc { max-width: 44rem; margin: 0 auto; padding: 24px 16px 48px; line-height: 1.6; }
.legal-doc h1 { margin: 0 0 8px; font-size: 1.75rem; font-weight: 800; }
.legal-doc h2 { margin: 32px 0 8px; font-size: 1.1rem; font-weight: 800; }
.legal-doc p, .legal-doc li { color: var(--text); }
.legal-doc ul { padding-left: 24px; }
.legal-doc li + li { margin-top: 8px; }
.legal-doc a { color: var(--accent); }
.legal-version { margin-bottom: 24px; color: var(--text-muted); font-size: .85rem; }

/* ===== Financeiro do profissional (PROMPT 9) =====
   Identidade do protótipo de Desempenho: card 16 px, botão e campo 8 px, chip e selo em
   pílula; terracota só na ação principal, no chip ativo e no "recebido"; números em mono;
   separação por linha de 1 px. Celular: abas fixas embaixo e tabelas viram cartões. */
.fin { display: grid; gap: 16px; padding-bottom: 88px; }
.fin-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.fin-top h1 { margin: 4px 0 0; }
.fin-sub { margin: 4px 0 0; }
.fin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fin-eyebrow { display: block; margin-bottom: 8px; font: 500 11px 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.fin-note { margin: 0; font-size: 13px; }
.fin-link { padding: 0; background: none !important; color: var(--accent); font-weight: 600; font-size: 14px; min-height: 40px; }
.fin-empty { padding: 16px 0; margin: 0; }
.fin-up { color: var(--good); }
.fin-danger { color: var(--danger-text) !important; }
.fin-block { width: 100%; }
.fin .btn-sm, .fin-sheet .btn-sm { min-height: 40px; padding: 0 12px; font-size: 13px; }

.fin-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--border) !important; }
.fin-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; background: none !important; color: var(--text-muted); font-weight: 600; border-radius: 0 !important; }
.fin-tab[aria-current="page"] { color: var(--text); }
.fin-tab[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); border-radius: 0 !important; }
.fin-tab .icon { width: 20px; height: 20px; }

.fin-card { display: grid; gap: 16px; padding: 16px; background: var(--surface); border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; min-width: 0; }
.fin-card h2, .fin-section-head h2 { margin: 0; font-size: 18px; }
.fin-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fin-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.fin-section-head small { font-size: 13px; font-weight: 400; margin-left: 8px; }
.fin-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fin-grid3 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.fin-stack { display: grid; gap: 8px; align-content: start; }

.fin-todo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; background: var(--accent-soft); border: 1px solid var(--accent) !important; border-radius: var(--radius-lg) !important; }
.fin-todo > div { display: grid; gap: 4px; }

.fin-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fin-kpi { display: grid; gap: 8px; align-content: start; padding: 16px; background: var(--surface); border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; }
.fin-kpi.is-alert { border-color: var(--danger) !important; }
.fin-kpi .fin-eyebrow { margin: 0; }
.fin-kpi-v { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.1; }
.fin-kpi.is-alert .fin-kpi-v { color: var(--danger-text); }
.fin-kpi-s { font-size: 13px; color: var(--text-muted); }
.fin-prog { display: flex; gap: 2px; height: 8px; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-pill) !important; }
.fin-prog i { display: block; height: 100%; border-radius: 0 !important; }
.fin-rec { background: var(--accent); fill: var(--accent); }
.fin-late { background: var(--sand); fill: var(--sand); }
.fin-due { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); fill: url(#finHatch); }
.fin-minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fin-mini { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 12px 16px; background: var(--surface-2); border-radius: var(--radius-md) !important; font-size: 13px; color: var(--text-muted); }
.fin-mini b { color: var(--text); font-size: 15px; }
.fin-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--text-muted); }
.fin-legend span { display: inline-flex; align-items: center; gap: 8px; }
.fin-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px !important; }

.fin-chart { display: block; width: 100%; height: auto; overflow: visible; }
.fin-chart .fin-grid { stroke: var(--grid); stroke-width: 1; }
.fin-chart .fin-grid.is-dash { stroke-dasharray: 2 4; }
.fin-chart .fin-split { stroke: var(--border); stroke-width: 1; stroke-dasharray: 4 4; }
.fin-chart .fin-axis { fill: var(--text-faint); font: 500 13px 'JetBrains Mono', monospace; }
.fin-chart .fin-axis.is-now { fill: var(--text); font-weight: 700; }
.fin-chart .fin-val { fill: var(--text-muted); font: 600 13px 'JetBrains Mono', monospace; }
.fin-chart .fin-val.is-now { fill: var(--text); font-weight: 700; }
.fin-chart .fin-hatch-bg { fill: var(--accent-soft); }
.fin-chart .fin-hatch-fg { fill: var(--accent); }
.fin-chart .fin-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.fin-chart .fin-dot { fill: var(--accent); }

.fin-rows { display: grid; }
.fin-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 8px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border) !important; }
.fin-row:first-child { border-top: 0 !important; }
.fin-who { display: grid; gap: 2px; min-width: 0; }
.fin-who small, .fin-table small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.fin-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-val { font-weight: 700; white-space: nowrap; }
.fin-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; font-size: 12px; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border) !important; border-radius: var(--radius-pill) !important; white-space: nowrap; }
.fin-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; font-size: 12px; font-weight: 600; border-radius: var(--radius-pill) !important; white-space: nowrap; }
.fin-pill.is-paid { background: var(--success-bg); color: var(--success-text); }
.fin-pill.is-late { background: var(--danger-bg); color: var(--danger-text); }
.fin-pill.is-today { background: var(--warning-bg); color: var(--warning-text); }
.fin-pill.is-open { background: var(--surface-2); color: var(--text-muted); }
.fin-pill.is-ended { background: var(--surface-2); color: var(--text-faint); }

.fin-hbars { display: grid; gap: 12px; }
.fin-hbar { display: grid; gap: 6px; }
.fin-hbar-t { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.fin-hbar-bar { height: 8px; background: var(--accent); border-radius: var(--radius-pill) !important; }

.fin-toolbar { display: grid; gap: 12px; }
.fin-search { max-width: 360px; }
.fin-table-wrap { padding: 8px; overflow-x: auto; }
.fin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fin-table th { padding: 8px; text-align: left; font: 500 11px 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.fin-table td { padding: 12px 8px; border-top: 1px solid var(--border) !important; vertical-align: middle; }
.fin-table .r { text-align: right; }
.fin-table tr.is-selected td { background: var(--accent-soft); }
.fin-table input[type="checkbox"], .fin-ccard input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); }
.fin-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.fin-more { min-width: 40px; }
.fin-cards { display: none; gap: 12px; }
.fin-ccard { display: grid; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; }
.fin-ccard.is-selected { border-color: var(--accent) !important; }
.fin-ccard-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.fin-ccard-h:has(input) { grid-template-columns: auto minmax(0, 1fr) auto; }
.fin-ccard-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fin-ccard .fin-acts { justify-content: flex-start; }
.fin-batch { position: sticky; bottom: 16px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--accent) !important; border-radius: var(--radius-lg) !important; }
.fin-batch > span { flex: 1 1 auto; font-weight: 600; }

.fin-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.fin-plan { display: grid; gap: 12px; align-content: start; padding: 16px; text-align: left; background: var(--surface); border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; color: var(--text); }
.fin-plan-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fin-price { font-size: 24px; font-weight: 700; }
.fin-price small { margin-left: 4px; font-size: 13px; font-weight: 400; color: var(--text-muted); }
.fin-inc { display: flex; flex-wrap: wrap; gap: 6px; }
.fin-plan-meta { display: flex; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border) !important; font-size: 13px; color: var(--text-muted); }
.fin-plan-new { place-items: center; place-content: center; min-height: 160px; background: transparent; border-style: dashed !important; }
.fin-plus { font-size: 28px; color: var(--accent); line-height: 1; }

.fin-steps { display: grid; }
.fin-step { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--border) !important; }
.fin-step:first-child { border-top: 0 !important; padding-top: 0; }
.fin-step.is-off .fin-step-body > :not(.fin-step-hd) { opacity: .5; }
.fin-when { display: grid; align-self: start; justify-items: center; align-content: start; padding: 8px 0; font-weight: 700; font-size: 16px; background: var(--surface-2); border-radius: var(--radius-md) !important; }
.fin-when small { font: 400 11px 'Inter', sans-serif; color: var(--text-muted); }
.fin-step-body { display: grid; gap: 8px; min-width: 0; }
.fin-step-body .fin-link { justify-self: start; }
.fin-step-hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fin-msg { padding: 12px; font-size: 13px; white-space: pre-line; color: var(--text-muted); background: var(--surface-2); border-radius: var(--radius-md) !important; }
.fin-tips { display: grid; gap: 4px; padding-left: 18px; }
.fin-save { display: flex; justify-content: flex-end; }
.fin-num { display: inline-flex; align-items: center; gap: 4px; }
.fin-num input { width: 72px; text-align: right; }
.fin-hour { width: auto; }

.fin-setrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border) !important; font-size: 14px; }
.fin-setrow small, .fin-field small { display: block; font-size: 12px; }
.fin-setrow.is-off { opacity: .6; }
.fin-switch { position: relative; width: 44px; height: 26px; padding: 0; flex: 0 0 auto; background: var(--surface-2); border: 1px solid var(--border) !important; border-radius: var(--radius-pill) !important; }
.fin-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--text-faint); border-radius: var(--radius-pill) !important; transition: transform .15s ease; }
.fin-switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent) !important; }
.fin-switch[aria-checked="true"]::after { transform: translateX(18px); background: var(--on-accent); }
.fin-switch:disabled { opacity: .5; }

.fin-sheet { display: grid; gap: 16px; }
.fin-sheet-foot { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border) !important; }
.fin-foot2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fin-foot2 > :only-child { grid-column: 1 / -1; }
.fin-box { display: grid; gap: 8px; padding: 16px; background: var(--surface-2); border-radius: var(--radius-lg) !important; }
.fin-box-who { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.fin-box-who:has(.mya-avatar) { grid-template-columns: auto minmax(0, 1fr) auto; }
.fin-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.fin-kv-total { padding-top: 8px; border-top: 1px solid var(--border) !important; }
.fin-field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; min-width: 0; }
.fin-field > span { color: var(--text-muted); }
.fin-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.fin-align-end { align-self: end; }
.fin-callout { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; font-size: 14px; background: var(--accent-soft); border-radius: var(--radius-md) !important; }
.fin-callout.is-warn { background: var(--warning-bg); }
.fin-callout-n { display: grid; place-items: center; width: 28px; height: 28px; font-weight: 700; color: var(--on-accent); background: var(--accent); border-radius: var(--radius-pill) !important; }
.fin-pv { display: grid; gap: 8px; padding: 12px; background: var(--surface-2); border-radius: var(--radius-md) !important; }
.fin-bubble { justify-self: start; max-width: 92%; padding: 10px 12px; font-size: 14px; white-space: pre-line; color: var(--text); background: var(--surface); border: 1px solid var(--border) !important; border-radius: 12px 12px 12px 4px !important; }
.fin-notif { display: grid; gap: 2px; padding: 12px; font-size: 13px; background: var(--surface); border-radius: var(--radius-md) !important; }
.fin-mail { font-size: 14px; }
.fin-mail-body { white-space: pre-line; color: var(--text-muted); }
.fin-hist { display: grid; gap: 6px; font-size: 13px; }
.fin-hist > div { display: grid; grid-template-columns: 56px 1fr; gap: 8px; }
.fin-hist .mono { color: var(--text-faint); }

/* Aluno: Perfil > Financeiro */
.fin-stu { display: grid; gap: 16px; max-width: 560px; }
.fin-hero { display: grid; gap: 8px; padding: 24px 16px; text-align: center; justify-items: center; background: var(--surface); border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; }
.fin-amt { font: 700 32px 'JetBrains Mono', monospace; color: var(--text); }
.fin-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; padding: 8px 8px 8px 12px; background: var(--surface-2); border-radius: var(--radius-md) !important; }
.fin-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }

@media (max-width: 960px) {
    .fin-kpis, .fin-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .fin-grid2, .fin-grid3 { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .fin-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border) !important; border-bottom: 0 !important; }
    .fin-tab { flex-direction: column; justify-content: center; gap: 2px; padding: 4px; min-height: 56px; font-size: 11px; }
    .fin-tab[aria-current="page"] { color: var(--accent); }
    .fin-tab[aria-current="page"]::after { top: -5px; bottom: auto; }
    .fin-table-wrap { display: none; }
    .fin-cards { display: grid; }
    .fin-kpi { padding: 12px; }
    .fin-kpi-v { font-size: 20px; }
    .fin-mini { flex-direction: column; gap: 2px; padding: 8px 12px; }
    .fin-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .fin-row > .btn { grid-column: 2 / -1; justify-self: start; }
    .fin-chart .is-odd { display: none; }
    .fin-chart .fin-axis, .fin-chart .fin-val { font-size: 30px; }
    .fin-chart.is-line .fin-axis { font-size: 20px; }
    .fin-batch { bottom: 72px; }
    .fin-search { max-width: none; }
    .fin-step { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
}
.fin-row.fin-row-stu { grid-template-columns: minmax(0, 1fr) auto; }
/* ═══════════ Avaliação presencial por seções (PROMPT 8) ═══════════
   Celular primeiro (375 px): coluna única, rodapé fixo com o teclado próprio. Computador
   (≥ 1100 px): menu de seções à esquerda, cards em 2 colunas, teclado físico. Formas e
   cores pela identidade: campo/botão 8 px, card 16 px, chip em pílula, terracota só no
   que decide; números em JetBrains Mono. */
.pa-shell { --pa-foot: 72px; }
.pa-main { min-width: 0; }
.pa-top { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; margin-bottom: 8px; }
.pa-x { display: grid; place-items: center; width: 44px; height: 44px; color: var(--text); text-decoration: none; font-size: 1.1rem; background: var(--surface-2); border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; }
.pa-top-title { display: grid; min-width: 0; }
.pa-top-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-progress { display: flex; gap: 4px; margin-bottom: 16px; }
.pa-progress i { flex: 1; height: 4px; background: var(--surface-2); border-radius: var(--radius-pill) !important; }
.pa-progress i.done { background: var(--good); }
.pa-progress i.skip { background: var(--text-faint); }
.pa-progress i.cur { background: var(--accent); }
.pa-jump { margin: 0 0 16px; padding: 8px; background: var(--surface); border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; }
.pa-steps { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pa-steps button { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; color: var(--text); text-align: left; background: transparent; border-radius: var(--radius-md) !important; }
.pa-steps button[aria-current="step"] { background: var(--surface-2); border: 1px solid var(--border) !important; }
.pa-steps button.done small { color: var(--good); }

.pa-stack { display: grid; gap: 16px; }
.pa-stack > .admin-card { margin: 0; border-radius: var(--radius-lg) !important; }
.pa-stack h1 { margin: 0 0 4px; font-size: 1.6rem; font-weight: 800; }
.pa-lead { margin: 0; color: var(--text-muted); }
.pa-note { margin: 8px 0 0; font-size: .85rem; color: var(--text-muted); }
.pa-sub { display: block; margin: 16px 0 8px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.pa-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.pa-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: .75rem; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border) !important; border-radius: var(--radius-pill) !important; }
.pa-tag.rec { color: var(--accent); border-color: var(--accent) !important; background: transparent; }
.pa-tag.last { color: var(--sand); }
.pa-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.pa-card-head h2 { margin: 0 !important; }
.pa-good-text { color: var(--good); }
.pa-warn-text { color: var(--above); }
.pa-link { padding: 4px 0; min-height: 32px; color: var(--accent); font-weight: 600; text-decoration: underline; background: transparent; }
.pa-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.pa-span2 { grid-column: span 2; }
.pa-discard { justify-self: center; margin-top: 16px; color: var(--text-muted); }

.pa-who { display: flex; gap: 16px; align-items: flex-start; }
.pa-who h2 { margin: 0 !important; }
.pa-avatar { display: grid; place-items: center; flex: none; width: 48px; height: 48px; font-weight: 800; color: var(--text); background: var(--surface-2); border-radius: var(--radius-pill) !important; }
.pa-secs { padding-top: 4px !important; padding-bottom: 4px !important; }
.pa-secrow { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; cursor: pointer; border-top: 1px solid var(--border) !important; border-radius: 0 !important; }
.pa-secrow:first-child { border-top: 0 !important; }
.pa-secrow span:first-child { display: grid; }
.pa-secrow:not(.on) b { color: var(--text-muted); }
.pa-min { color: var(--text-muted); font-size: .85rem; }
.pa-total { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.pa-big { font-size: 2rem; }
.unit { font-size: .4em; margin-left: 2px; color: var(--text-muted); }
.pa-nf .unit, .pa-live .unit, .pa-sum .unit { font-size: .7rem; }

.pa-switch { position: relative; flex: none; width: 48px; height: 28px; padding: 0; background: var(--surface-2); border: 1px solid var(--border) !important; border-radius: var(--radius-pill) !important; }
.pa-switch i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--text-muted); border-radius: var(--radius-pill) !important; transition: transform .15s ease; }
.pa-switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent) !important; }
.pa-switch[aria-checked="true"] i { transform: translateX(20px); background: var(--on-accent); }
.pa-toggle { display: flex; justify-content: space-between; align-items: center; gap: 16px; }

.pa-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-chips .chip-btn { min-height: 40px; }
.pa-auto { border-style: dashed !important; }
.pa-seg { flex-wrap: wrap; max-width: 100%; }
.pa-seg.full { display: flex; width: 100%; }
.pa-seg.full button { flex: 1; }
.pa-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-dots button { width: 40px; height: 40px; padding: 0; color: var(--text); background: var(--surface-2); border: 1px solid var(--border) !important; border-radius: var(--radius-pill) !important; }
.pa-dots button[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent) !important; }
.pa-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 8px; }
.pa-goal { min-height: 48px; padding: 8px 12px; color: var(--text); text-align: left; background: var(--surface-2); border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; }
.pa-goal[aria-pressed="true"] { border-color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent) !important; }
.pa-q { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--border) !important; border-radius: 0 !important; }
.pa-q:first-of-type { border-top: 0 !important; }
.pa-medrow { display: grid; gap: 4px; margin-top: 8px; font-size: .85rem; color: var(--text-muted); }

.pa-callout { display: flex; gap: 12px; align-items: flex-start; padding: 12px; background: var(--surface-2); border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; }
.pa-callout.ok .pa-ic { background: var(--good); }
.pa-callout.warn { border-color: var(--above) !important; }
.pa-callout.warn .pa-ic { background: var(--above); }
.pa-callout.bad { border-color: var(--accent) !important; }
.pa-callout.bad .pa-ic { background: var(--accent); }
.pa-ic { display: grid; place-items: center; flex: none; width: 24px; height: 24px; font-weight: 800; color: var(--bg); background: var(--sand); border-radius: var(--radius-pill) !important; }
.pa-lib { display: flex; gap: 12px; align-items: center; }
.pa-lib.liberado { border-color: var(--good) !important; }
.pa-lib.liberado .pa-ic { background: var(--good); }
.pa-lib.atencao { border-color: var(--above) !important; }
.pa-lib.atencao .pa-ic { background: var(--above); }
.pa-lib.bloqueio { border-color: var(--accent) !important; }
.pa-lib.bloqueio .pa-ic { background: var(--accent); }
.pa-alerts { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.pa-alerts li { padding: 8px 12px; font-size: .9rem; background: var(--surface-2); border: 1px solid var(--border) !important; border-left-color: var(--above) !important; border-radius: var(--radius-md) !important; }

.pa-body .shape { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
.pa-painmap { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.pa-pt { cursor: pointer; }
.pa-pt .hit { fill: transparent; }
.pa-pt .dot { fill: var(--text-faint); }
.pa-pt.dor .dot { fill: var(--accent); }
.pa-pt.antiga .dot { fill: var(--above); }
.pa-pain-chip { padding: 4px 10px; font-size: .8rem; border-radius: var(--radius-pill) !important; }
.pa-pain-chip.dor { color: var(--on-accent); background: var(--accent); }
.pa-pain-chip.antiga { color: var(--bg); background: var(--above); }
.pa-legend { display: flex; gap: 16px; margin-top: 8px; font-size: .8rem; color: var(--text-muted); }
.pa-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: var(--radius-pill) !important; }
.pa-legend i.dor { background: var(--accent); }
.pa-legend i.antiga { background: var(--above); }
.pa-eva { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--border) !important; border-radius: 0 !important; }
.pa-eva-top, .pa-ends { display: flex; justify-content: space-between; gap: 8px; }
.pa-ends { font-size: .75rem; color: var(--text-muted); }

/* Campo numérico e teclado próprio */
.pa-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pa-fcell { display: grid; gap: 4px; font-size: .85rem; color: var(--text-muted); }
.pa-frow { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; border-top: 1px solid var(--border) !important; border-radius: 0 !important; }
.pa-frow:first-of-type { border-top: 0 !important; }
.pa-lbl { display: grid; min-width: 0; }
.pa-lbl small { font-size: .75rem; }
.pa-nf { position: relative; display: inline-flex; justify-content: flex-end; align-items: baseline; gap: 2px; min-width: 104px; min-height: 48px; padding: 8px 12px; color: var(--text); font-size: 1.1rem; background: var(--field-bg); border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; }
.pa-nf.sm { min-width: 72px; min-height: 44px; font-size: 1rem; }
.pa-nf.is-active { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-soft) !important; }
.pa-nf.static { background: var(--surface-2); }
.pa-nf.warn { border-color: var(--above) !important; }
.pa-caret { width: 2px; height: 1.1em; align-self: center; background: var(--accent); animation: pa-blink 1s steps(2) infinite; }
@keyframes pa-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pa-caret { animation: none; } }
.pa-warn { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 18px; height: 18px; font-size: .7rem; font-weight: 800; color: var(--bg); background: var(--above); border-radius: var(--radius-pill) !important; }
.pa-last { display: block; text-align: right; color: var(--text-faint); font-size: .75rem; }

.pa-foot { position: sticky; bottom: 0; z-index: 30; margin: 16px -16px 0; background: var(--bg); border-top: 1px solid var(--border) !important; border-radius: 0 !important; }
.pa-foot-bar { display: flex; gap: 8px; max-width: 760px; margin: 0 auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.pa-foot-bar .btn { min-height: 48px; }
.pa-foot-bar .btn-primary { flex: 1; }
.pa-back { flex: none; width: 48px; padding: 0; font-size: 1.4rem; }
.pa-pad { max-width: 760px; margin: 0 auto; padding: 8px 16px 0; }
.pa-pad-head { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0 8px; font-size: .85rem; }
.pa-pad-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pa-pad-keys button, .pa-pad-actions button { min-height: 48px; font-size: 1.25rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; }
.pa-pad-actions { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 6px; margin-top: 6px; }
.pa-pad-actions button { font-size: .95rem; }
.pa-pad-actions .btn-primary { color: var(--on-accent); background: var(--accent); border-color: var(--accent) !important; }
.pa-kbd-hint { max-width: 1180px; margin: 0 auto; padding: 8px 16px 0; font-size: .85rem; }

.pa-cls { display: inline-flex; padding: 2px 10px; font-size: .75rem; font-weight: 700; border-radius: var(--radius-pill) !important; }
.pa-cls.g { color: var(--bg); background: var(--good); }
.pa-cls.a { color: var(--bg); background: var(--above); }
.pa-cls.r { color: var(--on-accent); background: var(--accent); }
.pa-live { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.pa-live > div { display: grid; gap: 2px; padding: 8px; background: var(--surface-2); border-radius: var(--radius-md) !important; }
.pa-live small { font-size: .7rem; color: var(--text-muted); }
.pa-live b { font-size: 1.3rem; }
.pa-delta { font-size: .75rem; font-weight: 700; }
.pa-delta.good { color: var(--good); }
.pa-delta.bad { color: var(--above); }

/* Composição */
.pa-plist { display: grid; gap: 8px; }
.pa-prot { display: grid; gap: 4px; width: 100%; padding: 12px; color: var(--text); text-align: left; background: var(--surface-2); border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; }
.pa-prot.sel { border-color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent) !important; }
.pa-prot.out { opacity: .55; }
.pa-pub { font-size: .85rem; color: var(--text-muted); }
.pa-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .8rem; color: var(--text-muted); }
.pa-where { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; margin-bottom: 12px; }
.pa-site-name { margin: 4px 0 !important; font-size: 1.25rem !important; }
.pa-sfdot { fill: var(--text-faint); }
.pa-sfdot.back { stroke: var(--text-muted); stroke-dasharray: 2 2; fill: transparent; }
.pa-sfdot.done { fill: var(--good); }
.pa-sfdot.cur { fill: var(--accent); }
.pa-sftab { width: 100%; border-collapse: collapse; font-size: .85rem; }
.pa-sftab th { padding: 4px; font-weight: 600; text-align: left; color: var(--text-muted); }
.pa-sftab td { padding: 4px; vertical-align: middle; border-top: 1px solid var(--border); }
.pa-sftab tr.act td:first-child { color: var(--accent); font-weight: 700; }
.pa-sftab .pa-nf.sm { min-width: 0; width: 100%; }
.pa-med { font-weight: 700; text-align: right; }

/* Medidas */
.pa-measures { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: start; }
.pa-sticky { position: sticky; top: 64px; }
.pa-mline { stroke: var(--text-faint); stroke-width: 2; }
.pa-mline.done { stroke: var(--good); }
.pa-mline.cur { stroke: var(--accent); stroke-width: 3; }

/* Fotos */
.pa-seqcam, .pa-pslot, .pa-camrow label, .pa-file-chip { position: relative; overflow: hidden; }
.pa-seqcam input, .pa-pslot input, .pa-camrow input, .pa-file-chip input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pa-seqcam { display: flex; justify-content: center; min-height: 48px; }
.pa-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pa-pslot { display: grid; place-items: center; aspect-ratio: 3 / 4; background: var(--surface-2); border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; }
.pa-pslot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
.pa-grid-ov { position: absolute; inset: 0; pointer-events: none; border-radius: 0 !important;
    background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 25% 25%; }
.pa-ghost { position: absolute; inset: 8%; width: 84%; height: 84%; fill: none; stroke: var(--sand); stroke-width: 1.2; opacity: .6; pointer-events: none; }
.pa-pslot.has .pa-ghost { opacity: .35; }
.pa-plus { position: relative; font-size: 1.6rem; color: var(--text-muted); }
.pa-plbl { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: .75rem; color: var(--text); }
.pa-camrow { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; }
.pa-camrow label { display: grid; place-items: center; min-height: 40px; font-size: .75rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; }

/* Postura e força */
.pa-postphoto-row { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.pa-postphoto { position: relative; flex: none; width: 96px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-md) !important; }
.pa-postphoto img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
.pa-plumb { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--accent); border-radius: 0 !important; }
.pa-mobt { width: 100%; border-collapse: collapse; }
.pa-mobt th { padding: 4px; font-size: .8rem; text-align: left; color: var(--text-muted); }
.pa-mobt td { padding: 8px 4px; vertical-align: top; border-top: 1px solid var(--border); }
.pa-tri { min-width: 88px; min-height: 40px; padding: 4px 8px; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; }
.pa-tri.ok { color: var(--good); border-color: var(--good) !important; }
.pa-tri.lim { color: var(--above); border-color: var(--above) !important; }
.pa-tri.dor { color: var(--accent); border-color: var(--accent) !important; }
.pa-test { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--border) !important; border-radius: 0 !important; }
.pa-test:first-child { border-top: 0 !important; }
.pa-th { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pa-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pa-fields label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); }
.pa-more summary { min-height: 44px; display: flex; align-items: center; color: var(--accent); font-weight: 600; cursor: pointer; }
.pa-timer.is-running { color: var(--on-accent); background: var(--accent); border-color: var(--accent) !important; }
.pa-zones { display: grid; gap: 4px; }
.pa-zones > div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; font-size: .85rem; background: var(--surface-2); border-radius: var(--radius-md) !important; }

/* Resultado */
.pa-sum { width: 100%; border-collapse: collapse; }
.pa-sum th { padding: 4px; font-size: .75rem; font-weight: 600; text-align: right; color: var(--text-muted); }
.pa-sum td { padding: 8px 4px; text-align: right; border-top: 1px solid var(--border); }
.pa-sum td:first-child, .pa-sum th:first-child { text-align: left; }
.pa-review { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 52px; border-top: 1px solid var(--border) !important; border-radius: 0 !important; }
.pa-review:first-of-type { border-top: 0 !important; }
.pa-review span { display: grid; }
.pa-review.off b { color: var(--text-muted); }
.pa-done { max-width: 640px; margin: 0 auto; }
.pa-actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 400px) {
    .pa-live { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pa-painmap { grid-template-columns: 1fr; justify-items: center; }
}

/* Computador em tela inteira: menu à esquerda, 2 colunas, teclado físico. */
@media (min-width: 1100px) {
    .pa-shell.is-desktop { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
    .pa-side { position: sticky; top: 16px; display: grid; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; }
    .pa-side-who { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; }
    .pa-shell.is-desktop .pa-content > .pa-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1180px; align-items: start; }
    .pa-shell.is-desktop .pa-content > .pa-stack > :not(.admin-card),
    .pa-shell.is-desktop .pa-content > .pa-stack > .pa-who,
    .pa-shell.is-desktop .pa-content > .pa-stack > .pa-photos { grid-column: 1 / -1; }
    .pa-shell.is-desktop .pa-foot { margin: 16px 0 0; }
    .pa-shell.is-desktop .pa-foot-bar { justify-content: flex-end; max-width: 1180px; }
    .pa-shell.is-desktop .pa-foot-bar .btn-primary { flex: none; }
}

/* Apresentação Antes × Depois (PROMPT 8 §7) */
.pa-show-page { max-width: 1180px; margin: 0 auto; }
.pa-show { outline: none; }
.pa-slide { display: grid; gap: 16px; min-height: 60vh; padding: 16px; background: var(--surface); border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; }
.pa-slide h2 { margin: 0; font-size: 1.4rem; font-weight: 800; }
.pa-show-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; }
.pa-show-nav .btn { width: 48px; min-height: 48px; padding: 0; font-size: 1.4rem; }
.pa-show-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pa-show-dots button { width: 12px; height: 12px; padding: 0; background: var(--surface-2); border: 1px solid var(--border) !important; border-radius: var(--radius-pill) !important; }
.pa-show-dots button[aria-current="step"] { background: var(--accent); border-color: var(--accent) !important; }
.pa-cover { display: grid; gap: 8px; }
.pa-cover h1 { margin: 0; font-size: 2rem; font-weight: 800; }
.pa-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.pa-kpis > div { display: grid; gap: 2px; padding: 12px; background: var(--surface-2); border-radius: var(--radius-md) !important; }
.pa-kpis small { color: var(--text-muted); font-size: .75rem; }
.pa-kpis b { font-size: 1.6rem; }
.pa-zonebar { position: relative; display: flex; height: 40px; overflow: visible; border-radius: var(--radius-md) !important; }
.pa-zonebar span { display: grid; place-items: end center; padding-bottom: 2px; background: var(--surface-2); border-left: 1px solid var(--bg) !important; border-radius: 0 !important; }
.pa-zonebar span small { font-size: .6rem; color: var(--text-muted); }
.pa-zonebar i { position: absolute; top: -6px; width: 4px; height: 52px; margin-left: -2px; border-radius: var(--radius-pill) !important; }
.pa-zonebar i.now { background: var(--accent); }
.pa-zonebar i.before { background: var(--text-faint); }
.pa-stackbars { display: grid; gap: 8px; }
.pa-stackbar { display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: center; }
.pa-stackbar > span { display: flex; height: 32px; overflow: hidden; border-radius: var(--radius-md) !important; }
.pa-stackbar i { display: flex; align-items: center; padding: 0 6px; font-size: .7rem; font-style: normal; white-space: nowrap; overflow: hidden; border-radius: 0 !important; }
.pa-stackbar i.lean { color: var(--bg); background: var(--good); }
.pa-stackbar i.fat { color: var(--text); background: var(--surface-2); }
.pa-line { width: 100%; max-height: 140px; }
.pa-line polyline { fill: none; stroke: var(--accent); stroke-width: 2; }
.pa-line circle { fill: var(--accent); }
.pa-div { display: grid; gap: 6px; }
.pa-div-row { display: grid; grid-template-columns: 96px 1fr 80px; gap: 8px; align-items: center; font-size: .85rem; }
.pa-div-row > span:last-child { text-align: right; }
.pa-div-track { position: relative; height: 12px; background: var(--surface-2); border-radius: var(--radius-pill) !important; }
.pa-div-track::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: 50%; width: 1px; background: var(--border); }
.pa-div-track i { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-pill) !important; }
.pa-div-track i.pos { left: 50%; }
.pa-div-track i.neg { right: 50%; }
.pa-div-track i.good { background: var(--good); }
.pa-div-track i.bad { background: var(--above); }
.pa-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pa-compare figure { margin: 0; }
.pa-compare img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-md) !important; }
.pa-compare figcaption { font-size: .75rem; color: var(--text-muted); text-align: center; }
.pa-bars { display: grid; gap: 8px; }
.pa-bar-group { display: grid; gap: 4px; }
.pa-bar-name { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.pa-bar { display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; align-items: center; }
.pa-bar > span { height: 14px; background: var(--surface-2); border-radius: var(--radius-pill) !important; }
.pa-bar i { display: block; height: 100%; border-radius: var(--radius-pill) !important; }
.pa-bar i.now { background: var(--accent); }
.pa-bar i.before { background: var(--text-faint); }
.pa-classbar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.pa-classbar span { padding: 8px 2px; font-size: .7rem; text-align: center; color: var(--text-muted); background: var(--surface-2); border-radius: 0 !important; }
.pa-classbar span.on { color: var(--on-accent); background: var(--accent); font-weight: 700; }
.pa-fixed { text-decoration: line-through; color: var(--good); }
.pa-quote { margin: 0; padding: 12px 16px; font-size: 1.05rem; background: var(--surface-2); border: 1px solid var(--border) !important; border-left-color: var(--accent) !important; border-radius: var(--radius-md) !important; }
@media (min-width: 1100px) {
    .pa-slide { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; padding: 32px; }
    .pa-slide > h2, .pa-slide > .pa-cover, .pa-slide > .pa-lead { grid-column: 1 / -1; }
    .pa-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Admin › usuário: dados da conta e avaliação física retroativa. */
.aud-head { margin: 16px 0; }
.aud-head h1 { margin: 4px 0; }
.aud-card { display: grid; gap: 16px; margin-top: 16px; max-width: 640px; }
.aud-card h2 { margin: 0; font-size: 18px; }
.aud-form { display: grid; gap: 16px; }
.aud-field { display: grid; gap: 8px; max-width: 360px; }
.aud-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.aud-field .aud-label { margin: 0; }
.aud-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.aud-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.aud-link:hover { color: var(--accent); }
.retro-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; padding: 12px 16px; font-size: 14px; background: var(--warning-bg); color: var(--warning-text); border-radius: var(--radius-md) !important; }