/*
 * fabri.css — identidade visual do Tooluy.
 *
 * Cores da marca (logo): azul-marinho #142E4B, verde-agua #43B7AC e
 * laranja #ED6D1F. O azul-marinho e a cor do texto e do tema escuro; o
 * verde-agua e a cor de acao (botoes, links, item aberto do menu); o laranja
 * e so detalhe (marca do item aberto, faixa da marca) e a cor das saidas de
 * dinheiro, que ja eram laranja: assim ele nunca vira cor de botao e nao
 * confunde "acao" com "dinheiro saindo".
 *
 * Duas partes:
 *   1. TEMA: fonte, cores e o "casco" do Unfold (menu lateral, topo, fundo,
 *      listas e formularios do admin).
 *   2. COMPONENTES das telas proprias (Inicio, Resultados, fichas, fluxo de
 *      caixa, quadro, agenda...) e a compatibilidade do editor de orcamento.
 *
 * Por que um CSS proprio e nao classes do Tailwind do Unfold: o CSS do Unfold
 * e compilado so com as classes que ELE usa; uma classe Tailwind que ele nao
 * usa simplesmente nao existe. Aqui tudo e explicito.
 *
 * Por que os ajustes no Unfold funcionam sem !important: todo o CSS do Unfold
 * esta dentro de @layer (theme, base, components, utilities). Regra fora de
 * layer sempre vence regra dentro de layer, qualquer que seja a
 * especificidade. Por isso este arquivo nao usa @layer.
 *
 * As cores do tema (--color-primary-*, --color-base-*) vem do UNFOLD["COLORS"]
 * no settings; trocar la troca tambem estas telas. Funciona no claro e no escuro.
 */

/* =========================================================================
 * 1. TEMA
 * ======================================================================= */

