/* ============================================================
   tryzen — a familia dos paineis: a identidade do Tryzen Coach
   ------------------------------------------------------------
   Tryzen Admin 2.0, fase 2 (15/10/2026). Pedido do dono: "o Admin e o
   Coach devem parecer produtos da mesma familia. Nao invente uma
   identidade nova." O painel do treinador chegou ao desenho dele em oito
   voltas com o dono (treinador/treinador.css: "Oitava volta", "Menos
   contorno, menos contraste", "Ajustes, terceira volta"); este arquivo
   leva AS MESMAS regras e os mesmos numeros pro /admin, sem copiar o
   que e so do treinador.

     CONTORNO  so no que AGRUPA (cartao, quadro, bloco) e no campo onde
               se escreve. Uma linha fina por fora; dentro, mais leve ainda.
     FUNDO     no que se APERTA: botao secundario, chip solto, item do
               menu, linha que abre alguma coisa. Sem contorno.
     NADA      no que so INFORMA: etiqueta de estado e desenho + palavra.
     COR       so no desenho: vermelho e o que e agora, amarelo pede
               olhar, verde confirma. Cor cheia so em botao, chip ligado
               e aba ativa (REGRA DO DONO, 12/10/2026).
     VIDRO     modal e gaveta: o fundo escurece e desfoca.

   Quem carrega: admin/index.html (depois do paineis.css, antes do
   workspace.css). O treinador tem estas regras no treinador.css dele; o
   /parceiro ainda nao foi trazido (perguntar antes).
   ============================================================ */

