/* Doppio — tudo vem em par: um fio de tinta, um fio azzurro. Ver docs/MARCA.md e docs/COMUNICACAO.md */
@font-face { font-family: "Sofia Sans"; src: url("fontes/sofia-sans.woff2") format("woff2"); font-weight: 1 1000; font-display: swap; }
@font-face { font-family: "Sofia XC"; src: url("fontes/sofia-sans-xc.woff2") format("woff2"); font-weight: 1 1000; font-display: swap; }

:root {
  /* ----- tema claro (padrão) ----- */
  --fundo: #F4F4F0; --papel: #FDFDFC; --tinta: #15171A; --borra: #5B6068;
  --linha: #DFDFDA; --linha-forte: #BABBB6; --borda: #86898C; --toque: #E9E9E4;
  /* a faixa do topo é escura nos dois temas: é onde o relógio e a bateria do celular aparecem, sempre em branco */
  --faixa: #15171A; --sobre-faixa: #F4F4F0; --sobre-faixa-2: #B9BCC0;
  /* a xícara ("você está aqui") é sempre louça branca com café */
  --louca: #FFFFFF; --cafe: #3B2418; --traco: #15171A;
  --z1: #C8A67B; --z2: #C1854A; --z3: #B66322; --z4: #A54104; --z5: #87220A; --z0: #8E959B;
  --ok: #2A7347; --aviso: #8A5708; --pare: #B93A2B; --ok-fraco: #E0EEE4; --aviso-fraco: #F6EBD3; --pare-fraco: #F6E1DD;
  /* ----- o par: azzurro, a cor da marca -----
     --par        preenchimento (botão principal)        --sobre-par        texto sobre ele
     --par-fio    fio, sublinhado e texto grande sobre o fundo da página (3:1 ou mais)
     --par-forte  preenchimento de controle pequeno (chave ligada), sempre visível contra o fundo
     --par-faixa  a mesma cor afinada para a faixa escura do topo */
  --par: #2647F0; --sobre-par: #FFFFFF; --par-fio: #2647F0; --par-forte: #2647F0; --sobre-par-forte: #FFFFFF; --par-faixa: #7A98FF;
  /* --marca: o primeiro fio do par e os sinais da marca na página (símbolo, assinatura): é a própria tinta */
  --marca: var(--tinta);
  --texto: "Sofia Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --num: "Sofia XC", "Sofia Sans", system-ui, sans-serif;
  --fio: 27px; --col: 54px; --raio: 6px;
  color-scheme: light;
}
/* o tema "auto" é resolvido para claro ou escuro antes da primeira pintura (app/index.html) */
:root[data-tema="escuro"] {
  --fundo: #121417; --papel: #1B1E22; --tinta: #F1F2F3; --borra: #A1A6AD;
  --linha: #2A2E33; --linha-forte: #464B52; --borda: #737980; --toque: #23272C;
  --faixa: #0A0B0D;
  --z1: #644E33; --z2: #916336; --z3: #C17841; --z4: #EB8B58; --z5: #FFA785; --z0: #5B636B;
  --ok: #6CC08C; --aviso: #E0A848; --pare: #F08573; --ok-fraco: #1B2B22; --aviso-fraco: #30270F; --pare-fraco: #381E1A;
  --par: #7A98FF; --sobre-par: #0E1116; --par-fio: #7A98FF; --par-forte: #7A98FF; --sobre-par-forte: #0E1116;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--fundo); color: var(--tinta); }
body { font: 400 16px/1.45 var(--texto); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior-y: none; overflow-wrap: break-word; }
/* texto digitado pelo atleta (nome, prova, dor, anotações) nunca empurra a tela para o lado */
.titulo, .sub, .txt, .peq, .aviso, .rotulo, .item b, .item small, .no h2, .sessao .nome, .linha-sessao .n, .kv dd, .mud { overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
a { color: var(--tinta); font-weight: 600; text-decoration: underline; text-decoration-color: var(--par-fio); text-decoration-thickness: 2px; text-underline-offset: 3px; }
:focus-visible { outline: 6px double var(--tinta); outline-offset: 1px; border-radius: 4px; }
.num { font-family: var(--num); font-feature-settings: "tnum"; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- moldura ---------- */
#raiz { min-height: 100%; }
.app { max-width: 480px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; position: relative; background: var(--fundo); }
.tela { flex: 1; padding: calc(env(safe-area-inset-top) + 14px) 18px calc(env(safe-area-inset-bottom) + 96px); }
.tela.sem-abas { padding-bottom: calc(env(safe-area-inset-bottom) + 120px); }
.abas { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--fundo); border-top: 1px solid var(--linha); padding: 6px 6px calc(env(safe-area-inset-bottom) + 6px); z-index: 20; }
.abas a { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 0 4px; text-decoration: none; color: var(--borra); font-size: 12px; font-weight: 600; border-radius: var(--raio); }
.abas a[aria-current="page"] { color: var(--tinta); font-weight: 700; }
/* a aba atual leva o filete duplo: um fio de tinta, um fio azzurro */
.abas a[aria-current="page"]::before { content: ""; position: absolute; top: -7px; left: 50%; width: 28px; height: 6px; transform: translateX(-50%); border-top: 2px solid var(--marca); border-bottom: 2px solid var(--par-fio); }
.abas svg { width: 24px; height: 24px; }

/* a faixa do topo: tinta, com o debrum de dois fios (um claro, um azzurro) */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: calc(54px + env(safe-area-inset-top));
  margin: calc(-14px - env(safe-area-inset-top)) -18px 25px; padding: env(safe-area-inset-top) 18px 0;
  background: var(--faixa); color: var(--sobre-faixa); border-bottom: 2px solid var(--sobre-faixa); box-shadow: 0 3px 0 var(--faixa), 0 5px 0 var(--par-faixa); }
.marca { display: inline-flex; align-items: center; color: var(--sobre-faixa); text-decoration: none; flex: none; }
.marca svg { height: 21px; width: auto; display: block; }
.marca b { font: 900 23px/1 var(--num); letter-spacing: .03em; font-style: italic; }
.marca .g, .topo .simbolo .g { fill: var(--par-faixa); }
.simbolo .g { fill: var(--par-fio); }
.topo .ctx { font-size: 13px; color: var(--sobre-faixa-2); font-weight: 600; text-align: right; line-height: 1.25; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voltar { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 6px 8px 6px 0; color: var(--tinta); font-weight: 700; }
.topo .voltar { color: var(--sobre-faixa); padding: 3px 8px 3px 0; }
.voltar svg { width: 20px; height: 20px; }
.topo :focus-visible { outline-color: var(--sobre-faixa); }

.titulo { font: 700 36px/1.02 var(--num); letter-spacing: .005em; }
.titulo.menor { font-size: 30px; }
.sub { color: var(--borra); font-size: 15px; margin-top: 6px; }
.secao { font: 700 21px/1.1 var(--num); letter-spacing: .01em; margin: 26px 0 8px; }
.peq { font-size: 14px; color: var(--borra); }
.txt { font-size: 15.5px; }
.txt + .txt { margin-top: 8px; }

/* ---------- a linha: dois fios lado a lado ---------- */
.linha { position: relative; margin-top: 18px; padding-left: var(--col); }
.linha::before { content: ""; position: absolute; left: var(--fio); top: 0; bottom: 0; width: 6px; transform: translateX(-3px); border-left: 2px solid var(--marca); border-right: 2px solid var(--par-fio); }
.no { position: relative; padding: 0 0 22px; }
.no > .marco { position: absolute; left: calc(var(--fio) - var(--col)); top: 4px; transform: translateX(-50%); display: grid; place-items: center; }
.marco.anel { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--tinta); background: var(--fundo); }
.marco.ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--tinta); }
.marco.risco { width: 14px; height: 2px; background: var(--tinta); top: 11px; }
.marco.feito { width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: var(--fundo); top: 1px; }
.marco.feito svg { width: 12px; height: 12px; }
.marco.fora { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--borda); background: var(--fundo); }
/* "você está aqui": a xícara vista de cima */
.marco.xic { top: -3px; }
.marco.xic .xicara { width: 28px; height: 28px; display: block; }
.xicara .louca { fill: var(--louca); stroke: var(--traco); }
.xicara .asa-f { stroke: var(--traco); } .xicara .asa { stroke: var(--louca); }
.xicara .cafe { fill: var(--cafe); stroke: var(--traco); }
.no h2 { font: 700 23px/1.12 var(--num); letter-spacing: .01em; margin-bottom: 8px; }
.no .campo { margin-top: 10px; }
.fim-linha { position: relative; height: 4px; }
.fim-linha::after { content: ""; position: absolute; left: calc(var(--fio) - var(--col) - 8px); bottom: 0; width: 16px; height: 2px; background: var(--tinta); }