/* Geist (licenca OFL, arquivo em static/fonts/geist). Fica no proprio
   sistema, e nao no Google Fonts, porque o PC da fabrica pode estar sem
   internet e mesmo assim as telas tem que abrir iguais. */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist/Geist-Variable.d1bac27c388f.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist/Geist-Italic-Variable.8026e5d1fd0d.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* O Unfold le --font-sans em todos os componentes dele. */
  --font-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Superficies. Visual "cartoes flutuantes": fundo cinza-azulado bem claro, cartoes
     brancos SEM borda, separados so pela sombra. A borda some no claro porque
     ela desenhava uma grade em volta de tudo; no escuro ela volta (sombra nao
     aparece sobre fundo escuro). */
  --fg-canvas: #f2f5f8;
  --fg-fundo-cartao: #fff;
  --fg-fundo-suave: #f6f8fb;
  --fg-borda: var(--color-base-200, #dce2ea);
  --fg-borda-suave: var(--color-base-100, #ebeff4);
  --fg-borda-cartao: transparent;
  --fg-sombra: 0 1px 2px rgba(20, 46, 75, .04), 0 6px 20px -10px rgba(20, 46, 75, .10);
  --fg-sombra-hover: 0 1px 2px rgba(20, 46, 75, .05), 0 12px 28px -12px rgba(20, 46, 75, .18);
  --fg-sombra-alta: 0 16px 40px -14px rgba(20, 46, 75, .24);
  --fg-sombra-campo: 0 1px 2px rgba(20, 46, 75, .05);

  /* Texto */
  --fg-texto: var(--color-base-900, #142e4b);
  --fg-texto-medio: var(--color-base-600, #4b5870);
  --fg-texto-suave: var(--color-base-500, #64728a);

  /* Cores da marca, para os detalhes que nao vem da escala do Unfold. */
  --fg-marca-azul: #142e4b;
  --fg-marca-verde: #43b7ac;
  --fg-marca-laranja: #ed6d1f;

  /* Marca e significado. Entrada (azul) e saida (laranja) sao fixas em todo o
     sistema. A saida usa um laranja mais fechado que o da logo: o da logo
     sobre branco nao tem contraste suficiente para texto pequeno (3:1). */
  --fg-primaria: var(--color-primary-600, #1f7f77);
  --fg-primaria-forte: var(--color-primary-700, #1a6a63);
  --fg-primaria-fundo: var(--color-primary-50, #ecf8f6);
  --fg-entrada: #1f5fd6;
  --fg-entrada-fundo: #eef3fd;
  --fg-saida: #bf520e;
  --fg-saida-fundo: #fdf1ea;
  --fg-perigo: #c22b2b;
  --fg-perigo-fundo: #fdf0f0;
  --fg-alerta: #92590a;
  --fg-alerta-fundo: #fdf6e5;
  --fg-ok: #157a3b;
  --fg-ok-fundo: #ecf8f0;

  /* Menu lateral: cartao branco flutuando sobre o fundo, como o resto. */
  --fg-menu-fundo: #fff;
  --fg-menu-borda: var(--color-base-100, #ebeff4);
  --fg-menu-texto: var(--color-base-600, #4b5870);
  --fg-menu-texto-forte: var(--color-base-900, #142e4b);
  --fg-menu-titulo: var(--color-base-400, #8e9aab);
  --fg-menu-hover: var(--color-base-50, #f4f6f9);
  --fg-menu-ativo: var(--color-primary-50, #ecf8f6);
  --fg-menu-marca: var(--color-primary-600, #1f7f77);
  --fg-menu-ponto: var(--fg-marca-laranja);

  /* Distancia entre os cartoes e da borda da tela ate o menu. */
  --fg-espaco: 16px;
  --fg-raio: 18px;
  --fg-raio-pequeno: 10px;
  --border-radius: 10px;
}
html.dark {
  --fg-canvas: #0a1524;
  --fg-fundo-cartao: #111f33;
  --fg-fundo-suave: #16263d;
  --fg-borda: #26374f;
  --fg-borda-suave: #1c2d45;
  --fg-borda-cartao: #1c2d45;
  --fg-sombra: none;
  --fg-sombra-hover: none;
  --fg-sombra-campo: none;
  --fg-sombra-alta: 0 16px 40px -12px rgba(0, 0, 0, .6);
  --fg-texto: var(--color-base-100, #ebeff4);
  --fg-texto-medio: var(--color-base-300, #c3ccd7);
  --fg-texto-suave: var(--color-base-400, #8e9aab);
  --fg-primaria: var(--color-primary-400, #43b7ac);
  --fg-primaria-forte: var(--color-primary-300, #75ccc1);
  --fg-primaria-fundo: rgba(67, 183, 172, .13);
  --fg-entrada: #74a3ff;
  --fg-entrada-fundo: rgba(116, 163, 255, .12);
  --fg-saida: #f28a4b;
  --fg-saida-fundo: rgba(237, 109, 31, .14);
  --fg-perigo: #f47c7c;
  --fg-perigo-fundo: rgba(244, 124, 124, .12);
  --fg-alerta: #f2c14e;
  --fg-alerta-fundo: rgba(242, 193, 78, .11);
  --fg-ok: #5fd08a;
  --fg-ok-fundo: rgba(95, 208, 138, .12);
  --fg-menu-fundo: #111f33;
  --fg-menu-borda: #1c2d45;
  --fg-menu-texto: var(--color-base-300, #c3ccd7);
  --fg-menu-texto-forte: #f3f7fb;
  --fg-menu-titulo: var(--color-base-500, #64728a);
  --fg-menu-hover: rgba(255, 255, 255, .05);
  --fg-menu-ativo: rgba(67, 183, 172, .14);
  --fg-menu-marca: var(--color-primary-400, #43b7ac);
}

body { font-feature-settings: "ss01" on; letter-spacing: -.003em; -webkit-font-smoothing: antialiased; }
::selection { background: var(--color-primary-200, #a8e1d9); color: var(--color-base-950, #0b1b2e); }

/* ---------- fundo: tudo sobre a mesma "mesa" cinza ---------- */
html, body, #page, #main { background: var(--fg-canvas); }

/* ---------- topo: sem faixa nem linha, faz parte do fundo ---------- */
#main > div:first-child:has(#header-inner) {
  background: color-mix(in srgb, var(--fg-canvas) 84%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom-color: transparent;
  position: sticky; top: 0;
  margin-bottom: 4px;
}
#header-inner h1 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--fg-texto); }
#header-inner h1 a { color: var(--fg-texto-suave); font-weight: 500; }
#header-inner h1 a:hover { color: var(--fg-texto); }

/* ---------- menu lateral: um cartao branco flutuando ---------- */
/* O Unfold desenha o menu colado na borda, com fundo e linha a direita. Aqui
   o "trilho" (#nav-sidebar) fica da cor do fundo e com folga em volta, e o
   cartao de verdade e o #nav-sidebar-inner. A largura continua a do Unfold
   (o usuario pode arrastar), so o conteudo encolhe pela folga. */
div:has(> #nav-sidebar), #nav-sidebar {
  background: var(--fg-canvas);
  border-color: transparent;
}
#nav-sidebar { padding: var(--fg-espaco) 0 var(--fg-espaco) var(--fg-espaco); box-sizing: border-box; }
#nav-sidebar-inner {
  background: var(--fg-menu-fundo);
  color: var(--fg-menu-texto);
  border: 1px solid var(--fg-borda-cartao);
  border-radius: 20px;
  box-shadow: var(--fg-sombra);
  /* min-h-screen do Unfold passaria da tela por causa da folga. */
  min-height: 0; height: 100%;
  overflow: hidden;
}

/* marca: a logo (SITE_LOGO no settings) no topo do menu, e uma faixa fina
   com as tres cores dela separando a logo dos itens. */
#nav-sidebar-inner > div:first-child { border-color: transparent; height: 76px; margin-bottom: 6px; position: relative; }
#nav-sidebar-inner > div:first-child img { height: 30px; width: auto; max-width: 100%; margin-inline-end: 0; }
#nav-sidebar-inner > div:first-child::after {
  content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; border-radius: 2px; opacity: .55;
  background: linear-gradient(90deg, var(--fg-marca-laranja), var(--fg-marca-verde) 55%, var(--fg-marca-azul));
}
html.dark #nav-sidebar-inner > div:first-child::after {
  background: linear-gradient(90deg, var(--fg-marca-laranja), var(--fg-marca-verde) 55%, #8fb3dc);
}
#nav-sidebar-inner #site-name,
#nav-sidebar-inner #site-name a { color: var(--fg-menu-texto-forte); font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
#nav-sidebar-inner #site-name + * , #nav-sidebar-inner .text-subtle { color: var(--fg-menu-titulo); }
#nav-sidebar-inner > div:first-child a.bg-primary-600,
#nav-sidebar-inner > div:first-child span.bg-primary-600 {
  background: var(--fg-menu-marca); color: #fff; border-radius: 11px;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--fg-menu-marca) 60%, transparent);
}
#nav-sidebar-inner > div:first-child .material-symbols-outlined { color: var(--fg-menu-texto); }
#nav-sidebar-inner > div:first-child a.bg-primary-600 .material-symbols-outlined,
#nav-sidebar-inner > div:first-child span.bg-primary-600 .material-symbols-outlined { color: #fff; }

/* busca */
#nav-sidebar-inner > div[x-on\:click] > div {
  background: var(--fg-fundo-suave);
  border-color: transparent;
  border-radius: 12px;
  box-shadow: none;
}
#nav-sidebar-inner > div[x-on\:click] > div:hover { background: var(--fg-menu-hover); border-color: var(--fg-menu-borda); }
#nav-sidebar-inner > div[x-on\:click] .text-font-subtle-light,
#nav-sidebar-inner > div[x-on\:click] .material-symbols-outlined { color: var(--fg-menu-titulo); }
#nav-sidebar-inner > div[x-on\:click] kbd { background: var(--fg-fundo-cartao); border-color: var(--fg-menu-borda); color: var(--fg-menu-titulo); }

/* grupos e itens */
#nav-sidebar-apps { scrollbar-color: var(--color-base-200, #dce2ea) transparent; padding-bottom: 8px; }
html.dark #nav-sidebar-apps { scrollbar-color: rgba(255, 255, 255, .14) transparent; }
#nav-sidebar-apps > div { margin-bottom: 2px; }
#nav-sidebar-apps h2 {
  color: var(--fg-menu-titulo);
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  margin-top: 10px; margin-bottom: 0; padding-top: 6px; padding-bottom: 6px;
}
#nav-sidebar-apps h2:hover { color: var(--fg-menu-texto-forte); }
#nav-sidebar-apps h2 .material-symbols-outlined { font-size: 18px; color: inherit; opacity: .7; }
#nav-sidebar-apps ol { gap: 2px; }
#nav-sidebar-apps ol a {
  color: var(--fg-menu-texto);
  height: 40px; font-weight: 500; position: relative;
  border-radius: 12px;
  transition: background-color .12s ease, color .12s ease;
}
#nav-sidebar-apps ol a:hover { color: var(--fg-menu-texto-forte); background: var(--fg-menu-hover); }
#nav-sidebar-apps ol a .material-symbols-outlined { color: inherit; opacity: .85; font-size: 20px; }
#nav-sidebar-apps ol a.active {
  background: var(--fg-menu-ativo);
  color: var(--fg-menu-texto-forte);
  font-weight: 650;
}
#nav-sidebar-apps ol a.active .material-symbols-outlined { color: var(--fg-menu-marca); opacity: 1; font-variation-settings: "FILL" 1; }
/* Item aberto: um ponto no fim da linha, em vez da barra na borda. */
#nav-sidebar-apps ol a.active::after {
  content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg-menu-ponto); flex: none;
}
#nav-sidebar-apps ul { border-color: var(--fg-menu-borda); }
#nav-sidebar-apps ul a { color: var(--fg-menu-texto); }
#nav-sidebar-apps ul a:hover, #nav-sidebar-apps ul a.text-primary-600 { color: var(--fg-menu-texto-forte); background: var(--fg-menu-hover); }
#nav-sidebar-apps hr { border-color: var(--fg-menu-borda); }

/* usuario (rodape do menu): vira um "cartao dentro do cartao" */
#nav-sidebar-inner > div:last-child { border-color: transparent; margin: 8px 12px 12px; padding: 0; }
#nav-sidebar-inner > div:last-child > div.cursor-pointer {
  margin: 0; padding: 10px 12px; min-height: 0; border-radius: 14px;
  background: var(--fg-fundo-suave);
}
#nav-sidebar-inner > div:last-child > div.cursor-pointer:hover,
#nav-sidebar-inner > div:last-child > div.bg-base-100 { background: var(--fg-menu-ativo); }
#nav-sidebar-inner > div:last-child .text-important { color: var(--fg-menu-texto-forte); }
#nav-sidebar-inner > div:last-child .material-symbols-outlined { color: var(--fg-menu-titulo); }
#nav-sidebar-inner > div:last-child > div.cursor-pointer > div:first-child,
#nav-sidebar-inner > div:last-child > div.cursor-pointer > span:first-child {
  background: var(--fg-menu-marca); color: #fff; border-color: transparent;
}
#nav-sidebar-inner > div:last-child > nav {
  background: var(--fg-fundo-cartao); border-color: var(--fg-borda-suave); color: var(--fg-menu-texto);
  border-radius: 14px; box-shadow: var(--fg-sombra-alta); bottom: 70px; left: 0; right: 0;
}
#nav-sidebar-inner > div:last-child > nav a,
#nav-sidebar-inner > div:last-child > nav button,
#nav-sidebar-inner > div:last-child > nav .material-symbols-outlined { color: var(--fg-menu-texto); }
#nav-sidebar-inner > div:last-child > nav a:hover,
#nav-sidebar-inner > div:last-child > nav button:hover { background: var(--fg-menu-hover); color: var(--fg-menu-texto-forte); }
#nav-sidebar-inner > div:last-child > nav .text-primary-600,
#nav-sidebar-inner > div:last-child > nav .text-primary-600 .material-symbols-outlined { color: var(--fg-menu-marca); }
#nav-sidebar-inner > div:last-child > nav > * { border-color: var(--fg-borda-suave); }
#nav-sidebar-inner select { background: var(--fg-fundo-suave); border-color: var(--fg-menu-borda); color: var(--fg-menu-texto-forte); }
#nav-sidebar-inner select option { color: #142e4b; }
#nav-sidebar .resize > div:hover { background: color-mix(in srgb, var(--fg-menu-marca) 35%, transparent); }

/* ---------- listas e formularios do admin (Unfold) ---------- */
/* Mesmo cartao das telas proprias: sem borda, sombra suave, canto redondo. */
#changelist div:has(> #toolbar),
#changelist .result-list-wrapper > div > div:has(> #toolbar) { background: var(--fg-fundo-cartao); }
#content .rounded-default:has(> table#result_list) {
  background: var(--fg-fundo-cartao);
  border-color: var(--fg-borda-cartao); border-radius: var(--fg-raio);
  box-shadow: var(--fg-sombra); overflow: hidden;
}
#result_list thead th { font-size: 12.5px; font-weight: 600; color: var(--fg-texto-suave); background: var(--fg-fundo-cartao); border-bottom: 1px solid var(--fg-borda-suave); }
#result_list thead th a { color: inherit; }
#result_list tbody tr { transition: background-color .1s ease; }
#result_list tbody tr:hover > td, #result_list tbody tr:hover > th { background: var(--fg-primaria-fundo); }
#result_list td, #result_list th { font-variant-numeric: tabular-nums; }
/* Fieldsets dos formularios: cada secao e UM cartao, com o titulo como
   cabecalho dele. O Unfold desenha o titulo numa faixa bg-base-100 (cinza-
   azulado) e as linhas num segundo quadro com borda e sombra: sobre o fundo
   da pagina, que tem quase a mesma cor, o titulo sumia e ficava um cartao
   dentro do outro. Aqui o titulo fica no branco do cartao, em azul-marinho,
   com uma barrinha verde-agua; as linhas perdem o quadro proprio. */
#content fieldset.module { background: var(--fg-fundo-cartao); border: 1px solid var(--fg-borda-cartao); border-radius: var(--fg-raio); box-shadow: var(--fg-sombra); overflow: hidden; }
#content fieldset.module > h2,
#content fieldset.module > details > summary > h2 {
  background: transparent; height: auto; margin: 0; padding: 15px 12px 13px; border-radius: 0;
  border-bottom: 1px solid var(--fg-borda-suave);
  color: var(--fg-texto); font-size: 15px; font-weight: 650; letter-spacing: -.012em; gap: 10px;
}
#content fieldset.module > h2::before,
#content fieldset.module > details > summary > h2::before {
  content: ""; flex: none; width: 4px; height: 16px; border-radius: 2px; background: var(--fg-marca-verde);
}
/* Secao recolhida ("Ligado a"): sem a linha embaixo do titulo, que ficaria sozinha. */
#content fieldset.module > details:not([open]) > summary > h2 { border-bottom-color: transparent; }
#content fieldset.module > details > summary { list-style: none; }
#content fieldset.module > details > summary::-webkit-details-marker { display: none; }
/* Texto de ajuda da secao: dentro do cartao, logo abaixo do titulo. */
#content fieldset.module > div.leading-relaxed,
#content fieldset.module > details > div.leading-relaxed {
  margin: 0; padding: 12px 12px 2px; max-width: none; color: var(--fg-texto-suave); font-size: 13.5px;
}
#content fieldset.module > .form-rows,
#content fieldset.module > details > .form-rows { border: 0; border-radius: 0; box-shadow: none; }
#content .inline-group { border-radius: var(--fg-raio); }
#submit-row, .submit-row { border-radius: var(--fg-raio); }

:focus-visible { outline: 2px solid var(--color-primary-500, #2e9a90); outline-offset: 2px; }

/* =========================================================================
 * 2. COMPONENTES DAS TELAS PROPRIAS
 * ======================================================================= */

/* ---------- estrutura ---------- */
.fg-pagina { display: flex; flex-direction: column; gap: var(--fg-espaco); color: var(--fg-texto); font-variant-numeric: tabular-nums; padding-top: 4px; }
.fg-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 16px; }
.fg-topo h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.025em; color: var(--fg-texto); line-height: 1.2; }
.fg-sub { color: var(--fg-texto-suave); font-size: 14px; line-height: 1.45; }
.fg-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fg-linha { display: flex; flex-wrap: wrap; gap: var(--fg-espaco); align-items: flex-start; }
.fg-linha > .fg-larga { flex: 2 1 520px; min-width: 0; }
.fg-linha > .fg-estreita { flex: 1 1 300px; min-width: 0; }
.fg-grade-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fg-espaco); }
.fg-grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fg-espaco); }
@media (max-width: 1100px) { .fg-grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fg-grade-4, .fg-grade-3 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- cartoes ---------- */
.fg-cartao { background: var(--fg-fundo-cartao); border: 1px solid var(--fg-borda-cartao); border-radius: var(--fg-raio); min-width: 0; box-shadow: var(--fg-sombra); }
/* Cabecalho sem linha embaixo: o titulo ja separa, e a linha dividia o cartao
   em dois blocos. Fica so o espaco. */
.fg-cartao-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 18px 20px 10px; }
.fg-cartao-cab h2 { margin: 0; font-size: 15.5px; font-weight: 650; letter-spacing: -.015em; color: var(--fg-texto); }
.fg-cartao-corpo { padding: 14px 20px 18px; }
.fg-cartao-cab + .fg-cartao-corpo { padding-top: 8px; }
.fg-vazio { padding: 14px 20px 22px; color: var(--fg-texto-suave); font-size: 14px; }

/* Indicadores. Cada numero e um cartao proprio: rotulo em cima, icone no
   canto, valor grande embaixo. O icone e opcional (.fg-kpi-icone); sem ele o
   cartao continua certo. */
.fg-kpi { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; text-decoration: none; color: inherit; position: relative; min-width: 0; }
.fg-kpi-rotulo { font-size: 13.5px; color: var(--fg-texto-medio); font-weight: 550; display: flex; align-items: center; gap: 6px; }
.fg-kpi-valor { font-size: 27px; font-weight: 700; letter-spacing: -.03em; color: var(--fg-texto); line-height: 1.15; margin-top: 4px; overflow-wrap: anywhere; }
.fg-kpi-nota { font-size: 12.5px; color: var(--fg-texto-suave); }
.fg-kpi:has(> .fg-kpi-icone) .fg-kpi-rotulo { padding-right: 40px; }
.fg-kpi-icone {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-variation-settings: "FILL" 1;
  background: var(--fg-primaria-fundo); color: var(--fg-primaria);
}
.fg-kpi-icone.entrada { background: var(--fg-entrada-fundo); color: var(--fg-entrada); }
.fg-kpi-icone.saida { background: var(--fg-saida-fundo); color: var(--fg-saida); }
.fg-kpi-icone.perigo { background: var(--fg-perigo-fundo); color: var(--fg-perigo); }
.fg-kpi-icone.neutra { background: var(--fg-fundo-suave); color: var(--fg-texto-medio); }
/* Fileira de indicadores (fg-grade-4/3 com fg-kpi dentro, ou fg-faixa):
   cartoes separados pelo espaco, nao mais uma faixa dividida. */
.fg-grade-4 > .fg-kpi, .fg-grade-3 > .fg-kpi, .fg-faixa > .fg-kpi {
  background: var(--fg-fundo-cartao); border: 1px solid var(--fg-borda-cartao);
  border-radius: var(--fg-raio); box-shadow: var(--fg-sombra);
}
a.fg-kpi { transition: box-shadow .15s ease, transform .15s ease; }
a.fg-kpi:hover { box-shadow: var(--fg-sombra-hover); transform: translateY(-1px); }
html.dark a.fg-kpi:hover { border-color: var(--fg-borda); }
/* Indicadores DENTRO de um cartao (ex.: producao na ficha do projeto): sombra
   em cima de sombra parece cartao empilhado. Viram blocos cinza-claros. */
.fg-cartao .fg-grade-4 > .fg-kpi, .fg-cartao .fg-grade-3 > .fg-kpi, .fg-cartao .fg-faixa > .fg-kpi {
  background: var(--fg-fundo-suave); box-shadow: none; border-color: transparent; border-radius: 14px;
}
.fg-cartao a.fg-kpi:hover { box-shadow: none; transform: none; background: var(--fg-menu-hover); }
a.fg-kpi:hover .fg-kpi-rotulo { color: var(--fg-texto); }
/* Atraso / alerta: o numero e o marcador ficam coloridos; o fundo continua
   neutro para a fileira nao parecer quebrada. */
.fg-kpi-perigo .fg-kpi-valor, .fg-kpi-perigo .fg-kpi-nota { color: var(--fg-perigo); }
.fg-kpi-perigo .fg-kpi-rotulo::before, .fg-kpi-alerta .fg-kpi-rotulo::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fg-perigo); flex: none;
}
.fg-kpi-alerta .fg-kpi-valor, .fg-kpi-alerta .fg-kpi-nota { color: var(--fg-alerta); }
/* Com icone colorido, o ponto vermelho no rotulo seria aviso em dobro. */
.fg-kpi:has(> .fg-kpi-icone) .fg-kpi-rotulo::before { display: none; }
.fg-kpi-alerta .fg-kpi-rotulo::before { background: var(--fg-alerta); }

.fg-entrada { color: var(--fg-entrada) !important; }
.fg-saida { color: var(--fg-saida) !important; }
.fg-perigo { color: var(--fg-perigo) !important; }
.fg-forte { font-weight: 600; }

/* ---------- tabelas ---------- */
.fg-tabela-caixa { overflow-x: auto; }
table.fg-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.fg-tabela th { text-align: left; font-weight: 550; font-size: 12.5px; color: var(--fg-texto-suave); padding: 10px 20px; border-bottom: 1px solid var(--fg-borda-suave); white-space: nowrap; background: transparent; }
.fg-tabela td { padding: 13px 20px; border-bottom: 1px solid var(--fg-borda-suave); vertical-align: top; color: var(--fg-texto); }
.fg-tabela tbody tr { transition: background-color .1s ease; }
.fg-tabela tbody tr:hover > td { background: color-mix(in srgb, var(--fg-fundo-suave) 70%, transparent); }
.fg-tabela tr:last-child td { border-bottom: none; }
.fg-tabela .fg-num { text-align: right; white-space: nowrap; }
.fg-tabela tr.fg-total td { font-weight: 650; border-top: 1px solid var(--fg-borda); background: var(--fg-fundo-suave); }
/* Tabela que termina o cartao: o fundo cinza da linha de total respeita o canto redondo. */
.fg-cartao > .fg-tabela-caixa:last-child { border-radius: 0 0 var(--fg-raio) var(--fg-raio); }
.fg-cartao > .fg-tabela-caixa:last-child .fg-tabela tr:last-child td { padding-bottom: 16px; }
.fg-tabela .fg-detalhe { display: block; font-size: 12.5px; color: var(--fg-texto-suave); margin-top: 2px; }
.fg-tabela a, .fg-pagina a.fg-link { color: var(--fg-primaria); font-weight: 550; text-decoration: none; }
.fg-tabela a:hover, .fg-pagina a.fg-link:hover { color: var(--fg-primaria-forte); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- etiquetas (situacao) ---------- */
.fg-etiqueta { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 550; white-space: nowrap; background: var(--fg-fundo-suave); color: var(--fg-texto-medio); border: 1px solid var(--fg-borda); line-height: 18px; }
.fg-etiqueta.ok, .fg-etiqueta.alerta, .fg-etiqueta.perigo, .fg-etiqueta.info, .fg-etiqueta.primaria { border-color: transparent; }
.fg-etiqueta.ok::before, .fg-etiqueta.alerta::before, .fg-etiqueta.perigo::before, .fg-etiqueta.info::before, .fg-etiqueta.primaria::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.fg-etiqueta.ok { background: var(--fg-ok-fundo); color: var(--fg-ok); }
.fg-etiqueta.alerta { background: var(--fg-alerta-fundo); color: var(--fg-alerta); }
.fg-etiqueta.perigo { background: var(--fg-perigo-fundo); color: var(--fg-perigo); }
.fg-etiqueta.info { background: var(--fg-entrada-fundo); color: var(--fg-entrada); }
.fg-etiqueta.primaria { background: var(--fg-primaria-fundo); color: var(--fg-primaria); }

/* ---------- botoes ---------- */
.fg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 15px; border: 1px solid var(--fg-borda-cartao); border-radius: var(--fg-raio-pequeno); background: var(--fg-fundo-cartao); color: var(--fg-texto) !important; font-size: 14px; font-weight: 550; text-decoration: none !important; cursor: pointer; font-family: inherit; white-space: nowrap; box-shadow: var(--fg-sombra); transition: background-color .12s ease, border-color .12s ease; }
.fg-btn:hover { box-shadow: var(--fg-sombra-hover); background: var(--fg-fundo-cartao); }
html.dark .fg-btn { border-color: var(--fg-borda); }
html.dark .fg-btn:hover { background: var(--fg-fundo-suave); }
.fg-btn:active { transform: translateY(.5px); }
.fg-btn-primario { background: var(--color-primary-600, #1f7f77); border-color: var(--color-primary-600, #1f7f77); color: #fff !important; font-weight: 600; box-shadow: 0 1px 2px rgba(20, 46, 75, .25), inset 0 1px 0 rgba(255, 255, 255, .12); }
.fg-btn-primario:hover { background: var(--color-primary-700, #1a6a63); border-color: var(--color-primary-700, #1a6a63); }
/* No escuro o botao usa o verde-agua da logo com texto azul-marinho: branco
   sobre esse verde nao se le (2,4:1); marinho sobre ele da 7:1. */
html.dark .fg-btn-primario { background: var(--color-primary-400, #43b7ac); border-color: var(--color-primary-400, #43b7ac); color: var(--color-base-950, #0b1b2e) !important; }
html.dark .fg-btn-primario:hover { background: var(--color-primary-300, #75ccc1); border-color: var(--color-primary-300, #75ccc1); }
.fg-btn-entrada { border-color: color-mix(in srgb, var(--fg-entrada) 45%, transparent); color: var(--fg-entrada) !important; font-weight: 600; }
.fg-btn-pequeno { min-height: 30px; padding: 0 11px; font-size: 13px; border-radius: 9px; }
.fg-btn .material-symbols-outlined { font-size: 18px; }

/* ---------- barras ---------- */
.fg-barra { height: 6px; border-radius: 3px; background: var(--fg-borda-suave); overflow: hidden; min-width: 80px; }
.fg-barra > span { display: block; height: 100%; border-radius: 3px; background: var(--fg-entrada); }
.fg-barra.saida > span { background: var(--fg-saida); }
.fg-barra.neutra > span { background: var(--fg-texto-medio); }
.fg-barra.primaria > span { background: var(--fg-primaria); }
.fg-barra.grossa { height: 8px; border-radius: 4px; }
.fg-barra-linha { display: flex; align-items: center; gap: 8px; }
.fg-barra-linha .fg-barra { flex: 1; }
.fg-barra-linha small { width: 38px; text-align: right; font-size: 12px; color: var(--fg-texto-suave); }

.fg-categoria { display: flex; flex-direction: column; gap: 6px; }
.fg-categoria-topo { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.fg-lista-categorias { display: flex; flex-direction: column; gap: 14px; }

/* grafico de colunas (fluxo de 6 meses) */
.fg-colunas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: end; height: 180px; border-bottom: 1px solid var(--fg-borda); padding: 0 6px; }
.fg-coluna { display: flex; justify-content: center; align-items: flex-end; gap: 3px; height: 100%; }
.fg-coluna span { width: 18px; border-radius: 4px 4px 0 0; }
.fg-coluna .e { background: var(--fg-entrada); }
.fg-coluna .s { background: var(--fg-saida); opacity: .85; }
.fg-colunas-rotulos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 6px 6px 0; font-size: 12px; color: var(--fg-texto-suave); text-align: center; }
.fg-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--fg-texto-suave); }
.fg-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.fg-legenda i.linha { height: 3px; width: 14px; border-radius: 2px; vertical-align: 3px; }

/* ---------- abas e etapas ---------- */
.fg-abas { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--fg-borda); }
.fg-abas a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; color: var(--fg-texto-suave); font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.fg-abas a:hover { color: var(--fg-texto); }
.fg-abas a.ativa { color: var(--fg-texto); border-bottom-color: var(--fg-primaria); font-weight: 600; }

/* Segmentos (escolha do periodo): pilulas lado a lado */
.fg-segmentos { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 12px; background: var(--fg-fundo-cartao); border: 1px solid var(--fg-borda-cartao); box-shadow: var(--fg-sombra); }
.fg-segmentos a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 7px; color: var(--fg-texto-medio); font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.fg-segmentos a:hover { color: var(--fg-texto); }
.fg-segmentos a { border-radius: 9px; }
.fg-segmentos a.ativa { background: var(--fg-primaria-fundo); color: var(--fg-primaria-forte); font-weight: 650; }
html.dark .fg-segmentos a.ativa { color: var(--fg-primaria); }

.fg-etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fg-etapas li { background: var(--fg-fundo-cartao); border: 1px solid var(--fg-borda-cartao); box-shadow: var(--fg-sombra); border-top: 3px solid var(--fg-borda); border-radius: var(--fg-raio-pequeno); padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.fg-etapas li strong { font-weight: 600; }
.fg-etapas li span { color: var(--fg-texto-suave); font-size: 12px; }
.fg-etapas li.feita { border-top-color: var(--fg-primaria); }
.fg-etapas li.atual { border-top-color: var(--fg-primaria); background: var(--fg-primaria-fundo); }
.fg-etapas li.atual strong, .fg-etapas li.atual span { color: var(--fg-primaria); }
@media (max-width: 640px) { .fg-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* lista "precisa de atencao" */
.fg-atencao { list-style: none; margin: 0; padding: 0; }
.fg-atencao li { padding: 12px 20px; border-bottom: 1px solid var(--fg-borda-suave); display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.fg-atencao li:last-child { border-bottom: none; }
/* Feed (Inicio): icone redondo a esquerda e o texto ao lado, como uma lista de
   atividades. As linhas nao tem divisoria: o icone ja separa um aviso do outro. */
.fg-feed li { flex-direction: row; align-items: flex-start; gap: 12px; border-bottom: none; padding: 10px 20px; }
.fg-feed-icone { flex: none; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; font-variation-settings: "FILL" 1; background: var(--fg-fundo-suave); color: var(--fg-texto-medio); }
.fg-feed-icone.entrada { background: var(--fg-entrada-fundo); color: var(--fg-entrada); }
.fg-feed-icone.saida { background: var(--fg-saida-fundo); color: var(--fg-saida); }
.fg-feed-icone.perigo { background: var(--fg-perigo-fundo); color: var(--fg-perigo); }
.fg-feed-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fg-feed > li:last-child { padding-bottom: 16px; }
.fg-atencao .fg-marca { font-size: 12px; font-weight: 600; color: var(--fg-texto-suave); }
.fg-atencao .fg-marca.fg-perigo { color: var(--fg-perigo); }
/* Versao compacta (Inicio): texto e valor na mesma linha, acao embaixo. */
.fg-atencao-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fg-atencao-linha > span { min-width: 0; overflow-wrap: anywhere; }
.fg-atencao-linha > strong { white-space: nowrap; font-weight: 600; }
.fg-atencao details > summary { list-style: none; cursor: pointer; padding: 12px 20px 16px; font-size: 13.5px; font-weight: 600; color: var(--fg-primaria); border-radius: 0 0 var(--fg-raio) var(--fg-raio); }
.fg-atencao details > summary::-webkit-details-marker { display: none; }
.fg-atencao details > summary:hover { background: var(--fg-fundo-suave); }
.fg-atencao details[open] > summary { display: none; }
.fg-atencao details > ul { list-style: none; margin: 0; padding: 0; }

.fg-aviso { padding: 12px 16px; border-radius: var(--fg-raio-pequeno); background: var(--fg-alerta-fundo); color: var(--fg-alerta); font-size: 14px; border: 1px solid color-mix(in srgb, var(--fg-alerta) 18%, transparent); }
.fg-aviso.perigo { background: var(--fg-perigo-fundo); color: var(--fg-perigo); border-color: color-mix(in srgb, var(--fg-perigo) 18%, transparent); }

/* resumo acima da lista de lancamentos */
.fg-resumo-lanc { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; padding: 14px 20px; border: 1px solid var(--fg-borda-cartao); border-radius: var(--fg-raio); background: var(--fg-fundo-cartao); box-shadow: var(--fg-sombra); }
.fg-resumo-totais { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; color: var(--fg-texto); }

/* formularios simples das telas proprias */
.fg-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.fg-campo { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--fg-texto); }
.fg-campo input, .fg-campo select { min-height: 38px; border: 1px solid var(--fg-borda); border-radius: var(--fg-raio-pequeno); padding: 0 10px; font: inherit; font-weight: 400; background: var(--fg-fundo-cartao); color: var(--fg-texto); box-shadow: var(--fg-sombra-campo); }
.fg-campo input:focus, .fg-campo select:focus, .fg-campo textarea:focus, .fg-select:focus { outline: 2px solid var(--color-primary-300, #75ccc1); outline-offset: 0; border-color: var(--fg-primaria); }
.fg-campo small { font-weight: 400; color: var(--fg-texto-suave); }
.fg-secao-titulo { font-size: 15px; font-weight: 600; margin: 0 0 12px; color: var(--fg-texto); }

/* =========================================================================
 * Compatibilidade do editor de orcamento (orcamento_form_v2.html).
 * O editor foi escrito com classes do Bootstrap/AdminLTE, que vinham do tema
 * antigo (Jazzmin). Este bloco recria o essencial delas so dentro de
 * .fg-legado, para o editor e o JavaScript dele continuarem iguais.
 * ======================================================================= */
.fg-legado { color: var(--fg-texto); font-size: 14px; }
.fg-legado .container-fluid { width: 100%; }
.fg-legado .row, .fg-legado .form-row { display: flex; flex-wrap: wrap; gap: 0 16px; }
.fg-legado .row > *, .fg-legado .form-row > * { min-width: 0; }
.fg-legado .col-md-4 { flex: 1 1 calc(33.333% - 16px); }
.fg-legado .col-md-6 { flex: 1 1 calc(50% - 16px); }
.fg-legado .col-md-12 { flex: 1 1 100%; }
.fg-legado .col-sm-2 { flex: 0 0 140px; }
.fg-legado .col-sm-10 { flex: 1 1 300px; }
@media (max-width: 768px) { .fg-legado .col-md-4, .fg-legado .col-md-6 { flex-basis: 100%; } }
.fg-legado .card { background: var(--fg-fundo-cartao); border: 1px solid var(--fg-borda-cartao); border-radius: var(--fg-raio); margin-bottom: 16px; box-shadow: var(--fg-sombra); }
.fg-legado .card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 20px 10px; }
.fg-legado .card-title { margin: 0; font-size: 14.5px; font-weight: 600; }
.fg-legado .card-body { padding: 12px 20px 18px; }
.fg-legado .card-body.p-0 { padding: 0; }
.fg-legado .card-primary.card-outline, .fg-legado .card-info.card-outline { border-top: 3px solid var(--fg-primaria); }
.fg-legado .form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.fg-legado label { font-size: 13px; font-weight: 600; }
.fg-legado .col-form-label { padding-top: 8px; }
/* .form-group e coluna; quando tambem e .row (rotulo ao lado do campo) volta a ser linha,
   senao o flex-basis das colunas vira ALTURA e abre buracos enormes. */
.fg-legado .form-group.row { flex-direction: row; align-items: flex-start; }
.fg-legado .form-control { width: 100%; box-sizing: border-box; min-height: 38px; padding: 6px 10px; border: 1px solid var(--fg-borda); border-radius: var(--fg-raio-pequeno); background: var(--fg-fundo-cartao); color: var(--fg-texto); font: inherit; }
.fg-legado textarea.form-control { min-height: 64px; }
.fg-legado .form-control:focus { outline: 2px solid var(--color-primary-300, #75ccc1); outline-offset: 0; border-color: var(--fg-primaria); }
.fg-legado .input-group { display: flex; align-items: stretch; }
.fg-legado .input-group-prepend .input-group-text { display: flex; align-items: center; height: 100%; padding: 0 10px; border: 1px solid var(--fg-borda); border-right: none; border-radius: var(--fg-raio-pequeno) 0 0 var(--fg-raio-pequeno); background: var(--fg-fundo-suave); font-size: 13px; }
.fg-legado .input-group .form-control { border-radius: 0 var(--fg-raio-pequeno) var(--fg-raio-pequeno) 0; }
.fg-legado .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--fg-borda); border-radius: var(--fg-raio-pequeno); background: var(--fg-fundo-cartao); color: var(--fg-texto); font: inherit; font-weight: 550; cursor: pointer; text-decoration: none; }
.fg-legado .btn-sm { min-height: 30px; padding: 0 10px; font-size: 13px; }
.fg-legado .btn-primary, .fg-legado .btn-success { background: var(--color-primary-600, #1f7f77); border-color: var(--color-primary-600, #1f7f77); color: #fff; font-weight: 600; }
/* btn-info era azul, a cor das entradas de dinheiro; aqui vira um botao neutro com texto da marca. */
.fg-legado .btn-info { background: var(--fg-fundo-cartao); border-color: var(--fg-borda); color: var(--fg-primaria); font-weight: 600; }
.fg-legado .btn-info:hover { background: var(--fg-primaria-fundo); }
.fg-legado .btn-danger { background: transparent; border-color: var(--fg-perigo); color: var(--fg-perigo); }
.fg-legado .btn-secondary { background: var(--fg-fundo-suave); }
.fg-legado .btn:disabled { opacity: .6; cursor: wait; }
.fg-legado .table { width: 100%; border-collapse: collapse; }
.fg-legado .table th, .fg-legado .table td { padding: 8px 10px; border-bottom: 1px solid var(--fg-borda-suave); text-align: left; }
.fg-legado .table-bordered th, .fg-legado .table-bordered td { border: 1px solid var(--fg-borda); }
.fg-legado .table-sm th, .fg-legado .table-sm td { padding: 6px 10px; }
.fg-legado .table-secondary td { background: var(--fg-fundo-suave); }
.fg-legado .text-right { text-align: right; }
.fg-legado .text-center { text-align: center; }
.fg-legado .font-weight-bold { font-weight: 700; }
.fg-legado .text-primary { color: var(--fg-primaria); }
.fg-legado .text-success { color: var(--fg-ok); }
.fg-legado .text-danger { color: var(--fg-perigo); }
.fg-legado .text-info { color: var(--fg-entrada); }
.fg-legado .text-muted { color: var(--fg-texto-suave); }
.fg-legado .float-right { float: right; }
.fg-legado .d-flex { display: flex; }
.fg-legado .justify-content-between { justify-content: space-between; }
.fg-legado .align-items-center { align-items: center; }
.fg-legado .mt-3 { margin-top: 12px; } .fg-legado .mt-4 { margin-top: 18px; } .fg-legado .ml-2 { margin-left: 8px; }
.fg-legado .pt-3 { padding-top: 12px; } .fg-legado .mb-2 { margin-bottom: 8px; } .fg-legado .mb-4 { margin-bottom: 18px; }
.fg-legado h3, .fg-legado h5, .fg-legado h6 { margin: 0; }
.fg-legado .material-symbols-outlined { font-size: 18px; }
.fg-legado .alert { padding: 10px 14px; border-radius: var(--fg-raio-pequeno); margin-bottom: 12px; background: var(--fg-fundo-suave); }
.fg-legado .alert-success { background: var(--fg-ok-fundo); color: var(--fg-ok); }
.fg-legado .alert-error, .fg-legado .alert-danger { background: var(--fg-perigo-fundo); color: var(--fg-perigo); }
/* barra flutuante do editor: respeita o menu lateral do Unfold */
.fg-legado .floating-action-bar { position: sticky !important; left: auto !important; right: auto !important; bottom: 0; margin: 16px -16px -16px; background: var(--fg-fundo-cartao) !important; border-top: 1px solid var(--fg-borda) !important; box-shadow: 0 -4px 16px rgba(20, 46, 75, .06) !important; }
.fg-legado #form-orcamento-v2 { padding-bottom: 0 !important; }
.fg-legado .form-text { font-size: 12px; color: var(--fg-texto-suave); }
.fg-legado hr { border: 0; border-top: 1px solid var(--fg-borda); margin: 16px 0; }
.fg-legado .card-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--fg-borda); }
.fg-legado .floating-price-display { color: var(--fg-ok) !important; }

/* seletor simples (mes do fluxo de caixa) */
.fg-select { min-height: 36px; padding: 0 30px 0 10px; border: 1px solid var(--fg-borda); border-radius: var(--fg-raio-pequeno); background-color: var(--fg-fundo-cartao); color: var(--fg-texto); font: inherit; font-size: 14px; box-shadow: var(--fg-sombra-campo); }

/* =========================================================================
 * Vendas e fiscal
 * ========================================================================= */
.fg-campo textarea { min-height: 72px; border: 1px solid var(--fg-borda); border-radius: var(--fg-raio-pequeno); padding: 8px 10px; font: inherit; font-weight: 400; background: var(--fg-fundo-cartao); color: var(--fg-texto); }
.fg-campo-check { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.fg-campo-check small { flex-basis: 100%; }
.fg-lista-provedores { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--fg-texto-suave); }
.fg-lista-provedores strong { color: var(--fg-texto); }

/* Funil: uma coluna por etapa, rola na horizontal no celular */
.fg-funil { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.fg-funil-coluna { background: color-mix(in srgb, var(--fg-borda-suave) 70%, transparent); border: 1px solid transparent; border-radius: var(--fg-raio); display: flex; flex-direction: column; min-width: 0; }
.fg-funil-cab { padding: 11px 12px 9px; display: flex; flex-direction: column; gap: 2px; }
.fg-funil-cab strong { font-size: 13.5px; font-weight: 600; }
.fg-funil-cab span { font-size: 12px; color: var(--fg-texto-suave); }
.fg-funil-cartoes { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 10px; min-height: 80px; }
.fg-funil-coluna.alvo { outline: 2px dashed var(--fg-primaria); outline-offset: -4px; }
.fg-op { background: var(--fg-fundo-cartao); border: 1px solid var(--fg-borda-cartao); border-radius: 12px; padding: 10px 11px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; box-shadow: var(--fg-sombra); }
.fg-op[draggable="true"] { cursor: grab; }
.fg-op[draggable="true"]:hover { box-shadow: var(--fg-sombra-hover); }
.fg-op a.fg-op-titulo { font-weight: 600; color: var(--fg-texto); text-decoration: none; }
.fg-op a.fg-op-titulo:hover { color: var(--fg-primaria); }
.fg-op .fg-op-linha { display: flex; justify-content: space-between; gap: 6px; color: var(--fg-texto-suave); }
.fg-op .fg-op-atrasado { color: var(--fg-perigo); font-weight: 600; }
.fg-op form { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.fg-op .fg-select { min-height: 30px; font-size: 12px; padding: 0 22px 0 6px; max-width: 100%; }

/* Linha do tempo das atividades */
.fg-historico { list-style: none; margin: 0; padding: 0; }
.fg-historico li { padding: 12px 18px; border-bottom: 1px solid var(--fg-borda-suave); font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.fg-historico li:last-child { border-bottom: none; }
.fg-historico .fg-historico-meta { font-size: 12px; color: var(--fg-texto-suave); }
.fg-historico p { margin: 0; white-space: pre-line; }

/* Dados fiscais na ficha da venda */
.fg-dados { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 14px; margin: 0; }
.fg-dados dt { color: var(--fg-texto-suave); }
.fg-dados dd { margin: 0; word-break: break-all; }
.fg-form-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.fg-form-linha input[type=text], .fg-form-linha input[type=number], .fg-form-linha input[type=search] { min-height: 36px; border: 1px solid var(--fg-borda); border-radius: var(--fg-raio-pequeno); padding: 0 10px; font: inherit; background: var(--fg-fundo-cartao); color: var(--fg-texto); }

/* Dados da empresa */
.fg-logo-previa { width: 180px; min-height: 90px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--fg-borda); border-radius: var(--fg-raio-pequeno); padding: 8px; }
.fg-logo-previa img { max-width: 100%; max-height: 90px; }
.fg-campo-arquivo input[type=file] { min-height: auto; padding: 8px 0; border: none; box-shadow: none; }

/* Aparencia dos documentos: previa do PDF numa folha reduzida */
.fg-previa { background: #e5e7eb; height: 760px; overflow: hidden; position: relative; border-radius: 0 0 var(--fg-raio) var(--fg-raio); }
.fg-previa iframe { border: 0; width: 1000px; height: 1250px; transform: scale(.6); transform-origin: 0 0; position: absolute; left: 50%; margin-left: -300px; }
.fg-campo input[type=color] { padding: 2px; width: 80px; height: 40px; cursor: pointer; }
@media (max-width: 640px) { .fg-previa { height: 520px; } .fg-previa iframe { transform: scale(.36); margin-left: -180px; } }

/* Quadro da oficina */
.fg-op.fg-op-alerta { border-left: 3px solid var(--fg-perigo); }
.fg-op .fg-op-perto { color: var(--fg-alerta); font-weight: 600; }

/* Agenda da semana: 7 colunas no computador, uma embaixo da outra no celular */
.fg-agenda { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.fg-agenda-dia { background: var(--fg-fundo-cartao); border: 1px solid var(--fg-borda-cartao); border-radius: var(--fg-raio); min-height: 220px; display: flex; flex-direction: column; box-shadow: var(--fg-sombra); }
.fg-agenda-dia.hoje { border-color: var(--fg-primaria); box-shadow: inset 0 3px 0 var(--fg-primaria); }
.fg-agenda-cab { padding: 9px 10px; border-bottom: 1px solid var(--fg-borda-suave); display: flex; gap: 6px; align-items: baseline; font-size: 13px; }
.fg-agenda-cab span { color: var(--fg-texto-suave); }
.fg-agenda-cab a { margin-left: auto; font-size: 18px; text-decoration: none; }
.fg-agenda-itens { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.fg-ag { background: var(--fg-fundo-suave); border: 1px solid var(--fg-borda-suave); border-left: 3px solid var(--fg-primaria); border-radius: var(--fg-raio-pequeno); padding: 8px; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.fg-ag.tipo-MEDICAO { border-left-color: var(--fg-entrada); }
.fg-ag.tipo-ENTREGA { border-left-color: var(--fg-saida); }
.fg-ag.tipo-ASSISTENCIA { border-left-color: var(--fg-perigo); }
.fg-ag.feito { opacity: .55; }
.fg-ag.previsto { border-style: dashed; border-left-style: solid; border-left-color: var(--fg-alerta); }
.fg-ag form { margin-top: 2px; }
@media (max-width: 1100px) { .fg-agenda { grid-template-columns: minmax(0, 1fr); } .fg-agenda-dia { min-height: 0; } }
/* Botao do cartao do quadro: nome de etapa longo quebra a linha em vez de vazar. */
.fg-op form .fg-btn { max-width: 100%; white-space: normal; text-align: left; height: auto; min-height: 30px; line-height: 1.25; padding-top: 4px; padding-bottom: 4px; }
/* Quadro no celular: uma etapa embaixo da outra; etapa sem projeto fica so com o titulo. */
@media (max-width: 700px) {
  .fg-quadro { grid-template-columns: 1fr !important; overflow-x: visible; }
  .fg-quadro .fg-coluna-vazia .fg-funil-cartoes { display: none; }
  .fg-quadro .fg-funil-cartoes { min-height: 0; }
}
/* Checkbox com texto longo: o texto quebra ao lado da caixa, nao embaixo dela. */
.fg-campo-check > span { flex: 1; min-width: 0; }
/* Tabela que vira cartoes no celular (ex.: receber pedido): nenhum campo
   fica escondido na rolagem lateral. Cada celula mostra o titulo da coluna. */
@media (max-width: 700px) {
  .fg-tabela-empilhada thead { display: none; }
  .fg-tabela-empilhada, .fg-tabela-empilhada tbody, .fg-tabela-empilhada tr, .fg-tabela-empilhada td { display: block; width: 100%; box-sizing: border-box; }
  .fg-tabela-empilhada tr { padding: 8px 0; border-bottom: 1px solid var(--fg-borda); }
  .fg-tabela-empilhada td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: none !important; padding: 4px 16px; text-align: right; }
  .fg-tabela-empilhada td[data-label]::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--fg-texto-suave); text-align: left; }
  .fg-tabela-empilhada td.fg-celula-titulo { font-weight: 600; text-align: left; }
  .fg-tabela-empilhada td.fg-celula-vazia { display: none; }
  .fg-tabela-empilhada tr.fg-total td { padding: 4px 16px; }
}
/* Anexos: miniatura (ou o tipo do arquivo), nome e quem enviou. */
.fg-anexos { list-style: none; margin: 0; padding: 0; }
.fg-anexos li { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--fg-borda-suave); }
.fg-anexo-icone { flex: 0 0 48px; height: 48px; border-radius: var(--fg-raio-pequeno); border: 1px solid var(--fg-borda); background: var(--fg-fundo-suave);
  display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 11px; font-weight: 700; color: var(--fg-texto-suave); text-decoration: none; }
.fg-anexo-icone img { width: 100%; height: 100%; object-fit: cover; }
.fg-anexo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; overflow-wrap: anywhere; }
/* Duas colunas lado a lado (ex.: vales e faltas na Folha do mes); uma so no celular. */
.fg-grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 900px) { .fg-grade-2 { grid-template-columns: minmax(0, 1fr); } }
/* Agenda: quem esta fora (ferias, falta) naquele dia. */
.fg-agenda-fora { font-size: 12px; color: var(--fg-texto-suave); padding: 8px 10px 0; }
/* Pedidos de alteracao (aba do projeto): um cartao por alteracao. */
.fg-alteracoes { display: flex; flex-direction: column; }
.fg-alteracao { padding: 14px 18px; border-bottom: 1px solid var(--fg-borda-suave); display: flex; flex-direction: column; gap: 8px; }
.fg-alteracao:last-child { border-bottom: none; }
.fg-alteracao-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fg-alteracao-texto { font-size: 14px; color: var(--fg-texto); overflow-wrap: anywhere; }
.fg-alteracao-numeros { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--fg-texto-suave); }
.fg-alteracao-numeros strong { color: var(--fg-texto); }
.fg-alteracao-ajustes { margin: 0; padding-left: 18px; font-size: 13px; color: var(--fg-texto-suave); }
.fg-alteracao .fg-acoes { flex-wrap: wrap; align-items: center; }
.fg-alteracao .fg-form-linha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.fg-alteracao .fg-form-linha input[type=text] { min-height: 32px; padding: 0 8px; border: 1px solid var(--fg-borda); border-radius: var(--fg-raio-pequeno); font: inherit; font-size: 13px; background: var(--fg-fundo-cartao); color: var(--fg-texto); width: 190px; max-width: 100%; }
.fg-alteracao form { margin: 0; }

/* =========================================================================
 * Resultados (dashboard)
 * ========================================================================= */
.fg-variacao { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 600; }
.fg-variacao.sobe { color: var(--fg-ok); }
.fg-variacao.desce { color: var(--fg-perigo); }
.fg-variacao.neutra { color: var(--fg-texto-suave); }
.fg-variacao .material-symbols-outlined { font-size: 16px; }
.fg-faixa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fg-espaco); }
@media (max-width: 1100px) { .fg-faixa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .fg-faixa { grid-template-columns: minmax(0, 1fr); } }
.fg-faixa > .fg-kpi { background: var(--fg-fundo-cartao); }

.fg-grafico { position: relative; height: 280px; }
.fg-grafico.alto { height: 300px; }
.fg-grafico.baixo { height: 220px; }
.fg-grafico canvas { display: block; }
.fg-grafico-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.fg-secao-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin: 12px 0 -6px; }
.fg-secao-cab h2 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.015em; color: var(--fg-texto); }

/* Numeros-resumo dentro de um cartao (ex.: producao) */
.fg-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.fg-numeros div { display: flex; flex-direction: column; gap: 2px; }
.fg-numeros dt { font-size: 12.5px; color: var(--fg-texto-suave); }
.fg-numeros dd { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.fg-numeros small { font-size: 12px; color: var(--fg-texto-suave); }

/* Barras horizontais com rotulo (despesas por categoria, horas, origens) */
.fg-hbarras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fg-hbarras li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; font-size: 13.5px; align-items: baseline; }
.fg-hbarras li > .fg-barra { grid-column: 1 / -1; }
.fg-hbarras li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-hbarras li strong { font-weight: 600; white-space: nowrap; }
.fg-hbarras li strong small { font-weight: 450; color: var(--fg-texto-suave); margin-left: 6px; }

/* Margem por projeto: barra que comeca no zero e cresce para a direita */
.fg-margem { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.fg-margem .fg-barra { width: 90px; min-width: 60px; flex: none; }
.fg-margem.negativa .fg-barra > span { background: var(--fg-perigo); }
.fg-margem .fg-barra > span { background: var(--fg-primaria); }
@media (max-width: 640px) { .fg-margem .fg-barra { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Escuro: o Unfold usa primary-500 nos links, que fica apagado sobre o fundo
   escuro. Um tom mais claro mantem o contraste. */
html.dark #content [class*="dark:text-primary-500"],
html.dark #content #result_list a { color: var(--color-primary-400, #43b7ac); }
html.dark #content #result_list a:hover { color: var(--color-primary-300, #75ccc1); }

/* Ficha do orcamento: resposta do cliente (aprovar, pausar, recusar) sem abrir o editor. */
.fg-situacao { border-color: color-mix(in srgb, var(--fg-primaria) 35%, var(--fg-borda)); }
.fg-situacao-corpo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.fg-situacao-texto { display: flex; flex-direction: column; gap: 2px; min-width: 220px; flex: 1; }
.fg-situacao-texto strong { font-size: 14.5px; }
.fg-situacao form { margin: 0; }
.fg-btn-perigo { color: var(--fg-perigo) !important; border-color: color-mix(in srgb, var(--fg-perigo) 35%, transparent); }
.fg-btn-perigo:hover { background: var(--fg-perigo-fundo); }
.fg-vendedor-form { display: inline; margin: 0; }
.fg-vendedor-form label { display: inline-flex; align-items: center; gap: 6px; }
.fg-vendedor-form select { min-height: 28px; border: 1px solid var(--fg-borda); border-radius: 7px; padding: 0 6px; font: inherit; font-size: 13px; background: var(--fg-fundo-cartao); color: var(--fg-texto); }

/* Indicadores dentro de um cartao (ex.: producao na ficha do projeto): com
   folga das bordas, e nao colados no canto do cartao. */
.fg-cartao > .fg-grade-4, .fg-cartao > .fg-grade-3 { padding: 6px 20px 20px; gap: 12px; }
/* Botoes ao lado de cada anexo (mostrar ao cliente, apagar). */
.fg-anexos li > form { margin: 0; flex: none; }

/* Cliente preenchido pelo orcamento/projeto (static/js/fabri-vinculos.js). */
.fg-vinculo-nota { margin-top: 6px; font-size: 12.5px; font-weight: 550; color: var(--fg-primaria); display: flex; align-items: center; gap: 6px; }
.fg-vinculo-nota::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.fg-vinculo-nota.perigo { color: var(--fg-perigo); }
.fg-vinculo-destaque { animation: fg-vinculo 1.6s ease-out; border-radius: 10px; }
@keyframes fg-vinculo { 0% { box-shadow: 0 0 0 4px var(--fg-primaria-fundo); background: var(--fg-primaria-fundo); } 100% { box-shadow: 0 0 0 4px transparent; background: transparent; } }
.fg-funil-chip { display: inline-flex; align-items: center; gap: 3px; }
.fg-funil-chip .material-symbols-outlined { font-size: 16px; }

/* --- Producao: ficha, distribuicao e configuracao da tela da oficina --- */
.fg-linha-apagada td { color: var(--fg-texto-suave); }
.fg-linha-apagada td strong { text-decoration: line-through; font-weight: 500; }
.fg-acoes-etapa { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; }
.fg-acoes-etapa form { display: flex; flex-wrap: wrap; gap: 4px; }
.fg-parar summary { list-style: none; }
.fg-parar summary::-webkit-details-marker { display: none; }
.fg-parar[open] summary { background: var(--fg-perigo-fundo); }
.fg-parar-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; min-width: 210px; }
.fg-oficina-qr { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.fg-oficina-qr-img { width: 150px; flex: none; background: #fff; border-radius: 10px; padding: 6px; }
.fg-oficina-qr-img svg { width: 100%; height: auto; display: block; }
.fg-codigo-link { font-size: 12px; word-break: break-all; color: var(--fg-texto-medio); }
.fg-distribuicao-separador { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-texto-suave); padding: 6px 2px 0; }
.fg-op.fg-op-depois { opacity: .78; box-shadow: none; border-style: dashed; border-color: var(--fg-borda); }
.fg-distribuicao-depois > summary { cursor: pointer; padding: 8px 2px; }
.fg-distribuicao-depois .fg-funil-cartoes { padding: 0; }

/* --- Financeiro: A receber / A pagar e registrar pagamento --- */
.fg-lista-cab { flex-wrap: wrap; gap: 10px; }
.fg-abas-mini { display: flex; flex-wrap: wrap; gap: 4px; }
.fg-abas-mini a { padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 550; color: var(--fg-texto-medio); text-decoration: none; background: var(--fg-fundo-suave); }
.fg-abas-mini a:hover { color: var(--fg-texto); }
.fg-abas-mini a.ativa { background: var(--fg-primaria-fundo); color: var(--fg-primaria); }
.fg-lista-filtro { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fg-lista-filtro input[type=search] { min-width: 220px; }
.fg-link-texto { color: var(--fg-texto); font-weight: 550; text-decoration: none; }
.fg-link-texto:hover { color: var(--fg-primaria); }
.fg-pequeno { font-size: 12.5px; margin-top: 2px; }
.fg-registrar { max-width: 760px; }
.fg-registrar-resumo { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-bottom: 18px; }
.fg-registrar-resumo > div { display: flex; flex-direction: column; gap: 2px; }
.fg-registrar-resumo strong { font-size: 18px; }
.fg-form-registrar { display: flex; flex-direction: column; gap: 14px; }
.fg-form-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.fg-diferenca { border: 1px solid var(--fg-borda); border-radius: var(--fg-raio-pequeno); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.fg-diferenca legend { font-weight: 600; font-size: 14px; padding: 0 4px; }
.fg-diferenca[hidden] { display: none; }
.fg-diferenca small { display: block; color: var(--fg-texto-suave); font-weight: 400; }

/* --- Estoque: retirada com varias linhas e ferramentas --- */
.ret-linhas { display: flex; flex-direction: column; gap: 6px; }
.ret-cab, .ret-linha { display: grid; grid-template-columns: minmax(0, 3fr) 120px minmax(90px, 1fr) 36px; gap: 8px; align-items: center; }
.ret-cab { font-size: 12.5px; font-weight: 600; color: var(--fg-texto-suave); }
.ret-linha select, .ret-linha input { width: 100%; min-width: 0; }
.ret-saldo { font-size: 13px; color: var(--fg-texto-suave); }
.ret-saldo.ret-negativo { color: var(--fg-perigo); font-weight: 600; }
.ret-tirar { border: none; background: none; font-size: 20px; color: var(--fg-texto-suave); cursor: pointer; }
.ret-tirar:hover { color: var(--fg-perigo); }
.ret-mais { align-self: flex-start; margin-top: 4px; }
.fg-ret-tipos { display: flex; flex-wrap: wrap; gap: 6px; }
.fg-ret-tipo input { position: absolute; opacity: 0; }
.fg-ret-tipo span { display: inline-flex; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--fg-borda); cursor: pointer; font-weight: 550; font-size: 14px; }
.fg-ret-tipo input:checked + span { background: var(--fg-primaria-fundo); color: var(--fg-primaria); border-color: var(--fg-primaria); }
.fg-ret-tipo input:focus-visible + span { outline: 2px solid var(--fg-primaria); }
.fg-aviso.info { background: var(--fg-entrada-fundo); color: var(--fg-entrada); border-color: transparent; }
.fg-emprestimo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; padding: 3px 0; }
@media (max-width: 640px) {
  .ret-cab { display: none; }
  .ret-linha { grid-template-columns: minmax(0, 1fr) 100px 36px; }
  .ret-linha select { grid-column: 1 / -1; }
  .ret-linha input { grid-column: 2; grid-row: 2; }
  .ret-saldo { grid-column: 1; grid-row: 2; }
  .ret-tirar { grid-column: 3; grid-row: 2; }
}

/* Menu "Imprimir" (ficha do projeto/orcamento): lista dos documentos que abrem prontos para imprimir. */
.fg-menu-imprimir { position: relative; }
.fg-menu-imprimir > summary { list-style: none; cursor: pointer; }
.fg-menu-imprimir > summary::-webkit-details-marker { display: none; }
.fg-menu-imprimir-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 270px; padding: 6px;
  background: var(--fg-fundo-cartao); border: 1px solid var(--fg-borda); border-radius: var(--fg-raio); box-shadow: var(--fg-sombra-alta); }
.fg-menu-imprimir-lista a { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--fg-texto); font-size: 14px; }
.fg-menu-imprimir-lista a:hover { background: var(--fg-fundo-suave); }
.fg-menu-imprimir-lista a span { font-size: 12px; color: var(--fg-texto-suave); }
.fg-menu-imprimir-lista hr { border: 0; border-top: 1px solid var(--fg-borda-suave); margin: 4px 0; }

/* Primeiros passos (Inicio): lista em colunas, feito em verde e riscado de leve. */
.fg-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 18px; }
.fg-passos li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.fg-passos li .material-symbols-outlined { font-size: 20px; color: var(--fg-texto-suave); }
.fg-passos li.feito .material-symbols-outlined { color: #2f8f6b; }
.fg-passos li.feito a { color: var(--fg-texto-suave); text-decoration: line-through; }
.fg-passos li a { color: inherit; }
.fg-passos li a:hover { text-decoration: underline; }
.fg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }