/* Minification failed. Returning unminified contents. (21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (43,23): run-time error CSS1039: Token not allowed after unary operator: '-login-font' (45,17): run-time error CSS1039: Token not allowed after unary operator: '-login-ink' (228,25): run-time error CSS1039: Token not allowed after unary operator: '-login-radius' (229,22): run-time error CSS1039: Token not allowed after unary operator: '-login-surface' (293,17): run-time error CSS1039: Token not allowed after unary operator: '-login-ink' (345,17): run-time error CSS1039: Token not allowed after unary operator: '-login-teal' (369,17): run-time error CSS1039: Token not allowed after unary operator: '-login-ink' (371,30): run-time error CSS1039: Token not allowed after unary operator: '-login-border' (400,24): run-time error CSS1039: Token not allowed after unary operator: '-login-teal-mid' (401,32): run-time error CSS1039: Token not allowed after unary operator: '-login-teal-soft' (419,17): run-time error CSS1039: Token not allowed after unary operator: '-login-danger' (497,22): run-time error CSS1039: Token not allowed after unary operator: '-login-teal' (498,24): run-time error CSS1039: Token not allowed after unary operator: '-login-teal' (506,32): run-time error CSS1039: Token not allowed after unary operator: '-login-teal-soft' (512,17): run-time error CSS1039: Token not allowed after unary operator: '-login-muted' (517,17): run-time error CSS1039: Token not allowed after unary operator: '-login-ink' (537,28): run-time error CSS1039: Token not allowed after unary operator: '-login-teal' (538,24): run-time error CSS1039: Token not allowed after unary operator: '-login-teal' (550,28): run-time error CSS1039: Token not allowed after unary operator: '-login-teal-dark' (551,24): run-time error CSS1039: Token not allowed after unary operator: '-login-teal-dark' (568,30): run-time error CSS1039: Token not allowed after unary operator: '-login-border' (569,17): run-time error CSS1039: Token not allowed after unary operator: '-login-ink' (586,17): run-time error CSS1039: Token not allowed after unary operator: '-login-teal-dark' (592,17): run-time error CSS1039: Token not allowed after unary operator: '-login-teal' (599,17): run-time error CSS1039: Token not allowed after unary operator: '-login-danger' (608,17): run-time error CSS1039: Token not allowed after unary operator: '-login-teal-dark' (645,30): run-time error CSS1039: Token not allowed after unary operator: '-login-border' (656,24): run-time error CSS1039: Token not allowed after unary operator: '-login-teal-mid' (657,32): run-time error CSS1039: Token not allowed after unary operator: '-login-teal-soft' (663,17): run-time error CSS1039: Token not allowed after unary operator: '-login-ink' (673,24): run-time error CSS1039: Token not allowed after unary operator: '-login-border' (686,28): run-time error CSS1039: Token not allowed after unary operator: '-login-teal' */ /* ========================================================= Login Wiizi ERP — estilo Atende (split-screen) Tipografia em px (rem depende do , não de .login-page). Carregar este CSS por ÚLTIMO no layout da tela de login. ========================================================= */ html, body { margin: 0 !important; padding: 0 !important; width: 100%; max-width: 100%; height: 100%; overflow: hidden; font-size: 18px !important; line-height: 1.5; background: #fff; } .login-page { --login-teal: #06756d; --login-teal-dark: #024d45; --login-teal-mid: #079d95; --login-teal-soft: rgba(7, 157, 149, 0.18); --login-ink: #0f172a; --login-muted: #475569; --login-border: #b7c7c4; --login-surface: #ffffff; --login-danger: #dc2626; --login-radius: 20px; --login-font: "Open Sans", "Segoe UI", sans-serif; position: relative; display: flex; flex-direction: column; width: 100%; max-width: 100%; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; overflow: hidden; font-family: var(--login-font); font-size: 18px; color: var(--login-ink); -webkit-font-smoothing: antialiased; } .login-page *, .login-page *::before, .login-page *::after { box-sizing: border-box; } .login-main { flex: 1 1 auto; display: flex; width: 100%; max-width: 100%; min-height: 0; height: 100%; overflow: hidden; padding: 0; } /* ---------- Hero ---------- */ .login-hero { position: relative; display: none; flex: 1 1 50%; width: 50%; max-width: 50%; min-width: 0; min-height: 0; height: 100%; overflow: hidden; padding: 40px 36px 56px; color: #fff; background: linear-gradient(145deg, #024d45 0%, #06756d 45%, #079d95 100%); align-items: center; justify-content: center; } .login-hero__glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35; pointer-events: none; } .login-hero__glow--one { width: 320px; height: 320px; top: -80px; right: -60px; background: #4fd1c5; } .login-hero__glow--two { width: 280px; height: 280px; bottom: -40px; left: -40px; background: #036457; } .login-hero__content { position: relative; z-index: 1; width: 100%; max-width: 440px; margin: 0 auto; } .login-hero__brand { margin-bottom: 32px; text-align: center; } .login-hero__logo { display: block; width: 96px; height: 96px; margin: 0 auto 20px; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.18)); } .login-hero__title { margin: 0 0 14px; font-size: 42px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: #fff; } .login-hero__subtitle { margin: 0 auto; max-width: 400px; font-size: 18px; font-weight: 400; line-height: 1.65; opacity: 0.95; color: #fff; } .login-hero__features { display: flex; flex-direction: column; gap: 14px; } .login-feature { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(8px); text-align: left; transition: transform 0.25s ease, background 0.25s ease; } .login-feature:hover { transform: translateX(4px); background: rgba(255, 255, 255, 0.14); } .login-feature__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(255, 255, 255, 0.18); flex-shrink: 0; font-size: 20px; } .login-feature__text { min-width: 0; } .login-feature__title { margin: 0 0 4px; font-size: 18px; font-weight: 700; line-height: 1.3; color: #fff; } .login-feature__description { margin: 0; font-size: 16px; line-height: 1.5; opacity: 0.92; color: #fff; } /* ---------- Painel do formulário ---------- */ .login-panel { flex: 1 1 50%; width: 50%; max-width: 50%; min-width: 0; min-height: 0; height: 100%; display: flex; align-items: center; justify-content: center; padding: 32px 28px 52px; background: #e7f1f0; overflow-x: hidden; overflow-y: auto; } .login-card { width: 100%; max-width: 460px; padding: 40px 36px 28px; border-radius: var(--login-radius); background: var(--login-surface); box-shadow: 0 24px 48px rgba(3, 100, 87, 0.14), 0 4px 16px rgba(0, 0, 0, 0.06); border: 1px solid rgba(7, 157, 149, 0.12); animation: loginFadeIn 0.55s ease-out; } @keyframes loginFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .login-card__header { margin-bottom: 28px; } .login-card__title { margin: 0 0 10px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: #0b3d38; } .login-card__subtitle { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.5; color: #334155; } /* ---------- Formulário ---------- */ .login-form { text-align: left; } .login-form .form-group { margin-left: 0; margin-right: 0; } .login-field { margin-bottom: 22px !important; } .login-field--remember { margin-bottom: 12px !important; } .login-label { display: block; margin-bottom: 10px; font-size: 16px !important; font-weight: 700 !important; color: var(--login-ink) !important; line-height: 1.3; } /* Input com ícone — padding com !important para vencer Bootstrap */ .login-input { position: relative; display: block; width: 100%; } .login-input__icon { position: absolute; left: 16px; top: 0; bottom: 0; width: 24px; display: flex; align-items: center; justify-content: center; z-index: 3; color: #64748b; font-size: 18px; pointer-events: none; line-height: 1; } .login-input__toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; margin: 0; padding: 0; border: none !important; border-radius: 8px; background: transparent !important; box-shadow: none !important; color: #64748b; cursor: pointer; font-size: 18px; line-height: 1; -webkit-appearance: none; appearance: none; } .login-input__toggle:hover, .login-input__toggle:focus { color: var(--login-teal); outline: none; background: rgba(7, 157, 149, 0.1) !important; border: none !important; box-shadow: none !important; } .login-input__toggle:active { background: rgba(7, 157, 149, 0.16) !important; } .login-page .login-form .form-control, .login-page .login-form input.form-control, .login-page .login-form select.form-control, .login-page .login-input__control, .login-page .login-select { display: block !important; width: 100% !important; height: 56px !important; max-width: 100% !important; padding: 14px 18px !important; font-size: 17px !important; font-weight: 400 !important; line-height: 1.4 !important; color: var(--login-ink) !important; background-color: #fff !important; border: 1.5px solid var(--login-border) !important; border-radius: 12px !important; box-shadow: none !important; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .login-page .login-input .login-input__control, .login-page .login-input > input.form-control, .login-page .login-input > #Email, .login-page .login-input > #Password { padding-left: 50px !important; padding-right: 18px !important; } .login-page .login-input .login-input__control--password, .login-page .login-input > #Password { padding-right: 52px !important; } .login-page .login-form .form-control:hover, .login-page .login-input__control:hover, .login-page .login-select:hover { border-color: #8aa3a0 !important; } .login-page .login-form .form-control:focus, .login-page .login-input__control:focus, .login-page .login-select:focus { outline: none !important; border-color: var(--login-teal-mid) !important; box-shadow: 0 0 0 3px var(--login-teal-soft) !important; } .login-page .login-form .form-control::placeholder, .login-page .login-input__control::placeholder { color: #94a3b8 !important; font-size: 17px !important; opacity: 1; } /* Validação */ .login-page .login-form .text-danger, .login-page .login-form .field-validation-error, .login-page .login-form .validation-summary-errors { display: block; margin-top: 8px; font-size: 15px !important; color: var(--login-danger) !important; text-align: left; } .login-page .login-form .field-validation-valid, .login-page .login-form .validation-summary-valid, .login-page .login-form .text-danger:empty { display: none !important; margin: 0 !important; } .login-page .login-form .validation-summary-errors { margin-bottom: 16px; padding: 14px 16px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; font-size: 16px !important; } .login-page .login-form .validation-summary-errors ul, .login-page .login-form .validation-summary-errors li { list-style: none; margin: 0; padding: 0; font-size: 16px !important; } /* Remember — checkbox próprio (sem awesome-bootstrap-checkbox) */ .login-remember { display: flex !important; align-items: center; gap: 12px; margin: 0 !important; padding: 0 !important; cursor: pointer; font-weight: 500 !important; user-select: none; } .login-remember__input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0 !important; } .login-remember__box { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border: 2px solid #94a3b8; border-radius: 6px; background: #fff; transition: background-color 0.15s ease, border-color 0.15s ease; } .login-remember__box::after { content: ""; display: none; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -2px; } .login-remember__input:checked + .login-remember__box { background: var(--login-teal); border-color: var(--login-teal); } .login-remember__input:checked + .login-remember__box::after { display: block; } .login-remember__input:focus + .login-remember__box { box-shadow: 0 0 0 3px var(--login-teal-soft); } .login-remember__text { font-size: 16px !important; font-weight: 500 !important; color: var(--login-muted); line-height: 1.3; } .login-remember:hover .login-remember__text { color: var(--login-ink); } /* Ações */ .login-card__actions { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; } .login-page .login-submit { display: block !important; width: 100% !important; height: 56px !important; margin: 0 !important; padding: 0 20px !important; border: none !important; border-radius: 12px !important; background-color: var(--login-teal) !important; border-color: var(--login-teal) !important; color: #fff !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: 0.01em; line-height: 56px !important; box-shadow: 0 12px 24px rgba(7, 157, 149, 0.28) !important; transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .login-page .login-submit:hover, .login-page .login-submit:focus { background-color: var(--login-teal-dark) !important; border-color: var(--login-teal-dark) !important; color: #fff !important; box-shadow: 0 14px 28px rgba(2, 77, 69, 0.32) !important; } .login-page .login-submit:active { transform: translateY(1px); } .login-page .login-submit-secondary { display: block !important; width: 100% !important; height: 52px !important; line-height: 52px !important; padding: 0 16px !important; border-radius: 12px !important; background-color: #fff !important; border: 1.5px solid var(--login-border) !important; color: var(--login-ink) !important; font-size: 16px !important; font-weight: 600 !important; text-align: center; text-decoration: none !important; box-shadow: none !important; } .login-card__links { display: flex; justify-content: flex-start; align-items: center; } .login-forgot { font-size: 16px !important; font-weight: 700 !important; color: var(--login-teal-dark) !important; text-decoration: none; } .login-forgot:hover, .login-forgot:focus { color: var(--login-teal) !important; text-decoration: underline; } .login-msg-error { margin: 0; font-size: 16px !important; color: var(--login-danger) !important; text-align: center; } .login-msg-error:empty { display: none !important; } .login-msg-error a { color: var(--login-teal-dark); font-weight: 700; } /* Footer — barra sólida para legibilidade sobre o split */ .login-footer { position: absolute; bottom: 0; left: 0; right: 0; z-index: 5; padding: 10px 24px; text-align: center; font-size: 13px !important; font-weight: 600; color: #fff !important; background: rgba(2, 77, 69, 0.92); border: none; pointer-events: none; line-height: 1.35; letter-spacing: 0.01em; } .login-footer span { color: #fff !important; } /* Select2 */ .login-page .select2-container { width: 100% !important; font-size: 17px !important; } .login-page .select2-container .select2-selection--single { height: 56px !important; border: 1.5px solid var(--login-border) !important; border-radius: 12px !important; background-color: #fff !important; } .login-page .select2-container .select2-selection--single:hover { border-color: #8aa3a0 !important; } .login-page .select2-container--default.select2-container--focus .select2-selection--single, .login-page .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--login-teal-mid) !important; box-shadow: 0 0 0 3px var(--login-teal-soft) !important; } .login-page .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 54px !important; padding-left: 18px !important; color: var(--login-ink) !important; font-size: 17px !important; } .login-page .select2-container--default .select2-selection--single .select2-selection__arrow { height: 54px !important; right: 10px !important; } .login-page .select2-dropdown { border-color: var(--login-border) !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12); font-size: 16px !important; } .login-page .select2-container--default .select2-results__option { padding: 12px 16px !important; font-size: 16px !important; } .login-page .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--login-teal) !important; } .login-page .ladda-button[data-style="zoom-in"] .ladda-spinner { color: #fff; } /* ---------- Responsivo ---------- */ @media (min-width: 992px) { .login-hero { display: flex; } } /* Telas baixas (notebook) — compacta o hero sem gerar scroll da página */ @media (min-width: 992px) and (max-height: 820px) { .login-hero { padding: 28px 28px 44px; } .login-hero__logo { width: 72px; height: 72px; margin-bottom: 12px; } .login-hero__title { font-size: 34px; margin-bottom: 10px; } .login-hero__subtitle { font-size: 16px; margin-bottom: 0; } .login-hero__brand { margin-bottom: 18px; } .login-feature { padding: 12px 14px; gap: 12px; } .login-feature__title { font-size: 16px; } .login-feature__description { font-size: 14px; } .login-panel { padding: 24px 24px 40px; } .login-card { padding: 28px 28px 24px; } .login-card__title { font-size: 26px; } .login-page .login-form .form-control, .login-page .login-input__control, .login-page .login-select, .login-page .login-submit { height: 50px !important; } .login-page .login-submit { line-height: 50px !important; } .login-page .select2-container .select2-selection--single { height: 50px !important; } .login-page .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 48px !important; } .login-page .select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px !important; } } @media (max-width: 991px) { html, body { height: auto; overflow-x: hidden; overflow-y: auto; } .login-page { height: auto; min-height: 100vh; min-height: 100dvh; max-height: none; overflow-x: hidden; overflow-y: visible; } .login-main { flex-direction: column; height: auto; min-height: 0; overflow: visible; padding-bottom: 48px; } .login-hero { display: flex; flex: 0 0 auto; width: 100%; max-width: 100%; height: auto; min-height: 0; padding: 36px 24px 28px; } .login-hero__content { max-width: 480px; } .login-hero__title { font-size: 34px; } .login-hero__subtitle { font-size: 17px; } .login-hero__features { display: none; } .login-hero__brand { margin-bottom: 0; } .login-panel { flex: 1 1 auto; width: 100%; max-width: 100%; height: auto; padding: 28px 20px 56px; background: #e7f1f0; align-items: flex-start; overflow: visible; } .login-card { max-width: 480px; margin: 0 auto; padding: 32px 24px 28px; } .login-card__title { font-size: 26px; } .login-card__subtitle { font-size: 16px; } } @media (max-width: 575px) { html, body { font-size: 17px !important; } .login-hero { padding: 28px 16px 22px; } .login-hero__logo { width: 72px; height: 72px; margin-bottom: 14px; } .login-hero__title { font-size: 28px; } .login-hero__subtitle { font-size: 16px; } .login-panel { padding: 20px 14px 40px; } .login-card { padding: 28px 18px 24px; border-radius: 16px; } .login-card__title { font-size: 24px; } .login-page .login-form .form-control, .login-page .login-input__control, .login-page .login-select, .login-page .login-submit { height: 52px !important; font-size: 16px !important; } .login-page .login-submit { line-height: 52px !important; font-size: 17px !important; } .login-page .select2-container .select2-selection--single { height: 52px !important; } .login-page .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 50px !important; font-size: 16px !important; } .login-page .select2-container--default .select2-selection--single .select2-selection__arrow { height: 50px !important; } .login-footer { font-size: 13px !important; padding: 12px 14px 16px; } } @media (prefers-reduced-motion: reduce) { .login-card { animation: none; } .login-feature, .login-submit, .login-form .form-control, .login-forgot { transition: none; } } /* Splash de loading — garante cobertura total na tela de login */ #spinner.ajax-loader.wiizi-boot-splash { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 99999 !important; background: transparent !important; background-image: none !important; opacity: 1 !important; } #spinner.ajax-loader.wiizi-boot-splash::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; background: linear-gradient( 145deg, rgba(2, 77, 69, 0.55) 0%, rgba(6, 117, 109, 0.55) 45%, rgba(7, 157, 149, 0.55) 100% ); } #spinner.ajax-loader.wiizi-boot-splash .wiizi-boot-splash__content { z-index: 1; } #spinner.ajax-loader.wiizi-boot-splash.is-visible { display: block !important; opacity: 1 !important; }