/* Ajustes do Vertex sobre o Tabler: fonte Inter, marca e os gráficos SVG montados no servidor. */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root, [data-bs-theme] { --tblr-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
body { font-feature-settings: "cv03", "cv04", "cv11"; }

.marca-tabler { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; font-weight: 700; font-size: 1.125rem; letter-spacing: -.01em; }
.marca-tabler .simbolo { width: 1.75rem; height: 1.75rem; border-radius: .5rem; background: var(--tblr-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; }

.numero-kpi { font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ponto { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .35rem; vertical-align: .1em; }

/* Gráficos SVG do Vertex dentro dos cartões do Tabler */
.grafico { width: 100%; height: auto; display: block; }
.grafico .g-grade { stroke: var(--tblr-border-color); stroke-width: 1; }
.grafico .g-eixo { font-size: 11px; fill: var(--tblr-secondary); font-variant-numeric: tabular-nums; }
.grafico .g-rotulo { font-size: 11px; fill: var(--tblr-body-color); font-weight: 600; }
.grafico .g-alvo { stroke: var(--tblr-body-color); stroke-width: 1.5; stroke-dasharray: 5 4; }
.fotos-mini { display: flex; gap: .375rem; margin-top: .375rem; }
.fotos-mini img { width: 2.75rem; height: 2.75rem; object-fit: cover; border-radius: .375rem; }

/* Cores das séries dos gráficos, por tema */
:root { --serie-1: #066fd1; --serie-2: #2fb344; --serie-3: #f59f00; --serie-4: #6c7a91; }
.amostra-tema { display: flex; height: 2.25rem; border-radius: .375rem; overflow: hidden; border: 1px solid var(--tblr-border-color); }
.amostra-tema span { flex: 1; }
.dropdown-item .icon.dropdown-item-icon { margin-right: .5rem; }

/* ── Tema escuro (24/09/2026): só preto, grafite, cinzas e branco ──
   A página inteira usa o modo escuro do Tabler (data-bs-theme="dark" em base.html), com as cores
   dele, que puxam para o azul, trocadas por tons neutros. Predominam os fundos escuros e as fontes
   claras. A única cor que fica é a do semáforo, porque ela é a informação. */
html[data-tema="escuro"][data-bs-theme="dark"] {
  color-scheme: dark;
  --tblr-body-bg: #0f1011;
  --tblr-body-bg-rgb: 15, 16, 17;
  --tblr-body-color: #eceef0;
  --tblr-body-color-rgb: 236, 238, 240;
  --tblr-emphasis-color: #ffffff;
  --tblr-heading-color: #ffffff;
  --tblr-bg-surface: #1c1e20;
  --tblr-bg-surface-secondary: #232528;
  --tblr-bg-surface-tertiary: #2a2d30;
  --tblr-bg-surface-dark: #000000;
  --tblr-bg-forms: #151618;
  --tblr-secondary-bg: #2a2d30;
  --tblr-tertiary-bg: #232528;
  --tblr-border-color: #33363a;
  --tblr-border-color-translucent: rgba(255, 255, 255, .10);
  --tblr-secondary: #a3a8ad;
  --tblr-secondary-color: #a3a8ad;
  --tblr-secondary-color-rgb: 163, 168, 173;
  --tblr-muted: #a3a8ad;
  --tblr-dark: #000000;
  --tblr-primary: #e6e8ea;
  --tblr-primary-rgb: 230, 232, 234;
  --tblr-primary-fg: #111213;
  --tblr-primary-darken: #c9ccd0;
  --tblr-primary-lt: #2a2d30;
  --tblr-link-color: #dfe2e5;
  --tblr-link-color-rgb: 223, 226, 229;
  --tblr-link-hover-color-rgb: 255, 255, 255;
  --tblr-box-shadow-card: 0 1px 2px rgba(0, 0, 0, .5);
  --tblr-box-shadow-input: none;
  --serie-1: #e6e8ea;
  --serie-2: #9aa0a6;
  --serie-3: #6b7075;
  --serie-4: #4a4e53;
  /* Semáforo mais claro, para ler no fundo escuro */
  --verde: #7fd99a;
  --amarelo: #f3c865;
  --vermelho: #f59a8f;
  --estado-bg: rgba(230, 232, 234, .10);
}
html[data-tema="escuro"] body { background: #0f1011; }
html[data-tema="escuro"] .text-red { color: #f59a8f !important; }
html[data-tema="escuro"] .text-green { color: #7fd99a !important; }
html[data-tema="escuro"] .text-yellow { color: #f3c865 !important; }
html[data-tema="escuro"] .avatar { background-color: #2a2d30; color: #eceef0; }
html[data-tema="escuro"] .bg-primary-lt { background: rgba(230, 232, 234, .12) !important; color: #eceef0 !important; }
html[data-tema="escuro"] .bg-primary:not(.progress-bar) { background: #e6e8ea !important; color: #111213 !important; }
html[data-tema="escuro"] .progress-bar.bg-primary { background: #e6e8ea !important; }
html[data-tema="escuro"] :is(.btn-group > .btn.active, .form-selectgroup-input:checked + .form-selectgroup-label, .list-group-item.active) {
  background: #2a2d30 !important; border-color: #e6e8ea !important; color: #ffffff !important;
}

/* Barra do topo preta, item ativo em branco */
html[data-tema="escuro"] .navbar { background: #000000; --tblr-navbar-border-color: #ffffff; }
html[data-tema="escuro"] .navbar .nav-item.active { --tblr-navbar-active-border-color: #ffffff; }
html[data-tema="escuro"] .navbar .nav-item.active .nav-link { color: #ffffff; }
html[data-tema="escuro"] .navbar .dropdown-menu { background: #1c1e20; border-color: #33363a; }
html[data-tema="escuro"] .marca-tabler .simbolo { background: #e6e8ea; color: #111213; }

/* ── Tema Colorido: o "institucional misto" do Verten, trazido em 24/09/2026 ──
   Barra grafite com linha verde, página gelo, cartões brancos, tabelas como ilha grafite com
   cabeçalho verde e zebra, itens selecionados em cinza-azulado suave, fonte Switzer (Fontshare,
   servida pelo CDN deles e baixada só neste tema). O verde da marca do Verten aparece nos
   cabeçalhos e botões por escolha do Mauro; nas metas o semáforo continua valendo. */
@font-face { font-family: "Switzer"; src: url("https://cdn.fontshare.com/wf/BLNB4FAQFNK56DWWNF7PMGTCOTZHOEII/ST3WKSSDMBK2MIQQO3MAVYWLF4FTOLFV/6IN5WOLRCYP4G4MOCOHOMXNON6Q7MDAR.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("https://cdn.fontshare.com/wf/OYB4CXKJQXKTNSLJMTDQOIVUL2V5EL7S/WYO2P7DQVV5RNXGMCUO2HL4RJP4VFUAS/6XPIMU23OJVRY676OG5YVJMWEHWICATX.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("https://cdn.fontshare.com/wf/5SZVFDB7V52TI6ULVC6J3WQZQCIZVDV5/ODYPSTCUDMKSTYIPTV4CLQ7URIK7XYBJ/YS3VPNVO4B3TOJMEXDGFZQ4TLZGGSRZC.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("https://cdn.fontshare.com/wf/HBNTRIISA5MEXGL5WPYI7CV2HIWTDV3Q/YDPDINVT673XLXNSTMLG4JNCZZMVVNPN/Y7SCNZJOT2MW5ADSGOFLDGH4TNL4JCQY.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
html[data-tema="colorido"] {
  --tblr-font-sans-serif: "Switzer", "Segoe UI", system-ui, -apple-system, sans-serif;
  --tblr-body-bg: #eff3f6;
  --tblr-body-bg-rgb: 239, 243, 246;
  --tblr-bg-surface: #ffffff;
  --tblr-bg-surface-secondary: #e2e8ed;
  --tblr-bg-surface-tertiary: #f5f8fa;
  --tblr-bg-forms: #ffffff;
  --tblr-border-color: #d3dbe1;
  --tblr-border-color-translucent: rgba(51, 63, 72, .12);
  --tblr-body-color: #333f48;
  --tblr-body-color-rgb: 51, 63, 72;
  --tblr-emphasis-color: #1f282e;
  --tblr-heading-color: #333f48;
  --tblr-secondary: #63707d;
  --tblr-secondary-color: #63707d;
  --tblr-secondary-color-rgb: 99, 112, 125;
  --tblr-muted: #63707d;
  --tblr-primary: #3a7a1b;
  --tblr-primary-rgb: 58, 122, 27;
  --tblr-primary-fg: #ffffff;
  --tblr-primary-darken: #2f6614;
  --tblr-link-color: #3a7a1b;
  --tblr-link-color-rgb: 58, 122, 27;
  --tblr-link-hover-color-rgb: 47, 102, 20;
  --verde: #2f6f18;
  --amarelo: #9d6006;
  --vermelho: #d72525;
  --serie-1: #5fb235;
  --serie-2: #333f48;
  --serie-3: #1d4ed8;
  --serie-4: #b45309;
  font-family: var(--tblr-font-sans-serif);
}
html[data-tema="colorido"] body { font-family: var(--tblr-font-sans-serif); }

/* Barra do topo grafite, com a linha verde da marca */
html[data-tema="colorido"] .navbar { background: #333f48; --tblr-navbar-border-color: #78d64b; }
html[data-tema="colorido"] .navbar .nav-link { color: #ffffff; }
html[data-tema="colorido"] .navbar .nav-link:hover { color: #ffffff; background: #46535f; }
html[data-tema="colorido"] .navbar .nav-item.active { --tblr-navbar-active-border-color: #78d64b; }
html[data-tema="colorido"] .navbar .nav-item.active .nav-link { color: #9ee66a; }
html[data-tema="colorido"] .navbar .dropdown-menu { background: #333f48; border-color: #46535f; --tblr-dropdown-link-color: #ffffff; --tblr-dropdown-link-hover-bg: #46535f; --tblr-dropdown-link-hover-color: #ffffff; --tblr-dropdown-header-color: #c7d1d9; }
html[data-tema="colorido"] .navbar .dropdown-item { color: #ffffff; }
html[data-tema="colorido"] .navbar .dropdown-item:hover { background: #46535f; color: #ffffff; }
html[data-tema="colorido"] .marca-tabler .simbolo { background: #78d64b; color: #333f48; }
html[data-tema="colorido"] .navbar .avatar { background: #46535f; color: #ffffff; }

/* Botões principais no verde da marca, com letra grafite */
html[data-tema="colorido"] .btn-primary,
html[data-tema="colorido"] .botao.principal {
  --tblr-btn-bg: #78d64b; --tblr-btn-color: #333f48; --tblr-btn-hover-bg: #5fb235; --tblr-btn-hover-color: #1f282e;
  --tblr-btn-active-bg: #5fb235; --tblr-btn-active-color: #1f282e;
  background: #78d64b; color: #333f48; border-color: transparent;
}
html[data-tema="colorido"] .btn-primary:hover, html[data-tema="colorido"] .botao.principal:hover { background: #5fb235; color: #1f282e; }
html[data-tema="colorido"] .progress-bar.bg-primary { background: #78d64b !important; }

/* Itens selecionados: cinza-azulado suave com borda no verde de destaque */
html[data-tema="colorido"] .btn-group > .btn.active,
html[data-tema="colorido"] .segmentado .ativo,
html[data-tema="colorido"] .form-selectgroup-input:checked + .form-selectgroup-label,
html[data-tema="colorido"] .list-group-item.active {
  background: rgba(0, 200, 200, .08) !important; border-color: #3a7a1b !important; color: #333f48 !important;
  box-shadow: inset 0 0 0 1px #3a7a1b;
}
html[data-tema="colorido"] .nav-underline .nav-link.active,
html[data-tema="colorido"] .abas .ativa { color: #333f48; border-bottom-color: #3a7a1b; }
html[data-tema="colorido"] .toque input:checked + .caixa { background: #78d64b; border-color: #5fb235; color: #333f48; }
html[data-tema="colorido"] .avatar { background-color: #e2e8ed; color: #333f48; }

/* Tabelas: ilha grafite dentro da página clara, cabeçalho em grafite claro, zebra e fontes em gelo */
html[data-tema="colorido"] .table,
html[data-tema="colorido"] .conteudo-legado table {
  --tblr-table-bg: #2c3841;
  --tblr-table-color: #eff3f6;
  --tblr-table-border-color: #46535f;
  --tblr-table-striped-bg: #333f48;
  --tblr-table-hover-bg: #3d4b56;
  --tblr-table-accent-bg: transparent;
  --tblr-secondary: #c7d1d9;
  --tblr-secondary-color: #c7d1d9;
  --tblr-body-color: #eff3f6;
  --text: #eff3f6;
  --text2: #c7d1d9;
  --verde: #8fe063;
  --amarelo: #fbbf24;
  --vermelho: #ff8a80;
  background: #2c3841;
  color: #eff3f6;
}
html[data-tema="colorido"] :is(.table, .conteudo-legado table) thead th {
  background: #4b5964; color: #eff3f6; border-bottom: 1px solid #5c6a75; border-top: 0;
}
html[data-tema="colorido"] :is(.table, .conteudo-legado table) tbody > tr > * {
  background-color: #2c3841; color: #eff3f6; border-bottom: 1px solid #46535f; border-top: 0;
  box-shadow: none;
}
html[data-tema="colorido"] :is(.table, .conteudo-legado table) tbody > tr > *:not(:last-child) { border-right: 1px solid rgba(239, 243, 246, .07); }
html[data-tema="colorido"] :is(.table, .conteudo-legado table) tbody > tr:nth-child(even) > * { background-color: #3a4752; }
html[data-tema="colorido"] :is(.table, .conteudo-legado table) tbody > tr:hover > * { background-color: #3d4b56; }
html[data-tema="colorido"] :is(.table, .conteudo-legado table) :is(a, .text-reset) { color: #ffffff; }
html[data-tema="colorido"] :is(.table, .conteudo-legado table) :is(.text-secondary, .small, .secundario, .vazio) { color: #c7d1d9 !important; }
html[data-tema="colorido"] :is(.table, .conteudo-legado table) .text-red { color: #ff8a80 !important; }
html[data-tema="colorido"] :is(.table, .conteudo-legado table) .text-green { color: #8fe063 !important; }
html[data-tema="colorido"] :is(.table, .conteudo-legado table) .text-yellow { color: #fbbf24 !important; }
html[data-tema="colorido"] :is(.table, .conteudo-legado table) .avatar { background: #46535f; color: #ffffff; }
html[data-tema="colorido"] :is(.table, .conteudo-legado table) :is(.btn, .botao) { background: transparent; color: #c7d1d9; border-color: #55636e; box-shadow: none; }
html[data-tema="colorido"] :is(.table, .conteudo-legado table) :is(.btn, .botao):hover { color: #9ee66a; border-color: #78d64b; }
html[data-tema="colorido"] :is(.table, .conteudo-legado table) :is(input, select) { background: #3d4b56; color: #eff3f6; border-color: #46535f; }
html[data-tema="colorido"] :is(.table, .conteudo-legado table) .linha-total > * { background-color: #3d4b56 !important; }
/* Etiquetas dentro da ilha grafite: fundo translúcido claro e texto legível */
html[data-tema="colorido"] :is(.table, .conteudo-legado table) :is(.badge, .etiqueta) { background: rgba(239, 243, 246, .12) !important; color: #eff3f6 !important; }
html[data-tema="colorido"] :is(.table, .conteudo-legado table) :is(.bg-primary-lt, .bg-green-lt, .etiqueta.verde, .etiqueta.bronze) { background: rgba(120, 214, 75, .18) !important; color: #9ee66a !important; }
html[data-tema="colorido"] :is(.table, .conteudo-legado table) :is(.bg-red-lt, .etiqueta.vermelho) { background: rgba(255, 138, 128, .16) !important; color: #ff8a80 !important; }
html[data-tema="colorido"] :is(.table, .conteudo-legado table) :is(.bg-yellow-lt, .etiqueta.amarelo) { background: rgba(251, 191, 36, .16) !important; color: #fbbf24 !important; }
html[data-tema="colorido"] :is(.table, .conteudo-legado table) :is(.bg-azure-lt) { background: rgba(0, 200, 200, .16) !important; color: #7fe3e3 !important; }

/* Cabeçalhos em destaque (24/09/2026): tabela com faixa em cor cheia; cartão de lista com o título
   na mesma cor; cartão que traz tabela fica com o título baixo e em tom claro, para não empilhar duas
   faixas. Claro: azul suave. Colorido: o grafite claro do cabeçalho da lista de licitações do Verten
   (.dash-th no tema institucional misto), que se destaca por ser o tom mais claro do quadro. */
.card:has(.table) > .card-header:not(:has(.card-header-tabs)) { min-height: 0; padding-top: .5rem; padding-bottom: .5rem; }

html[data-tema="claro"] :is(.table, .conteudo-legado table) thead th {
  background: #5b9ae0; color: #ffffff; border-bottom: 1px solid #4a88cf; border-top: 0;
}
html[data-tema="claro"] .card:has(> .list-group) > .card-header {
  background: #5b9ae0; border-bottom-color: #4a88cf; --tblr-link-color-rgb: 255, 255, 255;
}
html[data-tema="claro"] .card:has(> .list-group) > .card-header :is(.card-title, a) { color: #ffffff; }
html[data-tema="claro"] .card:has(> .list-group) > .card-header .badge { background: rgba(255, 255, 255, .22) !important; color: #ffffff !important; }
html[data-tema="claro"] .card:has(.table) > .card-header { background: #edf4fc; border-bottom-color: #d3e3f6; }
html[data-tema="claro"] .card:has(.table) > .card-header .card-title { color: #1d5aa3; }

html[data-tema="colorido"] .card:has(> .list-group) > .card-header {
  background: #4b5964; border-bottom-color: #5c6a75; --tblr-link-color-rgb: 239, 243, 246;
}
html[data-tema="colorido"] .card:has(> .list-group) > .card-header :is(.card-title, a) { color: #eff3f6; }
html[data-tema="colorido"] .card:has(> .list-group) > .card-header .badge { background: rgba(239, 243, 246, .16) !important; color: #eff3f6 !important; }
html[data-tema="colorido"] .card:has(.table) > .card-header { background: #e9edf0; border-bottom-color: #d3dadf; }
html[data-tema="colorido"] .card:has(.table) > .card-header .card-title { color: #333f48; }

html[data-tema="escuro"] :is(.table, .conteudo-legado table) thead th {
  background: #34383c; color: #ffffff; border-bottom: 1px solid #44484d; border-top: 0;
}
html[data-tema="escuro"] .card:has(> .list-group) > .card-header { background: #34383c; border-bottom-color: #44484d; }
html[data-tema="escuro"] .card:has(> .list-group) > .card-header :is(.card-title, a) { color: #ffffff; }
html[data-tema="escuro"] .card:has(> .list-group) > .card-header .badge { background: rgba(255, 255, 255, .14) !important; color: #ffffff !important; }
html[data-tema="escuro"] .card:has(.table) > .card-header { background: #232528; border-bottom-color: #33363a; }

/* Escuro: regras antigas com fundo quase branco ou letra branca sobre o destaque, que aqui é cinza claro */
html[data-tema="escuro"] :is(.linha-total td, .linha-total th, td.entrada, .relatorio-hoje:hover) { background: #232528; }
html[data-tema="escuro"] :is(.linha.pendente .marca-linha, .marca-estado.ok, .relatorio-hoje.pendente .estado, .toque input:checked + .caixa, .notas input:checked + label) { color: #111213; }
html[data-tema="escuro"] .etiqueta.amarelo { color: #f3c865; }
html[data-tema="escuro"] :is(.bg-azure-lt, .bg-blue-lt, .bg-cyan-lt, .bg-indigo-lt, .bg-purple-lt, .bg-teal-lt) { background: rgba(230, 232, 234, .12) !important; color: #eceef0 !important; }

/* Itens de menu ainda sem tela (Leads, Financeiro): visíveis, mas apagados e sem clique, em todos os temas */
.navbar .dropdown-menu .dropdown-item.disabled { opacity: .5; pointer-events: none; }

/* Divisor entre os grupos da barra do topo: traço vertical na barra, horizontal no menu recolhido */
.navbar .divisor-menu { align-self: center; width: 1px; height: 1.5rem; margin: 0 .5rem; background: currentColor; opacity: .25; list-style: none; }
@media (max-width: 991.98px) {
  .navbar .divisor-menu { width: 100%; height: 1px; margin: .5rem 0; }
}