/* Identidade compartilhada — APALU Centro Equestre / Centro Hípico Diamante */
:root{
  --bg:#f5efe1;
  --surface:#fffdf8;
  --surface-2:#ede2cc;
  --ink:#2a120d;
  --ink-dim:#6e5648;
  --accent:#6d1e17;
  --accent-2:#4f120c;
  --gold:#a06a2a;
  --rule:#ddcfb2;
  --ok-bg:#dfe9d8;
  --ok-fg:#315523;
  --warn-bg:#f6e2c8;
  --warn-fg:#80500d;
  --mock-bg:#f6e2c8;
  --mock-fg:#80500d;
  --danger-bg:#f6dcd6;
  --danger-fg:#8a2a1c;
  --shadow:0 2px 3px rgba(42,18,13,.05),0 14px 36px rgba(42,18,13,.07);
  --header-bg:#2e0000;
  --header-ink:#fffaf0;
  --header-muted:#e9cdb4;
  --medal-ouro:#a06a2a;
  --medal-prata:#8a8272;
  --medal-bronze:#a85d33;
  --medal-ouro-bg:rgba(160,106,42,.14);
  --medal-prata-bg:rgba(138,130,114,.16);
  --medal-bronze-bg:rgba(168,93,51,.14);
  --info-bg:#dce7f6;
  --info-fg:#1f4a86;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#241008;
    --surface:#32150e;
    --surface-2:#401b11;
    --ink:#f3ecdc;
    --ink-dim:#cbb99f;
    --accent:#e1b061;
    --accent-2:#f0c987;
    --gold:#e1b061;
    --rule:rgba(241,236,221,.16);
    --ok-bg:rgba(140,190,110,.16);
    --ok-fg:#c1dfa9;
    --warn-bg:rgba(230,160,60,.18);
    --warn-fg:#f0c987;
    --mock-bg:rgba(230,160,60,.18);
    --mock-fg:#f0c987;
    --danger-bg:rgba(210,90,70,.2);
    --danger-fg:#f0a794;
    --shadow:0 2px 4px rgba(0,0,0,.25),0 16px 40px rgba(0,0,0,.3);
    --header-bg:#2e0000;
    --header-ink:#fffaf0;
    --header-muted:#e9cdb4;
    --medal-ouro:#e1b061;
    --medal-prata:#c9c2b4;
    --medal-bronze:#d98f5a;
    --medal-ouro-bg:rgba(225,176,97,.16);
    --medal-prata-bg:rgba(201,194,180,.14);
    --medal-bronze-bg:rgba(217,143,90,.16);
    --info-bg:rgba(90,140,220,.18);
    --info-fg:#a9c8f5;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
html,body{margin:0}
body{
  min-width:320px;
  background:var(--bg);
  color:var(--ink);
  font-family:'Public Sans',ui-sans-serif,system-ui,sans-serif;
  font-size:1rem;
  line-height:1.6;
}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid color-mix(in srgb,var(--gold) 65%,transparent);
  outline-offset:3px;
}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:60;background:var(--surface);padding:10px 14px}
.skip-link:focus{left:10px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px 72px}
/* Páginas de Resultados (2026 e 2025) — item 4 do smoke, 2026-09-15:
   container mais largo, só aqui, pra tabela oficial/histórica de 10 colunas
   (`.result-table--detalhado`, min-width:1220px) caber sem rolar de lado em
   telas grandes o bastante, condição necessária pro cabeçalho fixo (ver
   tabela-sticky.js) chegar a ativar de verdade. Confirmado empiricamente que
   sem isso a tabela NUNCA cabe (mesmo em monitores ultrawide), porque o
   `.wrap` padrão (1080px, usado no resto do site) é sempre mais estreito que
   a tabela — o cabeçalho fixo ficaria implementado mas nunca visível. Não
   afeta nenhuma outra página do site (que continua com a largura de leitura
   de 1080px de sempre).
*/
.wrap--resultados{max-width:1320px}
.content-narrow{
  max-width:772px;
  margin-left:auto;
  margin-right:auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  width:calc(100% + 48px);
  max-width:1080px;
  margin:0 -24px 17px;
  padding:8px 0 0;
  display:grid;
  grid-template-columns:minmax(110px,.8fr) minmax(0,1.5fr) minmax(110px,.8fr);
  grid-template-rows:auto auto;
  align-items:center;
  color:var(--header-ink);
  isolation:isolate;
}
.wrap--resultados .site-header{margin-left:auto;margin-right:auto}
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--header-bg);
  border-bottom:1px solid rgba(255,250,240,.22);
  box-shadow:0 0 0 100vmax var(--header-bg),0 8px 24px rgba(42,18,13,.18);
  clip-path:inset(0 -100vmax 0);
}
.header-branding{
  display:contents;
}
.site-header .brand{
  grid-column:2;
  grid-row:1;
  align-self:center;
  min-width:0;
  padding:0 8px;
  text-align:center;
}
.site-header .brand .kicker,.eyebrow{
  display:block;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.75rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--gold);
}
.site-header .brand .kicker{color:var(--header-muted)}
.site-header h1{
  font-family:'Zilla Slab',ui-serif,Georgia,serif;
  font-weight:700;
  font-size:clamp(1.2rem,3vw,1.5rem);
  line-height:1.08;
  margin:2px 0 0;
  text-wrap:balance;
  white-space:nowrap;
}
.site-header h1 a{color:inherit;text-decoration:none}
.organization-mark{
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
  grid-row:1 / span 2;
  min-height:0;
  padding:0;
  color:var(--header-ink);
}
.organization-mark--apalu{grid-column:1;justify-content:flex-start}
.organization-mark--diamante{grid-column:3;justify-content:flex-end}
.brand-logo-frame{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
}
.brand-logo-frame--apalu{
  width:100px;
  height:55px;
}
.brand-logo{
  display:block;
  object-fit:contain;
}
.brand-logo--apalu{
  /* Reduzido em mais 15% em relação ao tamanho vigente, sem trocar o asset. */
  width:78px;
  max-width:none;
  height:47px;
  object-fit:contain;
}
.brand-logo--diamante{
  /* 2026-09-15 (correção pós-revisão nº5): usa direto o asset já branco
     (`centro-hipico-diamante-logo-branco.png`), sem filtro CSS — o filtro
     antigo (`grayscale(1) brightness(0) invert(1)`) só valia no HTML e nunca
     alcançava o logo embutido no PDF (canvas/imagem, sem CSS), que continuava
     azul/colorido no cabeçalho escuro. O cabeçalho é sempre a mesma faixa
     vinho escura (`--header-bg`, igual em claro e escuro), então o logo
     precisa ser branco sempre, sem depender de tema.
  */
  width:72px;
  height:57px;
  transform:translateY(6px);
}
nav.site-nav{
  grid-column:2;
  grid-row:2;
  min-width:0;
  margin-top:7px;
  padding:3px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  border-top:1px solid rgba(255,250,240,.16);
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.7rem;
  letter-spacing:.025em;
  text-transform:uppercase;
  white-space:nowrap;
}
nav.site-nav::-webkit-scrollbar{display:none}
nav.site-nav a{
  min-height:28px;
  display:inline-flex;
  align-items:center;
  color:rgba(255,250,240,.76);
  text-decoration:none;
  padding:2px 9px 3px;
  border-bottom:3px solid transparent;
}
nav.site-nav a:hover,nav.site-nav a.ativo{color:var(--header-ink);border-bottom-color:var(--gold)}

