/*
 * =============================================================
 *  MODERN LOGIN — Projeto Safe Room
 *
 *  INSTRUÇÕES:
 *  1. Este arquivo é o único que você vai editar para o login
 *  2. Use SEMPRE as variáveis --color-*, --radius-* etc.
 *  3. NUNCA use cor direta — use sempre uma variável de modern-variables.css
 *  4. O HTML do login NÃO pode ser alterado
 *  5. Salva o arquivo → F5 no browser. Sem npm, sem compilar.
 *
 *  ESTRUTURA HTML (para referência):
 *
 *  body.be-splash-screen
 *    .be-wrapper.be-login
 *      .be-content
 *        .main-content.container-fluid
 *          .splash-container
 *            .card.card-border-color.card-border-color-primary
 *              .card-header
 *                img.logo-img
 *                span.splash-description
 *              .card-body
 *                form#login
 *                  .input-group  (campo usuário)
 *                  .input-group  (campo senha + ícone olho)
 *                  .login-tools  (link esqueceu a senha)
 *                  .login-submit (botão Entrar)
 *            .splash-footer
 * =============================================================
 */
/* -------------------------------------------------------------
   1. BASE DO LAYOUT DE LOGIN
   ------------------------------------------------------------- */
body.be-splash-screen {
    /* [4C-IA | 2026-03-24 | CSS-04 | AUTH]
     * Motivo: aplicar Inter apenas no contexto de login para evitar impacto global.
     */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-family: var(--font-family) !important;
    min-height: 100vh !important;
    position: relative !important;
    background:
        radial-gradient(circle at 14% 12%, var(--color-primary-light) 0%, transparent 44%),
        radial-gradient(circle at 86% 88%, var(--color-primary-light) 0%, transparent 48%),
        linear-gradient(140deg, var(--color-bg-page) 0%, var(--color-bg-hover) 58%, var(--color-bg-white) 100%) !important;
}

body.be-splash-screen::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(125deg, var(--color-primary-light) 0%, transparent 62%) !important;
    opacity: 1 !important;
}

.be-wrapper.be-login {
    background: transparent !important;
    min-height: 100vh !important;
    position: relative !important;
    z-index: 1 !important;
}

.be-wrapper.be-login .be-content {
    margin: 0 !important;
    background: transparent !important;
}

.be-wrapper.be-login .main-content {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 16px !important;
}

.splash-container {
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
}

.splash-container.sign-up {
    max-width: 520px !important;
}

.splash-container.forgot-password {
    max-width: 460px !important;
}

/* -------------------------------------------------------------
   2. CARD E CABEÇALHO
   ------------------------------------------------------------- */
/* [4C-IA | 2026-03-26 | CSS-04 | AUTH-LOGIN]
 * Motivo: ampliar compatibilidade de bordas arredondadas no login.
 * Alteracao: inclusao de `-webkit-border-radius` e `-moz-border-radius` junto de `border-radius`.
 */
.be-login .card {
    -webkit-border-radius: var(--radius-xxl) !important;
    -moz-border-radius: var(--radius-xxl) !important;
    border-radius: var(--radius-xxl) !important;
    box-shadow: var(--shadow-lg) !important;
    background-color: var(--color-bg-white) !important;
    overflow: hidden !important;
    margin-bottom: 18px !important;
}

.be-login .card.card-border-color,
.be-login .card.card-border-color-primary {
    border-top: 1px solid var(--color-border) !important;
}

.be-login .card.card-border-color-primary::before {
    content: "" !important;
    display: block !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--color-accent-mid) 0%, var(--color-accent) 52%, var(--color-green) 100%) !important;
}

.be-login .card-header {
    background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-bg-hover) 100%) !important;
    text-align: center !important;
    margin-bottom: 0 !important;
    padding: 30px 32px 22px !important;
}

.be-login .card-header .logo-img {
    max-height: 82px !important;
    max-width: 220px !important;
    display: block !important;
    margin: 0 auto 16px !important;
    object-fit: contain !important;
}

.be-login .card-header,
.be-login .card-header {
    display: block !important;
    margin: 0 !important;
    color: var(--color-text-muted) !important;
    font-size: var(--font-size-sm) !important;
    line-height: var(--line-height-base) !important;
}

.splash-description, .login-cta {
    display: none !important;
}

.be-login .card-header .login-title {
    margin: 2px 0 8px !important;
    color: var(--color-primary) !important;
    font-size: var(--font-size-h2) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: 1.25 !important;
}

.be-login .card-body {
    padding: 26px 32px 28px !important;
    background-color: var(--color-bg-white) !important;
}

