/* ===========================================================================
   Identidade visual — handoff "Mapeamento Inteligente v2" (16/09/2026).
   Os tokens abaixo são os do README do handoff; os nomes antigos continuam
   existindo como APELIDOS no fim do bloco, porque ainda são usados em style=
   inline em vários templates. Os apelidos saem quando o último template for
   migrado — até lá, mudar só os tokens novos muda o sistema inteiro.
   =========================================================================== */
:root{
  /* Navy — sidebar, blocos escuros, documentos */
  --navy:#111631; --navy-2:#1b2246; --navy-3:#2a3364;

  /* Superfícies */
  --canvas:#f4f5f9; --surface:#ffffff; --surface-2:#fafbfd;

  /* Tinta */
  --ink:#14161f; --ink-2:#454b60; --muted:#6a7088;

  /* Bordas */
  --border:#e3e6ef; --border-2:#eef0f6;

  /* Acento — Índigo (padrão). Ver [data-palette] para Teal e Ouro. */
  --accent:#2f46c8; --accent-2:#4763e8; --accent-soft:#eef1fd; --accent-ink:#1c2a85;
  --on-accent:#ffffff;

  /* Semânticas */
  --teal:#0a6f65; --teal-soft:#e4f4f2;
  --gold:#8a6108; --gold-soft:#fbf2df;
  --clay:#b23f39; --clay-soft:#fbeceb;

  /* Sombras */
  --card:0 1px 2px rgba(17,22,49,.05), 0 14px 30px -22px rgba(17,22,49,.35);
  --card-hi:0 1px 2px rgba(17,22,49,.06), 0 22px 44px -24px rgba(17,22,49,.45);

  /* Tipografia */
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --display:'Sora','IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* "Papel" — a folha dos documentos gerados não segue o tema (é pra imprimir),
     então esses dois são hex literais, nunca tokens de superfície. */
  --paper-line:#e3e6ef; --paper-zebra:#fafbfd;

  /* --- apelidos de compatibilidade (nomes antigos) --------------------- */
  --bg:var(--canvas); --off:var(--canvas); --zebra:var(--surface-2);
  --line:var(--border); --heading:var(--ink); --pearl:#ffffff;
  --btn-bg:var(--accent); --btn-fg:var(--on-accent);
  --shadow:var(--card);
  --abyss:var(--navy); --abyss-2:var(--navy-2); --steel:var(--navy-3);
  --gold-dark:var(--gold); --teal-dark:var(--teal); --teal-text:var(--teal);
  /* escala de risco de 4 níveis: distinguida por preenchimento, não por cor
     nova — vazada (soft) em alto, cheia em crítico. */
  --baixo:var(--teal); --baixo-bg:var(--teal-soft);
  --medio:var(--gold); --medio-bg:var(--gold-soft);
  --alto:var(--clay); --alto-bg:var(--clay-soft);
  --critico:var(--clay); --critico-bg:var(--clay-soft);
}
:root[data-theme="dark"]{
  --navy:#0c1024; --navy-2:#141a34; --navy-3:#222a52;
  --canvas:#0a0d1c; --surface:#12172b; --surface-2:#171d34;
  --ink:#eceef6; --ink-2:#b9bed2; --muted:#8b92ab;
  --border:#232a45; --border-2:#1c2238;
  --accent:#7086ff; --accent-2:#8f9fff; --accent-soft:#1a2144; --accent-ink:#c3ccff;
  /* tinta ESCURA sobre o acento claro do tema escuro — sem isso, botão
     primário reprova em contraste. */
  --on-accent:#0c1024;
  --teal:#4fd3c4; --teal-soft:#0f2e2b;
  --gold:#e0b45c; --gold-soft:#322509;
  --clay:#f08b84; --clay-soft:#34140f;
  --card:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -24px rgba(0,0,0,.8);
  --card-hi:0 1px 2px rgba(0,0,0,.5), 0 26px 52px -26px rgba(0,0,0,.9);
}

/* --- paletas alternativas: trocam só os 5 tokens de acento ---------------- */
:root[data-palette="teal"]{
  --accent:#0f7f76; --accent-2:#14a094; --accent-soft:#e4f4f2; --accent-ink:#0a5b55;
  --on-accent:#ffffff;
}
:root[data-palette="teal"][data-theme="dark"]{
  --accent:#35c3b4; --accent-2:#55d8c9; --accent-soft:#0f2e2b; --accent-ink:#b6efe8;
  --on-accent:#0c1024;
}
:root[data-palette="ouro"]{
  --accent:#8f6510; --accent-2:#b5851a; --accent-soft:#fbf2df; --accent-ink:#6b4a08;
  --on-accent:#ffffff;
}
:root[data-palette="ouro"][data-theme="dark"]{
  --accent:#dcae52; --accent-2:#eec272; --accent-soft:#2e2208; --accent-ink:#f6e4bb;
  --on-accent:#0c1024;
}

/* --- densidade: só o respiro das linhas de tabela e dos itens de nav ------ */
:root{ --td-pad:13px 16px; --nav-pad-block:9px; }
:root[data-density="compacta"]{ --td-pad:8px 14px; --nav-pad-block:6px; }
:root[data-density="espacada"]{ --td-pad:18px 16px; --nav-pad-block:12px; }
*{box-sizing:border-box;}
html{background:var(--canvas);}
body{margin:0;font-family:var(--sans);background:var(--canvas);color:var(--ink);transition:background .15s,color .15s;}
/* Link de conteúdo — sem isso cai no azul padrão do navegador (#0000ee), que
   reprova em contraste sobre o canvas escuro. Exclui .btn, que tem cor própria. */
.main a:not(.btn){color:var(--accent);text-decoration:none;font-weight:500;}
.main a:not(.btn):hover{text-decoration:underline;}
.app{display:flex;min-height:100vh;}

/* Sidebar 262px — rola por dentro, o conteudo rola por fora. */
.sidebar{width:262px;flex-shrink:0;color:#fff;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--navy-2),var(--navy));
  position:sticky;top:0;height:100vh;overflow-y:auto;}
.brand{display:flex;align-items:center;gap:10px;padding:16px 14px 6px;color:inherit;text-decoration:none;}
.brand-chip{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--accent-2),var(--accent));color:var(--on-accent);
  font-family:var(--display);font-weight:700;font-size:13px;}
.brandname{font-family:var(--display);font-weight:600;font-size:13.5px;line-height:1.25;}
.brandorg{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;color:rgba(255,255,255,.5);}

.sidebar nav{padding:2px 10px 12px;display:flex;flex-direction:column;gap:2px;flex:1;}
/* Item de nav = .mi-nav (definido no bloco de componentes); <a> dentro da
   sidebar herda o mesmo tratamento pra nao precisar marcar classe em cada link. */
.sidebar nav a{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;text-decoration:none;
  border-radius:10px;padding:var(--nav-pad-block) 12px;color:rgba(236,238,246,.7);
  transition:background .15s,color .15s;}
.sidebar nav a:hover{background:rgba(255,255,255,.07);color:#fff;}
.sidebar nav a.active{background:rgba(255,255,255,.12);color:#fff;font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);}
.navicon{flex-shrink:0;opacity:.85;}
.sidebar nav a:hover .navicon,.sidebar nav a.active .navicon{opacity:1;}
.sidebar nav .grp,.topnav-group summary{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.58);padding:18px 12px 7px;list-style:none;}
/* O summary agora abre e fecha o grupo, entao precisa parecer clicavel e ter
   alvo de clique decente — nao so o texto. */
.topnav-group summary{cursor:pointer;display:flex;align-items:center;gap:9px;border-radius:10px;
  padding:9px 12px;margin-top:10px;transition:background .15s,color .15s;}
.topnav-group summary:hover{background:rgba(255,255,255,.07);color:#fff;}
.topnav-group[open] summary{color:rgba(255,255,255,.8);}
/* Chevron a direita, virado para baixo quando o grupo esta aberto. */
.topnav-group summary::after{content:'';margin-left:auto;width:6px;height:6px;flex-shrink:0;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);transition:transform .18s;}
.topnav-group[open] summary::after{transform:rotate(45deg);}
.topnav-group summary svg{flex-shrink:0;opacity:.7;}
.sidebar nav .grp:first-child,.topnav-group:first-of-type summary{padding-top:8px;}
.topnav-group summary::-webkit-details-marker{display:none;}
.topnav-group{display:block;}
.topnav-panel{display:flex;flex-direction:column;gap:2px;}
.mega-cols{display:contents;}
.mega-col{display:flex;flex-direction:column;gap:2px;}
.mega-label{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.42);padding:10px 12px 4px;}

.sidebar-foot{padding:12px 14px;margin-top:auto;display:flex;align-items:center;gap:9px;
  border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:rgba(236,238,246,.72);}
.sidebar-foot .quem{flex:1;min-width:0;}
.sidebar-foot .nome{color:#fff;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sidebar-foot .papel{font-size:10.5px;color:rgba(255,255,255,.5);}
.sidebar-foot a{color:rgba(255,255,255,.72);text-decoration:none;font-size:11.5px;}
.sidebar-foot a:hover{color:#fff;}
.avatar-sb{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  display:grid;place-items:center;font-size:11.5px;font-weight:600;flex-shrink:0;}
.theme-toggle{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;
  border-radius:9px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;}
.theme-toggle:hover{background:rgba(255,255,255,.18);}

/* Coluna de conteudo: topbar sticky de 62px + area rolavel. */
.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{position:sticky;top:0;z-index:30;height:62px;flex-shrink:0;display:flex;align-items:center;
  gap:12px;padding:0 28px;border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--canvas) 86%,transparent);backdrop-filter:blur(12px);}
.breadcrumb{flex:1;min-width:0;font-size:13px;display:flex;align-items:center;gap:7px;
  overflow:hidden;white-space:nowrap;}
.breadcrumb .raiz{color:var(--muted);}
.breadcrumb .sep{color:var(--muted);opacity:.6;}
.breadcrumb .folha{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;}
.chip-sync{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  background:var(--teal-soft);color:var(--teal);font-size:11.5px;font-weight:600;flex-shrink:0;}
.conteudo{padding:26px 28px 40px;max-width:1280px;width:100%;min-width:0;}
.mobile-topbar{display:none;}
.sidebar-overlay{display:none;}

.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
h1{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.028em;margin:8px 0 4px;color:var(--ink);}
:root[data-theme="dark"] h1{color:var(--ink);}
.sub{color:var(--muted);font-size:13.5px;margin:0 0 16px;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px 20px;margin-bottom:14px;box-shadow:var(--card);}
/* Variantes do handoff: faixa lateral de alerta e faixa superior de modulo. */
.card.alerta-baixo{border-left:3px solid var(--teal);}
.card.alerta-medio{border-left:3px solid var(--gold);}
.card.alerta-critico{border-left:3px solid var(--clay);}
.card.modulo{border-top:3px solid var(--accent);}
.card.navy{background:linear-gradient(158deg,var(--navy-3),var(--navy));border-color:transparent;color:#fff;box-shadow:var(--card-hi);}
.card.navy h2{color:#fff;}
.card.navy .hint,.card.navy .sub{color:rgba(255,255,255,.66);}

/* Card de recurso automatizado (ex: extração de POP existente) — acento
   teal reservado a "isto foi processado automaticamente", nunca dourado. */
.feature-card{border-color:var(--teal);border-left-width:4px;background:var(--teal-soft);}
.feature-summary{cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;}
.feature-badge{background:var(--teal);color:var(--surface);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;border-radius:999px;flex-shrink:0;}
.feature-title{font-weight:700;color:var(--heading);font-size:14.5px;}
.feature-sub{flex-basis:100%;font-size:12.5px;color:var(--muted);margin-left:0;}
@media (min-width:640px){.feature-sub{flex-basis:auto;margin-left:2px;}}

/* Estado vazio reforçado — quando "vazio" é uma boa notícia, aproveita pra
   apontar o próximo passo em vez de só dizer "nada aqui" (avaliação de UX
   de 31/08/2026, seção 04). */
.empty-state{border:1px solid var(--teal);background:var(--teal-soft);border-radius:10px;padding:26px 20px;text-align:center;}
.empty-state .ico{width:34px;height:34px;border-radius:50%;background:var(--teal);color:var(--surface);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;}
.empty-state .t{font-weight:800;font-size:14px;color:var(--heading);}
.empty-state .s{font-size:12.5px;color:var(--muted);margin-top:4px;}
.empty-state .actions{margin-top:12px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}

/* Heatmap real (cor, sem texto repetido em cada célula) para matrizes
   cargo x processo — avaliação de UX de 31/08/2026, seção 03. */
.heat-cell{width:26px;height:18px;border-radius:4px;margin:0 auto;cursor:default;}
.heat-cell.critico{background:var(--critico);}
.heat-cell.alto{background:var(--alto);}
.heat-cell.media{background:var(--medio);}
.heat-cell.basica{background:#c7c2ab;}
.card h2{font-family:var(--display);font-size:15.5px;font-weight:600;letter-spacing:-.015em;margin:0 0 14px;color:var(--ink);}
details.card{padding:0;}
details.card>summary{padding:20px;cursor:pointer;list-style:none;}
details.card>summary::-webkit-details-marker{display:none;}
details.card>summary::before{content:'▸';display:inline-block;width:14px;color:var(--muted);}
details.card[open]>summary::before{content:'▾';}
details.card>summary h2{display:inline-block;margin:0;border-bottom:none;padding-bottom:0;}
details.card>summary:hover h2{color:var(--gold-dark, var(--navy));}
details.card>*:not(summary){padding-left:20px;padding-right:20px;}
details.card>*:last-child{padding-bottom:20px;}
label{font-size:12px;font-weight:600;color:var(--ink-2);display:block;margin-bottom:6px;}
input,select,textarea{width:100%;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);
  color:var(--ink);font-size:13.5px;margin-bottom:10px;font-family:inherit;transition:border-color .15s,box-shadow .15s,background .15s;}
input,select{height:40px;padding:0 12px;}
textarea{padding:10px 12px;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 3px var(--accent-soft);}
input[type=checkbox],input[type=radio]{height:auto;}
.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.row.c2>*{flex:1;min-width:220px;}
.row.c3>*{flex:1;min-width:160px;}
.checklabel{font-weight:500;color:var(--ink);display:flex;align-items:center;gap:6px;}
.checklabel input{width:auto;margin:0;}
.btn{all:unset;box-sizing:border-box;cursor:pointer;background:var(--accent);color:var(--on-accent);
  height:38px;padding:0 15px;border-radius:10px;font-size:13px;font-weight:600;display:inline-flex;
  align-items:center;justify-content:center;gap:6px;text-decoration:none;
  transition:box-shadow .16s,transform .16s,background .16s,color .16s;}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--accent) 60%,transparent);}
.btn.gold{background:var(--accent);color:var(--on-accent);}
.btn.ghost{background:var(--surface);color:var(--ink-2);border:1px solid var(--border);font-weight:500;}
.btn.ghost:hover{background:var(--accent-soft);color:var(--accent-ink);box-shadow:none;}
.btn.danger{background:var(--surface);color:var(--clay);border:1px solid var(--border);font-weight:500;}
.btn.danger:hover{background:var(--clay-soft);color:var(--clay);box-shadow:none;}
.btn.sm{height:30px;padding:0 10px;font-size:12px;border-radius:8px;}
/* Botao que vive dentro de celula de tabela: sem caixa, so o rotulo em acento. */
.btn.link{background:none;border:0;color:var(--accent);height:auto;padding:5px 8px;border-radius:7px;font-size:12.5px;}
.btn.link:hover{background:var(--accent-soft);transform:none;box-shadow:none;}
table{width:100%;border-collapse:collapse;font-size:13.5px;}
thead tr{background:var(--surface-2);}
th,.mi-th{text-align:left;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);padding:12px 16px 10px;white-space:nowrap;}
td,.mi-td{padding:var(--td-pad);border-top:1px solid var(--border-2);font-size:13.5px;color:var(--ink-2);vertical-align:middle;}
tbody tr:hover,.mi-row:hover{background:var(--surface-2);}
tr.inativo td{opacity:.5;}
.badge{display:inline-block;min-width:42px;text-align:center;padding:4px 8px;border-radius:7px;font-size:12px;
  font-weight:600;background:var(--surface-2);border:1px solid var(--border);font-family:var(--mono);color:var(--ink-2);}
.badge.cinza{background:var(--surface-2);}
.badge.gold{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent;}
/* Pílula de status — fundo "soft" + tinta da própria semântica. Preenchimento
   sólido com texto branco só funcionava no tema claro: no escuro as semânticas
   são cores CLARAS (#e0b45c, #f08b84), e branco sobre elas reprova em contraste.
   O par soft/tinta passa nos dois temas sem exceção. */
.tag{display:inline-block;padding:4px 9px;border-radius:999px;font-size:11.5px;font-weight:600;}
.tag.baixo{background:var(--teal-soft);color:var(--teal);}
.tag.medio{background:var(--gold-soft);color:var(--gold);}
/* alto é vazado e crítico é cheio — é o que separa os dois níveis, já que a
   paleta tem uma única cor de alerta (--clay). */
.tag.alto{background:var(--clay-soft);color:var(--clay);}
.tag.critico{background:var(--clay);color:var(--on-accent);}
.tag.info{background:var(--accent-soft);color:var(--accent-ink);}
.tag.gestor{background:var(--navy);color:#fff;}
/* Legenda/metadado. O margin-top negativo que existia aqui encostava o texto
   no input de cima, mas passou a colidir com qualquer elemento de altura fixa
   na mesma linha (botao de 38px) — o respiro agora vem do proprio campo. */
.hint{font-size:11.5px;color:var(--muted);margin-top:0;margin-bottom:12px;}
.flexbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px;}
.log-item{padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px;}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px;margin-bottom:16px;}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px 18px;
  box-shadow:var(--card);}
.kpi .n{font-family:var(--display);font-size:29px;font-weight:600;letter-spacing:-.03em;color:var(--ink);
  line-height:1.1;display:flex;align-items:center;gap:8px;}
.kpi .l{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.35;}
/* Ponto semantico no lugar do emoji: acompanha o tema e nao muda de desenho
   conforme a fonte de emoji do sistema. */
.kpi .pt{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.kpi .pt.ok{background:var(--teal);} .kpi .pt.atencao{background:var(--gold);}
.kpi .pt.critico{background:var(--clay);} .kpi .pt.alto{background:var(--clay);opacity:.65;}

/* Donut de distribuicao — os segmentos sao <circle> com stroke-dasharray,
   desenhados em Jinja a partir de numeros que a rota ja fornecia. */
.donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.donut{width:124px;height:124px;flex-shrink:0;transform:rotate(-90deg);}
.donut circle{fill:none;stroke-width:15;transition:stroke-width .18s,opacity .18s;}
.donut-wrap.destacando circle{opacity:.35;}
.donut-wrap.destacando circle.ativo{opacity:1;stroke-width:19;}
.donut-legenda{display:grid;gap:7px;flex:1;min-width:180px;}
.donut-item{display:flex;align-items:center;gap:9px;font-size:12.5px;cursor:default;color:var(--ink-2);}
.donut-item .sw{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
.donut-item .qt{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink);}

/* Linha de barra de progresso rotulada (cobertura, regularidade). */
.barra-linha{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;margin-bottom:12px;}
.barra-linha .rot{font-size:12.5px;color:var(--ink-2);}
.barra-linha .pct{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink);}
.barra-linha .mi-bar{grid-column:1 / -1;}
.muted{color:var(--muted);}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:13px;}
.flash.ok{background:var(--baixo-bg);color:var(--baixo);}
.flash.erro{background:var(--critico-bg);color:var(--critico);}
/* ===========================================================================
   Folha de documento (POP, PS, Ficha de cargo, Manual, Relatorio a diretoria).
   NAO segue o tema: fundo branco e tinta escura fixos, em hex literal, porque
   a folha existe para ser impressa. Antes so o fundo era fixo e o texto usava
   var(--ink) — no tema escuro a tinta virava quase branca sobre branco e o
   documento ficava ilegivel.
   =========================================================================== */
