/* ========================================================================== MODO EMBUTIDO — o sistema rodando DENTRO do quadro do portal. ========================================================================== Por que isto e uma FOLHA no , e nao CSS injetado por JavaScript: O script que fazia isso vivia no fim do arquivo (linha 11.584 de 11.605, no caso do Site 1). O navegador desenhava o cabecalho preto - que esta na linha 3.208 - e mais oito mil linhas de conteudo ANTES de chegar no codigo que mandava esconder. Resultado: a barra piscava na tela a cada troca de painel. Como folha ligada no , a regra existe antes do primeiro pixel: nada pisca, porque nada chega a ser desenhado. O gatilho e o atributo data-embutido no , posto por um script de uma linha tambem no , antes do comecar. O que se esconde foi conferido tela a tela, e o criterio e sempre o mesmo: sai o que o portal ja oferece (marca, navegacao, Portal/Sair, identidade), FICA todo o resto - inclusive o formulario de login, que e a unica saida de quem tiver a sessao expirada dentro do quadro. ========================================================================== */ /* --- 1. cabecalho e navegacao do sistema ---------------------------------- */ /* Site 1 e Gestao CNH: a barra preta e um

, e o menu vive FORA dela. Atendimento usa

. */ html[data-embutido="1"] header.pro-header, html[data-embutido="1"] header.barra { display: none !important; } /* Central e Painel CT Multas: a barra preta e um

que guardava marca, menu e os botoes Portal/Sair. Com o menu tambem saindo, o aside inteiro fica vazio - sai junto. */ html[data-embutido="1"] aside.sidebar { display: none !important; } /* ...E A GRADE PRECISA SABER DISSO (08/08/2026). Em 07/08 a Central virou uma GRADE de duas colunas: `.app{display:grid; grid-template-columns: var(--lat-larg) minmax(0,1fr)}`, a lateral na primeira e o miolo na segunda. Dentro do quadro a lateral e `display:none` - e item com display:none SAI DA GRADE, nao ocupa celula nenhuma. O miolo entao e colocado automaticamente na PRIMEIRA celula, os 232px da lateral, e a segunda coluna de mil e tantos pixels fica vazia ao lado. O resultado, medido a 1400px: `.main` com 232px de largura e o resto da tela em branco. A tela inteira da Central espremida numa tira. E EXATAMENTE A MESMA LICAO que a secao 1c ja escreve para a casca do portal, quatro paragrafos abaixo: esconder com display:none NAO devolve o espaco da trilha. Ela estava escrita neste arquivo e eu nao a reconheci na Central. Por que a media query de 900px da Central nao salvava: la ela ja e uma coluna so, entao o defeito so aparece ACIMA de 900px - e foi por isso que passou, porque eu testei o modo embutido a 400px. `.painel.html` tambem tem `aside.sidebar`, mas o `.app` dele nao e grade: esta regra e inocua la. */ html[data-embutido="1"] .app { grid-template-columns: minmax(0, 1fr) !important; } /* A barra de abas dos cinco. O menu lateral do portal leva a TODAS elas, o que foi conferido aba a aba antes de esconder - foi assim que apareceu a "Orcamento CNH" da Central, que faltava no menu e teria ficado inalcancavel. Os botoes seguem no DOM: o clique programatico do portal funciona em elemento escondido, entao ?painel= continua caindo no painel certo. */ html[data-embutido="1"] .nav, html[data-embutido="1"] #nav { display: none !important; } /* A barra de acesso do Site 1 (firebase-adapter.js:300) sai INTEIRA. Antes eu escondia so o estado logado, com :has(.ct-topbar-actions), para nao prender quem estivesse com a sessao expirada dentro do quadro. Errei: a barra comeca SEMPRE no estado deslogado e so troca quando a sessao resolve, entao o formulario "Login da equipe" aparecia em toda abertura de painel. A protecao virou o defeito. E ela nao era necessaria: o portal e o sistema compartilham a MESMA sessao, no mesmo dominio. Se a sessao cair, o onAuthStateChanged do portal cai junto, o portal mostra a propria tela de login e o quadro nem existe mais. Nunca ha o caso de estar deslogado aqui dentro e logado la fora. */ html[data-embutido="1"] #firebaseAuthBanner { display: none !important; } /* Sem a barra preta, o conteudo nao precisa mais do respiro do topo. */ html[data-embutido="1"] body { padding-top: 0 !important; } /* A tela de login do proprio sistema (#loginView, presente no CNH, na Central e no Painel) nunca serve aqui dentro: quem chega ao quadro ja entrou pelo portal. Ela aparecia por padrao e so sumia quando a sessao resolvia - era o "login piscando" a cada abertura de painel. */ html[data-embutido="1"] #loginView { display: none !important; } /* --- 1c. O PORTAL DENTRO DE UM SISTEMA (07/08/2026) ----------------------- Ate aqui esta folha descrevia um caminho so: o sistema rodando dentro do quadro do portal. O quadro de avisos e o fluxo do dia inverteram a seta — eles moram na tela inicial do PORTAL, e o Atendimento os abre num quadro pelo mesmo ?painel=&embutido=1 dos outros cinco setores. E o mesmo emprestimo, na outra direcao, e por isso as regras dele ficam AQUI: quem for procurar "o que some no modo embutido" tem de achar os seis sistemas no mesmo lugar, e nao cinco aqui e um escondido no portal.html. A casca do portal e um grid de duas faixas ("barra barra" / "lateral conteudo"). Esconder a barra e a lateral com display:none NAO devolve o espaco delas — o grid continua reservando os 64px da linha e os 268px da coluna, e o quadro apareceria espremido num canto com uma moldura vazia em volta. Por isso o grid tambem e redesenhado: uma area so. */ html[data-embutido="1"] .casca__barra, html[data-embutido="1"] .casca__lateral, /* A TRILHA ENTROU EM 08/08/2026, junto com o cabecalho claro. Ela e uma TERCEIRA faixa do grid da casca, e sem esta linha ela sobreviveria dentro do quadro: a area "trilha" nao existe mais depois do redesenho abaixo, entao o elemento seria colocado sozinho numa linha implicita — uma tira cinza escrita "Portal › ..." atravessada no topo do painel emprestado. Quem acrescentar uma quarta faixa la precisa acrescentar uma linha aqui. */ html[data-embutido="1"] .casca__trilha, html[data-embutido="1"] .casca__veu { display: none !important; } html[data-embutido="1"] .casca { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; grid-template-areas: "conteudo" !important; } /* O respiro da tela cheia (sp-6 em volta) e generoso porque la o quadro tem a largura do portal inteiro. No painel do Atendimento, que a pessoa estreita e alarga na alca, esse mesmo respiro come uma parte grande do que sobrou. */ html[data-embutido="1"] .inicio { padding: var(--ct-sp-4, 16px) !important; } /* --- 1b. nada aparece antes da hora --------------------------------------- Mesmo sem a tela de login, sobrava um piscar: cada sistema desenha o seu estado inicial antes de a sessao resolver. No Site 1 esse estado e o painel PUBLICO ("Seja bem-vindo ao acesso dos seus recursos"), que aparecia por um instante no lugar da fila pedida. Enquanto o sistema nao esta pronto, uma cortina da cor do papel cobre tudo. Quem tira a cortina e /ds/abrir-painel.js, ao marcar data-pronto no : quando o painel certo abriu, ou quando o sistema terminou de carregar, ou por tempo esgotado - nunca fica coberto para sempre. */ html[data-embutido="1"]:not([data-pronto]) body::before { content: ""; position: fixed; inset: 0; z-index: 99999; background: #EDEDE9; /* --ct-plano, o mesmo papel do portal */ } @media (prefers-color-scheme: dark) { html[data-embutido="1"]:not([data-pronto]) body::before { background: #121210; } } /* --- 2. a fileira de filas vira pastilha ---------------------------------- */ /* Mesmo desenho do .ct-chip do design system v3. Os valores estao literais porque esta folha e carregada DENTRO dos sistemas, que ainda nao conhecem /ds/tokens.css; quando cada um migrar, viram var(). #FFFFFF = --ct-superficie #808076 = --ct-linha-forte #56564F = --ct-tinta-2 #1B1B19 = --ct-tinta #F5F5F2 = --ct-rebaixo 13px = --ct-fs-meta 999px = --ct-r-pill */ html[data-embutido="1"] [data-subpainel], html[data-embutido="1"] [data-fila] { display: inline-flex !important; align-items: center; gap: 6px; min-height: 34px; padding: 4px 14px !important; font-size: 13px !important; font-weight: 500 !important; color: #56564F !important; background: #FFFFFF !important; border: 1px solid #808076 !important; border-radius: 999px !important; box-shadow: none !important; text-transform: none !important; transition: background .12s ease, color .12s ease, border-color .12s ease; } html[data-embutido="1"] [data-subpainel]:hover, html[data-embutido="1"] [data-fila]:hover { background: #F5F5F2 !important; color: #1B1B19 !important; } /* A fila aberta fica cheia, como o aria-pressed do design system. O Site 1 marca com .btn-primary (index.html:5004) e o CNH com .btn-dark (cnh.html:1019) - dois nomes para o mesmo estado. */ html[data-embutido="1"] .btn-primary[data-subpainel], html[data-embutido="1"] .btn-dark[data-fila], html[data-embutido="1"] [data-fila].active, html[data-embutido="1"] [data-subpainel][aria-pressed="true"] { background: #1B1B19 !important; border-color: #1B1B19 !important; color: #FFFFFF !important; }