/* O que e comum a todas as telas do mock do GEO3X, em cima do Nexus (comum/nexus.css e comum/casca.css). O que e so
   de uma tela fica no <style> dela. */

/* identidade GEO3D (turquesa + grafite) por cima dos tokens do Nexus: comum/marca/marca.css, antes de qualquer regra */
@import url("../comum/marca/marca.css");

/* sem o reset global do Angular o body fica com a margem de 8px do navegador: borda branca e a casca de 100dvh rolando 16px */
body { margin: 0; }
/* ===================================================================================================
   Camada de acabamento (kit visual; guia em planos/referencias/kit-visual.md). Tokens mk-* por cima dos nx-*:
   sombras em duas camadas, raios, movimento. Os tokens de sombra do Nexus passam a apontar para estes, entao todo
   nx-card ganha a mesma profundidade sem mexer no CSS gerado.
   ========================================================================================================== */
:root {
    --mk-sombra-1: 0 1px 2px rgba(22, 51, 61, 0.04), 0 3px 10px -2px rgba(22, 51, 61, 0.06);
    --mk-sombra-2: 0 2px 4px rgba(22, 51, 61, 0.05), 0 14px 32px -14px rgba(22, 51, 61, 0.24);
    --mk-sombra-3: 0 8px 18px -8px rgba(22, 51, 61, 0.16), 0 36px 72px -28px rgba(22, 51, 61, 0.42);
    --mk-sombra-hero: 0 2px 4px rgba(10, 22, 31, 0.18), 0 24px 48px -20px rgba(10, 22, 31, 0.55);
    --mk-borda: 1px solid var(--nx-line);
    --mk-borda-forte: 1px solid var(--nx-line-2);
    --mk-raio-xs: 6px;
    --mk-raio-s: var(--nx-r-s);
    --mk-raio-m: var(--nx-r-m);
    --mk-raio-l: var(--nx-r-l);
    --mk-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --mk-rapido: 150ms;
    --mk-normal: 180ms;
    --mk-lento: 240ms;
    --mk-foco: 0 0 0 2px var(--nx-surface), 0 0 0 4px color-mix(in srgb, var(--nx-teal-500) 70%, transparent);
    --mk-vidro: color-mix(in srgb, var(--nx-surface) 84%, transparent);
    --mk-ruido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --nx-shadow-1: var(--mk-sombra-1);
    --nx-shadow-2: var(--mk-sombra-2);
    --nx-shadow-3: var(--mk-sombra-3);
}
[data-theme=dark] {
    --mk-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px -4px rgba(0, 0, 0, 0.45);
    --mk-sombra-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 16px 36px -14px rgba(0, 0, 0, 0.7);
    --mk-sombra-3: 0 8px 18px -8px rgba(0, 0, 0, 0.5), 0 36px 80px -28px rgba(0, 0, 0, 0.9);
    --mk-vidro: color-mix(in srgb, var(--nx-surface) 80%, transparent);
    --nx-shadow-1: var(--mk-sombra-1);
    --nx-shadow-2: var(--mk-sombra-2);
    --nx-shadow-3: var(--mk-sombra-3);
}

/* superficies: selecao com a cor da marca, rolagem fina, foco visivel igual em tudo */
::selection { background: color-mix(in srgb, var(--nx-teal-500) 26%, transparent); color: var(--nx-ink); }
* { scrollbar-width: thin; scrollbar-color: var(--nx-line-3) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: var(--nx-line-3); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--nx-ink-4); }
::-webkit-scrollbar-track { background: transparent; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--nx-teal-500); outline-offset: 2px; }
:where(.nx-input, .nx-select, .nx-textarea):focus-visible { outline: 0; }
.nx-topbar { box-shadow: 0 1px 0 var(--nx-line), 0 6px 18px -12px rgba(22, 51, 61, 0.18); }
.nx-card { transition: border-color var(--mk-rapido), box-shadow var(--mk-normal) var(--mk-ease), transform var(--mk-normal) var(--mk-ease); }
a.nx-card:hover, button.nx-card:hover, .mk-eleva:hover { border-color: var(--nx-line-2); box-shadow: var(--mk-sombra-2); transform: translateY(-1px); }
.mk-eleva { transition: border-color var(--mk-rapido), box-shadow var(--mk-normal) var(--mk-ease), transform var(--mk-normal) var(--mk-ease); }
.nx-tabela thead th { font-size: 9.8px; letter-spacing: 0.13em; }
.nx-tabela tbody tr.nx-tabela__linha:hover { background: color-mix(in srgb, var(--nx-teal-500) 5%, var(--nx-surface)); box-shadow: inset 2px 0 0 var(--nx-line-2); }
.nx-icon-btn:active, .nx-btn:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
.nx-btn--primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(10, 22, 31, 0.18); }
.nx-btn--primary:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 12px -4px color-mix(in srgb, var(--nx-teal-800) 60%, transparent); }

/* movimento: entrada de listas e cartoes. componentes.js liga html.mk-anima na primeira pintura e desliga depois,
   para o redesenho de uma tela (filtro, aba) nao piscar. Itens com .mk-entra e --i entram em escada quando a tela quer. */