.be-login .card-header{
    background: transparent !important;
}

.be-login .card-body h1,
.be-login .card-body h2,
.be-login .card-body h3,
.be-login .card-body h4,
.be-login .card-body h5 {
    color: var(--color-primary) !important;
}

.be-login .card-body p,
.be-login .card-body li,
.be-login .card-body label {
    color: var(--color-text-light) !important;
    line-height: var(--line-height-base) !important;
}

/* -------------------------------------------------------------
   3. CAMPOS E ESTADOS DE FORMULÁRIO
   ------------------------------------------------------------- */
.be-login .form-group {
    margin-bottom: 18px !important;
}

.be-login .form-group label {
    margin-bottom: 6px !important;
    color: var(--color-text) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
}

.be-login .form-control {
    height: 46px !important;
    padding: 10px 14px !important;
    border: 1px solid var(--color-border-input) !important;
    -webkit-border-radius: var(--radius-md) !important;
    -moz-border-radius: var(--radius-md) !important;
    border-radius: var(--radius-md) !important;
    background-color: var(--color-bg-white) !important;
    color: var(--color-text) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-base) !important;
    transition: var(--transition-base) !important;
}

.be-login .form-control::placeholder {
    color: var(--color-text-muted) !important;
    opacity: 1 !important;
}

.be-login .form-control:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px var(--color-primary-light) !important;
    outline: none !important;
}

.be-login .form-control[readonly],
.be-login .form-control:disabled {
    background-color: var(--color-bg-hover) !important;
    color: var(--color-text-light) !important;
}

/* [4C-IA | 2026-03-24 | CSS-04 | AUTH]
 * Motivo: adicionar ícones visuais nos campos do login sem alterar contrato do formulário.
 */
.be-login .j_with_left_icon .form-control {
    padding-left: 44px !important;
}

.be-login .j_left_icon {
    position: absolute !important;
    left: 14px !important;
    /* [4C-IA | 2026-03-24 | CSS-04 | AUTH]
     * Motivo: manter o ícone centralizado no campo mesmo quando o feedback de erro aumenta o input-group.
     */
    top: 23px !important;
    transform: translateY(-50%) !important;
    z-index: 4 !important;
    color: var(--color-text-muted) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.be-login .j_with_left_icon:focus-within .j_left_icon {
    color: var(--color-accent-mid) !important;
}

/* [4C-IA | 2026-03-24 | CSS-04 | AUTH]
 * Motivo: garantir bordas arredondadas consistentes no campo com toggle de senha em estado ativo.
 */
.be-login .j_input_with_toggle {
    -webkit-border-radius: var(--radius-md) !important;
    -moz-border-radius: var(--radius-md) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    background-color: var(--color-bg-white) !important;
}

.be-login input:-webkit-autofill,
.be-login input:-webkit-autofill:hover,
.be-login input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--color-bg-white) inset !important;
}

/* [4C-IA | 2026-03-23 | css-override | AUTH]
 * Motivo: Corrigir artefato visual no estado ativo/foco do campo de senha.
 * Alteração: foco passa a ser aplicado no container .input-group para manter
 *            contorno contínuo entre input e ícone.
 */
.be-login .input-group {
    align-items: stretch !important;
    position: relative !important;
    -webkit-border-radius: var(--radius-md) !important;
    -moz-border-radius: var(--radius-md) !important;
    border-radius: var(--radius-md) !important;
}

.be-login .input-group:focus-within {
    box-shadow: 0 0 0 3px var(--color-primary-light) !important;
}

.be-login .input-group .form-control {
    border-right: 1px solid var(--color-border-input) !important;
    -webkit-border-radius: var(--radius-md) !important;
    -moz-border-radius: var(--radius-md) !important;
    border-radius: var(--radius-md) !important;
}

.be-login .input-group #password {
    border-right: none !important;
    -webkit-border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
    -moz-border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}

.be-login .j_input_with_toggle .form-control {
    border-right: none !important;
    -webkit-border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
    -moz-border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}

.be-login .input-group:focus-within #password,
.be-login .input-group:focus-within #password ~ .input-group-prepend .input-group-text {
    border-color: var(--color-border-input) !important;
}

.be-login .input-group-prepend {
    /* [4C-IA | 2026-03-24 | CSS-04 | AUTH]
     * Motivo: corrigir desalinhamento visual do grupo de senha.
     * Alteracao: neutraliza margem herdada e força alinhamento vertical.
     */
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}

.be-login .j_input_with_toggle .input-group-prepend {
    background: transparent !important;
}

