/* Forja — sistema de design por cima do tema Syncfusion Fluent 2. Tokens claros/escuros + componentes próprios.
   ═══ TOKENS (S2-tema, 10/10/2026) — ÚNICO sítio com cores. Ver docs/S2-THEME.md. ═══
   Neutros sem tom azul (cinzas puros), alinhados com o Fluent 2 / Fluent 2 Dark do Syncfusion; acento = azul da marca
   ajustado para AA (texto ≥ 4,5:1 sobre --superficie, --superficie-2 e --fundo). Nada de hex fora deste bloco:
   páginas, .razor.css e movel.css usam var(--…). Cores de séries de gráficos: --grafico-1…9 (espelho em C#:
   Forja.UI.PaletaGraficos — o Syncfusion desenha SVG a partir de C#). */
html:root {
  color-scheme: light;
  --fonte: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  /* superfícies (do mais fundo para o mais elevado) */
  --fundo: #f4f4f4;            /* fundo da aplicação */
  --superficie: #ffffff;       /* cartões, grelhas, painéis */
  --superficie-2: #f7f7f7;     /* zonas secundárias, cabeçalhos, linhas alternadas */
  --superficie-3: #ededed;     /* hover, trilhos, chips neutros */
  --elevacao: #ffffff;         /* popups, menus, diálogos */
  --borda: #e3e3e3;
  --borda-forte: #c7c7c7;      /* campos, separadores marcados */
  /* texto */
  --texto: #1a1a1a;
  --texto-2: #474747;
  --texto-3: #696969;          /* ≥ 4,5:1 sobre #f4f4f4 */
  --texto-desativado: #a3a3a3;
  --texto-inverso: #ffffff;    /* sobre --primario, --lateral, cores sólidas */
  /* marca e acento */
  --marca: #4f7cff;            /* símbolo, decoração (não texto pequeno) */
  --marca-2: #8b5cf6;
  --acento: #355bdc;           /* links, ícones ativos, texto de destaque (5:1 sobre --acento-suave) */
  --acento-forte: #2c4fc4;
  --acento-suave: #ecf0fd;
  --primario: #3b63e6;         /* botão primário (texto branco 5,1:1) */
  --primario-2: #5b4fe0;
  --primario-hover: #3256cf;
  --foco: rgba(59, 99, 230, .28);
  --selecao: #e3eafc;          /* linha/célula selecionada */
  --linha-hover: #f2f4fa;      /* linha de grelha/lista sob o rato */
  /* semânticas: cor sólida, fundo suave e texto AA sobre o fundo suave */
  --verde: #16a34a;    --verde-suave: #e9f7ee;    --verde-texto: #0f6b34;
  --laranja: #d97706;  --laranja-suave: #fdf3e3;  --laranja-texto: #8f4a06;
  --vermelho: #dc2626; --vermelho-suave: #fcebeb; --vermelho-texto: #a61b1b;
  --roxo: #7c3aed;     --roxo-suave: #f1ecfd;     --roxo-texto: #5b21b6;
  --azul: #3b63e6;     --azul-suave: #ecf0fd;     --azul-texto: #2645b0;
  --ciano: #0891b2;    --rosa: #db2777;
  --perigo: #c62828;           /* botão destrutivo (texto branco 5,6:1) */
  /* sólidos para fundos com texto branco (≥ 4,5:1), iguais nos dois temas */
  --verde-solido: #15803d; --laranja-solido: #b45309; --vermelho-solido: #c62828; --roxo-solido: #6d28d9;
  /* menu lateral — segue o tema (claro: cinza muito claro com borda à direita) */
  --lateral: #fafafa;
  --lateral-2: #fafafa;
  --lateral-texto: #3d3d3d;
  --lateral-texto-forte: #1a1a1a;
  --lateral-secao: #6b6b6b;      /* 5,1:1 sobre #fafafa */
  --lateral-borda: #e3e3e3;
  --lateral-hover: rgba(0, 0, 0, .05);
  --lateral-ativo: #e8edfc;
  --lateral-ativo-traco: #355bdc;
  --lateral-ativo-texto: #2c4fc4; /* 6:1 sobre --lateral-ativo */
  /* painel escuro fixo (marca no ecrã de entrada, avisos do móvel) — igual nos dois temas */
  --painel-escuro: #161616; --painel-escuro-texto: #bdbdbd; --painel-escuro-borda: rgba(255, 255, 255, .08); --painel-escuro-destaque: #7a9dff;
  /* sombras, véus, scroll */
  --sombra: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 16px rgba(0, 0, 0, .05);
  --sombra-forte: 0 12px 40px rgba(0, 0, 0, .16);
  --sombra-primario: 0 6px 16px rgba(59, 99, 230, .3);
  --veu: rgba(0, 0, 0, .32);
  --scroll-polegar: #c2c2c2;
  --scroll-polegar-hover: #a3a3a3;
  --scroll-trilho: transparent;
  /* gráficos */
  --grafico-1: #4f7cff; --grafico-2: #0d9488; --grafico-3: #d97706; --grafico-4: #8b5cf6; --grafico-5: #db2777;
  --grafico-6: #0891b2; --grafico-7: #16a34a; --grafico-8: #dc2626; --grafico-9: #737373;
  --grafico-texto: #474747;
  --grafico-grelha: #ebebeb;
  --grafico-eixo: #c7c7c7;
  /* eventos de agenda (assiduidade, férias) — sólidos com texto branco ≥ 4,5:1, iguais nos dois temas */
  --evento-trabalho: #15803d; --evento-ferias: #b45309; --evento-falta: #7c3aed; --evento-neutro: #6b6b6b;
  --evento-pendente: #86efac; --evento-pendente-texto: #14532d;
  /* "papel": pré-visualizações de impressão (etiquetas, assinaturas) ficam brancas nos dois temas */
  --papel: #ffffff; --papel-texto: #111111; --papel-texto-2: #3d3d3d; --papel-borda: #d1d1d1;
  --raio: 14px;
}
html:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #121212;
  --superficie: #1c1c1c;
  --superficie-2: #242424;
  --superficie-3: #2e2e2e;
  --elevacao: #262626;
  --borda: #333333;
  --borda-forte: #4a4a4a;
  --texto: #f0f0f0;
  --texto-2: #c8c8c8;
  --texto-3: #9e9e9e;          /* ≥ 4,5:1 sobre #2e2e2e */
  --texto-desativado: #6b6b6b;
  --texto-inverso: #ffffff;
  --acento: #7a9dff;           /* 5,4:1 sobre #2b2b2b */
  --acento-forte: #a3bcff;
  --acento-suave: rgba(122, 157, 255, .15);
  --primario: #3b63e6;
  --primario-2: #5b4fe0;
  --primario-hover: #4a70f0;
  --foco: rgba(122, 157, 255, .35);
  --selecao: #30353f;          /* S2.4: acento discreto sobre --superficie (b−r ≤ 18: sem "azul-marinho" nas linhas selecionadas) */
  --linha-hover: #2a2a2a;
  --verde: #22c55e;    --verde-suave: rgba(34, 197, 94, .14);   --verde-texto: #6ee79a;
  --laranja: #f59e0b;  --laranja-suave: rgba(245, 158, 11, .14); --laranja-texto: #fcc560;
  --vermelho: #ef4444; --vermelho-suave: rgba(239, 68, 68, .15); --vermelho-texto: #fb9b9b;
  --roxo: #a78bfa;     --roxo-suave: rgba(167, 139, 250, .16);  --roxo-texto: #cdbcfd;
  --azul: #7a9dff;     --azul-suave: rgba(122, 157, 255, .15);  --azul-texto: #a8c0ff;
  --ciano: #22b8d8;    --rosa: #f0609e;
  --lateral: #0d0d0d;
  --lateral-2: #0d0d0d;
  --lateral-texto: #b8b8b8;
  --lateral-texto-forte: #ffffff;
  --lateral-secao: #8a8a8a;
  --lateral-borda: #262626;
  --lateral-hover: rgba(255, 255, 255, .07);
  --lateral-ativo: rgba(122, 157, 255, .2);
  --lateral-ativo-traco: #7a9dff;
  --lateral-ativo-texto: #ffffff;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
  --sombra-forte: 0 12px 40px rgba(0, 0, 0, .55);
  --sombra-primario: 0 6px 16px rgba(0, 0, 0, .4);
  --veu: rgba(0, 0, 0, .6);
  --scroll-polegar: #4a4a4a;
  --scroll-polegar-hover: #5e5e5e;
  --grafico-texto: #c8c8c8;
  --grafico-grelha: #2e2e2e;
  --grafico-eixo: #4a4a4a;
}

/* ═══ Syncfusion Fluent 2 → tokens da app (as variáveis --color-sf-* do tema são sobrepostas; o forja.css carrega depois
   do link #sf-tema). Mesmo mapeamento nos dois temas: os tokens é que mudam. ═══ */
