* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Definição das cores. 
  Mantive o azul como primário, pois é uma cor profissional.
*/
:root {
    --primary: #2563eb; /* Azul primário */
    --primary-hover: #1d4ed8; /* Tom mais escuro para hover */
    --border-light: #e2e8f0; /* Borda suave */
    --border-focus: #2563eb;
    --text-primary: #1e293b; /* Texto principal escuro */
    --text-secondary: #64748b; /* Texto secundário (cinza) */
    --background-page: #f4f7f6; /* Fundo da página (mesmo do painel) */
    --background-card: #ffffff; /* Fundo do card (branco) */
    --error-bg: #fee2e2;
    --error-text: #991b1b;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Cor de fundo "clean", igual ao painel */
    background-color: var(--background-page);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem; /* Espaçamento para telas pequenas */
}

/* Container do Login */
.login-container {
    background: var(--background-card);
    border-radius: 0.75rem; /* Cantos arredondados */
    padding: 2.5rem; /* Espaçamento interno */
    width: 100%;
    max-width: 420px;
    /* Sombra profissional suave, igual ao painel */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Estilo do Logo */
.logo {
    text-align: center;
    margin-bottom: 2rem;
}

.logo h1 {
    font-size: 2rem;
    color: var(--text-primary); /* Trocado de azul para preto, mais "clean" */
    margin-bottom: 0.25rem;
}

.logo p {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* Botões de seleção de tipo (Morador, Porteiro, Admin) */
.tipo-usuario {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.tipo-btn {
    padding: 0.75rem;
    border: 1px solid var(--border-light);
    background: var(--background-card);
    border-radius: 0.5rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease-in-out;
    font-weight: 600;
    color: var(--text-secondary);
}

.tipo-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Estado ativo do botão de tipo */
.tipo-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

/* Grupos de formulário (Label + Input) */
.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600; /* Dando mais peso ao label */
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-control {
    width: 100%;
    padding: 0.875rem;
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    font-size: 1rem;
    color: var(--text-primary);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Efeito de foco nos inputs */
.form-control:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); /* Sombra de foco sutil */
}

/* Botão principal de "Entrar" */
.btn-primary {
    width: 100%;
    padding: 1rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.btn-primary:hover {
    background: var(--primary-hover);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.15);
}

/* Mensagem de erro */
.error-message {
    background: var(--error-bg);
    color: var(--error-text);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    border: 1px solid rgba(153, 27, 27, 0.2);
}