/* =========================================================
   SIGMO WEB — TELA DE LOGIN
   Padrão visual vinho, grafite e vidro claro
   ========================================================= */


/* =========================================================
   FUNDO DA TELA

   Aplicar a classe sigmo-login-background no painel que
   contém a imagem de fundo ou no formulário principal.
   ========================================================= */

/* Luz vinho discreta sobre o fundo */
.sigmo-login-background::before {
    content: "";

    position: absolute !important;
    z-index: 0 !important;

    top: -160px !important;
    right: -120px !important;

    width: 520px !important;
    height: 520px !important;

    background:
        radial-gradient(
            circle,
            rgba(185, 40, 71, 0.22) 0%,
            rgba(185, 40, 71, 0.08) 42%,
            transparent 70%
        ) !important;

    pointer-events: none !important;
}


/* Elementos do painel ficam acima da iluminação */
.sigmo-login-background > .x-panel-body {
    position: relative !important;
    z-index: 1 !important;

    background: transparent !important;
}


/* =========================================================
   FORMULÁRIO / CARTÃO DE LOGIN
   Classe já utilizada: frmLogin
   ========================================================= */

.frmLogin {
    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    overflow: visible !important;
}


/* Remove molduras externas do tema */
.frmLogin.x-window,
.frmLogin .x-window-default,
.frmLogin .x-window-wrap,
.frmLogin .x-window-body-wrap {
    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    overflow: visible !important;
}


/* Cartão principal */
/* =========================================================
   CARTÃO PRINCIPAL DO LOGIN
   ========================================================= */

.frmLogin .x-window-body {
    position: relative !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(185, 40, 71, 0.09),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(245, 247, 249, 0.90) 100%
        ) !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.82) !important;

    border-radius: 22px !important;

    box-shadow:
        inset 0 4px 0 #b92847,
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 22px 55px rgba(0, 7, 18, 0.42),
        0 0 0 1px rgba(20, 29, 42, 0.10) !important;

    backdrop-filter:
        blur(22px)
        saturate(125%) !important;

    -webkit-backdrop-filter:
        blur(22px)
        saturate(125%) !important;

    overflow: hidden !important;
}

/* Pequena iluminação interna na lateral */
.frmLogin .x-window-body::before {
    content: "";

    position: absolute !important;
    z-index: 0 !important;

    top: -80px !important;
    right: -90px !important;

    width: 260px !important;
    height: 260px !important;

    background:
        radial-gradient(
            circle,
            rgba(185, 40, 71, 0.10),
            transparent 70%
        ) !important;

    pointer-events: none !important;
}


/* Componentes acima do efeito */
.frmLogin .x-window-body > * {
    position: relative !important;
    z-index: 1 !important;
}


/* =========================================================
   LOGOTIPOS
   ========================================================= */

.frmLogin .sigmo-login-logo {
    background: transparent !important;

    border: 0 !important;

    filter:
        drop-shadow(
            0 3px 5px rgba(55, 24, 34, 0.10)
        ) !important;
}


/* Logo da Vitatech */
.frmLogin .sigmo-login-company-logo {
    background: transparent !important;

    border: 0 !important;

    opacity: 0.92 !important;

    filter:
        drop-shadow(
            0 2px 4px rgba(45, 32, 37, 0.09)
        ) !important;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease !important;
}


.frmLogin .sigmo-login-company-logo:hover {
    opacity: 1 !important;

    transform: scale(1.025) !important;
}


/* =========================================================
   TÍTULOS E TEXTOS
   ========================================================= */

.frmLogin .sigmo-login-welcome,
.frmLogin .sigmo-login-welcome .x-component {
    color: #941d39 !important;

    background: transparent !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: 30px !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;

    text-align: center !important;

    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.90) !important;
}


/* Subtítulo */
.frmLogin .sigmo-login-subtitle,
.frmLogin .sigmo-login-subtitle .x-component {
    color: #4d5663 !important;

    background: transparent !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    text-align: center !important;

    text-shadow: none !important;
}


