/* ==========================================================================
   ARQUIVO: register.css
   LIGAÇÃO: register.html
   DESCRIÇÃO: Estilos para a tela de solicitação de acesso/cadastro.
   ========================================================================== */

:root {
    --sys-bg:        #0F172A;
    --sys-text:      #F8FAFC;
    --login-bg-dark: #020617;
    --login-primary: #00c3ff;
}

/* Reset básico */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { background-color: var(--sys-bg); color: var(--sys-text); font-size: 14px; }
a { text-decoration: none; color: inherit; transition: 0.2s; }

/* --------------------------------------------------------------------------
   ESTRUTURA DA TELA DIVIDIDA
   -------------------------------------------------------------------------- */
.login-container { display: flex; height: 100vh; width: 100%; background: var(--login-bg-dark); }

.login-image { flex: 1.4; background: url('/static/img/login.png') no-repeat center center; background-size: cover; position: relative; }
.login-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,6,23,0.25) 0%, rgba(2,6,23,0.95) 100%); }

.login-form-wrapper { flex: 1; background: linear-gradient(180deg, #020617, #050b18); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; position: relative; }

/* --------------------------------------------------------------------------
   CAIXA DE FORMULÁRIO
   -------------------------------------------------------------------------- */
.login-box { width: 100%; max-width: 420px; background: rgba(8, 16, 32, 0.85); backdrop-filter: blur(12px); border-radius: 16px; padding: 40px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 0 40px rgba(0, 195, 255, 0.1); }

.login-box h2 { color: #fff; font-size: 28px; margin-bottom: 8px; }
.text-highlight { color: var(--login-primary); font-weight: 600; }
.register-subtitle { color: #94A3B8; margin-bottom: 25px; line-height: 1.5; }

/* Inputs e Selects */
.input-group { margin-bottom: 20px; }
.input-group label { display: block; color: #cbd5f5; font-size: 14px; margin-bottom: 6px; }

.input-group input, 
.input-group select { 
    width: 100%; 
    padding: 12px; 
    border-radius: 8px; 
    border: 1px solid #2D3748; 
    background-color: #151E32; 
    color: white; 
    outline: none;
    transition: 0.3s;
}
.input-group input:focus, 
.input-group select:focus { border-color: var(--login-primary); }

/* Botão de Enviar */
.btn-login { width: 100%; padding: 14px; margin-top: 20px; background: var(--login-primary); border: none; border-radius: 10px; color: #020617; font-weight: 700; cursor: pointer; transition: 0.3s; }
.btn-login:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* Link de Voltar */
.footer-link-container { text-align: center; margin-top: 20px; }
.forgot-pass { color: #64748b; font-weight: 600; }
.forgot-pass:hover { color: #fff; }

/* Responsividade */
@media (max-width: 900px) { 
    .login-image { display: none; } 
}