.docwrap{max-width:880px;margin:0 auto 16px;background:#fff;color:#1b1d26;border-radius:6px;
  padding:48px 52px;box-shadow:0 1px 2px rgba(17,22,49,.08), 0 30px 60px -30px rgba(17,22,49,.5);}
.docwrap a{color:#2f46c8;}
.docwrap .muted,.docwrap .hint{color:#6a7088;}

.dochead{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  border-bottom:2px solid #1b1d26;padding-bottom:18px;margin-bottom:22px;}
.dochead-marca{display:flex;align-items:center;gap:10px;flex:1;min-width:200px;}
.dochead-chip{width:28px;height:28px;border-radius:8px;background:#111631;color:#fff;flex-shrink:0;
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:11px;}
.dochead-nome{font-family:var(--display);font-weight:600;font-size:13px;line-height:1.2;}
.dochead-org{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:#6a7088;}
.dochead-meta{font-family:var(--mono);font-size:10px;color:#6a7088;text-align:right;line-height:1.7;}

.dockicker{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#2f46c8;}
.doctitulo{font-family:var(--display);font-size:32px;font-weight:600;letter-spacing:-.03em;
  color:#1b1d26;margin:6px 0 20px;line-height:1.15;}

/* Grade de metadados: as celulas sao claras sobre um fundo de borda, e o gap
   de 1px faz as divisorias — por isso nao ha border em celula nenhuma. */
.docmeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:#e3e6ef;border:1px solid #e3e6ef;border-radius:4px;overflow:hidden;margin-bottom:26px;}
.docmeta > div{background:#fafbfd;padding:12px 14px;}
.docmeta .k{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#6a7088;}
.docmeta .v{font-size:12.5px;font-weight:500;margin-top:3px;}

.docbody{counter-reset:secao;}
.docbody h3{font-family:var(--display);font-size:13.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:#1b1d26;margin:26px 0 10px;counter-increment:secao;}
/* A numeracao de secao e mantida (documento da qualidade costuma exigir a
   referencia), mas agora sai em mono no acento, em vez de caixa alta dourada. */
.docbody h3:before{content:counter(secao,decimal-leading-zero) " · ";
  font-family:var(--mono);font-weight:600;color:#2f46c8;letter-spacing:0;}
.docbody p{font-size:13.5px;line-height:1.6;}
.docbody table{font-size:12.5px;}
.docbody th{background:#fafbfd;color:#6a7088;}
.docbody td,.docbody th{border-top-color:#eef0f6;}
.docfoot{border-top:1px solid #e3e6ef;margin-top:30px;padding-top:14px;display:flex;
  justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:#6a7088;}

/* Passos numerados: numero em coluna propria, sem circulo preenchido. */
.steps{list-style:none;padding:0;margin:0;counter-reset:step;}
.steps li{counter-increment:step;display:grid;grid-template-columns:30px 1fr;gap:14px;
  padding:12px 0;border-bottom:1px solid #eef0f6;font-size:13.5px;line-height:1.6;}
.steps li:before{content:counter(step,decimal-leading-zero);font-family:var(--mono);font-size:12px;
  font-weight:600;color:#2f46c8;}

/* Pilulas dentro da folha usam hex literal — a folha nao segue o tema. */
.docwrap .tag.critico,.docwrap .tag.alto{background:#fbeceb;color:#a3352f;}
.docwrap .tag.medio{background:#fbf2df;color:#8a6108;}
.docwrap .tag.baixo,.docwrap .tag.info{background:#e4f4f2;color:#0a6f65;}
.steps li .hint{margin-top:4px;margin-bottom:0;}
.steps .etapa-prazo{color:var(--muted);font-weight:400;font-size:12px;}
.steps .etapa-itens{list-style:none;padding:0;margin:6px 0 0;}
.steps .etapa-itens li{counter-increment:none;padding:2px 0;border-bottom:none;font-size:11.5px;color:var(--muted);}
.steps .etapa-itens li:before{content:"✓";position:static;width:auto;height:auto;background:none;color:var(--baixo);font-size:11.5px;margin-right:6px;display:inline;}
.fluxograma{display:flex;flex-direction:column;align-items:center;gap:0;margin:16px 0;}
.fluxo-box{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--paper-zebra);border:1px solid var(--navy);border-radius:8px;padding:10px 18px;min-width:260px;text-align:center;}
.fluxo-nome{font-weight:700;font-size:13px;color:var(--navy);text-decoration:none;}
.fluxo-nome:hover{text-decoration:underline;}
.fluxo-num{background:var(--navy);color:#fff;width:20px;height:20px;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center;}
.fluxo-mover{display:flex;gap:6px;margin-top:6px;}
.fluxo-cargo{font-size:11px;color:#6b6f80;}
.fluxo-seta{font-size:20px;color:var(--navy);line-height:1;padding:2px 0;}
/* Tela de entrada: painel de apresentacao a esquerda, formulario a direita.
   Abaixo de 900px o painel sai de cena — nao ha espaco para os dois, e o que
   importa no celular e o formulario. */
.login-split{min-height:100vh;display:grid;grid-template-columns:1.08fr .92fr;}
.login-painel{position:relative;overflow:hidden;color:#fff;display:flex;align-items:center;
  background:linear-gradient(155deg,var(--navy-3),var(--navy) 62%);}
/* Halo desfocado no canto superior direito. */
.login-halo{position:absolute;top:-120px;right:-90px;width:380px;height:380px;border-radius:50%;
  background:var(--accent-2);opacity:.28;filter:blur(90px);pointer-events:none;}
/* Grade de 56px, esmaecida para as bordas por uma mascara radial. */
.login-grade{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 30% 20%, #000, transparent 70%);
  mask-image:radial-gradient(circle at 30% 20%, #000, transparent 70%);}
.login-painel-conteudo{position:relative;z-index:1;padding:56px clamp(32px,5vw,72px);max-width:620px;}
.login-marca{display:flex;align-items:center;gap:12px;margin-bottom:34px;}
.login-marca .brandname{font-family:var(--display);font-weight:600;font-size:17px;}
.login-marca .brand-chip{width:44px;height:44px;border-radius:12px;font-size:16px;}
.login-pilula{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  font-size:12.5px;font-weight:500;color:rgba(255,255,255,.88);}
.login-painel h1{font-family:var(--display);font-size:clamp(34px,3.9vw,50px);font-weight:600;
  letter-spacing:-.032em;line-height:1.08;color:#fff;margin:22px 0 18px;}
.login-painel p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.72);max-width:32ch;margin:0;}

.login-form{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--canvas);}
.login-form-caixa{width:100%;max-width:400px;}
.login-form-caixa h2{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.028em;
  color:var(--ink);margin:0 0 6px;}
.login-form-caixa .sub{margin-bottom:26px;}
.login-form-caixa label{margin-top:16px;}
.login-form-caixa input{height:46px;border-radius:11px;background:var(--surface);}
.login-form-caixa input:focus{box-shadow:0 0 0 4px var(--accent-soft);}
.login-cta{width:100%;min-height:48px;border-radius:11px;margin-top:22px;font-size:14px;
  background:linear-gradient(140deg,var(--accent-2),var(--accent));}
.login-rodape{display:flex;align-items:center;gap:8px;margin:26px 0 0;padding-top:18px;
  border-top:1px solid var(--border);font-size:11.5px;color:var(--muted);}
.login-rodape svg{flex-shrink:0;opacity:.7;}

@media (max-width:900px){
  .login-split{grid-template-columns:1fr;}
  .login-painel{display:none;}
}
/* Organograma em árvore navegável (expandir/recolher por gestor) —
   avaliação de UX de 31/08/2026, item de esforço alto. */
.org-tree{padding-top:10px;padding-bottom:10px;}
.org-node{margin:1px 0;}
.org-node>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 10px;border-radius:8px;}
.org-node>summary::-webkit-details-marker{display:none;}
.org-node>summary::before{content:'▸';display:inline-block;width:12px;flex-shrink:0;color:var(--muted);}
.org-node[open]>summary::before{content:'▾';}
.org-node>summary:hover{background:var(--surface-2);}
.org-nome{font-weight:700;color:var(--heading);font-size:13.5px;}
.org-cargo{font-size:12px;color:var(--muted);}
.org-count{font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap;}
.org-filhos{margin-left:18px;padding-left:15px;border-left:2px dashed var(--line);}
.org-leaf{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 22px;}
.org-leaf .org-nome{font-weight:600;font-size:12.5px;}
/* Gatilho da busca global na barra lateral — a barra sempre fica escura
   ("abyss"), nos dois temas, então usa cores fixas claras-sobre-escuro. */
/* Gatilho da busca. Aparece duas vezes: na sidebar (fundo navy) e na topbar
   (fundo claro) — por isso a versao da topbar sobrescreve as cores. */
.cmdk-trigger{all:unset;box-sizing:border-box;margin:6px 14px 2px;padding:8px 10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;
  display:flex;align-items:center;gap:8px;color:rgba(236,238,246,.72);font-size:12.5px;cursor:pointer;}
.cmdk-trigger:hover{background:rgba(255,255,255,.12);color:#fff;}
.cmdk-trigger span{flex:1;text-align:left;}
.cmdk-trigger kbd{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  border-radius:5px;padding:1px 5px;font-family:var(--mono);font-size:9.5px;color:inherit;}
.topbar .cmdk-trigger{margin:0;flex-shrink:0;background:var(--surface);border-color:var(--border);
  color:var(--muted);height:34px;}
.topbar .cmdk-trigger:hover{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-soft);}
.topbar .cmdk-trigger span{display:none;}
.topbar .cmdk-trigger kbd{background:var(--surface-2);border-color:var(--border);color:var(--muted);}

/* Command palette (Ctrl/Cmd+K) — busca global. Avaliação de UX de
   31/08/2026, item de esforço alto. */
.cmdk-overlay{display:none;position:fixed;inset:0;background:rgba(10,12,20,.55);z-index:1000;align-items:flex-start;justify-content:center;padding-top:12vh;}
.cmdk-modal{width:min(560px,92vw);max-height:70vh;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden;}
.cmdk-inputwrap{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);color:var(--muted);flex-shrink:0;}
.cmdk-input{flex:1;border:none;background:transparent;font-size:15px;color:var(--ink);outline:none;margin:0;padding:0;font-family:inherit;}
.cmdk-list{overflow-y:auto;padding:6px;}
.cmdk-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:13px;}
.cmdk-item.active{background:var(--teal-soft);}
.cmdk-tipo{flex-shrink:0;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--surface-2);padding:2px 7px;border-radius:4px;min-width:66px;text-align:center;}
.cmdk-nome{flex:1;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cmdk-sub{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;flex-shrink:0;}
.cmdk-vazio{padding:26px;text-align:center;color:var(--muted);font-size:13px;}
.cmdk-foot{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);flex-shrink:0;}
.cmdk-foot kbd{background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-right:2px;}
/* Diagrama de macroprocesso (SVG gerado no servidor) — modelo pedido em
   02/09/2026 a partir de uma referência visual (mapa de processo estilo
   ISO 9001). Sem largura mínima de propósito: no celular encolhe até
   caber inteiro na tela, sem cortar nem precisar de scroll lateral — o
   texto fica pequeno, mas dá pra dar zoom (ajuste pedido em 02/09/2026,
   depois de o diagrama ficar cortado num celular). */
.macro-diagrama{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:6px;}
.macro-diagrama svg{width:100%;height:auto;display:block;}
/* Dentro de um documento (Manual da Qualidade), o diagrama é "papel" —
   fica sempre no tema claro, igual ao resto do docwrap, mesmo com o app
   inteiro no modo escuro. */
.docbody .macro-diagrama{
  --bg:#F7F7F5; --surface:#FFFFFF; --surface-2:#F1EFEA; --ink:#201F1C; --muted:#6b6f80;
  --line:#E7E4DC; --heading:#1D2346; --teal:#0d9488; --teal-soft:#d8f3ef; --teal-dark:#0b7c72;
}

/* Visão macro da Ícaro na tela de início — Áreas/Processos já cadastrados
   e como se ligam (não é um desenho fixo, deriva do cadastro real). */
.macrofluxo{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding-bottom:4px;}
.macrofluxo-apoio{flex-wrap:wrap;gap:12px;overflow-x:visible;}
.macrofluxo-apoio .macro-etapa{flex:0 1 220px;}
.macro-etapa{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-width:200px;flex:1;}
.macro-etapa-nome{font-weight:700;color:var(--heading);font-size:13.5px;}
.macro-etapa-meta{font-size:11px;color:var(--muted);margin:2px 0 8px;}
.macro-etapa-lista{display:flex;flex-wrap:wrap;gap:5px;}
.macro-processo{font-size:10.5px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:var(--ink);white-space:normal;word-break:break-word;max-width:100%;}
.macro-processo.mais{color:var(--muted);}
.macro-seta{display:flex;align-items:center;justify-content:center;padding:0 10px;color:var(--muted);font-size:18px;flex-shrink:0;}
.macro-seta.sugerida{opacity:.5;}
.macro-transversal{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line);}
.macro-apoio{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line);}
/* Dependência confirmada por Entradas/Saídas reais — acento teal, reservado
   a "dado já processado/confirmado" (ver regra do dourado no topo do
   arquivo). Badge fica no card da área (não estica a altura da linha); a
   cadeia em si vai consolidada numa seção só, no fim do card. */
.macro-badge-confirmada{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;letter-spacing:.03em;color:var(--teal-text);text-transform:uppercase;margin-bottom:8px;}
.macro-badge-confirmada .navicon{width:11px;height:11px;}
.macro-confirmadas-secao{background:var(--teal-soft);border-left:3px solid var(--teal);border-radius:6px;padding:10px 12px;margin-top:16px;}
.macro-confirmada-label{font-size:9.5px;font-weight:800;letter-spacing:.04em;color:var(--teal-text);text-transform:uppercase;display:flex;align-items:center;gap:5px;margin-bottom:7px;}
.macro-confirmada-label .navicon{width:11px;height:11px;}
.macro-confirmada-cadeia{font-size:11.5px;color:var(--ink);line-height:1.7;}
/* Menu lateral em gaveta no celular — a barra de 230px fixos não cabia em
   telas estreitas e cortava o conteúdo (relatado em 02/09/2026). Abaixo de
   860px ela vira uma gaveta escondida fora da tela, aberta pelo botão de
   menu na topbar. */
@media (max-width:860px){
  /* Sidebar vira gaveta: sai da tela ate o usuario abrir pelo botao da topbar. */
  .sidebar{position:fixed;top:0;left:0;height:100vh;z-index:210;width:262px;
    transform:translateX(-100%);transition:transform .25s ease;}
  .sidebar.open{transform:translateX(0);}
  .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(10,12,20,.5);z-index:200;}
  .sidebar-overlay.show{display:block;}
  .topbar{padding:0 14px;gap:10px;}
  .topbar .chip-sync{display:none;}
  .conteudo{padding:16px 14px 32px;}
  .mobile-menu-btn{all:unset;box-sizing:border-box;cursor:pointer;color:var(--ink);display:flex;
    align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--border);
    border-radius:9px;flex-shrink:0;}
  .kpis{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:861px){ .mobile-menu-btn{display:none;} }

/* Impressão: sempre no tema claro, mesmo com o app em modo escuro — texto
   escuro do app inteiro (não só documentos/"papel") ficaria ilegível em
   fundo branco de papel (pedido em 02/09/2026, "preciso poder imprimir"). */
@media print{
  :root, :root[data-theme="dark"]{
    --canvas:#ffffff; --surface:#ffffff; --surface-2:#fafbfd;
    --ink:#14161f; --ink-2:#454b60; --muted:#6a7088;
    --border:#e3e6ef; --border-2:#eef0f6;
    --accent:#2f46c8; --accent-soft:#eef1fd; --accent-ink:#1c2a85; --on-accent:#ffffff;
    --teal:#0a6f65; --teal-soft:#e4f4f2; --gold:#8a6108; --gold-soft:#fbf2df;
    --clay:#b23f39; --clay-soft:#fbeceb;
    --navy:#111631; --card:none; --card-hi:none;
  }
  .sidebar,.topbar,.no-print,.mobile-topbar{display:none!important;}
  .main,.conteudo{padding:0;max-width:none;}
  .card{box-shadow:none;}
  .fotos-grid{page-break-inside:avoid;}
  /* A folha nao depende mais de fundo colorido nenhum (o titulo agora e texto
     escuro sobre branco), entao o "background graphics" desligado do Chrome
     deixou de ser um problema. So tiramos a sombra e a margem da folha, que no
     papel viram borda cinza indesejada. */
  .docwrap{box-shadow:none;padding:0;max-width:none;}
}

.fotos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:14px;}
.foto-item{border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--surface-2);text-align:center;}
.foto-item img{width:100%;height:120px;object-fit:cover;border-radius:6px;display:block;margin-bottom:6px;}
.foto-legenda{font-size:11.5px;color:var(--muted);margin-bottom:6px;}

.meter{background:var(--zebra);border-radius:6px;height:8px;overflow:hidden;min-width:80px;}
.meter-fill{height:100%;border-radius:6px;}
.meter-fill.baixo{background:var(--baixo);} .meter-fill.medio{background:var(--medio);}
.meter-fill.alto{background:var(--alto);} .meter-fill.critico{background:var(--critico);}

/* Módulo Indicador — gráficos em HTML/CSS puro (sem lib externa) */
:root{ --chart-fat:var(--accent); --chart-margem:var(--gold); }
.chart-legend{display:flex;gap:18px;margin-bottom:14px;font-size:12px;color:var(--muted);}
.chart-legend-item{display:flex;align-items:center;gap:6px;}
.chart-legend-swatch{width:10px;height:10px;border-radius:2px;display:inline-block;flex-shrink:0;}
.chart-legend-swatch.fat{background:var(--chart-fat);}
.chart-legend-swatch.margem{background:var(--chart-margem);}

.chart-hbar{display:flex;flex-direction:column;gap:16px;}
.chart-hbar-row{display:flex;align-items:center;gap:12px;}
.chart-hbar-label{width:180px;flex-shrink:0;font-size:12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chart-hbar-bars{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0;}
.chart-hbar-track{display:flex;align-items:center;gap:8px;min-width:0;}
.chart-hbar-fill{height:14px;border-radius:0 4px 4px 0;min-width:3px;flex-shrink:0;}
.chart-hbar-fill.fat{background:var(--chart-fat);}
.chart-hbar-fill.margem{background:var(--chart-margem);}
.chart-hbar-value{font-size:11px;color:var(--muted);white-space:nowrap;font-family:var(--mono);}

.chart-vbar{display:flex;align-items:flex-end;gap:18px;height:190px;padding-top:22px;border-bottom:1px solid var(--line);}
.chart-vbar-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;min-width:0;}
.chart-vbar-value{font-size:11px;color:var(--muted);font-family:var(--mono);margin-bottom:4px;white-space:nowrap;}
.chart-vbar-track{flex:1;width:100%;max-width:44px;display:flex;align-items:flex-end;}
.chart-vbar-fill{width:100%;background:var(--chart-fat);border-radius:4px 4px 0 0;min-height:3px;}
.chart-vbar-label{font-size:11px;color:var(--muted);margin-top:8px;white-space:nowrap;}

.scatter-axis{stroke:var(--line);stroke-width:1;}
.scatter-label{font-size:10px;fill:var(--muted);font-family:var(--mono);}
.scatter-point{fill:var(--chart-fat);stroke:#fff;stroke-width:2;cursor:pointer;}
.scatter-point:hover{fill:var(--chart-margem);}

/* ===========================================================================
   Componentes do handoff v2 (.mi-*). Cada um existe uma vez aqui; template
   nenhum deve repetir esses valores em style= inline.
   .mi-th/.mi-td/.mi-row estao junto das regras de <table> la em cima, porque
   <th>/<td> puros herdam as mesmas regras — assim uma tabela ainda nao
   migrada ja sai com a aparencia nova.
   =========================================================================== */

/* Item de navegacao da sidebar --------------------------------------------- */
.mi-nav{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;
  border-radius:10px;padding:var(--nav-pad-block) 12px;color:rgba(236,238,246,.7);
  text-decoration:none;transition:background .15s,color .15s;}
.mi-nav:hover{background:rgba(255,255,255,.07);color:#fff;}
.mi-nav[aria-current="page"]{background:rgba(255,255,255,.12);color:#fff;font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);}
.mi-nav-contador{margin-left:auto;font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.5);}
.mi-nav-alerta{margin-left:auto;width:19px;height:19px;border-radius:6px;background:var(--clay);
  color:#fff;font-size:10.5px;font-weight:600;display:grid;place-items:center;}
.mi-nav-grupo{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.58);padding:18px 12px 7px;}

/* Segmented control -------------------------------------------------------- */
.mi-segs{display:inline-flex;gap:2px;padding:3px;border-radius:11px;border:1px solid var(--border);
  background:var(--surface);}
.mi-seg{all:unset;box-sizing:border-box;cursor:pointer;font-size:12.5px;font-weight:500;color:var(--muted);
  padding:6px 12px;border-radius:8px;transition:background .15s,color .15s;}
.mi-seg:hover{color:var(--ink);}
.mi-seg[aria-current="true"]{background:var(--accent-soft);color:var(--accent-ink);font-weight:600;}

/* Celula de matriz (mapa de regularidade, matriz de treinamento) ------------ */
.mi-cell{width:34px;height:30px;border-radius:8px;display:grid;place-items:center;margin:0 auto;
  font-family:var(--mono);font-size:11px;font-weight:600;}
.mi-cell.ok{background:var(--teal-soft);color:var(--teal);}
.mi-cell.atencao{background:var(--gold-soft);color:var(--gold);}
.mi-cell.critico{background:var(--clay-soft);color:var(--clay);}
.mi-cell.vazio{background:var(--surface-2);color:var(--muted);}

/* Ponto pulsante (dado em tempo real) -------------------------------------- */
.mi-pulse{position:relative;display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;}
.mi-pulse::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid currentColor;
  opacity:.5;animation:mi-ping 2s cubic-bezier(.2,.7,.4,1) infinite;}
@keyframes mi-ping{0%{transform:scale(.6);opacity:.65}70%{transform:scale(1.9);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.mi-pulse::after{animation:none;}}

/* Barra de progresso ------------------------------------------------------- */
.mi-bar{height:8px;border-radius:999px;background:var(--border-2);overflow:hidden;}
.mi-bar > i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  transition:width .85s cubic-bezier(.22,.7,.3,1);transition-delay:calc(var(--i,0) * 70ms);}
.mi-bar.ok > i,.mi-bar.baixo > i{background:var(--teal);}
.mi-bar.atencao > i,.mi-bar.medio > i{background:var(--gold);}
.mi-bar.critico > i{background:var(--clay);}
.mi-bar.alto > i{background:var(--clay);opacity:.75;}
@media (prefers-reduced-motion:reduce){.mi-bar > i{transition:none;}}

/* Avatar / iniciais -------------------------------------------------------- */
.mi-avatar{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent-ink);
  font-size:11px;font-weight:600;display:grid;place-items:center;flex-shrink:0;}
.mi-avatar.lg{width:48px;height:48px;border-radius:13px;font-family:var(--display);font-size:15px;}

/* Pilula com ponto (risco) ------------------------------------------------- */
.mi-dot-pill{display:inline-flex;align-items:center;gap:6px;}
.mi-dot-pill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;}

/* Codigo / data / valor em tabela ------------------------------------------ */
.mi-cod{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--accent);}
.mi-val{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ink-2);}
.mi-nome{color:var(--ink);font-weight:500;}

/* Feed do dashboard (atividade recente / riscos) -------------------------- */
.feed{display:grid;gap:2px;}
.feed-item{padding:9px 0;border-top:1px solid var(--border-2);display:grid;gap:3px;}
.feed-item:first-child{border-top:none;padding-top:0;}
.feed-meta{font-size:11.5px;color:var(--muted);}
.card.navy .feed-item{border-top-color:rgba(255,255,255,.1);}
.card.navy .feed-item a{color:#fff;font-weight:500;}
.card.navy .feed-meta{color:rgba(255,255,255,.6);}
.card h2 .mi-pulse{margin-right:6px;vertical-align:middle;}


/* Campo de filtro de tabela — identificado pelo proprio handler, para valer
   nas 9 telas de lista sem precisar marcar classe em cada uma. A lupa vem
   como background-image porque o input e um elemento vazio (sem ::before). */
input[oninput^="filtrarTabela"]{height:36px;border-radius:9px;padding-left:34px;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 20 20' fill='none' stroke='%238b92ab' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='M13.5 13.5 17 17'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:12px center;}
tr.sem-resultado td{text-align:center;padding:30px 16px;color:var(--muted);}
tr.sem-resultado .t{display:block;font-family:var(--display);font-size:14px;font-weight:600;
  color:var(--ink);margin-bottom:4px;}


/* Linha de notificacao do regulatorio — dias em destaque na esquerda. */
.notif{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:11px 0;border-top:1px solid var(--border-2);}
.notif:first-of-type{border-top:none;}
.notif-dias{font-family:var(--mono);font-size:17px;font-weight:600;min-width:52px;text-align:right;}
.notif-dias .u{font-size:11px;opacity:.7;margin-left:1px;}
.notif-dias.critico{color:var(--clay);}
.notif-dias.alto{color:var(--clay);opacity:.75;}
.notif-dias.medio{color:var(--gold);}
.notif-corpo{min-width:0;display:grid;gap:2px;}
.notif-titulo{font-weight:500;color:var(--ink);font-size:13.5px;}
.notif-meta{font-size:11.5px;color:var(--muted);}

/* Contagens do mapa de regularidade. */
.mapa-contagem{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:12px;font-weight:500;}

.kpi .pt.info{background:var(--accent);}

/* Segmented feito com radios: o input some, o label vira o segmento. */
.mi-seg input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0;}
label.mi-seg{cursor:pointer;display:inline-flex;align-items:center;}

/* Linha do tempo de gates (fornecedor 1-7, cliente 1-5) ------------------- */
.mi-gates{display:grid;}
.mi-gate{display:grid;grid-template-columns:28px 1fr;gap:14px;position:relative;padding-bottom:16px;}
.mi-gate:last-child{padding-bottom:0;}
/* conector entre as bolhas: nasce abaixo da bolha e vai ate a proxima */
.mi-gate:not(:last-child):before{content:'';position:absolute;left:13px;top:30px;bottom:0;
  width:2px;background:var(--border);}
.mi-gate.feito:not(:last-child):before{background:var(--teal);}
.mi-gate .bolha{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:600;background:var(--surface-2);
  color:var(--muted);box-shadow:inset 0 0 0 1px var(--border);z-index:1;}
.mi-gate.feito .bolha{background:var(--teal);color:var(--surface);box-shadow:none;}
.mi-gate.atual .bolha{background:var(--accent);color:var(--on-accent);
  box-shadow:0 0 0 4px var(--accent-soft);}
.mi-gate .rotulo{font-size:13.5px;font-weight:500;color:var(--ink);padding-top:5px;}
.mi-gate.futuro .rotulo{color:var(--muted);font-weight:400;}
.mi-gate .quando{font-size:11.5px;color:var(--muted);margin-top:2px;}

/* Funil de etapas nos dashboards de qualificacao -------------------------- */
.funil{display:grid;gap:10px;}
.funil-linha{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;}
.funil-linha .rot{font-size:12.5px;color:var(--ink-2);}
.funil-linha .qt{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink);}
.funil-linha .mi-bar{grid-column:1 / -1;}


/* Toggle em pilula (acesso a modulo na lista de usuarios): cheia = ligado,
   vazada = desligado — o estado le de relance numa tabela inteira. */
.pilula-toggle{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;min-width:52px;padding:4px 11px;border-radius:999px;font-size:11.5px;
  font-weight:600;color:var(--muted);box-shadow:inset 0 0 0 1px var(--border);
  transition:background .15s,color .15s,box-shadow .15s;}
.pilula-toggle:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--muted);}
.pilula-toggle.on{background:var(--teal-soft);color:var(--teal);box-shadow:none;}
.pilula-toggle.on:hover{box-shadow:inset 0 0 0 1px var(--teal);}

/* Legenda do grafico de evolucao ----------------------------------------- */
.grafico-legenda{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--muted);}
.grafico-legenda span{display:inline-flex;align-items:center;gap:7px;}
.grafico-legenda .tr{width:18px;height:0;border-top:2px solid var(--accent);display:inline-block;}
.grafico-legenda .tr.tracejada{border-top-style:dashed;border-top-color:var(--teal);}

.sparkline{margin-top:10px;height:26px;}
.sparkline svg{width:100%;height:26px;display:block;}

/* Matriz filial x tipo do mapa de regularidade ---------------------------- */
.matriz{min-width:640px;}
.matriz td{padding:6px 8px;text-align:center;}
.matriz td:first-child{text-align:left;white-space:nowrap;}
.matriz th{vertical-align:bottom;}
/* Cabecalho na vertical: sao muitos tipos, e na horizontal a tabela ficaria
   larga demais para caber sem rolagem enorme. */
.matriz th.vertical{height:120px;padding:0 0 10px;width:38px;}
.matriz th.vertical > span{display:block;writing-mode:vertical-rl;transform:rotate(180deg);
  white-space:nowrap;text-align:left;font-size:10.5px;letter-spacing:.04em;
  text-transform:none;max-height:108px;overflow:hidden;}
.mi-cell.faltante{background:var(--clay-soft);color:var(--clay);
  box-shadow:inset 0 0 0 1px var(--clay);}
.mi-cell.info{background:var(--accent-soft);color:var(--accent-ink);}
.matriz-legenda{display:flex;gap:8px 18px;flex-wrap:wrap;margin-top:14px;
  font-size:11.5px;color:var(--muted);}
.matriz-legenda > span{display:inline-flex;align-items:center;gap:7px;}
.matriz-legenda .mi-cell{width:26px;height:22px;font-size:10px;margin:0;}
/* O segmented tambem aceita <a>, para alternar entre telas irmas. */
a.mi-seg{text-decoration:none;}
a.mi-seg[aria-current="true"]{background:var(--accent-soft);color:var(--accent-ink);font-weight:600;}

/* Tabela larga rola dentro do proprio cartao, em vez de vazar por fora dele e
   fazer a pagina inteira rolar na horizontal. O :has() limita a regra aos
   cartoes que tem tabela — os demais seguem sem area de rolagem. A borda
   aparece so quando ha o que rolar, como dica de que existe mais a direita. */
.card:has(table){overflow-x:auto;}

/* Organograma funcional (vista Diagrama) ---------------------------------
   Os conectores sao bordas nos ::before/::after de cada <li>: metade da barra
   horizontal de cada lado, mais a haste vertical. Sem SVG e sem biblioteca,
   e continua imprimivel. O primeiro filho nao desenha a metade esquerda e o
   ultimo nao desenha a direita, senao a barra passaria das pontas. */
.org-diag-wrap{overflow-x:auto;}
.org-diag,.org-diag ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;}
.org-diag ul{padding-top:22px;position:relative;}
.org-diag li{position:relative;padding:22px 8px 0;text-align:center;}
.org-diag li::before,.org-diag li::after{content:'';position:absolute;top:0;right:50%;
  width:50%;height:22px;border-top:2px solid var(--border);}
.org-diag li::after{right:auto;left:50%;border-left:2px solid var(--border);}
.org-diag li:only-child{padding-top:0;}
.org-diag li:only-child::before,.org-diag li:only-child::after{display:none;}
.org-diag li:first-child::before,.org-diag li:last-child::after{border:0;}
.org-diag li:last-child::before{border-right:2px solid var(--border);border-radius:0 6px 0 0;}
.org-diag li:first-child::after{border-radius:6px 0 0 0;}
/* haste que desce da caixa do pai ate a barra dos filhos */
.org-diag ul ul::before{content:'';position:absolute;top:0;left:50%;width:0;height:22px;
  border-left:2px solid var(--border);}

.org-box{display:inline-flex;flex-direction:column;gap:3px;min-width:150px;max-width:210px;
  padding:11px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);
  text-align:center;}
.org-box-nome{font-size:13px;font-weight:600;color:var(--ink);line-height:1.25;}
.org-box-cargo{font-size:11.5px;color:var(--muted);line-height:1.3;}
.org-box-equipe{font-family:var(--mono);font-size:10px;color:var(--accent);margin-top:2px;}
/* A raiz e o unico bloco preenchido — marca de onde a hierarquia parte. */
.org-box.raiz{background:var(--accent);border-color:var(--accent);}
.org-box.raiz .org-box-nome{color:var(--on-accent);}
.org-box.raiz .org-box-cargo{color:color-mix(in srgb,var(--on-accent) 75%,transparent);}
.org-box.raiz .org-box-equipe{color:color-mix(in srgb,var(--on-accent) 80%,transparent);}