/* From Faye — sistema de design (layout do Enki) por cima do tema Syncfusion Fluent 2, com a identidade visual da clínica
   (fromfaye.pt): oliva, creme e areia; Cormorant Garamond nos títulos, Inter no texto, IBM Plex Mono nas etiquetas. */
:root {
  --fonte: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fonte-titulos: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --fundo: #f7f5f1;
  --superficie: #ffffff;
  --superficie-2: #fbfaf7;
  --borda: #e8e4dc;
  --texto: #2c2a26;
  --texto-2: #6e6758;
  --texto-3: #9a9888;
  --acento: #7b7b5e;
  --acento-forte: #606047;
  --acento-suave: #efeee6;
  --terracota: #c09080; --terracota-suave: #f6ece8;
  --verde: #6f8f6a; --verde-suave: #eef3ec;
  --laranja: #c08a3e; --laranja-suave: #faf2e4;
  --roxo: #8a7a9a; --roxo-suave: #f2eff5;
  --vermelho: #b4533c; --vermelho-suave: #f8ebe7;
  --azul-suave: #eceee6;
  /* Texto das mensagens de estado (.aviso) sobre o fundo suave do mesmo tom. */
  --texto-sucesso: #4f6f4b;
  --texto-alerta: #9a6a26;
  --texto-erro: #a3412e;
  --texto-info: #5f5f45;
  --lateral: #4a4a35;
  --lateral-2: #34342a;
  --lateral-texto: #ddd8ca;
  --sombra: 0 1px 2px rgba(44, 42, 38, .04), 0 4px 16px rgba(44, 42, 38, .05);
  --sombra-forte: 0 12px 40px rgba(44, 42, 38, .16);
  --raio: 14px;

  /* Fluent 2 claro com a cor da marca (botões, foco, seleção, ligações). */
  --color-sf-primary: var(--acento);
  --color-sf-primary-dark: #6a6a50;
  --color-sf-primary-darker: #606047;
  --color-sf-primary-light: #dcdacb;
  --color-sf-primary-lighter: #efeee6;
  --color-sf-primary-bg-color: var(--acento);
  --color-sf-primary-bg-color-hover: #6a6a50;
  --color-sf-primary-bg-color-pressed: #606047;
  --color-sf-primary-border-color: var(--acento);
  --color-sf-primary-text-color: #ffffff;
  --color-sf-border-focus: var(--acento);
  --color-sf-content-bg-color-selected: #efeee6;
  --color-sf-table-bg-color-selected: #efeee6;
  --color-sf-flyout-bg-color-selected: #efeee6;
}
html[data-tema="escuro"] {
  --fundo: #1c1b17;
  --superficie: #26251f;
  --superficie-2: #211f1a;
  --borda: #3a382f;
  --texto: #efebe2;
  --texto-2: #c9c3b3;
  --texto-3: #8f8a7a;
  --acento: #a8a884;
  --acento-forte: #c2c2a0;
  --acento-suave: rgba(168, 168, 132, .16);
  --terracota-suave: rgba(192, 144, 128, .16);
  --verde-suave: rgba(111, 143, 106, .16);
  --laranja-suave: rgba(192, 138, 62, .16);
  --roxo-suave: rgba(138, 122, 154, .18);
  --vermelho-suave: rgba(180, 83, 60, .18);
  --azul-suave: rgba(168, 168, 132, .14);
  /* Tons claros no escuro: verde, laranja e vermelho do claro ficavam escuros sobre fundo escuro (quase ilegíveis). */
  --verde: #9cbf95;
  --laranja: #e0a95a;
  --vermelho: #e3826b;
  --roxo: #b3a3c4;
  --texto-sucesso: #bcd8b5;
  --texto-alerta: #f0c587;
  --texto-erro: #f4a996;
  --texto-info: #d9d6c2;
  --lateral: #2a2a20;
  --lateral-2: #1f1f18;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);

  /* Fluent 2 escuro: cinzas neutros substituídos pelos tons quentes da marca. */
  --color-sf-content-bg-color: var(--superficie);
  --color-sf-content-bg-color-alt1: var(--superficie);
  --color-sf-content-bg-color-alt2: var(--superficie-2);
  --color-sf-content-bg-color-alt3: #302e27;
  --color-sf-content-bg-color-hover: #302e27;
  --color-sf-content-bg-color-selected: #34332a;
  --color-sf-table-bg-color-hover: #302e27;
  --color-sf-table-bg-color-selected: #34332a;
  --color-sf-flyout-bg-color-selected: #34332a;
  --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-icon-color: var(--texto-2);
  --color-sf-icon-color-hover: var(--texto);
  --color-sf-icon-color-pressed: var(--texto);
  --color-sf-border: var(--borda);
  --color-sf-border-light: var(--borda);
  --color-sf-border-alt: #4a473c;
  --color-sf-border-focus: var(--acento);
  --color-sf-primary: var(--acento);
  --color-sf-primary-dark: #b8b894;
  --color-sf-primary-darker: #c9c9a8;
  --color-sf-primary-light: #4a4a38;
  --color-sf-primary-lighter: rgba(168, 168, 132, .16);
  --color-sf-primary-bg-color: var(--acento);
  --color-sf-primary-text-color: #1c1b17;
  --color-sf-warning: var(--laranja);
  --color-sf-border-warning: var(--laranja);
}

