/* =========================================================================
   MURAL ONLINE — CKC 2026 · SAN MARINO, PAULÍNIA
   Gerado a partir de /_base/css/custom.css.tpl. NAO EDITE ESTE ARQUIVO NO
   SERVIDOR: edite o template e gere de novo, senao a correcao entra em um
   mural so. A paleta deste campeonato esta no bloco :root abaixo.

   Carregado DEPOIS de bootstrap.css / style_dir.css / site.css / responsive.css
   — que sao do sistema, nao deste mural, e trazem regras de hover e de foco
   que precisam ser neutralizadas aqui.

   PALETA DESTE MURAL (medida, nao escolhida no olho)
   branco sobre #2E7373 (cabecalho da tabela)           5.50:1
   #2E7373 sobre branco (texto da marca)                5.50:1
   tinta sobre #EAF3F3 (hover da linha)                 16.74:1
   #8A4A10 sobre a faixa de descarte #FFE9CF            5.81:1
   branco sobre a faixa do topo #173C3C                 12.01:1
   altura do logotipo na faixa: 38px                   
   anel de foco #84B4B4 na faixa do topo                5.25:1
   link do rodape #8FD3D3 sobre #1C1C1C                 10.08:1

   REGRAS QUE NAO PODEM SER QUEBRADAS
   1. Nunca definir "background" em .tab-score td — o PHP marca o descarte com
      #FFE9CF (e os grupos de final, se um dia forem ligados) pelo atributo
      bgcolor, e atributo apresentacional PERDE para qualquer regra CSS.
   2. O nome do piloto vem com align="left"; por isso existe a regra
      .tab-score td[align="left"]{ text-align:left }.
   3. O zebrado e :nth-child(even) td:not([bgcolor]). O :not e obrigatorio:
      regra de autor VENCE o atributo bgcolor, entao sem ele metade das celulas
      de descarte era repintada de cinza.
   4. Todo par background+color usa valor literal antes do var(), para o mural
      nao ficar branco-no-branco em navegador antigo de celular.
   5. Foco: tres regras por elemento (:focus / :focus:not(:focus-visible) /
      :focus-visible), em blocos SEPARADOS. Ver o comentario junto das abas.
   ========================================================================= */

:root{
    --c-ink:         #1C1C1C;   /* grafite — cabecalho das tabelas e rodape */
    --c-ink-soft:    #3A3A3A;
    --c-muted:       #5A5A5A;
    --c-page:        #ECECEC;   /* fundo de pagina */
    --c-surface:     #FFFFFF;
    --c-line:        #D4D4D4;
    --c-line-soft:   #ECECEC;
    --c-zebra:       #F7F7F7;   /* listra da tabela */

    /* --------------------------------------------------------------------
       PALETA DO CAMPEONATO
       Estes seis valores sao a UNICA coisa que muda de um mural para o outro.
       Foram medidos contra os pares reais da tela (ver o cabecalho acima).
       -------------------------------------------------------------------- */
    --c-brand:       #3E9494;        /* cor da marca, do logotipo */
    --c-brand-solid: #2E7373;  /* preenchimento — branco em cima >= 4,5:1 */
    --c-brand-dk:    #2E7373;     /* texto da marca sobre branco */
    --c-brand-soft:  #EAF3F3;   /* fundo do hover da linha */
    --c-brand-pun:   #8A4A10;    /* punicao sobre faixa clara >= 4,5:1 */

    --c-topbar:      #173C3C;    /* faixa do topo */
    --c-logo-h:      38px;       /* altura do logotipo na faixa do topo */
    /* linha embaixo da faixa do topo: normalmente a cor da marca, mas quando a
       faixa JA e da cor da marca (Copinha KSC) ela precisa ser escura, senao
       desaparece */
    --c-topbar-line: #84B4B4;

    /* Largura da coluna POS. E a MESMA medida usada como "left" da coluna
       PILOTO fixa: se as duas divergirem, o PILOTO desloca e cobre a primeira
       coluna de pontuacao (medido: POS tinha 38px e o left era 56px, e o nome
       cobria 17px da coluna E1/TA). Uma variavel para as duas. */
    --c-pos-w:       56px;

    --c-radius:      6px;
    --c-shadow:      0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.07);
}

/* ---------- base ---------- */
/* A pagina e curta (a home tem meia tela de conteudo), entao o rodape parava no
   meio do monitor com a faixa cinza continuando embaixo dele, como se a pagina
   tivesse acabado antes. Com a coluna flex e o min-height, o conteudo empurra o
   rodape para o fim da janela quando a pagina e curta, e ele continua no fim do
   conteudo quando a pagina e longa. */
html{ min-height: 100%; }
body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #ECECEC !important;
    background-color: var(--c-page) !important;
    color: #111111;
    color: var(--c-ink);
    font-family: 'Lato', 'Montserrat', Arial, sans-serif;
    font-size: 15px;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}
body > .mural-topbar{ flex: 0 0 auto; }
body > section.secondary-page{ flex: 1 0 auto; }
body > .mural-rodape{ flex: 0 0 auto; }
.general{ background-color: transparent !important; }

/* FAIXA DO TOPO
   Escura na cor do campeonato, com o LOGOTIPO e mais nada. Sem placa clara
   atras (o cliente nao gostou do quadro branco) e sem o nome repetido em
   texto — ele ja aparece logo abaixo, no cabecalho da tela.

   O logotipo e um <img>, nao um background: as sete marcas vao de 1,13 a 2,98
   de proporcao, e so assim a largura acompanha a altura sem deformar nenhuma.
   A altura vem de --c-logo-h, calibrada por marca para que todas tenham o
   mesmo PESO na faixa: uma marca quadrada precisa de mais altura que uma
   marca larga para parecer do mesmo tamanho.

   Cada mural usa a versao da marca para fundo escuro (img/logo-topo.png).
   Onde o material oficial so tinha a versao monocromatica, a versao branca foi
   gerada trocando o RGB e preservando o alfa — procedimento normal de marca
   monocromatica.

   E markup de verdade (.mural-topbar) porque o logotipo leva para a pagina do
   campeonato no site. Nao aparece em ?externo=1 nem em ?simples=1. */
