/* ========================================================================== * /_view/login/assets/login.css * Login UI (isolado) + Modelos: * - Default CENTER (model_default.php) => sem body class theme-* * - Split LEFT (model_two.php) => body.theme-two (opcional) * - Glass CENTER (model_three.php) => body.theme-three * - Split RIGHT (model_four.php) => body.theme-four (opcional) * * Extra (pronto p/ futuro): * - Custom Pro (theme-custom + data-lg-dock) => body.theme-custom * * Requisitos: * - * - Background em .account-pages (inline pode sobrescrever) * ========================================================================== */ /* -------------------------------------------------------------------------- * 0) ESCOPO FORTE + RESET (SOMENTE LOGIN) * ------------------------------------------------------------------------ */ body[data-login-ui="1"]{ margin:0; padding:0; min-height:100vh; background:#0b1220; color:#0f172a; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body[data-login-ui="1"] *{ box-sizing:border-box; } body[data-login-ui="1"] img{ max-width:100%; height:auto; display:block; } body[data-login-ui="1"] a{ text-decoration:none; } body[data-login-ui="1"] a:hover{ text-decoration:underline; } /* -------------------------------------------------------------------------- * 1) TOKENS (SOMENTE LOGIN) — sobrescrevíveis via inline no login_topo.php * ------------------------------------------------------------------------ */ body[data-login-ui="1"]{ --lg-bg: #f7f8fb; --lg-card: #ffffff; --lg-ink: #0f172a; --lg-muted: rgba(15,23,42,.68); --lg-border: rgba(15,23,42,.12); --lg-shadow: 0 22px 60px rgba(2,8,23,.22); --lg-accent: #fb6d9d; /* legado (links/ênfase) */ --lg-accent-ink:#ffffff; /* ✅ Botão: tokens “de produto” (painel consegue editar em tempo real) */ --lg-btn: var(--lg-accent); --lg-btn-ink: var(--lg-accent-ink); /* ✅ Focus ring: evita “azul fixo” e mantém consistente com o tema */ --lg-focus: rgba(37,99,235,.45); --lg-focus-ring:rgba(37,99,235,.12); --lg-radius: 16px; --lg-radius-sm: 12px; /* ✅ Larguras homogêneas e “sempre bonitas” */ --lg-card-w: clamp(360px, 92vw, 440px); /* center */ --lg-split-panel-w: clamp(380px, 34vw, 540px); /* left/right */ /* Hero */ --lg-hero-ink: rgba(255,255,255,.92); --lg-hero-muted: rgba(255,255,255,.80); --lg-hero-overlay: .38; /* força de overlay no hero */ --lg-hero-blur: 0px; /* use pequeno se quiser, ex 6px */ /* Footer (aditivo / suporte) */ --lg-footer-ink: rgba(255,255,255,.86); --lg-footer-muted: rgba(255,255,255,.72); --lg-footer-bg: rgba(2,6,23,.18); --lg-footer-border: rgba(255,255,255,.16); --lg-footer-radius: 999px; /* ✅ Alerts (tokens editáveis) */ --lg-success-bg: #d6e9c6; --lg-success-border:#dff0d8; --lg-success-text: #3c763d; --lg-error-bg: #f2dede; --lg-error-border: #ebccd1; --lg-error-text: #a94442; /* Legado painel antigo (box-personaliza) */ --lg-panel-w: 420px; --lg-panel-handle: 46px; /* Layout Pro (densidade) */ --lg-density: comfortable; --lg-field-h: 44px; --lg-field-gap: 10px; /* Layout Pro (área do painel e card) */ --lg-panel-area-w: 100vw; --lg-panel-area-max: 1200px; } body[data-login-ui="1"][data-lg-density="compact"]{ --lg-density: compact; --lg-field-h: 40px; --lg-field-gap: 8px; } body[data-login-ui="1"][data-lg-density="spacious"]{ --lg-density: spacious; --lg-field-h: 48px; --lg-field-gap: 12px; } /* -------------------------------------------------------------------------- * 2) BACKGROUND (account-pages) — sempre atrás * ------------------------------------------------------------------------ */ body[data-login-ui="1"] .account-pages{ position:fixed; inset:0; z-index:0; min-height:100vh; background: var(--lg-bg); background-color: var(--lg-bg); background-repeat:no-repeat; background-position:center center; background-size:cover; } /* -------------------------------------------------------------------------- * 3) BASE LAYOUT — moderno (tpl-login) * - Agora é coluna: conteúdo cresce e o footer fica no fim * ------------------------------------------------------------------------ */ body[data-login-ui="1"] .tpl-login{ position:relative; z-index:1; min-height:100vh; width:100%; display:flex; flex-direction:column; } /* “Conteúdo” (wrap/split) deve crescer */ body[data-login-ui="1"] .tpl-login__split, body[data-login-ui="1"] .tpl-login__wrap, body[data-login-ui="1"] .wrapper-page.tpl-login--default{ flex:1 1 auto; } /* Card base (novo + legado .bgLogin) */ body[data-login-ui="1"] .bgLogin, body[data-login-ui="1"] .tpl-login__card{ background: var(--lg-card); border:1px solid var(--lg-border); border-radius: var(--lg-radius); box-shadow: var(--lg-shadow); color: var(--lg-ink); overflow:hidden; } /* Head/Body compatíveis com Bootstrap legado */ body[data-login-ui="1"] .tpl-login__head, body[data-login-ui="1"] .bgLogin .panel-heading{ padding: 22px 22px 12px; border-bottom: 1px solid rgba(15,23,42,.08); } body[data-login-ui="1"] .tpl-login__body, body[data-login-ui="1"] .bgLogin .panel-body{ padding: 18px 22px 22px; } /* Brand */ body[data-login-ui="1"] .tpl-login__brand, body[data-login-ui="1"] .logomarca{ display:flex; justify-content:center; align-items:center; } body[data-login-ui="1"] .tpl-login__brand img, body[data-login-ui="1"] .logomarca img{ max-width:240px; height:auto; } /* Subtitle */ body[data-login-ui="1"] .tpl-login__subtitle{ margin-top:10px; text-align:center; font-size:13px; line-height:1.35; color: var(--lg-muted); } /* Inputs */ body[data-login-ui="1"] .tpl-login input.form-control{ height: var(--lg-field-h, 44px); border-radius: var(--lg-radius-sm); border:1px solid rgba(15,23,42,.12); box-shadow:none; } body[data-login-ui="1"] .tpl-login input.form-control:focus{ border-color: var(--lg-focus); outline:none; box-shadow: 0 0 0 4px var(--lg-focus-ring); } /* Links legado */ body[data-login-ui="1"] .tpl-login .text-pink{ color: var(--lg-accent) !important; } /* Botões (tokenizados) */ body[data-login-ui="1"] .tpl-login .btnSubmit{ height:44px; border-radius: var(--lg-radius-sm); font-weight:800; letter-spacing:.02em; background: var(--lg-btn) !important; border: 1px solid var(--lg-btn) !important; color: var(--lg-btn-ink) !important; } body[data-login-ui="1"] .tpl-login .btnSubmit:hover{ filter: brightness(.96); } body[data-login-ui="1"] .tpl-login .btnSubmit:active{ filter: brightness(.92); } body[data-login-ui="1"] .tpl-login .btnSubmit:focus{ outline:none; box-shadow: 0 0 0 4px var(--lg-focus-ring); } /* Alerts */ body[data-login-ui="1"] .tpl-login .mensagem .alert{ border-radius: var(--lg-radius-sm); border-width:1px; } /* ✅ classes “prováveis” (ajusta se o seu HTML for outro) */ body[data-login-ui="1"] .tpl-login .alerta-sucesso, body[data-login-ui="1"] .tpl-login .alert-success{ background-color: var(--lg-success-bg) !important; border-color: var(--lg-success-border) !important; color: var(--lg-success-text) !important; } body[data-login-ui="1"] .tpl-login .alerta-erro, body[data-login-ui="1"] .tpl-login .alert-danger, body[data-login-ui="1"] .tpl-login .alert-error{ background-color: var(--lg-error-bg) !important; border-color: var(--lg-error-border) !important; color: var(--lg-error-text) !important; } /* Step2 — código */ body[data-login-ui="1"] .tpl-login #step2 .tpl-login-code{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:nowrap; } body[data-login-ui="1"] .tpl-login #step2 input.code{ width:44px; height:54px; padding:0; text-align:center; font-size:22px; font-weight:900; line-height:54px; border-radius: var(--lg-radius-sm); border:1px solid rgba(15,23,42,.14); background:#fff; } body[data-login-ui="1"] .tpl-login input.code::-webkit-outer-spin-button, body[data-login-ui="1"] .tpl-login input.code::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } body[data-login-ui="1"] .tpl-login input.code{ -moz-appearance:textfield; } /* -------------------------------------------------------------------------- * 3.1) FOOTER (Aditivo / Suporte) — padrão para todos os modelos * - Respeita [hidden] * - ✅ Estado do footer agora é 100% CSS driven (atributo OU classe do editor) * ------------------------------------------------------------------------ */ body[data-login-ui="1"] .tpl-login__footer[hidden]{ display:none !important; } /* ✅ Default: escondido (editor decide) */ body[data-login-ui="1"] .tpl-login__footer{ position:relative; z-index:2; width:100%; display:none; /* <— aqui */ align-items:center; justify-content:center; padding: 10px 12px 3px; margin-top: 8px; border-top: 1px solid rgba(15,23,42,.06); } /* ✅ Liga por atributo no BODY (recomendado) */ body[data-login-ui="1"][data-lg-footer="1"] .tpl-login__footer{ display:flex; } /* ✅ Liga por classe no root do editor (fallback) */ body[data-login-ui="1"] .lpz--footerOn .tpl-login__footer{ display:flex; } body[data-login-ui="1"] .tpl-login__footerLink{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding: 0; border: 0; background: transparent; color: var(--lg-footer-ink, var(--lg-muted)); font-weight:700; font-size:12px; letter-spacing:.01em; text-transform:none; text-align:center; } body[data-login-ui="1"] .tpl-login__footerLink:hover{ text-decoration:underline; } /* -------------------------------------------------------------------------- * 4) MODELO CENTER — (default + center layouts) * ------------------------------------------------------------------------ */ body[data-login-ui="1"] .tpl-login--center{ align-items:center; justify-content:center; } body[data-login-ui="1"] .tpl-login__wrap{ width:100%; display:flex; align-items:center; justify-content:center; padding: clamp(18px, 4vh, 42px) 18px; max-width: min(var(--lg-panel-area-w), var(--lg-panel-area-max), 100%); } body[data-login-ui="1"] .tpl-login--center .tpl-login__card{ width: min(var(--lg-card-w), var(--lg-panel-area-w), 92vw); } /* Clean card refinements (modelo default) */ body[data-login-ui="1"] .tpl-login__card--clean{ border:1px solid rgba(15,23,42,.08); box-shadow: 0 26px 70px rgba(2,8,23,.14), 0 8px 20px rgba(2,8,23,.08), 0 0 0 1px rgba(255,255,255,.35) inset; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,250,251,.96)); backdrop-filter: blur(4px); } body[data-login-ui="1"] .tpl-login__card--clean .tpl-login__head{ border-bottom: 1px solid rgba(15,23,42,.06); text-align:center; } body[data-login-ui="1"] .tpl-login__card--clean .tpl-login__subtitle{ margin-top:8px; } /* -------------------------------------------------------------------------- * 5) MODELOS SPLIT — (left/right) * ------------------------------------------------------------------------ */ body[data-login-ui="1"] .tpl-login--split{ width:100%; min-height:100vh; } body[data-login-ui="1"] .tpl-login__split{ width:100%; min-height:100vh; display:grid; grid-template-columns: 1fr; /* mobile */ align-items:stretch; grid-auto-rows:1fr; } /* panel (onde fica o card) */ body[data-login-ui="1"] .tpl-login__panel{ display:flex; align-items:center; justify-content:center; padding: clamp(18px, 4vh, 42px) 18px; max-width: min(var(--lg-panel-area-w), var(--lg-panel-area-max), 100%); width: 100%; background: var(--lg-panel-bg, linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.94))); min-height:100vh; } /* card no split */ body[data-login-ui="1"] .tpl-login--split .tpl-login__card{ width: min(var(--lg-card-w), var(--lg-split-panel-w), var(--lg-panel-area-w), 92vw); } /* hero */ body[data-login-ui="1"] .tpl-login__hero{ position:relative; display:flex; align-items:center; min-height:100vh; padding: clamp(18px, 5vh, 54px) clamp(16px, 4vw, 46px); overflow:hidden; box-shadow: none; background: transparent; } body[data-login-ui="1"] .tpl-login__heroInner{ position:relative; max-width: 680px; color: var(--lg-hero-ink); z-index:1; } body[data-login-ui="1"] .tpl-login__heroTitle{ margin:0 0 10px 0; font-size: clamp(28px, 3.2vw, 40px); line-height:1.06; font-weight:900; letter-spacing:-.02em; } body[data-login-ui="1"] .tpl-login__heroText{ margin:0 0 16px 0; font-size:16px; line-height:1.5; color: var(--lg-hero-muted); } body[data-login-ui="1"] .tpl-login__heroList{ margin: 14px 0 0 0; padding: 0 0 0 18px; color: var(--lg-hero-muted); } body[data-login-ui="1"] .tpl-login__heroList li{ margin:6px 0; } /* Recentes de login (UI) */ body[data-login-ui="1"] .tpl-login__recent{ margin-bottom:12px; } body[data-login-ui="1"] .tpl-login__recentHead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; } body[data-login-ui="1"] .tpl-login__recentTitle{ font-weight:700; font-size:13px; color: var(--lg-muted); } body[data-login-ui="1"] .tpl-login__recentClear{ padding:2px 6px; font-size:12px; color: var(--lg-muted); } body[data-login-ui="1"] .tpl-login__recentList{ display:flex; gap:8px; flex-wrap:wrap; } body[data-login-ui="1"] .tpl-login__recentBtn{ display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(15,23,42,.12); border-radius: var(--lg-radius-sm); background:#fff; padding:6px 10px; box-shadow: 0 6px 18px rgba(2,8,23,.06); } body[data-login-ui="1"] .tpl-login__recentBtn:hover{ border-color: rgba(15,23,42,.18); } body[data-login-ui="1"] .tpl-login__recentAvatar{ width:26px; height:26px; border-radius:50%; background: rgba(15,23,42,.08); color: #0f172a; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:13px; } body[data-login-ui="1"] .tpl-login__recentAvatar.is-img{ padding:0; background: transparent; overflow:hidden; } body[data-login-ui="1"] .tpl-login__recentAvatar.is-img img{ width:100%; height:100%; object-fit:cover; display:block; } body[data-login-ui="1"] .tpl-login__recentName{ font-weight:700; color: #0f172a; font-size:13px; } body[data-login-ui="1"] .tpl-login__heroFoot{ margin-top:18px; font-size:12px; color: rgba(255,255,255,.70); } body[data-login-ui="1"] .tpl-login__dot{ margin:0 8px; opacity:.7; } /* overlay/“shade” controlado por vars */ body[data-login-ui="1"] .tpl-login__heroShade{ position:absolute; inset:0; pointer-events:none; background: radial-gradient(900px 600px at 25% 15%, rgba(255,255,255,.18), transparent 60%), radial-gradient(900px 600px at 85% 80%, rgba(255,255,255,.10), transparent 60%), linear-gradient(135deg, rgba(2,6,23, calc(var(--lg-hero-overlay) + .12)), rgba(2,6,23, var(--lg-hero-overlay))); -webkit-backdrop-filter: blur(var(--lg-hero-blur)); backdrop-filter: blur(var(--lg-hero-blur)); } /* Desktop: split real */ @media (min-width: 980px){ /* left */ body[data-login-ui="1"] .tpl-login--left .tpl-login__split{ grid-template-columns: var(--lg-split-panel-w) 1fr; } /* right */ body[data-login-ui="1"] .tpl-login--right .tpl-login__split{ grid-template-columns: 1fr var(--lg-split-panel-w); } } /* Layout Pro (dock override - apenas quando data-lg-dock for definido) */ body[data-login-ui="1"][data-lg-dock="left"] .tpl-login--split .tpl-login__split{ grid-template-columns: var(--lg-split-panel-w) 1fr; } body[data-login-ui="1"][data-lg-dock="right"] .tpl-login--split .tpl-login__split{ grid-template-columns: 1fr var(--lg-split-panel-w); } body[data-login-ui="1"][data-lg-dock="center"] .tpl-login--split .tpl-login__split{ grid-template-columns: 1fr; } /* Força grid 2 colunas nos splits mesmo quando align=center no painel */ body[data-login-ui="1"][data-lg-dock="center"] .tpl-login--split.tpl-login--left .tpl-login__split{ grid-template-columns: var(--lg-split-panel-w) 1fr; } body[data-login-ui="1"][data-lg-dock="center"] .tpl-login--split.tpl-login--right .tpl-login__split{ grid-template-columns: 1fr var(--lg-split-panel-w); } body[data-login-ui="1"][data-lg-dock="center"] .tpl-login--split.tpl-login--five .tpl-login__split{ grid-template-columns: minmax(0, 1fr) minmax(320px, var(--lg-split-panel-w)); } body[data-login-ui="1"][data-lg-dock="center"] .tpl-login--split .tpl-login__panel{ order: 0; max-width: min(var(--lg-panel-area-w), var(--lg-panel-area-max), 100%); position:static; pointer-events:auto; } body[data-login-ui="1"][data-lg-dock="center"] .tpl-login--split .tpl-login__hero{ order: 0; } /* Dock em layouts center/default: respeita alinhamento escolhido */ body[data-login-ui="1"][data-lg-dock="left"] .tpl-login--center, body[data-login-ui="1"][data-lg-dock="left"] .tpl-login--default{ align-items:flex-start; justify-content:flex-start; } body[data-login-ui="1"][data-lg-dock="right"] .tpl-login--center, body[data-login-ui="1"][data-lg-dock="right"] .tpl-login--default{ align-items:flex-start; justify-content:flex-end; } /* -------------------------------------------------------------------------- * 6) MODELO GLASS — center com blur * ------------------------------------------------------------------------ */ body.theme-three[data-login-ui="1"] .tpl-login__card--glass{ width: min(var(--lg-card-w), 92vw); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.20); box-shadow: 0 26px 80px rgba(2,6,23,.42); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } body.theme-three[data-login-ui="1"] .tpl-login__card--glass .tpl-login__head{ border-bottom-color: rgba(255,255,255,.18); } body.theme-three[data-login-ui="1"] .tpl-login__subtitle{ color: rgba(255,255,255,.84); } body.theme-three[data-login-ui="1"] .tpl-login input.form-control{ background: rgba(255,255,255,.94); } /* Footer em glass: mais visível */ body.theme-three[data-login-ui="1"]{ --lg-footer-bg: rgba(255,255,255,.10); --lg-footer-border: rgba(255,255,255,.22); --lg-footer-ink: rgba(255,255,255,.92); } /* -------------------------------------------------------------------------- * 6.1) MODELO 2 — Compacto (split esquerda enxuto) * ------------------------------------------------------------------------ */ body.theme-two[data-login-ui="1"]{ --lg-split-panel-w: clamp(320px, 30vw, 480px); --lg-panel-area-max: 960px; --lg-card-w: clamp(320px, 88vw, 420px); --lg-shadow: 0 14px 40px rgba(2,8,23,.12); } body.theme-two[data-login-ui="1"] .tpl-login__panel{ padding: 16px 14px; } body.theme-two[data-login-ui="1"] .tpl-login__card{ box-shadow: var(--lg-shadow); } body.theme-two[data-login-ui="1"] .tpl-login__hero{ padding: clamp(12px, 4vh, 26px) clamp(12px, 3vw, 28px); box-shadow: inset 12px 0 24px rgba(2,8,23,.08); } body.theme-two[data-login-ui="1"] .tpl-login__heroShade{ opacity:.75; } /* -------------------------------------------------------------------------- * 7) MODELO 5 — Hero Minimal (split com hero visual e form minimal) * ------------------------------------------------------------------------ */ body.theme-five[data-login-ui="1"]{ --lg-split-panel-w: clamp(360px, 36vw, 540px); --lg-panel-area-max: 1040px; --lg-card-w: clamp(320px, 88vw, 420px); --lg-shadow: 0 16px 50px rgba(2,8,23,.16); --lg-hero-overlay: .32; --lg-hero-blur: 0px; } body.theme-five[data-login-ui="1"] .tpl-login__split{ grid-template-columns: minmax(0, 1fr) minmax(320px, var(--lg-split-panel-w)); } @media (max-width: 979px){ body.theme-five[data-login-ui="1"] .tpl-login__split{ grid-template-columns: 1fr; } } body.theme-five[data-login-ui="1"] .tpl-login__hero--five{ min-height: 100vh; background: linear-gradient(135deg, rgba(86,88,233,.12), rgba(86,88,233,.08), rgba(237,242,247,.9)), var(--lg-hero-img, linear-gradient(135deg, rgba(15,23,42,.04), rgba(15,23,42,.10))); position: relative; overflow: hidden; align-items: flex-start; padding: clamp(18px, 6vh, 46px) clamp(16px, 5vw, 52px); } body.theme-five[data-login-ui="1"] .tpl-login__hero--five .tpl-login__heroInner{ max-width: 620px; color: #0f172a; } body.theme-five[data-login-ui="1"] .tpl-login__hero--five .tpl-login__eyebrow{ text-transform: uppercase; letter-spacing: .12em; font-weight: 800; font-size: 11px; color: rgba(15,23,42,.55); margin: 0 0 8px 0; } body.theme-five[data-login-ui="1"] .tpl-login__hero--five .tpl-login__heroTitle{ font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; font-weight: 900; color: #0f172a; margin: 0 0 12px 0; } body.theme-five[data-login-ui="1"] .tpl-login__hero--five .tpl-login__heroText{ font-size: 16px; line-height: 1.5; color: rgba(15,23,42,.72); margin: 0; } body.theme-five[data-login-ui="1"] .tpl-login__hero--five .tpl-login__heroShade{ background: radial-gradient(900px 700px at 20% 25%, rgba(255,255,255,.35), transparent 60%), radial-gradient(900px 700px at 80% 75%, rgba(255,255,255,.18), transparent 60%), linear-gradient(135deg, rgba(86,88,233,.06), rgba(86,88,233,.04)); opacity: 1; } body.theme-five[data-login-ui="1"] .tpl-login__panel--five{ background: var(--lg-panel-bg, #fff); padding: clamp(20px, 6vh, 42px) clamp(18px, 4vw, 38px); display: flex; align-items: center; justify-content: center; } body.theme-five[data-login-ui="1"] .tpl-login__card--five{ width: 100%; max-width: var(--lg-card-w); border: 0; border-radius: var(--lg-radius); box-shadow: none; padding: clamp(18px, 3vh, 26px); background: transparent; } body.theme-five[data-login-ui="1"] .tpl-login__head--five{ padding: 0 0 10px 0; border: 0; } body.theme-five[data-login-ui="1"] .tpl-login__brand--five img{ max-width: 210px; } body.theme-five[data-login-ui="1"] .tpl-login__subtitle--five{ margin-top: 6px; } body.theme-five[data-login-ui="1"] .tpl-login__body--five{ padding: 0; margin-top: 12px; } body.theme-five[data-login-ui="1"] .tpl-login .form-control{ height: 44px; } /* -------------------------------------------------------------------------- * 7) MODELO CUSTOM PRO (pronto p/ ativar via JS) * - body.theme-custom[data-lg-dock="left|center|right"] * - Usa o markup do SPLIT (panel + hero) * ------------------------------------------------------------------------ */ body.theme-custom[data-login-ui="1"] .tpl-login--split{ width:100%; } @media (min-width: 980px){ body.theme-custom[data-login-ui="1"][data-lg-dock="left"] .tpl-login__split{ grid-template-columns: var(--lg-split-panel-w) 1fr; } body.theme-custom[data-login-ui="1"][data-lg-dock="right"] .tpl-login__split{ grid-template-columns: 1fr var(--lg-split-panel-w); } /* center: hero full + card “flutuando” no meio (sem precisar outro template) */ body.theme-custom[data-login-ui="1"][data-lg-dock="center"] .tpl-login__split{ grid-template-columns: 1fr; } body.theme-custom[data-login-ui="1"][data-lg-dock="center"] .tpl-login__panel{ position:absolute; inset:0; padding: clamp(18px, 4vh, 42px) 18px; pointer-events:none; z-index:2; } body.theme-custom[data-login-ui="1"][data-lg-dock="center"] .tpl-login__panel .tpl-login__card{ pointer-events:auto; width: min(var(--lg-card-w), 92vw); } body.theme-custom[data-login-ui="1"][data-lg-dock="center"] .tpl-login__hero{ grid-column: 1; } } /* -------------------------------------------------------------------------- * 8) DEFAULT LEGADO — model_default.php (wrapper-page + col-*) * Mantém compatibilidade e alinha o visual ao padrão Center. * ------------------------------------------------------------------------ */ body[data-login-ui="1"] .wrapper-page.tpl-login--default{ min-height:100%; width:100%; display:flex; align-items:center; justify-content:center; padding: clamp(18px, 4vh, 42px) 18px; position:relative; z-index:1; } body[data-login-ui="1"] .wrapper-page.tpl-login--default > .col-xs-12, body[data-login-ui="1"] .wrapper-page.tpl-login--default > .col-sm-12, body[data-login-ui="1"] .wrapper-page.tpl-login--default > .col-md-12, body[data-login-ui="1"] .wrapper-page.tpl-login--default > .col-lg-12{ float:none; width:100%; max-width: min(var(--lg-card-w), 92vw); padding:0; } body[data-login-ui="1"] .wrapper-page.tpl-login--default .card-box.bgLogin{ width:100%; border:1px solid var(--lg-border); border-radius: var(--lg-radius); box-shadow: var(--lg-shadow); } /* -------------------------------------------------------------------------- * 9) RESPONSIVO (GERAL) * ------------------------------------------------------------------------ */ @media (max-width: 768px){ body[data-login-ui="1"] .tpl-login__head, body[data-login-ui="1"] .tpl-login__body, body[data-login-ui="1"] .bgLogin .panel-heading, body[data-login-ui="1"] .bgLogin .panel-body{ padding-left:16px; padding-right:16px; } } @media (max-width: 420px){ body[data-login-ui="1"] .tpl-login #step2 input.code{ width:40px; height:52px; line-height:52px; } } /* -------------------------------------------------------------------------- * 10) PAINEL LEGADO (FALLBACK) — .box-personaliza * (Painel novo é .lpz e está em personaliza.css) * ------------------------------------------------------------------------ */ body[data-login-ui="1"] .box-personaliza{ position:fixed; left:0; top:0; width:var(--lg-panel-w); height:100%; background:#fff; border-right:1px solid rgba(15,23,42,.10); box-shadow: 0 14px 40px rgba(2,8,23,.16); z-index: 9999; transform: translateX(0); transition: transform .18s ease; will-change: transform; } body[data-login-ui="1"] .box-personaliza.is-collapsed{ transform: translateX(calc(-1 * (var(--lg-panel-w) - var(--lg-panel-handle)))); } body[data-login-ui="1"] .box-personaliza.is-collapsed .push{ opacity: 1; pointer-events: auto; } @media (prefers-reduced-motion: reduce){ body[data-login-ui="1"] .box-personaliza{ transition:none !important; } } /* -------------------------------------------------------------------------- * 11) Hotjar branding (mantém) * ------------------------------------------------------------------------ */ #_hj-f5b2a1eb-9b07_hotjar_branding{ visibility:hidden !important; display:none !important; }