:root {
    --amarelo-modal: #FFFF00;
    --azul-input: #00b0ff;
    --azul-marinho: #000080;
    --verde-entrar: #009B3A;
    --vermelho-cancelar: #ff0000;
}

/* ================================================= */
/* ESTILO DO MODAL          ESSE AQUI ESTÁ AGRADÁVEL                         */
/* ================================================= */
.login-modal-content {
    background-color: var(--amarelo-modal) !important; 
    border-radius: 25px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: none !important;
    padding: 10px;
}

/* MASCOTE (Tozinho) */
.tozinho-img {
    width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 5px; 
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}

/* TÍTULOS E LABELS */
.login-modal-title {
    color: var(--azul-marinho) !important;
    font-family: 'Fredoka One', cursive;
    font-size: 1.8rem;
    text-align: center;
}

.login-form-label {
    color: var(--azul-marinho) !important;
    font-weight: bold !important;
    text-transform: uppercase;
    font-size: 0.8rem;
    margin-bottom: 5px;
    display: block;
}

/* ================================================= */
/* INPUTS (Sempre Azuis)                             */
/* ================================================= */
.login-form-control {
    background-color: var(--azul-input) !important;
    color: var(--azul-marinho) !important;
    border: 2px solid var(--azul-marinho) !important; 
    border-radius: 12px !important;
    padding: 12px !important;
    font-weight: 600;
}

/* Impede que o navegador mude a cor para branco/amarelo no preenchimento automático */
.login-form-control:-webkit-autofill,
.login-form-control:-webkit-autofill:hover, 
.login-form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--azul-input) inset !important;
    -webkit-text-fill-color: var(--azul-marinho) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.login-form-control:focus {
    background-color: #03a9f4 !important;
    border-color: var(--azul-marinho) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 128, 0.25);
    outline: none !important;
}

/* ================================================= */
/* BOTÕES (Cores Calibradas)                         */
/* ================================================= */

/* BOTÃO ENTRAR (Verde) */
.login-btn-verde {
    background-color: #009B3A !important; /* Verde oficial solicitado */
    color: #FFFFFF !important;           /* Texto sempre branco para leitura */
    border: 2px solid #007d2f !important; /* Borda um pouco mais escura para dar profundidade */
    border-radius: 12px !important;
    padding: 12px 40px;
    font-weight: bold !important;
    text-transform: uppercase;
    display: block !important;
    margin: 20px auto 10px !important;
    min-width: 220px;
    transition: transform 0.2s;
}

/* Garante que ele continue verde mesmo ao passar o mouse */
.login-btn-verde:hover {
    background-color: #007d2f !important; /* Verde um pouco mais escuro no hover */
    transform: scale(1.05);
    color: #FFFFFF !important;
}

/* BOTÃO CANCELAR (Vermelho) */
.btn-cancelar-modal {
    background-color: var(--vermelho-cancelar) !important; 
    color: #ffffff !important;
    border: 2px solid #b30000 !important;
    border-radius: 12px !important;
    padding: 12px 40px;
    font-weight: bold !important;
    text-transform: uppercase;
    display: block !important;
    margin: 10px auto !important;
    min-width: 220px;
    transition: transform 0.2s;
}

.login-btn-verde:hover, .btn-cancelar-modal:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* BOTÃO GOOGLE */
.btn-google-custom {
    border: 2px solid var(--azul-marinho) !important;
    color: var(--azul-marinho) !important;
    background-color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: bold !important;
    margin: 10px auto !important;
    min-width: 220px;
}

/* TEXTOS E LINKS */
.login-link {
    color: var(--azul-marinho) !important;
    font-weight: bold !important;
    text-decoration: none;
    font-size: 0.9rem;
}

.login-link:hover {
    text-decoration: underline;
}

.modal-header .btn-close {
    filter: brightness(0) saturate(100%) invert(11%) sepia(94%) saturate(4529%);
}