/* Componentes do design system (prefixo ds-). Só tokens de ds.css: nenhuma cor, raio ou tamanho escrito direto.
   Cada classe daqui está documentada em /design/ (public/design/index.html); o teste-ds confere que os dois batem.
   Convenção: bloco `ds-nome`, parte `ds-nome__parte`, variação `ds-nome--variacao`, estado `is-estado`. */

/* ---- Base (reset e texto) ---- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--fundo);color:var(--texto);font-family:var(--fonte-texto);font-size:var(--tam-base);line-height:var(--altura-linha);-webkit-tap-highlight-color:transparent;}
h1,h2,h3,p{margin:0;}
button,input,textarea,select{font:inherit;color:inherit;}

/* ---- Caixa (superfície de card sem espaçamento: o espaçamento vem da tela). Com espaçamento, use .ds-card ---- */
.ds-caixa{background:var(--superficie);border-radius:var(--raio-grande);box-shadow:var(--sombra-card);}

/* ---- Aviso em caixa (mensagem de sucesso ou erro dentro da tela) ---- */
.ds-aviso{padding:10px var(--esp-3);border-radius:var(--raio-pequeno);font-size:var(--tam-sm);background:var(--ok-fundo);color:var(--ok-texto);}
.ds-aviso--erro{background:var(--erro-fundo);color:var(--erro-texto);}

/* ---- Tipografia ---- */
.ds-titulo{font-weight:var(--peso-forte);letter-spacing:var(--espaco-titulo);line-height:var(--altura-linha-titulo);}
.ds-numero{font-variant-numeric:tabular-nums;font-weight:var(--peso-forte);}

/* ---- Card ---- */
.ds-card{background:var(--superficie);border-radius:var(--raio-grande);box-shadow:var(--sombra-card);padding:var(--esp-4);}

/* ---- Botão ---- */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--esp-2);min-height:var(--alvo);padding:0 var(--esp-5);border:0;border-radius:var(--raio-card);background:var(--marca-fundo);color:var(--marca-texto);font-weight:var(--peso-medio);font-size:var(--tam-base);text-decoration:none;cursor:pointer;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),opacity var(--dur) var(--ease);-webkit-tap-highlight-color:transparent;}
.ds-btn:active{transform:scale(.98);}
.ds-btn:focus-visible{outline:none;box-shadow:var(--anel-foco);}
.ds-btn[disabled]{opacity:.6;cursor:default;}
.ds-btn--primario{background:var(--marca);color:var(--sobre-marca);}
.ds-btn--neutro{background:var(--campo);color:var(--texto);}
.ds-btn--perigo{background:var(--erro-fundo);color:var(--erro-texto);}
.ds-btn--pequeno{min-height:40px;padding:0 var(--esp-3);font-size:var(--tam-sm);}
.ds-btn--bloco{width:100%;}

/* ---- Campo (rótulo + entrada preenchida) ---- */
.ds-campo{display:flex;flex-direction:column;gap:6px;}
.ds-campo__rotulo,.ds-campo label{font-size:var(--tam-sm);font-weight:var(--peso-medio);color:var(--texto-2);}
.ds-campo__entrada,.ds-campo input{width:100%;min-height:var(--alvo);padding:0 var(--esp-4);border:1px solid var(--linha-forte);border-radius:var(--raio-card);background:var(--superficie);color:var(--texto);font-size:var(--tam-entrada);outline:none;transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.ds-campo input{height:var(--alvo);padding:0 14px;}
textarea.ds-campo__entrada{padding:var(--esp-3) var(--esp-4);min-height:96px;resize:vertical;}
.ds-campo__entrada:focus,.ds-campo input:focus{box-shadow:var(--anel-foco);border-color:transparent;}
.ds-campo__ajuda{font-size:var(--tam-xs);color:var(--texto-3);}
.ds-campo.is-erro .ds-campo__entrada{box-shadow:0 0 0 2px var(--erro);border-color:transparent;}
.ds-campo.is-erro .ds-campo__ajuda{color:var(--erro-texto);}

/* ---- Etiqueta de status (pílula suave) ---- */
.ds-chip{display:inline-flex;align-items:center;gap:var(--esp-1);padding:var(--esp-1) var(--esp-3);border-radius:var(--raio-chip);background:var(--campo);color:var(--texto-2);font-size:var(--tam-xs);font-weight:var(--peso-forte);white-space:nowrap;}
.ds-chip--ok{background:var(--ok-fundo);color:var(--ok-texto);}
.ds-chip--atencao{background:var(--atencao-fundo);color:var(--atencao-texto);}
.ds-chip--erro{background:var(--erro-fundo);color:var(--erro-texto);}
.ds-chip--info{background:var(--info-fundo);color:var(--info-texto);}
.ds-chip--marca{background:var(--marca-fundo);color:var(--marca-texto);}

/* ---- Linha da série (o coração do treino) ---- */
.ds-serie{display:grid;grid-template-columns:36px 62px minmax(0,1fr) minmax(0,1fr) var(--alvo);gap:var(--esp-2);align-items:center;}
.ds-serie__n{height:40px;border:0;border-radius:var(--raio-card);background:transparent;color:var(--texto-2);font-weight:var(--peso-forte);padding:0;text-align:center;}
.ds-serie__anterior{font-size:var(--tam-xs);color:var(--texto-3);text-align:center;font-variant-numeric:tabular-nums;}
.ds-serie__entrada{width:100%;height:var(--alvo);border:1px solid var(--linha-forte);border-radius:var(--raio-card);background:var(--superficie);color:var(--texto);font-size:var(--tam-lg);font-weight:var(--peso-forte);font-variant-numeric:tabular-nums;text-align:center;outline:none;}
.ds-serie__entrada:focus{box-shadow:var(--anel-foco);border-color:transparent;}
.ds-serie__ok{width:var(--alvo);height:var(--alvo);display:grid;place-items:center;padding:0;border:1px solid var(--linha-forte);border-radius:var(--raio-card);background:var(--superficie);color:var(--texto-3);cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);}
.ds-serie__ok svg{width:24px;height:24px;}
.ds-serie.is-feita .ds-serie__ok{background:var(--ok);border-color:transparent;color:var(--branco);animation:ds-pulso 320ms ease-out;}
.ds-serie.is-feita .ds-serie__entrada{background:color-mix(in srgb,var(--ok) 10%,var(--superficie));}