/* ---------- sessão (bloco preso à linha) ---------- */
.sessao { display: block; width: 100%; text-align: left; background: var(--papel); border: 1px solid var(--linha); border-radius: 4px; padding: 0; overflow: hidden; text-decoration: none; font-weight: 400; color: inherit; position: relative; }
.sessao .faixa { display: flex; height: 6px; background: var(--linha); gap: 1px; }
.sessao .faixa i { display: block; height: 100%; }
.sessao .corpo { padding: 11px 13px 12px; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: start; }
.sessao .esp { font-size: 13px; font-weight: 700; color: var(--borra); display: flex; align-items: center; gap: 6px; }
.sessao .esp svg { width: 18px; height: 18px; }
.sessao .nome { font-weight: 600; font-size: 17px; line-height: 1.25; margin-top: 3px; grid-column: 1; }
.sessao .alvo { color: var(--borra); font-size: 14.5px; margin-top: 3px; grid-column: 1 / -1; }
.sessao .dur { font: 700 34px/0.95 var(--num); grid-row: 1 / span 2; grid-column: 2; text-align: right; white-space: nowrap; }
.sessao .dur small { font: 600 14px/1 var(--texto); color: var(--borra); margin-left: 3px; }
.sessao .nota-mud { grid-column: 1 / -1; margin-top: 8px; font-size: 13.5px; font-weight: 600; display: flex; gap: 6px; align-items: flex-start; }
.sessao .nota-mud svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.sessao .reg { grid-column: 1 / -1; margin-top: 8px; font-size: 14px; color: var(--ok); font-weight: 600; }
.sessao.pulado { opacity: .62; }
.sessao.pulado .nome { text-decoration: line-through; }
.sessao.feito .dur { color: var(--borra); }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sessao + .acoes { margin-bottom: 4px; }