.mural-topbar{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 74px;
    padding: 0 24px;
    background-color: #173C3C;
    background-color: var(--c-topbar);
    border-bottom: 3px solid #84B4B4;
    border-bottom-color: var(--c-topbar-line);
    margin-bottom: 26px;
}
/* so o logotipo e clicavel — nao a faixa inteira */
.mural-topbar-logo{
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0;
    background-color: transparent !important;
    text-decoration: none !important;
}
.mural-topbar-marca{
    display: block;
    height: 38px;
    height: var(--c-logo-h);
    width: auto;
    max-width: 62vw;      /* nunca empurra a largura do documento no celular */
    object-fit: contain;
    background-color: transparent !important;
    border: 0;
}
/* o anel de foco tem que contrastar com a FAIXA */
.mural-topbar-logo:focus{ outline: 2px solid #84B4B4; outline-offset: 4px; }
.mural-topbar-logo:focus:not(:focus-visible){ outline: none !important; box-shadow: none !important; }
.mural-topbar-logo:focus-visible{ outline: 2px solid #84B4B4 !important; outline-offset: 4px; }

.mural-rodape{
    margin-top: 34px;
    padding: 18px 12px;
    background-color: #111111;
    background-color: var(--c-ink);
    color: #C4C4C4;
    font-size: 12.5px;
    letter-spacing: .3px;
    text-align: center;
}
.mural-rodape a{
    color: #8FD3D3 !important;
    background-color: transparent !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mural-rodape a:hover,
.mural-rodape a:focus{ color: #FFFFFF !important; }
.mural-rodape a:focus{ outline: 2px solid #8FD3D3; outline-offset: 3px; }
.mural-rodape a:focus:not(:focus-visible){ outline: none !important; box-shadow: none !important; }
.mural-rodape a:focus-visible{ outline: 2px solid #8FD3D3 !important; outline-offset: 3px; }
.mural-rodape-sep{ margin: 0 6px; color: #8A8A8A; }

/* Alinha o logotipo com a coluna de conteudo.
   Entre 992 e 1199px a .container do bootstrap ainda tem largura fluida com
   15px de padding, e o .col-md-12 dentro dela outros 15px: sao 30px. Sem esta
   regra o logotipo ficava 6px a esquerda da borda dos cartoes. */
@media (min-width: 992px) and (max-width: 1199px){
    .mural-topbar{ padding: 0 30px; }
}
@media (min-width: 1200px){
    /* 585 - 15 do padding da .container - 15 do .col-md-12: sem descontar as
       duas calhas, a placa ficava 30px a esquerda da coluna de conteudo */
    .mural-topbar{ padding: 0 calc(50% - 555px); }
    .mural-topbar-marca{ height: calc(var(--c-logo-h) * 1.08); }
}
/* modo telao de pista (?simples=1): sem cromo nenhum */
body.simples .mural-rodape{ display: none; }
/* no telao nao ha cabecalho acima da legenda, e o margin-top negativo dela
   cortava a primeira linha contra a borda da tela */
body.simples .mural-legenda{ margin-top: 10px; }

section.secondary-page{ padding-bottom: 10px; }

/* ---------- cabecalho do mural (logotipo do campeonato + titulo) ----------
   margin 0 nas laterais para o cabecalho, a legenda, as abas e a tabela
   partirem todos da mesma coluna */
.mural-header{
    margin-left: 0;
    margin-right: 0;
    background-color: #FFFFFF;
    background-color: var(--c-surface);
    border: 1px solid #D4D4D4;
    border-color: var(--c-line);
    border-top: 3px solid #3E9494;
    border-top-color: var(--c-brand);
    border-radius: var(--c-radius);
    box-shadow: var(--c-shadow);
    padding: 18px 10px;
    margin-bottom: 22px;
}
@media (min-width: 992px){
    /* centraliza verticalmente logo + titulo sem mexer no markup.
       flex-wrap deixa a faixa de botoes cair para a linha de baixo. */
    .mural-header{ display: flex; align-items: center; flex-wrap: wrap; }
    .mural-header:before, .mural-header:after{ display: none; }
    .mural-header .logo-torneio, .mural-header .mural-titulo{ float: none; flex-shrink: 0; }
}
.logo-torneio{
    height: 130px;
    /* Respiro em volta da marca. Os arquivos vem cortados no limite da arte
       (para as sete terem o mesmo tamanho otico), entao sem este padding as
       marcas largas — Taca, Copa, CKC, PKR — encostavam na borda do cartao. */
    padding: 14px 18px;
}
.logo-torneio a{
    display: block;
    height: 100%;
    border-radius: 4px;
    background-color: transparent !important;
    /* a imagem vem por style inline no PHP, com a versao da publicacao */
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform .18s ease, opacity .18s ease;
}
.logo-torneio a:hover{ transform: scale(1.025); opacity: .92; }
.logo-torneio a:focus{ outline: 3px solid #2E7373; outline-offset: 3px; }
.logo-torneio a:focus:not(:focus-visible){ outline: none !important; box-shadow: none !important; }
.logo-torneio a:focus-visible{ outline: 3px solid #2E7373 !important; outline-offset: 3px; }

.mural-titulo{ display: block; }
.mural-titulo h3{
    width: auto;
    margin: 0;
    padding: 0 0 14px 0;
    font-family: 'Montserrat', 'Lato', Arial, sans-serif;
    font-style: italic;
    font-weight: 800;
    font-size: 29px;
    line-height: 1.15;
    letter-spacing: -.2px;
    text-transform: uppercase;
    color: #111111;
    color: var(--c-ink);
    border-bottom: 2px solid #3E9494;
    border-bottom-color: var(--c-brand);
}
.mural-titulo h3 .point-little{
    display: inline-block;
    font-size: 21px;
    font-weight: 700;
    color: #2E7373;
    color: var(--c-brand-dk);
}
.mural-titulo h3 br + .point-little{ display: block; margin-top: 4px; }

/* ---------- botoes de documentos (vazios nestes murais, mantidos para o futuro) --- */
.mural-links{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 100%;
    width: 100%;
    padding: 0 15px;
    margin-top: 16px;
}
.mural-link{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 190px;
    min-height: 46px;
    padding: 11px 14px;
    background-color: #FFFFFF !important;
    border: 1px solid #3E9494;
    border-color: var(--c-brand);
    border-radius: var(--c-radius);
    color: #2E7373 !important;
    font-family: 'Montserrat', 'Lato', Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    font-style: italic;
    line-height: normal;
    letter-spacing: .4px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.mural-link:hover,
.mural-link:focus{
    background-color: #2E7373 !important;
    background-color: var(--c-brand-solid) !important;
    border-color: #2E7373;
    color: #FFFFFF !important;
}
.mural-link:focus{ outline: 2px solid #2E7373; outline-offset: 2px; }
.mural-link:focus:not(:focus-visible){ outline: none !important; box-shadow: none !important; }
.mural-link:focus-visible{ outline: 2px solid #2E7373 !important; outline-offset: 2px; }
@media (max-width: 767px){
    .mural-link{ flex: 1 1 100%; }
}

/* linha de contexto do campeonato */
.mural-evento{
    margin: 0 0 22px 0;
    text-align: center;
    color: #5A5A5A;
    color: var(--c-muted);
    font-size: 14px;
    line-height: 1.7;
}
.mural-evento strong{ color: #111111; color: var(--c-ink); font-weight: 700; }
.mural-evento .mural-evento-nome{
    display: block;
    font-family: 'Montserrat', 'Lato', Arial, sans-serif;
    font-style: italic;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #111111;
    color: var(--c-ink);
    margin-bottom: 4px;
}

/* ---------- botao voltar ---------- */
.voltar-mural{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid #3E9494;
    border-color: var(--c-brand);
    border-radius: var(--c-radius);
    background-color: #FFFFFF !important;
    color: #2E7373 !important;
    font-family: 'Montserrat', 'Lato', Arial, sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease;
}
.voltar-mural:hover,
.voltar-mural:focus{
    background-color: #2E7373 !important;
    background-color: var(--c-brand-solid) !important;
    color: #FFF !important;
}
/* o botao fica vermelho no foco/hover, entao o anel e escuro — vermelho sobre
   vermelho so se distinguia pelo offset de 2px */
.voltar-mural:focus{ outline: 2px solid #111111; outline-offset: 2px; }
.voltar-mural:focus:not(:focus-visible){ outline: none !important; box-shadow: none !important; }
.voltar-mural:focus-visible{ outline: 2px solid #111111 !important; outline-offset: 2px; }

/* ---------- blocos da home (Resultado / Classificacao) ---------- */
.muralTitulo{
    margin: 0;
    color: #FFF;
    font-family: 'Montserrat', 'Lato', Arial, sans-serif;
    font-style: italic;
    font-weight: 800;
    font-size: 15px !important;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 16px 0;
    width: 100%;
    text-align: center;
    border-radius: var(--c-radius) var(--c-radius) 0 0;
    background-color: #111111;
    background-color: var(--c-ink);
}
/* as cores dos blocos ficam AQUI, nao inline no PHP */
.muralTitulo-formacao{     background-color: #3A3A3A; background-color: var(--c-ink-soft); }
.muralTitulo-resultado{    background-color: #1C1C1C; background-color: var(--c-ink); }
.muralTitulo-classificacao{background-color: #2E7373; background-color: var(--c-brand-solid); }

.mural{
    text-align: center;
    padding: 6px 0 8px 0;
    margin-bottom: 24px;
    background-color: #FFFFFF;
    background-color: var(--c-surface);
    border: 1px solid #D4D4D4;
    border-color: var(--c-line);
    border-top: 0;
    border-radius: 0 0 var(--c-radius) var(--c-radius);
    box-shadow: var(--c-shadow);
}
.mural p{ margin: 0; border-bottom: 1px solid #ECECEC; border-bottom-color: var(--c-line-soft); }
.mural p:last-child{ border-bottom: 0; }
.mural p a{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 12px;
    /* 48px porque o selo de peso mede 20px e empurrava so a coluna
       Classificacao, deixando ela mais alta que a outra */
    min-height: 48px;
    color: #111111 !important;
    font-size: 15px !important;
    font-weight: 700;
    text-decoration: none !important;
    background-color: transparent !important;
    transition: background-color .15s ease, color .15s ease;
}
.mural p a:hover,
.mural p a:focus{
    background-color: #EAF3F3 !important;
    background-color: var(--c-brand-soft) !important;
    color: #2E7373 !important;
}
.mural p a:focus{ outline: 2px solid #2E7373; outline-offset: -2px; }
.mural p a:focus:not(:focus-visible){ outline: none !important; box-shadow: none !important; }
.mural p a:focus-visible{ outline: 2px solid #2E7373 !important; outline-offset: -2px; }
/* Na coluna Resultado o selo e o numero do torneio (T1..T6); na Classificacao
   e o peso/idade da categoria. Ancorado a direita de proposito: centralizado
   junto com o nome, ele empurrava cada linha para um lado (54px de zigue-zague)
   e a unica linha com selo da Classificacao saia 41px fora do prumo das outras. */
.mural p a{ position: relative; }
.mural p a .mural-peso{
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 20px;
    background: #F1F1F1;
    color: #5A5A5A;
    color: var(--c-muted);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .3px;
    vertical-align: 1px;
}

/* Cartao com muitas opcoes (as 10 etapas) lista em DUAS colunas a partir de
   576px: com uma coluna so, o bloco Resultado ficava com o dobro da altura do
   bloco Classificacao, que tem duas categorias. A classe vem do index.php e so
   entra acima de 6 opcoes. */
@media (min-width: 576px){
    /* Duas colunas com CSS multi-column, nao flex: o multi-column preenche por
       COLUNA — 1 a 5 na esquerda, 6 a 10 na direita —, que e como se le um
       calendario. Com flex-wrap a ordem sairia por LINHA (1,2 / 3,4 / ...). */
    .mural.mural-grade2{
        display: block;
        columns: 2;
        column-gap: 0;
        column-rule: 1px solid #ECECEC;
        column-fill: balance;
    }
    /* uma opcao nunca pode ser cortada no meio entre as duas colunas */
    .mural.mural-grade2 p{ break-inside: avoid; page-break-inside: avoid; }
    /* o item que fecha cada coluna vem marcado pelo index.php: sem isto sobra
       uma borda solta na base da coluna da esquerda */
    .mural.mural-grade2 p.fim-coluna{ border-bottom: 0; }
}

/* as colunas da home terminam sempre na mesma linha, mesmo que uma
   ganhe uma opcao a mais (Delegacoes, por exemplo) */
@media (min-width: 992px){
    /* Os dois cartoes terminam na mesma linha mesmo tendo 6 e 4 opcoes: o
       cartao estica e as linhas dividem a sobra igualmente (flex nos <p>).
       Antes um ficava bem mais curto que o outro.
       justify-content centraliza quando um bloco nao aparece (ex.:
       $totalResultado = 0 antes do primeiro torneio). */
    .mural-blocos{ display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; }
    .mural-blocos:before, .mural-blocos:after{ display: none; }
    .mural-blocos > [class*="col-"]{ display: flex; flex-direction: column; }
    /* O cartao estica para os dois terminarem juntos E as linhas dividem a
       sobra, para nenhuma opcao ficar solta no meio de um quadro alto.
       O max-height e o limite de bom senso: aqui sao 10 etapas contra 2
       categorias, e sem ele cada categoria virava uma faixa de 330px. Com o
       limite, a linha cresce um pouco e o resto do cartao fica como respiro. */
    .mural-blocos .mural{ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
    .mural-blocos .mural p{ flex: 1 1 auto; display: flex; max-height: 76px; }
    .mural-blocos .mural p a{ flex: 1 1 auto; }
    /* Bloco com poucas opcoes (as duas categorias): as linhas preenchem o
       cartao inteiro, viram dois alvos grandes e o quadro nao fica com vazio
       em volta. O max-height de 76px serve para bloco com muitas opcoes; aqui
       ele sobraria como espaco morto. */
    .mural-blocos .mural.mural-poucas{ justify-content: stretch; }
    .mural-blocos .mural.mural-poucas p{ max-height: none; }
    .mural-blocos .mural.mural-poucas p a{ font-size: 17px !important; font-weight: 700; }

    /* na grade de duas colunas as linhas nao esticam: quem manda na altura do
       cartao e o numero de FILAS, nao o de itens */
    /* na grade de duas colunas quem manda na altura do cartao e o numero de
       FILAS, nao o de itens: o .mural volta a ser display:block (multi-column)
       e as linhas nao esticam */
    .mural-blocos .mural.mural-grade2{ display: block; }
    .mural-blocos .mural.mural-grade2 p{ max-height: none; }
}

/* ---------- abas de categoria ---------- */
.tabs, .tabs.animated-slide-2{ border: 0; margin-bottom: 20px; }

/* a borda externa fica no proprio <ul>: com ela nos <li> o ultimo pixel da
   ultima aba era cortado pelo arredondamento das larguras em % */
ul.tab-links{
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0 0 16px 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: #FFFFFF;
    background-color: var(--c-surface);
    border: 1px solid #D4D4D4;
    border-color: var(--c-line);
    border-radius: var(--c-radius);
}
ul.tab-links li{
    flex: 1 1 0;
    min-width: 0;
    float: none;
    background-color: transparent;
    border: 0;
    border-right: 1px solid #D4D4D4;
    border-right-color: var(--c-line);
    text-align: center;
    transition: background-color .15s ease;
}
ul.tab-links li:last-child{ border-right: 0; }
ul.tab-links a{
    display: block;
    padding: 13px 4px;
    background: transparent !important;
    color: #111111 !important;
    font-family: 'Montserrat', 'Lato', Arial, sans-serif;
    font-style: italic;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: normal;
    line-height: 1.25;
}
ul.tab-links li:hover{ background-color: #EAF3F3; background-color: var(--c-brand-soft); }
/* PADRAO DE FOCO USADO EM TODO O MURAL — tres regras por elemento:
     1. ":focus"                       desenha o anel  (funciona em tudo)
     2. ":focus:not(:focus-visible)"   apaga no CLIQUE de mouse
     3. ":focus-visible"               desenha de novo na navegacao por TECLADO
   Sem a regra 2, clicar numa aba deixava um retangulo desenhado em volta dela
   ate a pessoa clicar em outro lugar — parecia um bug de selecao. Navegador
   antigo que nao entende :focus-visible descarta as regras 2 e 3 e fica so com
   a 1, ou seja, continua tendo foco visivel.
   Os tres blocos ficam SEPARADOS de proposito: lista de seletores e
   tudo-ou-nada, e juntar ":focus, :focus-visible" faria o Safari antigo
   descartar as duas. */
ul.tab-links a:focus{ outline: 2px solid #2E7373; outline-offset: -3px; }
ul.tab-links a:focus:not(:focus-visible){ outline: none !important; box-shadow: none !important; }
ul.tab-links a:focus-visible{ outline: 2px solid #2E7373 !important; outline-offset: -3px; }
/* na aba ativa o fundo ja e vermelho: o anel vermelho ficava invisivel (1:1) */
ul.tab-links li.active a:focus{ outline-color: #FFFFFF; }
ul.tab-links li.active a:focus:not(:focus-visible){ outline: none !important; box-shadow: none !important; }
ul.tab-links li.active a:focus-visible{ outline-color: #FFFFFF !important; }
ul.tab-links li.active{
    background-color: #2E7373;
    background-color: var(--c-brand-solid);
    border-color: #2E7373;
}
ul.tab-links li.active a{ color: #FFF !important; }

@media (min-width: 768px){ ul.tab-links a{ font-size: 12px; min-height: 44px; } }
@media (min-width: 992px){ ul.tab-links a{ font-size: 13px; } }

/* no celular a grade de colunas fica ilegivel: vira faixa de chips rolavel
   com alvo de toque de 46px (o width:25% vem inline do PHP, dai o !important) */
@media (max-width: 767px){
    ul.tab-links{
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        border: 0;
        border-radius: 0;
        background: transparent;
        padding-bottom: 4px;
    }
    ul.tab-links li{
        width: auto !important;
        flex: 0 0 auto;
        margin-right: 6px;
        background-color: #FFFFFF;
        background-color: var(--c-surface);
        border: 1px solid #D4D4D4;
        border-color: var(--c-line);
        border-radius: 4px;
    }
    ul.tab-links a{
        display: flex;
        align-items: center;
        min-height: 46px;
        padding: 12px 16px;
        font-size: 12px;
        letter-spacing: 0;
        white-space: nowrap;
    }
}

/* ---------- tabelas ---------- */
/* a tabela rola dentro do proprio bloco; a pagina nunca rola na horizontal.
   com 10 etapas + POS + PILOTO + TOT sao 13 colunas: no celular isto e
   obrigatorio. */
.tab-content-point .result-filter{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--c-shadow);
    margin-bottom: 22px;
}
/* O PHP poe tabindex="0" aqui para quem navega por teclado conseguir rolar a
   tabela ate as colunas escondidas. Mas com tabindex um simples CLIQUE tambem
   da foco, e o anel ficava desenhado em volta da tabela ate a pessoa clicar
   fora — parecia um retangulo preso na tela.
   Por isso: nada no :focus (clique de mouse) e o anel so no :focus-visible,
   que e como o navegador diz "esta pessoa esta usando o teclado".
   O bloco :focus vem antes e e sobrescrito pelo :focus-visible; navegador que
   nao conhece :focus-visible simplesmente nao desenha nada, e nao deixa de ser
   rolavel por isso. */
.tab-content-point .result-filter:focus{ outline: none; }
.tab-content-point .result-filter:focus-visible{ outline: 2px solid #2E7373 !important; outline-offset: 2px; box-shadow: var(--c-shadow) !important; }
/* o navegador ainda pode desenhar o dele por cima do que esta rolavel.
   Aqui NAO se zera o box-shadow: nesta caixa a sombra e o cartao, nao o anel de
   foco — zerar fazia o cartao perder o relevo a cada clique. */
.tab-content-point .result-filter:focus:not(:focus-visible){ outline: none !important; box-shadow: var(--c-shadow) !important; }
/* Categoria com uma bateria so: a tabela ocupa a largura inteira, igual a da
   classificacao. Ja foi limitada a 720px para o nome do piloto nao ficar tao
   longe da UF, mas ai a tela de resultado tinha uma largura e a de
   classificacao outra — e uniformidade entre as duas telas vale mais.
   A coluna PILOTO absorve a sobra (width:100%), entao POS e UF ficam justas
   nas pontas em vez de esticarem. */
.tab-content-point .tabela-unica table.tab-score td[align="left"],
.tab-content-point .tabela-unica table.tab-score th.th-piloto{ width: 100%; }
/* a tabela unica (resultado) tem folga: a coluna POS fica um pouco mais larga.
   Trocando a variavel, o "left" da coluna fixa acompanha sozinho. */
.tab-content-point .tabela-unica{ --c-pos-w: 64px; }

/* dica de que ha coluna escondida — fica POR CIMA da tabela, senao some */
.tab-content-point .home-page{ position: relative; }
@media (max-width: 991px){
    /* Medido na revisao: a 991px as tabelas de 8 e 9 colunas cabem inteiras,
       e o degrade aparecia em 17 abas onde nao havia nada para rolar —
       sugerindo conteudo escondido que nao existe. Abaixo de 768px nenhuma
       tabela da classificacao cabe, e ai a dica e verdadeira. */
}
/* A dica de rolagem depende da MEDIDA da caixa, nao da largura da tela: o
   mural.js poe .tem-rolagem so onde scrollWidth > clientWidth (e refaz a conta
   ao trocar de aba, ao girar o celular e quando a tabela entra por AJAX).
   Ligada por media query, ela aparecia em 17 abas cujas tabelas cabiam
   inteiras — um degrade prometendo coluna que nao existe. */
.tab-content-point .home-page.tem-rolagem{ position: relative; }
.tab-content-point .home-page.tem-rolagem:after{
    content: "";
    position: absolute;
    top: 0; right: 15px; bottom: 22px;
    width: 20px;
    pointer-events: none;
    background: linear-gradient(270deg, rgba(0,0,0,.22), rgba(0,0,0,0));
}
@media (max-width: 767px){
    /* no celular a caixa vai de borda a borda (ver o bloco de calhas abaixo) */
    .tab-content-point .home-page.tem-rolagem:after{ right: 0; }
}

table.tab-score{
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
    border: 1px solid #D4D4D4;
    border-color: var(--c-line);
    font-family: 'Lato', 'Montserrat', Arial, sans-serif;
    font-size: 13px;
    background-color: #FFFFFF;
    background-color: var(--c-surface);
}
table.tab-score td,
table.tab-score th{
    height: 26px !important;
    padding: 5px 6px !important;
    color: #111111;
    text-align: center !important;
    border-bottom: 1px solid #ECECEC;
    border-bottom-color: var(--c-line-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* o PHP marca o nome do piloto com align="left" — preservar */
table.tab-score td[align="left"]{ text-align: left !important; }

/* Realce da linha sob o mouse.
   O CSS antigo do sistema (site.css/style_dir.css) pinta as linhas de tabela
   com texto branco no hover — dentro do mural isso deixava o nome do piloto
   branco no fundo claro, ilegivel. Aqui a linha inteira ganha um vermelho bem
   claro e o texto continua preto. O :not([bgcolor]) preserva o descarte e as
   faixas de final, igual ao zebrado. */
table.tab-score tr:hover td:not([bgcolor]),
table.tab-score tr:hover th{
    /* !important porque o zebrado tem a mesma especificidade e vem depois no
       arquivo. O :not([bgcolor]) garante que nem assim o realce cubra o
       descarte ou uma faixa de final. */
    background-color: #EAF3F3 !important;
    background-color: var(--c-brand-soft) !important;
}
/* a cor forcada segue a MESMA condicao do fundo: numa celula com bgcolor o
   mural nao mexe em nada, senao um hover escuro vindo do CSS antigo deixaria
   texto preto sobre fundo escuro */
table.tab-score tr:hover td:not([bgcolor]),
table.tab-score tr:hover td:not([bgcolor]) *,
table.tab-score tr:hover td:not([bgcolor]) a{
    color: #111111 !important;
    color: var(--c-ink) !important;
}
/* As celulas coloridas mantem exatamente a propria cor sob o mouse. Os quatro
   valores sao os que o PHP emite (descarte + as tres faixas de final); reafirmar
   cada um com !important e o que impede tanto o realce do mural quanto um hover
   escuro vindo do CSS antigo de cobrir a informacao. */
table.tab-score tr:hover td[bgcolor="#FFE9CF"]{ background-color: #FFE9CF !important; color: #111111 !important; }
table.tab-score tr:hover td[bgcolor="#FFF3B0"]{ background-color: #FFF3B0 !important; color: #111111 !important; }
table.tab-score tr:hover td[bgcolor="#FFF8CC"]{ background-color: #FFF8CC !important; color: #111111 !important; }
table.tab-score tr:hover td[bgcolor="#FFFCE0"]{ background-color: #FFFCE0 !important; color: #111111 !important; }
/* a faixa vermelha de titulo da bateria: sem isto o realce claro a transformava
   num retangulo rosa e a tarja da marca sumia ao passar o mouse */
table.tab-score tr:hover td.tdTopoC,
table.tab-score tr:hover th.tdTopoC{
    background-color: #2E7373 !important;
    background-color: var(--c-brand-solid) !important;
    color: #FFFFFF !important;
}

/* a linha do cabecalho e escura: nao pode receber o realce claro */
table.tab-score tr.top-scrore-table:hover th,
table.tab-score tr.top-scrore-table:hover td{
    background-color: #111111 !important;
    background-color: var(--c-ink) !important;
    color: #FFFFFF !important;
}
table.tab-score tr.top-scrore-table:hover th.th-total{
    background-color: #2E7373 !important;
    background-color: var(--c-brand-solid) !important;
}
/* Os filhos da celula precisam da propria reafirmacao: as regras acima fixam a
   cor do <td>, nao a do que esta dentro dele.
   E, antes da cor, o FUNDO: o CSS legado pinta tambem os span/strong da linha
   sob o mouse (td span, td strong), e essa regra atinge o filho, nao o td —
   entao o :not([bgcolor]) do td nao ajudava. Medido: a sigla da UF e o numero
   punido viravam retangulos escuros, com 1,1:1 a 1,9:1 de contraste. */
table.tab-score tr:hover td *,
table.tab-score tr:hover th *{ background-color: transparent !important; }
table.tab-score tr:hover td strong[style*="red"]{ color: #8A4A10 !important; }
table.tab-score tr:hover td .pn{ color: #5A5A5A !important; }
table.tab-score tr:hover td .uf-piloto{ color: #5A5A5A !important; }

/* Texto selecionado com o mouse: sem isto o navegador usa azul com texto
   branco e, arrastando o mouse sobre a tabela, a linha "sumia". */
table.tab-score ::selection,
.mural ::selection{ background: #D2E8E8; color: #111111; }
table.tab-score ::-moz-selection,
.mural ::-moz-selection{ background: #D2E8E8; color: #111111; }

/* ---------- COLUNAS FIXAS (POS / PILOTO / TOT) ----------
   Achado na revisao de uso, medido: nas categorias que pontuam duas vezes por
   etapa a tabela tem 15 ou 16 colunas e passa de 1100px. Rolando para a
   direita para ver o TOT, o piloto perdia o proprio nome — sobravam dezessete
   linhas de numeros sem identificacao, e ele lia a linha errada.
   Agora POS e PILOTO ficam colados na esquerda e o TOT na direita: o total,
   que e o numero que ele abriu o mural para ver, nunca sai da tela.

   Cuidados que estas regras precisam ter:
   - a celula fixa tem que ter fundo OPACO proprio, senao o conteudo que passa
     por baixo aparece atraves dela. Por isso cada estado (normal, listra,
     hover, faixa de descarte, cabecalho) reafirma o fundo aqui;
   - com border-collapse: collapse o navegador nao desenha a borda da celula
     fixa, entao a separacao vem de um box-shadow;
   - o cabecalho tem z-index maior, para a celula fixa nao passar por cima
     dele. */
table.tab-score th.score-position,
table.tab-score td.score-position,
table.tab-score th.th-piloto,
table.tab-score td[align="left"]{ position: sticky; z-index: 2; }

table.tab-score th.score-position,
table.tab-score td.score-position{
    left: 0;
    width: var(--c-pos-w);
    min-width: var(--c-pos-w);
    max-width: var(--c-pos-w);
}
/* PILOTO comeca onde POS termina. A largura de POS e fixa (56px, e 64px na
   tabela unica), entao o deslocamento e conhecido. */
table.tab-score th.th-piloto,
table.tab-score td[align="left"]{ left: var(--c-pos-w); }

/* A coluna TOT fica CONGELADA na direita. Como a tabela e mais larga que a
   caixa, ela flutua sobre a coluna que estiver na borda — e o comportamento
   normal de coluna congelada de planilha, e o preco de o total nunca sair da
   tela. A sombra mais forte e o que faz o piloto perceber que ela esta por
   cima, e que ha coluna atras dela. */
table.tab-score th.th-total,
table.tab-score td.td-total{
    position: sticky;
    right: 0;
    z-index: 2;
    box-shadow: -6px 0 8px -4px rgba(0,0,0,.28), -2px 0 0 #2E7373;
}
table.tab-score th.score-position,
table.tab-score td.score-position{ box-shadow: none; }
table.tab-score th.th-piloto,
table.tab-score td[align="left"]{ box-shadow: 6px 0 8px -4px rgba(0,0,0,.22), 2px 0 0 #2E7373; }

/* fundo opaco em cada estado das celulas fixas */
table.tab-score td.score-position,
table.tab-score td[align="left"]{ background-color: #FFFFFF; background-color: var(--c-surface); }
table.tab-score tr.linha-par td.score-position,
table.tab-score tr.linha-par td[align="left"]{ background-color: #F7F7F7; background-color: var(--c-zebra); }
table.tab-score tr:hover td.score-position,
table.tab-score tr:hover td[align="left"]{ background-color: #EAF3F3 !important; background-color: var(--c-brand-soft) !important; }
table.tab-score td.td-total{ background-color: #FFFFFF; background-color: var(--c-surface); }
table.tab-score tr.linha-par td.td-total{ background-color: #F7F7F7; background-color: var(--c-zebra); }
table.tab-score tr:hover td.td-total{ background-color: #EAF3F3 !important; background-color: var(--c-brand-soft) !important; }
/* as celulas fixas do cabecalho ficam acima das do corpo */
table.tab-score tr.top-scrore-table th{ z-index: 3; }
table.tab-score tr.top-scrore-table th.score-position,
table.tab-score tr.top-scrore-table th.th-piloto{ z-index: 4; }
table.tab-score tr.top-scrore-table th.th-total{ z-index: 4; }
/* na tela de resultado a tabela tem 4 colunas e nunca rola: fixar ali so
   criaria sombra sem motivo */
.tab-content-point .tabela-unica table.tab-score th.th-piloto,
.tab-content-point .tabela-unica table.tab-score td[align="left"]{ box-shadow: none; }

/* a celula "sem resultado lançado" e a caixa da sessao que falta */
table.tab-score .sem-dado{ color: #8A8A8A; }
table.tab-score td.td-sem-resultado{
    padding: 22px 12px !important;
    text-align: center !important;
    color: #5A5A5A;
    color: var(--c-muted);
    font-style: italic;
}

/* ---------- FAIXA DO MODO TELÃO ----------
   No ?simples=1 nao ha topbar nem cabecalho, e a projecao do kartodromo nao
   dizia de que campeonato nem de que etapa era a tabela. */
.mural-telao-faixa{
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 18px;
    padding: 10px 14px;
    margin: 0 0 8px 0;
    background-color: #173C3C;
    background-color: var(--c-topbar);
    border-bottom: 3px solid #84B4B4;
    border-bottom-color: var(--c-topbar-line);
    color: #FFFFFF;
    font-family: 'Montserrat', 'Lato', Arial, sans-serif;
    text-transform: uppercase;
}
.mural-telao-camp{ font-weight: 800; font-style: italic; font-size: clamp(18px, 1.6vw, 34px); letter-spacing: .4px; }
.mural-telao-etapa{ font-weight: 600; font-size: clamp(14px, 1.1vw, 24px); letter-spacing: .6px; opacity: .92; }

/* AS FAIXAS COLORIDAS, EM REPOUSO.
   Achado na revisao: o :not([bgcolor]) impede o CSS DESTE arquivo de repintar
   as celulas coloridas, mas nao desfaz o que o CSS legado do sistema ja pinta
   (ele tem table.tab-score td{background:#FFFFFF} e um zebrado proprio sem o
   :not). Regra de autor vence o atributo bgcolor, entao a faixa de descarte
   podia aparecer cinza parada e so acender sob o mouse — a legenda mostrando
   uma cor que a tabela nunca tinha.
   Aqui os quatro valores que o PHP emite sao reafirmados sem :hover. Com isto
   a faixa e correta em repouso, no hover, no zebrado e na impressao,
   independente do que o legado faça. */
table.tab-score td[bgcolor="#FFE9CF"]{ background-color: #FFE9CF !important; }
table.tab-score td[bgcolor="#FFF3B0"]{ background-color: #FFF3B0 !important; }
table.tab-score td[bgcolor="#FFF8CC"]{ background-color: #FFF8CC !important; }
table.tab-score td[bgcolor="#FFFCE0"]{ background-color: #FFFCE0 !important; }
table.tab-score td[bgcolor]{ color: #111111 !important; }
/* a celula fixa com faixa mantem a faixa (e nao o fundo opaco das regras de
   coluna fixa, que vem antes no arquivo) */
table.tab-score td.score-position[bgcolor],
table.tab-score td[align="left"][bgcolor],
table.tab-score td.td-total[bgcolor]{ background-color: inherit; }

/* zebrado. O :not([bgcolor]) e o que preserva o descarte e as faixas de final:
   o bgcolor do HTML perde para qualquer regra de autor, entao sem o :not este
   cinza cobria metade das celulas coloridas. */
/* A listra vem da classe que o PHP marca (.linha-par), e nao de
   :nth-child(even): com o cabecalho de duas linhas a primeira linha de dados
   passa a ser a terceira <tr> e a listra invertia — trocando de aba na mesma
   tela, ela pulava de posicao. O :nth-child fica como reserva para as tabelas
   de resultado e formacao, que nao marcam classe. */
table.tab-score tr.linha-par td:not([bgcolor]){
    background-color: #F7F7F7;
    background-color: var(--c-zebra);
}
table.tab-score tr.linha-impar td:not([bgcolor]){
    background-color: #FFFFFF;
    background-color: var(--c-surface);
}
table.tab-score tr:not(.linha-par):not(.linha-impar):not(.top-scrore-table):nth-child(even) td:not([bgcolor]){
    background-color: #F7F7F7;
    background-color: var(--c-zebra);
}

table.tab-score tr.top-scrore-table td,
table.tab-score tr.top-scrore-table th{
    background-color: #111111 !important;
    background-color: var(--c-ink) !important;
    color: #FFF;
    font-family: 'Montserrat', 'Lato', Arial, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .4px;
    text-transform: uppercase;
    border-bottom: 0;
    padding: 9px 6px !important;
}
/* o cabecalho da coluna PILOTO acompanha o alinhamento dos nomes */
table.tab-score tr.top-scrore-table td.th-piloto,
table.tab-score tr.top-scrore-table th.th-piloto{ text-align: left !important; padding-left: 8px !important; }
/* cabecalho das colunas de torneio: numero em cima (T1..T6) e nome do torneio
   embaixo (VERÃO, FPKI...). Sao ate 10 colunas na mesma tela; ate 991px o nome sai
   da tela mas continua na arvore de acessibilidade, entao o leitor de tela
   segue lendo "E1 28/mar".
   position:relative e obrigatorio: a versao escondida do nome e
   position:absolute e, sem ancora aqui, ela se posicionava pelo <body> e
   empurrava a largura da pagina (rolagem horizontal a 320px). */
table.tab-score .th-etapa{ position: relative; padding: 7px 6px !important; }
table.tab-score .th-etapa .rot-num,
table.tab-score .th-etapa .rot-nome{ display: block; line-height: 1.25; }
table.tab-score .th-etapa .rot-nome{
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .2px;
    color: #CFCFCF;
}

/* ---------- CABECALHO EM DOIS NIVEIS (Time Attack + corrida) ----------
   Nas categorias que pontuam duas vezes por etapa o cabecalho tem duas
   linhas: em cima a etapa ("E3" e a data), embaixo a sessao ("TA" / "CO").
   POS / PILOTO / TOT atravessam as duas com rowspan.

   A divisoria .sep-etapa e o que faz doze colunas de pontuacao continuarem
   legiveis: sem ela nao se ve onde uma etapa termina e a outra comeca. */
table.tab-score .th-etapa-grupo{ border-bottom: 1px solid rgba(255,255,255,.22) !important; }

table.tab-score tr.linha-sessao th.th-sessao{
    padding: 4px 4px !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    line-height: 1.1;
    white-space: nowrap;
    color: #E6E6E6;
}
/* abbr: o titulo por extenso ("Time Attack") fica no title, e o visual nao
   ganha o pontilhado que o navegador poe por padrao */
table.tab-score tr.linha-sessao th.th-sessao abbr{
    text-decoration: none !important;
    border-bottom: 0 !important;
    cursor: help;
}

/* divisoria entre etapas — no cabecalho e no corpo */
table.tab-score th.sep-etapa{ border-left: 2px solid rgba(255,255,255,.34) !important; }
table.tab-score td.sep-etapa{ border-left: 2px solid #2E7373 !important; border-left-color: var(--c-brand-solid) !important; }
/* a divisoria e uma linha fina de 2px; num fundo de faixa (descarte, final)
   ela continua visivel porque a cor e a da marca, nao um cinza */

/* ---------- TITULO DA TABELA DE RESULTADO ----------
   "SUPER 95  [TIME ATTACK]  16/mai" — a categoria em destaque, a sessao num
   selo e a data (a data DESSA categoria) alinhada a direita. */
table.tab-score td.tdTopoC .td-topo-tag{
    display: inline-block;
    margin-left: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    /* ESCURECE a faixa da marca, nao clareia: com rgba branco o selo ficava
       com 3,82:1 no CKC e 4,00:1 na COPA para o texto branco de 11px. */
    background-color: rgba(0,0,0,.24);
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .8px;
    vertical-align: middle;
}
table.tab-score td.tdTopoC .td-topo-bateria{ background-color: rgba(0,0,0,.38); }
table.tab-score td.tdTopoC .td-topo-data{
    display: inline-block;
    margin-left: 10px;
    font-size: 11.5px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .3px;
    /* sem opacity: ela derrubava o contraste do branco de 5,3:1 para 4,57:1 */
    vertical-align: middle;
}

/* TOT e a coluna que o piloto procura: fica em vermelho no cabecalho */
table.tab-score tr.top-scrore-table td.th-total,
table.tab-score tr.top-scrore-table th.th-total{
    background-color: #2E7373 !important;
    background-color: var(--c-brand-solid) !important;
}
table.tab-score td.td-total{ font-weight: 700; }

/* faixa de titulo de cada bateria/final na tela de resultado */
table.tab-score td.tdTopoC{
    background-color: #2E7373 !important;
    background-color: var(--c-brand-solid) !important;
    color: #FFF;
    font-family: 'Montserrat', 'Lato', Arial, sans-serif;
    font-style: italic;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 11px 8px !important;
    border-bottom: 0;
}
table.tab-score td.score-position,
table.tab-score th.score-position{ width: var(--c-pos-w); font-weight: 700; }
table.tab-score tr:last-child td{ border-bottom: 0; }
table.tab-score th{ font-weight: 700; }

/* linha de corte: ultima posicao que vai para a final (so quando ha final) */
table.tab-score tr.corte-final td{ border-bottom: 3px solid #111111; }

/* punicao — o PHP manda color:red inline, aqui vira um vermelho legivel */
table.tab-score td strong[style*="red"]{ color: #8A4A10 !important; color: var(--c-brand-pun) !important; }

/* UF ao lado do nome na classificacao, onde nao cabe uma coluna so para ela.
   Cinza e menor: identifica o piloto sem disputar a leitura com o nome. */
table.tab-score td .uf-piloto{
    color: #5A5A5A;
    color: var(--c-muted);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .3px;
}

/* AT / DB / DQ / SUS: cinza, para nao competirem com a pontuacao */
table.tab-score td .pn{
    color: #5A5A5A;
    color: var(--c-muted);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .4px;
}

/* legenda das faixas de cor */
.mural-legenda{
    margin: -6px 0 20px 0;
    font-size: 12.5px;
    color: #5A5A5A;
    color: var(--c-muted);
}
.mural-legenda span{ display: inline-block; margin-right: 18px; white-space: nowrap; }
/* A legenda da classificacao passou de 2 para até 10 itens (as siglas AT, DQ,
   SUS, TOT, TA, CO e o traco de "sem resultado" nao tinham explicacao em tela
   nenhuma). Com esta grade ela quebra em linhas de largura util em vez de sair
   numa fila unica que estoura a tela. */
.mural-legenda-cls{
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    line-height: 1.7;
}
/* Estes itens PODEM quebrar linha. O nowrap herdado da legenda antiga (que
   tinha dois itens curtos) fazia o item mais longo medir 367px e o DOCUMENTO
   passava a rolar na horizontal a 320px — medido. A sigla em si continua sem
   quebrar, para o selo nao partir no meio. */
.mural-legenda-cls span{ margin-right: 0; white-space: normal; max-width: 100%; }
.mural-legenda-cls .lg-sigla,
.mural-legenda-cls .lg-pun{ white-space: nowrap; }
/* o exemplo "12º - (4)" e mais largo que uma sigla: nao pode ficar na caixinha
   quadrada das siglas */
.mural-legenda-cls span:first-child .lg-sigla{ min-width: 0; padding: 1px 6px; }
.mural-legenda i{
    display: inline-block;
    width: 13px; height: 13px;
    margin-right: 6px;
    vertical-align: -2px;
    border: 1px solid #8A8A8A;   /* 3,3:1 sobre o fundo da pagina: a amostra clara sozinha nao era perceptivel */
}
/* borda mais escura: sobre o fundo cinza da pagina a amostra clara sozinha
   nao chegava aos 3:1 que a norma pede para elemento grafico informativo */
.mural-legenda .lg-final{ background: #FFF3B0; }
.mural-legenda .lg-descarte{ background: #FFE9CF; }
.mural-legenda .lg-corte{ background: #111111; height: 3px; vertical-align: 3px; border: 0; }
/* a punicao aparece como TEXTO vermelho na tabela, nao como fundo: a amostra
   da legenda tambem e texto, senao ela ensinava a procurar a coisa errada */
.mural-legenda .lg-pun,
.mural-legenda .lg-abrev{
    display: inline-block;
    margin-right: 6px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mural-legenda .lg-pun{ color: #8A4A10; color: var(--c-brand-pun); }
.mural-legenda .lg-sigla{
    display: inline-block;
    margin-right: 6px;
    font-weight: 700;
    color: #111111;
    color: var(--c-ink);
}
.mural-legenda .lg-abrev{ color: #111111; }
/* a lista "E1 1ª Etapa · 28/mar ..." so faz sentido onde a abreviacao aparece */
.lg-so-celular{ display: none; }
@media (max-width: 991px){ .lg-so-celular{ display: block; } }
.mural-legenda-torneios{
    margin-top: -14px;
    margin-bottom: 18px;
    font-size: 12px;
    line-height: 1.9;
}
.mural-legenda-torneios span{ margin-right: 14px; }
.mural-legenda-torneios .lg-abrev{ margin-right: 5px; color: #2E7373; }

/* so a categoria ativa aparece.
   Isto ja vinha do component.css do sistema, mas so de la: se aquele arquivo
   nao carregar (rede do kartodromo caindo, cache velho), as quatro categorias
   apareciam empilhadas uma embaixo da outra. Como o mural.js troca as abas por
   style inline (slideUp/slideDown), a regra abaixo nao atrapalha o clique. */
.tab-content-point > .tab{ display: none; }
.tab-content-point > .tab.active{ display: block; }

.home-page{ margin-bottom: 6px; }
.tab-content-point .tab{ padding-top: 2px; }
.tab-content-point .row{ margin-bottom: 8px; }

/* mensagens de "ainda nao atualizado" */
.tab-content-point p,
.exibe-ajax > p{
    color: #5A5A5A;
    color: var(--c-muted);
    font-size: 14px;
}

/* quem pediu menos animacao no sistema nao leva zoom nem transicao */
@media (prefers-reduced-motion: reduce){
    .logo-torneio a,
    .logo-torneio a:hover,
    .mural-link, .voltar-mural, .mural p a, ul.tab-links li{
        transition: none !important;
        transform: none !important;
    }
}

/* ---------- modo telao (?simples=1) ---------- */
.container-fluid.secondary-page table.tab-score{ font-size: 17px; }
.container-fluid.secondary-page table.tab-score td{ height: 34px !important; }
.container-fluid.secondary-page ul.tab-links a{ font-size: 15px; }

@media (min-width: 1600px){
    .container-fluid.secondary-page table.tab-score{ font-size: clamp(20px, 1.15vw, 34px); }
    .container-fluid.secondary-page table.tab-score td{ height: auto !important; padding: 10px !important; }
    .container-fluid.secondary-page table.tab-score td.tdTopoC{ font-size: clamp(20px, 1.25vw, 38px); }
}

/* uma final unica nao pode ficar em meia tela do projetor */
@media (min-width: 1200px){
    .container-fluid.secondary-page .tab.active .row > .col-md-6:only-child{ width: 100%; }
}

/* ---------- responsivo ---------- */
@media (max-width: 991px){
    /* A data da etapa CONTINUA na tela.
       Antes ela era escondida para leitor de tela aqui, com a ideia de que a
       legenda da pagina daria a correspondencia. Mas a legenda lista o
       ordinal ("E1 · 1ª Etapa"), nao a data — e a data e por categoria, entao
       a legenda nao pode carregar. Resultado: abaixo de 992px a data nao
       existia em lugar nenhum da tela. A tabela larga ja rola dentro da
       propria caixa, entao manter a data custa largura de rolagem, nao
       informacao perdida. */
    table.tab-score .th-etapa .rot-nome{ font-size: 8.5px; letter-spacing: 0; }

    .mural-titulo h3{ margin-top: 18px; font-size: 23px; text-align: center; }
    .mural-titulo h3 .point-little{ font-size: 18px; }
    .logo-torneio{ height: 96px; }
    .mural-topbar{ height: 62px; padding: 0 14px; justify-content: center; }
    .mural-topbar-logo{ min-width: 0; }
    .mural-topbar-marca{ height: calc(var(--c-logo-h) * 0.80); }
    table.tab-score{ font-size: 12px; }
}
@media (max-width: 767px){
    /* no celular a coluna POS encolhe; o "left" da coluna PILOTO fixa vem da
       mesma variavel, entao as duas continuam batendo */
    :root{ --c-pos-w: 42px; }
    .tab-content-point .tabela-unica{ --c-pos-w: 48px; }

    /* No celular a CLASSIFICACAO vem primeiro: medido, o bloco comecava em
       y=1006 numa tela de 844 — fora da primeira dobra. E o que o piloto mais
       procura, entao passa para cima do bloco de etapas. */
    .mural-blocos{ display: flex; flex-direction: column; }
    .mural-blocos .bloco-classificacao{ order: 1; }
    .mural-blocos .bloco-resultado{ order: 2; }

    /* O "Voltar para Mural" aparece duas vezes na tela (antes e depois do
       conteudo). No celular o de cima so empurra os dados para baixo. */
    .voltar-topo{ display: none !important; }

    /* TENTATIVA REVERTIDA — nao repetir.
       Zerar as calhas de 15px da .container/.col-md-12 para a tabela ganhar
       largura no celular parece inofensivo e nao e: o .row do bootstrap tem
       margin -15px de cada lado e conta com esse padding do pai para fechar a
       conta. Sem ele o documento passou a rolar na horizontal (367px numa tela
       de 320) e a tabela passou a estourar a area util do A4 na impressao.
       Os 30px que se ganhava nao valem nem uma coisa nem a outra: a tabela
       larga rola dentro da propria caixa, o que ja funciona. */
    .tab-content-point .home-page.tem-rolagem{ padding-left: 0; padding-right: 0; }
    .tab-content-point .home-page.tem-rolagem .result-filter{ border-radius: 0; }
    .text-right{ text-align: center !important; }
    table.tab-score{ font-size: 11.5px; }
    table.tab-score td{ padding: 4px 3px !important; }
    /* deixa o nome do piloto quebrar linha para caber mais colunas na tela */
    table.tab-score td[align="left"]{ white-space: normal; min-width: 108px; }
    .mural-titulo h3{ font-size: 19px; }
}

/* ---------- impressao ---------- */
@page{ size: A4; margin: 10mm; }
@media print{
    body{ background: #FFF !important; }
    /* o bootstrap trava a largura da .container em px: no papel isso cortava a
       coluna TOT da classificacao */
    .container, .container-fluid{ width: auto !important; max-width: 100% !important; padding: 0 !important; }
    /* 13 colunas (POS + PILOTO + 10 etapas + TOT) nao cabem no A4 retrato com
       o padding normal: com 9px de fonte e 2px de padding sobra folga. */
    table.tab-score{ font-size: 9px; }
    table.tab-score td, table.tab-score th{ padding: 2px 3px !important; height: auto !important; }
    /* Acima de 13 colunas nem isso basta: medido, o LEGENDS do CPAK (16
       colunas, com o Time Attack) dava 728px contra 718px de area util do A4
       retrato, e o navegador salvava o PDF encolhendo a pagina inteira — num
       driver que recorta em vez de encolher, a coluna TOT ia embora. O PHP
       marca essas tabelas com .tab-larga (ver publica_classificacao.php). */
    table.tab-score.tab-larga{ font-size: 7.5px; }
    table.tab-score.tab-larga td,
    table.tab-score.tab-larga th{ padding: 1px 2px !important; }
    table.tab-score.tab-larga td[align="left"]{ max-width: 108px; }
    table.tab-score.tab-larga .th-etapa .rot-nome{ font-size: 6.5px; }
    table.tab-score.tab-larga tr.linha-sessao th.th-sessao{ font-size: 6.5px; padding: 1px 1px !important; }
    table.tab-score .th-etapa{ padding: 3px 2px !important; }
    table.tab-score .th-etapa .rot-nome{ font-size: 8px; }
    /* a sessao continua visivel no celular: e ela que diz qual coluna e o
       Time Attack e qual e a corrida */
    table.tab-score tr.linha-sessao th.th-sessao{ padding: 2px 1px !important; font-size: 8.5px; letter-spacing: .2px; }
    table.tab-score td.tdTopoC .td-topo-tag{ margin-left: 6px; padding: 1px 6px; font-size: 9.5px; letter-spacing: .4px; }
    table.tab-score td.tdTopoC .td-topo-data{ margin-left: 6px; font-size: 10px; }
    /* o bootstrap imprime o endereco de cada link depois do texto */
    a[href]:after{ content: "" !important; }
    /* Um nome muito longo ("MARIA EDUARDA GONCALVES DE ALMEIDA") esticava a
       coluna PILOTO e empurrava a ultima coluna para fora da folha. No papel a
       coluna tem teto e o nome e cortado com reticencias — melhor perder o fim
       de um nome do que perder a coluna do total. */
    table.tab-score td[align="left"]{
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap !important;
    }
    /* o modo telao usa fonte grande; no papel isso estourava a folha */
    .container-fluid.secondary-page table.tab-score{ font-size: 10px !important; }
    .container-fluid.secondary-page table.tab-score td,
    .container-fluid.secondary-page table.tab-score th{ height: auto !important; padding: 3px 4px !important; }
    /* no papel cabe a data da etapa embaixo do numero */
    table.tab-score .th-etapa .rot-nome{
        position: static !important;
        width: auto !important; height: auto !important;
        margin: 0 !important; overflow: visible !important;
        clip: auto !important;
        color: #FFFFFF !important;
    }
    .lg-so-celular{ display: none !important; }
    .mural-topbar{ display: none; }
    .mural-rodape{ display: none; }
    .voltar-mural{ display: none; }
    ul.tab-links{ display: none; }
    .mural-links{ display: none; }
    table.tab-score{ box-shadow: none; }
    .mural-header{ box-shadow: none; border: 0; }
    .tab-content-point .result-filter{ overflow: visible; box-shadow: none; }
    .tab-content-point .home-page.tem-rolagem:after{ display: none; }

    /* o Chrome imprime sem fundo por padrao: sem isto o cabecalho preto da
       tabela e as faixas de descarte somem do papel */
    table.tab-score,
    table.tab-score td,
    table.tab-score th,
    .muralTitulo,
    .mural-legenda i{
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* a grade de uma bateria nao pode quebrar entre paginas */
    .tab-content-point .home-page,
    table.tab-score{ break-inside: avoid; page-break-inside: avoid; }

    /* duas baterias por folha A4 */
    .tab-content-point .col-md-6{ width: 50%; float: left; }
}