/* ---------- os tokens (os numeros finais do treinador.css) ---------- */
.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));
  --elevado: 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);
  --urg-1: #CF3A2E;
  --urg-2: #A86F00;
  --urg-ok: var(--accent-texto);
  --modal: var(--bg-elev, var(--bg));
  --veu: color-mix(in srgb, #000 40%, transparent);
  --sombra-solta: 0 16px 40px rgba(0, 0, 0, .14);
}
:root[data-tema="escuro"] .painel-body {
  --contorno: color-mix(in srgb, var(--text) 12%, transparent);
  --contorno-forte: color-mix(in srgb, var(--text) 16%, transparent);
  --contorno-dentro: color-mix(in srgb, var(--text) 9%, transparent);
  --cartao: color-mix(in srgb, var(--surface) 55%, var(--bg));
  --elevado: var(--surface);
  --preenche: color-mix(in srgb, var(--text) 7%, transparent);
  --preenche-forte: color-mix(in srgb, var(--text) 12%, transparent);
  --urg-1: #FF6B5E;
  --urg-2: #FFD60A;
  --modal: color-mix(in srgb, var(--surface) 72%, var(--bg));
  --veu: color-mix(in srgb, #000 52%, transparent);
  --sombra-solta: 0 16px 40px rgba(0, 0, 0, .45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .painel-body {
    --contorno: color-mix(in srgb, var(--text) 12%, transparent);
    --contorno-forte: color-mix(in srgb, var(--text) 16%, transparent);
    --contorno-dentro: color-mix(in srgb, var(--text) 9%, transparent);
    --cartao: color-mix(in srgb, var(--surface) 55%, var(--bg));
    --elevado: var(--surface);
    --preenche: color-mix(in srgb, var(--text) 7%, transparent);
    --preenche-forte: color-mix(in srgb, var(--text) 12%, transparent);
    --urg-1: #FF6B5E;
    --urg-2: #FFD60A;
    --modal: color-mix(in srgb, var(--surface) 72%, var(--bg));
    --veu: color-mix(in srgb, #000 52%, transparent);
    --sombra-solta: 0 16px 40px rgba(0, 0, 0, .45);
  }
}

/* ============================================================
   A moldura: lateral, arvore, topo
   ============================================================ */

/* a divisa da lateral e do topo quase some (a Attio e o treinador) */
@media (min-width: 900px) {
  .painel-body .painel__lado { border-right-color: var(--contorno-dentro); }
  .painel-body .painel__topo { border-bottom-color: var(--contorno-dentro); }
  /* no trilho a aba de agora e um FUNDO neutro, e o verde fica no desenho */
  .painel-body .painel__pill { background: var(--preenche-forte); }
  .painel-body .painel__aba.is-active { color: var(--text); }
  .painel-body .painel__aba.is-active .aba-ic { color: var(--accent-texto); }
  .painel-body .painel__aba:not(.is-active) { color: var(--text-2); }
  .painel-body .painel__puxar:active { background: var(--preenche); }
  /* a lateral fechada: o nome invisivel continuava ocupando a largura e
     empurrava o icone pra fora do trilho (o conserto do treinador, 11/10) */
  .painel__lado[data-lado="trilho"] .painel__aba { gap: 0; }
  .painel__lado[data-lado="trilho"] .painel__aba-nome { position: absolute; width: 0; overflow: hidden; }
}

/* ---------- a arvore, no desenho do treinador ----------
   O galho ativo deixa de ser texto verde: e um fundo neutro com a letra
   da pagina, e a cor mora no fio que desce ate ele (o desenho). A conta
   do que falta deixa de ser uma pilula amarela cheia: e o numero num
   fundo neutro com o ponto amarelo do lado, como o ponto da lateral do
   treinador. */
.painel-body .galhos { --g-tinta: var(--text); --g-apagado: var(--text-2); --g-fio: var(--contorno-forte); }
.painel-body .galhos__cabeca { position: relative; isolation: isolate; padding-left: 8px; margin-left: -8px; width: calc(100% + 8px); border-radius: 10px; }
.painel-body .galhos__cabeca[data-ativo] { color: var(--text); font-weight: 600; background: var(--preenche-forte); }
.painel-body .galhos__cabeca[data-ativo] .galhos__ic,
.painel-body .galhos__secao[data-ativa] > .galhos__cabeca .galhos__ic { color: var(--accent-texto); }
.painel-body .galhos__item { position: relative; isolation: isolate; }
.painel-body .galhos__item[data-ativo] { color: var(--text); font-weight: 600; }
.painel-body .galhos__item[data-ativo]::before {
  content: ''; position: absolute; z-index: -1; top: 3px; bottom: 3px; right: 0; left: calc(var(--g-recuo) - 6px);
  border-radius: 8px; background: var(--preenche-forte);
}
.painel-body .galhos__cabeca:active, .painel-body .galhos__item:active { opacity: 1; background: var(--preenche); }
.painel-body .galhos__conta {
  gap: 5px; background: var(--preenche); color: var(--text-2); grid-auto-flow: column; display: inline-grid; align-items: center;
}
.painel-body .galhos__conta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--urg-2); }
/* o nome do grupo (galhos.js): letra pequena e cinza, com ar em cima */
.galhos__grupo {
  margin: 14px 0 2px; padding: 0; font-size: 12px; font-weight: 500; letter-spacing: .01em; color: var(--text-3);
}
.painel-body .galhos > .galhos__grupo:first-of-type { margin-top: 12px; }

/* ============================================================
   A gaveta do celular (js/paineis/lado.js, `gaveta: true`)
   ------------------------------------------------------------
   No computador ela nao existe como caixa (`display: contents`): a
   lateral continua presa e recolhivel. No celular a lateral vira a barra
   do topo (menu, marca) e a gaveta desliza da esquerda por cima de tudo,
   com o veu de vidro atras. Mesmo desenho do menu do treinador.
   ============================================================ */
.painel__menu { display: none; }
@media (min-width: 900px) {
  .painel__lado--gaveta .painel__gaveta { display: contents; }
  .painel__lado--gaveta .painel__gaveta-topo,
  .painel__lado--gaveta .painel__veu { display: none; }
}
@media (max-width: 899px) {
  /* O vidro da barra mora num ::before, e nao na barra: `backdrop-filter`
     faz da caixa o lugar de referencia de todo `position: fixed` de
     dentro, e a gaveta e o veu ficariam presos nos 56px da barra. */
  .painel__lado--gaveta {
    position: sticky; top: 0; z-index: 60;
    padding: calc(var(--safe-top, 0px) + 8px) var(--pad) 8px;
    background: none;
    border-bottom: 1px solid var(--contorno-dentro);
  }
  .painel__lado--gaveta::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  }
  .painel__lado--gaveta .painel__marca { align-items: center; gap: 10px; }
  .painel__menu {
    display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: -8px; flex: none;
    border: 0; border-radius: 12px; background: none; color: var(--text); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .painel__menu:active { background: var(--preenche); }
  .painel__menu:focus-visible, .painel__gaveta-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .painel__lado--gaveta .painel__gaveta {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 96;
    width: min(320px, 86vw);
    display: flex; flex-direction: column; gap: 6px;
    padding: calc(var(--safe-top, 0px) + 12px) 16px calc(var(--safe-bottom, 0px) + 16px) 20px;
    background: var(--bg);
    border-right: 1px solid var(--contorno);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-102%); visibility: hidden;
    transition: transform .28s var(--ease, ease), visibility 0s .28s;
    touch-action: pan-y;
  }
  .painel.is-gaveta .painel__lado--gaveta .painel__gaveta {
    transform: none; visibility: visible;
    transition: transform .28s var(--ease, ease), visibility 0s;
    box-shadow: 16px 0 48px rgba(0, 0, 0, .22);
  }
  .painel__lado--gaveta .painel__gaveta.is-arrastando { transition: none; }

  .painel__gaveta-topo { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 4px; }
  .painel__gaveta-x {
    display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: auto; flex: none;
    border: 0; border-radius: 50%; background: var(--preenche); color: var(--text-2); cursor: pointer;
  }
  .painel__gaveta-x:active { background: var(--preenche-forte); }

  /* dentro da gaveta mora a arvore inteira (os galhos), e nao a barra de abas */
  .painel__gaveta:has(.galhos) .painel__nav { display: none; }
  .painel__gaveta .galhos { display: flex; flex: 1 0 auto; overflow: visible; padding-right: 0; }
  .painel__gaveta .galhos__cabeca { min-height: 46px; font-size: 16px; }
  .painel__gaveta .galhos__item { --g-linha: 42px; font-size: 15px; }
  /* sem a arvore, as abas de pe, uma por linha */
  .painel__gaveta .painel__nav {
    position: static; flex-direction: column; gap: 2px; padding: 0; background: none; border: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .painel__gaveta .painel__aba { flex: none; flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 48px; padding: 0 12px;
    border-radius: 12px; font-size: 16px; }
  .painel__gaveta .painel__aba.is-active { background: var(--preenche-forte); color: var(--text); }
  .painel__gaveta .painel__aba.is-active .aba-ic { color: var(--accent-texto); }
  .painel__gaveta .painel__pill { display: none; }

  /* o pe da gaveta: quem esta logado, o tema e o sair */
  .painel__gaveta .painel__pe { display: block; margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--contorno-dentro); text-align: left; }
  .painel__gaveta .painel__pe .xs { display: block; margin-bottom: 10px; overflow-wrap: anywhere; }
  .painel__gaveta .painel__pe-acoes { display: flex; gap: 8px; }

  .painel__veu {
    position: fixed; inset: 0; z-index: 95; opacity: 0; pointer-events: none;
    background: var(--veu); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: opacity .24s var(--ease, ease);
  }
  .painel.is-gaveta .painel__veu { opacity: 1; pointer-events: auto; }

  /* sem a barra de baixo, o miolo nao guarda mais o lugar dela */
  .painel:has(.painel__lado--gaveta) .painel__main { padding-bottom: calc(40px + var(--safe-bottom, 0px)); }
}
html.sem-rolar, html.sem-rolar body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .painel__lado--gaveta .painel__gaveta, .painel__veu { transition: none !important; }
}

