:root {
  --fundo: #f4f6f3;
  --cartao: #ffffff;
  --texto: #1d2420;
  --suave: #5d6a62;
  --borda: #d9e0da;
  --verde: #1f7a4a;
  --verde-escuro: #165c37;
  --destaque: #fff6d6;
  --perigo: #b3261e;
  --erro-fundo: #fdecea;
  --ok-fundo: #e6f4ec;
  --azul: #1f5f9e;
  --azul-escuro: #184b7d;
  --roxo-claro: #8a5ac2; /* número + estrela do nível e detalhe do selo (Eduardo, 20/10; antes vinho, roxo escuro, laranja) */
  --cinza-escuro: #3f4842; /* "Fixo" do goleiro nos times (Eduardo, 21/10) */
  --laranja-escuro: #b45309; /* convidado (Eduardo, 21/10; antes roxo) */
  --laranja-aba: #c2570c; /* destaque dos cartões da aba Jogadores (decisão 153; Gerenciar segue roxo) */
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #141815;
    --cartao: #1e2420;
    --texto: #e7ece8;
    --suave: #9aa79f;
    --borda: #333d37;
    --verde: #3aa56b;
    --verde-escuro: #2e8656;
    --destaque: #3a3420;
    --perigo: #ff8a80;
    --erro-fundo: #3a1f1d;
    --ok-fundo: #1d3326;
    --azul: #3a78bd;
    --azul-escuro: #2f669f;
    --roxo-claro: #c4a3ec;
    --cinza-escuro: #c3ccc6; /* no tema escuro, cinza que ainda se lê sobre o fundo */
    --laranja-escuro: #c2620e; /* um pouco mais claro, para o texto laranja se ler no fundo escuro */
    --laranja-aba: #f0954a;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  line-height: 1.45;
}
/* Faixa verde fixa no topo ao rolar (Eduardo, 21/10); continua sendo a âncora do menu suspenso do celular */
.topo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 12px 16px; background: var(--verde); color: #fff;
  position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
/* Laboratório (Eduardo, 28/10): o painel inteiro troca o verde por um laranja confortável (topo, botões, destaques) e os
   detalhes que no oficial são laranja (separadores e ícones do menu, convidados, cartões de Jogadores) ficam verdes —
   cores invertidas, para nunca confundir com o oficial. Laranja escolhido pela leitura: letra branca em cima dele passa
   de 4,5:1 no tema claro (#ad5a17) e fica acima do verde do oficial no escuro. Só valem com body.laboratorio. */
