* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --azul-escuro: #003b70;
    --azul: #006cb7;
    --vermelho: #d71920;
    --branco: #ffffff;
    --cinza-claro: #f4f6f8;
    --cinza: #68717d;
    --texto: #18202a;
    --largura-container: 1180px;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--cinza-claro);
    color: var(--texto);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: min(100% - 32px, var(--largura-container));
    margin: 0 auto;
}

.cabecalho {
    background-color: var(--azul-escuro);
    color: var(--branco);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.cabecalho-conteudo {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo {
    font-size: 1.4rem;
    font-weight: 700;
}

.navegacao {
    display: flex;
    align-items: center;
    gap: 20px;
}

.navegacao a {
    font-size: 0.95rem;
}

.navegacao a:hover {
    color: #b8dcf4;
}

.botao-menu {
    display: none;
    background: none;
    border: none;
    color: var(--branco);
    cursor: pointer;
    font-size: 1.8rem;
}

.hero {
    min-height: 520px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            135deg,
            var(--azul-escuro),
            var(--azul)
        );
    color: var(--branco);
}

.hero .container {
    max-width: 800px;
}

.hero h1 {
    max-width: 700px;
    margin: 16px 0;
    font-size: clamp(2.4rem, 7vw, 5rem);
    line-height: 1.05;
}

.hero p {
    max-width: 640px;
    font-size: 1.1rem;
}

.destaque {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    font-size: 0.9rem;
}

.acoes-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.botao {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
}

.botao-principal {
    background-color: var(--vermelho);
    color: var(--branco);
}

.botao-secundario {
    border: 1px solid var(--branco);
    color: var(--branco);
}

.secao {
    padding: 64px 0;
}

.secao h1,
.secao h2 {
    margin-bottom: 24px;
}

.grade-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.card {
    background-color: var(--branco);
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
}

.card h3 {
    margin-bottom: 12px;
    color: var(--azul-escuro);
}

.rodape {
    background-color: #101923;
    color: var(--branco);
    padding: 32px 0;
    text-align: center;
}

.rodape p + p {
    margin-top: 8px;
    color: #b8c1cc;
    font-size: 0.85rem;
}

@media (max-width: 850px) {
    .botao-menu {
        display: block;
    }

    .navegacao {
        display: none;
        position: absolute;
        top: 72px;
        right: 0;
        left: 0;
        background-color: var(--azul-escuro);
        padding: 20px 16px;
        flex-direction: column;
        align-items: flex-start;
    }

    .navegacao.aberta {
        display: flex;
    }

    .grade-cards {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: 470px;
    }
}

.jogador {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #003b70;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    padding: 6px;
    cursor: pointer;
}

.area-montador {
    display: grid;
    grid-template-columns: minmax(280px, 460px) minmax(280px, 1fr);
    gap: 32px;
    align-items: start;
}

.campo {
    position: relative;

    width: 100%;

    /*
     * ALTERE ESTE VALOR PARA AUMENTAR OU
     * DIMINUIR A LARGURA MÁXIMA DO CAMPO.
     */
    max-width: 430px;

    /*
     * Mantém a aparência vertical
     * de um campo de futebol.
     */
    aspect-ratio: 3 / 5;

    margin: 0 auto;

    overflow: hidden;

    border: 4px solid #ffffff;
    border-radius: 16px;

    background:
        repeating-linear-gradient(
            to bottom,
            #218c42 0,
            #218c42 10%,
            #197c38 10%,
            #197c38 20%
        );

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.18);
}

.campo::before {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    border-top: 2px solid rgba(255, 255, 255, 0.85);
}

