/* =============================================================
   Diário de Treino · Identidade visual "jogo"
   Tokens e temas copiados de referencia/app-atual.html.
   O resto do layout é Bootstrap 5; aqui só cores, tema e o que
   é próprio do app (cartões, barra de abas).
   ============================================================= */

/* --------------------------------------------------------- */
/* -- begin:: Tokens (tema padrão = preto)                     */
/* --------------------------------------------------------- */
:root {
    color-scheme: dark;
    --bg: #0a0c11;
    --surface: #141822;
    --surface-2: #1b2030;
    --line: #252b3a;
    --ink: #f2f4f8;
    --muted: #8a93a8;
    --dim: #5b6377;
    /* <-- ALTERADO AQUI: cores da logo (iguais às da Vibe Sites): âmbar no destaque, turquesa no "ok" */
    --orange: #f59e0b;       /* cor de destaque do tema (nem sempre laranja) — âmbar do raio da logo */
    --orange-2: #d97706;
    --orange-soft: #2a1f0b;
    --ok: #2dd4bf;           /* turquesa do "D" da logo */
    --ok-soft: #0e2a28;
    --rose: #ec7c9f;
    --rose-soft: #2c1620;
    --gold: #f2c14e;
    --tA: #22d3ee;           /* cor de cada treino da ficha — A ciano e B âmbar claro (da logo); C e D bem diferentes pra não confundir  <-- ALTERADO AQUI */
    --tB: #fbbf24;
    --tC: #a78bfa;
    --tD: #f472b6;
    --font: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --r: 18px;
}
/* --------------------------------------------------------- */
/* -- end:: Tokens                                             */
/* --------------------------------------------------------- */

/* --------------------------------------------------------- */
/* -- begin:: Os outros 4 temas (data-cor no <html>)           */
/* --------------------------------------------------------- */
/* <-- ALTERADO AQUI: os temas só mudam fundo, cartões e textos. O âmbar e o turquesa da logo e as
   cores dos treinos A-D ficam iguais em todos. Nos claros, os dois ficam mais escuros pra dar leitura. */
