/* =========================================================================
   MURAL ONLINE — COPA KMKZY & ROCKETS SPORTS 2026
   Versao 1 — identidade visual espelhada do site kmkzy.wise4.com.br
   Carregado DEPOIS de bootstrap.css / style_dir.css / site.css / responsive.css

   REGRAS QUE NAO PODEM SER QUEBRADAS
   1. Nunca definir "background" em .tab-score td — o PHP marca os grupos de
      final com o atributo bgcolor (LINHA_1..LINHA_F) e o descarte com #ffefd8,
      e atributo presentacional 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. Todo par background+color usa valor literal antes do var(), para o mural
      nao ficar branco-no-branco em navegador antigo de celular.
   ========================================================================= */

:root{
    --k-ink:         #1A1A1A;   /* faixa escura e texto forte do site */
    --k-muted:       #575757;
    --k-page:        #E8E8E8;   /* fundo de pagina do site */
    --k-surface:     #FFFFFF;
    --k-line:        #D6D6D6;
    --k-line-soft:   #EDEDED;

    --k-green:       #4FC035;   /* verde de marca — reguas, bordas, realces */
    --k-green-solid: #2E7D1E;   /* verde de preenchimento — texto branco 5.2:1 */
    --k-green-dk:    #2E7D1E;   /* verde de texto sobre branco */
    --k-green-soft:  #EEF9EB;
    --k-blue-solid:  #1A5FC4;   /* bloco Resultado — aplicado inline no index.php */
    --k-red-solid:   #C4200E;   /* bloco Classificacao — aplicado inline no index.php */
    --k-red-pun:     #A31200;   /* punicao sobre as faixas amarelas 7.6:1 */

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

/* ---------- base ---------- */
body{
    background-color: #E8E8E8 !important;
    background-color: var(--k-page) !important;
    color: #1A1A1A;
    color: var(--k-ink);
    font-family: 'Ubuntu', 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}
.general{ background-color: transparent !important; }

/* faixa escura do topo, igual ao header do site.
   E markup de verdade (.mural-topbar) porque o wordmark leva para a pagina
   do torneio no site. Nao aparece em ?externo=1 nem em ?simples=1. */
.mural-topbar{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 66px;
    padding: 0 24px;
    background-color: #1A1A1A;
    border-bottom: 3px solid #4FC035;
    border-bottom-color: var(--k-green);
    margin-bottom: 26px;
}
/* so o wordmark e clicavel — nao a faixa preta inteira */
.mural-topbar-logo{
    display: block;
    flex: 0 0 auto;
    width: 175px;
    height: 100%;
    background-color: transparent !important;
    /* a imagem vem por style inline no PHP, com a versao da publicacao */
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 34px;
}
.mural-topbar-logo:focus,
.mural-topbar-logo:focus-visible{ outline: 2px solid #4FC035; outline-offset: -4px; }
.mural-rodape{
    margin-top: 34px;
    padding: 18px 12px;
    background-color: #1A1A1A;
    background-color: var(--k-ink);
    color: #C4C4C4;
    font-size: 12.5px;
    letter-spacing: .3px;
    text-align: center;
}
.mural-rodape a{
    color: #8FE07A !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,
.mural-rodape a:focus-visible{ outline: 2px solid #4FC035; outline-offset: 3px; }
.mural-rodape-sep{ margin: 0 6px; color: #8A8A8A; }
/* alinha o wordmark com a coluna de conteudo em telas largas */
@media (min-width: 1200px){
    .mural-topbar{ padding: 0 calc(50% - 585px); }
    .mural-topbar-logo{ width: 195px; background-size: auto 38px; }
}
/* modo telao de pista (?simples=1): sem cromo nenhum */
body.simples .mural-rodape{ display: none; }

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

/* ---------- alinhamento: um unico eixo esquerdo para tudo ----------
   o cabecalho, a legenda, as abas e a tabela partem todos da mesma coluna */
.mural-header{ margin-left: 0; margin-right: 0; }

/* ---------- cabecalho do mural (logo do torneio + titulo) ---------- */
.mural-header{
    background-color: #FFFFFF;
    background-color: var(--k-surface);
    border: 1px solid #D6D6D6;
    border-color: var(--k-line);
    border-top: 3px solid #4FC035;
    border-top-color: var(--k-green);
    border-radius: var(--k-radius);
    box-shadow: var(--k-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: 150px;
    padding: 0;
}
.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,
.logo-torneio a:focus-visible{ outline: 3px solid #2E7D1E; outline-offset: 3px; }
.mural-titulo{ display: block; }
.mural-titulo h3{
    width: auto;
    margin: 0;
    padding: 0 0 14px 0;
    font-family: 'Orbitron', 'Ubuntu', Arial, sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #1A1A1A;
    color: var(--k-ink);
    border-bottom: 2px solid #4FC035;
    border-bottom-color: var(--k-green);
}
.mural-titulo h3 .point-little{
    display: inline-block;
    font-size: 22px;
    color: #2E7D1E;
    color: var(--k-green-dk);
}
.mural-titulo h3 br + .point-little{ display: block; margin-top: 4px; }

/* ---------- botoes dos documentos do torneio ----------
   Faixa compacta abaixo do logo e do titulo. A tipografia e os icones sao os
   mesmos do site (Orbitron 700 italico, caixa alta, letter-spacing .8px, e os
   glifos do Font Awesome), so que em escala menor para nao dominar o
   cabecalho — o mural existe para mostrar a tabela.
   A cor do texto e o verde fechado #2E7D1E (5,2:1), como no resto do mural;
   o verde vivo da marca fica na borda. */
.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 #4FC035;
    border-color: var(--k-green);
    border-radius: var(--k-radius);
    color: #2E7D1E !important;
    color: var(--k-green-dk) !important;
    font-family: 'Orbitron', 'Ubuntu', Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    font-style: italic;
    line-height: normal;
    letter-spacing: .8px;
    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: #2E7D1E !important;
    background-color: var(--k-green-solid) !important;
    border-color: #2E7D1E;
    border-color: var(--k-green-solid);
    color: #FFFFFF !important;
}
.mural-link:focus,
.mural-link:focus-visible{ outline: 2px solid #2E7D1E; outline-offset: 2px; }

/* o SVG se comporta como um icone de fonte: 1em de altura, 8px de respiro */
.mural-link .mural-icone{
    height: 1em;
    width: auto;
    flex: 0 0 auto;
    margin-right: 8px;
}

@media (max-width: 767px){
    .mural-link{ flex: 1 1 100%; }
}

/* linha de contexto do evento */
.mural-evento{
    margin: 0 0 22px 0;
    text-align: center;
    color: #575757;
    color: var(--k-muted);
    font-size: 14px;
    line-height: 1.7;
}
.mural-evento strong{ color: #1A1A1A; color: var(--k-ink); font-weight: 500; }
.mural-evento .mural-evento-nome{
    display: block;
    font-family: 'Orbitron', 'Ubuntu', Arial, sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #1A1A1A;
    color: var(--k-ink);
    margin-bottom: 4px;
}

/* ---------- botao voltar ---------- */
.voltar-mural{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid #4FC035;
    border-color: var(--k-green);
    border-radius: var(--k-radius);
    background-color: #FFFFFF !important;
    background-color: var(--k-surface) !important;
    color: #2E7D1E !important;
    font-family: 'Orbitron', 'Ubuntu', Arial, sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .6px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease;
}
.voltar-mural:hover,
.voltar-mural:focus{
    background-color: #2E7D1E !important;
    background-color: var(--k-green-solid) !important;
    color: #FFF !important;
}

/* ---------- blocos da home (Formacao / Resultado / Classificacao) ---------- */
.muralTitulo{
    margin: 0;
    color: #FFF;
    font-family: 'Orbitron', 'Ubuntu', Arial, sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 15px !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 16px 0;
    width: 100%;
    text-align: center;
    border-radius: var(--k-radius) var(--k-radius) 0 0;
}
.mural{
    text-align: center;
    padding: 6px 0 8px 0;
    margin-bottom: 24px;
    background-color: #FFFFFF;
    background-color: var(--k-surface);
    border: 1px solid #D6D6D6;
    border-color: var(--k-line);
    border-top: 0;
    border-radius: 0 0 var(--k-radius) var(--k-radius);
    box-shadow: var(--k-shadow);
}
.mural p{ margin: 0; border-bottom: 1px solid #EDEDED; border-bottom-color: var(--k-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 para 48, deixando ela 10px mais alta que as outras */
    min-height: 48px;
    color: #1A1A1A !important;
    font-size: 15px !important;
    font-weight: 500;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease;
}
.mural p a{ background-color: transparent !important; }
.mural p a:hover,
.mural p a:focus{
    background-color: #EEF9EB !important;
    background-color: var(--k-green-soft) !important;
    color: #2E7D1E !important;
}
.mural p a:focus,
.mural p a:focus-visible{ outline: 2px solid #2E7D1E; outline-offset: -2px; }
.mural p a .mural-peso{
    display: inline-block;
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 20px;
    background: #F1F1F1;
    color: #575757;
    color: var(--k-muted);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .3px;
    vertical-align: 1px;
}

/* as tres colunas da home terminam sempre na mesma linha, mesmo que uma
   ganhe uma opcao a mais (Delegacoes, por exemplo) */
@media (min-width: 992px){
    /* justify-content centraliza quando um bloco nao aparece
       (ex.: $totalResultado = 0 antes da primeira corrida) */
    .mural-blocos{ display: flex; flex-wrap: wrap; justify-content: center; }
    .mural-blocos:before, .mural-blocos:after{ display: none; }
    .mural-blocos > [class*="col-"]{ display: flex; flex-direction: column; }
    /* o cartao estica para os tres terminarem juntos, mas as linhas mantem a
       altura natural: assim "Serie 1" e "ESTREANTES" ficam sempre na mesma
       altura, inclusive se a Classificacao ganhar a opcao Delegacoes */
    .mural-blocos .mural{ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; }
}

/* ---------- 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 overflow/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(--k-surface);
    border: 1px solid #D6D6D6;
    border-color: var(--k-line);
    border-radius: var(--k-radius);
}
ul.tab-links li{
    flex: 1 1 0;
    min-width: 0;
    float: none;
    background-color: transparent;
    border: 0;
    border-right: 1px solid #D6D6D6;
    border-right-color: var(--k-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: #1A1A1A !important;
    font-family: 'Orbitron', 'Ubuntu', Arial, sans-serif;
    font-style: italic;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: normal;
    line-height: 1.25;
}
ul.tab-links li:hover{ background-color: #EEF9EB; background-color: var(--k-green-soft); }
ul.tab-links a:focus,
ul.tab-links a:focus-visible{ outline: 2px solid #2E7D1E; outline-offset: -3px; }
ul.tab-links li.active{
    background-color: #2E7D1E;
    background-color: var(--k-green-solid);
    border-color: #2E7D1E;
    border-color: var(--k-green-solid);
}
ul.tab-links li.active a{ color: #FFF !important; }

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

/* no celular a grade de 5 colunas fica ilegivel: vira faixa de chips rolavel
   com alvo de toque de 46px (o width:20% 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(--k-surface);
        border: 1px solid #D6D6D6;
        border-color: var(--k-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.
   as sombras laterais aparecem so quando existe conteudo cortado. */
.tab-content-point .result-filter{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--k-shadow);
    margin-bottom: 22px;
}
/* dica de que ha coluna escondida — fica POR CIMA da tabela, senao some */
.tab-content-point .home-page{ position: relative; }
@media (max-width: 991px){
    .tab-content-point .home-page: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));
    }
}

table.tab-score{
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
    border: 1px solid #D6D6D6;
    border-color: var(--k-line);
    font-family: 'Ubuntu', 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    background-color: #FFFFFF;
    background-color: var(--k-surface);
}
table.tab-score td{
    height: 26px !important;
    padding: 5px 6px !important;
    color: #1A1A1A;
    text-align: center !important;
    border-bottom: 1px solid #EDEDED;
    border-bottom-color: var(--k-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; }

table.tab-score tr.top-scrore-table td{
    background-color: #1A1A1A;
    background-color: var(--k-ink);
    color: #FFF;
    font-family: 'Orbitron', 'Ubuntu', Arial, sans-serif;
    font-style: normal;      /* Orbitron nao tem italico real: a 11px o oblíquo sintetico atrapalha */
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-bottom: 0;
    padding: 9px 6px;
}
/* o cabecalho da coluna PILOTO acompanha o alinhamento dos nomes */
table.tab-score tr.top-scrore-table td.th-piloto{ text-align: left !important; padding-left: 8px !important; }

table.tab-score td.tdTopoC{
    background-color: #2E7D1E;
    background-color: var(--k-green-solid);
    color: #FFF;
    font-family: 'Orbitron', 'Ubuntu', Arial, sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 11px 8px;
    border-bottom: 0;
}
table.tab-score td.score-position{ width: 56px; }
table.tab-score tr:last-child td{ border-bottom: 0; }

/* linha de corte: ultima posicao que vai para a final */
table.tab-score tr.corte-final td{ border-bottom: 3px solid #1A1A1A; }

/* pontuacao com punicao — o PHP manda color:red inline, aqui vira um vermelho legivel */
table.tab-score td strong[style*="red"]{ color: #A31200 !important; color: var(--k-red-pun) !important; }
table.tab-score td strong{ font-weight: 700; }

/* legenda das faixas de cor */
.mural-legenda{
    margin: -6px 0 20px 0;
    font-size: 12.5px;
    color: #575757;
    color: var(--k-muted);
}
.mural-legenda span{ display: inline-block; margin-right: 18px; white-space: nowrap; }
.mural-legenda i{
    display: inline-block;
    width: 13px; height: 13px;
    margin-right: 6px;
    vertical-align: -2px;
    border: 1px solid #C9C9C9;
}
.mural-legenda .lg-final{ background: #FFFF99; }
.mural-legenda .lg-descarte{ background: #ffefd8; }
.mural-legenda .lg-corte{ background: #1A1A1A; height: 3px; vertical-align: 3px; border: 0; }

.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: #575757;
    color: var(--k-muted);
    font-size: 14px;
}

/* ---------- 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){
    .mural-titulo h3{ margin-top: 18px; font-size: 24px; text-align: center; }
    .mural-titulo h3 .point-little{ font-size: 18px; }
    .logo-torneio{ height: 120px; }
    .mural-topbar{ height: 56px; padding: 0 16px; justify-content: center; }
    .mural-topbar-logo{ width: 135px; background-size: auto 26px; background-position: center center; }
    table.tab-score{ font-size: 12px; }
}
@media (max-width: 767px){
    .text-right{ text-align: center !important; }
    table.tab-score{ font-size: 11.5px; }
    table.tab-score td{ padding: 4px 3px; }
    /* 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: 20px; }
}

/* ---------- impressao (grid na pista) ---------- */
@media print{
    body{ background: #FFF !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:after{ display: none; }

    /* o Chrome imprime sem fundo por padrao: sem isto o cabecalho preto da
       tabela e as faixas amarelas de classificado/descarte somem do papel */
    table.tab-score,
    table.tab-score td,
    .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; }
}