html:root, html:root[data-tema="escuro"] {
  --color-sf-content-bg-color: var(--superficie);
  --color-sf-content-bg-color-alt1: var(--elevacao);
  --color-sf-content-bg-color-alt2: var(--superficie-2);
  --color-sf-content-bg-color-alt3: var(--superficie-3);
  --color-sf-content-bg-color-alt4: var(--superficie-2);
  --color-sf-content-bg-color-alt5: var(--superficie-3);
  --color-sf-content-bg-color-alt6: var(--superficie-3);
  --color-sf-content-bg-color-hover: var(--superficie-3);
  --color-sf-content-bg-color-pressed: var(--borda);
  --color-sf-content-bg-color-focus: var(--superficie-3);
  --color-sf-content-bg-color-selected: var(--selecao);
  --color-sf-content-bg-color-dragged: var(--acento-suave);
  --color-sf-content-bg-color-disabled: var(--superficie-2);
  --color-sf-flyout-bg-color: var(--elevacao);
  --color-sf-flyout-bg-color-hover: var(--superficie-3);
  --color-sf-flyout-bg-color-pressed: var(--borda);
  --color-sf-flyout-bg-color-selected: var(--selecao);
  --color-sf-flyout-bg-color-focus: var(--superficie-3);
  --color-sf-flyout-border: var(--borda);
  --color-sf-overlay-bg-color: var(--veu);
  --color-sf-table-bg-color-hover: var(--superficie-2);
  --color-sf-table-bg-color-pressed: var(--superficie-3);
  --color-sf-table-bg-color-selected: var(--selecao);
  --color-sf-content-text-color: var(--texto);
  --color-sf-content-text-color-alt1: var(--texto-2);
  --color-sf-content-text-color-alt2: var(--texto-2);
  --color-sf-content-text-color-alt3: var(--texto-3);
  --color-sf-content-text-color-focus: var(--texto);
  --color-sf-content-text-color-disabled: var(--texto-desativado);
  --color-sf-placeholder-text-color: var(--texto-3);
  --color-sf-icon-color: var(--texto-2);
  --color-sf-border-light: var(--borda);
  --color-sf-border: var(--borda-forte);
  --color-sf-border-dark: var(--borda-forte);
  --color-sf-border-hover: var(--texto-3);
  --color-sf-border-focus: var(--borda-forte);
  --color-sf-border-selected: var(--borda-forte);
  --color-sf-border-disabled: var(--borda);
  --color-sf-dialog-border: var(--borda);
  --color-sf-primary: var(--primario);
  --color-sf-primary-text-color: var(--texto-inverso);
  --color-sf-primary-light: var(--acento-suave);
  --color-sf-primary-lighter: var(--acento-suave);
  --color-sf-primary-dark: var(--acento-forte);
  --color-sf-primary-darker: var(--acento-forte);
  --color-sf-primary-label-color: var(--acento);
  --color-sf-primary-cell-selection: var(--selecao);
  --color-sf-primary-bg-color-hover: var(--primario-hover);
  --color-sf-primary-bg-color-pressed: var(--acento-forte);
  --color-sf-primary-bg-color-selected: var(--primario-hover);
  --color-sf-primary-bg-color-disabled: var(--superficie-3);
  --color-sf-secondary-bg-color: var(--superficie);
  --color-sf-secondary-border-color: var(--borda-forte);
  --color-sf-secondary-bg-color-hover: var(--superficie-2);
  --color-sf-secondary-bg-color-pressed: var(--superficie-3);
  --color-sf-secondary-bg-color-focus: var(--superficie-2);
  --color-sf-secondary-bg-color-selected: var(--superficie-3);
  --color-sf-secondary-bg-color-disabled: var(--superficie-2);
  --color-sf-secondary-border-color-focus: var(--acento);
  --color-sf-link-button: var(--acento);
  --color-sf-link-button-hover: var(--acento-forte);
  --color-sf-link-button-pressed: var(--acento);
  --color-sf-link-button-focus: var(--acento);
  --color-sf-tooltip-bg-color: var(--elevacao);
  --color-sf-tooltip-border: var(--borda);
  --color-sf-tooltip-text-color: var(--texto);
  --color-sf-toast-text-color: var(--texto);
  --color-sf-toast-alt-text-color: var(--texto-2);
  --color-sf-chip-bg-color: var(--superficie-3);
  --color-sf-chip-border-color: var(--superficie-3);
  --color-sf-cell-selection-bg-color: var(--selecao);
  --color-sf-calendar-today-bg-color: var(--primario);
  --color-sf-calendar-icon-color: var(--acento);
  --color-sf-holiday-bg-color: var(--superficie-2);
  --color-sf-toolbar-icon-color: var(--acento);
  --color-sf-sort-bg-color: var(--superficie-3);
  --color-sf-taskbar-bg: color-mix(in srgb, var(--grafico-1) 35%, var(--superficie));
  --color-sf-taskbar-border: var(--grafico-1);
  --color-sf-taskbar-progress: var(--grafico-1);
  --color-sf-skeleton-bg-color: var(--superficie-3);
  --color-sf-badge-light-bg-color: var(--superficie-3);
  --color-sf-secondary-badge-bg-color: var(--superficie-3);
  --color-sf-secondary-badge-border-color: var(--superficie-3);
  --color-sf-msg-bg-color: var(--superficie-2);
  --color-sf-msg-border-color: var(--borda);
  --color-sf-appbar-bg-color-alt1: var(--superficie-2);
  --color-sf-appbar-border-color-alt1: var(--borda);
  --color-sf-tab-selected-bg-color-disabled: var(--primario);
  --color-sf-diagram-palette-background: var(--superficie-2);
  --color-sf-diagram-palette-hover-background: var(--superficie-3);
  --color-sf-spreadsheet-gridline: var(--borda);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: 14px; -webkit-font-smoothing: antialiased; }
/* Troca de tema sem animações cruzadas (forja.js põe esta classe durante a troca). */
html.tema-a-trocar *, html.tema-a-trocar *::before, html.tema-a-trocar *::after { transition: none !important; animation-duration: 0s !important; }

/* Barras de deslocamento finas com as cores do tema (Chromium/Edge/WebView: webkit; Firefox: scrollbar-color). */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-polegar) var(--scroll-trilho); }
::-webkit-scrollbar { width: 10px; height: 10px; background: var(--scroll-trilho); }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: var(--scroll-trilho); }
::-webkit-scrollbar-thumb { background: var(--scroll-polegar); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-polegar-hover); border: 2px solid transparent; background-clip: padding-box; }
::selection { background: var(--foco); }
.e-control, .e-css, .e-grid, .e-btn { font-family: var(--fonte) !important; }
.e-chart text, .e-accumulationchart text, .e-chart tspan, .e-accumulationchart tspan, .e-tooltip-wrap text, .e-tooltip-wrap tspan { font-family: var(--fonte) !important; }
a { color: inherit; text-decoration: none; }
.icone { flex-shrink: 0; }
kbd { font: 600 11px var(--fonte); color: var(--texto-3); border: 1px solid var(--borda); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; background: var(--superficie); }

/* Arranque */
.arranque { position: fixed; inset: 0; display: grid; place-content: center; gap: 18px; background: var(--fundo); }
.arranque-logo { font: 800 34px var(--fonte); letter-spacing: -1px; color: var(--acento); text-align: center; }
.arranque-barra { width: 160px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--acento), transparent); background-size: 200% 100%; animation: brilho 1.1s linear infinite; }
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Estrutura */
.app { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; transition: grid-template-columns .2s ease; }
.app.recolhido { grid-template-columns: 76px 1fr; }
.app > .lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--lateral); color: var(--lateral-texto); border-right: 1px solid var(--lateral-borda); padding: 18px 14px; overflow: hidden; }
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; color: var(--texto-inverso); }
.marca-simbolo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font: 800 19px var(--fonte); color: var(--texto-inverso); background: linear-gradient(135deg, var(--marca), var(--marca-2)); box-shadow: 0 6px 18px color-mix(in srgb, var(--marca) 40%, transparent); }
.marca-nome { font: 800 22px var(--fonte); letter-spacing: -.8px; }
.marca.grande .marca-simbolo { width: 46px; height: 46px; font-size: 26px; border-radius: 13px; }
.marca.grande .marca-nome { font-size: 30px; }
.menu { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.menu-secao { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--lateral-secao); padding: 16px 12px 6px; white-space: nowrap; }
.menu-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--lateral-texto); font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; }
.menu-item:hover { background: var(--lateral-hover); color: var(--lateral-texto-forte); }
.menu-item.active { background: var(--lateral-ativo); color: var(--lateral-ativo-texto); font-weight: 600; box-shadow: inset 3px 0 0 var(--lateral-ativo-traco); }
.lateral-rodape { display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px; border-top: 1px solid var(--lateral-borda); margin-top: 8px; }
.lateral-rodape .utilizador { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lateral-rodape strong { color: var(--lateral-texto-forte); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral-rodape span { font-size: 12px; color: var(--lateral-secao); }
.lateral-rodape .botao-icone { color: var(--lateral-texto); }
.app > .lateral .marca { color: var(--lateral-texto-forte); }
.app > .lateral .botao-icone:hover { background: var(--lateral-hover); color: var(--lateral-texto-forte); }
.app.recolhido .menu-texto, .app.recolhido .menu-secao, .app.recolhido .marca-nome, .app.recolhido .utilizador, .app.recolhido .lateral-rodape .botao-icone { display: none; }
.app.recolhido .menu-item { justify-content: center; }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--marca), var(--grafico-2)); color: var(--texto-inverso); font-weight: 700; font-size: 13px; flex-shrink: 0; }
.avatar.pequeno { width: 30px; height: 30px; font-size: 12px; }
.avatar.quadrado { border-radius: 10px; background: var(--acento-suave); color: var(--acento); }

.principal { display: flex; flex-direction: column; min-width: 0; }
.botao-icone { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--texto-2); cursor: pointer; transition: background .15s; }
.botao-icone:hover { background: var(--acento-suave); color: var(--acento); }
.ponto-aviso { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--vermelho); box-shadow: 0 0 0 2px var(--fundo); }
.pesquisa-global { display: flex; align-items: center; gap: 10px; width: min(420px, 50vw); height: 40px; padding: 0 10px 0 14px; border: 1px solid var(--borda); border-radius: 11px; background: var(--superficie); color: var(--texto-3); font: 14px var(--fonte); cursor: pointer; box-shadow: var(--sombra); }
.pesquisa-global span { flex: 1; text-align: left; }
.pesquisa-global:hover { border-color: var(--acento); }
.conteudo { padding: 28px; max-width: none; width: 100%; margin: 0; animation: entrar .25s ease; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Cabeçalhos */
.cabecalho-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.cabecalho-pagina h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.5px; }
.sobretitulo { margin: 0 0 4px; font-size: 13px; color: var(--acento); font-weight: 600; }
.sobretitulo::first-letter { text-transform: uppercase; }
.subtitulo { margin: 6px 0 0; color: var(--texto-2); }
.acoes { display: flex; gap: 10px; }
.acoes .e-btn, .botao-grande { display: inline-flex !important; align-items: center; gap: 8px; height: 38px; border-radius: 10px !important; font-weight: 600 !important; padding: 0 16px !important; }