/* Pequeno divisor abaixo do subtítulo */
.frmLogin .sigmo-login-subtitle::after {
    content: "";

    position: absolute !important;

    left: 50% !important;
    bottom: -9px !important;

    width: 42px !important;
    height: 3px !important;

    background:
        linear-gradient(
            90deg,
            #9f203c 0%,
            #cf405c 100%
        ) !important;

    border-radius: 4px !important;

    transform: translateX(-50%) !important;
}


/* =========================================================
   CAMPOS
   Mantemos as classes já existentes:
   fld-transparent, ico-device, ico-cnpj,
   ico-user e ico-password
   ========================================================= */

/* Remove fundos internos do tema */
.frmLogin .fld-transparent .x-form-item-body,
.frmLogin .fld-transparent .x-form-text-wrap,
.frmLogin .fld-transparent .x-form-trigger-wrap,
.frmLogin .fld-transparent .x-form-trigger-input-cell,
.frmLogin .fld-transparent .x-form-trigger-cell {
    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* Campo real */
.frmLogin .fld-transparent input.x-form-text,
.frmLogin .fld-transparent input.x-form-field {
    height: 42px !important;

    padding:
        0
        13px
        0
        42px !important;

    color: #2f3742 !important;

    background-color:
        rgba(255, 255, 255, 0.79) !important;

    border:
        1px solid
        #cfd5dc !important;

    border-radius: 10px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 2px 5px rgba(31, 41, 55, 0.07) !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 450 !important;

    outline: none !important;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease !important;
}


/* Placeholder */
.frmLogin .fld-transparent input.x-form-text::placeholder,
.frmLogin .fld-transparent input.x-form-field::placeholder {
    color: #89919b !important;

    opacity: 1 !important;
}


/* Hover */
.frmLogin .fld-transparent:hover input.x-form-text,
.frmLogin .fld-transparent:hover input.x-form-field {
    background-color:
        rgba(255, 255, 255, 0.94) !important;

    border-color: #b4bcc6 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 3px 8px rgba(31, 41, 55, 0.09) !important;
}


/* Foco */
.frmLogin .fld-transparent input.x-form-text:focus,
.frmLogin .fld-transparent input.x-form-field:focus,
.frmLogin .fld-transparent:focus-within input.x-form-text,
.frmLogin .fld-transparent:focus-within input.x-form-field {
    background-color: #ffffff !important;

    border-color: #b92847 !important;

    box-shadow:
        0 0 0 3px rgba(185, 40, 71, 0.13),
        0 4px 10px rgba(84, 25, 42, 0.10) !important;

    outline: none !important;
}


/* =========================================================
   ÍCONES DOS CAMPOS
   ========================================================= */

.frmLogin .ico-device input.x-form-text,
.frmLogin .ico-device input.x-form-field {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d5261' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;
    background-position: 13px center !important;
    background-size: 18px 18px !important;
}


/* CNPJ / Empresa */
.frmLogin .ico-cnpj input.x-form-text,
.frmLogin .ico-cnpj input.x-form-field {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d5261' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V5h10v16'/%3E%3Cpath d='M15 9h4v12'/%3E%3Cpath d='M8 9h4M8 13h4M8 17h4'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;
    background-position: 13px center !important;
    background-size: 18px 18px !important;
}


/* Usuário */
.frmLogin .ico-user input.x-form-text,
.frmLogin .ico-user input.x-form-field {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d5261' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;
    background-position: 13px center !important;
    background-size: 18px 18px !important;
}


/* Senha */
.frmLogin .ico-password input.x-form-text,
.frmLogin .ico-password input.x-form-field {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d5261' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3Ccircle cx='12' cy='15' r='1'/%3E%3Cpath d='M12 16v2'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;
    background-position: 13px center !important;
    background-size: 18px 18px !important;
}


/* =========================================================
   COMBOBOX DE EMPRESA/CNPJ
   Classe já existente: combo-transparent
   ========================================================= */

.frmLogin .combo-transparent .x-form-item-body,
.frmLogin .combo-transparent .x-form-text-wrap,
.frmLogin .combo-transparent .x-form-trigger-input-cell,
.frmLogin .combo-transparent .x-form-trigger-cell {
    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


.frmLogin .combo-transparent .x-form-trigger-wrap {
    height: 42px !important;

    background:
        rgba(255, 255, 255, 0.79) !important;

    border:
        1px solid
        #cfd5dc !important;

    border-radius: 10px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 2px 5px rgba(31, 41, 55, 0.07) !important;

    overflow: hidden !important;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease !important;
}


.frmLogin .combo-transparent:hover .x-form-trigger-wrap {
    background: #ffffff !important;

    border-color: #b4bcc6 !important;
}


.frmLogin .combo-transparent .x-form-trigger-wrap:focus-within {
    background: #ffffff !important;

    border-color: #b92847 !important;

    box-shadow:
        0 0 0 3px rgba(185, 40, 71, 0.13),
        0 4px 10px rgba(84, 25, 42, 0.10) !important;
}


/* Valor exibido */
.frmLogin .combo-transparent .x-form-display-field,
.frmLogin .combo-transparent .x-form-field,
.frmLogin .combo-transparent .x-form-text,
.frmLogin .combo-transparent input.x-form-text {
    height: 40px !important;

    padding:
        0
        36px
        0
        42px !important;

    color: #2f3742 !important;

    background-color: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: 13px !important;

    line-height: 40px !important;
}


/* Seta do combo */
.frmLogin .combo-transparent .x-form-arrow-trigger {
    width: 34px !important;

    background-color: transparent !important;

    border: 0 !important;

    opacity: 0.70 !important;

    filter: none !important;

    transition:
        opacity 0.18s ease,
        background-color 0.18s ease !important;
}


.frmLogin .combo-transparent .x-form-arrow-trigger:hover {
    background-color:
        rgba(185, 40, 71, 0.07) !important;

    opacity: 1 !important;
}


/* =========================================================
   LISTA DO COMBO
   Este arquivo deve ser carregado apenas na tela de login.
   ========================================================= */

.x-boundlist {
    background:
        rgba(255, 255, 255, 0.98) !important;

    border:
        1px solid
        #d2d7dd !important;

    border-radius: 9px !important;

    box-shadow:
        0 8px 22px rgba(17, 24, 39, 0.18) !important;

    color: #374151 !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    overflow: hidden !important;
}


.x-boundlist-item {
    min-height: 31px !important;

    padding:
        7px
        10px !important;

    color: #4b5563 !important;

    background: transparent !important;

    border: 0 !important;

    font-size: 12px !important;
}


.x-boundlist-item-over {
    color: #8f1f39 !important;

    background:
        #fff2f5 !important;
}


.x-boundlist-item.x-boundlist-selected,
.x-boundlist-item.x-boundlist-item-selected,
.x-boundlist-item.x-item-selected {
    color: #ffffff !important;

    background:
        linear-gradient(
            90deg,
            #9f203c 0%,
            #c63855 100%
        ) !important;
}


/* =========================================================
   BOTÕES — ESTRUTURA COMUM
   ========================================================= */

.frmLogin .x-btn {
    height: 40px !important;

    background: transparent;

    border: 0 !important;
    border-radius: 10px !important;

    box-shadow: none;

    overflow: hidden !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease !important;
}


.frmLogin .x-btn-wrap,
.frmLogin .x-btn-button {
    width: 100% !important;
    height: 100% !important;

    background: transparent !important;

    border: 0 !important;
}


.frmLogin .x-btn-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


.frmLogin .x-btn-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    background: transparent !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 650 !important;

    line-height: 1 !important;
}


/* =========================================================
   BOTÃO ENTRAR
   Classe: btn-primary
   ========================================================= */

.frmLogin .btn-primary {
    color: #ffffff !important;

    background:
        linear-gradient(
            105deg,
            #941a35 0%,
            #b92847 55%,
            #d4425f 100%
        ) !important;

    border:
        1px solid
        #901a35 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 3px 8px rgba(117, 25, 50, 0.22) !important;
}


.frmLogin .btn-primary .x-btn-inner {
    color: #ffffff !important;

    text-shadow:
        0 1px 1px rgba(70, 8, 26, 0.27) !important;
}


.frmLogin .btn-primary:hover,
.frmLogin .btn-primary.x-btn-over {
    background:
        linear-gradient(
            105deg,
            #81142e 0%,
            #a51f3d 55%,
            #c63753 100%
        ) !important;

    border-color: #7e162f !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.21),
        0 6px 13px rgba(117, 25, 50, 0.28) !important;

    transform: translateY(-1px) !important;
}


.frmLogin .btn-primary:active,
.frmLogin .btn-primary.x-btn-pressed {
    box-shadow:
        inset 0 2px 5px rgba(66, 7, 23, 0.25) !important;

    transform: translateY(0) !important;
}


/* =========================================================
   BOTÃO SAIR
   Classe: btn-secondary
   ========================================================= */

.frmLogin .btn-secondary {
    color: #525b66 !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #eef0f2 100%
        ) !important;

    border:
        1px solid
        #ccd1d7 !important;

    box-shadow:
        0 2px 6px rgba(31, 41, 55, 0.08) !important;
}


