:root {
    /* Paleta alinhada à do site em produção (campeonato.projetorevelacao.com.br) */
    --bg: #16293c;
    --bg-nav: #1f3650;
    --bg-cartao: #1f3650;
    --bg-cartao-alt: #28425f;
    --borda: #35506e;
    --verde: #22c55e;
    --verde-escuro: #16a34a;
    --amarelo: #f2c744;
    --amarelo-claro: #f6d878;
    --amarelo-escuro: #d6a81f;
    --texto: #f2f5f8;
    --texto-suave: #a9b8c9;
    --texto-fraco: #7e8fa3;
    --vermelho: #ef4444;
    --azul: #3b82f6;
    --roxo: #a855f7;
    --laranja: #f97316;
    --ciano: #06b6d4;
}

* { box-sizing: border-box; }

html { scroll-padding-top: 84px; }

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: var(--bg);
    color: var(--texto);
}

.topo {
    background: var(--bg-nav);
    border-bottom: 3px solid var(--amarelo);
    color: #fff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.topo .marca {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topo a {
    color: #fff;
    text-decoration: none;
}

.topo h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.topo .subtitulo {
    font-size: 0.82rem;
    color: var(--texto-suave);
}

.topo-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Botões de ação do menu admin: com fundo sólido (não só borda), pra
   destacar mais contra o fundo escuro do .topo do que o verde padrão
   do resto do site, que "some" ali. */
.topo-acoes .botao {
    background: var(--amarelo);
    color: #3a2c00;
    font-size: 0.85rem;
    padding: 8px 14px;
}

.topo-acoes .botao:hover { background: var(--amarelo-escuro); }

.topo-acoes .botao.secundario {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--borda);
    color: var(--texto-suave);
}

.topo-acoes .botao.secundario:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--amarelo);
    color: #fff;
}

/* Bloco "conta": nome do admin + botão Sair de verdade (antes era só um
   link de texto cinza-claro, quase invisível contra o fundo escuro). */
.topo-conta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 12px;
    margin-left: 4px;
    border-left: 1px solid var(--borda);
}

.topo-conta-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-cartao-alt);
    border: 1px solid var(--borda);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--amarelo);
    flex-shrink: 0;
}

.topo-conta-nome {
    color: var(--texto-suave);
    font-size: 0.85rem;
    white-space: nowrap;
}

.botao-sair {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid var(--vermelho);
    color: #ffb4b4;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
}

.botao-sair:hover { background: rgba(239, 68, 68, 0.22); color: #fff; }

/* Hambúrguer do menu admin (mobile) - mesmo padrão do cabeçalho
   público, com classes próprias pra não colidir com aquele. */
.admin-menu-hamburguer {
    display: none;
}

@media (max-width: 860px) {
    .admin-menu-hamburguer {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        font-size: 1.2rem;
        line-height: 1;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid var(--borda);
        border-radius: 6px;
        color: #fff;
        cursor: pointer;
        flex-shrink: 0;
    }

    .topo-acoes {
        display: none;
        position: fixed;
        left: 10px;
        right: 10px;
        margin-top: 6px;
        background: #0f172a;
        border: 1px solid rgba(255, 255, 255, .15);
        border-radius: 10px;
        padding: 14px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        z-index: 9999;
    }

    .topo-acoes.aberto {
        display: flex;
    }

    .topo-acoes .botao,
    .topo-acoes .botao-sair {
        width: 100%;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
    }

    .topo-conta {
        border-left: none;
        border-top: 1px solid var(--borda);
        padding-left: 0;
        margin-left: 0;
        padding-top: 10px;
        justify-content: space-between;
    }
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}

.cartao {
    background: var(--bg-cartao);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

h2 {
    margin-top: 0;
    color: #fff;
}

h3 {
    color: var(--texto);
}

.grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.campeonato-card {
    display: block;
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 16px;
    text-decoration: none;
    color: var(--texto);
    background: var(--bg-cartao);
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}

.campeonato-card-capa {
    display: block;
    width: calc(100% + 32px);
    height: 140px;
    object-fit: cover;
    margin: -16px -16px 12px -16px;
    background: var(--bg-cartao-alt);
}

.campeonato-card-capa-vazia {
    width: calc(100% + 32px);
    height: 140px;
    margin: -16px -16px 12px -16px;
    background: linear-gradient(160deg, var(--bg-cartao-alt) 0%, var(--bg-cartao) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    opacity: 0.25;
}

.campeonato-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
    border-color: var(--amarelo);
}

.campeonato-card h3 {
    margin: 0 0 6px 0;
    color: #fff;
}

.tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bg-cartao-alt);
    color: var(--texto-suave);
    border: 1px solid var(--borda);
}