/* Cartões e KPIs */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px; min-width: 0; }
.cartao > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cartao h3 { margin: 0; font-size: 15px; font-weight: 650; }
.etiqueta { font-size: 12px; color: var(--texto-3); }
.grelha-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.grelha-kpi.pequena { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.kpi { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); transition: transform .15s, box-shadow .15s; overflow: hidden; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sombra-forte); }
.kpi::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: var(--kpi-suave); opacity: .9; }
.kpi-topo { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.kpi-icone { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--kpi-suave); color: var(--kpi-cor); }
.kpi-titulo { color: var(--texto-2); font-weight: 600; font-size: 13px; }
.kpi-valor { font-size: 28px; font-weight: 750; letter-spacing: -.8px; position: relative; z-index: 1; }
.kpi-detalhe { font-size: 12.5px; color: var(--texto-3); position: relative; z-index: 1; }
.kpi-azul { --kpi-cor: var(--acento); --kpi-suave: var(--acento-suave); }
.kpi-verde { --kpi-cor: var(--verde); --kpi-suave: var(--verde-suave); }
.kpi-roxo { --kpi-cor: var(--roxo); --kpi-suave: var(--roxo-suave); }
.kpi-laranja { --kpi-cor: var(--laranja); --kpi-suave: var(--laranja-suave); }
.kpi.esqueleto { height: 128px; background: linear-gradient(90deg, var(--superficie) 0%, var(--superficie-2) 50%, var(--superficie) 100%); background-size: 200% 100%; animation: brilho 1.2s linear infinite; }
.mini-kpi { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; }
.mini-kpi strong { font-size: 18px; }
.mini-kpi span:last-child { margin-left: auto; color: var(--texto-3); font-size: 12.5px; }
.grelha-graficos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.centro-donut { display: flex; flex-direction: column; align-items: center; transform: translateY(-14px); }
.centro-donut strong { font-size: 26px; color: var(--texto); }
.centro-donut span { font-size: 12px; color: var(--texto-3); }

/* Listas recentes / barras */
.lista-recentes { list-style: none; margin: 0; padding: 0; }
.lista-recentes li { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 10px; cursor: pointer; }
.lista-recentes li:hover { background: var(--superficie-2); }
.lista-recentes .texto { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lista-recentes .texto span { color: var(--texto-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-recentes .valor { font-weight: 650; min-width: 110px; text-align: right; }
.barra-estado { margin: 12px 0; }
.barra-estado .linha, .progresso-prazo .linha { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.barra { height: 8px; border-radius: 8px; background: var(--superficie-2); overflow: hidden; }
.barra span { display: block; height: 100%; border-radius: 8px; background: var(--primario); transition: width .5s ease; }
.barra span.chip-verde { background: var(--verde); } .barra span.chip-cinza { background: var(--texto-3); } .barra span.chip-vermelho { background: var(--vermelho); } .barra span.chip-roxo { background: var(--roxo); }

/* Chips de estado */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; margin-right: 4px; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-azul { background: var(--azul-suave); color: var(--azul-texto); }
.chip-verde { background: var(--verde-suave); color: var(--verde-texto); }
.chip-cinza { background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borda); }
.chip-vermelho { background: var(--vermelho-suave); color: var(--vermelho-texto); }
.chip-roxo { background: var(--roxo-suave); color: var(--roxo-texto); }
.chip-laranja { background: var(--laranja-suave); color: var(--laranja-texto); }
.texto-alerta { color: var(--vermelho-texto); font-weight: 600; }

/* Filtros rápidos */
.filtros-rapidos { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.filtro { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); color: var(--texto-2); font: 600 13px var(--fonte); cursor: pointer; }
.filtro span { padding: 1px 8px; border-radius: 999px; background: var(--superficie-2); font-size: 12px; }
.filtro.ativo { border-color: var(--acento); background: var(--acento-suave); color: var(--acento); }
.filtro.ativo span { background: var(--primario); color: var(--texto-inverso); }

/* Grelhas Syncfusion */
.cartao.grelha { padding: 6px; overflow: hidden; }
.cartao.grelha.estreita { max-width: none; }
.cartao.grelha .e-grid { border: 0; border-radius: 10px; background: transparent; }
.e-grid .e-gridheader, .e-grid .e-headercell, .e-grid .e-toolbar, .e-grid .e-toolbar .e-toolbar-items { background: transparent !important; }
.e-grid .e-headercell .e-headertext { font-weight: 650; color: var(--texto-2); text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; }
.e-grid .e-rowcell { font-size: 13.5px; }
.e-grid .e-row:hover .e-rowcell { background: var(--linha-hover) !important; cursor: pointer; }
.e-grid .e-toolbar { border: 0; padding: 4px 6px; }
.e-grid .e-toolbar .e-search { border-radius: 10px !important; }
.e-grid .e-pager { border-top: 1px solid var(--borda); background: transparent; }
.celula-dupla { display: flex; flex-direction: column; line-height: 1.3; }
.celula-dupla span { color: var(--texto-3); font-size: 12.5px; }
.celula-avatar { display: flex; align-items: center; gap: 10px; }

/* Painel lateral de detalhe */
.painel-fundo { position: fixed; inset: 0; background: var(--veu); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50; }
.painel-fundo.visivel { opacity: 1; pointer-events: auto; }
.painel-lateral { position: fixed; top: 0; right: 0; height: 100vh; width: min(460px, 92vw); background: var(--superficie); box-shadow: var(--sombra-forte); transform: translateX(105%); transition: transform .25s cubic-bezier(.2, .8, .2, 1); z-index: 51; display: flex; flex-direction: column; }
.painel-lateral.visivel { transform: none; }
.painel-lateral header { display: flex; justify-content: space-between; align-items: flex-start; padding: 22px 22px 14px; border-bottom: 1px solid var(--borda); }
.painel-lateral h2 { margin: 2px 0 0; font-size: 19px; }
.painel-lateral small { color: var(--texto-3); }
.painel-corpo { padding: 18px 22px; overflow-y: auto; }
.detalhe-estado { display: flex; align-items: center; gap: 10px; color: var(--texto-2); margin-bottom: 14px; }
.ficha { display: grid; grid-template-columns: 140px 1fr; gap: 12px 10px; margin: 0 0 20px; }
.ficha dt { color: var(--texto-3); }
.ficha dd { margin: 0; font-weight: 550; }
.ficha .destaque { font-size: 18px; font-weight: 750; color: var(--acento); }
.progresso-prazo { padding: 14px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borda); }
.progresso-prazo small { color: var(--texto-3); display: block; margin-top: 6px; }

/* Estados vazios e avisos */
.estado-vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 34px 16px; color: var(--texto-2); }
.estado-vazio-icone { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--acento-suave); color: var(--acento); margin-bottom: 6px; }
.estado-vazio p { margin: 0; color: var(--texto-3); max-width: 320px; }
.aviso { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 11px; margin-bottom: 16px; font-weight: 550; }
.aviso.erro { background: var(--vermelho-suave); color: var(--vermelho-texto); }
.aviso.info { background: var(--azul-suave); color: var(--azul-texto); }
.aviso.aviso-faturacao { background: var(--laranja-suave); color: var(--laranja-texto); }
.ligacao { color: var(--acento); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }

/* Paleta de comandos */
.paleta.e-dialog { border-radius: 16px; overflow: hidden; top: 12vh !important; }
.paleta .e-dlg-content { padding: 0 !important; }
.paleta-campo { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--borda); }
.paleta-campo input { flex: 1; border: 0; outline: 0; background: transparent; font: 16px var(--fonte); color: var(--texto); }
.paleta-lista { list-style: none; margin: 0; padding: 8px; max-height: 360px; overflow-y: auto; }
.paleta-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.paleta-lista li small { margin-left: auto; color: var(--texto-3); }
.paleta-lista li.ativa, .paleta-lista li:hover { background: var(--acento-suave); color: var(--acento); }
.paleta-lista li.vazio { color: var(--texto-3); cursor: default; }

/* Entrada */
.entrada { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; background: var(--fundo); }
.entrada-marca { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 48px 56px; color: var(--texto-inverso); background: radial-gradient(1200px 600px at -10% -20%, color-mix(in srgb, var(--marca) 55%, transparent) 0%, transparent 60%), radial-gradient(900px 700px at 120% 120%, color-mix(in srgb, var(--marca-2) 45%, transparent) 0%, transparent 55%), var(--painel-escuro); overflow: hidden; }
.entrada-texto h1 { font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -1.6px; margin: 0 0 18px; }
.entrada-texto h1 span { background: linear-gradient(90deg, var(--painel-escuro-destaque), color-mix(in srgb, var(--marca-2) 45%, white)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.entrada-texto p { max-width: 460px; color: var(--painel-escuro-texto); font-size: 16px; line-height: 1.55; }
.entrada-pontos { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; color: var(--painel-escuro-texto); position: relative; z-index: 1; }
.entrada-pontos li { display: flex; align-items: center; gap: 10px; }
.entrada-pontos .icone { color: var(--painel-escuro-destaque); }
.entrada-decor span { position: absolute; border: 1px solid var(--painel-escuro-borda); border-radius: 50%; }
.entrada-decor span:nth-child(1) { width: 520px; height: 520px; right: -180px; top: 120px; }
.entrada-decor span:nth-child(2) { width: 360px; height: 360px; right: -100px; top: 200px; }
.entrada-decor span:nth-child(3) { width: 200px; height: 200px; right: -20px; top: 280px; background: color-mix(in srgb, var(--marca) 8%, transparent); }
.entrada-form { display: grid; place-items: center; padding: 32px; }
.cartao-entrada { width: min(420px, 100%); }
/* S2 (integração): o logótipo no cartão (ex.: "Nova palavra-passe", fundo do tema) segue o tema — o branco é só para o painel escuro. */
.cartao-entrada .marca { color: var(--texto); }
.cartao-entrada h2 { font-size: 28px; letter-spacing: -.6px; margin: 0 0 6px; }
.cartao-entrada .sub { color: var(--texto-2); margin: 0 0 24px; }
.campo { margin-bottom: 18px; }
.campo .e-input-group { border-radius: 11px !important; }
/* Campo + botão ao lado (ex.: Família + «+» na ficha de produto): o campo ocupa o espaço, o botão fica à direita. */
.com-botao { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
.com-botao > :first-child { flex: 1 1 auto; min-width: 0; width: auto !important; }
.com-botao > .e-btn { flex: 0 0 auto; width: 46px; height: auto; min-height: 44px; padding: 0; }
.linha-entre { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 22px; font-size: 13px; }
.botao-grande { width: 100%; justify-content: center; height: 46px !important; font-size: 15px !important; }
.rodape-entrada { margin-top: 40px; text-align: center; color: var(--texto-3); font-size: 12px; }
.lista-tenants { display: grid; gap: 10px; }
.tenant { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); color: var(--texto); font: 600 14px var(--fonte); cursor: pointer; }
.tenant span:nth-child(2) { flex: 1; text-align: left; }
.tenant:hover { border-color: var(--acento); }

/* Toasts */
.e-toast-container .e-toast { border-radius: 12px; box-shadow: var(--sombra-forte); }

@media (max-width: 1100px) {
  .grelha-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grelha-graficos { grid-template-columns: 1fr; }
  .entrada { grid-template-columns: 1fr; }
  .entrada-marca { display: none; }
}
@media (max-width: 760px) {
  .app, .app.recolhido { grid-template-columns: 1fr; }
  .app > .lateral { display: none; }
  .conteudo { padding: 16px; }
  .grelha-kpi { grid-template-columns: 1fr; }
}

/* Ajustes ao tema Syncfusion: cor de marca nos botões primários e sem contorno de foco nos títulos */
h1:focus, h1:focus-visible { outline: none; }
.e-btn.e-primary, .e-css.e-btn.e-primary { background: linear-gradient(135deg, var(--primario), var(--primario-2)) !important; border-color: transparent !important; color: var(--texto-inverso) !important; box-shadow: var(--sombra-primario); }
.e-btn.e-primary:hover { filter: brightness(1.06); }
.e-btn.e-outline { border-color: var(--borda) !important; color: var(--texto) !important; background: var(--superficie) !important; }
.e-checkbox-wrapper .e-frame.e-check { background-color: var(--primario) !important; border-color: var(--acento) !important; }

/* Campos da entrada */
label.campo { display: flex; flex-direction: column; gap: 6px; }
label.campo span { font-size: 13px; font-weight: 600; color: var(--texto-2); }
label.campo input { height: 46px; padding: 0 14px; border: 1px solid var(--borda); border-radius: 11px; background: var(--superficie); color: var(--texto); font: 15px var(--fonte); outline: none; transition: border-color .15s, box-shadow .15s; }
label.campo input:focus { border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }

/* ── Componentes genéricos (ListaCrud, Definições, Fichas) ───────────────────────── */
.form-grelha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.form-grelha .campo { margin: 0; }
.form-grelha .campo.largo { grid-column: 1 / -1; }
label.campo select, label.campo textarea { padding: 10px 14px; border: 1px solid var(--borda); border-radius: 11px; background: var(--superficie); color: var(--texto); font: 14px var(--fonte); outline: none; }
label.campo select { height: 44px; }
label.campo textarea { resize: vertical; min-height: 84px; }
label.campo select:focus, label.campo textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
label.campo input:disabled, label.campo select:disabled, label.campo textarea:disabled { opacity: .65; }
label.campo small { color: var(--texto-3); font-size: 12px; }
.form-grelha label.campo input { height: 44px; font-size: 14px; }
.interruptor { display: flex; align-items: center; gap: 10px; height: 44px; }
.interruptor em { font-style: normal; color: var(--texto-2); }
.dialogo-forja.e-dialog { border-radius: 16px; }
.dialogo-forja .e-dlg-header-content { padding: 18px 22px 10px; border: 0; }
.dialogo-forja .e-dlg-header { font: 700 18px var(--fonte); }
.dialogo-forja .e-dlg-content { padding: 8px 22px 18px; }
.dialogo-forja .e-footer-content { padding: 12px 22px 18px; border-top: 1px solid var(--borda); }
.dialogo-forja .e-footer-content .e-btn { border-radius: 10px; height: 38px; padding: 0 18px; font-weight: 600; }
.e-btn.e-danger, .e-css.e-btn.e-danger { background: var(--perigo) !important; color: var(--texto-inverso) !important; border-color: transparent !important; }
.acoes-linha { display: inline-flex; gap: 2px; justify-content: flex-end; }
.botao-icone.pequeno { width: 32px; height: 32px; border-radius: 8px; }
.botao-icone.perigo:hover { background: var(--vermelho-suave); color: var(--vermelho-texto); }
.amostra-cor { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; border: 1px solid var(--borda); }
.esqueleto-grelha { display: grid; gap: 10px; padding: 14px; }
.esqueleto-grelha div { height: 38px; border-radius: 8px; background: linear-gradient(90deg, var(--superficie-2), var(--superficie), var(--superficie-2)); background-size: 200% 100%; animation: brilho 1.2s linear infinite; }
.pesquisa-local { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--borda); border-radius: 11px; background: var(--superficie); color: var(--texto-3); min-width: 280px; }
.pesquisa-local input { border: 0; outline: 0; background: transparent; color: var(--texto); font: 14px var(--fonte); flex: 1; }
.grupo-definicoes { margin-bottom: 24px; }
.grupo-definicoes h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); margin: 0 0 10px; }
.grelha-definicoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.cartao-definicao { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra); transition: transform .15s, border-color .15s; --kpi-cor: var(--acento); --kpi-suave: var(--acento-suave); }
.cartao-definicao:hover { transform: translateY(-2px); border-color: var(--acento); }
.cartao-definicao div { flex: 1; min-width: 0; }
.cartao-definicao strong { display: block; }
.cartao-definicao p { margin: 2px 0 0; color: var(--texto-3); font-size: 12.5px; }
.cartao-definicao .seta { color: var(--texto-3); }
.cartao-app-movel { display: flex; align-items: center; gap: 20px; max-width: 560px; }
.cartao-app-movel p { margin: 4px 0 12px; color: var(--texto-3); font-size: 12.5px; }
.cartao-app-movel ol { margin: 8px 0 14px; padding-left: 18px; color: var(--texto-3); font-size: 13px; line-height: 1.7; }
.qr-app-movel { background: #fff; padding: 10px; border: 1px solid var(--borda); border-radius: 12px; flex: none; }
.botao-app-movel { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 10px; background: var(--acento); color: #fff; font-weight: 600; font-size: 13.5px; text-decoration: none; transition: filter .15s; }
.botao-app-movel:hover { filter: brightness(1.12); }
.url-app-movel { display: block; margin-top: 10px; font-size: 11.5px; color: var(--texto-3); word-break: break-all; }

/* Fichas (detalhe de um registo) */
.ficha-cabecalho { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.ficha-cabecalho .avatar { width: 52px; height: 52px; border-radius: 14px; font-size: 20px; }
.ficha-cabecalho .titulos { flex: 1; min-width: 240px; }
.ficha-cabecalho h1 { margin: 0; font-size: 24px; letter-spacing: -.4px; }
.ficha-cabecalho .meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--texto-2); margin-top: 6px; font-size: 13px; align-items: center; }
.migalhas { display: flex; gap: 6px; align-items: center; color: var(--texto-3); font-size: 13px; margin-bottom: 10px; }
.migalhas a:hover { color: var(--acento); }
.separadores-forja.e-tab .e-tab-header { background: transparent; border-bottom: 1px solid var(--borda); }
.separadores-forja.e-tab .e-tab-header .e-toolbar-item .e-tab-text { font-weight: 600; }
/* F3: o tema capitaliza cada palavra ("Conjuntos E Peças", "Não Conformidades") — em pt-PT mantém-se o texto como está. */
.e-tab .e-tab-header .e-toolbar-item .e-tab-text { text-transform: none; }
.separadores-forja.e-tab .e-content { padding-top: 16px; overflow-x: clip; overflow-y: visible; }
.resumo-ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.resumo-ficha .mini-kpi { flex-direction: column; align-items: flex-start; gap: 2px; }
.resumo-ficha .mini-kpi span:first-child { color: var(--texto-3); font-size: 12px; margin: 0; }
.resumo-ficha .mini-kpi strong { font-size: 20px; }
@media (max-width: 760px) { .form-grelha { grid-template-columns: 1fr; } }

/* Interruptor ligado mas desativado: manter a cor de "ligado" (o tema mostrava-o como desligado). */
.e-switch-wrapper.e-switch-disabled .e-switch-inner.e-switch-active,
.e-css.e-switch-wrapper.e-switch-disabled .e-switch-inner.e-switch-active { background-color: color-mix(in srgb, var(--acento) 55%, transparent) !important; border-color: transparent !important; opacity: 1; }
.e-switch-wrapper.e-switch-disabled .e-switch-inner.e-switch-active .e-switch-on { opacity: 1; }
.e-switch-wrapper.e-switch-disabled .e-switch-handle.e-switch-active { background-color: var(--texto-inverso) !important; }

/* ───── Utilitários partilhados por páginas E diálogos ─────
   O SfDialog é movido para o <body>: o CSS isolado (.razor.css/::deep) das páginas não lhe chega. Classes usadas dentro de
   diálogos ficam aqui (globais) ou no .razor.css do próprio componente do diálogo. Verificar com
   `node tools/audit-css-dialogs.mjs`. */
.form-compacto { gap: 12px 14px; }
.form-compacto label.campo input, .form-compacto label.campo select { height: 38px; font-size: 14px; }
.form-compacto label.campo textarea { min-height: 70px; }
.texto-fraco { color: var(--texto-3); font-size: 12px; }
.seccao { display: flex; flex-direction: column; gap: 14px; }
.seccao > h3 { margin: 0; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.grelha-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1200px) { .grelha-2 { grid-template-columns: 1fr; } }
.area-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.area-acoes .e-btn { border-radius: 10px; font-weight: 600; }
.tabela-simples { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-simples th { text-align: left; font-weight: 600; color: var(--texto-3); padding: 8px 10px; border-bottom: 1px solid var(--borda); font-size: 12px; }
.tabela-simples td { padding: 8px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela-simples td.num, .tabela-simples th.num { text-align: right; font-variant-numeric: tabular-nums; }
.etiqueta-tipo { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--superficie-2); color: var(--texto-2); }
.segmentado { display: inline-flex; padding: 3px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); }
.segmentado button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border: 0; border-radius: 9px; background: transparent; color: var(--texto-2); font: 600 13px var(--fonte); cursor: pointer; }
.segmentado button.ativo { background: var(--acento-suave); color: var(--acento); }

/* opções escolhíveis (chips clicáveis) — Superadmin, catálogo de materiais */
.opcoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.opcoes .opcao { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie);
  color: var(--texto-2); font: 600 12.5px var(--fonte); cursor: pointer; transition: border-color .15s, background .15s; }
.opcoes .opcao:hover { border-color: var(--acento); }
.opcoes .opcao.escolhida, .opcoes .opcao.extra { border-color: var(--acento); background: var(--acento-suave); color: var(--acento-forte); }
.opcoes .opcao.extra { border-color: var(--laranja); background: var(--laranja-suave); color: var(--laranja-texto); }
.opcoes .opcao b { margin-left: 2px; color: var(--texto-3); cursor: pointer; }
.opcoes .opcao b:hover { color: var(--vermelho-texto); }

/* editor de características */
.caracteristica { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie-2); }
.caracteristica .nome-car { height: 36px; padding: 0 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto); font: 600 14px var(--fonte); }
.caracteristica .nova-opcao { height: 30px; min-width: 150px; padding: 0 10px; border: 1px dashed var(--borda); border-radius: 999px; background: var(--superficie); color: var(--texto); font: 12.5px var(--fonte); }
.seletor-proposta { height: 34px; padding: 0 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto); font: 13px var(--fonte); }

/* destinatários */
.lista-donos { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; padding: 8px; border: 1px solid var(--borda); border-radius: 10px; }
.lista-donos .dono { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.lista-donos .dono:hover { background: var(--superficie-2); }

/* apagar entidade em uso */
.usos { margin: 10px 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; }
.nota { color: var(--texto-3); font-size: 12.5px; }
.m7-confirmacao-texto { margin: 0; font-size: 14px; line-height: 1.6; color: var(--texto-2); }


/* ───── Campos Syncfusion com o aspeto dos campos nativos (44 px, borda, anel de foco) ─────
   Global porque os SfDialog vão para o <body>. Origem: frente s2 (ronda Syncfusion, 07/10/2026). */
.campo .e-input-group.e-control-wrapper:not(.e-multiselect),
.barra-filtros .e-input-group.e-control-wrapper:not(.e-multiselect),
.barra-selecao .e-input-group.e-control-wrapper:not(.e-multiselect),
.cabecalho-pagina .acoes .e-input-group.e-control-wrapper:not(.e-multiselect),
.pre-visualizacao th .e-input-group.e-control-wrapper,
.seletor-proposta.e-input-group.e-control-wrapper {
    display: inline-flex; align-items: center; min-height: 44px; margin: 0;
    border: 1px solid var(--borda) !important; border-radius: 11px !important;
    background: var(--superficie) !important; box-shadow: none !important; transition: border-color .15s, box-shadow .15s;
}
.barra-filtros .e-input-group.e-control-wrapper:not(.e-multiselect),
.barra-selecao .e-input-group.e-control-wrapper:not(.e-multiselect),
.cabecalho-pagina .acoes .e-input-group.e-control-wrapper:not(.e-multiselect) { min-height: 40px; }
.pre-visualizacao th .e-input-group.e-control-wrapper, .seletor-proposta.e-input-group.e-control-wrapper { min-height: 34px; border-radius: 8px !important; }
.campo .e-input-group.e-control-wrapper:not(.e-multiselect)::before, .campo .e-input-group.e-control-wrapper:not(.e-multiselect)::after,
.barra-filtros .e-input-group.e-control-wrapper::before, .barra-filtros .e-input-group.e-control-wrapper::after,
.barra-selecao .e-input-group.e-control-wrapper::before, .barra-selecao .e-input-group.e-control-wrapper::after,
.cabecalho-pagina .acoes .e-input-group.e-control-wrapper::before, .cabecalho-pagina .acoes .e-input-group.e-control-wrapper::after,
.pre-visualizacao th .e-input-group.e-control-wrapper::before, .pre-visualizacao th .e-input-group.e-control-wrapper::after,
.seletor-proposta.e-input-group.e-control-wrapper::before, .seletor-proposta.e-input-group.e-control-wrapper::after { display: none !important; }
.campo .e-input-group.e-control-wrapper:not(.e-multiselect) input.e-input,
.barra-filtros .e-input-group.e-control-wrapper input.e-input,
.barra-selecao .e-input-group.e-control-wrapper input.e-input,
.cabecalho-pagina .acoes .e-input-group.e-control-wrapper input.e-input,
.pre-visualizacao th .e-input-group.e-control-wrapper input.e-input,
.seletor-proposta.e-input-group.e-control-wrapper input.e-input {
    height: auto !important; min-height: 0 !important; align-self: stretch; padding: 0 12px !important; margin: 0 !important;
    border: 0 !important; border-radius: 11px !important; box-shadow: none !important; background: transparent !important;
    color: var(--texto) !important; font: 14px var(--fonte) !important;
}
.pre-visualizacao th .e-input-group.e-control-wrapper input.e-input, .seletor-proposta.e-input-group.e-control-wrapper input.e-input { font-size: 13px !important; padding: 0 8px !important; }
.campo .e-input-group.e-control-wrapper.e-input-focus:not(.e-multiselect),
.barra-filtros .e-input-group.e-control-wrapper.e-input-focus,
.barra-selecao .e-input-group.e-control-wrapper.e-input-focus,
.cabecalho-pagina .acoes .e-input-group.e-control-wrapper.e-input-focus,
.pre-visualizacao th .e-input-group.e-control-wrapper.e-input-focus,
.seletor-proposta.e-input-group.e-control-wrapper.e-input-focus { border-color: var(--acento) !important; box-shadow: 0 0 0 4px var(--acento-suave) !important; }
.campo .e-input-group.e-control-wrapper .e-input-group-icon,
.barra-filtros .e-input-group.e-control-wrapper .e-input-group-icon,
.barra-selecao .e-input-group.e-control-wrapper .e-input-group-icon,
.cabecalho-pagina .acoes .e-input-group.e-control-wrapper .e-input-group-icon,
.pre-visualizacao th .e-input-group.e-control-wrapper .e-input-group-icon,
.seletor-proposta.e-input-group.e-control-wrapper .e-input-group-icon { background: transparent !important; border: 0 !important; color: var(--texto-3) !important; margin: 0 4px 0 0; }
.campo .e-input-group.e-control-wrapper.e-disabled:not(.e-multiselect) { opacity: .65; background: var(--superficie) !important; }
.campo .e-input-group.e-control-wrapper.e-disabled input.e-input { -webkit-text-fill-color: var(--texto); }
/* Caixas de verificação Syncfusion com o texto da app */
.marcas .e-checkbox-wrapper .e-label, .lista-donos .e-checkbox-wrapper .e-label, .campo .e-checkbox-wrapper .e-label { font: 600 13.5px var(--fonte); color: var(--texto-2); }
.e-checkbox-wrapper.dono { padding: 6px 12px 6px 8px; }

/* ───── Separadores de trabalho (Separadores/BarraSeparadores.razor) ───── */
.barra-separadores { position: sticky; top: 0; z-index: 19; display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px 0;
  overflow: visible; background: color-mix(in srgb, var(--fundo) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--borda); }
.tabs-antes, .tabs-depois { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-bottom: 4px; }
.tabs-miolo { display: flex; align-items: flex-end; flex: 1; min-width: 0; gap: 4px; }
.tabs-lista { display: flex; align-items: flex-end; gap: 4px; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.tabs-mais { position: relative; flex-shrink: 0; margin-bottom: 3px; }
.tab-mais { display: inline-flex; align-items: center; height: 28px; padding: 0 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--texto-2); font: 600 13px var(--fonte); letter-spacing: 0; cursor: pointer; white-space: nowrap; }
.tab-mais span { margin-left: 1px; }
.tab-mais:hover, .tab-mais[aria-expanded="true"] { background: var(--superficie-2); color: var(--texto); }
.tabs-mais-menu.tab-menu { position: absolute; top: calc(100% + 6px); right: 0; left: auto; max-height: 360px; overflow: auto; min-width: 220px; }
.tabs-mais-menu li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-separadores .tab { position: relative; display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; max-width: 240px; height: 34px;
  padding: 0 6px 0 12px; margin-bottom: -1px; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0;
  color: var(--texto-2); font: 600 13px var(--fonte); white-space: nowrap; cursor: pointer; user-select: none; transition: background .12s, color .12s; }
.barra-separadores .tab.tab-fora { display: none; }
.pesquisa-lateral { width: 100%; height: 42px; margin: 0 0 12px; padding: 0 10px 0 12px; gap: 8px; box-shadow: none; background: var(--lateral-hover); border: 1px solid transparent; color: var(--lateral-texto); }
.pesquisa-lateral:hover { color: var(--lateral-texto-forte); border-color: var(--acento); }
.pesquisa-lateral kbd { flex: none; font: 600 10px var(--fonte); border: 1px solid var(--borda); border-radius: 6px; padding: 2px 5px; background: rgba(0, 0, 0, .2); }
.app.recolhido .pesquisa-lateral { width: 44px; height: 44px; margin: 0 auto 12px; padding: 0; justify-content: center; border-radius: 12px; }
.app.recolhido .pesquisa-lateral span, .app.recolhido .pesquisa-lateral kbd { display: none; }
.pesquisa-tab { display: none; }
.barra-separadores .tab:hover { background: var(--superficie-2); color: var(--texto); }
.barra-separadores .tab.ativa { background: var(--superficie); color: var(--texto); border-color: var(--borda); box-shadow: inset 0 2px 0 var(--acento); }
.barra-separadores .tab.ativa svg { color: var(--acento); }
.barra-separadores .tab.fixa { padding: 0 12px; gap: 0; }
.barra-separadores .tab-titulo { overflow: hidden; text-overflow: ellipsis; }
.barra-separadores .tab-ponto { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 0 3px var(--laranja-suave); }
.barra-separadores .tab-fechar { display: inline-grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border: 0; border-radius: 6px;
  background: transparent; color: var(--texto-3); cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; }
.barra-separadores .tab:hover .tab-fechar, .barra-separadores .tab.ativa .tab-fechar, .barra-separadores .tab-fechar:focus-visible { opacity: 1; }
.barra-separadores .tab-fechar:hover { background: var(--vermelho-suave); color: var(--vermelho-texto); }
.tab-menu-fundo { position: fixed; inset: 0; z-index: 1000; }
.tab-menu { position: fixed; z-index: 1001; min-width: 210px; margin: 0; padding: 6px; list-style: none; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-forte); }
.tab-menu li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--texto); font-size: 13px; cursor: pointer; }
.tab-menu li:hover { background: var(--acento-suave); color: var(--acento-forte); }
.separador-conteudo:not(.ativo) { display: none; }
.separador-conteudo.ativo { animation: entrar .18s ease; }
.confirmar-fecho { display: flex; gap: 14px; align-items: flex-start; }
.confirmar-fecho .confirmar-icone { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--laranja-suave); color: var(--laranja-texto); }
.confirmar-fecho p { margin: 2px 0 0; line-height: 1.55; color: var(--texto-2); }
.confirmar-fecho ul { margin: 8px 0 0; padding-left: 18px; color: var(--texto); font-weight: 600; line-height: 1.7; }
@media (max-width: 760px) { .barra-separadores { padding: 6px 8px 0; } .barra-separadores .tab { max-width: 160px; } .pesquisa-tab { display: grid; } }
/* Mensagens não bloqueiam cliques no que está por baixo (botões Gravar/Mais do cabeçalho); só o × é clicável. */
.e-toast-container, .e-toast-container .e-toast { pointer-events: none !important; }
.e-toast-container .e-toast-close-icon { pointer-events: auto !important; }

