/* Arquivo: assets/css/login.css (Ajustado para Card Claro) */

:root {
    --carlla-primary: #4299E1;
    --carlla-primary-light: #63B3ED;
    --carlla-accent: #0A1128;
    /* Fundo do Corpo */
    --carlla-light: #FFFFFF;
    /* Fundo do Card */
    --carlla-secondary: #738B9F;
    --border-color: #E2E8F0;
    /* Borda clara */
    --text-dark: #1F2937;
    /* Texto escuro dentro do card */
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

body {
    background-color: var(--carlla-accent);
    /* Fundo Escuro */
    font-family: 'Inter', sans-serif;
    color: var(--carlla-light);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.logo-auth {
    position: absolute;
    top: 100px;
    width: 100%;
    text-align: center;
}

.logo-auth img {
    max-width: 150px;
    /* Ajuste o tamanho do seu logo */
}

/* Estilo para a Imagem do Logotipo (Nova Classe para o logo cf-logo-white.png) */
.logo-img {
    max-width: 180px;
    /* Largura máxima, ajuste conforme necessário */
    height: auto;
    /* Mantém a proporção da imagem */
    display: block;
    /* Garante que a imagem se comporte como bloco */
    margin: 0 auto;
    /* Centraliza a imagem se ela for usada dentro de um bloco maior */
}

/* Card Branco/Claro */
.auth-card {
    background-color: var(--carlla-light);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    /* O da imagem é mais quadrado que 12px */
    padding: 40px;
    width: 100%;
    max-width: 380px;
    /* Mais estreito, como na imagem */
    box-shadow: var(--shadow-lg);
    text-align: center;
    color: var(--text-dark);
    /* Texto principal escuro */
    margin-top: 100px;
    /* Dá espaço para o logo */
}

.auth-card h2 {
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 25px;
}

/* Ícone de Usuário Grande */
.auth-icon {
    width: 50px;
    height: 50px;
    background-color: var(--carlla-primary);
    border-radius: 50%;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--carlla-light);
}

/* Estilos de Formulário */
.form-group-custom {
    text-align: left;
    margin-bottom: 20px;
}

.form-control-custom {
    /* Input Fundo Branco, conforme a imagem */
    background-color: var(--carlla-light);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    padding: 10px 15px;
    border-radius: 4px;
    width: 100%;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-control-custom:focus {
    border-color: var(--carlla-primary);
    box-shadow: none;
    outline: none;
}

.form-label-custom {
    color: var(--text-dark);
    font-size: 0.8rem;
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

/* Botão Entrar */
.btn-primary-custom {
    background-color: var(--text-dark);
    /* O botão na imagem é de cor escura, não primária */
    border-color: var(--text-dark);
    color: var(--carlla-light);
    font-weight: 600;
    padding: 10px;
    border-radius: 4px;
    transition: background-color 0.2s, border-color 0.2s;
    width: 100%;
}

.btn-primary-custom:hover {
    background-color: var(--carlla-primary);
    border-color: var(--carlla-primary);
}

/* Links (Quero Criar Minha Conta, etc) */
.auth-link {
    color: var(--text-dark);
    /* Links escuros, não primários, como na imagem */
    text-decoration: none;
    font-size: 0.9rem;
    display: block;
    margin-top: 15px;
}

.auth-link:hover {
    color: var(--carlla-primary);
    text-decoration: underline;
}

/* Campo de Senha com Ícone (simulação) */
.password-field {
    position: relative;
    width: 100%;
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--carlla-secondary);
}

.alert-custom {
    border-radius: 4px;
    text-align: left;
    color: white;
    background-color: #dc3545;
    /* Cor vermelha do Bootstrap */
    border: none;
}

/* Alert utilities (used by esqueci/index.php) */
.alert {
    padding: 10px 12px;
    border-radius: 4px;
    margin-top: 10px;
    text-align: left;
    font-size: 0.95rem;
}

.alert-success {
    background-color: #198754;
    /* bootstrap success */
    color: #fff;
}

.alert-danger {
    background-color: #dc3545;
    /* bootstrap danger */
    color: #fff;
}

.alert-info {
    background-color: #0dcaf0;
    /* bootstrap info */
    color: #0a1128;
}

/* Aumentar especificidade dentro do card para garantir que as cores sejam aplicadas corretamente */
.auth-card .alert {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
}

.auth-card .alert-success {
    background-color: #198754 !important;
    color: #ffffff !important;
}

.auth-card .alert-danger {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

.auth-card .alert-info {
    background-color: #0dcaf0 !important;
    color: #0a1128 !important;
}

.auth-card .alert a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}