.be-login .input-group-text {
    min-width: 44px !important;
    height: 46px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border: 1px solid var(--color-border-input) !important;
    border-left: none !important;
    -webkit-border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    -moz-border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    background-color: var(--color-bg-white) !important;
    color: var(--color-text-muted) !important;
    transition: var(--transition-base) !important;
}

.be-login .input-group:focus-within .input-group-text {
    border-color: var(--color-accent) !important;
}

.be-login .j_input_with_toggle:focus-within .form-control {
    border-color: var(--color-accent) !important;
}

.be-login .input-group .form-control:focus {
    box-shadow: none !important;
}

.be-login .input-group-text:active {
    background-color: var(--color-bg-hover) !important;
}

.be-login .j_input_with_toggle .input-group-text:active {
    background-color: var(--color-bg-white) !important;
}

/* [4C-IA | 2026-03-24 | CSS-04 | AUTH]
 * Motivo: adaptar estilo do toggle de senha para classes do Remix Icon.
 */
.be-login .input-group-text .ri-eye-line,
.be-login .input-group-text .ri-eye-off-line,
.be-login .j_show_pass {
    color: var(--color-text-muted) !important;
    font-size: 18px !important;
    transition: var(--transition-base) !important;
}

.be-login .input-group-text:hover .ri-eye-line,
.be-login .input-group-text:focus .ri-eye-line,
.be-login .input-group-text:hover .ri-eye-off-line,
.be-login .input-group-text:focus .ri-eye-off-line,
.be-login .input-group-text:hover .j_show_pass,
.be-login .input-group-text:focus .j_show_pass {
    color: var(--color-accent-mid) !important;
}

.be-login .form-control.is-invalid {
    border-color: var(--color-danger) !important;
    background-image: none !important;
    padding-right: 14px !important;
}

.be-login .input-group .form-control.is-invalid ~ .input-group-prepend .input-group-text {
    border-color: var(--color-danger) !important;
}

.be-login .invalid-feedback {
    margin-top: 6px !important;
    color: var(--color-danger) !important;
    font-size: var(--font-size-sm) !important;
    line-height: var(--line-height-base) !important;
}

.be-login .alert {
    -webkit-border-radius: var(--radius-md) !important;
    -moz-border-radius: var(--radius-md) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* [4C-IA | 2026-03-24 | CSS-04 | AUTH]
 * Motivo: aproximar o alerta da autenticação do padrão visual de toast de referência.
 * Alteração: estrutura visual dedicada para `j_login_toast` com barra inferior de progresso.
 */
.be-login .j_login_toast {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
    background-color: var(--color-bg-white) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.be-login .j_login_toast > .icon {
    width: 62px !important;
    min-width: 62px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
}

.be-login .j_login_toast > .icon:after {
    display: none !important;
}

.be-login .j_login_toast > .icon > span {
    width: 30px !important;
    height: 30px !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
}

.be-login .j_login_toast > .message {
    position: relative !important;
    flex: 1 1 auto !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--color-text-strong) !important;
    font-size: var(--font-size-md) !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 17px 48px 17px 2px !important;
}

.be-login .j_login_toast > .message .j_login_toast_close {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--color-text-icon-muted) !important;
    text-shadow: none !important;
    opacity: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.be-login .j_login_toast > .message .j_login_toast_close:hover,
.be-login .j_login_toast > .message .j_login_toast_close:focus {
    color: var(--color-text-icon-hover) !important;
}

.be-login .j_login_toast > .message .j_login_toast_close > span {
    font-size: 18px !important;
}

.be-login .j_login_toast .alert-message-listing {
    margin: 8px 0 0 !important;
    padding-left: 18px !important;
    font-size: var(--font-size-base) !important;
}

.be-login .j_login_toast .j_login_toast_progress {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    /* [4C-IA | 2026-03-24 | CSS-04 | AUTH]
     * Motivo: permitir redução animada via jQuery no width da barra.
     */
    width: 100%;
    height: 3px !important;
    background-color: var(--color-danger-soft) !important;
}

.be-login .j_login_toast.alert-danger > .icon > span {
    position: relative !important;
    font-size: 0 !important;
    background-color: var(--color-danger-strong) !important;
    color: var(--color-bg-white) !important;
}

.be-login .j_login_toast.alert-danger > .icon > span::before {
    content: '!';
    display: inline-block;
    color: var(--color-bg-white) !important;
    font-family: var(--font-family) !important;
    font-size: 20px !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: 1;
}

.be-login .j_login_toast.alert-info > .icon > span {
    background-color: var(--color-info-soft) !important;
    color: var(--color-bg-white) !important;
}

.be-login .j_login_toast.alert-warning > .icon > span {
    background-color: var(--color-warning-soft) !important;
    color: var(--color-bg-white) !important;
}

.be-login .j_login_toast.alert-success > .icon > span {
    background-color: var(--color-success-soft) !important;
    color: var(--color-bg-white) !important;
}

.be-login .j_login_toast.alert-info .j_login_toast_progress {
    background-color: var(--color-info-soft) !important;
}

.be-login .j_login_toast.alert-warning .j_login_toast_progress {
    background-color: var(--color-warning-soft) !important;
}

.be-login .j_login_toast.alert-success .j_login_toast_progress {
    background-color: var(--color-success-soft) !important;
}

/* [4C-IA | 2026-03-23 | css-override | AUTH]
 * Motivo: aproximar o alerta de Caps Lock do padrão visual do toast de erro, sem timer.
 * Alteração: layout clean com ícone circular, texto central e botão de fechamento manual.
 */
.be-login .j_alert_capslock {
    align-items: stretch !important;
    margin-bottom: 14px !important;
    position: relative !important;
    border: 0 !important;
    -webkit-border-radius: var(--radius-md) !important;
    -moz-border-radius: var(--radius-md) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    background-color: var(--color-bg-white) !important;
    color: var(--color-text-strong) !important;
    font-size: var(--font-size-md) !important;
    box-shadow: none !important;
}

.be-login .j_alert_capslock:not(.d-none) {
    display: flex !important;
}

.be-login .j_alert_capslock.alert-dismissible {
    padding-right: 0 !important;
}

.be-login .j_alert_capslock::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background-color: var(--color-warning) !important;
}