.frmLogin .btn-secondary .x-btn-inner {
    color: #525b66 !important;

    text-shadow: none !important;
}


.frmLogin .btn-secondary:hover,
.frmLogin .btn-secondary.x-btn-over {
    color: #343a43 !important;

    background:
        linear-gradient(
            180deg,
            #f5f6f7 0%,
            #e1e4e7 100%
        ) !important;

    border-color: #aeb5bd !important;

    box-shadow:
        0 4px 9px rgba(31, 41, 55, 0.13) !important;

    transform: translateY(-1px) !important;
}


.frmLogin .btn-secondary:hover .x-btn-inner,
.frmLogin .btn-secondary.x-btn-over .x-btn-inner {
    color: #343a43 !important;
}


/* =========================================================
   BOTÃO PEQUENO AO LADO DA SENHA
   Classe: sigmo-login-key
   ========================================================= */

.frmLogin .sigmo-login-key {
    width: 52px !important;
    height: 40px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #941a35 0%,
            #c23653 100%
        ) !important;

    border:
        1px solid
        #901a35 !important;

    border-radius: 10px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 3px 7px rgba(117, 25, 50, 0.20) !important;
}


.frmLogin .sigmo-login-key .x-btn-inner,
.frmLogin .sigmo-login-key .x-btn-inner i {
    color: #ffffff !important;

    font-size: 15px !important;
}


