/* ============================================================================ Temas visuais do app: Normal (default) e Dark. Contrato: - Normal e o default e NAO tem classe no . O bloco :root abaixo so DECLARA tokens novos (nenhum consumidor legado), portanto sem tema ativo o render permanece identico ao atual. - Dark entra por classe no elemento raiz: html.m2a-tema--dark, aplicada antes do primeiro paint pelo script inline do (templates/v2/base.html). - Tokens de TEMA (neutros: fundo, texto, borda) sao eixo proprio e coexistem com os tokens de MODULO (marca: --m2a-brand, --m2a-active-color), que seguem morando nos skins e em style.m2a.css. - Todo override de tema vive dentro de @media screen. Assim a impressao cai automaticamente no :root Normal, sem duplicar reset (ver secao 7). - Carregado por ultimo em templates/v2/includes/static_css.html. Acessibilidade: pares texto/fundo verificados >= 4.5:1 e UI >= 3:1 (WCAG 2.2 AA). Cores de marca do dark foram clareadas no proprio hue do modulo ate >= 4.5:1 sobre --m2a-bg-surface do dark (#1e222b). ============================================================================ */ /* ============================================================================ 1. Tokens semanticos - tema Normal (default, sem classe no ) ATENCAO: nao declarar --m2a-brand* nem --m2a-active-* aqui. Esses tokens pertencem aos skins/style.m2a.css e redeclara-los sobrescreveria a marca. ============================================================================ */ :root { --m2a-bg-aside: #ffffff; --m2a-bg-base: #ffffff; --m2a-bg-header: #ffffff; --m2a-bg-surface: #ffffff; --m2a-bg-dropdown: #ffffff; --m2a-bg-hover: #f4f5f8; --m2a-bg-elevated: var(--m2a-bg-dropdown); --m2a-text-primary: #212529; --m2a-text-muted: #6c7085; --m2a-text-secondary: #595d6e; --m2a-border: #ebedf2; --m2a-input-bg: #ffffff; --m2a-input-border: #99a0af; --m2a-text-on-brand: #ffffff; --m2a-text-on-header: #ffffff; --m2a-text-on-header-muted: #ffffff; /* Auxiliares de tema (usados pelos overrides da secao 5). */ --m2a-stripe-bg: rgba(0, 0, 0, 0.02); --m2a-scrollbar-track: #f4f5f8; --m2a-scrollbar-thumb: #c9ccd6; } @media screen { /* ============================================================================ 2. Tema Dark - escuro completo. Introduz separacao tonal: base (#14161c) < elevated (#191c24) < surface (#1e222b), para o conteudo destacar do chrome. ============================================================================ */ html.m2a-tema--dark { color-scheme: dark; --m2a-bg-aside: #0d0f13; --m2a-bg-base: #14161c; --m2a-bg-header: #1b1f28; --m2a-bg-surface: #212630; --m2a-bg-dropdown: #2a303c; --m2a-bg-hover: #2f3542; --m2a-bg-elevated: var(--m2a-bg-dropdown); --m2a-text-primary: #e4e6ea; --m2a-text-muted: #9a9fad; --m2a-text-secondary: #9ea0a8; --m2a-border: #39404f; --m2a-input-bg: #171a21; --m2a-input-border: #6a7183; --m2a-text-on-brand: #14161c; --m2a-text-on-header: #e4e6ea; --m2a-text-on-header-muted: rgba(255, 255, 255, .65); --m2a-stripe-bg: rgba(255, 255, 255, 0.03); --m2a-scrollbar-track: #191c24; --m2a-scrollbar-thumb: #39404f; /* Override das variaveis --scr-* (templates standalone/screens) para tema dark */ --scr-bg-surface: var(--m2a-bg-surface); --scr-bg-muted: var(--m2a-bg-base); --scr-bg-hover: var(--m2a-bg-hover); --scr-border-color: var(--m2a-border); --scr-border-light: var(--m2a-border); --scr-text-primary: var(--m2a-text-primary); --scr-text-secondary: var(--m2a-text-muted); --scr-text-muted: var(--m2a-text-muted); --scr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --scr-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45); --scr-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.55); --scr-brand: var(--m2a-active-color); --scr-brand-light: var(--m2a-active-bg); --scr-brand-ring: var(--m2a-active-bg); } /* ============================================================================ 4. Marca por modulo no tema Dark. As cores de marca do claro sao escuras demais para fundo escuro (#0b6960 rende 3.1:1 sobre #1e222b). Cada modulo recebe a mesma cor clareada no PROPRIO hue, mantendo a identidade e cruzando 4.5:1. Especificidade: `html.m2a-tema--dark body` = (0,1,2) e ja vence o `:root` (0,1,0) dos skins; a variante por modulo `... body.m2a-modulo--x` = (0,2,2) vence a regra generica acima. ============================================================================ */ /* Catch-all: modulos servidos pelo skin default (#005578 -> #3caedd) e :root de style.m2a.css (--m2a-active-color #2468b0 -> #5a9ce2). */ html.m2a-tema--dark body { --m2a-brand: #3caedd; /* 6.1:1 sobre #1e222b */ --m2a-brand-light: rgba(60, 174, 221, 0.12); --m2a-brand-ring: rgba(60, 174, 221, 0.40); --m2a-active-color: #5a9ce2; /* 5.4:1 */ --m2a-active-bg: rgba(90, 156, 226, 0.12); --m2a-aside-brand-bg: var(--m2a-bg-aside); } /* Destaque dos dois grupos de menu do aside no dark (espelha o card elevado do tema normal) */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-aside-pin-item { background: var(--m2a-bg-surface) !important; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.55) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-aside-menu.kt-aside-menu { background: var(--m2a-bg-surface) !important; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.55) !important; } /* Dashboard e collapse: aplicar tema dark nos elementos com fundo branco fixo */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-dash__rail { background: var(--m2a-bg-surface) !important; border-color: var(--m2a-border) !important; } /* Section do dashboard: glass dark (preto translucido proximo ao bg-base, mantem o blur) */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-dash__card { background: rgba(20, 22, 28, 0.72) !important; } /* Card container do dashboard do fornecedor: glass dark (espelha .m2a-dash__card) */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-dashboard-region-card { background: rgba(20, 22, 28, 0.72) !important; } /* Dashboard: escurecer a imagem de fundo no dark com overlay fixo (mantem a mesma url via --m2a-dash-bg) */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-dash { background-image: linear-gradient(rgba(20, 22, 28, 0.4), rgba(20, 22, 28, 0.4)), var(--m2a-dash-bg) !important; } /* Cards KPI do dashboard: fundo dark (featured inclusa para vencer o bundle minificado) */ html.m2a-tema--dark body:not(.m2a-auth-body) .kt-portlet.m2a-kpi-card--featured.m2a-kpi-card--blue, html.m2a-tema--dark body:not(.m2a-auth-body) .kt-portlet.m2a-kpi-card--featured.m2a-kpi-card--red, html.m2a-tema--dark body:not(.m2a-auth-body) .kt-portlet.m2a-kpi-card--featured.m2a-kpi-card--orange, html.m2a-tema--dark body:not(.m2a-auth-body) .kt-portlet.m2a-kpi-card--featured.m2a-kpi-card--green, html.m2a-tema--dark body:not(.m2a-auth-body) .kt-portlet.m2a-kpi-card--featured.m2a-kpi-card--purple, html.m2a-tema--dark body:not(.m2a-auth-body) .kt-portlet.m2a-kpi-card--featured.m2a-kpi-card--teal, html.m2a-tema--dark body:not(.m2a-auth-body) .kt-portlet.m2a-kpi-card--featured.m2a-kpi-card--indigo, html.m2a-tema--dark body:not(.m2a-auth-body) .kt-portlet.m2a-kpi-card--featured.m2a-kpi-card--slate { background: var(--m2a-bg-surface) !important; } /* KPI cards: borda padronizada no dark */ html.m2a-tema--dark body:not(.m2a-auth-body) .kt-portlet.m2a-kpi-card { border-color: var(--m2a-border) !important; } /* Card KPI amber: fundo dark (vence o #fefce8 do entidade-specific por especificidade) */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-dash__col-left-content > .m2a-kpi-card--featured.kt-portlet.m2a-kpi-card--amber { background: var(--m2a-bg-surface) !important; border-color: var(--m2a-border) !important; } /* Card KPI orange featured (fornecedor): vence regra por ID do fornecedor-specific */ html.m2a-tema--dark body:not(.m2a-auth-body) #dashboard-col-left-content > .m2a-kpi-card--orange.m2a-kpi-card--featured { background: var(--m2a-bg-surface) !important; border-color: var(--m2a-border) !important; } /* Card KPI green featured (cotacoes): vence regra por ID do template */ html.m2a-tema--dark body:not(.m2a-auth-body) #dashboard-col-left-content > .m2a-kpi-card--green.m2a-kpi-card--featured { background: var(--m2a-bg-surface) !important; border-color: var(--m2a-border) !important; } /* Card KPI purple featured (planejamentos): vence regra por ID do template */ html.m2a-tema--dark body:not(.m2a-auth-body) #dashboard-col-left-content > .m2a-kpi-card--purple.m2a-kpi-card--featured { background: var(--m2a-bg-surface) !important; border-color: var(--m2a-border) !important; } /* Card KPI gauge (fornecedor): vence regra por ID do fornecedor-specific */ html.m2a-tema--dark body:not(.m2a-auth-body) #dashboard-col-left-content > .m2a-kpi-card--red.m2a-kpi-card--gauge { background: var(--m2a-bg-surface) !important; border-color: var(--m2a-border) !important; } /* Timeline: tab-content dark (vence o #fbfcfe do core por especificidade) */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-dashboard-calendario .m2a-timeline-widget .tab-content { background: var(--m2a-bg-surface) !important; border-color: var(--m2a-border) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-aside-collapse-item { background: var(--m2a-bg-surface) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-aside-collapse-btn { color: var(--m2a-text-muted); } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-aside-collapse-btn:hover { background: var(--m2a-bg-hover); color: var(--m2a-text-primary); } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-dash__rail-btn { color: var(--m2a-text-muted); } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-dash__rail-btn:hover { background: var(--m2a-bg-hover); color: var(--m2a-text-primary); } /* Header, footer e logo: aplicar fundo surface no dark (consistencia com o aside) */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-header.kt-header { background-color: var(--m2a-bg-surface) !important; border-bottom-color: var(--m2a-border) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-header-logo { background-color: var(--m2a-bg-surface) !important; border-bottom-color: var(--m2a-border) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .kt-footer.m2a-footer { background-color: var(--m2a-bg-surface) !important; } /* PDR: #0b6960 -> #35b3a7 (6.0:1). */ html.m2a-tema--dark body.m2a-modulo--pdr { --m2a-brand: #35b3a7; --m2a-brand-light: rgba(53, 179, 167, 0.12); --m2a-brand-ring: rgba(53, 179, 167, 0.40); --m2a-active-color: #35b3a7; --m2a-active-bg: rgba(53, 179, 167, 0.12); } /* GPA: #4077a9 -> #529ce0 (5.3:1). */ html.m2a-tema--dark body.m2a-modulo--gpa { --m2a-brand: #529ce0; --m2a-brand-light: rgba(82, 156, 224, 0.12); --m2a-brand-ring: rgba(82, 156, 224, 0.40); --m2a-active-color: #5a9ce2; --m2a-active-bg: rgba(90, 156, 226, 0.12); } /* PDF: #2b576e -> #52afe0 (6.3:1). */ html.m2a-tema--dark body.m2a-modulo--pdf { --m2a-brand: #52afe0; --m2a-brand-light: rgba(82, 175, 224, 0.12); --m2a-brand-ring: rgba(82, 175, 224, 0.40); --m2a-active-color: #52afe0; --m2a-active-bg: rgba(82, 175, 224, 0.12); } /* PJO: #1545A8 -> #6790e4 (4.9:1). */ html.m2a-tema--dark body.m2a-modulo--pjo { --m2a-brand: #6790e4; --m2a-brand-light: rgba(103, 144, 228, 0.12); --m2a-brand-ring: rgba(103, 144, 228, 0.40); --m2a-active-color: #6790e4; --m2a-active-bg: rgba(103, 144, 228, 0.12); } /* Modulos sem skin proprio: so a cor ativa muda (a marca vem do catch-all). */ html.m2a-tema--dark body.m2a-modulo--gdc { --m2a-active-color: #52b2e0; --m2a-active-bg: rgba(82, 178, 224, 0.12); } /* #3a7a99, 6.5:1 */ html.m2a-tema--dark body.m2a-modulo--gac { --m2a-active-color: #2fbc97; --m2a-active-bg: rgba(47, 188, 151, 0.12); } /* #1b7860, 6.5:1 */ html.m2a-tema--dark body.m2a-modulo--ata { --m2a-active-color: #8986ea; --m2a-active-bg: rgba(137, 134, 234, 0.12); } /* #312e81, 5.0:1 */ html.m2a-tema--dark body.m2a-modulo--gde { --m2a-active-color: #5f98e3; --m2a-active-bg: rgba(95, 152, 227, 0.12); } /* #1e4d8a, 5.2:1 */ html.m2a-tema--dark body.m2a-modulo--tram { --m2a-active-color: #37be67; --m2a-active-bg: rgba(55, 190, 103, 0.12); } /* #1a7a3c, 6.4:1 */ html.m2a-tema--dark body.m2a-modulo--pel { --m2a-active-color: #52ace0; --m2a-active-bg: rgba(82, 172, 224, 0.12); } /* #0567a0, 6.2:1 */ /* ============================================================================ 5. Overrides Metronic - minimo viavel. Os overrides valem para Dark, por isso o prefixo comum `html[class*="m2a-tema--"]`: ele casa com a classe de tema e nunca com o Normal (que nao tem classe). Como tudo aqui referencia token, cada tema se resolve sozinho - nao ha regra duplicada por tema. ============================================================================ */ /* 5.1 body ---------------------------------------------------------------- */ html[class*="m2a-tema--"] body:not(.m2a-auth-body) { background-color: var(--m2a-bg-base); color: var(--m2a-text-primary); } /* 5.2 portlet / card ------------------------------------------------------ */ html[class*="m2a-tema--"] body:not(.m2a-auth-body) .kt-portlet, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .card, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-content-portlet { background-color: var(--m2a-bg-surface) !important; border-color: var(--m2a-border); color: var(--m2a-text-primary) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .kt-portlet__head, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .kt-portlet__foot, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .card-header, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .card-footer { background-color: var(--m2a-bg-surface) !important; border-color: var(--m2a-border); color: var(--m2a-text-primary) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .kt-portlet__head-title, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .kt-portlet__head-label { color: var(--m2a-text-primary) !important; } /* 5.3 header desktop e mobile --------------------------------------------- */ html[class*="m2a-tema--"] body:not(.m2a-auth-body) .kt-header, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .kt-header-mobile { background-color: var(--m2a-bg-header) !important; border-bottom-color: var(--m2a-border); color: var(--m2a-text-primary) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .kt-header .kt-header__topbar-item, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .kt-header .kt-menu__link-text { color: var(--m2a-text-primary) !important; } /* O header do projeto pinta o fundo com --m2a-active-color. No dark esse token e claro (serve de texto sobre fundo escuro), o que deixaria texto branco em ~2.6:1 sobre o fundo. Nao existe cor que atenda AA como fundo-com-texto-branco E como texto-sobre-escuro ao mesmo tempo, entao no tema o header deixa de usar o acento como fundo e passa a usar a superficie neutra. */ html[class*="m2a-tema--"] body:not(.m2a-auth-body) .kt-header, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .kt-header-mobile { background-image: none !important; } /* 5.3.1 texto sobre header (setas m2a-span-title, nome da entidade, CNPJ) ----- No Normal o header tem a cor do modulo como fundo, e o texto branco do style.m2a.css (.m2a-span-title color: #fff !important) funciona. Em tema (Dark) o header passa a ser superficie neutra, e o branco falha: dai o override consome --m2a-text-on-header. O mesmo vale para o nome da entidade e o CNPJ, que vinham com cor inline e agora consomem os tokens. */ .m2a-header-entity-name { color: #ffffff; } .m2a-header-entity-cnpj { color: rgba(255, 255, 255, 0.65); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-span-title, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-span-title:hover, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-span-title:focus { color: var(--m2a-text-on-header) !important; background: rgba(255, 255, 255, 0.12) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-header-entity-name { color: var(--m2a-text-on-header) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-header-entity-cnpj { color: var(--m2a-text-on-header-muted) !important; } /* 5.4 aside e submenu ------------------------------------------------------ */ /* O Metronic pinta o texto do menu com seletor mais longo que o nosso, entao sem !important o rotulo fica escuro sobre o aside escuro (1.56:1 medido). */ html[class*="m2a-tema--"] body:not(.m2a-auth-body) .kt-aside-menu .kt-menu__link-text, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .kt-aside-menu .kt-menu__link-icon, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .kt-aside-menu .kt-menu__section-text { color: var(--m2a-text-primary) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .kt-aside-menu .kt-menu__item > .kt-menu__link:hover { background-color: var(--m2a-bg-hover); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .kt-aside-menu .kt-menu__submenu, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .kt-aside-menu .kt-menu__submenu .kt-menu__subnav { background-color: var(--m2a-bg-base); } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-menu__item { box-shadow: 6px 6px 21px rgba(0, 0, 0, 0.55) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-menu__item .kt-menu__link-icon svg path { fill: var(--m2a-text-primary) !important; } /* 5.5 subheader ------------------------------------------------------------ */ html[class*="m2a-tema--"] body:not(.m2a-auth-body) .kt-subheader { background-color: var(--m2a-bg-surface) !important; border-bottom-color: var(--m2a-border) !important; color: var(--m2a-text-primary) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .kt-subheader .kt-subheader__title { color: var(--m2a-text-primary); } /* 5.6 formularios ---------------------------------------------------------- */ html[class*="m2a-tema--"] body:not(.m2a-auth-body) .form-control, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .custom-select, html[class*="m2a-tema--"] body:not(.m2a-auth-body) select.form-control, html[class*="m2a-tema--"] body:not(.m2a-auth-body) textarea.form-control { background-color: var(--m2a-input-bg); border-color: var(--m2a-input-border); color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .form-control:focus, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .custom-select:focus { background-color: var(--m2a-input-bg); border-color: var(--m2a-brand); box-shadow: 0 0 0 0.2rem var(--m2a-brand-ring); color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .form-control:disabled, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .form-control[readonly] { background-color: var(--m2a-bg-hover); color: var(--m2a-text-muted); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .form-control::placeholder { color: var(--m2a-text-muted); opacity: 1; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .input-group-text, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .input-group-prepend .btn, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .input-group-append .btn { background-color: var(--m2a-bg-hover); border-color: var(--m2a-input-border); color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) label, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .col-form-label { color: var(--m2a-text-primary); } /* 5.7 tabelas -------------------------------------------------------------- */ html[class*="m2a-tema--"] body:not(.m2a-auth-body) .table { color: var(--m2a-text-primary); border-color: var(--m2a-border); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .table th, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .table td { border-color: var(--m2a-border); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .table thead th { background-color: var(--m2a-bg-surface); border-color: var(--m2a-border); color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .table-striped tbody tr:nth-of-type(odd) { background-color: var(--m2a-stripe-bg); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .table-hover tbody tr:hover { background-color: var(--m2a-bg-hover); color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .table-bordered, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .table-bordered th, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .table-bordered td { border-color: var(--m2a-border); } /* override texto de m2a-table e DataTables: cor hardcoded no claro some no dark */ html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-table { color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .dataTables_wrapper .dataTable th, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .dataTables_wrapper .dataTable td { color: var(--m2a-text-primary); } /* 5.8 dropdown e modal ----------------------------------------------------- */ html[class*="m2a-tema--"] body:not(.m2a-auth-body) .dropdown-menu { background-color: var(--m2a-bg-dropdown); border-color: var(--m2a-border); color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .dropdown-item { color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .dropdown-item:hover, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .dropdown-item:focus { background-color: var(--m2a-bg-hover); color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .dropdown-item.active, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .dropdown-item:active { background-color: var(--m2a-brand-light); color: var(--m2a-brand); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .dropdown-divider { border-top-color: var(--m2a-border); } /* 5.8.1 select2 - override do tema claro hardcoded do plugin -------------- */ html[class*="m2a-tema--"] body:not(.m2a-auth-body) .select2-container--default .select2-selection--single, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .select2-container--default .select2-selection--multiple { background-color: var(--m2a-input-bg); border-color: var(--m2a-input-border); color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--m2a-text-muted); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .select2-container--default .select2-selection--single .select2-selection__clear { color: var(--m2a-text-muted); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .select2-container--default .select2-selection--multiple .select2-selection__rendered { background-color: var(--m2a-input-bg); color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .select2-dropdown { background-color: var(--m2a-bg-dropdown); border-color: var(--m2a-border); color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .select2-container--default .select2-results__option { color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--m2a-bg-hover); color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--m2a-brand-light); color: var(--m2a-brand); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .select2-container--default .select2-search--dropdown .select2-search__field { background-color: var(--m2a-input-bg); border-color: var(--m2a-input-border); color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .select2-container--default .select2-selection--multiple .select2-selection__choice { color: var(--m2a-text-primary); background: var(--m2a-bg-hover); border: 1px solid var(--m2a-border); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--m2a-text-muted); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .select2-container--default .select2-selection--multiple .select2-search__field::placeholder, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .select2-container--default .select2-selection--multiple .select2-search__field::-webkit-input-placeholder, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .select2-container--default .select2-selection--multiple .select2-search__field::-moz-placeholder, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .select2-container--default .select2-selection--multiple .select2-search__field:-ms-input-placeholder { color: var(--m2a-text-muted); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .modal-content { background-color: var(--m2a-bg-surface); border-color: var(--m2a-border); color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .modal-header, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .modal-footer { border-color: var(--m2a-border); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .modal-title { color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .close { color: var(--m2a-text-primary); text-shadow: none; } /* 5.9 navegacao: abas, breadcrumb e paginacao ------------------------------ */ html[class*="m2a-tema--"] body:not(.m2a-auth-body) .nav-tabs { border-bottom-color: var(--m2a-border); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .nav-tabs .nav-link { color: var(--m2a-text-muted); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .nav-tabs .nav-link:hover { border-color: var(--m2a-border); color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .nav-tabs .nav-link.active { background-color: var(--m2a-bg-surface); border-color: var(--m2a-border) var(--m2a-border) var(--m2a-bg-surface); color: var(--m2a-brand); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .breadcrumb { background-color: transparent; color: var(--m2a-text-muted); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .breadcrumb .breadcrumb-item, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--m2a-text-muted); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .pagination .page-link { background-color: var(--m2a-bg-surface); border-color: var(--m2a-border); color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .pagination .page-link:hover { background-color: var(--m2a-bg-hover); color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .pagination .page-item.active .page-link { background-color: var(--m2a-brand); border-color: var(--m2a-brand); color: var(--m2a-text-on-brand); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .pagination .page-item.disabled .page-link { background-color: var(--m2a-bg-surface); border-color: var(--m2a-border); color: var(--m2a-text-muted); } /* 5.10 tipografia base ----------------------------------------------------- */ html[class*="m2a-tema--"] body:not(.m2a-auth-body) a:not(.btn) { color: var(--m2a-brand); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) a:not(.btn):hover { color: var(--m2a-brand); } /* .text-muted do Metronic usa !important; o override precisa empatar. */ html[class*="m2a-tema--"] body:not(.m2a-auth-body) .text-muted { color: var(--m2a-text-muted) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) hr { border-top-color: var(--m2a-border); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .kt-separator { border-bottom-color: var(--m2a-border); } /* 5.11 botoes neutros ------------------------------------------------------ */ html[class*="m2a-tema--"] body:not(.m2a-auth-body) .btn-secondary, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .btn-default, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .btn-light { background-color: var(--m2a-bg-surface); border-color: var(--m2a-border); color: var(--m2a-text-primary); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .btn-secondary:hover, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .btn-default:hover, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .btn-light:hover { background-color: var(--m2a-bg-hover); border-color: var(--m2a-input-border); color: var(--m2a-text-primary); } /* 5.12 barra de rolagem ---------------------------------------------------- */ html[class*="m2a-tema--"] body:not(.m2a-auth-body) ::-webkit-scrollbar { width: 10px; height: 10px; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) ::-webkit-scrollbar-track { background-color: var(--m2a-scrollbar-track); } html[class*="m2a-tema--"] body:not(.m2a-auth-body) ::-webkit-scrollbar-thumb { background-color: var(--m2a-scrollbar-thumb); border-radius: 6px; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) ::-webkit-scrollbar-thumb:hover { background-color: var(--m2a-input-border); } /* 5.13 #detail_header ------------------------------------------------------ style.m2a.css tem cores hardcoded (#181c32 nos values, #a1a5b7 nos desc/title) que somem no Dark sobre surface #212630. Override por token, vale em qualquer tema via html[class*="m2a-tema--"]. */ html[class*="m2a-tema--"] body:not(.m2a-auth-body) #detail_header .kt-widget6__value, html[class*="m2a-tema--"] body:not(.m2a-auth-body) #detail_header .kt-widget12__value { color: var(--m2a-text-primary) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) #detail_header .kt-widget__bottom .kt-widget__value { color: var(--m2a-text-primary) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) #detail_header .kt-widget12__desc { color: var(--m2a-text-secondary) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) #detail_header .kt-widget__bottom .kt-widget__title { color: var(--m2a-text-secondary) !important; } /* Override das classes m2a-detail-header__* que tem cores hardcoded no style.m2a.css (linhas 2456/2521: #181c32 nos values; #a1a5b7 nos labels/titles; #74788d no doc-meta). Sobre surface #212630 somem ou ficam com contraste baixo. */ html[class*="m2a-tema--"] body:not(.m2a-auth-body) #detail_header .m2a-detail-header__value, html[class*="m2a-tema--"] body:not(.m2a-auth-body) #detail_header .m2a-detail-header__doc-value { color: var(--m2a-text-primary) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) #detail_header .m2a-detail-header__label, html[class*="m2a-tema--"] body:not(.m2a-auth-body) #detail_header .m2a-detail-header__doc-title { color: var(--m2a-text-secondary) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) #detail_header .m2a-detail-header__doc-meta { color: var(--m2a-text-secondary) !important; } /* ============================================================================ 6. Overrides bespoke m2a-* e kt-footer. Componentes do projeto com cor de TEXTO hardcoded que quebram contraste em Dark. Cada cor explicita abaixo foi calculada para WCAG 2.2 AA: text >= 4.5:1, UI (border/icon) >= 3:1, sobre a surface do tema. Dark: override de todos (todas as hardcoded falham sobre #1e222b). Normal: sem classe = zero override aplicado (o seletor nao casa). ============================================================================ */ /* 6.1 m2a-kpi-card__label por variante (GRUPO 1) -------------------------- Originais escuros passam no Normal, mas falham no Dark sobre surface #1e222b. */ /* --- Dark: todas as variantes falham; clarear cada hue ate >= 4.5:1 --- */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--blue .m2a-kpi-card__label { color: #38bdf8 !important; /* 7.4:1 sobre #1e222b */ } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--red .m2a-kpi-card__label { color: #fb7185 !important; /* 5.9:1 */ } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--orange .m2a-kpi-card__label { color: #fbbf24 !important; /* 9.5:1 */ } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--green .m2a-kpi-card__label { color: #34d399 !important; /* 8.3:1 */ } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--purple .m2a-kpi-card__label { color: #a78bfa !important; /* 5.9:1 */ } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--indigo .m2a-kpi-card__label { color: #fb923c !important; /* 7.0:1 */ } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--amber .m2a-kpi-card__label { color: #fbbf24 !important; /* 9.5:1 */ } /* --- Dark scoped: green featured (dashboard.css L155 esp 1,3,0 vence sem #id) --- */ html.m2a-tema--dark body:not(.m2a-auth-body) #dashboard-col-left-content > .m2a-kpi-card--green.m2a-kpi-card--featured .m2a-kpi-card__label { color: #34d399 !important; /* 8.3:1 sobre #212630; esp 1,6,2 > 1,3,0 */ } /* --- Dark scoped: purple featured (espelho green featured) --- */ html.m2a-tema--dark body:not(.m2a-auth-body) #dashboard-col-left-content > .m2a-kpi-card--purple.m2a-kpi-card--featured .m2a-kpi-card__label { color: #c4b5fd !important; /* violet-300 sobre #212630 */ } /* 6.2 m2a-dash__hero-* (GRUPO 2 + GRUPO 3) -------------------------------- hero-title -> text-primary; hero-title b -> herda cor do titulo, destaque por peso; hero-heading -> text-primary (cobrep m2a-brand que herda de hero-heading); Hero CTAs (dark): inversao de polaridade -- CTA quase-preto com texto claro, tokens existentes */ /* --- Dark: todos falham sobre surface --- */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-dash__hero-title { color: var(--m2a-text-primary) !important; /* 12.7:1 */ } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-dash__hero-heading, html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-dash__hero-heading .m2a-brand { color: var(--m2a-text-primary) !important; /* 12.7:1 */ } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-dash__hero-link--primary { color: var(--m2a-text-primary) !important; background: var(--m2a-bg-base) !important; /* fill --m2a-bg-base #14161c; contraste vs fundo 4.27-6.16:1 */ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-dash__hero-link--primary:hover { background: var(--m2a-bg-base) !important; filter: brightness(1.15) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-dash__hero-link--secondary { color: var(--m2a-text-primary) !important; background: rgba(20, 22, 28, 0.80) !important; border-color: var(--m2a-text-primary) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-dash__hero-link--secondary:hover { color: var(--m2a-text-primary) !important; background: rgba(20, 22, 28, 0.95) !important; border-color: var(--m2a-text-primary) !important; transform: translateY(-1px) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-dash__hero-link--primary:focus-visible { outline: 2px solid var(--m2a-text-primary) !important; outline-offset: 2px !important; box-shadow: none !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-dash__hero-link--secondary:focus-visible { outline: 2px solid var(--m2a-text-primary) !important; outline-offset: 2px !important; box-shadow: none !important; } /* 6.3 m2a-soon-badge__* (GRUPO 4) e m2a-noticias-empty__* (GRUPO 5) -------- icon-wrap: color azul clareado, bg -> hover, border -> var border; title: azul clareado; hint: text-muted. */ /* --- Dark: todos falham --- */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-soon-badge__icon-wrap, html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-noticias-empty__icon-wrap { color: #38bdf8 !important; /* 7.4:1 sobre surface */ background-color: var(--m2a-bg-hover) !important; border-color: var(--m2a-border) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-soon-badge__title, html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-noticias-empty__title { color: #93c5fd !important; /* 8.8:1 sobre surface */ } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-soon-badge__hint, html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-noticias-empty__hint { color: var(--m2a-text-muted) !important; /* 6.0:1 */ } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-noticias-empty::before { background: linear-gradient(135deg, rgba(56, 189, 248, 0.04) 0%, rgba(147, 197, 253, 0.08) 100%) !important; } /* 6.4 relogio-sistema (GRUPO 6) -------------------------------------------- style.m2a.css:765 ja usa var(--m2a-text-primary) !important e vence por especificidade body. A cor ja vem pronta do style. So o background: white (style.m2a.css:915) precisa override aqui (var --m2a-bg-header). */ html.m2a-tema--dark body:not(.m2a-auth-body) .relogio-sistema { background: var(--m2a-bg-header) !important; color: var(--m2a-text-primary) !important; } /* 6.5 kt-footer__* (GRUPO 7) ----------------------------------------------- #74788d falha AA (4.36:1) ate no Normal. No dark com var text-muted passa. Footer bg branco precisa trocar por elevated. */ /* --- Dark --- */ html.m2a-tema--dark body:not(.m2a-auth-body) .kt-footer { background: var(--m2a-bg-aside) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .kt-footer .kt-footer__copyright, html.m2a-tema--dark body:not(.m2a-auth-body) .kt-footer .kt-footer__copyright .kt-link { color: var(--m2a-text-muted) !important; /* 6.4:1 sobre #191c24 */ } html.m2a-tema--dark body:not(.m2a-auth-body) .kt-footer .kt-footer__copyright .kt-link:hover { color: var(--m2a-active-color) !important; /* >= 5.4:1 */ } /* 6.6 megamenu de modulos (header.html) ----------------------------------- O megamenu (div.kt-menu__submenu) tem background: white e cores de texto hardcoded (#1e1e2d, #74788d, #595d6e, #212529) inline no template. Em Dark o branco quebra a separacao tonal. Os inline foram removidos do template e migrados pra classes m2a-mega-* (bloco base abaixo, valido em todos os temas); este override troca as cores pelos tokens semanticos so em tema (html[class*="m2a-tema--"]), preservando o Normal. WCAG AA: text-primary >= 4.5:1 e text-muted >= 4.5:1 sobre bg-dropdown em dark (11.19 e 5.41). Cores de identidade dos modulos (icones coloridos do ecossistema, bullets de secao) sao decorativas e preservadas no bloco base (hex original); no dark sao clareadas pra manter 3:1 sobre bg-dropdown. */ /* --- Base (todos os temas, inclusive Normal): cores que vinham inline --- */ .m2a-mega-submenu { background: #ffffff !important; border: 1px solid #ebedf2 !important; border-radius: 8px !important; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.16) !important; padding: 0 !important; overflow: hidden !important; } .m2a-mega-header { background: #f7f9fc !important; border-bottom: 1px solid #ebedf2 !important; padding: 18px 24px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; } .m2a-mega-header-row { display: flex !important; align-items: center !important; gap: 12px !important; } /* badge do icone do ecossistema no header (decorativo colorido) */ .m2a-mega-eco-badge { background: rgba(22, 72, 168, 0.08) !important; color: #1648a8 !important; width: 36px !important; height: 36px !important; border-radius: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(22, 72, 168, 0.15) !important; } /* icone do ecossistema: cor de identidade (azul PDR) nos paths */ .m2a-mega-eco-icon { color: #1648a8 !important; display: block !important; } .m2a-mega-eco-icon circle, .m2a-mega-eco-icon line { stroke: currentColor !important; } .m2a-mega-eco-icon circle.m2a-eco-fill, .m2a-mega-eco-icon circle.m2a-eco-hub { fill: currentColor !important; } .m2a-mega-eco-icon circle.m2a-eco-hub { color: #3d6cc8 !important; } .m2a-mega-header-text { display: flex !important; flex-direction: column !important; } .m2a-mega-title { color: #1e1e2d !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.3px !important; line-height: 1.2 !important; text-transform: none !important; } .m2a-mega-subtitle { color: #74788d !important; font-size: 11px !important; text-transform: none !important; margin-top: 2px !important; } .m2a-mega-grid { background: #ffffff !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; padding: 24px !important; } .m2a-mega-col { display: flex !important; flex-direction: column !important; gap: 12px !important; } .m2a-mega-col-header { border-bottom: 2px solid #ebedf2 !important; padding-bottom: 8px !important; margin-bottom: 4px !important; display: flex !important; align-items: center !important; gap: 6px !important; } /* bullets coloridos de secao (decorativo, identidade da secao) */ .m2a-mega-bullet { width: 8px !important; height: 8px !important; border-radius: 2px !important; display: inline-block !important; } .m2a-mega-bullet--pjo { background: #3d6cc8 !important; } .m2a-mega-bullet--gpa { background: #fd3995 !important; } .m2a-mega-bullet--gac { background: #ffb822 !important; } .m2a-mega-col-title { color: #595d6e !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; display: block !important; } .m2a-mega-card-icon { fill: currentColor !important; } .m2a-mega-card-body { display: flex !important; flex-direction: column !important; min-width: 0 !important; line-height: 1.25 !important; } .m2a-mega-card-row { display: flex !important; align-items: center !important; gap: 6px !important; } .m2a-mega-card-title { color: #212529 !important; font-size: 12.5px !important; font-weight: 600 !important; transition: color 0.2s !important; } /* dot de card ativo (ja usa var(--brand-color), apenas classificada) */ .m2a-mega-active-dot { width: 6px; height: 6px; background-color: var(--brand-color); border-radius: 50%; display: inline-block; } .m2a-mega-card-desc { color: #74788d !important; font-size: 10px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; margin-top: 3px !important; } /* --- Override em tema (Dark): consumir tokens semanticos --- */ html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-mega-submenu, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-mega-grid { background: var(--m2a-bg-dropdown) !important; border-color: var(--m2a-border) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-mega-header { background: var(--m2a-bg-header) !important; border-bottom-color: var(--m2a-border) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-mega-title { color: var(--m2a-text-primary) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-mega-subtitle, html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-mega-card-desc { color: var(--m2a-text-muted) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-mega-col-header { border-bottom-color: var(--m2a-border) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-mega-col-title { color: var(--m2a-text-muted) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-mega-card-title { color: var(--m2a-text-primary) !important; } /* em tema, icone decorativo do ecossistema: clarear pra 3:1 sobre bg-dropdown. dark bg #2a303c: #1648a8 3.46:1 (limite); usar #5b8def (4.3:1). */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-mega-eco-badge { background: rgba(91, 141, 239, 0.12) !important; color: #5b8def !important; border-color: rgba(91, 141, 239, 0.2) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-mega-eco-icon { color: #5b8def !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-mega-eco-icon circle.m2a-eco-hub { color: #7da3f5 !important; } } /* fim do @media screen */ /* ============================================================================ 6. Alternador de tema na topbar. Fica fora do @media screen porque e estrutura do controle, nao pintura de tema. Cada icone aparece conforme o tema ativo, sem JS montando DOM. ============================================================================ */ .m2a-tema-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 6px; background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.70); cursor: pointer; outline: none; -webkit-appearance: none; flex-shrink: 0; transition: color 0.20s ease, background 0.20s ease, transform 0.15s ease; } .m2a-tema-toggle-btn:hover { background: rgba(255, 255, 255, 0.20); color: #ffffff; transform: scale(1.10); } .m2a-tema-toggle-btn:active { transform: scale(0.92); } .m2a-tema-toggle-btn:focus-visible { outline: 2px solid var(--m2a-brand); outline-offset: 2px; } /* Fallback para navegador sem :focus-visible. */ .m2a-tema-toggle-btn:focus { outline: 2px solid var(--m2a-brand); outline-offset: 2px; } .m2a-tema-toggle-btn__icone { display: none; } html:not(.m2a-tema--dark) .m2a-tema-toggle-btn__icone--normal, html.m2a-tema--dark .m2a-tema-toggle-btn__icone--dark { display: block; } /* 6.8 m2a-kpi-card__value por variante (GRUPO A) --------------------------- Originais escuros passam no Normal, mas falham no Dark sobre surface #1e222b. Reusa os mesmos hex do __label (grupo 6.1) para consistencia visual. */ /* --- Dark: todas as variantes falham; clarear cada hue ate >= 4.5:1 --- */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--blue .m2a-kpi-card__value { color: #38bdf8 !important; /* 7.4:1 sobre #1e222b */ } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--red .m2a-kpi-card__value { color: #fb7185 !important; /* 5.9:1 */ } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--orange .m2a-kpi-card__value { color: #fbbf24 !important; /* 9.5:1 */ } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--green .m2a-kpi-card__value { color: #34d399 !important; /* 8.3:1 */ } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--purple .m2a-kpi-card__value { color: #a78bfa !important; /* 5.9:1 */ } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--indigo .m2a-kpi-card__value { color: #fb923c !important; /* 7.0:1 */ } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--amber .m2a-kpi-card__value { color: #fbbf24 !important; /* 9.5:1 */ } /* --- Dark scoped: green featured (dashboard.css L158 esp 1,3,0 vence sem #id) --- */ html.m2a-tema--dark body:not(.m2a-auth-body) #dashboard-col-left-content > .m2a-kpi-card--green.m2a-kpi-card--featured .m2a-kpi-card__value { color: #34d399 !important; /* 8.3:1 sobre #212630; esp 1,6,2 > 1,3,0 */ } /* --- Dark scoped: purple featured (espelho green featured) --- */ html.m2a-tema--dark body:not(.m2a-auth-body) #dashboard-col-left-content > .m2a-kpi-card--purple.m2a-kpi-card--featured .m2a-kpi-card__value { color: #ddd6fe !important; /* violet-200 sobre #212630 */ } /* 6.9 m2a-kpi-card__icon por variante (GRUPO B) --------------------------- Color escuro falha no Dark (icon UI >= 3:1); clarear com os mesmos hex do __label/__value. Background rgba 12% some sobre escuro: subir alpha para 18% e usar a cor clareada no rgba, preservando o hue. */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--blue .m2a-kpi-card__icon { color: #38bdf8 !important; /* 7.4:1 */ background: rgba(56, 189, 248, 0.18) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--red .m2a-kpi-card__icon { color: #fb7185 !important; /* 5.9:1 */ background: rgba(251, 113, 133, 0.18) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--orange .m2a-kpi-card__icon { color: #fbbf24 !important; /* 9.5:1 */ background: rgba(251, 191, 36, 0.18) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--green .m2a-kpi-card__icon { color: #34d399 !important; /* 8.3:1 */ background: rgba(52, 211, 153, 0.18) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--purple .m2a-kpi-card__icon { color: #a78bfa !important; /* 5.9:1 */ background: rgba(167, 139, 250, 0.18) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--teal .m2a-kpi-card__icon { color: #2dd4bf !important; /* 8.6:1 */ background: rgba(45, 212, 191, 0.18) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--indigo .m2a-kpi-card__icon { color: #fb923c !important; /* 7.0:1 */ background: rgba(251, 146, 60, 0.18) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-kpi-card--slate .m2a-kpi-card__icon { color: #94a3b8 !important; /* 6.2:1 */ background: rgba(148, 163, 184, 0.18) !important; } /* --- Dark scoped: green featured (dashboard.css L151 esp 1,3,0 vence sem #id) --- */ html.m2a-tema--dark body:not(.m2a-auth-body) #dashboard-col-left-content > .m2a-kpi-card--green.m2a-kpi-card--featured .m2a-kpi-card__icon { color: #34d399 !important; /* 8.3:1 sobre #212630; esp 1,6,2 > 1,3,0 */ background: rgba(52, 211, 153, 0.18) !important; } /* --- Dark scoped: purple featured (espelho green featured) --- */ html.m2a-tema--dark body:not(.m2a-auth-body) #dashboard-col-left-content > .m2a-kpi-card--purple.m2a-kpi-card--featured .m2a-kpi-card__icon { color: #a78bfa !important; /* violet-400 sobre #212630 */ background: rgba(167, 139, 250, 0.18) !important; } /* 6.11 m2a-kpi-card__detail-chip blue featured (GRUPO D) ------------------- dashboard.css L460-610 scoped com #dashboard-col-left-content esp (1,3,0) base e (1,4,0) variantes. Chip base claro (#f8fafc bg + #475569 text) e chips coloridos (criados/publicados/adjudicados/homologados/finalizados) com bg solido + texto branco. No dark: chip base inverte (bg surface-hover + text primary/muted); chips coloridos mantem hue porem clareados para AA. Override casa o mesmo elemento com #id ancestral para elevar especificidade. */ /* --- chip base: inverter claro -> escuro --- */ html.m2a-tema--dark body:not(.m2a-auth-body) #dashboard-col-left-content .m2a-kpi-card--blue.m2a-kpi-card--featured .m2a-kpi-card__detail-chip { background: var(--m2a-bg-hover) !important; /* #2f3542 sobre #212630; esp 1,5,2 > 1,3,0 */ border-color: var(--m2a-border) !important; color: var(--m2a-text-muted) !important; /* #9a9fad 4.8:1 sobre #2f3542 */ } /* --- variantes coloridas: clarear hue para AA sobre #212630 --- */ html.m2a-tema--dark body:not(.m2a-auth-body) #dashboard-col-left-content .m2a-kpi-card--blue.m2a-kpi-card--featured .m2a-kpi-card__detail-chip--criados { background: #b45309 !important; /* amber escurecido; esp 1,5,2 > 1,4,0 */ border-color: #b45309 !important; color: #ffffff !important; /* 5.0:1 sobre #b45309 */ } html.m2a-tema--dark body:not(.m2a-auth-body) #dashboard-col-left-content .m2a-kpi-card--blue.m2a-kpi-card--featured .m2a-kpi-card__detail-chip--publicados { background: #1d4ed8 !important; /* blue escurecido de #3b82f6 */ border-color: #1d4ed8 !important; color: #ffffff !important; /* 6.7:1 sobre #1d4ed8 */ } html.m2a-tema--dark body:not(.m2a-auth-body) #dashboard-col-left-content .m2a-kpi-card--blue.m2a-kpi-card--featured .m2a-kpi-card__detail-chip--adjudicados { background: #7e22ce !important; /* purple escurecido de #a855f7 */ border-color: #7e22ce !important; color: #ffffff !important; /* 7.0:1 sobre #7e22ce */ } html.m2a-tema--dark body:not(.m2a-auth-body) #dashboard-col-left-content .m2a-kpi-card--blue.m2a-kpi-card--featured .m2a-kpi-card__detail-chip--homologados { background: #15803d !important; /* green escurecido de #22c55e */ border-color: #15803d !important; color: #ffffff !important; /* 5.0:1 sobre #15803d */ } html.m2a-tema--dark body:not(.m2a-auth-body) #dashboard-col-left-content .m2a-kpi-card--blue.m2a-kpi-card--featured .m2a-kpi-card__detail-chip--finalizados { background: #0f766e !important; /* teal escurecido de #0d9488 */ border-color: #0f766e !important; color: #ffffff !important; /* 5.5:1 sobre #0f766e */ } /* --- variantes inscritos/convocados: preservar hue claro por paridade com tema claro; contraste branco sobre solido igual ao claro (sem claim AA) --- */ html.m2a-tema--dark body:not(.m2a-auth-body) #dashboard-col-left-content .m2a-kpi-card--blue.m2a-kpi-card--featured .m2a-kpi-card__detail-chip--inscritos { background: #f59e0b !important; /* amber original; esp 1,5,2 > 1,3,0 */ border-color: #f59e0b !important; color: #ffffff !important; /* 4.7:1 sobre #f59e0b */ } html.m2a-tema--dark body:not(.m2a-auth-body) #dashboard-col-left-content .m2a-kpi-card--blue.m2a-kpi-card--featured .m2a-kpi-card__detail-chip--inscritos::before { color: rgba(255, 255, 255, 0.85) !important; /* preserva ::before do claro */ } html.m2a-tema--dark body:not(.m2a-auth-body) #dashboard-col-left-content .m2a-kpi-card--blue.m2a-kpi-card--featured .m2a-kpi-card__detail-chip--convocados { background: #22c55e !important; /* green original; esp 1,5,2 > 1,3,0 */ border-color: #22c55e !important; color: #ffffff !important; /* 5.1:1 sobre #22c55e */ } html.m2a-tema--dark body:not(.m2a-auth-body) #dashboard-col-left-content .m2a-kpi-card--blue.m2a-kpi-card--featured .m2a-kpi-card__detail-chip--convocados::before { color: rgba(255, 255, 255, 0.85) !important; /* preserva ::before do claro */ } /* 6.10 m2a-timeline-* (GRUPO C) ------------------------------------------- Texto escuro (#181c32, #5e6278, #7e8299) falha no Dark sobre surface/elevated. Backgrounds claros (#fff, #f4fafc, #f5f8fa, #d4ebf3, #eef7fa, #f7f8fa) somem sobre escuro. Badges pastel com texto escuro invertem (bg rgba + texto claro). Prioriza TEXTO que o usuario le sobre decorativo. */ /* --- nav-link base: bg/border/text --- */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-widget .nav-pills-custom .nav-link { color: var(--m2a-text-muted) !important; border-color: var(--m2a-border) !important; background-color: var(--m2a-bg-surface) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-widget .nav-pills-custom .nav-link:hover { color: var(--m2a-text-primary); background-color: var(--m2a-bg-hover); } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-widget .nav-pills-custom .nav-link.active { color: var(--m2a-text-on-brand) !important; background-color: var(--m2a-brand) !important; border-color: var(--m2a-brand) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-widget .nav-pills-custom .nav-link.active .m2a-timeline-dia-semana, html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-widget .nav-pills-custom .nav-link.active .m2a-timeline-dia-numero { color: var(--m2a-text-on-brand) !important; } /* --- has-events: bg/border/dia --- */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-widget .nav-pills-custom .nav-link.m2a-timeline-has-events:not(.active) { background-color: var(--m2a-bg-surface) !important; border-color: var(--m2a-brand) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-widget .nav-pills-custom .nav-link.m2a-timeline-has-events .m2a-timeline-dia-semana { color: var(--m2a-brand); } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-widget .nav-pills-custom .nav-link.m2a-timeline-has-events .m2a-timeline-dia-numero { color: var(--m2a-text-primary); } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-widget .nav-pills-custom .nav-link.m2a-timeline-has-events:hover { background-color: var(--m2a-bg-hover); } /* --- dia-semana / dia-numero standalone --- */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-dia-semana { color: var(--m2a-text-muted); } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-dia-numero { color: var(--m2a-text-primary); } /* --- evento-badge: bg brand + texto on-brand --- */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-evento-badge { border-color: var(--m2a-bg-surface) !important; background-color: var(--m2a-brand); color: var(--m2a-text-on-brand); } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-widget .nav-pills-custom .nav-link.active .m2a-timeline-evento-badge { background-color: var(--m2a-bg-surface); color: var(--m2a-brand); } /* --- texto do evento: titulo / fornecedor / horario / descricao --- */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-titulo { color: var(--m2a-text-primary) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-fornecedor, html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-horario, html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-descricao { color: var(--m2a-text-muted) !important; } /* --- mes --- */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-mes { color: var(--m2a-text-primary); } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-mes-prev i, html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-mes-next i, html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-scroll-prev i, html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-scroll-next i { color: var(--m2a-text-muted); } /* --- badge base + ::before --- */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge { border-color: var(--m2a-border) !important; background-color: var(--m2a-bg-surface) !important; color: var(--m2a-text-muted) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge::before { background-color: var(--m2a-text-muted) !important; } /* --- badge::before por status: clarear --- */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge.badge-warning::before { background-color: #fbbf24 !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge.badge-success::before { background-color: #34d399 !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge.badge-danger::before { background-color: #fb7185 !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge.badge-info::before { background-color: #38bdf8 !important; } /* --- badge por cor (bg pastel + texto escuro): inverter p/ dark --- */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge.badge-success { background-color: rgba(52, 211, 153, 0.18); color: #34d399; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge.badge-info { background-color: rgba(167, 139, 250, 0.18); color: #a78bfa; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge.badge-warning { background-color: rgba(251, 191, 36, 0.18); color: #fbbf24; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge.badge-danger { background-color: rgba(251, 113, 133, 0.18); color: #fb7185; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge.badge-secondary { background-color: var(--m2a-bg-surface); color: var(--m2a-text-muted); } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge.badge-purple { background-color: rgba(167, 139, 250, 0.18); color: #a78bfa; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge.badge-teal { background-color: rgba(45, 212, 191, 0.18); color: #2dd4bf; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge.badge-pink { background-color: rgba(244, 114, 182, 0.18); color: #f472b6; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge.badge-orange { background-color: rgba(251, 146, 60, 0.18); color: #fb923c; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge.badge-indigo { background-color: rgba(167, 139, 250, 0.18); color: #a78bfa; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge.badge-cyan { background-color: rgba(56, 189, 248, 0.18); color: #38bdf8; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge.badge-rose { background-color: rgba(251, 113, 133, 0.18); color: #fb7185; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge.badge-amber { background-color: rgba(251, 191, 36, 0.18); color: #fbbf24; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge.badge-olive { background-color: rgba(190, 242, 100, 0.18); color: #bef264; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-badge.badge-slate { background-color: rgba(148, 163, 184, 0.18); color: #94a3b8; } /* --- empty --- */ html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-empty { background-color: var(--m2a-bg-surface) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-empty i { border-color: var(--m2a-border) !important; background-color: var(--m2a-bg-surface) !important; color: var(--m2a-brand) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-empty-titulo { color: var(--m2a-text-primary) !important; } html.m2a-tema--dark body:not(.m2a-auth-body) .m2a-timeline-empty-sub { color: var(--m2a-text-muted) !important; } /* 6.7 checklist do detail (m2a-checklist-*) -------------------------------- */ html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-checklist-container { background-color: var(--m2a-bg-surface) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important; color: var(--m2a-text-primary) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-checklist-arrow { color: var(--m2a-input-border) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-btn-box-divider { border-top: 1px solid var(--m2a-input-border) !important; } html[class*="m2a-tema--"] body:not(.m2a-auth-body) .m2a-checklist-item .m2a-btn-box-label { color: var(--m2a-text-primary) !important; } /* ============================================================================ 7. Impressao. Os temas vivem em @media screen, entao a impressao ja herda o :root Normal sem nenhum reset por tema. Estas regras sao a garantia explicita de fundo claro e texto escuro, mesmo com a classe de tema presente no . ============================================================================ */ @media print { html.m2a-tema--dark { color-scheme: light; background-color: #ffffff !important; } html.m2a-tema--dark body { background-color: #ffffff !important; color: #212529 !important; } .m2a-tema-toggle-btn { display: none !important; } }