/* --------------------------------------------------------------------------- Verde no conteudo do portal — Bootstrap e os azuis cravados no CSS antigo. O azul do portal vem de tres lugares, e cada um pede um tratamento: 1. **Mantine** (~43% do que aparece numa tela): resolvido no Python, pelo `theme` do `MantineProvider` (`layouts/tema_v2.py`). Nao ha nada dele aqui — as variaveis do Mantine sao declaradas em `:root[data-mantine-color-scheme="light"]`, que vence um `:root` proprio, entao CSS nao resolveria mesmo. 2. **Bootstrap** (~19%): os componentes trazem o azul **literal** (`.btn-primary { --bs-btn-bg: #0d6efd }`), e nao `var(--bs-primary)` — trocar a variavel nao muda nada. Cada familia precisa da sua regra, e e o grosso deste arquivo. 3. **CSS do proprio portal** (~38%): `#2959b0`, `#2959c6`, `#00AEF9` cravados em `css_erp.css`, `custom1.css` e `mobile.css`. Nenhum tema alcanca; a unica saida e sobrescrever seletor por seletor, o que esta na secao final. Dois ancoradouros, os dois presos a `LAYOUT_V2` (nada aqui vale com a flag desligada): - `:root:has(#sidebar.sidebar_v2)` — o padrao. Alcanca **tambem o que o React renderiza em portal**, fora da arvore do `#main-content`: modal, tooltip, popover, offcanvas. Foi por nao alcancar isso que os titulos `.bigblue` continuavam azuis dentro dos modais, mesmo com a regra "aplicada" — o `dbc.Modal` do react-bootstrap e pendurado direto no ``. - `#sidebar.sidebar_v2 ~ #main-content` — onde o alvo **precisa** ser o conteudo, e nao a barra: as abas, o recuo do topo no mobile e os `` sem classe. Este ultimo em especial: com o ancoradouro amplo ele passaria a pintar tambem os links da sidebar, que vivem sobre fundo escuro. Este arquivo carrega depois de `mobile.css` e `style.css` na ordem alfabetica que o Dash usa, que e o que permite vencer as regras de la. --------------------------------------------------------------------------- */ /* Tres verdes, e a diferenca entre eles nao e capricho — e o fundo em que cada um vive. O `#4CC3A6` do logo (usado na sidebar e no login) nasceu para o `#08130F`; sobre o branco do conteudo ele fica lavado e texto branco em cima quase nao le. Por isso o conteudo usa tons mais fechados, e o mais fechado de todos fica no texto, onde o que conta e contraste e nao presenca de marca. Gemeos de `COR_CONTEUDO` e `COR_TEMA_ESCURA` em `layouts/tema_v2.py`, que alimentam a escala do Mantine — os dois lados tem de andar juntos. */ :root { --v-marca: #2E8B76; --v-marca-hover: #25705F; --v-medio: #1D5A4C; --v-escuro: #12332E; --v-claro: #E8F5F1; --v-sobre-marca: #FFFFFF; /* Do handoff `Conteudo Portal BDR`, compartilhados pelas abas e pela tabela. O `#2E8B6F` esta a um digito do `--v-marca` (#2E8B76) e e visualmente o mesmo verde; mantido como o handoff escreveu. Se um dia forem unificados, e trocar aqui. */ --v-verde-escuro: #2E8B6F; --v-texto-inativo: #42544E; --v-borda-clara: #D8E2DE; /* Tabela (`TABELA_SOLICITACOES.md`). */ --v-tab-divisoria: #E4ECE9; --v-tab-cabecalho: #F2F7F5; --v-tab-texto: #122A23; --v-tab-texto-sub: #6B7F78; --v-tab-hover: #F7FAF9; /* Controles de formulario (`SIMULADOR_PORTAL.md`), usados no `tema_simulador_v2.css`. Sao dois cinzas, e a diferenca importa: a borda do controle vazio (checkbox, radio) e mais escura que a do campo em volta, senao o quadradinho desaparece dentro da propria caixa. */ --v-tint: #EAF3F0; --v-borda-tint: #BFDCD2; --v-borda-input: #CBD8D3; --v-borda-controle: #B7C7C1; /* Aviso (`RESULTADO_SIMULACAO.md`, "callout atencao"). Ambar e nao vermelho: o portal usa isto para "leia antes de seguir" — o nome do fundo que vai aparecer no extrato, a agenda que ainda nao abriu — e nao para erro. Vermelho nesses casos le como culpa de quem esta na tela. */ --v-aviso-fundo: #FCF7EC; --v-aviso-borda: #EAD9B0; --v-aviso-icone: #D9A13B; --v-aviso-texto: #5C4A22; --v-aviso-forte: #3E3113; /* Bloqueio: o passo nao da para seguir agora. Um degrau acima do ambar, e nao um tratamento paralelo — mesma estrutura de cinco tons, so a matiz muda. Tijolo abafado, e nao o `firebrick` do CSS antigo: sobre fundo claro e ao lado do verde, vermelho saturado puxa a tela inteira para ele. */ --v-erro-fundo: #FDF3F1; --v-erro-borda: #F0D2CB; --v-erro-icone: #C4503A; --v-erro-texto: #6B322A; --v-erro-forte: #4A2019; } /* ============================================================ BOOTSTRAP */ :root:has(#sidebar.sidebar_v2) .btn-primary { --bs-btn-bg: var(--v-marca); --bs-btn-border-color: var(--v-marca); --bs-btn-color: var(--v-sobre-marca); --bs-btn-hover-bg: var(--v-marca-hover); --bs-btn-hover-border-color: var(--v-marca-hover); --bs-btn-hover-color: var(--v-sobre-marca); --bs-btn-active-bg: var(--v-marca-hover); --bs-btn-active-border-color: var(--v-marca-hover); --bs-btn-active-color: var(--v-sobre-marca); --bs-btn-disabled-bg: var(--v-marca); --bs-btn-disabled-border-color: var(--v-marca); --bs-btn-disabled-color: var(--v-sobre-marca); --bs-btn-focus-shadow-rgb: 76, 195, 166; } :root:has(#sidebar.sidebar_v2) .btn-outline-primary { --bs-btn-color: var(--v-medio); --bs-btn-border-color: var(--v-marca); --bs-btn-hover-bg: var(--v-marca); --bs-btn-hover-border-color: var(--v-marca); --bs-btn-hover-color: var(--v-sobre-marca); --bs-btn-active-bg: var(--v-marca); --bs-btn-active-border-color: var(--v-marca); --bs-btn-active-color: var(--v-sobre-marca); --bs-btn-disabled-color: var(--v-medio); --bs-btn-disabled-border-color: var(--v-marca); --bs-btn-focus-shadow-rgb: 76, 195, 166; } :root:has(#sidebar.sidebar_v2) .btn-link { --bs-btn-color: var(--v-medio); --bs-btn-hover-color: var(--v-escuro); } :root:has(#sidebar.sidebar_v2) .form-check-input:checked { background-color: var(--v-marca); border-color: var(--v-marca); } :root:has(#sidebar.sidebar_v2) .form-check-input:focus, :root:has(#sidebar.sidebar_v2) .form-control:focus, :root:has(#sidebar.sidebar_v2) .form-select:focus { border-color: var(--v-marca); box-shadow: 0 0 0 .25rem rgba(76, 195, 166, .25); } :root:has(#sidebar.sidebar_v2) .text-primary { color: var(--v-medio) !important; } :root:has(#sidebar.sidebar_v2) .bg-primary, :root:has(#sidebar.sidebar_v2) .text-bg-primary, :root:has(#sidebar.sidebar_v2) .badge.bg-primary { background-color: var(--v-marca) !important; color: var(--v-sobre-marca) !important; } :root:has(#sidebar.sidebar_v2) .progress-bar { background-color: var(--v-marca); } /* Paginacao (`dbc.Pagination`, usada pelo `html_table`). Vem pelas variaveis do proprio Bootstrap 5.3, e nao por regra em cima de cada estado: assim hover, foco, ativo e desabilitado saem coerentes de uma vez, sem uma regra por combinacao. O Bootstrap encosta os itens (`margin-left: -1px`) e arredonda so as pontas, para virarem um bloco unico. Aqui cada pagina e um botao proprio, separado por `gap` — combina com o card da tabela, que ja e um retangulo so. */ :root:has(#sidebar.sidebar_v2) .pagination { --bs-pagination-color: var(--v-texto-inativo); --bs-pagination-bg: #fff; --bs-pagination-border-color: var(--v-borda-clara); --bs-pagination-border-radius: 8px; --bs-pagination-font-size: 13px; --bs-pagination-padding-x: .7rem; --bs-pagination-padding-y: .35rem; --bs-pagination-hover-color: var(--v-verde-escuro); --bs-pagination-hover-bg: var(--v-tab-cabecalho); --bs-pagination-hover-border-color: var(--v-borda-clara); --bs-pagination-focus-color: var(--v-verde-escuro); --bs-pagination-focus-bg: var(--v-tab-cabecalho); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(46, 139, 111, .2); --bs-pagination-active-color: #fff; --bs-pagination-active-bg: var(--v-verde-escuro); --bs-pagination-active-border-color: var(--v-verde-escuro); --bs-pagination-disabled-color: #A6B8B2; --bs-pagination-disabled-bg: #fff; --bs-pagination-disabled-border-color: var(--v-borda-clara); gap: 6px; font-family: Manrope, sans-serif; font-weight: 600; } :root:has(#sidebar.sidebar_v2) .pagination .page-link { border-radius: var(--bs-pagination-border-radius); /* O `-1px` do Bootstrap sobrepoe as bordas dos vizinhos; com `gap` ele deixaria o primeiro item deslocado. */ margin-left: 0; transition: background-color .15s, color .15s; } :root:has(#sidebar.sidebar_v2) .list-group-item.active { background-color: var(--v-marca); border-color: var(--v-marca); color: var(--v-sobre-marca); } :root:has(#sidebar.sidebar_v2) .spinner-border.text-primary, :root:has(#sidebar.sidebar_v2) .spinner-grow.text-primary { color: var(--v-marca) !important; } :root:has(#sidebar.sidebar_v2) .accordion { --bs-accordion-active-color: var(--v-medio); --bs-accordion-active-bg: var(--v-claro); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(76, 195, 166, .25); } :root:has(#sidebar.sidebar_v2) .nav-pills { --bs-nav-pills-link-active-bg: var(--v-marca); --bs-nav-pills-link-active-color: var(--v-sobre-marca); } /* Modal de tela cheia (o checkout da simulacao). O react-bootstrap poe `padding-left` **inline** no `.modal` para compensar a barra de rolagem que ele tira do body. Num modal normal isso e invisivel: o dialogo tem margem e se acomoda. No `fullscreen` o dialogo e `width: 100vw`, entao os 20px empurram a tela inteira para fora e o `overflow: hidden` do `.modal` corta o outro lado — medido em 440px de largura: conteudo comecando em 20 e terminando em 460. `!important` porque o alvo e estilo inline, e nao ha outra forma de venc-lo. O `:has(> .modal-fullscreen)` restringe aos de tela cheia: nos demais a compensacao continua fazendo o que deve. */ :root:has(#sidebar.sidebar_v2) .modal:has(> .modal-fullscreen) { padding-left: 0 !important; padding-right: 0 !important; } /* ==================================================== AZUIS DO PORTAL */ /* Classes de texto de `css_erp.css` e `custom1.css` — todas cravadas em `#2959b0`, `#2959ce` ou `#00AEF9`. Os nomes ("blue", "bigblue", "titleBlue") ficam como estao de proposito: sao centenas de usos espalhados pelos layouts, e o que importa agora e a cor. Renomear e um passo separado. O tom e o `--v-verde-escuro`, o mesmo do cabecalho da tabela e da aba ativa — um verde so para titulo em fundo claro, em vez de tres parecidos. */ :root:has(#sidebar.sidebar_v2) .link, :root:has(#sidebar.sidebar_v2) label.blue, :root:has(#sidebar.sidebar_v2) label.smallblue, :root:has(#sidebar.sidebar_v2) .bigblue, :root:has(#sidebar.sidebar_v2) .boldblue, :root:has(#sidebar.sidebar_v2) label.titleBlue, :root:has(#sidebar.sidebar_v2) label.biggerblue, :root:has(#sidebar.sidebar_v2) label.label_master_tutorial { color: var(--v-verde-escuro); } /* `.tabTitle` fica fora da lista acima porque usa `rgb(41,89,194)` com `!important`, em vez dos hexadecimais das outras. */ :root:has(#sidebar.sidebar_v2) .tabTitle { color: var(--v-verde-escuro) !important; } :root:has(#sidebar.sidebar_v2) button.main_btn { background-color: var(--v-marca); border-color: var(--v-marca); color: var(--v-sobre-marca); } :root:has(#sidebar.sidebar_v2) button.main_btn:hover { background-color: var(--v-marca-hover); border-color: var(--v-marca-hover); } /* ==================================================== ABAS DO CONTEUDO */ /* Handoff `Conteudo Portal BDR` (desktop) e `MOBILE_PORTAL.md` (mobile). O portal monta as abas **duas vezes**, e so uma aparece de cada vez — quem decide e o `mobile.css`: #innertabs > div.flex_column > div#subnavbar_mobile.tabsLayout_mobile <- card; `display: none` >= 768px > div.nav_container.tabsLayout <- barra; `display: none` < 768px Isso explica uma volta que custou caro: estilizar o `ul.listGroup_card` de dentro do `#subnavbar_mobile` no desktop nao muda nada na tela, porque aquele ramo inteiro esta oculto. Por isso cada bloco abaixo esta na sua `@media` — e nao so os seletores de geometria, mas tambem os de cor: `#innertabs .inner_nav_link` sem midia pintaria as opcoes do card do mobile com a cor da barra do desktop. A segunda armadilha esta no `change_tabs` (`application.py`): ele **substitui** o `className` das abas, colocando `'navitem_active'` na ativa e `None` nas demais. Depois da primeira navegacao as inativas ficam sem classe nenhuma — nem `nav-item` —, entao a aba do desktop e alcancada como filho direto do container. No mobile os itens da lista guardam o `list-group-item` do Bootstrap, que o callback nao toca, e esse serve. */ /* -------------------------------------------------------- abas: desktop */ @media (min-width: 768px) { #sidebar.sidebar_v2 ~ #main-content #innertabs .nav_container.tabsLayout { display: flex; flex-direction: row; gap: 28px; padding: 0 28px; background: #fff; border-bottom: 1px solid var(--v-borda-clara); } #sidebar.sidebar_v2 ~ #main-content #innertabs .nav_container.tabsLayout > div { padding: 18px 2px 14px; background: transparent; border: none; /* Reservado desde o estado inativo: sem isso a aba salta 2.5px ao virar ativa. */ border-bottom: 2.5px solid transparent; border-radius: 0; cursor: pointer; width: auto; } #sidebar.sidebar_v2 ~ #main-content #innertabs .inner_nav_link { padding: 0; font: 600 14px Manrope, sans-serif; color: var(--v-texto-inativo) !important; background: none; border: none; transition: color .15s; } #sidebar.sidebar_v2 ~ #main-content #innertabs .nav_container.tabsLayout > div:hover .inner_nav_link { color: var(--v-verde-escuro) !important; } /* Ativa. O `mobile.css` crava `border-bottom: 4px solid #2959c6 !important` no `.navitem_active` e `color: #2959b0 !important` no `.inner_nav_link` — dai o `!important` aqui tambem. */ #sidebar.sidebar_v2 ~ #main-content #innertabs .navitem_active { border-bottom: 2.5px solid var(--v-verde-escuro) !important; background: transparent !important; } #sidebar.sidebar_v2 ~ #main-content #innertabs .navitem_active .inner_nav_link { font-weight: 800; color: var(--v-verde-escuro) !important; } } /* --------------------------------------------------------- abas: mobile */ /* A barra de abas vira um seletor: um card com a aba atual e uma lista que abre por cima do conteudo. O componente ja existia (card + `dbc.Collapse`); o que muda e a pele e o fato de a lista passar a **flutuar** em vez de empurrar a pagina. O `:has(.collapse.show)` e o unico jeito de o CSS saber que a lista esta aberta: quem guarda esse estado e o `is_open` do `dbc.Collapse`, que vira a classe `show` do Bootstrap. Nao ha classe nenhuma no card nem no botao para pendurar a regra. */ @media (max-width: 767.98px) { /* Abaixo da app bar da sidebar (ver `--sb-appbar`, em `sidebar_v2.css`). O callback clientside do hamburguer tambem escreve este `margin-top` inline, com a altura medida do `#sidebar` — que e exatamente a app bar, entao os dois valores coincidem. */ #sidebar.sidebar_v2 ~ #main-content #subnavbar_mobile { margin-top: var(--sb-appbar); padding: 14px 16px 0; } /* O conteudo comeca abaixo da app bar, e mais abaixo ainda quando ha seletor de abas — os dois sao `position: fixed` e nao ocupam espaco no fluxo. */ #sidebar.sidebar_v2 ~ #main-content { padding-top: calc(var(--sb-appbar) + 12px); } #sidebar.sidebar_v2 ~ #main-content:has(#subnavbar_mobile) { padding-top: calc(var(--sb-appbar) + 70px); } /* ---- gatilho (fechado) ---- */ #sidebar.sidebar_v2 ~ #main-content #subnavbar_mobile .card { position: relative; border: 1px solid var(--v-borda-clara); border-radius: 11px; background: #fff; box-shadow: none; transition: border-color .18s; } #sidebar.sidebar_v2 ~ #main-content #subnavbar_mobile .card-header { padding: 10px 13px; background: #fff; border: none; border-radius: 11px; cursor: pointer; } #sidebar.sidebar_v2 ~ #main-content #subnavbar_mobile #active_tab_mobile { font: 800 13px Manrope, sans-serif; /* `!important` porque o `.tabTitle` do `mobile.css` tambem usa. */ color: var(--v-verde-escuro) !important; margin: 0; } /* A seta. E um `` apontando para `img/chevron_tabs_v2.svg` (ver `gen_subtabs_layout` e `toggle_collapse_tabs`); a pastilha e o fundo do proprio elemento, sem `` a mais em volta — o `` e o alvo do clique. */ #sidebar.sidebar_v2 ~ #main-content #subnavbar_mobile .card-header img { box-sizing: border-box; width: 22px; height: 22px; padding: 5.5px; border-radius: 7px; background: #EAF3F0; transition: transform .18s; } /* ---- gatilho (aberto) ---- */ #sidebar.sidebar_v2 ~ #main-content #subnavbar_mobile .card:has(.collapse.show) { border: 1.5px solid var(--v-verde-escuro); } #sidebar.sidebar_v2 ~ #main-content #subnavbar_mobile .card:has(.collapse.show) .card-header img { transform: rotate(180deg); } /* ---- painel ---- */ #sidebar.sidebar_v2 ~ #main-content #subnavbar_mobile .card > .collapse, #sidebar.sidebar_v2 ~ #main-content #subnavbar_mobile .card > .collapsing { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 15; background: #fff; border: 1px solid var(--v-borda-clara); border-radius: 12px; padding: 5px; box-shadow: 0 16px 40px rgba(10, 30, 24, .18); } #sidebar.sidebar_v2 ~ #main-content #subnavbar_mobile .listGroup_card { border: none; border-radius: 0; } /* ---- opcao ---- */ #sidebar.sidebar_v2 ~ #main-content #subnavbar_mobile .listGroup_card .list-group-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px; border: none; border-radius: 8px; background: transparent; cursor: pointer; } #sidebar.sidebar_v2 ~ #main-content #subnavbar_mobile .listGroup_card .list-group-item:hover { background: #F2F7F5; } /* O `flex: 1` nao e estetica: quem escuta o clique e o `` (`navlink_tabs`), nao o `

`. Sem ele o link so ocupa a largura da palavra e o toque no resto da linha — que e a maior parte dela — cai no `

`, que nao tem callback nenhum. */ #sidebar.sidebar_v2 ~ #main-content #subnavbar_mobile .listGroup_card .inner_nav_link { flex: 1; padding: 0; border: none; background: none; font: 600 13px Manrope, sans-serif; color: var(--v-texto-inativo) !important; } /* A ativa. O `mobile.css` a **esconde** (`.navitem_active { display: none }`), porque no desenho antigo o titulo do card ja a repetia. No seletor novo ela volta para a lista, marcada — e o titulo do card continua sendo ela. */ #sidebar.sidebar_v2 ~ #main-content #subnavbar_mobile .listGroup_card .navitem_active { display: flex; background: #EAF3F0; } #sidebar.sidebar_v2 ~ #main-content #subnavbar_mobile .listGroup_card .navitem_active .inner_nav_link { font-weight: 800; color: var(--v-verde-escuro) !important; } /* O tique. Desenhado em `::after`, e nao como imagem no Python, porque o `change_tabs` reescreve so o `className` dos itens — o conteudo deles ele nao toca. */ #sidebar.sidebar_v2 ~ #main-content #subnavbar_mobile .listGroup_card .navitem_active::after { content: ''; flex: none; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E8B6F' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 7'/%3E%3C/svg%3E") center / 14px no-repeat; } } /* Abas do Bootstrap fora do `#innertabs` (`dbc.Tabs` dentro das paginas e dos modais) seguem o mesmo verde, sem a geometria — la a marcacao e outra. Ancoradouro amplo para alcancar as que vivem dentro de modal; nao colide com a sidebar, que tem `.nav-link` mas nenhum ancestral `.nav-tabs`. */ :root:has(#sidebar.sidebar_v2) .nav-tabs .nav-link.active, :root:has(#sidebar.sidebar_v2) .nav-tabs .nav-link:hover { color: var(--v-verde-escuro) !important; border-bottom-color: var(--v-verde-escuro) !important; } /* Links soltos do conteudo (`` sem classe). A lista de excecoes existe porque este seletor carrega dois ids e quatro classes — nada com uma classe so o vence. Todo `` que tiver cor propria precisa entrar aqui. */ #sidebar.sidebar_v2 ~ #main-content a:not(.btn):not(.nav-link):not(.page-link):not(.btn_refresh_v2) { color: var(--v-medio); } #sidebar.sidebar_v2 ~ #main-content a:not(.btn):not(.nav-link):not(.page-link):not(.btn_refresh_v2):hover { color: var(--v-escuro); } /* ========================================================= TABELA (html_table) */ /* Handoff `TABELA_SOLICITACOES.md`. Vale para toda tabela montada pelo `html_table` (`utils/html_table.py`), nao so a de solicitacoes — e a mesma funcao em varias telas. O desenho pressupoe um `display: grid` com `fr`; o portal usa flex com largura em porcentagem, vinda do `cols_widths` de cada chamada. Nao ha o que ganhar em converter: `2.2fr 1.6fr ...` e `cols_widths` resolvem a mesma coisa, e a porcentagem e escolha de quem chama a funcao. O que muda aqui e a pele. A marcacao que o `html_table` produz, por celula: div.linha_html_table[.cabecalho_html_table] <- a linha div.outer_cell_table_mobile <- largura (inline, em %) div.main_cells_border.cell_table <- bordas e altura (inline) div.inner_cell_table ... div.margin_vl_table <- valor principal label.margin_vl_table.smaller <- subs O `.smaller` e o unico sinal que separa valor de sub, e ele e generico: serve para qualquer coluna, que e o que permite tipografar a tabela inteira sem a funcao saber o que cada coluna significa. */ :root:has(#sidebar.sidebar_v2) .corpo_html_table { background: #fff; border: 1px solid var(--v-borda-clara); /* 10px, e nao os 16px do handoff, porque as quinas ja vem arredondadas em 10px pelas classes `*_border_radius` das celulas (`get_border_style`) — trocar so aqui deixaria o card e o cabecalho desalinhados. O raio novo fica para depois, a pedido. Sem `overflow: hidden`: quando as colunas nao cabem, o `html_table` poe `overflow_scroll` **neste mesmo elemento**, e esconder o transbordo mataria a rolagem horizontal da tabela larga. */ border-radius: 10px; } /* Sem grade vertical — o desenho separa so as linhas. As barras laterais vinham de `main_cells_border` (esquerda) e `last_column_border` (direita), celula a celula. */ :root:has(#sidebar.sidebar_v2) .corpo_html_table .cell_table { border-left: none; border-right: none; border-top-color: var(--v-tab-divisoria); padding: 14px; } :root:has(#sidebar.sidebar_v2) .corpo_html_table .last_row_border { border-bottom: none; } /* ---- cabecalho ---- */ :root:has(#sidebar.sidebar_v2) .cabecalho_html_table .cell_table { background: var(--v-tab-cabecalho); border-top: none; border-bottom: 1px solid var(--v-borda-clara); padding: 13px 14px; } /* Vence a regra generica de `.bigblue` la de cima (que pinta os titulos do conteudo de `--v-medio`) e o `font-size: 1.1rem` do `mobile.css`. */ :root:has(#sidebar.sidebar_v2) .cabecalho_html_table .bigblue { font: 800 13px Manrope, sans-serif; color: var(--v-verde-escuro) !important; text-align: center; } /* ---- linhas ---- */ /* A tipografia da linha mora na **celula**, e nao so no `.margin_vl_table`. O `html_table` so envolve o valor nesse `margin_vl_table` quando a coluna aparece em `row_formats` (`utils/html_table.py`, dentro do `if col in r_fmts`). Coluna sem formato declarado — a "Ocorrencia" do historico, por exemplo — cai direto no `flex_column center_all` e nao era alcancada por regra nenhuma: ficava com o 16px herdado do corpo, no meio de vizinhas de 12.5px. Presa a celula, a regra vale para as duas — a declarada e a que ninguem declarou — e o `.margin_vl_table` fica valendo so para o `.smaller` do sub, logo abaixo. */ :root:has(#sidebar.sidebar_v2) .linha_html_table:not(.cabecalho_html_table) .cell_table, :root:has(#sidebar.sidebar_v2) .linha_html_table .margin_vl_table { font: 700 12.5px Manrope, sans-serif; color: var(--v-tab-texto); } :root:has(#sidebar.sidebar_v2) .linha_html_table .margin_vl_table.smaller { font: 500 11.5px Manrope, sans-serif; color: var(--v-tab-texto-sub); margin-top: 4px; } :root:has(#sidebar.sidebar_v2) .linha_html_table:not(.cabecalho_html_table):hover .cell_table { background: var(--v-tab-hover); } /* Os links e acoes dentro da tabela seguem o verde, nao o azul do `custom1.css`. */ :root:has(#sidebar.sidebar_v2) .linha_html_table .actions, :root:has(#sidebar.sidebar_v2) .linha_html_table .link { color: var(--v-verde-escuro); } /* O icone de acao (`img/acao_raio.svg`, trocado no `html_table`). O `custom1.css` desenha `img.actions` com 2rem (32px), medida do PNG antigo; o handoff pede 18px, que ficou pequeno demais na tela real. 24px e o tamanho escolhido, e coincide com o `viewBox` do arquivo — o desenho sai na escala 1:1. A cor nao vem daqui: o `stroke` esta escrito dentro do SVG, porque um `` nao herda `currentColor`. */ :root:has(#sidebar.sidebar_v2) .linha_html_table img.actions { width: 24px; height: 24px; } /* ================================================== SPINNERS (dcc.Loading) */ /* O portal tem ~380 `dcc.Loading`, quase todos sem `color`, e o padrao do Dash e um azul `#119DFF` cravado. Trocar um por um sairia caro e envelheceria mal; aqui a cor passa a ser a do tema de uma vez. O `!important` e ganho, nao preguica: o `dcc.Loading` **nao** usa `style` inline nem variavel de CSS. Ele monta um `