:root[data-cor="azul"] { --bg: #0a1324; --surface: #121f38; --surface-2: #1a2a49; --line: #263a5e; --muted: #8fa1c4; --dim: #5d6f92; --orange-soft: #2a2414; }
:root[data-cor="roxo"] { --bg: #110b1e; --surface: #1c1430; --surface-2: #261c40; --line: #362a54; --muted: #a596c4; --dim: #6c5e8c; --orange-soft: #2c1f1a; }
:root[data-cor="rosa"] { color-scheme: light; --bg: #fff2f6; --surface: #ffffff; --surface-2: #fde3ec; --line: #f5cddb; --ink: #3a2330; --muted: #94707f; --dim: #c09dab;
    --orange: #e08e0b; --orange-2: #c2610c; --orange-soft: #fff1d6; --ok: #0d9488; --ok-soft: #dcf5f1; --rose: #d9487a; --rose-soft: #ffe1ec; --gold: #c99413; }
:root[data-cor="branco"] { color-scheme: light; --bg: #f4f5f9; --surface: #ffffff; --surface-2: #eceef4; --line: #dfe2ea; --ink: #151a26; --muted: #677087; --dim: #a1a8b8;
    --orange: #e08e0b; --orange-2: #c2610c; --orange-soft: #fdf0d8; --ok: #0d9488; --ok-soft: #dcf5f1; --rose: #d34b77; --rose-soft: #fce6ee; --gold: #c99413; }
/* --------------------------------------------------------- */
/* -- end:: Os outros 4 temas                                  */
/* --------------------------------------------------------- */

/* ============================================================= */
/* -- begin:: CSS do app original (referencia/app-atual.html, linhas 40 a 504) */
/* Só mudou: .nav → .nav-abas e .toast → .aviso-toast (nomes que o Bootstrap já usa) */
/* ============================================================= */
body {
    background: var(--bg); color: var(--ink);
    font-family: var(--font); font-size: 15px; line-height: 1.45;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-block: 0 190px;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
.app { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; padding-top: 16px; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.3px; text-wrap: balance; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
svg { display: block; }

/* Cor de identidade de cada treino */
.t-A { --t: var(--tA); } .t-B { --t: var(--tB); } .t-C { --t: var(--tC); } .t-D { --t: var(--tD); }

/* -- Cabeçalho -- */
.cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cab h1 { font-size: 24px; }
.cab .sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.perfis { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.avatar {
    width: 38px; height: 38px; border-radius: 50%; border: 2px solid transparent;
    background: var(--surface-2); color: var(--muted); font-weight: 800; font-size: 14px;
    display: grid; place-items: center; flex-shrink: 0;
}
.avatar[aria-pressed="true"] { border-color: var(--orange); color: var(--ink); }
.avatar.add { color: var(--orange); font-size: 20px; border: 1.5px dashed var(--line); }

/* -- Títulos de seção -- */
.secao { display: flex; flex-direction: column; gap: 10px; }
.secao-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.secao-cab h2 { font-size: 18px; }
.secao-cab span { font-size: 13px; color: var(--muted); }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--orange); }

/* -- Cartões -- */
.card { background: var(--surface); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.card.destaque { background: linear-gradient(160deg, var(--orange-soft) 0%, var(--surface) 55%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange) 25%, transparent); }

/* Nível */
.nivel { display: flex; gap: 14px; align-items: center; }
.selo {
    width: 64px; height: 64px; border-radius: 16px; flex-shrink: 0;
    background: linear-gradient(140deg, var(--orange), var(--orange-2));
    display: flex; flex-direction: column; align-items: center; justify-content: center; color: #1a0f08;
}
.selo small { font-size: 9px; font-weight: 800; letter-spacing: 1.2px; }
.selo b { font-size: 26px; font-weight: 800; line-height: 1; }
.nivel h3 { font-size: 17px; }
.barra { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--orange), var(--orange-2)); }
.barra-leg { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.barra-leg b { color: var(--orange); }

/* Semana: anel + dias */
.semana-top { display: flex; align-items: center; gap: 18px; }
.anel { position: relative; width: 104px; height: 104px; flex-shrink: 0; }
.anel .txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.anel b { font-size: 28px; font-weight: 800; line-height: 1; }
.anel span { font-size: 11.5px; color: var(--muted); }
.semana-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.semana-info h3 { font-size: 17px; }
.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dia { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--dim); }
.bola { width: 100%; max-width: 38px; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.bola.treino { background: var(--t); border-color: var(--t); color: #0a0c11; }
.bola.pausa { border-color: var(--rose); color: var(--rose); }
.dia.hoje { color: var(--orange); }
.dia.hoje .bola:not(.treino):not(.pausa) { border-color: var(--orange); }

/* Sequência */
.linha-card { display: flex; align-items: center; gap: 12px; }
.ico {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0;
    background: var(--orange-soft); color: var(--orange);
}
.ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.linha-card .txt { flex: 1; min-width: 0; }
.linha-card h3 { font-size: 16px; }
.pontos { display: flex; gap: 5px; }
.pontos i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.pontos i.on { background: var(--orange); }

/* Ações rápidas */
.rapidas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rapida { background: var(--surface); border: none; border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; text-align: left; font-weight: 700; }
.rapida.rosa .ico { background: var(--rose-soft); color: var(--rose); }

/* Conquistas */
.conquistas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.conq { background: var(--surface); border-radius: 14px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 11.5px; font-weight: 700; line-height: 1.25; min-width: 0; }
.conq .medalha { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #0a0c11; }
.conq .medalha svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.conq.off { color: var(--dim); }
.conq.off .medalha { background: var(--surface-2) !important; color: var(--dim); }

/* Desafio */
.desafio h3 { font-size: 18px; }
.desafio .num-grande { background: var(--surface-2); border-radius: 12px; padding: 6px 12px; text-align: center; }
.desafio .num-grande b { font-size: 20px; display: block; line-height: 1.1; }
.desafio .num-grande span { font-size: 11px; color: var(--muted); }

/* -- Escolha do treino -- */
.grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.treino-card { background: var(--surface); border: none; border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 12px; text-align: left; min-width: 0; position: relative; overflow: hidden; }
.treino-card::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: var(--t); opacity: .12; }
.letra { width: 40px; height: 40px; border-radius: 12px; background: var(--t); color: #0a0c11; display: grid; place-items: center; font-weight: 800; font-size: 19px; flex-shrink: 0; }
.treino-card .nome { font-weight: 800; font-size: 16px; line-height: 1.2; }
.treino-card .info { font-size: 12.5px; color: var(--muted); }

/* -- Treino em andamento -- */
.ao-vivo { background: var(--surface); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 14px; border-top: 3px solid var(--t); }
.ao-vivo-top { display: flex; align-items: center; gap: 12px; }
.ao-vivo-top .txt { flex: 1; min-width: 0; }
.ao-vivo-top h2 { font-size: 20px; }
.ao-vivo input[type=date] { background: var(--surface-2); border: none; border-radius: 10px; padding: 6px 8px; font-size: 13px; color: var(--muted); }
.metricas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.metrica { background: var(--surface-2); border-radius: 12px; padding: 10px; }
.metrica span { font-size: 11.5px; color: var(--muted); display: block; }
.metrica b { font-size: 19px; font-weight: 800; }

.ex { background: var(--surface); border-radius: var(--r); overflow: hidden; }
.ex-top { display: flex; gap: 12px; padding: 14px 14px 8px; align-items: flex-start; }
.ex-n { width: 28px; height: 28px; border-radius: 9px; background: var(--surface-2); color: var(--t); font-weight: 800; font-size: 13px; display: grid; place-items: center; flex-shrink: 0; }
.ex-nome { font-weight: 800; font-size: 15.5px; line-height: 1.25; }
.ex-meta { font-size: 12.5px; color: var(--muted); }
.tabela { padding: 0 8px 4px; }
.lin { display: grid; grid-template-columns: 30px minmax(0, 1fr) 64px 56px 40px; gap: 6px; align-items: center; padding: 4px 6px; border-radius: 10px; }
.lin.cab-t { font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--dim); }
.lin.cab-t span:nth-child(n+3) { text-align: center; }
.lin.feita { background: var(--ok-soft); }
.lin .n { text-align: center; font-weight: 800; color: var(--muted); }
.lin .ant { font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lin input {
    width: 100%; box-sizing: border-box; background: var(--surface-2); border: 1.5px solid transparent; border-radius: 9px;
    padding: 8px 2px; text-align: center; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.lin input:focus { border-color: var(--t); outline: none; }
.lin.feita input { background: transparent; }
.check { width: 36px; height: 36px; border-radius: 10px; border: none; background: var(--surface-2); color: var(--dim); display: grid; place-items: center; justify-self: end; }
.check svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lin.feita .check { background: var(--ok); color: #0a0c11; }
.pr { font-size: 9.5px; font-weight: 800; color: var(--gold); margin-left: 4px; }
.ex-acoes { display: flex; border-top: 1px solid var(--line); }
.ex-acoes button { flex: 1; background: none; border: none; padding: 11px; font-weight: 700; font-size: 13.5px; color: var(--muted); }
.ex-acoes button:first-child { color: var(--t); border-right: 1px solid var(--line); }

/* Opções (energia, ciclo, motivo) */
.grupo { display: flex; flex-direction: column; gap: 8px; }
.rotulo { font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; }
.opcao { background: var(--surface-2); border: 1.5px solid transparent; border-radius: 11px; padding: 10px 6px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.opcao[aria-pressed="true"] { border-color: var(--orange); color: var(--ink); background: var(--orange-soft); }
.opcao.rosa[aria-pressed="true"] { border-color: var(--rose); background: var(--rose-soft); }
.opcao.verde[aria-pressed="true"] { border-color: var(--ok); background: var(--ok-soft); }
textarea, .input { width: 100%; box-sizing: border-box; background: var(--surface-2); border: 1.5px solid transparent; border-radius: 11px; padding: 11px 12px; font-size: 15px; }
textarea:focus, .input:focus { border-color: var(--orange); outline: none; }
textarea { min-height: 72px; resize: vertical; }
.linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.linha > * { min-width: 0; }

/* Botões */
.btn { border: none; border-radius: 14px; padding: 15px 18px; font-weight: 800; font-size: 15.5px; background: var(--orange); color: #1a0f08; }
.btn.sec { background: var(--surface-2); color: var(--ink); }
.btn.rosa { background: var(--rose-soft); color: var(--rose); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.full { width: 100%; }
.acoes { display: flex; gap: 10px; }
.acoes .btn { flex: 1; }
.acoes .btn.sec { flex: 0 0 auto; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button { width: 40px; height: 40px; border-radius: 12px; border: none; background: var(--surface-2); font-size: 20px; font-weight: 800; }
.stepper b { font-size: 22px; min-width: 28px; text-align: center; }

/* -- Barras fixas -- */
.fixo { position: fixed; left: 0; right: 0; z-index: 7; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.fixo > div { max-width: 560px; margin: 0 auto; }
.barra-acoes { bottom: 0; padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--bg) 75%, transparent); }
.descanso { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.descanso-card { background: var(--surface-2); border-radius: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.descanso-card .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.descanso-card b { font-size: 20px; font-weight: 800; }
.descanso-card .barra i { background: var(--ok); }
.mini { border: none; background: var(--surface); border-radius: 10px; padding: 8px 10px; font-weight: 800; font-size: 13px; }

.nav-abas { bottom: 0; background: color-mix(in srgb, var(--surface) 94%, transparent); border-top: 1px solid var(--line); padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); backdrop-filter: blur(12px); }
.nav-abas > div { display: grid; grid-template-columns: repeat(6, 1fr); }
.aba { background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; font-size: 10.5px; min-width: 0; font-weight: 700; color: var(--dim); }
.aba svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aba[aria-selected="true"] { color: var(--orange); }

/* -- Progresso -- */
.grafico text { fill: var(--muted); font-size: 11px; font-family: var(--font); font-weight: 700; }
.grafico .meta-linha { stroke: var(--dim); stroke-dasharray: 4 4; stroke-width: 1.5; }
.ex-prog { display: flex; flex-direction: column; gap: 8px; }
.ex-prog-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ex-prog-top b { font-size: 18px; font-weight: 800; }
.delta { font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 99px; background: var(--ok-soft); color: var(--ok); white-space: nowrap; }
.delta.zero { background: var(--surface-2); color: var(--muted); }
.leg-graf { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
.insight { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.insight div { background: var(--surface-2); border-radius: 12px; padding: 12px; }
.insight b { font-size: 22px; font-weight: 800; display: block; }
.insight span { font-size: 12px; color: var(--muted); }

/* Histórico */
.hist { display: flex; flex-direction: column; gap: 8px; }
.mes { font-size: 13px; font-weight: 800; color: var(--muted); text-transform: capitalize; margin-top: 6px; }
.item { background: var(--surface); border-radius: 14px; padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; }
.item.pausa { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.data-box { text-align: center; min-width: 36px; }
.data-box b { display: block; font-size: 20px; font-weight: 800; line-height: 1; }
.data-box span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; font-weight: 700; }
.item-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.item-titulo { font-weight: 800; display: flex; align-items: center; gap: 8px; }
.item-titulo i { width: 8px; height: 8px; border-radius: 50%; background: var(--t, var(--rose)); }
.tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tag { font-size: 11.5px; font-weight: 700; border-radius: 7px; padding: 2px 8px; background: var(--surface-2); color: var(--muted); }
.tag.rosa { background: var(--rose-soft); color: var(--rose); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.ouro { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }
details summary { cursor: pointer; font-size: 13px; color: var(--orange); font-weight: 700; }
details ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
details ul b { color: var(--ink); }
.x { border: none; background: none; color: var(--dim); font-size: 20px; line-height: 1; padding: 4px 6px; border-radius: 8px; }
.link { border: none; background: none; color: var(--orange); font-weight: 800; font-size: 13px; padding: 4px 6px; }

/* -- Grupo / ranking -- */
.rank { display: flex; flex-direction: column; gap: 8px; }
.rank-item { background: var(--surface); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.rank-item.eu { box-shadow: inset 0 0 0 1.5px var(--orange); background: linear-gradient(90deg, var(--orange-soft), var(--surface)); }
.rank-pos { width: 18px; font-weight: 800; color: var(--muted); text-align: center; }
.rank-pos.ouro { color: var(--gold); }
.rank-item .txt { flex: 1; min-width: 0; }
.rank-item .txt b { display: flex; align-items: center; gap: 6px; }
.rank-item .txt span { font-size: 12.5px; color: var(--muted); }
.nv { font-size: 10.5px; font-weight: 800; padding: 2px 6px; border-radius: 6px; background: var(--orange-soft); color: var(--orange); }
.rank-xp { font-weight: 800; font-size: 17px; }
.av-pilha { display: flex; }
.av-pilha .avatar { width: 30px; height: 30px; font-size: 12px; margin-left: -8px; border: 2px solid var(--surface); }
.av-pilha .avatar:first-child { margin-left: 0; }

/* -- Ficha -- */
.ficha-ex { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ficha-ex:last-child { border-bottom: none; }
.arrastar { cursor: grab; touch-action: none; user-select: none; }   /* pegador dos treinos na Ficha */
span.arrastar:not(.letra) { color: var(--dim); font-size: 20px; padding: 0 2px; }
.arrastando { opacity: .4; }
.ficha-ex .x, [data-trocar-treino] { padding: 4px; }
.ficha-ex .x:disabled, [data-trocar-treino]:disabled { opacity: .25; }
.add-linha { display: grid; grid-template-columns: 1fr 86px; gap: 8px; }

/* -- Boneco -- */
.palco { position: relative; border-radius: var(--r); overflow: hidden; background: var(--surface); }
.palco svg { width: 100%; height: auto; }
.palco .sobre { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; pointer-events: none; }
.pilula { background: rgba(10,12,17,.72); color: #fff; backdrop-filter: blur(6px); border-radius: 99px; padding: 5px 11px; font-size: 12px; font-weight: 800; display: inline-flex; gap: 6px; align-items: center; }
.pilula.lv { background: linear-gradient(140deg, var(--orange), var(--orange-2)); color: #1a0f08; }
.palco .editar { position: absolute; right: 12px; bottom: 12px; pointer-events: auto; border: none; }
.checkin-feito { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.escolhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.escolha { background: var(--surface-2); border: 2px solid transparent; border-radius: 12px; padding: 8px 4px; font-size: 12px; font-weight: 700; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.escolha[aria-pressed="true"] { border-color: var(--orange); color: var(--ink); }
.escolha:disabled { opacity: .45; cursor: default; }
.escolha small { font-size: 10.5px; color: var(--dim); }
.cores { display: flex; gap: 8px; flex-wrap: wrap; }
.cor { width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; }
.cor[aria-pressed="true"] { border-color: var(--ink); }

.thumb { width: 52px; height: 52px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; flex-shrink: 0; }
.thumb svg { width: 50px; height: 48px; }
.thumb.peq { width: 42px; height: 42px; border-radius: 10px; } .thumb.peq svg { width: 40px; height: 38px; }
.passos { display: flex; flex-direction: column; gap: 8px; }
.passo { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border-radius: 14px; padding: 12px; border: none; text-align: left; width: 100%; }
.passo .n { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--muted); flex-shrink: 0; }
.passo.ok .n { background: var(--ok); border-color: var(--ok); color: #0a0c11; }
.passo .txt { flex: 1; min-width: 0; } .passo b { display: block; } .passo span { font-size: 12.5px; color: var(--muted); }
.passo[aria-pressed] { border: 2px solid transparent; } .passo[aria-pressed="true"] { border-color: var(--orange); background: var(--orange-soft); }   /* tempo de treino: mostra o escolhido (ALTERADO AQUI) */
.folha { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; }
.folha-in { width: 100%; max-width: 600px; margin: 0 auto; max-height: 88%; overflow-y: auto; background: var(--bg); border-radius: 24px 24px 0 0;
    padding: 18px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 14px; }
.folha-in .acoes { position: sticky; bottom: 0; background: var(--bg); padding-top: 8px; }
.grade-ap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { position: relative; background: var(--surface); border: 2px solid transparent; border-radius: 16px; padding: 12px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); line-height: 1.2; text-align: center; }
.tile svg { width: 76px; height: 72px; }
.tile[aria-pressed="true"] { border-color: var(--orange); color: var(--ink); }
.tile[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--orange); color: #1a0f08; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.sem-aparelho { font-size: 11.5px; font-weight: 700; color: var(--rose); }

.chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chip-m { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 99px; background: color-mix(in srgb, var(--t, var(--orange)) 18%, transparent); color: var(--t, var(--orange)); }
.chip-sel { border: none; font-size: 12.5px; font-weight: 700; padding: 6px 10px; border-radius: 99px; background: var(--orange-soft); color: var(--orange); }
.lista-cond { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.cond { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; background: var(--surface-2); border: 2px solid transparent; border-radius: 12px; padding: 10px 12px; font-weight: 700; font-size: 14px; }
.cond small { color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.cond[aria-pressed="true"] { border-color: var(--orange); background: var(--orange-soft); }
.cond.novo { border-style: dashed; border-color: var(--line); color: var(--orange); }
.mapa { width: 100%; height: auto; } .mapa text { fill: var(--dim); font-size: 7px; font-weight: 700; font-family: var(--font); }
.ob-prog { display: flex; gap: 6px; } .ob-prog i { flex: 1; height: 5px; border-radius: 99px; background: var(--surface-2); } .ob-prog i.on { background: linear-gradient(90deg, var(--orange), var(--orange-2)); }
.ob-hero { display: flex; flex-direction: column; gap: 10px; } .ob-hero h1, .secao > h1 { font-size: 28px; line-height: 1.15; } .secao > p, .ob-hero p { margin: 0; }
.metas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.meta-btn { background: var(--surface); border: 2px solid transparent; border-radius: 16px; padding: 14px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.meta-btn b { font-size: 28px; font-weight: 800; line-height: 1; } .meta-btn span { font-size: 11px; color: var(--muted); font-weight: 700; }
.meta-btn[aria-pressed="true"] { border-color: var(--orange); background: var(--orange-soft); }
.treino-linha { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 10px; align-items: center; }
.treino-linha .esq { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mapa-mini { background: var(--surface-2); border-radius: 14px; padding: 6px 4px 2px; }
/* Atributos estilo RPG */
.atributos { display: flex; flex-direction: column; gap: 14px; }
.attr { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.attr .ico { width: 40px; height: 40px; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 30%, transparent); }
.attr-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.attr-top b { font-size: 14.5px; } .attr-top span { font-size: 12px; font-weight: 800; color: var(--c); }
.attr .barra { height: 7px; margin-top: 6px; } .attr .barra i { background: var(--c); box-shadow: 0 0 10px var(--c); }
.attr small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile-stat { background: var(--surface); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; }
.tile-stat::after { content: ""; position: absolute; right: -24px; top: -24px; width: 80px; height: 80px; border-radius: 50%; background: var(--c); opacity: .12; filter: blur(4px); }
.tile-stat .ico { width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); }
.tile-stat .ico svg { width: 17px; height: 17px; }
.tile-stat b { font-size: 26px; font-weight: 800; line-height: 1; } .tile-stat span { font-size: 12px; color: var(--muted); font-weight: 600; }

.acoes-ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acao-ficha { background: var(--surface); border: none; border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; cursor: pointer; }
.acao-ficha .ico { margin-bottom: 6px; } .acao-ficha b { font-size: 14.5px; } .acao-ficha span:last-child { font-size: 12px; color: var(--muted); }
.acao-ficha.off { opacity: .45; pointer-events: none; }
.aviso-ia { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--ink); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45; }
.prop { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.ficha-ant { padding: 10px 0; border-bottom: 1px solid var(--line); } .ficha-ant:last-child { border-bottom: none; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--surface-2); border-top-color: var(--orange); }
@media (prefers-reduced-motion: no-preference) { .spinner { animation: gira 1s linear infinite; } }
@keyframes gira { to { transform: rotate(360deg); } }

.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campo-un { position: relative; } .campo-un input { padding-right: 46px; font-weight: 800; font-size: 17px; }
.campo-un span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12.5px; color: var(--muted); font-weight: 700; pointer-events: none; }
.imc { background: var(--surface-2); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.imc b { display: block; font-size: 30px; font-weight: 800; line-height: 1; color: var(--c); }
.imc .faixa { font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); }
.regua { position: relative; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--tB) 0 14%, var(--ok) 14% 40%, var(--orange) 40% 60%, var(--orange-2) 60%); }
.regua i { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 3px solid var(--bg); transform: translate(-50%, -50%); }

.foto-av { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar { overflow: hidden; padding: 0; }
.foto-grande { width: 96px; height: 96px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; border: 3px solid var(--orange); font-size: 34px; font-weight: 800; color: var(--muted); flex-shrink: 0; }
.temas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.tema { background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 0; }
.tema .amostra { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; border: 3px solid var(--line); }
.tema .amostra i { width: 30px; height: 26px; border-radius: 7px; display: grid; grid-template-columns: repeat(2, 7px); gap: 4px; place-content: center; }   /* <-- ALTERADO AQUI: cartãozinho */
.tema .amostra b { width: 7px; height: 7px; border-radius: 50%; background: var(--t); }
.tema[aria-pressed="true"] { color: var(--ink); } .tema[aria-pressed="true"] .amostra { border-color: var(--orange); }

.editor-palco { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 4; padding-top: 6px; background: var(--bg); }
.editor-palco .palco svg { max-height: 34vh; }
.dado { position: absolute; right: 12px; bottom: 12px; border: none; cursor: pointer; }
.abas-editor { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.aba-ed { flex-shrink: 0; border: none; background: var(--surface); color: var(--muted); font-weight: 800; font-size: 13px; padding: 9px 14px; border-radius: 99px; }
.aba-ed[aria-selected="true"] { background: var(--orange); color: #1a0f08; }
.cor.sem { background: var(--surface-2); color: var(--muted); font-weight: 800; font-size: 15px; }

.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); border-radius: 99px; padding: 4px; gap: 4px; }
.seg button { border: none; background: none; border-radius: 99px; padding: 9px; font-weight: 800; font-size: 13.5px; color: var(--muted); }
.seg button[aria-selected="true"] { background: var(--orange); color: #1a0f08; }
.feed { display: flex; flex-direction: column; gap: 14px; }
.post { background: var(--surface); border-radius: var(--r); overflow: hidden; border-top: 3px solid var(--t, var(--orange)); }
.post-cab { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.post-cab .avatar { width: 36px; height: 36px; font-size: 13px; }
.post-cab .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .post-cab .txt span { font-size: 12px; color: var(--muted); }
.post-foto { width: 100%; display: block; max-height: 520px; object-fit: cover; background: var(--surface-2); }
.post-acoes { display: flex; align-items: center; gap: 10px; padding: 10px 14px 4px; flex-wrap: wrap; }
.curtir { border: none; background: var(--surface-2); border-radius: 99px; padding: 7px 12px; font-size: 15px; font-weight: 800; }
.curtir[aria-pressed="true"] { background: var(--rose-soft); color: var(--rose); }
.post-leg { padding: 4px 14px 14px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.hash { color: var(--orange); font-weight: 800; }
.foto-post { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 220px; border-radius: var(--r); border: 2px dashed var(--line); background: var(--surface); cursor: pointer; overflow: hidden; color: var(--muted); }
.foto-post.com { border-style: solid; border-color: var(--orange); min-height: 0; }
.foto-post img { width: 100%; max-height: 380px; object-fit: cover; display: block; }
.switch { width: 50px; height: 30px; border-radius: 99px; border: none; background: var(--surface-2); position: relative; flex-shrink: 0; }
.switch i { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); transition: left .2s; }
.switch[aria-pressed="true"] { background: var(--orange); } .switch[aria-pressed="true"] i { left: 24px; background: #fff; }

.dia-nav { display: flex; align-items: center; gap: 4px; font-weight: 800; font-size: 14px; }
.dia-nav .x:disabled { opacity: .3; }
.kcal-grande { font-size: 34px; font-weight: 800; line-height: 1.1; } .kcal-grande small { font-size: 14px; color: var(--muted); font-weight: 700; }
.macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.macro { background: var(--surface-2); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.macro span { font-size: 11.5px; color: var(--muted); font-weight: 700; } .macro b { font-size: 17px; font-weight: 800; color: var(--c); } .macro small { font-size: 11px; color: var(--muted); }
.macro .barra { height: 5px; } .macro .barra i { background: var(--c); }
.copos { display: flex; flex-wrap: wrap; gap: 6px; }
.copo { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; color: var(--dim); }
.copo svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
.copo.cheio { background: color-mix(in srgb, var(--tB) 22%, transparent); color: var(--tB); } .copo.cheio svg { fill: var(--tB); }
.ref-grupo { gap: 10px; }
.mini-add { width: 36px; height: 36px; border-radius: 12px; border: none; background: var(--orange); color: #1a0f08; font-size: 22px; font-weight: 800; flex-shrink: 0; }
.ref-item { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.ref-item img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.ref-item .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ref-item .txt span { font-size: 12px; color: var(--muted); }
.ref-foto { width: 100%; max-height: 220px; object-fit: cover; border-radius: 14px; }
.dia-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dia-card { background: var(--surface-2); border: none; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-width: 0; }
.dia-card .ico { width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c); margin-bottom: 4px; }
.dia-card .ico svg { width: 15px; height: 15px; } .dia-card b { font-size: 18px; font-weight: 800; } .dia-card small { font-size: 11px; color: var(--muted); }
.dia-card .barra { height: 4px; width: 100%; margin-top: 6px; } .dia-card .barra i { background: var(--c); }
.missoes { display: flex; flex-direction: column; gap: 8px; }
.missao { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 14px; padding: 12px 14px; }
.missao .bol { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex-shrink: 0; }
.missao .bol svg { width: 14px; height: 14px; stroke: #0a0c11; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.missao.ok .bol { background: var(--ok); border-color: var(--ok); } .missao.ok .txt { text-decoration: line-through; color: var(--muted); }
.missao .txt { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; } .missao b { color: var(--orange); font-size: 13px; font-weight: 800; } .missao.ok b { color: var(--ok); }

.calc { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.calc-linha { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.calc-linha b { color: var(--ink); font-weight: 800; white-space: nowrap; } .calc-linha:last-child { border-top: 1px solid var(--line); padding-top: 8px; }
.destaque-n { color: var(--orange) !important; font-size: 17px; }

.bola.extra { background: var(--ok-soft); border-color: var(--ok); font-size: 15px; }
.ativ-rapidas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ativ { background: var(--surface); border: none; border-radius: 16px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; }
.ativ span { font-size: 26px; line-height: 1; }
.grade-ativ { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.tipo-serie { border: none; background: none; padding: 6px 0; font-weight: 800; color: var(--muted); font-size: 15px; border-radius: 8px; }
.tipo-aquec .tipo-serie { color: var(--gold); } .tipo-drop .tipo-serie { color: var(--tB); } .tipo-falha .tipo-serie { color: var(--rose); }
.tipo-aquec input { opacity: .7; }
.rpe { display: flex; align-items: center; gap: 5px; padding: 6px 14px 10px; flex-wrap: wrap; }
.rpe .rotulo { margin-right: 4px; font-size: 10.5px; }
.rpe button { width: 32px; height: 30px; border-radius: 8px; border: none; background: var(--surface-2); font-weight: 800; font-size: 13px; color: var(--muted); }
.rpe button[aria-pressed="true"] { background: var(--t, var(--orange)); color: #0a0c11; }
.ex-acoes button[aria-pressed="true"] { color: var(--t); }
.elo { text-align: center; font-size: 12px; font-weight: 700; color: var(--t, var(--orange)); margin: -6px 0; }

.vol { display: flex; flex-direction: column; gap: 9px; }
.vol-l { display: grid; grid-template-columns: 86px minmax(0, 1fr) 34px; gap: 10px; align-items: center; font-size: 13px; font-weight: 700; }
.vol-l b { text-align: right; font-weight: 800; }
.vol-trilho { position: relative; height: 12px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.vol-trilho .faixa { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--ok) 22%, transparent); }
.vol-trilho .v { position: absolute; left: 0; top: 2px; bottom: 2px; border-radius: 99px; }
.v.ok { background: var(--ok); } .v.baixo { background: var(--orange); } .v.alto { background: var(--tC); }
.retro-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.retro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.retro-i { background: var(--surface-2); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.retro-i span { font-size: 18px; } .retro-i b { font-size: 20px; font-weight: 800; } .retro-i small { font-size: 11px; color: var(--muted); font-weight: 600; }
.retro-banner { border: none; text-align: left; cursor: pointer; } .retro-banner b { font-size: 15px; }
.ciclo-barra { position: relative; height: 10px; border-radius: 99px; background: var(--surface-2); }
.ciclo-barra i { position: absolute; top: 0; bottom: 0; opacity: .85; } .ciclo-barra i:first-child { border-radius: 99px 0 0 99px; } .ciclo-barra i:nth-child(5) { border-radius: 0 99px 99px 0; }
.ciclo-barra b { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 3px solid var(--surface); transform: translate(-50%, -50%); }
.mini-btn { border: none; border-radius: 10px; background: var(--orange); color: #1a0f08; font-weight: 800; font-size: 12.5px; padding: 7px 10px; flex-shrink: 0; }
.rotina { display: flex; flex-direction: column; gap: 10px; }
.rot-dia { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: start; } .rot-dia > b { padding-top: 6px; }
.chip-rot { border: 1.5px solid var(--line); background: var(--surface); border-radius: 99px; padding: 5px 10px; font-size: 12px; font-weight: 700; color: var(--muted); }
.chip-rot[aria-pressed="true"] { border-color: var(--t, var(--ok)); background: color-mix(in srgb, var(--t, var(--ok)) 20%, transparent); color: var(--ink); }

.vazio { text-align: center; padding: 28px 16px; color: var(--muted); background: var(--surface); border-radius: var(--r); }
.aviso { color: var(--rose); font-size: 13.5px; }
.aviso-toast {
    position: fixed; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px);
    top: calc(14px + env(safe-area-inset-top, 0px));
    background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 999px;
    font-weight: 800; font-size: 14px; z-index: 20; text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
    .aviso-toast { animation: desce .25s ease-out; }
    .barra i { transition: width .4s ease; }
    .lin { transition: background .2s; }
}
@keyframes desce { from { opacity: 0; transform: translate(-50%, -8px); } }
/* ============================================================= */
/* -- end:: CSS do app original                                    */
/* ============================================================= */

/* ============================================================= */
/* -- begin:: Convivência com o Bootstrap 5                        */
/* O Bootstrap também tem .btn e .card: aqui eles seguem as cores  */
/* do tema (sem isso o hover dos botões ficava transparente).      */
/* ============================================================= */
:root {
    --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-body-font-family: var(--font);
    --bs-border-color: var(--line); --bs-secondary-color: var(--muted);
}
.btn { --bs-btn-border-width: 0; --bs-btn-line-height: 1.25;
    --bs-btn-hover-bg: var(--orange); --bs-btn-hover-color: #1a0f08; --bs-btn-active-bg: var(--orange-2); --bs-btn-active-color: #1a0f08;
    --bs-btn-disabled-bg: var(--orange); --bs-btn-disabled-color: #1a0f08; --bs-btn-focus-box-shadow: none; }
.btn.sec { --bs-btn-hover-bg: var(--line); --bs-btn-hover-color: var(--ink); --bs-btn-active-bg: var(--line); --bs-btn-active-color: var(--ink);
    --bs-btn-disabled-bg: var(--surface-2); --bs-btn-disabled-color: var(--ink); }
.btn.rosa { --bs-btn-hover-bg: var(--rose-soft); --bs-btn-hover-color: var(--rose); --bs-btn-active-bg: var(--rose-soft); --bs-btn-active-color: var(--rose);
    --bs-btn-disabled-bg: var(--rose-soft); --bs-btn-disabled-color: var(--rose); }
.card { --bs-card-border-width: 0; --bs-card-bg: var(--surface); --bs-card-color: var(--ink); --bs-card-border-radius: var(--r); }
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
p { margin-bottom: 0; }

/* Formulário de login (entrar.php) */
.form-control { background: var(--surface-2); border: 1.5px solid transparent; border-radius: 11px; color: var(--ink); padding: 11px 12px; }
.form-control:focus { background: var(--surface-2); border-color: var(--orange); color: var(--ink); box-shadow: none; }
.form-control::placeholder { color: var(--dim); }
.form-label { font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
/* ============================================================= */
/* -- end:: Convivência com o Bootstrap 5                          */
/* ============================================================= */

/* Recados do personal nos treinos (novo) */
.recados summary { color: var(--tB); }
.recado { font-size: 13px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); margin-top: 6px; overflow-wrap: anywhere; }
.recado.meu { background: var(--orange-soft); }
.recados .add-linha { margin-top: 8px; }