/* [Atlas] criado em 2026-07-08 · ampliado em 2026-07-08 (componentes refeitos)
============================================================================
atlas-ui.css — Fase 1 do redesign: CAMADA DE TOKENS + COMPONENTES do Atlas
Design System sobre Bootstrap 5 + tema SocialV.
COMO FUNCIONA
- Ligado por feature flag global AtlasUI:NovoVisual (appsettings). Quando on,
os 5 layouts emitem este (com asp-append-version) e poem a classe
.atlas-ui no .
- TUDO escopado em `body.atlas-ui` — contem o skin quando off e da +1 de
especificidade para vencer socialv.css sem !important a esmo. Rollback = flag.
PRINCIPIOS
- Reveste por CSS: todo HTML (ViewComponents server-side E DOM gerado por JS:
DataTables, Tagify, Select2, SweetAlert) usa as mesmas classes Bootstrap e
herda o visual novo, sem tocar no C# nem no JS.
- NAO define --bs-primary: a cor da UOP (ConfiguracoesVisuaisServico) manda.
O acento referencia var(--bs-primary) com fallback teal Atlas #219897.
- Direcao-agnostico (Sereno/Navy vem na Fase 2 do shell).
Tokens: atlas-ai/atlas_design_tokens.json (teal #219897 / charcoal #3b3f3e).
============================================================================ */
/* ===== F0 — Tipografia de marca: Branding SF (titulos) + Open Sans (corpo) =====
Branding SF auto-hospedada (wwwroot/fonts/branding-sf). Open Sans via Google (o app ja
carrega Google Fonts). Alvo do design system; substitui o Poppins do SocialV. */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
@font-face { font-family: 'Branding SF'; font-weight: 300; font-style: normal; font-display: swap; src: url('/fonts/branding-sf/BrandingSF-Light.woff2') format('woff2'), url('/fonts/branding-sf/BrandingSF-Light.woff') format('woff'); }
@font-face { font-family: 'Branding SF'; font-weight: 350; font-style: normal; font-display: swap; src: url('/fonts/branding-sf/BrandingSF-SemiLight.woff2') format('woff2'), url('/fonts/branding-sf/BrandingSF-SemiLight.woff') format('woff'); }
@font-face { font-family: 'Branding SF'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/branding-sf/BrandingSF-Medium.woff2') format('woff2'), url('/fonts/branding-sf/BrandingSF-Medium.woff') format('woff'); }
@font-face { font-family: 'Branding SF'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/branding-sf/BrandingSF-SemiBold.woff2') format('woff2'), url('/fonts/branding-sf/BrandingSF-SemiBold.woff') format('woff'); }
@font-face { font-family: 'Branding SF'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/branding-sf/BrandingSF-Bold.woff2') format('woff2'), url('/fonts/branding-sf/BrandingSF-Bold.woff') format('woff'); }
@font-face { font-family: 'Branding SF'; font-weight: 900; font-style: normal; font-display: swap; src: url('/fonts/branding-sf/BrandingSF-Black.woff2') format('woff2'), url('/fonts/branding-sf/BrandingSF-Black.woff') format('woff'); }
body.atlas-ui {
/* Neutros charcoal + fundo com hint teal. */
--au-ink: #2f3433;
--au-ink-soft: #66716e;
--au-ink-faint: #98a4a1;
--au-bg: #f4f8f7;
--au-surface: #ffffff;
--au-surface-2: #f5faf9;
--au-line: rgba(43, 48, 47, .12);
--au-line-soft: rgba(43, 48, 47, .07);
--au-radius: 14px;
--au-radius-sm: 9px;
--au-radius-lg: 16px;
--au-shadow: 0 1px 2px rgba(16, 48, 45, .04), 0 4px 16px rgba(16, 48, 45, .05);
--au-shadow-hover: 0 8px 26px rgba(16, 48, 45, .08);
--au-shadow-pop: 0 12px 34px rgba(11, 35, 32, .10), 0 4px 10px rgba(11, 35, 32, .06);
/* Semanticas do design system (usadas em alertas/badges). */
--au-ok: #2dcdb2; --au-ok-ink: #0c7a68;
--au-warn: #fcb017; --au-warn-ink: #8a5a00;
--au-dang: #db5424; --au-dang-ink: #b23c17;
--au-info: #922a8e; --au-info-ink: #7a2477;
/* Ponte para as variaveis do Bootstrap 5 — herdadas por todo o HTML gerado. */
--bs-body-color: var(--au-ink);
/* Tipografia da PROPOSTA/design system (stand-in de Branding SF + Open Sans; sai do Poppins do SocialV).
Alvo final de marca: Branding SF via @font-face (arquivos em E:\DOC\20 - atlas\font). */
--bs-body-font-family: "Open Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
--bs-border-color: var(--au-line);
--bs-border-radius: var(--au-radius);
--bs-border-radius-sm:var(--au-radius-sm);
--bs-border-radius-lg:var(--au-radius-lg);
background-color: var(--au-bg);
color: var(--au-ink);
-webkit-font-smoothing: antialiased;
}
/* ============================ Tipografia ============================ */
body.atlas-ui h1, body.atlas-ui h2, body.atlas-ui h3,
body.atlas-ui h4, body.atlas-ui h5, body.atlas-ui h6,
body.atlas-ui .h1, body.atlas-ui .h2, body.atlas-ui .h3,
body.atlas-ui .display-1, body.atlas-ui .display-2, body.atlas-ui .display-3,
body.atlas-ui .display-4, body.atlas-ui .display-5, body.atlas-ui .display-6,
body.atlas-ui .card-title, body.atlas-ui .modal-title, body.atlas-ui .au-systitle {
font-family: "Branding SF", "Segoe UI", system-ui, sans-serif;
color: var(--au-ink);
letter-spacing: -.01em;
}
/* Pesos conforme o Atlas Design System: titulos de secao SemiBold (600); display Light (300);
assinatura leve+destaque no hero ("Bem" destaque Bold/teal + "vindo(a)." leve Light). */
body.atlas-ui h1, body.atlas-ui h2, body.atlas-ui h3,
body.atlas-ui h4, body.atlas-ui h5, body.atlas-ui h6,
body.atlas-ui .card-title, body.atlas-ui .modal-title, body.atlas-ui .au-systitle { font-weight: 600; }
body.atlas-ui .display-1, body.atlas-ui .display-2, body.atlas-ui .display-3,
body.atlas-ui .display-4, body.atlas-ui .display-5, body.atlas-ui .display-6 { font-weight: 300; }
body.atlas-ui .display-1.text-primary, body.atlas-ui .display-2.text-primary,
body.atlas-ui .display-3.text-primary, body.atlas-ui .display-4.text-primary { font-weight: 700; }
/* ============================ Cards ============================
Refeitos: planos, hairline, raio maior, sombra discreta, header/footer
transparentes com separador fino, titulo refinado. */
body.atlas-ui .card {
border: 1px solid var(--au-line);
border-radius: var(--au-radius);
box-shadow: var(--au-shadow);
background-color: var(--au-surface);
transition: box-shadow .2s ease, border-color .2s ease;
}
body.atlas-ui .card:hover { box-shadow: var(--au-shadow-hover); }
body.atlas-ui .card > .card-header,
body.atlas-ui .card > .card-footer {
background-color: transparent;
border-color: var(--au-line-soft);
padding: .95rem 1.15rem;
}
body.atlas-ui .card > .card-body { padding: 1.15rem 1.25rem; }
/* Card "nu": some por completo (sem borda/fundo/sombra) — usado quando o card externo do SocialV
precisa desaparecer no visual novo e o conteudo interno (ex.: step-cards do ExportarParaProducao)
deve ficar solto na pagina. O padding e removido no proprio card-body (utilitario p-0). */
body.atlas-ui .card.au-bare { border: none !important; background: transparent !important; box-shadow: none !important; }
body.atlas-ui .card-title {
font-weight: 600;
font-size: 1rem;
letter-spacing: -.01em;
color: var(--au-ink);
margin-bottom: .35rem;
}
body.atlas-ui .card-header > .card-title,
body.atlas-ui .card-header h1, body.atlas-ui .card-header h2,
body.atlas-ui .card-header h3, body.atlas-ui .card-header h4,
body.atlas-ui .card-header h5 { margin-bottom: 0; }
/* Cards de sistema da Home (Views/Home/Index.cshtml — .fixed-height-card).
Ganham elevacao sutil no hover + descricao/botao refinados. Markup intacto. */
body.atlas-ui .fixed-height-card {
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.atlas-ui .fixed-height-card:hover {
transform: translateY(-3px);
box-shadow: var(--au-shadow-hover);
border-color: color-mix(in srgb, var(--bs-primary, #219897) 28%, var(--au-line));
}
body.atlas-ui .fixed-height-card .card-text {
color: var(--au-ink-soft);
font-size: .9rem;
line-height: 1.5;
}
body.atlas-ui .fixed-height-card .btn-block { width: 100%; } /* btn-block e BS4 — garante largura no BS5 */
/* Cards de sistema REFEITOS (Home, markup novo sob a flag) — ao estilo do modelo P2:
icone em circulo de contorno, titulo, descricao e "Acessar ->" como link com seta. */
body.atlas-ui .au-syscard {
border: 1px solid var(--au-line);
border-radius: 16px;
box-shadow: var(--au-shadow);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.atlas-ui .au-syscard:hover {
transform: translateY(-3px);
box-shadow: var(--au-shadow-hover);
border-color: color-mix(in srgb, var(--bs-primary, #219897) 30%, var(--au-line));
}
body.atlas-ui .au-syscard .card-body { padding: 1.4rem 1.3rem; gap: .75rem; }
body.atlas-ui .au-sysicon {
width: 46px; height: 46px; border-radius: 50%;
display: grid; place-items: center;
border: 1px solid color-mix(in srgb, var(--bs-primary, #219897) 22%, var(--au-line));
background: color-mix(in srgb, var(--bs-primary, #219897) 6%, var(--au-surface));
color: var(--bs-primary, #219897);
transition: background .2s ease;
}
body.atlas-ui .au-sysicon .material-symbols-outlined { font-size: 24px; }
body.atlas-ui .au-syscard:hover .au-sysicon { background: color-mix(in srgb, var(--bs-primary, #219897) 12%, var(--au-surface)); }
body.atlas-ui .au-systitle { font-size: 1rem; font-weight: 600; color: var(--au-ink); margin: .15rem 0 0; letter-spacing: -.01em; }
body.atlas-ui .au-syscard .card-text { color: var(--au-ink-soft); font-size: .86rem; line-height: 1.5; margin: 0; }
body.atlas-ui .au-syslink {
display: inline-flex; align-items: center; gap: .35rem;
color: var(--bs-primary, #219897); font-weight: 600; font-size: .9rem; text-decoration: none;
transition: gap .18s ease;
}
body.atlas-ui .au-syslink .material-symbols-outlined { font-size: 18px; transition: transform .18s ease; }
body.atlas-ui .au-syscard:hover .au-syslink { gap: .6rem; }
body.atlas-ui .au-syscard:hover .au-syslink .material-symbols-outlined { transform: translateX(3px); }
/* [Atlas 2026-07-11] au-syslink usado FORA do syscard (ex.: footer "Ver mais" da finHome): a regra
acima so desliza no hover do .au-syscard; aqui damos hover proprio ao link para funcionar standalone. */
body.atlas-ui a.au-syslink:hover { gap: .6rem; }
body.atlas-ui a.au-syslink:hover .material-symbols-outlined { transform: translateX(3px); }
/* Card da Home clicavel inteiro (o "Acessar ->" vira stretched-link cobrindo o card) */
body.atlas-ui .au-syscard { position: relative; }
body.atlas-ui .au-syscard .au-syslink::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Cards de HOME DE MODULO (.fixed-height-card) — iaHome/finHome/ctbHome/etc. compartilham o padrao,
entao migram TODOS por CSS (sem editar cada view): visual do au-syscard + card inteiro clicavel +
"Acessar" vira link com seta (nao botao solido). */
body.atlas-ui .fixed-height-card {
position: relative;
border: 1px solid var(--au-line); border-radius: 16px; box-shadow: var(--au-shadow);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.atlas-ui .fixed-height-card:hover {
transform: translateY(-3px); box-shadow: var(--au-shadow-hover);
border-color: color-mix(in srgb, var(--bs-primary, #219897) 30%, var(--au-line));
}
body.atlas-ui .fixed-height-card .card-body { padding: 1.4rem 1.3rem; }
body.atlas-ui .fixed-height-card .btn.btn-primary.btn-block {
background: transparent !important; border: 0 !important; box-shadow: none !important;
color: var(--bs-primary, #219897) !important; font-weight: 600;
width: auto; padding: 0; text-align: left; filter: none !important;
display: inline-flex; align-items: center; gap: .35rem;
}
body.atlas-ui .fixed-height-card .btn.btn-primary.btn-block::before { content: ""; position: absolute; inset: 0; z-index: 1; }
body.atlas-ui .fixed-height-card .btn.btn-primary.btn-block::after { content: "\2192"; font-size: 1.1em; line-height: 1; transition: transform .18s ease; }
body.atlas-ui .fixed-height-card:hover .btn.btn-primary.btn-block::after { transform: translateX(3px); }
/* ============================ Rail Conversas (Dialog embutido) — Fase 2 shell ============================
Recolhido por padrao (so a alca), abre por cima ao clicar. Reusa os transforms do proprio
SocialV (mini = recolhido; .right-sidebar = aberto), so invertendo o default para .atlas-ui.
Libera o ~20% da tela que o painel aberto ocupava. O JS alterna body.rail-aberto. */
/* Mira .right-sidebar-mini DIRETO (o tema inverte a logica em telas >=1500px, onde
o elemento SEM a classe .right-sidebar fica aberto). !important vence a media
query e qualquer transform inline setado pelo app.js do SocialV. */
/* Recolhido = FAIXA FINA VISIVEL na borda direita (como na proposta), so com a alca de chat.
.rail-aberto = a gaveta desliza (360px) por cima do conteudo. Sem o transform que jogava
tudo pra fora (que fazia a gaveta "sumir"). */
body.atlas-ui .right-sidebar-mini {
transform: none !important;
width: 52px !important;
height: calc(100vh - 4.5rem) !important;
overflow: hidden !important;
background: var(--au-surface);
border-left: 1px solid var(--au-line);
transition: width .24s ease;
z-index: 1030;
}
body.atlas-ui .right-sidebar-panel { width: auto !important; height: 100% !important; box-shadow: none; }
/* Neutraliza o .card interno do SocialV dentro do rail — ele herdava borda + cantos
arredondados (do estilo global de .card) e criava uma "caixa dentro da caixa". */
body.atlas-ui .right-sidebar-mini .card,
body.atlas-ui .right-sidebar-mini .card-body {
border: 0 !important; border-radius: 0 !important;
background: transparent !important; box-shadow: none !important;
}
body.atlas-ui .right-sidebar-mini .media-height { display: none !important; }
body.atlas-ui .right-sidebar-toggle {
position: static !important;
margin: 12px auto 0 !important;
opacity: 1 !important;
width: 38px; height: 38px; border-radius: 11px;
display: flex !important; align-items: center; justify-content: center;
}
/* Aberto: ancorado na classe .right-sidebar que o PROPRIO toggle do SocialV alterna
(o handler dele bloqueava o meu; keyar no estado dele faz o clique nativo funcionar). */
body.atlas-ui .right-sidebar-mini.right-sidebar {
width: 360px !important; max-width: 92vw;
box-shadow: -18px 0 44px rgba(11, 35, 32, .12);
}
body.atlas-ui .right-sidebar-mini.right-sidebar .media-height { display: block !important; }
/* ============================ Full-width — Fase 2 shell ============================
Conteudo de ponta a ponta: tira o max-width do container central do content-page
(filho direto, para NAO alargar containers aninhados dentro das Views). O rail
recolhido liberou esse espaco. */
body.atlas-ui #content-page > .container {
/* Cap generoso (decisao PO 2026-07-08): full em monitores normais (ate ~1900px vai de ponta
a ponta), mas em ultrawide para de esticar e centraliza com respiro nas laterais. */
max-width: 1900px;
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 3.25rem; /* folga p/ a alca do rail recolhido nao cobrir o conteudo */
}
/* A sidebar do Atlas e position:fixed (250px) e o content-page nao tinha margin-left
(antes o container centralizado escapava; full-width exige compensar). So no desktop —
no mobile a sidebar e off-canvas. */
@media (min-width: 992px) {
/* :has(.sidebar) — so aplica a margem quando existe o menu lateral (o _Layout_Sistema).
No _Layout_Dialog (sem menu) nao ha margem, some o vao lateral esquerdo. */
body.atlas-ui:has(.sidebar) #content-page { margin-left: 250px; }
body.atlas-ui:has(.sidebar) .iq-footer { margin-left: 250px !important; width: auto !important; }
}
/* [Atlas 2026-07-10] Inputs de data/hora preenchem a COLUNA (o teto de 210px deixava um "vao" ao
lado do campo quando a coluna era mais larga — reclamacao do PO). A largura vem do LAYOUT, igual
aos demais campos; o icone de calendario nativo fica na borda direita da coluna. */
body.atlas-ui input[type="date"],
body.atlas-ui input[type="datetime-local"],
body.atlas-ui input[type="time"],
body.atlas-ui input[type="month"] { width: 100%; max-width: 100%; }
/* [Atlas 2026-07-10] Removido o TETO de largura global dos campos. Antes limitava .form-control a
28rem e textarea a 44rem -> deixava textareas de SQL/codigo e campos de acao pela METADE, com
vazio a direita (reclamacao do PO). A largura do campo deve vir do LAYOUT (colunas/grid do
proprio formulario), nao de um teto CSS global: campo que precisa ser estreito fica numa coluna;
o resto preenche o container. */
/* [Atlas 2026-07-10] Secao de formulario — agrupa campos relacionados dentro de um card, no lugar
das caixas "border border-light" do SocialV. Superficie levissima + linha fina no token, com um
titulo de secao discreto (teal). Reutilizavel em qualquer formulario do novo visual. */
body.atlas-ui .au-formsection {
border: 1px solid var(--au-line, rgba(0,0,0,.1));
border-radius: 12px;
background: color-mix(in srgb, var(--au-ink, #0b1324) 3%, transparent);
padding: 1rem 1.15rem 1.15rem;
}
body.atlas-ui .au-formsection-title {
font-size: .78rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--bs-primary, #219897);
margin-bottom: .85rem;
}
/* [Atlas 2026-07-10] Formularios responsivos no novo visual: no MOBILE as colunas de campo
empilham (100%), independente do col-N do desktop. Evita campo espremido no celular sem ter
que mexer no col de cada formulario no sweep. So no novo visual (body.atlas-ui). */
@media (max-width: 767.98px) {
body.atlas-ui .formCadastro .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}
/* [Atlas 2026-07-10] Marcador (faixa de tags, ViewComponent compartilhado) no novo visual: tira a
caixa branca alert-light do SocialV (tem #fff !important inline) e usa superficie/linha do token,
coerente com os demais campos. So body.atlas-ui — flag off = caixa branca original. */
body.atlas-ui .tag-container.alert.alert-light {
background: var(--au-surface) !important;
border: 1px solid var(--au-line) !important;
border-radius: 10px !important;
color: var(--au-ink);
/* Compacta a caixa: era ~61px (padding 10px + tagify 39px), alta demais vs o botao (34px). */
padding: 3px 8px !important;
min-height: 0 !important;
align-items: center;
}
body.atlas-ui .tag-container .tagify {
background: transparent;
min-height: 30px;
align-self: center;
--tag-pad: 2px 6px;
--tag-inset-shadow-size: 1px;
}
body.atlas-ui .tag-container .tagify__input { margin: 2px 0; }
/* ============================ F2 — Menu lateral (Sereno) ============================
Itens em "pill", ativo com teal da marca (nao o #35BFC1 do SocialV), icones sutis.
Ordem/dados intactos — so fonte/formato/estado, como combinado. */
body.atlas-ui .sidebar { background: var(--au-surface); border-right: 1px solid var(--au-line); }
body.atlas-ui .sidebar .nav-link {
border-radius: 10px; margin: 1px 10px; padding: 9px 12px;
color: var(--au-ink-soft); font-weight: 500;
transition: background .15s ease, color .15s ease;
}
body.atlas-ui .sidebar .nav-link:hover { background: var(--au-surface-2); color: var(--au-ink); }
body.atlas-ui .sidebar .nav-link.active,
body.atlas-ui .sidebar li.active > .nav-link {
background: color-mix(in srgb, var(--bs-primary, #219897) 11%, var(--au-surface));
color: color-mix(in srgb, var(--bs-primary, #219897) 82%, #06231f);
font-weight: 600;
}
body.atlas-ui .sidebar .nav-link .material-symbols-outlined { font-size: 20px; opacity: .78; transition: opacity .15s ease, color .15s ease; }
body.atlas-ui .sidebar .nav-link:hover .material-symbols-outlined { opacity: 1; }
body.atlas-ui .sidebar .nav-link.active .material-symbols-outlined { opacity: 1; color: var(--bs-primary, #219897); }
/* cabecalho de secao ("Sistemas"): tira o #35BFC1 do SocialV, deixa no charcoal suave (rotulo) */
body.atlas-ui .sidebar .nav-link[data-bs-toggle], body.atlas-ui .sidebar > .nav > .nav-item > .nav-link.static-item { color: var(--au-ink-soft); }
/* ============================ F2 — Topbar + dropdowns do shell (Sereno/Apple) ============================
Os dropdowns (organizacoes/perfil/sino) ja sao Bootstrap nativo; o SocialV so os estiliza via
sub-drop/caption-menu/iq-sub-card. Aqui reveste-se essas classes no padrao atlas-ui (sem tocar markup). */
body.atlas-ui .iq-top-navbar, body.atlas-ui .iq-navbar { background: var(--au-surface); border-bottom: 1px solid var(--au-line); box-shadow: none; }
body.atlas-ui .iq-header-logo img { width: 132px; height: auto; }
/* icones/acoes da barra */
body.atlas-ui .navbar-list .nav-item > a .material-symbols-outlined,
body.atlas-ui .navbar-list .nav-item > .dropdown-toggle .material-symbols-outlined { color: var(--au-ink-soft); transition: color .15s ease; }
body.atlas-ui .navbar-list .nav-item > a:hover .material-symbols-outlined,
body.atlas-ui .navbar-list .nav-item > .dropdown-toggle:hover .material-symbols-outlined { color: var(--bs-primary, #219897); }
/* dropdowns sub-drop / caption-menu -> cartao limpo (Apple) */
body.atlas-ui .sub-drop.dropdown-menu, body.atlas-ui .caption-menu.dropdown-menu,
body.atlas-ui .sub-drop, body.atlas-ui .caption-menu {
border: 1px solid var(--au-line); border-radius: 14px; box-shadow: var(--au-shadow-pop); padding: 6px; max-height: min(82vh, 560px); overflow-y: auto; overflow-x: hidden;
}
body.atlas-ui .sub-drop .card, body.atlas-ui .caption-menu .card { border: 0 !important; box-shadow: none !important; background: transparent !important; display: block !important; height: auto !important; }
/* Blindagem: em telas de dashboard (finHome etc.) um script do SocialV seta height inline no
.card-body do dropdown (slider de "friend requests"), achatando as linhas de UOP -> sobreposicao.
Forcamos altura natural, escopado SO aos dropdowns da topbar (nao afeta os cards das paginas). */
body.atlas-ui .sub-drop .card-body, body.atlas-ui .caption-menu .card-body { height: auto !important; min-height: 0 !important; }
body.atlas-ui .sub-drop .card-header, body.atlas-ui .caption-menu .card-header { background: transparent; border-bottom: 1px solid var(--au-line-soft); padding: 10px 12px; }
body.atlas-ui .sub-drop .card-header.bg-primary { background: color-mix(in srgb, var(--bs-primary, #219897) 10%, var(--au-surface)) !important; }
body.atlas-ui .sub-drop .card-header.bg-primary .text-white, body.atlas-ui .sub-drop .card-header.bg-primary h6 { color: var(--au-ink) !important; }
/* iq-sub-card escopado SO aos dropdowns (nao global) + margem p/ respiro entre itens (P1); sem mexer no padding do SocialV (evita quebrar o iq-sub-card-big do dropdown de orgs) */
body.atlas-ui .sub-drop .iq-sub-card, body.atlas-ui .caption-menu .iq-sub-card { border-radius: 10px; border: 0 !important; transition: background .12s ease; margin: 3px 0; }
body.atlas-ui .sub-drop .iq-sub-card:hover, body.atlas-ui .caption-menu .iq-sub-card:hover { background: var(--au-surface-2); }
/* botao "Alternar" (trocar UOP) mais discreto */
body.atlas-ui .iq-sub-card .btn.btn-primary.rounded { padding: 5px 12px; font-size: 12.5px; font-weight: 600; }
/* Mata o bg-primary #35BFC1 do SocialV dentro dos dropdowns (caixa teal atras de "Notificacoes" etc.) */
body.atlas-ui .sub-drop .bg-primary, body.atlas-ui .caption-menu .bg-primary {
background-color: transparent !important;
color: var(--au-ink) !important;
}
body.atlas-ui .sub-drop .header-title h5, body.atlas-ui .sub-drop .header-title h6 { color: var(--au-ink) !important; }
/* Dropdowns do topo acima da gaveta (rail z-index 1030) */
body.atlas-ui .sub-drop.dropdown-menu, body.atlas-ui .caption-menu.dropdown-menu { z-index: 1045; }
/* Sidebar com respiro no topo (nao colada sob a topbar) */
body.atlas-ui .sidebar { padding-top: 12px; }
/* Gaveta: ao abrir uma conversa (chat-lateral-aberto) alarga para caber o chat */
body.atlas-ui.chat-lateral-aberto .right-sidebar-mini.right-sidebar { width: 480px !important; max-width: 94vw; }
/* Scroll nesting: com o chat aberto o wheel deve ir para o iframe do chat, nao para o painel externo.
Trava o overflow do painel/media-height -> o iframe (altura fixa) rola por dentro. */
body.atlas-ui.chat-lateral-aberto .right-sidebar-panel,
body.atlas-ui.chat-lateral-aberto .right-sidebar-mini .media-height { overflow: hidden !important; }
/* Backdrop transparente sob a gaveta aberta: captura cliques ate sobre iframes cross-origin
(Metabase no finHome), onde o mousedown nao borbulha pro documento pai -> permite fechar. */
body.atlas-ui #atlasRailBackdrop { position: fixed; inset: 0; z-index: 1029; display: none; background: transparent; }
body.atlas-ui:has(.right-sidebar-mini.right-sidebar) #atlasRailBackdrop { display: block; }
/* Controle de fonte A-/A+ : contorno de pill UNICO no grupo; botoes sem caixa individual.
So o contorno — sem mexer em tamanho/padding. */
body.atlas-ui .navbar-list > .nav-item:first-child { border: 1px solid var(--au-line); border-radius: 999px; align-self: center; height: 36px; }
body.atlas-ui .navbar-list > .nav-item:first-child > * { align-self: center; }
body.atlas-ui .navbar-list .nav-item .btn-light { border: 0; background: transparent; border-radius: 999px; }
body.atlas-ui #atlasFontNivel { font-weight: 600; color: var(--au-ink-soft); }
/* Rotulo do perfil ao lado do avatar (topbar): discreto como na proposta */
body.atlas-ui #drop-down-arrow .caption h6 { font-size: 12px; font-weight: 600; color: var(--au-ink-soft); }
/* Breadcrumb: enxugar os icones (predio + indicador de ambiente) da linha Organizacao > Unidade. */
body.atlas-ui .iq-navbar .navbar-inner .flex-column > div:first-child > .material-symbols-outlined { display: none; }
/* Respiro uniforme entre os controles da direita (antes: os ultimos ficavam colados, gap 0). */
body.atlas-ui .navbar-list { gap: 10px; }
body.atlas-ui .navbar-list > .nav-item { margin-right: 0 !important; }
/* Rodape fixo da sidebar: versao + ambiente (nao rola com o menu). primary=Prod, warning=DEV.
aside = flex-column; body ocupa o espaco e rola; footer fica sempre embaixo. */
body.atlas-ui aside.sidebar { display: flex; flex-direction: column; }
body.atlas-ui aside.sidebar > .sidebar-body { flex: 1 1 auto; min-height: 0; }
body.atlas-ui .sidebar-footer { flex: 0 0 auto; padding: 11px 16px; border-top: 1px solid var(--au-line-soft); background: var(--au-surface); }
body.atlas-ui .au-envfoot { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; line-height: 1.15; }
body.atlas-ui .au-envfoot .material-symbols-outlined { font-size: 18px; flex: 0 0 auto; }
body.atlas-ui .au-envfoot-prod { color: var(--bs-primary, #219897); }
body.atlas-ui .au-envfoot-dev { color: #b26a00; }
/* Menu (sidebar): densidade um pouco mais compacta (itens menos altos), como na proposta. */
body.atlas-ui #sidebar-menu > .nav-item > .nav-link { padding-top: 7px; padding-bottom: 7px; }
/* Tipografia/peso do menu alinhados ao menu mobile bespoke (itens estavam em #35BFC1 proibido, peso 600). */
body.atlas-ui #sidebar-menu .nav-link .item-name { font-size: 13px; font-weight: 500; color: var(--au-ink); }
body.atlas-ui #sidebar-menu .nav-link .icon { color: var(--au-ink-soft); }
body.atlas-ui #sidebar-menu .megamenu-item .nav-link .item-name { font-weight: 500; color: var(--au-ink); }
body.atlas-ui #sidebar-menu .static-item .default-icon { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--au-ink-faint); }
/* Item ativo: destaque no acento da UOP (nao no peso generico). */
body.atlas-ui #sidebar-menu .nav-link.active .item-name,
body.atlas-ui #sidebar-menu .nav-item.active > .nav-link .item-name { font-weight: 600; color: var(--bs-primary, #219897); }
body.atlas-ui #sidebar-menu .nav-link.active .icon { color: var(--bs-primary, #219897); }
/* ============================ Responsividade (1o passe) ============================
Tablet/mobile (< lg): a gaveta lateral (rail 56px) some e libera a largura; o conteudo
e o rodape perdem a reserva de 56px; o rodape "Atlas ERP" nao vaza sobre o conteudo. */
@media (max-width: 991.98px) {
body.atlas-ui .au-rail { display: none !important; }
body.atlas-ui #content-page { margin-right: 0 !important; }
body.atlas-ui .iq-footer { margin-right: 0 !important; }
body.atlas-ui .sidebar-footer { display: none !important; }
/* "+" (controle responsivo do DataTables) com respiro (nao colado) */
body.atlas-ui table.dataTable td.dtr-control { padding-left: 2.4rem !important; }
body.atlas-ui table.dataTable td.dtr-control::before { margin-left: 3px; }
}
/* iPad (768-991): a coluna de menu tambem some por padrao (o SocialV a mostra nessa faixa);
o burger (body.sidebar-main, app.js) abre por cima. <768 fica com o comportamento nativo. */
@media (min-width: 768px) and (max-width: 991.98px) {
/* iPad: a visibilidade da sidebar e controlada SO por body.sidebar-main (o burger, app.js:136).
O sidebar-mini do SocialV (que no tablet tambem mexe no transform) e NEUTRALIZADO aqui — era o
que dessincronizava e deixava a sidebar num estado quebrado intermitente ("as vezes fica assim"). */
body.atlas-ui aside.sidebar,
body.atlas-ui aside.sidebar.sidebar-mini { transform: translateX(-100%) !important; transition: transform .3s ease; z-index: 1200; box-shadow: 8px 0 30px rgba(10, 16, 15, .12); }
body.atlas-ui.sidebar-main aside.sidebar,
body.atlas-ui.sidebar-main aside.sidebar.sidebar-mini { transform: none !important; }
}
/* Visual novo: a sidebar NUNCA fica icon-only. O SocialV liga `sidebar-mini` por PADRAO (preferencia
salva via app.js), mas a proposta e sidebar FULL. Neutraliza em QUALQUER largura o encolher
(max-width 5rem) e o esconder-rotulos (span scale(0)); no desktop, tambem o translateX do mini. */
body.atlas-ui aside.sidebar.sidebar-mini { max-width: 15.625rem !important; }
body.atlas-ui aside.sidebar.sidebar-mini .sidebar-list .navbar-nav .nav-item .nav-link span { transform: none !important; opacity: 1 !important; }
body.atlas-ui #content-page { transition: margin-left .3s ease; }
@media (min-width: 992px) {
/* Desktop: mini neutralizado -> sidebar FULL por padrao (o app.js liga mini sozinho ~1456; ignoramos). */
body.atlas-ui aside.sidebar, body.atlas-ui aside.sidebar.sidebar-mini { transform: none !important; }
/* 'Fechar' (burger -> body.sidebar-main): esconde a sidebar de vez (nao mini) + conteudo full-width. */
body.atlas-ui.sidebar-main aside.sidebar, body.atlas-ui.sidebar-main aside.sidebar.sidebar-mini { transform: translateX(-100%) !important; }
body.atlas-ui.sidebar-main:has(.sidebar) #content-page { margin-left: 0; }
body.atlas-ui.sidebar-main:has(.sidebar) .iq-footer { margin-left: 0 !important; }
}
/* Dialog no MOBILE: modo chat MAXIMIZADO — sem rodape (Politica de privacidade) e sem respiro no
topo/laterais (o chat preenche a tela). Escopado ao chat-page (.cp-chatpage) -> nao afeta Sistema.
IMPORTANTE: excluir a GAVETA (html.em-iframe) — ela ja se dimensiona sozinha (dialog-chat.css usa
100vh e NAO tem topbar); se meus overrides pegarem la, quebram a gaveta. */
@media (max-width: 991.98px) {
/* [Atlas 2026-07-25] Dialog no MOBILE (<=991): modo chat MAXIMIZADO — sem logo, sem rodape, edge-to-edge.
TOPBAR: encolhe ao conteudo via min-height:0 + line-height:normal. O vilao da altura NAO era o
min-height e sim o line-height 4.563rem do socialv (dimensionado p/ a logo); a 56px sobrava uma
faixa branca ABAIXO dos icones (o "vao" que o PO marcava). Agora a topbar hugs os icones (~46px) e
nao ha banda. NAO usar display:flex na .iq-top-navbar — a navbar-inner ja distribui back(esq)/tune
(dir) por space-between; um flex ali colapsaria os dois p/ a esquerda.
ALTURA: a cadeia do Dialog usa percentual (content-page/cp-chatpage = height:100%), que exige um pai
com altura DEFINIDA. Por isso #vh-100 = calc(100dvh - 46px) (46 = altura da topbar encolhida): sem
isso o content-page colapsa e o composer sobe deixando vao no rodape. 100dvh (dinamico) evita o
corte pela barra do navegador. Escopado ao chat-page e FORA da GAVETA (html.em-iframe, que se
dimensiona sozinha via 100vh no dialog-chat.css). NAO tocar no painel interno (esconde o composer). */
html:not(.em-iframe) body.atlas-ui:has(.cp-chatpage) .iq-header-logo { display: none !important; }
html:not(.em-iframe) body.atlas-ui:has(.cp-chatpage) .iq-footer { display: none !important; }
html:not(.em-iframe) body.atlas-ui:has(.cp-chatpage) .iq-top-navbar { min-height: 0 !important; line-height: normal !important; }
html:not(.em-iframe) body.atlas-ui:has(.cp-chatpage) #vh-100 { height: calc(100dvh - 46px) !important; }
html:not(.em-iframe) body.atlas-ui:has(.cp-chatpage) #content-page { height: 100% !important; min-height: 0 !important; padding: 0 !important; }
html:not(.em-iframe) body.atlas-ui:has(.cp-chatpage) .cp-chatpage { height: 100% !important; min-height: 0 !important; border: none !important; border-radius: 0 !important; }
}
/* ============================ Menu mobile proprio (#atlasMobileMenu) ============================
Substitui o offcanvas do SocialV no visual novo. Perfil no topo + fonte + acoes rotuladas + ambiente. */
body.atlas-ui .au-mmenu { width: 84vw; max-width: 340px; background: var(--au-surface); color: var(--au-ink); display: flex; flex-direction: column; }
body.atlas-ui .au-mmenu-head { display: flex; align-items: center; gap: 10px; padding: 16px; border-bottom: 1px solid var(--au-line-soft); }
body.atlas-ui .au-mmenu-profile { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
body.atlas-ui .au-mmenu-ava { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--au-line); }
body.atlas-ui .au-mmenu-id { min-width: 0; }
body.atlas-ui .au-mmenu-nome { font-weight: 700; font-size: 14px; color: var(--au-ink); }
body.atlas-ui .au-mmenu-sub { font-size: 12px; color: var(--au-ink-soft); }
body.atlas-ui .au-mmenu-body { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
body.atlas-ui .au-mmenu-font { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 12px; border-bottom: 1px solid var(--au-line-soft); margin-bottom: 6px; }
body.atlas-ui .au-mmenu-font-lbl { font-size: 13px; color: var(--au-ink-soft); font-weight: 600; }
body.atlas-ui .au-mmenu-fontctl { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--au-line); border-radius: 999px; padding: 2px; }
body.atlas-ui .au-mmenu-fontctl button { border: 0; background: transparent; color: var(--au-ink-soft); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
body.atlas-ui .au-mmenu-fontctl button:hover { color: var(--bs-primary, #219897); background: var(--au-surface-2); }
body.atlas-ui .au-mmenu-fontctl > span { font-size: 12px; font-weight: 600; color: var(--au-ink-soft); min-width: 3em; text-align: center; }
body.atlas-ui .au-mmenu-item { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 10px; color: var(--au-ink); text-decoration: none; font-size: 14px; font-weight: 500; }
body.atlas-ui .au-mmenu-item:hover, body.atlas-ui .au-mmenu-item:active { background: var(--au-surface-2); color: var(--bs-primary, #219897); }
body.atlas-ui .au-mmenu-item .material-symbols-outlined { font-size: 22px; color: var(--au-ink-soft); flex: 0 0 auto; }
body.atlas-ui .au-mmenu-item:hover .material-symbols-outlined { color: var(--bs-primary, #219897); }
/* "Sair": discreto — texto vermelho suave, SEM barra cheia (e sem realce de toque do mobile). */
body.atlas-ui .au-mmenu-item-danger { color: #c0491f; background-color: transparent; -webkit-tap-highlight-color: transparent; }
body.atlas-ui .au-mmenu-item-danger .material-symbols-outlined { color: #c0491f; }
body.atlas-ui .au-mmenu-item-danger:hover,
body.atlas-ui .au-mmenu-item-danger:focus,
body.atlas-ui .au-mmenu-item-danger:active { background-color: rgba(219, 84, 36, .08); color: #c0491f; }
body.atlas-ui .au-mmenu-item-danger:hover .material-symbols-outlined { color: #c0491f; }
body.atlas-ui .au-mmenu-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--au-line-soft); font-size: 12px; font-weight: 600; }
body.atlas-ui .au-mmenu-foot .material-symbols-outlined { font-size: 18px; }
/* ============================ Megamenu flyout (acesso a outros sistemas) ============================
O painel usava #fff/#444 hardcoded -> destoava. Refino no visual novo (surface/ink/line/teal). */
body.atlas-ui .megamenu-flyout { background: var(--au-surface); border: 1px solid var(--au-line); border-radius: var(--au-radius-lg, 14px); box-shadow: 0 16px 44px rgba(16, 48, 45, .14); }
body.atlas-ui .megamenu-flyout hr { border-color: var(--au-line); opacity: 1; }
body.atlas-ui .megamenu-flyout-header .text-primary { color: var(--au-ink) !important; }
body.atlas-ui .megamenu-flyout-col .col-title { color: var(--au-ink-faint); font-size: .68rem; font-weight: 700; letter-spacing: .09em; border-bottom: 0; padding-bottom: 2px; margin-bottom: 4px; }
body.atlas-ui .megamenu-flyout-col a { color: var(--au-ink); padding: 6px 8px; border-radius: 8px; line-height: 1.3; }
body.atlas-ui .megamenu-flyout-col a:hover { color: var(--bs-primary, #219897); background: var(--au-surface-2); }
body.atlas-ui .megamenu-flyout-col .col-direct-link { color: var(--bs-primary, #219897) !important; }
/* ================= Componentes bespoke do redesign (proposta aprovada) =================
Markup e estilo PROPRIOS do Atlas Design System — NAO herdam a marcacao do SocialV.
Usados nas telas migradas sob a flag (piloto: Contas a Receber). */
/* Titulo de pagina — padrao de marca leve+destaque (charcoal leve / palavra-destaque teal) */
body.atlas-ui .au-page-title { font-weight: 350; font-size: 24px; letter-spacing: -.02em; line-height: 1.12; margin: 0 0 21px; color: var(--au-ink); display: flex; align-items: center; gap: 4px; }
body.atlas-ui .au-page-title b { font-weight: 700; color: var(--bs-primary, #219897); }
body.atlas-ui .au-page-sub { color: var(--au-ink-soft); font-size: 13px; margin: 0 0 14px; }
/* Tabs no nivel da pagina (novo layout): bare — sem fundo/canto reto, so o sublinhado (proposta) */
body.atlas-ui .au-page-title + .nav-tabs { background: transparent; }
/* Afordancia de ajuda ⓘ com popover no hover — surfaca a descricao do catalogo */
body.atlas-ui .au-help { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: var(--au-ink-faint); cursor: help; vertical-align: middle; transition: color .15s, background .15s; }
body.atlas-ui .au-help:hover { color: var(--bs-primary, #219897); background: color-mix(in srgb, var(--bs-primary, #219897) 12%, transparent); }
body.atlas-ui .au-help > .material-symbols-outlined { font-size: 18px; line-height: 1; }
body.atlas-ui .au-help .au-help-pop { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(5px); width: 250px; background: #23302e; color: #fff; font-size: 11.5px; font-weight: 500; line-height: 1.45; text-align: left; letter-spacing: 0; border-radius: 9px; padding: 9px 12px; opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s; z-index: 1050; box-shadow: 0 12px 28px rgba(0,0,0,.22); }
body.atlas-ui .au-help .au-help-pop b { color: #5fdcc7; font-weight: 700; }
body.atlas-ui .au-help:hover .au-help-pop { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
/* Toolbar de acoes (busca + marcadores + exportar + acao primaria) */
body.atlas-ui .au-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
body.atlas-ui .au-toolbar .au-spacer { flex: 1 1 auto; }
body.atlas-ui .au-toolbar .au-search { width: 240px; max-width: 100%; }
/* Marcadores (ViewComponent compartilhado) fica fantasma DENTRO desta toolbar — sem afetar outras telas */
body.atlas-ui .au-toolbar .dropdown > .btn-success { background: transparent; border: 1px solid var(--au-line); color: var(--au-ink-soft); font-weight: 600; }
body.atlas-ui .au-toolbar .dropdown > .btn-success:hover { color: var(--bs-primary, #219897); border-color: color-mix(in srgb, var(--bs-primary, #219897) 40%, var(--au-line)); }
/* Botao fantasma — exportacoes (Imprimir/Excel/PDF) */
body.atlas-ui .btn.au-ghost { background: transparent; color: var(--au-ink-soft); border: 1px solid var(--au-line); }
body.atlas-ui .btn.au-ghost:hover { color: var(--bs-primary, #219897); border-color: color-mix(in srgb, var(--bs-primary, #219897) 40%, var(--au-line)); filter: none; }
/* Painel de filtros — card proprio com grid (5 campos + botao) */
body.atlas-ui .au-filters { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 12px; align-items: end; padding: 16px; border: 1px solid var(--au-line); border-radius: var(--au-radius-lg, 14px); background: var(--au-surface); margin-bottom: 16px; }
body.atlas-ui .au-filters .au-fld { display: flex; flex-direction: column; gap: 5px; }
body.atlas-ui .au-filters .au-fld label { font-size: 11px; font-weight: 600; color: var(--au-ink-soft); margin: 0; display: inline-flex; align-items: center; gap: 3px; }
body.atlas-ui .au-filters .au-fld .form-control, body.atlas-ui .au-filters .au-fld .form-select { width: 100%; max-width: none; }
/* O botao Filtrar vai SEMPRE p/ a ultima coluna (auto) e com tamanho de conteudo — sem
justify-self ele estica p/ preencher a coluna 1fr (ficava "enorme" em telas com 1-2 filtros). */
body.atlas-ui .au-filters .au-filter-btn { grid-column: -2 / -1; justify-self: end; align-self: end; }
@media (max-width: 1200px){ body.atlas-ui .au-filters { grid-template-columns: 1fr 1fr; } body.atlas-ui .au-filters .au-filter-btn { grid-column: 1 / -1; justify-self: end; } }
/* ⓘ do TITULO de pagina abre o popover para BAIXO — senao some atras da topbar (titulo fica no topo).
Escopado ao titulo; os demais ⓘ (ex.: Natureza nos filtros) seguem abrindo para cima. */
body.atlas-ui .au-page-title .au-help .au-help-pop { bottom: auto; top: calc(100% + 9px); transform: translateX(-50%) translateY(-5px); }
body.atlas-ui .au-page-title .au-help:hover .au-help-pop { transform: translateX(-50%); }
/* Card da tabela (o .card logo apos os filtros OU a toolbar, nos catalogos sem filtro): alinhar
rodape (info + paginacao) ao padding das celulas (18px) e dar respiro — antes o rodape colava
na borda do card (margens zeradas). :is() cobre os dois arquetipos (com filtros e catalogo). */
/* Mira o CARD "NU" de tabela (o que NAO tem .card-body — so embrulha o Component.Tabela).
Cobre os catalogos (card apos au-filters/au-toolbar) E telas com secao propria antes da tabela
(ex.: BaixaManualEmMassa, cujo card vem depois do form de emissao). Cards com .card-body
(filtro/resumo do Extrato/NCM) sao excluidos -> eles ja tem padding proprio. */
body.atlas-ui .card:not(:has(> .card-body)) .dataTables_info { padding: 14px 18px 16px; margin: 0; }
body.atlas-ui .card:not(:has(> .card-body)) .dataTables_paginate { padding: 14px 18px 16px; margin: 0; }
/* ============================ Botoes ============================
Refino de forma/peso/hover (mantendo a hierarquia de cor do produto). */
body.atlas-ui .btn {
border-radius: var(--au-radius-sm);
font-weight: 600;
box-shadow: none;
transition: filter .15s ease, background-color .15s ease, border-color .15s ease;
}
body.atlas-ui .btn:hover { filter: brightness(1.05); }
body.atlas-ui .btn-sm { border-radius: 8px; }
body.atlas-ui .btn-lg { border-radius: 12px; }
body.atlas-ui .btn.d-inline-flex { align-items: center; gap: .375rem; }
/* [Atlas 2026-07-11] Botao de acao = TEAL da marca (decisao PO): no novo visual, btn-success E
btn-primary usam var(--bs-primary) no lugar do azul semantico do SocialV (#50B5FF). Unifica TODOS
os botoes de acao (o "Ok" dos ~67 forms, "Conversar", botoes de modais, etc.) sem varrer 296
ocorrencias de btn-primary arquivo a arquivo. Flag off = azul original. btn-info (roxo) e o padrao
assimetrico de acao arriscada (segura=btn-success + arriscada=btn-link) seguem corretos.
(.au-toolbar dropdown e .au-ghost tem regra propria, mais especifica, e continuam como estao.) */
body.atlas-ui .btn-success,
body.atlas-ui .btn-primary {
background-color: var(--bs-primary, #219897);
border-color: var(--bs-primary, #219897);
color: #fff;
}
body.atlas-ui .btn-success:hover,
body.atlas-ui .btn-success:focus,
body.atlas-ui .btn-success:active,
body.atlas-ui .btn-primary:hover,
body.atlas-ui .btn-primary:focus,
body.atlas-ui .btn-primary:active {
background-color: color-mix(in srgb, var(--bs-primary, #219897) 88%, #000);
border-color: color-mix(in srgb, var(--bs-primary, #219897) 88%, #000);
color: #fff;
filter: none;
}
body.atlas-ui .btn-light {
background-color: var(--au-surface);
border-color: var(--au-line);
color: var(--au-ink-soft);
}
body.atlas-ui .btn-light:hover {
background-color: var(--au-surface-2);
border-color: var(--au-line);
color: var(--au-ink);
filter: none;
}
/* [Atlas 2026-07-11] Botao de acao primaria = TEAL da marca (decisao PO). O SocialV pintava
btn-success de azul #50B5FF, destoando do resto do novo visual (titulo/links/circulo-i em teal).
Agora todo btn-success (Ok dos forms, Conversar, confirmar) usa var(--bs-primary) — respeita o
motor de cor multi-tenant. So body.atlas-ui -> flag off = azul SocialV original. O ghost do
dropdown do au-toolbar (regra mais especifica acima) continua transparente. */
body.atlas-ui .btn-success {
background-color: var(--bs-primary, #219897);
border-color: var(--bs-primary, #219897);
color: #fff;
}
body.atlas-ui .btn-outline-success {
color: var(--bs-primary, #219897);
border-color: var(--bs-primary, #219897);
}
body.atlas-ui .btn-outline-success:hover {
background-color: var(--bs-primary, #219897);
border-color: var(--bs-primary, #219897);
color: #fff;
}
/* [Atlas 2026-07-11] Rodape do form: Ok/Cancelar usam float-end mas com margens mt/mb
INCONSISTENTES no markup (um tem mt-2, outro mb-1) -> desalinhavam verticalmente (Ok ~10px
mais baixo). Normaliza no novo visual pra alinharem no mesmo topo. So body.atlas-ui. */
body.atlas-ui form.formCadastro .btn.float-end { margin-top: 0 !important; margin-bottom: 0 !important; }
/* ============================ Tabelas ============================
Cobre Tabela (ViewComponent) e DataTables. */
body.atlas-ui table.dataTable thead th,
body.atlas-ui .table thead th {
text-transform: uppercase;
font-size: .72rem;
letter-spacing: .05em;
font-weight: 700;
color: var(--au-ink-faint);
border-bottom: 1px solid var(--au-line);
padding-top: .7rem;
padding-bottom: .7rem;
}
body.atlas-ui .table > :not(caption) > * > * {
border-bottom-color: var(--au-line-soft);
padding: .72rem .9rem;
vertical-align: middle;
}
body.atlas-ui .table > tbody > tr:last-child > * { border-bottom: 0; }
body.atlas-ui .table-hover > tbody > tr:hover > * { background-color: var(--au-surface-2); }
body.atlas-ui table.dataTable tbody tr:hover { background-color: var(--au-surface-2); }
/* ============================ Badges / etiquetas ============================ */
body.atlas-ui .badge {
font-weight: 600;
border-radius: 999px;
padding: .36em .75em;
letter-spacing: .01em;
}
/* ============================ Alertas (estilo tingido) ============================
Fundo suave + borda semantica + texto na cor — o padrao que o PO aprovou. */
body.atlas-ui .alert {
border-radius: var(--au-radius);
border-width: 1px;
padding: .85rem 1.1rem;
}
body.atlas-ui .alert-success {
background-color: rgba(45, 205, 178, .13);
border-color: rgba(45, 205, 178, .42);
color: var(--au-ok-ink);
}
body.atlas-ui .alert-warning {
background-color: rgba(252, 176, 23, .15);
border-color: rgba(252, 176, 23, .48);
color: var(--au-warn-ink);
}
body.atlas-ui .alert-danger {
background-color: rgba(219, 84, 36, .12);
border-color: rgba(219, 84, 36, .42);
color: var(--au-dang-ink);
}
body.atlas-ui .alert-info {
background-color: rgba(146, 42, 142, .12);
border-color: rgba(146, 42, 142, .4);
color: var(--au-info-ink);
}
body.atlas-ui .alert-primary {
background-color: color-mix(in srgb, var(--bs-primary, #219897) 9%, var(--au-surface));
border-color: color-mix(in srgb, var(--bs-primary, #219897) 32%, var(--au-line));
color: color-mix(in srgb, var(--bs-primary, #219897) 72%, #0b2e2c);
}
/* ============================ Forms ============================ */
body.atlas-ui .form-label {
font-weight: 600;
font-size: .82rem;
color: var(--au-ink-soft);
margin-bottom: .35rem;
}
body.atlas-ui .form-control,
body.atlas-ui .form-select {
border-radius: var(--au-radius-sm);
border-color: var(--au-line);
color: var(--au-ink);
}
body.atlas-ui .form-control::placeholder { color: var(--au-ink-faint); }
body.atlas-ui .form-control:focus,
body.atlas-ui .form-select:focus {
border-color: var(--bs-primary, #219897);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary, #219897) 18%, transparent);
}
body.atlas-ui .input-group-text {
border-radius: var(--au-radius-sm);
border-color: var(--au-line);
background-color: var(--au-surface-2);
color: var(--au-ink-soft);
}
body.atlas-ui .form-check-input { border-color: var(--au-line); }
body.atlas-ui .form-check-input:focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary, #219897) 18%, transparent);
}
/* ============================ Modais ============================ */
body.atlas-ui .modal-content {
border: 1px solid var(--au-line);
border-radius: var(--au-radius-lg);
box-shadow: 0 24px 60px rgba(0, 0, 0, .16);
}
body.atlas-ui .modal-header { border-bottom-color: var(--au-line-soft); }
body.atlas-ui .modal-footer { border-top-color: var(--au-line-soft); }
body.atlas-ui .modal-title { font-weight: 600; letter-spacing: -.01em; }
/* [Atlas 2026-07-11] Modais scrollable cujo conteudo (partial AJAX) envolve .modal-body E
.modal-footer num unico