/* ============================================================
   tryzen — o que so o painel do treinador tem
   ------------------------------------------------------------
   O resto e o esqueleto dos paineis (admin/painel.css + css/paineis.css).
   Nada de hover: a identidade e a do app (REGRA DO DONO).
   ============================================================ */

/* o cartao do atleta e um alvo inteiro: abre a ficha */
.treinador-atleta { cursor: pointer; }
.treinador-atleta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.treinador-atleta .emb__topo { align-items: center; gap: 12px; }

.treinador-texto .body-t { max-width: 68ch; }

.treinador-lista { margin: 0; padding-left: 1.1em; list-style: disc; display: grid; gap: 6px; max-width: 72ch; }

.treinador-sessao { padding: 12px 0; border-top: 1px solid var(--border-soft); }
.treinador-sessao:first-of-type { border-top: 0; }
.treinador-sessao__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.treinador-codigo { font-size: 40px; line-height: 1.1; letter-spacing: .12em; margin-top: 6px; }

/* As etiquetas de estado sao as do app (css/components.css), mas o
   admin/painel.css, que carrega depois, repinta toda `.etiqueta` de
   cinza pra etiqueta de embaixador. Aqui elas voltam a ter a cor do
   estado: verde em dia, amarelo pulou, vermelho dor. */
.painel .etiqueta--feito    { background: var(--certo); color: var(--on-accent); font-weight: 700; }
.painel .etiqueta--pulou    { background: var(--warn);  color: #3D2C00; font-weight: 700; }
.painel .etiqueta--descanso { background: var(--surface-2); color: var(--text-2); font-weight: 700; }
.painel .etiqueta--doeu     { background: #C4271C; color: #FFFFFF; font-weight: 700; }

/* ---------- a Tryzen Intelligence na ficha (07/10/2026) ---------- */
.treinador-leitura summary { cursor: pointer; list-style: none; }
.treinador-leitura summary::-webkit-details-marker { display: none; }
.treinador-leitura summary::after { content: ' +'; color: var(--text-3); }
.treinador-leitura[open] summary::after { content: ' −'; }

.treinador-conversa__lista { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; margin-top: 8px; }
.treinador-msg { padding: 10px 14px; border-radius: 16px; max-width: 78ch; line-height: 1.45; font-size: 15px; }
.treinador-msg--eu { justify-self: end; background: var(--accent); color: var(--on-accent); }
.treinador-msg--ia { justify-self: start; background: var(--surface-2); color: var(--text); }
.treinador-conversa__form textarea { width: 100%; resize: vertical; min-height: 56px; }

/* ---------- os graficos da ficha (o cartao da Hoje, js/saldo.js) ----------
   Dois por linha no computador, um por linha no celular. */
.treinador-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin: 16px 0; }
.treinador-graficos__i .bal { margin: 0; }

/* ============================================================
   Coach Intelligence (10/10/2026): inicio, treinos, assessoria,
   preferencias e o editor da ficha (coach.js).
   Sem hover (REGRA DO DONO). Tudo cabe numa coluna no celular.
   ============================================================ */

/* ---------- a barra: busca e pedido no mesmo lugar ---------- */
.coach-topo { display: grid; gap: 12px; }
.coach-busca { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border: 1px solid var(--border);
  border-radius: var(--r-pill); background: var(--surface); max-width: 760px; }
.coach-busca:focus-within { border-color: var(--accent); }
.coach-busca__ic { display: inline-flex; color: var(--text-3); flex: none; }
.coach-busca .field__input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 4px; font-size: 16px; box-shadow: none; }
.coach-busca .field__input:focus { outline: 0; box-shadow: none; }
.coach-busca__ir { flex: none; width: auto; min-width: 84px; padding-inline: 18px; }

.coach-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.coach-chip { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: var(--r-pill);
  padding: 7px 14px; font: inherit; font-size: var(--fs-sm); line-height: 1.2; cursor: pointer; }
.coach-chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.coach-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.coach-filtros { display: grid; gap: 10px; margin: 16px 0 4px; }
.coach-dias .field__input { width: 86px; padding: 7px 12px; border-radius: var(--r-pill); font-size: var(--fs-sm); }
.coach-datas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.coach-datas .field__input { width: auto; padding: 7px 10px; font-size: var(--fs-sm); }

/* ---------- os seis numeros ---------- */
.coach-ind { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 16px 0; }
.coach-tile { display: grid; gap: 4px; text-align: left; padding: 16px; border: 1px solid var(--border-soft); border-radius: var(--r-card);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer; min-height: 112px; align-content: start; }
.coach-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.coach-tile:active { transform: scale(.985); }
.coach-tile__v { font-size: var(--fs-stat, 34px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.coach-tile__v small { font-size: .45em; font-weight: 600; color: var(--text-2); margin-left: 2px; }

/* ---------- os cartoes de atencao ---------- */
.coach-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.coach-cartao { margin: 0; border-left: 3px solid var(--border); }
.coach-cartao--p1 { border-left-color: #C4271C; }
.coach-cartao--p2 { border-left-color: var(--warn); }
.coach-cartao--p3 { border-left-color: var(--certo); }
.coach-criterio summary { cursor: pointer; list-style: none; }
.coach-criterio summary::-webkit-details-marker { display: none; }
.coach-criterio summary::after { content: ' +'; }
.coach-criterio[open] summary::after { content: ' −'; }

/* ---------- a resposta e as listas ---------- */
.coach-resposta { border: 1px solid var(--accent); }
.coach-linhas { display: grid; gap: 6px; }
.coach-linha { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; text-align: left;
  width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text);
  font: inherit; cursor: pointer; }
.coach-linha:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.coach-linha--fixa { cursor: default; align-items: center; justify-content: flex-start; }
.coach-linha--fixa > span { flex: 1; }
.coach-linha-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.coach-linha-form .field__input { flex: 1; min-width: 200px; }
.coach-recado { padding: 10px 14px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); margin: 0 0 12px; }

/* ---------- a ficha ---------- */
.coach-ident { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 20px; }
.coach-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 20px; }
.coach-sel { display: inline-flex; align-items: center; gap: 8px; }
.coach-sel .field__input { width: auto; padding: 7px 10px; font-size: var(--fs-sm); }
.coach-comp { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 20px; }
.coach-comp__l { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--border-soft); }
.coach-mais { margin: 16px 0; }
.coach-mais > summary { list-style: none; display: inline-flex; cursor: pointer; }
.coach-mais > summary::-webkit-details-marker { display: none; }
.coach-mais[open] > summary { margin-bottom: 12px; }

/* ---------- o editor ---------- */
.coach-ed { border: 1px solid var(--accent); }
.coach-seg { padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); display: grid; gap: 4px; }
.coach-bloq, .coach-aviso { margin: 6px 0 0; padding: 8px 12px; border-radius: var(--r-sm); }
.coach-bloq { background: #C4271C; color: #FFFFFF; }
.coach-aviso { background: var(--warn); color: #3D2C00; }
.coach-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; align-items: end; }
.coach-form__larga { grid-column: 1 / -1; }
.coach-form textarea { width: 100%; resize: vertical; }
.coach-series { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.coach-series legend { padding: 0; margin-bottom: 6px; }
.coach-modelo { width: auto; padding: 7px 10px; font-size: var(--fs-sm); }
.coach-props { display: grid; gap: 0; }
.coach-prop { padding: 14px 0; border-top: 1px solid var(--border-soft); }
.coach-prop:first-child { border-top: 0; }
.coach-prop__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.coach-publicar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 14px 0 4px; }
.coach-ciente { display: inline-flex; gap: 8px; align-items: center; }
.coach-ciente input, .coach-checks input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---------- assessoria e preferencias ---------- */
.coach-tabela { overflow-x: auto; }
.coach-tabela table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.coach-tabela th, .coach-tabela td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--border-soft); white-space: nowrap; }
.coach-tabela th { color: var(--text-3); font-weight: 600; border-top: 0; }
.coach-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px; }
.coach-checks label { display: inline-flex; gap: 8px; align-items: center; }
.coach-num { display: flex; align-items: center; gap: 8px; }
.coach-num .field__input { width: 84px; }

@media (max-width: 640px) {
  .coach-ind { grid-template-columns: 1fr 1fr; }
  .coach-tile { min-height: 0; padding: 12px; }
  .coach-tile__v { font-size: 26px; }
  .coach-busca .btn { padding-inline: 14px; }
}

/* ============================================================
   Ajustes de 11/10/2026 (pedido do dono, olhando a bancada no escuro)
   ============================================================ */

/* ---------- a lista de um select no tema escuro ----------
   A lista aberta e desenhada pelo sistema, que nao le as cores do app:
   saia letra clara em fundo branco. `color-scheme` avisa o navegador do
   tema, e as opcoes ganham as duas cores por garantia. */
:root[data-tema="escuro"] .painel select.field__input { color-scheme: dark; }
:root[data-tema="claro"] .painel select.field__input { color-scheme: light; }
.painel select.field__input option { background: var(--surface); color: var(--text); }

/* ---------- o botao do calendario, ao lado dos atalhos de periodo ---------- */
.coach-cal { display: inline-flex; align-items: center; gap: 6px; }
.coach-cal svg { width: 16px; height: 16px; }

/* ---------- as sugestoes da busca: abrem ao digitar, coladas no campo (sugestoes.js) ---------- */
.coach-busca { position: relative; scroll-margin-top: 16px; }
.busca-sug { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; display: grid; gap: 2px; padding: 6px;
  max-height: min(50dvh, 340px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: 16px;
  box-shadow: 0 12px 32px -12px rgb(0 0 0 / .28); }
.busca-sug__op { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 10px;
  background: none; color: var(--text-2); font: inherit; font-size: 15px; line-height: 1.3; text-align: left; cursor: pointer; }
.busca-sug__op:hover, .busca-sug__op.is-ativa { background: var(--preenche); }
.busca-sug__ic { display: inline-flex; flex: none; color: var(--text-3); }
.busca-sug__txt { min-width: 0; }
.busca-sug__txt b { font-weight: 600; color: var(--text); }

/* ---------- "quando cada aviso aparece": a regra numa frase so ----------
   O numero ficava longe da unidade, cada um numa ponta do quadro. Agora
   a caixa tem o tamanho de tres digitos e a frase corre em volta dela. */
.coach-regras { display: grid; gap: 10px; }
.coach-regra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.coach-regra .field__input { width: 58px; flex: none; padding: 6px 8px; text-align: center; font-weight: 600;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
.coach-regra .field__input:focus { border-color: var(--accent); outline: 0; }

/* ---------- a linha de km por semana dentro do cartao do atleta ---------- */
.treinador-atleta__linha { margin-top: 12px; cursor: default; }
.treinador-atleta__linha .bal { margin: 0; }

/* ---------- a lateral fechada (11/10/2026) ----------
   No trilho o nome da aba ficava invisivel mas continuava OCUPANDO a
   largura dele. Com nome comprido ("Seu código", "Assessoria") o par
   icone + nome era centralizado numa aba de 47px e o icone ia parar
   fora dela, cortado na borda. O nome sai da conta: o icone fica no
   meio, onde a pilula verde ja estava. */
@media (min-width: 900px) {
  .painel__lado[data-lado="trilho"] .painel__aba { gap: 0; }
  .painel__lado[data-lado="trilho"] .painel__aba-nome { position: absolute; width: 0; overflow: hidden; }
}

/* ---------- o atalho apertado fica verde ---------- */
.coach-chip:active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---------- a conversa com o atleta (0120) ---------- */
.coach-chat .treinador-conversa__lista { max-height: 360px; }

/* ---------- o desenho de cada aviso ----------
   Como os icones da lateral: so o traco, na cor do texto. Sem circulo e
   sem cor propria; quem diz a prioridade e a borda do cartao. */
.coach-cartao__topo { display: flex; align-items: center; gap: 12px; }
.coach-cartao__ic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: var(--text); }

/* ---------- a caixa de escrever dos chats (11/10/2026) ----------
   Pedido do dono, com a caixa do Claude de referencia: um fundo proprio,
   um contorno que esta sempre la, o campo e o botao DENTRO da mesma
   caixa, e baixa (uma linha, crescendo ate quatro). Vale nos dois chats
   do painel: a conversa com o atleta e a com a Tryzen Intelligence. */
.treinador-conversa__form { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px;
  border: 1px solid color-mix(in srgb, var(--text) 24%, transparent); border-radius: 18px;
  background: color-mix(in srgb, var(--text) 7%, var(--surface)); max-width: 760px; }
.treinador-conversa__form:focus-within { border-color: color-mix(in srgb, var(--text) 45%, transparent); }
.treinador-conversa__form textarea { flex: 1; min-width: 0; width: auto; min-height: 0; max-height: 108px; resize: none;
  padding: 7px 0; border: 0; border-radius: 0; background: none; box-shadow: none; line-height: 1.4; field-sizing: content; }
.treinador-conversa__form textarea:focus { outline: 0; box-shadow: none; border: 0; }
.treinador-conversa__form .btn { flex: none; width: auto; margin: 0; }

/* ---------- cada treino na sua caixa (11/10/2026) ----------
   Pedido do dono: na fila os treinos eram linhas soltas dentro do
   quadro do atleta, e nao dava pra ver onde um acabava. Agora cada um
   tem contorno e fundo proprios, e a faixa da esquerda diz o tipo:
   verde leve, azul longo, amarelo ritmo, vermelho intenso. */
.coach-props { gap: 10px; }
.coach-prop, .coach-prop:first-child { padding: 14px 16px; border: 1px solid var(--border); border-left: 3px solid var(--text-3);
  border-radius: var(--r-lg); background: var(--surface-2); }
.coach-prop[data-tipo="rodagem"], .coach-prop[data-tipo="regenerativo"], .coach-prop[data-tipo="caminhada"] { border-left-color: var(--certo); }
.coach-prop[data-tipo="longo"] { border-left-color: #4C8DF6; }
.coach-prop[data-tipo="tempo"], .coach-prop[data-tipo="progressivo"], .coach-prop[data-tipo="fartlek"] { border-left-color: var(--warn); }
.coach-prop[data-tipo="tiros"], .coach-prop[data-tipo="subida"] { border-left-color: #E5483C; }
.coach-prop--bloq { border-color: #C4271C; }
.coach-prop .btn--outline { background: var(--surface); }

/* a caixinha de "li os avisos" precisa aparecer nos dois temas */
.coach-ciente input { appearance: auto; -webkit-appearance: checkbox; flex: none; }

/* ---------- em cima o nome de quem usa, embaixo a marca (11/10/2026) ----------
   Pedido do dono: no topo da lateral nao vai "tryzen", vai o nome do
   treinador; a marca desce pro pe, com o desenho dela. No trilho fechado
   e no celular nao ha largura pra marca: ela some, o nome fica. */
.painel__marca > .painel__logo { display: none; }
.painel__marca .painel__marca-txt { font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: 0;
  color: var(--text); text-transform: none; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-pe-logo { display: none; }
@media (min-width: 900px) {
  .painel__pe-acoes { flex-wrap: wrap; }
  .coach-pe-logo { display: block; flex: none; margin: 0 calc(100% - 76px) 10px 2px; background: var(--text-2); }
  .painel__lado[data-lado="trilho"] .coach-pe-logo { display: none; }
}

/* ---------- a comparacao: cada medida na sua caixa, neutra ---------- */
.coach-comp { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.coach-comp__l { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--text) 4%, var(--surface)); align-content: start; }

/* ---------- os campos do editor, cada um na sua caixa (11/10/2026) ----------
   Pedido do dono: campo sem contorno, da cor do fundo, nao dizia onde
   comecava nem onde acabava. Agora todo campo do painel tem contorno e
   um fundo um tom diferente do quadro, como a caixa de escrever. */
.coach-form .field, .coach-form fieldset { border: 0; padding: 0; margin: 0; }
.coach-form .field__label { margin-bottom: 6px; }
.coach-form .field__input, .coach-modelo, .coach-sel .field__input {
  width: 100%; padding: 10px 12px; font-size: 15px; line-height: 1.3;
  border: 1px solid color-mix(in srgb, var(--text) 20%, transparent); border-radius: 12px;
  background: color-mix(in srgb, var(--text) 6%, var(--surface)); box-shadow: none; }
.coach-form .field__input:focus, .coach-modelo:focus { outline: 0; border-color: color-mix(in srgb, var(--text) 50%, transparent); }
.coach-modelo, .coach-sel .field__input { width: auto; }
.coach-series .field__input { min-width: 0; }

/* ---------- as tres etapas do treino manual ---------- */
.coach-etapas { display: grid; gap: 16px; }
.coach-trilha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.coach-trilha__p { display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-align: left; font: inherit; font-size: var(--fs-sm);
  color: var(--text-2); cursor: pointer; border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); border-radius: 12px;
  background: color-mix(in srgb, var(--text) 3%, var(--surface)); }
.coach-trilha__p b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); font-size: 13px; }
.coach-trilha__p.is-on { border-color: var(--accent); color: var(--text); font-weight: 600; }
.coach-trilha__p.is-on b { background: var(--accent); color: var(--on-accent); }
.coach-passo { min-width: 0; padding: 16px; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent) !important; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--text) 3%, var(--surface)); }
.coach-passo[hidden] { display: none; }
.coach-etapas__pe { align-items: center; }
@media (max-width: 640px) { .coach-trilha__p span { display: none; } .coach-trilha__p { justify-content: center; } }

/* ---------- o aviso amarelo no tema escuro (11/10/2026) ----------
   Pedido do dono: o amarelo cheio gritava no escuro. La ele vira um
   amarelo transparente com a letra amarela; no claro continua cheio. */
:root[data-tema="escuro"] .coach-aviso { background: color-mix(in srgb, var(--warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 38%, transparent); color: var(--warn); }

/* ---------- cada treino da ficha na sua caixa (11/10/2026) ----------
   Pedido do dono: as listas "Próximos treinos" e "Treinos das últimas
   seis semanas" eram linhas soltas. Cada treino ganha uma caixa bem
   discreta: so o contorno e um tom de diferenca no fundo, como a caixa
   de escrever. Sem cor nova. */
.treinador-sessao, .treinador-sessao:first-of-type { margin-top: 10px; padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--text) 3%, var(--surface)); }

/* ============================================================
   O Financeiro (0121 e 0122, 11/10/2026)
   ------------------------------------------------------------
   A mesma lingua do resto do painel: cada item na sua caixa neutra
   (contorno e um tom de diferenca), botao que acende, nada de hover.
   Cor so diz estado: o vermelho e o que venceu, o amarelo e o que
   espera, o verde e o que entrou.
   ============================================================ */
.fin-secoes { margin: 4px 0 12px; }
.fin-ind { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.fin-valor { font-size: 26px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-valor--neg { color: #C4271C; }
:root[data-tema="escuro"] .fin-valor--neg { color: #FF6B60; }
.fin-tile--alerta { border-color: color-mix(in srgb, #C4271C 55%, transparent); }

.fin-tag { flex: none; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs, 12px);
  font-weight: 700; line-height: 1.3; white-space: nowrap; background: var(--surface-2); color: var(--text-2); }
.fin-tag--vencido, .fin-tag--vencida { background: #C4271C; color: #FFFFFF; }
.fin-tag--aguardando, .fin-tag--aguardando_aprovacao { background: var(--warn); color: #3D2C00; }
.fin-tag--em_dia, .fin-tag--paga { background: var(--certo); color: var(--on-accent); }

.fin-cobrancas { display: grid; gap: 10px; }
.fin-cobranca { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--text) 4%, var(--surface)); }
.fin-cobranca--apagada { opacity: .62; }
.fin-cobranca__topo { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.fin-cobranca__topo > div { min-width: 0; display: grid; gap: 2px; }
.fin-nome { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--text); text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text) 30%, transparent); text-underline-offset: 3px; }
.fin-nome:disabled { cursor: default; text-decoration: none; }
.fin-nome:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fin-atleta { align-items: center; }
.fin-atleta__quem { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; }
.fin-atleta__fato { flex: 1 1 200px; }
.fin-atleta:disabled { cursor: default; }
.fin-linha { gap: 8px 12px; }
.fin-chip--fixo { cursor: default; }

.fin-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.gcard > .fin-form:first-of-type { border-top: 0; padding-top: 0; }
.fin-form .coach-form { align-items: start; }
.fin-form .field { display: grid; gap: 4px; }
.fin-form textarea.field__input { width: 100%; padding: 10px 12px; font-size: 15px; border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
  border-radius: 12px; background: color-mix(in srgb, var(--text) 6%, var(--surface)); resize: vertical; }

.fin-licenca--cheia { border-left: 3px solid var(--certo); }
.fin-veu { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, #000 55%, transparent); }
.fin-veu__caixa { width: min(520px, 100%); max-height: 90dvh; overflow: auto; padding: 16px; border-radius: var(--r-card);
  background: var(--bg, var(--surface)); border: 1px solid var(--border-soft); }
.fin-veu__caixa .gcard { margin: 0; }

@media (max-width: 899px) {
  .fin-valor { font-size: 20px; }
  .fin-secoes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .fin-secoes::-webkit-scrollbar { display: none; }
  .fin-secoes .coach-chip { flex: none; white-space: nowrap; }
  .fin-cobranca__topo { flex-wrap: wrap; }
}

/* ============================================================
   A linha dos meses: reta, com o valor escrito e a mira no mes atual
   (ajuste do dono, 11/10/2026)
   ============================================================ */
.fin-graf { padding-bottom: 12px; }
.fin-graf__plot { position: relative; height: 168px; margin-top: 6px; }
.fin-graf__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fin-graf__linha { fill: none; stroke: var(--serie-1, var(--accent)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fin-graf__zero { stroke: color-mix(in srgb, var(--text) 22%, transparent); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.fin-graf__mira { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: color-mix(in srgb, var(--text) 26%, transparent); }
.fin-graf__ponto { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--serie-1, var(--accent));
  box-shadow: 0 0 0 2px var(--surface); }
.fin-graf__ponto b { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); white-space: nowrap; font-size: 11.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--text-2); }
.fin-graf__ponto.is-atual { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.fin-graf__ponto.is-atual b { bottom: 15px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.fin-graf__eixo { display: flex; margin-top: 8px; font-size: var(--fs-xs); color: var(--text-3); }
.fin-graf__eixo span { flex: 1 1 0; text-align: center; }
.fin-graf__eixo .is-atual { color: var(--certo-texto); font-weight: 700; }
@media (max-width: 899px) {
  .fin-graf__plot { height: 148px; }
  .fin-graf__ponto b { font-size: 10.5px; }
  /* doze meses numa tela estreita: so o mes atual leva o valor escrito; os outros estao na tabela logo abaixo */
  .fin-graf--muitos .fin-graf__ponto:not(.is-atual) b { display: none; }
}

/* ============================================================
   Os desenhos (no traco do Claude) e o passo a passo dos planos
   ============================================================ */
.rabisco { display: block; color: var(--text); overflow: visible; }
.rabisco__cheio { fill: color-mix(in srgb, var(--text) 34%, var(--surface)); }
.rabisco__flutua { animation: rabisco-flutua 3.6s ease-in-out infinite; transform-origin: 120px 94px; }
.rabisco__pisca { animation: rabisco-pisca 2.4s ease-in-out infinite; transform-origin: 134px 38px; }
@keyframes rabisco-flutua { 50% { transform: translateY(-3px) rotate(-2deg); } }
@keyframes rabisco-pisca { 50% { transform: scale(.72); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .rabisco__flutua, .rabisco__pisca { animation: none; } }

.tut { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; overflow-y: auto;
  background: color-mix(in srgb, #000 58%, transparent); animation: tut-entra .2s var(--ease, ease-out); }
@keyframes tut-entra { from { opacity: 0; } }
.tut__caixa { width: min(480px, 100%); padding: 28px 28px 24px; border-radius: 24px; background: var(--bg); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); box-shadow: 0 24px 64px rgba(0, 0, 0, .32); }
.tut__form { display: grid; gap: 0; }
.tut__desenho { display: grid; place-items: center; margin: 4px 0 12px; }
.tut__titulo { margin: 0; font-size: var(--fs-h3, 22px); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.tut__caixa .tut__desenho + .tut__titulo, .tut__caixa .tut__desenho ~ .tut__texto { text-align: center; }
.tut__texto { margin: 8px 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
.tut__passo { margin: 16px 0 4px; font-size: var(--fs-xs); color: var(--text-3); }
.tut__trilha { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.tut__trilha li { flex: 1; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--text) 14%, transparent); }
.tut__trilha li.is-feito, .tut__trilha li.is-on { background: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .tut__trilha li { transition: background-color .3s ease; } }
.tut__campo { display: grid; gap: 6px; margin-top: 16px; border: 0; padding: 0; }
.tut__rotulo { margin: 16px 0 8px; }
.tut__campo .field__input { width: 100%; padding: 12px 14px; font-size: 16px; line-height: 1.3; box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--text) 20%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--text) 6%, var(--surface)); }
.tut__campo .field__input:focus { outline: 0; border-color: color-mix(in srgb, var(--text) 50%, transparent); }
.tut__resumo { margin-top: 16px; padding: 12px 14px; border-radius: 12px; display: grid; gap: 2px;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); background: color-mix(in srgb, var(--text) 4%, var(--surface)); }
.tut__lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.tut__lista li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; font-size: var(--fs-sm);
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); background: color-mix(in srgb, var(--text) 4%, var(--surface)); }
.tut__lista li span { color: var(--text-2); }
.tut__erro { margin: 12px 0 0; }
.tut__acoes { display: grid; gap: 8px; margin-top: 22px; }
.tut__acoes .btn { width: 100%; }
.tut__acoes--lado { grid-template-columns: 1fr 1.6fr; }
@media (prefers-reduced-motion: reduce) { .tut { animation: none; } }
@media (max-width: 520px) { .tut { place-items: end center; padding: 8px; } .tut__caixa { padding: 22px 18px 18px; border-radius: 22px; } }

.fin-comece { text-align: center; }
.fin-comece__desenho { display: grid; place-items: center; margin-bottom: 4px; }
.fin-comece .treinador-lista { text-align: left; display: inline-grid; }
.fin-comece .secao__acoes { justify-content: center; }

/* ---------- os avisos do topo: acima de toda aba ---------- */
.topo-avisos { display: grid; gap: 8px; padding-top: var(--gap-md, 16px); }
.topo-aviso { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg, 14px);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.topo-aviso__ic { flex: none; display: inline-flex; color: var(--text); }
.topo-aviso__txt { flex: 1; min-width: 0; margin: 0; display: grid; gap: 2px; font-size: var(--fs-sm); }
.topo-aviso__txt span { color: var(--text-2); }
.topo-aviso .btn { flex: none; width: auto; }
.topo-avisos + .painel__head { padding-top: var(--gap-md, 16px); }
@media (max-width: 640px) { .topo-aviso { flex-wrap: wrap; } .topo-aviso__txt { flex-basis: calc(100% - 40px); } .topo-aviso .btn { margin-left: 32px; } }
.tut__desenho .rabisco, .fin-comece__desenho .rabisco { width: 204px; height: auto; }

/* ---------- a apresentacao de Seu código, com o desenho ---------- */
.codigo-intro { display: flex; align-items: flex-start; gap: 24px; }
.codigo-intro__desenho { flex: none; }
.codigo-intro__desenho { padding-top: 2px; }
.codigo-intro__txt { min-width: 0; }
.codigo-intro__passos { margin: 12px 0 0; padding-left: 1.4em; display: grid; gap: 6px; list-style: decimal; }
.codigo-intro__passos b { color: var(--text); font-weight: 600; }
@media (max-width: 700px) { .codigo-intro { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* ============================================================
   O menu no celular: lateral, como no computador (pedido do dono, 11/10/2026)
   ------------------------------------------------------------
   As abas saem do rodape. Um botao no topo abre a lateral por cima da
   tela, com o icone e o nome inteiro de cada aba; a de agora leva o
   verde cheio, como no computador. So no painel do treinador: o dos
   socios e o dos parceiros continuam com a barra de baixo.
   ============================================================ */
.menu-botao { display: none; }
@media (max-width: 899px) {
  .menu-botao { display: inline-flex; align-items: center; justify-content: center; align-self: center; width: 40px; height: 40px; margin-left: -8px;
    border: 0; border-radius: 12px; background: none; color: var(--text); cursor: pointer; }
  .menu-botao:active { background: var(--surface-2); }
  .menu-botao:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .painel-body .painel__marca { align-items: center; }

  .painel-body .painel__nav { top: 0; right: auto; bottom: 0; left: 0; z-index: 96; width: min(292px, 84vw); flex-direction: column; gap: 4px;
    padding: calc(var(--safe-top, 0px) + 20px) 12px calc(var(--safe-bottom, 0px) + 16px); overflow-y: auto;
    background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 0;
    border-right: 1px solid var(--border-soft); transform: translateX(-102%); visibility: hidden;
    transition: transform .26s var(--ease, ease), visibility 0s .26s; }
  .painel-body .painel.is-menu .painel__nav { transform: none; visibility: visible; transition: transform .26s var(--ease, ease), visibility 0s; box-shadow: 12px 0 40px rgba(0, 0, 0, .28); }
  .painel-body .painel__nav .painel__aba { flex: none; flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 52px; padding: 0 14px;
    border-radius: var(--r); font-size: var(--fs-body); letter-spacing: 0; text-align: left; white-space: nowrap; }
  .painel-body .painel__nav .painel__aba-nome { max-width: none; overflow: visible; }
  .painel-body .painel__nav .painel__aba.is-active { color: var(--on-accent); }
  .painel-body .painel__nav .painel__pill { max-height: none; border-radius: var(--r); background: var(--accent); }
  /* o veu: e a propria .painel, por tras da lateral; tocar nele fecha */
  .painel-body .painel.is-menu::before { content: ''; position: fixed; inset: 0; z-index: 95; background: color-mix(in srgb, #000 52%, transparent); }
  /* sem a barra de baixo, o miolo nao precisa mais guardar o lugar dela */
  .painel-body .painel__main { padding-bottom: calc(32px + var(--safe-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .painel-body .painel__nav { transition: none !important; } }

/* ---------- o quadro "Sua assessoria está crescendo!" e o grafico dele ----------
   Grafico de verdade, e nao desenho a mao: linha reta subindo, na cor
   da marca, com o ultimo ponto aceso. */
.vagas-graf { display: block; width: min(300px, 100%); height: auto; }
.vagas-graf__grade path { stroke: color-mix(in srgb, var(--text) 12%, transparent); stroke-width: 1; stroke-dasharray: 3 5; }
.vagas-graf__linha { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vagas-graf__pontos circle { fill: var(--bg); stroke: var(--accent); stroke-width: 2.5; }
.vagas-graf__fim { fill: var(--accent); stroke: var(--bg); stroke-width: 2.5; }
.vagas-graf__halo { fill: color-mix(in srgb, var(--accent) 26%, transparent); transform-origin: 268px 24px; animation: vagas-pulsa 2.2s ease-out infinite; }
@keyframes vagas-pulsa { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vagas-graf__halo { animation: none; } }
.tut--vagas .tut__titulo, .tut--vagas .tut__texto { text-align: center; }
.tut--vagas .tut__campo { text-align: left; }
.tut--vagas textarea.field__input { resize: vertical; font-family: inherit; }
.vagas-fora { color: var(--text-3); }

/* ---------- o grafico do cartao de vagas, do lado direito ---------- */
/* o grafico vai no FLUXO, a direita, e so quando o proprio cartao cabe ele
   (16/10/2026): absoluto no meio do cartao, ele caia em cima dos pares e do
   preco do Pro, porque o padding que reservava o lugar era anulado pela
   regra do cartao e o cartao do painel e mais estreito que a tela. */
.fin-licenca { container-type: inline-size; }
.fin-licenca__graf { display: none; }
@container (min-width: 720px) {
  .fin-licenca__graf { display: block; position: relative; float: right; width: min(292px, 40%); margin: 0 0 12px 24px; }
}

/* ---------- o plano do Coach no cartao de vagas (0135, 13/10/2026) ----------
   Dois medidores finos (gratuitas e adicionais), os pares de informacao e
   os planos maiores. Mesma linguagem do resto do painel: preenchimento
   suave, sem contorno, o verde so no que esta cheio. */
.lic-medidores { display: grid; gap: 12px; max-width: 520px; }
.lic-medidor__linha { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); color: var(--text-2); }
.lic-medidor__linha b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.lic-medidor__trilho { display: block; height: 6px; margin-top: 6px; border-radius: 999px; background: var(--preenche, color-mix(in srgb, var(--text) 7%, transparent)); overflow: hidden; }
.lic-medidor__trilho > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .5s var(--ease, ease); }
.lic-pares { display: grid; gap: 8px; max-width: 520px; }
.lic-par { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: var(--fs-sm); color: var(--text-2); }
.lic-par b { color: var(--text); font-weight: 600; text-align: right; }
.lic-planos { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 10px; margin-top: 8px; }
.lic-plano { all: unset; box-sizing: border-box; display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; cursor: pointer;
  background: var(--preenche-suave, color-mix(in srgb, var(--text) 4.5%, transparent)); transition: background .2s var(--ease, ease); }
.lic-plano:hover, .lic-plano:focus-visible { background: var(--preenche, color-mix(in srgb, var(--text) 7%, transparent)); }
.lic-plano:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lic-plano__nome { font-weight: 600; color: var(--text); }
.lic-plano__cap { font-size: var(--fs-xs); color: var(--text-3); }
.lic-plano__preco { margin-top: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.lic-reduzir > summary { cursor: pointer; list-style: none; }
.lic-reduzir > summary::-webkit-details-marker { display: none; }
.lic-reduzir > summary::before { content: '+ '; color: var(--text-3); }
.lic-reduzir[open] > summary::before { content: '\2212  '; }
@media (prefers-reduced-motion: reduce) { .lic-medidor__trilho > i, .lic-plano { transition: none; } }

/* ---------- o selo do grafico de vagas (ajuste do dono, 11/10/2026) ----------
   Era texto desenhado DENTRO do SVG: a letra encolhia junto com o
   desenho, saia com outra fonte e passava da caixa. Agora e texto de
   verdade por cima do grafico, com a letra do painel, e a caixa tem o
   tamanho da frase em qualquer idioma. */
.vagas-selo { position: absolute; left: 0; top: 7%; max-width: 100%; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px;
  border-radius: 999px; white-space: nowrap; font-family: var(--font); font-size: var(--fs-xs); font-weight: 600; line-height: 1.25; letter-spacing: 0;
  color: var(--text); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); }
.vagas-selo > span { overflow: hidden; text-overflow: ellipsis; }
.vagas-selo svg { flex: none; color: var(--accent-texto, var(--accent)); }

/* ---------- os graficos da ficha no celular (revisao de 11/10/2026) ----------
   A varredura de "texto por fora" achou dois: a coluna de 340px nao
   cabia numa tela de 375 (o cartao passava da margem), e os oito rotulos
   do eixo nao encolhiam, entao o ultimo ("Esta", em negrito) saia da
   tela e a pagina inteira rolava de lado. A coluna agora cede ate a
   largura que houver, e cada rotulo divide o eixo por igual. */
.treinador-graficos { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.treinador-graficos .bal-eixo__i, .treinador-atleta .bal-eixo__i { min-width: 0; white-space: nowrap; }
@media (max-width: 420px) {
  .treinador-graficos .bal-eixo, .treinador-atleta .bal-eixo { font-size: 10.5px; letter-spacing: -.01em; }
}

/* ============================================================
   Os vazios e o "Como funciona" (guia.js, 11/10/2026)
   ------------------------------------------------------------
   Pedido do dono: tela sem dado mostra um DESENHO e o caminho, e nao
   numero zerado; e cada area tem o seu tutorial sempre a vista. Nas
   areas com varias paginas por dentro, a demonstracao: uma janelinha do
   proprio painel, com o ponteiro andando cena a cena.
   ============================================================ */

/* ---------- a tela sem dado ----------
   O desenho em cima, a esquerda, e o texto embaixo, como um cartao de
   produto (a referencia que o dono mandou, 11/10/2026).

   O traco, as duas tintas, o tamanho e o movimento dos desenhos moram
   em css/desenhos.css (a identidade dos desenhos, js/desenhos.js). */
.semdado { display: grid; justify-items: start; text-align: left; gap: 18px; padding: 28px 28px 24px; }
.semdado__desenho { display: grid; }
.semdado__txt { max-width: 640px; min-width: 0; }
.semdado .gcard__titulo { font-size: var(--fs-h3, 22px); line-height: 1.25; letter-spacing: -.01em; }
.semdado .secao__acoes, .semdado .coach-linha-form { justify-content: flex-start; }
.semdado--lado { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 24px; padding: 24px 28px; }
.semdado--lado .semdado__txt { max-width: 680px; }
@media (max-width: 640px) {
  .semdado, .semdado--lado { grid-template-columns: 1fr; gap: 14px; padding: 22px var(--gap) 20px; }
}

/* os passos numerados, na bolinha da cor da marca */
.guia__passos { list-style: none; counter-reset: guia; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.guia__passo { counter-increment: guia; position: relative; padding-left: 36px; line-height: 1.5; min-height: 24px; }
.guia__passo::before { content: counter(guia); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--accent-tint); color: var(--accent-texto, var(--accent)); }
.guia__passo b { color: var(--text); font-weight: 600; }

/* ---------- o "Como funciona" recolhido no pe da tela ---------- */
.guia { margin-top: var(--gap); }
.guia__puxa { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 9px 16px 9px 12px;
  border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; }
.guia__puxa::-webkit-details-marker { display: none; }
.guia__puxa svg { color: var(--accent); flex: none; }
.guia[open] > .guia__puxa { color: var(--text); border-color: var(--accent-line, var(--accent)); }
.guia__puxa:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- a demonstracao ---------- */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 30px; align-items: center; padding: 26px; }
.demo__txt { min-width: 0; }
.demo__txt .gcard__titulo { font-size: var(--fs-h3, 22px); line-height: 1.25; letter-spacing: -.01em; margin-top: 4px; }
.demo__passos { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 4px; }
.demo__passo { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%;
  padding: 10px 12px; border-radius: 16px; cursor: pointer; transition: background .3s; }
.demo__passo > b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text-2); transition: background .3s, color .3s; }
.demo__passo strong { display: block; padding-top: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.demo__passo small { display: grid; grid-template-rows: 0fr; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-2); opacity: 0;
  transition: grid-template-rows .45s var(--ease, ease), opacity .35s; }
.demo__passo small > i { min-height: 0; overflow: hidden; font-style: normal; }
.demo__passo.is-on { background: color-mix(in srgb, var(--text) 6%, transparent); }
.demo__passo.is-on > b { background: var(--accent); color: var(--on-accent); }
.demo__passo.is-on strong { color: var(--text); }
.demo__passo.is-on small { grid-template-rows: 1fr; opacity: 1; padding-top: 2px; }
.demo__passo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* o palco: a luz da marca num canto e o pontilhado, e a janela encostada embaixo */
.demo__palco { position: relative; min-width: 0; border-radius: 22px; padding: 28px 22px 0; isolation: isolate;
  background: radial-gradient(120% 90% at 88% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    color-mix(in srgb, var(--text) 5%, var(--surface)); }
.demo__palco::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: .55;
  background-image: radial-gradient(color-mix(in srgb, var(--text) 20%, transparent) 1px, transparent 1.5px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(200deg, transparent 30%, #000 100%); mask-image: linear-gradient(200deg, transparent 30%, #000 100%); }
.demo__janela { position: relative; border-radius: 16px 16px 0 0; background: var(--bg); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 13%, transparent); border-bottom: 0; box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
  font-size: 12.5px; line-height: 1.4; }
.demo__barra { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--text) 9%, transparent); }
.demo__barra i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.demo__barra i:nth-child(1) { background: #FF5F57; }
.demo__barra i:nth-child(2) { background: #FEBC2E; }
.demo__barra i:nth-child(3) { background: #28C840; }
.demo__aba { margin-left: 8px; padding: 3px 10px; border-radius: 8px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-2); font-size: 11px; }
/* as cenas dividem a mesma celula: a janela tem a altura da maior, e nenhuma e cortada */
.demo__cenas { display: grid; padding: 14px 14px 18px; min-height: 232px; }
.demo__cena { grid-area: 1 / 1; display: grid; align-content: start; gap: 8px; min-width: 0; opacity: 0; transform: translateY(8px);
  transition: opacity .45s, transform .45s var(--ease, ease); visibility: hidden; }
.demo__cena.is-on { opacity: 1; transform: none; visibility: visible; }
.demo__cena p { margin: 0; }
.demo__cena:not(.is-feito) .demo-depois { display: none !important; }
.demo__cena.is-feito .demo-antes { display: none !important; }
.demo__cena.is-feito .demo-depois { animation: demo-entra .4s var(--ease, ease) both; }
@keyframes demo-entra { from { opacity: 0; transform: translateY(6px); } }

/* o ponteiro, com o nome de quem aponta */
.demo__cursor { position: absolute; left: 0; top: 0; z-index: 3; display: flex; align-items: flex-start; color: var(--accent); opacity: 0;
  transform: translate(180px, 150px); transition: transform .95s cubic-bezier(.5, .1, .2, 1), opacity .3s; pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .28)); }
.demo__cursor svg { flex: none; transition: transform .16s; transform-origin: 4px 4px; }
.demo__cursor.is-toque svg { transform: scale(.8); }
.demo__cursor b { margin: 15px 0 0 -3px; padding: 2px 8px; border-radius: 8px; background: var(--accent); color: var(--on-accent);
  font-size: 10.5px; font-weight: 700; white-space: nowrap; }

/* as pecas de dentro da janela: o painel em miniatura */
.demo-rotulo { font-size: 11px; color: var(--text-3); }
.demo-miudo { font-size: 11px; color: var(--text-3); }
.demo-aviso { color: var(--text-2); }
.demo-novo { color: var(--accent-texto, var(--accent)); }
.demo-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 9px 11px; border-radius: 12px; background: var(--surface); }
.demo-linha > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.demo-linha > .demo-miudo { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.demo-linha .etiqueta, .demo-linha .fin-tag { flex: none; font-size: 10.5px; min-height: 20px; padding: 1px 8px; }
.demo-cartao { display: grid; gap: 5px; padding: 11px 12px; border-radius: 14px; background: var(--surface); }
.demo-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.demo-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border); font-size: 11.5px; font-weight: 600; color: var(--text); text-align: center; transition: box-shadow .25s; }
.demo-btn--cheio { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.demo__cena.is-feito [data-alvo] { box-shadow: 0 0 0 4px var(--accent-tint); }
.demo-busca { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 13px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); }
.demo-digita { flex: 1; min-width: 0; color: var(--text); }
.demo__cena.is-on .demo-digita { animation: demo-digita 1.15s steps(26) both; }
@keyframes demo-digita { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.demo-fone { justify-self: center; display: grid; gap: 7px; width: min(230px, 100%); padding: 13px; border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); background: var(--surface); }
.demo-opcao { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border);
  transition: background .3s, border-color .3s; }
.demo-opcao > span:first-child { flex: 1; min-width: 0; font-weight: 600; }
.demo__cena.is-feito .demo-opcao--alvo { border-color: var(--accent); background: var(--accent-tint); }
.demo-visto { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(.4);
  transition: opacity .3s, transform .3s var(--ease, ease); }
.demo-visto::after { content: ''; position: absolute; left: 5.4px; top: 2.6px; width: 4px; height: 8px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.demo__cena.is-feito .demo-visto { opacity: 1; transform: none; }
.demo-visto--so { display: inline-block; background: none; opacity: 1; transform: none; }
.demo-codigo { font-family: var(--font-mono, monospace); font-size: 26px; letter-spacing: .14em; line-height: 1.2; }
.demo-quadros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.demo-quadros > div { min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--surface); transition: box-shadow .25s; }
.demo-numero { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.demo-graf { display: block; width: 100%; height: 62px; }
.demo-graf polyline { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 260; stroke-dashoffset: 260; }
.demo__cena.is-on .demo-graf polyline { animation: demo-risca 1.5s .35s var(--ease, ease) forwards; }
@keyframes demo-risca { to { stroke-dashoffset: 0; } }
.demo-risco { display: inline-block; height: 8px; border-radius: 6px; background: color-mix(in srgb, var(--text) 14%, transparent); vertical-align: middle; }

@media (max-width: 980px) {
  .demo { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .demo__palco { padding: 22px 14px 0; }
}
@media (max-width: 420px) {
  .demo { padding: 18px 16px; }
  .demo__palco { padding: 18px 10px 0; border-radius: 18px; }
  .demo__cenas { padding: 12px 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo__cena, .demo__cursor, .demo__passo, .demo__passo small, .demo__passo > b { transition: none; }
  .demo__cena.is-on .demo-digita, .demo__cena.is-feito .demo-depois, .demo__cena.is-on .demo-graf polyline { animation: none; }
  .demo-graf polyline { stroke-dashoffset: 0; }
}
/* a moeda do passo a passo dos planos (0123) */
.tut__moeda { margin: 6px 0 0; }

/* ============================================================
   Os dois cartoes-tutorial do Inicio (destaques.js, 12/10/2026)
   ------------------------------------------------------------
   A print do Claude ("Tchau, copiar e colar"): a janelinha com as
   linhas onduladas sendo escritas, a linha da vez em verde com o
   cursor, os icones do Word e do Excel nas cores deles.
   Segunda volta do dono (mesmo dia): a janelinha segue o tema (clara no
   claro), cada cartao tem X, e cada um fica AO LADO da funcao que
   ensina, com a setinha apontando pra ela. Um ciclo de 7 s, igual nas
   duas, e tudo para com "reduzir movimento".
   ============================================================ */

/* ---------- onde mora: ao lado da funcao ----------
   A IA: uma coluna a direita da busca e dos atalhos, com a seta no
   meio da altura da barra. Os arquivos: no fim da linha que termina no
   "Exportar em Word", com a seta na altura do botao. Abaixo de 1100 px
   o cartao desce pra baixo da funcao e a seta aponta pra cima. */
.coach-topo:has(> .dq-cartao) { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 22px; }
.coach-topo:has(> .dq-cartao) > :not(.dq-cartao) { grid-column: 1; }
.coach-topo > .dq-cartao { grid-column: 2; grid-row: 2 / span 2; align-self: start; --dq-seta-y: 26px; }
.dq-linha { display: flex; align-items: flex-start; gap: 22px; }
.dq-linha > .coach-chips { flex: 0 1 auto; }
.dq-linha > .dq-cartao { --dq-seta-y: 17px; margin-bottom: 4px; }

.dq-cartao { position: relative; display: flex; flex-direction: column; width: 320px; flex: none; padding: 12px 12px 14px;
  border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-elev);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
/* a setinha: um quadrado girado, com as duas bordas do lado de fora */
.dq-cartao::before { content: ''; position: absolute; left: -7px; top: var(--dq-seta-y, 24px); width: 12px; height: 12px;
  background: var(--bg-elev); border-left: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transform: translateY(-50%) rotate(45deg); }
.dq-fechar { position: absolute; top: -10px; right: -10px; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px;
  padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-elev); color: var(--text-2); cursor: pointer; }
.dq-fechar:active { transform: scale(.94); }
.dq-fechar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dq-titulo { margin: 14px 4px 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--text); }
.dq-texto { margin: 4px 4px 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
.dq-acoes { margin-top: 14px; }
.dq-cartao > .dq-botao { margin-top: 14px; }
.dq-botao { width: 100%; }
.dq-escolha { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dq-escolha[hidden], .dq-botao[hidden] { display: none; }

@media (max-width: 1100px) {
  .coach-topo:has(> .dq-cartao) { grid-template-columns: minmax(0, 1fr); }
  .coach-topo > .dq-cartao { grid-column: 1; grid-row: auto; }
  .dq-linha { flex-direction: column; gap: 14px; }
  .dq-cartao { width: 100%; max-width: 420px; }
  .dq-cartao::before { left: 28px; top: -7px; transform: rotate(135deg); }
}

/* ---------- a janelinha: as cores do tema ----------
   Fundo do cartao um tom abaixo (a superficie), a folha com o fundo da
   pagina, a tinta e o texto; no escuro, tudo vira sozinho. */
.dq-cena { --dq-verde: var(--accent); --dq-tinta: color-mix(in srgb, var(--text) 55%, transparent);
  display: flex; align-items: center; justify-content: center; gap: 14px; height: 132px;
  padding: 14px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border-soft); overflow: hidden; }
.dq-folha { position: relative; width: 100%; max-width: 250px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg-elev); animation: dq-folha 7s ease-in-out infinite; }
.dq-folha--doc { max-width: 190px; padding: 12px; }
.dq-ondas { display: block; width: 100%; height: auto; overflow: visible; }
.dq-ondas path { stroke: var(--dq-tinta); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.dq-ondas .dq-verde { stroke: var(--dq-verde); }

/* a pergunta sendo digitada, o cursor atras da ultima letra */
.dq-pergunta { display: flex; align-items: center; margin: 0 0 8px; font-size: 13px; line-height: 1.2; color: var(--text); white-space: nowrap; }
.dq-pergunta__seta { margin-right: 6px; color: var(--dq-verde); }
.dq-pergunta__txt { display: inline-block; overflow: hidden; max-width: 0; animation: dq-digita 7s steps(17, end) infinite; }
.dq-cursor { display: inline-block; width: 2px; height: 14px; margin-left: 2px; border-radius: 1px; background: var(--dq-verde);
  animation: dq-pisca 1s steps(2, start) infinite; }
.dq-cursor-svg { fill: var(--dq-verde); animation: dq-pisca 1s steps(2, start) infinite; }
.dq-ondas--ia path:nth-child(1) { animation: dq-traca-a 7s ease-out infinite; }
.dq-ondas--ia path:nth-child(2) { animation: dq-traca-b 7s ease-out infinite; }
.dq-nomes { display: flex; gap: 6px; margin: 10px 0 0; }
.dq-nome { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px;
  color: var(--text); background: var(--surface); opacity: 0; animation: dq-nome-a 7s ease-out infinite; }
.dq-nome + .dq-nome { animation-name: dq-nome-b; }
.dq-nome i { width: 6px; height: 6px; border-radius: 50%; background: var(--dq-verde); }

/* o relatorio sendo escrito, uma linha depois da outra */
.dq-cena--arq .dq-l1 { animation: dq-l1 7s linear infinite; }
.dq-cena--arq .dq-l2 { animation: dq-l2 7s linear infinite; }
.dq-cena--arq .dq-l3 { animation: dq-l3 7s linear infinite; }
.dq-cena--arq .dq-l4 { animation: dq-l4 7s linear infinite; }
.dq-cena--arq .dq-l5 { animation: dq-l5 7s linear infinite; }
.dq-apps { display: grid; gap: 10px; flex: none; }
.dq-app { display: block; width: 30px; height: 36px; animation: dq-boia 3.2s ease-in-out infinite; }
.dq-app--excel { animation-delay: -1.6s; }

@keyframes dq-folha { 0% { opacity: 0; } 4%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dq-digita { 0%, 3% { max-width: 0; } 24%, 100% { max-width: 16em; } }
@keyframes dq-pisca { to { visibility: hidden; } }
@keyframes dq-traca-a { 0%, 28% { stroke-dashoffset: 1; } 42%, 100% { stroke-dashoffset: 0; } }
@keyframes dq-traca-b { 0%, 38% { stroke-dashoffset: 1; } 50%, 100% { stroke-dashoffset: 0; } }
@keyframes dq-nome-a { 0%, 52% { opacity: 0; transform: translateY(4px); } 58%, 100% { opacity: 1; transform: none; } }
@keyframes dq-nome-b { 0%, 57% { opacity: 0; transform: translateY(4px); } 63%, 100% { opacity: 1; transform: none; } }
@keyframes dq-l1 { 0%, 4% { stroke-dashoffset: 1; } 14%, 100% { stroke-dashoffset: 0; } }
@keyframes dq-l2 { 0%, 14% { stroke-dashoffset: 1; } 26%, 100% { stroke-dashoffset: 0; } }
@keyframes dq-l3 { 0%, 26% { stroke-dashoffset: 1; } 42%, 100% { stroke-dashoffset: 0; } }
@keyframes dq-l4 { 0%, 42% { stroke-dashoffset: 1; } 54%, 100% { stroke-dashoffset: 0; } }
@keyframes dq-l5 { 0%, 54% { stroke-dashoffset: 1; } 66%, 100% { stroke-dashoffset: 0; } }
@keyframes dq-boia { 50% { transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .dq-folha, .dq-pergunta__txt, .dq-cursor, .dq-cursor-svg, .dq-ondas path, .dq-nome, .dq-app { animation: none; }
  .dq-pergunta__txt { max-width: none; }
  .dq-ondas path { stroke-dashoffset: 0; }
  .dq-nome { opacity: 1; }
}

/* ============================================================
   A trilha de cada aba (12/10/2026, treinador/trilha.js)
   ------------------------------------------------------------
   Pedido do dono: "eu estou perdido dentro do proprio app". A
   referencia e a pagina de documentacao do Claude: a lista "Nesta
   pagina" a direita, com a secao da vez acesa por um traco, e as
   etapas numeradas com a linha descendo entre elas.

   No computador largo a coluna fica presa ao lado do conteudo. Em tela
   mais estreita ela se desfaz: a lista vira uma fileira de atalhos que
   gruda no topo, e o passo a passo desce pro fim da aba.
   ============================================================ */
.aba-grade { display: flex; flex-direction: column; min-width: 0; }
.aba-corpo { min-width: 0; }
.trilha { display: contents; }
.trilha__rotulo { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--text-3); }
.trilha__titulo { margin: 4px 0 0; font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--text); }

/* a lista: uma fileira que gruda no topo (tela estreita) */
.trilha__nav { order: -1; position: sticky; top: 0; z-index: 6; margin: 0 calc(-1 * var(--pad, 16px)); padding: 8px var(--pad, 16px);
  background: var(--bg); border-bottom: 1px solid var(--border-soft); }
.trilha__nav .trilha__rotulo { display: none; }
.trilha__lista { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.trilha__lista::-webkit-scrollbar { display: none; }
.trilha__link { display: block; padding: 6px 12px; border: 1px solid var(--border-soft); border-radius: var(--r-pill); white-space: nowrap;
  font-size: var(--fs-sm); line-height: 1.3; color: var(--text-2); text-decoration: none; }
.trilha__link.is-on { border-color: var(--text); color: var(--text); font-weight: 600; }
.trilha__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* o passo a passo: no fim da aba (tela estreita), janelinha e etapas lado a lado quando cabe */
.trilha__guia.demo { order: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 36px; padding: 20px 0 0;
  border-top: 1px solid var(--border-soft); background: none; border-radius: 0; }
.demo--trilha .demo__janela { border: 1px solid var(--border-soft); border-radius: 14px; overflow: hidden; background: var(--bg); box-shadow: none; }
.demo--trilha .demo__cenas { min-height: 172px; padding: 12px; font-size: 12.5px; }
.demo--trilha .demo__aba { font-size: 10.5px; }
.demo--trilha .demo-linha { padding: 8px 10px; }
.demo--trilha .demo-busca { padding: 4px 4px 4px 11px; }
.demo--trilha .demo-btn { min-height: 26px; padding: 4px 10px; font-size: 11.5px; }
.etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.etapas li { position: relative; }
/* a linha que desce de uma etapa a outra, como nas "Etapas" da referencia */
.etapas li:not(:last-child)::after { content: ''; position: absolute; left: 23px; top: 40px; bottom: -6px; width: 1px; background: var(--border); }
.etapas .demo__passo { padding: 8px 10px; }
.etapas .demo__passo > b { position: relative; z-index: 1; }
@media (min-width: 760px) {
  .trilha__guia.demo { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 28px; }
  .trilha__guia > .trilha__rotulo, .trilha__guia > .trilha__titulo { grid-column: 1 / -1; }
}

/* ---------- a coluna presa ao lado (computador largo) ---------- */
@media (min-width: 1280px) {
  .aba-grade { display: grid; grid-template-columns: minmax(0, 1fr) 268px; column-gap: 40px; align-items: start; }
  .trilha { display: grid; gap: 26px; position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow-y: auto; overscroll-behavior: contain;
    padding: 6px 2px 12px 22px; border-left: 1px solid var(--border-soft); scrollbar-width: thin; }
  .trilha__nav { order: 0; position: static; margin: 0; padding: 0; background: none; border: 0; }
  .trilha__nav .trilha__rotulo { display: block; margin-bottom: 8px; }
  .trilha__lista { display: grid; gap: 0; overflow: visible; }
  .trilha__link { padding: 6px 0 6px 14px; margin-left: -23px; border: 0; border-left: 2px solid transparent; border-radius: 0; white-space: normal; }
  .trilha__link.is-on { border-color: var(--text); }
  .trilha__guia.demo { order: 0; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; border: 0; }
  .trilha__guia > .trilha__rotulo, .trilha__guia > .trilha__titulo { grid-column: auto; }
}
@media (prefers-reduced-motion: no-preference) { .trilha__link { transition: color .15s, border-color .15s; } }

/* ============================================================
   As pecas da leitura: secao, quadro, tabela, ranking, aviso, abre
   ------------------------------------------------------------
   Um vocabulario so pra todas as abas: contorno fino com fundo neutro,
   titulo com o desenho do assunto, e uma frase dizendo o que se ve.
   ============================================================ */
.sec { margin-top: 34px; scroll-margin-top: 64px; }
.aba-corpo > .sec:first-child { margin-top: 18px; }
.sec__topo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; min-width: 0; }
.sec__ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border-soft); border-radius: 12px;
  background: var(--surface); color: var(--text); }
.sec__txt { flex: 1; min-width: 0; }
.sec__titulo { margin: 0; font-size: var(--fs-lg); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.sec__sobre { margin: 2px 0 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--text-3); }
.sec__acoes { flex: none; }
.sec__pe { margin: 10px 0 0; }
.sec > .coach-filtros:first-of-type { margin-top: 0; }
@media (min-width: 1280px) { .sec { scroll-margin-top: 20px; } }
@media (prefers-reduced-motion: no-preference) {
  .sec--chegou > .sec__topo .sec__ic { animation: sec-chegou 1.1s ease-out 1; }
}
@keyframes sec-chegou { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }

.quadro { min-width: 0; padding: 16px 18px; border: 1px solid var(--border-soft); border-radius: var(--r-card); background: var(--surface); }
.quadro + .quadro, .quadro + .gcard, .gcard + .quadro, #coach-editor:not(:empty) + .quadro, .quadro + #coach-editor:not(:empty) { margin-top: 12px; }
.quadro--vazado { background: none; }
.quadro > .stat__label:first-child { margin-bottom: 10px; }
.quadro > .gcard { margin: 12px 0 0; padding: 0; background: none; border-radius: 0; }
.quadro > .gcard:first-child { margin-top: 0; }

/* dois lado a lado; um embaixo do outro quando nao cabe */
.bento-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.bento-2 > * { min-width: 0; }
.bento-2 .gcard { margin-top: 0; }
.bento-2 > #intel > .gcard + .gcard { margin-top: 12px; }
.bento-2 > #ficha-fora > .quadro { height: 100%; }
@media (min-width: 900px) { .bento-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sec > .bento-2 + .abre, .sec > .abre { margin-top: 12px; }

/* ---------- a tabela: a medida, o agora e o antes ---------- */
.tab-q { border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; background: var(--bg); }
.tab-q__l { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 12px;
  border-top: 1px solid var(--border-soft); font-size: var(--fs-sm); line-height: 1.35; }
.tab-q__l--topo { border-top: 0; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text-2); }
.tab-q__l b { display: block; font-weight: 500; color: var(--text); }
.tab-q__l small { display: block; margin-top: 1px; font-size: 12px; line-height: 1.35; color: var(--text-3); }
.tab-q__v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.tab-q__l--topo .tab-q__v { font-weight: 600; color: var(--text-2); }
.tab-q__v--antes { font-weight: 400; color: var(--text-3); }

/* ---------- o ranking: o que mais foge do comum ---------- */
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rank__l { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; width: 100%;
  padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg); }
.rank__l--toque { grid-template-columns: 26px minmax(0, 1fr) auto 16px; cursor: pointer; }
.rank__l--toque:active { transform: scale(.994); opacity: .9; }
.rank__l--toque:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rank__l > svg { color: var(--text-3); }
.rank__n { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 50%; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text-2); }
.rank__txt { min-width: 0; display: grid; gap: 1px; font-size: var(--fs-sm); line-height: 1.4; color: var(--text-2); }
.rank__txt strong { font-weight: 600; color: var(--text); }
.rank__l .etiqueta { justify-self: end; white-space: nowrap; }
@media (max-width: 560px) {
  .rank__l, .rank__l--toque { grid-template-columns: 26px minmax(0, 1fr); row-gap: 6px; }
  .rank__l .etiqueta { grid-column: 2; justify-self: start; }
  .rank__l > svg { display: none; }
}

/* ---------- os avisos: uma linha cada ---------- */
.avisos { border: 1px solid var(--border-soft); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.aviso-l { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 10px; align-items: start; padding: 14px 16px;
  border-top: 1px solid var(--border-soft); }
.aviso-l:first-child { border-top: 0; }
.aviso-l__ic { display: grid; place-items: center; width: 24px; height: 24px; color: var(--text); }
.aviso-l__txt { min-width: 0; }
.aviso-l__titulo { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.aviso-l__fato { margin: 3px 0 0; font-size: var(--fs-body, 16px); line-height: 1.4; color: var(--text); }
.aviso-l .coach-criterio { margin-top: 4px; }
.aviso-l__acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.aviso-l__acoes .btn { width: auto; }
@media (max-width: 760px) { .aviso-l__acoes { grid-column: 2; justify-content: flex-start; } }

/* ---------- o que abre e fecha (e o painel lembra) ---------- */
.abre { margin-top: 10px; }
.abre__puxa { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 9px; border: 1px solid var(--border);
  border-radius: var(--r-pill); background: var(--bg); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); cursor: pointer; user-select: none; }
.abre__puxa::-webkit-details-marker { display: none; }
.abre__puxa svg { flex: none; color: var(--text-3); }
.abre[open] > .abre__puxa svg { transform: rotate(90deg); }
.abre[open] > .abre__puxa .abre__ver, .abre:not([open]) > .abre__puxa .abre__fechar { display: none; }
.abre__puxa:active { transform: scale(.985); opacity: .9; }
.abre__puxa:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.abre__corpo { margin-top: 12px; }
.abre__corpo > .gcard:first-child, .abre__corpo > .coach-ind:first-child { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) { .abre__puxa svg { transition: transform .18s; } }

/* ---------- o Inicio ---------- */
.resumo-frase { margin: 14px 0 0; font-size: var(--fs-body, 16px); line-height: 1.45; color: var(--text-2); }
.resumo-frase b { font-weight: 600; color: var(--text); }
.sec .coach-ind { margin: 14px 0 0; }
.sec .abre .coach-ind { margin-top: 0; }

/* ---------- a lista de atletas: dois por linha, tres fatos cada ---------- */
.atl-opcoes { margin-top: 4px; }
.atl-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .atl-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.atl { min-width: 0; padding: 16px 18px; border: 1px solid var(--border-soft); border-radius: var(--r-card); background: var(--surface); }
.atl:active { transform: scale(.994); opacity: .92; }
.atl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.atl__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.atl__quem { min-width: 0; }
.atl__nome { margin: 0; font-size: var(--fs-body, 16px); line-height: 1.3; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.atl__nota, .atl__rotulo { margin: 0; font-size: 12px; line-height: 1.35; color: var(--text-3); }
.atl__topo .etiqueta { flex: none; white-space: nowrap; }
.atl__fatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.atl__fato { display: grid; gap: 2px; min-width: 0; }
.atl__fato b { font-size: var(--fs-body, 16px); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); overflow-wrap: anywhere; }
.atl .treinador-atleta__linha { margin-top: 14px; }
@media (max-width: 420px) { .atl__fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- o cartao do atleta enxuto, como o Attio (18/10/2026) ----------
   Pedido do dono: a lista estressava com todos os numeros de todo mundo
   de uma vez. Fica o desenho de perfil e o nome; um ponto pequeno marca
   quem relatou dor (vermelho) ou esta parado (amarelo). O toque abre os
   detalhes no proprio cartao, e o botao de dentro leva pra ficha. */
.atl-grade { align-items: start; }
/* quantos cabem com o nome inteiro: 260px por cartao, e o aberto ocupa a linha toda */
@media (min-width: 900px) { .atl-grade { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .atl-grade .atl.is-aberto { grid-column: 1 / -1; } }
.painel-body .atl { padding: 0; overflow: hidden; }
.atl__linha { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 12px; border: 0; background: none;
  color: var(--text); font: inherit; text-align: left; cursor: pointer; border-radius: inherit; }
.atl__linha:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.atl__linha:hover { background: var(--preenche-suave, var(--surface)); }
.atl__perfil { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--text-2); }
.atl__linha .atl__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
.atl__ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; display: none; }
.atl[data-estado="doeu"] .atl__ponto { display: block; background: #E5483C; }
.atl[data-estado="pulou"] .atl__ponto { display: block; background: var(--warn); }
.atl__seta { flex: none; display: inline-flex; color: var(--text-3); transition: transform .18s var(--ease, ease); }
.atl.is-aberto .atl__seta { transform: rotate(180deg); }
.atl__mais { padding: 0 14px 14px; }
.atl__mais[hidden] { display: none; }
.atl__mais .atl__topo { align-items: center; padding-top: 12px; border-top: 1px solid var(--contorno-dentro, var(--border-soft)); }
.atl__mais .atl__fatos { margin-top: 12px; }
.atl__abrir { width: 100%; margin-top: 14px; }
.atl:active { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .atl__seta { transition: none; } }

/* ---------- a ficha: quem e, e os quatro temas ---------- */
.ficha-topo__nome { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: var(--gap-md, 16px); }
.ficha-topo__nome .h3 { margin: 0; }
.ident { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ident:empty { display: none; }
.ident__i { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 4px 11px; border: 1px solid var(--border-soft); border-radius: var(--r-pill);
  font-size: 13px; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.ident__i small { font-size: 12px; color: var(--text-3); }
.temas { margin-top: 12px; align-items: start; }
.tema { display: grid; gap: 10px; align-content: start; scroll-margin-top: 64px; }
.tema .sec__topo { margin-bottom: 2px; }
.tema .sec__titulo { font-size: var(--fs-body, 16px); }
.tema .etiqueta { flex: none; white-space: nowrap; }
.tema__frase { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--text); }
.tema__alerta { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--warn-tint, var(--surface-2)); font-size: var(--fs-sm); line-height: 1.4; color: var(--text); }
.tema .abre { margin-top: 0; }
.tema.sec--chegou .sec__ic { animation: sec-chegou 1.1s ease-out 1; }
.tema__grafs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.tema__grafs + .gcard { margin-top: 12px; }
@media (min-width: 1280px) { .tema { scroll-margin-top: 20px; } }
@media (prefers-reduced-motion: reduce) { .tema.sec--chegou .sec__ic { animation: none; } }
.quadro > .stat__label + .treinador-sessao, .quadro > .treinador-sessao:first-child { border-top: 0; padding-top: 0; }

/* ---------- as pecas pequenas das cenas da trilha ---------- */
.demo-posto > span:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; }
.demo-posto small { grid-column: 2; font-size: 11px; line-height: 1.3; color: var(--text-3); }
.demo-n { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--border); border-radius: 50%; font-size: 10px; font-weight: 700; color: var(--text-2); }
.demo-tema { gap: 0; }
.demo-tema .demo-topo { margin-bottom: 6px; }
.demo-medida { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border-soft); font-size: 11.5px; line-height: 1.3; }
.demo-medida b { font-weight: 600; font-variant-numeric: tabular-nums; }
.demo-medida i { min-width: 34px; text-align: right; font-style: normal; color: var(--text-3); font-variant-numeric: tabular-nums; }
.demo-quadros--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.demo-quadros--3 > div { padding: 8px; }
.demo-quadros--3 .demo-numero { font-size: 14px; }
.demo-topo .etiqueta { font-size: 10.5px; min-height: 20px; padding: 1px 8px; flex: none; }

/* a busca nao estica quando o cartao da IA ao lado e mais alto que ela */
.coach-topo:has(> .dq-cartao) { grid-template-rows: auto auto 1fr; }
.coach-topo > .coach-busca { align-self: start; }
.rank__txt small { font-size: 12px; line-height: 1.35; color: var(--text-3); }
.bento-2 > .quadro, .bento-2 > .quadro + .quadro { margin-top: 0; }
/* cada tema com a propria altura: abrir o grafico de um nao estica o vizinho */
.temas { align-items: start; }
.coach-chat .treinador-conversa__lista { margin-top: 0; }
/* os quatro numeros do resumo numa linha so; dois por linha quando aperta */
.sec .coach-ind { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .sec .coach-ind { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sec .coach-tile { padding: 14px; min-width: 0; }
.sec .fin-valor { font-size: 21px; }
/* a coluna rola por dentro quando a aba tem muitas secoes; sem trilho de rolagem a vista */
@media (min-width: 1280px) { .trilha { scrollbar-width: none; } .trilha::-webkit-scrollbar { display: none; } }

/* ============================================================
   Os contornos (12/10/2026, segunda volta do dono)
   ------------------------------------------------------------
   "Use outlines ao redor dos cards (...) o que for possivel de apertar
   ou editar, faca que possa ter outlines ao redor do background para
   trazer mais foco." A referencia sao os cartoes da documentacao do
   Claude: linha fina a vista e um fundo quase igual ao da pagina.

   Duas linhas, e so elas:
     --contorno        todo cartao (o que se LE);
     --contorno-forte  o que se APERTA ou se EDITA.
   Saem da cor do texto, entao valem nos dois temas sem numero novo.
   O fundo do cartao fica a meio caminho entre a pagina e o cinza.
   ============================================================ */
.painel-body {
  --contorno: color-mix(in srgb, var(--text) 13%, transparent);
  --contorno-forte: color-mix(in srgb, var(--text) 30%, transparent);
  --cartao: color-mix(in srgb, var(--surface) 46%, var(--bg));
}

/* o que se le: cartao com linha fina */
.painel-body .gcard,
.painel-body .quadro,
.painel-body .avisos,
.painel-body .semdado,
.painel-body .emb { border: 1px solid var(--contorno); background: var(--cartao); }
.painel-body .quadro--vazado { background: none; }
.painel-body .quadro > .gcard, .painel-body .abre__corpo > .gcard .gcard { border: 0; background: none; }
.painel-body .tab-q { border-color: var(--contorno); }
.painel-body .tab-q__l, .painel-body .aviso-l, .painel-body .atl__fatos { border-color: var(--contorno); }
.painel-body .tab-q__l--topo { background: color-mix(in srgb, var(--text) 6%, var(--bg)); }
.painel-body .sec__ic { border-color: var(--contorno); background: var(--cartao); }
.painel-body .ident__i { border-color: var(--contorno); }
.painel-body .rank__l { border-color: var(--contorno); }
.painel-body .treinador-sessao, .painel-body .coach-prop, .painel-body .fin-cobranca, .painel-body .coach-comp__l { border-color: var(--contorno); }
.painel-body .demo--trilha .demo__janela { border-color: var(--contorno); }
.painel-body .trilha, .painel-body .trilha__nav, .painel-body .trilha__guia.demo { border-color: var(--contorno); }

/* o que se aperta ou se edita: a linha um tom mais forte */
.painel-body .coach-tile,
.painel-body .atl,
.painel-body .rank__l--toque,
.painel-body .coach-linha:not(.coach-linha--fixa),
.painel-body .coach-chip,
.painel-body .abre__puxa,
.painel-body .guia__puxa,
.painel-body .btn--outline,
.painel-body .x-fechar,
.painel-body .coach-busca,
.painel-body .treinador-conversa__form,
.painel-body .field__input,
.painel-body .sel-botao { border: 1px solid var(--contorno-forte); }
.painel-body .coach-tile, .painel-body .atl, .painel-body .rank__l--toque { background: var(--cartao); }
.painel-body .coach-chip.is-on { border-color: var(--accent); }
.painel-body .coach-busca .field__input, .painel-body .treinador-conversa__form .field__input { border: 0; }
.painel-body .fin-tile--alerta { border-color: color-mix(in srgb, #C4271C 60%, transparent); }
@media (max-width: 1279px) { .painel-body .trilha__link { border-color: var(--contorno-forte); } .painel-body .trilha__link.is-on { border-color: var(--text); } }

/* ---------- o passo a passo que se fecha (cada aba lembra a sua) ---------- */
.trilha__guia.demo { position: relative; }
.trilha__x { position: absolute; top: 14px; right: 0; width: 28px; height: 28px; }
.trilha__guia > .trilha__titulo { padding-right: 34px; }
.trilha__volta { order: 3; margin-top: 28px; }
@media (min-width: 1280px) {
  .trilha__x { top: -4px; }
  .trilha__volta { order: 0; margin-top: 0; }
}

/* ---------- o aviso que desliza de fora da tela ----------
   Era uma faixa no topo de toda aba, empurrando o conteudo. Virou um
   cartao flutuante no canto de baixo, por cima da pagina, com contorno,
   a acao e o X. No celular ele ocupa a largura, colado no pe. */
.topo-avisos { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); padding: 0; pointer-events: none; }
.topo-aviso { pointer-events: auto; position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; row-gap: 12px; align-items: start;
  padding: 16px 44px 16px 16px; border-radius: 18px; border: 1px solid var(--contorno-forte, var(--border)); background: var(--bg-elev, var(--bg));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .10); }
.topo-aviso__ic { margin-top: 1px; }
.topo-aviso__txt { flex: none; }
.topo-aviso .btn { grid-column: 2; justify-self: end; width: auto; margin: 0; }
.topo-aviso > .bi { grid-column: 2; justify-self: end; }
.nut-fila-faixa .brf-frase > .bi { margin-left: auto; }
.topo-aviso__x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; }
.topo-avisos + .painel__head { padding-top: 0; }
@media (max-width: 640px) {
  .topo-avisos { right: 12px; left: 12px; bottom: calc(12px + var(--safe-bottom, 0px)); width: auto; }
  .topo-aviso { flex-wrap: nowrap; }
  .topo-aviso__txt { flex-basis: auto; }
  .topo-aviso .btn { margin-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .topo-aviso--chega { animation: aviso-chega .5s cubic-bezier(.2, .9, .25, 1.05) .35s both; }
}
@keyframes aviso-chega { from { transform: translateX(calc(100% + 40px)); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================================================
   As dobras (12/10/2026, terceira volta do dono)
   ------------------------------------------------------------
   "Faca que nem nos fizemos no Hoje, fica aquela parte pra pegar e
   descer (...) quanto menos coisas aparecer, mais clareza o usuario
   tera." Cada secao de cada aba e uma linha: o desenho, o titulo, o
   resumo e a seta. Abre no lugar; a frase do que ela mostra so aparece
   aberta. Uma nasce aberta por aba (a do "Comece aqui"), o resto a um
   toque, e o painel lembra o que cada treinador deixou aberto.

   E o fundo: so o que se APERTA leva o fundo mais claro. O que e so
   informacao fica com o contorno e o fundo da pagina (o dono, com os
   cartoes da documentacao do Claude: "ha momentos que nao precisa
   clarear o background, se for apenas informacao").
   ============================================================ */
.painel-body .gcard,
.painel-body .quadro,
.painel-body .avisos,
.painel-body .semdado,
.painel-body .emb { background: none; }
.painel-body .rank__l:not(.rank__l--toque) { background: none; }

.sec.dobra { display: block; margin-top: 10px; border: 1px solid var(--contorno-forte); border-radius: 16px; overflow: clip; scroll-margin-top: 64px; }
.aba-corpo > .sec.dobra:first-child, .painel__head + .sec.dobra { margin-top: 16px; }
.dobra__cabeca { list-style: none; display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; background: var(--cartao);
  cursor: pointer; user-select: none; }
.dobra__cabeca::-webkit-details-marker { display: none; }
.dobra__cabeca:active { opacity: .9; }
.dobra__cabeca:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dobra[open] > .dobra__cabeca { border-bottom: 1px solid var(--contorno); }
.dobra .sec__ic { width: 34px; height: 34px; border-radius: 11px; background: none; }
.dobra .sec__txt { display: grid; gap: 1px; }
.dobra .sec__titulo { display: block; font-size: var(--fs-body, 16px); }
.dobra .sec__sobre { display: none; margin: 0; }
.dobra[open] > .dobra__cabeca .sec__sobre { display: block; }
.dobra__resumo { flex: none; max-width: 46%; text-align: right; font-size: var(--fs-sm); line-height: 1.3; color: var(--text-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dobra__resumo .etiqueta { white-space: nowrap; }
.dobra__comece { flex: none; padding: 3px 9px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.dobra__seta { flex: none; display: grid; color: var(--text-3); }
.dobra[open] > .dobra__cabeca .dobra__seta { transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) { .dobra__seta { transition: transform .18s; } }
.dobra__corpo { padding: 14px; }
.dobra__corpo > :first-child { margin-top: 0; }
@media (min-width: 1280px) { .sec.dobra { scroll-margin-top: 20px; } }
@media (max-width: 560px) {
  .dobra__cabeca { gap: 10px; padding: 11px 12px; }
  .dobra__resumo { max-width: 40%; font-size: 12px; }
  .dobra__corpo { padding: 12px; }
}

/* dentro de uma dobra o contorno e dela: o quadro de dentro nao desenha outro */
.painel-body .dobra__corpo > .quadro,
.painel-body .dobra__corpo > .avisos,
.painel-body .dobra__corpo > div > .quadro,
.painel-body .dobra__corpo > .gcard,
.painel-body .dobra__corpo > .semdado { border: 0; border-radius: 0; padding: 0; }
.painel-body .dobra__corpo > .quadro + .quadro,
.painel-body .dobra__corpo > .quadro + #coach-editor:not(:empty),
.painel-body .dobra__corpo > #coach-editor:not(:empty) + .quadro,
.painel-body .dobra__corpo > .gcard + .gcard,
.painel-body .dobra__corpo > .tema__grafs + .gcard { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--contorno); }
.painel-body .dobra__corpo > .avisos .aviso-l { padding-left: 0; padding-right: 0; }
.painel-body .dobra__corpo > .avisos .aviso-l:first-child { padding-top: 0; }
.dobra__corpo > .coach-filtros:first-child { margin-top: 0; }
.dobra__corpo .coach-ind { margin-top: 12px; }
.dobra__corpo > .abre:first-child { margin-top: 0; }

/* os temas da ficha: quatro linhas, uma por tema */
.temas { display: block; margin-top: 0; }
.tema > .dobra__corpo { display: grid; gap: 10px; }
.tema > .dobra__corpo > * { margin-top: 0; }
#ficha-fora > .quadro { border: 0; padding: 0; }
#ficha-fora { margin-top: 12px; }

/* ---------- o estado do pagamento, em desenho ---------- */
.pg { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.pg--ok { background: var(--certo); color: var(--on-accent); }
.pg--falta { background: #C4271C; color: #FFFFFF; }
.pg--espera, .pg--neutro { border: 1px solid var(--contorno-forte); color: var(--text-2); }
.sec__ic > .pg { width: 22px; height: 22px; }
.sec__ic > .pg svg { width: 13px; height: 13px; }
.painel-body .fin-atleta { flex-wrap: nowrap; align-items: center; gap: 12px; padding: 10px 12px; }
.fin-atleta .fin-atleta__quem { flex: 1 1 auto; }
.fin-atleta .fin-atleta__fato { flex: none; max-width: 48%; margin-left: auto; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- a pergunta de rotina (treinador/rotina.js) ---------- */
.tut--rotina .tut__passo { margin-top: 0; }
.rotina-ops { display: grid; gap: 10px; margin-top: 18px; }
.rotina-op { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 16px;
  border: 1px solid var(--contorno-forte, var(--border)); background: var(--cartao, var(--surface)); cursor: pointer; }
.rotina-op:active { transform: scale(.985); opacity: .9; }
.rotina-op:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rotina-op__ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--contorno, var(--border-soft)); color: var(--text); }
.rotina-op__txt { display: grid; gap: 2px; min-width: 0; }
.rotina-op__txt b { font-size: var(--fs-body, 16px); font-weight: 600; color: var(--text); }
.rotina-op__txt small { font-size: var(--fs-sm); line-height: 1.4; color: var(--text-2); }
.tut--rotina .tut__acoes { margin-top: 14px; }
/* o que se aperta dentro de uma dobra leva o mesmo fundo claro dos outros clicaveis */
.painel-body .coach-linha:not(.coach-linha--fixa) { background: var(--cartao); }
/* com aviso flutuando no canto, a pagina ganha um pe pra o fim dela nao ficar por baixo dele */
.painel-body .painel__main:has(.topo-avisos) { padding-bottom: 200px; }
/* no celular a linha da dobra fica so com o titulo, o selo e o resumo: a frase de apoio nao cabe ao lado */
@media (max-width: 560px) { .dobra[open] > .dobra__cabeca .sec__sobre { display: none; } }

/* ============================================================
   Quarta volta do dono (12/10/2026)
   ------------------------------------------------------------
   "Coloque animacoes de quando descer o negocio (...) alguns textos
   novos ficaram muito pequenos (...) os icons de certo e errado, o
   desenho de dentro ficou pequeno, uns 22% a mais (...) ver o passo a
   passo sempre em ultimo (...) o pequeno questionario."
   ============================================================ */

/* ---------- a dobra desce e sobe ----------
   A altura anda de zero ate o tamanho do conteudo (e volta), e o
   conteudo entra junto. Navegador que ainda nao anima a altura de um
   details fica so com a entrada do conteudo. Com "reduzir movimento",
   nada se mexe. */
@media (prefers-reduced-motion: no-preference) {
  .painel-body { interpolate-size: allow-keywords; }
  .dobra::details-content, .abre::details-content { block-size: 0; overflow: clip;
    transition: block-size .32s cubic-bezier(.3, .8, .25, 1), content-visibility .32s allow-discrete; }
  .dobra[open]::details-content, .abre[open]::details-content { block-size: auto; }
  .dobra[open] > .dobra__corpo, .abre[open] > .abre__corpo { animation: dobra-desce .34s cubic-bezier(.3, .8, .25, 1) both; }
  .dobra__seta, .abre__puxa svg { transition: transform .26s cubic-bezier(.3, .8, .25, 1); }
  /* o redesenho de um botao nao reabre a secao do zero (a pagina encolhia e a tela subia) */
  .is-repintando .dobra::details-content, .is-repintando .abre::details-content,
  .dobra.is-quieto::details-content, .abre.is-quieto::details-content { transition: none; }
  .is-repintando .dobra[open] > .dobra__corpo, .is-repintando .abre[open] > .abre__corpo,
  .dobra.is-quieto > .dobra__corpo, .abre.is-quieto > .abre__corpo { animation: none; }
}
@keyframes dobra-desce { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- a letra: o que nasceu pequeno sobe um degrau ---------- */
.painel-body .dobra__resumo { font-size: 15px; }
.painel-body .dobra .sec__sobre, .painel-body .sec__sobre { font-size: 15px; line-height: 1.45; }
.painel-body .dobra__comece { font-size: 12.5px; padding: 4px 10px; }
.painel-body .rank__txt { font-size: 15px; }
.painel-body .rank__txt small { font-size: 13.5px; }
.painel-body .rank__n { font-size: 13px; }
.painel-body .aviso-l__titulo { font-size: 13.5px; }
.painel-body .aviso-l .coach-criterio summary, .painel-body .aviso-l .coach-criterio p { font-size: 13.5px; }
.painel-body .tab-q__l { font-size: 15px; }
.painel-body .tab-q__l--topo { font-size: 13.5px; }
.painel-body .tab-q__l small { font-size: 13.5px; }
.painel-body .tema__frase, .painel-body .tema__alerta { font-size: 15px; }
.painel-body .atl__nota, .painel-body .atl__rotulo { font-size: 13.5px; }
.painel-body .ident__i { font-size: 14px; }
.painel-body .ident__i small { font-size: 13px; }
/* o rotulo nao quebra no meio da palavra ("Disponibilidad / e" no celular); quem quebra e o valor */
.painel-body .ident__i small { flex: none; white-space: nowrap; }
.painel-body .trilha__rotulo { font-size: 13px; }
.painel-body .trilha__link { font-size: 15px; }
.painel-body .sec__pe, .painel-body .dobra__corpo .xs { font-size: 13.5px; line-height: 1.45; }
.painel-body .abre__puxa { font-size: 15px; }
.painel-body .fin-atleta .sm, .painel-body .fin-atleta__fato { font-size: 15px; }
.painel-body .etapas .demo__passo strong { font-size: 15px; }
.painel-body .etapas .demo__passo small { font-size: 13.5px; }
.painel-body .topo-aviso__txt { font-size: 15px; }
@media (max-width: 560px) { .painel-body .dobra__resumo { font-size: 13.5px; } }

/* ---------- o desenho de dentro do certo/errado, 22% maior ---------- */
.pg svg { width: 20px; height: 20px; }
.sec__ic > .pg { width: 24px; height: 24px; }
.sec__ic > .pg svg { width: 16px; height: 16px; }

/* ---------- o passo a passo: a ultima linha da aba ---------- */
.dobra--passo .trilha__guia.demo { order: 0; margin: 0; padding: 0; border: 0; }
.trilha__volta, .trilha__x { display: none; }
@media (min-width: 1280px) {
  .dobra--passo .trilha__guia.demo { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); column-gap: 28px; }
}

/* ---------- o questionario de rotina ---------- */
.rotina-topo { display: grid; gap: 10px; margin-bottom: 14px; }
.rotina-topo .tut__passo { margin: 0; font-size: 13.5px; }
.rotina-op.is-on { border-color: var(--accent); }
.rotina-ops--marcas { grid-template-columns: 1fr; gap: 8px; }
.rotina-marca { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--contorno-forte, var(--border)); background: var(--cartao, var(--surface)); font-size: var(--fs-body, 16px); color: var(--text-2); cursor: pointer; }
.rotina-marca i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--contorno-forte, var(--border)); color: transparent; }
.rotina-marca.is-on { color: var(--text); }
.rotina-marca.is-on i { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.rotina-marca:active { transform: scale(.985); }
.rotina-marca:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rotina-pe { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; }
.rotina-pe .btn { width: auto; }
@media (prefers-reduced-motion: no-preference) { .rotina-passo { animation: dobra-desce .3s cubic-bezier(.3, .8, .25, 1) both; } }

/* ---------- o aviso em modo contador: so o sino com o numero ---------- */
.topo-avisos--sino { width: auto; }
.topo-sino { pointer-events: auto; position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--contorno-forte, var(--border)); background: var(--bg-elev, var(--bg)); color: var(--text); box-shadow: 0 12px 30px rgba(0, 0, 0, .2); justify-self: end; }
.topo-sino b { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700; }
.topo-sino:active { transform: scale(.95); }
.topo-sino:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.painel-body .painel__main:has(.topo-avisos--sino) { padding-bottom: 96px; }

/* ============================================================
   Cor cheia e so de quem FAZ alguma coisa (12/10/2026, REGRA DO DONO)
   ------------------------------------------------------------
   "Pilulas totalmente verdes, apenas para botoes / transmitir funcoes,
   nunca para apenas transmitir informacoes, para nao confundir o
   usuario." Uma pilula verde escrito "Pagamento confirmado" parece um
   botao de confirmar o pagamento.

   Entao tudo que so INFORMA (etiqueta de estado, situacao da cobranca,
   o circulo do pagou / nao pagou, o selo "Comece aqui", o numero do
   sino) fica neutro: contorno, cor do texto e um desenho pequeno que
   diz o estado pela FORMA (visto, exclamacao, relogio), nao pela cor.
   Cor cheia continua em botao, atalho ligado e aba ativa.
   ============================================================ */
.painel-body .etiqueta,
.painel-body .fin-tag,
.painel-body .dobra__comece {
  display: inline-flex; align-items: center; gap: 6px; background: none; color: var(--text);
  border: 1px solid var(--contorno-forte); font-weight: 600;
}
.painel-body .etiqueta::before,
.painel-body .fin-tag::before,
.painel-body .dobra__comece::before {
  content: ''; flex: none; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--sinal) center / contain no-repeat; mask: var(--sinal) center / contain no-repeat;
}
.painel-body .etiqueta, .painel-body .fin-tag, .painel-body .dobra__comece {
  --visto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  --alerta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.4v.1'/%3E%3C/svg%3E");
  --relogio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --traco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
  --seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12.5 6.5L18 12l-5.500 5.500'/%3E%3C/svg%3E");
  --sinal: var(--traco);
}
.painel-body .etiqueta--feito, .painel-body .fin-tag--em_dia, .painel-body .fin-tag--paga { --sinal: var(--visto); }
.painel-body .etiqueta--pulou, .painel-body .etiqueta--doeu, .painel-body .fin-tag--vencido, .painel-body .fin-tag--vencida { --sinal: var(--alerta); }
.painel-body .etiqueta--hoje, .painel-body .fin-tag--aguardando, .painel-body .fin-tag--aguardando_aprovacao { --sinal: var(--relogio); }
.painel-body .dobra__comece { --sinal: var(--seta); }
/* o que nao tem estado pra dizer (descanso, isento, sem plano) fica so com a palavra */
.painel-body .etiqueta--descanso::before, .painel-body .fin-tag--isento::before, .painel-body .fin-tag--sem_plano::before,
.painel-body .fin-tag--cancelado::before, .painel-body .fin-tag--cancelada::before { display: none; }
.painel-body .etiqueta--descanso { color: var(--text-2); }

/* o circulo do pagou / nao pagou: o desenho diz, sem cor cheia */
.painel-body .pg, .painel-body .pg--ok, .painel-body .pg--falta, .painel-body .pg--espera, .painel-body .pg--neutro {
  background: none; border: 1px solid var(--contorno-forte); color: var(--text);
}
.painel-body .pg--neutro, .painel-body .pg--espera { color: var(--text-2); }
/* o numero do sino e o aviso de dentro de um tema tambem so informam */
.painel-body .topo-sino b { background: var(--bg-elev, var(--bg)); color: var(--text); border: 1px solid var(--contorno-forte); }
.painel-body .tema__alerta { background: none; border: 1px solid var(--contorno); }
/* nas janelinhas do passo a passo as etiquetas sao as mesmas */
.painel-body .demo-linha .etiqueta, .painel-body .demo-linha .fin-tag, .painel-body .demo-topo .etiqueta { gap: 4px; }
.painel-body .demo-linha .etiqueta::before, .painel-body .demo-linha .fin-tag::before, .painel-body .demo-topo .etiqueta::before { width: 11px; height: 11px; }

/* ============================================================
   Um passo por vez (12/10/2026, quinta volta do dono)
   ------------------------------------------------------------
   Onde ha ordem a seguir, a tela mostra UM passo: "Passo 1 de 3" em
   cima, a parte da vez, e embaixo a seta de voltar e a de proximo. O
   resto fica atras de "Ver o resto"; "Ver tudo" devolve a lista.
   ============================================================ */
.sec.dobra[hidden], .trilha__lista li[hidden] { display: none; }
.guiado__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; min-height: 28px; scroll-margin-top: 70px;
  font-size: 15px; font-weight: 600; color: var(--text-2); }
.guiado__topo + .sec.dobra { margin-top: 8px; }
.guiado__link { all: unset; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.guiado__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.guiado__link:active { opacity: .7; }
.guiado__pe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 12px; }
.guiado__pe .btn { width: auto; display: inline-flex; align-items: center; gap: 8px; }
.guiado__prox { margin-left: auto; min-height: 44px; padding-inline: 18px; font-size: 15px; }
.guiado__volta { min-height: 44px; font-size: 15px; }
.guiado__resto { flex-basis: 100%; }
.guiado__pe > span:empty { display: none; }
/* o passo da vez nao precisa do selo nem da seta de abrir: ele ja e o que esta na tela */
.is-guiado .aba-corpo > .sec.dobra:not([hidden]) > .dobra__cabeca .dobra__comece { display: none; }
/* a lista da direita vira o progresso */
.is-guiado .trilha__link.is-feito { color: var(--text-3); }
.is-guiado .trilha__link.is-feito::before { content: ''; display: inline-block; width: 13px; height: 13px; margin-right: 7px; vertical-align: -1px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (prefers-reduced-motion: no-preference) { .is-guiado .guiado__topo + .sec.dobra { animation: dobra-desce .3s cubic-bezier(.3, .8, .25, 1) both; } }

/* ============================================================
   O metodo de analise (20/10/2026): passos trancados, o desenho de
   estado e o holofote da Tryzen (trilha.js, aplicarGuiado).
   ============================================================ */
/* o desenho de estado, antes da seta: triangulo = resolver, visto = certo, cadeado = depois */
.sec__estado { flex: none; display: grid; place-items: center; }
.sec__estado svg { width: 22px; height: 22px; }
.sec__estado--problema { color: var(--urg-2); }
.sec__estado--ok { color: var(--accent); }
.sec__estado--trava { color: var(--text-3); }
/* a parte trancada: a vista, fechada, apagada; o cadeado no lugar da seta */
.sec.dobra[data-trava] > .dobra__cabeca { cursor: pointer; }
.sec.dobra[data-trava] > .dobra__cabeca > :not(.sec__estado) { opacity: .7; }
.sec.dobra[data-trava] > .dobra__cabeca .dobra__seta,
.sec.dobra[data-trava] > .dobra__cabeca .dobra__comece { display: none; }
.aba-grade[data-guiado] .dobra__comece { display: none; }
/* a lista da direita e o progresso: o mesmo desenho, menor */
.trilha__estado { display: inline-grid; vertical-align: -3px; margin-right: 7px; }
.trilha__estado svg { width: 16px; height: 16px; }
.trilha__estado--problema { color: var(--urg-2); }
.trilha__estado--ok { color: var(--accent); }
.trilha__estado--trava { color: var(--text-3); }
.trilha__link.is-trava { color: var(--text-3); cursor: pointer; }
/* a frase da Tryzen: a primeira linha do passo */
.tz-fala { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 14px; padding: 12px 14px; border: 1px solid var(--contorno, var(--border-soft)); border-radius: 14px;
  background: var(--cartao, var(--surface)); position: relative; }
.tz-fala::after { content: ''; position: absolute; left: 26px; bottom: -7px; width: 12px; height: 12px; background: inherit;
  border-right: 1px solid var(--contorno, var(--border-soft)); border-bottom: 1px solid var(--contorno, var(--border-soft)); transform: rotate(45deg); }
.tz-fala__marca { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent, #fff); }
.tz-fala p { margin: 3px 0 0; font-size: 15px; line-height: 1.45; color: var(--text); }
.tz-fala b { font-weight: 700; margin-right: 4px; }
.tz-fala--problema { border-color: color-mix(in srgb, var(--urg-2) 55%, transparent); }
.tz-fala p { flex: 1; min-width: 0; }
/* o X so existe enquanto o holofote esta aceso; apagado, a frase fica como a primeira linha do passo */
.tz-fala__x { display: none; flex: none; place-items: center; width: 36px; height: 36px; margin: -6px -6px -6px 0; border: 0; border-radius: 50%;
  background: var(--preenche, color-mix(in srgb, var(--text) 8%, transparent)); color: var(--text); cursor: pointer; }
.sec--holofote .tz-fala__x { display: grid; }
.tz-fala__x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tz-fala__x:active { opacity: .7; }
.guiado__espera { font-size: 14px; color: var(--text-2); }
.guiado__pe--fim { gap: 8px; color: var(--text-2); font-size: 15px; }
.guiado__pe--fim > svg { color: var(--accent); }
.guiado__pe--fim .guiado__link { margin-left: auto; }
/* o holofote: tudo em volta escurece e so o passo da vez fica aceso */
.sec--holofote { position: relative; z-index: 60; border-radius: 16px; background: var(--bg);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 200vmax var(--veu, rgba(0, 0, 0, .5)); }
.tz-alvo { position: relative; }
.sec--holofote .tz-alvo { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .sec--holofote { transition: box-shadow .35s ease; }
  .sec--holofote .tz-alvo { animation: tz-alvo 1.4s ease-out infinite; }
  .tz-fala--chama { animation: tz-chama .5s cubic-bezier(.3, .8, .25, 1) 1; }
  .sec--holofote .tz-fala { animation: dobra-desce .35s cubic-bezier(.3, .8, .25, 1) both; }
}
@keyframes tz-alvo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
@keyframes tz-chama { 0%, 100% { transform: none; } 30% { transform: translateX(-5px); } 60% { transform: translateX(4px); } }
/* a barra lateral: o mesmo desenho no fim da linha de cada aba */
.aba-estado { flex: none; display: grid; margin-left: auto; }
.aba-estado svg { width: 17px; height: 17px; }
.aba-estado--u1 { color: var(--urg-1); }
.aba-estado--u2 { color: var(--urg-2); }
.aba-estado--ok { color: var(--text-3); }
.painel__lado[data-lado="trilho"] .aba-estado { position: absolute; top: 6px; right: 6px; margin: 0; border-radius: 50%; background: var(--bg); }
.painel__lado[data-lado="trilho"] .aba-estado svg { width: 14px; height: 14px; }
@media (max-width: 640px) {
  .painel-body .dobra__cabeca:has(> .sec__estado) { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .painel-body .dobra__cabeca > .sec__estado { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
  .painel-body .dobra__cabeca:has(> .sec__estado) > .dobra__seta { grid-column: 4; }
}

/* ============================================================
   O briefing (12/10/2026, sexta volta do dono)
   ------------------------------------------------------------
   A referencia e a pagina de uso do Claude: a barra repartida com a
   legenda (assunto, percentual, uma linha) e os cartoes de contorno
   com o tema em caixa alta, a frase que conclui e o que fazer.
   A barra nao usa cor de estado: sao tons da cor do texto, do mais
   forte (o que mais pede o treinador) ao mais claro (em dia), pra nao
   competir com o verde dos botoes.
   ============================================================ */
.brf-porta { display: grid; gap: 6px; justify-items: start; padding: 6px 0 2px; }
.brf-porta__frase { margin: 0; font-size: var(--fs-h3, 22px); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.brf-porta .sm { margin: 0; max-width: 56ch; font-size: 15px; line-height: 1.45; }
.brf-porta__botao { width: auto; min-height: 48px; margin-top: 12px; padding-inline: 22px; }
.brf-montando { display: grid; gap: 10px; padding: 8px 0; }
.brf-etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; color: var(--text-2); }
.brf-etapas li { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .brf-etapas li { animation: dobra-desce .35s cubic-bezier(.3, .8, .25, 1) both; }
  .brf-etapas li:nth-child(1) { animation-delay: .25s; }
  .brf-etapas li:nth-child(2) { animation-delay: .75s; }
  .brf-etapas li:nth-child(3) { animation-delay: 1.25s; }
  .brf { animation: dobra-desce .4s cubic-bezier(.3, .8, .25, 1) both; }
  .brf-barra__p { transform-origin: left center; animation: brf-cresce .7s cubic-bezier(.3, .8, .25, 1) both; }
}
@media (prefers-reduced-motion: reduce) { .brf-etapas li { opacity: 1; } }
@keyframes brf-cresce { from { transform: scaleX(0); } to { transform: none; } }

.brf__rotulo { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.brf__rotulo--2 { margin-top: 26px; }
.brf-barra { display: flex; gap: 4px; height: 12px; }
.brf-barra__p { min-width: 10px; border-radius: 6px; background: var(--tom); }
.brf--dor { --tom: color-mix(in srgb, var(--text) 92%, transparent); }
.brf--parado { --tom: color-mix(in srgb, var(--text) 70%, transparent); }
.brf--carga { --tom: color-mix(in srgb, var(--text) 52%, transparent); }
.brf--plano { --tom: color-mix(in srgb, var(--text) 36%, transparent); }
.brf--emdia { --tom: color-mix(in srgb, var(--text) 16%, transparent); }
.brf-legenda { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 28px; margin-top: 16px; }
@media (min-width: 760px) { .brf-legenda { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.brf-legenda__i { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: baseline; }
.brf-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--tom); transform: translateY(1px); }
.brf-legenda__nome { margin: 0; display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-body, 16px); color: var(--text); }
.brf-legenda__nome b { font-weight: 600; }
.brf-legenda__nome span { color: var(--text-2); font-variant-numeric: tabular-nums; }
.brf-legenda__quem { grid-column: 2; margin: 0; font-size: 15px; line-height: 1.4; color: var(--text-2); }

.brf-cartoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 760px) { .brf-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.brf-cartao { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 18px; border: 1px solid var(--contorno); border-radius: var(--r-card); }
.brf-cartao__tema { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.brf-cartao__tema svg { width: 18px; height: 18px; flex: none; }
.brf-cartao__frase { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.005em; color: var(--text); }
.brf-cartao__mais { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.brf-quem { display: grid; gap: 6px; }
.brf-pessoa { all: unset; box-sizing: border-box; display: grid; gap: 1px; width: 100%; padding: 9px 12px; border: 1px solid var(--contorno-forte); border-radius: 12px;
  background: var(--cartao); cursor: pointer; }
.brf-pessoa b { font-size: 15px; font-weight: 600; color: var(--text); }
.brf-pessoa span { font-size: 14px; line-height: 1.4; color: var(--text-2); }
.brf-pessoa:active { transform: scale(.992); opacity: .9; }
.brf-pessoa:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brf-cartao__acao { display: flex; justify-content: flex-end; margin-top: 2px; }
.brf-cartao__acao .btn { width: auto; }
.brf__pe { display: flex; justify-content: flex-end; margin-top: 14px; }

/* ============================================================
   Setima volta do dono (12/10/2026)
   ------------------------------------------------------------
   O botao que se repete vira DESENHO, com o nome na dica ao passar o
   mouse (treinador/botoes.js); a cor vai so no contorno. E o briefing
   monta sozinho, ganha a faixa de uma linha nas outras abas e traz a
   acao pronta ao lado de cada atleta.
   ============================================================ */
.bi { all: unset; box-sizing: border-box; position: relative; flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--contorno-forte, var(--border)); color: var(--text); cursor: pointer; }
.bi:active { transform: scale(.94); }
.bi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bi:disabled { opacity: .45; cursor: default; }
.bi__nome { display: none; }
.bi--ok { border-color: var(--accent); color: var(--accent-texto, var(--accent)); }
.bi--perigo { border-color: #D8453B; color: #D8453B; }
.bi--atencao { border-color: color-mix(in srgb, var(--warn) 75%, var(--text)); color: color-mix(in srgb, var(--warn) 62%, var(--text)); }

/* a dica: o nome do botao ao passar o mouse ou ao focar pelo teclado */
@media (hover: hover) {
  [data-dica]:hover::after, [data-dica]:focus-visible::after { content: attr(data-dica); position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 60;
    width: max-content; max-width: 260px; padding: 6px 10px; border-radius: 9px; background: var(--text); color: var(--bg);
    font-size: 13.5px; font-weight: 600; line-height: 1.3; white-space: normal; text-align: left; pointer-events: none; }
  .coach-cal.bi-chip[data-dica]:hover::after, .coach-cal.bi-chip[data-dica]:focus-visible::after { right: auto; left: 0; }
  /* os atalhos com desenho (Calendario, Exportar): so o desenho; o nome esta na dica */
  .coach-cal.bi-chip { position: relative; gap: 0; padding-inline: 11px; }
  .coach-cal.bi-chip > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
/* sem mouse (celular): so o desenho, um pouco maior pro dedo (pedido do dono,
   13/10/2026: "deixa so os icones, sem aquele texto embaixo"). O nome continua
   no aria-label, pra quem usa leitor de tela. */
@media (hover: none) {
  .bi { width: 44px; height: 44px; }
  .coach-cal.bi-chip { position: relative; gap: 0; padding-inline: 12px; }
  .coach-cal.bi-chip > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
.painel-body .dobra { overflow: visible; }
.painel-body .dobra > .dobra__cabeca { border-radius: 15px; }
.painel-body .dobra[open] > .dobra__cabeca { border-radius: 15px 15px 0 0; }
.aviso-l__acoes, .fin-cobranca .secao__acoes, .coach-prop .secao__acoes { gap: 8px; }

/* ---------- a faixa do briefing nas outras abas ---------- */
.brf--faixa { margin-top: 14px; padding: 16px 18px; border: 1px solid var(--contorno); border-radius: var(--r-card); }
.brf--faixa .brf-porta__frase { font-size: 19px; flex: 1 1 260px; }
.brf-frase { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.brf-frase > .brf-pronta { flex-basis: 100%; }
.brf--faixa .brf-barra { margin-top: 14px; }
.brf--faixa .brf-legenda { margin-top: 12px; gap: 10px 28px; }
.sec .brf--faixa { margin: 0 0 12px; }

/* ---------- as acoes prontas ao lado de cada atleta ---------- */
.painel-body .brf-pessoa { all: unset; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: 100%; padding: 8px 10px 8px 12px;
  border: 1px solid var(--contorno-forte); border-radius: 12px; background: var(--cartao); cursor: default; }
.brf-pessoa__abre { all: unset; box-sizing: border-box; flex: 1 1 180px; min-width: 0; display: grid; gap: 1px; cursor: pointer; }
.brf-pessoa__abre b { font-size: 15px; font-weight: 600; color: var(--text); }
.brf-pessoa__abre span { font-size: 14px; line-height: 1.4; color: var(--text-2); }
.brf-pessoa__abre:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.brf-acoes { flex: none; display: inline-flex; gap: 8px; }
.brf-pronta { flex-basis: 100%; display: grid; gap: 8px; }
.brf-pronta[hidden] { display: none; }
.brf-pronta textarea.field__input { width: 100%; min-height: 84px; resize: vertical; font-family: inherit; font-size: 15px; line-height: 1.45; }
.brf-pronta__pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.brf-pronta__pe .btn { width: auto; }
.brf-pronta__ok { margin: 0; color: var(--text); }
@media (prefers-reduced-motion: no-preference) { .brf-pronta:not([hidden]) { animation: dobra-desce .28s cubic-bezier(.3, .8, .25, 1) both; } }
.brf-pronta textarea.field__input { padding: 10px 12px; border-radius: 12px; background: var(--bg); color: var(--text); }

/* ============================================================
   Oitava volta do dono (12/10/2026): o desenho do Claude
   ------------------------------------------------------------
   Engenharia reversa das Configuracoes, da Reflexao e da barra
   lateral do Claude (e do painel do Vercel que o dono mandou junto):
     CONTORNO   so no que AGRUPA (o cartao, o quadro, a dobra) e no
                campo onde se escreve.
     FUNDO      no que se APERTA: botao secundario, chip, botao de
                desenho, linha que abre um atleta, item ativo do menu.
                Sem contorno nenhum.
     NADA       no que so INFORMA: etiqueta de estado e um desenho com
                a palavra do lado, como o "Private" e o "main" do Vercel.
     COR        SO no desenho. Vermelho obrigatorio, amarelo pede o
                treinador, verde confirma; o anel, o fundo e o texto
                ficam neutros ("faca isso nao em todo o arredor de
                outline, apenas no icon").
     VIDRO      modal e aviso flutuante: o fundo escurece e desfoca, e
                a janela fica um tom acima da pagina.
   ============================================================ */
.painel-body {
  --urg-1: #CF3A2E;
  --urg-2: #A86F00;
  --urg-ok: var(--accent-texto);
  --preenche: color-mix(in srgb, var(--text) 7%, transparent);
  --preenche-suave: color-mix(in srgb, var(--text) 4.5%, transparent);
  --preenche-forte: color-mix(in srgb, var(--text) 11%, transparent);
  --modal: var(--bg-elev, var(--bg));
  --veu: color-mix(in srgb, #000 40%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .painel-body { --urg-1: #FF6B5E; --urg-2: #FFD60A; --modal: color-mix(in srgb, var(--surface) 72%, var(--bg)); --veu: color-mix(in srgb, #000 52%, transparent); }
}
:root[data-tema="escuro"] .painel-body { --urg-1: #FF6B5E; --urg-2: #FFD60A; --modal: color-mix(in srgb, var(--surface) 72%, var(--bg)); --veu: color-mix(in srgb, #000 52%, transparent); }

/* ---------- o que se aperta: fundo, sem contorno ---------- */
.painel-body .btn--outline,
.painel-body .x-fechar,
.painel-body .abre__puxa,
.painel-body .guia__puxa { border-color: transparent; background: var(--preenche); }
.painel-body .btn--outline:active,
.painel-body .x-fechar:active,
.painel-body .abre__puxa:active,
.painel-body .guia__puxa:active { background: var(--preenche-forte); }
.painel-body .coach-chip:not(.is-on) { border-color: transparent; background: var(--preenche); color: var(--text); }
.painel-body .coach-prop .btn--outline { background: var(--preenche); }

/* o botao de desenho: circulo cheio neutro, a cor so no traco */
.painel-body .bi,
.painel-body .bi--ok,
.painel-body .bi--perigo,
.painel-body .bi--atencao { border: 0; background: var(--preenche); color: var(--text); }
.painel-body .bi:active { background: var(--preenche-forte); }
.painel-body .bi--ok > svg { color: var(--urg-ok); }
.painel-body .bi--perigo > svg { color: var(--urg-1); }
.painel-body .bi--atencao > svg { color: var(--urg-2); }

/* a linha que abre um atleta ou um item: um tom de fundo, sem linha */
.painel-body .brf-pessoa,
.painel-body .rank__l--toque { border-color: transparent; background: var(--preenche-suave); }
.painel-body .rank__l:not(.rank__l--toque) { border-color: transparent; }

/* a fileira "Nesta aba" do celular e da tela media: sao botoes, entao fundo, sem linha */
@media (max-width: 1279px) {
  .painel-body .trilha__link { border-color: transparent; background: var(--preenche); color: var(--text-2); }
  .painel-body .trilha__link.is-on { border-color: transparent; background: var(--preenche-forte); color: var(--text); font-weight: 600; }
}

/* o desenho de cada secao: sem moldura, so um fundo leve */
.painel-body .sec__ic,
.painel-body .dobra .sec__ic { border-color: transparent; background: var(--preenche-suave); }
/* a dobra agrupa: fica com a linha fina, nao a forte */
.painel-body .sec.dobra { border-color: var(--contorno); }

/* ---------- o que so informa: desenho + palavra, sem caixa ---------- */
.painel-body .etiqueta,
.painel-body .fin-tag,
.painel-body .dobra__comece { border: 0; background: none; padding-inline: 0; min-height: 0; color: var(--text); }
.painel-body .etiqueta::before,
.painel-body .fin-tag::before { background: var(--text-2); }
.painel-body .etiqueta--feito::before, .painel-body .fin-tag--em_dia::before, .painel-body .fin-tag--paga::before { background: var(--urg-ok); }
.painel-body .etiqueta--doeu::before, .painel-body .fin-tag--vencido::before, .painel-body .fin-tag--vencida::before { background: var(--urg-1); }
.painel-body .etiqueta--pulou::before, .painel-body .etiqueta--hoje::before,
.painel-body .fin-tag--aguardando::before, .painel-body .fin-tag--aguardando_aprovacao::before { background: var(--urg-2); }
.painel-body .dobra__comece { color: var(--text-2); font-size: 13.5px; }

/* o circulo do pagou / nao pagou: anel neutro, o desenho de dentro com a cor */
.painel-body .pg, .painel-body .pg--ok, .painel-body .pg--falta, .painel-body .pg--espera, .painel-body .pg--neutro {
  border: 0; background: var(--preenche-suave); color: var(--text-2); }
.painel-body .pg--ok { color: var(--urg-ok); }
.painel-body .pg--falta { color: var(--urg-1); }
.painel-body .pg--espera { color: var(--urg-2); }

/* ---------- o aviso: o desenho num circulo neutro, com a cor da urgencia ---------- */
.painel-body .aviso-l { grid-template-columns: 38px minmax(0, 1fr) auto; }
.painel-body .aviso-l__ic { width: 38px; height: 38px; border-radius: 50%; background: var(--preenche-suave); color: var(--text-2); }
.painel-body .aviso-l__ic svg { width: 21px; height: 21px; }
.painel-body .aviso-l--u1 .aviso-l__ic { color: var(--urg-1); }
.painel-body .aviso-l--u2 .aviso-l__ic { color: var(--urg-2); }
.painel-body .aviso-l__titulo { color: var(--text-2); }
@media (max-width: 760px) { .painel-body .aviso-l { grid-template-columns: 38px minmax(0, 1fr); } }

/* o cartao do briefing: o desenho do tema com a cor, e o obrigatorio ganha a linha fina em cima */
.brf-cartao { position: relative; }
.brf-cartao--u1 .brf-cartao__tema svg { color: var(--urg-1); }
.brf-cartao--u2 .brf-cartao__tema svg { color: var(--urg-2); }
.brf-cartao--u1::before { content: ''; position: absolute; top: -1px; left: 18px; right: 18px; height: 2px; border-radius: 0 0 2px 2px; background: var(--urg-1); }

/* ---------- o aviso flutuante e o sino: vidro, e a cor so no sino ---------- */
.painel-body .topo-aviso { border-color: var(--contorno); background: color-mix(in srgb, var(--modal) 84%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
.painel-body .topo-aviso--u1 .topo-aviso__ic, .painel-body .topo-sino--u1 > svg { color: var(--urg-1); }
.painel-body .topo-aviso--u2 .topo-aviso__ic, .painel-body .topo-sino--u2 > svg { color: var(--urg-2); }
/* 24/10/2026: o que a Tryzen adiantou nao e alerta: brilho verde, nunca o amarelo */
.painel-body .topo-aviso--calmo .topo-aviso__ic, .painel-body .topo-sino--calmo > svg { color: var(--accent); }
.painel-body .topo-sino { border-color: var(--contorno); background: color-mix(in srgb, var(--modal) 84%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }

/* no computador o aviso mora na coluna da direita (a do "Nesta aba", 268px), e nao por cima do
   botao de Proximo da coluna do meio: nada da tela fica escondido atras dele */
@media (min-width: 1280px) {
  .painel-body:has(.aba-grade) .topo-avisos { width: 284px; right: 20px; }
}

/* no celular o aviso vira uma faixa de uma linha (sino, titulo, botao, X): de pe ele cobria um terco da
   tela, e o que estava atras so aparecia depois de fechar. A frase longa fica pra quem abrir. */
@media (max-width: 640px) {
  .painel-body .topo-aviso { grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 8px 46px 8px 14px; border-radius: 16px; }
  .painel-body .topo-aviso__ic { margin: 0; }
  .painel-body .topo-aviso__ic svg { width: 18px; height: 18px; }
  .painel-body .topo-aviso__txt { font-size: 14px; line-height: 1.3; }
  .painel-body .topo-aviso__txt span { display: none; }
  .painel-body .topo-aviso .btn { grid-column: 3; grid-row: 1; min-height: 34px; padding-inline: 12px; font-size: 13.5px; }
  .painel-body .topo-aviso__x { top: calc(50% - 14px); right: 8px; }
  .painel-body .painel__main:has(.topo-avisos) { padding-bottom: calc(110px + var(--safe-bottom, 0px)); }
}

/* ---------- os veus: escurecem e desfocam o que ficou atras ---------- */
.painel-body .tut, .painel-body .fin-veu, .aj-veu { background: var(--veu); -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1); }
@media (max-width: 899px) {
  .painel-body .painel.is-menu::before { background: var(--veu); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
.painel-body .tut__caixa, .painel-body .fin-veu__caixa { background: var(--modal); border-color: var(--contorno); }

/* ---------- a barra lateral: a aba de agora e um fundo neutro, a cor fica no desenho ---------- */
.painel-body .painel__nav .painel__pill { background: var(--preenche-forte); }
.painel-body .painel__nav .painel__aba.is-active { color: var(--text); font-weight: 600; }
.painel-body .painel__nav .painel__aba.is-active .aba-ic { color: var(--accent-texto); }
/* o ponto de quem pede o treinador, como o ponto azul do Claude */
.aba-ponto { flex: none; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--urg-2); }
.aba-ponto--u1 { background: var(--urg-1); }
@media (min-width: 900px) {
  .painel__lado[data-lado="trilho"] .aba-ponto { position: absolute; top: 12px; right: 12px; margin: 0; box-shadow: 0 0 0 2px var(--bg); }
}

/* ============================================================
   Ajustes num modal, como as Configuracoes do Claude
   ============================================================ */
.aj-veu { position: fixed; inset: 0; z-index: 105; display: grid; place-items: center; padding: 24px; }
.aj { display: grid; grid-template-columns: 228px minmax(0, 1fr); width: min(980px, 100%); height: min(680px, calc(100dvh - 48px));
  border: 1px solid var(--contorno); border-radius: 18px; background: var(--modal); color: var(--text); overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .34), 0 2px 10px rgba(0, 0, 0, .12); }
.aj__menu { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 16px 10px; border-right: 1px solid var(--contorno); overflow-y: auto; }
.aj__rotulo { margin: 4px 10px 8px; font-size: 13.5px; color: var(--text-3); }
.aj__item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 0 10px; border-radius: 10px;
  font-size: 15px; color: var(--text-2); cursor: pointer; }
.aj__item svg { flex: none; width: 19px; height: 19px; }
.aj__item:active { background: var(--preenche); }
.aj__item.is-on { background: var(--preenche-forte); color: var(--text); font-weight: 600; }
.aj__item.is-on svg { color: var(--accent-texto); }
.aj__item:focus-visible, .aj__x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aj__corpo { min-width: 0; padding: 20px 28px 28px; overflow-y: auto; overscroll-behavior: contain; }
.aj__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aj__titulo { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.aj__x { all: unset; box-sizing: border-box; flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-right: -8px; border-radius: 10px; color: var(--text-2); cursor: pointer; }
.aj__x:active { background: var(--preenche); }
.aj__sobre { margin: 6px 0 20px; max-width: 60ch; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.aj__parte[hidden] { display: none; }
.aj .quadro { padding: 0; border: 0; background: none; }
.aj .coach-recado { margin: 0 0 16px; }
.aj__pe { margin: 28px 0 0; padding-top: 14px; border-top: 1px solid var(--contorno); }
@media (prefers-reduced-motion: no-preference) {
  .aj-veu--chega { animation: tut-entra .2s var(--ease, ease-out); }
  .aj-veu--chega .aj { animation: aj-entra .28s cubic-bezier(.2, .9, .25, 1) both; }
}
@keyframes aj-entra { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@media (max-width: 720px) {
  .aj-veu { place-items: end stretch; padding: calc(var(--safe-top, 0px) + 24px) 0 0; }
  .aj { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); width: 100%; height: 100%; border-width: 1px 0 0; border-radius: 20px 20px 0 0; }
  .aj__menu { flex-direction: row; gap: 6px; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--contorno); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .aj__menu::-webkit-scrollbar { display: none; }
  .aj__rotulo { display: none; }
  .aj__item { flex: none; min-height: 40px; padding: 0 12px; white-space: nowrap; background: var(--preenche); }
  .aj__corpo { padding: 18px 16px calc(28px + var(--safe-bottom, 0px)); }
}

/* ============================================================
   Depois de publicar: o modal que diz que deu certo (12/10/2026)
   ------------------------------------------------------------
   O visto verde num circulo neutro, o que foi publicado em linhas,
   o que ficou de fora com o desenho amarelo, quem ainda pede o
   treinador (um toque abre a ficha no Montar treino), e no pe o
   Desfazer de desenho e o Pronto.
   ============================================================ */
.tut--publicado .tut__caixa { width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.pub__selo { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 50%; background: var(--preenche-suave); color: var(--urg-ok); }
.pub__selo--volta, .pub__selo--fora { color: var(--urg-2); }
.pub__lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0; }
.pub__lista li { padding: 9px 0; border-top: 1px solid var(--contorno); font-size: 15px; line-height: 1.4; color: var(--text); }
.pub__lista li:first-child { border-top: 0; padding-top: 0; }
.pub__lista li span { color: var(--text-2); }
.pub__mais { margin: 4px 0 0; }
.pub-fora { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 14px; }
.pub-fora__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--preenche-suave); color: var(--urg-2); }
.pub-fora--erro .pub-fora__ic { color: var(--urg-1); }
.pub-fora p { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--text); }
.pub__pergunta { margin: 22px 0 10px; font-size: 16px; font-weight: 600; color: var(--text); }
.pub__quem { display: grid; gap: 6px; }
.pub-pessoa { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; align-items: center; gap: 12px; width: 100%;
  padding: 9px 12px; border-radius: 12px; background: var(--preenche-suave); color: var(--text-3); cursor: pointer; }
.pub-pessoa:active { background: var(--preenche); }
.pub-pessoa:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pub-pessoa__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--preenche-suave); color: var(--text-2); }
.pub-pessoa__ic svg { width: 19px; height: 19px; }
.pub-pessoa__ic--u1 { color: var(--urg-1); }
.pub-pessoa__ic--u2 { color: var(--urg-2); }
.pub-pessoa__txt { display: grid; gap: 1px; min-width: 0; }
.pub-pessoa__txt b { font-size: 15px; font-weight: 600; color: var(--text); }
.pub-pessoa__txt small { font-size: 14px; line-height: 1.35; color: var(--text-2); }
.pub__ninguem { margin: 0; }
.pub__todos { margin-top: 12px; }
.pub__pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.pub__pe .btn { width: auto; min-height: 46px; padding-inline: 26px; }
/* a dica do Desfazer abre pra direita: no canto esquerdo do modal ela sairia da caixa */
@media (hover: hover) { .pub__pe .bi[data-dica]:hover::after, .pub__pe .bi[data-dica]:focus-visible::after { right: auto; left: 0; } }

/* a barra do resumo com cor (12/10/2026, pedido do dono com o print do Financeiro): vermelho no que e
   obrigatorio, amarelo no que pede o treinador, cinza no resto. A legenda repete a cor no ponto. */
.brf--u1 { --tom: var(--urg-1); }
.brf--u2 { --tom: var(--urg-2); }
.brf--plano { --tom: color-mix(in srgb, var(--text) 30%, transparent); }
.brf--emdia { --tom: color-mix(in srgb, var(--text) 14%, transparent); }

/* ============================================================
   O celular, revisto (12/10/2026, o dono: "ha alguns botoes que estao
   sobrepostos", no Financeiro)
   ------------------------------------------------------------
   - o cabecalho da dobra: o titulo que quebra em duas linhas vazava por
     cima do "Comece aqui". Agora sao duas linhas: o titulo em cima, o
     selo e o resumo embaixo dele.
   - a linha do atleta no Financeiro: o valor descia espremido do lado do
     nome. Abaixo de 480px ele vai pra linha de baixo, alinhado ao nome.
   - o pedido de aprovacao: nome e plano numa linha inteira, os dois
     botoes embaixo.
   - a conta da legenda ("1 de 7") nao quebra.
   ============================================================ */
.brf-legenda__nome span { flex: none; white-space: nowrap; }
@media (max-width: 640px) {
  .painel-body .dobra__cabeca { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 3px; align-items: center; }
  .painel-body .dobra__cabeca > .sec__ic { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
  .painel-body .dobra__cabeca > .sec__txt { grid-column: 2; grid-row: 1; }
  .painel-body .dobra__cabeca > .dobra__comece,
  .painel-body .dobra__cabeca > .dobra__resumo { grid-column: 2; justify-self: start; max-width: 100%; text-align: left; }
  .painel-body .dobra__cabeca > .dobra__seta { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
  .painel-body .dobra__cabeca:not(:has(.sec__ic)) { grid-template-columns: minmax(0, 1fr) auto; }
  .painel-body .dobra__cabeca:not(:has(.sec__ic)) > * { grid-column: 1; }
  .painel-body .dobra__cabeca:not(:has(.sec__ic)) > .dobra__seta { grid-column: 2; }
}
@media (max-width: 480px) {
  .painel-body .fin-atleta { flex-wrap: wrap; row-gap: 4px; }
  .painel-body .fin-atleta .fin-atleta__quem { flex: 1 1 calc(100% - 50px); }
  .painel-body .fin-atleta .fin-atleta__fato { flex: 1 1 100%; max-width: none; margin-left: 38px; text-align: left; color: var(--text-2); }
  .painel-body .fin-linha { flex-wrap: wrap; row-gap: 8px; }
  .painel-body .fin-linha > b { flex: 1 1 100%; }
  .painel-body .fin-linha > span { flex: 1 1 100%; }
}
/* o pe do modal de publicado fica a vista mesmo numa tela baixa; o fato do atleta em ate duas linhas */
.tut--publicado .tut__caixa { padding-bottom: 0; }
.pub__pe { position: sticky; bottom: 0; z-index: 1; margin: 18px -28px 0; padding: 14px 28px 20px; background: var(--modal); border-top: 1px solid var(--contorno); }
@media (max-width: 520px) { .pub__pe { margin-inline: -18px; padding-inline: 18px; } }
.pub-pessoa__txt small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* a lista de linhas (Financeiro, ficha) e uma coluna so que nunca passa da largura da caixa: com a letra
   do celular aumentada, a coluna automatica crescia ate o tamanho do conteudo (1053px numa caixa de 290) */
.painel-body .coach-linhas { grid-template-columns: minmax(0, 1fr); }
.painel-body .coach-linha { min-width: 0; }

/* ============================================================
   Briefing e Tarefas, e o Resolver tudo (12/10/2026)
   ------------------------------------------------------------
   Briefing so com o que vai bem: o desenho do tema em verde. Tarefas
   com o que resolver: a frase do que a Tryzen faz, os atletas, e o
   botao Resolver tudo, que abre um modal por tarefa (resolver.js).
   ============================================================ */
.brf-cartao--bom .brf-cartao__tema svg { color: var(--urg-ok); }
.brf-nada { margin: 4px 0; }
.tarefas__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 16px; }
.tarefas__frase { flex: 1 1 260px; margin: 0; font-size: 18px; line-height: 1.35; font-weight: 600; color: var(--text); }
.tarefas__resolver { width: auto; min-height: 46px; padding-inline: 22px; }
.tarefas__cartoes { margin-top: 18px; }
.tarefa__faz { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.tarefa__faz::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 3px; background: var(--urg-ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.tarefa__mais { margin: 0; }
.tarefa__manual { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
@media (max-width: 520px) { .tarefas__resolver { width: 100%; } }

/* o modal do Resolver tudo */
.tut--resolver .tut__caixa { width: min(500px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 0; }
.rs__selo { display: grid; place-items: center; width: 52px; height: 52px; margin: 14px 0 12px; border-radius: 50%; background: var(--preenche-suave); color: var(--text-2); }
.rs__selo svg { width: 26px; height: 26px; }
.rs__selo--u1 { color: var(--urg-1); }
.rs__selo--u2 { color: var(--urg-2); }
.rs__selo--ok { color: var(--urg-ok); }
.rs__faz { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--preenche-suave);
  font-size: 15px; line-height: 1.45; color: var(--text); }
.rs__faz-ic { flex: none; display: grid; color: var(--urg-ok); margin-top: 1px; }
.rs__rotulo { margin: 18px 0 8px; font-size: 15px; font-weight: 600; color: var(--text); }
.rs__rotulo span { display: block; font-size: 13.5px; font-weight: 500; color: var(--text-3); }
.rs__quem { display: grid; gap: 6px; }
.rs__quem .rotina-marca span { display: grid; gap: 1px; text-align: left; }
.rs__quem .rotina-marca small { font-size: 13.5px; color: var(--text-2); font-weight: 400; }
.rs__nota { margin: -4px 0 10px; }
.rs__etapas li { opacity: 1; }
.rs__lista { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 0; }
.rs__lista li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--contorno); }
.rs__lista li:first-child { border-top: 0; }
.rs__lista li > span:last-child { display: grid; gap: 1px; }
.rs__lista b { font-size: 15px; font-weight: 600; color: var(--text); }
.rs__lista small { font-size: 14px; line-height: 1.4; color: var(--text-2); }
.rs__li-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--preenche-suave); }
.rs__li-ic--ok { color: var(--urg-ok); }
.rs__li-ic--fora { color: var(--urg-2); }
/* "1 de 3 tarefas resolvidas": o que a ultima fez, em cima da proxima pergunta (13/10/2026) */
.rs__feito { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; margin: 0 0 14px; padding: 10px 12px; border-radius: 14px; background: var(--preenche-suave); }
.rs__feito > span:last-child { display: grid; gap: 1px; min-width: 0; }
.rs__feito b { font-size: 14px; font-weight: 600; color: var(--text); }
.rs__feito small { font-size: 13px; line-height: 1.4; color: var(--text-2); overflow-wrap: anywhere; }
.rs__lista li.rs__repetir { display: flex; justify-content: flex-end; border-top: 0; padding-top: 0; }
.rs__pe { position: sticky; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 20px -28px 0; padding: 14px 28px 20px; background: var(--modal); border-top: 1px solid var(--contorno); }
.rs__pe .btn { width: auto; min-height: 46px; padding-inline: 22px; }
.rs__pe .btn--primary { margin-left: auto; }
@media (max-width: 520px) { .rs__pe { margin-inline: -18px; padding-inline: 18px; } }

/* ============================================================
   12/10/2026, a volta seguinte do dono
   ------------------------------------------------------------
   - "Na versao white tem um amarelo estourado": no claro o amarelo
     segue o app (css/tokens.css): o desenho e a barra no Warning Deep
     (--acao-preso), e o fundo amarelo cheio vira a pastilha suave
     (--acao-fundo) com a letra Warning Content (--acao-texto).
   - As faixas das abas so com o positivo (a lista com o visto verde) e
     a linha "N tarefas nesta aba".
   - "Os botoes na versao do celular estao todos para o lado da
     esquerda": todo grupo de botoes encosta na direita.
   - O modal do Resolver com o desenho do assunto em cima.
   ============================================================ */
.painel-body { --urg-2: var(--acao-preso, #B86700); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .painel-body { --urg-2: #FFD60A; } }
:root[data-tema="escuro"] .painel-body { --urg-2: #FFD60A; }
:root:not([data-tema="escuro"]) .painel-body .coach-aviso { background: var(--acao-fundo); color: var(--acao-texto); border: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .painel-body .coach-aviso { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); } }
.painel-body .coach-cartao--p2,
.painel-body .coach-prop[data-tipo="tempo"], .painel-body .coach-prop[data-tipo="progressivo"], .painel-body .coach-prop[data-tipo="fartlek"] { border-left-color: var(--urg-2); }

/* a faixa so com o que foi bem */
.brf-bons { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.brf-bons li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.brf-bons svg { margin-top: 3px; color: var(--urg-ok); }
.brf-tarefas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--contorno); font-size: 15px; color: var(--text-2); }
.brf-tarefas__ir { font-weight: 600; color: var(--text); }

/* o desenho do assunto no modal do Resolver */
.rs__desenho { display: grid; place-items: center; margin: 14px 0 6px; color: var(--text); }
.rs__desenho .traco { width: 112px; height: 112px; }
.rs__desenho .mao { width: 85%; height: auto; aspect-ratio: 1; margin-inline: auto; }
/* 31/10/2026, o dono: o desenho da fila da Nutricao no MESMO tamanho dos do Resolver do Coach
   (o .traco de 112; 140 porque o desenho a mao tem mais folga em volta), e nao mais ocupando a largura do modal */
.nut-rs .rs__desenho .mao { width: 140px; height: 140px; }
@media (max-width: 520px) { .nut-rs .rs__desenho .mao { width: 116px; height: 116px; } }
.tut--resolver .tut__titulo { font-size: 20px; line-height: 1.35; }
@media (max-width: 520px) { .rs__desenho .traco { width: 92px; height: 92px; } }

/* celular: os botoes encostam na direita, o principal por ultimo */
@media (max-width: 760px) {
  .painel-body .aviso-l__acoes { justify-content: flex-end; }
}
@media (max-width: 640px) {
  .painel-body .secao__acoes,
  .painel-body .brf-acoes,
  .painel-body .brf-cartao__acao,
  .painel-body .tarefas__topo { justify-content: flex-end; }
  .painel-body .brf-pessoa .brf-acoes { margin-left: auto; }
  .painel-body .tarefas__resolver { width: auto; }
  .painel-body .fin-linha > span + .bi, .painel-body .fin-linha > span + .btn { margin-left: auto; }
}
/* o quadro "Pagamentos pendentes" tinha a borda inteira vermelha: a cor mora so no desenho (regra do dono) */
.painel-body .fin-tile--alerta { border-color: var(--contorno-forte); }

/* o Resolvendo: a logo da Tryzen trabalhando em cima, e cada tarefa com o andamento */
.rs--fazendo { padding-bottom: 26px; }
.rs__logo { display: block; width: 44px; height: auto; margin: 4px auto 14px; }
@media (prefers-reduced-motion: no-preference) { .rs__logo { animation: rs-corre 1.1s ease-in-out infinite alternate; } }
@keyframes rs-corre { from { transform: translateY(0) rotate(0); } to { transform: translateY(-4px) rotate(-3deg); } }
.rs--fazendo .tut__titulo { text-align: center; }
.rs__etapas { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 4px; }
.rs__etapas li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 32px; font-size: 15px; color: var(--text-3); }
.rs__etapas li.is-vez { color: var(--text); font-weight: 600; }
.rs__etapas li.is-feito { color: var(--text-2); }
.rs__etapa-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--urg-ok); }
.rs__etapa-ic svg { width: 16px; height: 16px; }
.rs__etapas li.is-vez .rs__etapa-ic { border: 2px solid color-mix(in srgb, var(--text) 18%, transparent); border-top-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .rs__etapas li.is-vez .rs__etapa-ic { animation: rs-gira .8s linear infinite; } }
@keyframes rs-gira { to { transform: rotate(360deg); } }

/* o treino da lista (proximos e historico), liso como os cartoes de tarefa do Claude (pedido do dono, 12/10/2026):
   fundo um tom acima, sem contorno, titulo forte com o tipo ao lado, uma linha cinza, o estado discreto */
.painel-body .treinador-sessao,
.painel-body .treinador-sessao:first-of-type,
.painel-body .quadro > .treinador-sessao:first-child,
.painel-body .quadro > .stat__label + .treinador-sessao { margin-top: 8px; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--preenche-suave); }
.painel-body .quadro > .stat__label + .treinador-sessao { margin-top: 10px; }
.treinador-sessao__titulo { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; font-size: 15px; line-height: 1.35; }
.treinador-sessao__titulo b { font-weight: 600; color: var(--text); }
.treinador-sessao__titulo span { color: var(--text-2); }
.treinador-sessao__linha { margin: 4px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--text-3); }
.painel-body .treinador-sessao .etiqueta { flex: none; font-size: 13px; font-weight: 500; color: var(--text-2); }
.painel-body .treinador-sessao .etiqueta--descanso::before { display: none; }
.painel-body .quadro > .stat__label:has(+ .treinador-sessao) { margin-top: 18px; }

/* ============================================================
   Menos contorno, menos contraste (12/10/2026)
   ------------------------------------------------------------
   Pedido do dono: "ha muito outline (...) use a Attio como referencia,
   seguindo as cores do tryzen.com.br/faq/planos (...) ha backgrounds
   que forcam a visao do usuario, ele nao sabe o que e destaque ou nao".
   Escolhas dele: os dois temas; bordas bem discretas, tirando as
   redundantes; o verde concentrado nas acoes e nas selecoes.

   A regra, como na Attio e na pagina de planos: UMA linha fina no
   recipiente de fora (a dobra, o quadro). O que mora dentro dele nao
   leva moldura forte: linha mais leve ainda, ou so um fundo quase igual
   ao do redor. Fundo de destaque so no que se aperta, e mais claro.
   Os desenhos nao mudam.
   ============================================================ */
.painel-body {
  --contorno: color-mix(in srgb, var(--text) 8%, transparent);
  --contorno-forte: color-mix(in srgb, var(--text) 13%, transparent);
  --contorno-dentro: color-mix(in srgb, var(--text) 6%, transparent);
  --cartao: color-mix(in srgb, var(--surface) 22%, var(--bg));
  --preenche: color-mix(in srgb, var(--text) 5%, transparent);
  --preenche-suave: color-mix(in srgb, var(--text) 3%, transparent);
  --preenche-forte: color-mix(in srgb, var(--text) 8%, transparent);
}

/* a dobra: so a linha de fora; o cabecalho sem fundo proprio, a linha de baixo mais leve */
.painel-body .sec.dobra { border-color: var(--contorno); }
.painel-body .dobra__cabeca { background: none; }
.painel-body .dobra[open] > .dobra__cabeca { border-bottom-color: var(--contorno-dentro); }
.painel-body .dobra .sec__ic, .painel-body .sec__ic { background: var(--preenche-suave); }

/* o que mora dentro de uma dobra ou de um quadro: linha bem leve, sem fundo de destaque */
.painel-body .dobra__corpo .atl,
.painel-body .dobra__corpo .coach-tile,
.painel-body .dobra__corpo .fin-tile,
.painel-body .dobra__corpo .brf-cartao,
.painel-body .dobra__corpo .gcard,
.painel-body .dobra__corpo .emb,
.painel-body .quadro .coach-tile,
.painel-body .brf .brf-cartao { border-color: var(--contorno-dentro); background: none; }
.painel-body .atl__fatos { border-color: var(--contorno-dentro); }
.painel-body .tab-q__l, .painel-body .aviso-l, .painel-body .rank__l { border-color: var(--contorno-dentro); }
.painel-body .tab-q { border-color: var(--contorno); }
.painel-body .tab-q__l--topo { background: var(--preenche-suave); }

/* as faixas do briefing e os quadros soltos: a mesma linha leve de fora */
.painel-body .brf--faixa, .painel-body .quadro, .painel-body .gcard, .painel-body .avisos, .painel-body .emb { border-color: var(--contorno); }
.painel-body .brf-tarefas { border-top-color: var(--contorno-dentro); }

/* o que se aperta: fundo leve, quase o do redor (o verde fica no ligado e no principal) */
.painel-body .brf-pessoa, .painel-body .rank__l--toque, .painel-body .treinador-sessao,
.painel-body .treinador-sessao:first-of-type { background: var(--preenche-suave); }
.painel-body .fin-linha, .painel-body .coach-linha--fixa { background: var(--preenche-suave); border-color: transparent; }

/* campos e o seletor: a linha de fora, sem pesar */
.painel-body .field__input, .painel-body .coach-busca, .painel-body .sel-botao, .painel-body .treinador-conversa__form { border-color: var(--contorno-forte); }

/* a lateral e a coluna "Nesta aba": a divisa some quase toda */
.painel-body .painel__lado { border-right-color: var(--contorno-dentro); }
.painel-body .trilha, .painel-body .trilha__nav { border-color: var(--contorno-dentro); }

/* o modal e o aviso flutuante: linha leve, a sombra faz o resto */
.painel-body .tut__caixa, .painel-body .fin-veu__caixa, .aj, .painel-body .topo-aviso { border-color: var(--contorno); }
.aj__menu, .aj__pe { border-color: var(--contorno-dentro); }

/* a dica solta por cima da pagina (treinador/botoes.js): a antiga, presa no botao, saia cortada */
.painel-body [data-dica]:hover::after, .painel-body [data-dica]:focus-visible::after { content: none; }
.dica-solta { position: fixed; z-index: 400; max-width: min(280px, calc(100vw - 16px)); padding: 6px 10px; border-radius: 9px;
  background: var(--text); color: var(--bg); font-size: 13.5px; font-weight: 600; line-height: 1.3; pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.dica-solta[hidden] { display: none; }

/* dois fatores (0133): o QR do app autenticador e a chave pra digitar */
.mfa__qr { display: block; margin: 14px auto 6px; width: 180px; height: 180px; border-radius: 12px; background: #fff; padding: 8px; }
.mfa__chave { text-align: center; overflow-wrap: anywhere; }

/* o andamento do Resolver no canto do painel, por cima do modal (sem permissao de notificacao) */
.topo-avisos--lateral { z-index: 1000; }

/* ---------- a resposta perto de quem pediu (14/10/2026) ----------
   O mesmo cartao de resposta, levado pra baixo do aviso ou do atleta cujo
   botao foi tocado (coach.js, posicionarResposta). */
#coach-resposta.coach-resposta--perto:not(:empty) { display: block; margin: 12px 0 16px; }
#coach-resposta.coach-resposta--perto > .gcard { margin: 0; }

/* ---------- a persona dos atletas (persona.js, 14/10/2026) ----------
   O quadro que chega: o nome da persona, os tracos com o numero de onde
   vieram, como falar com eles e o que vender. Rola por dentro no celular. */
.tut--persona .tut__caixa { width: min(560px, 100%); max-height: min(88vh, 760px); overflow-y: auto; }
.persona__topo { color: var(--accent-texto); margin-bottom: 6px; }
.persona__desenho { width: 120px; height: 72px; }
@media (prefers-reduced-motion: no-preference) {
  .persona__fio { stroke-dasharray: 60; stroke-dashoffset: 60; animation: persona-fio 1.4s cubic-bezier(.19, 1, .22, 1) .2s forwards; }
  .tut--persona .tut__caixa > * { animation: persona-sobe .8s cubic-bezier(.25, 1, .5, 1) both; }
  .tut--persona .tut__caixa > :nth-child(2) { animation-delay: .08s; }
  .tut--persona .tut__caixa > :nth-child(3) { animation-delay: .16s; }
  .tut--persona .tut__caixa > :nth-child(n + 4) { animation-delay: .26s; }
}
@keyframes persona-fio { to { stroke-dashoffset: 0; } }
@keyframes persona-sobe { from { opacity: 0; transform: translateY(10px); } }
.persona__olho { margin: 0 0 6px; text-align: center; font-size: var(--fs-xs); color: var(--accent-texto); letter-spacing: .02em; }
.persona__nome { text-align: center; font-size: clamp(22px, 4.6vw, 26px); }
.persona__tracos { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.persona__tracos li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid color-mix(in srgb, var(--text) 6%, transparent); }
.persona__tracos b { font-family: var(--font-mono); font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.persona__tracos span { font-size: var(--fs-sm); line-height: 1.35; color: var(--text-2); }
.persona__tracos small { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-3); }
.persona__sub { margin: 20px 0 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.persona__sub--venda { color: var(--accent-texto); }
.persona__lista { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
.persona__lista--venda li::marker { color: var(--accent); }
.persona__base { margin: 18px 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-3); }
.persona__abrir { margin-top: 10px; }
@media (max-width: 520px) { .persona__tracos { grid-template-columns: 1fr 1fr; } .persona__tracos b { font-size: 18px; } }

/* ============================================================
   Ajustes, terceira volta (14/10/2026): o desenho da Attio
   ------------------------------------------------------------
   O dono: mais espaco neutro, proporcao mais separada, organizado.
   E o X: focado ao abrir, ganhava a moldura verde e parecia uma figura
   colada. Agora o X mora numa barra fina no alto do quadro (no celular
   tambem, nao some rolando), e o foco de quem abre vai pro quadro.
     · barra: "Ajustes" a esquerda, X redondo e discreto a direita;
     · menu: itens baixos, sem moldura, so o fundo leve no escolhido;
     · conteudo: largura de leitura (640 px), titulo, descricao e uma
       divisoria; cada grupo de opcoes separado por um fio, com ar.
   ============================================================ */
.aj { grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr); grid-template-areas: "barra barra" "menu corpo"; outline: none; }
.aj__barra { grid-area: barra; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px 0 24px; border-bottom: 1px solid var(--contorno-dentro, var(--contorno)); }
.aj__barra .aj__rotulo { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -.005em; }
.aj__x { width: 32px; height: 32px; margin: 0; border-radius: 50%; color: var(--text-3); transition: background-color .15s, color .15s; }
.aj__x svg { width: 16px; height: 16px; }
@media (hover: hover) { .aj__x:hover { background: var(--preenche); color: var(--text); } }
.aj__x:focus { outline: none; }
.aj__x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.aj__menu { grid-area: menu; gap: 1px; padding: 14px 12px; }
.aj__item { min-height: 36px; gap: 10px; padding: 0 10px; border-radius: 8px; font-size: 14px; }
.aj__item svg { width: 17px; height: 17px; color: var(--text-3); }
@media (hover: hover) { .aj__item:not(.is-on):hover { background: var(--preenche); color: var(--text); } }
.aj__item.is-on { font-weight: 500; }
.aj__corpo { grid-area: corpo; padding: 36px 48px 40px; }
.aj__corpo > * { max-width: 640px; }
.aj__titulo { font-size: 22px; letter-spacing: -.015em; }
.aj__sobre { margin: 8px 0 0; padding-bottom: 28px; border-bottom: 1px solid var(--contorno-dentro, var(--contorno)); font-size: 14px; line-height: 1.55; }
.aj .coach-pref { margin-top: 28px; }
.aj .quadro .stat__label { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--text); }
.aj .quadro .stat__label:not(:first-child) { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--contorno-dentro, var(--contorno)); }
.aj .quadro .coach-chips { margin-top: 12px; gap: 8px; }
.aj .quadro .gcard__nota { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text-3); }
.aj .quadro + .quadro { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--contorno-dentro, var(--contorno)); }
.aj__pe { margin-top: 36px; padding-top: 16px; }
@media (max-width: 720px) {
  .aj { grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px auto minmax(0, 1fr); grid-template-areas: "barra" "menu" "corpo"; }
  .aj__barra { padding: 0 10px 0 20px; }
  .aj__barra .aj__rotulo { display: block; font-size: 16px; }
  .aj__x { width: 36px; height: 36px; background: var(--preenche); color: var(--text-2); }
  .aj__menu { padding: 10px 16px; gap: 6px; }
  .aj__item { min-height: 36px; padding: 0 12px; font-size: 13.5px; background: none; border: 1px solid var(--contorno-dentro, var(--contorno)); }
  .aj__item.is-on { border-color: transparent; }
  .aj__corpo { padding: 24px 20px calc(32px + var(--safe-bottom, 0px)); }
  .aj__titulo { font-size: 20px; }
  .aj__sobre { padding-bottom: 22px; }
  .aj .quadro .stat__label:not(:first-child), .aj .quadro + .quadro { margin-top: 24px; padding-top: 24px; }
}

/* ---------- o escuro com camadas que se separam (14/10/2026) ----------
   As linhas e os preenchimentos do painel sao fracoes da letra; no escuro
   eles sumiam e as camadas se confundiam. Sobem um pouco, so no escuro. */
:root[data-tema="escuro"] .painel-body, :root[data-tema="escuro"] .aj-veu {
  --contorno: color-mix(in srgb, var(--text) 12%, transparent);
  --contorno-dentro: color-mix(in srgb, var(--text) 9%, transparent);
  --preenche: color-mix(in srgb, var(--text) 7%, transparent);
  --preenche-forte: color-mix(in srgb, var(--text) 12%, transparent);
  --cartao: color-mix(in srgb, var(--surface) 55%, var(--bg));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .painel-body, :root:not([data-tema="claro"]) .aj-veu {
    --contorno: color-mix(in srgb, var(--text) 12%, transparent);
    --contorno-dentro: color-mix(in srgb, var(--text) 9%, transparent);
    --preenche: color-mix(in srgb, var(--text) 7%, transparent);
    --preenche-forte: color-mix(in srgb, var(--text) 12%, transparent);
    --cartao: color-mix(in srgb, var(--surface) 55%, var(--bg));
  }
}

/* ---------- os campos soltos do painel (14/10/2026) ----------
   O dono mandou o print: "Digite o nome do grupo" e "Digite o codigo do
   treinador" saiam quadrados, com a letra colada na borda. O .field__input
   do app e uma linha embaixo, feita pra formulario com rotulo; no painel
   ele ganhava a borda e mais nada, e ainda herdava a letra de titulo.
   Aqui vira o campo padrao: cantos, respiro, 44 px de altura de toque e
   letra de texto. Fica em :where() pra pesar pouco: quem ja tem desenho
   proprio (a busca, os filtros, o numero da regra) continua mandando. */
:where(.painel-body) .field__input {
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--preenche-suave, transparent);
  font-size: 16px;
  line-height: 1.35;
  transition: border-color .15s, background-color .15s;
}
:where(.painel-body) textarea.field__input { min-height: 88px; }
:where(.painel-body) .field__input:focus { outline: 0; border-color: color-mix(in srgb, var(--text) 45%, transparent); background: transparent; }
.coach-linha-form .xs-btn { min-height: 44px; }
@media (max-width: 520px) {
  .coach-linha-form .field__input { flex: 1 1 100%; min-width: 0; }
  .coach-linha-form .xs-btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- os assentos da assessoria (assentos.js, 0136) ----------
   Como os assentos de uma equipe: uma linha por pessoa ou link, com a
   inicial, o papel, o estado (Ativo, Pendente, Aguardando) e as acoes. */
.assentos__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.assentos__conta { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.assentos__conta b { color: var(--text); font-weight: 600; }
.assentos__lista { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--contorno-dentro, var(--contorno)); }
.assento { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--contorno-dentro, var(--contorno)); }
.assento__av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--preenche-forte);
  font-weight: 600; font-size: 15px; color: var(--text); }
.assento--pendente .assento__av { background: none; border: 1px dashed color-mix(in srgb, var(--text) 30%, transparent); color: var(--text-2); }
.assento__av--link svg { color: var(--text-2); }
.assento__quem { display: grid; gap: 2px; min-width: 0; }
.assento__quem b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assento__quem small { font-size: var(--fs-xs); color: var(--text-3); }
.assento__estado { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.assento__estado.is-ativo { color: var(--accent-texto); background: var(--accent-tint); }
.assento__estado.is-pendente { color: var(--text-2); background: var(--preenche); }
.assento__acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.assento--novo { animation: assento-novo 2.4s ease-out 1; }
@keyframes assento-novo { 0% { background: var(--accent-tint); } 100% { background: transparent; } }
.assentos__convidar { margin-top: 24px; padding-top: 20px; }
.assentos__convidar .stat__label { margin: 0 0 4px; }
.assentos__papel { flex: 0 0 auto; width: auto; min-width: 0; }
.assentos__codigo { margin-top: 16px; }
.assentos__codigo summary { cursor: pointer; list-style: none; }
.assentos__codigo summary::-webkit-details-marker { display: none; }
.assentos__codigo summary::before { content: '+ '; color: var(--text-3); }
.assentos__codigo[open] summary::before { content: '− '; }
@media (max-width: 620px) {
  .assento { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .assento__acoes { grid-column: 2 / -1; justify-content: flex-start; }
  .assentos__papel { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .assento--novo { animation: none; } }

/* a tela de quem abriu um link de convite */
.convite__desenho { color: var(--accent-texto); margin-bottom: 8px; }
.convite__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; line-height: 1.5; }
.convite__lista li { position: relative; padding-left: 24px; }
.convite__lista li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent-texto); font-weight: 600; }
.convite__acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.convite__sair { display: block; padding: 0; border: 0; background: none; text-decoration: underline; cursor: pointer; }
.convite__faixa { padding: 10px 14px; border-radius: 12px; background: var(--accent-tint); color: var(--text); }
.tut--convite .tut__titulo, .tut--convite .tut__texto { text-align: center; }

/* ---------- o cartao de conta no pe da lateral (18/10/2026) ----------
   Pedido do dono, com a imagem do Claude: a foto (ou as iniciais), o
   primeiro nome, o plano e a seta que abre o menu; ao lado, os Ajustes.
   No celular o pe mora no topo: fica so a foto e a seta. */
.painel-body .painel__pe:has(.conta) { min-width: 0; }
/* no computador o cartao usa a lateral inteira, de borda a borda */
@media (min-width: 900px) { .painel-body .painel__lado:not([data-lado="trilho"]) .painel__pe:has(.conta) { margin-inline: -18px -12px; } }
.conta { position: relative; min-width: 0; }
.conta__linha-de-baixo { display: flex; align-items: center; gap: 2px; }
.conta__chip { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; min-height: 44px; padding: 6px;
  border: 0; border-radius: 12px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.conta__chip:hover, .conta__chip[aria-expanded="true"] { background: var(--surface); }
.conta__chip:focus-visible, .conta__ajustes:focus-visible, .conta__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.conta__foto { flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.conta__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.conta__foto--grande { width: 40px; height: 40px; font-size: 14px; }
.conta__txt { min-width: 0; flex: 1; display: grid; line-height: 1.2; font-size: 13.5px; }
/* o nome em cima e o plano embaixo: os dois inteiros, sem disputar a mesma linha (18/10/2026) */
.conta__txt b, .conta__plano { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta__txt b { font-weight: 600; }
.conta__plano { font-size: 12px; color: var(--text-3); white-space: normal; overflow-wrap: anywhere; }
.conta__seta { flex: none; display: inline-flex; color: var(--text-3); transition: transform .18s var(--ease, ease); }
.conta__chip[aria-expanded="true"] .conta__seta { transform: rotate(180deg); }
.conta__ajustes { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 40px;
  border: 0; border-radius: 12px; background: none; color: var(--text-3); cursor: pointer; }
.conta__ajustes:hover { background: var(--surface); color: var(--text); }

.conta__menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 120; padding: 6px;
  border: 1px solid var(--border-soft); border-radius: 16px; background: var(--bg); box-shadow: 0 12px 36px rgba(0, 0, 0, .22); text-align: left; }
.conta__menu[hidden] { display: none; }
.conta__quem { display: flex; align-items: center; gap: 10px; padding: 8px 8px 6px; min-width: 0; }
.conta__quem-txt { display: grid; min-width: 0; }
.conta__quem-txt b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.painel__pe .conta .xs { display: block; overflow-wrap: anywhere; }
.painel__pe .conta .conta__nota { white-space: normal; padding: 0 8px 6px; line-height: 1.3; }
.conta__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 10px;
  background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.conta__item:hover { background: var(--surface); }
.conta__item svg { flex: none; color: var(--text-2); }
.conta__item[disabled] { opacity: .5; cursor: default; }
.painel__pe .conta .conta__erro { white-space: normal; padding: 4px 10px; color: var(--danger, #E5483C); }
.conta__linha { border: 0; border-top: 1px solid var(--border-soft); margin: 6px 4px; }

/* no trilho fechado: so a foto, no meio */
.painel__lado[data-lado="trilho"] .conta__txt,
.painel__lado[data-lado="trilho"] .conta__seta,
.painel__lado[data-lado="trilho"] .conta__ajustes { display: none; }
.painel__lado[data-lado="trilho"] .conta__chip { justify-content: center; padding: 6px 0; }
.painel__lado[data-lado="trilho"] .conta__menu { position: fixed; left: 76px; right: auto; bottom: 16px; width: 260px; }

/* celular: o pe e o canto do topo; o menu desce, preso a direita */
@media (max-width: 899px) {
  .conta__txt, .conta__ajustes { display: none; }
  .conta__chip { gap: 4px; padding: 4px; min-height: 40px; }
  .conta__menu { top: calc(100% + 6px); bottom: auto; left: auto; right: 0; width: min(280px, calc(100vw - 24px)); }
}

/* ---------- o plano nos Ajustes e as perguntas frequentes (18/10/2026) ----------
   O plano saiu de Seu codigo e mora no modal de Ajustes, sem a caixa do
   cartao (seria cartao dentro de cartao). O cancelar fica no fim dele,
   com o rotulo de grupo, como nas Configuracoes do Claude. */
.aj .fin-licenca { padding: 0; border: 0; background: none; box-shadow: none; }
.aj .fin-licenca > .stat__label:first-child { display: none; }
.lic-cancelar { margin-top: 36px; }

/* as perguntas: o mesmo modal dos Ajustes, sem o menu da esquerda */
.aj.aj--faq { width: min(720px, 100%); grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr); grid-template-areas: "barra" "corpo"; }
.aj--faq .aj__corpo { padding-top: 12px; }
.faq__grupo { margin: 28px 0 4px; }
.faq__item { border-bottom: 1px solid var(--contorno-dentro, var(--contorno)); }
.faq__item > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 10px 0;
  list-style: none; cursor: pointer; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--text); }
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after { content: '+'; flex: none; font-size: 18px; font-weight: 400; color: var(--text-3); transition: transform .18s var(--ease, ease); }
.faq__item[open] > summary::after { transform: rotate(45deg); }
.faq__item > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.faq__item > p { margin: 0 0 16px; max-width: 60ch; line-height: 1.55; }
.aj--faq .aj__pe a { color: var(--accent-texto); font-weight: 500; }
@media (max-width: 720px) {
  .aj.aj--faq { grid-template-rows: 56px minmax(0, 1fr); grid-template-areas: "barra" "corpo"; }
}
@media (prefers-reduced-motion: reduce) { .faq__item > summary::after { transition: none; } }

/* ---------- os planos nos Ajustes no molde de tryzen.com.br/faq/planos (18/10/2026) ----------
   Engenharia reversa da aba "Para sua equipe" (faq/planos/planos.css: .plans, .plan,
   .plan.featured, .plan-top, .pill, .price, .price-de, .plan .button, .checks, .plan-note).
   Mesmas proporcoes, um degrau menor, porque aqui mora dentro de um modal. O modal
   alarga so nesta parte: tres cartoes nao cabem nos 640px das outras. */
.aj--largo .aj__corpo > * { max-width: none; }
.psites { container-type: inline-size; }
.psite-agora { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin: 0 0 16px; font-size: 15px; }
.psite-agora p { margin: 0; }
.psite-agora__vagas { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.psite-agora__vagas b { color: var(--text); }
.psite-agora__trilho { display: inline-block; width: 120px; height: 6px; border-radius: 99px; background: var(--preenche-forte, var(--preenche)); overflow: hidden; }
.psite-agora__trilho > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.psite-agora__trilho.is-perto > i { background: var(--urg-2, #E8A400); }
.psite-agora__trilho.is-cheia > i { background: var(--urg-1, #E5483C); }
.psite-nota { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--preenche); font-size: 13.5px; line-height: 1.5; color: var(--text); }
.psites__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* com o Coach Pro sao quatro cartoes: dois por linha (0173) */
.psites__grade--quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.psite { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 24px; border: 1px solid var(--contorno-dentro, var(--contorno)); border-radius: 20px; background: var(--preenche-suave, var(--surface)); }
.psite--destaque { border-color: var(--accent); background: var(--surface); }
.psite__topo { display: flex; width: 100%; min-height: 40px; align-items: center; justify-content: space-between; gap: 10px; }
.psite__icone { width: 50px; height: 40px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; color: var(--text); }
.psite__icone--trofeu { width: 34px; stroke-width: 1.8; }
.psite__selo { font-size: 10.5px; line-height: 1.3; padding: 6px 9px; border: 1px solid var(--contorno-dentro, var(--contorno)); border-radius: 6px; color: var(--text); text-align: right; }
.psite__nome { margin: 20px 0 10px; font-size: 25px; font-weight: 500; line-height: 1.2; letter-spacing: -.4px; }
.psite__frase { margin: 0; min-height: 4.8em; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.psite__preco { margin: 16px 0 16px; font-size: 26px; line-height: 1.25; letter-spacing: -.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.psite__preco small { display: block; margin-bottom: 2px; font-size: 12px; letter-spacing: 0; color: var(--text-3); }
.psite__preco span { display: block; margin-top: 8px; font-size: 12px; line-height: 1.6; letter-spacing: 0; color: var(--text-3); }
.psite__preco--texto { font-size: 23px; }
.psite__capas { display: flex; width: 100%; gap: 4px; margin: -4px 0 14px; }
.psite__capa { flex: 1 1 0; min-width: 0; min-height: 32px; padding: 0 2px; border: 0; border-radius: 8px; background: var(--preenche); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.psite__capa.is-on { background: var(--text); color: var(--modal, var(--bg)); }
.psite__capa:focus-visible, .psite__botao:focus-visible, .psite-letra__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.psite__botao { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; padding: 12px 18px;
  border: 1px solid var(--contorno-dentro, var(--contorno)); border-radius: 9px; background: none; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.psite__botao[disabled] { justify-content: center; cursor: default; color: var(--text-3); }
.psite__botao--cheio { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.psite__botao:not([disabled]):active { transform: scale(.985); opacity: .9; }
.psite__vistos { list-style: none; width: 100%; margin: 0; padding: 18px 0 0; font-size: 13px; line-height: 1.55; }
.psite__vistos li { position: relative; padding: 6px 0 6px 22px; }
.psite__vistos li::before { content: '\2713'; position: absolute; left: 0; color: var(--accent-texto, var(--accent)); }
.psite-form { margin-top: 16px; }
.psite-letra { margin: 18px auto 0; max-width: 760px; text-align: center; font-size: 11.5px; line-height: 1.8; color: var(--text-3); }
.psite-letra__link { padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.psites .lic-cancelar { max-width: 640px; }
/* o mesmo respiro da equipe do site: as cabecas acenam devagar */
@media (prefers-reduced-motion: no-preference) {
  .psite__cabeca { transform-box: fill-box; transform-origin: center; animation: psite-acena 5s ease-in-out infinite; }
  .psite__cabeca--e { animation-delay: -.8s; } .psite__cabeca--d { animation-delay: -1.6s; }
  .psite__raio { stroke-dasharray: 1; animation: psite-raio 4.8s ease-in-out infinite; }
  .psite__raio--2 { animation-delay: .22s; }
}
@keyframes psite-acena { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3%) rotate(2deg); } }
@keyframes psite-raio { 0%, 12%, 100% { stroke-dashoffset: 1; opacity: 0; } 32%, 80% { stroke-dashoffset: 0; opacity: 1; } }
@container (max-width: 760px) {
  .psites__grade { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin-inline: auto; }
  .psite__frase { min-height: 0; }
}

/* ---------- os cartoes de plano respondem ao mouse (18/10/2026) ----------
   O mesmo de faq/planos/planos.css ("botoes e cartoes respondem"): o
   cartao sobe 4px com sombra, a luz da marca segue o ponteiro por dentro
   (--mx/--my, financeiro.js), o aro do destacado gira e a seta anda. */
.psite { position: relative; isolation: isolate; transition: translate .75s cubic-bezier(.19, 1, .22, 1), box-shadow .75s cubic-bezier(.19, 1, .22, 1); }
.psite::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), var(--accent-tint), transparent 60%);
  transition: opacity .5s cubic-bezier(.19, 1, .22, 1); }
.psite--destaque::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--psite-giro, 0deg), transparent 0 70%, var(--marca, var(--accent)) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@property --psite-giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes psite-giro { to { --psite-giro: 360deg; } }
.psite__botao svg { transition: transform .6s cubic-bezier(.19, 1, .22, 1); }
@media (hover: hover) {
  .psite:hover { translate: 0 -4px; box-shadow: 0 22px 50px -28px color-mix(in srgb, var(--text) 45%, transparent); }
  .psite--destaque:hover { box-shadow: 0 26px 60px -26px var(--accent-glow); }
  .psite:hover::after { opacity: 1; }
  .psite__botao:not([disabled]):hover svg { transform: translateX(4px); }
  .psite__capa:not(.is-on):hover { background: var(--preenche-forte, var(--preenche)); color: var(--text); }
}
@media (prefers-reduced-motion: no-preference) { .psite--destaque::before { animation: psite-giro 6s linear infinite; } }
@media (prefers-reduced-motion: reduce) { .psite, .psite::after, .psite__botao svg { transition: none; } .psite:hover { translate: none; } }

/* o modal de Ajustes no tamanho maior em TODAS as partes, nao so no plano (o dono, 18/10/2026) */
.aj { width: min(1488px, 100%); height: min(816px, calc(100dvh - 48px)); }
@media (max-width: 720px) { .aj { width: 100%; height: 100%; } }

/* ---------- o enviar e um icone (18/10/2026) ----------
   Botao redondo com a seta pra cima, como no Claude, no chat da ficha, na
   mensagem pronta, no Pergunte sobre o atleta e na barra do Inicio. */
.btn.btn--enviar, .btn.btn--enviar.coach-busca__ir { flex: none; display: inline-grid; place-items: center; width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 50%; }
.btn.btn--enviar svg { display: block; }

/* ============================================================
   Tryzen Discovery Intelligence (18/10/2026)
   ------------------------------------------------------------
   A linguagem das orbitas (a pista) com o corredor verde da logo e as
   estrelas: a Tryzen encontrou algo e ele brilha. Uma identidade,
   nove composicoes. O desenho mora em descobertas/visuais.js; aqui o
   traco, as cores e o movimento. Com menos movimento, nasce pronto.
   ============================================================ */
:root { --dsc-verde: #0AB951; --dsc-alerta: var(--acao-preso, #B86700); }
.dsc { --dsc-linha: color-mix(in srgb, var(--text) 78%, transparent); }
.dsc .dsc__caixa { position: relative; width: min(520px, 100%); padding: 18px 24px 20px; overflow: hidden; outline: 0;
  animation: dsc-entra .42s cubic-bezier(.22, 1, .36, 1) both; }
/* o ceu: um halo verde muito leve atras do desenho, mais presente no escuro */
.dsc .dsc__caixa::before { content: ''; position: absolute; inset: -40% -20% auto; height: 70%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--dsc-verde) 9%, transparent), transparent); }
:root[data-tema="escuro"] .dsc .dsc__caixa::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--dsc-verde) 16%, transparent), transparent); }
.dsc--negativo .dsc__caixa::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--dsc-alerta) 10%, transparent), transparent); }
.dsc.is-saindo { animation: dsc-sai .18s ease-in both; }
@keyframes dsc-entra { from { transform: translateY(14px) scale(.985); } }
@keyframes dsc-sai { to { opacity: 0; } }
.dsc__barra { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin: 0 -10px 2px 0; }
.dsc__deck { margin: 0; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.dsc__x { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--text-3); cursor: pointer; }
.dsc__x:focus-visible { outline: 2px solid var(--dsc-verde); outline-offset: 1px; }
.dsc__corpo { position: relative; }
.dsc__kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--text-2); }
.dsc__kicker svg { flex: none; }
.dsc__kicker i { font-style: normal; color: var(--text-3); }
.dsc__kicker small { font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.dsc__titulo { margin: 0; font-size: 23px; line-height: 1.22; font-weight: 650; letter-spacing: -.018em; text-wrap: balance; }
.dsc__frase { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.dsc__implica { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.dsc__numero { display: grid; gap: 2px; margin: 0; }
.dsc__numero b { font-size: 54px; line-height: 1; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--text); }
.dsc--positivo .dsc__numero b, .dsc--oportunidade .dsc__numero b { color: var(--marca-texto, #067533); }
.dsc--negativo .dsc__numero b { color: var(--dsc-alerta); }
.dsc__numero span { font-size: 13px; color: var(--text-3); }
.dsc__arte { color: var(--dsc-linha); }
.dsc__arte svg { display: block; width: 100%; height: auto; }
.dsc__pe { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.dsc__pe-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.dsc__pe .btn { width: auto; }
.dsc__prox { padding-inline: 12px; }
.dsc__link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0; border: 0; background: none; color: var(--text-2);
  font: inherit; font-size: 14px; font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text) 25%, transparent); text-underline-offset: 3px; cursor: pointer; }
.dsc__pe-links { display: inline-flex; align-items: center; gap: 16px; }
.dsc__sec { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--marca-texto, #067533); }
.dsc--topo .dsc__sec, .dsc--central .dsc__sec { margin-inline: auto; display: flex; }

/* ---------- as composicoes ---------- */
.dsc--topo .dsc__arte--topo { max-width: 300px; margin: 0 auto 6px; }
.dsc--topo .dsc__corpo, .dsc--central .dsc__corpo { text-align: center; }
.dsc--topo .dsc__kicker, .dsc--central .dsc__kicker { justify-content: center; }
.dsc--numero .dsc__numero-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; }
.dsc--numero .dsc__arte--mini { flex: none; width: 168px; }
.dsc--lado .dsc__caixa { width: min(680px, 100%); }
.dsc__lado { display: grid; grid-template-columns: 250px 1fr; align-items: center; gap: 22px; }
.dsc__lado .dsc__numero { margin-top: 14px; }
.dsc__lado .dsc__numero b { font-size: 40px; }
.dsc--grafico .dsc__arte--grafico { margin: 14px -6px 2px; padding: 10px 6px 4px; border-radius: 16px;
  background: color-mix(in srgb, var(--text) 3.5%, transparent); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); }
.dsc__briefing-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dsc--briefing .dsc__arte--canto { flex: none; width: 128px; margin: -6px -4px 0 0; }
.dsc--briefing .dsc__titulo { font-size: 27px; letter-spacing: -.025em; }
.dsc__dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 16px 0 4px; border-radius: 14px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 9%, transparent); border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); }
.dsc__dados div { display: grid; gap: 2px; padding: 11px 13px; background: var(--bg); }
.dsc__dados div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dsc__dados dt { font-size: 12.5px; color: var(--text-3); }
.dsc__dados dd { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dsc--central .dsc__arte--central { max-width: 340px; margin: -4px auto 4px; }
.dsc--central .dsc__numero { justify-items: center; margin: 10px 0 0; }
.dsc--conexoes .dsc__arte--faixa { margin: -4px -24px 12px; padding: 4px 0; border-block: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--dsc-verde) 5%, transparent), transparent); }
.dsc--conexoes .dsc__arte--faixa svg { max-height: 190px; margin: 0 auto; }
.dsc__estados { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 16px 0 2px; }
.dsc__estado { display: grid; gap: 4px; padding: 14px; border-radius: 16px; text-align: center; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); background: color-mix(in srgb, var(--bg) 82%, transparent); }
.dsc__estado small { font-size: 12.5px; color: var(--text-3); }
.dsc__estado b { font-size: 28px; line-height: 1.05; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dsc__estado--agora { border-color: color-mix(in srgb, var(--dsc-verde) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dsc-verde) 9%, transparent); }
.dsc--negativo .dsc__estado--agora { border-color: color-mix(in srgb, var(--dsc-alerta) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dsc-alerta) 9%, transparent); }
.dsc__seta { display: grid; place-items: center; color: var(--text-3); }
.dsc__comparar { position: relative; margin: 2px 0; }
.dsc__comparar .dsc__arte--fundo { margin: 10px auto -6px; }
.dsc__comparar .dsc__arte--fundo svg { width: auto; height: 118px; margin: 0 auto; }
.dsc__comparar .dsc__estados { position: relative; margin-top: 0; }
.dsc__tecnico { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 16px; }
.dsc--tecnico .dsc__dados { grid-template-columns: 1fr; }
.dsc--tecnico .dsc__dados div { grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; }
.dsc--tecnico .dsc__dados dd { font-size: 14.5px; }
@media (max-width: 560px) {
  .dsc .dsc__caixa { padding: 14px 18px 18px; }
  .dsc__titulo { font-size: 21px; }
  .dsc--briefing .dsc__titulo { font-size: 23px; }
  .dsc__lado { grid-template-columns: 1fr; gap: 6px; }
  .dsc__lado .dsc__arte--lado { max-width: 260px; margin: 0 auto; }
  .dsc--numero .dsc__arte--mini { width: 104px; }
  .dsc__numero b { font-size: 44px; }
  .dsc__tecnico { grid-template-columns: 84px 1fr; gap: 12px; }
  .dsc--conexoes .dsc__arte--faixa { margin-inline: -18px; }
  .dsc__pe { margin-top: 18px; }
  .dsc__pe { flex-direction: column-reverse; align-items: stretch; }
  .dsc__pe-links { justify-content: center; }
  .dsc__pe-acoes { width: 100%; margin-left: 0; flex-wrap: nowrap; }
  .dsc__pe-acoes .btn--primary { flex: 1; }
}

/* ---------- o "Ver por quê" ---------- */
.dsc--porque .dsc__caixa { display: flex; flex-direction: column; max-height: min(86vh, 760px); }
.dsc--porque .dsc__corpo { min-height: 0; overflow-y: auto; margin-right: -10px; padding-right: 10px; overscroll-behavior: contain; }
.dsc__titulo--porque { font-size: 20px; }
.dsc__tres { list-style: none; display: grid; gap: 10px; margin: 14px 0 0; padding: 0; counter-reset: dsc; }
.dsc__tres li { position: relative; display: grid; gap: 2px; padding-left: 30px; counter-increment: dsc; font-size: 14.5px; line-height: 1.45; }
.dsc__tres li::before { content: counter(dsc); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: 11.5px; font-weight: 700; color: #fff; background: var(--dsc-verde); }
.dsc__tres b { font-size: 13px; font-weight: 600; color: var(--text-3); }
.dsc__rotulo { margin: 18px 0 6px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.dsc__evid { margin-top: 0; }
.dsc__nota { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.dsc__origem { margin: 16px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.dsc__util { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--text) 9%, transparent); }
.dsc__util .sm { margin: 0; color: var(--text-2); }
.dsc__pref { margin-top: 12px; }
.dsc__pref summary { cursor: pointer; font-size: 13.5px; color: var(--text-2); min-height: 32px; display: flex; align-items: center; }
.dsc__pref .coach-chips { margin: 8px 0; }
.dsc__cat { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: 13.5px; }

/* ---------- a porta discreta de cada aba ---------- */
  font: inherit; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); background: color-mix(in srgb, var(--dsc-verde) 4%, var(--surface, var(--bg))); }
  color: color-mix(in srgb, var(--text) 70%, transparent); background: color-mix(in srgb, var(--text) 4%, transparent); }

/* ---------- o resolver com a mensagem que a descoberta preparou ---------- */
.rs__previa { margin: 0; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); background: color-mix(in srgb, var(--text) 4%, var(--surface, var(--bg))); }
.rs__desenho .dsc-v { width: min(100%, 260px); height: auto; color: color-mix(in srgb, var(--text) 78%, transparent); }

/* ---------- o traco dos desenhos ---------- */
.dsc-v { overflow: visible; }
.dsc-v .dsc-orbita { stroke: currentColor; stroke-width: .816; opacity: .14; }
.dsc-v .dsc-orbita-viva { stroke: currentColor; stroke-width: .816; opacity: .32; stroke-dasharray: 100; animation: dsc-orbita 9s cubic-bezier(.22, 1, .36, 1) infinite; animation-delay: calc(var(--k, 0) * -1.2s); }
.dsc-v .dsc-traco, .dsc-v .dsc-traco-fino { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dsc-v .dsc-traco-fino { stroke-width: 1.1; }
.dsc-v .dsc-tique { stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; opacity: .45; }
.dsc-v .dsc-base { stroke: currentColor; stroke-width: 1; opacity: .25; }
.dsc-v .dsc-pista path { stroke: currentColor; stroke-width: .9; opacity: .2; }
.dsc-v .dsc-pista .dsc-pista__meio { stroke-dasharray: 4 7; opacity: .16; }
.dsc-v .dsc-pista--forte path { opacity: .32; }
.dsc-v .dsc-pista .dsc-raia { stroke-width: .7; opacity: .14; }
.dsc-v .dsc-liga { stroke: var(--dsc-verde); stroke-width: 1.3; stroke-linecap: round; }
.dsc-v .dsc-liga--leve { stroke: currentColor; opacity: .3; stroke-width: 1; }
.dsc-v .dsc-liga--forte { stroke: var(--dsc-verde); stroke-width: 1.6; opacity: 1; }
.dsc-v .dsc-curva { stroke: var(--dsc-verde); stroke-width: 2.2; stroke-linecap: round; }
.dsc-v .dsc-arco { stroke: var(--dsc-verde); stroke-width: 4; stroke-linecap: round; }
.dsc-v .dsc-visto { stroke: var(--dsc-verde); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dsc-v .dsc-media { stroke: currentColor; stroke-width: 1; stroke-dasharray: 3 5; opacity: .5; }
.dsc-v .dsc-corte { stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 4; opacity: .3; }
.dsc-v .dsc-tracejado { stroke: var(--dsc-verde); stroke-width: 1.6; }
.dsc-v .dsc-fio { stroke: currentColor; stroke-width: 1.1; opacity: .26; }
.dsc-v .dsc-fio--aceso { stroke: var(--dsc-verde); opacity: .9; stroke-width: 1.6; }
.dsc-v .dsc-no { fill: currentColor; opacity: .5; }
.dsc-v .dsc-no--aceso { fill: var(--dsc-verde); opacity: 1; }
.dsc-v .dsc-no--alerta { fill: var(--dsc-alerta); opacity: 1; }
.dsc-v .dsc-halo { fill: none; stroke: var(--dsc-verde); stroke-width: 1; opacity: .45; }
.dsc-v .dsc-pulso { fill: none; stroke: var(--dsc-alerta); stroke-width: 1.2; }
.dsc-v .dsc-barra { fill: currentColor; opacity: .2; }
.dsc-v .dsc-barra--acesa { fill: var(--dsc-verde); opacity: 1; }
.dsc-v .dsc-barra--alerta { fill: var(--dsc-alerta); opacity: .7; }
.dsc-v .dsc-barra--vazia { fill: none; stroke: currentColor; stroke-dasharray: 3 3; opacity: .35; }
.dsc-v .dsc-moeda { fill: color-mix(in srgb, var(--dsc-verde) 8%, transparent); }
.dsc-v .dsc-radar path { fill: color-mix(in srgb, var(--dsc-verde) 10%, transparent); }
.dsc-v .dsc-radar .dsc-radar__linha { stroke: var(--dsc-verde); stroke-width: 1; opacity: .6; fill: none; }
.dsc-v .dsc-radar { transform-origin: 160px 100px; }
.dsc-v .dsc-estacao circle { fill: var(--bg); stroke: currentColor; stroke-width: 1.2; opacity: .55; }
.dsc-v .dsc-estacao.is-feita circle { stroke: var(--dsc-verde); opacity: 1; fill: color-mix(in srgb, var(--dsc-verde) 10%, var(--bg)); }
.dsc-v .dsc-bloco rect { fill: color-mix(in srgb, var(--text) 4%, transparent); }
.dsc-v .dsc-xadrez { fill: currentColor; opacity: .55; }
.dsc-v .dsc-medalha-estrela { fill: var(--dsc-verde); }
.dsc-v .dsc-trofeu-copa { fill: color-mix(in srgb, var(--dsc-verde) 16%, transparent); }
.dsc-v .dsc-cabeca { fill: color-mix(in srgb, var(--dsc-verde) 14%, transparent); stroke: currentColor; stroke-width: 1.1; }
.dsc-v .dsc-estrela { transform-box: fill-box; transform-origin: center; }
.dsc-v .dsc-fantasma { opacity: .22; filter: grayscale(1); }
.dsc-v .dsc-vento { stroke: var(--dsc-verde); stroke-width: 1.4; stroke-linecap: round; opacity: .7; }

@media (prefers-reduced-motion: no-preference) {
  .dsc .dsc-v .dsc-desenha, .rs__desenho .dsc-v .dsc-desenha { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dsc-desenha 1.1s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: calc(240ms + var(--i, 0) * 90ms); }
  .dsc .dsc-v .dsc-no, .dsc .dsc-v .dsc-barra, .dsc .dsc-v .dsc-estacao, .dsc .dsc-v .dsc-bloco { transform-box: fill-box; transform-origin: center bottom; animation: dsc-surge .6s cubic-bezier(.34, 1.4, .64, 1) both; animation-delay: calc(120ms + var(--i, 0) * 55ms); }
  .dsc .dsc-v .dsc-no { transform-origin: center; }
  .dsc-v .dsc-halo { transform-box: fill-box; transform-origin: center; animation: dsc-halo 2.8s ease-out infinite 1s; }
  .dsc-v .dsc-pulso { transform-box: fill-box; transform-origin: center; animation: dsc-halo 2.2s ease-out infinite; animation-delay: calc(var(--i, 0) * .3s); }
  .dsc-v .dsc-estrela { animation: dsc-brilha 3.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s); }
  .dsc-v .dsc-estrela--grande { animation-duration: 2.8s; }
  .dsc .dsc-v .dsc-marca { animation: dsc-marca .9s cubic-bezier(.22, 1, .36, 1) both .35s; }
  .dsc-v .dsc-marca--corre path { animation: dsc-corre 2.6s ease-in-out infinite 1.3s; transform-box: fill-box; transform-origin: center; }
  .dsc-v .dsc-radar { animation: dsc-radar 6s linear infinite; }
  .dsc-v .dsc-orbita--gira { transform-box: fill-box; transform-origin: center; animation: dsc-gira 24s linear infinite; stroke-dasharray: 2 6; opacity: .3; }
  .dsc .dsc-v .dsc-grupo--esq { animation: dsc-junta-e 1.4s cubic-bezier(.22, 1, .36, 1) both .2s; }
  .dsc .dsc-v .dsc-grupo--dir { animation: dsc-junta-d 1.4s cubic-bezier(.22, 1, .36, 1) both .2s; }
  .dsc-v .dsc-cabeca { transform-box: fill-box; transform-origin: center; animation: dsc-acena 5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .4s); }
}
@keyframes dsc-desenha { to { stroke-dashoffset: 0; } }
@keyframes dsc-surge { from { opacity: 0; transform: scale(.2); } }
@keyframes dsc-halo { 0% { opacity: .6; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes dsc-brilha { 0%, 100% { opacity: .55; transform: scale(.82) rotate(0deg); } 50% { opacity: 1; transform: scale(1.08) rotate(12deg); } }
@keyframes dsc-marca { from { opacity: 0; transform: translateY(8px); } }
@keyframes dsc-corre { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes dsc-radar { to { transform: rotate(360deg); } }
@keyframes dsc-gira { to { transform: rotate(360deg); } }
@keyframes dsc-orbita { 0% { stroke-dashoffset: 100; opacity: .1; } 42%, 72% { stroke-dashoffset: 0; opacity: .32; } 100% { stroke-dashoffset: -100; opacity: .1; } }
@keyframes dsc-junta-e { from { transform: translateX(-18px); opacity: .3; } }
@keyframes dsc-junta-d { from { transform: translateX(18px); opacity: .3; } }
@keyframes dsc-acena { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) {
  .dsc .dsc__caixa, .dsc.is-saindo { animation: none; }
  .dsc-v .dsc-orbita-viva { animation: none; stroke-dashoffset: 0; }
}

/* ---------- a linguagem do vencedor (18/10/2026, em validacao) ----------
   Os desenhos da pagina de Planos nas descobertas boas: podio, tenis que
   anda, medalha e trofeu com louros, linha de chegada. Traco fino, verde
   so no que venceu, confete devagar. */
.dsc-v--vence .dsc-piso path { stroke: currentColor; stroke-width: .8; opacity: .16; }
.dsc-v--vence .dsc-face { stroke: currentColor; stroke-width: 1.15; stroke-linejoin: round; opacity: .8; }
.dsc-v--vence .dsc-friso { stroke: currentColor; stroke-width: .6; opacity: .35; }
.dsc-v--vence .d1 .dsc-face { stroke: var(--dsc-verde); opacity: 1; }
.dsc-v--vence .d1 .dsc-friso { stroke: var(--dsc-verde); opacity: .5; }
.dsc-v--vence .dsc-hachura path { stroke: currentColor; stroke-width: .7; opacity: .3; }
.dsc-v--vence .dsc-trajeto { stroke: var(--dsc-verde); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1; }
.dsc-v--vence .dsc-pouso { stroke: var(--dsc-verde); stroke-width: .9; }
.dsc-v--vence .dsc-louro { stroke: var(--dsc-verde); stroke-width: 1.1; stroke-linecap: round; }
.dsc-v--vence .dsc-folha { stroke: var(--dsc-verde); stroke-width: .8; fill: color-mix(in srgb, var(--dsc-verde) 14%, transparent); }
.dsc-v--vence .dsc-raio { stroke: currentColor; stroke-width: .9; stroke-linecap: round; opacity: .45; stroke-dasharray: 1; }
.dsc-v--vence .dsc-confete { fill: currentColor; opacity: .35; }
.dsc-v--vence .dsc-confete.is-verde { fill: var(--dsc-verde); opacity: .75; }
.dsc-v--vence .dsc-curva--fundo { stroke-width: 1.4; opacity: .55; }
.dsc-v--vence .dsc-pegadas ellipse { fill: currentColor; opacity: .14; }
.dsc-v--vence .dsc-passo-vento path { stroke: var(--dsc-verde); stroke-width: 1.4; stroke-linecap: round; opacity: .6; }
.dsc-v--vence .dsc-tenis__corpo { stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; fill: color-mix(in srgb, var(--dsc-verde) 16%, var(--bg)); }
.dsc-v--vence .dsc-tenis__sola { stroke: var(--dsc-verde); stroke-width: 2.4; stroke-linecap: round; }
.dsc-v--vence .dsc-tenis__traco { stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.dsc-v--vence .dsc-tenis { transform-box: fill-box; transform-origin: 30% 90%; }
.dsc-v--vence .dsc-fita { stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.dsc-v--vence .dsc-fita-cor { fill: var(--dsc-verde); opacity: .85; }
.dsc-v--vence .dsc-medalha { stroke: currentColor; stroke-width: 1.6; }
.dsc-v--vence .dsc-medalha-miolo { fill: color-mix(in srgb, var(--dsc-verde) 12%, transparent); stroke: var(--dsc-verde); stroke-width: .9; }
.dsc-v--vence .dsc-medalha-estrela, .dsc-v--vence .dsc-trofeu-estrela { fill: var(--dsc-verde); }
.dsc-v--vence .dsc-medalha-balanca { transform-box: view-box; transform-origin: 160px 20px; }
.dsc-v--vence .dsc-ouro { stroke: currentColor; stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; }
.dsc-v--vence .dsc-brilho { stroke: var(--dsc-verde); stroke-width: .8; }
.dsc-v--vence .dsc-copa-cor { fill: color-mix(in srgb, var(--dsc-verde) 18%, transparent); }
.dsc-v--vence .dsc-fita-chegada { stroke: var(--dsc-verde); stroke-width: 2; stroke-linecap: round; }
.dsc-v--vence .dsc-rastro path { stroke: var(--dsc-verde); stroke-width: 1.4; stroke-linecap: round; opacity: .5; }
.dsc-v--vence .dsc-corredor { transform: translateX(var(--x, 0)); }
.dsc-v--vence .dsc-heroi { transform-box: fill-box; transform-origin: center bottom; }

@media (prefers-reduced-motion: no-preference) {
  .dsc .dsc-v--vence .dsc-confete { animation: dsc-cai 5.5s ease-in infinite; animation-delay: calc(var(--i, 0) * -.6s); }
  .dsc .dsc-v--vence .dsc-raio { animation: dsc-raio 4.8s ease-in-out infinite; animation-delay: calc(1.2s + var(--i, 0) * .08s); }
  .dsc .dsc-v--vence .dsc-heroi { animation: dsc-pula 2.8s cubic-bezier(.34, 1.4, .64, 1) infinite 1.2s; }
  .dsc .dsc-v--vence .dsc-tenis-anda { animation: dsc-anda 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
  .dsc .dsc-v--vence .dsc-tenis { animation: dsc-passada .8s ease-in-out infinite; }
  .dsc .dsc-v--vence .dsc-pegadas ellipse { animation: dsc-pegada 3.2s ease-out infinite; animation-delay: calc(var(--i, 0) * .4s); }
  .dsc .dsc-v--vence .dsc-passo-vento path { animation: dsc-vento 1.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .2s); }
  .dsc .dsc-v--vence .dsc-medalha-balanca { animation: dsc-balanca 6s ease-in-out infinite; }
  .dsc .dsc-v--vence .dsc-corredor { animation: dsc-chega 2.4s cubic-bezier(.22, 1, .36, 1) both .3s; }
  .dsc .dsc-v--vence .dsc-rastro path { animation: dsc-vento 1.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .15s); }
}
@keyframes dsc-cai { 0% { transform: translateY(-10px) rotate(0deg); opacity: 0; } 15% { opacity: .7; } 100% { transform: translateY(70px) rotate(160deg); opacity: 0; } }
@keyframes dsc-raio { 0%, 12%, 100% { stroke-dashoffset: 1; opacity: 0; } 32%, 80% { stroke-dashoffset: 0; opacity: .5; } }
@keyframes dsc-pula { 0%, 70%, 100% { transform: translateY(0); } 82% { transform: translateY(-7px); } }
@keyframes dsc-anda { 0%, 100% { transform: translate(-10px, 4px); } 50% { transform: translate(0, 0); } }
@keyframes dsc-passada { 0%, 100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-5px) rotate(-6deg); } }
@keyframes dsc-pegada { 0% { opacity: 0; } 20% { opacity: .22; } 100% { opacity: 0; } }
@keyframes dsc-vento { 0%, 100% { opacity: .15; transform: translateX(4px); } 50% { opacity: .7; transform: translateX(-4px); } }
@keyframes dsc-balanca { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes dsc-chega { from { transform: translateX(-60px); opacity: 0; } to { transform: translateX(var(--x, 0)); opacity: 1; } }

/* ---------- o teste do dono (18/10): uma cor so e menos espacial ----------
   "Um pouco menos espacial, e 1 cor unica, sem o verde nesse teste nosso."
   Tudo na cor do texto; a hierarquia vem da opacidade e do preenchimento.
   Sem orbitas, sem halo e quase sem estrela: fica o esporte (podio, tenis,
   medalha, trofeu, chegada). */
.dsc-v--mono { --dsc-verde: currentColor; --dsc-alerta: currentColor; }
.dsc-v--mono .dsc-orbitas, .dsc-v--mono .dsc-orbita, .dsc-v--mono .dsc-orbita-viva, .dsc-v--mono .dsc-halo { display: none; }
.dsc-v--mono > .dsc-estrela, .dsc-v--mono .dsc-confete .dsc-estrela { display: none; }
.dsc-v--mono .dsc-estrela--grande { display: inline; opacity: .85; }
.dsc-v--mono .dsc-folha { fill: color-mix(in srgb, currentColor 10%, transparent); }
.dsc-v--mono .dsc-tenis__corpo { fill: color-mix(in srgb, currentColor 9%, var(--bg)); }
.dsc-v--mono .dsc-copa-cor, .dsc-v--mono .dsc-trofeu-copa, .dsc-v--mono .dsc-medalha-miolo, .dsc-v--mono .dsc-moeda, .dsc-v--mono .dsc-cabeca { fill: color-mix(in srgb, currentColor 10%, transparent); }
.dsc-v--mono .dsc-barra--acesa, .dsc-v--mono .dsc-no--aceso { opacity: .95; }
.dsc-v--mono .dsc-confete.is-verde { opacity: .45; }
.dsc-v--mono .dsc-fita-cor { opacity: .7; }
.dsc-v--mono .dsc-radar path { fill: color-mix(in srgb, currentColor 8%, transparent); }
.dsc-v--mono .dsc-estacao.is-feita circle { fill: color-mix(in srgb, currentColor 10%, var(--bg)); }
.dsc--vencedor .dsc__caixa::before { display: none; }
.dsc--vencedor .dsc__kicker svg { display: none; }
.dsc--vencedor .dsc__numero b, .dsc--vencedor.dsc--positivo .dsc__numero b, .dsc--vencedor.dsc--oportunidade .dsc__numero b, .dsc--vencedor.dsc--negativo .dsc__numero b { color: var(--text); }
.dsc--vencedor .dsc__sec { color: var(--text); }
.dsc--vencedor .dsc__estado--agora, .dsc--vencedor.dsc--negativo .dsc__estado--agora { border-color: var(--text); box-shadow: none; }
.dsc--vencedor .btn--primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.dsc--vencedor .dsc__tres li::before { background: var(--text); color: var(--bg); }

/* ---------- a terceira opcao: o minimalista do Claude (18/10, em teste) ----------
   "Se fosse naquele estilo minimalista que ja temos, estilo do Claude."
   Uma composicao so: o desenho da casa (js/desenhos.js) pequeno ao lado da
   categoria, titulo, frase e as linhas de um painel (rotulo a esquerda,
   valor a direita), sem caixa em volta de cada uma. Uma cor so. */
.dsc--minimal .dsc__caixa { width: min(460px, 100%); padding: 16px 22px 18px; }
.dsc__mini-topo { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.dsc__mini-arte { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: color-mix(in srgb, var(--text) 5%, transparent); }
.dsc__mini-arte .traco { width: 40px; height: 40px; }
.dsc--minimal .dsc__mini-topo .dsc__kicker { margin: 0; display: grid; gap: 1px; }
.dsc--minimal .dsc__mini-topo .dsc__kicker i { display: none; }
.dsc--minimal .dsc__mini-topo .dsc__kicker span { font-size: 13px; color: var(--text); }
.dsc--minimal .dsc__titulo { font-size: 20px; letter-spacing: -.012em; }
.dsc--minimal .dsc__frase { font-size: 15px; }
.dsc__mini-linhas { margin: 16px 0 0; border-top: 1px solid color-mix(in srgb, var(--text) 9%, transparent); }
.dsc__mini-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, transparent); font-size: 14px; }
.dsc__mini-linha span { color: var(--text-2); min-width: 0; }
.dsc__mini-linha b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.dsc__mini-linha--forte b { font-size: 18px; letter-spacing: -.01em; }
.dsc--minimal .dsc__pe { margin-top: 18px; }
.dsc--minimal .btn--primary { min-height: 40px; padding: 8px 18px; font-size: 14.5px; border-radius: 12px; }
.dsc--minimal .dsc__sec { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--text) 25%, transparent); }
.dsc--minimal .dsc__sec svg { display: none; }

/* ---------- as conquistas no traco da casa (18/10, em teste) ----------
   Treze desenhos novos (descobertas/conquistas.js) com movimento MAIOR
   que o dos cartoes: uma entrada que conta a cena e um gesto em loop.
   O heroi do modal minimalista mostra o desenho em 104px. */
.cq * { transform-box: fill-box; }
.cq .c-folha { fill: color-mix(in srgb, currentColor 14%, transparent); }
.cq .c-cresce { transform-origin: center bottom; }
.cq .c-balanca { transform-origin: 50% 0%; }
.cq .c-ergue, .cq .c-estala, .cq .c-brilha, .cq .c-impacto, .cq .c-hoje { transform-origin: center; }
.cq .c-ponteiro { transform-origin: 50% 100%; }
.cq .c-passada { transform-origin: 10% 90%; }
.cq .c-tremula { transform-origin: 0% 50%; }
.cq .c-fita--a { transform-origin: 0% 50%; }
.cq .c-fita--b { transform-origin: 100% 50%; }
.cq .c-gira { transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  .cq { animation: cq-entra .7s cubic-bezier(.34, 1.5, .64, 1) both; }
  .cq .c-ergue { animation: cq-ergue 3.2s cubic-bezier(.34, 1.3, .64, 1) infinite; }
  .cq .c-brilha { animation: cq-brilha 3.2s ease-in-out infinite .4s; }
  .cq .c-raio { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cq-raio 3.2s ease-out infinite; animation-delay: calc(.5s + var(--i, 0) * .12s); }
  .cq .c-ramo { stroke-dasharray: 1; animation: cq-ramo 1.4s cubic-bezier(.22, 1, .36, 1) both .2s; }
  .cq .c-folha { animation: cq-folha 3.6s cubic-bezier(.34, 1.6, .64, 1) infinite; animation-delay: calc(.4s + var(--i, 0) * .1s); }
  .cq .c-balanca { animation: cq-balanca 2.6s ease-in-out infinite; }
  .cq .c-sobe { animation: cq-sobe 3.4s cubic-bezier(.45, 0, .2, 1) infinite; }
  .cq .c-confete { animation: cq-confete 2.8s ease-in infinite; animation-delay: calc(var(--i, 0) * -.45s); }
  .cq .c-passada { animation: cq-passada 1.1s ease-in-out infinite; }
  .cq .c-vento { animation: cq-vento 1.1s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .12s); }
  .cq .c-pegada { animation: cq-pegada 2.2s ease-out infinite; animation-delay: calc(var(--i, 0) * .35s); }
  .cq .c-ponteiro { animation: cq-ponteiro 4s steps(12) infinite; }
  .cq .c-aperta { animation: cq-aperta 4s ease-in-out infinite; }
  .cq .c-corre { animation: cq-corre 3.4s cubic-bezier(.45, 0, .55, 1) infinite; }
  .cq .c-fita--a { animation: cq-fita-a 3.4s ease-in infinite; }
  .cq .c-fita--b { animation: cq-fita-b 3.4s ease-in infinite; }
  .cq .c-tremula { animation: cq-tremula 1.6s ease-in-out infinite; }
  .cq .c-cresce { animation: cq-cresce 3.6s cubic-bezier(.34, 1.3, .64, 1) infinite; animation-delay: calc(var(--i, 0) * .15s); }
  .cq .c-seta { animation: cq-seta 3.6s cubic-bezier(.34, 1.4, .64, 1) infinite .5s; }
  .cq .c-flecha { animation: cq-flecha 3s cubic-bezier(.6, 0, .2, 1) infinite; }
  .cq .c-impacto { animation: cq-impacto 3s ease-out infinite; }
  .cq .c-estala { animation: cq-estala 3s cubic-bezier(.34, 1.6, .64, 1) infinite; }
  .cq .c-gira { animation: cq-gira 14s linear infinite; }
  .cq .c-visto { stroke-dasharray: 1; animation: cq-visto 4s ease-out infinite; animation-delay: calc(var(--i, 0) * .32s); }
  .cq .c-hoje { animation: cq-brilha 4s ease-in-out infinite 1.7s; }
  .cq .c-cai { animation: cq-cai 3s cubic-bezier(.5, 0, .75, 0) infinite; }
}
@keyframes cq-entra { from { transform: scale(.6) translateY(8px); } }
@keyframes cq-ergue { 0%, 100% { transform: translateY(0) scale(1); } 18% { transform: translateY(-5px) scale(1.06); } 34% { transform: translateY(0) scale(1); } }
@keyframes cq-brilha { 0%, 100% { transform: scale(1); } 18% { transform: scale(1.35) rotate(18deg); } 34% { transform: scale(1); } }
@keyframes cq-raio { 0%, 10% { stroke-dashoffset: 1; opacity: 0; } 24% { stroke-dashoffset: 0; opacity: 1; } 55%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes cq-ramo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cq-folha { 0% { transform: scale(0); } 14% { transform: scale(1.2); } 22%, 86% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes cq-balanca { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes cq-sobe { 0%, 8% { transform: translate(-16px, 11px); } 22% { transform: translate(-12px, -2px); } 32% { transform: translate(-7px, 1px); } 46% { transform: translate(-3px, -9px); } 58%, 92% { transform: translate(0, 0); } 100% { transform: translate(-16px, 11px); opacity: 0; } }
@keyframes cq-confete { 0% { transform: translateY(-6px) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(26px) rotate(200deg); opacity: 0; } }
@keyframes cq-passada { 0%, 100% { transform: rotate(0) translateX(0); } 35% { transform: rotate(-12deg) translateX(1px); } 65% { transform: rotate(4deg) translateX(3px); } }
@keyframes cq-vento { 0%, 100% { transform: translateX(3px); opacity: .2; } 50% { transform: translateX(-3px); opacity: 1; } }
@keyframes cq-pegada { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cq-ponteiro { to { transform: rotate(360deg); } }
@keyframes cq-aperta { 0%, 90%, 100% { transform: translateY(0); } 94% { transform: translateY(2px); } }
@keyframes cq-corre { 0% { transform: translateX(-14px); } 55% { transform: translateX(10px); } 80%, 100% { transform: translateX(10px); opacity: 0; } }
@keyframes cq-fita-a { 0%, 46% { transform: rotate(0); } 60%, 90% { transform: rotate(38deg); opacity: 1; } 100% { transform: rotate(38deg); opacity: 0; } }
@keyframes cq-fita-b { 0%, 46% { transform: rotate(0); } 60%, 90% { transform: rotate(-38deg); opacity: 1; } 100% { transform: rotate(-38deg); opacity: 0; } }
@keyframes cq-tremula { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-7deg) scaleX(.94); } }
@keyframes cq-cresce { 0% { transform: scaleY(.15); } 22%, 88% { transform: scaleY(1); } 100% { transform: scaleY(.15); } }
@keyframes cq-seta { 0%, 10% { transform: translate(-6px, 6px); opacity: 0; } 28%, 88% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes cq-flecha { 0% { transform: translate(14px, -14px); opacity: 0; } 18% { opacity: 1; } 30% { transform: none; } 34% { transform: translate(-1px, 1px); } 38%, 90% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes cq-impacto { 0%, 30% { transform: scale(1); } 40% { transform: scale(1.18); } 55%, 100% { transform: scale(1); } }
@keyframes cq-estala { 0% { transform: scale(.4) rotate(-30deg); opacity: 0; } 16% { transform: scale(1.18) rotate(6deg); opacity: 1; } 26%, 100% { transform: scale(1) rotate(0); } }
@keyframes cq-gira { to { transform: rotate(360deg); } }
@keyframes cq-visto { 0%, 4% { stroke-dashoffset: 1; } 16%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes cq-cai { 0% { transform: translate(0, -18px); opacity: 0; } 20% { opacity: 1; } 48% { transform: translate(-16px, 14px); } 56% { transform: translate(-16px, 11px); } 62%, 90% { transform: translate(-16px, 14px); opacity: 1; } 100% { transform: translate(-16px, 14px); opacity: 0; } }

/* o heroi do minimalista: a conquista grande, num ladrilho neutro */
.dsc__mini-heroi { display: grid; place-items: center; width: 124px; height: 124px; margin: 2px 0 14px; border-radius: 28px;
  background: color-mix(in srgb, var(--text) 5%, transparent); }
.dsc__mini-heroi .traco { width: 96px; height: 96px; }
.dsc--minimal.dsc--heroi .dsc__corpo { text-align: left; }
@media (max-width: 560px) { .dsc__mini-heroi { width: 108px; height: 108px; border-radius: 24px; } .dsc__mini-heroi .traco { width: 84px; height: 84px; } }

/* ---------- a abertura que se transforma (18/10, em teste) ----------
   js/movimento: o palco halftone (canvas) com a mira e a linha precisa
   (SVG) por cima. Tudo centralizado: o palco, o titulo, o texto e os
   botoes no mesmo eixo. O texto entra desfocado e fica nitido em 0,45 s
   (o reveal da Attio), e o botao funciona desde o primeiro quadro. */
.dsc--transforma .dsc__caixa { width: min(560px, 100%); padding: 14px 22px 20px; text-align: center; }
.dsc--transforma .dsc__corpo { display: grid; justify-items: center; }
.dsc--transforma .dsc__kicker { justify-content: center; margin-top: 4px; }
.dsc--transforma .dsc__titulo { font-size: 24px; max-width: 26ch; }
.dsc--transforma .dsc__frase, .dsc--transforma .dsc__implica { max-width: 46ch; }
.dsc--transforma .dsc__pe { justify-content: center; flex-direction: column-reverse; gap: 12px; }
.dsc--transforma .dsc__pe-links { justify-content: center; }
.dsc--transforma .dsc__pe-acoes { margin: 0; justify-content: center; }
.dsc--transforma .dsc__sec { margin-inline: auto; }
.dsc__tf-numero { display: grid; justify-items: center; gap: 1px; margin: 14px 0 0; }
.dsc__tf-numero b { font-size: 30px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dsc__tf-numero span { font-size: 12.5px; color: var(--text-3); }
.palco { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 34vh; margin: 0 0 14px; border-radius: 18px; overflow: hidden;
  --palco-tinta: var(--text); --palco-acento: var(--dsc-verde, #0AB951);
  background: color-mix(in srgb, var(--text) 3.5%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 7%, transparent); }
.palco__tela { position: absolute; inset: 0; width: 100%; height: 100%; }
.palco__mira { position: absolute; overflow: visible; pointer-events: none; color: var(--text); }
.palco__mira * { fill: none; }
.palco__cruz, .palco__base, .palco__anel { vector-effect: non-scaling-stroke; }
.palco__cruz { stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 4; opacity: 0; transition: opacity .5s ease .1s; }
.palco__anel { stroke: var(--palco-acento); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(2.2); transition: opacity .4s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.palco__ponto { fill: var(--palco-acento) !important; opacity: 0; transition: opacity .3s ease .25s; }
.palco__linha { stroke: currentColor; stroke-width: .18; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .6; transition: stroke-dashoffset .9s cubic-bezier(.22, 1, .36, 1); }
.palco__base { stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; transition: opacity .5s ease; }
.palco.is-revelado .palco__cruz { opacity: .28; }
.palco.is-revelado .palco__anel { opacity: 1; transform: scale(1); }
.palco.is-revelado .palco__ponto { opacity: 1; }
.palco.is-revelado .palco__linha { stroke-dashoffset: 0; }
.palco.is-revelado .palco__base { opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .dsc--transforma .dsc__corpo > :not(.palco) { animation: tf-nitido .45s cubic-bezier(.22, 1, .36, 1) both; }
  .dsc--transforma .dsc__corpo > .dsc__kicker { animation-delay: .08s; }
  .dsc--transforma .dsc__corpo > .dsc__titulo { animation-delay: .14s; }
  .dsc--transforma .dsc__corpo > .dsc__frase { animation-delay: .2s; }
  .dsc--transforma .dsc__corpo > .dsc__implica, .dsc--transforma .dsc__corpo > .dsc__tf-numero { animation-delay: .26s; }
}
@keyframes tf-nitido { from { filter: blur(6px); opacity: 0; transform: translateY(4px); } }
@media (max-width: 560px) { .dsc--transforma .dsc__titulo { font-size: 21px; } .palco { border-radius: 14px; } }

/* ---------- a biblioteca de aberturas (18/10, em teste) ----------
   js/movimento/aberturas.js: mao (Claude), compasso (Attio), linha
   (Linear), constelacao e mapa (Claude), celulas, ilustracao (Notion),
   halftone. Traco na cor do texto; a forma cheia e o ponto da descoberta
   na cor de destaque. */
.palco__svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--text); overflow: visible; }
.palco__svg * { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ab-traco { stroke: currentColor; stroke-dasharray: 1; }
.ab-traco--mao { stroke: currentColor; }
.ab-area { fill: color-mix(in srgb, var(--text) 7%, transparent) !important; stroke: none; }
.ab-no { fill: currentColor !important; }
.ab-no.is-destaque { fill: var(--palco-acento) !important; }
.ab-anel { stroke: currentColor; opacity: .55; }
.ab-liga { stroke: currentColor; opacity: .38; stroke-dasharray: 1; }
.ab-liga--tracejada { stroke-dasharray: 1 1.4; opacity: .5; }
.ab-base { stroke: currentColor; stroke-width: .3; stroke-dasharray: 1 1.6; opacity: .45; }
.ab-barra { fill: color-mix(in srgb, var(--text) 82%, transparent) !important; }
.ab-barra.is-destaque { fill: var(--palco-acento) !important; }
.ab-celula { stroke: currentColor; opacity: .35; }
.ab-celula.is-acesa { fill: color-mix(in srgb, var(--text) 80%, transparent) !important; stroke: none; }
.ab-celula.is-destaque { fill: var(--palco-acento) !important; stroke: none; }
.ab-alvo { stroke: currentColor; fill: color-mix(in srgb, var(--palco-acento) 18%, transparent) !important; }
.ab-ponto { fill: var(--palco-acento) !important; }
.ab-mira-anel { stroke: var(--palco-acento); stroke-width: .5; }
.ab-cruz { stroke: currentColor; stroke-width: .25; stroke-dasharray: .8 1.4; }
.ab-arco { stroke: currentColor; stroke-width: .3; stroke-dasharray: 1; opacity: .6; }
.ab-tique { stroke: currentColor; stroke-width: .25; }
.ab-pixel { fill: currentColor !important; }
.ab-mancha { fill: var(--palco-acento) !important; }
.ab--mao .ab-ponto { fill: var(--bg) !important; stroke: currentColor; stroke-width: 1.6; }
.palco__ilustra { position: absolute; inset: 0; display: grid; place-items: center; transform-origin: center; transition: none; color: var(--text); }
.palco__ilustra .traco { width: 42%; height: auto; max-height: 82%; }
.dsc--transforma.dsc--vencedor .ab-mancha, .dsc--transforma.dsc--vencedor .ab-ponto { fill: var(--palco-acento) !important; }

/* ---------- as artes editoriais (18/10, em teste) ----------
   js/movimento/artes.js: o traco grosso a mao (cor do texto), a forma
   cheia (destaque) e o cinza de apoio; o pixel e a linha fina. Cada uma
   entra (o traco se desenha, a forma cresce) e faz o seu gesto. */
.art { display: block; width: 100%; height: 100%; color: var(--text); overflow: visible;
  --art-cor: var(--palco-acento, var(--dsc-verde, #0AB951)); --art-cinza: color-mix(in srgb, var(--text) 42%, var(--bg)); }
.art * { transform-box: fill-box; }
.art-t { fill: none; stroke: currentColor; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.art-t--fino { stroke-width: 1.8; }
.art-t--claro { stroke: var(--bg); }
.art-t--tracejado { stroke-dasharray: 3 5; }
.art-c { fill: var(--art-cor); }
.art-g { fill: var(--art-cinza); }
.art-g--claro { fill: color-mix(in srgb, var(--text) 10%, var(--bg)); }
.art-px { fill: currentColor; }
.art-px--c { fill: var(--art-cor); }
.art-px--ceu { fill: currentColor; opacity: .45; }

@media (prefers-reduced-motion: no-preference) {
  /* a entrada: o traco se desenha, a forma cheia e o cinza crescem do proprio centro */
  .art .art-t:not(.art-t--tracejado) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: art-desenha .9s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: calc(.1s + var(--i, 0) * .09s); }
  .art .art-c, .art .art-g { transform-origin: center; animation: art-cresce .7s cubic-bezier(.34, 1.5, .64, 1) both; animation-delay: calc(.25s + var(--i, 0) * .07s); }
  .art .art-px { animation: art-cresce .4s ease-out both; animation-delay: calc(var(--i, 0) * .03s); transform-origin: center; }
  /* os gestos (depois da entrada, em loop curto) */
  .art .art-gesto-paira { animation: art-paira 3s ease-in-out infinite 1.2s; }
  .art .art-gesto-gira .art-t--degrau { transform-origin: center; animation: art-gira 2.6s ease-in-out infinite 1s; }
  .art .art-gesto-digita circle { animation: art-digita 1.2s ease-in-out infinite; }
  .art .art-gesto-digita circle:nth-child(2) { animation-delay: .15s; } .art .art-gesto-digita circle:nth-child(3) { animation-delay: .3s; }
  .art .art-gesto-folheia { transform-origin: 0% 50%; animation: art-folheia 3.4s ease-in-out infinite 1.4s; }
  .art .art-gesto-cai { animation: art-cai 1s cubic-bezier(.34, 1.6, .64, 1) both .2s, art-paira 3s ease-in-out infinite 1.4s; }
  .art .art-gesto-troca { animation: art-troca 4s cubic-bezier(.65, 0, .35, 1) infinite 1.2s; transform-origin: center; }
  .art .art-gesto-bandeira { transform-origin: 0% 100%; animation: art-bandeira 2.6s ease-in-out infinite 1.2s; }
  .art .art-gesto-envelope { animation: art-envelope 2.6s ease-in-out infinite .6s; }
  .art .art-gesto-escreve { animation: art-escreve 2.4s ease-in-out infinite 1s; }
  .art .art-gesto-ponteiro { transform-origin: 50% 100%; animation: art-ponteiro 2.8s cubic-bezier(.34, 1.4, .64, 1) infinite .6s; }
  .art .art-gesto-flutua { animation: art-flutua 4s ease-in-out infinite; }
  .art .art-ceu rect { animation: art-pisca 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.3s); }
  .art .art-gesto-relogio .art-t, .art .art-gesto-relogio { transform-origin: 50% 100%; }
  .art .art-gesto-relogio { animation: art-gira-ponteiro 4s steps(12) infinite 1s; }
  .art .art-t--laco { animation: art-desenha 2.2s ease-in-out infinite alternate !important; }
  .art .art-gesto-passo { transform-origin: 20% 90%; animation: art-passo 1.1s ease-in-out infinite 1s; }
  .art .art-t--vento { animation: art-vento 1.1s ease-in-out infinite !important; stroke-dasharray: none; }
  .art .art-c--enche { transform-origin: 50% 100%; animation: art-enche 1.6s cubic-bezier(.22, 1, .36, 1) both .5s; }
  .art .art-brilho { animation: art-pisca 1.8s ease-in-out infinite 1.4s; }
  .art .art-gesto-balanca { transform-origin: 50% 0%; animation: art-balanca 2.6s ease-in-out infinite .8s; }
  .art .art-sobe { transform-origin: 50% 100%; animation: art-sobe .8s cubic-bezier(.34, 1.4, .64, 1) both; animation-delay: calc(.2s + var(--i, 0) * .14s); }
  .art .art-gesto-pula { animation: art-pula 2.4s cubic-bezier(.34, 1.4, .64, 1) infinite 1s; }
  .art .art-gesto-moeda { animation: art-moeda 2.4s cubic-bezier(.5, 0, .75, 0) infinite .6s; }
  .art .art-gesto-bate { transform-origin: center; animation: art-bate 1.2s ease-in-out infinite 1s; }
  .art .art-t--pulso { animation: art-desenha 1.6s linear infinite !important; }
  .art .art-t--circula { animation: art-desenha 1.2s cubic-bezier(.22, 1, .36, 1) forwards 1s !important; }
  .art .art-fita--a { transform-origin: 100% 50%; animation: art-fita-a 3.2s ease-in infinite 1s; }
  .art .art-fita--b { transform-origin: 0% 50%; animation: art-fita-b 3.2s ease-in infinite 1s; }
  .art .art-gesto-corre { animation: art-corre 3.2s cubic-bezier(.45, 0, .55, 1) infinite 1s; }
  .art .art-gesto-procura { animation: art-procura 4s ease-in-out infinite 1s; }
  .art .art-c--metade { transform-origin: center; animation: art-gira 6s linear infinite; }
}
@keyframes art-desenha { to { stroke-dashoffset: 0; } }
@keyframes art-cresce { from { transform: scale(0); opacity: 0; } }
@keyframes art-paira { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes art-gira { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.35); } }
@keyframes art-digita { 0%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes art-folheia { 0%, 60%, 100% { transform: scaleX(1); } 30% { transform: scaleX(-.2); } }
@keyframes art-cai { from { transform: translateY(-40px); opacity: 0; } }
@keyframes art-troca { 0%, 100% { transform: rotate(0); } 40%, 60% { transform: rotate(90deg) scale(.92); } }
@keyframes art-bandeira { 0%, 30%, 100% { transform: rotate(90deg); } 45%, 85% { transform: rotate(0); } }
@keyframes art-envelope { 0% { transform: translateX(-20px); opacity: 0; } 30%, 60% { transform: translateX(30px); opacity: 1; } 75%, 100% { transform: translateX(42px); opacity: 0; } }
@keyframes art-escreve { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-46px, 16px); } }
@keyframes art-ponteiro { 0% { transform: rotate(-80deg); } 55%, 85% { transform: rotate(62deg); } 100% { transform: rotate(-80deg); } }
@keyframes art-flutua { 0%, 100% { transform: translate(0, 0) rotate(-3deg); } 50% { transform: translate(4px, -6px) rotate(3deg); } }
@keyframes art-pisca { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }
@keyframes art-gira-ponteiro { to { transform: rotate(360deg); } }
@keyframes art-passo { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-8deg) translateY(-4px); } }
@keyframes art-vento { 0%, 100% { transform: translateX(6px); opacity: .2; } 50% { transform: translateX(-6px); opacity: 1; } }
@keyframes art-enche { from { transform: scaleY(0); } }
@keyframes art-balanca { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes art-sobe { from { transform: scaleY(0); } }
@keyframes art-pula { 0%, 70%, 100% { transform: translateY(0); } 82% { transform: translateY(-10px); } }
@keyframes art-moeda { 0% { transform: translateY(-20px); opacity: 0; } 20% { opacity: 1; } 55% { transform: translate(-18px, 26px); } 62%, 90% { transform: translate(-18px, 22px); opacity: 1; } 100% { transform: translate(-18px, 22px); opacity: 0; } }
@keyframes art-bate { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.08); } 30% { transform: scale(.98); } 45% { transform: scale(1.05); } }
@keyframes art-fita-a { 0%, 45% { transform: rotate(0); opacity: 1; } 60%, 85% { transform: rotate(-30deg); opacity: 1; } 100% { opacity: 0; } }
@keyframes art-fita-b { 0%, 45% { transform: rotate(0); opacity: 1; } 60%, 85% { transform: rotate(30deg); opacity: 1; } 100% { opacity: 0; } }
@keyframes art-corre { 0% { transform: translateX(-30px); } 55% { transform: translateX(18px); } 80%, 100% { transform: translateX(18px); opacity: 0; } }
@keyframes art-procura { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-30px, -10px); } 60% { transform: translate(-8px, 6px); } }
.palco--arte { display: grid; place-items: center; }
.palco--arte .art { width: 78%; height: 88%; }

/* ---------- os icones de linha (18/10, em teste) ----------
   js/movimento/icones.js: traco unico de 1,5 na grade de 24, uma cor (o
   texto suavizado), no maximo uma forma cheia em cinza. O traco se
   desenha uma vez; nada fica em loop. No modal, pequeno e centralizado. */
.ic { display: block; width: 24px; height: 24px; color: color-mix(in srgb, var(--text) 78%, var(--bg)); overflow: visible; }
.ic-g { fill: color-mix(in srgb, var(--text) 38%, var(--bg)); stroke: none; }
@media (prefers-reduced-motion: no-preference) {
  .palco--icone .ic-t { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ic-desenha .55s cubic-bezier(.25, 1, .5, 1) forwards; animation-delay: calc(.08s + var(--i, 0) * .07s); }
  .palco--icone .ic-g { animation: ic-aparece .25s ease-out both; animation-delay: calc(.35s + var(--i, 0) * .07s); }
}
@keyframes ic-desenha { to { stroke-dashoffset: 0; } }
@keyframes ic-aparece { from { opacity: 0; } }
.palco.palco--icone { aspect-ratio: auto; max-height: none; height: auto; display: grid; place-items: center; margin: 8px 0 14px; padding: 0;
  background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.palco--icone .ic { width: 48px; height: 48px; stroke-width: 1.1; }
.palco--icone .ic * { stroke-width: 1.1; }

/* ---------- o desenho a mao parado (18/10, em teste: ?estilo=estatico) ----------
   js/movimento/desenhos-estaticos.js + traco-mao.js: a linha e forma cheia de
   grossura irregular (como os Lotties do Claude), a mancha cinza por baixo e o
   assunto. Sem animacao. O modal copia os cartoes da documentacao do Claude:
   alinhado a esquerda, borda fina, numero e evidencias em cartoes de duas colunas. */
.mao { display: block; width: 100%; height: 100%; overflow: visible; }
.mao-m { fill: currentColor; }
.mao-s { fill: color-mix(in srgb, var(--text) 24%, var(--bg)); }
.dsc__est-arte { width: 88px; height: 88px; margin: 4px 0 16px; color: var(--text); }
.dsc--estatico .dsc__caixa { width: min(520px, 100%); padding: 14px 24px 20px; text-align: left; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.dsc--estatico .dsc__corpo { display: block; }
.dsc--estatico .dsc__kicker { justify-content: flex-start; }
.dsc--estatico .dsc__titulo { font-size: 21px; max-width: 30ch; }
.dsc--estatico .dsc__frase, .dsc--estatico .dsc__implica { max-width: 52ch; }
.dsc__est-cartoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.dsc__est-cartao { display: grid; gap: 2px; padding: 12px 14px; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.dsc__est-cartao b { font-size: 14px; font-weight: 500; color: var(--text); }
.dsc__est-cartao span { font-size: 13px; line-height: 1.45; color: color-mix(in srgb, var(--text) 62%, var(--bg)); }
@media (max-width: 420px) { .dsc__est-cartoes { grid-template-columns: 1fr; } .dsc__est-arte { width: 72px; height: 72px; } }
/* a mescla (18/10): o icone de linha no canto de cada cartao (como os cartoes da documentacao do Claude) e a nota
   com o icone a esquerda (como o aviso da documentacao). Icone parado, 20px, cor do texto suavizada. */
.dsc__est-ic { display: block; width: 20px; height: 20px; margin-bottom: 10px; font-style: normal; color: color-mix(in srgb, var(--text) 72%, var(--bg)); }
.dsc__est-ic svg { display: block; width: 20px; height: 20px; }
.dsc__est-nota { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; margin-top: 12px; padding: 11px 14px;
  border-radius: 11px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.dsc__est-nota .dsc__est-ic { margin: 1px 0 0; }
.dsc__est-nota p { margin: 0; font-size: 13.5px; line-height: 1.5; color: color-mix(in srgb, var(--text) 66%, var(--bg)); }
.dsc__est-nota + .dsc__est-cartoes { margin-top: 12px; }
/* o verde volta no botao (pedido do dono ao aprovar): a cor cheia e de quem FAZ alguma coisa; o resto segue neutro */
/* a porta da aba no estatico: o desenho a mao num quadrado, sem a faixa da orbita */
.dsc--vencedor.dsc--estatico .btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* Descobertas no celular: a caixa cabe na area visivel, inclusive com a
   barra do navegador e os recortes do iPhone. O excesso rola dentro dela;
   alinhar uma caixa maior que a tela ao rodape escondia o desenho e o X. */
.dsc.tut {
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.dsc .dsc__caixa {
  max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 520px) {
  .dsc.tut { place-items: center; }
  .dsc .dsc__caixa {
    width: min(420px, 100%);
    max-height: calc(90dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    padding: 12px 16px 16px;
  }
  .dsc__est-arte { width: 64px; height: 64px; margin: 2px 0 10px; }
  .dsc--estatico .dsc__titulo { font-size: 20px; }
  .dsc--estatico .dsc__frase { font-size: 14px; line-height: 1.45; margin-top: 8px; }
  .dsc__est-nota { gap: 8px; padding: 9px 10px; margin-top: 10px; }
  .dsc__est-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dsc__est-cartao { min-width: 0; padding: 10px; overflow-wrap: anywhere; }
  .dsc__est-ic { margin-bottom: 6px; }
  .dsc__pe { margin-top: 14px; gap: 6px; }
}
@media (max-width: 340px) {
  .dsc__est-cartoes { grid-template-columns: 1fr; }
}

/* ============================================================
   As barras de fala, do tamanho de um chat (20/10/2026, pedido do dono)
   ------------------------------------------------------------
   "Deixe todas as barras de fala pequenas, que nem um chat mesmo" e, no
   claro, "mais cinza e nao tao fora do comum". A caixa nascia com 102 px
   porque a regra geral do painel (:where(.painel-body) textarea.field__input,
   88 px) vinha depois da do chat e ganhava; e o fundo misturava o --surface
   do claro (#F2F2F7, o cinza azulado do iOS), que destoava do resto.
   Agora: UMA linha (44 px), cresce ate cinco enquanto se digita, e o cinza
   neutro da cor do texto sobre o fundo, o mesmo nos tres chats e na busca.
   ============================================================ */
.painel-body {
  --chat-fundo: color-mix(in srgb, var(--text) 4.5%, var(--bg));
  --pergunta-fundo: var(--chat-fundo);
}
.painel-body .treinador-conversa__form,
.painel-body .coach-busca {
  align-items: flex-end; gap: 6px; min-height: 0; padding: 3px 3px 3px 14px; border-radius: 22px;
  background: var(--chat-fundo); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}
.painel-body .coach-busca { align-items: center; }
.painel-body .treinador-conversa__form:focus-within,
.painel-body .coach-busca:focus-within { border-color: color-mix(in srgb, var(--text) 32%, transparent); }
.painel-body .treinador-conversa__form textarea.field__input {
  min-height: 0; height: auto; max-height: 132px; padding: 9px 0; font-size: 15px; line-height: 1.4;
  background: none; border: 0; field-sizing: content; overflow-y: auto;
}
.painel-body .coach-busca .field__input { padding: 8px 2px; font-size: 15px; }
.painel-body .treinador-conversa__form .btn--enviar,
.painel-body .coach-busca .btn--enviar { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
/* no escuro o cinza do Admin (tryzen-cinza-do-escuro): um passo acima do cartao */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .painel-body { --chat-fundo: #252525; --pergunta-fundo: var(--surface); }
}
:root[data-tema="escuro"] .painel-body { --chat-fundo: #252525; --pergunta-fundo: var(--surface); }

/* ============================================================
   a Nutricao (20/10/2026): a aba do treinador/gestor e a area do
   nutricionista (treinador/nutricao.js e nutricionista.js). Mesmas
   pecas do painel: quadro, coach-linha, chip, field.
   ============================================================ */
.nut-area { max-width: 1040px; margin: 0 auto; padding: 20px 16px 64px; display: grid; gap: var(--gap-md, 16px); }
.nut-area__topo { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
.nut-area__main { display: grid; gap: var(--gap-md, 16px); min-width: 0; }
.nut-area__main > .quadro + .quadro { margin-top: 0; }
.nut-aviso--forte { border-left: 3px solid var(--warn, var(--accent)); padding-left: 10px; }
.nut-tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 14px); }
.nut-tabela th, .nut-tabela td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.nut-tabela th { color: var(--text-3, var(--text-2)); font-weight: 500; }
.quadro:has(> .nut-tabela) { overflow-x: auto; }
.nut-ref + .nut-ref { margin-top: 12px; }
.nut-itens { list-style: none; margin: 4px 0 0; padding: 0; }
.nut-itens li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--border-soft); }
.nut-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.nut-dl dt { color: var(--text-3, var(--text-2)); } .nut-dl dd { margin: 0; }
.nut-form { display: grid; gap: 10px; }
.nut-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nut-refeicao-ed { border: 1px solid var(--border-soft); border-radius: var(--r-card); padding: 12px 14px; margin-inline: 0; min-width: 0; }
.nut-item-ed { display: grid; grid-template-columns: minmax(140px, 1fr) 84px minmax(96px, 150px) 84px auto auto; gap: 6px; align-items: center; padding: 4px 0; }
.nut-item-ed__nome { min-width: 0; overflow-wrap: anywhere; }
.nut-num { text-align: right; }
.nut-sugestoes { border-top: 1px dashed var(--border-soft); padding-top: 8px; }
.nut-versao { display: inline-block; margin: 0 6px 6px 0; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-soft); font-size: var(--fs-xs, 12px); }
.nut-versao--publicada { border-color: var(--accent); }
.nut-acoes { flex-wrap: wrap; }
.nut-publicar { border-color: var(--accent); }
@media (max-width: 720px) {
  .nut-2col { grid-template-columns: 1fr; }
  .nut-item-ed { grid-template-columns: 1fr 1fr; }
  .nut-item-ed__nome { grid-column: 1 / -1; }
}
.nut-coach__identidade { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; }
.nut-coach__identidade p { margin: 0 0 4px; }
.nut-coach__marca { width: 88px; height: 88px; flex: none; }
.nut-icone, .coach-linha--fixa > .nut-icone { display: inline-flex; width: 24px; height: 24px; flex: 0 0 24px; color: var(--text-2); }
.nut-icone svg { width: 100%; height: 100%; }
.coach-linha--fixa > .nut-icone--pessoa { width: 32px; height: 32px; flex-basis: 32px; align-items: center; justify-content: center; border-radius: 50%; background: var(--preenche); color: var(--text); }
.nut-icone--pessoa svg { width: 18px; height: 18px; }
.nut-item-ed--livre { grid-template-columns: minmax(140px, 1fr) minmax(120px, 200px) 84px auto; }
@media (max-width: 720px) { .nut-item-ed--livre { grid-template-columns: 1fr 1fr; } }

/* Ícones pequenos de tema no Ver por quê, no mesmo traço do painel. */
.dsc__tema-icone { display:inline-flex; width:18px; height:18px; flex:none; vertical-align:-3px; margin-right:8px; color:var(--text-2); }
.dsc__tema-icone svg { width:100%; height:100%; stroke-width:1.5; }
.dsc__tema-icone svg * { animation:none; }
.dsc__tema { display:flex; align-items:center; }
.dsc__tres--icones li::before { display:none; }
.dsc__tres--icones li > .dsc__tema-icone { position:absolute; left:0; top:1px; }

.dsc__origem:has(> .dsc__tema-icone) { display:flex; align-items:flex-start; }
.dsc__origem > .dsc__tema-icone { margin-top:2px; }

/* Só a linha de abertura é clicável; o conteúdo do cartão é leitura. */
.atl.treinador-atleta { cursor: default; }
.nut-aviso { display: flex; align-items: center; gap: 12px; padding: 4px 8px 4px 14px; margin: 8px 0 0; }
.nut-aviso > p { flex: 1; min-width: 0; margin: 0; }
.nut-aviso > button { flex: none; }

/* ---------- a carteira e a Evolucao do nutricionista (0158, 21/10/2026) ---------- */
.nut-pendencias { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.nut-pendencia { font-style: normal; font-size: var(--fs-xs, 12px); color: var(--text-3); }
.nut-pendencia::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--urg-2, #E5B33C); margin-right: 5px; vertical-align: 1px; }
.nut-pendencia--forte::before { background: var(--urg-1, #E5484D); }
.nut-tipo { font-size: var(--fs-xs, 12px); color: var(--text-3); font-weight: 500; }
.nut-tipo--medido { color: var(--accent-texto, var(--accent)); }
.nut-form-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 4px; }
.nut-form-linha .field__input { width: auto; min-width: 120px; flex: 1 1 120px; }
.nut-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm, 14px); color: var(--text-2); }
.nut-analise { padding: 14px 0; border-top: 1px solid var(--contorno-dentro, var(--border)); }
.nut-analise:first-child { border-top: 0; padding-top: 0; }
.nut-analise h3 { font-size: 1rem; margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.nut-analise--atencao h3::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--urg-2, #E5B33C); flex: none; }
.nut-analise--positivo h3::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.nut-analise p { margin: 6px 0; }
.nut-dl--mini { font-size: var(--fs-xs, 12px); }
.nut-falta { margin: 6px 0 0; padding-left: 18px; color: var(--text-2); font-size: var(--fs-sm, 14px); }

/* ---------- Nutricao: os numeros do atleta (21/10, regra do dono) ---------- */
.nut-num { display: grid; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.nut-num .dsc__estados { margin: 0; }
.nut-num .dsc__estado { padding: 12px 8px; }
.nut-num .dsc__estado b { font-size: 21px; }
.nut-num .dsc__seta svg { width: 18px; height: 18px; }
.nut-num__macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nut-num__macro { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; padding: 10px; border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); border: 1px solid var(--border-soft); min-width: 0; }
.nut-num__macro > span:last-child { display: grid; gap: 1px; min-width: 0; }
.nut-num__macro small { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nut-num__macro b { font-size: 15px; font-variant-numeric: tabular-nums; }
.nut-num__macro em { font-style: normal; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .nut-num__macros { grid-template-columns: 1fr; } }
.nut-num, .nut-num__macro { text-align: left; }
.nut-num__macro .nut-icone svg { width: 20px; height: 20px; }

/* o desenho do tipo de treino na proposta e no publicado (21/10) */
.coach-prop__topo { justify-content: flex-start; }
.coach-prop__nome { flex: 1; min-width: 0; }
.coach-prop__ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--surface); color: var(--text-2); }
.coach-prop[data-tipo="rodagem"] .coach-prop__ic, .coach-prop[data-tipo="regenerativo"] .coach-prop__ic, .coach-prop[data-tipo="caminhada"] .coach-prop__ic { color: var(--certo); }
.coach-prop[data-tipo="longo"] .coach-prop__ic { color: #4C8DF6; }
.coach-prop[data-tipo="tempo"] .coach-prop__ic, .coach-prop[data-tipo="progressivo"] .coach-prop__ic, .coach-prop[data-tipo="fartlek"] .coach-prop__ic { color: var(--warn); }
.coach-prop[data-tipo="tiros"] .coach-prop__ic, .coach-prop[data-tipo="subida"] .coach-prop__ic { color: #E5483C; }

/* ---------- a area do nutricionista no padrao do Coach (21/10) ---------- */

/* ---------- Nutricao, segunda passada (21/10): cartoes agrupados, desenho fino e numero do lado ---------- */
.nut-grupo-l { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--surface, var(--bg)); }
.nut-grupo-l__titulo { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.nut-grupo-l__linha { display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 4px 0; font: inherit; font-size: 14px; color: var(--text); text-align: left;
  background: none; border: 0; width: 100%; }
.nut-grupo-l__linha > span:first-child { display: grid; place-items: center; width: 20px; color: var(--text-2); flex: none; }
.nut-grupo-l__linha > span:first-child svg { width: 18px; height: 18px; }
.nut-grupo-l__linha .grow { display: grid; min-width: 0; }
.nut-grupo-l__linha small { font-size: 12px; color: var(--text-3); }
.nut-grupo-l__linha b { font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nut-grupo-l__linha--ir { cursor: pointer; border-radius: 10px; }
.nut-grupo-l__linha--ir:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.nut-grupo-l__seta { color: var(--text-3); display: grid; }
.nut-grupo-l__seta svg { width: 16px; height: 16px; }
.nut-grupo-l__nota { margin: 8px 0 0; font-size: 12.5px; color: var(--text-3); line-height: 1.45; }

.nut-sub { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; }
.nut-sub > span { display: grid; color: var(--text-2); }
.nut-sub svg { width: 18px; height: 18px; }

.nut-analise2 { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--border-soft); border-radius: 18px; background: var(--surface, var(--bg)); }
.nut-analise2 + .nut-analise2 { margin-top: 12px; }
.nut-analise2__cab { display: flex; align-items: center; gap: 10px; }
.nut-analise2__cab h3 { margin: 0; font-size: 16px; }
.nut-analise2__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: color-mix(in srgb, var(--dsc-alerta, #B86700) 14%, transparent); color: var(--dsc-alerta, #B86700); flex: none; }
.nut-analise2--positivo .nut-analise2__ic { background: color-mix(in srgb, var(--dsc-verde) 14%, transparent); color: var(--dsc-verde); }
.nut-analise2__ic svg { width: 20px; height: 20px; }
.nut-analise2 .body-t { margin: 0; }
.nut-analise2__pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nut-par__nome { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; color: var(--text-2); }
.nut-par__nome svg { width: 16px; height: 16px; }
.nut-par .dsc__estados { margin: 0; }
.nut-par .dsc__estado { padding: 10px 8px; }
.nut-par .dsc__estado b { font-size: 20px; }
.nut-fala { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45;
  background: color-mix(in srgb, var(--dsc-verde) 8%, transparent); border: 1px solid color-mix(in srgb, var(--dsc-verde) 35%, transparent); }
.nut-fala__marca { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--dsc-verde); color: #fff; }
.nut-fala__marca svg { width: 14px; height: 14px; }

/* 21/10 (dono): o contorno verde e so da fala da Tryzen. O "agora" do antes e agora fica neutro,
   diferente so pelo fundo, pra o verde aparecer uma vez por bloco, quando a IA fala. */
.nut-par .dsc__estado--agora, .nut-num .dsc__estado--agora { border-color: color-mix(in srgb, var(--text) 10%, transparent); box-shadow: none; background: color-mix(in srgb, var(--text) 4%, var(--bg)); }

/* panorama e prescricao em blocos pequenos: o numero colado no nome (21/10, dono) */
/* lista com numero a direita nunca estica: o numero fica perto da palavra */

/* o que os nutricionistas estao fazendo (0160) */

/* panorama e prescricao em planilha (21/10, dono) */
/* 21/10 (dono): panorama e prescricao um embaixo do outro, nunca lado a lado */

/* ============================================================
   a aba Nutricao no molde do Coach (23/10/2026, pedido do dono)
   ------------------------------------------------------------
   "Nao aplicou outline, nao aplicou separacao correta e harmonica, tem
   mais coisas de um lado do que do outro, ha cards maiores e outros
   menores." Daqui pra baixo todo bloco da aba e do nutricionista e o
   mesmo cartao com contorno, os numeros em colunas do mesmo tamanho
   (atl__fatos, o de Atletas) e a fila de pessoas com o desenho de
   perfil. Nada estica pra um lado so: ou ocupa a linha, ou divide igual.
   ============================================================ */
.nut-cartoes { display: grid; gap: 12px; }
.nut-cartao { display: grid; min-width: 0; padding: 16px 18px; border: 1px solid var(--contorno, var(--border-soft)); border-radius: var(--r-card); background: none; }
.nut-cartao__cab { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nut-cartao__cab > div { min-width: 0; }
.nut-cartao__cab h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text); }
.nut-cartao__cab p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--text-3); }
.nut-cartao__ic, .nut-vazio__ic { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--preenche-suave, var(--surface)); color: var(--text-2); }
.nut-cartao__ic svg, .nut-vazio__ic svg { width: 18px; height: 18px; }
.nut-cartao .atl__fatos { margin-top: 14px; row-gap: 16px; }
.atl__fatos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .atl__fatos--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nut-cartao__sub { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--contorno-dentro, var(--border-soft)); font-size: 13px; font-weight: 600; color: var(--text); }
.nut-cartao__pe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--contorno-dentro, var(--border-soft)); }
.nut-cartao__nota { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }

/* a fila: desenho, nome e o que e, o numero, as acoes; todas as colunas alinhadas */
.nut-filas { display: grid; margin-top: 12px; border-top: 1px solid var(--contorno-dentro, var(--border-soft)); }
.nut-cartao__sub + .nut-filas { margin-top: 4px; border-top: 0; }
.nut-fila { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--contorno-dentro, var(--border-soft)); }
.nut-fila:last-child { border-bottom: 0; padding-bottom: 0; }
.nut-filas--curta .nut-fila { min-height: 48px; padding: 8px 0; }
.nut-fila .atl__perfil svg { width: 18px; height: 18px; }
.nut-fila__txt { display: grid; gap: 2px; min-width: 0; }
.nut-fila__txt b { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nut-fila__txt span { font-size: 12px; line-height: 1.35; color: var(--text-3); overflow-wrap: anywhere; }
.nut-fila__valor { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.nut-fila__acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.nut-fila__acoes .coach-linha-form { display: flex; gap: 6px; margin: 0; }
.nut-fila__acoes .field__input { width: auto; min-width: 150px; min-height: 36px; height: 36px; padding-block: 0; font-size: 14px; }
@media (max-width: 640px) {
  .nut-fila { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .nut-fila__acoes { grid-column: 2 / -1; justify-content: flex-start; }
  .nut-fila__acoes:empty { display: none; }
}

/* o vazio: o desenho, o que falta e o que fazer, nunca a frase solta */
.nut-vazio { display: flex; align-items: flex-start; gap: 12px; }
.nut-cartao .nut-vazio { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--contorno-dentro, var(--border-soft)); }
.nut-vazio b { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text); }
.nut-vazio p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.nut-link { margin-top: 12px; }
.nut-link + p { margin: 6px 0 0; }

/* a carteira do nutricionista: os quatro contadores do mesmo tamanho, e eles sao o filtro */
.nut-crn { align-items: center; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--contorno-dentro, var(--border-soft)); }
.nut-carteira { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.nut-carteira__item { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 64px; padding: 12px 14px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  border: 1px solid var(--contorno-forte, var(--border-soft)); border-radius: var(--r-card); background: none; }
.nut-carteira__item:hover { background: var(--preenche-suave, var(--surface)); }
.nut-carteira__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nut-carteira__item[aria-pressed="true"] { border-color: var(--accent); }
.nut-carteira__ic { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--preenche-suave, var(--surface)); color: var(--text-2); }
.nut-carteira__item[aria-pressed="true"] .nut-carteira__ic { background: var(--accent); color: var(--on-accent, #fff); }
.nut-carteira__ic svg { width: 18px; height: 18px; }
.nut-carteira__txt { display: grid; gap: 1px; min-width: 0; }
.nut-carteira__txt b { font-size: 18px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.nut-carteira__txt span { font-size: 12px; line-height: 1.3; color: var(--text-3); }
@media (max-width: 900px) { .nut-carteira { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nut-busca { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 10px; margin-bottom: 12px; }
.nut-ordem .field__input { width: 100%; }
@media (max-width: 520px) { .nut-busca { grid-template-columns: 1fr; } }
.dobra__corpo .group-label { margin: 16px 0 8px; }
.dobra__corpo > .brf--faixa:first-child, .nut-crn + .brf--faixa { margin-top: 0; }

/* a ficha do atleta: o topo da ficha de Atletas, e as listas na largura da secao */
.nut-voltar { display: inline-flex; align-items: center; gap: 6px; }
.nut-voltar svg { width: 16px; height: 16px; }
.dobra__corpo .nut-grupo-l { border-color: var(--contorno-dentro, var(--border-soft)); background: none; }
.dobra__corpo .nut-analise2 { border-color: var(--contorno, var(--border-soft)); background: none; }
.dobra__corpo .nut-refeicao-ed { border-color: var(--contorno, var(--border-soft)); }
@media (max-width: 720px) { .nut-coach__marca { width: 72px; height: 72px; } }
.dobra__corpo .nut-sub { margin-top: 20px; margin-bottom: 8px; }
.nut-filas--curta .nut-fila__txt b { white-space: normal; overflow-wrap: anywhere; }

/* a Evolucao em planilhas (23/10/2026, dono): um grupo por planilha, um embaixo do outro */
.nut-qs { display: grid; gap: 12px; }
.nut-q .tab-q__l { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.7fr); min-height: 46px; }
.nut-q--5 .tab-q__l { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 0.9fr); }
.nut-q .nut-tipo { font-size: 12.5px; }
.nut-q__nota { margin: 0; padding: 10px 12px; border-top: 1px solid var(--contorno-dentro, var(--border-soft)); font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.nut-cartao__form { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--contorno-dentro, var(--border-soft)); }
.nut-cartao__form .field__input { min-height: 40px; height: 40px; padding-block: 0; font-size: 14px; }
@media (max-width: 560px) {
  .nut-q .tab-q__l { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; }
  .nut-q--5 .tab-q__l { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nut-q--5 .tab-q__l > :nth-child(n+3) { text-align: left; }
}
.nut-cartao__form .nut-check { flex: none; white-space: nowrap; }

/* o Resumo do nutricionista (23/10/2026, dono): grafico num cartao e os ultimos dias numa planilha com desenhos */
.nut-dias { margin-top: 12px; }
.nut-q--dias { margin-top: 12px; }
.nut-q--dias .tab-q__l { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); }
.nut-q__cab { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tab-q__v .nut-q__cab { justify-content: flex-end; width: 100%; }
.nut-q__cab i { display: grid; flex: none; color: var(--text-2); }
.nut-q__cab i svg { width: 16px; height: 16px; }
.nut-q__rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .nut-q--dias .tab-q__l { grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr)); gap: 6px; padding-inline: 10px; font-size: 13px; }
  .nut-q--dias .tab-q__v .nut-q__rot { display: none; }
}

/* a barra de pedidos da Nutricao (23/10/2026): a do Inicio, e a resposta em fila de pessoas */
.nut-pedidos { margin-bottom: 16px; }
.nut-resposta { margin-bottom: 20px; }
.nut-fila--ir { width: 100%; text-align: left; font: inherit; color: var(--text); background: none; border: 0; border-bottom: 1px solid var(--contorno-dentro, var(--border-soft)); cursor: pointer; border-radius: 0; }
.nut-fila--ir:hover { background: var(--preenche-suave, var(--surface)); }
.nut-fila--ir:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nut-fila--ir .nut-fila__acoes { color: var(--text-3); }
.nut-fila--ir .nut-fila__acoes svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .nut-fila--ir { grid-template-columns: 32px minmax(0, 1fr) auto; } .nut-fila--ir .nut-fila__valor { display: none; } .nut-fila--ir .nut-fila__acoes { grid-column: auto; } }

/* cada numero com o desenho do que ele conta (23/10/2026, dono): o desenho numa coluna propria, centralizado na
   altura do bloco; nome, numero e nota comecam todos na mesma linha vertical, logo depois dele */
.nut-fato { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: 'ic rot' 'ic val' 'ic nota'; column-gap: 12px; row-gap: 2px; align-items: center; }
.nut-fato__ic { grid-area: ic; align-self: center; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--preenche-suave, var(--surface)); color: var(--text-2); }
.nut-fato__ic svg { width: 17px; height: 17px; }
.nut-fato .atl__rotulo { grid-area: rot; }
.nut-fato > b { grid-area: val; }
.nut-fato .atl__nota { grid-area: nota; }
.nut-fato .atl__nota:empty { display: none; }
/* no computador: o nome, o numero e a nota de cada coluna ficam na mesma altura das vizinhas, mesmo com nome em duas
   linhas (subgrade: as tres linhas do bloco sao as linhas da grade de fora) */
@media (min-width: 641px) {
  .atl__fatos:has(.nut-fato) { grid-auto-rows: auto; align-items: stretch; }
  .nut-fato { grid-row: span 3; grid-template-rows: subgrid; row-gap: 2px; align-items: start; }
  .nut-fato .atl__rotulo { align-self: end; }
  .nut-fato .atl__nota:empty { display: block; }
}
/* no celular: um numero por linha; o desenho e o bloco a esquerda, o numero a direita */
@media (max-width: 640px) {
  .nut-cartao .atl__fatos:has(.nut-fato) { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .nut-cartao .nut-fato { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: 'ic rot val' 'ic nota val'; padding: 10px 0; border-bottom: 1px solid var(--contorno-dentro, var(--border-soft)); }
  .nut-cartao .nut-fato:last-child { border-bottom: 0; padding-bottom: 0; }
  .nut-cartao .nut-fato > b { font-size: 17px; text-align: right; }
  /* no cartao do atleta o valor e texto: fica no bloco, embaixo do nome */
  .atl__mais .atl__fatos:has(.nut-fato) { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .atl__mais .nut-fato > b { overflow-wrap: anywhere; }
}

/* a fila de modais da Nutricao (23/10/2026): as pecas do Resolver, e o que so ela tem */
.nut-rs__tipo { margin-top: 4px; }
.nut-rs__impl { margin: 8px 0 0; }
/* 24/10/2026, o dono: cada texto numa linha, com o desenho no quadrado de contorno e a divisoria entre elas */
.nut-rs__linhas { list-style: none; margin: 14px 0 0; padding: 0; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius: 12px; }
.nut-rs__linhas li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; }
.nut-rs__linhas li + li { border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.nut-rs__ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-style: normal; color: var(--text-2);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.nut-rs__ic svg { width: 16px; height: 16px; }
.nut-rs__linhas p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.nut-rs__linhas .is-forte p { color: var(--text); font-size: 15px; }
.nut-rs__linhas .is-dica p { font-size: 13px; color: var(--text-3); }
.nut-rs__campo { margin-top: 14px; }
.nut-rs__campo textarea { min-height: 64px; }
.nut-rs .rs__fatos, .nut-rs .rs__sessoes { margin-top: 14px; }
.nut-rs__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px; margin-top: 14px; }
.nut-fila-faixa { margin-bottom: 14px; }
.nut-fila-faixa .brf-frase { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.atl__fatos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
.atl__fatos--2 .nut-fato > b { overflow-wrap: normal; }
@media (max-width: 560px) { .nut-rs .rs__pe { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; } .nut-rs .rs__pe > span:empty { display: none; } .nut-rs .rs__pe > span:empty + .btn { grid-column: 1 / -1; } }

/* o WhatsApp no Resolver, na fila da Nutricao e na conversa (23/10/2026) */
.rs__whats { margin-top: 12px; }
.rs__whats-lista { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 8px; }
.rs__whats-item { display: inline-grid; justify-items: center; gap: 4px; }
.rs__whats-item small { font-size: 12px; color: var(--text-3); }
.bi--whats > svg { color: #25D366; }
a.bi { text-decoration: none; cursor: pointer; }
.treinador-conversa__form .bi--whats { align-self: center; }

/* ============================================================
   Os galhos (24/10/2026): uma secao por tela
   A arvore da lateral e a do /admin (js/paineis/galhos.js); aqui so o
   que e do Coach: o desenho de estado no galho, a fala da Tryzen no topo
   e a secao do galho, que fica aberta e nao dobra.
   ============================================================ */
.galho-estado { flex: none; display: inline-grid; margin-left: auto; padding-left: 6px; }
.galho-estado svg { width: 15px; height: 15px; }
.galho-estado--problema { color: var(--urg-2); }
.galho-estado--ok { color: var(--text-3); opacity: .7; }
.galhos__cabeca .galho-estado svg { width: 16px; height: 16px; }
.aba-galho { display: grid; gap: 0; max-width: 980px; }
.aba-galho .galho-fala { margin: 4px 0 18px; }
/* o X do balao do galho: pequeno, no canto, no cinza do cartao (01/11/2026) */
.galho-fala p { flex: 1; min-width: 0; }
.galho-fala__x { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin: -2px -4px -2px 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-3, var(--text-2)); cursor: pointer; transition: background .15s, color .15s; }
.galho-fala__x:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.galho-fala__x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.galho-fala__x:active { transform: scale(.92); }
.aba-galho details.sec--galho > summary { pointer-events: none; cursor: default; }
.aba-galho details.sec--galho > summary .dobra__seta,
.aba-galho details.sec--galho > summary .dobra__resumo,
.aba-galho details.sec--galho > summary .dobra__comece { display: none; }
.galho-pe { display: flex; justify-content: flex-end; margin-top: 20px; }
.galho-pe .btn svg { margin-left: 4px; }
.aba-corpo--galho { max-width: 980px; }
@media (max-width: 899px) {
  .painel__galhos-cel { margin: 0 0 14px; }
  .galho-pe { justify-content: stretch; }
  .galho-pe .btn { width: 100%; justify-content: center; }
}
@media (min-width: 900px) { .painel-body .painel__lado:has(.galhos) { --lado-w: 276px; } .painel-body .painel__lado:has(.galhos)[data-lado="trilho"] { --lado-w: 68px; } }

/* ============================================================
   24/10/2026, o dono: "esse modal foge do padrao dos outros que sao
   retangulares; todos devem ter o mesmo tamanho, proporcao e forma".
   Todo modal do painel copia a caixa das Descobertas (.dsc--estatico):
   520px, canto de 12px, borda fina, texto a esquerda e o desenho
   pequeno no canto de cima. No celular fica no meio da tela, como elas.
   ============================================================ */
.painel-body .tut__caixa,
.painel-body .tut--publicado .tut__caixa,
.painel-body .tut--resolver .tut__caixa,
.painel-body .tut--persona .tut__caixa { width: min(520px, 100%); padding: 14px 24px 20px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.painel-body .tut--publicado .tut__caixa, .painel-body .tut--resolver .tut__caixa { padding-bottom: 0; }
.painel-body .rs__desenho { justify-items: start; width: 88px; height: 88px; margin: 4px 0 16px; }
.painel-body .rs__desenho .traco, .painel-body .rs__desenho .mao { width: 88px; height: 88px; margin: 0; }
.painel-body .rs__pe { margin-inline: -24px; padding-inline: 24px; }
.painel-body .tut--resolver .tut__titulo { font-size: 21px; }
@media (max-width: 520px) {
  .painel-body .tut { place-items: center; padding: 16px; }
  .painel-body .tut__caixa,
  .painel-body .tut--publicado .tut__caixa,
  .painel-body .tut--resolver .tut__caixa,
  .painel-body .tut--persona .tut__caixa { width: min(420px, 100%); padding: 12px 16px 16px; border-radius: 12px; }
  .painel-body .tut--publicado .tut__caixa, .painel-body .tut--resolver .tut__caixa { padding-bottom: 0; }
  .painel-body .rs__desenho, .painel-body .rs__desenho .traco, .painel-body .rs__desenho .mao { width: 64px; height: 64px; }
  .painel-body .rs__desenho { margin: 2px 0 10px; }
  .painel-body .rs__pe { margin-inline: -16px; padding-inline: 16px; }
  .painel-body .rs__pe .btn { white-space: nowrap; padding-inline: 16px; }
  .painel-body .tut--resolver .tut__titulo { font-size: 20px; }
}

/* 24/10/2026, o dono: "deixe isso do lado do nome de cada usuario". O WhatsApp
   de cada atleta mora dentro do cartao dele na lista "Pra quem", a direita;
   a fileira separada "Ou pelo WhatsApp" saiu do Resolver e da fila da Nutricao. */
.rs__pessoa { position: relative; }
.rs__pessoa .bi--whats { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); }
.rs__pessoa:has(.bi--whats) .rotina-marca { padding-right: 62px; }

/* ============================================================
   24/10/2026, o dono: "os planos ficarem melhor, design estilo outline e
   preenchimento vazio". O cartao do treino (Esperando voce, Publicados)
   vira so contorno: fundo transparente, borda fina, canto de 12px como os
   modais. O desenho do tipo num quadrado de contorno com a cor dele; o aviso
   e o bloqueio perdem o fundo e ficam no contorno com a letra na cor.
   ============================================================ */
.painel-body .coach-prop, .painel-body .coach-prop:first-child { padding: 14px 16px; border-radius: 12px; background: transparent;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.painel-body .coach-prop[data-tipo] { border-left-color: color-mix(in srgb, var(--text) 12%, transparent); }
.painel-body .coach-prop--bloq, .painel-body .coach-prop--bloq[data-tipo] { border-color: color-mix(in srgb, #E5483C 55%, transparent); }
.painel-body .coach-prop__ic { width: 32px; height: 32px; border-radius: 9px; background: transparent;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.painel-body .coach-prop__ic svg { width: 18px; height: 18px; }
:root:root .painel-body .coach-prop .coach-aviso,
:root:root .painel-body .coach-prop .coach-bloq { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: transparent; font-size: 14px; line-height: 1.45; }
:root:root .painel-body .coach-prop .coach-aviso { color: var(--urg-2); border: 1px solid color-mix(in srgb, var(--urg-2) 45%, transparent); }
:root:root .painel-body .coach-prop .coach-bloq { color: #E5483C; border: 1px solid color-mix(in srgb, #E5483C 50%, transparent); }
.painel-body .coach-prop .btn--outline, .painel-body .coach-prop .bi { background: transparent;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.painel-body .coach-prop .btn--outline:hover, .painel-body .coach-prop .bi:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
/* 24/10/2026, o dono: "remova o Publicado, apenas deixe o certinho". A palavra fica so pro leitor de tela e na dica */
.painel-body .etiqueta--so-visto { gap: 0; padding-inline: 2px; }

/* ---------- o WhatsApp com o aceite do atleta (0169, 24/10/2026) ----------
   A pergunta de quem ainda nao liberou: pequena, por cima do Resolver se ele
   estiver aberto, no molde dos modais do Coach (contorno, desenho, dois botoes). */
.tut.zap-veu { z-index: 130; }
.zap-caixa { position: relative; max-width: 440px; text-align: left; }
.zap-x { position: absolute; top: 14px; right: 14px; }
.zap-caixa__ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--border, rgba(127,127,127,.3)); color: #25D366; margin-bottom: 12px; }
.zap-caixa__ic svg { width: 22px; height: 22px; }
.zap-caixa .rs__pe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.tut .zap-caixa .rs__pe .btn { width: 100%; min-width: 0; margin: 0; padding-inline: 12px; white-space: nowrap; }
/* com o numero liberado, o desenho ganha um ponto verde: abre direto na conversa */
.bi--whats-direto { position: relative; }
.bi--whats-direto::after { content: ''; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #25D366; }
/* no celular os dois botoes empilham, o principal em cima */
@media (max-width: 520px) {
  .tut .zap-caixa .rs__pe { grid-template-columns: 1fr; }
  .tut .zap-caixa .rs__pe .btn--primary { order: -1; }
}

/* 24/10/2026, o dono: o cartao da conta no pe da lateral ocupa ate o fim.
   O nome e o plano esticam, e o desenho dos ajustes fica na ponta direita. */
.painel__pe:has(.conta) .painel__pe-acoes { width: 100%; }
.painel__pe-acoes > .conta { flex: 1; }

/* ---------- 24/10/2026, o dono: os botoes de acao ficam na DIREITA, em todas as abas ----------
   Antes a fileira de acoes comecava na esquerda no computador (so ia pra direita no celular) e alguns
   botoes soltos no fim de um bloco encostavam na esquerda. Agora a acao fica onde o olho termina de ler:
   na ponta direita do bloco, o principal por ultimo. O "Comece por aqui" do Financeiro continua no centro. */
.painel-body .secao__acoes,
.painel-body .semdado .secao__acoes,
.painel-body .semdado .coach-linha-form:not(form),
.painel-body .convite__acoes,
.painel-body .coach-upgrade__acoes { justify-content: flex-end; }
.painel-body .fin-comece .secao__acoes { justify-content: center; }
@media (max-width: 900px) { .painel-body .assento__acoes { justify-content: flex-end; } }
/* o botao sozinho no fim de um bloco vai pra ponta direita */
.painel-body .dobra__corpo > .btn,
.painel-body .gcard > .btn,
.painel-body .quadro > .btn,
.painel-body .brf-cartao > .btn,
.painel-body .persona__abrir { display: flex; width: fit-content; margin-left: auto; }
.painel-body .brf--faixa .brf-frase > .btn { margin-left: auto; }
/* ============================================================
   24/10/2026, o dono: os Ajustes do Financeiro "extremamente complexos".
   Lista curta de grupos com o que vale hoje numa linha; o grupo abre uma
   pergunta por vez, com bastante espaco em volta.
   ============================================================ */
.fin-aj { max-width: 620px; margin: 8px 0 48px; }
.fin-aj__lista { list-style: none; margin: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius: 16px; overflow: hidden; }
.fin-aj__lista li + li { border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.fin-aj__linha { display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; align-items: center; gap: 16px; width: 100%; padding: 20px 22px;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.fin-aj__linha:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.fin-aj__linha:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fin-aj__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-style: normal; color: var(--text-2);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.fin-aj__txt { display: grid; gap: 4px; min-width: 0; }
.fin-aj__txt b { font-size: 16px; font-weight: 600; }
.fin-aj__txt small { font-size: 14px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-aj__seta { color: var(--text-3); display: inline-flex; }

.fin-aj--etapa { padding: 28px 32px 0; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius: 16px; }
.fin-aj__topo { display: grid; gap: 10px; margin-bottom: 32px; }
.fin-aj__topo .tut__trilha { max-width: 220px; }
.fin-aj__voltar { justify-self: start; padding: 0; display: inline-flex; align-items: center; gap: 6px; }
.fin-aj__voltar::before { content: ''; width: 7px; height: 7px; border-left: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); }
.fin-aj__ic--grande { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 20px; }
.fin-aj__ic--grande svg { width: 22px; height: 22px; }
.fin-aj__titulo { margin: 0; font-size: 22px; line-height: 1.3; letter-spacing: -.01em; }
.fin-aj__texto { margin: 8px 0 0; font-size: 15px; color: var(--text-3); }
.fin-aj__corpo { margin: 28px 0 36px; }
.fin-aj__corpo .coach-chips { gap: 10px; }
.fin-aj__regras { display: grid; gap: 16px; }
.fin-aj__regra { font-size: 15px; gap: 12px; }
.fin-aj__regra .field__input { width: 64px; padding: 10px 8px; font-size: 16px; }
.fin-aj__form { margin-top: 20px; }
.fin-aj__pessoas { display: grid; gap: 0; }
.fin-aj__pessoa { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.fin-aj__pessoa + .fin-aj__pessoa { border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.fin-aj__pessoa span { display: grid; gap: 2px; }
.fin-aj__pessoa small { color: var(--text-3); font-size: 13px; }
.fin-aj__historico { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto; display: grid; gap: 10px; font-size: 14px; color: var(--text-2); }
.fin-aj__pe { display: flex; justify-content: space-between; gap: 12px; margin: 0 -32px; padding: 18px 32px; border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.fin-aj__pe .btn { flex: 0 0 auto; width: auto; min-width: 132px; }
@media (max-width: 560px) {
  .fin-aj__linha { padding: 18px 16px; gap: 14px; }
  .fin-aj--etapa { padding: 22px 18px 0; }
  .fin-aj__pe { margin: 0 -18px; padding: 16px 18px; }
  .fin-aj__topo { margin-bottom: 24px; }
}

/* ============================================================
   O cartao do treino no molde do Attio (25/10/2026)
   ------------------------------------------------------------
   Pedido do dono com o print do quadro da Attio: o nome do treino em
   cima, e cada dado numa linha com o seu desenho pequeno e cinza.
   Nada de caixa no que so informa; a cor fica so no desenho do tipo.
   ============================================================ */
.painel-body .coach-prop, .painel-body .coach-prop:first-child { padding: 16px 18px; }
.coach-prop__topo { gap: 12px; }
.coach-prop__nome { font-size: 15.5px; font-weight: 600; color: var(--text); line-height: 1.3; margin: 0; }
.coach-prop__dados { list-style: none; margin: 14px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 18px; }
.coach-prop__dado { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 14px; color: var(--text-2); line-height: 1.3; }
.coach-prop__dado > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-prop__dado-ic { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; color: var(--text-3); }
.coach-prop__dado-ic svg { width: 16px; height: 16px; }
.coach-prop__pe { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--contorno-dentro, color-mix(in srgb, var(--text) 6%, transparent)); }
.coach-prop__pe .secao__acoes { margin: 0; flex: none; }
.coach-prop__porque { flex: 1; min-width: 0; margin: 0; padding-top: 6px; }
.coach-prop__porque summary { display: inline-flex; align-items: center; gap: 9px; }
.coach-prop__porque summary::after { content: ''; width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.coach-prop__porque[open] summary::after { content: ''; transform: translateY(1px) rotate(-135deg); }
.painel-body .coach-prop__porque summary { font-size: 13.5px; }
@media (max-width: 560px) {
  .coach-prop__dados { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
}
/* a despesa no mesmo molde (25/10/2026): o desenho da categoria fica neutro */
.fin-cartao, .painel-body .fin-cartao { padding: 16px 18px; }
.fin-cartao .coach-prop__ic { color: var(--text-2); }
.fin-cartao .coach-prop__dados { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.fin-cartao .coach-prop__pe .secao__acoes { gap: 8px; }
.fin-cartao__corpo { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.fin-cartao__corpo .coach-prop__dados { flex: 1; min-width: 0; margin: 0; }
.fin-cartao__corpo .secao__acoes { flex: none; margin: 0; gap: 8px; }
@media (max-width: 560px) {
  .fin-cartao__corpo { flex-direction: column; align-items: stretch; }
}
@media (max-width: 560px) {
  .fin-cartao .coach-prop__dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fin-cartao .coach-prop__dado > span:last-child { white-space: normal; }

/* ============================================================
   O molde do Attio em todo o painel (25/10/2026)
   ------------------------------------------------------------
   "ela e a melhor identidade que temos, aplique ela para todo o
   restante". As pecas moram em cartao.js; aqui o desenho delas.
   ============================================================ */
/* dados um ao lado do outro, sem grade (linhas de lista) */
.coach-prop__dados.cartao-dados--linha { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 0; }
.cartao-dados--linha .coach-prop__dado { font-size: 13.5px; }
.cartao-dados--linha .coach-prop__dado > span:last-child { white-space: normal; }
/* o nome que abre a ficha, dentro do titulo */
.coach-prop__nome .fin-nome { font: inherit; color: inherit; }
.fin-cartao__nota { margin: 8px 0 0; }
.fin-cartao .coach-prop__topo .etiqueta, .fin-cartao .coach-prop__topo .fin-tag { margin-left: auto; flex: none; }
/* a linha do atleta nas Mensalidades */
.fin-atleta .coach-prop__ic { width: 34px; height: 34px; }
.fin-atleta .coach-prop__ic .pg { display: grid; place-items: center; }
.fin-atleta__fato .coach-prop__dados { justify-content: flex-end; margin: 0; }
.fin-atleta__fato .coach-prop__dado { color: var(--text); font-size: 14.5px; }
/* a sessao na ficha */
.cartao-sessao .coach-prop__dados { margin-top: 12px; }
.cartao-grupo { margin-top: 12px; }
.cartao-grupo .coach-prop__dados { margin-top: 6px; }
.cartao-grupo__rotulo { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--text-3); }
.cartao-texto { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.cartao-texto .coach-prop__dado-ic { margin-top: 2px; }
.cartao-texto--leve { color: var(--text-3); font-size: 13.5px; }
.painel-body .cartao-sessao { padding: 16px 18px; }
@media (max-width: 560px) {
  .fin-atleta__fato .coach-prop__dados { justify-content: flex-start; }
}
/* no cartao do Financeiro cada dado ocupa o que precisa (a data longa nao quebra) */
.fin-cartao .coach-prop__dados { display: flex; flex-wrap: wrap; gap: 10px 36px; }
.fin-cartao .coach-prop__dado > span:last-child { white-space: normal; }

/* ============================================================
   As cores do cartao: os tokens do design system (25/10/2026)
   ------------------------------------------------------------
   A primeira versao copiou os hex do print da Attio (#171717,
   #75757A, #EEEDF0, #F3F5F7) e, no escuro, os cinzas da Apple
   (#2C2C2E, #8E8E93). O dono: "siga o mesmo padrao de cores do nosso
   design-system". Da Attio fica so o ARRANJO (fundo liso, borda fina,
   quadradinho sem borda, valor na cor do nome, desenho do dado em
   cinza). As cores saem de css/tokens.css e dos tokens do painel:
     fundo do cartao      --bg-elev (claro) / --surface (escuro)
     borda                --contorno (o fio fino do painel)
     quadradinho do nome  --surface (claro) / --surface-2 (escuro)
     desenho              --text-3
     nome e valor         --text
     linha de dentro      --contorno-dentro
   Os cinzas do sistema sao neutros e medidos pra contraste; os da
   Attio puxavam pro azul e o #2C2C2E reprova no escuro.
   ============================================================ */
.painel-body {
  --c-fundo: var(--bg-elev);
  --c-borda: var(--contorno);
  --c-ic-fundo: var(--surface);
  --c-ic: var(--text-3);
  --c-dado-ic: var(--text-3);
  --c-texto: var(--text);
  --c-linha: var(--contorno-dentro);
  --c-sombra: none;
}
:root[data-tema="escuro"] .painel-body { --c-fundo: transparent; --c-ic-fundo: var(--surface-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .painel-body { --c-fundo: transparent; --c-ic-fundo: var(--surface-2); }
}
:root:root .painel-body .coach-prop,
:root:root .painel-body .coach-prop:first-child,
:root:root .painel-body .coach-prop[data-tipo],
:root:root .painel-body .fin-cartao,
:root:root .painel-body .fin-atleta,
:root:root .painel-body .cartao-sessao,
:root:root .painel-body .cartao-sessao:first-of-type {
  background: var(--c-fundo); border: 1px solid var(--c-borda); border-radius: 12px; box-shadow: var(--c-sombra);
}
:root:root .painel-body .coach-prop--bloq, :root:root .painel-body .coach-prop--bloq[data-tipo] { border-color: color-mix(in srgb, var(--urg-1) 55%, transparent); }
:root:root .painel-body .fin-atleta:not(:disabled):hover { background: color-mix(in srgb, var(--c-texto) 6%, transparent); }
/* o quadradinho do nome: fundo do sistema, sem borda, desenho cinza. O TIPO de treino nao e estado,
   entao nao leva cor (no design system verde e "esta certo", amarelo "precisa de voce", vermelho
   "obrigatorio/destrutivo", e azul nem e da paleta). Cor so quando o desenho diz um estado: o da
   mensalidade (.pg) continua com a dele. */
:root:root .painel-body .coach-prop__ic,
:root:root .painel-body .coach-prop[data-tipo] .coach-prop__ic,
:root:root .painel-body .cartao-sessao[data-tipo] .coach-prop__ic { background: var(--c-ic-fundo); border: 0; border-radius: 8px; color: var(--c-ic); }
/* nome e valores na mesma tinta; so o desenho do dado fica cinza */
:root:root .painel-body .coach-prop__nome, :root:root .painel-body .fin-atleta__quem > b { color: var(--c-texto); }
:root:root .painel-body .coach-prop__dado, :root:root .painel-body .fin-atleta__fato .coach-prop__dado { color: var(--c-texto); }
:root:root .painel-body .coach-prop__dado-ic { color: var(--c-dado-ic); }
:root:root .painel-body .cartao-grupo__rotulo, :root:root .painel-body .coach-prop__porque summary { color: var(--c-dado-ic); }
:root:root .painel-body .cartao-texto { color: var(--c-texto); }
:root:root .painel-body .cartao-texto--leve, :root:root .painel-body .fin-cartao__nota { color: var(--c-dado-ic); }
:root:root .painel-body .coach-prop__pe { border-top-color: var(--c-linha); }
/* a linha de Mensalidades com o mesmo respiro dos outros, e o estado sem o circulo extra dentro do quadradinho */
:root:root .painel-body .fin-atleta { padding: 16px 18px; gap: 14px; }
:root:root .painel-body .fin-atleta .coach-prop__ic .pg { background: transparent; box-shadow: none; }
:root:root .painel-body .fin-atleta__quem > b { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
:root:root .painel-body .fin-atleta .coach-prop__ic { width: 32px; height: 32px; }

/* ============================================================
   O treino da ficha no nivel do Financeiro (25/10/2026)
   ------------------------------------------------------------
   "Essa deve ser alterada para chegar no padrao que esta o
   financeiro: cores, layout, tamanho". Medido lado a lado: o da
   ficha tinha 12/14px de respiro (16/18 no Financeiro), os dados
   numa grade de colunas largas (no Financeiro, lado a lado com 36px)
   e um titulo inteiro so pra "Pedido", "Feito" e "Como foi". Agora o
   cartao e um .fin-cartao, e cada grupo e uma linha so: o rotulo
   curto na frente e os dados ao lado.
   ============================================================ */
:root:root .painel-body .cartao-sessao, :root:root .painel-body .cartao-sessao:first-of-type,
:root:root .painel-body .quadro > .cartao-sessao:first-child, :root:root .painel-body .quadro > .stat__label + .cartao-sessao { margin-top: 10px; padding: 16px 18px; }
:root:root .painel-body .cartao-sessao .coach-prop__dados { margin-top: 12px; }
:root:root .painel-body .cartao-sessao .cartao-grupo { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
:root:root .painel-body .cartao-sessao .cartao-grupo .coach-prop__dados { margin: 0; flex: 1; min-width: 0; }
:root:root .painel-body .cartao-sessao .cartao-grupo__rotulo { flex: none; width: 72px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--c-dado-ic); }
:root:root .painel-body .cartao-sessao .cartao-grupo + .cartao-grupo { padding-top: 10px; border-top: 1px solid var(--c-linha); }
/* a etiqueta do estado com o mesmo peso da do Financeiro */
:root:root .painel-body .cartao-sessao .etiqueta { margin-left: auto; flex: none; font-size: 13px; font-weight: 600; color: var(--c-texto); padding: 4px 0; }
@media (max-width: 560px) {
  :root:root .painel-body .cartao-sessao .cartao-grupo { flex-direction: column; align-items: flex-start; gap: 6px; }
  :root:root .painel-body .cartao-sessao .cartao-grupo .coach-prop__dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; width: 100%; }
}
/* todo grupo com a mesma linha fina e o mesmo respiro em cima, o primeiro tambem */
:root:root .painel-body .cartao-sessao .cartao-grupo { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-linha); }

/* ============================================================
   O "certo" num circulo fino (25/10/2026)
   ------------------------------------------------------------
   O dono, com o print da lista de tarefas do Claude ("Pronto para
   revisao"): "se algo esta certo, use esse estilo de icone, queremos
   entregar uma experiencia premium e atualmente esta muito
   ultrapassado". O visto solto e grosso (traco 2,6) vira o circulo
   fino com o visto dentro (traco 1,6, o mesmo do print). A cor segue
   o design system: o traco no verde de "esta certo" (--urg-ok).
   Vale pra toda etiqueta de certo: Feito, Paga, Em dia, Publicado.
   ============================================================ */
.painel-body .etiqueta, .painel-body .fin-tag, .painel-body .dobra__comece {
  --visto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M8.3 12.3l2.6 2.6 4.9-5.4'/%3E%3C/svg%3E");
}
.painel-body .etiqueta--feito::before, .painel-body .fin-tag--em_dia::before, .painel-body .fin-tag--paga::before { width: 16px; height: 16px; }
.painel-body .etiqueta--feito, .painel-body .fin-tag--em_dia, .painel-body .fin-tag--paga { gap: 7px; }

/* ============================================================
   A aba Intelligence (27/10/2026): a conversa que executa
   ============================================================ */
.agente { position: relative; display: flex; flex-direction: column; min-height: calc(100dvh - 48px); max-width: 860px; margin: 0 auto; padding: 8px 0 16px; }
.agente-lista { flex: 1; display: grid; align-content: start; gap: 12px; padding-bottom: 16px; }
.agente-msg { padding: 12px 16px; border-radius: 18px; line-height: 1.5; font-size: 15px; max-width: 72ch; }
.agente-msg--eu { justify-self: end; background: var(--accent); color: var(--on-accent); }
/* a fala do treinador um pouco mais pra direita, como no chat do Claude (31/10/2026); no celular fica onde esta */
/* 31/10/2026 (dono, print do ChatGPT): uma coluna so; a resposta ocupa a largura da barra e a fala termina na mesma borda direita */
.agente-msg--eu { max-width: min(72ch, 80%); }
/* a resposta da Intelligence sem caixa em volta (pedido do dono, 27/10/2026): o texto direto na pagina; o balao do treinador continua o mesmo */
.agente-msg--ia { justify-self: start; background: none; color: var(--text); width: 100%; max-width: none; padding-inline: 0; border-radius: 0; }
/* sem a linha amarela do lado (pedido do dono, 27/10/2026): o erro e texto, e a saida vem nas perguntas */
.agente-msg--erro { }
.agente-msg--pensando { display: flex; align-items: center; gap: 10px; width: auto; }
.agente-msg__texto { overflow-wrap: anywhere; }
/* o markdown da resposta (agente.js, textoFormatado): negrito de verdade, listas com bolinha
   e numero, e um respiro entre paragrafos, como uma conversa e nao um bloco */
.agente-msg__texto p { margin: 0; }
.agente-msg__texto > :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 12px; }
.agente-msg__texto strong { font-weight: 700; color: var(--text); }
.agente-msg__texto code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; padding: 1px 5px; border-radius: 6px; background: var(--surface-2); }
.agente-msg__texto ul, .agente-msg__texto ol { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; }
.agente-msg__texto > ol { gap: 12px; }
.agente-msg__texto ul { list-style: disc; }
.agente-msg__texto ol { list-style: decimal; }
.agente-msg__texto li { padding-left: 2px; }
.agente-msg__texto li::marker { color: var(--text-3); }
.agente-msg__texto ol > li::marker { color: var(--text-2); font-weight: 600; }
.agente-msg__texto li > ul { margin-top: 6px; gap: 4px; }
.agente-msg__texto li > ul > li { list-style: circle; color: var(--text-2); }
.agente-texto__titulo { font-size: 16px; }
/* ---------- a leitura da conversa (31/10/2026, pedido do dono com dois prints) ----------
   O titulo quebra o texto em partes: o grande abre, o do assunto separa, o pequeno agrupa. Ar antes de cada
   titulo, a linha mais solta e o paragrafo com respiro; o negrito no comeco da frase ("Sim:", "Então:") e a
   chamada do paragrafo. */
/* 31/10/2026, segundo ajuste (print do Claude): lista compacta e alinhada, titulo pouco maior que o texto, a
   linha divisoria separa as partes. O ar fica ANTES do titulo e da divisoria, nunca entre os itens da lista. */
.agente-msg--ia .agente-msg__texto { font-size: 15px; line-height: 1.6; }
.agente-msg__texto > :is(p, ul, ol, .agente-tabela-rolagem) + :is(p, ul, ol, .agente-tabela-rolagem) { margin-top: 12px; }
.agente-h { margin: 0; color: var(--text); font-weight: 700; letter-spacing: -.005em; line-height: 1.35; }
.agente-h--1 { font-size: 19px; }
.agente-h--2 { font-size: 16.5px; }
.agente-h--3 { font-size: 15px; }
.agente-msg__texto > * + .agente-h--1 { margin-top: 24px; }
.agente-msg__texto > * + .agente-h--2 { margin-top: 22px; }
.agente-msg__texto > * + .agente-h--3 { margin-top: 18px; }
.agente-msg__texto > .agente-h + * { margin-top: 8px; }
.agente-msg__texto > .agente-h + .agente-h { margin-top: 6px; }
/* a lista: itens juntos (6px), o numero com espaco pra dois digitos e alinhado a direita do mesmo jeito */
.agente-msg__texto ul, .agente-msg__texto ol { gap: 6px; padding-left: 1.7em; }
.agente-msg__texto > ol { gap: 6px; }
.agente-msg__texto ol { font-variant-numeric: tabular-nums; }
.agente-msg__texto li { padding-left: 4px; }
.agente-msg__texto li > strong:first-child { color: var(--text); }
.agente-msg__texto li > ul { margin-top: 4px; gap: 3px; }
/* a divisoria entre partes */
.agente-hr { border: 0; border-top: 1px solid var(--border-soft, var(--border)); margin: 22px 0; height: 0; }
.agente-msg__texto > .agente-hr + * { margin-top: 0; }
.agente-lista { gap: 20px; }
.agente-uso { margin-top: 8px; }
/* resposta longa (29/10/2026): pede para conferir, sem cor de alerta */
.agente-confira { margin: 6px 0 0; }

.agente-passos { list-style: none; margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid var(--border-soft); display: grid; gap: 6px; }
.agente-passo { display: flex; align-items: center; gap: 10px; font-size: 14px; animation: agente-surge .35s ease both; }
.agente-passo:nth-child(2) { animation-delay: .06s; } .agente-passo:nth-child(3) { animation-delay: .12s; }
.agente-passo:nth-child(4) { animation-delay: .18s; } .agente-passo:nth-child(n+5) { animation-delay: .24s; }
/* o icone do assunto (o da casa, na cor do texto) e um selo pequeno com o estado */
.agente-passo__ic { position: relative; flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  color: var(--text); background: var(--bg); box-shadow: inset 0 0 0 1px var(--border-soft); }
.agente-passo__ic svg { width: 20px; height: 20px; }
.agente-passo__selo { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg); }
.agente-passo__txt { flex: 1; min-width: 0; }
.agente-passo__estado { flex: none; color: var(--text-3); }
.agente-passo--falhou .agente-passo__estado { color: #C4271C; }
.agente-passo--concluido .agente-passo__selo { background: var(--accent); }
.agente-passo--falhou .agente-passo__selo { background: #C4271C; }
.agente-passo--aguardando .agente-passo__selo { background: var(--warn); }


/* a barra de pedido: a pilula do video */
.agente-barra { position: sticky; bottom: 12px; z-index: 2; display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 14px;
  border-radius: 28px; background: var(--bg-elev); box-shadow: 0 0 0 1px var(--border-soft), 0 10px 40px -12px var(--accent-glow); }
.agente-barra__mais { width: 22px; height: 22px; color: var(--text-3); flex: none; align-self: center; }
.agente-barra__mais svg, .agente-orbita svg, .agente-abertura__marca svg { width: 100%; height: 100%; display: block; }
.agente-barra textarea { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; line-height: 1.4;
  resize: none; padding: 8px 0; max-height: 160px; outline: none; }
.agente-barra__enviar { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); cursor: pointer; transition: transform .15s ease; }
.agente-barra__enviar:active { transform: scale(.9); }
.agente-barra__enviar:disabled, .agente-barra textarea:disabled { opacity: .5; cursor: default; }
.agente-barra:focus-within { box-shadow: 0 0 0 2px var(--accent-line), 0 10px 40px -10px var(--accent-glow); }
/* O microfone usa a mesma barra nas conversas do Coach e do Studio. */
.voz-chat__botao {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer;
}
.voz-chat__botao[hidden] { display: none; }
.voz-chat__botao:is(:disabled, [aria-disabled="true"]) { opacity: .45; cursor: default; }
.voz-chat__botao:hover:not(:disabled, [aria-disabled="true"]) { background: var(--bg); }
.voz-chat__botao:focus-visible, .agente-link:focus-visible { outline: 2px solid var(--accent-texto); outline-offset: 2px; }
form:has(> .voz-chat__status:not(:empty)):not(.voz-chat--gravando) { flex-wrap: wrap; }
.voz-chat__status {
  flex-basis: 100%; order: -1; padding: 2px 4px; color: var(--text);
  font-size: 12px; overflow-wrap: anywhere;
}
.voz-chat__status:empty { display: none; }
.voz-chat--gravando textarea, .voz-chat--gravando [data-voz="gravar"], .voz-chat--gravando .agente-barra__mais { display: none; }
.voz-chat--gravando .voz-chat__status {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.voz-chat__medidor { display: none; flex: 1; min-width: 0; height: 32px; align-self: center; }
.voz-chat--gravando .voz-chat__medidor { display: block; }
.voz-chat__base, .voz-chat__onda { fill: none; stroke-linecap: round; }
.voz-chat__base { stroke: var(--text-3); stroke-dasharray: 1 4; opacity: .45; }
.voz-chat__onda { stroke: var(--text-2); stroke-width: 1.5; }
.agente-link { color: var(--accent-texto); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; }
.agente-rodape { text-align: center; margin-top: 10px; }

/* o "pensando": a estrela girando, como o logo que gira no video */
.agente-orbita { width: 22px; height: 22px; color: var(--accent); animation: agente-gira 1.4s cubic-bezier(.5, 0, .5, 1) infinite; }

/* ---------- a abertura da Intelligence ----------
   O video de referencia, com a marca do tryzen: a estrela acende no centro,
   sobe, o titulo aparece, um horizonte de luz nasce de baixo e a barra
   desliza ate o lugar. So na primeira vez da visita (--anima). */
.agente--vazio { justify-content: flex-end; }
.agente-abertura { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 48px 16px 32px; overflow: hidden; isolation: isolate; border-radius: 28px; margin-bottom: -40px; }
.agente-abertura__marca { width: 56px; height: 56px; color: var(--accent); filter: drop-shadow(0 0 18px var(--accent-glow)); }
.agente-abertura__titulo { font-size: clamp(26px, 4vw, 36px); font-weight: 700; letter-spacing: -.02em; margin: 14px 0 0; }
.agente-abertura__sub { max-width: 46ch; margin-top: 8px; }
.agente-exemplos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; max-width: 640px; }
.agente-exemplo { border: 0; cursor: pointer; padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 14px;
  background: color-mix(in srgb, var(--bg-elev) 80%, transparent); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-soft); backdrop-filter: blur(8px); }
.agente-exemplo:active { transform: scale(.97); }

/* o horizonte: um planeta enorme cuja borda acende, a luz verde do tryzen */
.agente-horizonte { position: absolute; z-index: -1; left: 50%; bottom: -1px; width: 180%; aspect-ratio: 1; transform: translate(-50%, 86%);
  border-radius: 50%; background: radial-gradient(closest-side, var(--bg) 92%, transparent 100%);
  box-shadow: 0 -2px 0 0 var(--accent-line), 0 -18px 60px 6px var(--accent-glow), 0 -60px 140px 40px var(--accent-tint); }

.agente-abertura--anima .agente-abertura__marca { animation: agente-marca 1.6s cubic-bezier(.2, .8, .2, 1) both; }
.agente-abertura--anima .agente-abertura__titulo { animation: agente-revela 1s cubic-bezier(.2, .8, .2, 1) .9s both; }
.agente-abertura--anima .agente-abertura__sub { animation: agente-surge .8s ease 1.3s both; }
.agente-abertura--anima .agente-exemplos { animation: agente-surge .8s ease 1.6s both; }
.agente-abertura--anima .agente-horizonte { animation: agente-nasce 1.8s cubic-bezier(.2, .7, .1, 1) .6s both; }
.agente-barra--entra { animation: agente-barra 1s cubic-bezier(.2, .9, .2, 1) 1.2s both; }

@keyframes agente-marca {
  0%   { opacity: 0; transform: translateY(70px) scale(.55); filter: blur(10px) drop-shadow(0 0 0 transparent); }
  45%  { opacity: 1; transform: translateY(70px) scale(1);   filter: blur(0) drop-shadow(0 0 26px var(--accent-glow)); }
  100% { opacity: 1; transform: translateY(0) scale(1);      filter: blur(0) drop-shadow(0 0 18px var(--accent-glow)); }
}
@keyframes agente-revela { from { opacity: 0; letter-spacing: .3em; filter: blur(6px); } to { opacity: 1; letter-spacing: -.02em; filter: blur(0); } }
@keyframes agente-nasce  { from { opacity: 0; transform: translate(-50%, 100%); } 40% { opacity: 1; } to { opacity: 1; transform: translate(-50%, 86%); } }
@keyframes agente-barra  { from { opacity: 0; transform: translateY(40px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes agente-surge  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes agente-gira   { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .agente-abertura--anima *, .agente-barra--entra, .agente-passo, .agente-orbita { animation: none !important; }
}
@media (max-width: 640px) {
  .agente { min-height: calc(100dvh - 120px); }
  .agente-horizonte { width: 260%; }
}

/* a logo do tryzen no lugar das estrelas (pedido do dono, 27/10/2026):
   o corredor e mais alto que largo, entao a caixa acompanha */
.agente-abertura__marca { width: 46px; height: 64px; }
.agente-barra__mais { width: 16px; height: 22px; }
.agente-orbita { width: 16px; height: 22px; animation-name: agente-corre; animation-duration: .9s; }
@keyframes agente-corre { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-6deg); } }
.aba-ic--logo svg { width: 15px; height: 20px; }

/* a abertura ocupa a largura inteira da area do painel (pedido do dono,
   27/10/2026: o horizonte ficava cortado nas laterais pela caixa de 860);
   o texto, a conversa e a barra continuam centrados em 860 */
.painel__main:has(.agente) { max-width: none; padding-inline: 0; }
.agente { max-width: none; }
.agente-abertura { border-radius: 0; }
.agente-lista, .agente-barra, .agente-rodape, .agente-pergunta { width: calc(100% - 2 * var(--pad)); max-width: 860px; margin-inline: auto; }
.agente-abertura__sub, .agente-exemplos { max-width: 640px; }

/* ============================================================
   O pe preso embaixo (pedido do dono, 27/10/2026, no desenho do Claude)
   ------------------------------------------------------------
   A barra e o aviso descem juntos e ficam no rodape da tela; a conversa
   rola por tras. O vao que sobrava embaixo (o respiro do painel pra
   barra de abas do celular) sai nesta aba.
   ============================================================ */
.painel__main:has(.agente) { padding-bottom: 0; }
.agente { min-height: 100dvh; padding-bottom: 0; }
.agente-pe { position: sticky; bottom: 0; z-index: 3; margin-top: auto; padding: 12px 0 calc(12px + var(--safe-bottom, 0px));
  background: linear-gradient(to bottom, transparent, var(--bg) 24px); }
.agente-pe .agente-barra { position: static; }
.agente-pe .agente-rodape { margin-top: 8px; }

/* o cartao de confirmacao (27/10/2026, o dono): sem contorno amarelo; o aviso vai com icone; Cancelar a
   esquerda e Confirmar a direita, como em todo o painel */
.agente-confirma { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); }
.agente-confirma__topo { display: flex; align-items: center; gap: 8px; }
.agente-confirma__ic { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--surface); color: var(--text); }
.agente-confirma__ic svg { width: 16px; height: 16px; }
.agente-confirma__ic--aviso { color: var(--text); }
.agente-confirma__bloco { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); font-size: 14px; }
.agente-confirma__bloco > p { margin: 4px 0 0; }
.agente-confirma__bloco .agente-confirma__ic { background: var(--bg); }
.agente-confirma__bloco ul { margin: 0; padding-left: 18px; }
.agente-confirma__bloco li + li { margin-top: 2px; }
.agente-confirma__botoes { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.agente-confirma__botoes .btn { display: inline-flex; align-items: center; gap: 6px; }

/* as acoes embaixo de cada resposta: copiar, gostei, nao gostei, recriar */
.agente-acoes { display: flex; align-items: center; gap: 2px; margin: 8px 0 0 -6px; flex-wrap: wrap; }
.agente-acao { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none;
  color: var(--text-3); cursor: pointer; transition: color .15s ease, transform .15s ease; }
.agente-acao:active { transform: scale(.88); color: var(--text); }
.agente-acao:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.agente-acao.is-votado { color: var(--text); background: var(--surface-2); }
.agente-acoes .agente-uso { margin: 0 0 0 8px; }

/* ============================================================
   A Intelligence pergunta e oferece (27/10/2026)
   ------------------------------------------------------------
   O texto vem primeiro e os passos (com os icones) descem pra baixo dele;
   embaixo, os botoes do que da pra fazer em seguida, no desenho do
   "Criar documento" do Claude. O formulario dos treinos e o modal do
   painel (o mesmo do "o painel resolve").
   ============================================================ */
.agente-msg__texto + .agente-passos { margin: 12px 0 0; padding: 10px 0 0; border-bottom: 0; border-top: 1px solid var(--border-soft); }
.agente-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.agente-botao { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 0; border-radius: 10px; font: inherit; font-size: 14px;
  background: var(--surface-2); color: var(--text); cursor: pointer; transition: transform .15s ease; }
.agente-botao:active { transform: scale(.97); }
.agente-botao:disabled { opacity: .6; cursor: default; }
.agente-botao svg { flex: none; color: var(--text-2); }

/* ============================================================
   As perguntas, no modelo das perguntas do Claude (pedido do dono)
   ------------------------------------------------------------
   Um cartao preso acima da barra: "Perguntas" com as setas, a pergunta
   em negrito, as opcoes numeradas e Pular / Continuar. O botao de seguir
   leva o verde do app (o laranja do Claude e dele).
   ============================================================ */
.agente-pergunta { margin-bottom: 10px; padding: 12px 14px 12px; border-radius: 16px; background: var(--pergunta-fundo, var(--surface));
  box-shadow: 0 0 0 1px var(--border-soft), 0 12px 32px -18px rgba(0, 0, 0, .5); outline: none; }
.agente-pergunta--abre { animation: agente-surge .25s ease both; }
.agente-pergunta__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agente-pergunta__rotulo { font-size: 13px; color: var(--text-2); }
.agente-pergunta__setas { display: flex; gap: 2px; }
.agente-pergunta__seta { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--text-3); cursor: pointer; }
.agente-pergunta__seta:disabled { opacity: .35; cursor: default; }
.agente-pergunta__seta:not(:disabled):active { color: var(--text); transform: scale(.9); }
.agente-pergunta__titulo { margin: 10px 0 2px; font-weight: 700; font-size: 16px; color: var(--text); }
/* o questionario (31/10/2026, molde do Questionnaire do shadcn) */
.agente-pergunta__sobre { margin: 0 0 12px; font-size: 14px; color: var(--text-2); }
.agente-pergunta__ops { display: grid; gap: 8px; }
.agente-pergunta__ops--varios { max-height: 300px; overflow-y: auto; padding: 1px; }
.agente-op { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px 11px 14px; border: 0; border-radius: 12px;
  background: color-mix(in srgb, var(--text) 2%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 11%, transparent);
  color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; transition: box-shadow .15s ease, background .15s ease; }
.agente-op:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 20%, transparent); }
.agente-op:active { transform: scale(.995); }
.agente-op:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.agente-op.is-on { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }
.agente-op__marca { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 40%, transparent); color: var(--on-accent); }
.agente-op__marca--caixa { border-radius: 5px; }
.agente-op.is-on .agente-op__marca { box-shadow: inset 0 0 0 1.5px var(--accent), inset 0 0 0 4.5px var(--pergunta-fundo, var(--surface)), inset 0 0 0 9px var(--accent); }
.agente-op.is-on .agente-op__marca--caixa { background: var(--accent); box-shadow: none; }
.agente-op__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.agente-op__rot { font-weight: 600; }
.agente-op__sobre { font-size: 14px; color: var(--text-2); }
.agente-pergunta__campo { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 0; border-radius: 12px; background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 11%, transparent); color: var(--text); font: inherit; font-size: 15px; outline: none; }
.agente-pergunta__campo::placeholder { color: var(--text-3); }
.agente-pergunta__campo:focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 38%, transparent); }
.agente-pergunta__pe { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 14px; }
.agente-pergunta__voltar { margin-right: auto; }
.agente-pergunta__pular { border: 0; background: none; color: var(--text-2); font: inherit; font-size: 14px; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.agente-pergunta__pular:active { background: var(--surface-2); }
.agente-pergunta__ir { border: 0; border-radius: 10px; padding: 8px 16px; font: inherit; font-size: 14px; font-weight: 600;
  background: var(--accent); color: var(--on-accent); cursor: pointer; }
.agente-pergunta__ir:active { transform: scale(.97); }
.agente-pergunta__ir:disabled { opacity: .5; cursor: default; }

/* ============================================================
   A abertura com a logo escrita (pedido do dono, 27/10/2026)
   ------------------------------------------------------------
   O titulo e so "Tryzen", e e o `nome()` do js/ui.js (a letra desenhada
   da marca), nao a palavra digitada. No desktop o texto e os exemplos
   sobem pra ficar acima do globo: o horizonte mostra 14% de um circulo
   de 180% da largura (~25% da largura), e o padding em % e da largura,
   entao a conta acompanha qualquer tela.
   ============================================================ */
.agente-abertura__titulo { line-height: 0; color: var(--text); }
.agente-abertura__titulo svg { height: clamp(30px, 3.2vw, 40px); width: auto; display: block; }
.agente-abertura--anima .agente-abertura__titulo { animation-name: agente-surge; }
@media (min-width: 641px) {
  .agente-abertura { padding-bottom: calc(25.2% + 24px); }
  .agente-abertura__titulo { margin-top: 18px; }
}
/* no celular o circulo e de 260% da largura: aparecem ~36% dela */
@media (max-width: 640px) {
  .agente-abertura { padding-bottom: calc(36.4% + 24px); }
}

/* ---------- a saida da abertura (pedido do dono, 27/10/2026) ----------
   O fim do video de referencia: ao mandar o primeiro pedido, a borda do
   globo acende uma ultima vez e ele afunda e se apaga; a marca, o nome e os
   exemplos sobem e se desfazem, um atras do outro. Depois a primeira fala
   entra de baixo (agente-lista--entra). Duracao casada com SAIDA_MS. */
.agente-abertura.agente-abertura--sai .agente-horizonte { animation: agente-afunda .9s cubic-bezier(.55, 0, .3, 1) both; }
.agente-abertura.agente-abertura--sai .agente-abertura__marca { animation: agente-some .6s cubic-bezier(.4, 0, .2, 1) .05s both; }
.agente-abertura.agente-abertura--sai .agente-abertura__titulo { animation: agente-some .6s cubic-bezier(.4, 0, .2, 1) .1s both; }
.agente-abertura.agente-abertura--sai .agente-abertura__sub { animation: agente-some .55s cubic-bezier(.4, 0, .2, 1) .15s both; }
.agente-abertura.agente-abertura--sai .agente-exemplos { animation: agente-some .5s cubic-bezier(.4, 0, .2, 1) .2s both; pointer-events: none; }
@keyframes agente-afunda {
  0%   { opacity: 1; transform: translate(-50%, 86%); }
  30%  { opacity: 1; transform: translate(-50%, 84%);
         box-shadow: 0 -2px 0 0 var(--accent), 0 -24px 80px 12px var(--accent-glow), 0 -80px 180px 60px var(--accent-tint); }
  100% { opacity: 0; transform: translate(-50%, 100%); }
}
@keyframes agente-some { to { opacity: 0; transform: translateY(-28px) scale(.96); filter: blur(8px); } }
.agente-lista--entra > * { animation: agente-surge .45s cubic-bezier(.2, .8, .2, 1) both; }
.agente-lista--entra > :nth-child(2) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  .agente-abertura--sai *, .agente-lista--entra > * { animation: none !important; }
}

/* ---------- a comparacao do atleta na conversa (pedido do dono, 27/10/2026) ----------
   Os cartoes da ficha (Consistencia, Carga, Evolucao, Saude) dentro da
   resposta: o mesmo desenho do tema, o titulo e a tabela Agora x Antes.
   Aqui nao dobram: chegam abertos, com a linha sob o titulo. */
.agente-comp { margin-top: 14px; }
.agente-comp + .agente-comp { margin-top: 22px; }
.agente-comp__quem { margin: 0 0 4px; font-size: 15px; }
.agente-tema.sec.dobra { margin-top: 10px; }
.agente-tema .agente-tema__topo { cursor: default; margin-bottom: 0; border-bottom: 1px solid var(--contorno, var(--border-soft)); }
.agente-tema .agente-tema__topo:active { opacity: 1; }
.agente-tabela { margin: 10px 0; }
.agente-tabela-rolagem { max-width: 100%; overflow-x: auto; margin: 10px 0; border-radius: 14px; }
.agente-tabela-rolagem:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.agente-msg, .agente-msg__texto { min-width: 0; }
.agente-tabela-rolagem .agente-tabela { margin: 0; width: 100%; table-layout: auto; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.4; }
.agente-tabela :is(th, td) { padding: .65em .85em; min-width: 22ch; max-width: 48ch; text-align: left; vertical-align: top; white-space: normal; overflow-wrap: anywhere; font-weight: 400; border-bottom: 1px solid var(--contorno-dentro, var(--border-soft)); }
.agente-tabela thead th { background: var(--preenche-suave, var(--surface-2)); color: var(--text-2); font-weight: 600; }
.agente-tabela tbody th { font-weight: 600; }
.agente-tabela tr > :first-child { width: 1%; min-width: 16ch; max-width: 24ch; }
.agente-tabela .agente-tabela__numero { width: 1%; min-width: 4ch; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.agente-tabela tbody tr:last-child > * { border-bottom: 0; }
.agente-msg__texto > .agente-tabela-rolagem:first-child { margin-top: 0; }
.agente-msg__texto .agente-tabela:first-child { margin-top: 0; }

/* ============================================================
   O respiro da conversa (pedido do dono, 27/10/2026)
   ------------------------------------------------------------
   A primeira mensagem nascia encostada no topo da tela. Agora a conversa
   comeca com um respiro, como no Claude, e cada pedido se separa da
   resposta anterior por um vao maior que o de dentro da resposta.
   ============================================================ */
.agente-lista { padding-top: clamp(32px, 9vh, 88px); gap: 16px; }
.agente-lista > .agente-msg--eu:not(:first-child) { margin-top: 20px; }
@media (max-width: 899px) { .agente-lista { padding-top: 24px; } }

/* ============================================================
   Painel e Conversas na lateral (pedido do dono, 27/10/2026, "faz que
   nem o Claude", com os desenhos da casa)
   ------------------------------------------------------------
   Dois botoes logo abaixo do nome trocam o que a lateral mostra. No modo
   Conversas as abas e os galhos dao lugar a "Nova conversa" e ao
   historico, agrupado por quando foi. No trilho (lateral fechada) ficam
   so os dois icones.
   ============================================================ */
.lado-modo { display: flex; gap: 4px; margin: 4px 0 10px; padding: 3px; border-radius: 12px; background: var(--surface); }
.lado-modo__b { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 8px;
  border: 0; border-radius: 9px; background: none; color: var(--text-3); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, color .15s ease; }
.lado-modo__b:hover { color: var(--text); }
.lado-modo__b.is-active { background: var(--bg); color: var(--text); box-shadow: 0 0 0 1px var(--contorno-dentro, var(--border)); }
.lado-modo__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.painel__lado.painel__lado--conversas .painel__nav,
.painel__lado.painel__lado--conversas .galhos { display: none !important; }

.lado-conv { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.lado-conv__nova { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 10px;
  background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }
.lado-conv__nova:hover { background: var(--surface); }
.lado-conv__nova svg { color: var(--accent-texto, var(--accent)); flex: none; }
.lado-conv__lista { list-style: none; margin: 6px 0 0; padding: 0 0 8px; overflow-y: auto; scrollbar-width: thin; }
.lado-conv__grupo { padding: 14px 10px 6px; }
.lado-conv__item { position: relative; display: flex; align-items: center; border-radius: 10px; }
.lado-conv__item:hover, .lado-conv__item.is-atual { background: var(--surface); }
.lado-conv__abrir { flex: 1; min-width: 0; padding: 8px 10px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 14px;
  text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-radius: 10px; }
.lado-conv__item.is-atual .lado-conv__abrir { color: var(--text); font-weight: 600; }
.lado-conv__x { flex: none; width: 28px; height: 28px; margin-right: 4px; display: grid; place-items: center; border: 0; border-radius: 8px;
  background: none; color: var(--text-3); cursor: pointer; opacity: 0; transition: opacity .12s ease; }
.lado-conv__item:hover .lado-conv__x, .lado-conv__x:focus-visible { opacity: 1; }
.lado-conv__x:hover { color: var(--text); background: var(--surface-2, var(--bg)); }
@media (hover: none) { .lado-conv__x { opacity: 1; } }
.lado-conv__vazio { padding: 10px; line-height: 1.45; }

@media (min-width: 900px) {
  .painel__lado[data-lado="trilho"] .lado-modo { flex-direction: column; background: none; padding: 0; }
  .painel__lado[data-lado="trilho"] .lado-modo__b span,
  .painel__lado[data-lado="trilho"] .lado-conv__lista,
  .painel__lado[data-lado="trilho"] .lado-conv__vazio,
  .painel__lado[data-lado="trilho"] .lado-conv__nova span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .painel__lado[data-lado="trilho"] .lado-conv__nova { justify-content: center; padding: 0; }
}
@media (prefers-reduced-motion: reduce) { .lado-modo__b, .lado-conv__x { transition: none; } }

/* no celular a troca e a lista ficam dentro da gaveta (treinador.js): a gaveta continua aberta no modo
   Conversas, e quem some sao as abas */
@media (max-width: 899px) {
  .painel-body .painel__lado.painel__lado--conversas .painel__nav { display: flex !important; }
  .painel-body .painel__lado--conversas .painel__nav > .painel__aba,
  .painel-body .painel__lado--conversas .painel__nav > .painel__pill { display: none; }
  .painel-body .painel__nav .lado-modo { flex: none; margin: 0 0 8px; }
  .painel-body .painel__nav .lado-modo__b { min-height: 40px; font-size: 14px; }
  .painel-body .painel__nav .lado-conv__abrir { padding-block: 12px; font-size: 15px; }
}

/* ============================================================
   As Automacoes da Intelligence (pedido do dono, 27/10/2026: "conferir no
   painel... meio que um Cal + Claude work"). A automacao escolhida a
   esquerda e o mes a direita, num cartao so, como a tela de agendar do Cal.
   Os dias com automacao sao blocos cheios; o escolhido acende; ponto verde
   = rodou, ponto vermelho = falhou, anel = vai rodar. Negativo a esquerda,
   positivo a direita (regra fixa do dono).
   ============================================================ */
.lado-conv__nova.is-atual { background: var(--surface); }
.auto { width: calc(100% - 2 * var(--pad)); max-width: 1040px; margin: 0 auto; padding: clamp(20px, 4vh, 40px) 0 48px; container-type: inline-size; }
.auto-topo { display: grid; gap: 12px; margin-bottom: 20px; }
.auto-topo__titulo { margin: 0; font-size: 26px; font-weight: 650; letter-spacing: -.01em; }
.auto-topo p { margin: 4px 0 0; max-width: 60ch; }
.auto-voltar { justify-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px 6px 6px; border: 0; border-radius: 999px;
  background: var(--surface); color: var(--text-2); font: inherit; cursor: pointer; }
.auto-voltar:hover { color: var(--text); }
.auto-erro { padding: 10px 12px; border-radius: 12px; background: var(--surface); }

.auto-cartao { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-elev, var(--surface));
  overflow: hidden; }
.auto-info { padding: 22px 22px 20px; border-right: 1px solid var(--border); display: grid; align-content: start; gap: 10px; min-width: 0; }
.auto-info__quem { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-2); font-weight: 600; }
.auto-info__logo { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: var(--on-accent); }
.auto-info__logo svg { width: 14px; height: 14px; }
.auto-info__titulo { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 650; overflow-wrap: anywhere; }
.auto-info p { margin: 0; }
.auto-meta { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.auto-meta li { display: flex; align-items: center; gap: 10px; color: var(--text); }
.auto-meta svg { flex: none; color: var(--text-2); }
.auto-passos { margin: 0; padding-left: 20px; display: grid; gap: 4px; list-style: decimal; }
.auto-passos li { display: list-item; }
.auto-passos__falhou::marker { color: var(--urg-2, var(--warn)); }
.auto-passos__pulado { color: var(--text-3); }
.auto-passos__escreve { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--surface); color: var(--text-2); }
.auto-ultima { padding: 10px 12px; border-radius: 12px; background: var(--surface); display: grid; gap: 6px; }
.auto-ultima p { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.auto-ultima__ic { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: var(--bg); color: var(--dsc-verde, var(--accent)); }
.auto-ultima--falhou .auto-ultima__ic { color: var(--urg-2, var(--warn)); }
.auto-relatorio { padding-top: 6px; border-top: 1px solid var(--border-soft, var(--border)); line-height: 1.5; }
.auto-relatorio p { margin: 0 0 6px; }
.auto-relatorio ul, .auto-relatorio ol { margin: 0 0 6px; padding-left: 18px; }
.auto-acoes { grid-column: 1 / -1; padding: 12px 22px; border-top: 1px solid var(--border); }
.auto-botoes { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.auto-botoes--so-dir { justify-content: flex-end; }
.auto-botoes__dir { display: inline-flex; gap: 8px; margin-left: auto; }
.auto-botoes .btn { display: inline-flex; align-items: center; gap: 6px; }

.auto-selo { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--surface); color: var(--text-2); font-weight: 600; white-space: nowrap; }
.auto-selo--ativa, .auto-selo--concluida { background: color-mix(in srgb, var(--dsc-verde, var(--accent)) 16%, transparent); color: var(--text); }
.auto-selo--falhou { background: color-mix(in srgb, var(--urg-2, var(--warn)) 18%, transparent); color: var(--text); }
.auto-selo--prevista { background: none; box-shadow: inset 0 0 0 1px var(--border); }

.auto-cal { padding: 22px 22px 18px; min-width: 0; }
.auto-cal__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.auto-cal__mes { margin: 0; font-size: 17px; white-space: nowrap; }
.auto-cal__mes b { font-weight: 650; }
.auto-cal__setas { display: flex; gap: 4px; }
.auto-seta { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--text-2); cursor: pointer; }
.auto-seta:hover { background: var(--surface); color: var(--text); }
.auto-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.auto-grade__ds { text-align: center; padding-bottom: 6px; letter-spacing: .04em; }
.auto-dia { position: relative; aspect-ratio: 1 / .82; min-height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none;
  color: var(--text); font: inherit; font-size: 15px; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.auto-dia:hover { background: var(--surface); }
.auto-dia--fora { color: var(--text-3); }
.auto-dia--tem { background: var(--surface-2, var(--surface)); }
/* no padrao da Tryzen (pedido do dono, 27/10/2026: "ao em vez desse cinza em degrade"): o verde da casa */
.auto-dia--sel { background: var(--accent-tint, color-mix(in srgb, var(--accent) 16%, transparent)); color: var(--accent-texto, var(--text)); font-weight: 650; }
.auto-dia--escolhido { background: var(--accent); color: var(--on-accent); font-weight: 700; box-shadow: 0 6px 18px -8px var(--accent-glow, transparent); }
.auto-dia--escolhido .auto-pt--prevista { box-shadow: inset 0 0 0 1.5px var(--on-accent); }
.auto-dia--hoje .auto-dia__n::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 999px; background: currentColor; }
.auto-dia:active { transform: scale(.96); }
.auto-dia__mes { position: absolute; top: 4px; left: 6px; font-size: 10px; color: var(--text-2); }
.auto-dia__pts { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; }
.auto-pt { display: inline-block; width: 6px; height: 6px; border-radius: 999px; }
.auto-pt--feita { background: var(--dsc-verde, var(--accent)); }
.auto-pt--falhou { background: var(--urg-2, var(--warn)); }
.auto-pt--prevista { box-shadow: inset 0 0 0 1.5px currentColor; }
.auto-legenda { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.auto-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.auto-do-dia { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft, var(--border)); }
.auto-do-dia p { margin: 0; }
.auto-do-dia ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.auto-do-dia__item { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 10px;
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.auto-do-dia__item:hover { background: var(--surface); }

.auto-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.auto-lista__item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; background: none;
  color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.auto-lista__item:hover { background: var(--surface); }
.auto-lista__item.is-sel { border-color: var(--border); background: var(--surface); }
.auto-lista__ic, .auto-vazio__ic, .auto-chat__ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2, var(--surface)); color: var(--text); }
.auto-lista__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.auto-lista__txt > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auto-vazio { display: grid; justify-items: start; gap: 8px; padding: 22px; border: 1px solid var(--border); border-radius: 18px; }
.auto-vazio p { margin: 0; }
.auto-vazio__ex { justify-content: flex-start; margin-top: 6px; }

/* o cartao na conversa, com o "Conferir no painel" */
.auto-chat { display: grid; gap: 8px; margin-top: 12px; }
.auto-chat__item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
.auto-chat__txt { flex: 1; min-width: 0; }
.auto-chat__txt p { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.auto-chat__txt svg { flex: none; color: var(--text-2); }
.auto-chat__sep { margin: 0 2px; }
.auto-chat__ver { flex: none; }

/* empilha pela largura do conteudo (a lateral aberta ou fechada muda tudo), nao pela da janela */
@container (max-width: 780px) {
  .auto-cartao { grid-template-columns: 1fr; }
  .auto-info { border-right: 0; border-bottom: 1px solid var(--border); }
}
@media (max-width: 899px) {
  .auto-chat__item { flex-wrap: wrap; }
  .auto-chat__ver { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .auto-cal, .auto-info { padding: 16px; }
  .auto-grade { gap: 4px; }
  .auto-dia { font-size: 14px; min-height: 36px; }
  .auto-acoes { padding: 12px 16px; }
  .auto-botoes { flex-wrap: wrap; }
  .auto-botoes__dir { width: 100%; justify-content: flex-end; }
}
.auto-cartao + p { margin: 24px 0 0; }

/* ============================================================
   Automacoes, segunda volta (pedido do dono, 27/10/2026: "adicione algo
   mais nesse estilo", as Tarefas agendadas do Claude). Lista em cartoes,
   e o detalhe com a trilha, a chave do status e o historico linha a linha.
   ============================================================ */
.auto .auto-topo__titulo { font-size: 28px; margin-bottom: 18px; }
.auto-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auto-abas { display: flex; gap: 4px; }
.auto-aba { padding: 7px 14px; border: 0; border-radius: 10px; background: none; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.auto-aba:hover { color: var(--text); }
.auto-aba.is-on { background: var(--surface-2, var(--surface)); color: var(--text); }
.auto-ferr { display: flex; align-items: center; gap: 4px; }
.auto-ic { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border: 0; border-radius: 10px;
  background: none; color: var(--text); cursor: pointer; }
.auto-ic:hover { background: var(--surface); }
.auto-ic.is-on { background: var(--accent-tint); color: var(--accent-texto, var(--text)); }
.auto-ic:disabled { opacity: .5; cursor: default; }
.auto-busca { width: 180px; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; font-size: 14px; }
.auto-busca:focus { outline: none; border-color: var(--accent); }
.auto-nova, .auto-executar { display: inline-flex; align-items: center; gap: 6px; height: 34px; margin-left: 6px; padding: 0 14px; border: 0; border-radius: 10px;
  background: var(--accent); color: var(--on-accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .15s ease; }
.auto-nova:active, .auto-executar:active { transform: scale(.97); }
.auto-executar:disabled { opacity: .6; cursor: default; }
.auto-aviso { display: flex; align-items: center; gap: 12px; margin: 18px 0 20px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; color: var(--text); }
.auto-aviso svg { flex: none; color: var(--text-2); }

.auto-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.auto-card { display: grid; align-content: start; gap: 6px; padding: 16px 18px; border: 1px solid var(--border-soft, var(--border)); border-radius: 14px;
  background: var(--bg-elev, var(--surface)); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.auto-card:hover { border-color: var(--border); transform: translateY(-1px); }
.auto-card__titulo { font-size: 15px; font-weight: 650; }
.auto-card__desc { font-size: 14px; line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.auto-card__pe { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; color: var(--text-3); }
.auto-card__estado--ativa { color: var(--accent-texto, var(--text)); font-weight: 600; }
.auto-card__estado--pausada { color: var(--text-2); font-weight: 600; }
.auto-card__falhou { color: var(--urg-2, var(--warn)); }
.auto-card__usar { color: var(--accent-texto, var(--accent)); font-weight: 600; }

/* o detalhe */
.auto--detalhe { max-width: 1180px; }
.auto-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--border-soft, var(--border)); }
.auto-trilha { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text-3); }
.auto-trilha b { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auto-trilha__volta { padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; cursor: pointer; white-space: nowrap; }
.auto-trilha__volta:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.auto-cab__acoes { display: flex; align-items: center; gap: 4px; flex: none; }
.auto-ic--texto { color: var(--urg-2, var(--text)); }
.auto-det { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px 48px; align-items: start; }
.auto-det__col { display: grid; gap: 22px; min-width: 0; }
.auto-campo { display: grid; gap: 8px; }
.auto-campo > p { margin: 0; line-height: 1.5; }
.auto-campo__rot { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 500; color: var(--text-2); }
.auto-campo__rot > svg { flex: none; color: var(--text-3); }
.auto-fuso { display: inline-flex; align-items: center; gap: 4px; vertical-align: -2px; }
.auto-fuso > svg { width: 14px; height: 14px; }
.auto-campo .auto-cal { padding: 14px 14px 12px; border: 1px solid var(--border-soft, var(--border)); border-radius: 14px; }
.auto-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.auto-status .auto-selo { gap: 4px; }
.auto-chave { position: relative; width: 38px; height: 22px; flex: none; padding: 0; border: 0; border-radius: 999px; background: var(--surface-2, var(--border)); cursor: pointer; transition: background .2s ease; }
.auto-chave i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s ease; }
.auto-chave.is-on { background: var(--accent); }
.auto-chave.is-on i { transform: translateX(16px); }
.auto-chave:disabled { opacity: .6; cursor: default; }

.auto-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.auto-hist__item { border-radius: 10px; background: var(--surface); }
.auto-hist__linha { width: 100%; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; padding: 9px 14px; border: 0; border-radius: 10px;
  background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.auto-hist__linha:hover { background: var(--surface-2, var(--surface)); }
.auto-hist__ic { display: grid; place-items: center; color: var(--text-2); }
.auto-hist__item--falhou .auto-hist__ic, .auto-hist__item--falhou .auto-hist__estado { color: var(--urg-2, var(--warn)); }
.auto-hist__estado { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); }
.auto-hist__ponto { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
.auto-hist__gira { width: 12px; height: 12px; border-radius: 999px; border: 1.7px solid var(--border); border-top-color: var(--text); animation: auto-gira .9s linear infinite; }
@keyframes auto-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auto-hist__gira { animation: none; } }
.auto-hist__corpo { padding: 0 14px 12px 44px; }

@container (max-width: 760px) {
  .auto-det { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .auto-barra { align-items: flex-start; }
  .auto-ferr { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .auto-busca { width: 100%; order: -1; margin-bottom: 4px; }
  .auto-hist__corpo { padding-left: 14px; }
}
.auto-relatorio ul { list-style: disc; } .auto-relatorio ol { list-style: decimal; } .auto-relatorio li { display: list-item; }
/* celular: a trilha ganha a linha dela e os dias da semana encolhem (o calendario cabe em 343px) */
@media (max-width: 560px) {
  .auto-cab { flex-wrap: wrap; }
  .auto-trilha { order: 2; width: 100%; }
  .auto-cab__acoes { margin-left: auto; }
}
@container (max-width: 420px) {
  .auto-grade__ds { font-size: 10px; letter-spacing: 0; }
  .auto-grade { gap: 3px; }
}

/* ============================================================
   Agentes (Tryzen Agent Builder, 29/10/2026): a mesma familia das
   Automacoes (auto-*); aqui so o que e do agente: o fluxo desenhado,
   o resultado da simulacao, o cartao na conversa e os rascunhos.
   ============================================================ */
.ag-card { cursor: default; gap: 10px; }
.ag-card:hover { transform: none; }
.ag-card__abrir { display: grid; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ag-card__abrir:hover .auto-card__titulo { text-decoration: underline; text-underline-offset: 3px; }
.ag-card__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ag-card__nums dt { color: var(--text-3); }
.ag-card__nums dd { margin: 0; color: var(--text-2); }
.ag-card__botoes { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 -8px -6px; }
.ag-filtros { flex-wrap: wrap; }
.ag-modelos { margin-top: 12px; text-align: left; }

.ag-fluxo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: ag; }
.ag-fluxo__no { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 2px 12px; padding: 10px 12px 10px 14px; margin-left: 10px;
  border-left: 2px solid var(--border); }
.ag-fluxo__no::before { content: ''; position: absolute; left: -7px; top: 14px; width: 12px; height: 12px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 2px var(--text-3); }
.ag-fluxo__no--ramo { margin-left: 34px; }
.ag-fluxo__no--se::before { border-radius: 3px; transform: rotate(45deg); }
.ag-fluxo__no--mensagem::before, .ag-fluxo__no--relatorio::before { box-shadow: inset 0 0 0 2px var(--accent); }
.ag-fluxo__no--concluido::before { background: var(--accent); box-shadow: none; }
.ag-fluxo__no--falhou::before { background: var(--urg-2, var(--warn)); box-shadow: none; }
.ag-fluxo__no--pulado { opacity: .6; }
.ag-fluxo__tipo { color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.ag-fluxo__txt { overflow-wrap: anywhere; }
.ag-fluxo__meta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ag-fluxo__meta svg { vertical-align: -2px; margin-right: 3px; }
.ag-fluxo__efeito { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 999px; background: var(--surface); color: var(--text-2); }
.ag-fluxo__st { color: var(--text-2); }

.ag-res { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border-soft, var(--border)); border-radius: 12px; }
.ag-res--sim { border-style: dashed; }
.ag-res__topo { display: flex; align-items: center; gap: 6px; margin: 0; }
.ag-res__resumo { margin: 0; padding-left: 18px; display: grid; gap: 2px; list-style: disc; }
/* o resumo e as etapas da execucao no desenho da conversa (30/10/2026): linha com desenho cinza, sem marcador */
.ag-res__linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ag-res__linhas li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text); line-height: 1.4; }
.ag-res__linhas li svg { flex: none; margin-top: 1px; color: var(--text-3); }
.ag-passos { margin: 4px 0 0; padding: 10px 0 0; border-bottom: 0; border-top: 1px solid var(--border-soft); }
.ag-passos .agente-passo { animation: none; }
.agente-passo--fila .agente-passo__selo { display: none; }
.agente-passo--fila .agente-passo__ic { color: var(--text-3); }
.ag-erro { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--text-2); }
.ag-erro svg { flex: none; margin-top: 1px; color: #C4271C; }
.ag-res__resumo li { display: list-item; }
.ag-res__previas { display: grid; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--surface); }
.ag-res__previas p { margin: 0; line-height: 1.45; }

.ag-chat { display: grid; gap: 10px; margin-top: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; }
.ag-chat__topo { display: flex; align-items: flex-start; gap: 10px; }
.ag-chat__campos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.ag-chat__campos dt { color: var(--text-3); }
.ag-chat__campos dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.ag-chat__campos code { font-size: 12px; }
.ag-chat__etapas summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-2); }
.ag-chat__etapas[open] summary { margin-bottom: 8px; }
.agente-botao--forte { background: var(--accent); color: var(--on-accent); border-color: transparent; }
/* o desenho do botao verde vai na cor do texto (o .agente-botao svg cinza sumia no verde; dono, 30/10/2026) */
.agente-botao.agente-botao--forte svg { color: currentColor; }
.agente-botao--forte:disabled { opacity: .6; }

.ag-rasc { display: grid; gap: 8px; margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; }
.auto-campo .ag-rasc { margin: 0; }
.ag-rasc p { margin: 0; }
.ag-rasc__todos { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.ag-rasc__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 360px; overflow: auto; }
.ag-rasc__item label { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; background: var(--surface); cursor: pointer; }
.ag-rasc__item input, .ag-rasc__todos input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.ag-rasc__texto { display: block; margin-top: 2px; color: var(--text-2); line-height: 1.45; }
.ag-versoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ag-versoes li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

@media (max-width: 560px) {
  .ag-card__nums { grid-template-columns: 1fr; gap: 4px; }
  .ag-fluxo__no { grid-template-columns: 1fr; }
  .ag-fluxo__meta { grid-column: 1; }
  .ag-fluxo__no--ramo { margin-left: 22px; }
  .ag-chat__campos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ag-card__abrir:hover .auto-card__titulo { text-decoration: none; } }
/* o resultado do teste dentro do cartao ocupa a linha inteira e nunca vaza */
.ag-card { min-width: 0; }
.ag-card:has(.ag-res) { grid-column: 1 / -1; }
.ag-res { min-width: 0; overflow-x: auto; }

/* ---------- o ranking sem preenchimento (04/11/2026, o dono): contorno, nenhum fundo, desenho grosso ---------- */
.painel-body .rank__l--toque { background: none; border-color: var(--contorno); }
@media (hover: hover) { .painel-body .rank__l--toque:hover { background: var(--preenche-suave); } }
.painel-body .rank__n { background: none; border: 1.5px solid var(--contorno-forte); }
.painel-body .rank__l > svg { stroke-width: 2.4; }
.painel-body .etiqueta--desenho { gap: 7px; }
.painel-body .etiqueta--desenho::before { display: none; }
.painel-body .etiqueta--desenho > svg { flex: none; color: var(--text-2); }
.painel-body .etiqueta--doeu > svg { color: var(--urg-1); }
.painel-body .etiqueta--pulou > svg { color: var(--urg-2); }
.painel-body .etiqueta--feito > svg { color: var(--urg-ok); }
.painel-body .sec:has(.rank) > .sec__topo > .sec__ic { background: none; border-color: var(--contorno); }
.painel-body .sec:has(.rank) > .sec__topo > .sec__ic svg { stroke-width: 2.4; }

/* O que a Tryzen fez (0187) e quem tem aviso: o molde do resumo de uma execucao (ag-res), em blocos */
.trab { display: grid; gap: 18px; }
.trab-parte { display: grid; gap: 10px; }
.trab-parte .ag-res__topo svg { width: 14px; height: 14px; }
.trab-parte .ag-res__linhas svg { width: 18px; height: 18px; }
.trab-parte .ag-res__linhas b { font-weight: 600; }
.trab-toque { cursor: pointer; }
.trab-pe { margin: 0; }
.coach-risco { padding-top: 14px; }
.coach-risco__l > span { flex: 1; min-width: 0; }
.coach-risco__l small { display: block; margin-top: 1px; font-size: 12px; }
.coach-risco__l .btn { flex: none; }
.coach-publicar { justify-content: flex-end; }

/* O calendario dos dias com registro (05/11/2026): o verde e so o dia que teve registro */
.nut-cal { margin: 12px 0 0; }
.nut-cal__grade { display: grid; grid-template-columns: repeat(7, minmax(0, 36px)); gap: 5px; margin-bottom: 8px; }
.nut-cal__s { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-3); }
.nut-cal__d { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--contorno); font-size: 12px; color: var(--text-3); }
.nut-cal__d.is-fora { border-color: transparent; }
.nut-cal__d.is-com { background: var(--dsc-verde, #0AB951); border-color: transparent; color: #06210F; font-weight: 600; }

/* Campo de data: quem abre e o calendario da Tryzen (data-tryzen.js), com o desenho da casa no lugar do icone do navegador */
.painel-body input[type="date"]::-webkit-calendar-picker-indicator, .cal-campo input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
input[type="date"].field__input { cursor: pointer; padding-right: 40px; background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 9.5h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
input[type="date"].field__input::-webkit-calendar-picker-indicator { display: none; }


/* ---------- os galhos como abas sublinhadas no topo (teste de 05/11/2026) ----------
   As abas do teste foram a parte que o dono aprovou ("facilitou o entendimento do site").
   06/11/2026, o dono: as abas ficam SEMPRE no topo, tambem com a lateral aberta, e o
   botao "Proximo: ..." do fim da tela saiu (trilha.js). */
@media (min-width: 900px) {
  .painel .painel__galhos-cel { display: block; }
  /* 07/11/2026, o dono: "faz ficar um pouco mais para baixo". O botao redondo da Tryzen desce junto, na mesma linha */
  .painel .painel__galhos-cel { margin-top: 16px; }
  .painel:has(.painel__galhos-cel) .ia-botao { top: 30px; }
}
.painel__galhos-cel { margin: 0 0 20px; }
.galho-abas { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--contorno-dentro); }
.galho-abas::-webkit-scrollbar { display: none; }
.galho-aba { flex: none; position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 14px; color: var(--text-3); cursor: pointer; white-space: nowrap; }
.galho-aba:hover { color: var(--text); }
.galho-aba.is-on { color: var(--text); font-weight: 600; border-bottom-color: var(--text); }
.galho-aba__ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--urg-2); }

/* ---------- Seu tempo: o grafico no molde do Cursor (tempo-grafico.js) ---------- */
.tg { display: grid; gap: 12px; }
.tg-quadro { position: relative; padding: 20px 16px 16px; border-radius: 4px; background: color-mix(in srgb, var(--text) 3%, var(--bg)); border: 1px solid var(--contorno-dentro); }
.tg-exemplo { position: absolute; top: 12px; right: 12px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.tg-troca { display: flex; justify-content: center; gap: 4px; margin-top: 12px; }
.tg-legenda { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text); }
.tg-legenda > span { color: var(--text-3); }
.tg-tabela { margin-top: 28px; }
.tg-tr { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 12px; padding: 10px 0; font-size: 14px; border-bottom: 1px solid var(--contorno-dentro); }
.tg-tr > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.tg-tr--cab { padding-top: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tg-tr--total { font-weight: 600; border-bottom: 0; }
.tg-nota { margin: 12px 0 0; font-size: 12px; color: var(--text-3); }
@media (max-width: 899px) {
  .tg { grid-template-columns: minmax(0, 1fr); }
  .tg-tabela { max-width: none; }
  .tg-tr { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); font-size: 12px; gap: 6px; }
}

/* a mira do Seu tempo: tracejado ate os eixos, valor marcado no eixo, linha da Tryzen no verde */


/* ---------- a Intelligence na lateral (05/11/2026): o botao do canto e a coluna da direita ---------- */
.ia-botao { position: fixed; top: 14px; right: 18px; z-index: 40; display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border-radius: 50%; border: 1px solid var(--contorno-dentro); background: var(--bg); color: var(--text); cursor: pointer;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--text) 8%, transparent); transition: transform .15s ease, border-color .15s ease; }
.ia-botao[hidden] { display: none; }
.ia-botao:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--text) 28%, transparent); }
.ia-botao svg { width: 18px; height: 18px; }
.ia-botao__ponto { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--urg-2); box-shadow: 0 0 0 2px var(--bg); display: none; }
.ia-botao.is-pede .ia-botao__ponto { display: block; }
.painel.is-ia .ia-botao { display: none; }
.ia-lado { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; display: flex; flex-direction: column; width: min(420px, 100vw);
  background: var(--bg); border-left: 1px solid var(--contorno-dentro); box-shadow: -12px 0 32px color-mix(in srgb, var(--text) 6%, transparent);
  animation: iaEntra .28s cubic-bezier(.23, 1, .32, 1); }
.ia-lado[hidden] { display: none; }
@keyframes iaEntra { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ia-lado { animation: none; } }
@media (min-width: 900px) { .painel.is-ia .painel__main { margin-right: min(420px, 100vw); } }
.ia-lado__topo { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--contorno-dentro); flex: none; }
/* a silhueta do corredor da logo, no verde da marca (o mesmo #0AB951 das orbitas) */
.ia-lado__marca { display: grid; place-items: center; width: 22px; height: 28px; color: #0AB951; }
.ia-lado__marca svg { width: auto; height: 26px; }
.ia-lado__nome { font-size: 14px; font-weight: 600; }
.ia-lado__acoes { margin-left: auto; display: inline-flex; gap: 2px; }
.ia-lado__b { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.ia-lado__b:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.ia-lado__b svg { width: 17px; height: 17px; }
.ia-lado__chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ia-lado__chat > .agente { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; padding: 0 14px 12px; max-width: none; }
.ia-lado__chat .agente-lista { flex: 1; overflow-y: auto; padding-top: 12px; }
.ia-lado__chat .agente--vazio .agente-abertura { flex: 1; padding: 24px 0 12px; }
.ia-lado__chat .agente-horizonte { display: none; }
.ia-lado__chat .agente-abertura__titulo { transform: scale(.7); }
.ia-lado__chat .agente-pe { position: static; margin-top: auto; }
.ia-lado__chat .agente-rodape { display: none; }
/* os avisos do canto saem de baixo da lateral quando ela abre */
@media (min-width: 900px) { .painel.is-ia .topo-avisos { right: calc(min(420px, 100vw) + 20px); } }
/* no celular a lateral cobre a tela inteira, por cima da barra do topo, e o botao fica ao lado do avatar */
.ia-lado { z-index: 300; }
@media (max-width: 899px) {
  .ia-botao { top: 10px; right: 64px; width: 34px; height: 34px; box-shadow: none; }
  .ia-lado { width: 100vw; border-left: 0; }
}
/* o botao do canto com a silhueta do corredor, no verde da marca */
.ia-botao { color: #0AB951; }
.ia-botao svg { width: auto; height: 20px; }
@media (max-width: 899px) { .ia-botao svg { height: 18px; } }
.ia-lado__chat .agente--vazio .agente-abertura { justify-content: flex-start; flex: 0 0 auto; min-height: 0; padding-top: 4px; }
.ia-lado__chat .agente--vazio:has(.ia-dita) .agente-exemplos { justify-content: flex-start; margin: 4px 0 0 32px; }
.ia-lado__chat .agente--vazio:has(.ia-dita) .agente-abertura__marca,
.ia-lado__chat .agente--vazio:has(.ia-dita) .agente-abertura__titulo,
.ia-lado__chat .agente--vazio:has(.ia-dita) .agente-abertura__sub { display: none; }
/* na lateral os exemplos nao ficam por baixo da caixa de texto */
.ia-lado__chat .agente--vazio .agente-abertura { padding-bottom: 16px; overflow-y: auto; }
.ia-lado__chat .agente-pe { position: relative; margin-top: 0; padding-top: 8px; background: var(--bg); }
.ia-lado__chat .agente-barra { margin-top: 0; }
/* a conversa vazia da lateral: a mensagem da Tryzen no topo, os exemplos embaixo dela, a caixa no pe */
.ia-lado__chat > .agente { justify-content: flex-start; }
.ia-lado__comeco { flex: 1; min-height: 0; overflow-y: auto; padding: 0 0 12px; }
.ia-lado__comeco .agente-exemplos { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 8px 0 0 32px; }
/* a Tryzen comeca a conversa (06/11/2026): quem fala, o texto no formato das respostas e as respostas prontas */
.ia-dita { margin: 16px 0 8px; animation: iaDita .35s cubic-bezier(.23, 1, .32, 1) both; }
@keyframes iaDita { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .ia-dita { animation: none; } }
.ia-dita__quem { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; }
.ia-dita__quem b { font-weight: 600; }
.ia-dita__quem span:last-child { color: var(--text-3); font-size: 12px; }
.ia-dita__logo { display: grid; place-items: center; width: 22px; height: 24px; color: #0AB951; }
.ia-dita__logo svg { width: auto; height: 20px; }
.ia-dita__balao { margin: 0 0 0 30px; }
.ia-dita__balao p { margin: 0; }
.ia-dita__prontas { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 30px; }
.ia-lado__comeco .agente-exemplos { margin-left: 30px; }
/* o texto da Tryzen quebra dentro da lateral (o balao herdava a largura cheia e passava da borda) */
.ia-dita__balao { width: auto; max-width: calc(100% - 30px); box-sizing: border-box; overflow-wrap: anywhere; }
.ia-lado__comeco, .ia-lado__chat .agente-lista { overflow-x: hidden; }
/* a logo centralizada (06/11/2026): a classe base tem margem a direita, feita pra logo antes de um texto */
.ia-botao .zentry-logo, .ia-lado__marca .zentry-logo, .ia-dita__logo .zentry-logo { display: block; margin: 0; vertical-align: 0; color: #0AB951; }

/* ============================================================
   O Resumo em conversa e o comprovante (06/11/2026)
   Molde do "Personal Finance" do Claude: cartao de perguntas que
   rola de lado, frase com o numero em negrito, tabela de cabecalho
   forte e linhas finas, e o arco das categorias de ponta redonda.
   ============================================================ */
.fin-hub { background: var(--bg); border: 1px solid var(--border-soft); border-radius: 22px; padding: 18px 18px 16px; margin-bottom: 14px; }
.fin-hub__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fin-hub__t { font-size: 17px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 2px; }
/* 06/11/2026: grade que quebra linha; a faixa que rolava de lado cortava o ultimo cartao */
.fin-perg__trilho { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fin-perg__trilho--1 { grid-template-columns: minmax(0, 1fr); }
.fin-perg__trilho--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fin-perg__trilho--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .fin-perg__trilho--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fin-perg__c { min-width: 0; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  text-align: left; padding: 14px 14px 16px; border-radius: 16px; border: 0; background: var(--surface); color: var(--text); cursor: pointer;
  font: inherit; transition: transform .18s var(--ease, ease), background-color .18s; }
.fin-perg__c:hover { background: color-mix(in srgb, var(--text) 5%, var(--surface)); }
.fin-perg__c:active { transform: scale(.98); }
.fin-perg__c:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fin-perg__ic { color: var(--text); display: inline-flex; }
.fin-perg__t { font-size: 15px; line-height: 1.35; font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 520px) { .fin-perg__trilho, .fin-perg__trilho--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fin-perg__c { min-height: 108px; } .fin-perg__t { font-size: 14px; } }

/* a frase e a tabela */
.fin-conversa { display: grid; gap: 12px; }
.fin-conversa__frase { font-size: 15px; line-height: 1.5; margin: 0; color: var(--text); }
.fin-conversa__frase b { font-weight: 700; }
.fin-tab { overflow-x: auto; }
.fin-tab table { width: 100%; border-collapse: collapse; font-size: 15px; }
.fin-tab th { text-align: left; font-weight: 700; padding: 0 12px 10px 0; border-bottom: 1px solid var(--border); color: var(--text); }
.fin-tab td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--border-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-tab td:first-child { white-space: normal; }
.fin-tab tr:last-child td { border-bottom: 0; }
.fin-tab--atraso td:nth-child(2) { color: var(--warn); }

/* o arco das categorias: as cinco cores (verde e azul sao as series validadas; o amarelo e o de custo) */
.fin-cor-1 { --c: var(--serie-1, #24913E); }
.fin-cor-2 { --c: var(--serie-2, #007AFF); }
.fin-cor-3 { --c: #D18A00; }
.fin-cor-4 { --c: #D9558B; }
.fin-cor-5 { --c: #A3A39A; }
:root[data-tema="escuro"] .fin-cor-3 { --c: #E8B62C; }
:root[data-tema="escuro"] .fin-cor-4 { --c: #E57AA6; }
:root[data-tema="escuro"] .fin-cor-5 { --c: #8C8C86; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .fin-cor-3 { --c: #E8B62C; }
  :root:not([data-tema="claro"]) .fin-cor-4 { --c: #E57AA6; }
  :root:not([data-tema="claro"]) .fin-cor-5 { --c: #8C8C86; }
}
.fin-arco { position: relative; max-width: 340px; margin: 4px auto 0; background: var(--surface-2, var(--bg)); border-radius: 18px; padding: 22px 22px 14px; }
.fin-arco__svg { display: block; width: 100%; height: auto; overflow: visible; }
.fin-arco__p { fill: none; stroke: var(--c); stroke-width: 16; stroke-linecap: round; }
.fin-arco__meio { position: absolute; left: 0; right: 0; bottom: 16px; display: grid; justify-items: center; gap: 2px; }
.fin-arco__meio b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fin-ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 9px; vertical-align: 1px; }

/* soltar o comprovante */
.fin-solta { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; border: 1.5px dashed var(--contorno, var(--border)); background: var(--surface-2, var(--bg));
  cursor: pointer; transition: border-color .18s, background-color .18s; }
.fin-solta:hover, .fin-solta.is-sobre { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface-2, var(--bg))); }
.fin-solta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fin-solta__ic { flex: none; color: var(--text); display: inline-flex; }
.fin-solta__txt { flex: 1; min-width: 0; }
.fin-solta__t { font-size: 15px; font-weight: 600; margin: 0 0 2px; }
.fin-solta__b { flex: none; pointer-events: none; }
.fin-solta__nota { margin: 8px 2px 0; }
@media (max-width: 560px) { .fin-solta { flex-wrap: wrap; } .fin-solta__b { width: 100%; justify-content: center; } }

/* o que a leitura achou */
.fin-lido { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--surface-2, var(--bg)); }
.fin-lido__img { flex: none; width: 64px; height: 96px; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--surface); }
.fin-lido__img--pdf { display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--text-3); }
.fin-lido__corpo { flex: 1; min-width: 0; display: grid; gap: 10px; }
.fin-lido__t { font-size: 15px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; }
.fin-lido__t--ok { color: var(--accent-texto, var(--accent)); }
.fin-lido__linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fin-lido__linhas li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.fin-lido__linhas svg { flex: none; color: var(--text-3); }
.fin-lido__achou { margin: 0; font-size: 15px; line-height: 1.45; }
.fin-lido__pensa { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--text) 18%, transparent); border-top-color: var(--accent); animation: fin-gira .8s linear infinite; }
@keyframes fin-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fin-lido__pensa { animation: none; } }
.fin-clipe { display: inline-flex; align-items: center; gap: 6px; }
.fin-lido__outras { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.fin-lido__outras .coach-chip { flex: none; white-space: nowrap; }
@media (max-width: 560px) {
  .fin-lido { gap: 10px; padding: 12px; }
  .fin-lido__img { width: 44px; height: 66px; }
  .fin-lido .secao__acoes { flex-wrap: wrap; }
  .fin-lido [data-fin="comp-baixa"] { width: 100%; justify-content: center; }
}

/* ============================================================
   A aba Hoje do Inicio, so no computador (06/11/2026)
   Duas colunas no molde do HubSpot: o que pede voce a esquerda,
   o contexto a direita, os numeros embaixo. A aba so existe a partir
   de 1024 px (coach.js, COMPUTADOR), e este bloco so vale ali.
   ============================================================ */
@media (min-width: 1024px) {
  .coach-topo__data { margin: 0 0 -6px; letter-spacing: .02em; }
  /* a aba Hoje usa a largura do monitor: as duas colunas nao cabem nos 980 px das outras abas */
  .aba-galho[data-galho-mostra="hoje"] { max-width: 1360px; }
  .sec--hoje > .sec__topo { display: none; }
  .sec--hoje > .dobra__corpo { padding-top: 0; }
  .hoje { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 20px; align-items: start; margin-top: 8px; }
  .hoje__principal, .hoje__lado { display: grid; gap: 16px; min-width: 0; }
  .hoje__numeros { grid-column: 1 / -1; margin-top: 8px; }
  .hoje__numeros .coach-ind { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 12px; }
  .hoje-cartao { padding: 18px 20px; border: 1px solid var(--border-soft); border-radius: var(--r-card); background: var(--cartao, var(--surface)); min-width: 0; }
  .hoje-cartao__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .hoje-cartao__titulo { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
  .hoje-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 6px; border-radius: var(--r-pill);
    background: var(--preenche-suave); font-size: 12px; font-weight: 600; color: var(--text-2); vertical-align: 2px; }
  .hoje-lista { list-style: none; margin: 0; padding: 0; display: grid; }
  .hoje-l { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--border-soft); }
  .hoje-l:first-child { border-top: 0; padding-top: 4px; }
  .hoje-l__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--preenche-suave); color: var(--text-2); }
  .hoje-l__ic svg { width: 18px; height: 18px; }
  .hoje-l--u1 .hoje-l__ic { color: var(--urg-1); }
  .hoje-l--u2 .hoje-l__ic { color: var(--urg-2); }
  .hoje-l__txt { display: grid; gap: 3px; min-width: 0; }
  .hoje-l__txt b { font-size: 15px; font-weight: 600; color: var(--text); }
  .hoje-l__txt span { font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
  .hoje-l__acao .btn { min-height: 34px; white-space: nowrap; }
  .hoje-lista--curta .hoje-l { padding: 10px 0; }
  .hoje-vazio { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: 14px; color: var(--text-2); }
  .hoje-vazio svg { flex: none; width: 22px; height: 22px; color: var(--text-3); }
  .hoje-vazio b { color: var(--text); font-weight: 600; }
  .hoje-feito { margin: 0 0 12px; }
  .hoje__lado .coach-linhas { margin: 0; }
}
@media (min-width: 1600px) {
  .hoje { grid-template-columns: minmax(0, 1.8fr) minmax(340px, 1fr); gap: 24px; }
}

/* ============================================================
   07/11/2026, o dono: o "AT" sai do canto de cima do celular; no topo
   fica so o logo da Tryzen. O perfil abre pela lateral: com o menu
   aberto, o cartao da conta aparece no pe dele, como no computador.
   ============================================================ */
@media (max-width: 899px) {
  .painel-body .painel:not(.is-menu) .painel__pe .conta { display: none; }
  .painel-body .painel.is-menu .painel__pe .conta { position: fixed; z-index: 97; left: 12px; bottom: calc(var(--safe-bottom, 0px) + 14px);
    width: calc(min(292px, 84vw) - 24px); }
  .painel-body .painel.is-menu .conta__chip { width: 100%; justify-content: flex-start; gap: 10px; padding: 8px 10px; border-radius: var(--r); background: var(--preenche-suave); }
  .painel-body .painel.is-menu .conta__txt { display: grid; text-align: left; }
  .painel-body .painel.is-menu .conta__menu { position: absolute; top: auto; bottom: calc(100% + 6px); left: 0; right: auto; width: 100%; }
  .painel-body .painel.is-menu .painel__nav { padding-bottom: calc(var(--safe-bottom, 0px) + 84px); }
}


/* 07/11/2026: a frase e o Resolver tudo do Hoje sao os de "Quem precisa de voce agora" (tarefas__topo); embaixo, o briefing */
@media (min-width: 1024px) {
  .hoje-resolve { margin-bottom: 14px; }
  .hoje-barra { margin: 0 0 12px; }
  .hoje-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 8px; padding: 0 0 14px; border-bottom: 1px solid var(--border-soft); }
  .hoje-legenda li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
  .hoje-legenda b { font-weight: 600; color: var(--text); }
  .hoje-legenda + .hoje-lista .hoje-l:first-child { padding-top: 14px; }
}

/* ============================================================
   07/11/2026, o dono: "menos palavras, mais desenho, sem repetir".
   Todo Resolver segue o Resolver tudo do Inicio (verde cheio). No
   computador, a frase que explica cada secao e a pagina vira a dica
   (title) do titulo: o desenho e o titulo ficam, o paragrafo sai.
   ============================================================ */
.brf-tarefas .tarefas__resolver { color: var(--on-accent, #fff); margin: 0; }
.brf-tarefas .tarefas__frase { font-size: 15px; font-weight: 600; }
@media (min-width: 1024px) {
  .painel-body .sec__sobre, .painel-body .dobra[open] > .dobra__cabeca .sec__sobre { display: none; }
  .painel-body .painel__sobre { display: none; }
}

/* ============================================================
   Seu tempo no padrao da Tryzen (07/11/2026, pedido do dono)
   Saiu a faixa escura de malha (molde do Cursor). Ficam: tres numeros
   em cartoes com contorno e desenho, o grafico num cartao igual aos do
   painel com a escala que acompanha o numero, a troca do periodo em
   pilulas (coach-chip) e a tabela no mesmo cartao. Verde so na linha
   da Tryzen e no numero que voltou pra voce.
   ============================================================ */
.tg-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.tg-n { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic rot" "v v" "l l"; align-items: center; gap: 6px 10px;
  padding: 16px; border: 1px solid var(--border-soft); border-radius: var(--r-card); background: var(--cartao, var(--surface)); min-width: 0; }
.tg-n__ic { grid-area: ic; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--preenche-suave); color: var(--text-2); }
.tg-n__ic svg { width: 18px; height: 18px; }
.tg-n__rot { grid-area: rot; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.tg-n__v { grid-area: v; margin-top: 4px; font-size: var(--fs-stat, 30px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.tg-n__l { grid-area: l; font-size: 12.5px; color: var(--text-3); }
/* o texto do cartao com contorno fica na cor do texto: verde so em quem faz (regra do dono de 12/10) */

.tg-quadro { padding: 16px 16px 10px; border: 1px solid var(--border-soft); border-radius: var(--r-card); background: var(--cartao, var(--surface)); }
.tg-quadro__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 8px; }
.tg-quadro__titulo { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.tg-quadro .gx { margin: 0; }
.tg-quadro .tg-exemplo { position: static; padding: 2px 8px; border: 1px solid var(--border-soft); border-radius: var(--r-pill); font-size: 11px; letter-spacing: .02em; text-transform: none; color: var(--text-3); }
.tg-troca { margin: 0; justify-content: flex-end; }
.tg-troca .coach-chip { font-size: 13px; }

.tg-tabela { margin-top: 14px; padding: 6px 16px; border: 1px solid var(--border-soft); border-radius: var(--r-card); background: var(--cartao, var(--surface)); }
.tg-tr { padding: 11px 0; border-bottom-color: var(--border-soft); }
.tg-tr--cab { padding-top: 10px; font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--text-3); }
.tg-nota { margin-top: 8px; cursor: help; }
.tg-legenda { font-size: 13px; color: var(--text-3); }
@media (max-width: 720px) {
  .tg-numeros { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tg-n { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic rot v"; padding: 12px 14px; }
  .tg-n__v { margin: 0; font-size: 20px; text-align: right; }
  .tg-n__l { display: none; }
  .tg-quadro__topo { flex-direction: column; align-items: flex-start; }
  .tg-troca { justify-content: flex-start; }
}

/* 07/11/2026, o dono: "Sem a Tryzen" em laranja e o que e bom em verde (Com a Tryzen, Voltou pra voce).
   O laranja nao existia no painel: dois tons, como as series de css/paineis.css (claro e escuro). */
:root { --serie-laranja: #D2601A; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --serie-laranja: #F28A45; } }
:root[data-tema="escuro"] { --serie-laranja: #F28A45; }
/* so o desenho leva a cor: o fundo do circulo fica o neutro de sempre (o dono, 07/11/2026) */
.tg-n--sem .tg-n__ic { color: var(--serie-laranja); }
.tg-n--bom .tg-n__ic { color: var(--serie-1); }
.tg-tr:not(.tg-tr--cab) > span:nth-child(3) { color: var(--serie-laranja); }
.tg-tr:not(.tg-tr--cab) > span:nth-child(4), .tg-tr:not(.tg-tr--cab) > span:nth-child(5) { color: var(--serie-1); }

/* os cartoes e as planilhas de texto (hs-*), trazidos do teste so automatico: aqui so a aba Treinos usa */
/* ============================================================
   O teste "so automatico" no molde do Marketing Studio do HubSpot
   (07/11/2026). Medidas lidas do print do dono (1536 px de largura):
   area util ~1096 px; grade 60/40 com 26 px de vao; titulo de secao
   26 px com o icone num circulo de 30 px; linhas do cartao largo com
   ~20 px de respiro e fio entre elas; coluna estreita com a pilula
   "ao vivo" (34 px) e a atividade recente (texto 15 px + linha mono
   13 px). Muito espaco neutro: fundo do cartao igual ao da pagina,
   so o contorno separa. So no computador; o celular nao tem a aba.
   ============================================================ */
@media (min-width: 1024px) {

  .hs { display: grid; gap: 18px; margin-top: 18px; }
  .hs-sec { display: flex; align-items: center; gap: 12px; }
  .hs-sec__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--preenche-suave); color: var(--urg-2); flex: none; }
  .hs-sec__ic svg { width: 18px; height: 18px; }
  /* a fonte dos titulos e a do painel (a mesma dos cartoes do Hoje), sem tamanho nem peso proprios */
  .hs-h2 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
  .hs-sec--atletas { margin-top: 18px; align-items: baseline; gap: 14px; }
  .hs-meta { font-size: 13px; letter-spacing: .02em; color: var(--text-3); }
  .hs-h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--text); }

  .hs-grade { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr); gap: 26px; align-items: start; }
  .hs-cartao { padding: 6px 22px; border: 1px solid var(--border-soft); border-radius: var(--r-card); background: var(--bg); min-width: 0; }
  .hs-lado .hs-cartao { padding: 18px 20px; }
  .hs-lado { display: grid; gap: 14px; min-width: 0; }

  .hs-linhas { list-style: none; margin: 0; padding: 0; }
  .hs-l { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px 0; border-top: 1px solid var(--border-soft); }
  .hs-l:first-child { border-top: 0; }
  .hs-l__ic { display: grid; place-items: center; color: var(--text-3); }
  .hs-l__ic svg { width: 18px; height: 18px; }
  .hs-l--u1 .hs-l__ic { color: var(--urg-1); }
  .hs-l--u2 .hs-l__ic { color: var(--urg-2); }
  .hs-l__txt { display: grid; gap: 4px; min-width: 0; }
  .hs-l__txt b { font-size: 16px; line-height: 1.35; font-weight: 500; color: var(--text); }
  .hs-l__txt span { font-size: 14px; color: var(--text-3); }
  .hs-l__acao .btn { white-space: nowrap; }

  .hs-vivo { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 16px; border: 1px solid var(--border-soft); border-radius: var(--r-pill);
    background: var(--bg); font: inherit; color: var(--text); text-align: left; cursor: pointer; }
  .hs-vivo:hover { border-color: var(--border); }
  .hs-vivo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .hs-vivo__ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--serie-1); flex: none; }
  .hs-vivo__rot { font-size: 11.5px; letter-spacing: .08em; color: var(--serie-1); }
  .hs-vivo__txt { flex: 1; font-size: 14px; color: var(--text-2); text-align: center; }
  .hs-vivo__seta { color: var(--text-3); font-size: 18px; line-height: 1; }
  .hs-grupo .hoje-legenda { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

  .hs-ativs { list-style: none; margin: 0; padding: 0; }
  .hs-ativ { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--border-soft); }
  .hs-ativ:first-child { border-top: 0; padding-top: 6px; }
  .hs-ativ__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--preenche-suave); color: var(--text-2); }
  .hs-ativ__ic svg { width: 17px; height: 17px; }
  .hs-ativ__txt { display: grid; gap: 3px; min-width: 0; }
  .hs-ativ__txt b { font-size: 15px; line-height: 1.35; font-weight: 500; color: var(--text); }
  .hs-ativ__txt small { font-size: 12.5px; letter-spacing: .02em; color: var(--text-3); }
  .hs .coach-ind { margin-top: 0; }
}

/* teste so automatico (07/11/2026): as planilhas de texto do Hoje. Uma linha por assunto, nunca por atleta. */
@media (min-width: 1024px) {
  .hs-tab { display: grid; }
  .hs-tab__l { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 16px; align-items: center; padding: 14px 0;
    border: 0; border-top: 1px solid var(--border-soft); background: none; font: inherit; color: inherit; text-align: left; width: 100%; }
  .hs-tab__l:first-child, .hs-tab__l--cab + .hs-tab__l { border-top-color: var(--border-soft); }
  .hs-tab__l--cab { padding: 12px 0 8px; border-top: 0; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
  .hs-tab__nome { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 15px; color: var(--text); }
  .hs-tab__nome b { font-weight: 500; }
  .hs-tab__obs { font-size: 13.5px; line-height: 1.45; color: var(--text-3); }
  .hs-tab__v { font-size: 15px; font-weight: 600; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .hs-tab--pede .hs-tab__l { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; }
  .hs-tab--fez .hs-tab__l { grid-template-columns: minmax(0, 1fr) auto auto; padding: 11px 0; }
  .hs-tab--fez .hs-tab__l:first-child { border-top: 0; }
  .hs-tab--fez .hs-tab__obs { font-size: 12px; }
  .hs-tab .hs-ativ__ic { flex: none; width: 30px; height: 30px; }
  .hs > .hs-tab { padding: 0 22px 6px; border: 1px solid var(--border-soft); border-radius: var(--r-card); }
  .hs > .hs-tab .hs-tab__l { grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1.4fr); }
  .hs-tab__l--toque { cursor: pointer; }
  .hs-tab__l--toque:hover .hs-tab__nome, .hs-tab__l--toque:hover > span:first-child { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
  .hs-tab__l--toque:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .hs > .hs-tab .hs-tab__v { text-align: left; }
}

@media (min-width: 1024px) { .hs-resolve { margin: 14px 0 4px; } }

/* Treinos no computador em lote (07/11/2026): as planilhas por tipo e por dia, so as excecoes com nome */
@media (min-width: 1024px) {
  .hs.tr { margin-top: 8px; }
  .tr .hs-grade { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); }
  .tr .hs-lado > .hs-cartao { padding: 18px 22px; }
  .tr-lote .hoje-legenda { margin-bottom: 4px; }
  .tr-tipos .hs-tab__l { grid-template-columns: minmax(0, 1.4fr) 70px 70px 80px minmax(0, 1fr); }
  .tr-tipos .hs-tab__l--cab > span:nth-child(n+2):nth-child(-n+4) { text-align: right; }
  .tr-olhar .hs-tab__l { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr) auto; }
  .tr-dias .hs-tab__l { grid-template-columns: minmax(0, 1fr) 70px 80px; }
  .tr-dias .hs-tab__l--cab > span:nth-child(n+2) { text-align: right; }
  .tr-cobertura { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--border-soft); font-size: 14px; color: var(--text-2); }
  .tr-cobertura > span:nth-child(2) { flex: 1; }
  .hs-l__ic.hs-l--u2 { color: var(--urg-2); }
  .tr > .abre { margin-top: 4px; }
}

/* ============================================================
   A barra de cima do computador (07/11/2026, print do dono): nome da
   pagina, busca no meio com o atalho, Documentos, Perguntar e o botao
   redondo da Tryzen dentro dela (antes ele ficava solto, por cima do
   conteudo). Presa no alto enquanto a pagina rola. So no computador.
   ============================================================ */
@media (min-width: 1024px) {
  .barra-topo { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 460px) minmax(0, 1fr); align-items: center; gap: 16px;
    min-height: 56px; margin: calc(-1 * var(--gap-md, 16px)) calc(-1 * var(--gap-lg, 24px)) 18px; padding: 8px var(--gap-lg, 24px);
    background: var(--bg); border-bottom: 1px solid var(--border-soft); }
  .barra-topo__titulo { margin: 0; font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barra-topo__busca { position: relative; }
  .barra-topo__busca .coach-busca { margin: 0; }
  .barra-topo__busca .field__input { min-height: 38px; border-radius: 10px; font-size: 14px; }
  .barra-topo .barra-topo__busca .coach-busca .coach-busca__ir { display: none; }
  .barra-topo__acoes { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
  .barra-topo__acoes .btn { min-height: 34px; }
  .ia-botao:not(.ia-botao--barra) { display: none; }
  .barra-topo .ia-botao--barra { position: static; top: auto; right: auto; }
}
@media (min-width: 1500px) { .barra-topo { margin-left: calc(-1 * var(--gap-2xl, 40px)); padding-left: var(--gap-2xl, 40px); } }

/* os cartoes do Calendly, agora na aba Treinos (07/11/2026, teste do dono) */
/* ============================================================
   Calendly + HubSpot (07/11/2026): os cartoes das etapas do Hoje.
   Do Calendly: titulo, uma frase, tres linhas de "quem fez" ligadas por
   um fio vertical e a previa da tela num degrade suave embaixo. Do
   painel: a fonte, o contorno e o raio dos cartoes. O fundo do circulo
   do personagem e sempre neutro; so o desenho leva a cor (regra do dono).
   ============================================================ */
@media (min-width: 1024px) {
  .hs-sec--cl { margin-top: 18px; }
  .cl-etapas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .cl-cartao { display: flex; flex-direction: column; padding: 22px 22px 0; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 20px; background: var(--bg); min-width: 0; }
  .cl-frase { margin: 8px 0 16px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
  .cl-passos { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 14px; }
  .cl-passo { position: relative; display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.35; color: var(--text); }
  .cl-passo + .cl-passo::before { content: ''; position: absolute; left: 11px; top: -14px; width: 2px; height: 14px; background: var(--border-soft); }
  .cl-quem { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--preenche-suave); }
  .cl-quem svg { width: 14px; height: 14px; }
  .cl-quem--tryzen { color: #0AB951; }
  .cl-quem--tryzen .zentry-logo { width: auto; height: 14px; }
  .cl-quem--atleta { color: var(--serie-2); }
  .cl-quem--voce { color: var(--text); }
  .cl-previa { margin-top: auto; margin-inline: -22px; padding: 22px 22px 22px; min-height: 140px; display: grid; align-items: end;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--serie-1) 9%, transparent) 55%, color-mix(in srgb, var(--serie-1) 18%, transparent) 100%); }
  .cl-previa--acompanhar { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--serie-2) 8%, transparent) 55%, color-mix(in srgb, var(--serie-2) 16%, transparent) 100%); }
  .cl-janela { padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--bg); box-shadow: 0 8px 24px rgba(0, 0, 0, .06); }
  .cl-janela .hoje-legenda { border-bottom: 0; margin: 0; padding: 0; }
  .cl-janela .hoje-barra { margin-bottom: 10px; }
  .cl-msg__de { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; }
  .cl-msg__de .mono { margin-left: auto; font-size: 11.5px; color: var(--text-3); }
  .cl-msg__txt { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
  .cl-janela--res { display: flex; flex-wrap: wrap; gap: 8px; }
  .cl-res { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px; border-radius: 10px; background: var(--preenche-suave); font-size: 13px; color: var(--text-2); }
  .cl-res b { font-size: 18px; font-weight: 600; color: var(--text); }
  .cl-tempo__v { margin: 6px 0 12px; font-size: var(--fs-stat, 30px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--text); }
  .cl-tempo__vs { display: grid; gap: 8px; margin-bottom: 14px; }
  .cl-tempo__vs span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
  .cl-tempo__vs b { margin-left: auto; font-weight: 600; color: var(--text); }
  .cl-ponto { width: 8px; height: 8px; border-radius: 50%; }
  .cl-ponto--sem { background: var(--serie-laranja); }
  .cl-ponto--com { background: var(--serie-1); }
}
@media (min-width: 1024px) and (max-width: 1279px) { .cl-etapas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1024px) {
  .tr .hs-sec--cl { margin-top: 22px; }
  .cl-res__ic { display: inline-grid; place-items: center; color: var(--text-2); }
  .cl-res__ic svg { width: 16px; height: 16px; }
  .cl-app__topo { margin: 0 0 6px; font-size: 11.5px; letter-spacing: .04em; color: var(--text-3); }
  .cl-app__nome { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--text); }
  .cl-app__dados { margin: 0; font-size: 13px; color: var(--text-2); }
  .cl-previa--conferir { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--urg-2) 7%, transparent) 55%, color-mix(in srgb, var(--urg-2) 14%, transparent) 100%); }
  .cl-previa--publicar { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--serie-2) 8%, transparent) 55%, color-mix(in srgb, var(--serie-2) 16%, transparent) 100%); }
}

/* Atletas agrupados e o Calendly no comeco do Inicio (07/11/2026) */
@media (min-width: 1024px) {
  .atl-agr { margin-top: 16px; }
  .atl-agr .hs-cartao { padding: 18px 22px; }
  .atl-agr .hoje-barra { margin: 6px 0 4px; }
  .atl-sit .hs-tab__l { grid-template-columns: minmax(0, 1fr) 70px 60px minmax(0, 1.5fr) auto; }
  .atl-sit .hs-tab__l--cab > span:nth-child(2), .atl-sit .hs-tab__l--cab > span:nth-child(3) { text-align: right; }
  .atl-agr .coach-ind { margin: 10px 0 0; }
  .atl-agr__achar { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--text-3); }
  .atl-agr__achar svg { width: 16px; height: 16px; }
  .cl-inicio { margin: 4px 0 12px; }
  .cl-etapas--inicio { margin-bottom: 22px; }
  .hs-l__ic.hs-l--u1 { color: var(--urg-1); }
}

/* o briefing dos Treinos: o mesmo cartao do Inicio, na largura toda (07/11/2026) */
@media (min-width: 1024px) { .tr-briefing { margin-bottom: 0; } .tr .tr-lote .hs-h3 { margin-bottom: 4px; } }

/* o briefing dentro do Hoje (07/11/2026) */
@media (min-width: 1024px) { .hoje-briefing .brf-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cl-etapas--inicio { margin: 0 0 8px; } .hoje + .cl-inicio { margin-top: 26px; } }

/* Atletas na estrutura dos Treinos (07/11/2026) */
@media (min-width: 1024px) {
  .atl-agr .tr-lote .hoje-legenda { margin-bottom: 4px; }
  .atl-num .hs-tab__l { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 0; }
  .atl-num .hs-tab__l--cab > span:last-child { text-align: right; }
  .atl-agr .atl-agr__achar { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
  .atl-bem__l { grid-template-columns: minmax(0, 1fr); padding: 11px 0; }
  .atl-bem__l:first-child { border-top: 0; }
  .atl-bem__l .hs-l__ic { color: var(--serie-1); }
}

/* ============================================================
   Mais espaco neutro no Hoje (07/11/2026, pedido do dono). Sai a moldura
   de fora (era cartao dentro de cartao): os cartoes ficam soltos no fundo
   da pagina, com vao maior entre eles e mais respiro dentro de cada um.
   ============================================================ */
@media (min-width: 1024px) {
  .painel-body .sec.dobra.sec--hoje { border: 0; border-radius: 0; background: none; overflow: visible; }
  .sec--hoje > .dobra__corpo { padding: 0; }
  .hoje { gap: 32px; margin-top: 20px; }
  .hoje__principal, .hoje__lado { gap: 24px; }
  .hoje-cartao { padding: 26px 30px; }
  .hoje-cartao__topo { margin-bottom: 18px; }
  .hoje-l { padding: 18px 0; gap: 16px; }
  .hoje-resolve { margin-bottom: 20px; }
  .hoje-legenda { margin-bottom: 12px; padding-bottom: 18px; gap: 10px 24px; }
  .hoje__numeros { margin-top: 16px; }
  .hoje__numeros .coach-ind { gap: 16px; margin-top: 16px; }
  .hoje-briefing .brf-cartoes { gap: 16px; }
}

/* 07/11/2026, o dono: o layout nao pode trocar conforme o botao da lateral. A largura e a mesma em toda
   aba e em toda parte (antes so a parte Hoje ia a 1360 px e as outras voltavam pros 980). */
@media (min-width: 1024px) {
  .aba-galho, .aba-galho[data-galho-mostra], .aba-corpo--galho, .painel-body .aba-corpo { max-width: 1360px; }
}
/* o mesmo espaco neutro do Hoje nos Treinos e nos Atletas (07/11/2026) */
@media (min-width: 1024px) {
  .hs-grade { gap: 32px; }
  .hs-lado { gap: 24px; }
  .tr .hs-lado > .hs-cartao, .atl-agr .hs-cartao, .hs-lado .hs-cartao { padding: 26px 30px; }
  .hs.tr { margin-top: 20px; }
  .hs-tab__l { padding: 16px 0; }
}

/* 07/11/2026, o print do dono (Assessoria no celular): sem as abas do topo todas as partes aparecem juntas,
   e a coluna da grade (.aba-galho, sem colunas definidas) esticava ate a tabela mais larga, o "Relatorio do
   conjunto": a pagina ficava com 660 px num celular de 375. A coluna nunca passa da tela; o que for largo
   rola dentro do proprio cartao. */
.aba-galho { grid-template-columns: minmax(0, 1fr); }
.aba-galho > .sec, .aba-galho .dobra__corpo { min-width: 0; }

/* 07/11/2026, o dono: a Nutricao no computador na mesma identidade dos Atletas e dos Treinos (HubSpot, briefing,
   Calendly). Planilhas com o total por situacao, nenhuma lista de nomes; o individual e pergunta pra Tryzen. */
@media (min-width: 1024px) {
  .nut-num-tab .hs-tab__l { grid-template-columns: minmax(0, 1.3fr) 64px minmax(0, 1fr); }
  .nut-agr .nut-agr__achar { margin: 0; padding: 0; border-top: 0; }
  .nut-agr__achar > span { flex: 1; }
  .nut-agr__nota { margin: 12px 0 0; }
  .nut-agr .nut-agr__ler { margin-top: 6px; }
  .nut-agr + .cl-inicio { margin-top: 26px; }
}

/* 10/11/2026, o dono: "nao remova, apenas deixe mais proximo disso [o fundo do Gemini], pensando ainda na ideia
   de globo". O globo continua no mesmo lugar e do mesmo tamanho, mas perde a borda acesa: vira uma atmosfera,
   luz verde baixa e difusa em volta de um centro escuro, sem linha nenhuma. */
.agente-horizonte { box-shadow: none; filter: blur(34px);
  background: radial-gradient(closest-side, var(--bg) 0 66%, color-mix(in srgb, var(--accent) 10%, var(--bg)) 78%,
    color-mix(in srgb, var(--accent) 24%, transparent) 88%, color-mix(in srgb, var(--accent) 9%, transparent) 95%, transparent 100%); }
.agente-horizonte::after { content: ""; position: absolute; inset: -16%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, transparent 70%, color-mix(in srgb, var(--accent) 9%, transparent) 85%, transparent 100%); }

/* 10/11/2026, o dono, com o print da caixa de conversa do Claude: "na parte de falar com a IA, deixa exatamente
   desse jeito". So na tela da Intelligence (a lateral e o Studio ficam como estao): caixa retangular de cantos
   suaves, o texto ocupa a linha de cima e, embaixo, o + a esquerda e o microfone e o enviar a direita. Sem o
   brilho verde em volta; o foco so clareia o contorno. */
:is(.agente-pe:not(.ia-lado__chat .agente-pe), .agente-casa) > .agente-barra { flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 104px;
  padding: 12px 12px 10px 14px; border-radius: 18px; background: var(--bg-elev); box-shadow: 0 0 0 1px var(--border-soft); }
:is(.agente-pe:not(.ia-lado__chat .agente-pe), .agente-casa) > .agente-barra:focus-within { box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 28%, transparent); }
:is(.agente-pe:not(.ia-lado__chat .agente-pe), .agente-casa) > .agente-barra > .agente-barra__anexos { order: -2; }
:is(.agente-pe:not(.ia-lado__chat .agente-pe), .agente-casa) > .agente-barra > textarea { order: -1; flex: 0 0 100%; padding: 4px 2px 10px; font-size: 15px; min-height: 44px; }
:is(.agente-pe:not(.ia-lado__chat .agente-pe), .agente-casa) > .agente-barra > .agente-barra__mais { align-self: center; margin: 0 auto 0 -4px; width: 32px; height: 32px; padding: 6px; box-sizing: border-box; border-radius: 8px; }
:is(.agente-pe:not(.ia-lado__chat .agente-pe), .agente-casa) > .agente-barra > .voz-chat__botao { width: 32px; height: 32px; border-radius: 8px; color: var(--text-2); }
:is(.agente-pe:not(.ia-lado__chat .agente-pe), .agente-casa) > .agente-barra > .agente-barra__enviar { width: 32px; height: 32px; border-radius: 10px; }
:is(.agente-pe:not(.ia-lado__chat .agente-pe), .agente-casa) > .agente-barra > .agente-barra__enviar svg { width: 16px; height: 16px; }

/* 10/11/2026, a casa da Intelligence no molde do print do dono (a tela inicial do Claude): titulo com a logo,
   a caixa no meio, a linha fina embaixo, conversas recentes em cartoes e, a direita, as automacoes sugeridas
   pelas metricas dos relatorios. O globo de luz continua no fundo (pedido de 10/11). */
.agente--casa { position: relative; }
.agente--casa .agente-abertura.agente-casa { justify-content: flex-start; align-items: center; text-align: left; padding: clamp(48px, 24vh, 260px) 16px 40px; margin-bottom: 0; }
@media (min-width: 641px) { .agente--casa .agente-abertura.agente-casa { padding-bottom: 40px; } }
.agente-casa > :not(.agente-horizonte) { width: min(660px, 100%); }
.agente-casa__titulo { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 22px; font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500; letter-spacing: -.02em; line-height: 1.2; color: var(--text); text-align: center; }
.agente-casa__titulo .agente-abertura__marca { width: 26px; height: 36px; flex: none; filter: none; }
.agente-casa > .agente-barra { position: static; margin: 0; }
.agente-casa__linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 0; font-size: 14px; }
.agente-casa__link { all: unset; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text); border-radius: 8px; padding: 4px 6px; margin-left: -6px; }
.agente-casa__link:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.agente-casa__link:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.agente-casa__nome { color: var(--text-2); }
.agente-casa__recentes { margin-top: 64px; }
.agente-casa__rot { display: flex; justify-content: space-between; margin: 0 16px 12px; font-size: 14px; color: var(--text-2); }
.agente-casa__cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.agente-casa__cartao { all: unset; box-sizing: border-box; display: grid; gap: 4px; align-content: start; cursor: pointer; padding: 6px 6px 12px; border-radius: 14px;
  background: var(--bg-elev); box-shadow: 0 0 0 1px var(--border-soft); min-width: 0; }
.agente-casa__cartao:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 24%, transparent); }
.agente-casa__cartao:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.agente-casa__previa { display: grid; place-items: center; height: 72px; margin-bottom: 6px; border-radius: 10px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }
.agente-casa__previa svg { width: 18px; height: 26px; }
.agente-casa__cartao b { padding: 0 6px; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.agente-casa__cartao .xs { padding: 0 6px; }
.agente-casa__aviso { margin: 28px 16px 0; text-align: center; }

/* as automacoes sugeridas: o cartao a direita, como o cartao lateral do print */
.agente-sug { position: absolute; right: 24px; bottom: 32px; width: 300px; z-index: 2; padding: 16px; border-radius: 16px; text-align: left;
  background: var(--bg-elev); box-shadow: 0 0 0 1px var(--border-soft), 0 18px 40px -20px rgba(0, 0, 0, .6); }
.agente-sug__x { position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--text); color: var(--bg); cursor: pointer; }
.agente-sug__x svg { width: 14px; height: 14px; }
.agente-sug__topo { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--text); }
.agente-sug__ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.agente-sug__sub { margin: 6px 0 10px; }
.agente-sug__nota { margin: 0; }
.agente-sug__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: min(52vh, 460px); overflow-y: auto; }
.agente-sug__item { display: grid; gap: 4px; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--text) 4%, transparent); }
.agente-sug__classe { justify-self: start; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border-soft); color: var(--text-2); }
.agente-sug__classe--neg { color: var(--risco, #d14343); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--risco, #d14343) 45%, transparent); }
.agente-sug__classe--at { color: #d6b13a; box-shadow: inset 0 0 0 1px color-mix(in srgb, #d6b13a 45%, transparent); }
.agente-sug__titulo { font-size: 14px; font-weight: 600; color: var(--text); }
.agente-sug__ir { justify-self: start; margin-top: 4px; border: 0; cursor: pointer; font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 9px;
  background: var(--text); color: var(--bg); }
.agente-sug__ir:active { transform: scale(.97); }
/* tela que nao cabe o cartao ao lado: ele vai pra baixo das conversas */
@media (max-width: 1360px) {
  .agente-sug { position: relative; right: auto; bottom: auto; width: min(660px, calc(100% - 32px)); margin: 0 auto 32px; }
}
@media (max-width: 640px) { .agente-casa__cartoes { grid-template-columns: minmax(0, 1fr); } .agente-casa__recentes { margin-top: 40px; } }
/* 10/11/2026, o dono: "e sem esse fundo verde?". Na casa da Intelligence o fundo fica liso, como no print */
.agente--casa .agente-horizonte { display: none; }

/* 10/11/2026, a lateral de Conversas no molde do print do dono (a lateral do Claude): icones numa cor so,
   Nova conversa em destaque, Procurar, Automacoes e Studio com nome; "Recentes" numa lista so que recolhe. */
.lado-conv__nova { gap: 12px; min-height: 36px; font-size: 14.5px; color: var(--text); }
.lado-conv__nova svg { color: currentColor; }
.lado-conv__nova--criar { margin-bottom: 2px; background: color-mix(in srgb, var(--text) 7%, transparent); }
.lado-conv__nova--criar:hover { background: color-mix(in srgb, var(--text) 11%, transparent); }
.lado-conv__busca { margin: 4px 0 6px; height: 34px; padding: 0 10px; border: 0; border-radius: 9px; font: inherit; font-size: 14px; color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px var(--border-soft); outline: none; }
.lado-conv__busca:focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent); }
.lado-conv__rot { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin: 18px 0 4px; padding: 2px 10px;
  border-radius: 6px; font-size: 12.5px; color: var(--text-3); cursor: pointer; }
.lado-conv__rot:hover { color: var(--text-2); }
.lado-conv__rot:focus-visible { outline: 2px solid var(--accent-line); }
.lado-conv__seta { display: inline-grid; transition: transform .15s ease; }
.lado-conv__rot[aria-expanded="false"] .lado-conv__seta { transform: rotate(-90deg); }
.lado-conv__lista { margin-top: 0; }
.lado-conv__abrir { color: var(--text); padding-block: 7px; }
.lado-conv__todas { all: unset; box-sizing: border-box; width: 100%; padding: 7px 10px; border-radius: 10px; font-size: 14px; color: var(--text-3); cursor: pointer; }
.lado-conv__todas:hover { background: var(--surface); color: var(--text-2); }
@media (min-width: 900px) {
  .painel__lado[data-lado="trilho"] :is(.lado-conv__rot, .lado-conv__busca, .lado-conv__todas) { display: none; }
  .painel__lado[data-lado="trilho"] .lado-conv__nova--criar { background: none; }
}

/* 10/11/2026, o cartao das automacoes sugeridas no molde do cartao do presente (print do dono): a arte num bloco
   de cor no topo, o titulo, um texto curto e um botao claro. A lista abre no botao. */
.agente-sug { width: 248px; padding: 8px 8px 14px; border-radius: 14px; }
.agente-sug__arte { display: grid; place-items: center; height: 144px; border-radius: 10px; color: #f3f1ea;
  background: color-mix(in srgb, var(--accent) 62%, #0d1a12); }
.sug-arte { width: 150px; height: auto; overflow: visible; }
.agente-sug__cab { display: block; margin: 14px 6px 0; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--text); }
.agente-sug__texto { margin: 8px 6px 0; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.agente-sug__ver { margin: 14px 6px 0; border: 0; cursor: pointer; font: inherit; font-size: 14px; padding: 6px 12px; border-radius: 8px; background: #f3f1ea; color: #1a1a1a; }
.agente-sug__ver:hover { background: #fff; }
.agente-sug__ver:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.agente-sug .agente-sug__lista { margin: 12px 0 0; }

/* a caixa gira 360 graus (agente.js, ARTE_QUADROS); o bloco tem a textura de pontinhos do cartao de referencia */
.agente-sug__arte { background-image: radial-gradient(color-mix(in srgb, #fff 16%, transparent) 0.9px, transparent 1.3px);
  background-size: 6px 6px; background-color: color-mix(in srgb, var(--accent) 62%, #0d1a12); }
.sug-arte { width: 140px; }

/* a previa de documento nos cartoes de conversas recentes (molde dos "Artefatos recentes"): uma folha clara com o
   titulo e linhas, sobre uma segunda folha, cortada embaixo pelo cartao */
.agente-casa__previa { position: relative; overflow: hidden; height: 86px; align-items: start; place-items: start center; padding-top: 12px;
  background: color-mix(in srgb, #2a3644 55%, var(--bg-elev)); }
.agente-casa__previa::before { content: ""; position: absolute; top: 8px; left: 50%; width: 76%; height: 100%; transform: translateX(-46%) rotate(2deg);
  border-radius: 6px; background: color-mix(in srgb, #fff 18%, transparent); }
.agente-casa__papel { position: relative; display: grid; gap: 4px; align-content: start; width: 74%; height: 100%; padding: 10px 10px 0; box-sizing: border-box;
  border-radius: 6px 6px 0 0; background: #f7f6f2; color: #222; text-align: left; }
.agente-casa__papel b { font-family: Georgia, 'Times New Roman', serif; font-size: 10.5px; font-weight: 400; line-height: 1.25; padding: 0; color: #222;
  white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.agente-casa__papel i { font-style: normal; font-size: 7px; color: #888; }
.agente-casa__papel > span { display: block; height: 3px; border-radius: 2px; background: #d9d6ce; }
.agente-casa__papel > span:last-child { width: 70%; }

/* o balao NOVO do Tryzen Studio (10/11/2026, molde do aviso azul do print do dono): preso embaixo do nome, a seta apontando pra ele */
.agente-casa__linha { position: relative; }
.agente-dica { position: absolute; z-index: 3; top: calc(100% + 12px); right: 0; width: min(280px, 100%); padding: 12px 14px 14px; border-radius: 12px;
  background: #1d7fe0; color: #fff; text-align: left; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); }
.agente-dica::before { content: ""; position: absolute; top: -6px; right: 56px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.agente-dica__topo { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.agente-dica__novo { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px; background: rgba(255, 255, 255, .9); color: #1d7fe0; }
.agente-dica__x { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: #fff; cursor: pointer; margin-right: -6px; }
.agente-dica__x:hover { background: rgba(255, 255, 255, .15); }
.agente-dica__x:focus-visible { outline: 2px solid #fff; }
.agente-dica__texto { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.45; }

/* 10/11/2026, o dono: o calendario das Automacoes no MESMO desenho do calendario da landing de reuniao
   (reuniao-v5.css: .cal__mes-cab, .cal__nav, .cal__semana, .dia, .dia--livre, .dia.is-on, .dia--hoje, .hora),
   trazido para os tokens do painel. Dia sem automacao fica apagado; com automacao, o verde claro do "livre";
   o escolhido e a pilula; hoje, o contorno fino. A lista do dia vira as linhas com borda dos horarios. */
.auto-cal__topo { gap: 12px; margin-bottom: 16px; }
.auto-cal__mes { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--text); }
.auto-cal__mes::first-letter { text-transform: uppercase; }
.auto-seta { width: 36px; height: 36px; border-radius: 8px; background: var(--surface); color: var(--text); }
.auto-seta:hover { background: var(--surface-2, var(--surface)); }
.auto-seta:active { transform: scale(.96); }
.auto-seta svg { width: 18px; height: 18px; }
.auto-grade { gap: 5px; }
.auto-grade__ds { padding: 4px 0 8px; font-size: 12px; letter-spacing: 0; color: var(--text-2); }
.auto-dia { aspect-ratio: 1; min-height: 38px; border-radius: 9px; background: transparent; color: var(--text-3); font-size: 15px; font-weight: 400; box-shadow: none; }
.auto-dia:hover { background: var(--surface); }
.auto-dia--fora { opacity: .45; }
.auto-dia--tem, .auto-dia--sel { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); font-weight: 500; }
.auto-dia--tem:hover, .auto-dia--sel:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.auto-dia--escolhido, .auto-dia--escolhido:hover { background: var(--text); color: var(--bg); font-weight: 500; box-shadow: none; }
.auto-dia--escolhido .auto-pt--prevista { box-shadow: inset 0 0 0 1.5px var(--bg); }
.auto-dia--escolhido .auto-pt--feita { background: var(--bg); }
.auto-dia--hoje:not(.auto-dia--escolhido) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 35%, transparent); }
.auto-dia--hoje .auto-dia__n::after { display: none; }
.auto-dia__pts { top: 5px; right: 5px; }
.auto-pt { width: 5px; height: 5px; }
.auto-do-dia ul { gap: 8px; margin-top: 12px; }
.auto-do-dia__item { min-height: 44px; padding: 8px 12px; border-radius: 9px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent); }
.auto-do-dia__item:hover { background: var(--surface); }
/* 10/11/2026, o dono com o print da reuniao: "sem esse icone ao lado direito superior, apenas mostrar as coisas por meio
   da cor". Um estado por dia, so na cor do quadrado; os dias de fora do mes nao aparecem. */
.auto-dia--vazio { visibility: hidden; pointer-events: none; }
.auto-dia--sel { background: transparent; color: var(--text-3); font-weight: 400; }
.auto-dia--prevista { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); font-weight: 500; }
.auto-dia--feita { background: color-mix(in srgb, var(--accent) 32%, transparent); color: var(--text); font-weight: 500; }
.auto-dia--falhou { background: color-mix(in srgb, #e0a200 28%, transparent); color: var(--text); font-weight: 500; }
.auto-dia--prevista:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.auto-dia--feita:hover { background: color-mix(in srgb, var(--accent) 38%, transparent); }
.auto-dia--falhou:hover { background: color-mix(in srgb, #e0a200 34%, transparent); }
.auto-cor { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.auto-cor--prevista { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.auto-cor--feita { background: color-mix(in srgb, var(--accent) 32%, transparent); }
.auto-cor--falhou { background: color-mix(in srgb, #e0a200 28%, transparent); }
.auto-dia.auto-dia--escolhido, .auto-dia.auto-dia--escolhido:hover { background: var(--text); color: var(--bg); font-weight: 500; }
/* 10/11/2026, o dono: "faltou deixar com cor neutra tambem, que nem estava antes, que tinha o cinza". O que ja rodou
   volta pro cinza neutro do painel; o verde fica so no que vai rodar. */
.auto-dia--feita { background: var(--surface-2, var(--surface)); color: var(--text); }
.auto-dia--feita:hover { background: color-mix(in srgb, var(--text) 12%, var(--surface)); }
.auto-cor--feita { background: var(--surface-2, var(--surface)); box-shadow: inset 0 0 0 1px var(--border-soft); }
.auto-dia--prevista { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-texto, var(--accent)); }
.auto-dia--prevista:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.auto-cor--prevista { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.auto-dia.auto-dia--escolhido, .auto-dia.auto-dia--escolhido:hover { background: var(--text); color: var(--bg); }
/* 10/11/2026, o dono: "siga o padrao de cores que era antes". As cores voltam as do calendario original das
   Automacoes (antes do molde da reuniao): o que rodou no cinza do painel, o que vai rodar no verde-claro com o numero
   verde, o escolhido no verde cheio com o brilho. O formato da reuniao e o "so pela cor" continuam. */
.auto-dia { color: var(--text-2); font-weight: 600; }
.auto-dia--feita, .auto-dia--feita:hover { background: var(--surface-2, var(--surface)); color: var(--text); font-weight: 600; }
.auto-dia--prevista, .auto-dia--prevista:hover { background: var(--accent-tint, color-mix(in srgb, var(--accent) 16%, transparent)); color: var(--accent-texto, var(--text)); font-weight: 650; }
.auto-dia--falhou, .auto-dia--falhou:hover { background: color-mix(in srgb, var(--urg-2, var(--warn, #e0a200)) 24%, transparent); color: var(--text); font-weight: 600; }
.auto-dia.auto-dia--escolhido, .auto-dia.auto-dia--escolhido:hover { background: var(--accent); color: var(--on-accent); font-weight: 700; box-shadow: 0 6px 18px -8px var(--accent-glow, transparent); }
.auto-dia--hoje:not(.auto-dia--escolhido) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 35%, transparent); }
.auto-cor--feita { background: var(--surface-2, var(--surface)); box-shadow: none; }
.auto-cor--prevista { background: var(--accent-tint, color-mix(in srgb, var(--accent) 16%, transparent)); box-shadow: none; }
.auto-cor--falhou { background: color-mix(in srgb, var(--urg-2, var(--warn, #e0a200)) 24%, transparent); }

/* 10/11/2026, o dono: "corrija o bug das tabelas". Os cartoes da linha ja tinham a mesma altura, mas o rodape
   (estado e frequencia) caia em alturas diferentes conforme o titulo e o texto; agora o ultimo bloco de cada cartao
   desce pro pe e o titulo para em duas linhas. Vale pros cartoes das Automacoes, dos Modelos e das com regras. */
.auto-card { display: flex; flex-direction: column; align-items: stretch; }
.auto-card > :last-child { margin-top: auto; }
.auto-card__titulo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.auto-card__desc { min-height: calc(2 * 1.45em); }
.auto-card__pe { padding-top: 6px; }

/* 10/11/2026, o dono: "tem dois selecionados ao mesmo tempo". Nova conversa tinha fundo fixo e parecia marcada junto
   com Automacoes; agora so o lugar onde a pessoa esta fica com fundo. */
.lado-conv__nova--criar { background: none; margin-bottom: 0; }
.lado-conv__nova--criar:hover { background: var(--surface); }
.lado-conv__nova--criar.is-atual { background: var(--surface); }

/* 10/11/2026, o painel pequeno do + no computador e o anexo como cartao dentro da caixa (print de referencia do dono) */
:is(.agente-pe:not(.ia-lado__chat .agente-pe), .agente-casa) > .agente-barra { position: relative; }
.agente-mais { position: absolute; z-index: 6; left: 8px; bottom: calc(100% + 8px); width: min(340px, calc(100% - 16px)); padding: 8px; border-radius: 14px;
  background: var(--bg-elev); box-shadow: 0 0 0 1px var(--border-soft), 0 18px 40px -18px rgba(0, 0, 0, .7); animation: agente-surge .18s ease both; }
.agente-mais__soltar { all: unset; box-sizing: border-box; width: 100%; display: grid; justify-items: center; gap: 6px; padding: 22px 16px; border-radius: 10px; cursor: pointer;
  text-align: center; border: 1.5px dashed color-mix(in srgb, var(--text) 22%, transparent); color: var(--text); }
.agente-mais__soltar:hover { background: var(--surface); border-color: color-mix(in srgb, var(--text) 35%, transparent); }
.agente-mais__soltar:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.agente-mais__soltar b { font-size: 14px; font-weight: 600; }
.agente-mais__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface); color: var(--text-2); }
.agente-anexo__ext { display: none; }
/* o arquivo na caixa: cartao quadrado com o nome e a extensao, o X no canto */
:is(.agente-pe:not(.ia-lado__chat .agente-pe), .agente-casa) > .agente-barra .agente-barra__anexos .agente-anexo {
  position: relative; width: 120px; height: 120px; box-sizing: border-box; flex-direction: column; align-items: flex-start; justify-content: space-between;
  gap: 6px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--bg) 70%, var(--bg-elev)); border: 1px solid var(--border-soft); }
:is(.agente-pe:not(.ia-lado__chat .agente-pe), .agente-casa) > .agente-barra .agente-anexo .agente-anexo__ic { display: none; }
:is(.agente-pe:not(.ia-lado__chat .agente-pe), .agente-casa) > .agente-barra .agente-anexo .agente-anexo__txt b {
  white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 13px; line-height: 1.3; }
:is(.agente-pe:not(.ia-lado__chat .agente-pe), .agente-casa) > .agente-barra .agente-anexo .agente-anexo__txt .xs { display: none; }
:is(.agente-pe:not(.ia-lado__chat .agente-pe), .agente-casa) > .agente-barra .agente-anexo .agente-anexo__ext {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; padding: 1px 6px; border-radius: 6px; color: var(--text-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 25%, transparent); }
:is(.agente-pe:not(.ia-lado__chat .agente-pe), .agente-casa) > .agente-barra .agente-anexo .agente-anexo__tirar { position: absolute; top: 6px; right: 6px; margin: 0; opacity: 0; transition: opacity .15s; }
:is(.agente-pe:not(.ia-lado__chat .agente-pe), .agente-casa) > .agente-barra .agente-anexo:hover .agente-anexo__tirar,
:is(.agente-pe:not(.ia-lado__chat .agente-pe), .agente-casa) > .agente-barra .agente-anexo__tirar:focus-visible { opacity: 1; }
@media (hover: none) { :is(.agente-pe:not(.ia-lado__chat .agente-pe), .agente-casa) > .agente-barra .agente-anexo .agente-anexo__tirar { opacity: 1; } }
/* o painel do + abre embaixo da caixa (em cima ele cobria o titulo) e se destaca do fundo */
.agente-mais { bottom: auto; top: calc(100% + 8px); background: var(--surface, var(--bg-elev)); box-shadow: 0 0 0 1px var(--border), 0 18px 40px -16px rgba(0, 0, 0, .8); }
.agente-pe .agente-mais { top: auto; bottom: calc(100% + 8px); }
.agente-mais__ic { background: var(--bg-elev); }

/* o simbolo do tipo de cada conversa na lateral (10/11/2026): cinza, a direita; ao passar o mouse da lugar ao X de apagar */
.lado-conv__tipo { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-right: 4px; color: var(--text-3); }
.lado-conv__tipo svg { width: 15px; height: 15px; }
.lado-conv__item:has(.lado-conv__tipo) .lado-conv__x { position: absolute; right: 0; }
.lado-conv__item:hover .lado-conv__tipo, .lado-conv__item:focus-within .lado-conv__tipo { visibility: hidden; }
@media (hover: none) { .lado-conv__tipo { display: none; } }

/* 10/11/2026, os cartoes de Conversas recentes (respostas do dono): ao passar o mouse a folha sobe e se inclina de leve
   e o cartao clareia, como os Artefatos recentes do claude.ai; o titulo da folha em Figtree; e cada tipo de conversa
   com o seu desenho e a sua cor de fundo. */
.agente-casa__cartao { transition: box-shadow .2s ease, background-color .2s ease; }
.agente-casa__cartao:hover { background: color-mix(in srgb, var(--text) 4%, var(--bg-elev)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent); }
.agente-casa__papel, .agente-casa__previa::before, .agente-casa__desenho { transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.agente-casa__cartao:hover .agente-casa__papel { transform: translateY(-5px) rotate(-1.2deg); }
.agente-casa__cartao:hover .agente-casa__previa::before { transform: translateX(-46%) translateY(-2px) rotate(3.5deg); }
.agente-casa__cartao:hover .agente-casa__desenho { transform: translateY(-3px) scale(1.04); }
.agente-casa__papel b { font-family: 'Figtree', var(--font-sans, system-ui), sans-serif; font-weight: 600; font-size: 10.5px; letter-spacing: -.005em; }
.agente-casa__previa--desenho { place-items: center; padding-top: 0; color: #ece9df; }
.agente-casa__previa--desenho::before { display: none; }
.agente-casa__desenho { width: 96px; height: auto; opacity: .92; }
.agente-casa__previa--relatorio { background: color-mix(in srgb, #2a3644 60%, var(--bg-elev)); }
.agente-casa__previa--documento { background: color-mix(in srgb, #2b3a5a 60%, var(--bg-elev)); }
.agente-casa__previa--mapa { background: color-mix(in srgb, #3a2c4f 70%, var(--bg-elev)); }
.agente-casa__previa--globo { background: color-mix(in srgb, #1f4045 70%, var(--bg-elev)); }
.agente-casa__previa--automacao { background: color-mix(in srgb, #1f4a30 70%, var(--bg-elev)); }
.agente-casa__previa--painel { background: color-mix(in srgb, #4a2a2a 70%, var(--bg-elev)); }
.agente-casa__previa--arquivo { background: color-mix(in srgb, #4a3d24 70%, var(--bg-elev)); }
.agente-casa__previa--texto { background: color-mix(in srgb, #3a3a3a 60%, var(--bg-elev)); }
@media (prefers-reduced-motion: reduce) { .agente-casa__papel, .agente-casa__previa::before, .agente-casa__desenho { transition: none; } .agente-casa__cartao:hover .agente-casa__papel, .agente-casa__cartao:hover .agente-casa__desenho { transform: none; } }
.agente-casa__previa svg.agente-casa__desenho { width: 96px; height: 62px; }

/* o aviso das automacoes acima da caixa (molde do aviso do print do dono): contorno fino, negrito no comeco, botao cinza */
.agente-casa > .agente-aviso { box-sizing: border-box; margin: 0 0 10px; padding: 14px 16px; border-radius: 14px; text-align: left;
  box-shadow: inset 0 0 0 1px var(--border-soft); background: transparent; }
.agente-aviso p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--text); }
.agente-aviso b { font-weight: 600; }
.agente-aviso__link { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: var(--text); }
.agente-aviso__link:focus-visible { outline: 2px solid var(--accent-line); }
.agente-aviso__ok { margin-top: 10px; border: 0; cursor: pointer; font: inherit; font-size: 14px; padding: 6px 10px; border-radius: 8px;
  background: var(--surface-2, var(--surface)); color: var(--text); }
.agente-aviso__ok:hover { background: color-mix(in srgb, var(--text) 14%, var(--surface)); }
/* 10/11/2026, o dono: "faltou dar um respiro um pouco maior" entre o aviso e a caixa */
.agente--casa .agente-casa > .agente-aviso { margin: 0 0 16px; padding: 16px 18px; }
.agente--casa .agente-casa > .agente-barra { top: 0; }
.agente--casa .agente-casa__linha { padding-top: 18px; }

/* 10/11/2026, o dono: "na versao celular deixe isso em cima das conversas recentes". O cartao das sugestoes mora agora
   na coluna da casa, logo antes das recentes: no computador largo ele continua flutuando no canto direito; abaixo
   disso (celular e tablet) fica no fluxo, entre a caixa e as Conversas recentes. */
.agente-casa > .agente-sug { width: 248px; }
@media (max-width: 1360px) {
  .agente-casa > .agente-sug { position: relative; right: auto; bottom: auto; width: min(660px, 100%); margin: 40px 0 0; }
  .agente-casa > .agente-sug + .agente-casa__recentes { margin-top: 32px; }
}

/* o cartao das sugestoes no computador largo: preso no canto direito, sempre ACIMA do aviso do painel (agente.js mede o
   aviso e poe a altura em --sug-baixo), pra um nunca cobrir o outro */
@media (min-width: 1361px) {
  .agente-casa > .agente-sug { position: fixed; right: 20px; bottom: var(--sug-baixo, 20px); z-index: 71; transition: bottom .25s ease; }
}


/* ---------- entrar no molde do Claude (10/11/2026) ----------
   Medido no claude.ai/login a 1440x900: coluna da esquerda com o conteudo
   centrado (titulo 56 px, cartao de 448 px, raio 32, folga 28); a direita um
   quadro 4:5 de 605x756, raio 16, a 93 px da borda (6,5vw). O resto e espaco
   neutro: sem fundo, sem moldura. O filme e um recorte 4:5 de 1080x1350, no
   tamanho original, entao o quadro menor fica nitido. Abaixo de 960 px o
   quadro sai e fica a coluna. */
.entrada--coach {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}
.entrada--coach .entrada__lado {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
  padding: 88px 32px 48px;
}
.entrada__marca {
  position: absolute;
  top: 26px;
  left: clamp(20px, 4.5vw, 64px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-decoration: none;
  font-family: Figtree, system-ui, sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -.015em;
}
.entrada__marca img { width: 17px; height: auto; display: block; }
.entrada__meio {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.entrada__titulo {
  margin: 0;
  /* o padrao e a saudacao do chat da Intelligence (.agente-casa__titulo): os mesmos
     valores, de proposito, pra o titulo daqui ser aquela mesma letra (pedido do dono 10/11) */
  font-family: var(--font);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text);
}
.entrada__titulo, .entrada__sub { text-wrap: balance; }
.entrada__sub { margin: 8px 0 0; font-size: 16px; line-height: 1.4; }
.entrada--coach .convite__faixa { max-width: 448px; margin-top: 20px; text-align: left; }

.entrada__cartao {
  box-sizing: border-box;
  width: 100%;
  max-width: 448px;
  margin-top: 32px;
  padding: 28px;
  text-align: left;
  border: 1px solid var(--border-soft);
  border-radius: 32px;
  background: var(--bg-elev);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .035), 0 16px 32px rgba(0, 0, 0, .03), 0 2px 64px rgba(0, 0, 0, .03);
}
/* no escuro o cartao fica um tom abaixo do fundo, como o do Claude (#111 sobre #191919) */
.paleta-escura .entrada__cartao, .painel-body .paleta-escura .entrada__cartao.entrada__caixa { background: #101010; border-color: rgba(255, 255, 255, .05); box-shadow: none; }
.paleta-escura .entrada__campo { background: #191919; border-color: rgba(255, 255, 255, .07); }
.paleta-escura .entrada__campo:focus { border-color: var(--accent); }
.paleta-escura .entrada__baixar-btn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .08); }
/* o familia.css pinta todo .entrada__caixa como cartao: aqui o cartao ja e este */
.painel-body .entrada__cartao.entrada__caixa { max-width: 448px; padding: 28px; border: 1px solid var(--border-soft); border-radius: 32px; background: var(--bg-elev); }
.entrada__cartao form { display: flex; flex-direction: column; gap: 10px; }
.entrada__cartao .btn {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
}
.entrada__cartao .btn + .btn { margin-top: 0; }
.entrada__campo {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}
.entrada__campo::placeholder { color: var(--text-3); }
/* foco como o do Claude, em verde: o aro do campo acende inteiro, com um brilho fino por fora */
.entrada__campo { transition: border-color .15s ease, box-shadow .15s ease; }
.entrada__campo:focus,
.entrada__campo:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-tint); }
.entrada__ou {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.entrada__ou::before, .entrada__ou::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); }
.entrada__aceite { margin: 16px 0 0; text-align: center; line-height: 1.45; }
.entrada__aceite a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.entrada__troca { margin: 22px 0 0; }
.entrada__baixar { margin-top: 18px; display: flex; flex-direction: column; align-items: center; max-width: 448px; }
.entrada__baixar[hidden] { display: none; }
.entrada__baixar-btn {
  width: auto;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  gap: 8px;
}

.entrada__filme { align-self: center; padding: 48px 6.5vw 48px 0; }
.entrada__quadro {
  position: relative;
  height: min(756px, calc(100vh - 144px));
  height: min(756px, calc(100dvh - 144px));
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: #d9d6cf url('../assets/filme/coach-entrada.jpg') center / cover no-repeat;
}
.entrada__quadro video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (prefers-reduced-motion: reduce) { .entrada__quadro video { display: none; } }

@media (max-width: 960px) {
  .entrada--coach { grid-template-columns: minmax(0, 1fr); }
  .entrada__filme { display: none; }
}
@media (max-width: 520px) {
  .entrada--coach .entrada__lado { padding: 80px 16px 32px; }
  .entrada__marca { left: 16px; top: 20px; }
  .entrada__cartao, .painel-body .entrada__cartao.entrada__caixa { padding: 20px; border-radius: 24px; margin-top: 28px; }
}
/* hover so neste botao, pedido do dono em 10/11/2026 (excecao a regra de "botao sem hover") */
.entrada__baixar-btn { transition: background-color .15s ease, transform .12s ease; }
@media (hover: hover) {
  /* so um pouco mais escuro, no mesmo tom: sem trocar a cor (o --surface-2 puxava pro azul) */
  .entrada__baixar-btn:hover { background: rgba(0, 0, 0, .09); }
  .paleta-escura .entrada__baixar-btn:hover, [data-tema="escuro"] .entrada__baixar-btn:hover { background: rgba(255, 255, 255, .12); }
}

/* ============================================================
   As duas partes da lateral (10/11/2026, pedido do dono com o claude.ai)
   ------------------------------------------------------------
   Dois botoes de icone ao lado do nome, como o chat e o codigo do Claude:
   Painel (as conversas e as abas) e Ferramentas (Criar, Relatorios,
   Mapas mentais, Globo, Biblioteca e os recentes salvos). Cada parte
   troca a lateral inteira. A lateral rola junta, sem caixa por dentro.
   ============================================================ */
.painel__lado--partes .lado-conv--topo { flex: none; margin: 4px 0 6px; }
.painel__lado--partes .lado-conv--recentes { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--contorno-dentro, var(--border-soft)); }
.painel__lado--partes .lado-conv--topo .lado-conv__nova:not(.lado-conv__nova--criar) svg { color: currentColor; }
.painel__lado--ferramentas .painel__nav, .painel__lado--ferramentas .galhos { display: none !important; }
.lado-studio { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-top: 4px; }
.lado-studio__acoes { margin-bottom: 6px; }
.lado-studio__grupo { display: flex; flex-direction: column; gap: 2px; }
.lado-studio__item { font-weight: 500; color: var(--text-2); }
.lado-studio__item svg { color: currentColor !important; }
.lado-studio__item.is-atual, .lado-studio__item:hover { color: var(--text); }
.lado-studio__recentes { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--contorno-dentro, var(--border-soft)); }
.lado-studio__rot { all: unset; display: block; padding: 6px 10px; font-size: 12.5px; color: var(--text-3); }
@media (min-width: 900px) {
  .painel__lado--partes { overflow-y: auto; scrollbar-width: thin; }
  .painel__lado--partes > .galhos { flex: none; max-height: none; overflow: visible; }
  .painel__lado--partes > .lado-conv--recentes { flex: 1 0 auto; min-height: auto; }
  .painel__lado--partes .lado-conv__lista { overflow: visible; }
  .painel__lado[data-lado="trilho"] :is(.lado-studio__item, .lado-studio__acoes .lado-conv__nova) span,
  .painel__lado[data-lado="trilho"] .lado-studio__recentes { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .painel__lado[data-lado="trilho"] :is(.lado-studio__item, .lado-studio__acoes .lado-conv__nova) { justify-content: center; padding: 0; }
}

/* ---------- a bolinha girando (10/11/2026, pedido do dono) ----------
   Um anel fino na cor da Tryzen. Aparece enquanto o painel abre (a pagina ainda vazia) e enquanto uma parte que
   chega sob demanda (as Ferramentas, a previa do Studio na conversa) esta baixando. */
.carga-gira { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-top-color: var(--accent); animation: carga-gira .8s linear infinite; flex: none; }
.carga-gira--p { width: 16px; height: 16px; border-width: 2px; }
.carga-tela { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 50vh; color: var(--text-3); font-size: 14px; }
.carga-linha { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 13px; padding: 10px 0; }
#painel[aria-busy="true"]:empty { min-height: 100dvh; display: flex; align-items: center; justify-content: center; }
#painel[aria-busy="true"]:empty::after { content: ""; width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-top-color: var(--accent); animation: carga-gira .8s linear infinite; }
@keyframes carga-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .carga-gira, #painel[aria-busy="true"]:empty::after { animation-duration: 2.4s; } }