/* Ponte para os componentes I9* do core (i9core.css / i9syncfusion.css carregam antes): as variáveis do core passam a
   ler a paleta da clínica, por isso seguem também o tema escuro (data-tema), que muda as variáveis de cima. */
:root {
  --i9-primary: var(--acento);
  --i9-primary-600: var(--acento-forte);
  --i9-primary-700: var(--acento-forte);
  --i9-primary-300: #dcdacb;
  --i9-primary-soft: var(--acento-suave);
  --i9-primary-softer: var(--superficie-2);
  --i9-row-selected: var(--acento-suave);
  --i9-link: var(--acento-forte);
  --i9-link-hover: var(--acento);
  --i9-bg: var(--fundo);
  --i9-surface: var(--superficie);
  --i9-surface-2: var(--superficie-2);
  --i9-surface-3: var(--azul-suave);
  --i9-text: var(--texto);
  --i9-text-regular: var(--texto);
  --i9-text-2nd: var(--texto-2);
  --i9-text-placeholder: var(--texto-3);
  --i9-border: var(--borda);
  --i9-border-2: var(--borda);
  --i9-border-strong: var(--borda);
  --i9-success: var(--verde); --i9-success-bg: var(--verde-suave);
  --i9-warning: var(--laranja); --i9-warning-bg: var(--laranja-suave);
  --i9-danger: var(--vermelho); --i9-danger-bg: var(--vermelho-suave);
  --i9-info: var(--acento);
  --i9-tone-neutral: var(--texto-2);
  --i9-tone-info: var(--acento-forte);
  --i9-tone-success: var(--verde);
  --i9-tone-warning: var(--laranja);
  --i9-tone-danger: var(--vermelho);
  --i9-tone-accent: var(--roxo);
  --i9-subnav-from: var(--acento);
  --i9-subnav-to: var(--acento-forte);
  --i9-ring: 0 0 0 3px var(--acento-suave);
  --i9-radius: 10px;
  --i9-radius-md: 10px;
  --e-font-name: var(--fonte);

  /* i9syncfusion.css troca o Fluent 2 para azul/slate: voltar aos tons da clínica. */
  --color-sf-primary-bg-color-selected: var(--acento-forte);
  --color-sf-primary-bg-color-disabled: #dcdacb;
  --color-sf-primary-cell-selection: var(--acento-suave);
  --color-sf-success: var(--verde);
  --color-sf-success-bg-color: var(--verde);
  --color-sf-success-light-alt: var(--verde-suave);
  --color-sf-warning: var(--laranja);
  --color-sf-warning-bg-color: var(--laranja);
  --color-sf-warning-light-alt: var(--laranja-suave);
  --color-sf-danger: var(--vermelho);
  --color-sf-danger-bg-color: var(--vermelho);
  --color-sf-danger-light-alt: var(--vermelho-suave);
  --color-sf-info: var(--acento);
  --color-sf-info-bg-color: var(--acento);
  --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-placeholder-text-color: var(--texto-3);
  --color-sf-border-light: var(--borda);
  --color-sf-border: var(--borda);
  --color-sf-border-hover: var(--texto-3);
  --color-sf-border-error: var(--vermelho);
  --color-sf-border-success: var(--verde);
  --color-sf-border-warning: var(--laranja);
  --color-sf-content-bg-color-hover: var(--superficie-2);
  --color-sf-flyout-bg-color-hover: var(--superficie-2);
  --color-sf-flyout-bg-color-focus: var(--superficie-2);
  --color-sf-cell-selection-bg-color: var(--acento-suave);
  --color-sf-overlay-bg-color: rgb(44 42 38 / 45%);
}
html[data-tema="escuro"] { color-scheme: dark; }
.i9-field-box .e-input-group.e-input-focus { box-shadow: var(--i9-ring); }