/* ============================================================
   As superficies: o que se le, o que se aperta, o que so informa
   ============================================================ */

/* o que se le: UMA linha fina por fora, fundo quase o da pagina */
.painel-body .gcard,
.painel-body .quadro,
.painel-body .avisos,
.painel-body .emb,
.painel-body .pbento__i { border: 1px solid var(--contorno); background: var(--cartao); }
.painel-body .quadro > .gcard { border: 0; background: none; }
.painel-body .pbento__i--vazio { background: none; box-shadow: none; border-style: dashed; }
/* os estados do bloco viram cor no DESENHO (o fundo colorido gritava informacao como se fosse botao) */
.painel-body .pbento__i--certo,
.painel-body .pbento__i--acao,
.painel-body .pbento__i--risco { background: var(--cartao); }
.painel-body .pbento__i--certo .pbento__ic { color: var(--urg-ok); }
.painel-body .pbento__i--acao .pbento__ic { color: var(--urg-2); }
.painel-body .pbento__i--risco .pbento__ic { color: var(--urg-1); }
/* a variacao (↑ 1,0 p.p.) e informacao: a cor fica na letra, sem a pilula */
.painel-body .pbento__delta { background: none; padding-inline: 0; }

/* o que se aperta: fundo, sem contorno */
.painel-body .btn--outline { border-color: transparent; background: var(--preenche); }
.painel-body .btn--outline:active { background: var(--preenche-forte); }
.painel-body .chip:not([aria-pressed="true"]):not(.is-active):not(.is-on) { border-color: transparent; background: var(--preenche); }
.painel-body .painel__topo .periodo .chip:not([aria-pressed="true"]),
.painel-body .periodo .chip:not([aria-pressed="true"]) { background: var(--preenche); }
/* no celular o periodo perdia ~150px num quadro cinza em cima de toda
   tela: o quadro sai, os chips continuam quebrando de linha (um chip
   escondido fora da tela e um chip que nao existe) */