.linha-sessao { display: grid; grid-template-columns: 22px 1fr auto 18px; gap: 9px; align-items: center; width: 100%; background: none; border: 0; padding: 7px 0; text-align: left; text-decoration: none; font-weight: 400; color: inherit; border-bottom: 1px solid var(--linha); }
.linha-sessao:last-child { border-bottom: 0; }
.linha-sessao svg.e { width: 20px; height: 20px; color: var(--borra); }
.linha-sessao .n { font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.linha-sessao .n small { display: block; font-weight: 400; color: var(--borra); font-size: 13.5px; }
.linha-sessao .d { font: 700 20px/1 var(--num); font-feature-settings: "tnum"; white-space: nowrap; }
.linha-sessao .st svg { width: 16px; height: 16px; display: block; }
.linha-sessao.pulado .n { text-decoration: line-through; color: var(--borra); }
.st.feito { color: var(--ok); } .st.parcial { color: var(--aviso); } .st.pulado { color: var(--borra); }

/* ---------- botões e controles ---------- */
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: var(--raio); border: 1.5px solid var(--tinta); background: none; font-weight: 700; font-size: 15.5px; text-decoration: none; color: var(--tinta); }
.bt svg { width: 18px; height: 18px; }
.bt.cheio { background: var(--tinta); color: var(--fundo); }
.bt.par { background: var(--par); border-color: var(--par-forte); color: var(--sobre-par); }
.bt.leve { border-color: var(--borda); font-weight: 600; }
.bt.liso { border-color: transparent; padding: 0 6px; min-height: 36px; text-decoration: underline; text-decoration-color: var(--par-fio); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bt.largo { width: 100%; }
.bt.pare { border-color: var(--pare); color: var(--pare); }
.bt:disabled { opacity: .45; cursor: default; }
.bt.peq { min-height: 38px; font-size: 14.5px; padding: 0 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--borda); background: none; font-weight: 600; font-size: 15px; }
.chips button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--fundo); }
.chips.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); }
.chips.grade button { padding: 0; }
.campo { display: block; margin-top: 14px; }
.campo > span, .rotulo { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.campo > small, .ajuda { display: block; color: var(--borra); font-size: 13.5px; margin-top: 5px; }
.campo input, .campo select, .campo textarea, .dias-min select { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border-radius: var(--raio); border: 1.5px solid var(--borda); background: var(--papel); }
.campo textarea { min-height: 84px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .dias-min select:focus { outline: 2px solid var(--tinta); outline-offset: 0; border-color: var(--tinta); }
.duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 359px) { .duas:has(input[type="date"]) { grid-template-columns: minmax(0, 1fr); gap: 0; } } /* em tela estreita, duas datas lado a lado não cabem */
.passo-num { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; border: 1.5px solid var(--borda); border-radius: var(--raio); background: var(--papel); overflow: hidden; }
.passo-num button { height: 44px; border: 0; background: none; display: grid; place-items: center; }
.passo-num button svg { width: 18px; height: 18px; }
.passo-num output { text-align: center; font: 700 22px/1 var(--num); font-feature-settings: "tnum"; }
.troca { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.troca > div { flex: 1; cursor: pointer; }
.troca b { display: block; font-weight: 600; font-size: 15.5px; }
.troca small { color: var(--borra); font-size: 13.5px; }
/* ligada, a chave leva o azzurro */
.chave { width: 50px; height: 30px; border-radius: 999px; border: 0; background: var(--borda); position: relative; flex: none; transition: background .15s; }
.chave::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--papel); transition: transform .15s, background .15s; }
.chave[aria-checked="true"] { background: var(--par-forte); }
.chave[aria-checked="true"]::after { transform: translateX(20px); background: var(--sobre-par-forte); }