* { 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; }
.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; justify-items: center; gap: 18px; background: var(--fundo); }
.arranque .marca-logo { height: 88px; }
.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; }
.lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 0; background: linear-gradient(180deg, var(--lateral), var(--lateral-2)); color: var(--lateral-texto); padding: 16px 12px 12px; overflow: hidden; }
.marca { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 4px 14px; color: #fff; }
.marca-icone { display: block; width: 48px; height: 48px; border-radius: 14px; object-fit: contain; flex-shrink: 0; }
.marca-logo { display: block; height: 72px; width: auto; object-fit: contain; }
.marca-logo.grande { height: 96px; }
.entrada-marca .marca-logo { height: 88px; }
.menu { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; min-height: 0; padding-right: 2px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.menu::-webkit-scrollbar { width: 6px; }
.menu::-webkit-scrollbar-track { background: transparent; }
.menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 999px; }
.menu::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .28); }
.menu-secao { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #b3ae9b; 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: rgba(255, 255, 255, .06); color: #fff; }
.menu-item.active { background: linear-gradient(90deg, rgba(233, 228, 218, .20), rgba(233, 228, 218, .06)); color: #fff; box-shadow: inset 3px 0 0 #e9e4da; }
.lateral-rodape { display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px; border-top: 1px solid rgba(255, 255, 255, .07); margin-top: 8px; }
.lateral-rodape .utilizador { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lateral-rodape strong { color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral-rodape span { font-size: 12px; color: #bdb8a6; }
.lateral-rodape .botao-icone { color: var(--lateral-texto); }
.lateral-rodape .conta-ligacao { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: inherit; text-decoration: none; border-radius: 8px; padding: 2px; }
.lateral-rodape .conta-ligacao:hover, .lateral-rodape .conta-ligacao:focus-visible { background: rgba(255, 255, 255, .06); }
.app.recolhido .menu-texto, .app.recolhido .menu-secao, .app.recolhido .utilizador, .app.recolhido .lateral-rodape .botao-icone { display: none; }
.app.recolhido .marca { justify-content: center; padding: 4px 0 12px; }
.app.recolhido .menu-item { justify-content: center; }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #7b7b5e, #c09080); color: #fff; 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; width: 100%; }
/* «Entrar como» do superuser: faixa fixa por cima dos separadores (que descem a altura dela). */
.faixa-impersonar { position: sticky; top: 0; z-index: 21; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px;
  background: var(--laranja); color: #fff; font: 500 13px var(--fonte); }
.faixa-impersonar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faixa-impersonar-voltar { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 28px; padding: 0 12px; border: 1px solid rgba(255,255,255,.7);
  border-radius: 8px; background: rgba(255,255,255,.14); color: #fff; font: 600 13px var(--fonte); cursor: pointer; }
.faixa-impersonar-voltar:hover { background: rgba(255,255,255,.26); }
.faixa-impersonar-voltar:disabled { opacity: .7; cursor: wait; }
.app.a-impersonar .barra-separadores { top: 40px; }
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 28px; background: color-mix(in srgb, var(--fundo) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borda); }
.topo-direita { margin-left: auto; display: flex; gap: 6px; }
.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); box-sizing: border-box; }
.pesquisa-global span { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pesquisa-global:hover { border-color: var(--acento); }
.pesquisa-lateral { width: 100%; height: 42px; margin: 0 0 12px; padding: 0 10px 0 12px; gap: 8px; box-shadow: none; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; color: #ddd8ca; font-size: 13px; }
.pesquisa-lateral:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; }
.pesquisa-lateral:focus-visible { outline: 2px solid rgba(233, 228, 218, .55); outline-offset: 2px; }
.pesquisa-lateral kbd { flex: none; font: 600 10px var(--fonte); color: #c9c3b3; border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; padding: 2px 5px; background: rgba(0, 0, 0, .2); line-height: 1.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; }
.conteudo { padding: 28px; width: 100%; max-width: none; margin: 0; box-sizing: border-box; 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(--acento); 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(--texto-info); }
.chip-verde { background: var(--verde-suave); color: var(--texto-sucesso); }
.chip-cinza { background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borda); }
.chip-vermelho { background: var(--vermelho-suave); color: var(--texto-erro); }
.chip-roxo { background: var(--roxo-suave); color: #6f5f80; }
.chip-laranja { background: var(--laranja-suave); color: var(--texto-alerta); }
.texto-alerta { color: var(--vermelho); 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(--acento); color: #fff; }

/* Diagrama Syncfusion (workflows) — herdar fundo do tema em vez do branco Fluent2. */
.e-diagram,
.e-diagram .e-content-wrapper,
.e-diagram .e-diagramcontent {
  background-color: transparent !important;
  background: transparent !important;
}
html[data-tema="escuro"] .e-diagram {
  --color-sf-content-bg-color: var(--superficie-2);
}

/* Caption de acessibilidade do SfGrid (ids tipo sfgrid…_header_table) — esconder visualmente. */
.e-grid caption,
.e-grid .e-table > caption,
.e-grid .e-gridheader caption {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* Grelhas Syncfusion — cartão nosso (sem o fundo castanho/amarelo do Fluent2 dark) */
.cartao.grelha { padding: 10px 12px 6px; overflow: hidden; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao.grelha.estreita { max-width: 860px; }
.cartao.grelha .e-grid,
.cartao.grelha .e-grid .e-gridcontent,
.cartao.grelha .e-grid .e-content,
.cartao.grelha .e-grid .e-table { border: 0; background: transparent !important; }
.cartao.grelha .e-grid { border-radius: 10px; width: 100%; }
.cartao.grelha .e-grid .e-rowcell,
.cartao.grelha .e-grid .e-altrow .e-rowcell,
.cartao.grelha .e-grid .e-detailrowcollapse,
.cartao.grelha .e-grid .e-detailrowexpand,
.cartao.grelha .e-grid .e-detailheadercell { background: transparent !important; border-color: var(--borda) !important; color: var(--texto-2) !important; }
.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-gridheader .e-icons,
.e-grid .e-icon-filter,
.e-grid .e-icon-filter::before { color: var(--texto-3) !important; }
.e-grid .e-filtered::before,
.e-grid .e-icon-filter.e-filtered::before { color: var(--acento) !important; }
.e-grid .e-focused:not(.e-menu-item):not(.e-editedbatchcell) { box-shadow: 0 0 0 1px var(--acento) inset !important; }
.e-grid .e-rowcell { font-size: 13.5px; }
.e-grid .e-row:hover .e-rowcell { background: var(--acento-suave) !important; cursor: pointer; }
.e-grid .e-toolbar { border: 0; padding: 2px 0 10px; display: flex; justify-content: flex-end; }
.e-grid .e-toolbar .e-toolbar-items { width: 100%; justify-content: flex-end; }
.e-grid .e-toolbar .e-search,
.e-grid .e-toolbar .e-input-group,
.e-grid .e-toolbar .e-control-wrapper { border-radius: 10px !important; min-width: 220px; border-color: var(--borda) !important; background: var(--superficie-2) !important; box-shadow: none !important; }
.e-grid .e-toolbar .e-input-group.e-input-focus,
.e-grid .e-toolbar .e-control-wrapper.e-input-focus { border-color: var(--acento) !important; box-shadow: 0 0 0 3px var(--acento-suave) !important; }
.e-grid .e-toolbar .e-btn,
.e-grid .e-toolbar .e-tbar-btn { color: var(--texto-2) !important; border-color: var(--borda) !important; background: transparent !important; box-shadow: none !important; }
.e-grid .e-pager { border-top: 1px solid var(--borda); background: transparent; margin-top: 4px; }
.celula-dupla { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; min-width: 0; max-width: 100%; }
.celula-dupla a, .celula-dupla strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.celula-dupla span { color: var(--texto-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.celula-avatar { display: flex; align-items: center; gap: 10px; }

/* Painel lateral de detalhe */
.painel-fundo { position: fixed; inset: 0; background: rgba(44, 42, 38, .28); 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(--texto-erro); }
.aviso.info { background: var(--azul-suave); color: var(--texto-info); }
.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: #fff; background: radial-gradient(1200px 600px at -10% -20%, #606047 0%, transparent 60%), radial-gradient(900px 700px at 120% 120%, #6f5f80 0%, transparent 55%), #2c2a26; 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, #e9e4da, #d9b8aa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.entrada-texto p { max-width: 460px; color: #d6d1c4; font-size: 16px; line-height: 1.55; }
.entrada-pontos { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; color: #e8e4dc; position: relative; z-index: 1; }
.entrada-pontos li { display: flex; align-items: center; gap: 10px; }
.entrada-pontos .icone { color: #d6d1a8; }
.entrada-decor span { position: absolute; border: 1px solid rgba(255, 255, 255, .08); 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: rgba(233, 228, 218, .06); }
.entrada-form { display: grid; place-items: center; padding: 32px; }
.cartao-entrada { width: min(420px, 100%); }
.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; }
.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: 1400px) {
  .grelha-graficos { grid-template-columns: 1fr 1fr; }
}
@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; }
  .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(--acento), #606047) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 6px 16px rgba(96, 96, 71, .28); }
.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(--acento) !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; min-width: 0; }
.form-grelha .campo.largo { grid-column: 1 / -1; }
/* Grelha que acompanha a largura: mais colunas em ecrã largo, uma coluna quando o espaço aperta. */
.form-responsivo label.campo input { width: 100%; box-sizing: border-box; }
.form-responsivo .e-control-wrapper, .form-responsivo .e-ddl, .form-responsivo .e-input-group { width: 100%; max-width: 100%; }
.interruptores { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
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-ff.e-dialog { border-radius: 16px; }
.dialogo-ff .e-dlg-header-content { padding: 18px 22px 10px; border: 0; }
.dialogo-ff .e-dlg-header { font: 700 18px var(--fonte); }
.dialogo-ff .e-dlg-content { padding: 8px 22px 18px; }
.dialogo-ff .e-footer-content { padding: 12px 22px 18px; border-top: 1px solid var(--borda); }
.dialogo-ff .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(--vermelho) !important; color: #fff !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); }
.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); }

/* 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-ff.e-tab .e-tab-header { background: transparent; border-bottom: 1px solid var(--borda); }
.separadores-ff.e-tab .e-tab-header .e-toolbar-item .e-tab-text { font-weight: 600; }
.separadores-ff.e-tab .e-content { padding-top: 16px; overflow-x: clip; overflow-y: visible; }
/* Listas Syncfusion (DropDown/Combo) — acima do conteúdo dos tabs */
.e-ddl.e-popup, .e-dropdownbase.e-popup, .e-popup-wrapper { z-index: 1200 !important; }
.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: #fff !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/auditar-css-dialogos.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(--texto-alerta); }
.opcoes .opcao b { margin-left: 2px; color: var(--texto-3); cursor: pointer; }
.opcoes .opcao b:hover { color: var(--vermelho); }

/* editor de características (Domio) */
.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); }

/* 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; }

/* destinatários (despesas extra, procurações) */
.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 (Tabs/TabsBar.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; }
.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 { flex: 0 0 auto; max-width: none; 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); }
.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(--texto-alerta); }
.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; }
  .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 — fromfaye.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 (Tabs/TabEditor.razor) ───── */
.editor-separador { display: flex; flex-direction: column; gap: 16px; width: 100%; min-width: 0; }
.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; }

/* 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(--texto-info); }
.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; }

/* ───── Identidade From Faye (por cima do layout do Enki) ───── */
/* Títulos em Cormorant Garamond, como no site; etiquetas de secção em IBM Plex Mono. */
.cabecalho-pagina h1, .editor-titulo h1, .ficha-cabecalho h1, .cartao-entrada h2, .entrada-texto h1, .painel-lateral h2,
.dialogo-ff .e-dlg-header, .marca-nome { font-family: var(--fonte-titulos); font-weight: 600; letter-spacing: 0; }
.cabecalho-pagina h1 { font-size: 34px; line-height: 1.05; }
.editor-titulo h1, .ficha-cabecalho h1 { font-size: 30px; }
.cartao h3 { font-family: var(--fonte); }
.kpi-valor { font-family: var(--fonte-titulos); font-size: 34px; font-weight: 600; letter-spacing: 0; }
.menu-secao, .sobretitulo, .etiqueta-mono { font-family: var(--fonte-mono); letter-spacing: .12em; }
.sobretitulo { font-size: 11.5px; text-transform: uppercase; }

/* Símbolo da marca (flor) tingido pela cor do contexto: creme na barra lateral, oliva no arranque/entrada. */
.marca-simbolo { display: block; width: 46px; height: 36px; background: currentColor;
  -webkit-mask: url("brand/simbolo.png") center / contain no-repeat; mask: url("brand/simbolo.png") center / contain no-repeat; }
.marca { flex-direction: column; gap: 6px; color: #e9e4da; }
.marca-nome { font-size: 22px; line-height: 1; color: #f7f5f1; white-space: nowrap; }
.marca-nome em { font-style: italic; font-weight: 400; }
.app.recolhido .marca-nome { display: none; }
.arranque { color: var(--acento); }
.arranque .marca-simbolo { width: 92px; height: 72px; }
.arranque .marca-nome { color: var(--texto); font-size: 30px; }

/* Barra lateral: oliva profundo com textura suave. */
.lateral { background: linear-gradient(180deg, var(--lateral), var(--lateral-2)); }
.avatar { background: linear-gradient(135deg, #7b7b5e, #c09080); }

/* Entrada: fotografia da identidade com véu oliva; texto em creme. */
.entrada-marca { background: linear-gradient(180deg, rgba(34, 32, 28, .9), rgba(34, 32, 28, .94)), url("brand/identidade.jpg") center / cover no-repeat, #2c2a26; gap: 32px; }
.entrada-texto h1, .entrada-texto p, .entrada-pontos { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
@media (max-width: 1280px), (max-height: 760px) {
  .entrada-marca { padding: 32px 36px; }
  .entrada-marca .marca-nome { font-size: 30px; }
  .entrada-texto h1 { font-size: clamp(28px, 3.2vw, 40px); }
  .entrada-texto p { font-size: 14px; }
  .entrada-pontos { display: none; }
}
@media (max-width: 1280px) { .entrada { grid-template-columns: 1fr; } .entrada-marca { display: none; } }
.entrada-marca .marca-simbolo { width: 64px; height: 50px; color: #e9e4da; }
.entrada-marca .marca-nome { font-size: 40px; }
.entrada-texto h1 { font-weight: 500; color: #f3efe6; }
.entrada-texto h1:focus { outline: none; }
.entrada-texto h1 span { background: none; color: #e9e4da; font-style: italic; }
.entrada-decor span { border-color: rgba(233, 228, 218, .14); }

/* Chips de estado da agenda (AGD 04). */
.chip-terracota { background: var(--terracota-suave); color: #9a6455; }
.estado-agendada { --estado: #9a9888; } .estado-confirmada { --estado: #7b7b5e; } .estado-chegada { --estado: #c08a3e; }
.estado-em-curso { --estado: #c09080; } .estado-concluida { --estado: #6f8f6a; } .estado-cancelada { --estado: #b4533c; } .estado-falta { --estado: #8a7a9a; }

/* ───── Ecrãs da clínica: peças comuns (o específico de cada módulo vive no .razor.css da página) ───── */
.bola-cor { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: middle; margin-right: 6px; box-shadow: 0 0 0 2px var(--superficie), 0 0 0 3px var(--borda); }
.tabela-clicavel tbody tr { cursor: pointer; transition: background .12s; }
.tabela-clicavel tbody tr:hover { background: var(--superficie-2); }
.tabela-simples td { vertical-align: middle; }
.texto-secundario { color: var(--texto-3); }
.aviso.alerta { background: var(--laranja-suave); color: var(--texto-alerta); }
.aviso.sucesso { background: var(--verde-suave); color: var(--texto-sucesso); }
.form-secao { margin: 22px 0 10px; font-size: 13px; font-weight: 650; color: var(--texto-2); text-transform: uppercase; letter-spacing: .08em; font-family: var(--fonte-mono); }
.form-secao:first-child { margin-top: 0; }
.campo > label, .campo > span:first-child { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.linha-checks { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin: 4px 0 14px; }
.barra-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.barra-filtros > * { min-width: 180px; }
.paginacao { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 12px; color: var(--texto-3); font-size: 13px; }
.cor-campo { display: flex; align-items: center; gap: 10px; }
.cor-campo input[type=color] { width: 44px; height: 38px; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); padding: 3px; cursor: pointer; }

/* Componentes I9* do core com a identidade da clínica (cabeçalho, caminho, grelha, cartão). */
.i9-pagehead { margin-bottom: 22px; }
.i9-pagehead__title { margin: 0; font-family: var(--fonte-titulos); font-size: 34px; font-weight: 600; line-height: 1.05; letter-spacing: 0; color: var(--texto); }
.i9-pagehead__sub { color: var(--texto-2); }
.i9-crumbs { font-family: var(--fonte-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--acento); }
.i9-crumbs a { color: var(--acento); }
.i9-grid { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.i9-field__label { color: var(--texto-2); font-size: 12.5px; }