h2,h3{font-family:'Zilla Slab',ui-serif,Georgia,serif;line-height:1.2;text-wrap:balance}
h2{font-size:clamp(1.35rem,3vw,1.8rem);margin:0 0 10px}
h3{font-size:1.1rem;margin:0 0 8px}
p{margin-top:0}
.page-intro{max-width:68ch;color:var(--ink-dim);font-size:1.05rem;margin:0 0 28px}
.page-intro strong{color:var(--ink)}

/* Seletor de edição — existe só nas páginas de Resultados (única seção que dá
   acesso a edições anteriores); as demais seções do site representam sempre a
   edição vigente e não precisam de troca de ano. */
.edicao-resultados{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 24px;
}
.edicao-resultados label{
  font:600 .74rem 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.edicao-resultados select{
  font:600 .95rem 'Public Sans',ui-sans-serif,system-ui,sans-serif;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:8px;
  padding:8px 12px;
  min-height:40px;
  max-width:100%;
  cursor:pointer;
}
.edicao-resultados select:hover{border-color:var(--gold)}

section.card,.card{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:14px;
  padding:22px 24px;
  box-shadow:var(--shadow);
}
.tag,.status{
  display:inline-flex;
  align-items:center;
  width:max-content;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.72rem;
  letter-spacing:.04em;
  line-height:1.4;
  text-transform:uppercase;
  border-radius:999px;
  padding:3px 10px;
  margin:2px 6px 2px 0;
  background:var(--surface-2);
  color:var(--accent);
}
.tag.ok,.status.ok{background:var(--ok-bg);color:var(--ok-fg)}
.tag.warn,.status.warn{background:var(--warn-bg);color:var(--warn-fg)}
.tag.mock,.status.mock{background:var(--mock-bg);color:var(--mock-fg)}
.tag.sat,.status.sat{background:var(--danger-bg);color:var(--danger-fg)}

.btn{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:var(--accent);
  color:var(--bg);
  text-decoration:none;
  font-family:inherit;
  font-weight:700;
  font-size:.92rem;
  padding:10px 17px;
  border-radius:9px;
  border:1px solid var(--accent);
  cursor:pointer;
}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.secondary{background:transparent;color:var(--accent)}
.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

.aviso-mock,.notice{
  background:var(--mock-bg);
  color:var(--mock-fg);
  border:1px solid color-mix(in srgb,var(--mock-fg) 25%,transparent);
  border-radius:10px;
  padding:13px 16px;
  font-size:.9rem;
  margin-bottom:24px;
  display:flex;
  gap:10px;
  align-items:baseline;
}
.aviso-mock strong,.notice strong{
  flex:none;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.05em;
}
.empty-state{text-align:center;padding:clamp(32px,8vw,64px) 22px}
.empty-state p{max-width:52ch;margin:0 auto;color:var(--ink-dim)}
.loading{color:var(--ink-dim)}

.document-list{display:grid;gap:12px;margin:20px 0 0}
.document-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px 20px;
  align-items:center;
  padding:18px 20px;
  border:1px solid var(--rule);
  border-radius:12px;
  background:var(--surface);
}
.document-item p{margin:2px 0 0;color:var(--ink-dim);font-size:.9rem}
.document-actions{display:flex;flex-wrap:wrap;gap:8px}

