/* Reseta estilos basicos e define a fonte */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #f0f2f5;
    color: #333;
    margin: 0;
    padding: 20px 0; /* Adiciona um respiro no topo e no final da página */

     /* Centraliza todo o conteúdo na tela */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* A altura mínima permite que a página cresça e gere scroll */
    min-height: 100vh;
}

/* O container principal do painel */
.judge-panel {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 320px;
    text-align: center;
}

/* Estilo para o nome do atleta no topo */
#athlete-name {
    font-size: 1.5em; /* 24px */
    font-weight: 600;
    margin-bottom: 30px;
    color: #1a202c;
}

/* Container para o contador de tentativas */
.attempts-counter {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

/* Estilo dos botões de "+" e "-" */
.counter-btn {
    background-color: #e2e8f0;
    border: none;
    border-radius: 50%; /* Deixa os botões redondos */
    width: 50px;
    height: 50px;
    font-size: 2em; /* 32px */
    font-weight: bold;
    color: #4a5568;
    cursor: pointer;
    transition: background-color 0.2s;
}
.counter-btn:hover {
    background-color: #cbd5e0;
}

/* Estilo do número de tentativas (o elemento maior) */
#attempts-display {
    font-size: 5em; /* 80px */
    font-weight: bold;
    color: #2d3748;
    margin: 0 25px; /* Espaçamento entre os botões e o número */
}

/* Container para os botões de Zona e Top */
.toggles-container {
    display: flex;
    justify-content: space-around; /* Espaça os botões igualmente */
}

/* Estilo base dos botões de On/Off (Zona e Top) */
.toggle-btn {
    background-color: #a0aec0; /* Cinza para o estado "Off" */
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 1em; /* 16px */
    font-weight: 600;
    width: 120px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Estilo para o estado "On" do botão de Zona */
.toggle-btn.zone-on {
    background-color: #3182ce; /* Azul */
}

/* Estilo para o estado "On" do botão de Top */
.toggle-btn.top-on {
    background-color: #38a169; /* Verde */
}

/* Estilo para o botão de Salvar e Próximo */
#save-btn {
    background-color: #48bb78; /* Um verde forte para ação primária */
    color: white;
    border: none;
    border-radius: 8px;
    padding: 15px 20px;
    font-size: 1.1em; /* 18px */
    font-weight: 600;
    width: 100%; /* Ocupa toda a largura do painel */
    cursor: pointer;
    margin-top: 30px; /* Espaço acima do botão */
    transition: background-color 0.2s;
}

#save-btn:hover {
    background-color: #38a169;
}

/* --- ESTILOS PARA A TELA DE CADASTRO --- */
form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

/* Regra geral para todos os inputs de texto, número e data */
input[type="text"], 
input[type="number"],
input[type="date"],
input[type="email"],
input[type="tel"] {
    box-sizing: border-box; /* Garante que padding não afete a largura total */
    width: 100%; /* Faz com que ocupem toda a largura do seu container */
    padding: 15px; /* Deixa o campo mais alto e arejado */
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1.1em; /* Aumenta o tamanho da fonte */
    margin-bottom: 10px; /* Adiciona um espaço abaixo de cada input */
    background-color: white;
}

.form-row {
    display: flex;
    gap: 15px; /* Espaço entre os campos */
    flex-wrap: wrap; /* Permite que quebre a linha em telas muito pequenas */
}

/* Sobrescreve a largura para que os campos dentro de .form-row dividam o espaço  */ 
.form-row > input[type="text"],
.form-row > input[type="number"],
.form-row > input[type="date"],
.form-row > input[type="email"],
.form-row > input[type="tel"] {
    width: auto;
    flex-grow: 1;
}

.form-row > input,
.form-row > select {
    width: auto; /* Remove qualquer width: 100% que possa existir */
    flex: 1;     /* Faz com que dividam o espaço igualmente */
}

/* Ajusta o container das informações gerais para melhor alinhamento */
.general-info {
    text-align: center;
    margin-bottom: 20px; /* Adiciona um respiro antes das colunas */
}

form button {
    background-color: #3182ce;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
}

#athlete-list {
    list-style-type: none;
    padding: 0;
    text-align: left;
    margin-bottom: 30px;
}

#athlete-list li {
    background-color: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 5px;
}

.start-competition-btn {
    display: inline-block;
    text-decoration: none;
    background-color: #38a169;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    font-weight: 600;
}