.be-login .j_alert_capslock > .icon {
    width: 62px !important;
    min-width: 62px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}

.be-login .j_alert_capslock > .icon > [class^="ri-"] {
    width: 30px !important;
    height: 30px !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    line-height: 1 !important;
    background-color: var(--color-warning) !important;
    color: var(--color-bg-white) !important;
}

.be-login .j_alert_capslock > .icon > [class^="ri-"]::before {
    content: '!' !important;
    display: inline-block !important;
    color: var(--color-bg-white) !important;
    font-family: var(--font-family) !important;
    font-size: 20px !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: 1 !important;
}

.be-login .j_alert_capslock > .icon:after {
    display: none !important;
}

.be-login .j_alert_capslock > .message {
    flex: 1 1 auto !important;
    position: relative !important;
    border: 0 !important;
    border-left: 0 !important;
    color: var(--color-text-strong) !important;
    background: transparent !important;
    font-size: var(--font-size-md) !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: 1.3 !important;
    padding: 14px 44px 14px 2px !important;
}

.be-login .j_alert_capslock > .message .j_capslock_close {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--color-text-icon-muted) !important;
    text-shadow: none !important;
    opacity: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.be-login .j_alert_capslock > .message .j_capslock_close > span {
    font-size: 18px !important;
}

.be-login .j_alert_capslock > .message .j_capslock_close:hover,
.be-login .j_alert_capslock > .message .j_capslock_close:focus {
    color: var(--color-text-icon-hover) !important;
}

/* -------------------------------------------------------------
   4. LINKS E AÇÕES
   ------------------------------------------------------------- */
.be-login .row.login-tools {
    padding: 4px 0 0 !important;
    margin-bottom: 14px !important;
    align-items: center !important;
}

.be-login .login-forgot-password {
    line-height: 1.4 !important;
    text-align: right !important;
}

.be-login .login-forgot-password a {
    display: inline-block !important;
    border-bottom: 1px solid transparent !important;
    color: var(--color-accent-mid) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
    text-decoration: none !important;
    transition: var(--transition-base) !important;
}

.be-login .login-forgot-password a:hover,
.be-login .login-forgot-password a:focus {
    color: var(--color-primary) !important;
    border-bottom-color: var(--color-primary) !important;
}

.be-login .login-submit,
.be-login .row.login-submit {
    padding: 10px 0 0 !important;
    margin-bottom: 0 !important;
}

.be-login .login-submit .btn,
.be-login .row.login-submit .btn {
    width: 100% !important;
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    -webkit-border-radius: var(--radius-md) !important;
    -moz-border-radius: var(--radius-md) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--color-accent) !important;
    background: linear-gradient(90deg, var(--color-accent-mid) 0%, var(--color-accent) 100%) !important;
    color: var(--color-bg-white) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: 0.02em !important;
    box-shadow: var(--shadow-md) !important;
    transition: var(--transition-base) !important;
}

