@charset "UTF-8";

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: sans-serif; background-color: skyblue; }
body { background-color: skyblue; max-width: 1200px; margin-left: auto; margin-right: auto; box-shadow: 20px 20px 50px grey; min-height: 100vh; display: flex; flex-direction: column; }

h1 { font-size: large; text-align: left; color: darkblue; margin-bottom: 0.5em; }
h2 { font-size: medium; text-align: left; color: darkblue; }
p, li { font-size: 1rem; line-height: 2; text-align: justify; }
a:hover, a:visited, a:link, a:active { text-decoration: none; }

.cabecalho { background-color: darkblue; }
.cabecalho-topo { display: flex; justify-content: space-between; align-items: center; padding: 0 1em; }
.cabecalho-logo { display: flex; align-items: center; }
.logo { max-height: 20vh; max-width: 20vw; padding: 1em; }
.titulo { font-size: 4em; color: skyblue; font-family: sans-serif; }

.hamburger {
    background: none;
    border: 2px solid skyblue;
    border-radius: 6px;
    color: skyblue;
    font-size: 2rem;
    padding: 0.2em 0.5em;
    cursor: pointer;
    line-height: 1;
}
.hamburger:hover { background-color: skyblue; color: darkblue; }

.nav-menu { display: none; padding: 0 1em 1em; }
.nav-aberto { display: block; }

.cabecalho nav ul { list-style: none; display: flex; flex-wrap: wrap; }
.cabecalho nav li { font-family: sans-serif; font-size: large; }
.cabecalho nav li a { display: block; color: skyblue; text-decoration: none; padding: 0.75em 1em; }
.cabecalho nav li a:hover { background-color: skyblue; color: darkblue; border-radius: 4px; }

.corpo { flex: 1; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; padding: 1em; background-color: skyblue; }

.rodape { display: flex; flex-direction: column; padding: 1em; background-color: black; color: skyblue; text-align: center; }
.rodape p { font-size: large; text-align: center; }

.form-container { max-width: 400px; margin: 2rem auto; padding: 2rem; border: 1px solid darkblue; border-radius: 10px; box-shadow: 5px 5px 5px black; background-color: white; }
.form-container h1 { text-align: center; margin-bottom: 1rem; }
.form-container label { display: block; margin-bottom: 0.25rem; color: darkblue; font-size: medium; }
.form-container input { width: 100%; padding: 0.5rem; margin-bottom: 1rem; border: 1px solid darkblue; border-radius: 5px; font-size: 1rem; }
.form-container input:focus { outline: 2px solid skyblue; }
.form-container button { width: 100%; padding: 0.75rem; background-color: white; color: darkblue; border: 2px solid darkblue; border-radius: 10px; font-size: large; cursor: pointer; }
.form-container button:hover { background-color: darkblue; color: skyblue; }

.erro { background-color: #ffe0e0; border: 1px solid red; color: red; padding: 0.5rem 1rem; border-radius: 5px; margin-bottom: 1rem; font-size: 0.9rem; }
.link-alt { text-align: center; margin-top: 1rem; font-size: 0.9rem; }
.link-alt a { color: darkblue; }

.home-container { width: 100%; text-align: center; padding-top: 1rem; }
.menu-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 2rem; }
.card { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 2rem 1.5rem; min-width: 220px; background-color: white; border: 1px solid darkblue; border-radius: 10px; box-shadow: 5px 5px 5px grey; text-decoration: none; color: darkblue; }
.card:hover { background-color: darkblue; color: skyblue; }
.card-icon { font-size: 2.5rem; }
.card-titulo { font-weight: 600; font-size: large; }

.tabela { color: darkblue; max-width: 800px; width: 100%; font-size: 1em; background-color: white; border-radius: 8px; overflow: hidden; }
.tabela thead tr { background-color: darkblue; color: white; }
.tabela th { color: white; }
.tabela tr { border-bottom: 2px solid darkblue; }
.tabela th, .tabela td { padding: 5px; text-align: left; }

.botao { min-width: 10vw; background-color: white; color: darkblue; border: 2px solid darkblue; border-radius: 10px; font-size: large; margin: 1vw; padding: 0.5em 1em; cursor: pointer; }
.botao:hover { background-color: darkblue; color: skyblue; }
.botao-confirmar { background-color: #e8f5e9; border-color: green; color: green; font-weight: bold; }
.botao-confirmar:hover { background-color: green; color: white; }

.submenu { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 1.5rem; padding: 0.5rem; background-color: white; border-radius: 8px; border: 1px solid darkblue; align-items: center; }
.submenu-btn { display: inline-block; padding: 0.4em 0.7em; border: 2px solid darkblue; border-radius: 6px; color: darkblue; font-weight: bold; font-size: 0.85rem; text-decoration: none; background-color: white; }
.submenu-btn:hover { background-color: skyblue; }
.submenu-ativo { background-color: darkblue; color: white; }
.submenu-completo { background-color: #4caf50; border-color: #4caf50; color: white; }
.submenu-completo:hover { background-color: #388e3c; border-color: #388e3c; }
.submenu-pendente { background-color: #e53935; border-color: #e53935; color: white; }
.submenu-pendente:hover { background-color: #c62828; border-color: #c62828; }
.submenu-vazio { background-color: white; border-color: darkblue; color: darkblue; }
.submenu-etapa { margin-left: 0.5rem; border-style: dashed; }
.submenu-bloqueado { opacity: 0.4; pointer-events: none; }
.submenu-seta { display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; border: 2px solid darkblue; border-radius: 50%; color: darkblue; font-weight: bold; font-size: 1rem; text-decoration: none; background-color: white; cursor: pointer; }
.submenu-seta:hover { background-color: darkblue; color: white; }
.submenu-seta-desabilitada { opacity: 0.3; pointer-events: none; }

.grupo-container { display: flex; flex-wrap: wrap; gap: 2rem; }
.grupo-jogos { flex: 1; min-width: 300px; }
.grupo-classificacao { flex: 0 0 280px; }

.jogo-card { display: flex; align-items: stretch; margin-bottom: 0.5rem; border: 1px solid darkblue; border-radius: 8px; overflow: hidden; background-color: white; }
.jogo-btn { flex: 1; padding: 0.6em 0.5em; border: none; border-right: 1px solid darkblue; background-color: white; color: darkblue; font-size: 0.9rem; font-weight: 600; cursor: pointer; text-align: center; }
.jogo-btn:last-child { border-right: none; }
.jogo-btn:hover { background-color: skyblue; }
.jogo-btn-ativo { background-color: darkblue; color: white; }
.jogo-btn-empate { flex: 0 0 80px; }

.empate-aviso { margin-top: 1rem; padding: 1rem; border: 2px solid orange; border-radius: 8px; background-color: #fff8e0; }
.empate-aviso p { text-align: center; color: darkblue; font-weight: bold; margin-bottom: 0.5rem; }

.sortable-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; margin-bottom: 0.25rem; border: 1px solid darkblue; border-radius: 5px; background-color: white; cursor: grab; color: darkblue; }
.drag-handle { cursor: grab; font-size: 1.2rem; }
.grupo-ok { margin-top: 1rem; text-align: center; color: green; font-weight: bold; }

.sortable-pos { font-weight: bold; min-width: 2em; }
.sortable-btns { margin-left: auto; display: flex; gap: 0.15rem; }
.sort-btn {
    background: none;
    border: 1px solid darkblue;
    border-radius: 3px;
    color: darkblue;
    font-size: 0.7rem;
    padding: 0.1em 0.3em;
    cursor: pointer;
    line-height: 1;
}
.sort-btn:hover { background-color: skyblue; }

.terceiro-linha { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; margin-bottom: 0.25rem; border: 1px solid darkblue; border-radius: 5px; background-color: white; color: darkblue; cursor: grab; }
.terceiro-linha:hover { background-color: #e8f0fe; }
.terceiro-eliminado { background-color: #f0f0f0; color: #999; border-color: #ccc; }
.terceiro-eliminado .terceiro-grupo { background-color: #999; }
.terceiro-pos { font-weight: bold; min-width: 2em; }
.terceiro-grupo { display: inline-block; width: 1.5em; height: 1.5em; line-height: 1.5em; text-align: center; border-radius: 50%; background-color: darkblue; color: white; font-size: 0.8rem; font-weight: bold; }
.terceiro-nome { flex: 1; }
.terceiro-pts { font-weight: bold; min-width: 4em; text-align: right; }
.terceiros-legenda { display: flex; gap: 1.5rem; justify-content: center; margin-top: 1rem; font-size: 0.9rem; }
.legenda-classifica { color: darkblue; }
.legenda-eliminado { color: #999; }
.dragging { opacity: 0.5; }
.terceiros-contador { text-align: center; color: darkblue; font-weight: bold; margin-top: 0.5rem; }

/* BRACKET - DESKTOP */
.bracket-desktop { display: block; }
.bracket-mobile { display: none; }

.bracket-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 0.5rem 0;
    width: 100%;
    max-width: 100%;
}
.bracket-side { display: flex; flex-shrink: 1; flex-grow: 1; min-width: 0; }
.bracket-left { flex-direction: row; }
.bracket-right { flex-direction: row-reverse; }
.bracket-round { display: flex; flex-direction: column; justify-content: space-around; flex: 1; min-width: 0; padding: 0 0.15rem; }
.bracket-round-R32 { flex: 1.3; }
.bracket-round-R16 { flex: 1.1; }
.bracket-round-QF { flex: 1; }
.bracket-round-SF { flex: 1; }

.bracket-match { margin: 0.15rem 0; border: 1px solid darkblue; border-radius: 4px; overflow: hidden; background-color: white; }
.bracket-team { padding: 0.25rem 0.4rem; font-size: 0.8rem; color: darkblue; cursor: pointer; border-bottom: 1px solid #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bracket-team:last-child { border-bottom: none; }
.bracket-team:hover { background-color: skyblue; }
.bracket-winner { background-color: darkblue; color: white; font-weight: bold; }
.bracket-winner:hover { background-color: #000066; }
.bracket-winner .bracket-grupo { background-color: skyblue; color: darkblue; }
.bracket-grupo { display: inline-block; width: 1.2em; height: 1.2em; line-height: 1.2em; text-align: center; border-radius: 50%; background-color: darkblue; color: white; font-size: 0.6rem; font-weight: bold; margin-right: 0.15rem; }
.bracket-tbd { color: #ccc; font-style: italic; }

.bracket-round-R32 .bracket-match { margin: 0.1rem 0; }
.bracket-round-R16 .bracket-match { margin: 1.1rem 0; }
.bracket-round-QF .bracket-match { margin: 3.2rem 0; }
.bracket-round-SF .bracket-match { margin: 5rem 0; }

.bracket-rodada-final {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 2px solid darkblue;
}
.bracket-jogo-destaque { min-width: 180px; }
.bracket-jogo-destaque h2 { margin-bottom: 0.3rem; font-size: 0.95rem; color: darkblue; text-align: center; }
.bracket-match-final { border: 2px solid gold; }
.bracket-campeao { text-align: center; font-size: 1.1rem; font-weight: bold; color: darkblue; padding: 0.4rem; background-color: #fffde0; border: 2px solid gold; border-radius: 6px; margin-top: 0.3rem; }

/* BRACKET - MOBILE */
.mobile-fase { margin-bottom: 2rem; }
.mobile-fase-titulo {
    font-size: large;
    text-align: left;
    color: darkblue;
    margin-bottom: 0.5em;
    padding-bottom: 0.3em;
    border-bottom: 2px solid darkblue;
}
.mobile-fase-jogos {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.mobile-match {
    border-radius: 6px;
}
.mobile-match .bracket-team { padding: 0.6rem 0.75rem; font-size: 1rem; }
.mobile-match .bracket-grupo { width: 1.4em; height: 1.4em; line-height: 1.4em; font-size: 0.7rem; }

/* REGULAMENTO */
.regulamento { width: 100%; max-width: 800px; margin: 0 auto; background-color: white; padding: 2.5rem; border-radius: 10px; border: 1px solid darkblue; box-shadow: 5px 5px 5px grey; }
.regulamento h1 { text-align: center; font-size: 1.8rem; margin-bottom: 2rem; }
.regulamento h2 { font-size: 1.4rem; margin-top: 2.5rem; margin-bottom: 1rem; padding-bottom: 0.4rem; border-bottom: 2px solid darkblue; }
.regulamento h3 { font-size: 1.2rem; color: darkblue; margin-top: 2rem; margin-bottom: 0.75rem; }
.regulamento h4 { font-size: 1.1rem; color: darkblue; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.regulamento p { margin-bottom: 1rem; line-height: 1.8; font-size: 1rem; color: #333; }
.regulamento em { color: #555; }
.regulamento-preambulo { background-color: #f0f4ff; padding: 1.25rem; border-left: 4px solid darkblue; border-radius: 4px; margin-bottom: 2rem; font-style: italic; }
.regulamento-preambulo p { text-align: justify; color: #444; line-height: 1.8; }
.regulamento-tabela { margin: 1.25rem 0; }
.regulamento-tabela td { font-size: 0.95rem; padding: 8px 10px; }
.regulamento-tabela th { padding: 8px 10px; }
.regulamento-atencao { background-color: #fff8e0; border: 2px solid #e6a817; border-radius: 6px; padding: 1rem; margin: 1rem 0; color: #333; line-height: 1.6; }

/* ARTILHEIRO */
.artilheiro-container { display: flex; flex-wrap: wrap; gap: 2rem; }
.artilheiro-input-area { flex: 1; min-width: 300px; }
.artilheiro-lista { flex: 1; min-width: 280px; }
.artilheiro-campo { display: flex; gap: 0.5rem; align-items: stretch; }
.artilheiro-campo input { flex: 1; padding: 0.6rem; border: 2px solid darkblue; border-radius: 8px; font-size: 1rem; color: darkblue; }
.artilheiro-campo input:focus { outline: none; border-color: #4caf50; }
.artilheiro-filtro-input { width: 100%; padding: 0.4rem; border: 1px solid darkblue; border-radius: 5px; font-size: 0.9rem; margin-bottom: 0.5rem; color: darkblue; }
.artilheiro-opcoes { max-height: 400px; overflow-y: auto; }
.artilheiro-opcao { padding: 0.4rem 0.75rem; margin-bottom: 0.15rem; border: 1px solid #ddd; border-radius: 4px; background-color: white; color: darkblue; cursor: pointer; font-size: 0.9rem; }
.artilheiro-opcao:hover { background-color: skyblue; }
.artilheiro-escolhido { background-color: darkblue; color: white; border-color: darkblue; }
.artilheiro-escolhido:hover { background-color: #000066; }

.tabela-completa {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: green;
    padding: 1.5rem;
    margin-top: 1.5rem;
    background-color: #e8f5e9;
    border: 2px solid green;
    border-radius: 10px;
}

/* TABLET E MOBILE - bracket vira lista */
@media only screen and (max-width: 1024px) {
    .bracket-desktop { display: none; }
    .bracket-mobile { display: block; }
}

/* MOBILE */
@media only screen and (max-width: 600px) {
    .titulo { font-size: 1.5em; }
    .cabecalho-topo { padding: 0 0.5em; }
    .logo { max-height: 10vh; }
    .hamburger { font-size: 1.5rem; }
    .cabecalho nav ul { flex-direction: column; }
    .cabecalho nav li { font-size: medium; }
    .grupo-container { flex-direction: column; }
    .grupo-classificacao { flex: 1; }
    .jogo-btn { font-size: 0.75rem; padding: 0.5em 0.3em; }
    .jogo-btn-empate { flex: 0 0 60px; }
    .terceiro-linha { font-size: 0.85rem; gap: 0.4rem; }
    .submenu-btn { padding: 0.3em 0.5em; font-size: 0.75rem; }
    .submenu-seta { width: 1.6em; height: 1.6em; font-size: 0.85rem; }
    .artilheiro-container { flex-direction: column; }
}