/* Raia — estilos do app.
   Layout: cabeçalho fixo com a faixa de "corda de raia"; conteúdo em coluna de até 1120px;
   cartões do cronômetro em grade (1 coluna no celular, 2 a partir de 760px). */

@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fontes/big-shoulders-display-800.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fontes/ibm-plex-sans-var.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fontes/ibm-plex-mono-600.woff2) format("woff2");
}

:root {
  --bg: #edf3f5;
  --surface: #ffffff;
  --surface-2: #f4f8f9;
  --ink: #0d1c26;
  --ink-2: #465867;
  --muted: #6c7d89;
  --line: #d5e0e5;
  --axis: #b4c3ca;
  --accent: #0a6c8c;
  --accent-ink: #ffffff;
  --rope: #e5a300;
  --rope-soft: #fcf1d2;
  --good: #0ca30c;
  --good-text: #006300;
  --good-soft: #e1f3e1;
  --danger: #b42b2b;
  --danger-soft: #fbe5e5;
  --parar: #c62828;
  --parar-ink: #ffffff;
  --series: #2a78d6;
  --series-soft: rgba(42, 120, 214, .10);
  --tip-bg: #0d1c26;
  --tip-ink: #ffffff;
  /* a piscina do planejamento (ilustração): água, faixa do fundo, brilho, espuma e o nadador */
  --agua: #5cb8d4; --fundo-raia: rgba(4, 58, 78, .32); --brilho: rgba(255, 255, 255, .2); --espuma: #ffffff; --pele: #f1c09a;
  /* períodos do planejamento (mesociclos): validados para daltonismo na ordem em que se sucedem */
  --fase-retreino: #4a3aa7;
  --fase-anaerobia: #eb6834;
  --fase-aerobia: #2a78d6;
  --fase-supercomp: #1baf7a;
  /* escala de PSE do projeto (verde = sem esforço → vermelho = máximo), iguais nos dois temas;
     -tinta é a cor do número em cima de cada uma */
  --pse-0: #2e7d32; --pse-0-tinta: #ffffff;
  --pse-1: #43a047; --pse-1-tinta: #0b1f0c;
  --pse-3: #8bc34a; --pse-3-tinta: #13210a;
  --pse-4: #f2c418; --pse-4-tinta: #2a2100;
  --pse-5: #f6a21a; --pse-5-tinta: #2a1800;
  --pse-7: #f57c20; --pse-7-tinta: #2a1200;
  --pse-9: #d9480f; --pse-9-tinta: #ffffff;
  --pse-10: #b3261e; --pse-10-tinta: #ffffff;
  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* LARGAR e PARAR: fonte do próprio aparelho (no Android, Arial) */
  --font-botao: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1319; --surface: #111d25; --surface-2: #0e1920; --ink: #e8f1f4; --ink-2: #a6b8c2; --muted: #82949f;
    --line: #22333d; --axis: #3a4d57; --accent: #43b4d8; --accent-ink: #03161d; --rope: #f2b630; --rope-soft: #352b12;
    --good: #0ca30c; --good-text: #0ca30c; --good-soft: #11301a; --danger: #f07a7a; --danger-soft: #3a1717; --parar: #d93636; --parar-ink: #ffffff;
    --series: #3987e5; --series-soft: rgba(57, 135, 229, .16); --tip-bg: #e8f1f4; --tip-ink: #0d1c26;
    --agua: #133340; --fundo-raia: rgba(0, 0, 0, .35); --brilho: rgba(255, 255, 255, .05); --espuma: #d8eef6; --pele: #d9a27a;
    --fase-retreino: #9085e9; --fase-anaerobia: #d95926; --fase-aerobia: #3987e5; --fase-supercomp: #199e70;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
body {
  color: var(--ink);
  font: 400 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
[hidden] { display: none !important; }
button, select, input, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h2 { font: 800 40px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
h3 { font-size: 17px; font-weight: 600; }
p { margin: 0; }

/* ---------- cabeçalho: RAIA à esquerda, logo do projeto no centro, sincronização à direita ---------- */
.topo { position: sticky; top: 0; z-index: 20; background: var(--bg); padding-top: env(safe-area-inset-top, 0px); }
.topo-in { max-width: 1120px; margin: 0 auto; padding: 12px 16px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.marca { justify-self: start; font: 800 18px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; padding: 6px 0; }
.marca:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.topo .logo-projeto { width: 92px; color: var(--ink); }
.topo .sincronia { justify-self: end; }
html[data-modo="visitante"] .topo, html[data-modo="sem-papel"] .topo { display: none; }

/* logo do projeto: a imagem é uma máscara e pinta com a cor do texto (currentColor) */
.logo-projeto, .logo-projeto-simbolo {
  display: inline-block; flex: none; background-color: currentColor;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.logo-projeto { width: 160px; aspect-ratio: 540 / 319; -webkit-mask-image: url(../marca/logo-completo.png); mask-image: url(../marca/logo-completo.png); }
.logo-projeto-simbolo { width: 64px; aspect-ratio: 365 / 170; -webkit-mask-image: url(../marca/logo-simbolo.png); mask-image: url(../marca/logo-simbolo.png); }

/* menu fixo embaixo (some quando tem menos de 2 itens) */
.nav-baixo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 0 max(0px, calc((100% - 640px) / 2)) env(safe-area-inset-bottom, 0px);
}
.nav-baixo a { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 60px; padding: 0 8px; margin-top: -1px; border-top: 3px solid transparent; font: 600 14px/1.2 var(--font-body); color: var(--ink-2); text-decoration: none; }
.nav-baixo a[aria-current="page"] { color: var(--accent); border-top-color: var(--accent); }
.nav-baixo a:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.com-menu-baixo .wrap { padding-bottom: calc(56px + 64px + env(safe-area-inset-bottom, 0px)); }
.com-menu-baixo .toast { bottom: calc(16px + 64px + env(safe-area-inset-bottom, 0px)); }
.corda { height: 5px; background: repeating-linear-gradient(90deg, var(--rope) 0 12px, var(--accent) 12px 24px, var(--surface) 24px 36px, var(--accent) 36px 48px); }
.faixa { max-width: 1120px; margin: 10px auto 0; padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; background: var(--rope-soft); border-radius: 10px; }
.faixa.erro { background: var(--danger-soft); color: var(--ink); }

/* ---------- estrutura ---------- */
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 16px; padding-block: 20px 56px; outline: none; }
.tela { display: flex; flex-direction: column; gap: 16px; }
.cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cabeca > div { min-width: 0; }
.voltar { font-size: 14px; font-weight: 600; text-decoration: none; display: inline-block; padding: 4px 0 8px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; min-width: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.lbl { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.sub { color: var(--ink-2); font-size: 14px; }
.mut { color: var(--muted); }
.dica { color: var(--ink-2); font-size: 14px; max-width: 70ch; }
.dica b { color: var(--ink); }
.linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.vazio { text-align: center; padding: 32px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vazio p { max-width: 46ch; color: var(--ink-2); }

/* ---------- botões e campos ---------- */
.btn { appearance: none; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 0 16px; min-height: 44px; font-weight: 600; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primario { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.fantasma { background: transparent; }
.btn.perigo { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn.pequeno { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.link { appearance: none; background: none; border: 0; color: var(--accent); font-weight: 600; padding: 6px 0; cursor: pointer; font-size: 14px; }
.link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo input, .campo select, .campo textarea, select.solto {
  min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 8px 12px; width: 100%;
}
.campo textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible, select.solto:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.campo small { color: var(--muted); font-size: 12px; }
.form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); align-items: end; }
.form .cheio { grid-column: 1 / -1; }
.card > h3 + .form, .card > h3 + p + .form { margin-top: 12px; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.erro-campo { color: var(--danger); font-size: 13px; min-height: 1em; }

.seg { display: inline-flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg label { padding: 6px 14px; border-radius: 8px; cursor: pointer; font-weight: 500; min-height: 40px; display: inline-flex; align-items: center; }
.seg input:checked + label { background: var(--ink); color: var(--bg); }
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }
.seg input:disabled + label { opacity: .5; cursor: not-allowed; }
.ajustes { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; }

/* ---------- listas ---------- */
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista > li { border-top: 1px solid var(--line); }
.lista > li:first-child { border-top: 0; }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 0; color: inherit; text-decoration: none; }
.item b { font-weight: 600; }
.item .sub { grid-column: 1; }
.item .lado { grid-column: 2; grid-row: 1 / span 2; text-align: right; font: 600 18px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; }
.item .lado .btn { font: 600 13px/1 var(--font-body); }
a.item:hover b { color: var(--accent); }
a.item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.turmas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.turma-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.turma-card:hover { border-color: var(--accent); }
.turma-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.turma-card .nome { font: 800 26px/1.05 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.etiqueta { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }

/* ---------- cronômetro: um cartão por nadador ---------- */
.barra-largada { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.barra-largada .dica { flex: 1 1 260px; }
.atletas { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 760px) { .atletas { grid-template-columns: 1fr 1fr; } }
.atleta { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 12px 12px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; min-width: 0; }
.atleta[data-st="nadando"] { background: var(--rope-soft); border-color: var(--rope); box-shadow: inset 5px 0 0 var(--rope); }
.at-info { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.at-nome { font-weight: 600; font-size: 17px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-width: 0; }
.at-melhor { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 10px; min-width: 0; }
.at-nota { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12px; color: var(--ink-2); }
.at-nota:empty { display: none; }
.at-info .link { padding: 2px 0; font-size: 13px; }
.at-acao { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 132px; }
.at-relogio { font: 600 26px/1 var(--font-mono); font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
.at-relogio:empty { display: none; }
.atleta[data-st="chegou"] .at-relogio { font-size: 20px; color: var(--ink-2); }
.btn-cron { appearance: none; border: 0; border-radius: 12px; min-height: 58px; padding: 0 12px; font: 800 21px/1 var(--font-botao); letter-spacing: -.02em; cursor: pointer; touch-action: manipulation; }
.btn-cron.largar { background: var(--accent); color: var(--accent-ink); }
.btn-cron.parar { background: var(--parar); color: var(--parar-ink); }
.btn-cron:disabled { opacity: .45; cursor: default; }
.btn-cron:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.nad-rep { font-size: 11px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
.at-nome-btn { appearance: none; background: none; border: 0; padding: 0; min-height: 36px; font: 600 17px/1.2 var(--font-body); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-align: left; text-decoration: underline; text-decoration-color: var(--axis); text-underline-offset: 4px; }
.at-nome-btn .seta { color: var(--accent); font-size: 22px; line-height: 1; }
.at-nome-btn:hover { text-decoration-color: var(--accent); }
.at-nome-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- fim do treino: encerrar por nadador ou a turma toda ---------- */
.at-encerrar { min-height: 44px; margin-top: 4px; }
.encerrados { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.atleta.encerrado { background: var(--surface-2); }
span.sincronia { cursor: default; }
.acoes-coluna { display: flex; flex-direction: column; gap: 8px; }
dialog.pergunta[open] { display: flex; flex-direction: column; gap: 14px; }
dialog.pergunta h3 { margin-bottom: 0; }
@media (max-width: 599px) { dialog.pergunta { margin: auto auto calc(16px + env(safe-area-inset-bottom, 0px)); } }

/* resumo do treino: o cartão que vira imagem no "Compartilhar" */
.resumo-cartao { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.resumo-faixa { background: var(--accent); color: var(--accent-ink); padding: 22px 20px 18px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.resumo-faixa .logo-projeto { width: 150px; }
.resumo-numeros { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.resumo-num { display: flex; flex-direction: column; gap: 6px; }
.resumo-num b { font: 600 30px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.resumo-num span { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.resumo-recordes { padding: 14px 16px 6px; }
.linha-nuvem { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------- planejamento: a raia do semestre (piscina vista de cima) ---------- */
.raia-semestre { display: flex; flex-direction: column; gap: 10px; }
.raia-agua { position: relative; height: 72px; border-radius: 10px; background: var(--agua); overflow: hidden; }
.raia-agua::before, .raia-agua::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; z-index: 2; background: repeating-linear-gradient(90deg, var(--rope) 0 12px, var(--accent) 12px 24px, #fff 24px 36px, var(--accent) 36px 48px); }
.raia-agua::before { top: 0; }
.raia-agua::after { bottom: 0; }
/* brilho da água se mexendo devagar */
.raia-brilho { position: absolute; inset: 0; background: repeating-linear-gradient(112deg, transparent 0 26px, var(--brilho) 26px 29px, transparent 29px 58px), repeating-linear-gradient(68deg, transparent 0 34px, var(--brilho) 34px 36px, transparent 36px 70px); background-size: 220px 100%, 260px 100%; animation: agua-brilho 9s linear infinite; }
/* faixa escura do fundo da piscina, com o T nas pontas */
.raia-linha { position: absolute; left: 6%; right: 6%; top: 50%; height: 6px; margin-top: -3px; background: var(--fundo-raia); border-radius: 1px; }
.raia-linha::before, .raia-linha::after { content: ""; position: absolute; top: -9px; width: 6px; height: 24px; background: inherit; border-radius: 1px; }
.raia-linha::before { left: 0; }
.raia-linha::after { right: 0; }
.nadador { position: absolute; z-index: 1; top: 50%; left: calc(54px + (100% - 108px) * var(--pos, 0)); width: 104px; height: 44px; margin: -22px 0 0 -52px; transition: left 2.6s cubic-bezier(.25, .7, .3, 1); filter: drop-shadow(0 2px 1.5px rgba(3, 30, 40, .28)); }
.nadador svg { display: block; overflow: visible; }
.nad-corpo { transform-box: view-box; transform-origin: 52px 22px; animation: nad-rolar .7s ease-in-out infinite alternate; }
.nad-tronco, .nad-braco ellipse { fill: var(--pele); }
.nad-costas { fill: none; stroke: rgba(60, 25, 10, .16); stroke-width: 1.2; stroke-linecap: round; }
.nad-perna, .nad-braco path { fill: none; stroke: var(--pele); stroke-linecap: round; }
.nad-perna { stroke-width: 5; transform-box: view-box; animation: nad-pernada .28s ease-in-out infinite alternate; }
.nad-perna.p1 { transform-origin: 39px 19.4px; }
.nad-perna.p2 { transform-origin: 39px 24.6px; animation-direction: alternate-reverse; }
.nad-braco path { stroke-width: 4.6; }
.nad-braco { transform-box: view-box; }
.nad-braco.b1 { transform-origin: 60.5px 14.6px; animation: nad-bracada-a 1.4s linear infinite; }
.nad-braco.b2 { transform-origin: 60.5px 29.4px; animation: nad-bracada-b 1.4s linear infinite; animation-delay: -.7s; }
.nad-sunga { fill: var(--accent); }
.nad-touca { fill: var(--rope); }
.nad-touca-brilho { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: .75; }
.nad-espuma circle { fill: var(--espuma); transform-box: fill-box; transform-origin: center; animation: nad-espuma .56s ease-out infinite; }
.nad-espuma .e2 { animation-delay: -.14s; }
.nad-espuma .e3 { animation-delay: -.28s; }
.nad-espuma .e4 { animation-delay: -.42s; }
.nad-esteira path { fill: none; stroke: var(--espuma); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 5 7; opacity: .7; animation: nad-esteira .9s linear infinite; }
.nad-proa { fill: none; stroke: var(--espuma); stroke-width: 2.2; stroke-linecap: round; transform-box: view-box; transform-origin: 82px 22px; animation: nad-proa .7s ease-in-out infinite alternate; }
@keyframes nad-bracada-a { 0% { transform: rotate(0deg); } 58% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
@keyframes nad-bracada-b { 0% { transform: rotate(0deg); } 58% { transform: rotate(-180deg); } 100% { transform: rotate(-360deg); } }
@keyframes nad-rolar { from { transform: scaleY(1); } to { transform: scaleY(.9); } }
@keyframes nad-pernada { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes nad-espuma { 0% { transform: scale(.4); opacity: .95; } 100% { transform: scale(1.5) translateX(-3px); opacity: 0; } }
@keyframes nad-esteira { to { stroke-dashoffset: -24; } }
@keyframes nad-proa { from { opacity: .55; transform: scaleY(.9); } to { opacity: .95; transform: scaleY(1.06) translateX(1px); } }
@keyframes agua-brilho { to { background-position: -220px 0, 260px 0; } }
@media (prefers-reduced-motion: reduce) { .nadador { transition: none; } .nadador *, .raia-brilho { animation: none !important; } }

.semanas-barra { display: grid; gap: 4px; }
.seg-semana { appearance: none; border: 0; padding: 7px 0; background: none; cursor: pointer; min-width: 0; }
.seg-semana::before { content: ""; display: block; height: 6px; border-radius: 3px; background: var(--line); }
.seg-semana.feita::before { background: var(--good); }
.seg-semana.atual::before { background: linear-gradient(90deg, var(--rope) var(--feito, 50%), var(--line) var(--feito, 50%)); }
.seg-semana:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }
.raia-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.raia-contador { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.raia-contador b { font: 600 16px/1 var(--font-mono); letter-spacing: .04em; color: var(--ink); margin-right: 4px; }

/* gráfico do semestre */
.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.leg-item { display: inline-flex; align-items: center; gap: 6px; }
.leg-cor { width: 10px; height: 10px; border-radius: 3px; }
.leg-barra { width: 9px; height: 12px; border-radius: 3px 3px 0 0; background: var(--ink-2); opacity: .32; }
.leg-barra.cheia { opacity: 1; }
.leg-traco { width: 14px; height: 3px; border-radius: 2px; background: var(--ink); }
.leg-ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.leg-losango { width: 7px; height: 7px; border: 1.5px solid var(--ink); transform: rotate(45deg); }
.grafico-semestre { min-height: 210px; }
.grafico-semestre svg { overflow: visible; }
.g-grade { stroke: var(--line); }
.g-base { stroke: var(--axis); }
.g-rotulo { fill: var(--muted); font: 600 10px var(--font-mono); }
.g-forte { fill: var(--ink); }
.g-divisa { stroke: var(--axis); stroke-dasharray: 3 3; }
.g-escolhida { fill: var(--surface-2); stroke: var(--line); }
.g-media { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.g-atual { fill: none; stroke: var(--ink); stroke-width: 2; }
.g-vcrit { fill: var(--ink); }
.g-aval { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.g-alvo { fill: transparent; cursor: pointer; outline: none; }
.g-alvo:focus-visible { stroke: var(--accent); stroke-width: 2; }
.balao span { display: block; }

/* a semana escolhida e o treino de um dia */
.semana-periodo { display: flex; align-items: center; gap: 10px; margin-top: 6px; font: 800 26px/1.05 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.cor-periodo { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.treinos-semana { display: grid; gap: 12px; margin-top: 14px; }
@media (min-width: 900px) { .treinos-semana { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.treino-bloco { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.card.plano .treino-bloco { border: 0; padding: 0; margin-top: 4px; background: none; }
.treino-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.treino-cab b { font: 800 19px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.treino-partes { margin: 4px 0 0; }
.treino-partes dt { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.treino-partes dd { margin: 3px 0 0; }
.treino-partes dd > div { display: flex; flex-direction: column; gap: 2px; }
.series { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.series li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; }
.series li > b { font: 600 14px/1.5 var(--font-mono); color: var(--accent); }
.series li > div { display: flex; flex-direction: column; gap: 1px; }
.series li.nota { display: block; font-size: 13px; color: var(--ink-2); }
.contexto-treino { gap: 6px 12px; }
.semana-link { text-decoration: none; padding: 3px 10px; font-size: 11px; }
.semana-link:hover { border-color: var(--accent); color: var(--accent); }
.semana-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* índice e escala */
.item-semana, .item-escala { width: 100%; appearance: none; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.item-semana b { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.item-semana.escolhida { background: var(--surface-2); border-radius: 8px; padding-inline: 8px; margin-inline: -8px; width: calc(100% + 16px); }
.item-semana:focus-visible, .item-escala:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.escala-dia { margin-top: 12px; }
.escala-dia > .lbl { display: flex; align-items: center; gap: 8px; }
.escala-dia.hoje > .lbl { color: var(--ink); }
.item-escala { grid-template-columns: 56px minmax(0, 1fr); }
.item-escala b { font: 600 15px/1.2 var(--font-mono); }
dialog.editor-semana { width: min(680px, calc(100% - 16px)); }
.editor-dias { display: flex; flex-direction: column; gap: 8px; }
.editor-dia { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.editor-dia > .form { margin-top: 10px; }
.vcrit .chip b { margin-left: 2px; }

/* ---------- PSE: escala, resposta e histórico ---------- */
.pse-escala { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.pse-linha { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 10px; background: color-mix(in srgb, var(--cor) 13%, var(--surface)); border: 1px solid color-mix(in srgb, var(--cor) 38%, var(--surface)); }
.pse-numeros { display: flex; gap: 6px; }
.pse-num { flex: 1; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: var(--cor); color: var(--tinta); font: 800 22px/1 var(--font-display); letter-spacing: .02em; }
button.pse-num { appearance: none; cursor: pointer; touch-action: manipulation; }
button.pse-num:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
button.pse-num[aria-checked="true"] { outline: 3px solid var(--ink); outline-offset: 2px; transform: scale(1.06); }
.pse-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pse-texto b { font: 800 16px/1.1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.pse-desc { font-size: 13px; line-height: 1.35; }
.pse-exemplo { font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.pse-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--cor); color: var(--tinta); font: 600 13px/1 var(--font-mono); vertical-align: middle; }
dialog.pergunta-pse { width: min(560px, calc(100% - 16px)); }
dialog.pergunta-pse h3:focus { outline: none; }
.pse-chip.grande { min-width: 40px; height: 34px; font-size: 20px; border-radius: 8px; }
dialog.pergunta-pse .dica { margin: 0; }
.pse-duracao { max-width: 220px; }
.pse-barras { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin-top: 14px; }
.pse-coluna { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.pse-coluna-area { height: 90px; width: 100%; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--axis); }
.pse-coluna-barra { width: min(22px, 100%); background: var(--cor); border-radius: 4px 4px 0 0; }
.pse-coluna-v { font: 600 11px/1 var(--font-mono); color: var(--ink-2); }
.pse-coluna-d { font: 600 10px/1 var(--font-mono); color: var(--muted); }
.item-pse { width: 100%; appearance: none; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
div.item-pse { cursor: default; }
.item-pse:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.encerrado-acoes { gap: 4px 16px; }
.pse-marcar { display: inline-flex; align-items: center; gap: 4px; }
.pse-pedido { border-left: 4px solid var(--rope); }
/* ---------- painel da semana da turma: números e evolução ---------- */
.painel-semana { display: flex; flex-direction: column; gap: 12px; }
.semana-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; }
.semana-seta { min-width: 44px; min-height: 44px; padding: 0; font-size: 24px; line-height: 1; }
.semana-nav-titulo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; min-width: 0; }
.semana-nav-titulo b { font: 800 22px/1.05 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.grafico-evolucao-turma { min-height: 190px; }
.grafico-evolucao-turma svg { overflow: visible; }
.g-evo-area { fill: var(--series); fill-opacity: .12; }
.g-evo-linha { fill: none; stroke: var(--series); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.g-evo-ponto { fill: var(--series); stroke: var(--surface); stroke-width: 2; }
.g-evo-anel { fill: none; stroke: var(--ink); stroke-width: 2; }

/* acompanhamento do esforço: planejado × PSE média */
.grafico-esforco { min-height: 200px; }
.grafico-esforco svg { overflow: visible; }
.g-plano { fill: var(--ink-2); fill-opacity: .28; }
.g-pse-linha { fill: none; stroke: var(--ink-2); stroke-opacity: .5; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-bigode { stroke: var(--ink-2); stroke-width: 2; stroke-opacity: .4; stroke-linecap: round; }
.g-pse-ponto { stroke: var(--surface); stroke-width: 2.5; }
.g-pse-num { font: 700 10.5px var(--font-mono); pointer-events: none; }
.leg-faixa { width: 14px; height: 10px; border-radius: 3px; background: var(--ink-2); opacity: .32; }
.leg-ponto-pse { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--pse-1), var(--pse-4) 45%, var(--pse-7) 70%, var(--pse-10)); }
.leg-bigode { width: 2px; height: 12px; border-radius: 1px; background: var(--ink-2); opacity: .5; }
.lista-texto { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); font-size: 14px; }

/* ---------- painel do nadador (repetições de hoje) ---------- */
.painel { position: fixed; inset: 0; z-index: 25; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (min-width: 900px) { .painel { left: auto; width: 480px; border-left: 1px solid var(--line); box-shadow: -10px 0 30px rgba(5, 15, 20, .18); } }
.painel-in { padding: 0 16px 40px; display: flex; flex-direction: column; gap: 14px; }
.painel-topo { position: sticky; top: 0; z-index: 1; background: var(--bg); padding: 10px 0 6px; border-bottom: 1px solid var(--line); }
.painel-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 12px 12px 16px; }
.painel-cab[data-st="nadando"] { background: var(--rope-soft); border-color: var(--rope); box-shadow: inset 5px 0 0 var(--rope); }
.painel-nome { font: 800 30px/1.05 var(--font-display); letter-spacing: .03em; text-transform: uppercase; outline: none; overflow-wrap: anywhere; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.chip.recorde { background: var(--good-soft); color: var(--good-text); }
.chip.neutro { color: var(--ink-2); border: 1px solid var(--line); }
.mini { display: block; flex: none; }
.presenca { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.presenca label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 14px; }
.presenca input { width: 18px; height: 18px; accent-color: var(--accent); }
details > summary { cursor: pointer; font-weight: 600; list-style-position: inside; min-height: 32px; }
details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sessao > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 10px 0; }
.sessao .t { font: 600 18px/1 var(--font-mono); font-variant-numeric: tabular-nums; min-width: 5.5ch; }
.sessao .quem { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.sessao .quem b { font-weight: 600; }
.sessao .quem span.meta { font-size: 13px; color: var(--muted); }
.sessao > li.nada { display: block; color: var(--muted); font-size: 14px; }

/* ---------- evolução ---------- */
.blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.bloco { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bloco .v { font: 600 clamp(22px, 6vw, 30px)/1.1 var(--font-mono); white-space: nowrap; }
.bloco .v.bom { color: var(--good-text); }
.bloco .d { font-size: 13px; color: var(--ink-2); }
.graficos { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) { .graficos { grid-template-columns: 1fr 1fr; } }
.grafico { position: relative; width: 100%; min-width: 0; margin-top: 10px; min-height: 230px; }
.grafico svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.grafico:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.dica-eixo { font-size: 12px; color: var(--muted); margin-top: 6px; }
.balao { position: absolute; pointer-events: none; background: var(--tip-bg); color: var(--tip-ink); border-radius: 8px; padding: 6px 10px; font-size: 12px; line-height: 1.35; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); z-index: 2; }
.balao b { display: block; font: 600 16px/1.2 var(--font-mono); }

.tabela { overflow-x: auto; margin-top: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
td.n, th.n { text-align: right; }
td.bom { color: var(--good-text); font-weight: 600; }
tr.riscado td { text-decoration: line-through; color: var(--muted); }

/* ---------- diálogo e avisos ---------- */
dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); padding: 20px; width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px); }
dialog::backdrop { background: rgba(5, 15, 20, .55); }
dialog h3 { margin-bottom: 12px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--tip-bg); color: var(--tip-ink); padding: 10px 16px; border-radius: 10px; font-size: 14px; max-width: calc(100% - 32px); z-index: 30; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.rodape { font-size: 12px; color: var(--muted); text-align: center; margin-top: 32px; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ---------- conta, sincronização e entrada ---------- */
.sincronia { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 4px 12px 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sincronia::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--axis); flex: none; }
.sincronia[data-fase="ok"]::before { background: var(--good); }
.sincronia[data-fase="enviando"]::before { background: var(--accent); }
.sincronia[data-fase="offline"]::before { background: var(--rope); }
.sincronia[data-fase="erro"] { color: var(--danger); border-color: var(--danger); }
.sincronia[data-fase="erro"]::before { background: var(--danger); }
.sincronia:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sincronia { max-width: 100%; min-width: 0; }
.sincronia span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.entrada { max-width: 440px; width: 100%; margin: clamp(16px, 10vh, 110px) auto 0; display: flex; flex-direction: column; gap: 24px; }
.entrada .logo-projeto { width: min(260px, 72%); align-self: center; color: var(--accent); }
.entrada .corda { border-radius: 3px; }
.entrada-titulo { display: flex; flex-direction: column; gap: 6px; }
.entrada-form { display: flex; flex-direction: column; gap: 8px; }
.btn.grande { min-height: 52px; font-size: 16px; width: 100%; }
.campo-codigo { min-height: 56px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 8px 14px; font: 600 26px/1 var(--font-mono); letter-spacing: .12em; text-align: center; text-transform: uppercase; width: 100%; }
.campo-codigo:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.mono { font-family: var(--font-mono); letter-spacing: .06em; }
.area-codigo:not(:empty) { margin-top: 14px; }
.caixa-codigo { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px dashed var(--accent); border-radius: 12px; background: var(--surface-2); }
.caixa-codigo .codigo { font: 600 32px/1.1 var(--font-mono); letter-spacing: .14em; }
.caixa-codigo .mensagem { overflow-wrap: anywhere; }
.conta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }

/* ---------- agenda e treino planejado ---------- */
.agenda { margin-top: 8px; }
.agenda-item { padding: 10px 0; display: flex; flex-direction: column; gap: 4px; }
.agenda-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.agenda-topo b { font-weight: 600; }
.agenda-topo .btn { margin-left: auto; }
.agenda-extra { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.editor-plano { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.editor-plano textarea { width: 100%; min-height: 84px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 8px 12px; resize: vertical; line-height: 1.5; }
.editor-plano textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.plano { display: flex; flex-direction: column; gap: 4px; border-left: 4px solid var(--accent); }
.plano-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.titulo-secao { margin-top: 8px; }
.presenca.dias label { min-width: 64px; justify-content: center; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }