#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none; /* Começa oculto */
    justify-content: center;
    align-items: center;
    z-index: 2000;
    color: var(--cor-texto-claro);
    flex-direction: column;
    text-align: center;
}

.spinner {
    border: 8px solid rgba(255, 255, 255, 0.3);
    border-top: 8px solid var(--cor-principal); /* Amarelo Objetivo */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loading-text {
    font-size: 1.2em;
    font-weight: bold;
}

/* Estilo de erro existente */

.input-erro {

border-color: red;

background-color: #fff0f0;

}


/* --- 1. ESTILOS GERAIS --- */

:root {

--cor-principal: #FDD700; /* Amarelo Objetivo */

--cor-secundaria: #003F9C; /* Azul Escuro */

--cor-texto-escuro: #333;

--cor-texto-claro: #fff;

--cor-fundo-claro: #f4f4f9;

--cor-borda: #ccc;

--sombra-leve: 0 2px 4px rgba(0, 0, 0, 0.1);

}



* {

margin: 0;

padding: 0;

box-sizing: border-box;

}



body {

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

color: var(--cor-texto-escuro);

background-color: var(--cor-fundo-claro);

line-height: 1.6;

}



a {

text-decoration: none;

color: var(--cor-secundaria);

transition: color 0.3s;

}



a:hover {

color: var(--cor-principal);

}



.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 20px;

}



/* --- 2. HEADER: FAIXA AZUL COM LOGO CENTRALIZADA --- */

header {

background-color: var(--cor-secundaria); /* Faixa Azul */

box-shadow: var(--sombra-leve);

padding: 15px 0; /* Espaçamento vertical da faixa */

}



.header-matricula {

display: flex;

justify-content: center; /* Centraliza a logo horizontalmente */

align-items: center;

padding: 20 10px;

}



.logo-header {

height: 50px; /* Tamanho da logo no cabeçalho */

max-width: 100%;

}


/* Remove elementos de cabeçalho que não existem mais (para garantir) */

.header-left, .header-center, .header-right, .logo-aniversario {

display: none !important;

}



/* --- 3. BOTÃO FLUTUANTE WHATSAPP --- */

.whatsapp-button {

position: fixed;

bottom: 20px;

right: 20px;

z-index: 1000;

width: 60px;

height: 60px;

border-radius: 50%;

overflow: hidden;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

transition: transform 0.3s;

}



.whatsapp-button:hover {

transform: scale(1.1);

}



.whatsapp-button img {

width: 100%;

height: 100%;

}



/* --- 4. PÁGINA DE MATRÍCULA E FORMULÁRIO (DUAS COLUNAS) --- */

.trabalhe-container {

max-width: 900px;

margin: 30px auto;

padding: 0 20px;

}



.titulo-pagina {

text-align: left;

color: var(--cor-secundaria);

margin-bottom: 20px;

font-size: 2.2em;

padding-bottom: 0;

margin-top: 0;

border-left: 5px solid var(--cor-principal);

padding-left: 10px;

}



.linha-separadora {

display: none;

}



.form-container {

background-color: #fff;

padding: 30px;

border-radius: 10px;

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

}



.form-container h2 {

color: var(--cor-secundaria);

margin-top: 25px;

margin-bottom: 15px;

font-size: 1.5em;


/* Linha amarela vertical */

border-left: 5px solid var(--cor-principal);

padding-left: 10px;


/* CHAVE: Força a quebra de linha para a próxima seção */

grid-column: 1 / -1;

}





form {

/* Layout de duas colunas em desktop */

display: grid;

grid-template-columns: 1fr 1fr;

gap: 20px 30px;

}



.form-group {

display: flex;

flex-direction: column;

}



.form-group label {

font-weight: bold;

margin-bottom: 5px;

color: var(--cor-texto-escuro);

}



.form-group input,

.form-group select {

padding: 10px;

border: 1px solid var(--cor-borda);

border-radius: 5px;

font-size: 1em;

transition: border-color 0.3s, box-shadow 0.3s;

width: 100%;

}



.form-group input:focus,

.form-group select:focus {

border-color: var(--cor-secundaria);

box-shadow: 0 0 5px rgba(0, 112, 184, 0.3);

outline: none;

}



/* Estilo para erro */

.input-erro {

border-color: red !important;

background-color: #fff0f0 !important;

}



.erro-cpf {

margin-top: 5px;

}



.botao {

grid-column: 1 / -1; /* Ocupa toda a largura para botões de ação principal */

background-color: var(--cor-secundaria);

color: var(--cor-texto-claro);

padding: 12px 25px;

border: none;

border-radius: 5px;

cursor: pointer;

font-weight: bold;

font-size: 1.1em;

transition: background-color 0.3s, transform 0.1s;

margin-top: 10px;

text-align: center;

}



.botao:hover {

background-color: #005a92;

}



.botao:active {

transform: scale(0.99);

}



/* Botões de replicação específicos para ficar lado a lado */

.form-container form > button[type="button"] {

background-color: #999;

font-size: 0.9em;

padding: 8px 15px;

margin-right: 10px;

width: auto;


/* Permite que os botões fiquem lado a lado */

grid-column: span 1;

}



.form-container form > button[type="button"]:hover {

background-color: #777;

}



/* Força o botão de endereço a ocupar a largura total, ficando isolado */

.form-container form > button[onclick^="replicarEnderecoAluno"] {

grid-column: 1 / -1;

margin-bottom: 15px;

}



/* --- 5. RESPONSIVIDADE (MOBILE) --- */

@media (max-width: 768px) {


form {

grid-template-columns: 1fr; /* Uma coluna em telas pequenas */

gap: 20px;

}


.trabalhe-container {

margin: 20px auto;

}



.form-container {

padding: 20px;

}



.form-container h2 {

margin-left: 0;

}


/* Botões de replicação ocupam toda a largura no mobile */

.form-container form > button[type="button"] {

grid-column: 1 / -1;

width: 100%;

margin-right: 0;

margin-bottom: 10px;

}



.whatsapp-button {

width: 50px;

height: 50px;

bottom: 15px;

right: 15px;

}

}

/* --- 6. RODAPÉ --- */

/* --- 6. RODAPÉ --- */

footer {

width: 100%;

color: black;

text-align: center;

padding: 20px 0;

/* Reduz a margem superior (antes estava 40px) */

margin-top: 20px;

}



/* O .container dentro do footer centraliza o texto na largura máxima (1200px) */

footer .container {

/* Apenas ajusta o padding lateral, mantendo o texto centralizado */

padding: 0 20px;

margin: 0 auto;

max-width: 1200px;

}



footer p {

margin: 5px 0;

font-size: 0.9em;

}



.desenvolvedor {

font-size: 0.8em;

opacity: 0.7;

}