@keyframes mk-entra { from { opacity: 0; transform: translateY(6px); } }
@keyframes mk-surge { from { opacity: 0; } }
@keyframes mk-cresce { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
html.mk-anima #app > * { animation: mk-entra var(--mk-normal) var(--mk-ease) both; animation-delay: calc(var(--i, 0) * 28ms); }
html.mk-anima #app > :nth-child(2) { --i: 1; } html.mk-anima #app > :nth-child(3) { --i: 2; } html.mk-anima #app > :nth-child(4) { --i: 3; }
html.mk-anima #app > :nth-child(5) { --i: 4; } html.mk-anima #app > :nth-child(6) { --i: 5; } html.mk-anima #app > :nth-child(n+7) { --i: 6; }
.mk-entra { animation: mk-entra var(--mk-normal) var(--mk-ease) both; animation-delay: calc(var(--i, 0) * 24ms); }
.mk-entrar { animation: mk-entra 220ms var(--mk-ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
/* item de lista de trabalho (linha clicavel que abre gaveta ou ficha): hover com fundo e filete, ativo com filete forte */
.mk-lista-item { position: relative; cursor: pointer; transition: background-color var(--mk-rapido), box-shadow var(--mk-rapido); }
.mk-lista-item:hover { background: color-mix(in srgb, var(--nx-teal-500) 5%, var(--nx-surface)); box-shadow: inset 3px 0 0 var(--nx-teal-300); }
.mk-lista-item--ativo, .mk-lista-item--ativo:hover { background: var(--nx-info-bg); box-shadow: inset 3px 0 0 var(--nx-teal-600); }
.mk-lista-item:focus-visible { outline: 2px solid var(--nx-teal-500); outline-offset: -2px; }
tr.mk-lista-item:hover td:first-child { box-shadow: inset 3px 0 0 var(--nx-teal-300); }
tr.mk-lista-item:hover, tr.mk-lista-item--ativo { box-shadow: none; }
tr.mk-lista-item--ativo td:first-child { box-shadow: inset 3px 0 0 var(--nx-teal-600); }
/* o Nexus foi feito para o Angular com border-box global; aqui um <a class="nx-btn"> e os campos cresciam alem da coluna */
.nx-btn, .nx-input, .nx-select, .nx-textarea { box-sizing: border-box; }

/* Definicao, tela mais larga que a pagina (1760px, --nx-page-max-width): o conteudo fica no centro, nao grudado no
   menu. O mock da Duda e o Nexus deixam a esquerda, e a proposta e a versao do sistema ficam assim (sao o registro);
   decidido centralizar em 2026-10-11. */
.mk-comparar--definicao + .nx-corpo .nx-page { margin-inline: auto; }
.mk-pilha { display: grid; gap: 14px; }
.mk-pilha > * { min-width: 0; }
.mk-link { color: var(--nx-teal-600); font-weight: 650; text-decoration: none; }
.mk-link:hover { text-decoration: underline; }
.mk-escondido, [hidden] { display: none !important; }

/* formulario em secoes */
/* rotulo de secao antigo (texto solto); o cartao de secao do kit de formulario e <section class="mk-secao"> (Onda 4) */
:not(section).mk-secao { margin: 0; padding: 16px 23px 10px; border-top: 1px solid var(--nx-line); color: var(--nx-teal-600); font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
:not(section).mk-secao:first-child { border-top: 0; }
.mk-corpo { padding: 0 23px 18px; }
.mk-corpo .nx-select, .mk-corpo .nx-input, .mk-corpo .nx-textarea { box-sizing: border-box; width: 100%; }
.mk-seg-erro { outline: 1px solid var(--nx-crit); outline-offset: 2px; }
.mk-chip { cursor: pointer; font: inherit; font-size: 12.5px; }
.mk-chip--on { border-color: var(--nx-teal-500); background: color-mix(in srgb, var(--nx-teal-500) 10%, var(--nx-surface)); color: var(--nx-ink); }
.mk-chip--on .pi { color: var(--nx-teal-600); }
.mk-pessoa { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--nx-line); font-size: 13px; }
.mk-pessoa span:nth-child(2) { flex: 1; }
.mk-pessoa small { color: var(--nx-ink-3); }
.mk-pessoa button { border: 0; background: none; color: var(--nx-ink-3); cursor: pointer; }
.mk-pessoa button:hover { color: var(--nx-teal-600); }
.mk-alocar { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 8px; margin-top: 10px; }
.mk-alocar .nx-select { box-sizing: border-box; width: 100%; }
.mk-rodape { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.mk-rodape div { display: flex; gap: 8px; }

/* passos (tipo, dados, confirmar) */
.mk-steps { display: flex; gap: 6px; }
.mk-step { display: inline-flex; gap: 7px; align-items: center; padding: 6px 11px; border: 1px solid var(--nx-line); border-radius: 8px; background: var(--nx-surface); color: var(--nx-ink-3); font-size: 12px; }
.mk-step b { display: grid; width: 20px; height: 20px; border-radius: 6px; background: var(--nx-surface-3); font-size: 10.5px; place-items: center; }
.mk-step--feito b { background: var(--nx-ok); color: #fff; }
.mk-step--ativo { border-color: var(--nx-teal-500); color: var(--nx-ink); font-weight: 650; }
.mk-step--ativo b { background: var(--nx-ink); color: #fff; }

/* escolha entre cartoes */
.mk-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 800px) { .mk-pick { grid-template-columns: minmax(0, 1fr); } }
.mk-pick button, .mk-pick a { display: grid; gap: 10px; padding: 22px; border: 1px solid var(--nx-line); border-radius: 14px; background: var(--nx-surface); color: var(--nx-ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.mk-pick button:hover, .mk-pick a:hover { border-color: var(--nx-teal-500); box-shadow: var(--nx-shadow-2); }
.mk-pick h3 { margin: 0; font-size: 17px; }
.mk-pick p, .mk-pick li { margin: 0; color: var(--nx-ink-2); font-size: 13px; line-height: 1.5; }
.mk-pick ul { margin: 0; padding-left: 18px; }
.mk-pick .mk-icone { display: grid; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--nx-teal-500) 14%, transparent); color: var(--nx-teal-600); font-size: 18px; place-items: center; }
.mk-pick b { color: var(--nx-teal-600); font-size: 13px; }

/* confirmacao e sucesso */
.mk-resumo-sec { padding: 14px 23px; border-top: 1px solid var(--nx-line); }
.mk-resumo-sec:first-child { border-top: 0; }
.mk-resumo-sec h3 { margin: 0 0 10px; color: var(--nx-teal-600); font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.mk-resumo-sec dl { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 7px 14px; margin: 0; font-size: 13px; }
.mk-resumo-sec dt { color: var(--nx-ink-3); }
.mk-resumo-sec dd { margin: 0; font-weight: 600; }
.mk-sucesso { display: grid; gap: 10px; justify-items: center; padding: 40px 24px; text-align: center; }
.mk-sucesso > .pi { display: grid; width: 56px; height: 56px; border-radius: 50%; background: var(--nx-ok-bg); color: var(--nx-ok); font-size: 24px; place-items: center; }
.mk-sucesso h2 { margin: 0; font-size: 20px; }
.mk-sucesso p { margin: 0; color: var(--nx-ink-2); }
.mk-sucesso div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }

/* dialogo: <div class="mk-fundo mk-fundo--on"><form class="mk-dlg">header, corpo, footer</form></div> */
.mk-fundo { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 20, 30, 0.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.mk-fundo--on { display: flex; animation: mk-surge var(--mk-rapido) ease; }
.mk-dlg { width: 620px; max-width: 100%; max-height: calc(100vh - 32px); overflow: auto; border: 1px solid var(--nx-line); border-radius: 14px; background: var(--nx-surface); box-shadow: var(--mk-sombra-3); }
.mk-fundo--on .mk-dlg { animation: mk-cresce var(--mk-lento) var(--mk-ease); }
.mk-dlg header:not(.mk-secao__cabeca), .mk-dlg footer { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 16px 20px; }
.mk-dlg header:not(.mk-secao__cabeca) { border-bottom: 1px solid var(--nx-line); }
.mk-dlg footer { justify-content: flex-end; border-top: 1px solid var(--nx-line); }
.mk-dlg h2 { margin: 0; font-size: 16px; }
.mk-dlg .nx-form-grid { padding: 16px 20px; }
.mk-dlg .nx-input, .mk-dlg .nx-select, .mk-dlg .nx-textarea { box-sizing: border-box; width: 100%; }

/* aviso rapido */
@keyframes mk-toast-entra { from { opacity: 0; transform: translate(-50%, 10px); } }
.mk-toast { position: fixed; bottom: 22px; left: 50%; z-index: 80; display: none; padding: 10px 16px; border-radius: 10px; background: var(--nx-ink); color: var(--nx-surface); font-size: 13px; box-shadow: var(--mk-sombra-2); transform: translateX(-50%); }
.mk-toast--on { display: block; animation: mk-toast-entra var(--mk-lento) var(--mk-ease); }

/* cores das etapas do fluxo cadastral e do vocabulario de status (dados/processo.js) */
:root {
    --mk-st-nao: #c9d1d9;
    --mk-st-campo: var(--nx-teal-400);
    --mk-st-aguard: #c99a4e;
    --mk-st-doc: var(--nx-teal-600);
    --mk-st-conc: #3f8f66;
    --mk-st-bloq: var(--nx-crit);
}

/* blocos de painel (graficos.js) */
.mk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.mk-tile { position: relative; min-width: 0; padding: 12px 14px; border: 1px solid var(--nx-line); border-radius: var(--nx-r-m); background: var(--nx-surface); box-shadow: var(--nx-shadow-1); color: var(--nx-ink); text-decoration: none; }
a.mk-tile:hover { border-color: var(--nx-teal-500); }
.mk-tile--ok { border-left: 3px solid var(--nx-ok); }
.mk-tile--wa { border-left: 3px solid var(--nx-warn); }
.mk-tile--cr { border-left: 3px solid var(--nx-crit); }
.mk-tile--in { border-left: 3px solid var(--nx-teal-500); }
.mk-tile__rot { margin-bottom: 6px; color: var(--nx-ink-3); font-size: 9.6px; font-weight: 700; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; }
.mk-tile__valor { overflow: hidden; font-size: 24px; font-variant-numeric: tabular-nums; font-weight: 750; letter-spacing: -0.03em; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.mk-tile__valor--longo { font-size: 18px; }
.mk-tile__valor small { margin-left: 2px; color: var(--nx-ink-2); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.mk-tile__rodape { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 7px; color: var(--nx-ink-2); font-size: 11.4px; }
.mk-hbars { display: flex; flex-direction: column; gap: 9px; }
.mk-hbar { display: grid; grid-template-columns: minmax(96px, 36%) 1fr minmax(48px, auto); gap: 10px; align-items: center; font-size: 12.2px; }
.mk-hbar__rot { overflow: hidden; color: var(--nx-ink-2); text-overflow: ellipsis; white-space: nowrap; }
.mk-hbar__trilho { display: flex; gap: 1px; height: 12px; overflow: hidden; border-radius: 6px; background: var(--nx-surface-3); }
.mk-hbar__trilho i { display: block; height: 100%; }
.mk-hbar__n { font-family: var(--nx-fm); font-size: 11.4px; font-weight: 700; text-align: right; }
.mk-legenda { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 10px; color: var(--nx-ink-2); font-size: 11.2px; }
.mk-legenda span { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.mk-legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.mk-legenda b { font-family: var(--nx-fm); }
.mk-rosca { display: flex; gap: 16px; align-items: center; }
.mk-rosca__legenda { display: grid; gap: 5px; font-size: 12px; }
.mk-rosca__legenda div { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.mk-rosca__legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.mk-rosca__legenda span { min-width: 120px; color: var(--nx-ink-2); }
.mk-rosca__legenda small { color: var(--nx-ink-3); font-family: var(--nx-fm); font-size: 10.6px; }
.mk-medidor { display: inline-flex; gap: 8px; align-items: center; }
.mk-medidor > span { flex: 0 0 60px; width: 60px; height: 5px; overflow: hidden; border-radius: 3px; background: var(--nx-surface-3); }
.mk-medidor i { display: block; height: 100%; border-radius: 3px; }
.mk-medidor b { color: var(--nx-ink-2); font-family: var(--nx-fm); font-size: 11px; font-weight: 650; }
.mk-mono { font-family: var(--nx-fm); font-variant-numeric: tabular-nums; }
/* o Nexus tem nx-grid com nx-g2 e nx-g3; quatro colunas so aqui */
.mk-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .mk-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* OS em que a pessoa esta trabalhando, no topo (casca com-os) */
.mk-os-atual { display: inline-flex; gap: 8px; align-items: center; color: var(--nx-ink-3); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.mk-os-atual .nx-select { min-height: 32px; max-width: 320px; padding-top: 4px; padding-bottom: 4px; font-size: 12.5px; letter-spacing: 0; text-transform: none; }

/* painel a direita da casca: Copiloto e ajuda da tela */
.mk-com-lateral .nx-conteudo-shell { padding-right: 352px; }
.mk-lateral { position: fixed; top: 0; right: 0; bottom: 0; z-index: 25; display: flex; flex-direction: column; width: 352px; border-left: 1px solid var(--nx-line); background: var(--nx-surface); box-shadow: var(--nx-shadow-2); }
.mk-lateral[hidden] { display: none; }
.mk-lateral__cabeca { display: flex; gap: 10px; align-items: center; padding: 14px 16px; background: var(--nx-navy-800); color: #fff; }
.mk-lateral__cabeca > .pi { display: grid; width: 28px; height: 28px; border-radius: 9px; background: var(--nx-navy-700); color: var(--nx-teal-300); place-items: center; }
.mk-lateral__cabeca b { display: block; font-size: 13.4px; }
.mk-lateral__cabeca span { color: var(--nx-teal-300); font-size: 11px; }
.mk-lateral__cabeca .nx-icon-btn { margin-left: auto; border-color: rgba(255, 255, 255, 0.28); background: transparent; color: #fff; }
.mk-lateral__cabeca .nx-icon-btn:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.12); color: #fff; }
.mk-lateral__corpo { display: grid; flex: 1; gap: 12px; align-content: start; overflow-y: auto; padding: 16px; font-size: 12.6px; }
.mk-lateral__corpo h3 { margin: 0; font-size: 13.4px; }
.mk-lateral__corpo p, .mk-lateral__corpo ol { margin: 0; color: var(--nx-ink-2); }
.mk-lateral__corpo ol { display: grid; gap: 6px; padding-left: 18px; }
.mk-lateral__rotulo { color: var(--nx-ink-3) !important; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.mk-lateral__link { display: flex; gap: 8px; align-items: center; color: var(--nx-teal-600) !important; font-weight: 600; }
.mk-cop { position: relative; display: grid; gap: 8px; padding: 12px 14px 12px 17px; overflow: hidden; border: 1px solid var(--nx-line); border-radius: var(--nx-r-m); background: var(--nx-surface); }
.mk-cop::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: linear-gradient(180deg, var(--nx-teal-500), var(--nx-navy-600)); content: ""; }
.mk-cop__cabeca { display: flex; gap: 8px; align-items: center; }
.mk-cop__cabeca b { font-size: 12.8px; }
.mk-cop__pergunta { color: var(--nx-ink-2); font-weight: 550; }
.mk-cop p { margin: 0; color: var(--nx-ink-2); line-height: 1.5; }
.mk-cop__confianca { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; color: var(--nx-ink-3); font-size: 10.8px; }
.mk-cop__confianca div { height: 5px; overflow: hidden; border-radius: 3px; background: var(--nx-surface-3); }
.mk-cop__confianca i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--nx-navy-600), var(--nx-teal-500)); }
.mk-cop__confianca b { color: var(--nx-ink-2); font-family: var(--nx-fm); }
.mk-cop__acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-cop__pergunte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.mk-lateral .nx-chip { cursor: pointer; font-size: 11.4px; }

/* paleta: ir para uma tela ou um imovel (Ctrl+K) */
.mk-paleta-botao kbd { margin-left: 4px; padding: 0 5px; border: 1px solid var(--nx-line-2); border-radius: 4px; color: var(--nx-ink-3); font-family: var(--nx-fm); font-size: 10px; }
.mk-paleta { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: rgba(8, 20, 30, 0.45); }
.mk-paleta[hidden] { display: none; }
.mk-paleta__caixa { width: 600px; max-width: 100%; overflow: hidden; border: 1px solid var(--nx-line); border-radius: 14px; background: var(--nx-surface); box-shadow: var(--nx-shadow-3); }
.mk-paleta__caixa > .nx-input { box-sizing: border-box; width: 100%; border: 0; border-bottom: 1px solid var(--nx-line); border-radius: 0; padding: 16px 18px; font-size: 14px; }
.mk-paleta__lista { max-height: 60vh; overflow-y: auto; padding: 6px; }
.mk-paleta__item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 8px; color: var(--nx-ink); font-size: 13px; text-decoration: none; }
.mk-paleta__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-paleta__item small { color: var(--nx-ink-3); font-size: 11px; }
.mk-paleta__item .pi { color: var(--nx-ink-3); }
.mk-paleta__item--ativo, .mk-paleta__item:hover { background: var(--nx-info-bg); }
.mk-paleta__vazio { margin: 0; padding: 22px; color: var(--nx-ink-3); text-align: center; }

/* menu lateral: busca no topo e subtitulo dentro de um grupo (casca.js, MENU) */
.mk-rail-busca { display: flex; gap: 9px; align-items: center; margin: 4px 12px 8px; padding: 8px 10px; border: 1px solid var(--nx-navy-700); border-radius: var(--nx-r-s); background: color-mix(in srgb, var(--nx-navy-800) 70%, transparent); color: #a1bac3; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.mk-rail-busca:hover { border-color: var(--nx-navy-600); background: var(--nx-navy-800); color: #eef6f7; }
.mk-rail-busca span { flex: 1; }
.mk-rail-busca kbd { padding: 0 5px; border: 1px solid var(--nx-navy-600); border-radius: 4px; font-family: var(--nx-fm); font-size: 10px; }
.nx-shell--recolhido .mk-rail-busca { justify-content: center; margin: 4px 8px 8px; padding: 9px 0; }
.nx-shell--recolhido .mk-rail-busca span, .nx-shell--recolhido .mk-rail-busca kbd { display: none; }
.mk-nav-sub { margin: 10px 4px 3px 12px; color: #6f8993; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.nx-nav-grupo__itens .mk-nav-sub:first-of-type { margin-top: 4px; }
.nx-shell--recolhido .mk-nav-sub { display: none; }
.nx-nav-grupo__itens .nx-nav-item { padding-top: 7px; padding-bottom: 7px; }
.nx-nav-grupo__cabecalho .nx-nav-grupo__seta { margin-left: 2px; }

/* abaixo de 1024 o Nexus recolhe o menu sozinho (sem a classe): a busca fica so com o icone */
@media (max-width: 1023px) {
    .mk-rail-busca { justify-content: center; margin: 4px 8px 8px; padding: 9px 0; }
    .mk-rail-busca span, .mk-rail-busca kbd { display: none; }
    .nx-nav-grupo__itens .nx-nav-item .mk-nav-def { display: inline-flex; }
}

/* item do menu ainda em construcao (casca.js, EM_BREVE) */
.nx-nav-item.mk-em-breve { cursor: default; opacity: 0.45; }
.nx-nav-item.mk-em-breve:hover { background: none; }
.mk-em-breve__rotulo { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
/* Menu da definicao (casca.js): a tela que ja tem pagina de definicao leva a marca de "decidido" no item. A classe
   so e emitida quando versao === 'definicao', por isso nao precisa (nem alcanca) o prefixo
   .mk-comparar--definicao + .nx-corpo: a faixa e irma do corpo, nao do rail. */
.mk-nav-def { margin-left: auto; display: inline-flex; align-items: center; color: var(--nx-ok); }
.mk-nav-def .pi { font-size: 11px; }
/* "Voltar" da definicao (Fatia 20): a classe e emitida so pelo ramo `versao === 'definicao'` da casca.js, e por isso
   nenhuma regra daqui alcanca a proposta nem a versao do sistema. Fica na trilha, antes do grupo. Nao reusa
   .nx-migalhas__link nem <b>: a classe e escondida abaixo de 1100px e o <b> tem max-width na trilha
   (comum/casca.css:657-668 e :358-365). O seletor com .nx-migalhas tem especificidade 0,2,0, acima do
   `.nx-migalhas a` (0,1,1) que define flex. Usa --mk-borda (mock.css:16); a variavel antiga de fio nao existe. */
.nx-migalhas .mk-def-voltar { display: inline-flex; flex: 0 0 auto; gap: 5px; align-items: center; max-width: 240px; height: 24px; padding: 0 9px 0 7px; border: var(--mk-borda); border-radius: 999px; background: var(--nx-surface-2); color: var(--nx-ink-2); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.nx-migalhas .mk-def-voltar:hover { border-color: var(--nx-teal-500); color: var(--nx-teal-600); }
.nx-migalhas .mk-def-voltar:focus-visible { outline: 2px solid var(--nx-teal-500); outline-offset: 2px; }
.nx-migalhas .mk-def-voltar .pi { font-size: 11px; }
.nx-migalhas .mk-def-voltar__tela { min-width: 0; overflow: hidden; color: var(--nx-ink-3); font-weight: 500; text-overflow: ellipsis; }
@media (max-width: 760px) { .nx-migalhas .mk-def-voltar__tela { display: none; } }
/* Rail recolhida: comum/casca.css:108 esconde os <span> do item e a marca vai com eles, o que e o que se quer. Mas
   no menu flutuante do grupo o Nexus devolve os <span> como `block` (comum/casca.css:101, especificidade 0,3,1):
   sem esta regra a marca quebraria a linha do item e perderia o margin-left: auto. 0,4,0 ganha de 0,3,1. */
.nx-shell--recolhido .nx-nav-grupo__itens .nx-nav-item .mk-nav-def { display: inline-flex; }

/* Painel da OS da definicao (painel/painel-definicao.js): a aba "Equipe e entregas" fica na barra para todos e so
   abre para coordenador — "deixa aqui, so que ele so abre se o cara for (...) gestor do setor" [00:41:18]. A classe
   so e emitida pela pagina da definicao, por isso nao precisa do prefixo .mk-comparar--definicao + .nx-corpo.
   .nx-tab.mk-aba-restrita e (0,2,0): empata com .nx-tab:hover de comum/nexus.css:1003 e ganha pela ordem dos <link>
   (o mock.css vem depois do nexus.css em toda pagina do mock). A regra do :hover esta escrita para nao depender
   so do empate. */
.nx-tab.mk-aba-restrita { color: var(--nx-ink-4); cursor: not-allowed; }
.nx-tab.mk-aba-restrita:hover { color: var(--nx-ink-4); }
.nx-tab.mk-aba-restrita .pi-lock { font-size: 10.5px; }

/* unidade ao lado do numero grande (graficos.js, stat) */
.nx-stat__value small { color: var(--nx-ink-2); font-size: 13px; font-weight: 600; letter-spacing: 0; }

/* Decisoes (so para quem decide): botao do topo com o contador e o painel mais largo */
.mk-contador { min-width: 18px; margin-left: 2px; padding: 0 5px; border-radius: 999px; background: var(--nx-warn); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center; }
.mk-contador[hidden] { display: none; }
.mk-contador--info { background: var(--nx-info); }
.mk-lateral--largo { width: 460px; }
.mk-com-lateral-largo .nx-conteudo-shell { padding-right: 460px; }
.dc-corpo { gap: 10px; }
/* Proposta x GEO3X hoje (comparar.js): faixa entre o topo e o corpo com a chave das versoes, numeros sobre as areas
   que mudam (camada dentro do corpo) e o painel de diferencas. Cor da diferenca: o ambar de aviso (--nx-warn). */
.mk-comparar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 8px 26px; border-bottom: 1px solid var(--nx-warn-bd); background: var(--nx-warn-bg); }
/* A definicao e o resultado: a faixa fica na cor de "decidido". */
.mk-comparar--definicao { border-bottom-color: var(--nx-ok-bd); background: var(--nx-ok-bg); }
.mk-comparar__chave { flex: 0 0 auto; background: var(--nx-surface); }
.mk-comparar__chave .pi { font-size: 11px; }
.mk-comparar__chave .nx-segmented__item:disabled { color: var(--nx-ink-4); cursor: not-allowed; }
.mk-comparar__texto { flex: 1 1 260px; min-width: 0; margin: 0; color: var(--nx-ink-2); font-size: 12.5px; line-height: 1.4; }
.mk-comparar__texto b { color: var(--nx-ink); font-weight: 650; }
.mk-comparar__ver, .mk-comparar__numeros { flex: 0 0 auto; }
.mk-sem-numeros .mk-pinos > .mk-pino { display: none; }
.mk-comparar__curto { display: none; }
.mk-comparar-corpo { position: relative; }
.mk-difs__grupo { margin: 18px 0 0; font-size: 13.4px; }
.mk-difs__segue { margin: 10px 0 0; color: var(--nx-ink-2); font-size: 11.6px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; }
.mk-pinos { position: absolute; top: 0; left: 0; z-index: 4; width: 0; height: 0; }
.mk-pino { position: absolute; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid var(--nx-surface); border-radius: 999px; background: var(--nx-warn); color: var(--nx-surface); font: 800 10.5px/1 var(--nx-ff); font-variant-numeric: tabular-nums; cursor: pointer; box-shadow: var(--mk-sombra-1); transition: transform var(--mk-rapido) var(--mk-ease); }
.mk-pino:hover, .mk-pino:focus-visible { transform: scale(1.15); }
.mk-pino:focus-visible { outline: 3px solid color-mix(in srgb, var(--nx-warn) 40%, transparent); outline-offset: 1px; }
.mk-pino--fixo { position: static; flex: 0 0 auto; cursor: default; }
.mk-pino--fixo:hover { transform: none; }
.mk-pino-foco { position: absolute; border: 2px solid var(--nx-warn); border-radius: 12px; background: color-mix(in srgb, var(--nx-warn) 8%, transparent); pointer-events: none; animation: mk-pino-foco 1.8s var(--mk-ease) both; }
@keyframes mk-pino-foco { 0% { opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
/* Diferenca de um numero dentro da gaveta (que cobre o painel): num balao abaixo do numero. */
/* Na gaveta os numeros ficam acima do indice grudado do formulario; com o balao aberto, acima de tudo. */
.mk-gaveta__corpo > .mk-pinos, .pe-gaveta__corpo > .mk-pinos, .pg-dlg > .mk-pinos { z-index: 7; }
.mk-pinos:has(.mk-pino-balao) { z-index: 30; }
.mk-pino-balao { position: absolute; z-index: 1; display: grid; gap: 8px; padding: 10px 12px 12px; border: 1px solid color-mix(in srgb, var(--nx-warn) 45%, var(--nx-line)); border-radius: var(--nx-r-m); background: var(--nx-surface); box-shadow: var(--mk-sombra-3); }
.mk-pino-balao .mk-dif__cabeca { align-items: center; }
.mk-pino-balao .mk-dif__cabeca b { flex: 1; }
.mk-pino-balao .nx-icon-btn { width: 26px; height: 26px; }
.mk-difs > p { color: var(--nx-ink-2); line-height: 1.5; }
.mk-dif { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--nx-line); border-radius: var(--nx-r-m); background: var(--nx-surface); scroll-margin: 12px; }
.mk-dif--foco { border-color: var(--nx-warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-warn) 22%, transparent); }
.mk-dif__cabeca { display: flex; gap: 9px; align-items: flex-start; }
.mk-dif__cabeca b { color: var(--nx-ink); font-size: 12.8px; line-height: 1.35; }
.mk-dif__lado { padding: 7px 10px; border-left: 3px solid var(--nx-line); border-radius: 0 6px 6px 0; background: var(--nx-surface-2); }
.mk-dif__lado--proposta { border-left-color: var(--nx-teal-500); }
.mk-dif__lado--sistema { border-left-color: var(--nx-nv-grafico); }
.mk-dif__lado span { display: flex; gap: 6px; align-items: baseline; color: var(--nx-ink-3); font-size: 10.5px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.mk-dif__lado small { color: var(--nx-info); font-size: 10px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.mk-dif__lado p { margin: 3px 0 0; color: var(--nx-ink-2); font-size: 12.4px; line-height: 1.45; }
.mk-dif__lado--atual { background: color-mix(in srgb, var(--nx-teal-500) 7%, var(--nx-surface)); }
.mk-dif__pe { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; justify-content: space-between; }
.mk-dif__fora { color: var(--nx-ink-3); font-size: 11.6px; }
.mk-dif__decisao { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
/* "O que ficou definido" (so na definicao): decidido em verde, em aberto em amarelo */
.mk-def__n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-family: var(--nx-fm); font-size: 10.5px; font-weight: 750; }
.mk-def__n--ok { background: var(--nx-ok-bg); color: var(--nx-ok); }
.mk-def__n--aberto { background: var(--nx-warn-bg); color: var(--nx-warn); }
.mk-comparar__ver .mk-def__n { margin-left: 4px; }
.mk-def__grupo { display: flex; gap: 8px; align-items: center; margin: 14px 0 8px; font-size: 13.4px; }
.mk-def__grupo:first-child { margin-top: 0; }
.mk-def__lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mk-def__item { padding: 8px 10px; border-left: 3px solid var(--nx-line); border-radius: 0 6px 6px 0; background: var(--nx-surface-2); }
.mk-def__item--ok { border-left-color: var(--nx-ok); background: var(--nx-ok-bg); }
.mk-def__item--aberto { border-left-color: var(--nx-warn); background: var(--nx-warn-bg); }
.mk-def__item p { margin: 0; color: var(--nx-ink); font-size: 12.4px; line-height: 1.45; }
.mk-def__item small { display: block; margin-top: 3px; color: var(--nx-ink-3); font-size: 10.8px; }
/* Acesso na Definicao (pessoas/acesso-definicao.js, a unica que emite mk-def-acesso__) */
.mk-def-acesso__caps { display: grid; gap: 10px; }
.mk-def-acesso__cap { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; color: var(--nx-ink-3); }
.mk-def-acesso__cap .pi { margin-top: 2px; }
.mk-def-acesso__cap strong { display: block; color: var(--nx-ink-2); font-size: 12.8px; }
.mk-def-acesso__cap small { display: block; font-size: 11.5px; line-height: 1.45; }
.mk-def-acesso__cap--sim .pi { color: var(--nx-ok); }
.mk-def-acesso__cap--sim strong { color: var(--nx-ink); }
.mk-def-acesso__novo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mk-def-acesso__novo .nx-select { width: auto; max-width: 100%; min-height: 32px; font-size: 12.5px; }
.mk-def-acesso__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mk-def-acesso__chips a { text-decoration: none; }
@media (max-width: 767px) {
    .mk-comparar { padding: 8px 12px; }
    .mk-comparar__chave { display: flex; flex: 1 1 100%; }
    .mk-comparar__chave .nx-segmented__item { flex: 1 1 0; justify-content: center; }
    .mk-comparar__longo { display: none; }
    .mk-comparar__curto { display: inline; }
    .mk-comparar__texto { display: none; }
    .mk-comparar__ver { flex: 1 1 100%; justify-content: center; }
}
.dc-resumo, .dc-andamento { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-barra { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.dc-lote-botao { justify-self: start; }
.dc-lote { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--nx-warn-bd); border-radius: var(--nx-r-m); background: var(--nx-warn-bg); }
.dc-lote p { margin: 0; color: var(--nx-ink-2); }
.dc-grupo { display: grid; gap: 6px; }
.dc-grupo h3 { margin: 6px 0 0; color: var(--nx-teal-600); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.dc-secao { margin: 6px 0 0 !important; color: var(--nx-ink) !important; font-size: 12px; font-weight: 700; }
.dc-ponto { border: 1px solid var(--nx-line); border-radius: var(--nx-r-m); background: var(--nx-surface); }
.dc-ponto--aberto { border-color: var(--nx-teal-500); box-shadow: var(--nx-shadow-1); }
.dc-ponto__cabeca { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; width: 100%; padding: 9px 10px; border: 0; background: none; color: var(--nx-ink); font: inherit; font-size: 12.4px; line-height: 1.45; text-align: left; cursor: pointer; }
.dc-ponto__cabeca .nx-tag { align-self: start; white-space: nowrap; }
.dc-ponto__cabeca small { grid-column: 2; color: var(--nx-ink-4); font-family: var(--nx-fm); font-size: 10px; }
.dc-ponto__corpo { display: grid; gap: 10px; padding: 0 10px 12px; }
.dc-ponto__corpo p { margin: 0; line-height: 1.5; }
.dc-ponto code, .dc-fontes code { padding: 0 4px; border-radius: 4px; background: var(--nx-surface-3); font-family: var(--nx-fm); font-size: 10.8px; word-break: break-all; }
.dc-fontes { display: flex; flex-wrap: wrap; gap: 4px; }
.dc-decisao { display: grid; gap: 4px; padding: 10px 12px; border-left: 3px solid var(--nx-ok); border-radius: 8px; background: var(--nx-ok-bg); }
.dc-decisao span { color: var(--nx-ink-3); font-size: 11px; }
.dc-historico { display: grid; gap: 8px; margin: 0; padding-left: 16px; color: var(--nx-ink-2); font-size: 12px; }
.dc-historico small { color: var(--nx-ink-4); font-size: 10.5px; }
.dc-historico p { margin: 2px 0 0; color: var(--nx-ink); white-space: pre-wrap; }
.dc-escolhas { flex-wrap: wrap; }
.dc-acoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.dc-vazio { color: var(--nx-ink-3) !important; font-size: 12px; }

/* ---------- refino de uso: transicoes, foco, numeros e rolagem (vale para todas as telas) ---------- */
.nx-btn, .nx-icon-btn, .nx-nav-item, .nx-nav-grupo__cabecalho, .nx-tab, .nx-segmented__item, .nx-chip, .nx-input, .nx-select, .nx-textarea { transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s; }
.nx-btn:focus-visible, .nx-icon-btn:focus-visible, .nx-tab:focus-visible, .nx-segmented__item:focus-visible, a.nx-nav-item:focus-visible, .mk-rail-busca:focus-visible, .nx-tabela tbody tr.nx-tabela__linha:focus-visible, .nx-topbar__icone:focus-visible { outline: 2px solid var(--nx-teal-500); outline-offset: 2px; }
.nx-btn:active:not(:disabled) { transform: translateY(1px); }
.nx-stat__value, .nx-tabela td, .mk-tile__valor { font-variant-numeric: tabular-nums; }
.nx-rail__rolagem { scrollbar-width: thin; scrollbar-color: var(--nx-navy-700) transparent; }
.nx-tabela__rolagem, .mk-lateral__corpo { scrollbar-width: thin; scrollbar-color: var(--nx-line-2) transparent; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* esqueleto enquanto a tela carrega os dados (o #app chega vazio e o modulo da tela desenha depois) */
@keyframes mk-brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }
#app:empty::before, #app:empty::after { display: block; border-radius: var(--nx-r-m); background: linear-gradient(90deg, var(--nx-surface-3) 25%, var(--nx-surface-2) 50%, var(--nx-surface-3) 75%); background-size: 200% 100%; animation: mk-brilho 1.3s linear infinite; content: ""; }
#app:empty::before { width: min(420px, 60%); height: 46px; margin-bottom: 18px; }
#app:empty::after { height: min(62vh, 560px); border-radius: var(--nx-r-l); opacity: 0.8; }

/* ==========================================================================================================
   Componentes de tela (componentes.js). Cabecalho, faixa de indicadores, etapa e trilha do BPMN, campo herdado,
   caixa de entrada da esteira. Mesma linguagem do modulo de Custas (cc-topo, cc-faixa).
   ========================================================================================================== */
.mk-topo { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; justify-content: space-between; margin-bottom: 4px; }
.mk-topo__titulo { min-width: 0; }
.mk-topo__sob { display: inline-flex; gap: 6px; align-items: center; color: var(--nx-teal-600); font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.mk-topo__sob .pi { font-size: 11px; }
.mk-topo h1 { margin: 3px 0 2px; font-size: 25px; font-weight: 680; letter-spacing: -0.6px; line-height: 1.15; }
.mk-topo p { max-width: 90ch; margin: 0; color: var(--nx-ink-2); font-size: 12.8px; line-height: 1.5; }
.mk-topo__etapas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.mk-topo__acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.mk-faixa { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--nx-line); border-radius: var(--nx-r-l); background: var(--nx-line); box-shadow: var(--mk-sombra-1); }
.mk-faixa--colunas { grid-template-columns: repeat(var(--mk-faixa-colunas, 4), minmax(0, 1fr)); }
@media (max-width: 1100px) { .mk-faixa--colunas { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.mk-faixa__item { position: relative; display: grid; gap: 3px; align-content: start; min-width: 0; padding: 11px 16px; border: 0; background: var(--nx-surface); color: var(--nx-ink); font: inherit; text-align: left; text-decoration: none; }
a.mk-faixa__item, button.mk-faixa__item { cursor: pointer; transition: background-color var(--mk-rapido); }
a.mk-faixa__item:hover, button.mk-faixa__item:hover { background: var(--nx-surface-2); }
.mk-faixa__item--ativo { background: var(--nx-info-bg); box-shadow: inset 0 -2px 0 var(--nx-teal-600); }
.mk-faixa__rot { color: var(--nx-ink-3); font-size: 9.8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.mk-faixa__rot::before { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--mk-tom, var(--nx-line-3)); vertical-align: 1px; content: ""; }
.mk-faixa__valor { overflow: hidden; font-size: 22px; font-weight: 680; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.mk-faixa__valor small { margin-left: 3px; color: var(--nx-ink-3); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.mk-faixa__item > small { overflow: hidden; color: var(--nx-ink-3); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.mk-faixa__trilho { display: block; margin-top: 4px; }
.mk-faixa__trilho .mk-barra { height: 5px; }
/* variante escura: a mesma faixa como hero de uma visao geral */
/* faixa como filtros (reuniao de 10/10/2026): chips de rotulo e contagem na linha de busca, sem numeros grandes */
.mk-faixa--filtros { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
.mk-faixa--filtros .mk-faixa__item { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--nx-line); border-radius: 999px; background: var(--nx-surface); white-space: nowrap; }
.mk-faixa--filtros .mk-faixa__item:hover { border-color: var(--nx-line-2); background: var(--nx-surface-2); }
.mk-faixa--filtros .mk-faixa__rot { color: var(--nx-ink-2); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.mk-faixa--filtros .mk-faixa__valor { min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--nx-surface-2); color: var(--nx-ink-2); font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-align: center; }
.mk-faixa--filtros .mk-faixa__item--ativo { border-color: color-mix(in srgb, var(--nx-teal-600) 55%, var(--nx-line)); background: var(--nx-info-bg); box-shadow: none; }
.mk-faixa--filtros .mk-faixa__item--ativo .mk-faixa__rot { color: var(--nx-ink); }
.mk-faixa--filtros .mk-faixa__item--ativo .mk-faixa__valor { background: color-mix(in srgb, var(--nx-teal-500) 22%, var(--nx-surface)); color: var(--nx-ink); }
.mk-faixa--filtros .mk-tom--crit .mk-faixa__valor { color: var(--nx-crit); }
/* voltar para a tela de onde veio (reuniao de 10/10/2026) */
.mk-voltar { flex: none; max-width: 240px; margin-right: 6px; }
.mk-voltar[hidden] { display: none; }
.mk-voltar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-faixa--hero { position: relative; isolation: isolate; border-color: color-mix(in srgb, var(--nx-navy-700) 70%, transparent); background: rgba(255, 255, 255, 0.1); box-shadow: var(--mk-sombra-hero); }
.mk-faixa--hero::before { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--nx-teal-500) 30%, transparent), transparent 55%), linear-gradient(135deg, var(--nx-navy-950), var(--nx-navy-800) 60%, var(--nx-teal-800)); content: ""; }
.mk-faixa--hero::after { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 28px 28px; content: ""; pointer-events: none; }
.mk-faixa--hero .mk-faixa__item { background: color-mix(in srgb, var(--nx-navy-900) 55%, transparent); color: #eef6f7; }
.mk-faixa--hero a.mk-faixa__item:hover, .mk-faixa--hero button.mk-faixa__item:hover { background: color-mix(in srgb, var(--nx-navy-800) 70%, transparent); }
.mk-faixa--hero .mk-faixa__item--ativo { background: color-mix(in srgb, var(--nx-teal-700) 45%, transparent); box-shadow: inset 0 -2px 0 var(--nx-teal-300); }
.mk-faixa--hero .mk-faixa__rot { color: #93aeb8; }
.mk-faixa--hero .mk-faixa__item > small, .mk-faixa--hero .mk-faixa__valor small { color: #a9c1ca; }
.mk-faixa--hero .mk-tom--ok { --mk-tom: #5fd3a1; }
.mk-faixa--hero .mk-tom--warn { --mk-tom: #f3c26b; }
.mk-faixa--hero .mk-tom--crit { --mk-tom: #ff9a8a; }
.mk-faixa--hero .mk-tom--crit .mk-faixa__valor { color: #ff9a8a; }
.mk-faixa--hero .mk-tom--warn .mk-faixa__valor { color: #f3c26b; }
.mk-faixa--hero .mk-tom--info { --mk-tom: var(--nx-teal-300); }
.mk-tom--ok { --mk-tom: var(--nx-ok); }
.mk-tom--warn { --mk-tom: var(--nx-warn); }
.mk-tom--crit { --mk-tom: var(--nx-crit); }
.mk-tom--crit .mk-faixa__valor { color: var(--nx-crit); }
.mk-tom--info { --mk-tom: var(--nx-teal-500); }

.mk-etapa { display: inline-flex; align-items: center; padding: 1px 7px; border: 1px solid color-mix(in srgb, var(--nx-teal-500) 35%, var(--nx-line)); border-radius: 6px; background: color-mix(in srgb, var(--nx-teal-500) 8%, var(--nx-surface)); color: var(--nx-teal-700); font-family: var(--nx-fm); font-size: 10.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color 0.15s, background-color 0.15s; }
.mk-etapa:hover { border-color: var(--nx-teal-500); background: var(--nx-info-bg); }
.mk-etapa--decisao { border-color: color-mix(in srgb, var(--nx-warn) 45%, var(--nx-line)); background: var(--nx-warn-bg); color: var(--nx-warn); }

.mk-trilha { display: flex; gap: 0; margin: 0; padding: 0; overflow-x: auto; list-style: none; counter-reset: trilha; scrollbar-width: thin; }
.mk-trilha li { position: relative; flex: 1 0 104px; min-width: 0; }
.mk-trilha li::before { position: absolute; top: 11px; right: 50%; left: -50%; height: 2px; background: var(--nx-line); content: ""; }
.mk-trilha li:first-child::before { display: none; }
.mk-trilha a { position: relative; z-index: 1; display: grid; gap: 4px; justify-items: center; padding: 0 4px; color: var(--nx-ink-3); font-size: 10.8px; line-height: 1.25; text-align: center; text-decoration: none; }
.mk-trilha b { display: grid; min-width: 24px; height: 24px; padding: 0 5px; border: 2px solid var(--nx-line-2); border-radius: 999px; background: var(--nx-surface); color: var(--nx-ink-3); font-family: var(--nx-fm); font-size: 9.6px; place-items: center; box-sizing: border-box; }
.mk-trilha span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mk-trilha--feita::before, .mk-trilha--atual::before { background: var(--nx-teal-500) !important; }
.mk-trilha--feita b { border-color: var(--nx-teal-500); background: var(--nx-teal-500); color: #fff; }
.mk-trilha--atual b { border-color: var(--nx-teal-600); background: var(--nx-surface); color: var(--nx-teal-700); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nx-teal-500) 22%, transparent); }
.mk-trilha--atual a { color: var(--nx-ink); font-weight: 650; }
.mk-trilha--compacta li { flex-basis: 40px; }

.mk-herdado { display: grid; gap: 2px; padding: 8px 10px; border: 1px dashed var(--nx-line-2); border-radius: var(--nx-r-s); background: var(--nx-surface-2); }
.mk-herdado span { color: var(--nx-ink-3); font-size: 11px; }
.mk-herdado b { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mk-herdado small { display: inline-flex; gap: 4px; align-items: center; color: var(--nx-teal-600); font-size: 10.5px; }
.mk-herdado small .pi { font-size: 9.5px; }

.mk-caixa { display: grid; gap: 8px; padding: 12px; border: 1px solid color-mix(in srgb, var(--nx-teal-500) 35%, var(--nx-line)); border-radius: var(--nx-r-l); background: linear-gradient(180deg, color-mix(in srgb, var(--nx-teal-500) 7%, var(--nx-surface)), var(--nx-surface)); }
.mk-caixa > header { display: flex; gap: 10px; align-items: center; padding: 2px 4px; }
.mk-caixa > header b { font-size: 13.5px; }
.mk-caixa > header small { color: var(--nx-ink-3); font-size: 12px; }
.mk-caixa__pulso { width: 9px; height: 9px; border-radius: 50%; background: var(--nx-teal-500); box-shadow: 0 0 0 0 color-mix(in srgb, var(--nx-teal-500) 50%, transparent); animation: mk-pulso 1.8s ease-out infinite; }
@keyframes mk-pulso { to { box-shadow: 0 0 0 9px transparent; } }
.mk-caixa--vazia { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-style: dashed; border-color: var(--nx-line-2); background: var(--nx-surface-2); color: var(--nx-ink-3); font-size: 12.5px; }
.mk-entrada { display: grid; grid-template-columns: minmax(150px, max-content) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--nx-line); border-radius: var(--nx-r-m); background: var(--nx-surface); box-shadow: var(--nx-shadow-1); }
@media (max-width: 900px) { .mk-entrada { grid-template-columns: minmax(0, 1fr); } }
.mk-entrada__setores { display: flex; gap: 6px; align-items: center; white-space: nowrap; color: var(--nx-ink-2); font-size: 11.5px; font-weight: 700; }
.mk-entrada__setores .pi { color: var(--nx-teal-500); font-size: 10px; }
.mk-entrada__corpo { display: grid; gap: 3px; min-width: 0; }
.mk-entrada__corpo b { font-size: 13.5px; }
.mk-entrada__corpo p { margin: 0; color: var(--nx-ink-2); font-size: 12.3px; }
.mk-entrada__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 3px; color: var(--nx-ink-3); font-size: 11.5px; }
.mk-entrada__meta > .pi { font-size: 10px; }
.mk-entrada__quem { display: inline-flex; gap: 6px; align-items: center; }
.mk-entrada__imoveis { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.mk-entrada__imoveis code { padding: 0 5px; border: 1px solid var(--nx-line-2); border-radius: 4px; background: var(--nx-surface-2); font-family: var(--nx-fm); font-size: 10.5px; }
.mk-entrada__acoes { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.mk-entrada__motivo { display: flex; gap: 6px; align-items: center; color: var(--nx-crit) !important; }
.mk-entrada__devolver { display: flex; grid-column: 1 / -1; gap: 8px; }
.mk-entrada__devolver .nx-input { flex: 1; }
.mk-entrada--aceita { box-shadow: none; opacity: 0.86; }

.mk-vazio .pi { color: var(--nx-teal-500); }
.mk-secao-card .nx-card__header h2 { font-size: 14.5px; }

/* topo da casca: caixa de entrada da esteira e quem esta usando */
.mk-sino { position: relative; }
.mk-sino .mk-contador { position: absolute; top: -5px; right: -5px; margin: 0; }
.mk-quem { display: flex; flex: 1; gap: 10px; align-items: center; min-width: 0; padding: 4px; border: 1px solid transparent; border-radius: var(--nx-r-s); color: inherit; cursor: pointer; position: relative; transition: border-color 0.15s, background-color 0.15s; }
.mk-quem:hover { border-color: var(--nx-navy-700); background: var(--nx-navy-800); }
.mk-quem select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.mk-quem .pi { margin-left: auto; color: #8da9b2; font-size: 11px; }
.nx-shell--recolhido .mk-quem .nx-usuario-resumo, .nx-shell--recolhido .mk-quem .pi { display: none; }

/* topo da casca: rotulos longos so em tela larga, para os botoes nao transbordarem em 1280 */
.mk-so-estreito { display: none; }
@media (max-width: 1500px) { .mk-so-largo { display: none; } .mk-so-estreito { display: inline; } }
.nx-topbar__acoes { flex-wrap: nowrap; min-width: 0; }
@media (max-width: 1180px) {
    .mk-paleta-botao { font-size: 0; gap: 0; }
    .mk-paleta-botao .pi { font-size: 13px; }
    .mk-paleta-botao kbd { display: none; }
    [data-acao="copiloto"], [data-acao="decisoes"] { font-size: 0; gap: 0; }
    [data-acao="copiloto"] .pi, [data-acao="decisoes"] .pi { font-size: 13px; }
    [data-acao="decisoes"] .mk-contador { font-size: 10.5px; }
    .mk-os-atual > span { display: none; }
    .mk-os-atual .nx-select { max-width: 200px; }
}
/* celular: a trilha numa linha e as acoes na de baixo, so com icones; o que nao couber rola de lado no proprio topo */
@media (max-width: 767px) {
    .nx-topbar { flex-wrap: wrap; row-gap: 6px; padding-block: 8px; }
    .nx-topbar .nx-migalhas { flex: 1 1 100%; min-width: 0; }
    .nx-topbar__acoes { flex: 1 1 100%; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
    .nx-topbar__acoes::-webkit-scrollbar { display: none; }
    .nx-topbar__acoes > * { flex: 0 0 auto; }
    .nx-topbar__acoes > .nx-tag { display: none; }
    [data-acao="restaurar"] span { display: none; }
    .mk-os-atual .nx-select { max-width: 150px; }
    .mk-tema { margin-left: auto; }
}

/* ==========================================================================================================
   Kit visual (componentes.js): gaveta generica, avatar e pilha, anel, sparkline, selo, kpi e hero, barra, lista.
   ========================================================================================================== */
/* gaveta lateral: gaveta({sob, titulo, sub, corpo, pe, largura}) */
.mk-cortina { position: fixed; inset: 0; z-index: 44; background: rgba(8, 20, 30, 0.34); opacity: 0; pointer-events: none; transition: opacity var(--mk-lento) ease; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.mk-cortina--on { opacity: 1; pointer-events: auto; }
.mk-gaveta { position: fixed; top: 0; right: 0; bottom: 0; z-index: 45; display: flex; flex-direction: column; width: min(var(--mk-gaveta-largura, 560px), 100vw); border-left: 1px solid var(--nx-line); background: var(--nx-surface); box-shadow: var(--mk-sombra-3); opacity: 0; transform: translateX(32px); visibility: hidden; transition: transform var(--mk-lento) var(--mk-ease), opacity var(--mk-lento) ease, visibility 0s var(--mk-lento); }
.mk-gaveta--on { opacity: 1; transform: none; visibility: visible; transition: transform var(--mk-lento) var(--mk-ease), opacity var(--mk-rapido) ease; }
.mk-gaveta__cabeca { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--nx-line); }
.mk-gaveta__cabeca > div:first-child { min-width: 0; flex: 1; }
.mk-gaveta__sob { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--nx-teal-600); font-size: 10.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.mk-gaveta__cabeca h2 { margin: 3px 0 0; font-size: 18px; font-weight: 680; letter-spacing: -0.3px; line-height: 1.25; }
.mk-gaveta__cabeca p { margin: 4px 0 0; color: var(--nx-ink-2); font-size: 12.5px; line-height: 1.5; }
.mk-gaveta__extra { display: flex; flex: 0 0 auto; gap: 6px; align-items: center; }
.mk-gaveta__corpo { display: flex; flex: 1; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; padding: 16px 20px 20px; }
.mk-gaveta__corpo > * { flex-shrink: 0; min-width: 0; }
.mk-gaveta__corpo h3:not(.mk-secao__titulo) { margin: 0 0 8px; color: var(--nx-ink-3); font-size: 10px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.mk-gaveta__corpo .nx-form-grid { padding: 0; }
.mk-gaveta .nx-input, .mk-gaveta .nx-select, .mk-gaveta .nx-textarea { box-sizing: border-box; width: 100%; }
.mk-gaveta__pe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--nx-line); background: var(--nx-surface-2); }
.mk-gaveta__pe .mk-gaveta__esq, .mk-gaveta__pe .gv-esq, .mk-gaveta__pe .pe-pe-esq { margin-right: auto; }
body:has(.mk-gaveta--on) .mk-toast { z-index: 60; }
/* dialogo aberto de dentro de uma gaveta fica por cima dela */
body:has(.mk-gaveta--on) .mk-fundo { z-index: 55; }
/* as gavetas antigas dos modulos (cc-, es-, gv-, pe-, ms-, av-, dm-, cd-) ficam com a mesma superficie e o mesmo movimento */
body :is(.cc-gaveta, .es-gaveta, .gv-gaveta, .pe-gaveta, .ms-gaveta, .av-gaveta, .dm-gaveta, .cd-gaveta) { border-left: 1px solid var(--nx-line); box-shadow: var(--mk-sombra-3); transition: transform var(--mk-lento) var(--mk-ease), opacity var(--mk-lento) ease, visibility 0s var(--mk-lento); }
body :is(.cc-gaveta--on, .es-gaveta--on, .gv-gaveta--on, .pe-gaveta--on, .ms-gaveta--on, .av-gaveta--on, .dm-gaveta--on) { transition: transform var(--mk-lento) var(--mk-ease), opacity var(--mk-rapido) ease; }
body :is(.cc-cortina, .es-cortina, .gv-cortina, .pe-cortina, .ms-cortina, .av-cortina, .dm-cortina) { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
body :is(.cc-cortina--on, .ms-cortina--on, .av-cortina--on) { animation: mk-surge var(--mk-lento) ease; }
body :is(.cc-gaveta__sob, .es-gaveta__sob, .gv-gaveta__sob, .pe-gaveta__sob, .ms-gaveta__sob, .av-gaveta__sob, .dm-gaveta__sob) { font-family: var(--nx-ff); font-size: 10.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }

/* avatar: avatar(nome, {cor, tamanho}) e pilhaDeAvatares(ids) */
.mk-avatar { display: inline-grid; flex: 0 0 auto; width: var(--mk-av-tam, 30px); height: var(--mk-av-tam, 30px); border-radius: calc(var(--mk-av-tam, 30px) * 0.3); background: linear-gradient(135deg, color-mix(in srgb, var(--mk-av-cor, var(--nx-teal-500)) 85%, #fff), color-mix(in srgb, var(--mk-av-cor, var(--nx-teal-500)) 75%, #000)); color: #fff; font-size: calc(var(--mk-av-tam, 30px) * 0.36); font-weight: 700; letter-spacing: 0.02em; place-items: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); user-select: none; }
.mk-avatar--redondo { border-radius: 50%; }
.mk-avatar--inativo { filter: grayscale(1); opacity: 0.55; }
.mk-avatares { display: inline-flex; align-items: center; }
.mk-avatares .mk-avatar { border-radius: 50%; box-shadow: 0 0 0 2px var(--nx-surface); }
.mk-avatares .mk-avatar + .mk-avatar, .mk-avatares .mk-avatares__mais { margin-left: calc(var(--mk-av-tam, 26px) * -0.16); }
.mk-avatares__mais { display: grid; width: var(--mk-av-tam, 26px); height: var(--mk-av-tam, 26px); border-radius: 50%; background: var(--nx-surface-3); color: var(--nx-ink-2); font-size: calc(var(--mk-av-tam, 26px) * 0.36); font-weight: 700; place-items: center; box-shadow: 0 0 0 2px var(--nx-surface); }

/* anel de progresso e sparkline (SVG) */
.mk-anel { display: inline-grid; flex: 0 0 auto; place-items: center; }
.mk-anel svg { display: block; }
.mk-anel__fundo { fill: none; stroke: var(--nx-surface-3); }
.mk-anel__arco { fill: none; stroke: var(--mk-cor, var(--nx-teal-500)); stroke-linecap: round; transition: stroke-dashoffset 600ms var(--mk-ease); }
.mk-anel__valor { fill: var(--nx-ink); font-family: var(--nx-ff); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-anel--rotulo { grid-auto-flow: column; gap: 10px; }
.mk-anel--rotulo > span { display: grid; gap: 1px; text-align: left; }
.mk-anel--rotulo > span b { font-size: 13px; font-weight: 650; }
.mk-anel--rotulo > span small { color: var(--nx-ink-3); font-size: 11px; }
.mk-sparkline { display: inline-block; overflow: visible; vertical-align: middle; }
.mk-sparkline__area { fill: color-mix(in srgb, var(--mk-cor, var(--nx-teal-500)) 14%, transparent); }
.mk-sparkline__linha { fill: none; stroke: var(--mk-cor, var(--nx-teal-500)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mk-sparkline__ponto { fill: var(--mk-cor, var(--nx-teal-500)); stroke: var(--nx-surface); stroke-width: 1.5; }
.mk-hero .mk-anel__fundo { stroke: rgba(255, 255, 255, 0.14); }
.mk-hero .mk-anel__valor { fill: #fff; }
.mk-hero .mk-sparkline__ponto { stroke: var(--nx-navy-900); }
:is(.mk-hero, .mk-faixa--hero) .mk-avatares :is(.mk-avatar, .mk-avatares__mais) { box-shadow: 0 0 0 2px var(--nx-navy-900); }

/* selo: selo(texto, tom) */
.mk-selo { display: inline-flex; gap: 6px; align-items: center; padding: 2px 9px 2px 7px; border: 1px solid color-mix(in srgb, var(--mk-cor, var(--nx-ink-4)) 35%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--mk-cor, var(--nx-ink-4)) 9%, var(--nx-surface)); color: var(--nx-ink); font-size: 11.2px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.mk-selo::before { width: 6px; height: 6px; border-radius: 50%; background: var(--mk-cor, var(--nx-ink-4)); content: ""; }
.mk-selo--ok { --mk-cor: var(--nx-ok); }
.mk-selo--warn { --mk-cor: var(--nx-warn); }
.mk-selo--crit { --mk-cor: var(--nx-crit); }
.mk-selo--info { --mk-cor: var(--nx-teal-500); }
.mk-selo--nv { --mk-cor: var(--nx-navy-600); }
.mk-selo--mu { --mk-cor: var(--nx-ink-4); color: var(--nx-ink-2); }

/* hero: superficie escura para o topo de telas de visao geral; kpi: numero grande dentro dela (ou claro, fora) */
.mk-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 32px; overflow: hidden; padding: 26px 28px; border-radius: var(--mk-raio-l); color: #eef6f7; isolation: isolate;
    background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--nx-teal-500) 34%, transparent), transparent 55%), linear-gradient(135deg, var(--nx-navy-950), var(--nx-navy-800) 60%, var(--nx-teal-800)); box-shadow: var(--mk-sombra-hero); }
.mk-hero::before { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(90deg, transparent, #000 45%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); content: ""; pointer-events: none; }
.mk-hero::after { position: absolute; inset: 0; z-index: -1; background-image: var(--mk-ruido); opacity: 0.05; mix-blend-mode: soft-light; content: ""; pointer-events: none; }
.mk-hero--uma { grid-template-columns: minmax(0, 1fr); }
.mk-hero--compacto { padding: 20px 24px; }
@media (max-width: 1050px) { .mk-hero { grid-template-columns: minmax(0, 1fr); } }
.mk-hero__sob { display: inline-flex; gap: 8px; align-items: center; color: var(--nx-teal-300); font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.mk-hero__sob i:not(.pi) { width: 6px; height: 6px; border-radius: 50%; background: #5fd3a1; box-shadow: 0 0 0 4px rgba(95, 211, 161, 0.18); }
.mk-hero h1 { margin: 10px 0 6px; font-size: 27px; font-weight: 680; letter-spacing: -0.6px; line-height: 1.15; }
.mk-hero--compacto h1 { margin-top: 8px; font-size: 23px; }
.mk-hero__texto { max-width: 64ch; margin: 0; color: #b9cdd5; font-size: 13.2px; line-height: 1.55; }
.mk-hero__texto b { color: #e2eef2; font-weight: 650; }
.mk-hero__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.mk-hero__chips span { padding: 3px 9px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: #d7e5ea; font-size: 11.5px; }
.mk-hero__chips b { font-family: var(--nx-fm); font-weight: 600; }
.mk-hero__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.mk-hero__acoes .nx-btn { min-height: 36px; padding: 7px 12px; border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.07); color: #fff; font-size: 12.5px; box-shadow: none; }
.mk-hero__acoes .nx-btn:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.14); }
.mk-hero__acoes .nx-btn--primary { border-color: transparent; background: var(--nx-teal-500); }
.mk-hero__acoes .nx-btn--primary:hover:not(:disabled) { background: var(--nx-teal-400); }
.mk-hero .mk-etapa { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: var(--nx-teal-300); }
.mk-hero .mk-etapa:hover { background: rgba(255, 255, 255, 0.16); }
.mk-hero .mk-selo { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); color: #e2eef2; }
.mk-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; align-self: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--mk-raio-m); background: rgba(255, 255, 255, 0.12); }
.mk-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-kpis--1 { grid-template-columns: minmax(0, 1fr); }
/* celular: hero com menos respiro e os kpis numa coluna so (em duas o numero grande nao cabe) */
@media (max-width: 560px) { .mk-hero { padding: 20px 18px; } .mk-hero h1 { font-size: 22px; } .mk-kpis--2, .mk-kpis--3 { grid-template-columns: minmax(0, 1fr); } }
.mk-kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; min-width: 0; padding: 14px 16px; background: color-mix(in srgb, var(--nx-navy-900) 82%, transparent); color: inherit; text-decoration: none; transition: background-color var(--mk-rapido); }
button.mk-kpi { border: 0; font: inherit; text-align: left; cursor: pointer; }
a.mk-kpi:hover, button.mk-kpi:hover { background: color-mix(in srgb, var(--nx-navy-800) 90%, transparent); }
.mk-kpi__rot { grid-column: 1; color: #93aeb8; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.mk-kpi__valor { grid-column: 1; overflow: hidden; font-size: 23px; font-weight: 680; letter-spacing: -0.6px; line-height: 1.1; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.mk-kpi__valor small { margin-left: 3px; color: #a9c1ca; font-size: 13px; font-weight: 600; letter-spacing: 0; }
.mk-kpi__nota { grid-column: 1; color: #a9c1ca; font-size: 11.5px; line-height: 1.35; }
.mk-kpi__extra { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.mk-kpi__barra { grid-column: 1 / -1; margin-top: 6px; }
@media (max-width: 1340px) { .mk-kpi__valor { font-size: 20px; } .mk-kpi { padding: 12px 14px; } }
.mk-kpi--crit .mk-kpi__valor { color: #f3a39c; }
.mk-kpi--warn .mk-kpi__valor { color: #f0cf8a; }
.mk-kpi--ok .mk-kpi__valor { color: #8fe0b8; }
/* kpi fora do hero: versao clara */
.mk-kpis--claro { border-color: var(--nx-line); background: var(--nx-line); box-shadow: var(--mk-sombra-1); }
.mk-kpis--claro .mk-kpi { background: var(--nx-surface); color: var(--nx-ink); }
.mk-kpis--claro a.mk-kpi:hover { background: var(--nx-surface-2); }
.mk-kpis--claro .mk-kpi__rot { color: var(--nx-ink-3); }
.mk-kpis--claro .mk-kpi__valor small, .mk-kpis--claro .mk-kpi__nota { color: var(--nx-ink-3); }
.mk-kpis--claro .mk-kpi--crit .mk-kpi__valor { color: var(--nx-crit); }
.mk-kpis--claro .mk-kpi--warn .mk-kpi__valor { color: var(--nx-warn); }
.mk-kpis--claro .mk-kpi--ok .mk-kpi__valor { color: var(--nx-ok); }

/* barra segmentada: barra([{valor, cor, rotulo}]) */
.mk-barra { display: flex; gap: 1.5px; height: 6px; overflow: hidden; border-radius: 3px; background: rgba(127, 127, 127, 0.18); }
.mk-barra i { display: block; height: 100%; min-width: 0; background: var(--mk-cor); transition: flex-basis 400ms var(--mk-ease); }
.mk-barra--grossa { height: 10px; border-radius: 5px; }

/* lista de linhas dentro de um cartao: lista(itens) — a alternativa ao grid de caixas */
.mk-lista { display: grid; margin: 0; padding: 0; list-style: none; }
.mk-lista > * { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; min-height: 54px; padding: 11px 18px; border-top: 1px solid var(--nx-line); color: var(--nx-ink); text-decoration: none; transition: background-color var(--mk-rapido); }
.mk-lista > :first-child { border-top: 0; }
.mk-lista > a:hover, .mk-lista > button:hover { background: color-mix(in srgb, var(--nx-teal-500) 5%, var(--nx-surface)); }
.mk-lista > a:hover .mk-lista__ir { color: var(--nx-teal-600); transform: translateX(2px); }
.mk-lista__icone { display: grid; grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--mk-cor, var(--nx-teal-500)) 12%, transparent); color: var(--mk-cor, var(--nx-teal-600)); font-size: 15px; place-items: center; }
.mk-lista__titulo { grid-column: 2; overflow: hidden; font-size: 13.2px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.mk-lista__texto { grid-column: 2; overflow: hidden; color: var(--nx-ink-2); font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.mk-lista__fim { display: flex; grid-column: 3; grid-row: 1 / span 2; gap: 10px; align-items: center; justify-self: end; }
.mk-lista__n { font-size: 20px; font-weight: 680; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.mk-lista__ir { color: var(--nx-ink-4); font-size: 11px; transition: color var(--mk-rapido), transform var(--mk-rapido) var(--mk-ease); }
.mk-lista--sem-icone > * { grid-template-columns: minmax(0, 1fr) auto; }
.mk-lista--sem-icone .mk-lista__titulo, .mk-lista--sem-icone .mk-lista__texto { grid-column: 1; }
.mk-lista--sem-icone .mk-lista__fim { grid-column: 2; }

/* titulo de bloco fora de cartao (Inicio, salas): tituloDeBloco(titulo, nota) */
.mk-bloco-titulo { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; margin: 8px 2px -4px; }
.mk-bloco-titulo h2 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.1px; }
.mk-bloco-titulo span { color: var(--nx-ink-3); font-size: 12px; }
.mk-bloco-titulo a { color: var(--nx-teal-600); font-size: 12px; font-weight: 650; text-decoration: none; }
.mk-bloco-titulo a:hover { text-decoration: underline; }

/* esqueleto de carregamento para blocos que chegam depois: <div class="mk-esqueleto" style="height: 120px"></div> */
.mk-esqueleto { border-radius: var(--mk-raio-m); background: linear-gradient(90deg, var(--nx-surface-3) 25%, var(--nx-surface-2) 50%, var(--nx-surface-3) 75%); background-size: 200% 100%; animation: mk-brilho 1.3s linear infinite; }

/* ==========================================================================================================
   Onda 4 (2026-10-05): tema claro/escuro e acabamento de formularios. Guia em planos/referencias/kit-visual.md.
   ========================================================================================================== */

/* ---------- troca de tema: botao no canto do topo, transicao curta de cor em tudo ---------- */
html.mk-tema-trocando, html.mk-tema-trocando *, html.mk-tema-trocando *::before, html.mk-tema-trocando *::after {
    transition: background-color 380ms var(--mk-ease), border-color 380ms var(--mk-ease), color 380ms var(--mk-ease), fill 380ms ease, stroke 380ms ease, box-shadow 380ms ease !important;
}
.mk-tema { display: inline-grid; flex: 0 0 auto; place-items: center; margin-left: 2px; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.mk-tema__trilho { position: relative; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; width: 60px; height: 30px; padding: 0 8px; border: 1px solid var(--nx-line-2); border-radius: 999px; background: linear-gradient(180deg, var(--nx-surface-3), var(--nx-surface-2)); box-shadow: inset 0 1px 2px rgba(10, 22, 31, 0.1); }
.mk-tema__trilho .pi { position: relative; z-index: 1; width: 13px; color: var(--nx-ink-4); font-size: 12px; text-align: center; transition: color var(--mk-normal), transform var(--mk-lento) var(--mk-ease); }
.mk-tema__botao { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--nx-surface); box-shadow: 0 1px 2px rgba(10, 22, 31, 0.2), 0 3px 10px -3px rgba(10, 22, 31, 0.35); transition: transform var(--mk-lento) var(--mk-ease), background-color var(--mk-normal); }
.mk-tema[aria-pressed="false"] .pi-sun { color: #d08a16; transform: rotate(0deg); }
.mk-tema[aria-pressed="true"] .mk-tema__botao { transform: translateX(30px); background: var(--nx-navy-700); }
.mk-tema[aria-pressed="true"] .pi-moon { color: var(--nx-teal-300); transform: rotate(-12deg); }
.mk-tema:hover .mk-tema__trilho { border-color: var(--nx-line-3); }
.mk-tema:focus-visible { outline: 0; }
.mk-tema:focus-visible .mk-tema__trilho { box-shadow: var(--mk-foco); }

/* ---------- ambiente: fundo com luz suave da marca, topo de vidro ---------- */
.nx-conteudo-shell {
    background:
        radial-gradient(1100px 520px at 108% -10%, color-mix(in srgb, var(--nx-teal-500) 8%, transparent), transparent 62%),
        radial-gradient(900px 480px at -12% 112%, color-mix(in srgb, var(--nx-navy-500) 6%, transparent), transparent 60%),
        var(--nx-bg);
}
/* o topo do mock tem so a trilha e as acoes: as acoes vao ate o canto direito (o botao de tema fica no canto) */
.nx-topbar { grid-template-columns: minmax(0, 1fr) auto; background: var(--mk-vidro); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); }

/* ---------- campos: mais leves, rotulo legivel, foco claro; vale para o mock inteiro ---------- */
.nx-field-label { margin: 0 0 6px; color: var(--nx-ink-2); font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; text-transform: none; }
.nx-input, .nx-select { min-height: 38px; padding-top: 8px; padding-bottom: 8px; border-color: var(--nx-line); border-radius: 9px; background-color: var(--nx-surface-2); color: var(--nx-ink); font-size: 13px; }
.nx-input { padding-right: 12px; padding-left: 12px; }
.nx-textarea { border-color: var(--nx-line); border-radius: 10px; background-color: var(--nx-surface-2); font-size: 13px; line-height: 1.5; }
.nx-input:hover, .nx-select:hover, .nx-textarea:hover { border-color: var(--nx-line-2); }
.nx-input:focus, .nx-select:focus, .nx-textarea:focus { border-color: var(--nx-teal-500); background-color: var(--nx-surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nx-teal-500) 15%, transparent); }
.nx-input::placeholder, .nx-textarea::placeholder { color: var(--nx-ink-4); }
.nx-input[readonly], .nx-textarea[readonly] { border-style: dashed; background-color: transparent; color: var(--nx-ink-2); }
.nx-input:disabled, .nx-select:disabled, .nx-textarea:disabled { opacity: 0.6; cursor: not-allowed; }
.nx-input[aria-invalid="true"], .nx-select[aria-invalid="true"], .nx-textarea[aria-invalid="true"] { border-color: var(--nx-crit); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nx-crit) 12%, transparent); }
.nx-field-help { font-size: 11.5px; }
.nx-field-help:not(.nx-field-help--error) { color: var(--nx-ink-3); }

/* ---------- formulario em secoes (kit): cartao por assunto com icone, progresso e grade de 12 ----------
   <section class="mk-secao" id="..."><header class="mk-secao__cabeca"><span class="mk-secao__icone"><i class="pi ..."></i></span>
   <div><h3 class="mk-secao__titulo">Proprietário</h3><p class="mk-secao__sub">quem é o titular</p></div>
   <span class="mk-secao__fim">...progresso ou acoes...</span></header><div class="mk-secao__corpo"> .mk-campo.mk-c4 ... </div></section> */
.mk-form { display: grid; gap: 14px; min-width: 0; }
.mk-secao { min-width: 0; overflow: hidden; border: 1px solid var(--nx-line); border-radius: var(--nx-r-l); background: var(--nx-surface); box-shadow: var(--mk-sombra-1); scroll-margin-top: 72px; }
.mk-secao__cabeca { display: flex; gap: 12px; align-items: center; min-width: 0; padding: 14px 18px; border-bottom: 1px solid var(--nx-line); background: linear-gradient(180deg, color-mix(in srgb, var(--nx-surface-2) 70%, var(--nx-surface)), var(--nx-surface)); }
.mk-secao__icone { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--nx-teal-500) 22%, var(--nx-line)); border-radius: 10px; background: color-mix(in srgb, var(--nx-teal-500) 10%, var(--nx-surface)); color: var(--nx-teal-600); font-size: 14px; }
[data-theme=dark] .mk-secao__icone { color: var(--nx-teal-300); }
.mk-secao__titulo { margin: 0; color: var(--nx-ink); font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; }
.mk-secao__sub { margin: 1px 0 0; color: var(--nx-ink-3); font-size: 12px; }
.mk-secao__fim { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; margin-left: auto; }
.mk-secao__corpo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 16px; padding: 16px 18px 18px; }
.mk-secao--recolhida .mk-secao__corpo { display: none; }
.mk-secao--recolhida .mk-secao__cabeca { border-bottom: 0; }
.mk-campo { min-width: 0; }
:where(.mk-secao__corpo > .mk-campo) { grid-column: span 4; }
.mk-c2 { grid-column: span 2; } .mk-c3 { grid-column: span 3; } .mk-c4 { grid-column: span 4; } .mk-c5 { grid-column: span 5; } .mk-c6 { grid-column: span 6; }
.mk-c7 { grid-column: span 7; } .mk-c8 { grid-column: span 8; } .mk-c9 { grid-column: span 9; } .mk-c12 { grid-column: 1 / -1; }
@media (max-width: 1100px) { .mk-secao__corpo .mk-c2, .mk-secao__corpo .mk-c3, .mk-secao__corpo .mk-c4, .mk-secao__corpo .mk-c5 { grid-column: span 6; } .mk-secao__corpo .mk-c6, .mk-secao__corpo .mk-c7, .mk-secao__corpo .mk-c8, .mk-secao__corpo .mk-c9 { grid-column: 1 / -1; } }
.mk-campo__rotulo { display: flex; gap: 6px; align-items: center; min-width: 0; margin: 0 0 6px; color: var(--nx-ink-2); font-size: 11.5px; font-weight: 600; }
.mk-campo__rotulo > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* origem do valor: veio do campo, herdado de outro setor, calculado */
.mk-origem { display: inline-flex; flex: 0 0 auto; gap: 4px; align-items: center; padding: 1px 7px 1px 6px; border: 1px solid var(--nx-info-bd); border-radius: 999px; background: var(--nx-info-bg); color: var(--nx-info); font-size: 10px; font-weight: 650; letter-spacing: 0.02em; }
.mk-origem .pi { font-size: 9px; }
.mk-origem--herdado { border-color: var(--nx-nv-bd); background: var(--nx-nv-bg); color: var(--nx-nv); }
.mk-origem--calc { border-color: var(--nx-ok-bd); background: var(--nx-ok-bg); color: var(--nx-ok); }
/* valor so de leitura no lugar de um campo desabilitado */
.mk-valor { display: flex; gap: 8px; align-items: center; min-height: 38px; padding: 0 2px; border-bottom: 1px dashed var(--nx-line); color: var(--nx-ink); font-size: 13px; }
.mk-valor--vazio { color: var(--nx-ink-4); font-style: italic; }
.mk-valor--mono { font-family: var(--nx-fm); font-size: 12.5px; letter-spacing: 0.02em; }
/* indice das secoes: chips que rolam ate a secao e mostram o que falta */
.mk-indice { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid var(--nx-line); border-radius: 12px; background: var(--mk-vidro); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--mk-sombra-1); }
.mk-indice a { display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: 8px; color: var(--nx-ink-2); font-size: 12px; font-weight: 600; text-decoration: none; }
.mk-indice a:hover { background: var(--nx-surface-3); color: var(--nx-ink); }
.mk-indice a.mk-indice--ativo { background: var(--nx-ink); color: var(--nx-surface); }
.mk-indice small { color: inherit; font-family: var(--nx-fm); font-size: 10.5px; opacity: 0.7; }
/* barra de salvar que aparece quando ha alteracao */
.mk-salvar { position: sticky; bottom: 12px; z-index: 6; display: flex; gap: 10px; align-items: center; padding: 10px 12px 10px 16px; border: 1px solid var(--nx-line-2); border-radius: 14px; background: var(--mk-vidro); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--mk-sombra-3); }
.mk-salvar > span { color: var(--nx-ink-2); font-size: 12.5px; }
.mk-salvar > span b { color: var(--nx-ink); }
.mk-salvar > :last-child { margin-left: auto; }

/* ---------- modo escuro: o que o mock pinta com cor fixa ---------- */
[data-theme=dark] .mk-step--ativo b, [data-theme=dark] .mk-indice a.mk-indice--ativo { background: var(--nx-teal-400); color: var(--nx-navy-950); }
[data-theme=dark] .mk-hero, [data-theme=dark] .mk-faixa--hero { box-shadow: 0 0 0 1px var(--nx-line), var(--mk-sombra-2); }
[data-theme=dark] .nx-topbar { box-shadow: 0 1px 0 var(--nx-line), 0 8px 24px -16px rgba(0, 0, 0, 0.8); }
[data-theme=dark] .nx-btn--primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.4); }
[data-theme=dark] .mk-tema__trilho { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45); }
[data-theme=dark] .mk-secao__cabeca { background: linear-gradient(180deg, color-mix(in srgb, var(--nx-surface-2) 55%, var(--nx-surface)), var(--nx-surface)); }
[data-theme=dark] ::selection { background: color-mix(in srgb, var(--nx-teal-400) 35%, transparent); }
/* o menu lateral e navy nos dois temas: o que o Nexus pinta com --nx-surface (branco no claro) fica branco no escuro */
[data-theme=dark] :is(.nx-rail__marca, .nx-sair:hover, .nx-rail__busca input, .nx-usuario-resumo b) { color: #fff; }
[data-theme=dark] .nx-rail { box-shadow: 1px 0 0 var(--nx-line); }
[data-theme=dark] .mk-toast { background: var(--nx-surface-3); color: var(--nx-ink); box-shadow: 0 0 0 1px var(--nx-line-2), var(--mk-sombra-2); }
/* chip de etapa: contraste no escuro */
[data-theme=dark] .mk-etapa { border-color: color-mix(in srgb, var(--nx-teal-400) 45%, var(--nx-line)); background: color-mix(in srgb, var(--nx-teal-500) 16%, var(--nx-surface)); color: var(--nx-teal-300); }
[data-theme=dark] .mk-etapa:hover { border-color: var(--nx-teal-400); background: color-mix(in srgb, var(--nx-teal-500) 26%, var(--nx-surface)); }

/* acentos de texto que somem no escuro (teal-600/700 nao trocam de tema): no escuro passam para o info do Nexus */
[data-theme=dark] :is(.mk-link, .mk-herdado small, .mk-gaveta__sob, .mk-topo__sob) { color: var(--nx-info); }
[data-theme=dark] .mk-lista__icone { color: var(--mk-cor, var(--nx-teal-300)); }
[data-theme=dark] .mk-trilha--atual b { border-color: var(--nx-teal-400); color: var(--nx-teal-300); }
[data-theme=dark] .mk-trilha--feita b { color: var(--nx-navy-950); }
/* avatar do kit: seletores genericos de span nao apagam as iniciais */
.mk-avatar, span.mk-avatar { color: #fff !important; }
[data-theme=dark] .mk-selo--nv { --mk-cor: var(--nx-nv-grafico); }
[data-theme=dark] .mk-selo--info { --mk-cor: var(--nx-teal-400); }
/* trilha compacta: pilula 27x18 cabe "2.10" sem vazar */
.mk-trilha--compacta b { min-width: 27px; height: 18px; padding: 0 5px; border-radius: 6px; font-size: 10px; }
.mk-trilha--compacta li::before { top: 8px; }
[data-theme=dark] .mk-trilha b { color: var(--nx-ink-2); }
[data-theme=dark] .mk-nav-sub { color: var(--nx-navy-400); }

/* ==========================================================================================================
   Onda 5b (2026-10-06): devolucao, correcao, rastreabilidade. Componentes em componentes.js (herdado com acoes,
   devolverDemanda, confirmarEdicaoAposEnvio, historico, avisoParalisado, emCorrecaoSelo, cartaoOcorrencia).
   ========================================================================================================== */
/* dialogo da onda (mk-fundo + mk-dlg): corpo em grupos, setores como linhas escolhiveis */
.mk-dlg5 .mk-dlg header > div { display: grid; gap: 3px; min-width: 0; }
.mk-dlg5__sob { color: var(--nx-ink-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.mk-dlg5__corpo { display: grid; gap: 16px; padding: 18px 20px 20px; }
.mk-dlg5__texto { margin: 0; color: var(--nx-ink-2); font-size: 13px; line-height: 1.55; }
.mk-dlg5__erro { margin: 0; color: var(--nx-crit); font-size: 12.5px; font-weight: 600; }
.mk-dlg5__grupo { display: grid; gap: 8px; }
.mk-dlg5__rotulo { display: flex; gap: 8px; align-items: baseline; color: var(--nx-ink-2); font-size: 12px; font-weight: 650; }
.mk-dlg5__rotulo small { color: var(--nx-ink-3); font-size: 11px; font-weight: 500; }
.mk-dlg5__setores { display: grid; overflow: hidden; border: var(--mk-borda); border-radius: var(--mk-raio-m); }
.mk-dlg5__setor { display: flex; gap: 10px; align-items: center; padding: 10px 12px; cursor: pointer; transition: background var(--mk-rapido) var(--mk-ease); }
.mk-dlg5__setor + .mk-dlg5__setor { border-top: var(--mk-borda); }
.mk-dlg5__setor:hover { background: var(--nx-surface-2); }
.mk-dlg5__setor:has(input:checked) { background: color-mix(in srgb, var(--nx-teal-500) 9%, var(--nx-surface)); box-shadow: inset 3px 0 0 var(--nx-teal-500); }
.mk-dlg5__setor input { accent-color: var(--nx-teal-500); }
.mk-dlg5__setor b { font-size: 13px; font-weight: 600; }
.mk-dlg5__setor small { margin-left: auto; color: var(--nx-ink-3); font-size: 11px; }
.mk-dlg5__num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--nx-surface-2); color: var(--nx-ink-3); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-dlg5__imoveis { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-dlg5__imoveis label { display: inline-flex; gap: 6px; align-items: center; padding: 4px 9px; border: var(--mk-borda); border-radius: var(--mk-raio-s); cursor: pointer; }
.mk-dlg5__imoveis label:has(input:checked) { border-color: color-mix(in srgb, var(--nx-teal-500) 55%, var(--nx-line)); background: color-mix(in srgb, var(--nx-teal-500) 8%, var(--nx-surface)); }
.mk-dlg5__imoveis input { margin: 0; accent-color: var(--nx-teal-500); }
.mk-dlg5__imoveis code, .mk-hist code { font-family: var(--nx-fm); font-size: 11.5px; }
.mk-dlg5__citacao { margin: 0; padding: 10px 12px; border-left: 3px solid var(--nx-crit); border-radius: 0 var(--mk-raio-s) var(--mk-raio-s) 0; background: var(--nx-crit-bg); color: var(--nx-ink); font-size: 13px; }
.mk-dlg5__campos { display: grid; gap: 6px; margin: 0; padding: 10px 12px; border: var(--mk-borda); border-radius: var(--mk-raio-m); background: var(--nx-surface-2); list-style: none; }
.mk-dlg5__campos li, .mk-hist__campos li { display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline; font-size: 12.5px; }
.mk-dlg5__campos li > span, .mk-hist__campos li > span { min-width: 140px; color: var(--nx-ink-3); }
:is(.mk-dlg5__campos, .mk-hist__campos) s { color: var(--nx-ink-3); text-decoration-color: color-mix(in srgb, var(--nx-crit) 60%, transparent); }
:is(.mk-dlg5__campos, .mk-hist__campos) b { font-weight: 650; }
:is(.mk-dlg5__campos, .mk-hist__campos) .pi { color: var(--nx-ink-4); font-size: 9.5px; }
.mk-vazio-valor { color: var(--nx-ink-4); font-style: italic; }

/* herdado com acoes: "Apontar erro" sempre (quem esta no setor) e "Corrigir" so para dado da OS ou do projeto */
.mk-herdado--acoes { position: relative; padding-right: 36px; }
.mk-herdado--acoes:has([data-corrigir-herdado]) { padding-right: 62px; }
/* sempre visiveis como icone discreto; o rotulo aparece no hover ou no foco */
.mk-herdado__acoes { position: absolute; top: 5px; right: 5px; display: flex; gap: 2px; }
.mk-herdado__acao span { display: none; }
.mk-herdado--acoes:is(:hover, :focus-within) .mk-herdado__acao span { display: inline; }
.mk-herdado__acao { display: inline-flex; gap: 4px; align-items: center; height: 22px; padding: 0 6px; border: var(--mk-borda); border-radius: var(--mk-raio-xs); background: var(--nx-surface); color: var(--nx-ink-3); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: color var(--mk-rapido) var(--mk-ease), box-shadow var(--mk-rapido) var(--mk-ease); }
.mk-herdado--acoes:is(:hover, :focus-within) .mk-herdado__acao { color: var(--nx-ink-2); box-shadow: var(--mk-sombra-1); }
.mk-secao__fim .mk-herdado__acao span { display: inline; }
.mk-herdado__acao .pi { font-size: 10px; }
.mk-herdado__acao:hover { border-color: var(--nx-line-2); color: var(--nx-ink); }
.mk-herdado__acao[data-apontar-erro]:hover .pi { color: var(--nx-warn); }
.mk-herdado__acao[data-corrigir-herdado]:hover .pi { color: var(--nx-info); }

/* gaveta de apontar erro / corrigir */
.mk-form5 { display: grid; gap: 14px; }
.mk-form5 .mk-campo { display: grid; grid-column: auto; gap: 0; }
.mk-form5__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mk-form5__nota { display: flex; gap: 8px; margin: 0; color: var(--nx-ink-3); font-size: 12px; line-height: 1.5; }
.mk-form5__nota .pi { margin-top: 2px; font-size: 12px; }

/* faixa "paralisado" no topo da ficha */
.mk-paralisado { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--nx-warn-bd); border-radius: var(--mk-raio-m); background: color-mix(in srgb, var(--nx-warn) 8%, var(--nx-surface)); box-shadow: inset 3px 0 0 var(--nx-warn); }
.mk-paralisado__icone { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--nx-warn-bg); color: var(--nx-warn); }
.mk-paralisado__texto { display: grid; gap: 4px; min-width: 0; }
.mk-paralisado__texto > b { font-size: 13.5px; }
.mk-paralisado__texto > p { margin: 0; color: var(--nx-ink-2); font-size: 12.3px; }
.mk-paralisado__campos { margin-top: 4px !important; }
.mk-paralisado__acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.mk-paralisado__acoes small { color: var(--nx-ink-3); font-size: 11.5px; }
@media (max-width: 900px) { .mk-paralisado { grid-template-columns: auto minmax(0, 1fr); } .mk-paralisado__acoes { grid-column: 2; justify-content: flex-start; } }

/* selo "em correcao no setor X" (+ Reenviar) */
.mk-correcao { display: inline-flex; gap: 5px; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--nx-crit-bd); border-radius: 999px; background: var(--nx-crit-bg); color: var(--nx-crit); font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.mk-correcao .pi { font-size: 10px; }
.mk-correcao + .nx-btn { margin-left: 6px; }

/* historico: linha do tempo por dia e versao compacta */
.mk-hist { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.mk-hist__dia { position: sticky; top: 0; z-index: 1; padding: 10px 0 6px; background: linear-gradient(var(--nx-surface) 70%, transparent); }
.mk-hist__dia span { color: var(--nx-ink-3); font-size: 10.5px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
.mk-hist__item { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 8px 0 14px; }
.mk-hist__item::before { position: absolute; top: 38px; bottom: 0; left: 12.5px; width: 1px; background: var(--nx-line); content: ''; }
.mk-hist__item:last-child::before, .mk-hist__item:has(+ .mk-hist__dia)::before { display: none; }
.mk-hist__corpo { display: grid; gap: 6px; min-width: 0; }
.mk-hist__cabeca { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12.5px; }
.mk-hist__cabeca b { font-weight: 650; }
.mk-hist__cabeca > span { color: var(--nx-ink-3); }
.mk-hist__cabeca time { color: var(--nx-ink-3); font-variant-numeric: tabular-nums; }
.mk-hist__cabeca code { padding: 0 5px; border: var(--mk-borda); border-radius: 4px; background: var(--nx-surface-2); }
.mk-hist__campos { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mk-hist__motivo { margin: 0; padding-left: 10px; border-left: 2px solid var(--nx-line-2); color: var(--nx-ink-2); font-size: 12.3px; }
.mk-hist__item--envio .mk-hist__motivo { border-left-color: var(--nx-warn); }
.mk-hist--compacto { gap: 2px; }
.mk-hist--compacto li { display: flex; gap: 8px; align-items: center; min-height: 32px; padding: 4px 6px; border-radius: var(--mk-raio-s); font-size: 12.3px; }
.mk-hist--compacto li:hover { background: var(--nx-surface-2); }
.mk-hist--compacto time { flex: none; width: 76px; color: var(--nx-ink-3); font-variant-numeric: tabular-nums; }
.mk-hist--compacto li > span:not(.mk-avatar):not(.mk-selo) { overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
.mk-hist-vazio { display: flex; gap: 10px; align-items: center; padding: 14px; border: 1px dashed var(--nx-line-2); border-radius: var(--mk-raio-m); color: var(--nx-ink-3); font-size: 12.5px; }

/* cartoes de ocorrencia na caixa de entrada (devolucao, aviso, erro apontado) */
.mk-ocorrencia__icone { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 2px; border-radius: 6px; font-size: 10.5px !important; }
.mk-ocorrencia--devolucao { box-shadow: inset 3px 0 0 var(--nx-crit), var(--nx-shadow-1); }
.mk-ocorrencia--devolucao .mk-ocorrencia__icone { background: var(--nx-crit-bg); color: var(--nx-crit) !important; }
.mk-ocorrencia--aviso { box-shadow: inset 3px 0 0 var(--nx-warn), var(--nx-shadow-1); }
.mk-ocorrencia--aviso .mk-ocorrencia__icone { background: var(--nx-warn-bg); color: var(--nx-warn) !important; }
.mk-ocorrencia--apontamento { box-shadow: inset 3px 0 0 var(--nx-info), var(--nx-shadow-1); }
.mk-ocorrencia--apontamento .mk-ocorrencia__icone { background: var(--nx-info-bg); color: var(--nx-info) !important; }
.mk-ocorrencia--fechada { box-shadow: none; opacity: 0.82; }
.mk-ocorrencia .mk-hist__campos { margin: 2px 0; }
.mk-entrada__motivo--warn { color: var(--nx-ink) !important; }
.mk-entrada__motivo--warn .pi { color: var(--nx-info); }
.mk-entrada__reenvio { display: flex; gap: 6px; align-items: center; color: var(--nx-ok) !important; }
.mk-entrada__acoes { flex-wrap: wrap; }
.mk-texto-warn { color: var(--nx-warn); font-weight: 650; }
.mk-texto-mu { color: var(--nx-ink-3); }
/* painel lateral da caixa de entrada (estreito): cartoes de entrega e de ocorrencia em uma coluna */
.mk-lateral .mk-entrada { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; }
.mk-lateral .mk-entrada__acoes { justify-content: flex-start; }
.mk-lateral :is(.mk-hist__campos, .mk-dlg5__campos) li > span { min-width: 0; flex-basis: 100%; }
@media print { .mk-herdado__acoes { display: none; } .mk-herdado--acoes { padding-right: 10px; } }

/* ==========================================================================================================
   Lapidacao 2026-10-13: celular (ate 767 px). O que a tela monta em linha (segmentos, seletores dentro de um rotulo,
   acoes do topo) nao pode empurrar o corpo para o lado: o segmento rola dentro de si, o seletor cabe na largura e as
   acoes do topo quebram linha. Vale para o mock inteiro, sem mexer em cada tela.
   ========================================================================================================== */
@media (max-width: 767px) {
    .nx-corpo .nx-segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .nx-corpo .nx-segmented::-webkit-scrollbar { display: none; }
    .nx-corpo .nx-segmented__item { flex: 0 0 auto; white-space: nowrap; }
    .mk-topo__acoes { min-width: 0; max-width: 100%; }
    .mk-topo__acoes > * { max-width: 100%; min-width: 0; }
    /* um seletor nas acoes do topo (projeto, "ver como", setor) ocupa a linha inteira em vez de vazar pela direita */
    .mk-topo__acoes :is(label, div, span):has(> .nx-select) { flex: 1 1 100%; grid-template-columns: minmax(0, 1fr); width: 100%; box-sizing: border-box; }
    .mk-topo__acoes .nx-select { flex: 1 1 auto; width: 100%; min-width: 0; max-width: 100%; }
    .nx-corpo .nx-select { min-width: 0; max-width: 100%; }
}

/* 2026-10-13: a trilha das etapas do BPMN saiu de todos os setores (trilha() devolve vazio); some o espaco do invólucro. */
[class*="__trilha"]:empty, [class*="-trilha"]:empty { display: none; }

/* ==========================================================================================================
   Refinamento visual (2026-10-13): o pedido da dona foi "mais limpo, fluido, sem cara quadrada; identidade GEO3D;
   riqueza de detalhes sem poluir". Vale para o mock inteiro, sem mexer tela a tela: paleta da marca (marca.css),
   escala tipografica menor e mais leve, menos caixas (numeros soltos com rotulo, separados por fio), filtros em
   pilulas, tabelas com cabecalho leve e zebra suave, menu lateral com item ativo em pilula, faixa de comparacao
   discreta. Tudo com os tokens --nx-*, entao vale nos dois temas.
   ========================================================================================================== */
:root { --nx-page-padding: 20px 28px 56px; --mk-raio-xs: 7px; }
.mk-pilha { gap: 16px; }
h1 { font-size: 24px; font-weight: 650; letter-spacing: -0.5px; }
h2 { font-size: 16px; }

/* ---------- topo da tela: eyebrow leve, titulo menor, descricao em ate duas linhas ---------- */
.mk-topo { gap: 10px 20px; margin-bottom: 0; }
.mk-topo__sob { color: var(--nx-teal-700); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; }
.mk-topo__sob .pi { font-size: 10.5px; opacity: 0.85; }
.mk-topo h1 { margin: 4px 0 3px; font-size: 22px; font-weight: 650; letter-spacing: -0.4px; }
.mk-topo p { display: -webkit-box; max-width: 78ch; overflow: hidden; color: var(--nx-ink-3); font-size: 12.6px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mk-topo p b { color: var(--nx-ink-2); font-weight: 600; }
.mk-topo__acoes { gap: 6px; }
.mk-topo__acoes .nx-btn { min-height: 34px; }

/* ---------- superficies: cartao com borda quase invisivel e sombra leve; cartao dentro de cartao sem sombra ---------- */
.nx-card { border-color: color-mix(in srgb, var(--nx-line) 85%, transparent); }
.nx-card .nx-card { box-shadow: none; }
.nx-card__header { padding: 14px 18px 12px; }
.nx-card__header h2 { font-size: 15px; font-weight: 650; letter-spacing: -0.2px; }
.nx-card__header h3 { font-size: 13.5px; }
.nx-card__header p { margin-top: 2px; font-size: 11.8px; }
.nx-card__body { padding: 16px 18px 18px; }
.nx-card__rodape { padding: 10px 16px; }
.mk-bloco-titulo h2 { font-size: 13.5px; font-weight: 650; }
.mk-secao-card .nx-card__header h2 { font-size: 14px; }
.nx-toolbar { padding: 9px 12px; }
.nx-note { padding: 10px 12px; border-color: color-mix(in srgb, var(--nx-teal-500) 18%, var(--nx-line)); border-left-width: 2px; background: color-mix(in srgb, var(--nx-teal-500) 6%, var(--nx-surface)); font-size: 12.3px; }

/* ---------- numeros sem caixa: a faixa de indicadores e os kpis claros viram numero + rotulo separados por um fio ---------- */
.mk-faixa:not(.mk-faixa--hero):not(.mk-faixa--filtros) { gap: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.mk-faixa:not(.mk-faixa--hero):not(.mk-faixa--filtros) .mk-faixa__item { gap: 2px; padding: 6px 18px 8px 14px; border-right: 1px solid var(--nx-line); border-radius: 0; background: transparent; }
.mk-faixa:not(.mk-faixa--hero):not(.mk-faixa--filtros) .mk-faixa__item:first-child { padding-left: 2px; }
.mk-faixa:not(.mk-faixa--hero):not(.mk-faixa--filtros) .mk-faixa__item:last-child { border-right: 0; }
.mk-faixa:not(.mk-faixa--hero):not(.mk-faixa--filtros) :is(a, button).mk-faixa__item { border-radius: 8px; }
.mk-faixa:not(.mk-faixa--hero):not(.mk-faixa--filtros) :is(a, button).mk-faixa__item:hover { background: var(--nx-surface-2); }
.mk-faixa:not(.mk-faixa--hero):not(.mk-faixa--filtros) .mk-faixa__item--ativo { background: transparent; box-shadow: none; }
.mk-faixa:not(.mk-faixa--hero):not(.mk-faixa--filtros) .mk-faixa__item--ativo .mk-faixa__rot { color: var(--nx-teal-700); }
.mk-faixa:not(.mk-faixa--hero):not(.mk-faixa--filtros) .mk-faixa__item--ativo .mk-faixa__valor { text-decoration: underline; text-decoration-color: var(--nx-teal-500); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.mk-faixa__rot { font-size: 9.6px; letter-spacing: 0.11em; }
.mk-faixa__valor { font-size: 24px; font-weight: 650; letter-spacing: -0.6px; }
.mk-faixa__valor small { font-size: 12px; }
@media (max-width: 767px) {
    .mk-faixa:not(.mk-faixa--hero):not(.mk-faixa--filtros) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 0; }
    .mk-faixa:not(.mk-faixa--hero):not(.mk-faixa--filtros) .mk-faixa__item:nth-child(2n) { border-right: 0; }
}
.mk-kpis--claro { gap: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.mk-kpis--claro .mk-kpi { padding: 8px 18px 10px 14px; border-right: 1px solid var(--nx-line); background: transparent; }
.mk-kpis--claro .mk-kpi:first-child { padding-left: 2px; }
.mk-kpis--claro .mk-kpi:last-child { border-right: 0; }
.mk-kpis--claro a.mk-kpi:hover, .mk-kpis--claro button.mk-kpi:hover { border-radius: 8px; background: var(--nx-surface-2); }
.mk-kpi__rot { font-size: 9.6px; letter-spacing: 0.11em; }
/* blocos de numero do graficos.js: um cartao so com fios, ponto de cor no rotulo em vez de barra lateral */
.mk-tiles { gap: 1px; overflow: hidden; border: 1px solid var(--nx-line); border-radius: var(--nx-r-l); background: var(--nx-line); box-shadow: var(--mk-sombra-1); }
.mk-tile, .mk-tile--ok, .mk-tile--wa, .mk-tile--cr, .mk-tile--in { border: 0; border-radius: 0; box-shadow: none; }
.mk-tile__rot::before { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--nx-line-3); vertical-align: 1px; content: ""; }
.mk-tile--ok .mk-tile__rot::before { background: var(--nx-ok); }
.mk-tile--wa .mk-tile__rot::before { background: var(--nx-warn); }
.mk-tile--cr .mk-tile__rot::before { background: var(--nx-crit); }
.mk-tile--in .mk-tile__rot::before { background: var(--nx-teal-500); }
.mk-tile__valor { font-size: 22px; font-weight: 650; }
a.mk-tile:hover { background: var(--nx-surface-2); }
.nx-stat__label { font-size: 9.6px; letter-spacing: 0.11em; }
.nx-stat__value { font-size: 26px; font-weight: 650; letter-spacing: -0.03em; }

/* ---------- tabelas: cabecalho leve, zebra suave, numeros a direita ---------- */
.nx-tabela { font-size: 12.6px; }
.nx-tabela thead th { padding: 8px 13px; border-bottom: 1px solid var(--nx-line-2); background: var(--nx-surface); color: var(--nx-ink-3); font-size: 9.8px; font-weight: 700; letter-spacing: 0.1em; }
.nx-tabela tbody td { border-bottom-color: color-mix(in srgb, var(--nx-line) 70%, transparent); }
.nx-tabela tbody tr:nth-child(even):not(.nx-tabela__linha--ativa):not(:hover) > td { background: color-mix(in srgb, var(--nx-surface-2) 55%, var(--nx-surface)); }
.nx-tabela td.r, .nx-tabela th.r { text-align: right; font-variant-numeric: tabular-nums; }
.nx-tabela tbody tr.nx-tabela__linha:hover { box-shadow: inset 2px 0 0 var(--nx-teal-300); }

/* ---------- botoes: altura 38 (igual aos campos), fantasma transparente, icone 32 ---------- */
.nx-btn { min-height: 38px; padding: 8px 14px; border-radius: 9px; font-size: 12.5px; }
.nx-btn--sm { min-height: 32px; padding: 6px 11px; border-radius: 8px; font-size: 11.5px; }
.nx-btn--ghost { border-color: var(--nx-line-2); background: transparent; }
.nx-btn--ghost:hover:not(:disabled) { border-color: var(--nx-line-3); background: var(--nx-surface-2); }
.nx-icon-btn { width: 32px; height: 32px; border-color: var(--nx-line); border-radius: 8px; }
.nx-btn--primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px color-mix(in srgb, var(--nx-teal-800) 25%, transparent); }

/* ---------- filtros em pilulas (segmentado e faixa de filtros): o ativo e uma pilula cheia na cor do texto ---------- */
.nx-segmented { gap: 4px; padding: 0; background: transparent; }
.nx-segmented__item { padding: 5px 12px; border: 1px solid var(--nx-line); border-radius: 999px; background: var(--nx-surface); color: var(--nx-ink-2); font-size: 12px; font-weight: 500; transition: background-color var(--mk-rapido), border-color var(--mk-rapido), color var(--mk-rapido); }
.nx-segmented__item:hover { border-color: var(--nx-line-2); background: var(--nx-surface-2); color: var(--nx-ink); }
.nx-segmented__item--ativo, .nx-segmented__item--ativo:hover { border-color: var(--nx-ink); background: var(--nx-ink); color: var(--nx-surface); font-weight: 600; box-shadow: none; }
.nx-segmented__count { color: inherit; opacity: 0.75; }
.nx-segmented__count--ativo { color: inherit; }
.mk-faixa--filtros { gap: 5px; }
.mk-faixa--filtros .mk-faixa__item { padding: 4px 10px; font-size: 12px; }
.mk-faixa--filtros .mk-faixa__rot { font-size: 12px; font-weight: 500; }
.mk-faixa--filtros .mk-faixa__valor { min-width: 16px; padding: 0 5px; font-size: 11px; }
.mk-faixa--filtros .mk-faixa__item--ativo { border-color: var(--nx-ink); background: var(--nx-ink); color: var(--nx-surface); }
.mk-faixa--filtros .mk-faixa__item--ativo .mk-faixa__rot { color: inherit; font-weight: 600; }
.mk-faixa--filtros .mk-faixa__item--ativo .mk-faixa__valor { background: color-mix(in srgb, var(--nx-surface) 22%, transparent); color: inherit; }
.mk-faixa--filtros .mk-faixa__item--ativo.mk-tom--crit .mk-faixa__valor { color: inherit; }
.nx-chip { padding: 4px 10px; border-color: var(--nx-line); font-size: 11.8px; }
.mk-chip--on { border-color: var(--nx-ink); background: var(--nx-ink); color: var(--nx-surface); }
.mk-chip--on .pi { color: inherit; }

/* ---------- selos e tags: ponto colorido, fundo leve, sem borda marcada ---------- */
.nx-tag, .nx-tag.t-ok, .nx-tag.t-wa, .nx-tag.t-cr, .nx-tag.t-in, .nx-tag.t-in-forte, .nx-tag.t-mu, .nx-tag.t-nv { padding: 3px 9px 3px 8px; border-color: transparent; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
.nx-tag::before { box-shadow: none; }
.mk-selo { border-color: color-mix(in srgb, var(--mk-cor, var(--nx-ink-4)) 22%, transparent); font-size: 11px; }

/* ---------- campos: 36 px, cantos 8 ---------- */
.nx-input, .nx-select { min-height: 36px; padding-top: 7px; padding-bottom: 7px; border-radius: 8px; font-size: 12.8px; }
.nx-textarea { border-radius: 9px; font-size: 12.8px; }
.mk-secao__cabeca { padding: 12px 18px; }
.mk-secao__icone { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
.mk-secao__titulo { font-size: 14px; }
.mk-secao__corpo { gap: 12px 16px; padding: 14px 18px 16px; }
.mk-indice { padding: 6px; border-radius: 12px; }
.mk-indice a { padding: 4px 10px; font-size: 11.8px; }

/* ---------- gaveta e dialogo ---------- */
.mk-gaveta__cabeca { padding: 16px 20px 12px; }
.mk-gaveta__sob { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; }
.mk-gaveta__cabeca h2 { font-size: 17px; font-weight: 650; }
.mk-gaveta__cabeca p { font-size: 12.2px; }
.mk-gaveta__corpo { gap: 14px; }
.mk-dlg { border-radius: 16px; }
.mk-dlg h2 { font-size: 15.5px; }
.mk-lista > * { min-height: 52px; padding: 10px 16px; }
.mk-lista__titulo { font-size: 13px; }
.mk-lista__n { font-size: 19px; font-weight: 650; }

/* ---------- estado vazio: ilustracao de um traco (kit.js, vazio) ---------- */
.nx-empty { padding: 38px 20px 36px; }
.nx-empty > i { display: none; }
.mk-vazio__arte { position: relative; display: block; width: 96px; height: 72px; margin: 0 auto 12px; color: var(--nx-teal-500); }
.mk-vazio__arte svg { display: block; width: 100%; height: 100%; }
.mk-vazio__arte .pi { position: absolute; right: 2px; bottom: 2px; display: grid; width: 26px; height: 26px; border: 2px solid var(--nx-surface); border-radius: 50%; background: var(--nx-teal-500); color: #fff; font-size: 11px; place-items: center; }
[data-theme=dark] .mk-vazio__arte .pi { color: var(--nx-navy-950); }
.nx-empty h2 { font-size: 13.5px; font-weight: 650; }
.nx-empty p { max-width: 46ch; margin: 4px auto 0; color: var(--nx-ink-3); }
.nx-empty .nx-btn { margin-top: 14px; }

.mk-hero h1 { font-size: 25px; font-weight: 650; letter-spacing: -0.5px; }
.mk-hero--compacto h1 { font-size: 21px; }
.mk-hero__sob { font-size: 10px; letter-spacing: 0.14em; }
.mk-kpi__valor { font-weight: 650; }

/* ---------- menu lateral: grafite da marca, item ativo em pilula com filete arredondado, ---------- */
.nx-rail { background: linear-gradient(180deg, var(--nx-navy-900), var(--nx-navy-950)); }
.nx-rail__topo { padding: 16px 16px 10px; }
.nx-rail__marca { gap: 9px; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; }
/* marca do sistema: a logo inteira no menu aberto, so o pin no recolhido; o pin tambem fica em marca d'agua no
   fundo do menu, bem transparente, saindo pela esquerda */
.nx-rail__logo { display: block; width: 132px; height: auto; }
.nx-rail__pin { display: none; width: 26px; height: auto; }
.nx-shell--recolhido .nx-rail__logo { display: none; }
.nx-shell--recolhido .nx-rail__pin { display: block; }
.nx-rail::after { position: absolute; left: -96px; bottom: -36px; z-index: 0; width: 300px; aspect-ratio: 847 / 946; background: url("../comum/marca/pin-sistema.png") no-repeat center / contain; opacity: 0.07; filter: grayscale(0.2); content: ""; pointer-events: none; }
.nx-rail > * { position: relative; z-index: 1; }
.nx-rail__produto { border-left-color: rgba(255, 255, 255, 0.14); color: var(--nx-navy-400); font-size: 8.5px; letter-spacing: 0.16em; }
.nx-rail__recolher, .nx-sair { border-color: transparent; background: rgba(255, 255, 255, 0.05); }
.mk-rail-busca { margin: 2px 12px 8px; border-color: transparent; background: rgba(255, 255, 255, 0.05); color: #93a9ae; }
.mk-rail-busca:hover { border-color: transparent; background: rgba(255, 255, 255, 0.09); }
.mk-rail-busca kbd { border-color: rgba(255, 255, 255, 0.14); }
.nx-nav-item { padding: 7px 12px; border-radius: 9px; color: #a7bbc1; font-size: 12.8px; }
.nx-nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.nx-nav-item--ativo, .nx-nav-item--ativo:hover { background: color-mix(in srgb, var(--nx-teal-500) 18%, transparent); box-shadow: none; color: #fff; font-weight: 600; }
.nx-nav-item--ativo::before { position: absolute; top: 50%; left: 0; width: 3px; height: 16px; border-radius: 3px; background: var(--nx-teal-400); transform: translateY(-50%); content: ""; }
.nx-nav-item--ativo i { color: var(--nx-teal-300); }
.nx-nav-grupo { margin: 1px 6px; }
.nx-nav-grupo__cabecalho { padding: 8px 10px; border-radius: 9px; color: #b9cad0; font-size: 12.8px; }
.nx-nav-grupo__cabecalho:hover { background: rgba(255, 255, 255, 0.06); }
.nx-nav-grupo__cabecalho i { color: #7f9ba1; font-size: 15px; }
.nx-nav-grupo__quantidade { background: rgba(255, 255, 255, 0.06); color: #8aa3a9; font-size: 9.5px; }
.nx-nav-grupo__itens { margin: 2px 0 6px 18px; padding-left: 8px; border-left-color: rgba(255, 255, 255, 0.09); }
.nx-nav-grupo__itens .nx-nav-item { padding-top: 6px; padding-bottom: 6px; font-size: 12.4px; }
.nx-nav-grupo--na-tela > .nx-nav-grupo__cabecalho i { color: var(--nx-teal-300); }
.mk-nav-sub { margin: 9px 4px 3px 10px; color: #6f8a90; font-size: 9.2px; }
.nx-rail__rodape { border-top-color: rgba(255, 255, 255, 0.08); }
.nx-shell--recolhido .nx-nav-item--ativo::before { display: none; }
.nx-shell--recolhido .nx-nav-grupo { margin: 1px 8px; }

/* ---------- topo: mais baixo e silencioso ---------- */
.nx-topbar { min-height: 50px; border-bottom-color: color-mix(in srgb, var(--nx-line) 80%, transparent); }
.nx-migalhas { font-size: 12px; }
.nx-migalhas b { font-weight: 600; }
.nx-topbar__acoes .nx-btn--sm { min-height: 30px; padding: 4px 10px; }
.nx-topbar__acoes .nx-icon-btn { width: 30px; height: 30px; }
.mk-os-atual .nx-select { min-height: 30px; padding-top: 3px; padding-bottom: 3px; border-radius: 8px; font-size: 12px; }
/* Contexto de trabalho no topo (14/10/2026): Projeto > Empreendimento numa pastilha so, rotulo pequeno sobre o valor */
.mk-contexto { display: inline-flex; min-width: 0; align-items: stretch; gap: 2px; padding: 2px; border: 1px solid var(--nx-line); border-radius: 10px; background: var(--nx-surface-2); }
.mk-contexto__campo, .mk-contexto .mk-os-atual { position: relative; display: grid; min-width: 0; gap: 0; padding: 3px 6px 3px 10px; border-radius: 8px; color: var(--nx-ink-3); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.15; text-transform: uppercase; transition: background var(--mk-rapido, 150ms) ease; }
.mk-contexto__campo:hover, .mk-contexto__campo:focus-within { background: var(--nx-surface); box-shadow: 0 1px 2px rgba(16, 35, 42, 0.08); }
.mk-contexto__campo > span { display: block; pointer-events: none; }
.mk-contexto .nx-select, .mk-contexto .mk-os-atual .nx-select { width: 100%; min-height: 0; max-width: 260px; height: 20px; margin: 0; padding: 0 20px 0 0; border: 0; border-radius: 0; background-color: transparent; background-position: right 2px center; box-shadow: none; color: var(--nx-ink); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; }
.mk-contexto .nx-select:focus { box-shadow: none; }
.mk-contexto__campo--emp .nx-select { max-width: 240px; }
.mk-contexto__seta { align-self: center; color: var(--nx-ink-4); font-size: 11px; }
@media (max-width: 1439px) { .mk-contexto .nx-select { max-width: 200px; } .mk-contexto__campo--emp .nx-select { max-width: 190px; } }
@media (max-width: 1199px) { .mk-contexto .nx-select, .mk-contexto__campo--emp .nx-select { max-width: 150px; } }
@media (max-width: 1023px) { .mk-contexto__campo > span { display: none; } .mk-contexto__campo, .mk-contexto .mk-os-atual { padding-block: 5px; } .mk-contexto .nx-select, .mk-contexto__campo--emp .nx-select { max-width: 132px; } }
@media (max-width: 767px) { .mk-contexto { flex: 0 0 auto; } .mk-contexto .nx-select, .mk-contexto__campo--emp .nx-select { max-width: 120px; } }
.mk-tema__trilho { width: 54px; height: 28px; }
.mk-tema__botao { width: 22px; height: 22px; }
.mk-tema[aria-pressed="true"] .mk-tema__botao { transform: translateX(26px); }
/* faixa "Proposta / Como e hoje" (comparar.js): deixa de ser um alerta ambar e vira uma linha discreta */
.mk-comparar { padding: 5px 28px; border-bottom-color: var(--nx-line); background: var(--nx-surface-2); }
.mk-comparar__texto { color: var(--nx-ink-3); font-size: 11.8px; }
.mk-comparar__texto b { color: var(--nx-ink-2); font-weight: 600; }
.mk-comparar .nx-btn--sm { min-height: 28px; padding: 3px 9px; font-size: 11px; }
[data-theme=dark] .mk-comparar { background: color-mix(in srgb, var(--nx-surface-2) 60%, var(--nx-surface)); }

/* ---------- caixa de entrada no topo das telas de setor: mais leve ---------- */
.mk-caixa { padding: 10px; border-color: color-mix(in srgb, var(--nx-teal-500) 22%, var(--nx-line)); }
.mk-caixa > header b { font-size: 13px; }
.mk-entrada { padding: 10px 14px; border-color: color-mix(in srgb, var(--nx-line) 85%, transparent); }
.mk-entrada__corpo b { font-size: 13px; }

/* ---------- tema escuro: o que a camada clara nao resolve sozinha ---------- */
[data-theme=dark] .nx-card { border-color: var(--nx-line); }
[data-theme=dark] .nx-tabela thead th { background: var(--nx-surface); }
[data-theme=dark] .nx-segmented__item { background: var(--nx-surface-2); }
[data-theme=dark] .nx-segmented__item--ativo, [data-theme=dark] .nx-segmented__item--ativo:hover, [data-theme=dark] .mk-faixa--filtros .mk-faixa__item--ativo, [data-theme=dark] .mk-chip--on { border-color: var(--nx-ink); background: var(--nx-ink); color: var(--nx-navy-950); }
[data-theme=dark] .mk-faixa--filtros .mk-faixa__item--ativo .mk-faixa__valor { background: rgba(0, 0, 0, 0.12); }
[data-theme=dark] .mk-topo__sob { color: var(--nx-teal-300); }
[data-theme=dark] .nx-rail::after { opacity: 0.09; }

/* 2026-10-13: os chips de etapa do BPMN sob o titulo saem de todas as telas (como a trilha): o processo fica no Fluxo
   de trabalho. A funcao cabecalho({etapas}) continua aceitando a lista; so nao a mostra. */
.mk-topo__etapas { display: none; }
.pn-secao__etapas, .av-etapas-cabeca { display: none; }
/* celular: selo ou tag longa nas acoes do topo quebra linha em vez de vazar o texto (auditoria de 2026-10-13: as telas
   de Configuracao › Topografia rolavam 6 px por causa do selo "so leitura") */
@media (max-width: 767px) { .mk-topo__acoes :is(.mk-selo, .nx-tag) { white-space: normal; line-height: 1.35; } }

/* Lista de notificacoes do botao de Conversas (casca.js, ligarConversas): fixa sob o botao, cabe em 375 px */
.mk-notif { position: fixed; z-index: 70; width: min(380px, calc(100vw - 16px)); overflow: hidden; border: 1px solid var(--nx-line-2); border-radius: var(--mk-raio-m); background: var(--nx-surface); box-shadow: var(--mk-sombra-3); }
.mk-notif[hidden] { display: none; }
.mk-notif__cabeca { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: var(--mk-borda); font-size: 13px; }
.mk-notif__cabeca .pi { color: var(--nx-info); }
.mk-notif__link { margin-left: auto; padding: 0; border: 0; background: none; color: var(--nx-info); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.mk-notif__lista { display: grid; max-height: min(420px, 60vh); overflow-y: auto; }
.mk-notif__item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-bottom: var(--mk-borda); color: var(--nx-ink); text-decoration: none; }
.mk-notif__item:hover, .mk-notif__item:focus-visible { background: var(--nx-surface-2); outline: none; }
.mk-notif__ico { display: grid; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--nx-ok) 14%, var(--nx-surface)); color: var(--nx-ok); place-items: center; }
.mk-notif__item--mencao .mk-notif__ico { background: color-mix(in srgb, var(--nx-info) 15%, var(--nx-surface)); color: var(--nx-info); }
.mk-notif__item--inclusao .mk-notif__ico { background: color-mix(in srgb, var(--nx-navy-500) 15%, var(--nx-surface)); color: var(--nx-ink); }
.mk-notif__corpo { display: grid; flex: 1; gap: 2px; min-width: 0; }
.mk-notif__corpo b { font-size: 12.5px; }
.mk-notif__corpo span { overflow: hidden; color: var(--nx-ink-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.mk-notif__corpo small { color: var(--nx-ink-3); font-size: 11px; }
.mk-notif__vazio { margin: 0; padding: 18px 14px; color: var(--nx-ink-3); font-size: 12.5px; line-height: 1.45; }
.mk-notif__pe { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: space-between; padding: 9px 12px; background: var(--nx-surface-2); }
.mk-notif__pe a { display: inline-flex; gap: 6px; align-items: center; color: var(--nx-info); font-size: 12px; font-weight: 600; text-decoration: none; }
.mk-notif__pe small { color: var(--nx-ink-3); font-size: 11px; }

/* Relatorio de campo da definicao (campo/relatorio-definicao.js, reuniao de 2026-10-10): a barra de filtro, a faixa
   dos imoveis visitados ("um quadradinho, um, dois, tres, quatro") e o detalhe do imovel. Classes emitidas SO por
   esse modulo; a proposta tem as rc-* no <style> de campo/relatorio.html. */
.mk-rcd-filtro label { display: inline-flex; gap: 6px; align-items: center; color: var(--nx-ink-2); font-size: 12px; font-weight: 600; }
.mk-rcd-filtro .nx-input { width: 140px; font-family: var(--nx-fm); font-size: 12.4px; }
.mk-rcd-filtro .nx-select { min-width: 190px; }
.mk-rcd-imoveis { flex-wrap: wrap; }
.mk-rcd-imovel { cursor: pointer; font: inherit; font-size: 12px; }
.mk-rcd-imovel small { color: var(--nx-ink-3); font-family: var(--nx-fm); }
.mk-rcd-imovel:focus-visible { outline: 2px solid var(--nx-teal-500); outline-offset: 2px; }
.mk-rcd-detalhe { display: grid; gap: 18px; }
.mk-rcd-lgpd { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin: 0; padding: 8px 14px; border-top: 1px solid var(--nx-line); background: var(--nx-surface-2); color: var(--nx-ink-2); font-size: 11.8px; }
.mk-rcd-lgpd .pi { color: var(--nx-warn); font-size: 11px; }
.mk-rcd-lgpd b { color: var(--nx-ink); }
.mk-rcd-consulta { margin-left: auto; color: var(--nx-ink-3); font-size: 11.5px; }

/* Fluxo cadastral da definicao (esteira/fluxo-definicao.js, reuniao de 2026-10-10): o minimapa REAL no lugar do
   desenho ilustrativo — "de colocar o mapa real aqui e tal" [00:55:24] — com o imovel escolhido em destaque e os
   vizinhos esmaecidos [00:54:46-00:54:57]. Classes emitidas SO por esse modulo; a proposta tem as .fl-* no <style>
   de esteira/fluxo.html e o desenho ilustrativo nas .es-mapa* de esteira/esteira.css:81-86, que ficam intocadas.
   A folha do mapa precisa de position/z-index proprios: os paineis do Leaflet sao absolutos e sem contexto de
   empilhamento subiriam sobre a faixa de versoes (a mesma razao de .mp-mapa em mapa/mapa.css:52). O quadradinho da
   legenda leva box-sizing porque o Nexus gerado nao tem box-sizing global (esteira/esteira.css:89). */
.mk-flx-trecho { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; align-items: start; }
.mk-flx-trecho .nx-kv strong { min-width: 0; overflow-wrap: anywhere; }
.mk-flx-atencao { max-height: 380px; }
.mk-flx-atencao td:first-child { width: 58px; }
.mk-flx-os { display: inline-flex; gap: 6px; align-items: center; color: var(--nx-ink-2); font-size: 12px; font-weight: 600; }
.mk-flx-os .nx-select { min-width: 210px; font-size: 12.4px; }
.mk-flx-mapa { display: grid; gap: 6px; min-width: 0; }
.mk-flx-mapa__folha { position: relative; z-index: 0; height: 260px; overflow: hidden; border: 1px solid var(--nx-line); border-radius: var(--nx-r-m); background: var(--nx-surface-3); }
.mk-flx-mapa__folha.leaflet-container { font-family: var(--nx-ff); }
.mk-flx-mapa__folha .leaflet-tooltip { border-color: var(--nx-line); border-radius: 6px; background: var(--nx-surface); box-shadow: var(--nx-shadow-1); color: var(--nx-ink); font-size: 11.4px; }
.mk-flx-mapa__folha .leaflet-bar a { border-color: var(--nx-line); background-color: var(--nx-surface); color: var(--nx-ink); }
.mk-flx-legenda { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; color: var(--nx-ink-3); font-size: 10.8px; }
.mk-flx-legenda span { display: inline-flex; gap: 5px; align-items: center; }
.mk-flx-legenda i { display: block; width: 12px; height: 9px; border-radius: 2px; box-sizing: border-box; }
.mk-flx-legenda__nota { margin-left: auto; font-family: var(--nx-fm); }
.mk-flx-chave--alvo { border: 1.6px solid var(--nx-info); background: color-mix(in srgb, var(--nx-teal-500) 34%, transparent); }
.mk-flx-chave--vizinho { border: 1px dashed var(--nx-ink-4); background: color-mix(in srgb, var(--nx-ink-4) 10%, transparent); }
.mk-flx-chave--faixa { border: 1px dashed var(--nx-teal-500); background: color-mix(in srgb, var(--nx-teal-500) 10%, transparent); }

/* Triagem documental na definicao (Fatia 08, 13/10): a tela de consulta. Emitidas so por cadastro/triagem-definicao.js. */
.mk-tgd-os { display: inline-flex; gap: 6px; align-items: center; color: var(--nx-ink-2); font-size: 12px; font-weight: 600; }
.mk-tgd-os .nx-select { min-width: 230px; font-size: 12.4px; }
.mk-tgd-consulta { align-items: flex-start; line-height: 1.5; }
.mk-tgd-consulta b, .mk-tgd-consulta i:not(.pi) { color: var(--nx-ink); }
.mk-tgd-consulta > .pi { margin-top: 2px; }
.mk-tgd-origem { flex: 0 0 auto; padding: 0 5px; border: 1px solid var(--nx-line); border-radius: 4px; color: var(--nx-ink-2); font: 600 9.8px var(--nx-fm); }
.mk-tgd-origem--mao { border-color: color-mix(in srgb, var(--nx-warn) 45%, transparent); color: var(--nx-warn); }
.mk-tgd-marca { display: inline-flex; gap: 5px; align-items: center; color: var(--nx-ink-3); font-size: 11.4px; }
.mk-tgd-marca .pi { font-size: 10px; }
.mk-tgd-saida { display: grid; gap: 7px; }
.mk-tgd-saida b { font-size: 12.2px; font-weight: 600; line-height: 1.4; }
.mk-tgd-nota { margin: 0; padding: 12px 16px; border: 1px solid var(--nx-line); border-radius: var(--mk-raio-m); background: var(--nx-surface-2); color: var(--nx-ink-3); font-size: 11.9px; line-height: 1.55; }
.mk-tgd-nota b { color: var(--nx-ink-2); }

/* "+ Nova pendencia" na definicao (Fatia 09, 13/10). Emitidas so por cadastro/triagem-definicao.js e
   cadastro/nova-pendencia-definicao.js. */
.mk-pend-cod { display: flex; gap: 8px; align-items: baseline; margin: 0; padding: 7px 10px; border: var(--mk-borda); border-radius: var(--mk-raio-s); background: var(--nx-surface-2); }
.mk-pend-cod code { color: var(--nx-ink); font: 700 13px var(--nx-fm); }
.mk-pend-cod small { color: var(--nx-ink-3); font-size: 10.6px; }
.mk-pend-quem { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.mk-pend-quem--erro .tg-pr-escolha { border-color: var(--nx-crit); }
.mk-pend-pista { font-variant-numeric: tabular-nums; }
.mk-pend-nova { display: block; color: var(--nx-info); font-size: 10.6px; font-weight: 600; }
.mk-pend-trava { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; color: var(--nx-ink-3); font-size: 11.4px; }
.mk-pend-trava .pi { font-size: 10px; }
.mk-pend-nossas { display: inline-flex; gap: 7px; align-items: center; }
.mk-pend-nossas .pi { color: var(--nx-info); font-size: 10px; }

/* Cadastro de escritorio na definicao (Fatia 10, 13/10): a casca da tela — o seletor de OS e os atalhos no topo, a
   faixa da regra de entrada da aba Cadastro, o bloco de nota das abas que ficaram como na proposta e a area de
   largar da planilha. Emitidas so por cadastro/escritorio-definicao.js. */
.mk-cad-atalhos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mk-cad-os { display: inline-flex; gap: 6px; align-items: center; color: var(--nx-ink-2); font-size: 12px; font-weight: 600; }
.mk-cad-os .nx-select { min-width: 230px; font-size: 12.4px; }
.mk-cad-ferramentas { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 4px 4px 11px; border: 1px dashed var(--nx-line-2); border-radius: 999px; }
.mk-cad-ferramentas__rot { display: inline-flex; gap: 5px; align-items: center; color: var(--nx-ink-3); font: 650 10.5px var(--nx-ff); letter-spacing: 0.05em; text-transform: uppercase; }
.mk-cad-marca { display: inline-flex; gap: 5px; align-items: center; color: var(--nx-ink-3); font-size: 11.4px; }
.mk-cad-marca .pi, .mk-cad-ferramentas__rot .pi { font-size: 10px; }
.mk-cad-entrada { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border: 1px solid var(--nx-info-bd); border-radius: var(--mk-raio-m); background: var(--nx-info-bg); color: var(--nx-ink-2); font-size: 12.2px; line-height: 1.5; }
.mk-cad-entrada b, .mk-cad-entrada i:not(.pi) { color: var(--nx-ink); }
.mk-cad-entrada > .pi { margin-top: 2px; color: var(--nx-info); }
.mk-cad-bloco { display: grid; gap: 10px; padding: 16px 18px; }
.mk-cad-bloco header { display: flex; gap: 12px; align-items: flex-start; }
.mk-cad-bloco__ico { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--nx-teal-500) 22%, var(--nx-line)); border-radius: 10px; background: color-mix(in srgb, var(--nx-teal-500) 10%, var(--nx-surface)); color: var(--nx-teal-600); font-size: 14px; }
.mk-cad-bloco h2 { margin: 0; color: var(--nx-ink); font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; }
.mk-cad-bloco p { margin: 4px 0 0; color: var(--nx-ink-2); font-size: 12.4px; line-height: 1.55; }
.mk-cad-bloco :is(.mk-cad-bloco__fala, .mk-cad-bloco__aberto) { display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.mk-cad-bloco__fala .pi { margin-top: 3px; color: var(--nx-teal-600); font-size: 11px; }
.mk-cad-bloco__aberto .pi { margin-top: 3px; color: var(--nx-warn); font-size: 11px; }
.mk-cad-bloco p.mk-cad-bloco__nota { padding: 10px 12px; border-radius: var(--mk-raio-s); background: var(--nx-surface-2); color: var(--nx-ink-3); font-size: 11.9px; }
.mk-cad-bloco .nx-btn { justify-self: start; }
.mk-cad-largar { display: grid; gap: 4px; place-items: center; padding: 26px 16px; border: 2px dashed var(--nx-line-2); border-radius: var(--mk-raio-m); background: var(--nx-surface-2); color: var(--nx-ink-3); font-size: 11.6px; }
.mk-cad-largar .pi { color: var(--nx-ink-4); font-size: 20px; }
.mk-cad-largar b { color: var(--nx-ink-2); font-size: 13px; }
.mk-cad-nota { margin: 0; padding: 12px 16px; border: 1px solid var(--nx-line); border-radius: var(--mk-raio-m); background: var(--nx-surface-2); color: var(--nx-ink-3); font-size: 11.9px; line-height: 1.55; }
.mk-cad-nota b { color: var(--nx-ink-2); }

/* Importar planilha na definicao (Fatia 11, 13/10): a area de largar que aceita arquivo, o mapeamento coluna a
   coluna e a previa. Emitidas so por cadastro/escritorio-definicao.js. */
.mk-cad-largar--escolher { cursor: pointer; transition: border-color var(--mk-rapido), background-color var(--mk-rapido); }
.mk-cad-largar--escolher:hover, .mk-cad-largar--sobre { border-color: var(--nx-teal-500); background: color-mix(in srgb, var(--nx-teal-500) 8%, var(--nx-surface)); }
.mk-cad-largar--escolher:focus-within { outline: 2px solid var(--nx-teal-500); outline-offset: 2px; }
.mk-imp-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mk-imp-arq { color: var(--nx-ink-3); font-size: 11.8px; }
.mk-imp-arq b { color: var(--nx-ink); }
.mk-imp-chip { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 7px; border: 1px solid var(--nx-line); border-radius: 999px; background: var(--nx-surface-2); color: var(--nx-ink-2); font: 500 11px var(--nx-fm); }
.mk-imp-tabela td small { display: block; color: var(--nx-ink-3); font-size: 10.8px; }
.mk-imp-tabela th small { display: block; color: var(--nx-ink-3); font: 400 10.4px var(--nx-fm); letter-spacing: 0; text-transform: none; }
.mk-imp-tabela .nx-select { width: 100%; min-width: 180px; font-size: 12.2px; }
.mk-imp-tag { display: inline-flex; gap: 5px; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11.2px; font-weight: 600; }
.mk-imp-tag .pi { font-size: 10px; }
.mk-imp-tag--auto { background: var(--nx-ok-bg); color: var(--nx-ok); }
.mk-imp-tag--mao { background: var(--nx-info-bg); color: var(--nx-info); }
.mk-imp-tag--falta { background: var(--nx-warn-bg); color: var(--nx-warn); }
.mk-imp-alvo--falta > td:first-child { box-shadow: inset 3px 0 0 var(--nx-warn); }
.mk-imp-ex { color: var(--nx-ink-3); font: 400 11.6px var(--nx-fm); }
.mk-imp-cod { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mk-imp-previa td { white-space: nowrap; }
.mk-imp-grita, .mk-imp-sobra { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--mk-raio-s); background: var(--nx-warn-bg); color: var(--nx-ink-2); font-size: 12px; line-height: 1.5; }
.mk-imp-grita > .pi, .mk-imp-sobra > .pi { margin-top: 2px; color: var(--nx-warn); }
.mk-imp-grita--ok { background: var(--nx-ok-bg); }
.mk-imp-grita--ok > .pi { color: var(--nx-ok); }
.mk-imp-sobra { background: var(--nx-surface-2); }
.mk-imp-sobra > .pi { color: var(--nx-ink-4); }

/* Poligonal refinada na definicao (Fatia 12, 13/10): a faixa dos cinco cartoes do topo sai e vira UMA barra de
   filtro compacta — "Ai reduz para ser um filtro aqui para nao roubar esse espaco dessa tela que e o que e
   importante" [01:23:51-01:23:56] —, e a exportacao fala KML [01:25:10]. Emitidas so por
   cadastro/poligonal-definicao.js. As quatro regras compostas (.mk-pgd-barra .pg-filtros, .pg-svg.mk-pgd-svg,
   .pg-mapa.mk-pgd-mapa .pg-norte e .pg-mapa.mk-pgd-mapa .pg-legenda) sao compostas de proposito: cadastro/poligonal.css entra DEPOIS do mock.css no
   <head>, e um seletor de uma classe so perderia a cascata para a regra da proposta. */
.mk-pgd-barra { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 9px 12px; border: var(--mk-borda); border-radius: var(--mk-raio-l); background: var(--nx-surface); box-shadow: var(--mk-sombra-1); }
.mk-pgd-barra .nx-sfield { width: 268px; }
/* os seis chips numa linha que quebra, e nao na grade de 2 colunas da cabeca da lista da proposta */
.mk-pgd-barra .pg-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-pgd-barra__conta { margin-left: auto; color: var(--nx-ink-3); font-family: var(--nx-fm); font-size: 11.4px; font-variant-numeric: tabular-nums; }
.mk-pgd-os { display: inline-flex; gap: 6px; align-items: center; color: var(--nx-ink-2); font-size: 12px; font-weight: 600; }
.mk-pgd-os .nx-select { min-width: 210px; font-size: 12.4px; }
/* o desenho e estatico: sem pan nem zoom, o cursor nao pode prometer arraste */
.pg-svg.mk-pgd-svg { cursor: default; }
/* sem os botoes de zoom da proposta, a rosa dos ventos sobe para o alto da folha; e sem a barra de escala, a
   legenda desce para o pe (na proposta ela fica em bottom: 30px para nao cobrir a escala) */
.pg-mapa.mk-pgd-mapa .pg-norte { top: 10px; }
.pg-mapa.mk-pgd-mapa .pg-legenda { bottom: 10px; }
.mk-pgd-titulo { margin: 0; color: var(--nx-ink-3); font-size: 10px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
.mk-pgd-titulo .mk-mono { color: var(--nx-ink-2); letter-spacing: 0; }
.mk-pgd-kml { padding: 9px 11px; border: var(--mk-borda); border-radius: var(--mk-raio-m); background: var(--nx-surface-2); }
.mk-pgd-kml b { color: var(--nx-ink); }
@media (max-width: 1100px) { .mk-pgd-barra .nx-sfield { width: 100%; } .mk-pgd-barra__conta { margin-left: 0; } }

/* Verificacao de vaos e sobreposicao na definicao da Poligonal (Fatia 13A, 13/10): "o sistema vai comecar daqui e
   vai fazer uma lista aqui, todos os lugares que tem um vaozinho" [01:26:40-01:26:44]; "uma propriedade se vai dar
   a outra, isso jamais" [01:27:53-01:27:55]. Emitidas so por cadastro/poligonal-definicao.js.
   DUAS regras COMPOSTAS de proposito: .pg-viz.mk-pgd-vz--* polygon tem de vencer .pg-viz polygon
   (poligonal.css:157), e .mk-pgd-svg .mk-pgd-marca blinda as marcas das regras de SVG da proposta - cadastro/
   poligonal.css entra DEPOIS do mock.css no <head> (poligonal-definicao.html:13-14). As classes .mk-pgd-leg--*
   ficam simples porque .pg-legenda i nao define background (poligonal.css:245-246), igual as .pg-leg--* da
   proposta. --pg-papel existe aqui porque o desenho esta dentro de .pg-area (poligonal.css:18-26). */
.mk-pgd-verif { display: grid; gap: 8px; padding: 10px 12px; border-bottom: var(--mk-borda); background: var(--nx-surface); }
.mk-pgd-verif .pg-alerta, .mk-pgd-verif .pg-leitura { align-items: flex-start; font-size: 12.2px; }
.mk-pgd-verif .pg-alerta .nx-btn, .mk-pgd-verif .pg-leitura .nx-btn { flex: 0 0 auto; }
.mk-pgd-verif__det { display: grid; gap: 3px; margin: 5px 0 0; padding: 0; list-style: none; color: var(--nx-ink-2); font-size: 11.6px; line-height: 1.45; }
.mk-pgd-verif__det b { color: var(--nx-ink); }
.mk-pgd-verif__det .mk-mono { color: var(--cd-acento); }
.mk-pgd-verif__det span { color: var(--nx-ink-3); }
.mk-pgd-verif__pe { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.mk-pgd-verif__resumo { color: var(--nx-ink-3); font-size: 11.4px; font-variant-numeric: tabular-nums; }
.mk-pgd-verif__resumo b { color: var(--nx-ink); font-family: var(--nx-fm); font-weight: 650; }
.mk-pgd-verif__resumo b.mk-pgd-verif__crit { color: var(--nx-crit); }
.mk-pgd-verif__acoes { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.mk-pgd-verif__acoes .nx-icon-btn { width: 28px; height: 28px; }
/* o alfinete: o vao tem centimetros e o desenho tem ~1,3 m por unidade do viewBox, logo a marca nao e o vao em
   escala - seria menos de um pixel - e sim um pino com a medida dentro */
.mk-pgd-svg .mk-pgd-marca circle { stroke: var(--pg-papel); stroke-width: 1.6; }
.mk-pgd-svg .mk-pgd-marca text { fill: var(--pg-papel); font-family: var(--nx-fm); font-size: 8.4px; font-weight: 700; pointer-events: none; }
.mk-pgd-svg .mk-pgd-marca--sobre circle { fill: var(--nx-crit); }
.mk-pgd-svg .mk-pgd-marca--vao circle { fill: color-mix(in srgb, var(--nx-warn) 88%, var(--nx-ink)); }
.mk-pgd-svg .mk-pgd-cruzo { fill: var(--nx-crit); stroke: var(--pg-papel); stroke-width: 1.1; }
.mk-pgd-svg .mk-pgd-vao-linha { stroke: color-mix(in srgb, var(--nx-warn) 88%, var(--nx-ink)); stroke-linecap: round; stroke-width: 2.2; }
/* o poligono do vizinho da divisa achada */
.pg-viz.mk-pgd-vz--sobre polygon { fill: color-mix(in srgb, var(--nx-crit) 13%, transparent); stroke: var(--nx-crit); stroke-width: 1.2; }
.pg-viz.mk-pgd-vz--vao polygon { fill: color-mix(in srgb, var(--nx-warn) 13%, transparent); stroke: color-mix(in srgb, var(--nx-warn) 72%, var(--nx-ink)); stroke-width: 1.2; }
.mk-pgd-leg--sobre { background: color-mix(in srgb, var(--nx-crit) 25%, transparent); border: 1.4px solid var(--nx-crit); }
.mk-pgd-leg--vao { background: color-mix(in srgb, var(--nx-warn) 25%, transparent); border: 1.4px solid color-mix(in srgb, var(--nx-warn) 80%, var(--nx-ink)); }
/* a bolinha do imovel impedido, na lista lateral */
.mk-pgd-lista-flag { flex: 0 0 7px; height: 7px; border-radius: 50%; background: var(--nx-crit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-crit) 18%, transparent); }
/* a lista da OS na gaveta */
.mk-pgd-divisas { display: grid; gap: 10px; }
.mk-pgd-divisas .mk-pgd-titulo + .pg-nota { margin-top: 0; }
.mk-pgd-div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 9px 11px; border: var(--mk-borda); border-radius: var(--mk-raio-m); }
.mk-pgd-div--sobre { border-color: color-mix(in srgb, var(--nx-crit) 35%, var(--nx-line)); background: color-mix(in srgb, var(--nx-crit) 5%, var(--nx-surface)); }
.mk-pgd-div--vao { border-color: color-mix(in srgb, var(--nx-warn) 38%, var(--nx-line)); background: color-mix(in srgb, var(--nx-warn) 6%, var(--nx-surface)); }
.mk-pgd-div__par { display: flex; flex-wrap: wrap; gap: 4px 7px; align-items: center; min-width: 0; font-size: 12.4px; }
.mk-pgd-div__par b { font-size: 12.6px; font-weight: 700; }
.mk-pgd-div__par small { overflow: hidden; color: var(--nx-ink-3); font-size: 11.2px; text-overflow: ellipsis; white-space: nowrap; }
.mk-pgd-div__par .pi { color: var(--nx-ink-4); font-size: 10px; }
.mk-pgd-div__larg { color: var(--nx-ink); font-size: 13px; font-weight: 680; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-pgd-div__num { grid-column: 1 / -1; margin: 0; color: var(--nx-ink-2); font-size: 11.6px; line-height: 1.5; }
.mk-pgd-div__num .mk-mono { color: var(--cd-acento); }
.mk-pgd-div__ok { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.mk-pgd-div__ok .nx-btn { font-size: 11.6px; }
@media (max-width: 1100px) { .mk-pgd-verif__acoes { margin-left: 0; } }

/* Premissas da OS da definicao (projeto-os/premissas-definicao.js): o chip de etapa perdeu o "x" e tirar etapa foi
   para a aba Etapas, com recusa quando ja ha trabalho feito. Classes que SO a definicao emite. .nx-chip
   (nexus.css:947) nao tem cursor de clique — o aspecto de acao vinha do .nx-chip__remove, que aqui nao existe:
   a regra so da o tom de leitura. .nx-chip.mk-prd-chip (0,2,0) vence .nx-chip (0,1,0) e nao disputa nada de
   premissas.css nem de projeto-os.css. */
.nx-chip.mk-prd-chip { background: var(--nx-surface-2); color: var(--nx-ink-2); cursor: default; }
.nx-chip.mk-prd-chip .pi-lock { color: var(--nx-ink-4); font-size: 9.5px; }
.mk-prd-recusa { align-items: flex-start; margin-bottom: 12px; }
.mk-prd-recusa .pi { margin-top: 2px; }
/* .nx-tabela tem thead th.r (nexus.css:1394) e nao tem tbody td.r. */
.nx-tabela.mk-prd-etapas tbody td.r { text-align: right; }
.nx-tabela.mk-prd-etapas tbody td small { font-size: 11.5px; }

/* Cadastro fisico da definicao (cadastro-fisico-definicao.js): a linha da lista nao abre janela, so leva a ficha
   do imovel, e por isso o botao dela nao pode esperar o hover. propriedades.css:33-35 esconde o botao
   (.pr-acoes .nx-icon-btn, 0,3,0) e mostra o ultimo a 0.55 (:last-child, tambem 0,3,0) — e essa folha entra DEPOIS
   do mock.css, logo empate perde. Os seletores abaixo sao 0,4,0 e ganham. .mk-cfd-ver so a definicao emite; o
   involucro .pr-acoes vem fixo de comum.js:94 e nao aceita classe. */
.pr-tabela .pr-acoes .nx-icon-btn.mk-cfd-ver { opacity: 1; color: var(--nx-ink-3); }
.pr-tabela tr:hover .pr-acoes .nx-icon-btn.mk-cfd-ver { color: var(--nx-info); }

/* Analise de matricula, a definicao (Fatia 16): a barra do topo, o cartao do disparo automatico e a nota do pe.
   Classes emitidas so por ia/matricula-definicao.js. */
.mk-mat-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mk-mat-barra .nx-sfield { flex: 1 1 320px; min-width: 240px; }
.mk-mat-barra__conta { margin-left: auto; color: var(--nx-ink-3); font-size: 12.2px; white-space: nowrap; }
.mk-mat-os { display: inline-flex; gap: 7px; align-items: center; color: var(--nx-ink-3); font-size: 12.2px; }
.mk-mat-auto .nx-card__body { display: grid; gap: 12px; }
.mk-mat-auto .ia-nota { margin: 0; }
.mk-mat-fala, .mk-mat-aberto { display: flex; gap: 9px; align-items: flex-start; margin: 0; padding: 10px 12px; border: var(--mk-borda); border-radius: var(--mk-raio-s); color: var(--nx-ink-2); font-size: 12.4px; line-height: 1.5; }
.mk-mat-aberto { border-color: var(--nx-warn-bd); background: color-mix(in srgb, var(--nx-warn) 6%, transparent); }
.mk-mat-conta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mk-mat-conta > span { display: grid; gap: 1px; padding: 9px 12px; border: var(--mk-borda); border-radius: var(--mk-raio-s); color: var(--nx-ink-3); font-size: 11.8px; }
.mk-mat-lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mk-mat-lista li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 7px 10px; border: var(--mk-borda); border-radius: var(--mk-raio-s); }
.mk-mat-nota { margin: 0; color: var(--nx-ink-3); font-size: 12.3px; line-height: 1.65; }

/* Analise de coordenadas, a definicao (Fatia 17): a lista de documentos da propriedade como referencia, com a
   matricula marcada. Classes emitidas so por ia/coordenadas-definicao.js. */
.mk-coord-entrada.ia-entrada { align-items: flex-end; }
.mk-coord-os { flex: 0 1 260px; }
.mk-coord-docs .nx-card__body { display: grid; gap: 12px; } .mk-coord-docs .nx-empty { margin: 0; }
.mk-coord-fala, .mk-coord-aberto { display: flex; gap: 9px; align-items: flex-start; margin: 0; padding: 10px 12px; border: var(--mk-borda); border-radius: var(--mk-raio-s); color: var(--nx-ink-2); font-size: 12.4px; line-height: 1.5; }
.mk-coord-aberto { border-color: var(--nx-warn-bd); background: color-mix(in srgb, var(--nx-warn) 6%, transparent); }
.mk-coord-conta, .mk-coord-ref { margin: 0; color: var(--nx-ink-3); font-size: 12px; }
.mk-coord-ref { margin-bottom: 10px; } .mk-coord-lista { display: grid; gap: 6px; }
.mk-coord-item { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 8px 11px; border: var(--mk-borda); border-radius: var(--mk-raio-s); cursor: pointer; }
.mk-coord-item--marcada { border-color: var(--nx-ok-bd); background: color-mix(in srgb, var(--nx-ok) 7%, transparent); }
.mk-coord-item--sem { color: var(--nx-ink-3); cursor: default; opacity: 0.72; }
.mk-coord-item__doc { display: grid; flex: 1 1 260px; gap: 1px; min-width: 0; }
.mk-coord-item__doc b { font-size: 12.8px; } .mk-coord-item__meta { color: var(--nx-ink-3); font-size: 11.6px; }
.mk-coord-item__arq { color: var(--nx-ink-3); font-size: 11.6px; overflow-wrap: anywhere; }
.mk-coord-fora { display: grid; gap: 7px; padding: 10px 12px; border: 1px dashed var(--nx-line); border-radius: var(--mk-raio-s); }
.mk-coord-fora h3 { margin: 0; font-size: 12.4px; font-weight: 680; }
.mk-coord-fora p, .mk-coord-nota { margin: 0; color: var(--nx-ink-3); font-size: 12.1px; line-height: 1.6; }

/* Modelos de memorial, o catalogo geral (Fatia 18): a primeira tela que so a definicao tem. Classes emitidas so por
   topografia/modelos-memorial-definicao.js. */
.mk-cmm-sep { display: grid; gap: 12px; }
.mk-cmm-sep__par { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.mk-cmm-sep__lado { display: grid; gap: 7px; align-content: start; padding: 10px 12px; border: var(--mk-borda); border-radius: var(--mk-raio-s); }
.mk-cmm-sep__lado h3 { display: flex; gap: 7px; align-items: center; margin: 0; font-size: 12.4px; font-weight: 680; }
.mk-cmm-sep__lado ul, .mk-cmm-campos { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .mk-cmm-sep__lado li { display: grid; gap: 1px; color: var(--nx-ink-3); font-size: 12px; line-height: 1.5; }
.mk-cmm-fala, .mk-cmm-aberto { display: flex; gap: 9px; align-items: flex-start; margin: 0; padding: 10px 12px; border: var(--mk-borda); border-radius: var(--mk-raio-s); color: var(--nx-ink-2); font-size: 12.4px; line-height: 1.55; }
.mk-cmm-aberto { border-color: var(--nx-warn-bd); background: color-mix(in srgb, var(--nx-warn) 6%, transparent); }
.mk-cmm-grupo th { color: var(--nx-ink-3); font-size: 11.6px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mk-cmm-sigla { color: var(--nx-ink-3); font-weight: 600; letter-spacing: 0; text-transform: none; }
.mk-cmm-sub { display: block; color: var(--nx-ink-3); font-size: 11.6px; } .mk-cmm-v { color: var(--nx-ink-3); font-size: 11.8px; font-weight: 600; }
.mk-cmm-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin: 0; } .mk-cmm-kv > div, .mk-cmm-campos li { padding: 8px 10px; border: var(--mk-borda); border-radius: var(--mk-raio-s); }
.mk-cmm-kv > div { display: grid; gap: 1px; } .mk-cmm-kv dt { color: var(--nx-ink-3); font-size: 11.4px; }
.mk-cmm-kv dd { margin: 0; font-size: 12.4px; overflow-wrap: anywhere; }
.mk-cmm-campos li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mk-cmm-h3 { margin: 4px 0 0; font-size: 12.6px; font-weight: 680; } .mk-cmm-pe { font-size: 12.3px; line-height: 1.65; }
.mk-cmm-nota { margin: 0; color: var(--nx-ink-3); font-size: 12.1px; line-height: 1.6; }
/* Amostras coletadas, a definicao (Fatia 19): trilha do fluxo, cartao da validade, regua do prazo e marca da vencida.
   So a pagina amostras-definicao.html emite estas classes. */
.mk-eac-trilha, .mk-eac-val { display: grid; gap: 8px; padding: 12px 14px; border: var(--mk-borda); border-radius: var(--mk-raio-m); background: var(--nx-surface); }
.mk-eac-trilha h2, .mk-eac-val h2 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; font-size: 13.4px; font-weight: 700; }
.mk-eac-trilha h2 .pi { font-size: 11px; color: var(--nx-ink-3); } .mk-eac-passo .pi { margin-top: 2px; color: var(--nx-ink-3); }
.mk-eac-trilha ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.mk-eac-passo { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: var(--mk-borda); border-radius: var(--mk-raio-s); }
.mk-eac-passo--atual { border-color: var(--nx-ok-bd); box-shadow: inset 2px 0 0 var(--nx-ok); }
.mk-eac-passo b { display: block; font-size: 12.8px; } .mk-eac-passo span { color: var(--nx-ink-2); font-size: 12.1px; line-height: 1.55; }
.mk-eac-volta, .mk-eac-nota, .mk-eac-pe { margin: 0; color: var(--nx-ink-3); font-size: 12.1px; line-height: 1.6; }
.mk-eac-volta { display: flex; gap: 6px; align-items: flex-start; } .mk-eac-val p { margin: 0; color: var(--nx-ink-2); font-size: 12.4px; line-height: 1.65; }
.mk-eac-regua { display: inline-flex; gap: 6px; align-items: center; color: var(--nx-ink-3); font-size: 12.2px; }
.mk-eac-venc { color: var(--nx-crit); font-weight: 600; } .mk-eac-linha--venc > td:first-child { box-shadow: inset 2px 0 0 var(--nx-crit); }

/* Fatia 13B: a esteira dos vaos. Emitido so por cadastro/poligonal-definicao.js, dentro da gaveta da verificacao. */
.mk-pgd-esteira { display: grid; gap: 6px; padding: 8px 11px; border: var(--mk-borda); border-radius: var(--mk-raio-m); background: var(--nx-surface-2); }
.mk-pgd-esteira__conta { color: var(--nx-ink-3); font-size: 11.6px; font-variant-numeric: tabular-nums; }
.mk-pgd-esteira__conta b { color: var(--nx-ink); font-family: var(--nx-fm); font-weight: 650; }
.mk-pgd-esteira__acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-pgd-esteira__fim { display: flex; gap: 6px; margin: 0; color: var(--nx-ink-2); font-size: 11.4px; line-height: 1.45; }
.mk-pgd-esteira__fim .pi { flex: 0 0 auto; color: var(--nx-ink-4); }
.mk-pgd-div--ok { border-color: color-mix(in srgb, var(--nx-ok) 34%, var(--nx-line)); background: color-mix(in srgb, var(--nx-ok) 5%, var(--nx-surface)); }
.mk-pgd-div--foco { outline: 2px solid var(--nx-teal-500); outline-offset: 1px; }
.mk-pgd-ok__quem { color: var(--nx-ink-3); font-size: 11.2px; }
.mk-pgd-ok__quem b { color: var(--nx-ink); }
.mk-pgd-motivo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mk-pgd-motivo .nx-input { flex: 1 1 240px; min-width: 170px; font-size: 12.2px; }
.mk-pgd-svg .mk-pgd-marca--ok circle { fill: var(--nx-ok); }
.mk-pgd-svg .mk-pgd-marca--foco circle { stroke: var(--nx-ink); stroke-width: 2.4; }

/* Codigos do BPMN so no Fluxo de trabalho (decisao da dona, 13 e 14/10/2026): etiquetas de etapa escritas a mao nos
   modulos (mk-etapa) somem fora da tela do fluxo. etapaChip() ja devolve vazio fora dela. */
gx-mock:not([tela="bpmn"]) .mk-etapa { display: none !important; }

/* Tela fora do menu do setor de quem esta no "Ver como" (casca.js, aplicarSetor) */
.mk-fora-do-setor { display: flex; gap: 12px; align-items: center; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--nx-info-bd); border-radius: var(--nx-r-l); background: var(--nx-info-bg); color: var(--nx-info-forte); }
.mk-fora-do-setor > .pi { flex: none; font-size: 15px; }
.mk-fora-do-setor p { flex: 1; margin: 0; font-size: 12.5px; line-height: 1.45; }
.mk-fora-do-setor .nx-btn { flex: none; }
@media (max-width: 640px) { .mk-fora-do-setor { flex-wrap: wrap; } .mk-fora-do-setor .nx-btn { margin-left: 27px; } }

/* Exportar esta tela (casca.js, ligarExportar) */
.mk-exportar__lista { display: grid; max-height: min(420px, 60vh); overflow: auto; }
.mk-exportar__item { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border-bottom: var(--mk-borda); }
.mk-exportar__item > span { display: grid; flex: 1; min-width: 0; gap: 1px; }
.mk-exportar__item b { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.mk-exportar__item small { color: var(--nx-ink-3); font-size: 11px; }
.mk-exportar__vazio { margin: 0; padding: 12px; color: var(--nx-ink-3); font-size: 12.5px; }
.mk-exportar__pe { display: flex; justify-content: flex-end; padding: 10px 12px; background: var(--nx-surface-2); }

/* Imprimir a tela: só o conteúdo, sem a casca */
@media print {
    .nx-rail, .nx-topbar, .mk-lateral, .mk-paleta, .mk-notif, .mk-fora-do-setor, .mk-comparar, [data-comparar] { display: none !important; }
    .nx-shell, .nx-conteudo-shell { display: block !important; margin: 0 !important; padding: 0 !important; }
    .nx-corpo { padding: 0 !important; }
    body { background: #fff !important; }
}

/* Celular (até 640px, pedido da dona: menus que se adaptam à tela): o menu lateral sai da tela e vira uma gaveta aberta
   pelo botão ☰ do topo, com os nomes completos (desfaz o trilho de ícones do tablet). casca.js: ligarMenuDoCelular. */
.mk-menu-botao, .mk-menu-cortina { display: none; }
@media (max-width: 640px) {
    .nx-shell, .nx-shell.nx-shell--recolhido { grid-template-columns: minmax(0, 1fr); }
    .nx-shell .nx-rail { position: fixed; z-index: 90; top: 0; bottom: 0; left: 0; width: min(304px, 86vw); transform: translateX(-104%); transition: transform 0.22s ease, box-shadow 0.22s ease; }
    .nx-shell.nx-shell--menu .nx-rail { transform: none; box-shadow: 0 0 44px rgba(0, 0, 0, 0.38); }
    .mk-menu-cortina { position: fixed; z-index: 85; inset: 0; display: block; background: rgba(3, 18, 26, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
    .nx-shell--menu .mk-menu-cortina { opacity: 1; pointer-events: auto; }
    .mk-menu-botao { display: inline-flex; flex: none; }
    .nx-shell .nx-rail .nx-rail__marca, .nx-shell .nx-rail .nx-usuario-resumo { display: flex; }
    .nx-shell .nx-rail .nx-rail__topo, .nx-shell .nx-rail .nx-rail__rodape { justify-content: space-between; padding-inline: 16px; }
    .nx-shell .nx-rail .nx-rail__recolher { display: none; }
    .nx-shell .nx-rail .mk-rail-busca { justify-content: flex-start; margin: 2px 12px 8px; padding: 8px 10px; }
    .nx-shell .nx-rail .mk-rail-busca span, .nx-shell .nx-rail .mk-rail-busca kbd { display: inline; }
    .nx-shell .nx-rail .nx-nav-grupo { margin: 1px 6px; }
    .nx-shell .nx-rail .nx-nav-grupo__cabecalho { justify-content: flex-start; padding: 9px 10px; }
    .nx-shell .nx-rail .nx-nav-grupo__nome { display: block; }
    .nx-shell .nx-rail .nx-nav-grupo__quantidade, .nx-shell .nx-rail .nx-nav-grupo__seta { display: inline-block; }
    .nx-shell .nx-rail .nx-nav-grupo .nx-nav-grupo__itens { position: static; display: none; min-width: 0; max-width: none; max-height: none; overflow: visible; margin: 2px 0 6px 18px; padding: 0 0 0 8px; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0; background: none; box-shadow: none; }
    .nx-shell .nx-rail .nx-nav-grupo:hover > .nx-nav-grupo__itens, .nx-shell .nx-rail .nx-nav-grupo:focus-within > .nx-nav-grupo__itens { display: none; }
    .nx-shell .nx-rail .nx-nav-grupo.nx-nav-grupo--aberto > .nx-nav-grupo__itens { display: block; }
    .nx-shell .nx-rail .nx-nav-grupo__titulo-flutuante { display: none; }
    .nx-shell .nx-rail .nx-nav-item { justify-content: flex-start; padding: 9px 12px; }
    .nx-shell .nx-rail .nx-nav-grupo__itens .nx-nav-item { padding-block: 8px; }
    .nx-shell .nx-rail .nx-nav-item span { display: inline; }
    .nx-shell .nx-rail .nx-nav-item--ativo::before { display: block; }
    .nx-topbar .nx-migalhas { flex: 1 1 calc(100% - 46px); }
}

/* ==========================================================================================================
   Refinamento 2 (2026-10-19, pedido da dona: "nao quero telas chatinhas, quadradas; bonito, agradavel, intuitivo").
   Em cima do refinamento de 13/10, sem mexer tela a tela: cantos mais macios, cartao clicavel que levanta ao passar,
   abas em pilula dentro de um trilho, titulo da tela com a marca (filete turquesa), barra de ferramentas e navegacao
   presas em vidro, foco visivel e transicoes curtas. Tudo com os tokens --nx-*, nos dois temas.
   ========================================================================================================== */
:root { --mk-raio-l: 16px; --mk-raio-m: 12px; }
.nx-card { border-radius: var(--mk-raio-l); }
.nx-card .nx-card { border-radius: var(--mk-raio-m); }
a.nx-card:hover, .nx-card.mk-clicavel:hover, .mk-lista-item:hover { box-shadow: var(--mk-sombra-2); transform: translateY(-1px); }
.mk-lista-item { transition: background var(--mk-rapido), box-shadow var(--mk-normal) var(--mk-ease), transform var(--mk-normal) var(--mk-ease); }

/* titulo da tela: eyebrow com filete da marca; a descricao mais respirada */
.mk-topo__sob { position: relative; padding-left: 14px; }
.mk-topo__sob::before { position: absolute; top: 50%; left: 0; width: 8px; height: 2px; border-radius: 2px; background: var(--nx-teal-500); transform: translateY(-50%); content: ""; }
.mk-topo__sob .pi { display: none; }
.mk-topo h1 { font-size: 23px; letter-spacing: -0.5px; }
.mk-topo p { font-size: 12.8px; }

/* abas: pilulas num trilho leve; a ativa fica branca com sombra, como um controle fisico */
.nx-tabs--caixa { gap: 2px; padding: 4px; border: 1px solid color-mix(in srgb, var(--nx-line) 85%, transparent); border-radius: 12px; background: var(--nx-surface-2); }
.nx-tabs--caixa .nx-tab { padding: 7px 13px; border: 0; border-radius: 9px; color: var(--nx-ink-2); font-size: 12.5px; font-weight: 550; transition: background var(--mk-rapido), color var(--mk-rapido), box-shadow var(--mk-rapido); }
.nx-tabs--caixa .nx-tab:hover { background: color-mix(in srgb, var(--nx-surface) 60%, transparent); color: var(--nx-ink); }
.nx-tabs--caixa .nx-tab--active, .nx-tabs--caixa .nx-tab[aria-current] { background: var(--nx-surface); color: var(--nx-ink); font-weight: 650; box-shadow: var(--mk-sombra-1); }
.nx-tabs--caixa .nx-tab--active::after { display: none; }

/* barras presas no alto (toolbar, navegacao de secoes): vidro */
.nx-toolbar, .pn-secoes { backdrop-filter: blur(10px) saturate(1.3); }
.nx-toolbar { border-radius: var(--mk-raio-m); }

/* estados de atencao: um fio colorido a esquerda em vez de caixa inteira pintada */
.nx-note { border-left-width: 3px; border-radius: 10px; }

/* botao primario com um brilho leve em cima e sombra na cor da marca */
.nx-btn--primary { background: linear-gradient(180deg, color-mix(in srgb, var(--nx-teal-500) 85%, #fff), var(--nx-teal-600)); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 14px -8px color-mix(in srgb, var(--nx-teal-800) 90%, transparent); }
.nx-btn--primary:hover:not(:disabled) { background: linear-gradient(180deg, var(--nx-teal-500), var(--nx-teal-700)); }

/* foco: anel turquesa, sem o azul do navegador */
:where(.nx-page) :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--nx-teal-500); outline-offset: 2px; }

/* o rolar da pagina mais suave e as entradas das secoes */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } a.nx-card:hover, .nx-card.mk-clicavel:hover, .mk-lista-item:hover { transform: none; } }

/* ---------- painel do setor (kit.js painelSetor, pente fino 2026-10-19): a OS no fluxo do BPMN, o prazo e a proxima acao.
   Nasceu no Cadastro (cd-fluxo) e virou kit na passada da Topografia; --mk-colunas = pastilhas por linha. ---------- */
.mk-fluxo { position: relative; display: grid; gap: 14px; overflow: hidden; padding: 18px 20px 14px; border-radius: var(--mk-raio-l); color: #eef6f7; isolation: isolate;
    background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--nx-teal-500) 34%, transparent), transparent 55%), linear-gradient(135deg, var(--nx-navy-950), var(--nx-navy-800) 60%, var(--nx-teal-800)); box-shadow: var(--mk-sombra-2); }
.mk-fluxo::after { position: absolute; inset: 0; z-index: -1; background-image: var(--mk-ruido); opacity: 0.05; mix-blend-mode: soft-light; content: ""; pointer-events: none; }
.mk-fluxo__cab { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr) auto; gap: 14px 22px; align-items: center; }
.mk-fluxo__sob { display: inline-flex; gap: 8px; align-items: center; color: var(--nx-teal-300); font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.mk-fluxo__sob i { width: 6px; height: 6px; border-radius: 50%; background: #5fd3a1; box-shadow: 0 0 0 4px rgba(95, 211, 161, 0.18); }
.mk-fluxo__sob .mk-mono { letter-spacing: 0; text-transform: none; }
.mk-fluxo__tit h2 { margin: 6px 0 4px; font-size: 21px; font-weight: 680; letter-spacing: -0.4px; line-height: 1.15; }
.mk-fluxo__tit p { margin: 0; color: #b9cdd5; font-size: 12.8px; } .mk-fluxo__tit p b { color: #fff; font-weight: 650; }
.mk-fluxo__acao { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; min-width: 0; padding: 10px 12px 10px 10px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; background: rgba(255, 255, 255, 0.07); color: inherit; text-decoration: none; transition: background var(--mk-rapido), border-color var(--mk-rapido), transform var(--mk-normal) var(--mk-ease); }
.mk-fluxo__acao:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); }
.mk-fluxo__acao > span:nth-child(2) { display: grid; min-width: 0; }
.mk-fluxo__acao small { color: var(--nx-teal-300); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.mk-fluxo__acao b { overflow: hidden; font-size: 13.2px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.mk-fluxo__acao em { overflow: hidden; color: #b9cdd5; font-size: 11.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.mk-fluxo__acao-ic { display: grid; width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, 0.1); font-size: 15px; place-items: center; }
.mk-fluxo__acao--crit .mk-fluxo__acao-ic { background: color-mix(in srgb, #ff9a8a 28%, transparent); color: #ffb4a8; }
.mk-fluxo__acao--warn .mk-fluxo__acao-ic { background: color-mix(in srgb, #f3c26b 26%, transparent); color: #ffd98a; }
.mk-fluxo__acao--ok .mk-fluxo__acao-ic { background: color-mix(in srgb, #5fd3a1 26%, transparent); color: #8fe0b8; }
.mk-fluxo__acao--info .mk-fluxo__acao-ic { background: color-mix(in srgb, var(--nx-teal-400) 30%, transparent); color: var(--nx-teal-300); }
.mk-fluxo__acao-ir { display: inline-flex; gap: 6px; align-items: center; color: #fff; font-size: 12px; font-weight: 650; white-space: nowrap; }
.mk-fluxo__acao-ir .pi { font-size: 10px; }
.mk-fluxo__prazo { display: flex; gap: 12px; align-items: center; }
.mk-fluxo__prazo .mk-anel__fundo { stroke: rgba(255, 255, 255, 0.14); } .mk-fluxo__prazo .mk-anel__valor { fill: #fff; }
.mk-fluxo__prazo > span { display: grid; } .mk-fluxo__prazo small { color: var(--nx-teal-300); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.mk-fluxo__prazo b { font-size: 14px; font-weight: 650; white-space: nowrap; } .mk-fluxo__prazo em { color: #b9cdd5; font-size: 11.5px; font-style: normal; }
/* a trilha: uma pastilha por etapa com a barra do quanto ja passou */
.mk-fluxo__trilha { display: grid; grid-template-columns: repeat(var(--mk-colunas, 9), minmax(0, 1fr)); gap: 6px; }
.mk-fluxo__et { position: relative; display: grid; gap: 2px; min-width: 0; padding: 9px 10px 8px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 11px; background: rgba(255, 255, 255, 0.05); color: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: background var(--mk-rapido), border-color var(--mk-rapido), transform var(--mk-normal) var(--mk-ease); }
.mk-fluxo__et:hover { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); }
.mk-fluxo__et i { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--nx-teal-400) var(--p), rgba(255, 255, 255, 0.1) var(--p)); }
.mk-fluxo__et--ok i { background: #5fd3a1; }
.mk-fluxo__et .mk-mono { color: #93aeb8; font-size: 10px; }
.mk-fluxo__et b { overflow: hidden; font-size: 11.8px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mk-fluxo__et small { color: #fff; font-size: 14px; font-weight: 680; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; } .mk-fluxo__et small em { color: #93aeb8; font-size: 11px; font-style: normal; font-weight: 500; }
.mk-fluxo__et--ok { border-color: color-mix(in srgb, #5fd3a1 40%, transparent); }
.mk-fluxo__et--ok b::after { margin-left: 4px; color: #5fd3a1; font-family: primeicons; font-size: 9px; content: "\e909"; }
.mk-fluxo__pe { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.mk-fluxo__pe > span { display: inline-flex; gap: 6px; align-items: center; min-width: 0; color: #dbe8ec; font-size: 12.2px; font-weight: 600; }
.mk-fluxo__pe > span small { color: #93aeb8; font-size: 10.5px; font-weight: 600; }
.mk-fluxo__pe .mk-avatar { box-shadow: 0 0 0 2px var(--nx-navy-900); }
.mk-fluxo__origem { margin-left: auto; border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #b9cdd5; }
@container (max-width: 1180px) { .mk-fluxo__cab { grid-template-columns: minmax(0, 1fr) auto; } .mk-fluxo__acao { grid-column: 1 / -1; } }
@media (max-width: 1180px) { .mk-fluxo__cab { grid-template-columns: minmax(0, 1fr) auto; } .mk-fluxo__acao { grid-column: 1 / -1; } }
@media (max-width: 900px) { .mk-fluxo__trilha { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mk-fluxo__et--decisao { border-style: dashed; border-color: color-mix(in srgb, #f3c26b 45%, transparent); }
.mk-fluxo__et--decisao .mk-mono { color: #ffd98a; }
.mk-fluxo__et--decisao.mk-fluxo__et--ok { border-style: solid; border-color: color-mix(in srgb, #5fd3a1 40%, transparent); }