.tag.finalizado { background: var(--amarelo); color: #3a2c00; border-color: var(--amarelo); }
.tag.em_andamento { background: rgba(34, 197, 94, 0.15); color: var(--verde); border-color: var(--verde); }
.tag.configuracao { background: rgba(148, 163, 184, 0.12); color: var(--texto-suave); }
.tag.status-online { background: rgba(34, 197, 94, 0.15); color: var(--verde); border-color: var(--verde); }
.tag.status-offline { background: rgba(239, 68, 68, 0.12); color: var(--vermelho); border-color: var(--vermelho); }

.botao {
    display: inline-block;
    background: var(--verde);
    color: #06210f;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.botao:hover { background: var(--verde-escuro); }

.botao.secundario {
    background: transparent;
    color: var(--texto);
    border: 1px solid var(--borda);
}

.botao.secundario:hover { border-color: var(--amarelo); color: #fff; }

.botao.perigo {
    background: transparent;
    color: var(--vermelho);
    border: 1px solid var(--vermelho);
}

.botao.perigo:hover { background: rgba(239, 68, 68, 0.12); }

.botao.amarelo {
    background: var(--amarelo);
    color: #3a2c00;
}

.botao.amarelo:hover { background: var(--amarelo-escuro); }

.botao.azul {
    background: var(--azul);
    color: #fff;
}

.botao.azul:hover { background: #2563eb; }

.botao.pequeno {
    padding: 5px 10px;
    font-size: 0.82rem;
}

form .campo {
    margin-bottom: 16px;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 0.92rem;
    color: var(--texto);
}

.ajuda {
    color: var(--texto-suave);
    font-size: 0.82rem;
    margin-top: 3px;
}

input[type=text], input[type=number], input[type=email], input[type=password], select {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--borda);
    border-radius: 6px;
    font-size: 0.95rem;
    background: var(--bg-cartao-alt);
    color: var(--texto);
}

input[type=text]:focus, input[type=number]:focus, input[type=email]:focus, input[type=password]:focus, select:focus {
    outline: none;
    border-color: var(--amarelo);
}

textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--borda);
    border-radius: 6px;
    font-size: 0.95rem;
    background: var(--bg-cartao-alt);
    color: var(--texto);
    font-family: inherit;
    resize: vertical;
}

textarea:focus {
    outline: none;
    border-color: var(--amarelo);
}

/* Cards de notícia (grade da página pública "Notícias") - mesmo visual
   dos campeonato-card, só que com uma imagem de capa em cima. */
.noticia-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--borda);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-cartao);
    text-decoration: none;
    color: var(--texto);
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}

.noticia-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
    border-color: var(--amarelo);
}

.noticia-card .noticia-capa {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
    background: var(--bg-cartao-alt);
}

.noticia-capa-vazia {
    width: 100%;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    background: var(--bg-cartao-alt);
    color: var(--texto-suave);
}