/* ───── Campos numéricos: nunca setas (↑/↓ passam ao campo de cima/baixo — forja.js) ───── */
input[type=number] { appearance: textfield; -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.e-numeric .e-spin-up, .e-numeric .e-spin-down { display: none !important; }

/* ───── Editores em separador (Separadores/EditorSeparador.razor) ───── */
.editor-separador { display: flex; flex-direction: column; gap: 16px; }
.editor-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.editor-titulos { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.editor-voltar { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-3); font-size: 13px; font-weight: 600; text-decoration: none; }
.editor-voltar:hover { color: var(--acento); }
.editor-titulo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.editor-titulo h1 { margin: 0; font-size: 24px; letter-spacing: -.3px; }
.editor-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.editor-acoes .e-btn { border-radius: 10px; font-weight: 600; }
.editor-corpo { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px; min-width: 0; }

/* ═══ Syncfusion — coerência com os tokens (S2-tema). As variáveis --color-sf-* (topo) já cobrem a maior parte; aqui ficam
   os casos em que o tema usa cores fixas ou em que a app quer outro papel (fundos dentro de cartões). ═══ */
/* Grelhas e árvores: fundo da superfície, linhas alternadas neutras, sem zonas brancas (scroll, vazio, agregados). */
.e-grid, .e-grid .e-gridcontent, .e-grid .e-content, .e-grid .e-table, .e-grid .e-emptyrow td, .e-grid .e-gridfooter,
.e-grid .e-summaryrow .e-summarycell, .e-grid .e-movablescrollbar, .e-grid .e-frozenscrollbar, .e-grid .e-scrollbar,
.e-treegrid .e-gridcontent, .e-grid .e-detailrowcollapse, .e-grid .e-detailrowexpand, .e-grid .e-detailcell { background-color: var(--superficie); }
.e-grid .e-gridheader, .e-grid .e-headercontent, .e-grid .e-columnheader, .e-grid .e-headercell, .e-grid .e-detailheadercell,
.e-grid .e-filterbarcell, .e-grid .e-groupdroparea { background-color: var(--superficie); border-color: var(--borda); }
.e-grid .e-altrow { background-color: var(--superficie-2); }
.e-grid .e-rowcell, .e-grid .e-headercell, .e-grid .e-gridheader, .e-grid .e-content, .e-grid .e-gridcontent tr:first-child td,
.e-grid .e-filterbarcell, .e-grid.e-gridhover, .e-grid .e-groupcaption, .e-grid .e-indentcell { border-color: var(--borda); }
.e-grid .e-groupcaption, .e-grid .e-recordplusexpand, .e-grid .e-recordpluscollapse, .e-grid .e-indentcell { background-color: var(--superficie-2); }
.e-grid td.e-active, .e-grid .e-rowcell.e-selectionbackground, .e-treegrid .e-rowcell.e-selectionbackground { background-color: var(--selecao) !important; color: var(--texto) !important; }
.e-grid .e-rowcell, .e-grid .e-groupcaption, .e-grid .e-summarycell { color: var(--texto); }
.e-grid .e-sortfilterdiv, .e-grid .e-icon-filter { color: var(--texto-3); }
.e-grid .e-filtered::before { color: var(--acento); }
.e-grid .e-pager, .e-pager { background: transparent; border-color: var(--borda); color: var(--texto-2); }
.e-pager .e-currentitem, .e-pager .e-currentitem:hover { background: var(--primario) !important; color: var(--texto-inverso) !important; }
.e-pager .e-numericitem, .e-pager .e-pagercontainer, .e-pager .e-prevpagedisabled, .e-pager .e-nextpagedisabled,
.e-pager .e-firstpagedisabled, .e-pager .e-lastpagedisabled { background: transparent; color: var(--texto-2); border-color: var(--borda); }
/* Barras de tools (grelha, Gantt, PDF): a superfície do cartão, botões neutros. */
.e-toolbar, .e-toolbar .e-toolbar-items, .e-gantt .e-toolbar, .e-treegrid .e-toolbar { background: var(--superficie); border-color: var(--borda); }
.e-toolbar .e-toolbar-item .e-tbar-btn { background: transparent; }
.e-toolbar .e-toolbar-item .e-tbar-btn, .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons, .e-toolbar .e-tbar-btn .e-tbar-btn-text { color: var(--texto-2); }
.e-toolbar .e-toolbar-item .e-tbar-btn:hover { background: var(--superficie-3); }
.e-toolbar .e-hor-nav, .e-toolbar .e-toolbar-pop { background: var(--elevacao); border-color: var(--borda); }
/* Separadores SfTab (fichas) */
.e-tab .e-tab-header, .e-tab .e-tab-header .e-toolbar-items { background: transparent; }
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover { background: var(--superficie-3); }
.e-tab .e-tab-header .e-toolbar-item .e-tab-text, .e-tab .e-tab-header .e-toolbar-item .e-tab-icon { color: var(--texto-2); }
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text, .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon { color: var(--acento); }
.e-tab .e-tab-header .e-indicator { background: var(--acento); }
.e-tab > .e-content, .e-tab .e-content .e-item { background: transparent; color: var(--texto); }
/* Campos, listas e popups */
.e-input-group, .e-input-group.e-control-wrapper, .e-float-input, .e-float-input.e-control-wrapper { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); }
.e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input, .e-input-group textarea.e-input, input.e-input, textarea.e-input { background: transparent; color: var(--texto); }
.e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon { background: transparent; color: var(--texto-3); }
.e-input-group.e-disabled, .e-input-group.e-control-wrapper.e-disabled { background: var(--superficie-2); }
.e-popup.e-ddl, .e-popup.e-multiselect, .e-dropdownbase, .e-dropdown-popup, .e-contextmenu-wrapper ul, .e-listbox-container, .e-mention.e-popup,
.e-popup.e-popup-open:not(.e-tooltip-wrap):not(.e-dialog) { background: var(--elevacao); color: var(--texto); border-color: var(--borda); }
.e-dropdownbase .e-list-item, .e-dropdown-popup ul .e-item { background: transparent; color: var(--texto); border-color: var(--borda); }
.e-dropdownbase .e-list-item.e-hover, .e-dropdownbase .e-list-item.e-item-focus, .e-dropdown-popup ul .e-item:hover,
.e-contextmenu-wrapper ul .e-menu-item.e-focused { background: var(--superficie-3); color: var(--texto); }
.e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover { background: var(--selecao); color: var(--texto); }
.e-dropdownbase .e-list-group-item, .e-dropdownbase .e-fixed-head { background: var(--superficie-2); color: var(--texto-3); }
.e-multi-select-wrapper .e-chips { background: var(--superficie-3); }
.e-multi-select-wrapper .e-chips .e-chipcontent { color: var(--texto); }
.e-ddl.e-popup .e-filter-parent, .e-ddl.e-popup .e-filter-parent .e-input-group { background: var(--elevacao); }
/* Calendários e seletores de datas */
.e-calendar, .e-datepicker.e-popup-wrapper .e-calendar, .e-datetimepicker.e-popup, .e-timepicker.e-popup, .e-daterangepicker.e-popup { background: var(--elevacao); border-color: var(--borda); }
.e-calendar .e-content td.e-selected span.e-day, .e-calendar .e-content td.e-selected:hover span.e-day { background: var(--primario); color: var(--texto-inverso); }
.e-calendar .e-content td.e-today span.e-day { border-color: var(--acento); color: var(--acento); }
.e-calendar .e-content td.e-today.e-selected span.e-day { color: var(--texto-inverso); }
.e-calendar .e-content span.e-day, .e-calendar .e-header .e-title, .e-calendar th { color: var(--texto); }
.e-calendar .e-content td.e-other-month span.e-day { color: var(--texto-3); }
/* Diálogos */
.e-dialog, .e-dialog .e-dlg-header-content, .e-dialog .e-dlg-content, .e-dialog .e-footer-content { background: var(--elevacao); color: var(--texto); border-color: var(--borda); }
.e-dialog .e-dlg-header { color: var(--texto); }
.e-dlg-overlay { background-color: var(--veu); opacity: 1; }
.e-dialog .e-dlg-closeicon-btn .e-btn-icon { color: var(--texto-3); }
/* Botões: os secundários/flat seguem as variáveis --color-sf-secondary-* (topo); aqui só os estados desativados. */
.e-btn:disabled, .e-btn.e-disabled { color: var(--texto-desativado) !important; }
.e-btn.e-primary:disabled, .e-btn.e-primary.e-disabled { background: var(--superficie-3) !important; box-shadow: none !important; }
/* Mensagens (toasts) — superfície elevada, faixa de cor por tipo */
.e-toast-container .e-toast, .e-toast-container .e-toast.e-toast-success, .e-toast-container .e-toast.e-toast-danger,
.e-toast-container .e-toast.e-toast-info, .e-toast-container .e-toast.e-toast-warning { background: var(--elevacao); color: var(--texto); border: 1px solid var(--borda); }
.e-toast-container .e-toast .e-toast-icon { color: var(--texto-2); }
.e-toast-container .e-toast.e-toast-success .e-toast-icon { color: var(--verde-texto); }
.e-toast-container .e-toast.e-toast-danger .e-toast-icon { color: var(--vermelho-texto); }
.e-toast-container .e-toast.e-toast-warning .e-toast-icon { color: var(--laranja-texto); }
.e-toast-container .e-toast .e-toast-message .e-toast-title { color: var(--texto); }
.e-toast-container .e-toast .e-toast-message .e-toast-content { color: var(--texto-2); }
.e-toast-container .e-toast .e-toast-close-icon { color: var(--texto-3); }
.e-toast-container .e-toast.e-toast-success { border-left: 4px solid var(--verde); }
.e-toast-container .e-toast.e-toast-danger { border-left: 4px solid var(--vermelho); }
.e-toast-container .e-toast.e-toast-info { border-left: 4px solid var(--acento); }
.e-toast-container .e-toast.e-toast-warning { border-left: 4px solid var(--laranja); }
.e-toast-container .e-toast .e-toast-progress { background-color: var(--primario); }
/* Árvores (SfTreeView) e acordeões */
.e-treeview .e-list-item .e-text-content, .e-treeview .e-list-text { color: var(--texto); }
.e-treeview .e-list-item.e-hover > .e-fullrow { background: var(--superficie-3); border-color: var(--superficie-3); }
.e-treeview .e-list-item.e-active > .e-fullrow { background: var(--selecao); border-color: var(--selecao); }
.e-accordion, .e-accordion .e-acrdn-item, .e-accordion .e-acrdn-header, .e-accordion .e-acrdn-panel { background: var(--superficie); border-color: var(--borda); color: var(--texto); }
/* Gantt */
.e-gantt .e-gantt-chart, .e-gantt .e-chart-root-container, .e-gantt .e-gantt-tree-grid-pane, .e-gantt .e-gantt-chart-pane,
.e-gantt .e-timeline-header-container, .e-gantt .e-timeline-header-table-container, .e-gantt .e-chart-scroll-container,
.e-gantt .e-content, .e-gantt .e-gantt-splitter, .e-gantt .e-pane { background-color: var(--superficie); border-color: var(--borda); }
.e-gantt .e-split-bar, .e-gantt .e-gantt-splitter .e-split-bar { background-color: var(--borda); }
.e-gantt .e-timeline-header-container, .e-gantt .e-header-cell-label, .e-gantt .e-timeline-top-header-cell, .e-gantt .e-timeline-single-header-cell { color: var(--texto-2); border-color: var(--borda); }
.e-gantt .e-chart-row .e-chart-row-border, .e-gantt .e-chart-row-cell, .e-gantt .e-line-container-cell { border-color: var(--borda); }
.e-gantt .e-weekend, .e-gantt .e-weekend-header-cell, .e-gantt .e-holiday { background-color: var(--superficie-2); }
.e-gantt .e-gantt-parent-taskbar-inner-div, .e-gantt .e-gantt-parent-taskbar { background-color: color-mix(in srgb, var(--texto-3) 45%, var(--superficie)); border-color: var(--texto-3); }
.e-gantt .e-gantt-parent-progressbar-inner-div { background-color: var(--texto-3); }
.e-gantt .e-label, .e-gantt .e-task-label, .e-gantt .e-right-label-inner-div .e-label { color: var(--texto); }
.e-gantt .e-active-container, .e-gantt .e-chart-row.e-active .e-chart-row-cell { background-color: var(--selecao) !important; }
.e-gantt .e-connector-line { border-color: var(--texto-3); }
.e-gantt .e-connector-line-arrow { border-left-color: var(--texto-3); }
/* Kanban */
.e-kanban, .e-kanban .e-kanban-header, .e-kanban .e-kanban-content, .e-kanban .e-kanban-table, .e-kanban .e-swimlane-row { background: transparent; color: var(--texto); }
.e-kanban .e-kanban-table .e-header-cells, .e-kanban .e-kanban-content .e-content-row .e-content-cells { background: var(--superficie-2); border-color: var(--borda); }
.e-kanban .e-kanban-table .e-header-cells .e-header-text, .e-kanban .e-header-cells .e-item-count { color: var(--texto-2); }
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card { background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); box-shadow: var(--sombra); }
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card:hover { border-color: var(--borda-forte); background: var(--superficie); }
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card.e-selection { background: var(--selecao); border-color: var(--acento); }
.e-kanban .e-card .e-card-header-title, .e-kanban .e-card .e-card-content { color: var(--texto); }
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-limits .e-max-count, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-limits .e-min-count { color: var(--texto-3); }
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-target-dropped-clone,
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-dropping { background: var(--acento-suave); border-color: var(--acento); }
/* Agenda (SfSchedule) */
.e-schedule, .e-schedule .e-schedule-toolbar, .e-schedule .e-schedule-toolbar .e-toolbar-items, .e-schedule .e-table-container,
.e-schedule .e-vertical-view .e-time-cells-wrapper, .e-schedule .e-date-header-container, .e-schedule .e-content-wrap,
.e-schedule .e-month-view .e-work-cells, .e-schedule .e-vertical-view .e-work-cells, .e-schedule .e-timeline-view .e-work-cells,
.e-schedule .e-agenda-view, .e-schedule .e-header-cells, .e-schedule .e-left-indent, .e-schedule .e-all-day-cells, .e-schedule .e-resource-cells,
.e-schedule .e-month-view .e-date-header-wrap table td { background-color: var(--superficie); border-color: var(--borda); color: var(--texto); }
.e-schedule .e-vertical-view .e-work-cells:not(.e-work-hours), .e-schedule .e-month-view .e-other-month, .e-schedule .e-month-view .e-work-cells:not(.e-work-days) { background-color: var(--superficie-2); }
.e-schedule .e-vertical-view .e-time-cells-wrapper .e-time-cells, .e-schedule .e-vertical-view .e-time-cells-wrapper table td, .e-schedule .e-month-view .e-date-header,
.e-schedule .e-header-cells .e-header-day, .e-schedule .e-header-cells .e-header-date { color: var(--texto-2); border-color: var(--borda); }
.e-schedule .e-vertical-view .e-work-cells:hover, .e-schedule .e-month-view .e-work-cells:hover { background-color: var(--linha-hover); }
.e-schedule .e-selected-cell, .e-schedule .e-vertical-view .e-work-cells.e-selected-cell { background-color: var(--selecao) !important; }
.e-schedule .e-vertical-view .e-current-timeline { border-color: var(--vermelho); }
.e-schedule .e-header-cells.e-current-day { color: var(--acento); }
.e-schedule .e-month-view .e-current-date .e-date-header { background: var(--primario); color: var(--texto-inverso); }
.e-quick-popup-wrapper, .e-quick-popup-wrapper .e-event-popup, .e-quick-popup-wrapper .e-cell-popup, .e-more-popup-wrapper { background: var(--elevacao); color: var(--texto); }
/* Pivot */
.e-pivotview, .e-pivotview .e-grid, .e-pivotview .e-grid .e-gridheader, .e-pivotview .e-grid .e-headercell, .e-pivotview .e-grid .e-rowcell,
.e-pivotview .e-grid .e-gridcontent, .e-pivotview .e-grouping-bar, .e-pivotview .e-grouping-bar .e-left-axis-fields, .e-pivotview .e-grouping-bar .e-right-axis-fields,
.e-pivotview .e-grouping-bar .e-all-fields-axis, .e-pivotview .e-group-row, .e-pivotview .e-group-values, .e-pivotview .e-group-columns, .e-pivotview .e-group-filters,
.e-pivotview .e-group-all-fields, .e-pivotview .e-toolbar { background-color: var(--superficie); color: var(--texto); border-color: var(--borda); }
.e-pivotview .e-grid .e-gridheader .e-headercell, .e-pivotview .e-grid .e-rowcell.e-rowsheader, .e-pivotview .e-grid .e-rowcell.e-gtot,
.e-pivotview .e-grid .e-headercell.e-gtot, .e-pivotview .e-grid .e-rowcell.e-stot, .e-pivotview .e-grid .e-columnsheader { background-color: var(--superficie-2) !important; color: var(--texto) !important; }
.e-pivotview .e-grid .e-rowcell, .e-pivotview .e-grid .e-headercell .e-headertext, .e-pivotview .e-grid .e-cellvalue { color: var(--texto); }
.e-pivotview .e-grid .e-rowcell:hover, .e-pivotview .e-grid .e-rowcell.e-hover { background-color: var(--linha-hover) !important; }
.e-pivotview .e-grouping-bar .e-pivot-button, .e-pivotview .e-pivot-button, .e-pivotfieldlist-container .e-pivot-button { background: var(--superficie-3); color: var(--texto); border-color: var(--borda); }
.e-pivotfieldlist-wrapper, .e-pivotfieldlist-container, .e-pivotfieldlist-wrapper .e-field-list-container, .e-pivotfieldlist-wrapper .e-axis-table,
.e-pivotfieldlist-wrapper .e-field-table, .e-pivotfieldlist-wrapper .e-dlg-content { background: var(--elevacao); color: var(--texto); border-color: var(--borda); }
/* PdfViewer, uploader */
.e-pdfviewer, .e-pdfviewer .e-pv-toolbar, .e-pdfviewer .e-pv-sidebar-container, .e-pdfviewer .e-pv-main-container, .e-pdfviewer .e-pv-sidebar-toolbar,
.e-pdfviewer .e-pv-navigation-toolbar, .e-pdfviewer .e-toolbar { background-color: var(--superficie); border-color: var(--borda); color: var(--texto); }
.e-pdfviewer .e-pv-viewer-container, .e-pdfviewer .e-pv-viewer-main-container { background-color: var(--superficie-2); }
.e-upload, .e-upload .e-file-select-wrap, .e-upload .e-upload-files, .e-upload .e-upload-files .e-upload-file-list, .e-upload .e-upload-actions { background: var(--superficie); border-color: var(--borda); color: var(--texto); }
.e-upload .e-file-drop, .e-upload .e-upload-files .e-file-container .e-file-name, .e-upload .e-upload-files .e-file-container .e-file-size,
.e-upload .e-upload-files .e-file-container .e-file-status { color: var(--texto-2); }
.e-upload.e-control-wrapper .e-upload-files .e-file-container .e-file-status.e-upload-success { color: var(--verde-texto); }
.e-upload.e-control-wrapper .e-upload-files .e-file-container .e-file-status.e-upload-fails { color: var(--vermelho-texto); }
/* Interruptores, caixas, rádios, chips */
.e-switch-wrapper .e-switch-inner.e-switch-active, .e-css.e-switch-wrapper .e-switch-inner.e-switch-active { background-color: var(--primario); border-color: var(--primario); }
.e-switch-wrapper .e-switch-inner:not(.e-switch-active) { background-color: var(--superficie); border-color: var(--borda-forte); }
.e-switch-wrapper .e-switch-handle:not(.e-switch-active) { background-color: var(--texto-3); }
.e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame { background-color: var(--superficie); border-color: var(--borda-forte); }
.e-checkbox-wrapper .e-frame.e-check, .e-checkbox-wrapper .e-frame.e-stop { background-color: var(--primario) !important; border-color: var(--primario) !important; color: var(--texto-inverso) !important; }
.e-checkbox-wrapper .e-label, .e-radio + label .e-label { color: var(--texto); }
.e-radio:checked + label::after { background-color: var(--primario); border-color: var(--primario); }
.e-radio:checked + label::before { border-color: var(--primario); }
.e-chip-list .e-chip, .e-chip-list.e-chip { background: var(--superficie-3); color: var(--texto); border-color: var(--borda); }
/* Spinner */
.e-spinner-pane.e-spin-overlay { background-color: color-mix(in srgb, var(--fundo) 60%, transparent); }
/* Diagrama (workflows) */
.e-diagram, .e-diagram .e-diagram-background { background-color: var(--superficie-2) !important; }
/* Tooltips */
.e-tooltip-wrap.e-popup { background: var(--elevacao); border-color: var(--borda); }
.e-tooltip-wrap .e-tip-content { color: var(--texto); }