@media (max-width: 899px) {
  .painel-body .periodo { padding: 0; background: none; border-radius: 0; }
}

/* o que apaga: o mesmo fundo dos vizinhos, so a letra vermelha */
.painel-body .btn--perigo { border-color: transparent; background: var(--preenche); color: var(--urg-1); }
.painel-body .btn--perigo:active { background: var(--preenche-forte); }

/* o selo de estado (Excelente, Abaixo, atrasada): desenho + palavra, sem a pilula colorida */
.painel-body .selo:not(.selo--pro) { gap: 6px; padding: 0; background: none; color: var(--text-2); font-weight: 500; }
.painel-body .selo:not(.selo--pro)::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.painel-body .selo--certo::before { background: var(--urg-ok) !important; }
.painel-body .selo--acao::before { background: var(--urg-2) !important; }
.painel-body .selo--risco::before { background: var(--urg-1) !important; }

/* o que falta nos outros lugares: uma linha que se aperta (fundo neutro), o ponto amarelo e o desenho */
.painel-body .pendencias__linha { justify-content: flex-start; gap: 12px; background: var(--preenche); color: var(--text); }
.painel-body .pendencias__linha::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--urg-2); }
.painel-body .pendencias__linha:active { background: var(--preenche-forte); }
.painel-body .pendencias__ir { margin-left: auto; color: var(--text-3); }

/* os campos: cantos, respiro, 44px de toque, a linha de fora sem pesar.
   Em :where() pra pesar pouco: quem tem desenho proprio continua mandando. */
:where(.painel-body) .field__input {
  box-sizing: border-box; min-height: 44px; padding: 10px 14px; border: 1px solid var(--contorno-forte); border-radius: 12px;
  background: var(--preenche-suave); 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; }