.filters,.tablist{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.tab-button{
  min-height:44px;
  border:1px solid var(--rule);
  border-radius:999px;
  background:var(--surface);
  color:var(--ink-dim);
  padding:9px 15px;
  font:600 .9rem 'Public Sans',ui-sans-serif,system-ui,sans-serif;
  cursor:pointer;
}
.tab-button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg)}

.result-table{width:100%;min-width:900px;border-collapse:collapse;table-layout:fixed;font-size:.92rem}
/* Resultados 2025 (8 colunas, 2026-09-15 — padronização "Conj."/"Animal":
   Posição, Conj., Categoria, Animal, Cavaleiro, Marcha, Função, Total). */
.result-table th:nth-child(1),.result-table td:nth-child(1){width:7%}
.result-table th:nth-child(2),.result-table td:nth-child(2){width:6%}
.result-table th:nth-child(3),.result-table td:nth-child(3){width:14%}
.result-table th:nth-child(4),.result-table td:nth-child(4){width:22%}
.result-table th:nth-child(5),.result-table td:nth-child(5){width:20%}
.result-table th:nth-child(6),.result-table td:nth-child(6){width:11%}
.result-table th:nth-child(7),.result-table td:nth-child(7){width:11%}
.result-table th:nth-child(8),.result-table td:nth-child(8){width:9%}
/* Resultados 2026 (10 colunas, item 1/2 do smoke de 2026-09-15 — Conj. →
   Categ. → Subcateg. → Animal → Cavaleiro, e as 3 colunas de Tempo/
   Penalidades/Temperamento consolidadas numa só "Tempo / Penal. / N. temp."):
   Posição, Conj., Categ., Subcateg., Animal, Cavaleiro, Pontuação Marcha,
   Tempo/Penal./N. temp., Pontuação Funcional, Pontuação Total — larguras
   próprias, escopadas por `.result-table--detalhado` pra não afetar a tabela
   de 8 colunas de 2025/resultados.html, que continua usando só
   `.result-table`. Precisam vir depois das regras de 8 colunas acima (mesma
   especificidade — a ordem no arquivo decide) pra vencer nas células que têm
   as duas classes. */
.result-table--detalhado{min-width:1220px}
.result-table--detalhado th:nth-child(1),.result-table--detalhado td:nth-child(1){width:5%}
.result-table--detalhado th:nth-child(2),.result-table--detalhado td:nth-child(2){width:5%}
.result-table--detalhado th:nth-child(3),.result-table--detalhado td:nth-child(3){width:7%}
.result-table--detalhado th:nth-child(4),.result-table--detalhado td:nth-child(4){width:7%}
.result-table--detalhado th:nth-child(5),.result-table--detalhado td:nth-child(5){width:20%}
.result-table--detalhado th:nth-child(6),.result-table--detalhado td:nth-child(6){width:18%}
.result-table--detalhado th:nth-child(7),.result-table--detalhado td:nth-child(7){width:8%}
.result-table--detalhado th:nth-child(8),.result-table--detalhado td:nth-child(8){width:10%}
.result-table--detalhado th:nth-child(9),.result-table--detalhado td:nth-child(9){width:10%}
.result-table--detalhado th:nth-child(10),.result-table--detalhado td:nth-child(10){width:10%}
/* Preliminar (2026-09-15): o número de colunas varia (com/sem subcategoria,
   com/sem colocação final) — em vez de um terceiro conjunto fixo de
   larguras por posição de coluna (que quebraria a cada variação), reseta
   para automático e deixa cada variante se ajustar ao próprio conteúdo. */