/* ═══ Gráficos Syncfusion (SfChart, SfAccumulationChart, gauges, barras de progresso) ═══
   O tema dos gráficos vem de C# (<TemaGrafico> → Theme.Fluent2 / Fluent2Dark); estas regras garantem o fundo da superfície
   e os textos/eixos/grelha do tema ATIVO também em separadores escondidos que ainda não voltaram a desenhar (troca ao vivo).
   O CSS sobrepõe-se aos atributos de apresentação do SVG. As séries usam --grafico-N / PaletaGraficos (C#). */
svg [id$="_ChartBorder"], svg [id$="_CircularGaugeBorder"], svg [id$="_LinearGaugeBorder"], svg [id$="_ChartAreaBorder"],
svg [id$="_chart_legend_element"], svg [id$="_ProgressBarBorder"] { fill: transparent !important; stroke: transparent !important; }
svg [id$="_ChartTitle"], svg [id$="_CircularGaugeTitle"], svg [id$="_LinearGaugeTitle"], svg [id*="_AxisTitle"], svg [id$="_ChartSubTitle"] { fill: var(--texto) !important; }
svg [id*="_AxisLabel_"], svg [id*="_legend_text"], svg [id*="_Axis_"][id*="_Label_"], svg [id*="_StripLineText"] { fill: var(--grafico-texto) !important; }
svg [id*="MajorGridLine"], svg [id*="MinorGridLine"] { stroke: var(--grafico-grelha) !important; }
svg [id*="AxisLine_"], svg [id*="MajorTickLine"], svg [id*="MinorTickLine"], svg [id*="Major_TickLine"], svg [id*="Minor_TickLine"] { stroke: var(--grafico-eixo) !important; }
svg [id*="_chart_legend_shape_marker"][fill="#FFFFFF"], svg [id*="_chart_legend_shape_marker"][fill="#ffffff"] { fill: var(--superficie) !important; }
div[id$="_tooltip"] svg path[id$="_path"] { fill: var(--elevacao) !important; stroke: var(--borda) !important; }
div[id$="_tooltip"] svg text, div[id$="_tooltip"] svg tspan { fill: var(--texto) !important; }
.e-chart, .e-accumulationchart, .e-circulargauge, .e-lineargauge { background: transparent !important; }