/* ---------- avisos, selos, listas ---------- */
.aviso { border-left: 3px solid var(--tinta); background: var(--toque); color: var(--tinta); padding: 11px 13px; border-radius: 0 6px 6px 0; font-size: 15px; margin-top: 12px; }
.aviso.atencao { border-color: var(--aviso); background: var(--aviso-fraco); }
.aviso.pare { border-color: var(--pare); background: var(--pare-fraco); }
.aviso.ok { border-color: var(--ok); background: var(--ok-fraco); }
.aviso b { font-weight: 700; }
.aviso .acoes { margin-top: 10px; }
.selo { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1.5px solid currentColor; text-decoration: none; white-space: nowrap; }
.selo.C { color: var(--ok); } .selo.P { color: var(--aviso); } .selo.T { color: var(--borra); }
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li, .item { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--linha); text-decoration: none; font-weight: 400; color: inherit; width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; }
.item > svg { width: 22px; height: 22px; color: var(--borra); flex: none; }
.item > div { flex: 1; min-width: 0; }
.item b { display: block; font-weight: 600; }
.item small { color: var(--borra); font-size: 13.5px; display: block; }
.item .seta { width: 18px; height: 18px; color: var(--linha-forte); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 15px; }
.kv dt { color: var(--borra); } .kv dd { margin: 0; font-weight: 600; text-align: right; font-feature-settings: "tnum"; }
.pontos { margin: 6px 0 0; padding-left: 18px; font-size: 15px; }
.pontos li { margin: 4px 0; }
/* convite para instalar: passos numerados, com o ícone do navegador dentro da frase */
.inst-passos { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 8px; font-size: 16px; }
.inst-passos li::marker { font-weight: 700; color: var(--par-forte); }
.inst-passos svg { width: 19px; height: 19px; vertical-align: -4px; margin: 0 1px; color: var(--par-forte); }
.inst .aviso { margin-top: 14px; }
.inst .peq { margin-top: 10px; }

