/* Estilo Global */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Adicionado o ponto e vírgula aqui */
    margin: 20px;
    background-color: #f9f9f9;
}
h1 {
    text-align: center;
    color: #333;
}

p {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.3em;
    color: #555;
}

/* Estilo para o Logo */
.logo {
    position: absolute;
    top: 20px; /* Ajuste a distância do topo */
    left: 20px; /* Ajuste a distância da direita */
    width: 200px; /* Ajuste o tamanho da imagem */
    height: auto; /* Mantém a proporção */
}

/* Estilo para a Imagem Pequena no Topo Direito */
.small-image {
    position: absolute;
    top: 20px; /* Distância do topo */
    right: 20px; /* Distância da borda direita */
    width: 150px; /* Largura da imagem */
    height: auto; /* Mantém a proporção da imagem */
    border: 2px solid #d41f1f; /* (Opcional) Adiciona uma borda */
    border-radius: 8px; /* (Opcional) Borda arredondada */
}


/* Botões Draggable */
#draggable-buttons {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

button.draggable {
    padding: 10px 15px;
    border: 2px solid #4CAF50;
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    cursor: grab;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.2s;
}

button.draggable:hover {
    background-color: #45a049;
    transform: scale(1.1);
}

button.draggable:active {
    cursor: grabbing;
    background-color: #3e8e41;
}

/* Estilo da Tabela */
table {
    width: 90%; /* Tamanho consistente das tabelas */
    margin: 20px auto;
    border-collapse: collapse;
    table-layout: fixed; /* Força alinhamento consistente das colunas */
}

th, td {
    padding: 10px;
    text-align: center;
    border: 2px solid #d41f1f; /* Bordas vermelhas */
}

/* Largura Consistente para Colunas */
th:nth-child(1),
td:nth-child(1) {
    width: 40%; /* Coluna da Região */
}

th:nth-child(2),
td:nth-child(2) {
    width: 60%; /* Coluna de Dados */
}

/* Estilo do Cabeçalho */
thead tr {
    background-color: #d41f1f; /* Fundo vermelho */
    color: white; /* Texto branco */
}

/* Estilo das Linhas Alternadas */
tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Fundo cinza claro */
}

tbody tr:nth-child(odd) {
    background-color: white; /* Fundo branco */
}

/* Células Droppable */
td.droppable {
    font-style: italic;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Feedback Visual ao Arrastar */
td.droppable.over {
    background-color: #c3e6cb; /* Verde claro */
}

/* Feedback Visual - Resposta Correta */
td.droppable.correct {
    background-color: #4CAF50; /* Verde escuro */
    color: white;
}

/* Feedback Visual - Resposta Incorreta */
td.droppable.incorrect {
    background-color: #f5c6cb; /* Vermelho claro */
    color: #721c24;
}