/* O Syncfusion usa --color-sf-primary também como COR DE TEXTO (vista ativa, dia atual, hoje no calendário).
   No escuro o azul de fundo (--primario) não tem contraste como texto: nesses sítios o texto passa a --acento. */
.e-schedule .e-schedule-toolbar .e-active-view .e-tbar-btn-text, .e-schedule .e-schedule-toolbar .e-active-view .e-icons,
.e-schedule .e-header-cells.e-current-day, .e-schedule .e-header-cells.e-current-day *, .e-schedule .e-month-view .e-header-cells.e-current-day,
.e-calendar .e-content td.e-today span.e-day, .e-calendar .e-header .e-title:hover, .e-pager .e-numericitem:hover,
.e-toolbar .e-toolbar-item.e-active .e-tbar-btn-text { color: var(--acento) !important; }
/* Gantt: rótulos dos marcadores de evento ('Agora') */
.e-gantt .e-span-label { background: var(--laranja-suave) !important; color: var(--laranja-texto) !important; }
.e-gantt .e-event-markers .e-gantt-right-arrow { border-right-color: var(--laranja-suave); }
.e-gantt .e-event-markers { border-color: var(--laranja); }
/* Paleta Ctrl+K: o atalho/secção na linha ativa acompanha a cor da linha */
.paleta-lista li.ativa small, .paleta-lista li:hover small { color: inherit; }
.e-calendar .e-content td.e-today.e-selected span.e-day { color: var(--texto-inverso) !important; }
/* SfProgressBar: trilho com a cor de superfície do tema (o Syncfusion pinta-o sempre claro) */
svg [id$="_Lineartrack"], svg [id$="_Circulartrack"] { stroke: var(--superficie-3) !important; }

/* Ficha só de leitura até clicar em «Editar»: o fieldset desativa todos os campos nativos; os componentes Syncfusion (listas, datas, números) ficam sem rato. */
fieldset.campos-edicao { border: 0; margin: 0; padding: 0; min-width: 0; display: contents; }
fieldset.campos-edicao[disabled] .e-control-wrapper,
fieldset.campos-edicao[disabled] .e-input-group,
fieldset.campos-edicao[disabled] .e-switch-wrapper,
fieldset.campos-edicao[disabled] .e-checkbox-wrapper { pointer-events: none; opacity: .65; }
fieldset.campos-edicao[disabled] input:not([type=checkbox]):not([type=radio]),
fieldset.campos-edicao[disabled] textarea,
fieldset.campos-edicao[disabled] select { background: var(--superficie-2); cursor: not-allowed; }
.barra-editar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 12px; }
/* lista pendente do seletor (o CssClass também vai para o popup, que fica no <body>) */
.e-ddl.e-popup.seletor-proposta { height: auto !important; padding: 0; margin-top: 6px; border: 1px solid var(--borda) !important; border-radius: 12px !important; background: var(--superficie) !important; box-shadow: 0 14px 36px rgba(0, 0, 0, .45) !important; overflow: hidden; }
.e-ddl.e-popup.seletor-proposta .e-content { height: auto !important; max-height: 320px !important; padding: 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.e-ddl.e-popup.seletor-proposta .e-content::-webkit-scrollbar { width: 6px; }
.e-ddl.e-popup.seletor-proposta .e-content::-webkit-scrollbar-button { display: none; }
.e-ddl.e-popup.seletor-proposta .e-content::-webkit-scrollbar-track { background: transparent; }
.e-ddl.e-popup.seletor-proposta .e-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 999px; }
.e-ddl.e-popup.seletor-proposta .e-list-parent { padding: 0; margin: 0; }
.e-ddl.e-popup.seletor-proposta .e-list-item { display: flex; align-items: center; height: 36px; line-height: 36px; padding: 0 12px !important; border-radius: 8px; color: var(--texto-2); font: 600 13.5px var(--fonte); font-variant-numeric: tabular-nums; text-indent: 0; }
.e-ddl.e-popup.seletor-proposta .e-list-item.e-hover, .e-ddl.e-popup.seletor-proposta .e-list-item.e-item-focus { background: var(--superficie-2) !important; color: var(--texto) !important; }
.e-ddl.e-popup.seletor-proposta .e-list-item.e-active { background: var(--acento-suave) !important; color: var(--acento) !important; }

/* IVA nos orçamentos */
.chip-iva { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.chip-iva.herdado { background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borda); }
.chip-iva.proprio { background: var(--azul-suave); color: var(--azul-texto); }
.aviso-iva { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borda); }
.aviso-iva small { color: var(--texto-2); line-height: 1.4; }
.dialogo-forja.e-dialog { max-width: 94vw; }

/* Diálogo «Totais do orçamento»: cálculos em coluna */
.dialogo-totais .totais-lista { display: flex; flex-direction: column; }
.dialogo-totais .totais-lista .linha { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 9px 0; border-bottom: 1px solid var(--borda); }
.dialogo-totais .totais-lista .linha span { color: var(--texto-2); font-size: 13px; }
.dialogo-totais .totais-lista .linha strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.dialogo-totais .totais-lista .linha strong small { font-size: 12px; color: var(--texto-2); font-weight: 600; }
.dialogo-totais .totais-lista .linha.verde strong { color: #059669; }
.dialogo-totais .totais-lista .linha.negativa strong { color: var(--vermelho); }
.dialogo-totais .totais-lista .linha.total { border-bottom: 0; border-top: 2px solid var(--acento); margin-top: 6px; padding-top: 12px; }
.dialogo-totais .totais-lista .linha.total strong { font-size: 20px; color: var(--acento); }
.dialogo-totais .totais-lista .grupo { margin: 14px 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); font-weight: 700; }

/* Texto completo de uma célula cortada (enki.js) — aparece por cima da célula */
.forja-dica-celula {
  display: none; position: fixed; z-index: 1100; pointer-events: none;
  padding: 8px 12px; border-radius: 8px; background: var(--texto); color: var(--fundo);
  font-size: 13px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}