.be-login .login-submit .btn:hover,
.be-login .row.login-submit .btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-lg) !important;
}

.be-login .login-submit .btn:focus,
.be-login .row.login-submit .btn:focus {
    box-shadow: 0 0 0 3px var(--color-primary-light), var(--shadow-md) !important;
}

.be-login .login-submit .btn:active,
.be-login .row.login-submit .btn:active {
    transform: translateY(0) !important;
    box-shadow: var(--shadow-sm) !important;
}

.be-login .login-submit .btn .j_btn_icon {
    font-size: 18px !important;
    line-height: 1 !important;
}

/* [4C-IA | 2026-03-24 | CSS-04 | AUTH]
 * Motivo: mensagem orientativa da tela de redefinição de senha, conforme referência visual.
 */
.be-login .j_reset_intro {
    margin: 2px 0 20px !important;
    text-align: center !important;
    color: var(--color-text-light) !important;
    font-size: var(--font-size-base) !important;
    line-height: 1.7 !important;
}

.be-login .j_reset_intro p {
    margin: 0 0 12px !important;
}

.be-login .j_reset_intro .j_reset_intro_lead {
    margin-bottom: 4px !important;
}

.be-login .j_reset_intro .j_reset_intro_email {
    color: var(--color-text) !important;
    font-weight: var(--font-weight-medium) !important;
}

.be-login .splash-footer {
    margin-top: 10px !important;
    text-align: center !important;
    color: var(--color-text-muted) !important;
    font-size: var(--font-size-sm) !important;
    font-family: var(--font-family) !important;
    letter-spacing: 0.03em !important;
}

/* -------------------------------------------------------------
   5. BADGE DE AMBIENTE (DEV/HOM)
   ------------------------------------------------------------- */
.be-login .j_env_color_dev,
.be-login .j_env_color_dev *,
.be-login .j_env_color_hom,
.be-login .j_env_color_hom * {
    background: transparent !important;
}

.be-login .j_env_id span {
    background: var(--color-warning) !important;
    color: var(--color-primary) !important;
    -webkit-border-radius: var(--radius-pill) !important;
    -moz-border-radius: var(--radius-pill) !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: var(--shadow-sm) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-bold) !important;
    height: auto !important;
    line-height: 1.2 !important;
    padding: 4px 12px !important;
}

/* -------------------------------------------------------------
   6. LOADER
   ------------------------------------------------------------- */
/* [4C-IA | 2026-03-24 | CSS-04 | AUTH]
 * Motivo: trocar o loader em cubos por spinner circular no login.
 */
#loader {
    background-color: var(--color-primary) !important;
}

#loader .j_login_spinner_wrap {
    position: absolute !important;
    top: 30% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#loader .j_login_spinner {
    display: inline-block !important;
    width: 48px !important;
    height: 48px !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    border-radius: 50% !important;
    border: 4px solid var(--color-bg-white-25) !important;
    border-top-color: var(--color-bg-white) !important;
    border-right-color: var(--color-bg-white) !important;
    animation: j_login_spinner_spin 0.75s linear infinite !important;
}

@keyframes j_login_spinner_spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* -------------------------------------------------------------
   7. RESPONSIVIDADE
   ------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .be-login .card, .be-login .card-body, .be-login .card-header  {
        -webkit-border-radius: var(--radius-none) !important;
        -moz-border-radius: var(--radius-none) !important;
        border-radius: var(--radius-none) !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .be-login .card.card-border-color-primary::before {
        display: none !important;
    }

    .be-login .card.card-border-color,
    .be-login .card.card-border-color-primary {
        border-top: none !important;
    }

    .be-wrapper.be-login .main-content {
        padding: 0px !important;
    }

    .splash-container {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .be-wrapper.be-login .main-content {
        align-items: flex-start !important;
        padding-top: 28px !important;
        padding-bottom: 24px !important;
    }

    .splash-container,
    .splash-container.sign-up,
    .splash-container.forgot-password {
        max-width: 100% !important;
    }

    .be-login .card-header {
        padding: 24px 22px 18px !important;
    }

    .be-login .card-body {
        padding: 22px 22px 24px !important;
    }
    .be-login .login-forgot-password {
        text-align: center !important;
    }

    .be-login .row.login-tools > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    body.be-splash-screen {
        background: var(--color-bg-white) !important ;
    }
}

@media (max-width: 479.98px) {

    .be-login .card-header .logo-img {
        max-height: 72px !important;
    }


}

@media (prefers-reduced-motion: reduce) {
    .be-login *,
    .be-login *::before,
    .be-login *::after {
        transition: none !important;
        transform: none !important;
    }
}