/* --- ESTILOS ATUALIZADOS PARA TELA DO JUIZ --- */
/* Container para os botões Voltar e Salvar */
.action-buttons {
    display: flex;
    gap: 10px; /* Espaço entre os botões */
    margin-top: 30px;
}

/* Botão de Voltar (cor secundária) */
#back-btn {
    background-color: #a0aec0;
    color: white;
    flex-grow: 1; /* Faz os botões dividirem o espaço */
}

/* Botão de Salvar (cor primária) */
#save-btn {
    background-color: #48bb78;
    color: white;
    margin-top: 0; /* Remove a margem que colocamos antes */
    flex-grow: 1; /* Faz os botões dividirem o espaço */
}

/* --- ESTILOS PARA A HOME PAGE --- */
.home-header {    
    margin-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 20px;
}

.home-header h1 {
    margin-bottom: 15px; /* Adiciona espaço abaixo do título */
}

.btn {
    padding: 10px 15px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    border: none;
    cursor: pointer;
}
.btn-primary { background-color: #3182ce; color: white; }
.btn-secondary { background-color: #a0aec0; color: white; }
.btn-danger { background-color: #e53e3e; color: white; }

#competitions-list {
    list-style: none;
    padding: 0;
}

.competition-item {
    background-color: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column; /* Itens empilhados verticalmente */
    align-items: center; /* Alinha os itens à esquerda */
    gap: 15px; /* Adiciona um espaço entre as informações e os botões */
}
.competition-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;
}
.competition-actions {
    display: flex;
    gap: 10px;
}

/* --- ESTILOS PARA A TELA DE COMPETIÇÃO --- */
.form-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}
.form-section h2 {
    margin-top: 0;
}

.btn-remove {
    background: #fed7d7;
    color: #c53030;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    float: right;
    line-height: 20px;
    text-align: center;
}

/* --- ESTILOS PARA O LAYOUT RESPONSIVO --- */

/* Ajusta o painel principal para ocupar mais espaço em telas grandes */
.judge-panel {
    width: 90%; /* Ocupa 90% da largura da tela */
    max-width: 1000px; /* Mas não passa de 1000px de largura */
}

/* Estilo para a seção de informações gerais no topo */
.general-info {
    text-align: center;
}

/* Regra especial para telas com 768px de largura ou mais (Tablets e Desktops) */
@media (min-width: 768px) {
    
    /* O container das colunas agora usa Flexbox para alinhar os itens lado a lado */
    .content-columns {
        display: flex;
        justify-content: space-between;
        gap: 30px; /* Espaço entre as colunas */
    }

    /* Cada seção (coluna) dentro do container ocupará um espaço igual */
    .content-columns .form-section {
        flex: 1; /* Faz com que as colunas dividam o espaço igualmente */
        margin-bottom: 0; /* Remove a margem inferior que não é mais necessária */
    }

    .competition-item {
        flex-direction: row; /* VOLTA a ser lado a lado */
        align-items: center; /* VOLTA a centralizar verticalmente */
    }
}

/* --- ESTILO PARA O CONTAINER DE DATAS --- */
.date-range-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espaço entre os elementos */
    flex-wrap: wrap; /* Permite que os itens quebrem para a linha de baixo em telas pequenas */
    margin-top: 10px;
}

.date-range-container label {
    font-weight: 500;
    color: #4a5568;
}

/* Faz com que os inputs de data não ocupem 100% da largura dentro do flex container */
.date-range-container input[type="date"] {
    width: auto;
    flex-grow: 1; /* Permite que cresçam para ocupar o espaço disponível */
}

/* --- ESTILO PARA O DISPLAY DE PONTUAÇÃO --- */
.score-display {
    background-color: #edf2f7;
    border-radius: 8px;
    padding: 15px;
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.score-display span {
    font-size: 1.2em;
    color: #4a5568;
}

.score-display strong {
    font-size: 2em;
    color: #2d3748;
}

/* --- ESTILOS ATUALIZADOS PARA A HOME --- */

/* Remove a decoração de link do competition-info que removemos */
.competition-link {
    text-decoration: none;
    color: inherit; /* Faz o texto herdar a cor padrão */
    display: block; /* Garante que o link ocupe o espaço */
}

/* Estilo para o novo botão "Gerenciar" */
.btn-success {
    background-color: #48bb78; /* Verde */
    color: white;
}

/* --- ESTILOS PARA O DASHBOARD --- */
.dashboard-section {
    margin-top: 30px;
    text-align: left;
}
.selection-list {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}
.phase-title {
    font-size: 1.5em;
    font-weight: 600;
    margin-top: 20px;
    padding-bottom: 5px;
    border-bottom: 2px solid #e2e8f0;
}
.boulder-sublist {
    list-style: none;
    padding-left: 10px;
}
.boulder-sublist li a {
    display: block;
    text-decoration: none;
    color: #2d3748;
    background-color: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    margin-top: 10px;
    font-size: 1.2em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}
.boulder-sublist li a:hover {
    background-color: #e2e8f0;
    border-color: #cbd5e0;
}

/* --- ESTILOS VISUAIS PARA OS TÍTULOS E SELEÇÃO --- */

/* Formatação geral para os títulos principais de cada "tela" */
.judge-panel h1 {
    font-size: 1.8em; /* Aumenta um pouco o tamanho da fonte */
    color: #2d3748; /* Um cinza mais escuro */
    border-bottom: 2px solid #e2e8f0; /* Adiciona uma linha sutil abaixo */
    padding-bottom: 15px; /* Espaçamento entre o texto e a linha */
    margin-bottom: 25px; /* Espaço abaixo da linha */
}

/* Estilo para o nome da competição/fase que aparece no título */
.subtitle-highlight {
    font-weight: 400; /* Deixa o nome com peso normal */
    font-size: 0.7em; /* Um pouco menor que o título principal */
    color: #718096; /* Um tom de cinza mais claro */
}

/* Deixa os itens da lista de seleção com aparência mais limpa e interativa */
.selection-list li {
    background-color: #fff; /* Fundo branco */
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 10px;
    font-size: 1.2em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* Transição suave para todas as propriedades */
}

/* Efeito ao passar o mouse por cima das opções */
.selection-list li:hover {
    border-color: #3182ce; /* Borda azul */
    color: #3182ce; /* Texto azul */
    transform: translateY(-2px); /* Efeito de "levantar" o card */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra suave */
}

/* --- ESTILO PARA A SETA DE VOLTAR --- */

/* Posiciona o painel relativamente para que a seta possa ser posicionada dentro dele */
.judge-panel {
    position: relative;
}

.back-arrow {
    position: absolute; /* Posicionamento absoluto em relação ao .judge-panel */
    top: 25px;
    left: 25px;
    font-size: 2em; /* Tamanho da seta */
    font-weight: bold;
    color: #a0aec0; /* Cinza claro */
    cursor: pointer;
    transition: color 0.2s;
}

.back-arrow:hover {
    color: #2d3748; /* Cinza escuro ao passar o mouse */
}

/* --- ESTILOS PARA A TELA DE RESULTADOS --- */

/* Permite que o painel de resultados ocupe mais espaço */
.results-panel {
    position: relative;
    width: 95%;
    max-width: 1200px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 20px 30px;
    text-align: center;
}

.results-header {
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 20px;
    padding-bottom: 15px;
    
    padding-top: 30px;
    padding-left: 10px; /* Cria espaço horizontal esquerdo para a seta */
    padding-right: 10px;
    
    
    
}
.results-header h1 {
    margin-bottom: 5px;
    
    
}
.results-header h2 {
    font-weight: 400;
    color: #718096;
    margin-top: 5px;
}

.table-container {
    overflow-x: auto; /* Adiciona scroll horizontal em telas pequenas */
}

#results-table {
    width: 100%;
    border-collapse: collapse; /* Remove o espaço entre as células */
    font-size: 1.1em;
}

#results-table th, #results-table td {
    padding: 12px 15px;
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
}

#results-table thead th {
    background-color: #f7fafc;
    font-weight: 600;
    color: #4a5568;
}

#results-table tbody tr:nth-child(even) {
    background-color: #f7fafc; /* Cor de fundo para linhas pares */
}

#results-table td:first-child, #results-table td:nth-child(2) {
    font-weight: 500;
    text-align: center;
}

.score-cell {
    font-weight: normal;
}

/* Aplica o negrito APENAS na célula de pontuação total */
.total-score-cell {
    font-weight: bold;
}

.attempts-cell {
    font-size: 0.8em;
    color: #718096;
    display: block; /* Para ficar abaixo da pontuação */
}

/* --- ESTILO PARA CÉLULA DE ATLETA ESCALANDO --- */
.is-climbing {
    background-color: #c6f6d5 !important; /* Um tom de verde claro */
    border: 2px solid #38a169; /* Borda verde mais escura */
    transition: background-color 0.5s ease;
}

/* --- ESTILO PARA ATLETAS QUALIFICADOS --- */
.result-card.qualified {
    background-color: #f0fff4; /* Fundo verde muito claro */
}

/* Linha de corte abaixo do último qualificado */
.result-card.last-qualified {
    border-bottom: 3px solid #38a169; /* Borda verde escura */
}

select {
    width: 100%;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1.1em;
    margin-bottom: 10px;
    background-color: white;
}

/* --- ESTILOS PARA O DASHBOARD DE GERENCIAMENTO --- */
#phases-management-list {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}
.phase-management-item {
    background-color: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.phase-info {
    font-weight: 500;
}
.phase-status {
    font-size: 0.8em;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 12px;
    color: white;
    margin-left: 10px;
    vertical-align: middle;
}
.status-pendente { background-color: #a0aec0; } /* Cinza */
.status-em-andamento { background-color: #3182ce; } /* Azul */
.status-finalizado { background-color: #38a169; } /* Verde */

/* --- ESTILOS PARA PLACAR RESPONSIVO COM DETALHES --- */

/* Por padrão (mobile-first), o botão de detalhes é visível */
#toggle-details-btn {
    display: inline-block;
    margin-top: 10px;
}

/* Esconde as colunas de detalhes (boulders, categoria) no celular por padrão */
#results-table .col-detail {
    display: none;
}

/* Estilo para a linha de detalhes que aparecerá no celular */
.details-row {
    display: none; /* Começa escondida */
    background-color: #f7fafc;
}
.details-row td {
    padding: 10px 15px !important;
    text-align: center !important;
}
.details-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}
.details-content span {
    font-size: 0.9em;
    color: #4a5568;
}
.details-content strong {
    color: #2d3748;
}

/* Regra para mostrar a linha de detalhes quando o botão é clicado */
#results-table.show-details .details-row {
    display: table-row;
}


/* Em telas grandes (min-width: 769px), o layout muda */
@media screen and (min-width: 769px) {
    /* Esconde o botão de detalhes, pois não é necessário */
    #toggle-details-btn {
        display: none;
    }

    /* Mostra as colunas de detalhes que estavam escondidas no mobile */
    #results-table .col-detail {
        display: table-cell;
    }

    /* Esconde permanentemente a linha de detalhes em telas grandes */
    .details-row {
        display: none !important;
    }
}

/* --- ESTILOS PARA LISTA DE CHECKBOXES --- */
.checkbox-container {
    text-align: left;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
}
.checkbox-container label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
    color: #4a5568;
}
.checkbox-item {
    display: flex;    
    align-items: center;
    margin-bottom: 10px;
}
.checkbox-item input[type="checkbox"] {
    margin: 0 8px 0 0; /* Remove margens verticais e adiciona espaço à direita */
    vertical-align: middle;
}
.checkbox-item label {
    font-weight: normal; /* Garante que o texto não tenha estilos conflitantes */
}

/* --- ESTILOS PARA O NOVO PLACAR DE RESULTADOS --- */

/* Remove bordas da tabela antiga e usa o painel para espaçamento */
.results-panel .table-container {
    border: none;
    padding: 0;
}
#results-table { /* A tabela agora se comporta como um container de divs */
    border-collapse: separate;
    border-spacing: 0 15px; /* Espaço vertical entre os 'cards' de resultado */
}
#results-table thead {
    display: none; /* Escondemos o cabeçalho, a UI é autoexplicativa */
}

/* Container dos gráficos de boulder */
.boulder-graphics-container {
    display: none; /* Começa escondido, esta é a única propriedade 'display' que deve estar aqui */
    padding: 15px 15px 15px 80px;
    background: #f7fafc;
    border-top: 1px solid #e2e8f0;
    gap: 10px;
    flex-wrap: wrap;
}
.results-panel.show-details .boulder-graphics-container {
    display: flex;
}

/* --- ESTILOS PARA O NOVO PLACAR DE RESULTADOS --- */

/* Contêiner principal dos resultados, para dar espaçamento */
#results-container {
    margin-top: 20px;
}

/* O "card" de cada atleta */
.result-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 15px;
    overflow: hidden; /* Garante que o conteúdo respeite as bordas arredondadas */
}

/* A linha principal de informações do atleta */
.result-row {
    display: flex;
    align-items: center;
    padding: 15px;
}

.result-rank {
    font-size: 1.5em;
    font-weight: 600;
    color: #a0aec0;
    width: 50px;
    text-align: center;
}

.result-athlete {
    flex: 1; /* Faz esta seção ocupar o espaço disponível */
    text-align: left;
    padding: 0 15px;
}

.athlete-name {
    font-size: 1.2em;
    font-weight: 600;
    color: #2d3748;
}

.athlete-details {
    font-size: 0.9em;
    color: #718096;
}

.result-total-score {
    font-size: 1.2em;
    font-weight: bold;
    color: #2d3748;
    padding-left: 15px;
}

/* Gráfico individual de um boulder */
.boulder-graphic {
    width: 20px;
    text-align: center;
}

.graphic-bar {
    position: relative;
    height: 40px;
    border: 2px solid #cbd5e0;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 5px;
    background-color: white;
}

.graphic-top, .graphic-zone {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    
}

.graphic-zone {
    border-top: 1px solid #cbd5e0;
}

.graphic-bar .filled {
    background-color: #4a5568;
    color: white;
}

.graphic-bar.no-score::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* O gradiente abaixo desenha uma linha diagonal fina */
    background: linear-gradient(
        to top left,
        transparent 40%,
        #a0aec0 49.5%, /* Cor da linha - um cinza do seu tema */
        #a0aec0 50.5%,
        transparent 50.5%
    );
}

.boulder-number {
    font-size: 0.8em;
    font-weight: 600;
    color: #718096;
}

/* Novo Toggle Switch */
.toggle-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding-left: 15px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 28px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #38a169; /* Verde */
}

input:checked + .slider:before {
  transform: translateX(22px);
}

/* Animação que fará o texto piscar suavemente */
@keyframes slow-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

/* A classe para o nosso indicador de tentativa ao vivo */
.live-attempt {
    color: #38a169; /* Um tom de verde do seu tema */
    font-weight: bold;
    font-size: 1em; /* Tamanho da fonte */
    margin-top: 5px; /* Espaço abaixo do número do boulder */
    
    /* Aplica a animação */
    animation: slow-blink 2s infinite;
}

/* --- ESTILOS PARA O PAINEL DE CONTROLE (INDEX) --- */

.quick-access {
    border: none; /* Remove a borda padrão do fieldset */
    border-bottom: 1px solid #e2e8f0; /* Mantém apenas a linha divisória inferior */
    text-align: center; /* Centraliza o conteúdo */
}

.quick-access legend h2 {
    font-size: 1.2em; /* Tamanho da fonte do título da seção */
    color: #4a5568; /* Cor mais suave */
}

/* Garante que os botões dentro do fieldset fiquem centralizados e com espaço */
.quick-access .competition-actions {
    justify-content: center;
    margin-bottom: 20px;
}

/* --- ESTILOS PARA A LISTA DE FASES AGRUPADA --- */

/* Transforma o item da lista em um container flex para alinhar os itens */
.phase-group-item {
    display: flex;
    justify-content: space-between; /* Coloca o título na esquerda e os links na direita */
    align-items: center;
    padding: 15px 20px; /* Reduz um pouco o padding vertical */
}

/* Título do grupo (ex: Principal Masculino) */
.phase-group-title {
    font-size: 1.1em;
    font-weight: 500;
}

/* Container para os links das fases (Q, S, F) */
.phase-links {
    display: flex;
    gap: 10px; /* Espaço entre os botões de fase */
}

/* Estilo individual de cada link de fase (Q, S, F) */
.phase-link {
    background-color: #e2e8f0;
    color: #4a5568;
    border-radius: 8px;
    font-weight: bold;
    width: 42px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;    
}

/* Efeito ao passar o mouse por cima do link da fase */
.phase-link:hover {
    background-color: #3182ce;
    color: white;
    transform: scale(1.1);
}

/* --- ESTILOS PARA O MENU DROPDOWN --- */

/* Container principal do menu, posicionado no canto */
.dropdown-menu {
    position: absolute;
    top: 25px;
    left: 25px;
}

/* Estilo do botão do menu (ícone de hambúrguer) */
.menu-btn {
    background-color: #f0f2f5;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1.5em;
    width: 45px;
    height: 45px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.menu-btn:hover {
    background-color: #e2e8f0;
}

/* O conteúdo do dropdown (a lista de links) */
.dropdown-content {
    display: none; /* Começa escondido */
    position: absolute;
    background-color: white;
    min-width: 220px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    border-radius: 8px;
    z-index: 1; /* Garante que fique sobre outros elementos */
    margin-top: 5px;
}

/* Estilo dos links dentro do dropdown */
.dropdown-content a {
    color: #2d3748;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-weight: 500;
}
.dropdown-content a:hover {
    background-color: #f7fafc;
}

/* Classe que será adicionada/removida via JS para mostrar o menu */
.dropdown-content.show {
    display: block;
}

/* --- ESTILOS PARA O IDENTIFICADOR DE CARGO PRIVILEGIADO --- */

/* Por padrão, o identificador fica escondido */
.role-identifier {
    display: none;
}

/* Quando o body tem a classe 'privileged-mode', nós mostramos e estilizamos o identificador */
.privileged-mode .role-identifier {
    display: block;
    background-color: #f6e05e; /* Amarelo/Dourado */
    color: #975a16;
    padding: 8px 15px;
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
    margin: -10px 0 20px 0;
    font-size: 0.9em;
    border: 1px solid #d69e2e;
}

/* Adiciona o texto específico para cada cargo usando CSS */
.privileged-mode.role-arbitro_chefe .role-identifier::before {
    content: 'MODO: ÁRBITRO CHEFE';
}

.privileged-mode.role-presidente_juri .role-identifier::before {
    content: 'MODO: PRESIDENTE DO JÚRI';
}

/* Adiciona também uma borda sutil no topo do painel principal para reforçar o aviso */
.privileged-mode .judge-panel {
    border-top: 5px solid #f6e05e;
}

/* --- ESTILO PARA BOTÕES DE FASE DESABILITADOS --- */

.phase-link.disabled {
    background-color: #f7fafc; /* Fundo cinza bem claro */
    color: #cbd5e0; /* Texto cinza claro */
    cursor: not-allowed; /* Muda o cursor para indicar que não é clicável */
    pointer-events: none; /* Desabilita completamente qualquer evento de mouse (cliques, hover) */
}

/* Garante que o efeito de hover não se aplique ao botão desabilitado */
.phase-link.disabled:hover {
    transform: none;
    background-color: #f7fafc;
    color: #cbd5e0;
}

/* --- ESTILOS PARA O STATUS DAS FASES (BORDAS) --- */

/* Borda verde para fases em andamento */
.phase-link.status-inprogress {
    box-shadow: 0 0 0 2px #48bb78; /* Verde do seu tema */
}

/* Borda vermelha para fases finalizadas */
.phase-link.status-finished {
    box-shadow: 0 0 0 2px #e53e3e; /* Vermelho do seu tema */
}

.form-field.inline {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap; /* quebra linha em telas pequenas */
}

.form-field.inline label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-weight: 500;
  padding-bottom: 16px;
}

.format-option input[type="radio"] {
  transform: scale(1.1);
}

.format-option.disabled {
  opacity: 0.6;
}

/* --- ESTILOS PARA AS ABAS DE MODALIDADE --- */
        .discipline-tabs {
            display: flex;
            border-bottom: 2px solid #e2e8f0;
            margin-bottom: 10px;
        }
        .tab-link {
            padding: 10px 20px;
            cursor: pointer;
            text-decoration: none;
            color: #4a5568;
            font-weight: 500;
            border-bottom: 3px solid transparent;
            margin-bottom: -2px; /* Sobrepõe a borda principal */
            font-size: 1.1em;
        }
        .tab-link:hover {
            background-color: #f7fafc;
        }
        .tab-link.active {
            color: #2d3748;
            font-weight: 600;
            border-bottom-color: #3182ce; /* Cor azul de destaque */
        }
        .tab-link.disabled {
            display: none; /* Esconde abas de modalidades não habilitadas */
        }

        /* Remove o cursor: pointer dos LIs (APENAS na tela de resultados) */
        #page-resultados #category-groups-list > li {
            cursor: default;
        }

        /* Garante que os links clicáveis (Q, S, F) TENHAM o cursor */
        #category-groups-list .phase-link {
            cursor: pointer;
        }

/* --- Estilos para o Modal --- */
        .modal { 
            display: none; /* <-- Esta é a linha principal que faltava */
            position: fixed; 
            z-index: 100; 
            left: 0; 
            top: 0; 
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgba(0,0,0,0.4); 
        }
        .modal-content { 
            background-color: #fefefe; 
            margin: 10% auto; 
            padding: 20px; 
            border: 1px solid #888; 
            width: 80%; 
            max-width: 600px; 
            border-radius: 12px; 
        }
        .close-btn { 
            color: #aaa; 
            float: right; 
            font-size: 28px; 
            font-weight: bold; 
            cursor: pointer; 
        }

/* Estilos para os checkboxes de participação na lista de atletas */
.participation-checkboxes {
    display: flex;
    gap: 15px; /* Espaço entre os checkboxes */
    margin: 0 15px; /* Espaço antes e depois dos checkboxes */
}

.participation-checkboxes label {
    display: flex;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
}

.participation-checkboxes input[type="checkbox"] {
    margin-right: 5px;
    transform: scale(1.2); /* Deixa o checkbox um pouco maior */
}

/* Ajusta o layout do LI para acomodar os checkboxes */
#athlete-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#athlete-list li .athlete-info {
    flex-grow: 1; /* Faz o nome ocupar o espaço disponível */
    text-align: left;
}

/* --- INÍCIO DA MODIFICAÇÃO ---
Estilo em Colunas para Seleção de Modalidade (tela_juiz.html)
*/
#disciplines-list {
    display: flex;
    flex-wrap: wrap; /* Permite quebrar a linha se não couber */
    gap: 20px;       /* Espaço entre as colunas */
}

#disciplines-list li {
    flex: 1;         /* Faz as colunas dividirem o espaço */
    margin-bottom: 0; /* Remove a margem inferior do .selection-list li */
    min-width: 150px; /* Garante uma largura mínima por coluna */
    text-align: center; /* Centraliza o texto (Boulder, Lead, Speed) */
}
/* --- FIM DA MODIFICAÇÃO --- */

/* Estilos para o Input de Agarra (Lead) - Refinados */
#lead-hold-input.lead-hold-input-style {
    /* --- Estilos para igualar ao #attempts-display --- */
    font-size: 5em;       /* Mesmo tamanho */
    font-weight: bold;    /* Mesmo peso */
    color: #2d3748;       /* Mesma cor */
    margin: 0 25px;       /* Mesmo espaçamento */
    text-align: center;   /* Centraliza o número */
    
    /* --- Estilos para remover aparência de input --- */
    border: none;         /* Remove a borda */
    background-color: transparent; /* Remove fundo */
    padding: 0;           /* Remove padding interno */
    outline: none;        /* Remove o contorno azul ao focar (opcional) */
    box-shadow: none;     /* Remove qualquer sombra */
    
    /* --- Controle de Largura --- */
    width: auto;          /* Deixa a largura se ajustar ao conteúdo */
    min-width: 60px;      /* Largura mínima para digitar (ajuste se necessário) */
    max-width: 150px;     /* Largura máxima para evitar excesso (ajuste se necessário) */

    /* --- Remove setas de número (já existentes, mantidos) --- */
    -moz-appearance: textfield;
}

#lead-hold-input.lead-hold-input-style::-webkit-outer-spin-button,
#lead-hold-input.lead-hold-input-style::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- ESTILOS PARA RESULTADOS LEAD --- */
.lead-results-container {
    display: flex;
    gap: 15px; /* Espaço entre as colunas R1, R2 */
    padding-left: 15px;
    align-items: center; /* Alinha verticalmente se houver diferença de altura */
}

.lead-route-score {
    display: flex;
    flex-direction: column; /* Empilha Score, Rank, Label */
    align-items: center;   /* Centraliza horizontalmente */
    min-width: 50px;      /* Largura mínima para cada coluna */
}

.lead-route-score .score-value {
    font-size: 1em;
    font-weight: bold;    
    color: #2d3748;
}

.lead-route-score .route-rank {
    font-size: 0.8em;
    color: #a0aec0; /* Cinza claro */
}

.lead-route-score .route-label {
    font-size: 0.7em;
    font-weight: bold;
    color: #718096; /* Cinza médio */
    margin-top: 2px;
}

/* Indicador LIVE (opcional) */
.live-indicator {
    font-size: 0.6em;
    color: #38a169; /* Verde */
    vertical-align: super;
    font-weight: bold;
    margin-left: 2px;
    animation: slow-blink 1.5s infinite; /* Reutiliza animação */
}

/* --- Ocultação Condicional Baseada na Disciplina --- */

/* --- ESTILOS PARA A PÁGINA DE GERENCIAR ATLETAS --- */

/* Cabeçalho com Busca e Botão Add */
.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Permite quebrar linha em telas pequenas */
    gap: 15px;
}

.admin-header #athlete-search-input {
    width: auto; /* Remove 100% width */
    flex-grow: 1; /* Ocupa espaço disponível */
    min-width: 250px;
    margin-bottom: 0; /* Remove margem padrão de inputs */
}

.admin-header .btn-primary {
    width: auto; /* Remove 100% width */
    flex-shrink: 0; /* Impede que o botão encolha */
}

/* Tabela de Atletas */
#athletes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.1em;
}

#athletes-table th, #athletes-table td {
    padding: 12px 15px;
    text-align: left; /* Alinha à esquerda por padrão */
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap; /* Impede quebra de linha nas células */
}

#athletes-table th {
    background-color: #f7fafc;
    font-weight: 600;
    color: #4a5568;
}

#athletes-table tbody tr:nth-child(even) {
    background-color: #f7fafc;
}

/* Coluna de Ações */
#athletes-table .athlete-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
}

/* Campos do Responsável no Modal */
#guardian-fields {
    border-top: 1px solid #e2e8f0;
    margin-top: 20px;
    padding-top: 15px;
}

/* Ajuste para o botão "Copiar do Atleta" dentro do .form-row */
.form-row > button.btn-secondary {
    flex-grow: 0; /* Não cresce */
    flex-shrink: 0; /* Não encolhe */
    width: auto; /* Largura automática */
    margin-bottom: 10px; /* Alinha com os inputs */
    padding: 10px 15px;
    font-size: 0.9em;
    line-height: 1.5; /* Altura da linha */
}

/* --- Estilos para o Dropdown de Ações da Fase (dashboard.html) --- */

/* Container relativo para o dropdown */
.action-dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle; /* Alinha com os outros botões */
}

/* Botão de três pontos */
.btn-dropdown-toggle {
    background-color: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1.2em;
    font-weight: bold;
    color: #4a5568;
    cursor: pointer;
    padding: 5px 10px;
    line-height: 1.2; /* Ajuste para centralizar os pontos */
    margin-left: 5px;
}
.btn-dropdown-toggle:hover {
    background-color: #e2e8f0;
}

/* O menu suspenso (escondido por padrão) */
.dropdown-menu-content {
    display: none; /* Escondido por padrão */
    position: absolute;
    right: 0; /* Alinha à direita do botão */
    top: 100%; /* Aparece abaixo do botão */
    background-color: white;
    min-width: 180px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    z-index: 10;
    margin-top: 4px;
}

/* Classe 'show' para exibir o menu via JS */
.dropdown-menu-content.show {
    display: block;
}

/* Links dentro do menu */
.dropdown-menu-content a {
    color: #2d3748;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    font-size: 0.9em;
    font-weight: 500;
}
.dropdown-menu-content a:hover {
    background-color: #f7fafc;
}

/* Estilos para os cards de atleta no modal (reutilizados de competicao.html) */
.category-group-card {
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 8px;
    cursor: grab;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.category-group-card:active {
    cursor: grabbing;
}
.card-count {
    font-weight: bold;
    color: #3182ce;
}
.sortable-ghost {
    opacity: 0.4;
    background: #cce5ff;
}
/* Badges na lista de atletas */
.status-badges {
    display: flex;
    gap: 5px;
    margin-right: 10px;
}

.badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}

.badge-boulder { background-color: #3182ce; } /* Azul */
.badge-lead { background-color: #dd6b20; }    /* Laranja */
.badge-speed { background-color: #d69e2e; }   /* Amarelo */
.badge-guest { background-color: #718096; }   /* Cinza */

/* Estado DNS (vermelho e riscado) */
.badge.dns {
    background-color: #f60404;
    text-decoration: line-through;
    opacity: 0.8;
}

/* Ajuste no botão de editar */
.btn-edit-athlete {
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    margin-left: 5px;
    color: #4a5568;
}
.btn-edit-athlete:hover { color: #3182ce; }

.logo-container {
width: 100%;
text-align: center;
padding: 40px 0;
}

.logo-container img {
max-width: 70px;
height: auto;
opacity: 0.7;
}

/* --- ESTILOS PARA CARD DE INSCRIÇÃO --- */
.reg-card {
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}
.reg-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.reg-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    border-bottom: 1px solid #f7fafc;
    padding-bottom: 10px;
}
.reg-price {
    background-color: #f0fff4;
    color: #2f855a;
    padding: 5px 10px;
    border-radius: 8px;
    font-weight: bold;
    border: 1px solid #c6f6d5;
}
.participant-preview {
    display: inline-block;
    margin-top: 5px;
    padding: 5px 10px;
    background-color: #ebf8ff;
    color: #3182ce;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
}
.participant-preview:hover {
    background-color: #bee3f8;
}