body.laboratorio {
  --verde: #ad5a17; --verde-escuro: #8c4812; --ok-fundo: #fbeee2; --fundo: #f7f4f1; --borda: #e6dbd0;
  --laranja-escuro: #1f7a4a; --laranja-aba: #2e8656;
}
@media (prefers-color-scheme: dark) {
  body.laboratorio {
    --verde: #c96f24; --verde-escuro: #a85a1b; --ok-fundo: #3a2a1d; --fundo: #181512; --borda: #3d3530;
    --laranja-escuro: #3aa56b; --laranja-aba: #4fbf80;
  }
}
.selo-lab { background: #fff; color: var(--verde); font-weight: 700; font-size: .75rem; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
/* Menu do laboratório igual no computador e no celular (Eduardo, 28/10): barra laranja-escura, detalhes brancos e
   separadores do proprietário em verde intenso. Antes, no celular: grafite com separadores verdes #2ee67a. */
body.laboratorio nav { background: var(--verde-escuro); }
body.laboratorio nav button { color: #fff; }
body.laboratorio nav button:hover { background: rgba(255,255,255,.08); }
body.laboratorio nav button.atual { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 3px 0 0 #fff; }
body.laboratorio .bloco-sair button { color: rgba(255,255,255,.72); }
body.laboratorio .titulo-bloco { color: #fff; }
body.laboratorio .titulo-bloco i { background: #fff; opacity: .35; }
body.laboratorio .titulo-bloco svg { stroke-width: 2; }
body.laboratorio .bloco-proprietario .titulo-bloco { color: #4dff95; }
body.laboratorio .bloco-proprietario .titulo-bloco i { background: #4dff95; opacity: .8; }
body.laboratorio .contagem-quadro.total { background: #8c4812; }
body.laboratorio .contagem-quadro.linha { background: #ad5a17; }
body.laboratorio .jc-pos-etiqueta { background: #f6e6d8; color: #ad5a17; }
body.laboratorio a.botao-link { background: #ad5a17; }
/* Com o topo fixo, o destino dos botões suspensos não fica escondido atrás dele */
main [id] { scroll-margin-top: 72px; }
.marca { font-weight: 700; font-size: 1.2rem; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 8px; }
/* A marca é um botão (leva à Lista de confirmados), mas sem cara de botão */
button.marca, button.marca:hover { background: transparent; color: inherit; border: 0; padding: 0; font-family: inherit;
  cursor: pointer; box-shadow: none; }
/* Logo no cabeçalho (Eduardo, 22/10): só a bola branca, sem fundo nem anel (a mesma imagem da barra de status) */
.marca-logo { width: 28px; height: 28px; }
/* Menu (decisão 144, Eduardo, 26/10): grafite claro, letra clara, blocos por categoria abertos por um título só de
   ícone em laranja, com um traço até a borda. Cores fixas, iguais no tema escuro. Mesmo visual nos dois tamanhos: no
   celular, suspenso sob a faixa verde; no computador, barra lateral fixa à esquerda (forma 2). */
nav { display: flex; flex-direction: column; background: #2a2f2d; padding: 12px 12px 16px; }
nav button { background: transparent; color: #edf0ee; border: 0; text-align: left; padding: 10px 12px; border-radius: 8px;
  font-size: .95rem; cursor: pointer; }
nav button:hover { background: rgba(255,255,255,.06); }
nav button.atual { background: #363d3a; color: #edf0ee; font-weight: 600; }
nav[hidden], .botao-menu[hidden] { display: none !important; }
.bloco-menu { display: flex; flex-direction: column; gap: 2px; }
.bloco-menu + .bloco-menu { margin-top: 12px; }
.bloco-proprietario { display: none; }
body.proprietario .bloco-proprietario { display: flex; }
.bloco-sair button { color: #a7afab; }
.titulo-bloco { display: flex; align-items: center; gap: 8px; padding: 0 12px 2px; color: #f08a50; }
.titulo-bloco svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.titulo-bloco i { flex: 1; height: 1px; background: #f08a50; opacity: .25; }
.so-proprietario { display: none; }
body.proprietario nav .so-proprietario { display: block; }
.botao-menu { display: none; margin-left: auto; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6);
  padding: 6px 12px; border-radius: 6px; font-size: 1rem; }
/* Computador: barra lateral fixa, da faixa verde até o pé da tela; a página e a faixa abrem espaço só quando o menu está
   visível (fora da tela de entrada) */
@media (min-width: 721px) {
  /* A barra começa abaixo da faixa (altura fixa no computador): o menu mora dentro da .topo e, começando no alto,
     cobria a logo (Eduardo, 26/10) */
  .topo { height: 56px; }
  .marca { position: relative; z-index: 6; }
  nav { position: fixed; top: 56px; left: 0; bottom: 0; width: 250px; z-index: 5; overflow-y: auto; padding-top: 14px; }
  body:has(#menu:not([hidden])) { padding-left: 250px; }
  body:has(#menu:not([hidden])) .topo { margin-left: -250px; }
  body:has(#menu:not([hidden])) .acompanhar-pausado { left: 266px; }
  /* No computador, a barra é verde com detalhes brancos (Eduardo, 26/10: "inverter: fundo verde, detalhes brancos"):
     verde-escuro da paleta, um tom abaixo da faixa do topo. O celular mantém o grafite com laranja. */
  nav { background: var(--verde-escuro); }
  nav button { color: #fff; }
  nav button:hover { background: rgba(255,255,255,.08); }
  nav button.atual { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 3px 0 0 #fff; }
  .bloco-sair button { color: rgba(255,255,255,.72); }
  .titulo-bloco { color: #fff; }
  .titulo-bloco i { background: #fff; opacity: .35; }
  /* Blocos só do proprietário (Administradores + Editar Foto; Registro): separador laranja (Eduardo, 28/10) */
  .bloco-proprietario .titulo-bloco { color: #f08a50; }
  .bloco-proprietario .titulo-bloco i { background: #f08a50; opacity: .7; }
}
/* Celular: menu suspenso (Eduardo, 20/10) */
@media (max-width: 720px) {
  .botao-menu { display: inline-block; }
  nav { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 5; box-shadow: 0 8px 18px rgba(0,0,0,.25);
    /* não passa do pé da tela; rola por dentro (Eduardo, 26/10: "Minha conta" ficava fora da tela) */
    max-height: calc(100vh - var(--topo-alt, 56px)); max-height: calc(100dvh - var(--topo-alt, 56px));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  nav.aberto { display: flex; }
  nav > * { flex-shrink: 0; }   /* os blocos não se espremem: o que sobra rola */
  nav button { padding: 12px; font-size: 1rem; }
  /* Blocos só do proprietário: separador amarelo-escuro, para destacar do laranja dos demais (Eduardo, 28/10) */
  .bloco-proprietario .titulo-bloco { color: #d4a72c; }
  .bloco-proprietario .titulo-bloco i { background: #d4a72c; opacity: .5; }
}
main { max-width: 760px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.4rem; margin: 8px 0 12px; }
h2 { font-size: 1.05rem; margin: 0 0 8px; }
.cartao {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px;
  padding: 14px; margin-bottom: 12px;
}
.cartao.linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cartao.apagado { opacity: .6; }
.cartao.registro { padding: 8px 12px; font-size: .9rem; margin-bottom: 6px; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.grade .cartao { margin: 0; }
label { display: block; margin-bottom: 10px; font-size: .95rem; }
input {
  display: block; width: 100%; margin-top: 4px; padding: 10px; font-size: 1rem;
  border: 1px solid var(--borda); border-radius: 6px; background: var(--fundo); color: var(--texto);
}
button {
  font: inherit; padding: 10px 14px; border-radius: 6px; border: 0; cursor: pointer;
  background: var(--verde); color: #fff;
}
button:hover { background: var(--verde-escuro); }
.suave { color: var(--suave); }
.aviso { color: var(--perigo); min-height: 1.2em; margin: 8px 0 0; }
/* Legenda de contagem no topo de Jogadores e Gerenciar jogadores (decisão 147, Eduardo, 26/10) */
/* "Mais destacado" (Eduardo, 26/10): três quadros com o número grande */
.contagem { margin: 2px 0 10px; }
.contagem:empty { display: none; }
/* Reduzido em 50% (Eduardo, 26/10 "reduza o tamanho em 50%"): número e espaços pela metade; a palavra só até .66rem,
   para continuar legível */
.contagem-quadros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.contagem-quadro { border-radius: 7px; padding: 4px 4px; color: #fff; text-align: center;
  display: flex; flex-direction: column; align-items: center; box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.contagem-quadro strong { font-size: 1rem; line-height: 1.1; font-weight: 800; }
.contagem-quadro span { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; opacity: .95; }
/* cores fixas (as do tema claro) para o texto branco se ler também no tema escuro */
.contagem-quadro.total { background: #165c37; }
.contagem-quadro.linha { background: #1f7a4a; }
.contagem-quadro.goleiro { background: #1f5f9e; }
.contagem-nota { margin: 4px 0 0; font-size: .78rem; color: var(--suave); text-align: center; }
.destaque { background: var(--destaque); padding: 10px 12px; border-radius: 8px; }
button.cartao.ativo { display: block; width: 100%; text-align: left; color: var(--texto); font: inherit; }
button.cartao.ativo:hover { background: var(--cartao); border-color: var(--verde); }
.botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
button.secundario { background: transparent; color: var(--verde); border: 1px solid var(--verde); }
button.secundario:hover { background: transparent; }
/* Botão discreto: só texto cinza sublinhado, no fim da fileira ("Apagar" da Lista de confirmados, Eduardo, 26/10) */
button.discreto { background: transparent; color: var(--suave); border: 0; padding: 6px 4px; font-size: .9rem;
  text-decoration: underline; text-underline-offset: 3px; margin-left: auto; }
button.discreto:hover { background: transparent; color: var(--texto); }
button.azul { background: var(--azul); }   /* Classificar, para destacar de "Enviar mensagem" (Eduardo, 20/10) */
button.azul:hover { background: var(--azul-escuro); }
button.perigo { background: var(--perigo); }
button.perigo:hover { background: var(--perigo); filter: brightness(.9); }
/* Botões do cadastro pendente com ícone e fundo, em tons calmos (Eduardo, 23/10: "mais clean e elegante", mas "ainda
   quero botões com fundo"). Só o Aprovar em verde cheio; os outros em fundo suave com letra e ícone na cor do tom.
   (Antes: vermelho cheio no Recusar e amarelo/laranja cheio no Foto fora do padrão.) */
.jc-pendente .jc-acoes button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; }
.jc-pendente .jc-acoes button .icone { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
button.b-aprovar, button.b-aprovar:hover { background: var(--verde); color: #fff; }
button.b-recusar, button.b-recusar:hover { background: #fbe3e1; color: #a2231b; }
button.b-foto, button.b-foto:hover { background: #fdf0c4; color: #6e5100; }
button.b-aprovar:hover, button.b-recusar:hover, button.b-foto:hover { filter: brightness(.95); }
/* Cadastro pendente (aba Cadastros) no estilo do Plano de jogo (Eduardo, 23/10): foto no alto, da largura do cartão,
   em pé (3:4) e inteira (sem corte); embaixo, "Aguardando", a tarja do alerta, os dados na faixa branca, "Enviado em" e
   os botões. Largura máxima para a foto não ficar enorme no computador. (Antes, 12:33: foto 192 px ao lado dos dados.) */
.cartao.jc.jc-pendente { grid-template-columns: 1fr; gap: 0; padding: 0; width: 100%; max-width: 480px; justify-self: center;
  overflow: hidden;
  border: 2px solid #3d5a4a; }
/* Versão alternativa (Eduardo, 23/10): foto QUADRADA, cortada como no Plano de jogo (centro um pouco acima do meio).
   A versão anterior — em pé e inteira — era: aspect-ratio: 3 / 4; object-fit: contain. */
/* 13:12 (Eduardo, 23/10): cartão 25% menor no computador (640 → 480 px; no celular segue a largura da tela, sem respiros
   grandes nas laterais) e foto QUADRADA menor (240 px), centralizada no alto do cartão; a foto aparece inteira dentro do
   quadrado (contain, sobras em cinza), sem perder superfície no enquadre. Antes, 13:08: foto 3:2 da largura do cartão. */
.jc-foto-caixa { position: relative; justify-self: center; width: 240px; max-width: calc(100% - 24px); margin: 14px 0 0; }
.jc-pendente .jc-foto { display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: contain; border-radius: 10px; margin: 0; background: #c9d3cd; cursor: zoom-in; }
/* Lápis de ajustar a foto (decisão 137), no canto inferior direito da foto (Eduardo, 23/10). */
button.jc-ajustar, button.jc-ajustar:hover { position: absolute; right: 8px; bottom: 8px; width: 38px; height: 38px; padding: 0;
  border-radius: 50%; display: grid; place-items: center; background: #fff; color: #8a948e; border: 0;   /* fundo branco, setas em cinza médio, sem contorno (Eduardo, 23/10) */
  box-shadow: 0 1px 5px rgba(0,0,0,.4); }
button.jc-ajustar .icone { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round;
  stroke-linecap: round; }
/* Espaço otimizado (Eduardo, 23/10): "Aguardando" sobre o canto da foto (como o "Fixo" do Plano de jogo); dados em duas
   colunas lado a lado, com o "Enviado em" como mais um campo; respiros menores. */
.jc-pendente .jc-id { top: 10px; right: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.jc-pendente .alerta-foto { margin: 0; }
.jc-pendente .jc-corpo { padding: 10px 12px 0; }
.jc-pendente .jc-topo { padding-right: 0; }
.jc-pendente .jc-dados { grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 8px; }
.jc-pendente .jc-dado-largo { grid-column: 1 / -1; }
/* Cartão centralizado na tela (Eduardo, 23/10: largura máx. 420 → 300 → 260 → de volta à largura da tela, até 640 px).
   Nome + posição numa peça só (Eduardo, 23/10): colados, nome no verde de sempre e posição em cinza claro. */
.jc-pendente .jc-nome { gap: 4px 8px; }
.jc-pendente .jc-nome-fundo { border-radius: 8px 0 0 8px; margin-right: -8px; }   /* o -8 desfaz o espaço da linha */
/* Posição em laranja claro com letra preta, menor que o nome (Eduardo, 23/10; antes cinza claro, roxo e cinza escuro);
   cores fixas, iguais no tema escuro. Estica até a altura do nome, para as duas partes seguirem uma peça só. */
/* Proposta "clean" aceita (Eduardo, 23/10): posição em verde bem claro com letra verde, da família do nome (antes laranja). */
.jc-pos-etiqueta { background: #e3efe8; color: #1f7a4a; padding: 3px 10px; border-radius: 0 8px 8px 0; font-weight: 400;
  font-size: .8rem; align-self: stretch; display: inline-flex; align-items: center; }
.jc-pendente .jc-acoes { margin: 10px 0 0; padding: 10px 12px 12px; }
button:disabled { opacity: .5; cursor: not-allowed; }
.endereco { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; word-break: break-all; margin-top: 6px; }
.em-linha { margin-top: 14px; }
.cartao.jogador { display: flex; gap: 12px; align-items: flex-start; }
.foto { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; flex: none; background: var(--borda); }
.info { min-width: 0; overflow-wrap: anywhere; }
.apelido { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.apelido input { margin-top: 0; }
.apelido button { flex: none; }
.previa { max-width: 100%; max-height: 260px; border-radius: 8px; margin-top: 8px; display: block; }
a.botao-link { display: inline-block; padding: 10px 14px; border-radius: 6px; background: #1e8e4e; color: #fff; text-decoration: none; }
a.botao-link:hover { filter: brightness(.92); }
.foto-admin { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; flex: none; }
button.voltar { background: transparent; color: var(--verde); border: 1px solid var(--verde); padding: 6px 12px; margin: 4px 0 4px; font-size: .95rem; }
button.voltar:hover { background: transparent; filter: brightness(1.1); }
img[data-ampliar] { cursor: zoom-in; }
.ampliada { position: fixed; inset: 0; z-index: 10; background: rgba(0,0,0,.85); display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
.ampliada[hidden] { display: none; }
/* Confirmação de saída pelo voltar do celular (decisão 131) */
.sair-painel { position: fixed; inset: 0; z-index: 11; background: rgba(0,0,0,.6); display: flex; align-items: center;
  justify-content: center; padding: 16px; }
.sair-painel[hidden] { display: none; }
.sair-painel .cartao { width: 100%; max-width: 320px; text-align: center; }
.sair-botoes { display: flex; gap: 10px; justify-content: center; }
/* Faixa "Toque novamente para sair." (Eduardo, 24/10), no tom do aviso de atualização pausada; acima de tudo. */
.sair-aviso { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 70; max-width: calc(100% - 32px); background: #1f2a24; color: #fff; padding: 10px 16px; border-radius: 12px;
  font-size: .9rem; text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.sair-aviso[hidden] { display: none; }
/* Aviso para refazer o cadastro: motivos um embaixo do outro; "Outro motivo" abre a caixa do texto. */
.motivo-opcoes { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.motivo-opcoes button.escolhido { outline: 3px solid var(--verde); outline-offset: 2px; }
.motivo-outro { display: flex; flex-direction: column; gap: 6px; text-align: left; margin-bottom: 10px; }
.motivo-outro[hidden] { display: none; }
.motivo-outro textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px; }
/* Ajuste do enquadramento da foto (decisão 137): quadro quadrado; a foto se move dentro dele (arrastar e aproximar). */
.ajuste-foto .cartao { max-width: 360px; }
.ajuste-dica { font-size: .85rem; margin: 4px 0 10px; }
.ajuste-quadro { position: relative; width: min(80vw, 300px); aspect-ratio: 1 / 1; margin: 0 auto; overflow: hidden;
  border-radius: 10px; background: #c9d3cd; touch-action: none; cursor: grab; outline: 3px solid var(--verde); }
.ajuste-quadro img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none;
  pointer-events: none; }
#ajuste-zoom { width: 100%; margin: 12px 0; padding: 0; border: 0; background: none; }
.ampliada img { max-width: 100%; max-height: calc(100vh - 80px); border-radius: 8px; object-fit: contain; }
.ampliada p { color: #fff; margin: 10px 0 0; font-size: .9rem; }
.titulo-secao { margin: 22px 0 4px; }
.foto-admin.grande { width: 96px; height: 96px; }
.admin-info { display: flex; gap: 10px; align-items: center; }
.selo { color: var(--perigo); font-size: .75rem; font-weight: 600; margin-left: 4px; }
/* Caixa de resultado do cadastro (Eduardo, 20/10): recusa em vermelho com ✖, sucesso em verde com ✔. */
.alerta { display: flex; gap: 12px; align-items: flex-start; padding: 14px; margin: 12px 0; border: 2px solid; border-radius: 10px; }
.alerta[hidden] { display: none; }
.alerta.erro { background: var(--erro-fundo); border-color: var(--perigo); }
.alerta.ok { background: var(--ok-fundo); border-color: var(--verde); }
.alerta .icone { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 1.05rem; color: var(--fundo); }
.alerta.erro .icone { background: var(--perigo); }
.alerta.ok .icone { background: var(--verde); }
.alerta strong { display: block; font-size: 1.1rem; }
.alerta.erro strong { color: var(--perigo); }
.alerta.ok strong { color: var(--verde); }
.alerta p { margin: 4px 0 0; }
/* Ficha do jogador (20/10): foto | corpo; faixa de botões e painel ocupam a largura toda embaixo. */
.lista-jc { display: grid; gap: 14px; }
/* Aba Editar Foto (decisão 136): uma linha por jogador, foto | nome e ID | botões (os botões descem no celular estreito). */
.ef-lista { display: grid; gap: 10px; }
.ef-item { display: grid; grid-template-columns: 72px 1fr; gap: 6px 12px; align-items: center; padding: 10px 12px; }
.ef-foto { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; background: var(--borda); grid-row: span 2; cursor: zoom-in; }
.ef-nome { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.ef-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ef-acoes button { padding: 8px 12px; }
/* Caixa do aviso enviado: no lugar do cartão que saiu, na largura do cartão pendente; nome do jogador em destaque. */
/* Instruções da Lista de confirmados em três itens numerados (decisão 139, Eduardo, 24/10). Tom de cartão comum, para
   não se confundir com a caixa de chamadas do topo (amarela, barra azul, letra cheia). */
.instrucoes-lista { list-style: none; counter-reset: passo; background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 10px; padding: 12px 14px; margin: 8px 0 14px; display: grid; gap: 8px; }
.instrucoes-lista li { counter-increment: passo; display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
  color: var(--suave); font-size: .95rem; line-height: 1.4; }
/* Círculo laranja suave com número cinza bem escuro (Eduardo, 24/10); cores fixas, legíveis nos dois temas */
.instrucoes-lista li::before { content: counter(passo); width: 22px; height: 22px; border-radius: 50%; background: #fbd9b5;
  color: #2b2f2c; display: grid; place-items: center; font-size: .8rem; font-weight: 700; margin-top: 1px; }
.aviso-whats { width: 100%; max-width: 480px; justify-self: center; box-sizing: border-box; margin: 0; }
.aviso-whats p { margin: 0 0 8px; }
.aviso-nome { font-size: 1.15rem; }
.cartao.jc { display: grid; grid-template-columns: 96px 1fr; gap: 14px 16px; padding: 16px; margin: 0;
  border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.04); }
.jc-foto { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; background: var(--borda); }
.jc-corpo { min-width: 0; overflow-wrap: anywhere; }
.jc-foto.sem-foto { display: grid; place-items: center; font-size: 2rem; font-weight: 700; color: var(--suave); }
.cartao.jc { position: relative; }
.jc-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-right: 5.5em; }
/* Número de cadastro discreto no canto (Eduardo, 20/10). */
.jc-id { position: absolute; top: 12px; right: 14px; font-size: .75rem; color: var(--suave); letter-spacing: .04em; }
.jc-id.pendente { color: var(--texto); background: var(--destaque); padding: 2px 8px; border-radius: 999px; }
.jc-nome { font-size: 1.15rem; margin: 0; line-height: 1.25; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* Nome principal com fundo e letra branca (Eduardo, 20/10); apelidos fora do fundo. */
.jc-nome-fundo { background: var(--verde); color: #fff; padding: 3px 10px; border-radius: 8px; font-weight: 400; }
.jc-apelidos { font-weight: 400; color: var(--suave); font-size: 1rem; }
.jc-dados { margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px 18px; }
.jc-dados dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.jc-dados dd { margin: 1px 0 0; font-size: .95rem; }
.jc-classif { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 12px 18px; }
/* Nível fora do selo, logo acima dele (Eduardo, 20/10): número + estrela em destaque, roxo escuro. */
.jc-pos-bloco { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.jc-estrela-valor { font-size: 1.2rem; font-weight: 700; line-height: 1.1; color: var(--roxo-claro); }
.jc-estrela-valor.vazio { font-size: .9rem; font-weight: 400; color: var(--suave); font-style: italic; }
.chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 0; padding: 6px 4px; border-radius: 10px;
  border: 1px solid var(--borda); border-left: 3px solid var(--roxo-claro); background: var(--fundo); font-size: .88rem; }
.chip.vazio { color: var(--suave); font-style: italic; padding: 6px 10px; border-left-width: 1px; }
.chip-campo { padding: 0 8px; }
.chip-campo + .chip-campo { border-left: 1px solid var(--borda); }
.chip-rotulo { color: var(--suave); font-size: .8rem; }
.chip-valor { font-weight: 600; }
.chip-campo.voto .chip-valor { font-weight: 400; }
.jc-meta { margin: 10px 0 0; font-size: .8rem; color: var(--suave); }
/* Decisão 153, modelo D·1 (Eduardo, 26/10): no alto, foto de 112 px (ícones das posições no canto) com nome, nome
   completo e telefone ao lado; embaixo, um bloco de habilidade por posição, na largura toda ("Faixa"); três tamanhos
   de letra (grande 1.25rem, corpo .9rem, rótulo .7rem). Destaque por aba: laranja em Jogadores, roxo em Gerenciar. */
#tela-jogadores { --acento: var(--laranja-aba); }
#tela-gerenciar { --acento: var(--roxo-claro); }
.cartao.jc.jc-aprovado { display: flex; flex-direction: column; gap: 12px; }
.jc-cab { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: start; }
.jc-foto-ap { position: relative; width: 112px; height: 112px; }
.jc-aprovado .jc-foto { width: 112px; height: 112px; }
.jc-pos-na-foto { position: absolute; right: 5px; bottom: 5px; display: flex; gap: 3px; }
.jc-pos-icone { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.95); color: var(--acento); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.jc-pos-icone .icone { width: 13px; height: 13px; stroke-width: 2; }
.jc-aprovado .jc-topo { padding-right: 3.2em; }
.jc-aprovado .jc-id { font-size: .7rem; }
.jc-aprovado .jc-nome { font-size: 1.25rem; line-height: 1.2; gap: 2px 8px; }
.jc-aprovado .jc-nome-fundo { font-weight: 500; padding: 2px 10px; }
.jc-aprovado .jc-apelidos { font-size: .9rem; }
.jc-aprovado .jc-dados { grid-template-columns: 1fr; margin-top: 8px; }
.jc-aprovado .jc-dados dt { font-size: .7rem; }
.jc-aprovado .jc-dados dd { font-size: .9rem; margin: 0; }
.jc-aprovado .jc-meta { margin: 0; font-size: .7rem; }
.jc-rodape { display: flex; flex-direction: column; gap: 8px; }
.jc-rodape:empty { display: none; }
.jc-rodape .grafias { margin: 0; }
.jc-habilidades { display: flex; flex-direction: column; gap: 8px; }
.jc-hab { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 12px; background: color-mix(in srgb, var(--acento) 7%, var(--cartao)); }
.jc-hab-nivel { display: flex; flex-direction: column; align-items: flex-start; min-width: 80px; padding-right: 12px;
  border-right: 1px solid color-mix(in srgb, var(--acento) 30%, transparent); }
.jc-hab-pos { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--acento); }
.jc-hab-est { font-size: 1.25rem; font-weight: 800; line-height: 1.1; color: var(--acento); white-space: nowrap; }
.jc-hab-est.vazio { font-size: .7rem; font-weight: 400; font-style: italic; color: var(--suave); }
.jc-hab-meio { display: flex; flex-direction: column; min-width: 0; }
.jc-hab-rot { font-size: .7rem; color: var(--suave); }
.jc-hab-val { font-size: .9rem; font-weight: 600; line-height: 1.2; }
.jc-hab-val.vazio { font-weight: 400; font-style: italic; color: var(--suave); }
.jc-hab .selos-fator { justify-content: flex-end; }
.jc-pos-vazio { font-size: .7rem; font-style: italic; color: var(--suave); padding: 8px 10px; border: 1px dashed var(--borda);
  border-radius: 12px; text-align: center; }
.jc-acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--borda); }
.jc-acoes:empty { display: none; }
.jc-painel { grid-column: 1 / -1; }
.jc-painel:empty { display: none; }
@media (max-width: 420px) {
  .cartao.jc { grid-template-columns: 72px 1fr; gap: 12px; padding: 14px; }
  .jc-foto { width: 72px; height: 72px; }
  .jc-acoes > * { flex: 1 1 auto; text-align: center; }   /* botões dividem a largura: alvo maior para o dedo */
}

.busca { margin: 4px 0 10px; }
/* Pesquisa da Ajuda em destaque (Eduardo, 27/10: "ele fundiu ao plano de fundo"): fundo de cartão, borda verde, lupa
   à esquerda e sombra leve */
/* cor: laranja da paleta, suave (Eduardo, 27/10: distinto do verde, "suave"): borda fina e translúcida, lupa clara */
#busca-ajuda { margin: 6px 0 14px; padding: 12px 12px 12px 40px; border: 1.5px solid rgba(224,122,58,.5); border-radius: 10px;
  background: var(--cartao) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e07a3a' stroke-opacity='.65' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") no-repeat 12px center / 19px 19px;
  box-shadow: 0 1px 5px rgba(0,0,0,.08); font-size: 1rem; }
#busca-ajuda:focus { outline: none; box-shadow: 0 0 0 3px rgba(224,122,58,.22), 0 2px 8px rgba(0,0,0,.12); }
.filtro-posicao { margin: 0 0 10px; }   /* Linha | Todos | Goleiro (Eduardo, 20/10; ordem da decisão 151) */
/* Frase discreta abaixo do título de Jogadores e de Gerenciar jogadores (decisão 151) */
.metrica-aba { margin: -6px 0 10px; color: var(--suave); font-size: .82rem; font-style: italic; }
/* Aviso de segurança sobre as habilidades (decisão 155, 27/10): faixa discreta, fixa, logo abaixo do título */
.aviso-sigilo { margin: -4px 0 12px; padding: 6px 10px; border-left: 3px solid var(--verde); border-radius: 6px;
  background: var(--ok-fundo); color: var(--texto); font-size: .86rem; font-weight: 600; }
.aviso-sigilo + .metrica-aba { margin-top: 0; }
/* Barreiras contra o compartilhamento (decisão 156, 27/10). A marca diagonal e a etiqueta do canto saíram (Eduardo,
   27/10): o ID de quem vê aparece SÓ nos cartões que juntam foto e dados sensíveis, pequeno e suave, entre a foto e
   as habilidades/dados — cartão de jogador (Jogadores, Gerenciar), cadastro pendente (Cadastros), linha da Lista de
   confirmados e cartões dos times. --quem vem do app.js ("A03"). */
.jc-quem::before, .card-quem::before, .lista-quem::before { content: var(--quem, ""); font-size: .62rem; font-weight: 600;
  letter-spacing: .08em; color: var(--suave); opacity: .55; }
.jc-quem { margin: -8px 0; text-align: center; line-height: 1; }   /* margem negativa: devolve o espaço do cartão */
.jc-pendente .jc-quem { margin: 6px 0 0; }   /* cartão pendente não tem espaço entre as partes */
/* Jogadores e Gerenciar (Eduardo, 27/10): à esquerda, na largura da foto (112px, coluna da .jc-cab) e centralizado no
   eixo vertical dela */
.jc-aprovado .jc-quem { width: 112px; text-align: center; }
.card-quem { line-height: 1; margin-bottom: 2px; }
.campo li.ausente .card-quem::before { color: #5d6a62; }
/* Ajuda e boas práticas (decisão 157): itens só do proprietário aparecem só para ele */
body.proprietario .ajuda .so-proprietario { display: block; }
.ajuda ul { margin: 6px 0 10px; padding-left: 20px; }
.ajuda li { margin: 4px 0; }
.ajuda h2 + p, .ajuda p { margin: 6px 0; }
.ajuda dt { font-weight: 700; margin-top: 10px; }
.ajuda dd { margin: 2px 0 0; color: var(--texto); }
/* temas fechados, abrem com um toque no título (Eduardo, 27/10): seta à direita que gira ao abrir */
details.ajuda > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
details.ajuda > summary::-webkit-details-marker { display: none; }
details.ajuda > summary h2 { margin: 0; font-size: 1.05rem; flex: 0 1 auto; }
/* ícone do tema logo depois do nome, pequeno e suave (Eduardo, 27/10: "depois do nome… um pouco menor para ser mais
   sutil"); a seta de abrir vai para a ponta direita */
details.ajuda > summary { justify-content: flex-start; gap: 7px; }
details.ajuda > summary::after { margin-left: auto; }
.ajuda-icone { flex: none; display: inline-flex; color: var(--verde); opacity: .7; }
.ajuda-icone svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
details.ajuda > summary::after { content: "▸"; color: var(--verde); font-size: 1.1rem; transition: transform .15s; }
details.ajuda[open] > summary::after { transform: rotate(90deg); }
details.ajuda[open] > summary { margin-bottom: 8px; }
/* Termo de compromisso com o sigilo (Eduardo, 27/10), na tela do primeiro acesso */
.termo-sigilo { margin: 16px 0 12px; padding: 12px 14px; border: 1px solid var(--verde); border-radius: 10px; background: var(--ok-fundo); }
.termo-sigilo h2 { margin: 0 0 6px; font-size: 1.05rem; }
.termo-sigilo ul { margin: 6px 0 8px; padding-left: 20px; }
.termo-sigilo li { margin: 4px 0; }
.termo-aceite { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; margin-top: 8px; }
.termo-aceite input { width: 20px; height: 20px; margin: 0; }
/* dois blocos (Eduardo, 27/10): Sigilo e segurança × Como usar as abas; temas das abas do proprietário só para ele */
/* títulos dos dois blocos mais destacados (Eduardo, 27/10 16:13): faixa verde cheia, letra branca */
.ajuda-grupo { margin: 26px 0 10px; padding: 10px 14px; border-radius: 8px; background: var(--verde); color: #fff;
  font-size: .95rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
/* quadro "Verificações técnicas no banco" (Eduardo, 27/10 16:36): mais recente em cima, ~5 linhas e rolagem por dentro */
.verificacoes { margin: 12px 0; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; }
.verificacoes h3 { margin: 0 0 6px; font-size: .9rem; }
.verificacoes-lista { margin: 0; padding: 0; list-style: none; max-height: 9.5em; overflow-y: auto; font-size: .85rem; line-height: 1.6; }
.verificacoes-lista li + li { border-top: 1px solid var(--borda); }
/* Quadro fechado; o botão abre a lista numa caixa logo abaixo (Eduardo, 28/10). */
.ver-registros { background: none; border: none; padding: 2px 0; color: var(--verde); font: inherit; font-size: .9rem;
  font-weight: 600; text-decoration: underline; cursor: pointer; }
.ver-registros::before { content: "▸ "; }
.ver-registros[aria-expanded="true"]::before { content: "▾ "; }
.verificacoes-lista:not([hidden]) { margin-top: 6px; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 6px;
  background: var(--fundo, #fff); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
body.proprietario details.ajuda.so-proprietario { display: block; }
details.ajuda[hidden], .ajuda-grupo[hidden] { display: none !important; }   /* pesquisa na Ajuda esconde o que não casa */
.ajuda ol { margin: 6px 0 10px; padding-left: 22px; }
.ajuda ol li { margin: 5px 0; }
/* situações nos temas das abas (Eduardo, 27/10: "dê respiro ao texto, use destaques para situações"): título da
   situação em faixa com barra verde, espaço antes de cada uma, texto embaixo com linha mais folgada */
.ajuda h3.situacao { margin: 18px 0 6px; padding: 4px 10px; border-left: 3px solid var(--verde); border-radius: 4px;
  background: var(--ok-fundo); font-size: .92rem; font-weight: 700; color: var(--texto); }
.ajuda h3.situacao + p, .ajuda h3.situacao + ol { margin-top: 4px; }
details.ajuda[open] > p, details.ajuda[open] > ol, details.ajuda[open] > ul { line-height: 1.5; }
details.ajuda[open] > p:first-of-type { margin-bottom: 4px; }
.ajuda p b { color: var(--verde); }   /* "Efeito:" e rótulos das variações em verde (Eduardo, 27/10) */
.ajuda em { font-style: normal; font-weight: 600; }
/* exemplo de linha do Registro na Ajuda (Eduardo, 27/10) */
.ajuda-exemplo { margin: 6px 0 8px; padding: 8px 10px; border: 1px dashed var(--borda); border-radius: 6px;
  font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
/* pílulas da Ajuda (Eduardo, 28/10): botão = verde cheio; aba = contorno verde; opção de lista = cinza; pergunta que
   a tela mostra = tracejada. Fluxo de botões em sequência, com setas; exemplo e alerta em caixas próprias. */
.ajuda .p-bt, .ajuda .p-aba, .ajuda .p-op, .ajuda .p-perg { display: inline-block; padding: 0 8px; border-radius: 999px;
  font-size: .86em; font-weight: 700; line-height: 1.55; vertical-align: 1px; }
.ajuda .p-bt { background: var(--verde); color: #fff; }
.ajuda .p-aba { border: 1.5px solid var(--verde); color: var(--verde); background: var(--cartao); }
.ajuda .p-aba::before { content: "▤ "; font-weight: 400; }
.ajuda .p-op { background: rgba(128,128,128,.2); color: var(--texto); }
.ajuda .p-perg { border-radius: 6px; border: 1.5px dashed var(--suave); color: var(--texto); font-weight: 600; }
.ajuda p.fluxo { margin: 4px 0 10px; padding: 6px 10px; border: 1px dashed var(--borda); border-radius: 8px; line-height: 2.1; }
.ajuda .fluxo .seta { margin: 0 5px; color: var(--suave); }
.ajuda p.ajuda-ex { margin: 6px 0 8px; padding: 8px 10px; border-radius: 8px; background: rgba(128,128,128,.1); }
/* Decisão 162: termo pesquisado marcado no texto (marca-texto amarelo; legível no claro, no escuro e dentro das pílulas). */
.ajuda mark.marca-busca { background: #ffe066; color: #1a1a1a; border-radius: 2px; padding: 0 1px; }
.ajuda p.ajuda-alerta { margin: 10px 0; padding: 8px 10px; border: 1.5px solid #c9a227; border-radius: 8px; background: rgba(201,162,39,.12); }
.ajuda h3.parte-ajuda { margin: 22px 0 6px; font-size: .95rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--verde); }
body.proprietario .ajuda h3.so-proprietario, body.proprietario .ajuda p.so-proprietario { display: block; }
body.proprietario .ajuda ol.so-proprietario { display: block; }   /* nome de seção da tela (Lista de espera, Fora do jogo…) */
/* Copiar bloqueado fora dos campos de digitar; segurar o dedo na foto não oferece "salvar" */
main, .atalhos { -webkit-user-select: none; user-select: none; }
main input, main textarea, main [contenteditable] { -webkit-user-select: text; user-select: text; }
main img { -webkit-touch-callout: none; -webkit-user-drag: none; }
/* Impressão (e "salvar como PDF") sai só com a frase */
.so-impressao { display: none; }
@media print {
  body > *:not(.so-impressao) { display: none !important; }
  .so-impressao { display: block !important; margin: 40px; font: 600 16pt system-ui, sans-serif; color: #000; }
}
/* Barra deslizante (decisão 151): três partes iguais; o destaque verde corre até a opção tocada */
.deslizante { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 360px;
  padding: 3px; border: 1px solid var(--verde); border-radius: 999px; background: var(--cartao); box-sizing: border-box; }
.deslizante .marcador { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3);
  border-radius: 999px; background: var(--verde); transform: translateX(calc(100% * var(--i, 1))); transition: transform .25s ease; }
.deslizante button { position: relative; z-index: 1; background: transparent; color: var(--verde); border-radius: 999px;
  padding: 7px 6px; font-size: .9rem; transition: color .25s ease; }
.deslizante button:hover { background: transparent; }
.deslizante button.ativo { color: #fff; }
@media (prefers-reduced-motion: reduce) { .deslizante .marcador, .deslizante button { transition: none; } }
/* Interruptores liga/desliga (decisão 151): Carrossel e Classificação pendente */
.interruptores { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.interruptor { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .9rem; user-select: none; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor .trilho { position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; background: var(--borda);
  transition: background .2s ease; }
.interruptor .trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s ease; }
.interruptor input:checked + .trilho { background: var(--verde); }
.interruptor input:checked + .trilho::after { transform: translateX(18px); }
.interruptor input:focus-visible + .trilho { outline: 2px solid var(--verde); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .interruptor .trilho, .interruptor .trilho::after { transition: none; } }
/* Lista | Carrossel (Eduardo, 20/10) */
.barra-modo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 12px; }
.modo { display: inline-flex; border: 1px solid var(--verde); border-radius: 8px; overflow: hidden; }
.modo button { background: transparent; color: var(--verde); border-radius: 0; padding: 7px 14px; font-size: .9rem; }
.modo button:hover { background: transparent; filter: brightness(1.15); }
.modo button.ativo { background: var(--verde); color: #fff; }
.carrossel-nav { display: inline-flex; align-items: center; gap: 10px; }
.carrossel-nav[hidden] { display: none; }
.carrossel-nav button { width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 1.4rem; line-height: 1; }
.carrossel-nav [data-contador] { min-width: 5.5em; text-align: center; color: var(--suave); font-size: .9rem; }
.lista-jc.carrossel { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; padding-bottom: 6px; }
.lista-jc.carrossel > .cartao.jc { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.lista-jc.carrossel > p { flex: 0 0 100%; }

/* Módulo 1.3 — painel de classificação (aba Gerenciar jogadores) */
.classif { margin-top: 12px; padding: 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); }
.classif-linha { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.classif-linha input[type="checkbox"] { width: 20px; height: 20px; margin: 0; display: inline-block; }
.classif-pos { margin: 0; min-width: 4.5em; font-weight: 600; }
.classif select { flex: 1 1 12em; padding: 8px; font: inherit; border: 1px solid var(--borda); border-radius: 6px;
  background: var(--cartao); color: var(--texto); }
.classif select:disabled { opacity: .5; }
.classif-voto { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
button.estrela { background: transparent; color: var(--texto); border: 1px solid var(--borda); padding: 6px 10px; }
button.estrela:hover { background: transparent; border-color: var(--verde); }
button.estrela.marcada { background: var(--verde); color: #fff; border-color: var(--verde); }
.tel-linha { display: flex; gap: 8px; margin-top: 4px; }
.tel-linha input { margin-top: 0; }
.tel-linha .ddi { flex: 0 0 4.5em; text-align: center; }
.selo.opcional { color: var(--verde); }   /* Eduardo, 20/10: opcional em verde, obrigatório em vermelho */
.dica { display: block; color: var(--suave); font-size: .85rem; margin-top: 4px; }
.aviso-privacidade { margin: 16px 0 10px; }   /* aviso de privacidade acima do Enviar (Eduardo, 21/10) */
.aviso-privacidade .dica + .dica { margin-top: 8px; }
.erro-campo { display: block; color: var(--perigo); font-size: .9rem; font-weight: 600; margin-top: 4px; }
.erro-campo:empty { display: none; }
input.com-erro { border: 2px solid var(--perigo); }
.campo-foto { margin-bottom: 14px; }
.campo-foto label { margin-bottom: 0; }
.campo-foto button { margin-top: 8px; }
/* Orientação da foto em destaque (Eduardo, 23/10): faixa amarela, barra laranja à esquerda, letra cheia. */
/* Mesmo destaque na orientação dos apelidos (Eduardo, 24/10), em laranja suave (o dos círculos das instruções da
   Lista), com letra cinza bem escuro; cores fixas, legíveis nos dois temas. */
.dica-apelidos { background: #fbd9b5; border-left: 4px solid var(--laranja-escuro); border-radius: 6px;
  padding: 10px 12px; margin: 8px 0; color: #2b2f2c; font-size: .95rem; font-weight: 600; }
.campo-foto .dica-foto { background: var(--destaque); border-left: 4px solid var(--laranja-escuro); border-radius: 6px;
  padding: 10px 12px; margin: 8px 0; color: var(--texto); font-size: .95rem; font-weight: 600; }
/* Moldura da prévia com silhueta do ombro para cima (Eduardo, 23/10, opção B): sem foto, a silhueta cheia é o
   modelo; com foto, vira contorno tracejado por cima, para conferir o enquadramento. A prévia preenche a moldura
   3:4 (corte só na tela; a foto guardada não é cortada). */
.moldura-foto { position: relative; width: 210px; max-width: 100%; aspect-ratio: 3 / 4; margin-top: 8px;
  border: 2px dashed var(--borda); border-radius: 10px; overflow: hidden; background: var(--fundo); }
.moldura-foto .previa { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; margin: 0;
  border-radius: 0; object-fit: cover; }
.moldura-foto .previa[hidden] { display: none; }
.moldura-foto .silhueta { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  fill: var(--borda); stroke: none; }
.moldura-foto .previa:not([hidden]) ~ .silhueta { fill: none; stroke: #ffffff; stroke-width: 4; stroke-dasharray: 10 7;
  opacity: .85; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8)); }
.moldura-foto .legenda-modelo, .moldura-foto .legenda-conferir { position: absolute; left: 0; right: 0; bottom: 0;
  padding: 4px 6px; font-size: .8rem; text-align: center; }
.moldura-foto .legenda-modelo { color: var(--suave); }
.moldura-foto .legenda-conferir { display: none; color: #ffffff; background: rgba(0, 0, 0, .55); }
.moldura-foto .previa:not([hidden]) ~ .legenda-modelo { display: none; }
.moldura-foto .previa:not([hidden]) ~ .legenda-conferir { display: block; }
/* Alerta da conferência automática da foto no cartão do pendente (decisão 135). Tarja numa linha própria do cartão,
   de borda a borda (Eduardo, 23/10): as margens negativas desfazem o respiro lateral do cartão (16; no estreito, 14).
   Espessura +50% (Eduardo, 23/10): de ~43 px (8 + linha + 8 + filetes) para ~65 px (19 + linha + 19 + filetes). */
/* Tarja em vermelho intenso com letra branca (Eduardo, 23/10; antes amarelo de destaque com filetes laranja). Os filetes
   seguem, num vermelho mais escuro; cores fixas, iguais no tema escuro. */
.alerta-foto { grid-column: 1 / -1; margin: 0; padding: 19px 12px; background: #c62828;
  border-top: 2px solid #8e1b1b; border-bottom: 2px solid #8e1b1b;
  color: #fff; font-weight: 600; font-size: 1.05rem; text-align: center; }
.apelido-bloco { margin-bottom: 8px; }
.apelido-bloco .apelido { margin-bottom: 0; }
.bloco { border-left: 4px solid var(--verde); }
.link-item { border-top: 1px solid var(--borda); padding: 10px 0; }
.link-item:first-child { border-top: 0; padding-top: 0; }
fieldset.sem-borda { border: 0; padding: 0; margin: 0 0 12px; }
fieldset.sem-borda legend { padding: 0; margin-bottom: 6px; font-size: .95rem; }
/* Posição no cadastro (decisão 134): caixas grandes, fáceis de tocar no celular. */
.opcao-posicao { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 1rem; cursor: pointer; }
.opcao-posicao input[type="checkbox"] { width: 22px; height: 22px; margin: 0; display: inline-block; }
.ok { background: var(--destaque); padding: 14px; border-radius: 8px; }
/* Módulo 1.4 — Lista do jogo */
textarea {
  display: block; width: 100%; margin-top: 4px; padding: 10px; font: inherit; font-size: .95rem; resize: vertical;
  border: 1px solid var(--borda); border-radius: 6px; background: var(--fundo); color: var(--texto);
}
.lista-resumo { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: .9rem; color: var(--suave); }
.lista-resumo strong { color: var(--texto); }
.lista-mudancas p { margin: 4px 0 0; }
/* Chamadas cíclicas no topo da página inicial (decisão 53) */
.chamadas { background: var(--destaque); border-left: 4px solid var(--azul); margin-top: 8px; }
.chamadas[hidden] { display: none; }
.chamadas p { margin: 0; font-weight: 600; }
.chamadas p + p { margin-top: 6px; }
.mud-saiu { color: var(--perigo); font-weight: 600; }      /* decisão 45: saiu em vermelho */
.mud-entrou { color: var(--verde); font-weight: 600; }     /* e entrou em verde */
.item-foto { width: 40px; height: 40px; flex: none; object-fit: cover; border-radius: 8px; background: var(--borda); }
.item-foto.sem-foto { display: grid; place-items: center; font-weight: 700; color: var(--suave); }
.item-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; margin-bottom: 6px; }
.item-lista.pendente { border: 2px solid var(--perigo); background: var(--erro-fundo); }
.item-escrito { flex: 1 1 10em; min-width: 0; overflow-wrap: anywhere; }
.item-escrito .vaga { color: var(--suave); margin-right: 6px; }
.item-resultado { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.item-nome { background: var(--verde); color: #fff; padding: 2px 9px; border-radius: 7px; }
.item-nome.convidado { background: var(--laranja-escuro); }
.item-como { font-size: .8rem; color: var(--suave); }
.item-nivel { font-size: .85rem; font-weight: 600; color: var(--roxo-claro); }
.jc-nome-fundo.convidado { background: var(--laranja-escuro); }   /* convidado do banco (módulo 1.5); laranja escuro, Eduardo, 21/10 */
/* Anfitrião em destaque no cartão do convidado (Eduardo, 21/10): linha própria, nome em negrito no laranja do convidado */
.jc-anfitriao { flex-basis: 100%; font-size: .95rem; color: var(--suave); }
.jc-anfitriao strong { color: var(--laranja-escuro); font-size: 1.1rem; font-weight: 700; }
/* Linha enxuta da lista de confirmação (decisão 100, Eduardo, 21/10) */
.item-lista .item-foto { width: 52px; height: 52px; }
.item-info { flex: 1 1 0; min-width: 0; cursor: pointer; border-radius: 6px; }
.item-info:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.item-linha1 { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.item-nome-txt { font-weight: 600; overflow-wrap: anywhere; }
.item-linha2 { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 2px; }
.item-falta { font-size: .82rem; font-weight: 600; color: var(--perigo); }
.selo-convidado { background: var(--laranja-escuro); color: #fff; font-size: .68rem; font-weight: 600; line-height: 1.3;
  padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
/* Participante sem cadastro (decisão 143): selo e "X" em cinza-escuro, para não se confundir com o convidado (laranja) */
.selo-sem-cadastro { background: var(--cinza-escuro); color: var(--cartao); font-size: .68rem; font-weight: 600; line-height: 1.3;
  padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
span.sem-foto.sem-cadastro { color: var(--cinza-escuro); }   /* "span": vence as regras de cada tamanho, que vêm depois */
.fato.sem { border-left-color: var(--cinza-escuro); }
.fato.sem .fato-marca, .fato.sem strong { color: var(--cinza-escuro); }
/* "i" em círculo: sinal de que o toque abre o histórico (Eduardo, 21/10) */
.item-sinal { margin-left: auto; display: inline-grid; place-items: center; color: var(--suave); }
.item-sinal .icone { width: 18px; height: 18px; }
.item-info[aria-expanded="true"] .item-sinal { color: var(--azul); }
.item-corrigir { align-self: stretch; width: 40px; min-height: 52px; padding: 0; border-radius: 8px; display: grid; place-items: center;
  color: var(--texto); }
.item-corrigir .icone { width: 20px; height: 20px; }
.item-detalhes { flex: 1 1 100%; margin: 4px 0 0; padding: 8px 10px; list-style: none; font-size: .85rem;
  background: var(--fundo); border-radius: 8px; }
.item-detalhes[hidden] { display: none; }
/* Histórico (decisão 104): marca e cor por tipo — verde entrou/voltou/presente/identificado, vermelho saiu/pendente,
   azul confirmado pelo operador, laranja convidado, cinza o texto do WhatsApp */
.fato { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; border-left: 3px solid var(--borda); padding-left: 8px; margin: 2px 0; }
.fato-marca { flex: none; width: 1.1em; text-align: center; font-weight: 700; line-height: 1.35; }
.fato-corpo { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.fato.identificado, .fato.entrou, .fato.voltou, .fato.presente { border-left-color: var(--verde); }
.fato.identificado .fato-marca, .fato.entrou .fato-marca, .fato.voltou .fato-marca, .fato.presente .fato-marca { color: var(--verde); }
.fato.saiu, .fato.pendente { border-left-color: var(--perigo); }
.fato.saiu .fato-marca, .fato.pendente .fato-marca, .fato.saiu strong, .fato.pendente strong { color: var(--perigo); }
.fato.confirmado { border-left-color: var(--azul); }
.fato.confirmado .fato-marca { color: var(--azul); }
.fato.convidado, .fato.banco { border-left-color: var(--laranja-escuro); }
.fato.convidado .fato-marca, .fato.banco .fato-marca, .fato.convidado strong { color: var(--laranja-escuro); }
.fato.lista .fato-marca, .fato.lista strong { color: var(--suave); }
.item-quem { color: var(--suave); font-size: .78rem; }
/* "Situação atual" (Eduardo, 21/10): última linha, em destaque, com a cor do estado */
.fato.situacao { margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: var(--cartao); border-left-width: 4px; }
.fato.situacao.presente { border-left-color: var(--verde); }
.fato.situacao.presente .fato-marca, .fato.situacao.presente strong { color: var(--verde); }
.fato.situacao.ausente { border-left-color: var(--suave); }
.fato.situacao.ausente .fato-marca { color: var(--suave); }
.fato.situacao.saiu { border-left-color: var(--perigo); }
.fato.situacao.lista .fato-marca { color: var(--suave); }
/* Selo de fator = só o ícone: círculo azul, desenho branco (Eduardo, 21/10) */
.selo-fator { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  background: var(--azul); color: #fff; flex: none; }
.selo-fator .icone { width: 15px; height: 15px; stroke-width: 2.2; }
.fato-marca .icone { width: 15px; height: 15px; vertical-align: -2px; }
.item-pergunta { flex: 1 1 100%; }
.item-pergunta p { margin: 0 0 6px; font-weight: 600; }
.item-pergunta .botoes { margin-top: 6px; }
.item-pergunta select { padding: 8px; font: inherit; border: 1px solid var(--borda); border-radius: 6px;
  background: var(--cartao); color: var(--texto); max-width: 100%; }
button.pequeno { padding: 4px 10px; font-size: .85rem; }
.grafias { margin-top: 10px; font-size: .9rem; }
.grafias .grafia { display: inline-flex; align-items: center; gap: 4px; margin: 2px 6px 2px 0; padding: 2px 4px 2px 9px;
  border: 1px solid var(--borda); border-radius: 999px; background: var(--fundo); }
.grafias .grafia button { padding: 0 7px; font-size: .85rem; background: transparent; color: var(--perigo); }
/* Painel de classificação, diagramação de 20/10 (Eduardo: "card muito confuso"): posição numa linha; um bloco por
   posição; cada voto = rótulo + barra única de opções que não quebra; no celular estreito o rótulo sobe. */
.classif-posicao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.classif-marca { display: inline-flex; align-items: center; gap: 6px; }
.classif-marca input[type="checkbox"] { width: 20px; height: 20px; margin: 0; display: inline-block; }
.classif-marca .classif-pos { min-width: 0; }
/* LINHA e GOLEIRO (Eduardo, 21/10): traço fino à esquerda do bloco inteiro e título em negrito, os dois no roxo da
   ficha (--roxo-claro, o do nível e do selo). Antes: caixa verde, cinza escuro, depois traço verde de 4 px. */
/* Bloco de cada posição com fundo branco (a cor do cartão; no tema escuro, a do cartão escuro) e traço fino roxo à
   esquerda; LINHA / GOLEIRO em fonte menor, numa caixa branca só com o contorno roxo (Eduardo, 21/10). */
.voto-bloco { margin-top: 16px; padding: 8px 10px 8px 12px; border-left: 2px solid var(--roxo-claro);
  border-radius: 0 8px 8px 0; background: var(--cartao); }
.voto-titulo { display: inline-block; margin: 0 0 6px; padding: 1px 8px; border: 1px solid var(--roxo-claro); border-radius: 6px;
  background: var(--cartao); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--roxo-claro); }
.voto-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0; }
.voto-rotulo { flex: 0 0 13em; font-weight: 600; font-size: .92rem; }
/* descrição de cada atributo especial, abaixo do nome (decisão 128) */
.voto-desc { display: block; font-weight: 400; font-size: .8rem; color: var(--suave); margin-top: 1px; }
.segmento { display: inline-flex; flex-wrap: nowrap; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; max-width: 100%; }
.segmento button { background: var(--cartao); color: var(--texto); border-radius: 0; padding: 7px 12px; font-size: .9rem; white-space: nowrap; }
.segmento button + button { border-left: 1px solid var(--borda); }
.segmento button:hover { background: var(--fundo); }
.segmento button.marcada { background: var(--verde); color: #fff; }
@media (max-width: 420px) {
  .voto-rotulo { flex-basis: 100%; }
  .segmento button { padding: 7px 10px; }
}
/* "Atributos especiais" no card de classificação (decisão 118): linha fina que some nas pontas + subtítulo discreto */
.atributos-titulo { margin: 14px 0 6px; padding-top: 10px; font-size: .78rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--suave); background: linear-gradient(to right, transparent, var(--borda) 15%, var(--borda) 85%, transparent) top / 100% 1px no-repeat; }
.classif-regras { margin-top: 6px; font-size: .85rem; color: var(--suave); }
.classif-regras summary { cursor: pointer; color: var(--verde); }
.classif-regras ul { margin: 6px 0 0; padding-left: 18px; }
/* Fator Diferencial (decisões 76 a 78): selo de quem tem Físico e/ou Técnico */
.selos-fator { display: flex; flex-wrap: wrap; gap: 4px; }
.classif-titulo { display: block; margin-top: 14px; }
/* Módulo 1.6 — Times */
.times-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.cartao.time { margin: 0; border-top: 4px solid var(--verde); }
.cartao.time.aguarda { border-top-color: var(--suave); }
.time h3 { margin: 0 0 8px; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.time-estado { font-size: .75rem; font-weight: 400; color: var(--suave); text-transform: uppercase; letter-spacing: .06em; }
/* Escalação em campo (decisão 110, Eduardo, 21/10): fundo de campo, goleiro no alto separado por linha azul, fileiras
   de no máximo 2 cards; card = foto quadrada colorida + faixa branca (nome, estrelas · estilo, selos, situação) */
/* Ajuste de 21/10 (decisão 112): cards mais largos e mais quadrados (foto 3:2), letra e ícones maiores na faixa,
   campo em tom escuro com contraste; presente = ✓ verde no canto da foto, ausente = tarja escura embaixo da foto e
   faixa apagada; nada de situação na faixa branca (só os dados do jogador). Cores fixas: o campo é escuro nos dois
   temas. */
.campo { display: flex; flex-direction: column; gap: 10px; padding: 12px 8px; border-radius: 12px; background: #1d3328;
  border: 1px solid #0f1f17; }
/* 21/10, decisão 113: cards 15% menores (165 → 140 px; letras do mesmo tamanho) e mais respiro entre eles e nas
   laterais */
.campo-fileira { list-style: none; margin: 0; padding: 0 10px; display: flex; justify-content: center; gap: 18px; }
.campo-gol { padding-bottom: 12px; border-bottom: 2px solid #7fb2e5; }
.campo li { flex: 1 1 0; max-width: 140px; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 10px; background: #fff; border: 2px solid #3d5a4a; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.campo-fileira li:only-child { flex: 0 1 140px; }
/* Botão "Atualizar" com as setas em círculo (decisão 113) */
button.atualizar { display: inline-flex; align-items: center; gap: 6px; }
button.atualizar .icone { width: 18px; height: 18px; }
.linha-atualizar { grid-column: 1 / -1; display: flex; justify-content: center; }
.campo li[role="button"] { cursor: pointer; }
.campo li[role="button"]:focus-visible { outline: 3px solid #f6c443; outline-offset: 2px; }
.card-topo { position: relative; }
.card-foto { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 30%; background: #c9d3cd; }
.card-foto.sem-foto { display: grid; place-items: center; font-size: 2.2rem; font-weight: 700; color: #4a5a50; }
.card-check { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; display: grid;
  place-items: center; background: #1f9d5a; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.card-check .icone { width: 16px; height: 16px; stroke-width: 3; }
.card-tarja { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0; text-align: center; background: rgba(20,24,21,.82);
  color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.card-fixo { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: 6px; background: #3f4842; color: #fff;
  font-size: .68rem; }
.card-faixa { padding: 6px 6px 8px; text-align: center; background: #fff; color: #1d2420; font-size: .82rem; line-height: 1.3; }
.card-nome { font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; }
.card-info { color: #7a4cb5; font-weight: 600; }
.card-selos { display: flex; justify-content: center; gap: 5px; margin-top: 4px; }
.card-selos .selo-fator { width: 24px; height: 24px; }
.card-selos .selo-fator .icone { width: 15px; height: 15px; }
.campo li.presente { border-color: #2fbf71; }
.campo li.ausente { border-color: #3d5a4a; }
.campo li.ausente .card-faixa { background: #d5dad7; color: #5d6a62; }
.campo li.ausente .card-info { color: #5d6a62; }
.campo li.ausente .card-selos { filter: grayscale(1); opacity: .7; }
.campo li.goleiro { border-color: #7fb2e5; }
.cartao.excedentes { margin-top: 12px; border-top: 4px solid var(--suave); }
.cartao.excedentes h3 { margin: 0 0 4px; font-size: 1rem; }
/* Legenda da pontuação no cabeçalho, ao lado de "Time N" (Eduardo, 21/10, decisão 114) */
.time-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.time-total { font-size: 1.25rem; font-weight: 700; color: var(--roxo-claro); }   /* maior (Eduardo, 21/10, decisão 116) */
/* Quadro de análise (decisão 119): carrossel de 3 slides no lugar do quadro de comentários. As cores daqui são só
   destes gráficos (Eduardo, 21/10): times azul/laranja/verde-azulado, campo claro, selo amarelo com preto. */
:root {
  --qa-t1: #2563c9; --qa-t2: #e06a2c; --qa-t3: #14917f; --qa-corda: #8a7a62;
  --qa-campo: #e3efe5; --qa-campo-faixa: #d2e6d7; --qa-campo-linha: #ffffff; --qa-campo-texto: #1f3a2a; --qa-pontilhado: #a9c7b1;
  --qa-selo: #f5c518; --qa-selo-tinta: #111111; --qa-selo-anel: #111111;
}
@media (prefers-color-scheme: dark) {
  :root {
    --qa-t1: #5b8fe6; --qa-t2: #d66a2f; --qa-t3: #219d88; --qa-corda: #a8987e;
    --qa-campo: #22392b; --qa-campo-faixa: #2b4636; --qa-campo-linha: rgba(255,255,255,.3); --qa-campo-texto: #e3ece5; --qa-pontilhado: #4d6b58;
    --qa-selo-anel: #000000;
  }
}
.quadro-analise { margin-top: 12px; display: grid; gap: 10px; }
.qa-avisos { margin-top: 12px; border-left: 4px solid var(--perigo); }   /* quadro próprio, separado dos slides */
.qa-avisos ul { margin: 0; padding-left: 18px; color: var(--perigo); font-size: .9rem; }
.times-grade { scroll-margin-top: 72px; }   /* "Ver o plano de jogo" para no Time 1, abaixo da faixa fixa do topo */
.qa-carrossel { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  transition: height .2s ease; }
.qa-carrossel::-webkit-scrollbar { display: none; }
.qa-carrossel:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
/* scroll-snap-stop: um deslize leva só ao slide vizinho, nunca pula até o último (Eduardo, 21/10) */
.qa-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; display: grid; gap: 8px; align-content: start; }
.qa-rotulo { font-weight: 700; font-size: 1.1rem; }
.qa-svg { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
.qa-svg .t1 { fill: var(--qa-t1); } .qa-svg .t2 { fill: var(--qa-t2); } .qa-svg .t3 { fill: var(--qa-t3); }
.qa-num { font-size: 26px; font-weight: 700; }
.qa-estrela, .qa-estrela-tspan { font-size: 16px; font-weight: 700; }
.qa-stop1 { stop-color: var(--qa-t1); } .qa-stop2 { stop-color: var(--qa-corda); stop-opacity: .55; } .qa-stop3 { stop-color: var(--qa-t2); }
.qa-linha-forca { stroke: url(#qa-degrade); stroke-width: 4.5; stroke-linecap: round; }
.qa-bola { fill: #fff; stroke: #17201b; stroke-width: 1.2; }
.qa-bola-mancha { fill: #17201b; }
.qa-elencos { display: grid; grid-template-columns: 1fr 1fr; max-width: 460px; width: 100%; margin: 0 auto; }
.qa-elenco { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; font-size: .95rem; font-weight: 500; line-height: 1.3; }
.qa-elenco li { display: flex; gap: 6px; align-items: center; min-width: 0; }
.qa-elenco li.gol { font-weight: 600; padding-bottom: 4px; margin-bottom: 2px; }
.qa-elenco.lado-1 { padding-right: 12px; }
.qa-elenco.lado-1 li { justify-content: flex-end; text-align: right; }
.qa-elenco.lado-2 { padding-left: 12px; }
.qa-elenco.lado-1 li::after, .qa-elenco.lado-2 li::before { content: ""; width: 2px; align-self: stretch; border-radius: 2px; flex: none; }
.qa-elenco.lado-1 li::after { background: var(--qa-t1); }
.qa-elenco.lado-2 li::before { background: var(--qa-t2); }
.qa-elenco.lado-2 li.gol { flex-direction: row-reverse; justify-content: flex-end; }
.qa-elenco.lado-2 li.gol::before { order: 2; }
.qa-luva { display: inline-grid; color: var(--suave); }
.qa-luva .icone { width: 13px; height: 13px; stroke-width: 2; }
.qa-aguarda { border-top: 1px solid var(--borda); padding-top: 10px; display: grid; gap: 8px; max-width: 460px; width: 100%; margin: 0 auto; }
.qa-ag-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qa-etq-ag { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--qa-t3);
  padding: 2px 9px; border-radius: 999px; }
.qa-proj { display: inline-flex; align-items: baseline; gap: 4px; color: var(--qa-t3); flex: none; }
.qa-proj strong { font-size: 1.15rem; }
.qa-proj small { font-size: .8rem; font-weight: 700; }
.qa-projecao { font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.qa-fichas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.qa-fichas li { font-size: .8rem; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--qa-t3); }
.qa-cab { font-size: 11px; font-weight: 600; }
.qa-campo { fill: var(--qa-campo); }
.qa-faixa { fill: var(--qa-campo-faixa); }
.qa-pont { stroke: var(--qa-pontilhado); stroke-width: 1; stroke-dasharray: 3 3; }
.qa-vao { fill: var(--cartao); }
.qa-linhas { fill: none; stroke: var(--qa-campo-linha); stroke-width: 1.5; }
.qa-gk { fill: #fff; stroke-width: 2.5; }
.qa-svg .qa-gk.t1 { fill: #fff; stroke: var(--qa-t1); } .qa-svg .qa-gk.t2 { fill: #fff; stroke: var(--qa-t2); }
.qa-jog { stroke: #fff; stroke-width: 1.8; }
.qa-nome { fill: var(--qa-campo-texto); font-size: 10px; }
.qa-nome-ag { fill: var(--texto); font-size: 9.5px; }
.qa-gsel-fundo { fill: var(--texto); stroke: var(--cartao); stroke-width: 1.6; }
.qa-gsel-l { fill: var(--cartao); font-size: 10.5px; font-weight: 700; }
.qa-gsel-ic { fill: none; stroke: var(--cartao); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.qa-selo-fundo { fill: var(--qa-selo); stroke: var(--qa-selo-anel); stroke-width: 1.6; }
.qa-selo-ic { fill: none; stroke: var(--qa-selo-tinta); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.qa-selo-ic .cheio { fill: var(--qa-selo-tinta); stroke: none; }
.qa-etq { fill: var(--texto); }
.qa-etq-txt { fill: var(--cartao); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; }
.qa-etq-gol { fill: none; stroke: var(--suave); stroke-width: 1; }
.qa-etq-gol-txt { fill: var(--suave); font-size: 8.5px; font-weight: 600; letter-spacing: .06em; }
.qa-ag { fill: var(--qa-t3); }
.qa-ag-letra { fill: #fff; font-size: 11px; font-weight: 700; }
.qa-guia { margin: 0; font-size: .85rem; color: var(--suave); font-style: italic; }
.qa-passos { list-style: none; margin: 0; padding: 0; display: grid; }
.qa-passos li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding-bottom: 9px; position: relative; }
.qa-passos li::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 0; width: 2px; background: var(--borda); }
.qa-passos li:last-child { padding-bottom: 0; }
.qa-passos li:last-child::before { display: none; }
.qa-marca { width: 24px; height: 24px; border-radius: 50%; background: var(--verde); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.qa-passos strong { display: block; line-height: 1.25; }
.qa-passos li > div > span { font-size: .88rem; color: var(--suave); }
.qa-par b { font-weight: 600; }
.qa-par b.t1 { color: var(--qa-t1); } .qa-par b.t2 { color: var(--qa-t2); }
.qa-rodape { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--borda); font-size: .9rem; color: var(--suave); }
.qa-rodape b { color: var(--texto); }
.qa-controles { display: flex; align-items: center; justify-content: center; gap: 14px; }
button.qa-seta { width: 38px; height: 38px; padding: 0; border-radius: 50%; background: var(--cartao); color: var(--texto); border: 1px solid var(--borda); font-size: 1.2rem; line-height: 1; }
button.qa-seta:hover { background: var(--cartao); border-color: var(--verde); }
.qa-pontos { display: flex; gap: 6px; }
.qa-pontos span { width: 8px; height: 8px; border-radius: 4px; background: var(--borda); transition: width .2s; }
.qa-pontos span.ativo { width: 22px; background: var(--texto); }
.quadro-analise > .botoes { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .qa-pontos span, .qa-carrossel { transition: none; } }
/* Presença no início do jogo (decisões 89 a 96): miniaturas, todos ausentes até o toque */
.times-presenca { margin-bottom: 12px; }
.times-presenca p { margin: 0 0 8px; }
.time-foto { width: 40px; height: 40px; flex: none; object-fit: cover; border-radius: 50%; background: var(--borda);
  border: 3px solid transparent; }
.time-foto.sem-foto { display: grid; place-items: center; font-weight: 700; color: var(--suave); }
.time-presenca { flex: none; font-size: .75rem; font-weight: 600; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.cartao.time.ausentes { border-top-color: var(--perigo); }
.suplentes { margin-top: 18px; }
.item-suplentes .botoes { margin-left: auto; }
.suplentes-incluir { margin: 10px 0 20px; }
/* "Incluir jogador": estilo único, para sinalizar a opção fora do padrão (Eduardo, 21/10) — largura toda, contorno
   tracejado azul, ícone de pessoa com "+", e uma linha explicando para quem é */
/* amarelo suave (Eduardo, 21/10: "pode ser mais suave"), com texto escuro nos dois temas */
button.incluir-especial { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; width: 100%;
  padding: 12px 16px; text-align: left; background: #fbe9a6; color: #3b2f00; border: 2px dashed #c9a227;
  border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.10); }
button.incluir-especial:hover { background: #fbe9a6; border-style: solid; }
.incluir-especial .icone { grid-row: 1 / span 2; width: 30px; height: 30px; }
.incluir-texto { font-weight: 700; font-size: 1.05rem; }
.incluir-sub { font-size: .8rem; color: #5c4a00; }
/* "Registros" com o mesmo padrão de subtítulo de "Suplentes" (Eduardo, 21/10); só um espaço a mais antes */
.titulo-registros { margin-top: 26px; }
/* Marcadores subordinados (Lista de espera, Excedentes, Entraram pelos suplentes, Fora do jogo): menores e mais
   claros que o subtítulo (Eduardo, 21/10) */
.suplentes h3 { margin: 14px 0 6px; font-size: .88rem; font-weight: 600; color: var(--suave); }
.item-pergunta input[type="text"] { width: 100%; max-width: 360px; padding: 8px; font: inherit; border: 1px solid var(--borda);
  border-radius: 6px; background: var(--cartao); color: var(--texto); }
/* Botões suspensos empilhados com ícones (decisões 89 e 97; Eduardo, 20 e 21/10): Lista, Times, Suplentes e "↑" */
.atalhos { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 8;
  display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.atalho { pointer-events: auto; width: 48px; height: 48px; padding: 0; border-radius: 50%; font-size: 1.4rem; line-height: 1;
  background: var(--cartao); color: var(--texto); border: 2px solid var(--borda); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
/* No celular, o "passar por cima" (hover) gruda no botão tocado e pintava o fundo de verde-escuro com o desenho
   escuro: o botão suspenso não muda ao toque; só o da parte na tela fica verde, com o desenho branco (Eduardo, 21/10) */
.atalho:hover { background: var(--cartao); }
.atalho.atual, .atalho.atual:hover { background: var(--verde); color: #fff; border-color: var(--verde); }   /* fundo, não borda */
/* Ícones em traço na cor do texto: preto e branco no tema claro, cinza-claro no escuro (Eduardo, 21/10) */
.icone { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icone .cheio { fill: currentColor; stroke: none; }
.atalho { display: grid; place-items: center; }
.atalho[hidden] { display: none; }
/* Botão com palavra no lugar do ícone: "Gerenciar" (Eduardo, 22/10) */
.atalho.atalho-texto { width: auto; padding: 0 18px; border-radius: 24px; font-size: 1rem; font-weight: 600; }
/* Espaço livre no fim da página, da altura da pilha de botões suspensos, para eles não cobrirem as últimas
   informações ao rolar até o fim (Eduardo, 21/10). Lista do jogo: 4 botões de 48 px + 3 vãos de 10 px + 16 px de
   margem + folga de 16 px; nas outras telas só há o "↑". */
main > section { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
/* Plano de jogo (decisão 117): Times, Suplentes e "↑" = 3 botões de 48 px + 2 vãos de 10 px + 32 px; a Lista de
   confirmados ficou só com o "↑" (regra geral acima) */
main > #tela-plano { padding-bottom: calc(4 * 48px + 3 * 10px + 32px + env(safe-area-inset-bottom, 0px)); }   /* 4 botões (gráfico entrou, 21/10) */
.ir-plano { display: flex; justify-content: center; margin: 22px 0 6px; }
/* Decisão 123: aviso de atualização pausada (15 min sem toque); à esquerda dos botões suspensos. */
.acompanhar-pausado { position: fixed; left: 16px; right: 80px; bottom: 16px; z-index: 60; background: #1f2a24; color: #fff;
  padding: 10px 14px; border-radius: 12px; font-size: .9rem; text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.acompanhar-pausado[hidden] { display: none; }
.encerrar-jogo { display: flex; justify-content: center; margin: 28px 0 6px; padding-top: 18px; border-top: 1px solid var(--borda); }
.senha-provisoria { font-family: ui-monospace, Consolas, monospace; font-size: 1.5rem; letter-spacing: .08em; margin: 6px 0; }