/* ---------- treino: gráfico e passos ---------- */
.perfil { display: flex; align-items: flex-end; gap: 2px; height: 92px; margin: 16px 0 6px; border-bottom: 1px solid var(--linha-forte); }
.perfil i { display: block; min-width: 2px; border-radius: 3px 3px 0 0; }
.legenda { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--borra); }
.legenda span { display: inline-flex; align-items: center; gap: 5px; }
.legenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.passos { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: p; }
.passos > li { display: grid; grid-template-columns: 74px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linha); align-items: start; }
.passos .q { font: 700 22px/1.05 var(--num); font-feature-settings: "tnum"; }
.passos .q small { display: block; font: 600 12.5px/1.3 var(--texto); color: var(--borra); margin-top: 3px; }
.passos .oq b { font-weight: 600; display: block; line-height: 1.3; }
.passos .oq span { color: var(--borra); font-size: 14.5px; display: block; margin-top: 2px; }
.passos .oq em { font-style: normal; color: var(--borra); font-size: 14px; display: block; margin-top: 4px; }
.quando-sessao { display: flex; gap: 7px; align-items: flex-start; margin-top: 8px; }
.quando-sessao svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
/* bloco que se repete: o filete duplo é o sinal de "idem" */
.passos li.bloco { display: block; padding: 0; border-bottom: 1px solid var(--linha); }
.passos li.bloco > .rep { display: flex; align-items: baseline; gap: 8px; padding: 11px 0 2px; }
.passos li.bloco > .rep b { font: 800 26px/1 var(--num); }
.passos li.bloco > .rep span { font-size: 14px; color: var(--borra); font-weight: 600; }
.passos li.bloco ol { list-style: none; margin: 0 0 6px; padding: 0 0 0 16px; position: relative; }
.passos li.bloco ol::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 6px; border-left: 2px solid var(--marca); border-right: 2px solid var(--par-fio); }
.passos li.bloco ol li { display: grid; grid-template-columns: 58px 1fr; gap: 12px; padding: 8px 0; }
.z-pt { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }

/* ---------- folha (ações por baixo) ---------- */
.veu { position: fixed; inset: 0; background: rgba(8, 9, 11, .58); z-index: 40; display: flex; align-items: flex-end; justify-content: center; animation: veu .15s ease-out; }
.folha { width: 100%; max-width: 480px; max-height: 92dvh; overflow: auto; background: var(--fundo); border-radius: 16px 16px 0 0; padding: 8px 18px calc(env(safe-area-inset-bottom) + 20px); animation: sobe .2s ease-out; }
.folha .pega { width: 40px; height: 4px; border-radius: 2px; background: var(--linha-forte); margin: 4px auto 12px; }
.folha h2 { font: 700 26px/1.08 var(--num); margin-bottom: 4px; }
.folha .fecha { position: sticky; float: right; top: 0; background: none; border: 0; padding: 6px; color: var(--borra); }
.folha .fecha svg { width: 22px; height: 22px; }
.folha .rodape { display: flex; gap: 10px; margin-top: 18px; }
.folha .rodape .bt { flex: 1; }
@keyframes veu { from { opacity: 0; } }
@keyframes sobe { from { transform: translateY(24px); opacity: .6; } }