.frmLogin .sigmo-login-key:hover,
.frmLogin .sigmo-login-key.x-btn-over {
    background:
        linear-gradient(
            135deg,
            #81142e 0%,
            #ab2543 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 5px 10px rgba(117, 25, 50, 0.27) !important;

    transform: translateY(-1px) !important;
}


/* =========================================================
   VERSÃO
   ========================================================= */

.frmLogin .sigmo-login-version,
.frmLogin .sigmo-login-version .x-component {
    color: #69717c !important;

    background: transparent !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: 10.5px !important;
    font-weight: 600 !important;

    text-align: center !important;

    text-shadow: none !important;
}


/* =========================================================
   LINK DE NOVIDADES
   ========================================================= */

.frmLogin .sigmo-login-release,
.frmLogin .sigmo-login-release .x-component {
    color: #97203b !important;

    background: transparent !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: 11.5px !important;
    font-weight: 600 !important;

    text-align: center !important;

    text-decoration: none !important;

    cursor: pointer !important;

    transition:
        color 0.18s ease,
        transform 0.18s ease !important;
}


.frmLogin .sigmo-login-release:hover,
.frmLogin .sigmo-login-release:hover .x-component {
    color: #c03653 !important;

    text-decoration: underline !important;

    transform: translateY(-1px) !important;
}


/* =========================================================
   FOCO DOS BOTÕES
   ========================================================= */

.frmLogin .x-btn.x-btn-focus {
    box-shadow:
        0 0 0 3px rgba(185, 40, 71, 0.15),
        0 3px 8px rgba(84, 25, 42, 0.13) !important;
}


/* =========================================================
   COMPONENTES DESABILITADOS
   ========================================================= */

.frmLogin .x-item-disabled {
    opacity: 0.58 !important;

    filter: grayscale(80%) !important;

    cursor: default !important;
}


/* =========================================================
   ANIMAÇÃO DE ENTRADA
   Aplicar sigmo-login-card-animation junto com frmLogin
   ========================================================= */

.frmLogin.sigmo-login-card-animation {
    animation:
        sigmo-login-enter 0.52s
        cubic-bezier(0.22, 1, 0.36, 1)
        both !important;
}


@keyframes sigmo-login-enter {
    from {
        opacity: 0;

        transform:
            translateY(20px)
            scale(0.975);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .frmLogin.sigmo-login-card-animation {
        animation: none !important;
    }

    .frmLogin *,
    .sigmo-login-background * {
        transition: none !important;
    }
}


/* =========================================================
   RESPONSIVIDADE
   ========================================================= */

@media (max-width: 600px) {
    .frmLogin {
        max-width:
            calc(100vw - 24px) !important;

        max-height:
            calc(100vh - 24px) !important;
    }

    .frmLogin .x-window-body {
        border-radius: 17px !important;
    }

    .frmLogin .sigmo-login-welcome,
    .frmLogin .sigmo-login-welcome .x-component {
        font-size: 25px !important;
    }
}

/* =========================================================
   FUNDO DA TELA DE LOGIN

   :has(.frmLogin) faz o fundo aparecer somente enquanto
   o formulário de login estiver aberto.
   ========================================================= */

html:has(.frmLogin),
body:has(.frmLogin),
body.x-body:has(.frmLogin) {
    min-width: 100% !important;
    min-height: 100% !important;

    background-image:
        linear-gradient(
            115deg,
            rgba(4, 12, 25, 0.20) 0%,
            rgba(5, 15, 29, 0.12) 48%,
            rgba(12, 10, 22, 0.20) 100%
        ),
        url("/files/imagens/industria.png") !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    background-size: cover !important;

    background-color: #071322 !important;
}
/* =========================================================
   REMOVE FUNDOS DOS CONTAINERS INTERNOS

   O cinza do print vem de um painel/container interno.
   ========================================================= */

.frmLogin .x-window-body .x-panel,
.frmLogin .x-window-body .x-panel-body,
.frmLogin .x-window-body .x-container,
.frmLogin .x-window-body .x-container-default,
.frmLogin .x-window-body .x-autocontainer-innerCt {
    background-color: transparent !important;
    background-image: none !important;

    border-color: transparent !important;

    box-shadow: none !important;
}

/* =========================================================
   CARTÃO LOGIN — DARK GLASS TECNOLÓGICO
   ========================================================= */

.frmLogin .x-window-body {
    position: relative !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(185, 40, 71, 0.13),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(8, 20, 36, 0.84) 0%,
            rgba(7, 17, 31, 0.76) 58%,
            rgba(19, 12, 24, 0.81) 100%
        ) !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.18) !important;

    border-radius: 20px !important;

    box-shadow:
        inset 0 3px 0 rgba(185, 40, 71, 0.90),
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 20px 55px rgba(0, 5, 15, 0.46),
        0 0 0 1px rgba(185, 40, 71, 0.05) !important;

    backdrop-filter:
        blur(20px)
        saturate(125%) !important;

    -webkit-backdrop-filter:
        blur(20px)
        saturate(125%) !important;

    overflow: hidden !important;
}