.noticia-card-corpo {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.noticia-card-corpo h3 {
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
}

.noticia-card-data {
    color: var(--texto-suave);
    font-size: 0.8rem;
}

.noticia-card-resumo {
    color: var(--texto-suave);
    font-size: 0.88rem;
    flex: 1;
    margin: 0;
}

.noticia-artigo img.capa {
    width: 100%;
    max-height: 520px;
    /* "contain" em vez de "cover": mostra a imagem inteira, sem cortar
       topo/base quando ela é mais alta que a proporção da largura do
       card - se sobrar espaço, fica uma "moldura" no fundo do cartão. */
    object-fit: contain;
    background: var(--bg-cartao-alt);
    border-radius: 10px;
    margin-bottom: 20px;
}

.noticia-artigo .conteudo {
    line-height: 1.8;
    color: var(--texto);
}

.noticia-artigo .conteudo img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* O Quill salva o alinhamento como essas classes (ql-align-*) no próprio
   HTML do conteúdo - no editor elas já funcionam porque a página carrega
   o quill.snow.css inteiro, mas aqui na notícia publicada (noticia.php)
   não tem esse CSS, então sem essas regras o texto sempre saía alinhado
   à esquerda mesmo depois de centralizar/alinhar no editor. */
.noticia-artigo .conteudo .ql-align-center { text-align: center; }
.noticia-artigo .conteudo .ql-align-right { text-align: right; }
.noticia-artigo .conteudo .ql-align-justify { text-align: justify; }

/* Editor de texto rico (Quill) usado em criar_noticia.php / editar_noticia.php,
   adaptado pro tema escuro do resto do site (o skin "snow" original é claro). */
.editor-quill { background: #fff; border-radius: 0 0 6px 6px; }

.ql-toolbar.ql-snow {
    background: var(--bg-cartao-alt);
    border: 1px solid var(--borda);
    border-radius: 6px 6px 0 0;
}

.ql-container.ql-snow {
    background: var(--bg-cartao-alt);
    border: 1px solid var(--borda);
    border-top: none;
    border-radius: 0 0 6px 6px;
    min-height: 220px;
    color: var(--texto);
    font-size: 0.95rem;
}

.ql-editor { min-height: 220px; }
.ql-editor.ql-blank::before { color: var(--texto-suave); font-style: normal; }

/* !important nestas regras porque o quill.snow.css oficial (carregado via
   CDN DEPOIS deste arquivo, lá embaixo da página) tem os mesmos seletores
   com cores escuras (pensadas pra fundo branco) e, carregando por último,
   vencia o nosso tema escuro — deixando os ícones da barra praticamente
   invisíveis em cima do fundo escuro. */
.ql-snow .ql-stroke { stroke: var(--texto-suave) !important; }
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: var(--texto-suave) !important; }
.ql-snow .ql-picker { color: var(--texto-suave) !important; }
.ql-snow .ql-picker-label { color: var(--texto-suave) !important; }
.ql-toolbar.ql-snow .ql-picker-label::before { color: var(--texto-suave) !important; }

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke {
    stroke: var(--amarelo) !important;
}

.ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active,
.ql-snow .ql-picker-label:hover, .ql-snow .ql-picker-label.ql-active {
    color: var(--amarelo) !important;
}

.ql-snow .ql-picker-options {
    background: var(--bg-cartao-alt) !important;
    border-color: var(--borda) !important;
}

.ql-snow .ql-picker-options .ql-picker-item {
    color: var(--texto) !important;
}

.ql-snow .ql-tooltip {
    background: var(--bg-cartao-alt);
    border-color: var(--borda);
    color: var(--texto);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.ql-snow .ql-tooltip input[type=text] {
    background: var(--bg-cartao);
    color: var(--texto);
    border-color: var(--borda);
}

.linha {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.linha > .campo { flex: 1; min-width: 200px; }

/* "Próximos jogos" e "Últimos resultados" lado a lado, na aba "Ver jogos"
   da página pública do campeonato. */
.duas-colunas {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.duas-colunas > div {
    flex: 1;
    min-width: 300px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

th, td {
    padding: 10px 10px;
    border-bottom: 1px solid var(--borda);
    text-align: center;
}

th {
    background: var(--verde);
    color: #06210f;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

th:first-child { border-top-left-radius: 6px; }
th:last-child { border-top-right-radius: 6px; }

td.nome-time, th.nome-time { text-align: left; }

table.classificacao tbody tr:nth-child(odd) { background: var(--bg-cartao-alt); }
table.classificacao tbody tr:hover { background: rgba(234, 179, 8, 0.08); }
table.classificacao td:nth-child(3) { color: var(--verde); font-weight: 700; }

.time-cel {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.time-cel:hover { color: var(--amarelo-claro); }

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.avatar.grande {
    width: 46px;
    height: 46px;
    min-width: 46px;
    font-size: 1rem;
}

/* Quando o time já tem um escudo enviado, avatar_time() troca o <span> de
   iniciais por um <img> com essa mesma classe - object-fit garante que a
   foto preenche o círculo sem esticar, mesmo que a imagem não seja quadrada. */
img.avatar {
    object-fit: cover;
    background: var(--bg-cartao);
    border: 1px solid var(--borda);
}

.rodada-titulo {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--texto-suave);
    font-weight: 700;
    margin: 22px 0 10px;
}

/* Card de jogo: nome + escudo do mesmo time sempre juntos numa linha só
   ("Time A [escudo] × [escudo] Time B"), placar embaixo — o nome nunca
   fica numa linha separada dos escudos, senão o "×" do texto desalinha do
   "×" entre os escudos quando um nome é bem maior que o outro. Igual nos
   dois lados, admin e site público. */
.jogo-card {
    background: var(--bg-cartao-alt);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.jogo-card-cabecalho {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.jogo-card-nome {
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.3;
    color: #fff;
    text-decoration: none;
    max-width: 220px;
    word-break: break-word;
}

/* Nome fica numa coluna 1fr de cada lado do escudo/placar (coluna "auto"
   no meio) - assim o placar sempre fica exatamente no centro do card,
   não importa o quanto um nome seja maior que o outro. */
.jogo-card-nome-casa { justify-self: end; text-align: right; }
.jogo-card-nome-fora { justify-self: start; text-align: left; }

a.jogo-card-nome:hover { color: var(--amarelo-claro); }

.jogo-card-escudos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    gap: 16px;
}

.jogo-card-escudos .avatar { flex: none; }

.jogo-card-x {
    color: var(--texto-fraco);
    font-weight: 700;
    font-size: 0.95rem;
}

.jogo-card .jogo-card-rodape {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Placar somente leitura (site público), agora dentro da linha de
   escudos - versão compacta de .placar-somente-leitura. */
.placar-somente-leitura-inline {
    background: var(--verde);
    color: #06210f;
    font-weight: 800;
    font-size: 1.05rem;
    border-radius: 8px;
    padding: 7px 14px;
    display: inline-flex;
    gap: 6px;
}

.placar-somente-leitura-inline .pill-x { color: #06210f; }

.placar-pill-form {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--verde);
    border-radius: 8px;
    padding: 7px 12px;
}

.placar-pill-form .pill-input {
    width: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: #06210f;
    font-weight: 800;
    font-size: 1.2rem;
    text-align: center;
    -moz-appearance: textfield;
}

.placar-pill-form .pill-input::-webkit-outer-spin-button,
.placar-pill-form .pill-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.placar-pill-form .pill-x {
    color: #06210f;
    font-weight: 700;
}

.placar-indefinido {
    background: var(--bg-cartao);
    border: 1px dashed var(--borda);
    color: var(--texto-suave);
    border-radius: 8px;
    padding: 9px 24px;
    font-weight: 700;
}

.jogo-card .status-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--texto-suave);
    text-align: center;
}

/* Pênaltis lançados no mesmo card do jogo de volta (admin), em vez de um
   jogo/card separado só pra pênaltis. */
.jogo-card .penaltis-mesmo-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--borda);
}

.jogo-card .penaltis-mesmo-card .penaltis-rotulo {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--amarelo);
}

/* Mesma ideia, versão somente leitura (site público). */
.placar-penaltis-publico {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--amarelo);
    margin-top: 4px;
}

/* --------------------------------------------------------
   Cabeçalho público (site.php e demais páginas sem login) - uma
   única barra com logo, menu de abas e botão "Entrar", igual
   ao site de referência.
   -------------------------------------------------------- */
.cabecalho-publico {
    background: var(--bg-nav);
    border-bottom: 2px solid var(--amarelo);
    position: sticky;
    top: 0;
    z-index: 100;
}

.cabecalho-publico-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.marca-publica {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
}

.marca-publica .crest-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: transparent;
    font-size: 1.1rem;
}

/* Quando o ícone é uma imagem enviada (uploads/site/...), ganha o mesmo
   anel dourado usado nos escudos dos times campeões (ver campeao-item
   .avatar) - em vez do fundo verde padrão do fallback de emoji acima. */
.marca-publica .crest-img {
    object-fit: cover;
    background: transparent;
    border: 2px solid var(--amarelo);
    box-shadow: 0 0 10px rgba(242, 199, 68, 0.35);
}

.marca-publica .nome-site {
    font-size: 1.05rem;
    font-weight: 700;
}

.menu-publico {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.menu-publico a {
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--texto-suave);
}

.menu-publico a:hover { color: #fff; }
.menu-publico a.ativo { color: var(--amarelo); }

.botao-entrar {
    background: var(--amarelo);
    color: #3a2c00;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 9px 18px;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
}

.botao-entrar:hover { background: var(--amarelo-escuro); }

.rodape-publico {
    text-align: center;
    color: var(--texto-fraco);
    font-size: 0.85rem;
    padding: 32px 20px 24px;
}

.rodape-publico p { margin: 4px 0; }

.rodape-tagline { color: var(--texto-fraco); }

.abas {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.abas a {
    padding: 8px 14px;
    border-radius: 6px 6px 0 0;
    text-decoration: none;
    color: var(--texto-suave);
    border: 1px solid transparent;
}

.abas a.ativa {
    color: #fff;
    border-color: var(--borda);
    border-bottom-color: var(--bg-cartao);
    background: var(--bg-cartao);
    font-weight: 600;
}

.aviso {
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid var(--amarelo);
    color: var(--amarelo-claro);
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.erro {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid var(--vermelho);
    color: #fca5a5;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.campeao-banner {
    background: var(--bg-cartao-alt);
    border: 1px solid var(--amarelo);
    color: var(--texto);
    padding: 18px 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.campeao-banner .rotulo {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--amarelo);
}

.campeao-banner .nome-campeao {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}

.campeao-banner .vice {
    font-size: 0.85rem;
    color: var(--texto-suave);
    font-weight: 400;
}

.grupo-titulo {
    display: inline-block;
    background: var(--verde);
    color: #06210f;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.rodape {
    text-align: center;
    color: var(--texto-fraco);
    font-size: 0.8rem;
    padding: 20px;
}

.rodape a { color: var(--texto-suave); }

/* --------------------------------------------------------
   Página pública do campeonato (site.php) - sem login
   -------------------------------------------------------- */
.hero-publico {
    margin-bottom: 12px;
}

.hero-selo {
    display: inline-block;
    color: var(--amarelo);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.hero-publico h1 {
    margin: 0 0 10px;
    font-size: 2rem;
    color: #fff;
}

.hero-subtitulo {
    color: var(--texto-suave);
    max-width: 640px;
    margin: 0 0 20px;
}

.hero-botoes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 20px 0 24px;
}

/* Destaque de "Próximos jogos" na parte principal do cabeçalho (hero),
   visível assim que a página abre, sem precisar clicar em "Ver jogos". */
.proximos-destaque {
    background: var(--bg-cartao-alt);
    border: 1px solid var(--verde);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 20px;
}

.proximos-destaque-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.proximos-destaque-cabecalho .rotulo {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--verde);
}

.proximos-destaque .ver-todos-link {
    color: var(--texto-suave);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.proximos-destaque .ver-todos-link:hover { color: var(--amarelo); }

.proximos-destaque .jogo-card:last-child { margin-bottom: 0; }

/* Destaque da "Fase eliminatória" (semifinal + final) na aba "Ver jogos",
   logo depois do card de Times/Jogadores/Jogos e antes de "Todos os
   jogos" — pra separar visualmente o que decide o campeonato do resto
   dos jogos de grupo. */
.mata-mata-destaque {
    background: var(--bg-cartao-alt);
    border: 1px solid var(--amarelo);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 28px;
}

.mata-mata-destaque-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.mata-mata-destaque-cabecalho .rotulo {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--amarelo);
}

.mata-mata-destaque-cabecalho .ajuda { margin-top: 0; }

/* A Grande Final ganha um destaque próprio, centralizado, dentro do bloco
   de fase eliminatória - é o jogo que decide o campeonato. */
.grande-final {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--amarelo);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grande-final-selo {
    display: inline-block;
    background: var(--amarelo);
    color: #3a2c00;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.grande-final .jogo-card {
    width: 100%;
    max-width: 560px;
    border-color: var(--amarelo);
    box-shadow: 0 4px 20px rgba(242, 199, 68, 0.15);
}

.stats-publicas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin-top: 8px;
}

.stat-publico {
    background: var(--bg-cartao);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 16px 18px;
}

.stat-publico .valor {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--amarelo);
    line-height: 1.2;
}

.stat-publico .rotulo {
    color: var(--texto-suave);
    font-size: 0.85rem;
}

.secao-publica {
    margin-top: 36px;
}

.secao-publica .secao-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.secao-publica h2 {
    color: #fff;
    font-size: 1.25rem;
    margin: 0;
}

.placar-somente-leitura {
    background: var(--verde);
    color: #06210f;
    font-weight: 800;
    font-size: 1.2rem;
    border-radius: 8px;
    padding: 9px 20px;
    display: inline-flex;
    gap: 6px;
}

.placar-somente-leitura .pill-x { color: #06210f; }

.times-grid-publico {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.times-grid-publico .item-time {
    padding: 6px 16px 6px 6px;
}

.lista-times {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.lista-times .item-time {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-cartao-alt);
    border: 1px solid var(--borda);
    padding: 4px 4px 4px 12px;
    border-radius: 999px;
    font-size: 0.88rem;
    color: var(--texto);
}

.lista-times .item-time button {
    border: none;
    background: none;
    color: var(--vermelho);
    cursor: pointer;
    font-weight: 700;
    padding: 2px 8px;
}

.lista-jogadores {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.jogador-linha {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: var(--bg-cartao-alt);
    border: 1px solid var(--borda);
    border-radius: 8px;
}

.jogador-numero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--verde);
    color: #06210f;
    font-weight: 800;
    font-size: 0.85rem;
}

.jogador-nome {
    flex: 1;
    font-weight: 600;
    color: var(--texto);
}

.jogador-posicao {
    color: var(--texto-suave);
    font-size: 0.85rem;
    min-width: 90px;
}

.lista-estatistica {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.estatistica-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--bg-cartao-alt);
    border: 1px solid var(--borda);
    border-radius: 8px;
}

.estatistica-pos {
    color: var(--texto-suave);
    font-weight: 700;
    min-width: 22px;
}

.estatistica-nome {
    flex: 1;
    font-weight: 600;
    color: var(--texto);
}

.estatistica-valor.gols {
    color: var(--verde);
    font-weight: 800;
    font-size: 1.05rem;
    min-width: 24px;
    text-align: right;
}

.cartao-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.85rem;
}