/* ---- Barra de abas (fixa embaixo) ---- */
.ds-abas{display:grid;grid-template-columns:repeat(4,1fr);background:var(--superficie);border-top:1px solid var(--linha);padding:var(--esp-2) max(0px,env(safe-area-inset-right)) calc(var(--esp-2) + env(safe-area-inset-bottom)) max(0px,env(safe-area-inset-left));}
.ds-abas__aba{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:var(--esp-1);min-height:48px;font-size:var(--tam-xs);font-weight:var(--peso-forte);color:var(--texto-3);cursor:pointer;}
.ds-abas__aba svg{width:24px;height:24px;}
.ds-abas__aba[aria-current=page],.ds-abas__aba.is-ativa{color:var(--marca);box-shadow:inset 0 -2px 0 var(--marca);}
.ds-abas--fixa{position:fixed;left:0;right:0;bottom:0;z-index:5;}

/* ---- Folha (sobe de baixo, com alça) ---- */
.ds-folha{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;background:var(--sombra-fundo-folha);animation:ds-entra-fundo var(--dur) var(--ease);}
.ds-folha__caixa{width:min(560px,100%);max-height:85vh;overflow:auto;background:var(--superficie);border-radius:var(--raio-grande) var(--raio-grande) 0 0;padding:var(--esp-3) var(--esp-4) calc(var(--esp-4) + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:var(--esp-3);animation:ds-sobe var(--dur-lento) var(--ease);}
.ds-folha__caixa::before{content:"";align-self:center;width:40px;height:5px;border-radius:var(--raio-pilula);background:var(--linha-forte);}

/* ---- Aviso rápido (pílula escura embaixo) ---- */
.ds-toast{position:fixed;left:50%;bottom:calc(var(--esp-6) + var(--alvo) + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;max-width:calc(100% - var(--esp-8));padding:var(--esp-3) var(--esp-5);border-radius:var(--raio-pilula);background:var(--texto);color:var(--fundo);font-weight:var(--peso-forte);font-size:var(--tam-sm);text-align:center;animation:ds-sobe-toast var(--dur-lento) var(--ease);}

/* ---- Gráfico de linha com pontos ---- */
.ds-grafico{width:100%;height:auto;}
.ds-grafico__linha{fill:none;stroke:var(--marca);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;}
.ds-grafico__ponto{fill:var(--marca);}
.ds-grafico__eixo{stroke:var(--linha);stroke-width:1;}
.ds-grafico__texto{font-size:10px;fill:var(--texto-3);}

/* ---- Calendário (bolinha preenchida nos dias treinados) ---- */
.ds-calendario{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--esp-1);text-align:center;}
.ds-calendario__dia-semana{font-style:normal;font-size:var(--tam-xs);font-weight:var(--peso-forte);color:var(--texto-3);}
.ds-calendario__dia{width:var(--esp-8);height:var(--esp-8);justify-self:center;display:grid;place-items:center;border-radius:50%;font-size:var(--tam-xs);color:var(--texto-2);}
.ds-calendario__dia.is-treinado{background:var(--marca);color:var(--sobre-marca);font-weight:var(--peso-forte);}
.ds-calendario__dia.is-hoje{outline:2px solid var(--texto-2);outline-offset:1px;}

/* ---- Tela vazia (desenho simples + frase amiga) ---- */
.ds-vazio{display:flex;flex-direction:column;align-items:center;gap:var(--esp-2);text-align:center;padding:var(--esp-6) var(--esp-4);color:var(--texto-2);}
.ds-vazio__icone{width:84px;height:84px;color:var(--marca);}
.ds-vazio__titulo{font-size:var(--tam-lg);font-weight:var(--peso-forte);color:var(--texto);}

/* ---- Barra de progresso ---- */
.ds-progresso{height:var(--esp-2);border-radius:var(--raio-pilula);background:var(--campo);overflow:hidden;}
.ds-progresso__barra{display:block;height:100%;border-radius:var(--raio-pilula);background:var(--marca);transition:width var(--dur-lento) var(--ease);}

/* ---- Movimento (utilitários e efeitos) ---- */
.ds-entra{animation:ds-entra var(--dur) var(--ease) both;animation-delay:calc(var(--i,0) * 50ms);}   /* itens de lista aparecem em sequência: style="--i:2" */
.ds-pulso{animation:ds-pulso 320ms ease-out;}
.ds-recorde{color:var(--marca);animation:ds-brilho 800ms ease-out;}
@keyframes ds-entra{from{opacity:0;transform:translateY(var(--desl));}to{opacity:1;transform:none;}}
@keyframes ds-pulso{0%{transform:scale(.86);}60%{transform:scale(1.08);}100%{transform:scale(1);}}
@keyframes ds-brilho{0%{transform:scale(.6);filter:drop-shadow(0 0 0 transparent);opacity:0;}40%{transform:scale(1.18);filter:drop-shadow(0 0 14px var(--marca));opacity:1;}100%{transform:scale(1);filter:drop-shadow(0 0 0 transparent);}}
@keyframes ds-sobe{from{transform:translateY(100%);}to{transform:none;}}
@keyframes ds-sobe-toast{from{opacity:0;transform:translate(-50%,var(--esp-4));}to{opacity:1;transform:translate(-50%,0);}}
@keyframes ds-entra-fundo{from{opacity:0;}to{opacity:1;}}

/* ---- Item com ícone em destaque (cards de lista: treino do dia, aluno, treino, interessado, número) ---- */
.ds-item{display:flex;align-items:flex-start;gap:var(--esp-3);width:100%;padding:var(--esp-4);border:0;border-radius:var(--raio-grande);background:var(--superficie);box-shadow:var(--sombra-card);color:var(--texto);font:inherit;text-align:left;cursor:default;transition:transform var(--dur) var(--ease);}
button.ds-item{cursor:pointer;-webkit-tap-highlight-color:transparent;}
button.ds-item:active{transform:scale(.99);}
.ds-item__icone{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:var(--raio-grande);background:var(--marca-fundo);color:var(--marca-texto);font-weight:var(--peso-forte);font-size:var(--tam-lg);}
.ds-item__icone svg{width:22px;height:22px;}
.ds-item__icone--ok{background:var(--ok-fundo);color:var(--ok-texto);}
.ds-item__icone--neutro{background:var(--campo);color:var(--texto-2);}
.ds-item__corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--esp-2);}
.ds-item__topo{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--esp-2);}
.ds-item__titulo{margin:0;font-size:var(--tam-xl);font-weight:var(--peso-forte);letter-spacing:var(--espaco-titulo);line-height:var(--altura-linha-titulo);overflow-wrap:anywhere;}
.ds-item__sub{margin:0;font-size:var(--tam-sm);color:var(--texto-2);overflow-wrap:anywhere;}
.ds-item__acao{display:flex;align-items:center;justify-content:center;min-height:40px;margin-top:var(--esp-1);border-radius:var(--raio-card);background:var(--marca);color:var(--sobre-marca);font-weight:var(--peso-medio);font-size:var(--tam-sm);}
.ds-item__acao--neutro{background:var(--campo);color:var(--texto);}
.ds-item--empilhado{flex-direction:column;align-items:flex-start;gap:var(--esp-2);padding:var(--esp-3);}
.ds-item--empilhado .ds-item__icone{width:32px;height:32px;border-radius:var(--raio-card);}
.ds-item--empilhado .ds-item__icone svg{width:18px;height:18px;}

.ds-item--destaque{box-shadow:0 0 0 2px var(--marca);}
.ds-item--plano{border-radius:0;box-shadow:none;background:transparent;}

/* ---- Controle segmentado (escolher uma opção entre poucas, ex.: tema claro/escuro/automático) ---- */
.ds-segmentado{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--esp-1);padding:var(--esp-1);border-radius:var(--raio-card);background:var(--campo);}
.ds-segmentado__opcao{min-height:36px;border:0;border-radius:var(--raio-pequeno);background:transparent;color:var(--texto-2);font-weight:var(--peso-medio);font-size:var(--tam-sm);cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);}
.ds-segmentado__opcao[aria-pressed=true]{background:var(--superficie);color:var(--texto);box-shadow:var(--sombra-card);}