.frmLogin,
.frmLogin.x-window,
.frmLogin.x-window-default,
.frmLogin > .x-window-wrap,
.frmLogin .x-window-wrap,
.frmLogin .x-window-body-wrap {
    background: transparent !important;

    border: 0 !important;
    outline: 0 !important;

    box-shadow: none !important;
}

/* Bem-vindo */
.frmLogin .sigmo-login-welcome,
.frmLogin .sigmo-login-welcome .x-component {
    color: #ffffff !important;

    background: transparent !important;

    font-size: 29px !important;
    font-weight: 720 !important;

    text-align: center !important;

    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.30) !important;
}


/* Subtítulo */
.frmLogin .sigmo-login-subtitle,
.frmLogin .sigmo-login-subtitle .x-component {
    color: rgba(225, 232, 241, 0.82) !important;

    background: transparent !important;

    font-size: 12.5px !important;
    font-weight: 450 !important;

    text-align: center !important;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.26) !important;
}


/* Divisor vinho */
.frmLogin .sigmo-login-subtitle::after {
    background:
        linear-gradient(
            90deg,
            #b92847 0%,
            #ef607b 100%
        ) !important;

    box-shadow:
        0 0 7px rgba(217, 66, 96, 0.35) !important;
}

/* Versão */
.frmLogin .sigmo-login-version,
.frmLogin .sigmo-login-version .x-component {
    color: rgba(213, 222, 233, 0.72) !important;

    background: transparent !important;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.26) !important;
}