.mud { padding: 12px 0; border-bottom: 1px solid var(--linha); }
.mud .oque { font-weight: 600; }
.mud .depara { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 14.5px; margin-top: 3px; color: var(--borra); }
.mud .depara s { text-decoration-thickness: 1px; }
.mud .depara b { color: var(--tinta); font-weight: 600; }
.mud .depara svg { width: 14px; height: 14px; }
.mud .pq { font-size: 14.5px; margin-top: 6px; }
.mud .selo { margin-top: 7px; }
/* o plano refeito: os dois fios vertem de novo, um depois do outro */
.verte { display: grid; justify-items: center; margin: 4px 0 10px; height: 44px; color: var(--marca); }
.verte svg { height: 44px; width: auto; display: block; }
.verte path, .capa .aspas path { transform-box: fill-box; transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .verte:not(.vai) path { transform: scaleY(0); }
  .verte.vai path, .capa .aspas path { animation: verte .5s cubic-bezier(.2, .75, .25, 1) both; }
  .verte.vai path + path, .capa .aspas path + path { animation-delay: .16s; }
}
@keyframes verte { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.barra-fixa { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; background: var(--fundo); border-top: 1px solid var(--linha); padding: 10px 18px calc(env(safe-area-inset-bottom) + 10px); display: flex; gap: 8px; z-index: 25; }
.barra-fixa .bt { flex: 1; padding: 0 8px; }
.torrada { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 84px); z-index: 60; background: var(--tinta); color: var(--fundo); padding: 10px 14px; border-radius: var(--raio); font-size: 14.5px; font-weight: 600; display: flex; gap: 14px; align-items: center; max-width: 440px; width: calc(100% - 36px); justify-content: space-between; }
.torrada button { background: none; border: 0; color: inherit; font-weight: 700; text-decoration: underline; padding: 4px; }