.cartao-badge.amarelo { background: var(--amarelo); color: #3a2c00; }
.cartao-badge.vermelho { background: var(--vermelho); color: #fff; }

/* Card "Destaques em Campo" - slideshow rotativo da página inicial,
   alimentado pelas últimas Notícias com capa (ver destaques_rotativos_html
   em includes/funcoes.php). */
.destaques-rotativos {
    background: var(--bg-cartao);
    border: 1px solid var(--borda);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.destaques-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--borda);
    flex-wrap: wrap;
}

.destaques-topo-titulo { display: flex; align-items: center; gap: 10px; }
.destaques-icone { font-size: 1.3rem; }

.destaques-titulo-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.destaques-titulo-linha strong {
    color: #fff;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.destaques-badge {
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(34, 197, 94, 0.15);
    color: var(--verde);
    border: 1px solid var(--verde);
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.destaques-controles { display: flex; align-items: center; gap: 10px; }
.destaques-contador { font-size: 0.8rem; color: var(--texto-suave); font-weight: 700; }

.destaques-botao-icone {
    background: var(--bg-cartao-alt);
    border: 1px solid var(--borda);
    color: var(--texto-suave);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 0.85rem;
}

.destaques-botao-icone:hover { color: var(--amarelo); border-color: var(--amarelo); }

.destaques-progresso { width: 100%; height: 3px; background: var(--bg-cartao-alt); }
#destaque-progresso-barra {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--verde), var(--amarelo));
}

.destaques-palco {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    max-height: 420px;
    background: var(--bg-cartao-alt);
    overflow: hidden;
}

.destaques-palco a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}