/* Novidades */
.frmLogin .sigmo-login-release,
.frmLogin .sigmo-login-release .x-component {
    color: #ed7188 !important;

    background: transparent !important;

    font-weight: 600 !important;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.25) !important;
}


.frmLogin .sigmo-login-release:hover,
.frmLogin .sigmo-login-release:hover .x-component {
    color: #ffffff !important;
}

.frmLogin .sigmo-login-logo {
    opacity: 1 !important;

    filter:
        brightness(1.17)
        contrast(1.04)
        drop-shadow(
            0 3px 7px rgba(0, 0, 0, 0.26)
        ) !important;
}


.frmLogin .sigmo-login-company-logo {
    opacity: 1 !important;

    filter:
        brightness(1.13)
        contrast(1.03)
        drop-shadow(
            0 3px 6px rgba(0, 0, 0, 0.23)
        ) !important;
}

/* =========================================================
   CONTAINER INTERNO — REMOVE A MOLDURA QUADRADA EXTERNA
   ========================================================= */

.frmLogin .sigmo-login-content,
.frmLogin .sigmo-login-content.x-panel,
.frmLogin .sigmo-login-content .x-panel-body,
.frmLogin .sigmo-login-content.x-container {
    background: transparent !important;

    border: 0 !important;
    outline: 0 !important;

    box-shadow: none !important;
}

/* =========================================================
   SIGMO LOGIN — CAMADA PREMIUM DE MOVIMENTO
   ========================================================= */


/* =========================================================
   MOVIMENTO MUITO SUAVE DO FUNDO
   ========================================================= */

body:has(.frmLogin.sigmo-login-premium-motion) {
    animation:
        sigmo-login-background-motion
        24s
        ease-in-out
        infinite
        alternate !important;
}


@keyframes sigmo-login-background-motion {
    0% {
        background-position:
            49% center !important;
    }

    100% {
        background-position:
            51% center !important;
    }
}


/* =========================================================
   ENTRADA DO CARTÃO
   ========================================================= */

.frmLogin.sigmo-login-premium-motion {
    transform-origin:
        center center !important;

    animation:
        sigmo-premium-card-enter
        0.72s
        cubic-bezier(0.22, 1, 0.36, 1)
        both !important;
}


@keyframes sigmo-premium-card-enter {
    0% {
        opacity: 0;

        transform:
            translateY(24px)
            scale(0.965);

        filter:
            blur(5px);
    }

    60% {
        opacity: 1;

        filter:
            blur(0);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0);
    }
}


/* =========================================================
   RESPIRAÇÃO DISCRETA DO CARTÃO
   ========================================================= */

