/*
 * Console da mesa de apuração — coluna de navegação fixa + área de trabalho.
 *
 * Complementa app.css, que continua servindo o placar público. Aqui só o que
 * pertence à moldura do console: a coluna, a barra e os blocos do painel.
 */

.console {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100svh;
  background: var(--fundo-alt);
}

/* ---- coluna de navegação ---------------------------------------------------- */

.lateral {
  grid-row: 1 / -1;
  display: flex; flex-direction: column;
  background: linear-gradient(170deg, var(--ace-green, #0F3D2E) 0%, #10362a 100%);
  color: #C6DBCE;
  padding: 0 14px 16px;
  position: sticky; top: 0; height: 100svh;
  overflow-y: auto;
}
/* A logo da lateral e a do clube, na barra, ficam lado a lado na primeira faixa
   da tela: se nao compartilharem a mesma altura e a mesma linha de base, o olho
   ve duas marcas desalinhadas por poucos pixels — que e pior do que muitos. A
   altura aqui espelha a da .barra (12px + 30px de logo + 12px + 1px de borda). */
.lateral-marca {
  display: flex; align-items: center;
  /* flex:none porque a lateral e um flex column: sem isso o item encolhe ate a
     altura do conteudo e a logo sobe, desalinhando de novo. */
  flex: none; height: 65px; padding: 0 8px; margin-bottom: 18px;
  box-sizing: border-box;
}
.lateral-marca img { height: 30px; width: auto; display: block; }

.lateral-nav { display: grid; gap: 2px; }
.lateral-nav button {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 12px; border: 0; border-radius: 9px;
  background: transparent; color: #B7D2C1;
  font: inherit; font-size: .9rem; font-weight: 500; text-align: left; cursor: pointer;
  transition: background .15s, color .15s;
}
.lateral-nav button:hover { background: rgba(255,255,255,.07); color: #fff; }
.lateral-nav button[aria-current="page"] {
  background: rgba(255,255,255,.13); color: #fff; font-weight: 600;
}
.lateral-nav svg { width: 18px; height: 18px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.7; }
.lateral-nav .divisor {
  margin: 12px 12px 8px; font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: #6F9A80;
}

.lateral-rodape { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.lateral-usuario { display: flex; align-items: center; gap: 10px; padding: 4px 10px 12px; }
.lateral-usuario .inicial {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: rgba(255,255,255,.15); color: #fff; font-weight: 700; font-size: .85rem;
}
.lateral-usuario .quem { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lateral-usuario .nome { color: #fff; font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-usuario .papel { font-size: .72rem; color: #8FB49E; }
.lateral-sair {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 9px; background: transparent;
  color: #8FB49E; font: inherit; font-size: .86rem; cursor: pointer;
}
.lateral-sair:hover { background: rgba(255,255,255,.07); color: #fff; }
.lateral-sair svg { width: 17px; height: 17px; }

/* ---- barra superior --------------------------------------------------------- */

.console-corpo { display: flex; flex-direction: column; min-width: 0; }

.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 26px; background: var(--fundo-carta);
  border-bottom: 1px solid var(--borda);
}
.barra-clube { display: inline-flex; align-items: center; gap: 10px; }
.barra-clube img { height: 30px; width: auto; display: block; }
.barra-clube .nome { font-size: .88rem; font-weight: 600; color: var(--texto); }

.pilula-sinc {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--fundo-alt);
  font-size: .76rem; font-weight: 600; color: var(--texto-fraco); white-space: nowrap;
}
.pilula-sinc .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--realce); }
.pilula-sinc.ruim { border-color: color-mix(in srgb, var(--perigo) 40%, var(--borda)); color: var(--perigo); }
.pilula-sinc.ruim .ponto { background: var(--perigo); }

.abre-lateral { display: none; }

/* ---- área de trabalho -------------------------------------------------------- */

.console-conteudo { padding: 26px; max-width: 1320px; width: 100%; }
.pagina-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.pagina-topo h1 { margin: 0 0 5px; font-size: 1.65rem; letter-spacing: -.01em; color: var(--texto); }
.pagina-topo .sub { margin: 0; color: var(--texto-fraco); font-size: .93rem; }

/* ---- cartões de indicador ---------------------------------------------------- */

.indicadores {
  display: grid; gap: 12px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
}
/* O auto-fit decide pela largura, e o quinto cartão caía sozinho na linha de
   baixo. Aqui a decisão é pela CONTAGEM: fileira de cinco divide em cinco,
   fileira de quatro em quatro — e abaixo de 1100px volta a quebrar normal. */
@media (min-width: 1100px) {
  .indicadores:has(> .indicador:nth-child(5):last-child) { grid-template-columns: repeat(5, 1fr); }
  .indicadores:has(> .indicador:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
}
.indicador {
  display: flex; align-items: center; gap: 12px;
  background: var(--fundo-carta); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 15px 16px;
}
.indicador .icone {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 11px;
  display: grid; place-items: center; background: #EDF3EF; color: var(--realce);
}
.indicador .icone svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.indicador .rotulo {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-fraco); font-weight: 600; margin-bottom: 3px;
}
.indicador .valor { font-size: 1.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.indicador .apoio { font-size: .76rem; color: var(--texto-fraco); margin-top: 4px; }

/* ---- faixa de contexto -------------------------------------------------------- */

.faixa-contexto {
  display: flex; flex-wrap: wrap; gap: 26px;
  background: var(--fundo-carta); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 14px 20px; margin-bottom: 18px;
}
.faixa-contexto > div { display: flex; align-items: center; gap: 10px; }
.faixa-contexto svg { width: 17px; height: 17px; stroke: var(--texto-fraco); fill: none; stroke-width: 1.7; flex: 0 0 auto; }
.faixa-contexto .rotulo { font-size: .7rem; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .1em; }
.faixa-contexto .valor { font-size: .88rem; font-weight: 600; }

/* ---- painel de duas colunas ---------------------------------------------------- */

.duas-colunas { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
@media (max-width: 1080px) { .duas-colunas { grid-template-columns: minmax(0, 1fr); } }

/* ---- progresso em rosca -------------------------------------------------------- */

.rosca { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.rosca figure { margin: 0; position: relative; width: 132px; height: 132px; flex: 0 0 auto; }
.rosca svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.rosca .centro {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.rosca .centro b { font-size: 1.45rem; font-weight: 700; line-height: 1; }
.rosca .centro span { font-size: .7rem; color: var(--texto-fraco); }
.legenda-rosca { display: grid; gap: 11px; min-width: 0; flex: 1 1 180px; }
.legenda-rosca > div { display: flex; align-items: center; gap: 9px; font-size: .86rem; }
.legenda-rosca .bolha { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.legenda-rosca .qtd { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.legenda-rosca small { display: block; color: var(--texto-fraco); font-size: .74rem; }

/* ---- lista de alertas ----------------------------------------------------------- */

.alertas { display: grid; }
.alerta {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 16px; border-bottom: 1px solid var(--borda);
}
.alerta:last-child { border-bottom: 0; }
.alerta .marca {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem;
}
.alerta.aviso .marca { background: var(--alerta-fundo); color: var(--alerta); }
.alerta.info .marca { background: #EDF3EF; color: var(--realce); }
.alerta.ok .marca { background: #EDF3EF; color: var(--realce); }
.alerta .texto { min-width: 0; font-size: .88rem; font-weight: 600; }
.alerta .texto small { display: block; font-weight: 400; color: var(--texto-fraco); font-size: .78rem; margin-top: 2px; }

/* ---- pódio compacto ------------------------------------------------------------- */

.podio { display: grid; }
.podio > div { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--borda); }
.podio > div:last-child { border-bottom: 0; }
.podio .pos { width: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto-fraco); }
.podio .nome { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podio .nome small { display: block; font-weight: 400; color: var(--texto-fraco); font-size: .75rem; }
.podio .valor { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- celular ---------------------------------------------------------------------- */

@media (max-width: 980px) {
  .console { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    position: fixed; inset: 0 auto 0 0; width: 268px; z-index: 60;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .lateral[data-aberta="sim"] { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  .veu { position: fixed; inset: 0; background: rgba(10,23,16,.45); z-index: 50; }
  .abre-lateral {
    display: inline-grid; place-items: center; width: 40px; height: 40px;
    border: 1px solid var(--borda); border-radius: var(--raio-p);
    background: var(--fundo-carta); color: var(--texto); cursor: pointer;
  }
  .abre-lateral svg { width: 20px; height: 20px; }
  .barra { padding: 10px 16px; }
  .console-conteudo { padding: 18px 16px 48px; }
  .pagina-topo h1 { font-size: 1.35rem; }
}

/* A folha de impressão do console vive em impressao.css. */

/* ---- formulários e componentes das seções -------------------------------------
   Estes estilos viviam embutidos no admin.html antigo. Ao reescrever a moldura eu
   os larguei junto, e os campos viraram uma fila em vez de grade — regressão
   visível. Ficam aqui agora, num arquivo que a moldura não substitui. */

.grade {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
}
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > span, .campo { font-size: .8rem; color: var(--texto-fraco); font-weight: 500; }
.campo input, .campo select, .campo textarea { width: 100%; font-size: .92rem; }

/* Campo numérico curto não precisa de largura de campo de texto. */
input.score { width: 66px; text-align: right; }
input.ajuste { width: 62px; text-align: right; }
select.mini, input.mini { padding: 6px 9px; font-size: .8rem; }
.barra select.mini { max-width: 340px; }

.zona-arquivo {
  border: 2px dashed var(--borda); border-radius: var(--raio);
  padding: 26px; text-align: center; color: var(--texto-fraco);
  cursor: pointer; font-size: .9rem;
}
.zona-arquivo.sobre { border-color: var(--realce); background: #EDF3EF; color: var(--texto); }

.grupo-saida { border: 1px solid var(--borda); border-radius: var(--raio-p); margin-bottom: 10px; overflow: hidden; }
.grupo-saida > header {
  background: var(--fundo-alt); padding: 8px 12px; font-size: .82rem; font-weight: 650;
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
}
/* Cada grupo e uma tabela propria, e tabela solta dimensiona a coluna pelo
   conteudo dela: o grupo do "Francisco Cleidismar Melo Pinheiro" empurrava a
   categoria 200px para a direita em relacao ao grupo do "Max Lima". Numa folha
   que se le de cima a baixo procurando a categoria, isso e ruido puro. */
.grupo-saida table { font-size: .82rem; table-layout: fixed; width: 100%; }
.grupo-saida table td:nth-child(1) {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grupo-saida table td:nth-child(2) { width: 130px; }
.grupo-saida table td:nth-child(3) { width: 96px; }
/* ---- retrato do campo (topo de Jogadores) -------------------------------- */

.grade-dash {
  display: grid; gap: 18px; margin-top: 18px;
  /* Duas colunas na tela larga, uma no notebook estreito. `minmax(0,...)` para
     a barra não empurrar a coluna e criar rolagem horizontal. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}
.grade-dash section {
  min-width: 0; padding: 16px 18px;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo-alt);
}
.grade-dash h3 {
  margin: 0 0 14px; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--texto-fraco);
}
.grade-dash .rosca { gap: 18px; }
.grade-dash .rosca figure { width: 118px; height: 118px; }
.grade-dash .vazio { margin: 0; font-size: .85rem; }

.barras-h { display: grid; gap: 10px; }
.barras-h > div {
  display: grid; grid-template-columns: minmax(76px, auto) 1fr auto;
  align-items: center; gap: 10px; font-size: .8rem;
}
.barras-h .rotulo { color: var(--texto-fraco); white-space: nowrap; }
.barras-h .trilho {
  height: 9px; border-radius: 999px; background: var(--fundo-carta);
  border: 1px solid var(--borda); overflow: hidden; min-width: 0;
}
.barras-h .trilho i { display: block; height: 100%; border-radius: 999px; }
.barras-h .qtd { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 620px) {
  .barras-h > div { grid-template-columns: 66px 1fr 28px; gap: 8px; font-size: .75rem; }
  .grade-dash section { padding: 14px; }
}

/* ---- ficha do atleta ---------------------------------------------------- */

button.so-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 8px;
}
button.so-icone svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }
button.so-icone:hover { color: var(--realce); }

dialog.ficha {
  width: min(560px, calc(100vw - 32px));
  padding: 22px; border: 1px solid var(--borda); border-radius: 14px;
  background: var(--fundo-carta); color: var(--texto);
  box-shadow: 0 24px 60px rgba(12, 48, 34, .22);
}
dialog.ficha::backdrop { background: rgba(10, 23, 16, .45); }
dialog.ficha h2 { margin: 0 0 16px; font-size: 1.15rem; }
.ficha-corpo { display: flex; flex-direction: column; gap: 12px; }
.ficha-corpo .campo--par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ficha-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
@media (max-width: 560px) { .ficha-corpo .campo--par { grid-template-columns: 1fr; } }

/* ---- cor do tee de saída ---------------------------------------------------
   A bolinha é o atalho para quem olha a tela; a palavra é o que sobrevive à
   fotocópia preto e branco que o starter leva para a largada. */
.tee {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--fundo-carta);
  font-size: .74rem; font-weight: 600; white-space: nowrap;
}
.tee i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(0,0,0,.28); flex: 0 0 auto; }
.tee b { color: var(--atencao, #B8912F); font-weight: 700; }
.tee-confirmar { border-color: var(--atencao, #B8912F); }
.col-tee { text-align: right; white-space: nowrap; }

/* A coluna de troca some no papel (.nao-imprime), e a folha do starter volta a
   ter as tres colunas de sempre. */
.grupo-saida table td.col-troca { width: 118px; text-align: right; }
.grupo-saida table td.col-cart { width: 92px; }
.grupo-saida table td.col-tee { width: 190px; }

/* Atleta escolhido para trocar de grupo. Precisa ser visivel de relance numa
   tela com dez grupos abertos: o proximo clique e em outro grupo, longe daqui. */
.grupo-saida tr.selecionado td {
  background: color-mix(in srgb, var(--realce) 12%, transparent);
  box-shadow: inset 2px 0 0 var(--realce);
}

button.mini { padding: 4px 9px; font-size: .74rem; line-height: 1.3; }
.etiqueta button.mini {
  padding: 0 3px; margin-left: 3px; font-size: .7rem;
  border: 0; background: none; color: inherit;
}
.etiqueta button.mini[disabled] { opacity: .3; cursor: default; }

.etiqueta {
  display: inline-block; font-size: .7rem; font-weight: 600; padding: 3px 8px;
  border-radius: 999px; background: var(--fundo-alt);
  border: 1px solid var(--borda); color: var(--texto-fraco); white-space: nowrap;
}
.etiqueta.ok { color: var(--realce); border-color: color-mix(in srgb, var(--realce) 40%, var(--borda)); }
.etiqueta.pendente { color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 40%, var(--borda)); }

.previa-logo {
  width: 180px; height: 90px; flex: 0 0 auto;
  display: grid; place-items: center; padding: 8px;
  border: 1px solid var(--borda); border-radius: var(--raio-p);
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%),
    linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%);
  background-size: 12px 12px; background-position: 0 0, 6px 6px;
}
.previa-logo img { max-width: 100%; max-height: 74px; width: auto; height: auto; }

@media print { .grupo-saida { break-inside: avoid; } }

/* ---- editor de campo ---------------------------------------------------------
   Dezoito buracos numa tabela larga. Ela rola dentro do proprio contorno; a
   pagina nunca rola de lado. */

.campo-buracos { font-size: .82rem; border-collapse: separate; border-spacing: 0; }
.campo-buracos th, .campo-buracos td { padding: 4px 3px; text-align: center; }
.campo-buracos thead th {
  font-size: .7rem; font-weight: 600; color: var(--texto-fraco);
  letter-spacing: .04em; padding-bottom: 6px;
}
.campo-buracos th[scope="row"] {
  font-size: .76rem; font-weight: 500; color: var(--texto-fraco);
  white-space: nowrap; padding-right: 10px; position: sticky; left: 0;
  background: var(--superficie);
}
.cel-buraco {
  width: 44px; padding: 5px 4px; text-align: center; font-size: .84rem;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.cel-buraco::-webkit-outer-spin-button,
.cel-buraco::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* O buraco culpado fica marcado. "Stroke index invalido" nao ajuda ninguem
   diante de dezoito campos iguais. */
.cel-buraco.errado {
  border-color: var(--erro, #B4443A);
  background: color-mix(in srgb, var(--erro, #B4443A) 8%, transparent);
}

.resumo-campo {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin: 10px 0; font-size: .82rem; color: var(--texto-fraco);
}
.resumo-campo b { color: var(--texto); font-weight: 650; }

.marca { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; cursor: pointer; }
.marca input { width: auto; margin: 0; }

/* ===========================================================================
   Circuito — painel consolidado, etapas anteriores e acumulado
   =========================================================================== */

/* Cores das séries do gráfico da corrida. Cinco, porque o gráfico mostra cinco:
   com quarenta linhas vira teia e não se lê nada. */
:root {
  --serie-1: var(--ace-green);
  --serie-2: #C08A2E;
  --serie-3: #3E7C8C;
  --serie-4: #8A5A9E;
  --serie-5: #A8563F;
  --serie-6: #5B6B3A;
  --linha-forte: #C9C6BA;
}
:root[data-theme="dark"] {
  --serie-1: #6FB98A;
  --serie-2: #D8A94E;
  --serie-3: #6FA9BA;
  --serie-4: #B08AC4;
  --serie-5: #C88170;
  --serie-6: #9DB36A;
  --linha-forte: #33513C;
}

/* ---- faixa do circuito ---------------------------------------------------- */

.faixa-circuito {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, var(--ace-green) 0%, #14503B 100%);
  color: #fff; border-radius: var(--raio); padding: 22px 26px; margin-bottom: 18px;
}
.fc-identidade { min-width: 0; }
.fc-ano {
  display: block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in srgb, #fff 62%, transparent); margin-bottom: 4px;
}
.fc-identidade h2 { margin: 0; font-size: 1.42rem; font-weight: 650; letter-spacing: -.01em; color: #fff; }
.fc-formato { display: block; margin-top: 5px; font-size: .82rem; color: color-mix(in srgb, #fff 68%, transparent); }

.fc-numeros { display: flex; gap: 30px; flex-wrap: wrap; }
.numero-grande { display: flex; flex-direction: column; gap: 2px; }
.numero-grande b {
  font-size: 1.72rem; font-weight: 650; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.numero-grande span {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, currentColor 58%, transparent);
}

/* Divisor entre o circuito e a etapa do dia. Sem ele o painel vira uma pilha
   sem hierarquia, e é justamente a hierarquia que faz a tela parecer pensada. */
.divisor {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 26px 0 14px; font-size: .95rem; font-weight: 650; color: var(--texto);
}
.divisor::after {
  content: ''; flex: 1 1 40px; height: 1px; background: var(--borda);
}
.divisor small { font-size: .78rem; font-weight: 400; color: var(--texto-fraco); }

/* ---- trilha de etapas ----------------------------------------------------- */

.trilha { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; overflow-x: auto; }
.trilha li {
  flex: 1 1 0; min-width: 88px; display: flex; flex-direction: column; gap: 2px;
  padding: 0 8px 0 0; position: relative;
}
.trilha li::before {
  content: ''; position: absolute; left: 9px; right: -3px; top: 7px; height: 2px;
  background: var(--borda);
}
.trilha li:last-child::before { display: none; }
.trilha-feita::before { background: var(--realce) !important; }
.marca-trilha { font-size: .82rem; line-height: 1; color: var(--borda); position: relative; z-index: 1; }
.trilha-feita .marca-trilha, .trilha-proxima .marca-trilha { color: var(--realce); }
.trilha-titulo { font-size: .78rem; font-weight: 600; margin-top: 6px; }
.trilha-vazia .trilha-titulo { color: var(--texto-fraco); font-weight: 500; }
.trilha-data, .trilha-nota { font-size: .72rem; color: var(--texto-fraco); }
.trilha-proxima .trilha-titulo { color: var(--realce); }

/* ---- gráficos ------------------------------------------------------------- */

/* Altura travada: SVG que estica escala a fonte junto, e um grafico de 340px de
   caixa aberto a 900px vira cartaz. */
.g-participacao, .g-corrida { width: 100%; display: block; }
.g-participacao { max-height: 230px; }
.g-corrida { max-height: 250px; }
.g-num { font-size: 17px; font-weight: 650; fill: var(--texto); }
.g-dentro { font-size: 13px; font-weight: 600; fill: #fff; }
.g-rot { font-size: 13px; fill: var(--texto-fraco); }
.g-serie { font-size: 14px; font-weight: 650; }
.g-serie-num { font-size: 12px; fill: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.g-corrida { max-height: 280px; }

.legenda-barras { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: .76rem; color: var(--texto-fraco); }
.legenda-barras i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }

/* ---- pílulas de premiação -------------------------------------------------- */

.abas-premio { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 4px; }
.aba-premio {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borda);
  background: var(--fundo-carta); font-size: .8rem; font-weight: 500; cursor: pointer;
  /* O botao base do console e verde-escuro com texto branco; a pilula inativa
     precisa dizer explicitamente a cor do texto, senao herda o branco e some. */
  color: var(--texto);
}
.aba-premio:hover { border-color: var(--realce); }
.aba-premio small {
  font-size: .7rem; padding: 1px 6px; border-radius: 999px;
  background: var(--fundo-alt); color: var(--texto-fraco); font-variant-numeric: tabular-nums;
}
.aba-premio.ativa { background: var(--realce); border-color: var(--realce); color: #fff; }
.aba-premio.ativa small { background: color-mix(in srgb, #fff 22%, transparent); color: #fff; }

/* ---- lista de etapas ------------------------------------------------------- */

.grade-etapas {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.cartao-etapa {
  display: flex; flex-direction: column; gap: 7px; align-items: stretch; text-align: left;
  padding: 15px 16px; border: 1px solid var(--borda); border-radius: var(--raio-p);
  background: var(--fundo-carta); cursor: pointer; font: inherit; color: inherit;
}
.cartao-etapa:hover { border-color: var(--realce); }
.ce-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ce-rotulo { font-weight: 650; font-size: .98rem; }
.ce-data { font-size: .76rem; color: var(--texto-fraco); }
.ce-campo { font-size: .8rem; color: var(--texto-fraco); }
.ce-numeros { display: flex; gap: 14px; font-size: .78rem; color: var(--texto-fraco); }
.ce-numeros b { color: var(--texto); font-weight: 650; }
.ce-campeoes { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.ce-campeoes .etiqueta { font-size: .68rem; }

.migalha { margin-bottom: 14px; align-items: center; }
.volta { padding: 5px 11px; font-size: .82rem; }
.pilha-cartas > * + * { margin-top: 18px; }

/* ---- campeões -------------------------------------------------------------- */

.grade-campeoes { display: grid; gap: 10px; }
.campeao {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--borda);
}
.campeao:last-child { border-bottom: 0; }
.cp-premio { font-size: .76rem; color: var(--texto-fraco); }
.cp-nome { font-weight: 600; font-size: .9rem; text-align: right; }

/* ---- pódio ----------------------------------------------------------------- */

.podio { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.podio li {
  display: grid; grid-template-columns: 34px 1fr auto auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: var(--raio-p); background: var(--fundo-alt);
}
.podio li:first-child {
  background: linear-gradient(100deg, var(--realce-suave) 0%, var(--fundo-alt) 70%);
  border: 1px solid color-mix(in srgb, var(--realce) 24%, var(--borda));
}
.podio .medalha { font-size: 1.15rem; text-align: center; }
.podio .nome { font-weight: 650; font-size: 1rem; min-width: 0; }
.podio li:first-child .nome { font-size: 1.1rem; }
.podio .marca-podio { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 1.05rem; }
.podio .pts { font-size: .78rem; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }

/* ---- tabelas do circuito ---------------------------------------------------- */

.tabela-circuito { font-size: .85rem; }
.tabela-circuito .pos {
  font-variant-numeric: tabular-nums; color: var(--texto-fraco);
  width: 44px; text-align: right; padding-right: 10px;
}
.tabela-circuito tr.destaque .pos { color: var(--realce); font-weight: 650; }
.tabela-circuito .pts, .tabela-circuito .total { font-variant-numeric: tabular-nums; font-weight: 650; }
.tabela-circuito .total { color: var(--realce); }
/* Traço é "não jogou"; zero é "jogou e não pontuou". São coisas diferentes, e o
   clube publica as duas com símbolos diferentes. */
.tabela-circuito .ausente { color: color-mix(in srgb, var(--texto-fraco) 45%, transparent); }
.tabela-circuito .zerou { color: var(--texto-fraco); }
.tabela-circuito.acumulado th, .tabela-circuito.acumulado td { padding-left: 6px; padding-right: 6px; }

.lista-regra { margin: 0; padding-left: 18px; font-size: .85rem; color: var(--texto-fraco); }
.lista-regra li + li { margin-top: 5px; }

@media (max-width: 700px) {
  .faixa-circuito { padding: 18px; gap: 16px; }
  .fc-numeros { gap: 20px; }
  .numero-grande b { font-size: 1.4rem; }
  .podio li { grid-template-columns: 28px 1fr auto; row-gap: 2px; }
  .podio .pts { grid-column: 2 / -1; }
}

/* ---- número do cart na folha de saída ---------------------------------------
   Editável na tela, impresso no cabeçalho do grupo. O starter recebe a folha
   com o cart já escrito, em vez de anotar à caneta em 10 grupos. */

.campo-cart { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--texto-fraco); }
.col-cart { text-align: right; white-space: nowrap; }
.seletor-buraco { max-width: 148px; margin-right: 4px; }
/* Lugar vago: existe na folha, mas nao compete com quem esta no grupo. */
.grupo-saida tr.lugar-vago td { color: var(--texto-fraco); font-style: italic; }
.campo-cart.e-proprio input { display: none; }
.campo-cart button.mini { padding: 3px 7px; font-size: .68rem; }
.seletor-tee { margin-left: 6px; max-width: 108px; }
.campo-cart input {
  width: 62px; padding: 4px 7px; font-size: .8rem; text-align: center;
  font-variant-numeric: tabular-nums;
}
.so-imprime { display: none; }
@media print {
  .so-imprime { display: inline; }
  .so-imprime.bloco-impresso { display: block; break-before: page; }
  .campo-cart { display: none !important; }
}

/* ---- lançamento buraco a buraco ----------------------------------------------
   A mesa lê o cartão de papel, que é buraco a buraco. Digitar só ida e volta
   obriga a somar de cabeça, e soma errada vira score oficial. A grade rola
   dentro do próprio contorno; a página nunca rola de lado. */

.abrir-buracos {
  margin-top: 4px; padding: 3px 9px; font-size: .72rem; font-weight: 500;
  color: var(--texto-fraco);
}
.abrir-buracos[aria-expanded="true"] { color: var(--realce); border-color: var(--realce); }

/* ---- grade de lancamento -------------------------------------------------------
   Um grupo de saida por carta, uma <table> por carta. Com largura automatica o
   navegador mede cada tabela pelo conteudo DELA, e a coluna HCP de um grupo
   caia quase 100px longe da do grupo de baixo. A mesa le as cartas em
   sequencia, correndo o olho pela mesma coluna — coluna que dança a cada grupo
   e erro de leitura, e aqui leitura errada vira score oficial. Larguras
   declaradas, iguais em todos os grupos. */
.grade-lancamento { table-layout: fixed; min-width: 620px; }
.grade-lancamento col.c-hcp { width: 74px; }
.grade-lancamento col.c-ida,
.grade-lancamento col.c-volta { width: 96px; }
.grade-lancamento col.c-gross,
.grade-lancamento col.c-net { width: 78px; }
.grade-lancamento col.c-situacao { width: 122px; }
/* Nome longo trunca; esticar a coluna e o que desalinhava as outras seis. */
.grade-lancamento .nome-jogador { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* O campo ja tem a largura da coluna: `input.score` fixo em 66px sobrava. */
.grade-lancamento input.score { width: 100%; }

/* Soma vinda do buraco a buraco: e espelho, nao digitacao. */
.grade-lancamento input.score.somado {
  background: var(--fundo-alt); color: var(--texto-fraco); cursor: default;
}

.linha-buracos > td { padding: 0 !important; background: var(--fundo-alt); }
.painel-buracos { padding: 12px 14px; }

.grade-buracos { font-size: .8rem; border-collapse: separate; border-spacing: 0; }
.grade-buracos th, .grade-buracos td { padding: 3px; text-align: center; border: 0; }
.grade-buracos thead th {
  font-size: .68rem; font-weight: 600; color: var(--texto-fraco); padding-bottom: 5px;
}
.grade-buracos th[scope="row"] {
  font-size: .72rem; font-weight: 500; color: var(--texto-fraco);
  white-space: nowrap; padding-right: 10px; text-align: left;
}
.linha-par td { font-size: .72rem; color: var(--texto-fraco); padding-bottom: 5px; }
.cel-score {
  width: 40px; padding: 5px 3px; text-align: center; font-size: .88rem;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.cel-score::-webkit-outer-spin-button,
.cel-score::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.soma-buracos { font-size: .78rem; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.soma-buracos.completa { color: var(--realce); font-weight: 600; }

@media print { .linha-buracos, .abrir-buracos { display: none !important; } }

/* ---- corte de handicap ------------------------------------------------------- */
.delta { color: var(--realce); font-weight: 600; font-size: .78rem; }

/* ---- tee sheet ---------------------------------------------------------------
   Documento operacional, não calendário. Quem opera está em pé no balcão com o
   telefone no ombro: o que sobrou, quem está em cada saída, o que está fechado
   e por quê — num golpe de vista. */

.barra-dia { flex-wrap: wrap; align-items: center; }
.barra-dia input[type="date"] { width: auto; padding: 7px 10px; font-size: .86rem; }

.tee-sheet { list-style: none; margin: 0; padding: 0; }
.slot {
  display: grid; grid-template-columns: 62px 1fr 76px; gap: 12px; align-items: center;
  padding: 7px 10px; border-bottom: 1px solid var(--borda);
}
.slot:last-child { border-bottom: 0; }
.slot-hora { font-variant-numeric: tabular-nums; font-weight: 650; font-size: .92rem; }
.slot-corpo { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; }
.slot-vagas { font-size: .74rem; color: var(--texto-fraco); text-align: right; }
.slot.cheio { background: var(--fundo-alt); }

/* Horário fechado continua na lista, com o motivo. Sumir com a linha faz
   parecer erro do sistema — e a pessoa liga para a secretaria. */
.slot.bloqueado {
  background: repeating-linear-gradient(45deg, transparent, transparent 6px,
                                        var(--fundo-alt) 6px, var(--fundo-alt) 12px);
}
.slot-motivo { font-size: .78rem; color: var(--texto-fraco); }

.pessoa {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 500;
  border: 1px solid var(--borda); background: var(--fundo-carta); color: var(--texto);
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pessoa small { font-size: .68rem; color: var(--texto-fraco); }
.pessoa.titular { cursor: pointer; }
.pessoa.titular:hover { border-color: var(--realce); }
.pessoa.convidado { color: var(--texto-fraco); border-style: dashed; }
.pessoa.presente { border-color: var(--realce); background: var(--realce-suave); }
.pessoa.presente small { color: var(--realce); }
.pessoa.jogada { opacity: .62; }
.pessoa.vaga {
  color: var(--texto-fraco); border-style: dashed; cursor: pointer;
  padding: 4px 12px; font-weight: 600;
}
.pessoa.vaga:hover { border-color: var(--realce); color: var(--realce); border-style: solid; }

@media (max-width: 700px) {
  .slot { grid-template-columns: 52px 1fr; row-gap: 4px; }
  .slot-vagas { grid-column: 2; text-align: left; }
}
@media print {
  .pessoa.vaga, .barra-dia, .abas-premio { display: none !important; }
  .slot { break-inside: avoid; }
}

/* ---- desfazer ---------------------------------------------------------------- */
.tabela-versoes { font-size: .85rem; }
.tabela-versoes td { vertical-align: top; }
/* Versão vazia salta aos olhos: é quase sempre ela que se quer desfazer. */
.versao-vazia { background: color-mix(in srgb, var(--alerta, #B8912F) 8%, transparent); }
.cel-resumo {
  font-size: 12px; max-width: 30ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Zero e traço no acumulado precisam ser diferentes NA TELA. Um gerente leu um
   zero legítimo — atleta que jogou e ficou fora das posições que pontuam — como
   "o resultado não contou". */
.legenda-acumulado {
  display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 12px;
  font-size: .76rem; color: var(--texto-fraco);
}
.legenda-acumulado b {
  display: inline-block; min-width: 1.2em; text-align: center;
  color: var(--texto); font-variant-numeric: tabular-nums;
}
.tabela-circuito .zerou {
  color: var(--texto-fraco);
  text-decoration: underline dotted currentColor;
  text-underline-offset: 3px;
}

/* ---- configuração da agenda -------------------------------------------------- */
.dias-semana { gap: 6px; flex-wrap: wrap; }
.marca-dia {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 5px 10px; border: 1px solid var(--borda); border-radius: 999px; font-size: .78rem;
}
.marca-dia input { width: auto; margin: 0; }
.por-dia { margin-top: 16px; }
.por-dia summary { font-size: .84rem; color: var(--realce); cursor: pointer; }
.linha-dia { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .8rem; }
.linha-dia .dia-rot { width: 34px; color: var(--texto-fraco); }
.linha-dia input { width: auto; padding: 5px 8px; font-size: .82rem; }

/* O cabeçalho e o rodapé da folha existem só no papel.
   O padrão precisa morar AQUI, e não em impressao.css: aquele arquivo é
   carregado com media="print" e a tela nunca o lê. Escrever "esconder na tela"
   dentro do único arquivo que a tela ignora fez as duas logos aparecerem em
   tamanho natural embaixo do título de cada seção. */
.folha-cabecalho, .folha-rodape { display: none; }

/* ===========================================================================
   Atualização visual 2026 — aproxima a aplicação dos mockups aprovados.
   A camada fica no fim para modernizar a moldura sem interferir nos documentos
   operacionais e nas regras já existentes das seções.
   =========================================================================== */

.console {
  grid-template-columns: 252px minmax(0, 1fr);
  background:
    radial-gradient(circle at 72% -20%, rgba(15, 61, 46, .045), transparent 36%),
    #FBFCFB;
}

.lateral {
  background:
    radial-gradient(circle at 50% 42%, rgba(28, 113, 74, .42), transparent 45%),
    linear-gradient(165deg, #043C2C 0%, #004A34 55%, #003B2B 100%);
  color: #D5E5DB;
  padding: 0 14px 18px;
  box-shadow: inset -1px 0 rgba(255,255,255,.04);
}
.lateral-marca { height: 100px; padding: 0 14px; margin-bottom: 4px; }
.lateral-marca img { width: 158px; height: auto; max-width: 100%; }
.lateral-nav { gap: 3px; }
.lateral-nav button {
  min-height: 42px; padding: 10px 12px; border-radius: 8px;
  color: #D2E2D8; font-size: .82rem;
}
.lateral-nav button:hover { background: rgba(255,255,255,.09); }
.lateral-nav button[aria-current="page"] {
  background: linear-gradient(90deg, rgba(36, 137, 83, .72), rgba(39, 139, 84, .5));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 5px 16px rgba(0,0,0,.12);
}
.lateral-nav svg { width: 17px; height: 17px; }
.lateral-nav .divisor {
  margin: 15px 12px 6px; color: #7FAE92; font-size: .59rem; letter-spacing: .18em;
}
.lateral-rodape { border-color: rgba(255,255,255,.12); }

.barra {
  min-height: 72px; padding: 14px 28px;
  background: rgba(251,252,251,.9); border-bottom: 0;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.barra-clube img { max-width: 126px; height: 28px; object-fit: contain; }
.barra-notificacoes {
  position: relative; display: inline-grid; place-items: center;
  width: 38px; height: 38px; padding: 0; border: 0; background: transparent;
}
.barra-notificacoes:hover:not(:disabled) { background: var(--realce-suave); }
.barra-notificacoes svg { width: 20px; height: 20px; }
.barra-notificacoes-contagem {
  position: absolute; top: 0; right: -1px; min-width: 17px; height: 17px;
  padding: 0 4px; display: grid; place-items: center; border-radius: 99px;
  color: #fff; background: #095337; border: 2px solid #FBFCFB;
  font-size: 9px; font-weight: 700; line-height: 1;
}
.barra-notificacoes-contagem[hidden] { display: none; }
.pilula-sinc { background: #F4F6F3; border-color: #E1E7E2; }
.barra select.mini { min-width: 260px; height: 38px; }
.barra .botao { display: inline-flex; align-items: center; gap: 7px; height: 38px; text-decoration: none; }

.console-conteudo { max-width: 1460px; padding: 10px 28px 56px; }
.pagina-topo { align-items: center; margin: 0 0 18px; min-height: 72px; }
.pagina-topo h1 { font-size: 1.7rem; line-height: 1.15; letter-spacing: -.035em; }
.pagina-topo .sub { font-size: .84rem; }

.carta, .indicador, .faixa-contexto, .painel-acoes {
  border-color: #E6EAE6;
  box-shadow: 0 1px 2px rgba(12,48,34,.035), 0 8px 28px rgba(12,48,34,.035);
}
.carta { border-radius: 11px; margin-top: 14px; }
.carta-topo { padding: 14px 16px; background: #fff; }
.carta-topo h2 { font-size: .9rem; letter-spacing: -.015em; }
.corpo { padding: 17px; }

#secao-atual > .faixa-contexto {
  justify-content: flex-end; gap: 0; margin: -90px 0 18px auto;
  width: min(610px, 60%); min-height: 64px; padding: 10px 14px;
  background: rgba(255,255,255,.9); border-radius: 11px;
}
.faixa-contexto > div { flex: 1 1 0; padding: 0 16px; }
.faixa-contexto > div + div { border-left: 1px solid #E7EBE7; }
.faixa-contexto svg { color: var(--realce); stroke: currentColor; width: 20px; height: 20px; }
.faixa-contexto .rotulo { font-size: .58rem; }
.faixa-contexto .valor { font-size: .75rem; line-height: 1.35; }

.indicadores { gap: 12px; margin-bottom: 14px; grid-template-columns: repeat(4, minmax(0,1fr)); }
.indicador { min-height: 98px; padding: 16px; border-radius: 11px; background: #fff; }
.indicador .icone { width: 48px; height: 48px; border-radius: 50%; background: #EEF5EF; }
.indicador .icone svg { width: 24px; height: 24px; }
.indicador .rotulo { font-size: .59rem; letter-spacing: .08em; }
.indicador .valor { font-size: 1.55rem; letter-spacing: -.035em; }
.indicador .apoio { font-size: .68rem; }

.painel-acoes {
  display: flex; align-items: center; gap: 10px; min-height: 64px;
  margin-bottom: 14px; padding: 12px 15px; background: #fff;
  border: 1px solid #E6EAE6; border-radius: 11px;
}
.painel-acoes-texto { display: grid; gap: 1px; }
.painel-acoes-texto b { font-size: .78rem; }
.painel-acoes-texto span { color: var(--texto-fraco); font-size: .68rem; }
.painel-acoes button { min-width: 112px; }

.duas-colunas { gap: 14px; grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr); }
.duas-colunas > div > .carta:first-child { margin-top: 0; }
.divisor-secao { margin-top: 32px; }

.faixa-circuito { margin-top: 0; border-radius: 11px; box-shadow: 0 10px 30px rgba(2,62,43,.12); }
.alerta { padding: 12px 16px; }
.podio > div { padding: 11px 16px; }

@media (max-width: 1180px) {
  #secao-atual > .faixa-contexto { margin: 0 0 16px; width: 100%; }
  .indicadores { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 980px) {
  .console { grid-template-columns: minmax(0, 1fr); }
  .lateral { width: 276px; }
  .barra { min-height: 64px; padding: 10px 16px; }
  .barra-clube { display: none; }
  .barra select.mini { min-width: 0; max-width: min(44vw, 300px); }
  .console-conteudo { padding: 10px 16px 48px; }
  .pagina-topo { min-height: 58px; }
}

@media (max-width: 680px) {
  .barra { gap: 7px; }
  .pilula-sinc { order: 4; margin-left: 48px; }
  .barra select.mini { max-width: calc(100vw - 142px); }
  .barra .botao { width: 38px; overflow: hidden; padding: 9px 11px; white-space: nowrap; color: transparent; gap: 0; }
  .barra .botao svg { color: var(--texto); flex: 0 0 auto; }
  .pagina-topo { margin-bottom: 12px; }
  .pagina-topo h1 { font-size: 1.4rem; }
  .pagina-topo .sub { font-size: .78rem; }
  .faixa-contexto { display: grid; grid-template-columns: 1fr; padding: 4px 14px; }
  .faixa-contexto > div { padding: 10px 4px; }
  .faixa-contexto > div + div { border-left: 0; border-top: 1px solid #E7EBE7; }
  .indicadores { grid-template-columns: 1fr 1fr; gap: 8px; }
  .indicador { min-height: 88px; padding: 12px; gap: 10px; }
  .indicador .icone { width: 38px; height: 38px; }
  .indicador .valor { font-size: 1.25rem; }
  .painel-acoes { flex-wrap: wrap; }
  .painel-acoes-texto, .painel-acoes .espaco { flex-basis: 100%; }
  .painel-acoes button { flex: 1 1 120px; min-width: 0; }
}

/* ---- visão geral -------------------------------------------------------------
   A tela que a gestora abre de manhã: faixa escura com os números do clube,
   e a grade de cartões — campeonatos, agenda, receita, movimentações e
   pendências. Mesma família visual do resto do console. */

.saudacao { margin: 0 0 16px; font-size: 1.05rem; color: var(--texto-fraco); }
.saudacao::first-line { color: var(--texto); }

.faixa-operacao {
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  flex-wrap: wrap;
  background: var(--ace-green); color: #EAF2EC;
  border-radius: 14px; padding: 20px 24px; margin-bottom: 18px;
}
.faixa-operacao .situacao { display: flex; align-items: center; gap: 14px; }
.faixa-operacao .situacao b { display: block; font-size: 1.02rem; color: #fff; }
.faixa-operacao .situacao span:not(.farol) { font-size: .84rem; color: #B9CDBF; }
.farol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-weight: 700; font-size: 1rem; flex: 0 0 auto;
}
.farol.ok { background: #2E7D32; color: #fff; }
.farol.atencao { background: #C08A2E; color: #fff; }
.faixa-operacao .numeros { display: flex; gap: 30px; flex-wrap: wrap; }
.faixa-operacao .numeros > div { display: flex; align-items: center; gap: 10px; }
.faixa-operacao .numeros .icone { display: inline-flex; opacity: .75; }
.faixa-operacao .numeros svg { width: 20px; height: 20px; stroke: #B9CDBF; fill: none; stroke-width: 1.7; }
.faixa-operacao .numeros b { display: block; font-size: 1.25rem; line-height: 1.1; color: #fff; }
.faixa-operacao .numeros span:not(.icone) { font-size: .72rem; color: #B9CDBF; }

.grade-visao {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  align-items: start;
}
.grade-visao .carta { margin: 0; }

.lista-visao { display: flex; flex-direction: column; gap: 4px; }
.linha-visao {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 4px; border-bottom: 1px solid var(--borda);
}
.linha-visao:last-child { border-bottom: 0; }
.linha-visao[role="button"] { cursor: pointer; border-radius: 8px; }
.linha-visao[role="button"]:hover { background: var(--fundo-alt); }
.linha-visao > div { min-width: 0; flex: 1 1 auto; }
.linha-visao b { display: block; font-size: .88rem; }
.linha-visao .fraco { display: block; font-size: .76rem; }
.linha-visao .hora { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: .9rem; }
.linha-visao .quando { flex: 0 0 auto; font-size: .72rem; }
.linha-visao .dir { text-align: right; flex: 0 0 auto; }
.linha-visao.passada { opacity: .55; }
.linha-visao .vencida, .resumo-dia .vencida { color: var(--perigo, #A0483C); font-weight: 700; }
.icone-bloco {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  background: var(--fundo-alt);
}
.icone-bloco svg { width: 17px; height: 17px; stroke: var(--realce); fill: none; stroke-width: 1.7; }
.icone-bloco.verde { background: color-mix(in srgb, var(--realce) 14%, transparent); }

.lista-pendencias { display: flex; flex-direction: column; gap: 10px; }
.pendencia {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 15px; border-radius: 11px; cursor: pointer;
  border: 1px solid transparent;
}
.pendencia .n { font-size: 1.3rem; flex: 0 0 auto; min-width: 26px; text-align: center; }
.pendencia > div { flex: 1 1 auto; min-width: 0; }
.pendencia b { display: block; font-size: .86rem; }
.pendencia span { font-size: .75rem; color: var(--texto-fraco); }
.pendencia .seta { color: var(--texto-fraco); }
.pendencia.vermelho { background: #F9E9E5; border-color: #EAC8BF; }
.pendencia.amarelo { background: #F8F0DC; border-color: #E6D5AC; }
.pendencia.azul { background: #E7EEF4; border-color: #C6D6E2; }
:root[data-theme="dark"] .pendencia.vermelho { background: #3A2521; border-color: #5C382F; }
:root[data-theme="dark"] .pendencia.amarelo { background: #37301D; border-color: #57492A; }
:root[data-theme="dark"] .pendencia.azul { background: #22303A; border-color: #35485A; }

/* ---- gráfico de linha (receita) ---- */
.grafico-linha { width: 100%; }
.tela-grafico { position: relative; width: 100%; }
.tela-grafico svg { display: block; width: 100%; height: 170px; }
.valor-ponto {
  position: absolute; transform: translate(-50%, -140%);
  font-size: .68rem; font-weight: 700; color: var(--texto);
  background: var(--fundo-carta); padding: 1px 5px; border-radius: 6px;
  border: 1px solid var(--borda); white-space: nowrap;
}
.eixo-x { display: flex; justify-content: space-between; margin-top: 6px;
  font-size: .7rem; color: var(--texto-fraco); }

/* ---- abas de página (Associados) ---- */
.abas-pagina {
  display: flex; gap: 2px; margin-bottom: 16px;
  border-bottom: 1px solid var(--borda);
}
.abas-pagina button {
  padding: 9px 14px; font-size: .86rem; color: var(--texto-fraco);
  border: 0; background: none; border-bottom: 2px solid transparent;
  border-radius: 0; cursor: pointer;
}
.abas-pagina button.ativa { color: var(--texto); border-bottom-color: var(--realce); font-weight: 600; }

.grade-dois-um { display: grid; gap: 16px; grid-template-columns: 1.4fr 1fr; align-items: start; }
.grade-tres { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; }
.grade-dois-um .carta, .grade-tres .carta { margin: 0; }
@media (max-width: 900px) { .grade-dois-um { grid-template-columns: 1fr; } }

/* ---- agenda: grade do dia ---- */
.agenda-grade { display: flex; flex-direction: column; gap: 10px; min-width: 720px; }
.agenda-linha { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: start; }
.agenda-recurso b { display: block; font-size: .88rem; }
.agenda-recurso .fraco { font-size: .72rem; }
.agenda-slots { display: flex; gap: 6px; flex-wrap: wrap; }
.slot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 96px; padding: 8px 10px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--fundo-alt);
  font: inherit; text-align: left;
}
.slot .hora { font-size: .7rem; font-variant-numeric: tabular-nums; opacity: .8; }
.slot .quem { font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.slot.livre .quem { color: var(--texto-fraco); font-weight: 400; }
.slot.reservado { background: var(--ace-green); border-color: var(--ace-green); color: #fff; }
.slot.reservado .hora { opacity: .7; }
.slot.aula { background: color-mix(in srgb, var(--realce) 16%, var(--fundo-carta)); border-color: color-mix(in srgb, var(--realce) 40%, var(--borda)); }
.slot.manutencao { background: #F6E2DE; border-color: #E0B7AE; color: #8C4A3E; cursor: not-allowed; }
:root[data-theme="dark"] .slot.manutencao { background: #3A2521; border-color: #5C382F; color: #DFA79A; }

.legenda-agenda { display: inline-flex; gap: 14px; font-size: .72rem; color: var(--texto-fraco); }
.legenda-agenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }
.legenda-agenda i.reservado { background: var(--ace-green); }
.legenda-agenda i.aula { background: color-mix(in srgb, var(--realce) 30%, var(--fundo-carta)); }
.legenda-agenda i.livre { background: var(--fundo-alt); border: 1px solid var(--borda); }
.legenda-agenda i.manutencao { background: #E0B7AE; }

.resumo-dia { display: flex; flex-direction: column; gap: 9px; }
.resumo-dia > div { display: flex; justify-content: space-between; font-size: .85rem;
  padding-bottom: 8px; border-bottom: 1px solid var(--borda); }
.resumo-dia > div:last-child { border-bottom: 0; }

/* ---- grupos retráteis do menu ------------------------------------------------
   O cabeçalho do grupo é uma LINHA DE MENU, igual às outras: mesmo ícone na
   mesma coluna, mesma altura, mesma fonte — só a seta a mais. Ele foi um rótulo
   miúdo em caixa-alta com um fio ao lado, e a lateral virou três coisas
   diferentes empilhadas: item, etiqueta, item. Uma lista só precisa de um
   ritmo só. */

.lateral-nav .item-menu .rotulo {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lateral-nav .grupo-cabeca .seta {
  flex: 0 0 auto; font-size: 1.05rem; line-height: 1; opacity: .65;
  transition: transform .18s ease;
}
.lateral-nav .grupo-cabeca.aberto .seta { transform: rotate(90deg); }
.lateral-nav .grupo-cabeca .conta {
  flex: 0 1 auto; min-width: 18px; max-width: 92px; padding: 2px 7px;
  border-radius: 99px; background: rgba(255,255,255,.13); color: #C6DCCF;
  font-size: .68rem; font-weight: 600; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Fechado com a seção aberta dentro: o nome dela, em branco, dentro do
   cabeçalho já realçado como item ativo. */
.lateral-nav .grupo-cabeca .conta.atual { background: rgba(255,255,255,.22); color: #fff; }

/* Os filhos recuam só o suficiente para se lerem como filhos. Mais do que isto
   e os rótulos quebram em duas linhas — a lateral é estreita, e cada pixel
   tirado daqui sai da palavra. */
.lateral-nav .grupo-itens { display: flex; flex-direction: column; gap: 2px; }
.lateral-nav .grupo-itens[hidden] { display: none; }
.lateral-nav .item-menu.subitem {
  padding-left: 41px; font-size: .86rem; color: #9FC0AD;
}
.lateral-nav .item-menu.subitem[aria-current="page"] { color: #fff; }
/* Um fio ligando os filhos ao pai, na coluna do ícone dele. Cabe aqui porque
   não custa largura de rótulo: vive dentro do recuo que já existe. */
.lateral-nav .grupo-itens { position: relative; }
.lateral-nav .grupo-itens::before {
  content: ''; position: absolute; left: 21px; top: 4px; bottom: 4px;
  width: 1px; background: rgba(255,255,255,.13);
}

/* ---- inscrição pelo app ------------------------------------------------------
   A fila que o gerente atende: uma linha por pagamento a conferir, com o
   comprovante a um toque. */

.linha-config { margin-bottom: 14px; }
.campo.alternador { flex-direction: row; align-items: center; gap: 9px; cursor: pointer; }
.campo.alternador input { width: 18px; height: 18px; }
.campo.alternador span { font-size: .9rem; font-weight: 600; }
.grade-config { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 12px; }
.sub-titulo { margin: 22px 0 10px; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--texto-fraco); }

.fila-pedidos { display: flex; flex-direction: column; gap: 8px; }
.pedido {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 13px; border: 1px solid var(--borda); border-radius: 11px;
  background: var(--fundo-alt);
}
.pedido .quem { flex: 1 1 200px; min-width: 0; }
.pedido b { display: block; font-size: .88rem; }
.pedido .fraco { font-size: .76rem; }

dialog.ficha.comprovante { max-width: min(94vw, 620px); }
dialog.ficha.comprovante img,
dialog.ficha.comprovante embed {
  display: block; width: 100%; max-height: 62vh; object-fit: contain;
  border-radius: 10px; background: var(--fundo-alt);
}

/* Login e situação do acesso na lista de associados: o gestor precisa poder
   dizer ao associado, por telefone, qual é o login dele. */
.acesso-cel { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.acesso-cel code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; color: var(--texto);
}

/* Seletor de campeonato nas telas de histórico. Só aparece com mais de um —
   caixa de escolha com uma opção só é ruído que a mesa aprende a ignorar. */
.chips-campeonato {
  display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px;
}
.chips-campeonato button {
  min-height: 36px; padding: 0 14px; border-radius: 99px;
  border: 1px solid var(--borda); background: var(--fundo-carta); color: var(--texto-fraco);
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.chips-campeonato button.ativa {
  background: var(--ace-green); border-color: var(--ace-green); color: #fff;
}

/* ---------------------------------------------------------------------------
   Visão geral de Associados, no desenho aprovado no mockup.
   Mora AQUI porque o painel lê console.css por último — regra no arquivo
   errado não tem efeito e não avisa.
   --------------------------------------------------------------------------- */
.linha-abas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  /* O respiro morava no margin-bottom das abas; ao zerá-lo aqui dentro, os
     cartões subiam para debaixo do botão "+ Novo associado". O espaçamento
     agora é da LINHA, que é quem define a altura de verdade (o botão é mais
     alto que a régua de abas). */
  margin-bottom: 16px;
}
.linha-abas .abas-pagina { flex: 1 1 auto; margin-bottom: 0; align-self: flex-end; }

/* Os cinco cartões do topo: ícone à esquerda, número grande, rótulo embaixo. */
.kpi-linha { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 16px 0; }
.kpi {
  display: flex; align-items: center; gap: 14px;
  background: var(--carta, #fff); border: 1px solid var(--borda, #e4e4de);
  border-radius: 14px; padding: 20px 22px;
}
.kpi > svg { width: 30px; height: 30px; flex: 0 0 30px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.kpi .num {
  font-size: 1.55rem; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  /* "R$ 1,6 mil" partido em duas linhas lê como dois valores. */
  white-space: nowrap;
}
.kpi .rot { font-size: .82rem; color: var(--texto-fraco); margin-top: 2px; }
.kpi.bom > svg { color: #2E7D32; }
.kpi.ruim > svg { color: #C24333; }

/* Receita, categorias e cobranças lado a lado, como no mockup. */
.grade-visao { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 16px; align-items: start; }
.grade-visao-baixo { display: grid; grid-template-columns: 1fr 1.35fr; gap: 16px; align-items: start; margin-top: 16px; }
@media (max-width: 1200px) {
  .kpi-linha { grid-template-columns: repeat(2, 1fr); }
  .grade-visao, .grade-visao-baixo { grid-template-columns: 1fr; }
}

/* O selo de variação da receita: percentual verde em cima, período embaixo. */
.variacao { display: grid; justify-items: end; gap: 2px; font-size: .78rem; color: var(--texto-fraco); }
.variacao b { font-size: .95rem; }
.variacao b.sobe { color: #2E7D32; }
.variacao b.desce { color: #C24333; }

/* Categoria: rótulo e valor em cima, barra e participação embaixo. */
.lista-categorias { display: grid; gap: 16px; }
.cat-topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.cat-topo .rotulo { font-size: .85rem; }
.cat-baixo { display: flex; align-items: center; gap: 10px; }
.cat-baixo .trilho { flex: 1; height: 8px; border-radius: 99px; background: var(--realce-suave, #edf1ee); overflow: hidden; display: block; }
.cat-baixo .trilho i { display: block; height: 100%; border-radius: 99px; }
.cat-baixo .participacao { font-size: .74rem; color: var(--texto-fraco); min-width: 42px; text-align: right; }

/* Cobranças em aberto: foto, nome e plano, valor e vencimento — uma pessoa por linha. */
.lista-cobrancas { display: grid; }
.cobranca { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--borda, #ececea); }
.cobranca:last-child { border-bottom: 0; }
.cobranca b { display: block; font-size: .9rem; }
.cobranca .fraco { font-size: .78rem; }
.cobranca .dir { margin-left: auto; text-align: right; display: grid; gap: 2px; }
.cobranca .dir b { font-variant-numeric: tabular-nums; }
.cobranca .vencida { color: #C24333; font-size: .76rem; font-weight: 600; }
.cobranca .a-vencer { color: #B47B0E; font-size: .76rem; font-weight: 600; }
.cobranca.clicavel { cursor: pointer; }
.cobranca.clicavel:hover b:first-of-type { text-decoration: underline; }
.avatar-foto { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 38px; }
button.ver-todas {
  background: none; border: 0; padding: 10px 0 0; font: inherit; font-size: .84rem;
  color: var(--realce); font-weight: 600; cursor: pointer; text-align: left;
}
button.ver-todas:hover { text-decoration: underline; }

/* Próximos eventos: miniatura, nome e data, seta. */
.lista-eventos { display: grid; }
.evento { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borda, #ececea); }
.evento:last-child { border-bottom: 0; }
.evento b { display: block; font-size: .88rem; }
.evento .fraco { font-size: .78rem; }
.evento .seta { margin-left: auto; color: var(--texto-fraco); font-size: 1.2rem; }
.evento.clicavel { cursor: pointer; }
.evento.clicavel:hover b { text-decoration: underline; }
svg.thumb-evento { width: 64px; height: 44px; flex: 0 0 64px; border-radius: 8px; }

/* Resumo de indicadores: colunas separadas por filete, tudo centrado. */
.resumo-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.resumo-item { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 6px 10px; border-left: 1px solid var(--borda, #ececea); }
.resumo-item:first-child { border-left: 0; }
.resumo-item > svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.6; color: var(--realce); }
.resumo-item .num { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.resumo-item .rot { font-size: .78rem; color: var(--texto); }
.resumo-item .delta { font-size: .7rem; color: var(--texto-fraco); }
@media (max-width: 1200px) { .resumo-grid { grid-template-columns: repeat(2, 1fr); } .resumo-item { border-left: 0; } }

/* Fatura "Enviada": cobrança criada no gateway, aguardando o sócio pagar. */
.etiqueta.info { background: #E7EEF7; color: #24527E; }
[data-theme="dark"] .etiqueta.info { background: #17293c; color: #7fb0dd; }
.acoes-fatura { gap: 4px; flex-wrap: wrap; }

/* O formulário de associado, no padrão da Benefícios: duas colunas, dependentes
   inline, ações no rodapé à direita. */
.form-socio-topo { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 18px; }
.form-socio-topo h2 { margin: 0 0 4px; font-size: 20px; }
.form-socio-topo p { margin: 0; font-size: .82rem; }
.form-socio { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.form-socio .campo { display: grid; gap: 5px; }
.form-socio .campo > span { font-size: .8rem; color: var(--texto-fraco); }
.form-socio input, .form-socio select { width: 100%; box-sizing: border-box; }
.form-socio .campo-ativo .linha { display: flex; align-items: center; gap: 8px; }
.form-socio .campo-ativo input[type=checkbox] { width: auto; }
.bloco-dependentes { margin-top: 22px; border: 1px solid var(--borda, #e4e4de); border-radius: 12px; padding: 14px 16px; }
.bloco-dependentes-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.bloco-dependentes-topo h3 { margin: 0; font-size: .95rem; }
.deps-existentes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.linha-dependente { display: grid; grid-template-columns: 2fr 1.2fr 1fr auto; gap: 10px; margin-bottom: 8px; align-items: center; }
.form-socio-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
@media (max-width: 900px) {
  .form-socio { grid-template-columns: 1fr; }
  .linha-dependente { grid-template-columns: 1fr 1fr; }
}

/* --- equipes de melhor bola (ProAM) ---------------------------------------- */
.equipes-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.equipe-bloco { border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; }
.equipe-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
/* Grupo da folha de saída da Copa: nome longo de atleta não pode empurrar as
   colunas de handicap e tee para fora do cartão — no 2º dia o grupo tem até
   quatro equipes, e a folha transbordava por cima do grupo vizinho. */
.grupo-copa .equipe-topo { flex-wrap: wrap; margin-bottom: 4px; }
.grupo-copa-equipes { margin-bottom: 8px; }
.grupo-copa table { width: 100%; table-layout: fixed; }
/* O nome QUEBRA, não corta: o starter confere a lista pelo nome inteiro, e
   "Daniel Miqu…" não identifica ninguém no tee. */
.grupo-copa td:first-child { white-space: normal; overflow-wrap: anywhere; }
.grupo-copa td:not(:first-child) { width: 3.6em; text-align: right; white-space: nowrap; }
.grupo-copa td:last-child { width: 5.6em; }   /* "Vermelho" não cabe em 3,6em */
@media screen {
  /* Na tela o cartão é mais largo, para "Adhemar Antonio Pereira Filho" caber
     em uma linha. No papel a largura é outra e duas colunas continuam certas —
     por isso isto não vale na impressão. */
  .folha-copa .equipes-grade { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
}

/* Classificação da Copa: a coluna do TOTAL é a resposta da tela, e não pode
   sair do campo de visão empurrada por "contaram Fulano 49 · Beltrano 51 · …".
   Largura fixa, e quem cede é o texto do dia, que quebra em mais linhas. */
.tabela-copa { table-layout: fixed; width: 100%; }
.tabela-copa th, .tabela-copa td { white-space: normal; overflow-wrap: anywhere; }
.tabela-copa .col-pos { width: 3em; }
.tabela-copa .col-total { width: 7em; }
.equipe-topo input { flex: 1; font-weight: 600; }
.equipe-papeis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.equipe-papeis .campo > span { font-size: .72rem; color: var(--texto-fraco); }
.equipe-papeis select { width: 100%; }

/* A ficha de buracos da equipe: 18 células, tacada grande, papel pequeno. */
.buracos-equipe { display: flex; gap: 4px; flex-wrap: wrap; padding: 8px 2px; }
.buracos-equipe .buraco {
  display: grid; justify-items: center; min-width: 34px; padding: 4px 2px;
  border: 1px solid var(--borda); border-radius: 8px; line-height: 1.15;
}
.buracos-equipe .buraco em { font-style: normal; font-size: .62rem; color: var(--texto-fraco); }
.buracos-equipe .buraco b { font-size: .95rem; font-variant-numeric: tabular-nums; }
.buracos-equipe .buraco i { font-style: normal; font-size: .6rem; color: var(--realce); font-weight: 700; }
.buracos-equipe .buraco.vazio { opacity: .45; }

/* A grade do cartão da equipe: 18 campos numerados, digitação corrida. */
.cartao-equipe { border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.cartao-equipe-topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 10px; }
.grade-equipe { display: grid; grid-template-columns: repeat(9, minmax(44px, 1fr)); gap: 6px; }
.grade-equipe label { display: grid; gap: 2px; justify-items: center; }
.grade-equipe em { font-style: normal; font-size: .62rem; color: var(--texto-fraco); }
.grade-equipe input { width: 100%; text-align: center; padding: 6px 2px; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .grade-equipe { grid-template-columns: repeat(6, 1fr); } }

/* Diálogo do documento de cartão no painel. */
dialog.dialogo-cartao { border: 0; border-radius: 16px; padding: 14px; max-width: 560px; width: calc(100vw - 40px); }
dialog.dialogo-cartao::backdrop { background: rgba(15, 30, 22, .55); }

/* ---- eventos e comunicados ---- */
.etiqueta.categoria { background: color-mix(in srgb, var(--cor) 14%, transparent); color: var(--cor); border-color: color-mix(in srgb, var(--cor) 40%, transparent); }
.previa-cartaz { width: 120px; min-height: 60px; display: grid; place-items: center; border: 1px dashed var(--borda); border-radius: 8px; overflow: hidden; }
.previa-cartaz img { max-width: 100%; height: auto; display: block; }
.tabela-eventos th, .tabela-eventos td { text-align: left; }
.tabela-eventos td.acoes { text-align: right; white-space: nowrap; }

/* ---- campeonatos: programação ---- */
.programacao-form { display: flex; flex-direction: column; gap: 8px; }
.linha-etapa { display: grid; grid-template-columns: 90px 170px 1fr; gap: 10px; align-items: center; }
.linha-etapa .rotulo-etapa { font-size: 12.5px; font-weight: 600; color: var(--texto-fraco); }
.tabela-eventos input[type=date], .tabela-eventos input[type=text] { width: 100%; min-width: 120px; }

/* ---- Mapa do campo na mesa: satélite, quatro cliques por buraco ---------- */
.mapa-buraco { position: relative; overflow: hidden; border-radius: 10px; background: #1d2a22; touch-action: none; user-select: none; }
.mapa-editor { cursor: crosshair; }
.mapa-tiles { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.mapa-tiles img { position: absolute; width: 256px; height: 256px; pointer-events: none; }
.mapa-desenho { position: absolute; left: 0; top: 0; pointer-events: none; }
.mapa-desenho .mm circle { fill: #fff; stroke: #0F3D2E; stroke-width: 2; }
.mapa-desenho .mm-green circle { fill: #7BB17A; }
.mapa-desenho .mm-green.forte circle { fill: #2E7D32; stroke: #fff; }
.mapa-desenho .mm-tee circle { fill: #fff; }
.mapa-desenho .mm text { font: 700 12px system-ui, sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.6); stroke-width: 3px; }
.mapa-desenho .ml-green { stroke: rgba(255,255,255,.8); stroke-width: 2; stroke-dasharray: 3 3; }
.mapa-desenho .ml-medida { stroke: #F2C14E; stroke-width: 2.5; }
.mapa-desenho .md { font: 700 13px system-ui, sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.7); stroke-width: 3px; }
.mapa-norte { position: absolute; right: 10px; top: 8px; font: 700 12px system-ui, sans-serif; color: #fff; background: rgba(0,0,0,.45); border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; }
.mapa-atribuicao { position: absolute; left: 8px; bottom: 6px; font: 10px system-ui, sans-serif; color: rgba(255,255,255,.75); text-shadow: 0 0 3px #000; }
.mapa-zoom { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; }
.mapa-zoom button { width: 32px; height: 32px; padding: 0; font-size: 18px; line-height: 1; background: rgba(255,255,255,.92); border: 0; border-radius: 6px; cursor: pointer; }
.mapa-mesa { display: grid; gap: 16px; align-items: start; }
@media (max-width: 900px) { .mapa-mesa { grid-template-columns: 1fr !important; } }
.abas-buracos { display: flex; flex-wrap: wrap; gap: 4px; }
.abas-buracos button { min-width: 34px; height: 30px; padding: 0 8px; border: 1px solid var(--borda, #d9ded9); background: #fff; border-radius: 6px; font-weight: 600; cursor: pointer; }
.abas-buracos button.feito { background: #e6f2e6; border-color: #9cc59c; }
.abas-buracos button.ativa { background: #0F3D2E; color: #fff; border-color: #0F3D2E; }
.pontos-mesa .ponto-mesa { display: grid; height: auto; line-height: 1.3; grid-template-columns: 1fr auto; align-items: center; width: 100%; text-align: left; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--borda, #d9ded9); background: #fff; border-radius: 8px; cursor: pointer; }
.pontos-mesa .ponto-mesa b { grid-column: 1; }
.pontos-mesa .ponto-mesa span.fraco { grid-column: 1; font-size: 12px; }
.pontos-mesa .ponto-mesa .apagar { grid-column: 2; grid-row: 1 / span 2; font-size: 18px; color: #8a3a2a; padding: 0 4px; }
.pontos-mesa .ponto-mesa.feito { border-color: #9cc59c; }
.pontos-mesa .ponto-mesa.ativo { border-color: #0F3D2E; box-shadow: 0 0 0 2px rgba(15,61,46,.25); }
.pontos-mesa .medida { margin: 10px 0 0; font-size: 13px; }
.relatorio-acumulado { display: none; }