.result-table--preliminar{min-width:920px}
.result-table--preliminar th:nth-child(n),.result-table--preliminar td:nth-child(n){width:auto}
.result-table th,.result-table td{padding:11px 12px;border-bottom:1px solid var(--rule);text-align:left}
/* Valores numéricos alinhados à direita com recuo interno de 3px — nunca em
   textos como animal, cavaleiro ou categoria (essas células não usam .num).
   Seletor deliberadamente `th.num`/`td.num` (classe + elemento, em vez do
   descendente genérico `.result-table .num`) para vencer a regra acima
   ("th,td{text-align:left}", classe + elemento também) por especificidade de
   verdade — 2 componentes de classe contra 1 — e não por estar depois dela no
   arquivo. Continuaria funcionando mesmo se essa regra viesse ANTES da regra
   genérica; a ordem aqui embaixo é só estilo, não é o que garante o resultado
   (ver teste "alinhamento numérico não depende da ordem das regras CSS"). */
.result-table td.num{text-align:right;padding-right:12px}
.result-table td.posicao{text-align:left;padding-left:12px;padding-right:6px}
/* Item 1 do smoke (2026-09-15): cabeçalhos de coluna numérica ficam
   centralizados a partir de "Coloc. bateria" (preliminar) — e, nas tabelas
   oficiais, todo cabeçalho de resultado numérico — mas o VALOR continua
   alinhado à direita (regra acima, `td.num`) — só o rótulo no `<th>` muda.
   "Conj." nunca usa `.num` (ver `.conj` abaixo): fica com o alinhamento à
   esquerda padrão do cabeçalho da tabela, tanto no rótulo quanto no valor. */
.result-table th.num{text-align:center}
/* SAT/WO (2026-09-15, ajustes de smoke): é um STATUS, não um número — nunca
   fica com o mesmo recuo à direita de 3px das colunas numéricas acima.
   Centralizado, com espaço lateral confortável (a coluna tende a ser
   estreita, então o padding evita que o texto encoste na borda/coluna
   vizinha). Classe própria (`.satwo`, não `.status`) porque `.status` já
   existe como variante de `.tag` (pílula colorida) noutro lugar do site —
   reaproveitar o nome quebraria aquele componente. */
.result-table th.satwo,.result-table td.satwo{text-align:center;padding-left:14px;padding-right:14px}
.result-table th{
  font:600 .72rem 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-dim);
  background:var(--surface-2);
}
.result-table tbody tr:last-child td{border-bottom:0}
.result-table .posicao{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:700;color:var(--ink-dim)}
.result-table tr.podio-1 .posicao,.result-table tr.podio-2 .posicao,.result-table tr.podio-3 .posicao{color:var(--gold)}
.result-table .animal-nome{font-weight:700}
/* Item 6 do smoke (2026-09-15): etiquetas REAIS de premiação empilhadas
   ACIMA do nome do animal, na mesma célula — nunca uma coluna/linha nova
   (mantém a altura da linha da tabela). `.premiacao-item`/`.icone-premiacao`
   reaproveitados como estão (mesmo componente do card mobile). */
.animal-com-premiacoes{display:block;line-height:1.25}
.animal-premiacoes{display:inline-flex;flex-wrap:wrap;gap:4px;margin:0 5px 3px 0;vertical-align:middle}
/* Coluna "Conj." (2026-09-15, padronização): só o número identificador do
   conjunto — nunca confundir com "Posição"/colocação (conceitos diferentes).
   Estilo discreto e monoespaçado, mesma família da coluna Posição, mas sem o
   peso/cor de destaque do pódio (que continua exclusivo de "Posição"). */
.result-table .conj{font-family:'IBM Plex Mono',ui-monospace,monospace;color:var(--ink-dim)}
/* Etiqueta "Amador" (2026-09-15, ajustes de smoke) — compacta, ao lado do
   nome do cavaleiro, na tabela oficial (desktop) e no card mobile. Usa o
   mesmo componente `.tag` já existente no site (só uma variante de cor
   nova), nunca um elemento novo do zero. */
.cavaleiro-nome{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.tag.amador{background:var(--accent-bg,var(--surface-2));color:var(--accent)}
.result-score{display:block;font-variant-numeric:tabular-nums}
.result-score-valor{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.result-score-valor .tag{margin:0}
.result-detail{display:block;margin-top:3px;color:var(--ink-dim);font-size:.69rem;line-height:1.35;font-weight:400}
.table-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:12px;background:var(--surface)}
/* Cabeçalho fixo da tabela pública durante a rolagem (item 4 do smoke,
   2026-09-15) — só ativado (por JS, ver tabela-sticky.js) quando a tabela já
   cabe sem precisar rolar de lado: `position:sticky` num `<th>` não funciona
   dentro de um `.table-wrap` com `overflow-x:auto` (confirmado com
   Playwright, não só pela especificação — o wrapper vira à força o
   contêiner de referência do sticky, que nunca chega a rolar de verdade).
   `--cabecalho-fixo-topo` é medido em JS porque a altura de `.site-header`
   muda entre larguras de tela. O fundo do `<th>` já é opaco (regra
   `.result-table th{background:var(--surface-2)}`, mais acima neste
   arquivo), então as linhas não aparecem por baixo do cabeçalho fixo durante
   a rolagem. Nunca aplicado
   no card mobile (substitui a tabela abaixo de 640px) nem no PDF (o conceito
   não existe lá). */
.table-wrap--cabecalho-fixo{overflow-x:visible}
.table-wrap--cabecalho-fixo .result-table thead th{
  position:sticky;
  top:var(--cabecalho-fixo-topo,0px);
  z-index:2;
}

/* Cards de resultado para a visualização mobile (≤640px), construídos em JS
   a partir dos mesmos dados/regras da tabela — nunca uma tabela reformatada
   via CSS. O contêiner nasce oculto (display:none) porque só deve aparecer
   dentro do media query lá embaixo, que também esconde `.table-wrap` nesse
   intervalo; assim as regras do componente em si ficam fora do @media (sem
   duplicação) e só o toggle mesa/cards fica lá dentro. */
.resultados-cards-mobile{display:none;gap:12px}
.resultado-card{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:12px;
  padding:9px 11px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.resultado-card-topo{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:6px;
}
/* Item 6 do smoke (2026-09-15): o marcador decorativo de posição/troféu (a
   classe de pódio do card e seu ícone de medalha) foi removido — duplicava a
   premiação real com um "pódio" inventado a partir da posição de categoria.
   No lugar, etiquetas REAIS de premiação (`.premiacao-item`, já existente)
   sobem para dentro deste mesmo bloco, ao lado da categoria — por isso
   `flex-wrap:wrap` (várias etiquetas + categoria podem não caber numa linha
   só em telas estreitas; nunca podem se sobrepor). */
.resultado-card-posicao{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  min-width:0;
  font:700 .92rem 'Zilla Slab',ui-serif,Georgia,serif;
  color:var(--ink-dim);
}
.resultado-card-total{
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:1.15;
}
.resultado-card-total small{
  font:600 .62rem 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.resultado-card-total strong{
  font:700 1.15rem 'Zilla Slab',ui-serif,Georgia,serif;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
/* Colocação comparativa no topo do card: não é uma premiação, mas permanece
   junto do indicador principal do conjunto, sem duplicação abaixo do Total. */
.resultado-card-colocacao{
  font:600 .68rem 'Public Sans',ui-sans-serif,system-ui,sans-serif;
  color:var(--ink-dim);
}
.resultado-card-identificacao{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px 8px;
}
.resultado-card-identificacao > :nth-child(4){grid-column:span 2}
.resultado-card-conjunto,.resultado-card-cavaleiro{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.resultado-card-conjunto small,.resultado-card-cavaleiro small{
  font:600 .64rem 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.resultado-card-conjunto strong,.resultado-card-cavaleiro strong{
  font-weight:700;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.resultado-card-dados{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 10px;
  padding-top:6px;
  border-top:1px solid var(--rule);
}
.resultado-card-dado{min-width:0;display:flex;flex-direction:column;gap:1px}
.resultado-card-dado-tempo{grid-column:2}
.resultado-card-dado-tempo{grid-column:2}
.resultado-card-dado-largo{grid-column:1/-1}
.resultado-card-dado small{
  font:600 .64rem 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.resultado-card-dado .num{
  font-variant-numeric:tabular-nums;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.resultado-card-dado .num .tag{margin:0}
.resultado-card-marcha-detalhe{
  margin:0;
  padding-top:0;
  color:var(--ink-dim);
  font-size:.74rem;
}
.premiacao-item{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:2px 6px 2px 5px;
  border-radius:999px;
  background:var(--surface-2);
  color:var(--accent);
  font:600 .64rem 'Public Sans',ui-sans-serif,system-ui,sans-serif;
  line-height:1.15;
  white-space:nowrap;
}
.premiacao-item .icone-premiacao{display:inline-flex;flex:none;width:10px;height:10px}
.premiacao-item .icone-premiacao svg{display:block;width:100%;height:100%;fill:currentColor}
.premiacao-ouro{background:var(--medal-ouro-bg);color:var(--medal-ouro)}
.premiacao-prata{background:var(--medal-prata-bg);color:var(--medal-prata)}
.premiacao-bronze{background:var(--medal-bronze-bg);color:var(--medal-bronze)}
.publication-meta{color:var(--ink-dim);font-size:.84rem;margin:-4px 0 22px}
/* Compactado em 2026-09-15 (ajustes de smoke): os avisos ocupavam altura
   demais, sobretudo no mobile. Mantém os dois claramente identificáveis
   (fase preliminar/oficial e status de teste são informações distintas e
   independentes — publicações de teste existem nas duas fases), mas com
   padding/gap/fonte menores; o aviso de teste (obrigatório) continua legível
   — só reduz a "gordura" ao redor do texto, nunca o texto em si. */
.test-results-warning{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:0 0 12px;
  padding:8px 12px;
  border:2px solid #b26a09;
  border-radius:10px;
  background:var(--warn-bg);
  color:var(--warn-fg);
  line-height:1.3;
}
.test-results-warning[hidden]{display:none}
.test-results-warning strong{letter-spacing:.02em;font-size:.8rem}
.test-results-warning span{font-size:.78rem}

/* Preliminar (2026-09-15, publicação em duas etapas): mesmo padrão visual do
   aviso de teste acima, mas com o token --info-* (azul) — os dois podem
   aparecer juntos (fase e dadosTeste são independentes). */
.preliminar-aviso{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:0 0 12px;
  padding:8px 12px;
  border:2px solid var(--info-fg);
  border-radius:10px;
  background:var(--info-bg);
  color:var(--info-fg);
  line-height:1.3;
}
.preliminar-aviso[hidden]{display:none}
.preliminar-aviso strong{letter-spacing:.02em;font-size:.8rem}
.preliminar-aviso span{font-size:.78rem}

/* Busca nos resultados (2026-09-15) — número, animal ou cavaleiro, combinada
   com o filtro de categoria; usada nos Resultados de 2026 (preliminar e
   oficial) e de 2025 (histórico). */
.busca-resultados{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:420px;
  margin:4px 0 6px;
}
.busca-resultados label{font-size:.82rem;color:var(--ink-dim)}
.busca-resultados input{
  padding:10px 12px;
  border:1px solid var(--rule);
  border-radius:10px;
  background:var(--surface);
  color:var(--ink);
  font:500 .95rem 'Public Sans',ui-sans-serif,system-ui,sans-serif;
}
.busca-resultados input:focus-visible{outline:3px solid color-mix(in srgb,var(--gold) 65%,transparent)}
.busca-info{margin:0 0 14px;min-height:1.2em}

/* Controles da lista única oficial (2026-09-15, ajustes de smoke): ordenar
   por Pontuação Geral/Funcional e "somente cavaleiros amadores". Só
   aparecem na fase oficial (escondidos via [hidden] na preliminar) e nunca
   renumeram `posicaoOficial` — só decidem a ordem de exibição da lista. */
.resultados-controles-oficial{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  margin:2px 0 16px;
}
.resultados-controles-oficial[hidden]{display:none}
.campo-ordenar{display:flex;align-items:center;gap:8px}
.campo-ordenar label{font-size:.82rem;color:var(--ink-dim)}
.campo-ordenar select{
  padding:8px 10px;
  border:1px solid var(--rule);
  border-radius:10px;
  background:var(--surface);
  color:var(--ink);
  font:500 .88rem 'Public Sans',ui-sans-serif,system-ui,sans-serif;
}
.checkbox-inline{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;cursor:pointer}
.checkbox-inline input{width:17px;height:17px;accent-color:var(--accent)}

footer.site-footer{
  margin-top:56px;
  padding-top:22px;
  border-top:1px solid var(--rule);
  color:var(--ink-dim);
  font-size:.88rem;
}
.parceiros-institucionais{display:grid;gap:18px;color:var(--ink)}
.parceiros-institucionais__grupos{display:grid;grid-template-columns:1.1fr 1.25fr .9fr;gap:0}
.parceiros-institucionais__grupo{min-width:0;padding:0 28px}
.parceiros-institucionais__grupo:first-child{padding-left:0}
.parceiros-institucionais__grupo + .parceiros-institucionais__grupo{border-left:1px solid var(--rule)}
.parceiros-institucionais__titulo{margin:0 0 12px;color:var(--accent);font:700 .7rem 'Public Sans',ui-sans-serif,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-align:center}
.parceiros-institucionais__marcas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-evenly;width:100%;row-gap:16px}
.parceiro-marca{margin:0;min-width:0;display:grid;gap:5px;justify-items:center}
.parceiro-marca img{display:block;max-width:100%;width:auto;object-fit:contain}
.parceiro-marca figcaption{color:var(--ink-dim);font-size:.72rem;line-height:1.2}
/* "Quadrado invisível" padrão: caixa 80x80 (desktop) pra todos, sem nunca
   cortar -- a arte só encolhe pra caber (object-fit:contain). Diamante teve
   a margem vazia do arquivo original aparada (tinha 39% de espaço
   transparente embutido -- por isso parecia menor que o APALU mesmo na
   mesma caixa); já aparado, seu canvas deixou de ser quadrado (~1.5, igual
   ao APALU) e por isso saiu do grupo -15% pro grupo 100%. Só Horse's Ville
   continua com canvas realmente quadrado (861x865) e leva o -15%.
   Riber e Horse's Ville, a pedido, usam uma caixa 15% maior (92x92) que os
   demais -- ficam maiores no grupo, mas continuam sem cortar nada. */
.parceiro-marca--diamante,.parceiro-marca--apalu,.parceiro-marca--apoio{
  width:80px;height:80px;display:flex;align-items:center;justify-content:center;
}
.parceiro-marca--riber,.parceiro-marca--horses{
  width:92px;height:92px;display:flex;align-items:center;justify-content:center;
}
.parceiro-marca--diamante img,.parceiro-marca--apalu img,.parceiro-marca--riber img,.parceiro-marca--horses img,.parceiro-marca--apoio img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
}
.parceiro-marca--horses img{max-width:85%;max-height:85%}
.parceiro-marca--patrocinador{overflow:hidden}
.parceiro-marca a{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
html.modo-treinamento .parceiros-institucionais{display:none}

@media (max-width:860px){
  .site-header{
    width:auto;
    left:auto;
    transform:none;
    display:block;
    margin-bottom:22px;
    padding:6px 0 0;
  }
  .wrap--resultados .site-header{margin-left:0;margin-right:0}
  .header-branding{
    display:grid;
    grid-template-columns:minmax(110px,.7fr) minmax(230px,1.5fr) minmax(125px,.7fr);
    align-items:center;
    gap:12px;
  }
  /* Colunas continuam vindo da regra base (grid-column:1/2/3 em
     organization-mark--apalu/--diamante e .site-header .brand, lá em cima) --
     não redeclarar aqui. A versão anterior usava grid-template-areas +
     "grid-area:X;grid-column:auto" (e, só no .brand, também
     "grid-row:auto"): isso zerava de volta a posição que o próprio
     grid-area tinha acabado de dar (mesma regra, declaração depois
     sobrescreve), então os três itens caíam no auto-placement -- e o
     .brand (título) e o organization-mark--diamante (logo) trocavam de
     lugar (Diamante ia pro meio, título ia pra coluna estreita da
     direita), estourando a largura com o título sem quebra de linha.
     A regra base já é numérica e correta; só faltava não sobrescrevê-la. */
  .site-header .brand{padding:0 8px 13px}
  .organization-mark{grid-row:auto;min-height:78px;padding-bottom:8px}
  nav.site-nav{grid-column:auto;grid-row:auto;justify-content:flex-start;overflow-x:auto;padding:0 6px;scrollbar-width:none}
  nav.site-nav a{padding-left:9px;padding-right:9px}
  .parceiros-institucionais__grupo{padding:0 18px}
}

@media (max-width:640px){
  .wrap{padding:0 16px 52px}
  .site-header{
    /* Bleed tem que ser igual ao padding do .wrap nesta faixa (16px);
       antes só o margin-bottom era redefinido aqui, então o cabeçalho
       herdava margin-left/right:-24px do desktop (regra base) e ficava
       24px mais largo que a viewport de cada lado -- exatamente os 8px
       de excesso que empurravam o logo Diamante/título pra fora da tela
       (overflow horizontal em Início/Informações/Catálogo/Resultados). */
    width:auto;
    max-width:none;
    margin:0 -16px 22px;
    padding:6px 0 0;
  }
  .header-branding{
    grid-template-columns:56px minmax(0,1fr) 54px;
    gap:4px;
  }
  .organization-mark{min-height:46px;padding-bottom:4px}
  .brand-logo-frame--apalu{width:56px;height:38px}
  .brand-logo--apalu{width:46px;height:32px}
  .brand-logo--diamante{width:48px;height:42px;transform:translateY(4px)}
  .site-header .brand{min-width:0;padding:0 2px 6px;border-top:0}
  .site-header .brand .kicker{font-size:clamp(.45rem,1.8vw,.56rem);letter-spacing:.04em;white-space:nowrap}
  .site-header h1{font-size:clamp(.72rem,3.5vw,1.05rem)}
  nav.site-nav{margin:0;padding:0 8px;overflow-x:auto;justify-content:space-between}
  section.card,.card{padding:18px}
  .notice,.aviso-mock{align-items:flex-start;flex-direction:column;gap:3px}
  .test-results-warning,.preliminar-aviso{padding:7px 10px;margin:0 0 10px}
  .test-results-warning strong,.preliminar-aviso strong{font-size:.74rem}
  .test-results-warning span,.preliminar-aviso span{font-size:.72rem}
  .resultados-controles-oficial{gap:10px 16px;margin:2px 0 12px}
  .document-item{grid-template-columns:1fr}
  .document-actions .btn{width:100%}
  .tablist{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .tab-button{flex:none}
  .parceiros-institucionais{gap:8px;margin-top:20px;padding:10px 12px 12px;background:#f5efe1;color:#2a120d;border-top:1px solid #ddcfb2;border-bottom:1px solid #ddcfb2}
  .parceiros-institucionais__grupos{grid-template-columns:1fr 1fr 1fr;gap:0}
  .parceiros-institucionais__grupo,.parceiros-institucionais__grupo:first-child{padding:0 3px}
  .parceiros-institucionais__grupo:first-child{padding-left:0}
  .parceiros-institucionais__grupo:last-child{padding-right:0}
  .parceiros-institucionais__grupo + .parceiros-institucionais__grupo{padding-top:0;border-top:0;border-left:1px solid #ddcfb2}
  .parceiros-institucionais__titulo{margin-bottom:5px;font-size:.46rem;letter-spacing:.02em;color:#6d1e17;overflow-wrap:break-word;word-break:break-word}
  .parceiros-institucionais__marcas{gap:6px 10px}
  .parceiro-marca figcaption{margin-top:2px;font-size:.62rem;color:#6e5648}
  .parceiro-marca--diamante,.parceiro-marca--apalu,.parceiro-marca--apoio{width:56px;height:56px}
  .parceiro-marca--riber,.parceiro-marca--horses{width:65px;height:65px}

  .result-table,.result-table tbody,.result-table tr,.result-table td{display:block;width:100%}
  .result-table{min-width:0;table-layout:auto}
  .result-table thead{display:none}
  .result-table tr{padding:14px 16px;border-bottom:1px solid var(--rule)}
  .result-table tr:last-child{border-bottom:0}
  /* As larguras fixas em % de cada coluna (definidas acima para a tabela do
     desktop) não têm media query própria e continuam valendo aqui por serem
     mais específicas (th/td:nth-child) que a regra width:100% logo acima —
     sem este reset, cada célula fica presa à largura estreita da coluna
     original (ex.: 27% para "Conjunto"), o rótulo e o valor não cabem lado a
     lado e o texto se sobrepõe/quebra palavra a palavra. */
  .result-table th:nth-child(1),.result-table td:nth-child(1),
  .result-table th:nth-child(2),.result-table td:nth-child(2),
  .result-table th:nth-child(3),.result-table td:nth-child(3),
  .result-table th:nth-child(4),.result-table td:nth-child(4),
  .result-table th:nth-child(5),.result-table td:nth-child(5),
  .result-table th:nth-child(6),.result-table td:nth-child(6),
  .result-table th:nth-child(7),.result-table td:nth-child(7),
  .result-table th:nth-child(8),.result-table td:nth-child(8),
  .result-table th:nth-child(9),.result-table td:nth-child(9),
  .result-table th:nth-child(10),.result-table td:nth-child(10),
  .result-table th:nth-child(11),.result-table td:nth-child(11){width:auto}
  .result-table td{
    display:grid;
    grid-template-columns:minmax(90px,.7fr) 1fr;
    gap:12px;
    padding:5px 0;
    border:0;
    text-align:right;
  }
  .result-table td::before{
    content:attr(data-label);
    text-align:left;
    color:var(--ink-dim);
    font:600 .7rem 'IBM Plex Mono',ui-monospace,monospace;
    letter-spacing:.035em;
    text-transform:uppercase;
    overflow-wrap:break-word;
  }
  .result-table td.animal,.result-table td.categoria,.result-table td.cavaleiro{text-align:left}
  .table-wrap{overflow:visible}

  /* A partir daqui, os cards construídos em JS substituem a tabela nesta
     largura — as regras acima (tabela → pseudo-card via CSS) ficam inertes
     porque `.table-wrap` desaparece, mas continuam no arquivo como reforço
     caso os cards não cheguem a ser montados (ex.: JS desabilitado). */
  .table-wrap{display:none}
  .resultados-cards-mobile{display:grid}
}

@media (max-width:360px){
  .resultado-card-identificacao{gap:4px 6px}
  .resultado-card-conjunto small,.resultado-card-cavaleiro small{font-size:.58rem}
  .resultado-card-conjunto strong,.resultado-card-cavaleiro strong{font-size:.88rem}
}

@media (max-width:540px){
  nav.site-nav{
    /* Não redeclarar margin/padding/overflow aqui: a regra de
       max-width:640px já cuida disso (margin:0;padding:0 8px;
       overflow-x:auto) de um jeito que bate com o bleed do
       .site-header. Reintroduzir margin:0 -12px + overflow:visible
       nessa faixa (<=540px) tirava exatamente esses 12px de volta e
       reabria o overflow horizontal só em telas de 320-360px. */
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:0;
    font-size:clamp(.54rem,2.15vw,.61rem);
    letter-spacing:-.02em;
  }
  nav.site-nav a{
    flex:1 0 33.333%;
    min-width:0;
    justify-content:center;
    min-height:38px;
    padding:6px clamp(1px,.8vw,4px) 8px;
    line-height:1;
    text-align:center;
  }
  .edicao-resultados{margin:0 0 20px}
  .edicao-resultados select{flex:1 1 auto}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}