.campo::after {
    content: "";
    position: absolute;
    width: 24%;
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/*
 * =========================================================
 * MONTE SEU BAHIA — MARCAÇÕES DO CAMPO
 * =========================================================
 */

.area-campo,
.pequena-area-campo,
.marca-penalti,
.marca-centro-campo {
    position: absolute;

    /*
     * As marcações não podem capturar
     * o toque destinado aos jogadores.
     */
    pointer-events: none;

    z-index: 1;
}


/*
 * =========================================================
 * GRANDES ÁREAS
 * =========================================================
 */

.area-campo {
    left: 20%;

    width: 60%;
    height: 17%;

    border: 2px solid
        rgba(255, 255, 255, 0.82);
}

.area-campo-superior {
    top: -2px;

    border-top: none;
}

.area-campo-inferior {
    bottom: -2px;

    border-bottom: none;
}


/*
 * =========================================================
 * PEQUENAS ÁREAS
 * =========================================================
 */

.pequena-area-campo {
    left: 34%;

    width: 32%;
    height: 7%;

    border: 2px solid
        rgba(255, 255, 255, 0.82);
}

.pequena-area-superior {
    top: -2px;

    border-top: none;
}

.pequena-area-inferior {
    bottom: -2px;

    border-bottom: none;
}


/*
 * =========================================================
 * MARCAS DE PÊNALTI
 * =========================================================
 */

.marca-penalti {
    left: 50%;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background-color:
        rgba(255, 255, 255, 0.9);

    transform: translateX(-50%);
}

.marca-penalti-superior {
    top: 11%;
}

.marca-penalti-inferior {
    bottom: 11%;
}


/*
 * =========================================================
 * PONTO CENTRAL
 * =========================================================
 */

.marca-centro-campo {
    top: 50%;
    left: 50%;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background-color:
        rgba(255, 255, 255, 0.9);

    transform:
        translate(-50%, -50%);
}

.posicao-campo {
    position: absolute;
    z-index: 2;
    width: 72px;
    min-height: 72px;
    padding: 6px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background-color: #003b70;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.posicao-campo:hover,
.posicao-campo:focus {
    background-color: #006cb7;
    outline: 3px solid rgba(255, 255, 255, 0.55);
}

.posicao-campo .sigla {
    display: block;
    font-size: 0.7rem;
    opacity: 0.8;
}

.posicao-campo .nome-jogador {
    display: block;
    line-height: 1.1;
}

@media (max-width: 850px) {
    .area-montador {
        grid-template-columns: 1fr;
    }

    .posicao-campo {
        width: 60px;
        min-height: 60px;
        font-size: 0.68rem;
    }
}

.cabecalho-pagina {
    margin-bottom: 32px;
}

.cabecalho-pagina h1 {
    margin: 10px 0;
}

.destaque-escuro {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--azul-escuro);
    border-radius: 999px;
    color: var(--azul-escuro);
    font-size: 0.9rem;
    font-weight: 700;
}

.controles-escalacao {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.campo-formulario {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campo-formulario label {
    font-weight: 700;
}

.campo-formulario select {
    min-width: 180px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #cbd3dc;
    border-radius: 8px;
    background-color: var(--branco);
}

.botao-limpar {
    border: 1px solid #cbd3dc;
    background-color: var(--branco);
    color: var(--texto);
    cursor: pointer;
}

.painel-jogadores {
    padding: 24px;
    border-radius: 16px;
    background-color: var(--branco);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
}

.painel-jogadores h2 {
    margin-bottom: 8px;
}

.lista-jogadores {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.item-jogador {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid #d7dde4;
    border-radius: 8px;
    background-color: var(--branco);
    color: var(--texto);
    cursor: pointer;
    text-align: left;
}

.item-jogador:hover {
    border-color: var(--azul);
    background-color: #eef7fd;
}

.item-jogador.compativel {
    border-left: 5px solid var(--azul);
}

.item-jogador span {
    color: var(--cinza);
    font-size: 0.8rem;
}

.mensagem-aviso {
    padding: 18px;
    border-radius: 8px;
    background-color: #fff3cd;
    color: #664d03;
}

.item-jogador.remover-jogador {
    border-color: #d8a1a1;
    background-color: #fff2f2;
    color: #9b1c1c;
    font-weight: 700;
}

.posicao-campo.selecionada {
    outline: 4px solid #ffd54f;
    outline-offset: 3px;
}

.progresso-escalacao {
    margin-bottom: 20px;
    color: var(--cinza);
    font-weight: 700;
}

.progresso-escalacao.completa {
    color: #19763a;
}

.logo-menu {
    display: block;
    width: auto;
    height: 52px;
    object-fit: contain;
}

.cabecalho {
    min-height: 74px;
    background-color: #064879;
}

.cabecalho-conteudo {
    min-height: 74px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.navbar-brand {
    display: flex !important;
    align-items: center;
    visibility: visible !important;
    opacity: 1 !important;
}

.logo-menu {
    display: block !important;
    width: auto;
    height: 58px;
    object-fit: contain;
    visibility: visible !important;
    opacity: 1 !important;
}

.navegacao {
    display: flex !important;
    align-items: center;
    gap: 22px;
    visibility: visible !important;
    opacity: 1 !important;
}

.navegacao a {
    display: inline-block !important;
    color: #ffffff !important;
    text-decoration: none;
    visibility: visible !important;
    opacity: 1 !important;
}

.pagina-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background:
        linear-gradient(
            135deg,
            var(--azul-escuro),
            var(--azul)
        );
}

.card-login {
    width: 100%;
    max-width: 430px;
    padding: 36px;
    border-radius: 18px;
    background-color: var(--branco);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.25);
}

.logo-login {
    display: block;
    width: auto;
    max-width: 220px;
    height: 90px;
    margin: 0 auto 20px;
    object-fit: contain;
}

.card-login h1 {
    color: var(--azul-escuro);
    text-align: center;
}

.descricao-login {
    margin-bottom: 24px;
    color: var(--cinza);
    text-align: center;
}

.formulario-login {
    display: grid;
    gap: 18px;
}

.campo-login {
    display: grid;
    gap: 6px;
}

.campo-login label {
    font-weight: 700;
}

.campo-login input {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #cbd3dc;
    border-radius: 8px;
    font-size: 1rem;
}

.campo-login input:focus {
    border-color: var(--azul);
    outline: 3px solid rgba(0, 108, 183, 0.15);
}

.botao-login {
    width: 100%;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.mensagem-login-erro {
    margin-bottom: 20px;
    padding: 12px 14px;
    border: 1px solid #f0a7a7;
    border-radius: 8px;
    background-color: #fff0f0;
    color: #9b1c1c;
}

.voltar-site {
    display: block;
    margin-top: 22px;
    color: var(--azul-escuro);
    font-weight: 700;
    text-align: center;
}

.painel-topo {
    background-color: var(--azul-escuro);
    color: var(--branco);
}

.painel-topo-conteudo {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo-painel {
    display: block;
    width: auto;
    height: 60px;
    object-fit: contain;
}

.painel-usuario {
    display: flex;
    align-items: center;
    gap: 18px;
}

.botao-sair {
    padding: 8px 16px;
    border: 1px solid var(--branco);
    border-radius: 8px;
    background: transparent;
    color: var(--branco);
    cursor: pointer;
    font-weight: 700;
}

.pagina-painel {
    padding-top: 48px;
    padding-bottom: 64px;
}

.grade-painel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.card-painel {
    padding: 28px;
    border-radius: 16px;
    background-color: var(--branco);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
}

.card-painel h2 {
    margin-bottom: 10px;
    color: var(--azul-escuro);
}

.card-painel p {
    margin-bottom: 22px;
    color: var(--cinza);
}

.card-indisponivel {
    opacity: 0.75;
}

.etiqueta-em-breve {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background-color: #e4e8ed;
    color: #4c5661;
    font-size: 0.85rem;
    font-weight: 700;
}

@media (max-width: 700px) {
    .grade-painel {
        grid-template-columns: 1fr;
    }

    .painel-topo-conteudo,
    .painel-usuario {
        align-items: flex-start;
        flex-direction: column;
    }

    .painel-topo-conteudo {
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

.mensagem-login-sucesso {
    margin-bottom: 20px;
    padding: 12px 14px;
    border: 1px solid #8dd3a5;
    border-radius: 8px;
    background-color: #edf9f1;
    color: #176b35;
}

.area-usuarios {
    display: grid;
    grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.campo-login select {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #cbd3dc;
    border-radius: 8px;
    background-color: var(--branco);
    font-size: 1rem;
}

.tabela-responsiva {
    width: 100%;
    overflow-x: auto;
}

.tabela-usuarios {
    width: 100%;
    border-collapse: collapse;
}

.tabela-usuarios th,
.tabela-usuarios td {
    padding: 12px;
    border-bottom: 1px solid #dce2e8;
    text-align: left;
    white-space: nowrap;
}

.tabela-usuarios th {
    color: var(--azul-escuro);
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .area-usuarios {
        grid-template-columns: 1fr;
    }
}

.formulario-analise {
    display: grid;
    gap: 22px;
}

.grade-formulario-analise {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.campo-login textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #cbd3dc;
    border-radius: 8px;
    font: inherit;
    line-height: 1.6;
    resize: vertical;
}

.campo-login textarea:focus {
    border-color: var(--azul);
    outline: 3px solid rgba(0, 108, 183, 0.15);
}

.campo-login small {
    color: var(--cinza);
}

.acoes-formulario-analise {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.capa-atual-analise img {
    display: block;
    width: 100%;
    max-width: 420px;
    max-height: 260px;
    margin-top: 8px;
    border-radius: 10px;
    object-fit: cover;
}

.cabecalho-com-acao {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.status-analise {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.status-publicado {
    background-color: #e4f7e9;
    color: #176b35;
}

.status-rascunho {
    background-color: #fff3cd;
    color: #664d03;
}

.acoes-tabela {
    display: flex;
    gap: 12px;
}

.acoes-tabela a {
    color: var(--azul-escuro);
    font-weight: 700;
}

.pagina-analises-publicas {
    padding-top: 56px;
    padding-bottom: 72px;
}

.grade-analises-publicas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.card-analise-publica {
    overflow: hidden;
    border-radius: 16px;
    background-color: var(--branco);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.card-analise-publica > img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.conteudo-card-analise {
    padding: 24px;
}

.conteudo-card-analise h2 {
    margin: 10px 0;
    color: var(--azul-escuro);
    line-height: 1.25;
}

.conteudo-card-analise p {
    margin-bottom: 16px;
    color: var(--cinza);
}

.categoria-analise {
    display: inline-block;
    color: var(--vermelho);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
}

.meta-analise {
    margin-bottom: 20px;
    color: var(--cinza);
    font-size: 0.9rem;
}

.pagina-leitura-analise {
    padding-top: 56px;
    padding-bottom: 72px;
}

.artigo-analise {
    max-width: 900px;
    margin: 0 auto;
    padding: 38px;
    border-radius: 18px;
    background-color: var(--branco);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
}

.cabecalho-artigo-analise h1 {
    margin: 12px 0 16px;
    color: var(--azul-escuro);
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.12;
}

.resumo-artigo {
    margin-bottom: 18px;
    color: var(--cinza);
    font-size: 1.15rem;
}

.imagem-capa-artigo {
    width: 100%;
    max-height: 520px;
    margin: 18px 0 32px;
    border-radius: 14px;
    object-fit: cover;
}

.conteudo-artigo-analise {
    font-size: 1.08rem;
    line-height: 1.85;
}

@media (max-width: 900px) {
    .grade-analises-publicas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .grade-formulario-analise,
    .grade-analises-publicas {
        grid-template-columns: 1fr;
    }

    .cabecalho-com-acao {
        align-items: flex-start;
        flex-direction: column;
    }

    .artigo-analise {
        padding: 24px 18px;
    }

    .acoes-formulario-analise {
        align-items: stretch;
        flex-direction: column;
    }
}

.aviso-previa {
    max-width: 900px;
    margin: 0 auto 20px;
    padding: 14px 18px;
    border: 1px solid #e0bc55;
    border-radius: 10px;
    background-color: #fff7dc;
    color: #664d03;
    font-weight: 700;
}

.area-clubes {
    display: grid;
    grid-template-columns:
        minmax(310px, 410px)
        minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.formulario-clube {
    display: grid;
    gap: 18px;
}

.grade-formulario-clube {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.miniatura-escudo {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.nome-completo-clube {
    display: block;
    margin-top: 3px;
    color: var(--cinza);
    white-space: normal;
}

.acoes-clube {
    display: flex;
    align-items: center;
    gap: 12px;
}

.acoes-clube a,
.acoes-clube button {
    border: none;
    background: transparent;
    color: var(--azul-escuro);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
}

.acoes-clube button:hover,
.acoes-clube a:hover {
    text-decoration: underline;
}

.previa-escudo-clube {
    display: flex;
    padding: 16px;
    border-radius: 10px;
    background-color: #eef2f6;
    align-items: center;
    gap: 18px;
}

.previa-escudo-clube img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.card-edicao-clube {
    max-width: 650px;
    margin: 0 auto;
}

@media (max-width: 950px) {
    .area-clubes {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .grade-formulario-clube {
        grid-template-columns: 1fr;
    }

    .acoes-clube {
        align-items: flex-start;
        flex-direction: column;
    }
}

/*
 * =========================================================
 * GERENCIAMENTO DE JOGOS
 * =========================================================
 */

.area-jogos {
    display: grid;

    /*
     * PRIMEIRA COLUNA:
     * formulário de cadastro.
     *
     * SEGUNDA COLUNA:
     * tabela de partidas.
     */
    grid-template-columns:
        minmax(330px, 430px)
        minmax(0, 1fr);

    gap: 24px;
    align-items: start;
}

.formulario-jogo {
    display: grid;

    /*
     * ALTERE ESTE VALOR PARA MUDAR
     * O ESPAÇO ENTRE OS CAMPOS.
     */
    gap: 18px;
}

@media (max-width: 950px) {
    .area-jogos {
        grid-template-columns: 1fr;
    }
}

.foto-jogador-campo {
    display: block;

    /*
     * ALTERE OS DOIS VALORES PARA MUDAR
     * O TAMANHO DO CÍRCULO.
     */
    width: 58px;
    height: 58px;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background-color: #003b70;

    /*
     * PREENCHE O CÍRCULO SEM DEFORMAR A FOTO.
     */
    object-fit: cover;
    object-position: center top;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.28);
}

/*
 * =========================================================
 * MONTE SEU BAHIA — CONTEXTO DO PRÓXIMO JOGO
 * =========================================================
 */

.contexto-jogo-escalacao {
    display: flex;

    margin-bottom: 28px;
    padding: 20px 24px;

    border: 1px solid #dbe3ea;
    border-radius: 16px;

    background-color: #ffffff;

    align-items: center;
    justify-content: space-between;

    gap: 28px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.06);
}

.clubes-contexto-escalacao {
    display: flex;

    align-items: center;

    gap: 18px;
}

.clube-contexto-escalacao {
    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--azul-escuro);
}

.clube-contexto-escalacao img {
    /*
     * ALTERE ESTES VALORES PARA MUDAR
     * O TAMANHO DOS ESCUDOS.
     */
    width: 48px;
    height: 48px;

    object-fit: contain;
}

.versus-contexto-escalacao {
    color: var(--vermelho);

    font-size: 1.15rem;
    font-weight: 900;
}

.informacoes-contexto-escalacao {
    text-align: right;
}

.informacoes-contexto-escalacao > span {
    display: block;

    color: var(--vermelho);

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.informacoes-contexto-escalacao strong {
    display: block;

    color: var(--azul-escuro);

    font-size: 1.05rem;
}

.informacoes-contexto-escalacao p,
.informacoes-contexto-escalacao small {
    color: var(--cinza);
}

/*
 * =========================================================
 * MONTE SEU BAHIA — POSIÇÕES COM FOTO CIRCULAR
 * =========================================================
 */

.posicao-campo {
    display: flex;

    /*
     * ALTERE ESTES VALORES PARA MUDAR
     * A ÁREA OCUPADA POR CADA JOGADOR.
     */
    width: 90px;
    min-height: 88px;

    padding: 0;

    border: none;
    border-radius: 0;

    background: transparent;

    color: #ffffff;

    align-items: center;
    justify-content: flex-start;

    flex-direction: column;

    cursor: pointer;

    transform: translate(-50%, -50%);
}

.posicao-campo:hover,
.posicao-campo:focus {
    background: transparent;

    outline: none;

    transform:
        translate(-50%, -50%)
        scale(1.04);
}

.circulo-jogador-campo,
.circulo-posicao-vazia {
    display: flex;

    /*
     * ALTERE ESTES DOIS VALORES PARA MUDAR
     * O TAMANHO DA FOTO CIRCULAR NO CAMPO.
     */
    width: 58px;
    height: 58px;

    overflow: hidden;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background-color: var(--azul-escuro);

    align-items: center;
    justify-content: center;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3);
}

.posicao-campo.selecionada {
    outline: none;
    outline-offset: 0;
}

.posicao-campo.selecionada
.circulo-jogador-campo,
.posicao-campo.selecionada
.circulo-posicao-vazia {
    outline: 4px solid #ffd54f;
    outline-offset: 3px;
}

.foto-jogador-campo {
    display: block;

    width: 100%;
    height: 100%;

    /*
     * PREENCHE O CÍRCULO SEM DEFORMAR.
     */
    object-fit: cover;

    /*
     * ALTERE PARA "center center" CASO
     * A FOTO FIQUE MUITO ALTA.
     */
    object-position: center top;
}

.iniciais-jogador-campo {
    display: flex;

    width: 100%;
    height: 100%;

    align-items: center;
    justify-content: center;

    font-size: 0.9rem;
    font-weight: 900;
}

.circulo-posicao-vazia {
    border-style: dashed;

    background-color:
        rgba(0, 59, 112, 0.86);
}

.circulo-posicao-vazia .sigla {
    font-size: 0.75rem;
    font-weight: 900;
}

.posicao-campo .nome-jogador {
    display: block;

    max-width: 90px;

    margin-top: 5px;
    padding: 2px 6px;

    border-radius: 5px;

    background-color:
        rgba(0, 34, 64, 0.88);

    color: #ffffff;

    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.15;

    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * =========================================================
 * MONTE SEU BAHIA — PAINEL DE JOGADORES
 * =========================================================
 */

.topo-painel-jogadores {
    margin-bottom: 18px;
}

.topo-painel-jogadores h2 {
    margin-bottom: 5px;
}

.topo-painel-jogadores p {
    color: var(--cinza);
}

.busca-jogadores {
    display: grid;

    margin-bottom: 16px;

    gap: 6px;
}

.busca-jogadores label {
    color: var(--azul-escuro);

    font-size: 0.85rem;
    font-weight: 800;
}

.busca-jogadores input {
    width: 100%;
    min-height: 46px;

    padding: 10px 12px;

    border: 1px solid #cbd3dc;
    border-radius: 9px;

    background-color: #ffffff;

    font: inherit;
}

.busca-jogadores input:focus {
    border-color: var(--azul);

    outline:
        3px solid rgba(0, 108, 183, 0.15);
}

.busca-jogadores input:disabled {
    background-color: #eef1f4;

    cursor: not-allowed;
}

.resumo-posicao-selecionada {
    display: flex;

    margin-bottom: 14px;
    padding: 10px 12px;

    border-left: 4px solid var(--vermelho);
    border-radius: 6px;

    background-color: #f3f6f9;

    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

/*
 * =========================================================
 * SELETOR DE FUNÇÃO TÁTICA
 * =========================================================
 */

.seletor-funcao-posicao {
    width: 100%;
    min-height: 40px;

    padding: 7px 10px;

    border: 1px solid #cbd3dc;
    border-radius: 7px;

    background-color: #ffffff;

    color: var(--azul-escuro);

    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;

    cursor: pointer;
}

.seletor-funcao-posicao:focus {
    border-color: var(--azul);

    outline:
        3px solid rgba(0, 108, 183, 0.13);
}

.resumo-posicao-selecionada[hidden] {
    display: none;
}

.resumo-posicao-selecionada span {
    color: var(--cinza);

    font-size: 0.78rem;
}

.resumo-posicao-selecionada strong {
    color: var(--azul-escuro);
}

.item-jogador {
    min-height: 64px;

    gap: 12px;
}

.identidade-item-jogador {
    display: flex;

    min-width: 0;

    align-items: center;

    gap: 12px;
}

.miniatura-item-jogador {
    display: flex;

    /*
     * ALTERE ESTES VALORES PARA MUDAR
     * A MINIATURA DA LISTA.
     */
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    overflow: hidden;

    border-radius: 50%;

    background-color: var(--azul-escuro);

    align-items: center;
    justify-content: center;

    color: #ffffff;
}

.foto-item-jogador {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;
}

.iniciais-item-jogador {
    font-size: 0.75rem;
    font-weight: 900;
}

.dados-item-jogador {
    display: flex;

    min-width: 0;

    align-items: flex-start;

    flex-direction: column;
}

.dados-item-jogador strong {
    max-width: 190px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dados-item-jogador small {
    color: var(--cinza);

    font-size: 0.75rem;
}

.etiqueta-compatibilidade {
    flex: 0 0 auto;

    padding: 4px 8px;

    border-radius: 999px;

    background-color: #e8f1f8;

    color: var(--azul-escuro);

    font-size: 0.68rem;
    font-weight: 800;
}

.etiqueta-compatibilidade.ideal {
    background-color: #e4f7e9;

    color: #176b35;
}

.item-jogador.compativel {
    border-left: 5px solid #299854;
}

.item-jogador.compativel-secundario {
    border-left: 5px solid var(--azul);
}

.mensagem-lista-jogadores,
.mensagem-escalacao-completa {
    padding: 18px;

    border-radius: 9px;

    background-color: #f3f6f9;

    color: var(--cinza);

    text-align: center;
}

.mensagem-escalacao-completa {
    display: grid;

    border: 1px solid #8dd3a5;

    background-color: #edf9f1;

    color: #176b35;

    gap: 4px;
}

/*
 * =========================================================
 * MONTE SEU BAHIA — RESUMO DA ESCALAÇÃO
 * =========================================================
 */

.titulo-escalacao-completa {
    font-size: 1.05rem;
}

.resumo-escalacao-final {
    display: grid;

    margin-top: 12px;

    border-top: 1px solid #b7dfc3;
    border-bottom: 1px solid #b7dfc3;

    text-align: left;
}

.resumo-escalacao-final > span {
    display: flex;

    padding: 9px 4px;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    color: var(--cinza);

    font-size: 0.78rem;
}

.resumo-escalacao-final > span + span {
    border-top: 1px solid #d5eadb;
}

.resumo-escalacao-final strong {
    color: #176b35;

    font-size: 0.85rem;
}

.botao-ver-escalacao {
    display: inline-flex;

    width: 100%;
    min-height: 44px;

    margin-top: 12px;
    padding: 8px 16px;

    border: none;
    border-radius: 8px;

    background-color: var(--azul-escuro);

    color: #ffffff;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    font-weight: 800;
}

@media (max-width: 850px) {
    .contexto-jogo-escalacao {
        align-items: flex-start;
        flex-direction: column;
    }

    .informacoes-contexto-escalacao {
        text-align: left;
    }

    .posicao-campo {
        width: 76px;
        min-height: 76px;
    }

    .circulo-jogador-campo,
    .circulo-posicao-vazia {
        width: 48px;
        height: 48px;
    }

    .posicao-campo .nome-jogador {
        max-width: 76px;

        font-size: 0.6rem;
    }
}

@media (max-width: 520px) {
    .clubes-contexto-escalacao {
        width: 100%;

        justify-content: space-between;

        gap: 8px;
    }

    .clube-contexto-escalacao {
        flex-direction: column;

        font-size: 0.8rem;
        text-align: center;
    }

    .clube-contexto-escalacao img {
        width: 40px;
        height: 40px;
    }
}


/*
 * =========================================================
 * MONTE SEU BAHIA — NAVEGAÇÃO MOBILE
 * =========================================================
 */

/*
 * Evita que o cabeçalho fixo cubra o conteúdo
 * quando usamos scrollIntoView().
 */
.campo,
.painel-jogadores {
    scroll-margin-top: 95px;
}


/*
 * =========================================================
 * BOTÃO "VER CAMPO"
 * =========================================================
 *
 * No desktop ele não é necessário porque campo
 * e jogadores aparecem lado a lado.
 */

.botao-voltar-campo {
    display: none;

    min-height: 34px;
    padding: 5px 10px;

    border: 1px solid var(--azul);
    border-radius: 7px;

    background-color: #ffffff;

    color: var(--azul-escuro);

    cursor: pointer;

    font-size: 0.75rem;
    font-weight: 800;
}


/*
 * =========================================================
 * BOTÃO DA ESCALAÇÃO COMPLETA
 * =========================================================
 */

.botao-ver-escalacao {
    display: inline-flex;

    min-height: 42px;

    margin-top: 10px;
    padding: 8px 16px;

    border: none;
    border-radius: 8px;

    background-color: var(--azul-escuro);

    color: #ffffff;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    font: inherit;
    font-weight: 800;
}


/*
 * =========================================================
 * LISTA NO DESKTOP
 * =========================================================
 *
 * Evita que 25 ou 30 jogadores façam o painel
 * ficar enorme.
 */

@media (min-width: 851px) {

    .lista-jogadores {
        /*
         * ALTERE ESTE VALOR PARA MUDAR
         * A ALTURA MÁXIMA DA LISTA.
         */
        max-height: 620px;

        overflow-y: auto;

        padding-right: 5px;
    }
}


/*
 * =========================================================
 * MONTE SEU BAHIA — CELULAR
 * =========================================================
 */

@media (max-width: 850px) {

    /*
     * Formação e botão Limpar ocupam toda
     * a largura disponível.
     */
    .controles-escalacao {
        align-items: stretch;
    }

    .campo-formulario {
        width: 100%;
    }

    .campo-formulario select {
        width: 100%;
    }

    .botao-limpar {
        width: 100%;
    }


    /*
     * Painel um pouco mais compacto no celular.
     */
    .painel-jogadores {
        padding: 18px;
    }


    /*
     * Exibe o botão de retorno ao campo.
     */
    .botao-voltar-campo {
        display: inline-flex;

        align-items: center;
        justify-content: center;
    }


    /*
     * A posição selecionada ganha uma organização
     * melhor para telas estreitas.
     */
    .resumo-posicao-selecionada {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        align-items: center;
    }

    .resumo-posicao-selecionada > span {
        grid-column: 1 / -1;
    }


    /*
     * No celular usamos a rolagem normal da página.
     */
    .lista-jogadores {
        max-height: none;

        overflow: visible;

        padding-right: 0;
    }


    /*
     * Um pouco mais de espaço para toque.
     */
    .item-jogador {
        min-height: 68px;

        padding: 10px 12px;
    }
}

/*
 * =========================================================
 * GERENCIAMENTO DE JOGADORES
 * =========================================================
 */

.area-jogadores-admin {
    display: grid;

    /*
     * PRIMEIRA COLUNA:
     * formulário.
     *
     * SEGUNDA COLUNA:
     * elenco cadastrado.
     */
    grid-template-columns:
        minmax(340px, 440px)
        minmax(0, 1fr);

    gap: 24px;
    align-items: start;
}

.formulario-jogador-admin {
    display: grid;

    /*
     * ALTERE PARA MUDAR O ESPAÇO
     * ENTRE OS CAMPOS.
     */
    gap: 18px;
}

.grade-formulario-jogador {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        110px;

    gap: 14px;
}

.grupo-posicoes-secundarias {
    padding: 16px;

    border: 1px solid #d6dde4;
    border-radius: 10px;
}

.grupo-posicoes-secundarias legend {
    padding: 0 7px;

    color: var(--azul-escuro);

    font-weight: 800;
}

.grupo-posicoes-secundarias > p {
    margin-bottom: 14px;

    color: var(--cinza);

    font-size: 0.85rem;
}

.grade-posicoes-secundarias {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;
}

.opcao-posicao-secundaria {
    display: flex;

    min-height: 42px;
    padding: 8px 10px;

    border: 1px solid #d8dee5;
    border-radius: 8px;

    align-items: center;

    gap: 9px;

    cursor: pointer;
}

.opcao-posicao-secundaria:has(
    input:checked
) {
    border-color: var(--azul);

    background-color: #edf6fc;
}

.opcao-posicao-secundaria:has(
    input:disabled
) {
    opacity: 0.48;

    cursor: not-allowed;
}

.opcao-posicao-secundaria span {
    font-size: 0.78rem;
}

.opcao-posicao-secundaria strong {
    display: block;

    color: var(--azul-escuro);
}

.miniatura-jogador-admin,
.miniatura-sem-foto-admin {
    display: flex;

    /*
     * ALTERE ESTES VALORES PARA MUDAR
     * A FOTO NA TABELA.
     */
    width: 48px;
    height: 48px;

    border-radius: 50%;

    background-color: var(--azul-escuro);

    align-items: center;
    justify-content: center;

    color: #ffffff;

    object-fit: cover;
    object-position: center top;
}

.foto-atual-jogador-admin {
    display: flex;

    padding: 14px;

    border-radius: 10px;

    background-color: #eef2f6;

    align-items: center;

    gap: 18px;
}

.foto-atual-jogador-admin span {
    color: var(--azul-escuro);

    font-weight: 800;
}

.foto-atual-jogador-admin img {
    /*
     * ALTERE ESTES VALORES PARA MUDAR
     * A PRÉVIA DA FOTO.
     */
    width: 110px;
    height: 110px;

    border-radius: 50%;

    object-fit: cover;
    object-position: center top;
}

.card-edicao-jogador {
    max-width: 700px;

    margin: 0 auto;
}

@media (max-width: 1050px) {
    .area-jogadores-admin {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .grade-formulario-jogador,
    .grade-posicoes-secundarias {
        grid-template-columns: 1fr;
    }
}

/*
 * =========================================================
 * NACIONALIDADE DO JOGADOR
 * =========================================================
 */

.nacionalidade-jogador-admin {
    display: flex;

    margin-top: 4px;

    align-items: center;

    gap: 7px;

    color: var(--cinza);

    font-size: 0.8rem;
}

.nacionalidade-jogador-admin img {
    /*
     * ALTERE ESTES VALORES PARA MUDAR
     * O TAMANHO DA BANDEIRA.
     */
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    border-radius: 50%;

    object-fit: cover;

    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.12);
}

/*
 * =========================================================
 * SELECT DE NACIONALIDADE COM BANDEIRA
 * =========================================================
 */

.seletor-nacionalidade {
    display: grid;

    /*
     * PRIMEIRA COLUNA:
     * bandeira.
     *
     * SEGUNDA COLUNA:
     * select.
     */
    grid-template-columns: 46px minmax(0, 1fr);

    align-items: center;

    gap: 10px;
}

.seletor-nacionalidade select {
    width: 100%;
}

.bandeira-select-nacionalidade {
    /*
     * ALTERE ESTES VALORES PARA MUDAR
     * O TAMANHO DA BANDEIRA.
     */
    width: 42px;
    height: 42px;

    border-radius: 50%;

    object-fit: cover;

    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.14);
}

.bandeira-select-nacionalidade[hidden] {
    display: none;
}

/*
 * =========================================================
 * DETALHES DO JOGADOR NO MONTE SEU BAHIA
 * =========================================================
 *
 * Exemplo:
 * #8 · 30 anos · MEI
 */

.detalhes-item-jogador {
    display: block;

    margin-top: 2px;

    color: var(--cinza);

    font-size: 0.75rem;

    line-height: 1.3;
}

.detalhes-item-jogador span {
    /*
     * Impede regras genéricas dos itens
     * de alterarem o tamanho da idade.
     */
    font-size: inherit;
}

/*
 * =========================================================
 * JOGADOR COM MENOS DE 20 ANOS
 * =========================================================
 *
 * Destaque propositalmente discreto.
 * Não queremos competir visualmente
 * com as etiquetas Ideal/Compatível.
 */

.idade-jogador-jovem {
    color: #176b35 !important;

    font-weight: 800;
}

.idade-jogador {
    color: inherit !important;
}

/*
 * =========================================================
 * MENU MOBILE — CORREÇÃO
 * =========================================================
 *
 * No celular o menu fica fechado por padrão.
 * Quando aberto, ele fica abaixo do cabeçalho.
 */

@media (max-width: 850px) {

    .cabecalho-conteudo {
        /*
         * Permite que o menu aberto ocupe
         * uma nova linha abaixo do logo.
         */
        flex-wrap: wrap;
    }

    .navegacao {
        /*
         * IMPORTANTE:
         * sobrescreve o display:flex !important
         * existente mais acima no CSS.
         */
        display: none !important;

        /*
         * Deixa de sobrepor o conteúdo da página.
         * Agora o menu empurra o conteúdo para baixo.
         */
        position: static;

        width: 100%;

        padding: 18px 0 22px;

        flex-direction: column;
        align-items: center;

        gap: 18px;
    }

    .navegacao.aberta {
        display: flex !important;
    }

    .botao-menu {
        display: block;
    }
}

/*
 * =========================================================
 * MONTE SEU BAHIA — ARTE PARA STORIES
 * =========================================================
 *
 * Tamanho final:
 * 1080 x 1920 pixels.
 *
 * Esta área fica fora da tela e existe somente
 * para geração da imagem pelo html2canvas.
 */

.area-arte-escalacao {
    position: fixed;

    /*
     * Mantém a arte renderizada,
     * porém totalmente fora da área visível.
     */
    top: 0;
    left: -20000px;

    width: 1080px;
    height: 1920px;

    pointer-events: none;

    z-index: -9999;
}


/*
 * =========================================================
 * ESTRUTURA DA ARTE
 * =========================================================
 */

.arte-escalacao-story {
    display: flex;

    width: 1080px;
    height: 1920px;

    padding: 64px 70px 54px;

    overflow: hidden;

    background:
        linear-gradient(
            160deg,
            #003b70 0%,
            #006cb7 58%,
            #003b70 100%
        );

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    flex-direction: column;
}


/*
 * =========================================================
 * TOPO DA ARTE
 * =========================================================
 */

.topo-arte-escalacao {
    display: flex;

    min-height: 150px;

    align-items: center;
    justify-content: space-between;

    gap: 32px;
}

.marca-arte-escalacao {
    display: flex;

    align-items: center;

    gap: 24px;
}

.logo-arte-escalacao {
    /*
     * ALTERE AQUI PARA MUDAR
     * O TAMANHO DA LOGO NA ARTE.
     */
    width: auto;
    height: 105px;

    object-fit: contain;
}

.titulos-arte-escalacao {
    display: flex;

    flex-direction: column;
}

.titulos-arte-escalacao small {
    font-size: 23px;
    font-weight: 800;

    letter-spacing: 0.08em;

    opacity: 0.82;
}

.titulos-arte-escalacao strong {
    margin-top: 3px;

    font-size: 46px;
    line-height: 1.05;
}


/*
 * =========================================================
 * CONFRONTO NO TOPO DA ARTE
 * =========================================================
 */

.confronto-arte-escalacao {
    display: flex;

    align-items: flex-end;

    flex-direction: column;

    gap: 8px;
}


/*
 * Nome da competição:
 * Brasileirão, Copa do Brasil etc.
 */
.competicao-arte-escalacao {
    display: block;

    color: #ffffff;

    font-size: 21px;
    font-weight: 700;

    opacity: 0.82;
}


/*
 * =========================================================
 * ESCUDOS
 * =========================================================
 */

.escudos-confronto-arte {
    display: flex;

    min-height: 82px;

    align-items: center;
    justify-content: flex-end;

    gap: 18px;
}


.clube-confronto-arte {
    display: flex;

    /*
     * Mantém os dois lados com
     * exatamente o mesmo espaço.
     */
    width: 82px;
    height: 82px;

    align-items: center;
    justify-content: center;
}


.escudo-confronto-arte {
    /*
     * ALTERE ESTES VALORES PARA MUDAR
     * O TAMANHO DOS ESCUDOS NA ARTE.
     */
    max-width: 78px;
    max-height: 78px;

    width: auto;
    height: auto;

    object-fit: contain;
}


/*
 * Caso o clube ainda não tenha escudo,
 * o nome aparece como fallback.
 */
.clube-confronto-arte span {
    color: #ffffff;

    font-size: 17px;
    font-weight: 800;

    line-height: 1.05;

    text-align: center;
}


.versus-confronto-arte {
    color: #ffffff;

    font-size: 27px;
    font-weight: 900;

    line-height: 1;
}

/*
 * =========================================================
 * CAMPO DA ARTE
 * =========================================================
 */

.campo-arte-escalacao {
    position: relative;

    /*
     * ALTERE A LARGURA PARA MUDAR O TAMANHO
     * DO CAMPO DENTRO DA ARTE.
     */
    width: 720px;
    height: 1280px;

    margin: 38px auto 0;

    overflow: hidden;

    border: 5px solid #ffffff;
    border-radius: 24px;

    background:
        repeating-linear-gradient(
            to bottom,
            #218c42 0,
            #218c42 10%,
            #197c38 10%,
            #197c38 20%
        );

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.28);
}


/*
 * Linha de meio-campo.
 */
.campo-arte-escalacao::before {
    content: "";

    position: absolute;

    top: 50%;
    right: 0;
    left: 0;

    border-top: 3px solid
        rgba(255, 255, 255, 0.86);
}


/*
 * Círculo central.
 */
.campo-arte-escalacao::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 170px;
    height: 170px;

    border: 3px solid
        rgba(255, 255, 255, 0.86);
    border-radius: 50%;

    transform:
        translate(-50%, -50%);
}


/*
 * =========================================================
 * JOGADORES NA ARTE
 * =========================================================
 */

.jogador-arte-escalacao {
    position: absolute;

    z-index: 5;

    display: flex;

    /*
     * ALTERE AQUI PARA AUMENTAR/DIMINUIR
     * A ÁREA DE CADA JOGADOR NA ARTE.
     */
    width: 180px;

    align-items: center;

    flex-direction: column;

    transform:
        translate(-50%, -50%);
}

.circulo-jogador-arte {
    display: flex;

    /*
     * ALTERE ESTES VALORES PARA MUDAR
     * O TAMANHO DAS FOTOS NA ARTE.
     */
    width: 94px;
    height: 94px;

    overflow: hidden;

    border: 4px solid #ffffff;
    border-radius: 50%;

    background-color: #003b70;

    align-items: center;
    justify-content: center;

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.32);
}

.foto-jogador-arte {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;
}

.iniciais-jogador-arte {
    color: #ffffff;

    font-size: 25px;
    font-weight: 900;
}

.nome-jogador-arte {
    /*
     * =====================================================
     * NOME DO JOGADOR NA ARTE
     * =====================================================
     *
     * Permitimos quebra em duas linhas quando necessário.
     *
     * Exemplos:
     *
     * Everton
     * Ribeiro
     *
     * Román
     * Gómez
     */

    width: 180px;
    max-width: 180px;

    margin-top: 7px;
    padding: 5px 9px;

    border-radius: 7px;

    background-color:
        rgba(0, 34, 64, 0.9);

    color: #ffffff;

    /*
     * ALTERE AQUI PARA AUMENTAR OU
     * DIMINUIR O NOME NA ARTE.
     */
    font-size: 20px;
    font-weight: 900;

    line-height: 1.05;

    text-align: center;

    /*
     * IMPORTANTE:
     * antes utilizávamos nowrap,
     * por isso nomes maiores eram cortados.
     */
    white-space: normal;

    overflow-wrap: break-word;
    word-break: normal;
}

/*
 * =========================================================
 * FUNÇÃO TÁTICA DO JOGADOR NO CAMPO
 * =========================================================
 */

.nome-jogador-com-funcao {
    display: flex;

    flex-direction: column;
    align-items: center;

    gap: 1px;
}


/*
 * Sigla pequena abaixo do nome.
 *
 * ALTERE font-size para mudar
 * o tamanho da posição.
 */
.funcao-jogador-campo {
    display: block;

    font-size: 0.67rem;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.06em;

    opacity: 0.72;
}

/*
 * =========================================================
 * POSIÇÃO DO JOGADOR NA ARTE
 * =========================================================
 *
 * A sigla representa a posição ocupada
 * naquela escalação, e não necessariamente
 * a posição principal cadastrada.
 */

.nome-jogador-arte {
    display: flex;

    align-items: center;

    flex-direction: column;

    gap: 2px;
}

.nome-jogador-arte strong {
    color: #ffffff;

    font-size: inherit;
    font-weight: 900;

    line-height: 1.05;
}

.posicao-jogador-arte {
    display: block;

    color: rgba(255, 255, 255, 0.72);

    /*
     * ALTERE AQUI PARA MUDAR
     * O TAMANHO DA SIGLA.
     */
    font-size: 13px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.08em;
}

/*
 * =========================================================
 * RODAPÉ / CHAMADA DA ARTE
 * =========================================================
 */

.rodape-arte-escalacao {
    display: grid;

    /*
     * ALTERE PARA MUDAR O ESPAÇO
     * ENTRE O CAMPO E O RODAPÉ.
     */
    margin-top: 18px;

    /*
     * ALTERE PARA MUDAR O ESPAÇO
     * ENTRE A CHAMADA E OS CARDS.
     */
    gap: 18px;
}


/*
 * =========================================================
 * BLOCO DE CHAMADA PRINCIPAL
 * =========================================================
 */

.chamada-arte-escalacao {
    display: grid;

    justify-items: center;

    /*
     * ALTERE PARA MUDAR O ESPAÇO
     * ENTRE O @ E O SITE.
     */
    gap: 12px;
}


/*
 * =========================================================
 * @BAHIACITYZADA
 * =========================================================
 */

.instagram-destaque-arte {
    display: inline-block;

    /*
     * ALTERE PARA MUDAR O ESPAÇAMENTO
     * INTERNO DA CAIXA DO INSTAGRAM.
     */
    padding: 10px 20px;

    border-radius: 10px;

    background-color:
        rgba(0, 51, 91, 0.42);

    color: #ffffff;

    /*
     * ALTERE PARA MUDAR O TAMANHO
     * DO @BAHIACITYZADA.
     */
    font-size: 23px;

    font-weight: 900;

    line-height: 1.1;

    text-align: center;
}


/*
 * =========================================================
 * SITE EM DESTAQUE
 * =========================================================
 */

.site-destaque-arte {
    display: inline-block;

    /*
     * ALTERE PARA MUDAR O ESPAÇAMENTO
     * INTERNO DA CAIXA DO SITE.
     */
    padding: 12px 34px;

    border-radius: 12px;

    background-color:
        rgba(0, 51, 91, 0.42);

    color: #ffffff;

    /*
     * ALTERE PARA MUDAR O TAMANHO
     * DO TEXTO DO SITE.
     */
    font-size: 27px;

    font-weight: 900;

    line-height: 1.15;

    text-align: center;
}


/*
 * =========================================================
 * RESUMO (FORMAÇÃO / MÉDIA)
 * =========================================================
 */

.resumo-arte-escalacao {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    /*
     * ALTERE PARA MUDAR O ESPAÇO
     * ENTRE OS DOIS CARDS.
     */
    gap: 18px;
}

.item-resumo-arte {
    /*
     * ALTERE PARA MUDAR O ESPAÇO
     * INTERNO DOS CARDS.
     */
    padding: 18px 22px;

    border: 1px solid
        rgba(255, 255, 255, 0.28);

    border-radius: 14px;

    background-color:
        rgba(0, 34, 64, 0.44);

    text-align: left;
}

.item-resumo-arte small {
    display: block;

    /*
     * ALTERE PARA MUDAR O TAMANHO
     * DOS TÍTULOS DOS CARDS.
     */
    font-size: 18px;

    opacity: 0.82;
}

.item-resumo-arte strong {
    display: block;

    margin-top: 3px;

    /*
     * ALTERE PARA MUDAR O TAMANHO
     * DOS VALORES DOS CARDS.
     */
    font-size: 29px;

    font-weight: 900;
}
/*
 * =========================================================
 * BOTÕES DA ESCALAÇÃO COMPLETA
 * =========================================================
 */

.acoes-escalacao-final {
    display: grid;

    /*
     * ALTERE PARA AUMENTAR OU DIMINUIR
     * O ESPAÇO ENTRE OS BOTÕES.
     */
    gap: 9px;

    margin-top: 12px;
}


/*
 * =========================================================
 * BASE VISUAL DOS BOTÕES
 * =========================================================
 */

.botao-enviar-escalacao,
.botao-compartilhar-arte,
.botao-ver-parciais,
.botao-ver-escalacao,
.botao-baixar-arte {
    display: inline-flex;

    width: 100%;

    /*
     * ALTERE PARA MUDAR A ALTURA
     * MÍNIMA DOS BOTÕES.
     */
    min-height: 44px;

    padding: 9px 16px;

    border-radius: 8px;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    font: inherit;
    font-weight: 800;
}


/*
 * =========================================================
 * ENVIAR — AÇÃO PRINCIPAL
 * =========================================================
 */

.botao-enviar-escalacao {
    border: none;

    /*
     * ALTERE AQUI A COR DO BOTÃO PRINCIPAL.
     */
    background-color: var(--vermelho);

    color: #ffffff;
}

.botao-enviar-escalacao:hover {
    filter: brightness(0.94);
}

.botao-enviar-escalacao:disabled {
    cursor: default;

    opacity: 0.78;
}

.botao-enviar-escalacao.enviado {
    background-color: #198754;
}


/*
 * =========================================================
 * COMPARTILHAR
 * =========================================================
 */

.botao-compartilhar-arte {
    border: none;

    /*
     * ALTERE AQUI A COR DO BOTÃO
     * DE COMPARTILHAMENTO.
     */
    background-color: var(--azul-escuro);

    color: #ffffff;
}


/*
 * =========================================================
 * VER PARCIAIS
 * =========================================================
 */

.botao-ver-parciais {
    border: 1px solid var(--azul);

    background-color: #ffffff;

    color: var(--azul-escuro);
}


/*
 * =========================================================
 * VER MINHA ESCALAÇÃO
 * =========================================================
 */

.botao-ver-escalacao {
    /*
     * Remove o margin-top de uma regra
     * anterior já existente no CSS.
     */
    margin-top: 0;

    border: 1px solid
        rgba(0, 59, 112, 0.20);

    background-color: #eef6fb;

    color: var(--azul-escuro);
}


/*
 * =========================================================
 * BAIXAR ARTE
 * =========================================================
 *
 * Mantemos propositalmente mais discreto:
 * é uma função útil, mas não deve competir
 * com Enviar e Compartilhar.
 */

.botao-baixar-arte {
    border: 1px solid #cbd3dc;

    background-color: #ffffff;

    color: var(--cinza);
}

/*
 * =========================================================
 * SALVAR ESCALAÇÃO
 * =========================================================
 */

.botao-salvar-escalacao {
    width: 100%;

    padding: 11px 14px;

    border: 0;
    border-radius: 8px;

    background: var(--azul);

    color: #ffffff;

    font: inherit;
    font-weight: 800;

    cursor: pointer;
}

.botao-salvar-escalacao:hover {
    filter: brightness(0.94);
}

.botao-salvar-escalacao:disabled {
    cursor: default;

    opacity: 0.75;
}

.botao-salvar-escalacao.salva {
    background: #198754;
}

/*
 * =========================================================
 * ESCALAÇÃO COMPARTILHADA
 * =========================================================
 */

.pagina-escalacao-compartilhada {
    max-width: 900px;
}

.cabecalho-escalacao-compartilhada {
    margin-bottom: 28px;
}


/*
 * =========================================================
 * CONFRONTO
 * =========================================================
 */

.contexto-compartilhado {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    max-width: 620px;

    margin:
        0 auto 20px;

    padding: 18px;

    align-items: center;

    gap: 20px;

    border: 1px solid #dde3e9;
    border-radius: 14px;

    background: #ffffff;
}

.clube-compartilhado {
    display: flex;

    flex-direction: column;
    align-items: center;

    gap: 7px;

    text-align: center;
}

.clube-compartilhado img {
    /*
     * ALTERE AQUI PARA MUDAR
     * O TAMANHO DOS ESCUDOS.
     */
    width: 58px;
    height: 58px;

    object-fit: contain;
}

.clube-compartilhado strong {
    font-size: 0.9rem;
}

.dados-jogo-compartilhado {
    display: flex;

    flex-direction: column;
    align-items: center;

    gap: 3px;
}

.dados-jogo-compartilhado span {
    font-size: 0.72rem;
    font-weight: 800;

    opacity: 0.7;
}

.dados-jogo-compartilhado strong {
    font-size: 1.25rem;
}


/*
 * =========================================================
 * FORMAÇÃO
 * =========================================================
 */

.formacao-compartilhada {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 7px;

    margin-bottom: 14px;
}

.formacao-compartilhada span {
    opacity: 0.7;
}

.formacao-compartilhada strong {
    color: var(--azul);
}


/*
 * =========================================================
 * CAMPO
 * =========================================================
 */

.area-campo-compartilhado {
    display: flex;

    justify-content: center;

    margin-bottom: 26px;
}

.campo-compartilhado {
    position: relative;

    /*
     * Mantemos o mesmo tamanho-base
     * do campo do Monte seu Bahia.
     */
    width: 100%;
    max-width: 430px;

    aspect-ratio: 3 / 5;
}


/*
 * Jogador não é botão nesta página.
 */
.jogador-compartilhado {
    position: absolute;

    display: flex;

    width: 110px;

    flex-direction: column;
    align-items: center;

    transform:
        translate(-50%, -50%);

    z-index: 5;

    pointer-events: none;
}

.nome-jogador-compartilhado {
    display: flex;

    max-width: 110px;

    flex-direction: column;
    align-items: center;

    margin-top: 4px;

    text-align: center;
}

.nome-jogador-compartilhado strong {
    font-size: 0.72rem;
    line-height: 1.05;
}

.nome-jogador-compartilhado small {
    margin-top: 2px;

    font-size: 0.60rem;
    font-weight: 900;

    opacity: 0.72;
}


/*
 * =========================================================
 * AÇÕES
 * =========================================================
 */

.acoes-escalacao-compartilhada {
    display: grid;

    max-width: 430px;

    margin:
        0 auto 40px;

    gap: 10px;
}

.botao-montar-compartilhado {
    display: block;

    padding: 11px 16px;

    border-radius: 8px;

    background:
        var(--azul-escuro);

    color: #ffffff;

    font-weight: 800;

    text-align: center;
    text-decoration: none;
}

.mensagem-link-escalacao {
    min-height: 20px;

    margin: 0;

    color: var(--azul);

    font-size: 0.82rem;
    font-weight: 800;

    text-align: center;
}


/*
 * =========================================================
 * LINK INVÁLIDO
 * =========================================================
 */

.escalacao-compartilhada-vazia {
    max-width: 620px;

    margin:
        60px auto;

    text-align: center;
}

.escalacao-compartilhada-vazia p {
    margin-bottom: 22px;
}


/*
 * =========================================================
 * MOBILE
 * =========================================================
 */

@media (max-width: 600px) {

    .contexto-compartilhado {
        gap: 10px;

        padding:
            14px 10px;
    }

    .clube-compartilhado img {
        width: 48px;
        height: 48px;
    }

    .campo-compartilhado {
        width: 92%;
    }

    .jogador-compartilhado {
        width: 88px;
    }

    .nome-jogador-compartilhado {
        max-width: 88px;
    }

    .nome-jogador-compartilhado strong {
        font-size: 0.62rem;
    }
}

/*
 * =========================================================
 * AÇÕES DEPOIS DE SALVAR
 * =========================================================
 */

.acoes-escalacao-salva {
    display: grid;

    width: 100%;

    margin-top: 10px;

    gap: 8px;
}

.botao-abrir-escalacao,
.botao-copiar-escalacao {
    width: 100%;

    padding: 10px 14px;

    border: 0;
    border-radius: 8px;

    font: inherit;
    font-weight: 800;

    text-align: center;

    cursor: pointer;
}

.botao-abrir-escalacao {
    background: var(--azul-escuro);

    color: #ffffff;

    text-decoration: none;
}

.botao-copiar-escalacao {
    background: #ffffff;

    color: var(--azul-escuro);

    border:
        1px solid
        rgba(0, 51, 91, 0.18);
}

/*
 * =========================================================
 * ENVIAR PARA A TORCIDA
 * =========================================================
 */

.botao-enviar-torcida {
    width: 100%;

    padding: 11px 14px;

    border: 0;
    border-radius: 8px;

    /*
     * Vermelho para diferenciar
     * a ação de participação coletiva.
     */
    background: var(--vermelho);

    color: #ffffff;

    font: inherit;
    font-weight: 900;

    cursor: pointer;
}

.botao-enviar-torcida:hover {
    filter: brightness(0.94);
}

.botao-enviar-torcida:disabled {
    cursor: default;

    opacity: 0.78;
}

.botao-enviar-torcida.enviado {
    background: #198754;
}

/*
 * =========================================================
 * ESCALAÇÃO DA TORCIDA
 * =========================================================
 */

.pagina-torcida {
    max-width: 900px;
}

.cabecalho-torcida {
    margin-bottom: 26px;

    text-align: center;
}


/*
 * RESUMO
 */

.resumo-torcida {
    display: grid;

    max-width: 620px;

    margin:
        0 auto 22px;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;
}

.resumo-torcida article {
    display: flex;

    min-height: 90px;

    padding: 16px;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #ffffff;

    text-align: center;
}

.resumo-torcida small {
    opacity: 0.68;

    font-weight: 700;
}

.resumo-torcida strong {
    color: var(--azul-escuro);

    font-size: 1.35rem;
}

.resumo-torcida span {
    color: var(--azul);

    font-weight: 900;
}


/*
 * CAMPO
 */

.area-campo-torcida {
    display: flex;

    justify-content: center;

    margin-top: 16px;
}

.campo-torcida {
    position: relative;

    width: 100%;
    max-width: 430px;

    aspect-ratio: 3 / 5;
}

.jogador-torcida {
    position: absolute;
    display: flex;
    width: 120px;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.nome-jogador-torcida {
    display: flex;
    max-width: 120px;
    padding: 4px 8px;
    flex-direction: column;
    align-items: center;
    margin-top: 6px;
    border-radius: 8px;
    background: rgba(0, 33, 71, 0.88);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20);
    text-align: center;
}

.nome-jogador-torcida strong {
    color: #ffffff;
    font-size: 0.70rem;
    line-height: 1.05;
}

.nome-jogador-torcida small {
    margin-top: 2px;
    color: #b9d9ff;
    font-size: 0.58rem;
    font-weight: 900;
    opacity: 1;
}


/*
 * PERCENTUAIS
 */

.legenda-percentual-torcida {
    max-width: 540px;

    margin:
        14px auto 30px;

    font-size: 0.78rem;

    text-align: center;

    opacity: 0.65;
}


/*
 * RANKING DE FORMAÇÕES
 */

.ranking-formacoes-torcida {
    max-width: 620px;

    margin:
        0 auto 30px;
}

.ranking-formacoes-torcida h2 {
    margin-bottom: 16px;

    text-align: center;
}

.linha-formacao-torcida {
    display: grid;

    margin-bottom: 14px;

    grid-template-columns:
        1fr auto;

    gap: 6px 12px;
}

.linha-formacao-torcida > div {
    display: flex;

    align-items: center;

    gap: 8px;
}

.linha-formacao-torcida span {
    font-size: 0.76rem;

    opacity: 0.68;
}

.barra-formacao-torcida {
    display: block;

    grid-column:
        1 / -1;

    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(0, 51, 91, 0.10);
}

.barra-formacao-torcida > span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: var(--azul);

    opacity: 1;
}


/*
 * EMPATE
 */

.aviso-empate-formacao {
    max-width: 620px;

    margin:
        0 auto 18px;

    padding: 10px 14px;

    border-radius: 8px;

    background:
        rgba(255, 193, 7, 0.12);

    font-size: 0.82rem;
    font-weight: 700;

    text-align: center;
}


/*
 * SEM VOTOS
 */

.torcida-sem-votos {
    max-width: 600px;

    margin:
        60px auto;

    text-align: center;
}

.torcida-sem-votos p {
    margin-bottom: 22px;
}


/*
 * CTA
 */

.acao-montar-torcida {
    margin-bottom: 40px;

    text-align: center;
}


/*
 * MOBILE
 */

@media (max-width: 600px) {

    .resumo-torcida {
        grid-template-columns: 1fr;
    }

    .campo-torcida {
        width: 92%;
    }

    .jogador-torcida {
        width: 88px;
    }

    .nome-jogador-torcida {
        max-width: 88px;
    }

    .nome-jogador-torcida strong {
        font-size: 0.61rem;
    }

    .nome-jogador-torcida small {
        font-size: 0.53rem;
    }
}

.botao-ver-torcida {
    display: block;

    width: 100%;

    padding: 11px 14px;

    border-radius: 8px;

    background: var(--azul-escuro);

    color: #ffffff;

    font-weight: 900;

    text-align: center;
    text-decoration: none;
}

/*
 * =========================================================
 * CORREÇÃO DO MENU MOBILE
 * =========================================================
 *
 * O !important é necessário porque existe
 * uma regra anterior de .navegacao com
 * display: flex !important.
 */

@media (max-width: 850px) {

    .navegacao {
        display: none !important;
    }

    .navegacao.aberta {
        display: flex !important;
    }
}

/*
 * =========================================================
 * IDENTIDADE TRICOLOR DOS JOGADORES
 * =========================================================
 *
 * Utilizada quando:
 *
 * EXIBIR_FOTOS_JOGADORES = false
 *
 * Não representa uma camisa oficial.
 * É apenas uma identidade visual própria
 * do Bahia CityZada utilizando azul,
 * branco e vermelho.
 * =========================================================
 */

.numero-jogador-tricolor {
    position: relative;

    display: flex;

    width: 100%;
    height: 100%;

    overflow: hidden;

    align-items: center;
    justify-content: center;

    /*
     * ALTERE AQUI PARA MUDAR
     * A DISTRIBUIÇÃO DAS CORES.
     */
    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #ffffff 67%,
            #006cb7 67%,
            #006cb7 83%,
            #d71920 83%,
            #d71920 100%
        );

    color: #003b70;
}


/*
 * =========================================================
 * NÚMERO
 * =========================================================
 */

.numero-jogador-tricolor strong {
    /*
     * Colocamos o número ligeiramente acima
     * do centro para compensar as faixas
     * existentes na parte inferior.
     */
    transform:
        translateY(-5%);

    color: #003b70;

    font-size: 1.35rem;
    font-weight: 900;

    line-height: 1;

    text-shadow:
        0 1px 0
        rgba(255, 255, 255, 0.8);
}


/*
 * =========================================================
 * LISTA DE JOGADORES
 * =========================================================
 */

.miniatura-item-jogador
.numero-jogador-tricolor strong {
    /*
     * ALTERE PARA MUDAR O TAMANHO
     * DO NÚMERO NA LISTA.
     */
    font-size: 1rem;
}


/*
 * =========================================================
 * CAMPO PRINCIPAL
 * =========================================================
 */

.circulo-jogador-campo
.numero-jogador-tricolor strong {
    /*
     * ALTERE PARA MUDAR O TAMANHO
     * DO NÚMERO DENTRO DO CAMPO.
     */
    font-size: 1.35rem;
}


/*
 * =========================================================
 * ARTE 1080 x 1920
 * =========================================================
 */

.circulo-jogador-arte
.numero-jogador-tricolor strong {
    /*
     * ALTERE PARA MUDAR O NÚMERO
     * NA ARTE COMPARTILHÁVEL.
     */
    font-size: 2.25rem;
}