@CHARSET "UTF-8"; /* ========================================================================= Auditto — Temas (Claro / Escuro) + padrão de fonte Carregado DEPOIS de audistrap.css no main.phtml e no contas.phtml (login). Estratégia: o recebe a classe do tema: (nenhuma) -> tema ATUAL (skin-blue), intacto .theme-auditto-light -> tema CLARO (header branco, fundo lilás, roxo) .theme-auditto-dark -> tema ESCURO (navy/roxo escuro, roxo vibrante) Regras usam alta especificidade + !important para vencer layout.css. ========================================================================= */ /* ---------- Fonte de destaque (Satoshi) ---------- */ @font-face { font-family: 'Satoshi'; src: url('/fonts/satoshi-variable.ttf') format('truetype'); font-weight: 300 900; font-style: normal; font-display: swap; } :root { --auditto-font-body: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --auditto-font-head: 'Satoshi', var(--auditto-font-body); /* Roxo da marca (comum aos 2 temas novos) */ --auditto-roxo: #5b2be0; --auditto-roxo-hover: #4a1fc8; --auditto-roxo-claro: #7c5cff; } /* Aplica o padrão de fonte APENAS nos temas novos (o atual fica intacto) */ .theme-auditto-light, .theme-auditto-dark { font-family: var(--auditto-font-body); } .theme-auditto-light h1, .theme-auditto-light h2, .theme-auditto-light h3, .theme-auditto-light h4, .theme-auditto-light h5, .theme-auditto-light h6, .theme-auditto-light .box-title, .theme-auditto-light .content-header > h1, .theme-auditto-light .small-box h3, .theme-auditto-light .logo, .theme-auditto-light .btn, .theme-auditto-light .navbar .nav > li > a, .theme-auditto-dark h1, .theme-auditto-dark h2, .theme-auditto-dark h3, .theme-auditto-dark h4, .theme-auditto-dark h5, .theme-auditto-dark h6, .theme-auditto-dark .box-title, .theme-auditto-dark .content-header > h1, .theme-auditto-dark .small-box h3, .theme-auditto-dark .logo, .theme-auditto-dark .btn, .theme-auditto-dark .navbar .nav > li > a { font-family: var(--auditto-font-head); } /* ========================================================================= RODAPÉ (elemento novo, presente em todos os temas) Fica dentro de .right-side, logo após .content — sem margin-left extra. ========================================================================= */ .main-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; padding: 12px 22px; border-top: 1px solid #e4e4e4; background: #ffffff; color: #8a8a8a; font-size: 12px; /* Rodapé fixo no rodapé da tela */ position: fixed; left: 220px; right: 0; bottom: 0; z-index: 900; } /* Sidebar recolhida -> rodapé ocupa toda a largura */ .right-side.strech .main-footer { left: 0; } /* Espaço p/ o conteúdo não ficar escondido atrás do rodapé fixo */ .right-side .content { padding-bottom: 62px; } .main-footer .footer-brand { font-family: var(--auditto-font-head); font-weight: 700; letter-spacing: .4px; color: #3c8dbc; /* tema atual usa o azul da marca */ text-transform: lowercase; } /* ========================================================================= TOGGLE DE TEMA (dropdown no header) ========================================================================= */ .theme-switcher > a.dropdown-toggle { cursor: pointer; } .theme-switcher > a.dropdown-toggle > i { font-size: 16px; } .theme-switcher .dropdown-menu { min-width: 180px; padding: 6px 0; } .theme-switcher .dropdown-menu > li > a { padding: 8px 16px; color: #444 !important; } .theme-switcher .dropdown-menu > li > a > i { width: 18px; text-align: center; margin-right: 8px; color: var(--auditto-roxo); } .theme-switcher .dropdown-menu > li > a:hover { background: #f1ecff !important; color: var(--auditto-roxo) !important; } /* ========================================================================= ============================ TEMA CLARO =============================== ========================================================================= */ /* Fundo geral / conteúdo */ .theme-auditto-light .right-side, .theme-auditto-light .content { background-color: #f5f2ff !important; } .theme-auditto-light .content-header > h1, .theme-auditto-light .content-header > h1 > small { color: #1a1230 !important; } /* Cabeçalho (header branco) */ .theme-auditto-light header, .theme-auditto-light header .navbar, .theme-auditto-light .navbar-right { background-color: #ffffff !important; box-shadow: 0 1px 0 #ece6ff, 0 2px 12px rgba(91, 43, 224, .06) !important; } .theme-auditto-light .skin-blue .navbar, .theme-auditto-light .skin-blue .navbar .nav > li > a, .theme-auditto-light .navbar .nav > li > a { color: #2a2340 !important; } .theme-auditto-light .skin-blue .navbar .nav > li > a:hover, .theme-auditto-light .skin-blue .navbar .nav > li > a:active, .theme-auditto-light .skin-blue .navbar .nav > li > a:focus, .theme-auditto-light .skin-blue .navbar .nav .open > a, .theme-auditto-light .navbar .nav > li > a:hover, .theme-auditto-light .navbar .nav .open > a { background: #f1ecff !important; color: var(--auditto-roxo) !important; } /* Logo: fundo branco + logo oficial p/ fundo claro (wordmark navy) */ .theme-auditto-light .skin-blue .logo, .theme-auditto-light .logo { background: #ffffff !important; } .theme-auditto-light .logo img { content: url('/brands/default/logofundoclaro.png'); } /* Ícone hambúrguer escuro sobre header claro */ .theme-auditto-light .header .hamburger-inner, .theme-auditto-light .header .hamburger-inner::before, .theme-auditto-light .header .hamburger-inner::after, .theme-auditto-light .navbar .sidebar-toggle .icon-bar { background-color: #2a2340 !important; } /* Menu lateral (sidebar) */ .theme-auditto-light .left-side, .theme-auditto-light .sidebar { background: #ffffff !important; } .theme-auditto-light .sidebar a { color: #3a3357 !important; } .theme-auditto-light .sidebar > .sidebar-menu > li > a:hover, .theme-auditto-light .sidebar > .sidebar-menu > li.active > a, .theme-auditto-light .sidebar > .sidebar-menu > li.active > a:hover { color: var(--auditto-roxo) !important; background: #f1ecff !important; box-shadow: inset 3px 0 0 var(--auditto-roxo) !important; } .theme-auditto-light .treeview-menu { background: #faf8ff !important; } .theme-auditto-light .treeview-menu > li > a { color: #6b6690 !important; } .theme-auditto-light .treeview-menu > li > a:hover, .theme-auditto-light .treeview-menu > li.active > a { color: var(--auditto-roxo) !important; } /* Botões */ .theme-auditto-light .btn.btn-primary { background-color: var(--auditto-roxo) !important; border-color: var(--auditto-roxo-hover) !important; color: #fff !important; } .theme-auditto-light .btn.btn-primary:hover, .theme-auditto-light .btn.btn-primary:active, .theme-auditto-light .btn.btn-primary.hover { background-color: var(--auditto-roxo-hover) !important; } .theme-auditto-light .btn.btn-default { background-color: #ffffff !important; color: var(--auditto-roxo) !important; border-color: #e0d8fb !important; } .theme-auditto-light .btn.btn-default:hover { background-color: #f1ecff !important; } /* Rodapé */ .theme-auditto-light .main-footer { background: #ffffff !important; border-top: 1px solid #ece6ff !important; color: #6b6690 !important; } .theme-auditto-light .main-footer .footer-brand { color: var(--auditto-roxo) !important; } /* ========================================================================= ============================ TEMA ESCURO ============================== ========================================================================= */ /* Fundo geral / conteúdo — transparentes p/ revelar a aurora animada (o dark base vem do html) */ .theme-auditto-dark .right-side, .theme-auditto-dark .content { background-color: transparent !important; } .theme-auditto-dark .content { color: #d9d5f0; } .theme-auditto-dark .content-header > h1, .theme-auditto-dark .content-header > h1 > small { color: #e9e7f7 !important; } /* Cabeçalho (navy/roxo escuro) */ .theme-auditto-dark header, .theme-auditto-dark header .navbar, .theme-auditto-dark .navbar-right { background-color: #0d0a1f !important; box-shadow: 0 2px 14px rgba(0, 0, 0, .5) !important; } .theme-auditto-dark .skin-blue .navbar, .theme-auditto-dark .skin-blue .navbar .nav > li > a, .theme-auditto-dark .navbar .nav > li > a { color: rgba(255, 255, 255, .85) !important; } .theme-auditto-dark .skin-blue .navbar .nav > li > a:hover, .theme-auditto-dark .skin-blue .navbar .nav > li > a:active, .theme-auditto-dark .skin-blue .navbar .nav > li > a:focus, .theme-auditto-dark .skin-blue .navbar .nav .open > a, .theme-auditto-dark .navbar .nav > li > a:hover, .theme-auditto-dark .navbar .nav .open > a { background: rgba(124, 92, 255, .20) !important; color: #ffffff !important; } /* Logo: fundo transparente + logo oficial p/ fundo escuro (wordmark branco) */ .theme-auditto-dark .skin-blue .logo, .theme-auditto-dark .logo { background: transparent !important; } .theme-auditto-dark .logo img { content: url('/brands/default/logofundoescuro.png'); } /* Ícone hambúrguer branco sobre header escuro */ .theme-auditto-dark .header .hamburger-inner, .theme-auditto-dark .header .hamburger-inner::before, .theme-auditto-dark .header .hamburger-inner::after, .theme-auditto-dark .navbar .sidebar-toggle .icon-bar { background-color: #ffffff !important; } /* Menu lateral (sidebar) */ .theme-auditto-dark .left-side, .theme-auditto-dark .sidebar { background: #15112e !important; } .theme-auditto-dark .sidebar a { color: #c9c4e8 !important; } .theme-auditto-dark .sidebar > .sidebar-menu > li > a:hover, .theme-auditto-dark .sidebar > .sidebar-menu > li.active > a, .theme-auditto-dark .sidebar > .sidebar-menu > li.active > a:hover { color: #ffffff !important; background: #221a45 !important; box-shadow: inset 3px 0 0 var(--auditto-roxo-claro) !important; } .theme-auditto-dark .treeview-menu { background: #0d0a20 !important; } .theme-auditto-dark .treeview-menu > li > a { color: #a6a1cc !important; } .theme-auditto-dark .treeview-menu > li > a:hover, .theme-auditto-dark .treeview-menu > li.active > a { color: #ffffff !important; } .theme-auditto-dark .sidebar .btn.dropdown-toggle { background-color: #221a45 !important; color: #e9e7f7 !important; border-color: #2a2350 !important; } /* Botões */ .theme-auditto-dark .btn.btn-primary { background-color: #6a3df0 !important; border-color: #5a2fe0 !important; color: #fff !important; } .theme-auditto-dark .btn.btn-primary:hover, .theme-auditto-dark .btn.btn-primary:active, .theme-auditto-dark .btn.btn-primary.hover { background-color: #5a2fe0 !important; } .theme-auditto-dark .btn.btn-default { background-color: #1a1540 !important; color: #c9c4e8 !important; border-color: #2a2350 !important; } .theme-auditto-dark .btn.btn-default:hover { background-color: #221a45 !important; } /* Rodapé */ .theme-auditto-dark .main-footer { background: #0d0a1f !important; border-top: 1px solid #2a2350 !important; color: #a6a1cc !important; } .theme-auditto-dark .main-footer .footer-brand { color: var(--auditto-roxo-claro) !important; } /* ------------------------------------------------------------------------- TEMA ESCURO — superfícies de conteúdo (boxes, tabelas, DataTables, forms) Escopo em .content para NÃO afetar modais (que ficam fora do .content). ------------------------------------------------------------------------- */ /* Boxes / painéis */ .theme-auditto-dark .box, .theme-auditto-dark .panel, .theme-auditto-dark .nav-tabs-custom { background: #1a1540 !important; border-color: #2a2350 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .45) !important; } .theme-auditto-dark .box-header, .theme-auditto-dark .panel-heading, .theme-auditto-dark .panel-default > .panel-heading { background: #15112e !important; color: #e9e7f7 !important; border-color: #2a2350 !important; } /* Botão ativo do "Registros por página" (btn-group radios) */ .theme-auditto-dark .content .btn.btn-default.active, .theme-auditto-dark .content .btn-group .btn.active { background-color: #6a3df0 !important; border-color: #5a2fe0 !important; color: #ffffff !important; } .theme-auditto-dark .box-header .box-title, .theme-auditto-dark .box-title { color: #e9e7f7 !important; } .theme-auditto-dark .box-footer, .theme-auditto-dark .panel-footer { background: #15112e !important; border-color: #2a2350 !important; color: #a6a1cc !important; } .theme-auditto-dark .content .text-muted, .theme-auditto-dark .content small.text-muted { color: #9a95c2 !important; } /* Tabelas + DataTables */ .theme-auditto-dark .content .table, .theme-auditto-dark .content table.dataTable { color: #d9d5f0 !important; border-color: #2a2350 !important; } .theme-auditto-dark .content .table > thead > tr > th, .theme-auditto-dark .content table.dataTable > thead > tr > th, .theme-auditto-dark .content table.dataTable > thead > tr > td { color: #ffffff !important; background: transparent !important; border-color: #3a3170 !important; } .theme-auditto-dark .content .table > tbody > tr > td, .theme-auditto-dark .content .table > tbody > tr > th, .theme-auditto-dark .content .table > tfoot > tr > td, .theme-auditto-dark .content table.dataTable > tbody > tr > td { border-color: #2a2350 !important; } /* Zebra: o layout.css pinta o fundo na CÉLULA (td/th) via nth-child(odd) */ .theme-auditto-dark .content .table-striped > tbody > tr:nth-child(odd) > td, .theme-auditto-dark .content .table-striped > tbody > tr:nth-child(odd) > th, .theme-auditto-dark .content table.dataTable.stripe tbody tr.odd > td, .theme-auditto-dark .content table.dataTable.display tbody tr.odd > td { background-color: #15112e !important; } .theme-auditto-dark .content .table-striped > tbody > tr:nth-child(even) > td, .theme-auditto-dark .content .table-striped > tbody > tr:nth-child(even) > th, .theme-auditto-dark .content table.dataTable.stripe tbody tr.even > td, .theme-auditto-dark .content table.dataTable.display tbody tr.even > td { background-color: transparent !important; } /* Hover também no nível da célula, senão o fundo da zebra cobre */ .theme-auditto-dark .content .table-hover > tbody > tr:hover > td, .theme-auditto-dark .content .table-hover > tbody > tr:hover > th, .theme-auditto-dark .content table.dataTable.hover tbody tr:hover > td, .theme-auditto-dark .content table.dataTable.display tbody tr:hover > td { background-color: #241c4c !important; } /* Controles do DataTables (length, filter, info, paginate) */ .theme-auditto-dark .content .dataTables_wrapper .dataTables_length, .theme-auditto-dark .content .dataTables_wrapper .dataTables_filter, .theme-auditto-dark .content .dataTables_wrapper .dataTables_info, .theme-auditto-dark .content .dataTables_wrapper .dataTables_processing, .theme-auditto-dark .content .dataTables_wrapper .dataTables_paginate, .theme-auditto-dark .content .dataTables_wrapper label { color: #c9c4e8 !important; } .theme-auditto-dark .content .dataTables_paginate .paginate_button { color: #c9c4e8 !important; background: transparent !important; border-color: #2a2350 !important; } .theme-auditto-dark .content .dataTables_paginate .paginate_button.current, .theme-auditto-dark .content .dataTables_paginate .paginate_button:hover { color: #ffffff !important; background: #6a3df0 !important; border-color: #5a2fe0 !important; } .theme-auditto-dark .content .dataTables_paginate .paginate_button.disabled { color: #5a5480 !important; } /* Cabeçalho flutuante (floatThead), FixedColumns e headers "sticky" — telas de Itens Recebidos / monitores. Eram brancos (#FFF/#f3f4f5/#d9edf7) no dark. */ .theme-auditto-dark table.floatThead-table, .theme-auditto-dark .floatThead-container, .theme-auditto-dark #panel-heading, .theme-auditto-dark .content .dataTables_scrollHead, .theme-auditto-dark .content .dataTables_scrollHeadInner, .theme-auditto-dark .content .dataTables_scrollHead table, .theme-auditto-dark .content .fixedHeader-floating { background-color: #15112e !important; color: #e9e7f7 !important; border-color: #2a2350 !important; } .theme-auditto-dark table.floatThead-table th, .theme-auditto-dark .content .dataTables_scrollHead th, .theme-auditto-dark .content .fixedHeader-floating th, .theme-auditto-dark #panel-heading th { background-color: #15112e !important; color: #ffffff !important; border-color: #2a2350 !important; } /* FixedColumns (colunas travadas) — clones brancos */ .theme-auditto-dark .DTFC_LeftHeadWrapper, .theme-auditto-dark .DTFC_LeftBodyWrapper, .theme-auditto-dark .DTFC_LeftBodyLiner, .theme-auditto-dark .DTFC_RightHeadWrapper, .theme-auditto-dark .DTFC_RightBodyWrapper, .theme-auditto-dark table.DTFC_Cloned, .theme-auditto-dark table.DTFC_Cloned tbody { background-color: #100d24 !important; } .theme-auditto-dark table.DTFC_Cloned th { background-color: #15112e !important; color: #ffffff !important; } /* Coluna sticky (1ª coluna fixa) precisa de fundo sólido p/ não vazar no scroll */ .theme-auditto-dark #tbResultado th:first-child, .theme-auditto-dark #tbResultado td:first-child { background-color: #15112e !important; } /* Colunas destacadas (escrituração) que eram azul-claro */ .theme-auditto-dark #tbResultado .columnsEscrituracao { background-color: #1e1848 !important; } /* Setas de scroll horizontal (plugin apScrollTop) — eram cinza #555 e sumiam no dark */ .theme-auditto-dark .apst-button { background-color: #6a3df0 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .5) !important; } .theme-auditto-dark .apst-button:hover { background-color: #5a2fe0 !important; } .theme-auditto-dark .apst-button::before { border-color: #ffffff !important; } /* Barra de rolagem horizontal da tabela (era branca no dark) */ .theme-auditto-dark .content .dataTables_scrollBody { background-color: transparent !important; } .theme-auditto-dark .content .dataTables_scrollBody::-webkit-scrollbar, .theme-auditto-dark .content .table-responsive::-webkit-scrollbar { height: 12px; width: 12px; background: #15112e; } .theme-auditto-dark .content .dataTables_scrollBody::-webkit-scrollbar-track, .theme-auditto-dark .content .table-responsive::-webkit-scrollbar-track { background: #15112e; } .theme-auditto-dark .content .dataTables_scrollBody::-webkit-scrollbar-thumb, .theme-auditto-dark .content .table-responsive::-webkit-scrollbar-thumb { background: #3a3170; border-radius: 6px; } .theme-auditto-dark .content .dataTables_scrollBody::-webkit-scrollbar-thumb:hover, .theme-auditto-dark .content .table-responsive::-webkit-scrollbar-thumb:hover { background: #4a4090; } /* Campos de formulário dentro do conteúdo (não mexe em modais) */ body.theme-auditto-dark input.form-control, body.theme-auditto-dark textarea.form-control, body.theme-auditto-dark select.form-control, body.theme-auditto-dark input.form-control[readonly], body.theme-auditto-dark input[type="text"].form-control, body.theme-auditto-dark input[type="text"].form-control[readonly], body.theme-auditto-dark .form-control.empresa-pesquisar, body.theme-auditto-dark .form-control { background-color: #15112e !important; background-image: none !important; border-color: #2a2350 !important; color: #ffffff !important; box-shadow: none !important; -webkit-text-fill-color: #ffffff !important; } body.theme-auditto-dark input.form-control::placeholder, body.theme-auditto-dark .form-control::placeholder { color: #8b86b3 !important; } /* Autofill do Chrome (fundo claro forçado em campos preenchidos) -> escurece */ body.theme-auditto-dark input:-webkit-autofill, body.theme-auditto-dark input:-webkit-autofill:hover, body.theme-auditto-dark input:-webkit-autofill:focus, body.theme-auditto-dark input:-webkit-autofill:active, body.theme-auditto-dark textarea:-webkit-autofill, body.theme-auditto-dark select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #15112e inset !important; box-shadow: 0 0 0 1000px #15112e inset !important; -webkit-text-fill-color: #ffffff !important; caret-color: #ffffff !important; } .theme-auditto-dark .input-group-addon { background: #221a45 !important; border-color: #2a2350 !important; color: #c9c4e8 !important; } .theme-auditto-dark .content .well { background: #15112e !important; border-color: #2a2350 !important; color: #d9d5f0 !important; } /* Base escura no html + AURORA animada (clean) atrás de todo o conteúdo. Classe no (sem :has()) p/ não disparar recálculo de estilo em telas dinâmicas. */ html.theme-auditto-dark { background-color: #0c0a20 !important; } .theme-auditto-dark, .theme-auditto-dark .wrapper { background-color: transparent !important; } body.theme-auditto-dark::before { content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none; background: radial-gradient(38% 44% at 24% 38%, rgba(124, 92, 255, .16), transparent 60%), radial-gradient(42% 48% at 78% 72%, rgba(106, 61, 240, .14), transparent 60%), radial-gradient(34% 40% at 55% 112%, rgba(168, 85, 247, .12), transparent 60%); animation: audittoAurora 22s ease-in-out infinite alternate; will-change: transform; } @keyframes audittoAurora { 0% { transform: translate3d(-3%, 0, 0) scale(1); } 50% { transform: translate3d(3%, -2%, 0) scale(1.06); } 100% { transform: translate3d(5%, 2%, 0) scale(1.03); } } @media (prefers-reduced-motion: reduce) { body.theme-auditto-dark::before { animation: none; } } /* Barra de título fixa (div.sub-header com o breadcrumb "Contas") */ .theme-auditto-dark div.sub-header { background-color: #0d0a1f !important; border-color: #2a2350 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .4) !important; } .theme-auditto-dark div.sub-header ol.breadcrumb, .theme-auditto-dark div.sub-header .breadcrumb > li, .theme-auditto-dark div.sub-header .breadcrumb > li > a, .theme-auditto-dark div.sub-header .breadcrumb > .active, .theme-auditto-dark div.sub-header a { background: transparent !important; color: #b9b2e6 !important; } /* Breadcrumb / content-header (a "faixa branca" do título) */ .theme-auditto-dark .right-side > .content-header, .theme-auditto-dark .content-header { background: #100d24 !important; box-shadow: none !important; } .theme-auditto-dark .content-header > h1, .theme-auditto-dark .content-header .breadcrumb > li, .theme-auditto-dark .content-header .breadcrumb > li > a, .theme-auditto-dark .content-header .breadcrumb > .active { color: #b9b2e6 !important; } /* Bordas do menu lateral (os "riscos brancos" entre os itens) */ .theme-auditto-dark .sidebar { border-bottom-color: #15112e !important; } .theme-auditto-dark .sidebar > .sidebar-menu > li { border-top-color: #221a45 !important; border-bottom-color: #1a1436 !important; } .theme-auditto-dark .sidebar > .sidebar-menu > li:first-of-type { border-top-color: #221a45 !important; } /* Paginação (ul.pagination do Bootstrap/DataTables) */ .theme-auditto-dark .content .pagination > li > a, .theme-auditto-dark .content .pagination > li > span { background-color: #1a1540 !important; border-color: #2a2350 !important; color: #c9c4e8 !important; } .theme-auditto-dark .content .pagination > li > a:hover, .theme-auditto-dark .content .pagination > li > span:hover { background-color: #221a45 !important; color: #ffffff !important; } .theme-auditto-dark .content .pagination > .active > a, .theme-auditto-dark .content .pagination > .active > span, .theme-auditto-dark .content .pagination > .active > a:hover, .theme-auditto-dark .content .pagination > .active > span:hover { background-color: #6a3df0 !important; border-color: #5a2fe0 !important; color: #ffffff !important; } .theme-auditto-dark .content .pagination > .disabled > a, .theme-auditto-dark .content .pagination > .disabled > span { background-color: #15112e !important; border-color: #2a2350 !important; color: #5a5480 !important; } /* ------------------------------------------------------------------------- TEMA ESCURO — Card "Funcionalidades Favoritas" (style inline do partial) ------------------------------------------------------------------------- */ .theme-auditto-dark .cardBox { background-color: #221a45 !important; } .theme-auditto-dark .card { background: #1a1540 !important; } .theme-auditto-dark .card .h4 { color: #e9e7f7 !important; background: #15112e !important; border-color: #2a2350 !important; } .theme-auditto-dark .card .favoritos li { background: #15112e !important; border-color: #2a2350 !important; color: #c9c4e8 !important; } .theme-auditto-dark .card .favoritos li a { color: #c9c4e8 !important; } .theme-auditto-dark .card .favoritos li:hover { background: #221a45 !important; color: #ffffff !important; } .theme-auditto-dark .card .favoritos li:hover a { color: #ffffff !important; } /* Card "Empresa Padrão" (#imput, style inline do partial) */ .theme-auditto-dark #imput { background: #1a1540 !important; border-color: #2a2350 !important; } .theme-auditto-dark #imput span { color: #e9e7f7 !important; } /* Cabeçalhos de box "coloridos" (panel contextual / box-solid) -> escuros */ .theme-auditto-dark .panel-primary > .panel-heading, .theme-auditto-dark .panel-info > .panel-heading, .theme-auditto-dark .panel-success > .panel-heading, .theme-auditto-dark .panel-warning > .panel-heading, .theme-auditto-dark .panel-danger > .panel-heading, .theme-auditto-dark .box.box-solid.box-primary > .box-header, .theme-auditto-dark .box.box-solid.box-info > .box-header, .theme-auditto-dark .box.box-solid.box-success > .box-header, .theme-auditto-dark .box.box-solid.box-warning > .box-header, .theme-auditto-dark .box.box-solid.box-danger > .box-header { background-color: #15112e !important; border-color: #2a2350 !important; color: #e9e7f7 !important; } /* ------------------------------------------------------------------------- TEMA ESCURO — Dropdowns (seletor de módulos, menus do topo) ------------------------------------------------------------------------- */ .theme-auditto-dark .dropdown-menu, .theme-auditto-dark .Alt-menu-dropdown { background-color: #15112e !important; border-color: #2a2350 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .55) !important; } .theme-auditto-dark .dropdown-menu > li > a, .theme-auditto-dark .dropdown-menu li > a, .theme-auditto-dark .Alt-menu-dropdown a { color: #c9c4e8 !important; } .theme-auditto-dark .dropdown-menu > li > a:hover, .theme-auditto-dark .dropdown-menu > li > a:focus, .theme-auditto-dark .dropdown-menu > .active > a, .theme-auditto-dark .dropdown-menu > li > a.active, .theme-auditto-dark .Alt-menu-dropdown a:hover { background-color: #221a45 !important; color: #ffffff !important; } .theme-auditto-dark .dropdown-menu .divider { background-color: #2a2350 !important; } .theme-auditto-dark .dropdown-header { color: #8b86b3 !important; } /* Dropdown de empresa do topo (Alt-menu-dropdown -> ul.menu com nomes em h3) */ .theme-auditto-dark .Alt-menu-dropdown .menu, .theme-auditto-dark .Alt-menu-dropdown .menu > li, .theme-auditto-dark .Alt-menu-dropdown > li.header, .theme-auditto-dark .Alt-menu-dropdown > li.footer { background-color: #15112e !important; border-color: #2a2350 !important; } .theme-auditto-dark .Alt-menu-dropdown .menu > li > a { color: #c9c4e8 !important; } .theme-auditto-dark .Alt-menu-dropdown h3, .theme-auditto-dark .Alt-menu-dropdown .company-name, .theme-auditto-dark .Alt-menu-dropdown .menu > li > a h3 { color: #e9e7f7 !important; } .theme-auditto-dark .Alt-menu-dropdown .menu > li > a:hover, .theme-auditto-dark .Alt-menu-dropdown .menu > li.active > a, .theme-auditto-dark .Alt-menu-dropdown .menu > li > a:hover h3 { background-color: #221a45 !important; color: #ffffff !important; } /* ------------------------------------------------------------------------- TEMA ESCURO — Modais ------------------------------------------------------------------------- */ .theme-auditto-dark .modal-content, .theme-auditto-dark .modal-header, .theme-auditto-dark .modal-body, .theme-auditto-dark .modal-footer { background-color: #161232 !important; color: #d9d5f0 !important; } .theme-auditto-dark .modal-content { border: 1px solid #2a2350 !important; box-shadow: 0 20px 60px rgba(0, 0, 0, .6) !important; } .theme-auditto-dark .modal-header { border-bottom-color: #2a2350 !important; } .theme-auditto-dark .modal-footer { border-top-color: #2a2350 !important; background-color: #12102a !important; } .theme-auditto-dark .modal-title, .theme-auditto-dark .modal-body h1, .theme-auditto-dark .modal-body h2, .theme-auditto-dark .modal-body h3, .theme-auditto-dark .modal-body h4, .theme-auditto-dark .modal-body label { color: #ffffff !important; } .theme-auditto-dark .modal-header .close { color: #c9c4e8 !important; opacity: .85 !important; text-shadow: none !important; } .theme-auditto-dark .modal-body a { color: #d5d0f2 !important; } .theme-auditto-dark .modal-body a:hover { color: #ffffff !important; } .theme-auditto-dark .modal-body .jstree-default .jstree-hovered, .theme-auditto-dark .modal-body .jstree-default .jstree-clicked { background: #221a45 !important; color: #fff !important; box-shadow: none !important; } /* Árvore de empresas (bootstrap-treeview -> .list-group-item) dentro do modal */ .theme-auditto-dark #arvore-lista, .theme-auditto-dark .treeview, .theme-auditto-dark .treeview .list-group, .theme-auditto-dark .modal-body .list-group, .theme-auditto-dark .treeview .list-group-item, .theme-auditto-dark .modal-body .list-group-item { background-color: #161232 !important; color: #d9d5f0 !important; border-color: #2a2350 !important; } .theme-auditto-dark .treeview .list-group-item:hover, .theme-auditto-dark .modal-body .list-group-item:hover, .theme-auditto-dark .treeview .list-group-item.node-selected { background-color: #221a45 !important; color: #ffffff !important; } .theme-auditto-dark .treeview .list-group-item .icon, .theme-auditto-dark .treeview .list-group-item .glyphicon, .theme-auditto-dark .treeview .list-group-item .fa { color: #b9b2e6 !important; } /* ========================================================================= ============================ LOGIN ==================================== (contas.phtml — o recebe a classe do tema) ========================================================================= */ /* --- Login CLARO --- */ body.theme-auditto-light { background: linear-gradient(135deg, #efeaff 0%, #e7dfff 100%) !important; } body.theme-auditto-light .login-panel { background: #ffffff !important; border: 1px solid #ece6ff !important; border-radius: 16px !important; box-shadow: 0 20px 50px rgba(91, 43, 224, .15) !important; } body.theme-auditto-light img[src*="/img/login.png"] { content: url('/brands/default/logofundoclaro.png'); } body.theme-auditto-light input.custom { color: #3a2b6b !important; border-bottom: 2px solid var(--auditto-roxo) !important; } body.theme-auditto-light input.custom::placeholder { color: var(--auditto-roxo) !important; } body.theme-auditto-light input[type="submit"] { background-color: var(--auditto-roxo) !important; border-color: var(--auditto-roxo-hover) !important; } body.theme-auditto-light #btEsqueciASenha { color: var(--auditto-roxo) !important; } /* --- Login ESCURO --- */ body.theme-auditto-dark { background: radial-gradient(1200px 620px at 72% -12%, #3a1f9e 0%, #191134 48%, #100d24 100%) !important; } body.theme-auditto-dark .login-panel { background: #1a1540 !important; border: 1px solid #2a2350 !important; border-radius: 16px !important; box-shadow: 0 20px 50px rgba(0, 0, 0, .5) !important; } body.theme-auditto-dark img[src*="/img/login.png"] { content: url('/brands/default/logofundoescuro.png'); } /* Portal "Sistemas Disponíveis" (contas index) — textos legíveis no dark */ body.theme-auditto-dark .fonteAlt, body.theme-auditto-dark .fonteAlt *, body.theme-auditto-dark .campoLogado, body.theme-auditto-dark .campoLogado strong, body.theme-auditto-dark .campoSistemas, body.theme-auditto-dark .campoSistemas h4, body.theme-auditto-dark .altSair a { color: #d9d5f0 !important; } body.theme-auditto-dark .glyphicon-user { color: #6b6690 !important; } body.theme-auditto-dark input.custom { color: #ffffff !important; background: transparent !important; border-bottom: 2px solid var(--auditto-roxo-claro) !important; } body.theme-auditto-dark input.custom::placeholder { color: #b9b2e6 !important; } body.theme-auditto-dark input[type="submit"] { background-color: #6a3df0 !important; border-color: #5a2fe0 !important; } body.theme-auditto-dark #btEsqueciASenha, body.theme-auditto-dark .panel-body span, body.theme-auditto-dark .panel-body p { color: #b9b2e6 !important; } /* ========================================================================= Toggle flutuante do login (canto superior direito) ========================================================================= */ .login-theme-switcher { position: fixed; top: 16px; right: 16px; z-index: 1050; display: flex; gap: 6px; background: rgba(255, 255, 255, .85); border: 1px solid rgba(0, 0, 0, .06); border-radius: 999px; padding: 5px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); } body.theme-auditto-dark .login-theme-switcher { background: rgba(26, 21, 64, .85); border-color: rgba(255, 255, 255, .10); } .login-theme-switcher button { border: 0; background: transparent; width: 32px; height: 32px; border-radius: 999px; cursor: pointer; color: #6b6690; font-size: 14px; line-height: 32px; } .login-theme-switcher button:hover { background: rgba(91, 43, 224, .12); color: var(--auditto-roxo); } body.theme-auditto-dark .login-theme-switcher button { color: #c9c4e8; } body.theme-auditto-dark .login-theme-switcher button:hover { background: rgba(124, 92, 255, .22); color: #fff; }