/* ---------- semana (régua vertical) ---------- */
.dia { position: relative; padding: 0 0 16px; }
.dia > .quando { position: absolute; left: calc(var(--fio) - var(--col) - 46px); top: 0; width: 32px; text-align: right; }
.dia > .quando b { display: block; font: 700 15px/1 var(--num); letter-spacing: .02em; color: var(--borra); text-transform: none; }
.dia > .quando span { display: block; font: 700 19px/1.05 var(--num); font-feature-settings: "tnum"; color: var(--borra); }
.dia.hoje > .quando b, .dia.hoje > .quando span { color: var(--tinta); font-weight: 800; }
.dia > .marco { position: absolute; left: calc(var(--fio) - var(--col)); top: 8px; transform: translateX(-50%); }
.dia > .marco.xic { top: -4px; }
.dia .vazio { color: var(--borra); font-size: 14.5px; padding: 5px 0 6px; }
.dia .cab { display: flex; justify-content: flex-end; min-height: 0; }
.doppio-dia { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14.5px; font-weight: 700; }
.doppio-dia .simbolo { height: 14px; width: auto; flex: none; color: var(--marca); }
/* vale um doppio: o espresso duplo antes do treino forte */
.vale-doppio { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--papel); }
.vale-doppio .xicara { width: 30px; height: 30px; }
.vale-doppio b { display: block; font: 700 20px/1.1 var(--num); }
.vale-doppio .txt { margin-top: 3px; font-size: 15px; }
.vale-doppio .dobra { margin-top: 8px; }
.vale-doppio .dobra > summary { font-size: 14.5px; }
.vale-doppio .bt.liso { margin-top: 6px; font-size: 14px; padding: 0; }
.vale-doppio-linha { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14.5px; font-weight: 600; }
.vale-doppio-linha .xicara { width: 22px; height: 22px; flex: none; }
/* dia com dois treinos: o sinal do par */
.dia .dobro { display: block; margin: 5px 0 0 auto; height: 10px; width: auto; color: var(--marca); }
.semana-linha { --fio: 50px; --col: 72px; }
.resumo-sem { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--linha); border-radius: 6px; margin-top: 14px; background: var(--papel); }
.resumo-sem > div { padding: 10px 12px; border-right: 1px solid var(--linha); }
.resumo-sem > div:last-child { border-right: 0; }
.resumo-sem b { display: block; font: 700 26px/1 var(--num); }
.resumo-sem span { font-size: 12.5px; color: var(--borra); font-weight: 600; }
.tid { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 12px; background: var(--linha); gap: 2px; }
.tid i { display: block; height: 100%; }
.navsem { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.navsem button { width: 40px; height: 40px; border-radius: var(--raio); border: 1.5px solid var(--borda); background: none; display: grid; place-items: center; }
.navsem button svg { width: 20px; height: 20px; }
.navsem button:disabled { opacity: .3; }

/* ---------- plano (régua horizontal) ---------- */
.contagem { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.contagem b { font: 800 84px/0.82 var(--num); }
.contagem span { font-size: 15px; color: var(--borra); font-weight: 600; line-height: 1.25; }
.regua { margin: 8px -18px 0; padding: 0 18px 6px; overflow-x: auto; scrollbar-width: none; }
.regua::-webkit-scrollbar { display: none; }
.regua svg { display: block; }
.regua text { font-family: var(--num); font-weight: 700; fill: var(--borra); }
.fase { padding: 12px 0; border-bottom: 1px solid var(--linha); display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
.fase b { font: 700 20px/1.1 var(--num); }
.fase span { color: var(--borra); font-size: 13.5px; font-weight: 600; text-align: right; }
.fase p { grid-column: 1 / -1; font-size: 14.5px; color: var(--borra); }
.fase.atual { padding-left: 14px; background: linear-gradient(90deg, var(--marca) 0 2px, transparent 2px 4px, var(--par-fio) 4px 6px, transparent 6px) no-repeat 0 12px / 6px calc(100% - 24px); }
.fase.atual p { color: var(--tinta); }

/* ---------- progresso ---------- */
.graf { margin-top: 10px; }
.graf svg { display: block; width: 100%; height: auto; overflow: visible; }
.graf text { font-family: var(--texto); font-size: 11px; fill: var(--borra); }
.graf .rot-num { font-family: var(--num); font-weight: 700; font-size: 13px; fill: var(--tinta); }
.nivel { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--linha); align-items: center; font-size: 15px; }
.nivel .marcas { grid-column: 1 / -1; display: flex; gap: 3px; }
.nivel .marcas i { flex: 1; height: 6px; border-radius: 1px; background: var(--linha); }
.nivel .marcas i.on { background: var(--tinta); }
.nivel b { font: 700 18px/1 var(--num); font-feature-settings: "tnum"; }

/* ---------- início: a capa ---------- */
.tela.capa { padding-bottom: calc(env(safe-area-inset-bottom) + 30px); }
/* a primeira tela inteira: sinal, assinatura, promessa e o botão; o resto vem rolando */
.capa-1 { min-height: calc(100dvh - 79px - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.capa .aspas { height: clamp(64px, 15vh, 150px); width: auto; display: block; align-self: flex-start; flex: none; margin-top: 1vh; color: var(--marca); }
.capa h1 { font: 800 clamp(58px, 18.5vw, 88px)/0.9 var(--num); margin-top: 18px; color: var(--marca); }
.capa h1 span { display: block; color: var(--par-fio); }
.capa .lema { margin-top: 18px; font-size: 19px; font-weight: 700; line-height: 1.25; max-width: 20em; }
.capa .como { margin-top: 8px; font-size: 15.5px; color: var(--borra); max-width: 27em; }
.capa .pe { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; }
.capa .campo { margin-top: 0; }
.capa-2 { margin-top: 40px; padding-top: 26px; position: relative; }
.capa-2::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 6px; border-top: 2px solid var(--marca); border-bottom: 2px solid var(--par-fio); }
.capa-2 h2 { font: 700 28px/1.05 var(--num); }
.pilares { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; }
.pilares li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; }
.pilares .simbolo { height: 18px; width: auto; margin-top: 3px; color: var(--marca); }
.pilares b { display: block; font: 700 21px/1.1 var(--num); }
.pilares span { display: block; font-size: 15px; color: var(--borra); margin-top: 3px; }
.fato { margin: 24px 0 12px; padding: 14px 16px 14px; background: var(--toque); border-radius: var(--raio); }
.fato p { font-size: 16.5px; font-weight: 600; line-height: 1.35; }
.fato figcaption { margin-top: 10px; font-size: 13.5px; color: var(--borra); }
.fato .selo { margin-right: 8px; }
/* na faixa da capa: o botão de tema claro ou escuro */
.aparencia { display: flex; align-items: center; gap: 10px; }
.tema-bt { width: 40px; height: 40px; margin-right: -9px; display: grid; place-items: center; background: none; border: 0; color: var(--sobre-faixa); border-radius: 50%; }
.tema-bt svg { width: 22px; height: 22px; }
/* entrevista: trazer o histórico do relógio */
.trazer { margin-top: 14px; padding: 12px 14px 14px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--papel); }
.trazer > b { display: block; font: 700 19px/1.1 var(--num); }
.trazer > .peq { margin-top: 3px; }
.trazer-corpo { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
.trazer .bt[aria-expanded="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--fundo); }
.etapas { display: flex; gap: 4px; margin: 4px 0 18px; }
.etapas i { flex: 1; height: 3px; background: var(--linha); border-radius: 2px; }
.etapas i.on { background: var(--tinta); }
.opcoes { display: grid; gap: 8px; margin-top: 12px; }
.opcoes button { display: grid; grid-template-columns: 1fr auto; align-items: center; text-align: left; gap: 2px 12px; padding: 12px 14px; border-radius: var(--raio); border: 1.5px solid var(--borda); background: var(--papel); }
.opcoes button b { font-weight: 700; font-size: 16.5px; }
.opcoes button small { color: var(--borra); font-size: 13.5px; grid-column: 1; }
.opcoes button span { grid-row: 1 / span 2; grid-column: 2; font: 700 20px/1 var(--num); color: var(--borra); }
.opcoes button[aria-pressed="true"] { border-color: var(--tinta); background: var(--toque); box-shadow: inset 0 0 0 1px var(--tinta); }
.opcoes button[aria-pressed="true"] span { color: var(--tinta); }
.dias-min { display: grid; gap: 8px; margin-top: 10px; }
.dias-min > div { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 10px; }
.dias-min label { font-weight: 600; }
.folha .dias-min > div { grid-template-columns: 108px 1fr; } .folha .dias-min label { white-space: nowrap; } /* na folha, a chave e o dia ficam na mesma linha */

.ref { padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.ref a { word-break: break-word; }
.princ { padding: 16px 0; border-bottom: 1px solid var(--linha); }
.princ h3 { font: 700 21px/1.12 var(--num); margin: 8px 0 6px; }
.princ p { font-size: 15px; }
.princ .faz { margin-top: 8px; padding-left: 12px; border-left: 3px solid var(--tinta); }
.princ .fontes { margin-top: 8px; font-size: 13px; color: var(--borra); }
.princ .fontes a { color: var(--borra); font-weight: 400; text-decoration-thickness: 1px; }

@media (min-width: 520px) { .app { border-left: 1px solid var(--linha); border-right: 1px solid var(--linha); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

details > summary, details > summary.rotulo { cursor: pointer; color: var(--tinta); list-style: none; display: inline-flex; align-items: center; gap: 7px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "+"; font: 800 24px/0.8 var(--num); width: 13px; text-align: center; flex: none; }
details[open] > summary::before { content: "\2212"; }
.dobra { margin-top: 12px; }
.dobra > summary { font-weight: 700; }
.dobra-corpo { margin-top: 8px; }
.kv.esq { grid-template-columns: minmax(84px, auto) 1fr; }
.kv.esq dd { text-align: left; font-weight: 400; font-feature-settings: normal; }
.kv.esq dd small { display: block; color: var(--borra); font-size: 13.5px; }
.kv.muda { gap: 10px 16px; }
.kv.muda dt { color: var(--tinta); font-weight: 700; }
.dur { white-space: nowrap; font-family: var(--num); font-weight: 700; line-height: 1; }
.dur small { font: 600 14px/1 var(--texto); color: var(--borra); margin-left: 3px; }

/* entrevista: de onde cada esporte parte, e as regras que guiam o plano */
.partida { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 8px; }
.partida th, .partida td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--linha); }
.partida thead th { font-size: 13px; font-weight: 600; color: var(--borra); padding-bottom: 6px; }
.partida tbody th { font-weight: 700; white-space: nowrap; }
.partida td:last-child { font-weight: 600; padding-right: 0; }
.guia { list-style: none; margin: 8px 0 0; padding: 0; font-size: 15px; }
.guia li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: start; padding: 7px 0; border-bottom: 1px solid var(--linha); }
.guia .selo { justify-self: start; }