/* com o campo em caixa, o traco de baixo do .field do app sobrava como
   uma segunda linha; e o rotulo vira a letra de formulario do treinador */
:where(.painel-body) .field { padding: 10px 0 6px; border-bottom: 0; }
:where(.painel-body) .field__label { margin-bottom: 6px; font-family: var(--font); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--text-2); }

/* ---------- maiuscula no comeco (REGRA DO DONO, 21/09/2026) ----------
   Rotulo de tela comeca com maiuscula. Os do bento e dos campos do
   painel nasceram em minuscula ("lançado no período", "tarefa"); a
   primeira letra sobe aqui, sem reescrever cada frase. */
.painel-body .pbento__kicker::first-letter,
.painel-body .field__label::first-letter,
.painel-body .stat__label::first-letter { text-transform: uppercase; }

/* ============================================================
   A anatomia das telas do Coach nas abas do Admin (16/10/2026)
   ------------------------------------------------------------
   O dono: "e as outras paginas, cade a mudanca?". A cor ja era a do
   Coach; faltava o FORMATO. No Coach (treinador.css, "As dobras"):
     · o titulo da aba e discreto, e a pagina fala pelas secoes;
     · cada secao e UM cartao com contorno, e o cabecalho dela e uma
       faixa com o desenho do assunto, o titulo e a frase do que ela
       mostra; o conteudo mora dentro, sem moldura propria;
     · o rotulo do numero e pequeno, em caixa alta, com o desenho verde.
   O desenho do cabecalho e o do galho (painel.js, `comoCoach`).
   ============================================================ */
.painel-body .painel__titulo { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
@media (min-width: 900px) {
  .painel-body .painel__topo { padding-block: 12px; }
  .painel-body .painel__topo .chip--pill { min-height: 34px; padding: 0 13px; font-size: 13.5px; }
}

.painel-body .painel__folha > .secao {
  margin-top: 16px; padding: 0 16px 16px; border: 1px solid var(--contorno-forte); border-radius: 16px; overflow: clip;
}
.painel-body .painel__folha > .secao + .secao { margin-top: 12px; }
.painel-body .painel__folha > .secao > .secao__head {
  flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px 12px;
  margin: 0 -16px 16px; padding: 12px 16px; background: var(--cartao); border-bottom: 1px solid var(--contorno);
}
.painel-body .secao__head > .sec__ic {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--contorno); border-radius: 11px;
  color: var(--text);
}
.painel-body .secao__head > .sec__ic svg { width: 18px; height: 18px; }
.painel-body .painel__folha > .secao > .secao__head > div:not(.chips):not(.sec__ic) { flex: 1 1 220px; min-width: 0; }
.painel-body .painel__folha > .secao > .secao__head > .chips,
.painel-body .painel__folha > .secao > .secao__head > .subabas,
.painel-body .painel__folha > .secao > .secao__head > .btn { margin-left: auto; }
.painel-body .painel__folha > .secao > .secao__head .h3,
.painel-body .painel__folha > .secao > .secao__head h2 { font-size: var(--fs-body, 16px); font-weight: 600; letter-spacing: -.005em; line-height: 1.3; }
.painel-body .painel__folha > .secao > .secao__head .sm { margin-top: 1px; font-size: 13.5px; line-height: 1.4; color: var(--text-3); }
.painel-body .painel__folha > .secao > .secao__head .chip--pill { min-height: 34px; padding: 0 13px; font-size: 13.5px; }
.painel-body .painel__folha > .secao > .secao__head + * { margin-top: 0; }
.painel-body .painel__folha > .secao > :last-child { margin-bottom: 0; }

