/* /assets/login.css - Versão Responsiva */
:root {
    --cor-primaria: #000a4e; /* Cor branding principal */
    --cor-secundaria: #c5b358;
    --cor-fundo: #f8f9fa;
    --cor-texto-branding: #ffffff; /* Cor do texto na coluna de branding */
}

/* Estilos Globais para a página */
body.login-page { /* Adiciona classe específica para evitar conflito com backend */
    background-color: var(--cor-fundo);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0; /* Garante sem margens */
    padding: 0; /* Garante sem padding */
    display: flex; /* Necessário para alinhar o wrapper */
    min-height: 100vh; /* Ocupa altura total */
}

.login-wrapper {
    display: flex;
    width: 100%; /* Ocupa largura total */
    min-height: 100vh;
    /* Comportamento padrão (mobile): Colunas empilhadas */
    flex-direction: column;
}

/* Coluna de Branding (Esquerda no Desktop, Topo no Mobile) */
.login-branding {
    background-color: var(--cor-primaria);
    color: var(--cor-texto-branding);
    width: 100%; /* Largura total no mobile */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem; /* Mais padding vertical no mobile */
    min-height: 30vh; /* Altura mínima no mobile */
    box-sizing: border-box; /* Inclui padding na largura/altura */
}

.login-branding img {
    max-width: 60%; /* Ajuste conforme necessário */
    max-height: 150px; /* Limita altura da logo */
    height: auto;
    margin-bottom: 1rem; /* Espaço abaixo da logo */
}

/* Coluna do Formulário (Direita no Desktop, Abaixo no Mobile) */
.login-form-wrapper {
    width: 100%; /* Largura total no mobile */
    display: flex;
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    padding: 2rem 1rem; /* Padding geral */
    background-color: var(--cor-fundo); /* Fundo claro para o form */
    flex-grow: 1; /* Faz ocupar o espaço restante na vertical */
    box-sizing: border-box;
}

.login-form {
    width: 100%;
    max-width: 420px; /* Largura máxima do formulário */
    background-color: #ffffff;
    padding: 2rem; /* Padding interno */
    border-radius: 0.75rem;
    border: 1px solid #dee2e6;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}

.login-form h2 {
    color: var(--cor-primaria);
    font-weight: 600;
    margin-bottom: 1.5rem; /* Ajusta margem */
    text-align: center;
    font-size: 1.5rem; /* Ajusta tamanho fonte */
}

/* Ajustes para Ícones dentro dos Inputs */
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    padding-left: 2.5rem; /* Mantém o label afastado quando input preenchido */
}
.form-floating > .form-control {
    padding-left: 2.5rem; /* Espaço para o ícone */
}
.form-floating > label {
     padding-left: 2.5rem; /* Espaço para o ícone no label inicial */
     /* Garante que o ícone fique visível quando o label flutua */
     z-index: 2;
     /* Ajusta a cor do label flutuado se necessário */
     /* color: #6c757d; */
}


.input-icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: #6c757d;
    z-index: 3; /* Garante que o ícone fique acima do input/label */
    pointer-events: none; /* Evita que o ícone capture cliques */
}

/* Estilos dos campos */
.login-form .form-control {
    border: 1px solid #ced4da; /* Borda padrão um pouco mais visível */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.login-form .form-control:focus {
    border-color: var(--cor-primaria);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(0, 10, 78, 0.3); /* Sombra foco mais sutil */
    z-index: 4; /* Garante que o input focado fique acima de outros elementos */
    position: relative; /* Necessário para z-index funcionar corretamente */
}

/* --- AJUSTES PARA DESKTOP (Layout de Duas Colunas) --- */
/* Aplica a partir de telas médias (>= 768px por padrão no Bootstrap md) */
@media (min-width: 768px) {
    .login-wrapper {
        /* Volta ao layout lado a lado */
        flex-direction: row;
    }

    .login-branding {
        width: 45%; /* Largura da coluna esquerda */
        min-height: 100vh; /* Ocupa altura total */
        padding: 2rem; /* Padding original desktop */
    }

     .login-branding img {
        max-width: 60%; /* Pode aumentar um pouco no desktop */
        max-height: none; /* Remove limite de altura */
     }

    .login-form-wrapper {
        width: 55%; /* Largura da coluna direita */
        min-height: 100vh; /* Ocupa altura total */
        padding: 3rem; /* Mais padding no desktop */
    }

    .login-form {
         padding: 2.5rem; /* Padding original desktop */
    }
     .login-form h2 {
         font-size: 1.75rem; /* Título um pouco maior */
         margin-bottom: 2rem;
     }
}