/* * Customizacoes BaetaPRO sobre Metronic 8.2 Demo1. * * A pasta original do Metronic nao deve ser alterada. Ajustes visuais de produto, * estado de AJAX e pequenos refinamentos ficam concentrados aqui. */ #kt_app_toolbar_container, #kt_app_content_container, #kt_app_footer .app-container { margin-left: auto; margin-right: auto; max-width: 1320px; } /* ========================================================================== [TESTE] Layout estilo Metronic demo39 (sidebar/fundo unificados + card) Reversivel: remover este bloco e voltar data-kt-app-layout para "dark-sidebar" no restaura o layout anterior. ========================================================================== */ html[data-bs-theme=light] body#kt_app_body { background-color: var(--bb-cinza-50); } [data-kt-app-layout=light-sidebar] .app-sidebar { border-right: 0 !important; box-shadow: none !important; } html[data-bs-theme=light] [data-kt-app-layout=light-sidebar] .app-sidebar { background-color: var(--bb-cinza-50) !important; } html[data-bs-theme=light] .baeta-app-header, html[data-bs-theme=light] [data-kt-app-header-minimize=on] .baeta-app-header { background-color: var(--bb-cinza-50); } @media (min-width: 992px) { .baeta-app-header .app-navbar { margin-right: 50px; } .baeta-header-search-wrap { margin-left: 16.5px; width: 350px; } } /* Wrapper (toolbar + content) — margem direita reproduzindo o "card" do demo39 */ .baeta-app-wrapper { margin-bottom: 0; } @media (min-width: 992px) { .baeta-app-wrapper { margin-right: 80px; } } html[data-bs-theme=light] .baeta-app-toolbar, html[data-bs-theme=light] .baeta-app-content { background-color: #ffffff; } .baeta-app-toolbar { border-top-left-radius: 12px; border-top-right-radius: 12px; padding-bottom: .5rem; padding-top: 1.25rem; } html[data-bs-theme=light] .baeta-app-toolbar { border-top: 1px solid var(--bb-cinza-100); } html[data-bs-theme=dark] .baeta-app-toolbar { border-top: 1px solid var(--bs-border-color); } .baeta-app-content { border-radius: 0 0 12px 12px; min-height: 600px; padding-bottom: 2.1875rem; padding-top: 1.5625rem; } html[data-bs-theme=light] .baeta-app-content { box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .03); } .baeta-app-toolbar #kt_app_toolbar_container, .baeta-app-content #kt_app_content_container { padding-left: 2.1875rem; padding-right: 2.1875rem; } /* Variáveis legadas (usadas em views e regras antigas) apontam para os tokens do design system (--bb-*), definidos no bloco "Baeta Design System" abaixo. Cores de marcas terceiras (Segfy, Otimize, CrediHome...) ficam intactas. */ :root { --baeta-brand-green: var(--bb-verde-institucional); --baeta-legacy-green: var(--bb-verde-institucional); --baeta-legacy-green-hover: var(--bb-verde-institucional-hover); --baeta-light-green: var(--bb-verde-vivo); --baeta-light-green-hover: var(--bb-verde-vivo-hover); --baeta-legacy-dark: var(--bb-verde-institucional-hover); --baeta-legacy-text: var(--bb-cinza-800); /* Item de menu selecionado: sem preenchimento, só a fonte em mint (#B3FFD2). */ --bs-app-sidebar-light-menu-link-bg-color-active: transparent; --segurogpt: var(--bb-verde-institucional-hover); --leadsgo: var(--bb-preto); --segfy: #ff8c2a; --baetasaude: var(--bb-cinza-100); --otimize:#0144E4; --contabilizei: var(--bb-cinza-100); --corretorpro:#0144E4; --credihome:#F56738; --corretor-protegido:#17375f; --frota: var(--bb-verde-institucional); /* [TESTE] #02c795 deixou de ser a cor de "primary" da plataforma: em texto/ ícone/borda vira o mint #B3FFD2 (ex.: item de menu selecionado); em fundo, cada utilitário abaixo já força o par #253824 + #B3FFD2 explicitamente. */ --bs-text-primary: var(--bb-verde-claro) !important; --bs-primary: var(--bb-verde-claro) !important; --bs-primary-active: var(--baeta-light-green) !important; --bs-primary-light: var(--bb-verde-claro-nevoa) !important; } /* ========================================================================== Neutros e semânticas do Metronic (tema claro) → paleta do design system. Cobre text-gray-*, text-muted, border-gray-*, btn-light, btn-secondary, bg-light, badge-light-*, text-success/danger/warning/info sem tocar as views. Escala de 9 cinzas do Metronic cai para 7 da paleta: 600/700 e 800/900 colapsam. Tema dark permanece com os neutros originais do Metronic. ========================================================================== */ html:not([data-bs-theme=dark]) { --bs-gray-100: #f7f9f7; --bs-gray-100-rgb: 247, 249, 247; --bs-text-gray-100: #f7f9f7; --bs-gray-200: #edf0ec; --bs-gray-200-rgb: 237, 240, 236; --bs-text-gray-200: #edf0ec; --bs-gray-300: #dce1da; --bs-gray-300-rgb: 220, 225, 218; --bs-text-gray-300: #dce1da; --bs-gray-400: #b9c0b6; --bs-gray-400-rgb: 185, 192, 182; --bs-text-gray-400: #b9c0b6; --bs-gray-500: #8a9287; --bs-gray-500-rgb: 138, 146, 135; --bs-text-gray-500: #8a9287; --bs-gray-600: #5c645a; --bs-gray-600-rgb: 92, 100, 90; --bs-text-gray-600: #5c645a; --bs-gray-700: #5c645a; --bs-gray-700-rgb: 92, 100, 90; --bs-text-gray-700: #5c645a; --bs-gray-800: #363b34; --bs-gray-800-rgb: 54, 59, 52; --bs-text-gray-800: #363b34; --bs-gray-900: #363b34; --bs-gray-900-rgb: 54, 59, 52; --bs-text-gray-900: #363b34; --bs-text-muted: #8a9287; --bs-body-color: #363b34; --bs-border-color: #edf0ec; --bs-border-dashed-color: #dce1da; --bs-light: #f7f9f7; --bs-light-rgb: 247, 249, 247; --bs-light-active: #edf0ec; --bs-text-light: #f7f9f7; --bs-light-inverse: #5c645a; --bs-secondary: #dce1da; --bs-secondary-rgb: 220, 225, 218; --bs-secondary-active: #b9c0b6; --bs-secondary-inverse: #363b34; --bs-dark: #1a2a1a; --bs-dark-rgb: 26, 42, 26; --bs-dark-active: #253824; --bs-text-dark: #363b34; --bs-app-bg-color: #f7f9f7; --bs-app-sidebar-light-bg-color: #f7f9f7; --bs-app-sidebar-light-menu-link-color: #363b34; --bs-app-sidebar-light-menu-link-icon-color: #8a9287; --bs-app-sidebar-light-menu-heading-color: #8a9287; --bs-success: #007a58; --bs-success-rgb: 0, 122, 88; --bs-success-active: #005f44; --bs-success-light: #e8fff2; --bs-danger: #b3261e; --bs-danger-rgb: 179, 38, 30; --bs-danger-active: #b3261e; --bs-warning: #8a5a00; --bs-warning-rgb: 138, 90, 0; --bs-warning-active: #8a5a00; --bs-info: #35608f; --bs-info-rgb: 53, 96, 143; --bs-info-active: #35608f; } /* Badge de item de menu ("Em breve") */ .baeta-menu-badge { background-color: var(--bb-cinza-200); color: var(--bb-cinza-600); margin-left: 2px; } /* Arina AI — único item que usa o território salmão. Texto/ícone em salmão saturado sobre o sidebar claro; no dark, salmão claro. */ .app-sidebar .menu-link.baeta-menu-arina .menu-title, .app-sidebar .menu-link.baeta-menu-arina .menu-icon { color: var(--bb-salmao-saturado) !important; } .app-sidebar .menu-link.baeta-menu-arina:hover .menu-title, .app-sidebar .menu-link.baeta-menu-arina:hover .menu-icon { color: var(--bb-salmao-saturado-hover) !important; } .app-sidebar .menu-link.baeta-menu-arina .baeta-menu-badge { background-color: var(--bb-salmao-claro); color: var(--bb-salmao-saturado); } html[data-bs-theme=dark] .app-sidebar .menu-link.baeta-menu-arina .menu-title, html[data-bs-theme=dark] .app-sidebar .menu-link.baeta-menu-arina .menu-icon { color: var(--bb-salmao-claro) !important; } html[data-bs-theme=dark] .app-sidebar .menu-link.baeta-menu-arina:hover .menu-title, html[data-bs-theme=dark] .app-sidebar .menu-link.baeta-menu-arina:hover .menu-icon { color: var(--bb-salmao-medio) !important; } html[data-bs-theme=dark] .app-sidebar .menu-link.baeta-menu-arina .baeta-menu-badge { background-color: var(--bb-salmao-saturado-hover); color: var(--bb-salmao-claro); } /* Item de menu selecionado herda --bs-primary (mint #B3FFD2) — funciona bem no dark, mas fica sem contraste/"sem graça" sobre o sidebar claro. No tema light, usa um verde mais escuro só nesse elemento. */ html[data-bs-theme=light] .app-sidebar .menu .menu-item .menu-link.active, html[data-bs-theme=light] .app-sidebar .menu .menu-item .menu-link.active .menu-title, html[data-bs-theme=light] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i, html[data-bs-theme=light] .app-sidebar .menu .menu-item .menu-sub .menu-item .menu-link.active .menu-title { color: #005F44 !important; } html[data-bs-theme=light] .app-sidebar .menu .menu-item .menu-link.active .menu-bullet .bullet { background-color: #005F44 !important; } /* Bootstrap/Metronic .btn-primary (fora do design system "baeta-btn", usado em telas admin/formulários legados) herdaria fundo #B3FFD2 pálido de --bs-primary acima — força o mesmo par #253824/#B3FFD2 do botão primário da marca. */ .btn-primary, .btn.btn-primary { background-color: var(--bb-verde-institucional) !important; border-color: var(--bb-verde-institucional) !important; color: var(--bb-verde-claro) !important; } .btn-primary:hover, .btn.btn-primary:hover, .btn-primary:focus, .btn.btn-primary:focus { background-color: var(--bb-verde-institucional-hover) !important; border-color: var(--bb-verde-institucional-hover) !important; color: var(--bb-verde-claro) !important; } /* Badge sólido "primary" (contador de notificações): mesmo par do botão. */ .badge-primary { background-color: var(--bb-verde-institucional) !important; color: var(--bb-verde-claro) !important; } /* Badges/alerts "light-primary" usam --bs-primary-light como fundo, que o Metronic já troca de tom por tema (pálido no claro, escuro no dark) — o texto acompanha: verde institucional sobre fundo pálido, mint sobre fundo escuro, sempre com contraste. */ html[data-bs-theme=light] .badge-light-primary, html[data-bs-theme=light] .alert-light-primary { color: var(--bb-verde-institucional) !important; } html[data-bs-theme=dark] .badge-light-primary, html[data-bs-theme=dark] .alert-light-primary { color: var(--bb-verde-claro) !important; } .btn.btn-light-primary { color: var(--bb-verde-claro); border-color: var(--bb-verde-institucional); background-color: var(--bb-verde-institucional); } .btn.btn-light-primary:hover, .btn.btn-light-primary:focus { color: var(--bb-verde-claro); border-color: var(--bb-verde-institucional-hover); background-color: var(--bb-verde-institucional-hover); } /* Único uso: par de .bg-baeta (agora verde institucional escuro) no avatar do usuário — precisa de texto claro para não desaparecer sobre o novo fundo. */ .text-baeta-reverso { color: var(--bb-verde-claro) !important; } .text-baeta { color: var(--bb-verde-claro) !important; } .border-baeta { border-color: var(--bb-verde-claro) !important; } .text-active-primary.active { transition: color .2s ease; color: var(--baeta-legacy-dark) !important; } .bg-credihome { --bs-bg-rgb-color: var(--baeta-legacy-dark); background-color: var(--credihome) !important; } /* ========================================================================== [TESTE] Baeta Design System — Botões Fonte: handoff/buttons (SKILL "baeta-buttons"). .btn-baeta e .btn-baeta-reverso passam a ser aliases de .baeta-btn--primario / .baeta-btn--secundario para que os botões já usados em toda a plataforma herdem o novo padrão sem editar cada view. Reversível: restaurar as duas regras antigas abaixo deste bloco. ========================================================================== */ :root { /* Verdes — prioridade de uso: institucional, claro (menta), claro-névoa */ --bb-verde-institucional: #253824; --bb-verde-institucional-hover: #1a2a1a; --bb-verde-vivo: #00c795; --bb-verde-vivo-hover: #00b587; --bb-verde-acao: #007a58; --bb-verde-acao-hover: #005f44; --bb-verde-acao-foco: #6fdcb8; --bb-verde-claro: #b3ffd2; --bb-verde-claro-profundo: #8ae8bc; --bb-verde-claro-nevoa: #e8fff2; /* Cinzas e neutros */ --bb-branco: #ffffff; --bb-cinza-50: #f7f9f7; --bb-cinza-100: #edf0ec; --bb-cinza-200: #dce1da; --bb-cinza-300: #b9c0b6; --bb-cinza-400: #8a9287; --bb-cinza-600: #5c645a; --bb-cinza-800: #363b34; --bb-preto: #000000; /* Salmão — exclusivo do território Arina AI, nunca fora dele */ --bb-salmao-claro: #ffd9d0; --bb-salmao-claro-hover: #ffc7ba; --bb-salmao-medio: #fa8072; --bb-salmao-saturado: #b5453a; --bb-salmao-saturado-hover: #93342b; --bb-salmao-nevoa: #fff3f0; /* Semânticas */ --bb-sucesso: #007a58; --bb-erro: #b3261e; --bb-alerta: #8a5a00; --bb-info: #35608f; --bb-radius-small: 8px; --bb-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --bb-duration-color: 200ms; } .baeta-btn { display: inline-flex; align-items: center; gap: 8px; font-family: "Instrument Sans", -apple-system, sans-serif; font-weight: 500; font-size: 16px; line-height: 1; padding: 15px 26px; border: 1px solid transparent; border-radius: var(--bb-radius-small); cursor: pointer; text-decoration: none; transition: background-color var(--bb-duration-color) var(--bb-ease-standard), border-color var(--bb-duration-color) var(--bb-ease-standard), color var(--bb-duration-color) var(--bb-ease-standard), transform 120ms var(--bb-ease-standard); } .baeta-btn--grande { font-size: 17px; padding: 17px 30px; } .baeta-btn--pequeno { font-size: 15px; padding: 11px 18px; } .baeta-btn:active:not(:disabled) { transform: scale(0.98); } .baeta-btn:focus-visible { outline: 2px solid var(--bb-verde-acao); outline-offset: 3px; } .baeta-btn:disabled, .baeta-btn[aria-disabled="true"] { background: var(--bb-cinza-200); color: var(--bb-cinza-400); border-color: var(--bb-cinza-200); cursor: not-allowed; } .baeta-btn--primario { background: var(--bb-verde-institucional); color: var(--bb-verde-claro); border-color: var(--bb-verde-institucional); } .baeta-btn--primario:hover:not(:disabled) { background: var(--bb-verde-institucional-hover); border-color: var(--bb-verde-institucional-hover); } .baeta-btn--secundario { background: transparent; color: var(--bb-verde-institucional); border-color: var(--bb-verde-institucional); } .baeta-btn--secundario:hover:not(:disabled) { background: var(--bb-cinza-50); } .baeta-btn--vivo { background: var(--bb-verde-vivo); color: var(--bb-verde-institucional); border-color: var(--bb-verde-vivo); } .baeta-btn--vivo:hover:not(:disabled) { background: var(--bb-verde-vivo-hover); border-color: var(--bb-verde-vivo-hover); } .baeta-btn--secundario-escuro { background: transparent; color: var(--bb-verde-claro); border-color: rgba(255, 255, 255, 0.28); } .baeta-btn--secundario-escuro:hover:not(:disabled) { border-color: var(--bb-verde-claro); } .baeta-btn--arina { background: var(--bb-salmao-claro); color: #000; border-color: var(--bb-salmao-claro); } .baeta-btn--arina:hover:not(:disabled) { background: var(--bb-salmao-claro-hover); border-color: var(--bb-salmao-claro-hover); } .baeta-btn--arina:focus-visible { outline-color: var(--bb-salmao-medio); } .baeta-btn--fantasma { background: transparent; color: var(--bb-verde-institucional); border-color: transparent; } .baeta-btn--fantasma:hover:not(:disabled) { color: var(--bb-verde-acao); } @media (prefers-reduced-motion: reduce) { .baeta-btn { transition-duration: 0.001ms; } .baeta-btn:active:not(:disabled) { transform: none; } } /* Aliases: mantêm as classes já usadas nas views (20 arquivos) sem tocar cada uma */ .btn-baeta { font-family: "Instrument Sans", -apple-system, sans-serif; color: var(--bb-verde-claro); background-color: var(--bb-verde-institucional); border-width: 1px !important; border-style: solid !important; border-color: var(--bb-verde-institucional) !important; border-radius: var(--bb-radius-small); font-weight: 500; transition: background-color var(--bb-duration-color) var(--bb-ease-standard), border-color var(--bb-duration-color) var(--bb-ease-standard); } .btn-baeta:hover { color: var(--bb-verde-claro); background-color: var(--bb-verde-institucional-hover); border-color: var(--bb-verde-institucional-hover) !important; font-weight: 500; } .btn-baeta-reverso { font-family: "Instrument Sans", -apple-system, sans-serif; color: var(--bb-verde-institucional); background-color: transparent; border-width: 1px !important; border-style: solid !important; /* Borda = cor do texto: acompanha hover, tema dark e fundo escuro sem repetir a cor em cada variante. */ border-color: currentColor !important; border-radius: var(--bb-radius-small); font-weight: 500; transition: background-color var(--bb-duration-color) var(--bb-ease-standard), border-color var(--bb-duration-color) var(--bb-ease-standard); } .btn-baeta-reverso:hover { color: var(--bb-verde-institucional) !important; background-color: var(--bb-cinza-50) !important; border-color: var(--bb-verde-institucional); font-weight: 500; } /* Sobre fundo escuro (ex.: card verde institucional/`.baeta-dark-surface`), o "reverso" precisa permanecer legível — texto claro, borda translúcida, sem preencher (continua "vazado", só troca a paleta). */ .bg-baeta-reverso .btn-baeta-reverso, .bg-credihome .btn-baeta-reverso, .baeta-dark-surface .btn-baeta-reverso { color: var(--bb-verde-claro); border-color: rgba(255, 255, 255, 0.28); } .bg-baeta-reverso .btn-baeta-reverso:hover, .bg-credihome .btn-baeta-reverso:hover, .baeta-dark-surface .btn-baeta-reverso:hover { color: var(--bb-verde-claro) !important; background-color: transparent !important; border-color: var(--bb-verde-claro); } /* Plataforma tem toggle de dark mode (o design system original só previa fundo claro) — texto/borda escuros do "secundário" ficam ilegíveis sobre fundo quase preto, então herdam a paleta clara nesse tema. */ html[data-bs-theme=dark] .btn-baeta-reverso, html[data-bs-theme=dark] .baeta-btn--secundario { color: var(--bb-verde-claro); border-color: rgba(255, 255, 255, 0.28); } html[data-bs-theme=dark] .btn-baeta-reverso:hover, html[data-bs-theme=dark] .baeta-btn--secundario:hover { color: var(--bb-verde-claro) !important; background-color: rgba(255, 255, 255, 0.06) !important; border-color: var(--bb-verde-claro); } /* Botão primário sobre fundo escuro: inverte para preenchimento claro (#B3FFD2) com letra institucional (#253824) — o fundo verde escuro se perderia contra um fundo já escuro. */ html[data-bs-theme=dark] .btn-baeta, html[data-bs-theme=dark] .baeta-btn--primario, html[data-bs-theme=dark] .btn-primary, html[data-bs-theme=dark] .btn.btn-primary, .baeta-dark-surface .btn-baeta, .baeta-dark-surface .baeta-btn--primario, .baeta-dark-surface .btn-primary, .baeta-dark-surface .btn.btn-primary { background-color: var(--bb-verde-claro) !important; border-color: var(--bb-verde-claro) !important; color: var(--bb-verde-institucional) !important; } html[data-bs-theme=dark] .btn-baeta:hover, html[data-bs-theme=dark] .baeta-btn--primario:hover, html[data-bs-theme=dark] .btn-primary:hover, html[data-bs-theme=dark] .btn.btn-primary:hover, .baeta-dark-surface .btn-baeta:hover, .baeta-dark-surface .baeta-btn--primario:hover, .baeta-dark-surface .btn-primary:hover, .baeta-dark-surface .btn.btn-primary:hover { background-color: var(--bb-verde-claro-profundo) !important; border-color: var(--bb-verde-claro-profundo) !important; color: var(--bb-verde-institucional) !important; } html[data-bs-theme=dark] .baeta-btn--fantasma { color: var(--bb-verde-claro); } html[data-bs-theme=dark] .baeta-btn--fantasma:hover { color: var(--bb-verde-vivo); } .bg-baeta{ --bs-bg-rgb-color: var(--bb-verde-institucional); background-color: var(--bb-verde-institucional) !important; color: var(--bb-verde-claro); } .bg-baeta-reverso{ --bs-bg-rgb-color: var(--baeta-legacy-dark); background-color: var(--baeta-legacy-dark) !important; } .baeta-logo-text { color: #ffffff; font-weight: 800; font-size: 1.35rem; letter-spacing: 0; } .logos-dashboard { max-width: 48%; max-height: 65px; object-fit: contain; } .baeta-logo-text img { width: 75%; margin-right: .5rem; } .baeta-auth-bg { background: var(--baeta-brand-green); min-height: 100vh; } .baeta-auth-legacy { background: var(--baeta-brand-green); } .baeta-auth-legacy .login-form { width: 100%; max-width: 450px; } .baeta-auth-legacy .baeta-auth-register { max-width: 620px; } .baeta-auth-logo { max-height: 100px; max-width: min(320px, 80vw); } .bg-primary { --bs-bg-rgb-color: var(--bb-verde-institucional) !important; background-color: var(--bb-verde-institucional) !important; color: var(--bb-verde-claro); } .form-check-input:checked { background-color: var(--bb-verde-institucional); border-color: var(--bb-verde-institucional); } .baeta-auth-corporate { background: #ffffff; } .link-baeta { color: var(--baeta-legacy-dark) !important; text-decoration-color: var(--baeta-legacy-dark) !important; font-weight: 600; } .baeta-auth-corporate-aside { background-color: var(--baeta-legacy-dark); min-height: 100vh; } .baeta-auth-corporate-logo { max-height: 76px; max-width: min(300px, 76vw); } .baeta-auth-corporate-screens { max-width: min(500px, 70%); } .baeta-auth-form-logo { max-height: 72px; max-width: min(260px, 75vw); } .baeta-auth-legacy .form-control::placeholder { color: rgba(255, 255, 255, .72); } .baeta-auth-legacy .form-control:focus { color: #ffffff !important; background-color: rgba(26, 42, 26, .42) !important; box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .14); } [data-kt-app-layout=dark-sidebar] .app-sidebar { background-color: var(--baeta-legacy-dark); border-right: 0; } .baeta-auth-legacy .form-select { color: #ffffff; } .baeta-auth-legacy .form-select option { color: var(--baeta-legacy-text); } .baeta-auth-legacy .btn-outline-white:hover, .baeta-auth-legacy .btn-outline-white:focus { color: var(--baeta-brand-green) !important; background: #ffffff !important; border-color: #ffffff !important; } .baeta-auth-message:empty { display: none; } .baeta-password-rules { color: rgba(255, 255, 255, .86); font-size: .92rem; } /* Sobre o fundo verde do auth legado: pendente em branco atenuado, válido em menta (o rosa anterior confundia com o salmão, reservado à Arina). */ .baeta-password-rules [data-rule], .baeta-password-match { color: rgba(255, 255, 255, .6); } .baeta-password-rules [data-rule].valid { color: var(--bb-verde-claro); } .baeta-auth-corporate .baeta-password-rules { color: var(--bs-gray-600); } .baeta-auth-corporate .baeta-password-rules [data-rule], .baeta-auth-corporate .baeta-password-match { color: var(--bs-danger); } .baeta-auth-corporate .baeta-password-rules [data-rule].valid { color: var(--bs-success); } .baeta-sidebar-badge { min-width: 1.75rem; } .baeta-dashboard-card { min-height: 140px; } .baeta-dashboard { --baeta-card-radius: 8px; } .baeta-dashboard .card { border-radius: var(--baeta-card-radius); } .baeta-summary-panel { background: var(--baeta-legacy-dark); overflow: hidden; } .baeta-summary-panel .card-body { position: relative; z-index: 1; } .baeta-summary-stat { background: #ffffff; border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; min-height: 158px; padding: 1.35rem; } .baeta-highlight-card { background: linear-gradient(135deg, var(--bb-verde-claro-nevoa), rgba(255, 255, 255, 0) 52%), #ffffff; min-height: 315px; } .baeta-carrier-card { background: var(--baeta-legacy-dark); overflow: hidden; } .baeta-solution-card { color: inherit; text-decoration: none; } /* Descrição com respiro entre linhas (antes lh-1, linhas quase coladas) */ .baeta-solution-desc { line-height: 1.4; } /* Hover: capa muda de cor ao passar o mouse */ .baeta-solution-card .baeta-solution-tile-brand { transition: background-color var(--bb-duration-color) var(--bb-ease-standard), border-color var(--bb-duration-color) var(--bb-ease-standard); } .baeta-solution-card:hover .baeta-solution-tile-brand, .baeta-solution-card:focus-visible .baeta-solution-tile-brand { background-color: var(--bb-verde-claro-nevoa); } .baeta-solution-card:focus-visible { border-radius: var(--bb-radius-small); outline: 2px solid var(--bb-verde-acao); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .baeta-solution-card .baeta-solution-tile-brand { transition: none; } } .baeta-quick-link { align-items: center; background: var(--bb-cinza-50); border: 1px solid var(--bb-cinza-100); border-radius: 8px; color: var(--baeta-legacy-text); display: flex; flex-direction: column; font-weight: 700; gap: .85rem; justify-content: center; min-height: 118px; padding: 1rem; text-align: center; text-decoration: none; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .baeta-quick-link i { color: var(--baeta-brand-green); } .baeta-quick-link:hover, .baeta-quick-link:focus { background: #ffffff; border-color: rgba(37, 56, 36, .35); color: var(--baeta-brand-green); } .baeta-hero-panel { background: linear-gradient(135deg, var(--bb-verde-institucional-hover) 0%, var(--bb-verde-institucional) 100%); } .baeta-hero-panel .text-gray-700, .baeta-hero-panel .text-muted { color: rgba(255, 255, 255, .78) !important; } .baeta-solutions .card { border-radius: 8px; } .baeta-solution-page-card { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .baeta-solution-page-card:hover, .baeta-solution-page-card:focus-within { border-color: rgba(37, 56, 36, .28); box-shadow: 0 .75rem 1.75rem rgba(54, 59, 52, .08); transform: translateY(-2px); } .baeta-solution-logo-band { align-items: center; border-radius: 8px; display: flex; height: 150px; justify-content: center; padding: 1.75rem; } .baeta-solution-logo-band img, .baeta-solution-hero-media img { max-height: 86px; max-width: min(78%, 320px); object-fit: contain; } .baeta-solution-hero { overflow: hidden; } .baeta-solution-hero-minimal-icon { align-items: center; border-radius: 12px; display: flex; flex-shrink: 0; height: 64px; justify-content: center; padding: 10px; width: 64px; } .baeta-solution-hero-minimal-icon img { max-height: 100%; max-width: 100%; object-fit: contain; } .baeta-solution-hero-media { align-items: center; display: flex; justify-content: center; min-height: 320px; padding: 3rem; } .baeta-solution-hero-badge { align-items: center; border-radius: 12px; display: flex; height: 96px; justify-content: center; padding: 1rem 1.5rem; width: 220px; } .baeta-solution-hero-badge img { max-height: 100%; max-width: 100%; object-fit: contain; } @media (max-width: 575.98px) { .baeta-solution-hero-badge { width: 100%; } } .baeta-segurogpt-frame { border-radius: 8px; max-height: 620px; overflow-y: auto; } .baeta-segurogpt-shell { border-radius: 8px; overflow: hidden; position: relative; } .baeta-health-video { aspect-ratio: 16 / 9; background: var(--bb-verde-institucional-hover); border-radius: 8px; overflow: hidden; } .baeta-health-video iframe { border: 0; height: 100%; width: 100%; } .baeta-store-badge { align-items: center; display: inline-flex; max-width: 40%; text-decoration: none; } .baeta-store-badge img { display: block; height: auto; max-width: 100%; } .baeta-health-app-preview { align-items: center; background: linear-gradient(135deg, var(--bb-verde-institucional) 0%, var(--bb-verde-institucional-hover) 100%); display: flex; justify-content: center; min-height: 320px; padding: 1.5rem; } .baeta-health-app-preview img { height: auto; max-height: 260px; max-width: min(82%, 360px); object-fit: contain; } .baeta-health .baeta-solution-hero-media img { max-height: 72px; max-width: min(70%, 260px); } .baeta-health-hero-media { background: linear-gradient(135deg, var(--bb-verde-institucional) 0%, var(--bb-verde-institucional-hover) 100%); } .baeta-seguradoras-heading-wrap { container-type: inline-size; flex: 1 1 auto; min-width: 0; } .baeta-seguradoras-heading { font-size: clamp(1rem, 4.3cqw, 2rem); line-height: 1.3; } .baeta-solution-tile-media { aspect-ratio: 16 / 9; height: auto; width: 100%; } .baeta-dashboard-banner { aspect-ratio: 1770 / 340; background-color: #122418; width: 100%; } .baeta-dashboard-banner-img { display: block; height: 100%; object-fit: cover; width: 100%; } .baeta-consorcio-preview-wrap { background: var(--bb-cinza-100); border-radius: 12px; overflow: hidden; width: 100%; } .baeta-consorcio-preview { display: block; height: auto; width: 100%; } .baeta-content-video { background-color: var(--baeta-legacy-dark); position: relative; transition: opacity .2s ease; } .baeta-content-video:hover, .baeta-content-video:focus { opacity: .85; } .baeta-content-video-play { align-items: center; background: rgba(255, 255, 255, .92); border-radius: 50%; display: flex; height: 56px; justify-content: center; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; } #kt_app_header .btn.btn-icon-muted .svg-icon, #kt_app_header .btn.btn-icon-muted i { color: var(--bs-gray-700); } /* ========================================================================== Skeleton screens ========================================================================== */ @keyframes baeta-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .baeta-skeleton { animation: baeta-shimmer 1.4s ease infinite; background-image: linear-gradient(90deg, var(--bb-cinza-200) 25%, var(--bb-cinza-100) 37%, var(--bb-cinza-200) 63%); background-size: 400% 100%; border-radius: 6px; display: block; } .baeta-skeleton-circle { border-radius: 50%; flex-shrink: 0; } [data-bs-theme=dark] .baeta-skeleton { background-image: linear-gradient(90deg, #2b2b40 25%, #363657 37%, #2b2b40 63%); } /* Image loading shimmer: applied by skeleton.js, removed once the image loads */ img.baeta-img-loading { animation: baeta-shimmer 1.4s ease infinite; background-image: linear-gradient(90deg, var(--bb-cinza-200) 25%, var(--bb-cinza-100) 37%, var(--bb-cinza-200) 63%); background-size: 400% 100%; } [data-bs-theme=dark] img.baeta-img-loading { background-image: linear-gradient(90deg, #2b2b40 25%, #363657 37%, #2b2b40 63%); } /* Notifications dropdown skeleton rows (shown until the real list renders) */ .baeta-notification-skeleton .d-flex { align-items: center; } .baeta-notification-skeleton-avatar { height: 35px; width: 35px; } /* Dashboard summary stat skeleton */ .baeta-stat-skeleton { height: 1.65rem; width: 3.25rem; } [data-baeta-stat-value].baeta-is-loading { display: none; } /* Full-page navigation loader */ #baeta-page-loader { background-color: var(--bs-body-bg); bottom: 0; left: 0; opacity: 0; pointer-events: none; position: fixed; right: 0; top: 0; transition: opacity .15s ease; z-index: 1200; } #baeta-page-loader.baeta-is-active { opacity: 1; pointer-events: auto; } #baeta-page-loader .baeta-page-loader-header { background-color: var(--baeta-legacy-dark); height: var(--bs-app-header-height, 70px); } #baeta-page-loader .baeta-page-loader-sidebar { background-color: var(--baeta-legacy-dark); bottom: 0; left: 0; position: fixed; top: 0; width: 225px; } @media (max-width: 991.98px) { #baeta-page-loader .baeta-page-loader-sidebar { display: none; } } #baeta-page-loader .baeta-page-loader-content { margin-left: 0; padding: 2rem; } @media (min-width: 992px) { #baeta-page-loader .baeta-page-loader-content { margin-left: 225px; } } @media (max-width: 991.98px) { .baeta-auth-corporate-aside { min-height: 190px; } .baeta-solution-hero-media { min-height: 220px; } .baeta-health-app-preview { min-height: 240px; } .baeta-health-app-preview img { max-height: 210px; } } /* SweetAlert2 (popups "em breve" etc.): ícone informativo na paleta Baeta */ .swal2-icon.swal2-info { border-color: var(--bb-verde-institucional); color: var(--bb-verde-institucional); } /* Formulário de terceiro embedado (ex.: Corretor Protegido/Akad) */ .baeta-embed-frame { border: 0; display: block; height: min(1400px, calc(100vh - 220px)); min-height: 720px; width: 100%; } /* Território Arina AI: bloco preto, destaque e botão em salmão (única ação permitida no bloco). Salmão não sai daqui. */ .baeta-arina-surface { background-color: var(--bb-preto); isolation: isolate; overflow: hidden; position: relative; } /* Arte num pseudo-elemento para poder ficar 50% transparente sem afetar o texto e o botão. Arte 1200x800: estrelas só na faixa de baixo, centradas em ~81% da altura. Com 450% de altura, "89%" no eixo Y põe esse centro no meio do card (0,5C − 0,806·4,5C = p·(C − 4,5C) ⇒ p ≈ 89%), em qualquer altura. */ .baeta-arina-surface::before { background-image: url("../media/arina-bg.png"); background-position: right 89%; background-repeat: no-repeat; background-size: auto 450%; content: ""; inset: 0; opacity: .5; pointer-events: none; position: absolute; z-index: -1; } .baeta-arina-highlight { color: var(--bb-salmao-claro) !important; } .baeta-arina-underline { border-color: var(--bb-salmao-claro) !important; } .btn-baeta-arina { font-family: "Instrument Sans", -apple-system, sans-serif; color: var(--bb-preto) !important; background-color: var(--bb-salmao-claro) !important; border-width: 1px !important; border-style: solid !important; border-color: var(--bb-salmao-claro) !important; border-radius: var(--bb-radius-small); font-weight: 500; transition: background-color var(--bb-duration-color) var(--bb-ease-standard), border-color var(--bb-duration-color) var(--bb-ease-standard); } .btn-baeta-arina:hover, .btn-baeta-arina:focus { color: var(--bb-preto) !important; background-color: var(--bb-salmao-claro-hover) !important; border-color: var(--bb-salmao-claro-hover) !important; } .btn-baeta-arina:focus-visible { outline: 2px solid var(--bb-salmao-medio); outline-offset: 3px; } /* Capa padronizada dos cards de solução do dashboard: fundo claro-névoa com o nome da solução em verde institucional. O ícone vira marca d'água grande, cortada no canto direito e transparente, atrás do título. */ .baeta-solution-tile-brand { background-color: var(--bb-cinza-50); border: 1px solid var(--bb-cinza-100); color: var(--bb-verde-institucional); container-type: inline-size; isolation: isolate; overflow: hidden; padding: 0 1rem; position: relative; text-align: center; } .baeta-solution-tile-brand i { color: var(--bb-verde-institucional); font-size: clamp(3.5rem, 55cqw, 6.5rem) !important; line-height: 1; opacity: .07; pointer-events: none; position: absolute; right: -12%; top: 50%; transform: translateY(-50%) rotate(-12deg); z-index: -1; } /* Rótulo = nome completo da solução; títulos longos quebram em 2 linhas, sempre entre palavras. */ .baeta-solution-tile-brand span { color: var(--bb-verde-institucional); font-size: clamp(.75rem, 12cqw, 1.6rem) !important; line-height: 1.15; overflow-wrap: normal; text-align: center; text-wrap: balance; } /* Card estreito (grade de 4 em telas ~1200px): reduz a escala para a palavra mais longa ("Contabilidade") não quebrar no meio. */ @container (max-width: 130px) { .baeta-solution-tile-brand { padding: 0 .35rem; } .baeta-solution-tile-brand span { font-size: .75rem !important; } } /* Cards de solução no tema escuro: o cinza/50 claro virava um bloco branco sobre o fundo escuro. Usa o verde institucional-hover com texto/ícone menta e hover no institucional. */ html[data-bs-theme=dark] .baeta-solution-tile-brand { background-color: var(--bb-verde-institucional-hover); border-color: rgba(255, 255, 255, .08); } html[data-bs-theme=dark] .baeta-solution-tile-brand i, html[data-bs-theme=dark] .baeta-solution-tile-brand span { color: var(--bb-verde-claro); } html[data-bs-theme=dark] .baeta-solution-tile-brand i { opacity: .12; } html[data-bs-theme=dark] .baeta-solution-card:hover .baeta-solution-tile-brand, html[data-bs-theme=dark] .baeta-solution-card:focus-visible .baeta-solution-tile-brand { background-color: var(--bb-verde-institucional); border-color: rgba(179, 255, 210, .25); } /* ========================================================================== Onboarding de primeiro acesso (wizard, tour, checklist e NPS) Cores do design system; funciona em tema claro e escuro. ========================================================================== */ .baeta-onb-lock { overflow: hidden; } .baeta-onb-overlay { align-items: center; background: rgba(26, 42, 26, .55); display: flex; inset: 0; justify-content: center; padding: 1rem; position: fixed; z-index: 1090; } .baeta-onb-dialog { background: var(--bs-body-bg); border-radius: 12px; box-shadow: 0 1.5rem 3rem rgba(54, 59, 52, .25); max-height: 92vh; max-width: 560px; overflow-y: auto; width: 100%; } .baeta-onb-body { padding: 2rem 2rem 1rem; } .baeta-onb-eyebrow { color: var(--bb-verde-acao); display: block; font-size: .8rem; font-weight: 600; margin-bottom: .35rem; text-transform: uppercase; } .baeta-onb-title { color: var(--bs-gray-900); font-size: 1.4rem; font-weight: 700; margin-bottom: .5rem; } .baeta-onb-text { color: var(--bs-gray-600); font-size: .95rem; margin-bottom: 0; } .baeta-onb-fields:not(:empty) { margin-top: 1.5rem; } .baeta-onb-actions { display: flex; gap: .5rem; justify-content: flex-end; padding: 1rem 2rem 2rem; } /* Barra de progresso (wizard e checklist) */ .baeta-onb-progress { background: var(--bb-cinza-200); border-radius: 999px; height: 6px; overflow: hidden; width: 100%; } .baeta-onb-progress span { background: var(--bb-verde-institucional); display: block; height: 100%; transition: width .3s var(--bb-ease-standard); } .baeta-onb-dialog > .baeta-onb-progress { border-radius: 12px 12px 0 0; } /* Chips (ramos) e opcoes (objetivo) */ .baeta-onb-chips, .baeta-onb-options { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; } .baeta-onb-options { flex-direction: column; } .baeta-onb-chip, .baeta-onb-option { align-items: center; border: 1px solid var(--bs-border-color); border-radius: var(--bb-radius-small); cursor: pointer; display: flex; gap: .5rem; padding: .5rem .85rem; } .baeta-onb-chip:has(input:checked), .baeta-onb-option:has(input:checked) { background: var(--bb-verde-claro-nevoa); border-color: var(--bb-verde-institucional); } .baeta-onb-chip:focus-within, .baeta-onb-option:focus-within { outline: 2px solid var(--bb-verde-acao); outline-offset: 2px; } /* NPS: escala 0-10 */ .baeta-onb-scores { display: grid; gap: .35rem; grid-template-columns: repeat(11, 1fr); margin: 1.5rem 0 .5rem; } .baeta-onb-score { background: transparent; border: 1px solid var(--bs-border-color); border-radius: var(--bb-radius-small); color: var(--bs-gray-800); font-weight: 600; padding: .5rem 0; } .baeta-onb-score:hover { background: var(--bb-verde-claro-nevoa); } .baeta-onb-score.is-selected { background: var(--bb-verde-institucional); border-color: var(--bb-verde-institucional); color: var(--bb-verde-claro); } @media (max-width: 575.98px) { .baeta-onb-scores { grid-template-columns: repeat(6, 1fr); } } /* Tour: spotlight + balao */ .baeta-onb-tour { inset: 0; pointer-events: none; position: fixed; z-index: 1085; } .baeta-onb-spot { border-radius: 10px; box-shadow: 0 0 0 9999px rgba(26, 42, 26, .55); position: fixed; transition: all .25s var(--bb-ease-standard); } .baeta-onb-balloon { background: var(--bs-body-bg); border-radius: 12px; box-shadow: 0 1rem 2rem rgba(54, 59, 52, .25); max-width: 320px; padding: 1.25rem 1.25rem .5rem; pointer-events: auto; position: fixed; width: calc(100% - 2rem); } .baeta-onb-balloon-title { color: var(--bs-gray-900); font-size: 1.05rem; font-weight: 700; margin-bottom: .35rem; } .baeta-onb-balloon .baeta-onb-actions { padding: 1rem 0 .75rem; } /* Checklist no dashboard */ .baeta-onb-checklist .baeta-onb-progress { max-width: 180px; } .baeta-onb-goals { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); list-style: none; margin: 0; padding: 0; } .baeta-onb-goal { align-items: center; background: var(--bb-cinza-50); border: 1px solid var(--bb-cinza-100); border-radius: var(--bb-radius-small); display: flex; gap: .75rem; padding: .75rem .9rem; } .baeta-onb-goal i { color: var(--bb-verde-institucional); flex-shrink: 0; } .baeta-onb-goal.is-done { opacity: .65; } .baeta-onb-goal.is-done .baeta-onb-goal-title { text-decoration: line-through; } .baeta-onb-goal-link { color: inherit; text-decoration: none; } .baeta-onb-goal-title { color: var(--bs-gray-900); display: block; font-weight: 600; } .baeta-onb-goal-desc { color: var(--bs-gray-500); display: block; font-size: .8rem; } .baeta-onb-checklist-done .card-body { background: var(--bb-verde-claro-nevoa); border-radius: var(--bb-radius-small); } .baeta-onb-checklist-done i { color: var(--bb-verde-acao); } html[data-bs-theme=dark] .baeta-onb-goal { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); } html[data-bs-theme=dark] .baeta-onb-goal i, html[data-bs-theme=dark] .baeta-onb-checklist-done i { color: var(--bb-verde-claro); } html[data-bs-theme=dark] .baeta-onb-checklist-done .card-body, html[data-bs-theme=dark] .baeta-onb-chip:has(input:checked), html[data-bs-theme=dark] .baeta-onb-option:has(input:checked) { background: var(--bb-verde-institucional); } /* Card de retomada no painel de notificacoes */ .baeta-onb-resume { align-items: center; background: var(--bb-verde-claro-nevoa); border-radius: var(--bb-radius-small); display: flex; gap: .75rem; justify-content: space-between; padding: .75rem; } html[data-bs-theme=dark] .baeta-onb-resume { background: var(--bb-verde-institucional); } @media (prefers-reduced-motion: reduce) { .baeta-onb-spot, .baeta-onb-progress span { transition: none; } } /* Distribuicao de notas do NPS (painel admin) */ .baeta-onb-distribution { align-items: end; display: grid; gap: .35rem; grid-template-columns: repeat(11, 1fr); height: 120px; } .baeta-onb-distribution-item { display: flex; flex-direction: column; gap: .35rem; height: 100%; justify-content: flex-end; text-align: center; } .baeta-onb-distribution-bar { background: var(--bb-verde-institucional); border-radius: 4px 4px 0 0; display: block; width: 100%; } html[data-bs-theme=dark] .baeta-onb-distribution-bar { background: var(--bb-verde-claro); } /* Dropdown de seguradoras (wizard) */ .baeta-onb-select { position: relative; } /* Abre no fluxo (nao absoluto): o modal tem rolagem propria e cortaria um menu posicionado por cima. */ .baeta-onb-select-menu { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bb-radius-small); margin-top: .35rem; padding: .75rem; } .baeta-onb-partners { display: grid; gap: .25rem; max-height: 220px; overflow-y: auto; } .baeta-onb-partner { align-items: center; border-radius: var(--bb-radius-small); cursor: pointer; display: flex; gap: .5rem; padding: .35rem .5rem; } .baeta-onb-partner:hover { background: var(--bb-verde-claro-nevoa); } .baeta-onb-partner:focus-within { outline: 2px solid var(--bb-verde-acao); outline-offset: -2px; } html[data-bs-theme=dark] .baeta-onb-partner:hover { background: var(--bb-verde-institucional); } /* "Rever onboarding" no painel de notificacoes: hover na paleta Baeta (o menu-state-color do Metronic deixava azul). */ [data-baeta-onboarding-replay] { color: var(--bs-gray-800); } [data-baeta-onboarding-replay]:hover, [data-baeta-onboarding-replay]:focus-visible { background-color: var(--bb-verde-claro-nevoa) !important; border-radius: var(--bb-radius-small); color: var(--bb-verde-institucional) !important; } [data-baeta-onboarding-replay]:hover i, [data-baeta-onboarding-replay]:focus-visible i { color: var(--bb-verde-institucional) !important; } html[data-bs-theme=dark] [data-baeta-onboarding-replay]:hover, html[data-bs-theme=dark] [data-baeta-onboarding-replay]:focus-visible { background-color: var(--bb-verde-institucional) !important; color: var(--bb-verde-claro) !important; } html[data-bs-theme=dark] [data-baeta-onboarding-replay]:hover i, html[data-bs-theme=dark] [data-baeta-onboarding-replay]:focus-visible i { color: var(--bb-verde-claro) !important; } /* Opção "Todas as seguradoras", separada da lista */ .baeta-onb-partner-all { border-bottom: 1px solid var(--bs-border-color); border-radius: 0; font-weight: 600; margin-bottom: .35rem; padding-bottom: .6rem; } /* Ações do card "Primeiros passos" (minimizar/ocultar) */ .baeta-onb-card-actions { display: flex; gap: .25rem; } .baeta-onb-icon-btn { align-items: center; background: transparent; border: 0; border-radius: var(--bb-radius-small); color: var(--bs-gray-500); display: flex; height: 32px; justify-content: center; padding: 0; transition: background-color var(--bb-duration-color) var(--bb-ease-standard), color var(--bb-duration-color) var(--bb-ease-standard); width: 32px; } .baeta-onb-icon-btn:hover, .baeta-onb-icon-btn:focus-visible { background-color: var(--bb-verde-claro-nevoa); color: var(--bb-verde-institucional); } .baeta-onb-icon-btn:focus-visible { outline: 2px solid var(--bb-verde-acao); outline-offset: 2px; } .baeta-onb-checklist.is-collapsed .card-body { padding-bottom: 1.25rem; } .baeta-onb-checklist.is-collapsed .d-flex.mb-4 { margin-bottom: 0 !important; } html[data-bs-theme=dark] .baeta-onb-icon-btn:hover, html[data-bs-theme=dark] .baeta-onb-icon-btn:focus-visible { background-color: var(--bb-verde-institucional); color: var(--bb-verde-claro); }