.destaques-palco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.destaques-sombra {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.15) 60%, transparent);
    pointer-events: none;
}

.destaques-texto {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 22px;
}

.destaques-texto h3 { margin: 0 0 6px; color: #fff; font-size: 1.2rem; }
.destaques-texto p { margin: 0; color: var(--texto-suave); font-size: 0.88rem; max-width: 640px; }

.destaques-seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid var(--borda);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.destaques-seta:hover { border-color: var(--amarelo); color: var(--amarelo); }
.destaques-seta-esquerda { left: 14px; }
.destaques-seta-direita { right: 14px; }

.destaques-pontos {
    position: absolute;
    bottom: 14px;
    right: 20px;
    display: flex;
    gap: 6px;
    z-index: 5;
}

.destaque-ponto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.2s;
}

.destaque-ponto.ativo { width: 22px; border-radius: 4px; background: var(--amarelo); }

.destaques-miniaturas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 8px;
    padding: 12px 16px;
}

.destaque-miniatura {
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background: none;
    opacity: 0.6;
    transition: all 0.2s;
    aspect-ratio: 16 / 10;
}

.destaque-miniatura.ativo { border-color: var(--amarelo); opacity: 1; }
.destaque-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Card "Campeões" - mostra o time campeão de cada campeonato finalizado,
   em destaque na página inicial, acima do card de Destaques (ver
   campeoes_html em includes/funcoes.php). */