/* dentro do cartao, o que mora nele nao desenha outra moldura forte */
.painel-body .painel__folha > .secao .pbento__i,
.painel-body .painel__folha > .secao .gcard,
.painel-body .painel__folha > .secao .quadro,
.painel-body .painel__folha > .secao .emb { border-color: var(--contorno-dentro); background: none; }
.painel-body .painel__folha > .secao .pbento__i--vazio { border-style: dashed; }

/* o rotulo do numero, como o "EM DIA" do briefing do Coach */
.painel-body .pbento__kicker {
  font-family: var(--font); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2);
}
.painel-body .pbento__ic { color: var(--accent-texto); }
.painel-body .pbento__ic svg { width: 16px; height: 16px; }

/* a secao que e so o cabecalho (a introducao da tela, como no Crescimento) nao vira um cartao vazio */
.painel-body .painel__folha > .secao:has(> .secao__head:only-child) { padding: 0; border: 0; }
.painel-body .painel__folha > .secao:has(> .secao__head:only-child) > .secao__head { margin: 0; padding: 4px 0 0; background: none; border: 0; }

/* o que so informa estado: sem fundo colorido, a cor fica no ponto (que ja existe) ou num fio fino em cima */
.painel-body .agenda__linha--a_pagar, .painel-body .agenda__linha--atrasada { background: var(--preenche-suave); }
.painel-body .fita__i--a_pagar, .painel-body .fita__i--atrasada, .painel-body .fita__i--paga { background: var(--preenche-suave); }
.painel-body .fita__i--a_pagar { box-shadow: inset 0 2px 0 var(--urg-2); }
.painel-body .fita__i--atrasada { box-shadow: inset 0 2px 0 var(--urg-1); }
.painel-body .fita__i--paga { box-shadow: inset 0 2px 0 var(--urg-ok); }
.painel-body .emb .pbento__i--certo, .painel-body .emb .pbento__i--acao, .painel-body .emb .pbento__i--risco { background: none; }
.painel-body .etiqueta--emb, .painel-body .suporte-da-conta.is-esperando { background: var(--preenche); color: var(--text-2); }
.painel-body .suporte-da-conta.is-esperando::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--urg-2); vertical-align: 1px; }

@media (max-width: 899px) {
  .painel-body .painel__titulo { font-size: 20px; }
  .painel-body .painel__folha > .secao { padding: 0 12px 12px; border-radius: 14px; }
  .painel-body .painel__folha > .secao > .secao__head { align-items: flex-start; margin: 0 -12px 12px; padding: 11px 12px; }
  .painel-body .painel__folha > .secao > .secao__head > .chips { margin-left: 0; }
}

/* ============================================================
   O botao que se repete vira desenho (admin/botoes.js, 16/10/2026)
   ------------------------------------------------------------
   REGRA DO DONO: "apagar vira uma lixeira". O mesmo `.bi` do Coach
   (treinador.css, setima e oitava volta): circulo de fundo neutro, sem
   contorno, a cor so no traco; o nome na dica solta ao passar o mouse.
   ============================================================ */
.bi { all: unset; box-sizing: border-box; position: relative; flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: var(--preenche); color: var(--text); cursor: pointer; }
.bi:active { transform: scale(.94); background: var(--preenche-forte); }
.bi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bi:disabled { opacity: .45; cursor: default; }
.bi--ok > svg { color: var(--urg-ok); }
.bi--perigo > svg { color: var(--urg-1); }
.bi--atencao > svg { color: var(--urg-2); }
@media (hover: none) { .bi { width: 44px; height: 44px; } }
.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; }

/* ---------- a entrada do painel: o cartao do treinador ---------- */
.painel-body .entrada__caixa { padding: 32px 28px; border: 1px solid var(--contorno); border-radius: 24px; background: var(--cartao); }
@media (max-width: 520px) { .painel-body .entrada__caixa { padding: 24px 20px; border: 0; background: none; } }

/* O escuro do Admin (#141414) agora e o de todo o produto e mora no css/tokens.css (16/10/2026). */