/* ====================================================
   Auth Pages - Card branco profissional
   Carregado nos layouts de autenticacao
   ==================================================== */

:root {
    --auth-blue: #07487f;
    --auth-blue-deep: #063a6b;
    --auth-blue-dark: #032443;
    --auth-blue-gradient: linear-gradient(180deg, #002f55 0%, #003f73 54%, #00345f 100%);
    --auth-blue-surface:
        radial-gradient(circle 560px at 88% 10%, rgba(22, 80, 132, .58) 0 63%, rgba(22, 80, 132, .18) 64%, transparent 65%),
        linear-gradient(135deg, transparent 0 49.95%, rgba(125, 211, 252, .08) 50%, transparent 50.08%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 24px),
        var(--auth-blue-gradient);
}

body {
    background: var(--auth-blue-surface);
    background-attachment: fixed;
    background-size: auto, auto, 24px 24px, 24px 24px, auto;
}

/* Garante texto branco puro na coluna de marketing (left col) */
.auth-section .text-white,
.auth-section .text-white h1,
.auth-section .text-white h2,
.auth-section .text-white p,
.auth-section .text-white span,
.auth-section .text-white li {
    color: #ffffff !important;
}

/* O degradê/textura fica no body; as seções só deixam o fundo contínuo aparecer */
.auth-section,
section#userlogin,
section#userRegistro,
section#loginForm.min-vh-100,
section#loginForm.vh-100,
section#loginForm.section-image,
section.section-header.min-vh-100 {
    background: transparent !important;
    position: relative;
    overflow: hidden;
}

.auth-section::before,
section#userlogin::before,
section#userRegistro::before,
section#loginForm.min-vh-100::before,
section#loginForm.vh-100::before,
section#loginForm.section-image::before,
section.section-header.min-vh-100::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

.auth-section::after,
section#userlogin::after,
section#userRegistro::after,
section#loginForm.min-vh-100::after,
section#loginForm.vh-100::after,
section#loginForm.section-image::after,
section.section-header.min-vh-100::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    pointer-events: none;
}

section#loginForm > .position-absolute.top-0.start-0.w-100.h-100 {
    background: rgba(7, 72, 127, 0.08) !important;
}

/* Card de formulário (login-box) — fundo branco, textos centralizados */
.login-box,
.auth-section #cardLogin.card,
section#userlogin #cardLogin.card,
section#userRegistro #cardLogin.card,
section#loginForm #cardLogin.card,
section.section-header.min-vh-100 .card,
#loginForm .signin-inner {
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18) !important;
    color: #374151 !important;
    text-align: center !important;
}

/* Tipografia interna do card */
.login-box h1,
#cardLogin.card h1,
#cardLogin.card .h1,
#loginForm .signin-inner h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b !important;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}
.login-box h2,
#cardLogin.card h2,
#loginForm .signin-inner h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--auth-blue) !important;
    padding-top: 4px;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}
.login-box h3,
#cardLogin.card h3,
section.section-header.min-vh-100 .card h3,
#loginForm .signin-inner h3 {
    color: #1e293b !important;
}
.login-box p.subtitle,
.login-box p,
#cardLogin.card p,
section.section-header.min-vh-100 .card p,
#loginForm .signin-inner p {
    color: #64748b !important;
    font-size: 0.925rem;
    margin-bottom: 1.5rem;
}

/* Formulários ficam alinhados à esquerda internamente */
.login-box .form-group,
#cardLogin.card .form-group,
#loginForm .signin-inner .form-group {
    text-align: left !important;
}
.login-box .d-block.d-sm-flex.justify-content-between,
#cardLogin.card .d-block.d-sm-flex.justify-content-between,
#loginForm .signin-inner .d-block.d-sm-flex.justify-content-between {
    text-align: left !important;
}

/* Links dentro do card */
.login-box a,
#cardLogin.card a,
section.section-header.min-vh-100 .card a,
#loginForm .signin-inner a {
    color: var(--auth-blue) !important;
    text-decoration: none !important;
    font-weight: 500;
}
.login-box a:hover,
#cardLogin.card a:hover,
section.section-header.min-vh-100 .card a:hover,
#loginForm .signin-inner a:hover {
    color: var(--auth-blue-deep) !important;
    text-decoration: underline !important;
}

/* Labels de formulário */
.login-box .form-check .form-check-label,
.login-box label,
.login-box .font-weight-normal,
#cardLogin.card .form-check .form-check-label,
#cardLogin.card label,
#cardLogin.card .font-weight-normal,
#loginForm .signin-inner .form-check .form-check-label,
#loginForm .signin-inner label,
#loginForm .signin-inner .font-weight-normal {
    color: #374151 !important;
}

/* Inputs — padding entre ícone e cursor */
.login-box .form-control,
#cardLogin.card .form-control,
#loginForm .signin-inner .form-control {
    border-color: #cbd5e1;
    color: #1e293b;
    padding-left: 0.875rem;
}
.login-box .form-control:focus,
#cardLogin.card .form-control:focus,
#loginForm .signin-inner .form-control:focus {
    border-color: var(--auth-blue);
    box-shadow: 0 0 0 3px rgba(7, 72, 127, 0.16);
}
.login-box .input-group-text,
#cardLogin.card .input-group-text,
#loginForm .signin-inner .input-group-text {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    color: #64748b;
    min-width: 42px;
    justify-content: center;
}

/* Erros de validação */
.login-box .text-danger,
#cardLogin.card .text-danger,
#loginForm .signin-inner .text-danger {
    color: #ef4444 !important;
    font-weight: 600;
}

/* Botão principal — mesma cor do btn-acessar da home */
.btn-en,
.btn-primary,
.login-box .btn-en,
#cardLogin.card .btn-en,
#cardLogin.card .btn-primary,
#loginForm .signin-inner .btn-en,
#loginForm .signin-inner .btn-primary {
    background-color: var(--auth-blue);
    color: #ffffff;
    border: none;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: .65rem 1rem;
    transition: background-color .2s ease;
}
.btn-en:hover,
.btn-primary:hover,
.login-box .btn-en:hover,
#cardLogin.card .btn-en:hover,
#cardLogin.card .btn-primary:hover,
#loginForm .signin-inner .btn-en:hover,
#loginForm .signin-inner .btn-primary:hover {
    background-color: var(--auth-blue-deep);
    color: #ffffff;
    font-weight: 600;
}

/* Checkbox "Lembrar login" */
.login-box .form-check-input,
#cardLogin.card .form-check-input,
#loginForm .signin-inner .form-check-input {
    accent-color: var(--auth-blue);
}

/* Separador entre login e "Criar conta" */
.login-box .d-block.d-sm-flex.justify-content-center,
#cardLogin.card .d-block.d-sm-flex.justify-content-center,
#loginForm .signin-inner .d-block.d-sm-flex.justify-content-center {
    border-top: 1px solid #f1f5f9;
    padding-top: 1rem;
    margin-top: .5rem;
}