.frmLogin.sigmo-login-premium-motion .x-window-body {
    animation:
        sigmo-premium-card-glow
        5.5s
        ease-in-out
        infinite
        alternate !important;
}


@keyframes sigmo-premium-card-glow {
    0% {
        box-shadow:
            inset 0 3px 0 rgba(185, 40, 71, 0.82),
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            0 20px 55px rgba(0, 5, 15, 0.44),
            0 0 0 1px rgba(185, 40, 71, 0.04);
    }

    100% {
        box-shadow:
            inset 0 3px 0 rgba(223, 70, 99, 0.96),
            inset 0 1px 0 rgba(255, 255, 255, 0.11),
            0 23px 62px rgba(0, 5, 15, 0.50),
            0 0 19px rgba(185, 40, 71, 0.10);
    }
}


/* =========================================================
   LINHA TECNOLÓGICA ANIMADA NO TOPO
   ========================================================= */

.frmLogin.sigmo-login-premium-motion .x-window-body::after {
    content: "";

    position: absolute !important;
    z-index: 5 !important;

    top: 0 !important;
    left: -45% !important;

    width: 42% !important;
    height: 3px !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.22) 22%,
            #f06a83 50%,
            rgba(255, 255, 255, 0.22) 78%,
            transparent 100%
        ) !important;

    border-radius:
        20px
        20px
        0
        0 !important;

    box-shadow:
        0 0 9px rgba(223, 70, 99, 0.55) !important;

    animation:
        sigmo-login-top-line
        5.2s
        ease-in-out
        infinite !important;

    pointer-events: none !important;
}


@keyframes sigmo-login-top-line {
    0% {
        left: -45%;
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    48% {
        left: 103%;
        opacity: 1;
    }

    60%,
    100% {
        left: 103%;
        opacity: 0;
    }
}


/* =========================================================
   LOGO SIGMO — FLUTUAÇÃO LEVE
   ========================================================= */

.frmLogin.sigmo-login-premium-motion
.sigmo-login-logo {
    transform-origin:
        center center !important;

    animation:
        sigmo-login-logo-float
        4.8s
        ease-in-out
        infinite
        alternate !important;
}


@keyframes sigmo-login-logo-float {
    0% {
        transform:
            translateY(0);

        filter:
            brightness(1.13)
            contrast(1.04)
            drop-shadow(
                0 3px 7px
                rgba(0, 0, 0, 0.25)
            );
    }

    100% {
        transform:
            translateY(-3px);

        filter:
            brightness(1.20)
            contrast(1.05)
            drop-shadow(
                0 6px 11px
                rgba(0, 0, 0, 0.31)
            );
    }
}


/* =========================================================
   ENTRADA SEQUENCIAL DOS CAMPOS
   ========================================================= */

.frmLogin.sigmo-login-premium-motion
.fld-transparent,

.frmLogin.sigmo-login-premium-motion
.combo-transparent {
    animation:
        sigmo-login-control-enter
        0.48s
        cubic-bezier(0.22, 1, 0.36, 1)
        both !important;
}


/* Dispositivo */
.frmLogin.sigmo-login-premium-motion
.ico-device {
    animation-delay:
        0.16s !important;
}


/* CNPJ */
.frmLogin.sigmo-login-premium-motion
.ico-cnpj {
    animation-delay:
        0.23s !important;
}


/* Usuário */
.frmLogin.sigmo-login-premium-motion
.ico-user {
    animation-delay:
        0.30s !important;
}


/* Senha */
.frmLogin.sigmo-login-premium-motion
.ico-password {
    animation-delay:
        0.37s !important;
}


/* Combo */
.frmLogin.sigmo-login-premium-motion
.combo-transparent {
    animation-delay:
        0.44s !important;
}


@keyframes sigmo-login-control-enter {
    from {
        opacity: 0;

        transform:
            translateX(-12px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}


/* =========================================================
   CAMPOS — REAÇÃO MODERNA AO FOCO
   ========================================================= */

.frmLogin.sigmo-login-premium-motion
.fld-transparent:focus-within {
    transform:
        translateY(-1px) !important;
}


.frmLogin.sigmo-login-premium-motion
.fld-transparent {
    transition:
        transform 0.18s ease !important;
}


/* Foco mais iluminado */
.frmLogin.sigmo-login-premium-motion
.fld-transparent:focus-within
input.x-form-text,

.frmLogin.sigmo-login-premium-motion
.fld-transparent:focus-within
input.x-form-field {
    border-color:
        #d6405d !important;

    box-shadow:
        0 0 0 3px rgba(214, 64, 93, 0.16),
        0 5px 13px rgba(2, 10, 22, 0.17),
        0 0 12px rgba(185, 40, 71, 0.10) !important;
}


/* =========================================================
   BOTÃO ENTRAR — BRILHO ANIMADO
   ========================================================= */

.frmLogin.sigmo-login-premium-motion
.btn-primary {
    position: relative !important;

    background:
        linear-gradient(
            105deg,
            #941a35 0%,
            #b92847 48%,
            #df4865 100%
        ) !important;

    background-size:
        150%
        100% !important;

    overflow: hidden !important;

    animation:
        sigmo-login-button-gradient
        4.8s
        ease-in-out
        infinite
        alternate !important;
}


/* Reflexo */
.frmLogin.sigmo-login-premium-motion
.btn-primary::before {
    content: "";

    position: absolute !important;
    z-index: 1 !important;

    top: -90% !important;
    left: -36% !important;

    width: 25% !important;
    height: 280% !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.34),
            transparent
        ) !important;

    transform:
        rotate(21deg) !important;

    animation:
        sigmo-login-button-shine
        5.3s
        ease-in-out
        infinite !important;

    pointer-events: none !important;
}


/* Texto acima do reflexo */
.frmLogin.sigmo-login-premium-motion
.btn-primary .x-btn-wrap {
    position: relative !important;
    z-index: 2 !important;
}


@keyframes sigmo-login-button-gradient {
    from {
        background-position:
            0% center;
    }

    to {
        background-position:
            100% center;
    }
}


@keyframes sigmo-login-button-shine {
    0% {
        left: -36%;
        opacity: 0;
    }

    13% {
        opacity: 0.78;
    }

    32% {
        left: 125%;
        opacity: 0;
    }

    100% {
        left: 125%;
        opacity: 0;
    }
}


/* =========================================================
   BOTÕES ENTRANDO APÓS OS CAMPOS
   ========================================================= */

.frmLogin.sigmo-login-premium-motion
.btn-primary,

.frmLogin.sigmo-login-premium-motion
.btn-secondary {
    animation-delay:
        0.49s !important;
}


/* =========================================================
   LINK DE NOVIDADES COM INDICADOR
   ========================================================= */

.frmLogin.sigmo-login-premium-motion
.sigmo-login-release::before {
    content: "";

    display: inline-block !important;

    width: 6px !important;
    height: 6px !important;

    margin-right: 6px !important;

    vertical-align: middle !important;

    background:
        #e74f6b !important;

    border-radius:
        50% !important;

    box-shadow:
        0 0 0 0
        rgba(231, 79, 107, 0.42) !important;

    animation:
        sigmo-login-release-pulse
        2.3s
        ease-out
        infinite !important;
}


@keyframes sigmo-login-release-pulse {
    0% {
        box-shadow:
            0 0 0 0
            rgba(231, 79, 107, 0.43);
    }

    70% {
        box-shadow:
            0 0 0 7px
            rgba(231, 79, 107, 0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(231, 79, 107, 0);
    }
}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    body:has(.frmLogin.sigmo-login-premium-motion),
    .frmLogin.sigmo-login-premium-motion,
    .frmLogin.sigmo-login-premium-motion *,
    .frmLogin.sigmo-login-premium-motion *::before,
    .frmLogin.sigmo-login-premium-motion *::after {
        animation: none !important;

        transition-duration:
            0.01ms !important;
    }
}