
/* Define que o box-model deve incluir padding e border no cálculo do width/height */
* {
    box-sizing: border-box;
}

/* Define largura padrão para as principais áreas do layout */
.topo,
.titulo,
.painel,
.menu-links,
.conteudo,
.rodape {
    width: 1024px;
    margin: 0 auto; /* centraliza horizontalmente */
}

/* Barra superior com links à direita */
.topo {
    height: 32px;
    background: hsl(120, 100%, 80%);
    display: flex;
    justify-content: flex-end; /* alinha links à direita */
    align-items: center;        /* centraliza verticalmente */
    padding: 0 20px;            /* espaçamento interno horizontal */
}

/* Área principal do título (logo) */
.titulo {
    height: 128px;
    background: #eee; /* cinza mais claro ainda */
    text-align: center;
    overflow: hidden;
    position: relative;
}

/* Faz com que a imagem preencha toda a área da .titulo, mesmo que distorça */
.titulo img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

/* Menu de links abaixo do título */
.painel {
    height: 48px;
    background: hsl(120, 100%, 80%);
    display: flex;
    align-items: center;
    justify-content: space-around;
}

/* Área central onde aparece o conteúdo e tabela */
.conteudo {
    min-height: 256px;
    background: rgb(80%, 100%, 80%);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Área final do site (rodapé visual) */
.rodape {
    height: 48px;
    background: hsl(120, 100%, 80%);
    text-align: center;
}

/* Espaço entre os seletores */
form#formMenu select {
    margin: 5px;
}

.falha {
   color: red;
   font-weight: bold;
   font-size: 0.8em;
}

.sucesso {
   color: green;
   font-weight: bold;
   font-size: 0.8em;
}

.tabela { font-family: Tahoma; width: 896px; text-align: center; background-color: rgb(70%, 100%, 70%); color: black; padding 3px; table-layout: fixed; }

.linha-cabecalho { text-align: center; font-family: Tahoma; background-color: black; color: white; }
.linha-campeao { background-color: hsl(240, 100%, 96%); color: black; }
.linha-libertadores { background-color: hsl(120, 100%, 96%); color: black; }
.linha-prelibertadores { background-color: hsl(30, 100%, 96%); color: black; }
.linha-sulamericana { background-color: hsl(60, 100%, 96%); color: black; }
.linha-rebaixamento { background-color: hsl(0, 100%, 96%); color: black; }
.linha-padrao { background-color: white; color: black; }

.linha-acesso { background-color: hsl(120, 100%, 96%); color: black; }
.linha-segundafase { background-color: hsl(120, 100%, 96%); color: black; }
.linha-copa2026 { background-color: hsl(120, 100%, 96%); color: black; }
.linha-repescagem { background-color: hsl(60, 100%, 96%); color: black; }

.linha-ligadoscampeoes { background-color: hsl(120, 100%, 96%); color: black; }
.linha-ligaeuropa { background-color: hsl(30, 100%, 96%); color: black; }
.linha-ligaconferencia { background-color: hsl(60, 100%, 96%); color: black; }

.ordem-cabecalho { width: 35px; }
.ordem-campeao { background-color:  hsl(240, 100%, 70%); }
.ordem-libertadores { background-color: hsl(120, 100%, 40%); }
.ordem-prelibertadores { background-color: hsl(30, 100%, 60%); }
.ordem-sulamericana { background-color: hsl(60, 100%, 70%); }
.ordem-rebaixamento { background-color: hsl(0, 100%, 70%); }

.ordem-acesso { background-color: hsl(120, 100%, 40%); }
.ordem-segundafase { background-color: hsl(120, 100%, 40%); }
.ordem-copa2026 { background-color: hsl(120, 100%, 40%); }
.ordem-repescagem { background-color: hsl(60, 100%, 70%); }

.ordem-ligadoscampeoes { background-color: hsl(120, 100%, 40%); }
.ordem-ligaeuropa { background-color: hsl(30, 100%, 60%); }
.ordem-ligaconferencia { background-color: hsl(60, 100%, 70%); }

.ordem-padrao { width: 35px; }
.time-padrao { width: 192px; text-align: left; padding-left: 10px; }
.pontos-padrao { width: 35px; }
.njogos-padrao { width: 35px; }
.vitorias-padrao { width: 35px; }
.empates-padrao { width: 35px; }
.derrotas-padrao { width: 35px; }
.golspro-padrao { width: 35px; }
.golscontra-padrao { width: 35px; }
.golssaldo-padrao { width: 35px; }