.campeoes-card {
    position: relative;
    background: linear-gradient(160deg, var(--bg-cartao) 0%, #2a2410 140%);
    border: 1px solid var(--amarelo);
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 20px;
    box-shadow: 0 0 34px rgba(242, 199, 68, 0.1);
    overflow: hidden;
}

.campeoes-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--amarelo-escuro), var(--amarelo-claro), var(--amarelo-escuro));
}

.campeoes-titulo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.campeoes-titulo .campeoes-icone {
    font-size: 1.35rem;
    filter: drop-shadow(0 0 8px rgba(242, 199, 68, 0.55));
}

.campeoes-titulo strong {
    color: #fff;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.campeoes-titulo .campeoes-sub {
    color: var(--texto-suave);
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

.campeoes-grade {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.campeao-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-cartao-alt);
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 12px 18px 12px 14px;
    text-decoration: none;
    flex: 1 1 240px;
    min-width: 220px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.campeao-item::after {
    content: '🏆';
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 0.8rem;
    opacity: 0.55;
}

.campeao-item:hover {
    transform: translateY(-3px);
    border-color: var(--amarelo);
    box-shadow: 0 10px 22px rgba(242, 199, 68, 0.2);
}

.campeao-item .avatar {
    border: 2px solid var(--amarelo);
    box-shadow: 0 0 14px rgba(242, 199, 68, 0.4);
}

.campeao-nome-time { color: #fff; font-weight: 700; font-size: 0.98rem; }
.campeao-nome-campeonato { color: var(--texto-suave); font-size: 0.78rem; margin-top: 2px; }

/* Rodapé com as informações do site (ver rodape_site_html em
   includes/funcoes.php) - cadastradas em configuracoes_site.php e
   usadas em todas as páginas, admin e públicas. */
.rodape-site {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 28px 20px 22px;
    margin-top: 20px;
    border-top: 1px solid var(--borda);
    color: var(--texto-fraco);
    font-size: 0.85rem;
}

.rodape-site-marca {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rodape-site-icone {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    object-fit: cover;
}

.rodape-site-icone-vazio { font-size: 1.2rem; }

.rodape-site-nome {
    color: var(--texto);
    font-weight: 700;
    font-size: 0.95rem;
}

.rodape-site-contato {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    font-size: 0.82rem;
}

.rodape-site-contato a { color: var(--texto-suave); text-decoration: none; }
.rodape-site-contato a:hover { color: var(--amarelo); }

.rodape-site-copyright { color: var(--texto-fraco); font-size: 0.78rem; }

/* Botão flutuante do WhatsApp - ver whatsapp_flutuante_html em
   includes/funcoes.php. Só é renderizado quando há telefone cadastrado. */
.whatsapp-flutuante {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    z-index: 999;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-flutuante:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

/* ==========================================================
   RESPONSIVO / MOBILE
   O CSS acima não tinha nenhuma @media - em telas estreitas
   vários blocos flex (principalmente o grupo de botões do
   .topo, que vem com style inline "display:flex" sem
   flex-wrap) ficavam numa linha só e estouravam a largura da
   tela, forçando scroll horizontal ("tudo expandido").
   ========================================================== */

@media (max-width: 768px) {

    /* Área logada: o bloco de botões do topo (.topo-acoes) agora vira
       um menu hambúrguer a partir de 860px (ver regra própria acima),
       então aqui só resta ajustar o espaçamento do cabeçalho em si. */
    .topo {
        padding: 12px 16px;
    }

    /* Cabeçalho público (site.php) já tinha flex-wrap, mas o
       padding grande + logo/menu/botão juntos ainda apertava. */
    .cabecalho-publico-inner {
        padding: 12px 16px;
        justify-content: center;
        text-align: center;
    }

    .menu-publico {
        justify-content: center;
        width: 100%;
    }

    .container {
        padding: 16px;
    }

    .cartao {
        padding: 16px;
    }

    .botao {
        padding: 9px 14px;
        font-size: 0.9rem;
    }

    /* Grid de campeonatos/notícias: em telas bem estreitas o
       minmax(280px, 1fr) ainda pode não caber; força 1 coluna. */
    .grade {
        grid-template-columns: 1fr;
    }

    /* Tabelas (classificação, etc.) são a causa nº 1 de scroll
       horizontal em sites de futebol. Em vez de vazar a tela
       inteira, cada tabela ganha seu próprio scroll lateral. */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    th, td {
        padding: 8px 6px;
        font-size: 0.85rem;
    }

    .hero-publico h1 {
        font-size: 1.5rem;
    }

    .jogo-card {
        padding: 16px 12px;
    }

    .jogo-card-nome {
        font-size: 0.9rem;
        max-width: 120px;
    }

    .jogo-card-escudos {
        gap: 8px;
    }

    .secao-publica .secao-cabecalho {
        flex-wrap: wrap;
    }

    .duas-colunas > div {
        min-width: 100%;
    }
}

@media (max-width: 400px) {
    .destaques-texto h3 {
        font-size: 1rem;
    }

    .destaques-texto p {
        display: none;
    }

    .stat-publico .valor {
        font-size: 1.4rem;
    }
}

/* Card de jogo no mobile (admin E site público, já que os dois usam a
   mesma função jogo_card_cabecalho() em includes/funcoes.php): escudo
   casa | placar | escudo fora numa linha, e os nomes numa linha embaixo,
   cada nome alinhado exatamente com o escudo do seu time (a célula do
   meio, embaixo do placar, fica vazia - "."). Como escudo-casa/
   escudo-fora ficam dentro de .jogo-card-escudos (não são filhos diretos
   de .jogo-card-cabecalho), usa display:contents nesse container pra
   "dissolvê-lo" e deixar os escudos entrarem direto neste grid. */
@media (max-width: 640px) {
    .jogo-card-cabecalho {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas:
            "escudoCasa placar escudoFora"
            "nomeCasa   .      nomeFora";
        row-gap: 8px;
        column-gap: 14px;
    }

    .jogo-card-escudos {
        display: contents;
    }

    .jogo-card-escudo-casa { grid-area: escudoCasa; justify-self: center; }
    .jogo-card-escudo-fora { grid-area: escudoFora; justify-self: center; }

    .jogo-card-escudos > .placar-somente-leitura-inline,
    .jogo-card-escudos > .jogo-card-x,
    .jogo-card-escudos > .placar-pill-form {
        grid-area: placar;
        justify-self: center;
        align-self: center;
    }

    .jogo-card-nome-casa,
    .jogo-card-nome-fora {
        justify-self: center;
        text-align: center !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word;
        max-width: 100% !important;
    }
    .jogo-card-nome-casa { grid-area: nomeCasa; }
    .jogo-card-nome-fora { grid-area: nomeFora; }

    /* Card maior e mais espaçoso no mobile - aproveita a largura toda:
       escudo maior, textos maiores, mais respiro. */
    .jogo-card {
        padding: 20px 18px;
        border-radius: 14px;
        gap: 14px;
    }

    .jogo-card-nome {
        font-size: 1.02rem;
    }

    .jogo-card-escudos .avatar.grande {
        width: 58px;
        height: 58px;
        min-width: 58px;
        font-size: 1.15rem;
    }

    .placar-somente-leitura-inline {
        font-size: 1.15rem;
        padding: 9px 18px;
    }

    .jogo-card .status-label {
        margin-top: 4px;
        font-size: 0.74rem;
    }
}

html, body {
    overflow-x: hidden;
}