.instancia .grade { grid-template-columns: minmax(0, 1fr); }
.instancia .rodar-linha:empty { display: none; }
@media (max-width: 650px) {
  .instancia main { padding-left: 16px; padding-right: 16px; }
  .instancia .cab-modulo { min-width: 0; }
}
:root {
  color-scheme: light;
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --surface-3: #f2f2f2;
  --ink: #171717;
  --ink-2: #444444;
  --muted: #666666;
  --line: #ebebeb;
  --line-2: #c9c9c9;
  --forte: #171717;
  --pessoa: #f5f5f5;
  --azul: #0070f3; --azul-txt: #0070f3;
  --ok: #2da44e;
  --falha: #e5484d;
  --aviso: #f5a623;
  --neutro: #a1a1a1;
  --erro-txt: #cb2a2f;
  --ok-txt: #1a7f37;
  --sel: var(--azul);
  --ponto: #e5e5e5;
  --no-borda: #d4d4d4;
  --aresta: #8f8f8f;
  --sombra: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .06);
  --sombra-alta: 0 2px 6px rgba(0, 0, 0, .06), 0 12px 32px rgba(0, 0, 0, .12);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  --raio: 8px;
  --raio-ctl: 6px;
  --topo-h: 52px;
  --esmaecer: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000;
    --surface: #0a0a0a;
    --surface-2: #111111;
    --surface-3: #1a1a1a;
    --ink: #ededed;
    --ink-2: #b8b8b8;
    --muted: #a1a1a1;
    --line: #262626;
    --line-2: #333333;
    --forte: #ededed;
    --pessoa: #161616;
    --neutro: #8a8a8a; --azul-txt: #3291ff;
    --erro-txt: #ff6166;
    --ok-txt: #3fb950;
    --ponto: #1f1f1f;
    --no-borda: #333333;
    --aresta: #7a7a7a;
    --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .4);
    --sombra-alta: 0 2px 6px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .6);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a1a1a1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #0a0a0a;
  --surface-2: #111111;
  --surface-3: #1a1a1a;
  --ink: #ededed;
  --ink-2: #b8b8b8;
  --muted: #a1a1a1;
  --line: #262626;
  --line-2: #333333;
  --forte: #ededed;
  --pessoa: #161616;
  --neutro: #8a8a8a; --azul-txt: #3291ff;
  --erro-txt: #ff6166;
  --ok-txt: #3fb950;
  --ponto: #1f1f1f;
  --no-borda: #333333;
  --aresta: #7a7a7a;
  --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .4);
  --sombra-alta: 0 2px 6px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .6);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a1a1a1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex; flex-direction: column;
}
a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
button, select, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.ink2 { color: var(--ink-2); }
[hidden] { display: none !important; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 20; flex: none; height: var(--topo-h);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.topo-in {
  max-width: 1360px; margin: 0 auto; padding: 0 24px; height: 100%;
  display: flex; align-items: center; gap: 16px;
}
.marca { font: 600 14px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.marca img { border-radius: 4px; }
.abas { display: flex; gap: 2px; flex: 1; min-width: 0; align-self: stretch; overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.aba {
  position: relative; white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: none; padding: 0 10px; cursor: pointer; font-size: 14px; font-weight: 500;
  color: var(--muted); transition: color .12s;
}
.aba::before { content: ''; position: absolute; inset: 9px 2px; border-radius: var(--raio-ctl); z-index: -1; transition: background .12s; }
.aba::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.aba:hover { color: var(--ink); }
.aba:hover::before { background: var(--surface-3); }
.aba[aria-current="page"] { color: var(--ink); }
.aba[aria-current="page"]::after { background: var(--ink); }
.aba:focus-visible { outline-offset: -2px; border-radius: var(--raio-ctl); }
.pt { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--neutro); flex: none; }
.pt.ok { background: var(--ok); }
.pt.falhou { background: var(--falha); }
.pt.rodando { background: var(--azul); animation: pulso 2s infinite; }
.pt.parcial { background: var(--aviso); }
.topo-dir { display: flex; align-items: center; gap: 8px; font-size: 13px; flex: none; }
.vivo { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; margin-right: 4px; }
.vivo i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; }
.vivo.velho i { background: var(--aviso); }
.ctl {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--raio-ctl);
  height: 32px; padding: 0 12px; cursor: pointer; font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  transition: border-color .12s, background .12s, color .12s;
}
.ctl:hover { background: var(--surface-3); border-color: var(--line-2); }
.ctl[aria-pressed="true"] { background: var(--surface-3); border-color: var(--line-2); }
.ctl.primario { background: var(--forte); color: var(--bg); border-color: var(--forte); }
.ctl.primario:hover { background: color-mix(in srgb, var(--forte) 84%, var(--surface)); border-color: transparent; }
.ctl:disabled { opacity: .5; cursor: default; pointer-events: none; }
.ctl svg { width: 16px; height: 16px; flex: none; }
.ctl.icone { width: 32px; padding: 0; }
select.ctl { appearance: none; -webkit-appearance: none; padding-right: 28px; background: var(--surface) var(--chevron) no-repeat right 8px center / 14px; }
select.ctl:hover { background-color: var(--surface-3); }
#tema .sol { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #tema .sol { display: block; }
  :root:not([data-theme="light"]) #tema .lua { display: none; }
}
:root[data-theme="dark"] #tema .sol { display: block; }
:root[data-theme="dark"] #tema .lua { display: none; }

main { width: 100%; max-width: 1360px; margin: 0 auto; padding: 28px 24px 80px; flex: 1; }
h1 { font-size: 24px; line-height: 1.2; margin: 0 0 4px; font-weight: 600; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
h2 { font-size: 16px; margin: 0; font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: 13px; font-weight: 500; color: var(--muted); margin: 0 0 10px; }
h3.sep { margin-top: 20px; }
.sub { color: var(--muted); margin: 0 0 20px; }
.cab-pg { margin-bottom: 18px; }
.cab-pg .sub { margin: 0; }
.nota { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.ico { width: 16px; height: 16px; flex: none; }

/* ---------- visão geral ---------- */
.atencao { display: grid; gap: 16px; }
.tiles.kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tiles.espera { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles.metricas { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
.tiles.kpis .det, .tiles.metricas .det, .tiles.espera .det { display: block; -webkit-line-clamp: unset; overflow: visible; }
.tiles.kpis .tile { padding: 16px 20px; }
.alertas ul { list-style: none; margin: 0; padding: 0; }
.alertas li + li { border-top: 1px solid var(--line); }
.alerta {
  width: calc(100% + 16px); margin: 0 -8px; display: grid; grid-template-columns: 8px 1fr auto; gap: 12px; align-items: center; text-align: left;
  border: 0; background: none; border-radius: var(--raio-ctl); padding: 10px 8px; font-size: 13.5px; color: var(--ink);
}
button.alerta { cursor: pointer; transition: background .12s; }
button.alerta:hover { background: var(--surface-2); }
.alerta > i { width: 8px; height: 8px; border-radius: 50%; background: var(--neutro); }
.alerta.falhou > i { background: var(--falha); }
.alerta.aviso > i { background: var(--aviso); }
.alerta.humano > i { background: transparent; border: 1.5px solid var(--ink-2); }
.alerta.rodando > i { background: var(--azul); animation: pulso 2s infinite; }
.alerta .txt { min-width: 0; }
.alerta small { display: block; color: var(--muted); font-size: 12px; }
.alerta .seta-a { color: var(--muted); display: inline-flex; }
button.alerta:hover .seta-a { color: var(--ink); }

.grupo { margin-top: 36px; }
.grupo > header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); gap: 16px; }
.cartao { background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio); padding: 18px 20px; min-width: 0; }
.cartao.clicavel { cursor: pointer; transition: border-color .12s; }
.cartao.clicavel:hover { border-color: var(--line-2); }
.cartao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.cartao-topo .meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); white-space: nowrap; vertical-align: middle; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--neutro); flex: none; }
.chip.ok i { background: var(--ok); }
.chip.falhou i { background: var(--falha); }
.chip.parcial i { background: var(--aviso); }
.chip.aviso i { background: var(--aviso); }
.chip.rodando i { background: var(--azul); animation: pulso 2s infinite; }
h1 .chip, .cartao-topo .chip { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px 2px 8px; font-size: 12.5px; font-weight: 500; line-height: 1.5; background: var(--surface); }
h1 .chip { font-size: 13px; }
@keyframes pulso { 50% { opacity: .3; } }

.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--raio); overflow: hidden; }
.tile { background: var(--surface); padding: 12px 14px; min-width: 0; }
.tile .rot { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.tile .val { font: 600 24px/1.15 var(--sans); margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tile .det { font-size: 12px; line-height: 1.35; color: var(--muted); margin-top: 4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tile.grande .val, .tiles.kpis .tile .val { font-size: 28px; }

.linha-info { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.linha-info b { font-weight: 500; color: var(--ink); }

/* ---------- gráficos ---------- */
.grafico { position: relative; margin-top: 12px; }
.grafico svg { display: block; width: 100%; overflow: visible; }
.grafico .eixo { font: 11px var(--sans); fill: var(--muted); font-variant-numeric: tabular-nums; }
.grafico .grade-l { stroke: var(--line); stroke-width: 1; }
.grafico .base { stroke: var(--line-2); stroke-width: 1; }
.grafico .alvo { fill: transparent; cursor: default; }
.grafico .col:hover .realce { opacity: 1; }
.grafico .realce { fill: var(--ink); opacity: 0; transition: opacity .1s; }
.legenda { display: flex; gap: 14px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.dica {
  position: fixed; z-index: 60; pointer-events: none; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--raio-ctl); padding: 8px 10px; font-size: 12px; box-shadow: var(--sombra-alta);
  min-width: 140px;
}
.dica b { display: block; font-weight: 500; margin-bottom: 4px; }
.dica .l { display: flex; justify-content: space-between; gap: 14px; }
.dica .l span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.dica .val { font-variant-numeric: tabular-nums; font-weight: 500; }
.dica i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* ---------- módulo ---------- */
.cab-modulo { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 22px; }
.rodar { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.rodar .pedido.falhou, .rodar .pedido.recusado, .rodar .pedido.expirado { color: var(--erro-txt); }
.rodar .pedido { color: var(--muted); }
.rodar-linha { margin-top: 10px; }
.rodar-linha.coletor { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chips { display: flex; align-items: center; gap: 10px; flex: none; }
.ligacao { border: 0; background: none; padding: 0; font: inherit; color: var(--ink); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-2); }
.ligacao:hover { text-decoration-color: var(--ink); }
td.titulo-issue { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.labels-issue { white-space: nowrap; }
.cab-modulo .linha-info { border-top: 0; padding-top: 0; margin-top: 10px; }
.duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; margin-top: 16px; }
.tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.secao { margin-top: 16px; }
.cartao > h3:first-child { margin-top: 0; }

.sub-abas { display: flex; gap: 2px; margin: 32px 0 14px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.sub-abas::-webkit-scrollbar { display: none; }
.sub-aba {
  position: relative; isolation: isolate; border: 0; background: none; cursor: pointer; padding: 8px 10px 10px; font-size: 14px; font-weight: 500; color: var(--muted);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; transition: color .12s;
}
.sub-aba::before { content: ''; position: absolute; inset: 2px 2px 6px; border-radius: var(--raio-ctl); z-index: -1; transition: background .12s; }
.sub-aba::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.sub-aba:hover { color: var(--ink); }
.sub-aba:hover::before { background: var(--surface-3); }
.sub-aba[aria-selected="true"] { color: var(--ink); }
.sub-aba[aria-selected="true"]::after { background: var(--ink); }
.sub-aba .n { font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); background: var(--surface-3); border-radius: 999px; padding: 1px 7px; line-height: 1.4; }
.sub-aba .n:empty { display: none; }
.cir-topo { max-width: 620px; }

.tabela-wrap { overflow-x: auto; margin: 0 -20px; scrollbar-width: thin; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); padding: 6px 12px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th:first-child, td:first-child { padding-left: 20px; }
th:last-child, td:last-child { padding-right: 20px; }
tr:last-child td { border-bottom: 0; }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.mono { font-size: 12.5px; white-space: nowrap; }
.issue { font: 500 12.5px var(--mono); white-space: nowrap; }
.merge { display: inline-flex; align-items: center; gap: 4px; }
.merge .ico { width: 14px; height: 14px; color: var(--ok); }
.trunc { max-width: 520px; }
.filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.filtro {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; height: 28px; padding: 0 11px;
  font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .12s, border-color .12s;
}
.filtro:hover { background: var(--surface-3); border-color: var(--line-2); }
.filtro[aria-pressed="true"] { background: var(--forte); color: var(--bg); border-color: var(--forte); }
.barra-h { display: grid; grid-template-columns: 160px 1fr 36px; gap: 10px; align-items: center; font-size: 13px; margin: 6px 0; }
.barra-h .trilho { height: 8px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
.barra-h .trilho i { display: block; height: 100%; background: var(--azul); border-radius: 2px; min-width: 2px; }
.barra-h .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
/* funil dev → staging → main */
.funil { margin-top: 16px; }
.funil .cartao-topo { margin-bottom: 10px; }
.etapas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.etapa { position: relative; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--raio); min-width: 0; }
.etapa .rot { font-size: 12px; color: var(--ink-2); }
.etapa .val { font: 600 26px/1.15 var(--sans); margin-top: 4px; font-variant-numeric: tabular-nums; }
.etapa .trilho { height: 6px; background: var(--surface-3); border-radius: 2px; margin: 8px 0 6px; overflow: hidden; }
.etapa .trilho i { display: block; height: 100%; background: var(--azul); border-radius: 2px; min-width: 2px; }
.etapa:nth-child(3) .trilho i { background: var(--aviso); }
.etapa:nth-child(4) .trilho i { background: var(--ok); }
.etapa .det { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.etapa .seta { position: absolute; right: -13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; background: var(--surface); padding: 0 2px; z-index: 1; }
.release-aberta { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.release-aberta p { margin: 0 0 6px; }
.release-aberta ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 12.5px; }
.ok-txt { color: var(--ok-txt); }
.tabela-prs td.mono { white-space: nowrap; font-size: 12.5px; }
.tabela-prs .trunc { max-width: 360px; }
@media (max-width: 720px) { .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .etapa .seta { display: none; } }
.pessoas { display: flex; flex-wrap: wrap; gap: 8px; }
.pessoa { border: 1px solid var(--line); background: var(--surface); border-radius: var(--raio-ctl); padding: 5px 10px; font-size: 13px; }
.pessoa b { font-variant-numeric: tabular-nums; margin-left: 6px; font-weight: 500; color: var(--muted); }
.vazio { color: var(--muted); font-size: 13px; padding: 8px 0; margin: 0; }

/* ---------- gaveta e modal ---------- */
.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); z-index: 40;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--sombra-alta);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .2s ease, visibility .2s;
  visibility: hidden;
}
.gaveta.aberta { transform: none; visibility: visible; }
.gaveta:focus-visible { outline-offset: -2px; }
.modo-fluxo .gaveta { top: var(--topo-h); }
/* cabeçalho fixo; só o corpo rola */
.gaveta header { flex: none; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.gaveta header .titulo { min-width: 0; }
.gaveta header h2 { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.gaveta header .sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.gaveta .corpo { padding: 18px 20px 40px; overflow: hidden auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.gaveta .corpo p, .gaveta li, .gaveta dd { overflow-wrap: anywhere; }
.gaveta .corpo > .kv { margin-bottom: 22px; }
.gaveta table a { white-space: nowrap; }
.gaveta .corpo section { margin-bottom: 22px; }
.gaveta .corpo > p:first-child { font-size: 14px; margin-top: 0; }
.gaveta ul { margin: 0; padding-left: 18px; }
.gaveta li { margin: 4px 0; font-size: 13.5px; }
.gaveta .tiles.um { grid-template-columns: 1fr; margin-bottom: 18px; }
.gaveta table { font-size: 13px; }
.fechar {
  flex: none; width: 28px; height: 28px; margin: -4px -6px 0 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--muted); border-radius: var(--raio-ctl); cursor: pointer;
}
.fechar:hover { background: var(--surface-3); color: var(--ink); }
.fechar .ico { width: 16px; height: 16px; }
.sinal { display: inline-flex; vertical-align: -3px; margin-right: 6px; }
.sinal .ico { width: 14px; height: 14px; }
.sinal.ok { color: var(--ok); }
.sinal.falhou { color: var(--falha); }
.kv { display: grid; grid-template-columns: 100px 1fr; gap: 6px 12px; font-size: 13px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
pre.bruto { font: 12px/1.5 var(--mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--raio-ctl); padding: 10px 12px; overflow: auto; max-height: 360px; white-space: pre-wrap; word-break: break-word; }
details summary { cursor: pointer; color: var(--muted); font-size: 13px; }
details summary:hover { color: var(--ink); }
details[open] summary { margin-bottom: 8px; }

.arquivos { margin-top: 10px; }
.arquivo {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--raio-ctl); padding: 8px 10px; margin: 6px 0; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.arquivo:hover { border-color: var(--line-2); background: var(--surface-2); }
.arquivo .papel { font-size: 11px; font-weight: 500; border: 1px solid var(--line); background: var(--surface-2); border-radius: 4px; padding: 1px 6px; color: var(--muted); white-space: nowrap; }
.arquivo .papel.prompt { background: var(--forte); color: var(--bg); border-color: var(--forte); }
.arquivo .nome { font-size: 13px; font-weight: 500; }
.arquivo .cam { font: 11px var(--mono); color: var(--muted); word-break: break-all; }

.veu { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 35; }
.modal {
  position: fixed; inset: 3vh 3vw; z-index: 50; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--raio); box-shadow: var(--sombra-alta); display: flex; flex-direction: column; overflow: hidden;
}
.modal header { flex: none; padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.modal header .titulo { flex: 1; min-width: 200px; }
.modal header h2 { font-size: 15px; }
.modal .cam { font: 12px var(--mono); color: var(--muted); margin-top: 2px; word-break: break-all; }
.modal > .vazio, .modal > .status-ed { padding: 16px; }
.modal .corpo-ed { flex: 1; display: grid; grid-template-columns: 1fr 300px; min-height: 0; }
.modal textarea {
  width: 100%; height: 100%; border: 0; resize: none; padding: 14px 16px; background: var(--surface); color: var(--ink);
  font: 13px/1.6 var(--mono); outline: none; tab-size: 2;
}
.modal aside { border-left: 1px solid var(--line); padding: 14px 16px; overflow-y: auto; font-size: 12.5px; background: var(--surface-2); }
.modal aside section { margin-bottom: 18px; }
.modal aside p { margin: 8px 0; }
.commit { margin: 8px 0; }
.commit a { font-weight: 500; }
.modal footer { flex: none; border-top: 1px solid var(--line); padding: 10px 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.status-ed { font-size: 12.5px; color: var(--muted); }
.status-ed.erro { color: var(--erro-txt); }
.status-ed.ok { color: var(--ink); }
.implantado { display: flex; align-items: center; gap: 8px; margin: 4px 0; }

/* campos de texto: mesma régua dos controles */
.campo, .modal footer input, .formulario input {
  height: 36px; width: 100%; border: 1px solid var(--line); border-radius: var(--raio-ctl); padding: 0 10px;
  background: var(--surface); color: var(--ink); font-size: 14px; transition: border-color .12s;
}
::placeholder { color: var(--muted); opacity: 1; }
.modal footer input { flex: 1; width: auto; min-width: 220px; height: 32px; font-size: 13px; }
.campo:hover, .modal footer input:hover, .formulario input:hover { border-color: var(--line-2); }
.campo:focus, .modal footer input:focus, .formulario input:focus { outline: 2px solid var(--sel); outline-offset: -1px; border-color: transparent; }
.formulario label { display: block; font-size: 13px; font-weight: 500; margin: 14px 0 6px; }
.formulario label:first-child { margin-top: 0; }
.formulario button { margin-top: 16px; }
.formulario .status-ed { margin: 10px 0 0; min-height: 18px; }

/* ---------- fluxos: a página inteira vira o palco, sem rolagem ---------- */
body.modo-fluxo { height: 100dvh; overflow: hidden; }
.modo-fluxo main { max-width: none; padding: 12px 24px 20px; min-height: 0; display: flex; flex-direction: column; }
.modo-fluxo .topo-in { max-width: none; }
.fluxo-pg { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.fluxo-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; flex: none; }
.fluxo-sub { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rot-seg { font-size: 13px; color: var(--muted); margin-left: 4px; }
.seg { display: inline-flex; height: 32px; border: 1px solid var(--line); border-radius: var(--raio-ctl); overflow: hidden; background: var(--surface); flex: none; }
.seg button { border: 0; background: none; padding: 0 12px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--muted); border-right: 1px solid var(--line); white-space: nowrap; }
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--ink); background: var(--surface-2); }
.seg button[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); }
.seg button:focus-visible { outline-offset: -2px; }
.palco {
  position: relative; flex: 1; min-height: 320px; overflow: hidden;
  background-color: var(--surface);
  background-image: radial-gradient(var(--ponto) 1px, transparent 1.2px);
  background-size: 20px 20px;
  border: 1px solid var(--line); border-radius: var(--raio);
}
.palco:focus-visible { outline: 2px solid var(--sel); outline-offset: -2px; }
.palco > svg.diagrama { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; user-select: none; }
.palco > svg.diagrama.arrastando { cursor: grabbing; }
.diagrama .mundo { transform-origin: 0 0; }
.diagrama .mundo.animando { transition: transform .25s ease; }
/* cromo flutuante do palco: superfície lisa, borda de 1px, sem desfoque */
.zoom, .legenda-f, .ajuda-f {
  position: absolute; z-index: 2; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--raio); box-shadow: var(--sombra);
}
.zoom { right: 12px; bottom: 12px; display: flex; gap: 2px; padding: 3px; }
.zoom .ctl { height: 28px; min-width: 28px; padding: 0 8px; border-color: transparent; background: none; color: var(--muted); }
.zoom .ctl.icone { width: 28px; padding: 0; }
.zoom .ctl .ico { width: 15px; height: 15px; }
.zoom .ctl:hover { background: var(--surface-3); color: var(--ink); border-color: transparent; }
.zoom .ctl[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); border-color: transparent; }
.zoom .rotulo-z { min-width: 50px; font-size: 12px; font-variant-numeric: tabular-nums; }
.legenda-f { left: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 7px 12px; font-size: 12px; color: var(--muted); max-width: calc(100% - 240px); }
.legenda-f span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legenda-f svg rect, .legenda-f svg path { fill: var(--surface); stroke: var(--no-borda); stroke-width: 1.2; }
.legenda-f svg .cinza { fill: var(--pessoa); }
.legenda-f svg line { stroke: var(--aresta); stroke-width: 1.4; }
.legenda-f .bola { width: 18px; height: 12px; border-radius: 6px; border: 1.5px solid var(--azul); display: inline-block; }
.ajuda-f { top: 12px; right: 12px; padding: 5px 10px; font-size: 12px; color: var(--muted); pointer-events: none; }

.diagrama text { font-family: var(--sans); fill: var(--ink); }
.diagrama .raia, .diagrama .pessoas-box { fill: color-mix(in srgb, var(--surface-3) 50%, transparent); stroke: var(--line-2); stroke-dasharray: 4 4; stroke-width: 1; }
.diagrama .raia-t { font: 500 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; fill: var(--muted); }
.diagrama .no { cursor: pointer; }
.diagrama .no .f { fill: var(--surface); stroke: var(--no-borda); stroke-width: 1; transition: stroke .1s, fill .1s; }
.diagrama .no.pessoa .f { fill: var(--pessoa); }
.diagrama .no.nota .f { stroke-dasharray: 4 3; }
.diagrama .no:hover .f { stroke: var(--neutro); fill: var(--surface-2); }
.diagrama .no.sel .f { stroke: var(--sel); stroke-width: 1.5; fill: color-mix(in srgb, var(--sel) 6%, var(--surface)); }
.diagrama .no:focus { outline: none; }
.diagrama .no:focus-visible .f { stroke: var(--sel); stroke-width: 2; }
.diagrama .no text { font-size: 13px; pointer-events: none; }
.diagrama .no.decisao text { font-style: italic; }
.diagrama .no.terminal text { font-weight: 500; }
.diagrama .etq { font: 11px var(--sans); fill: var(--muted); }
.diagrama .aresta { fill: none; stroke: var(--aresta); stroke-width: 1.25; }
.diagrama .aresta.tracejada { stroke-dasharray: 5 4; }
.diagrama .aresta-t { font: 500 11px var(--sans); fill: var(--muted); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.diagrama .seta { fill: var(--aresta); }
/* número de hoje: pílula clara com borda e número em azul */
.diagrama .badge rect { fill: var(--surface); stroke: var(--azul); stroke-width: 1; }
.diagrama .badge text { fill: var(--azul-txt); font: 600 11px var(--mono); }

/* ---------- login: formulário centrado, sem cartão ---------- */
.login-pg { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login { width: min(360px, 100%); }
.login h1 { font-size: 24px; margin: 20px 0 4px; }
.login > .muted { margin: 0 0 24px; font-size: 14px; }
.login button { width: 100%; height: 36px; margin-top: 20px; }
.login .erro { color: var(--erro-txt); font-size: 13px; min-height: 20px; margin-top: 12px; }

.ctl.mais { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 1300px) {
  .vivo > span { display: none; }
  .fluxo-sub { display: none; }
}
@media (max-width: 760px) {
  :root { --topo-h: 88px; }
  .topo-in { padding: 0 16px; gap: 8px; flex-wrap: wrap; align-content: start; }
  .marca, .topo-dir { height: 44px; }
  .topo-dir { margin-left: auto; gap: 6px; }
  .topo-dir .ctl { padding: 0 10px; }
  .topo-dir select.ctl { padding-right: 26px; }
  .vivo { margin-right: 0; }
  .abas { order: 3; flex-basis: 100%; align-self: auto; height: 43px; mask-image: var(--esmaecer); -webkit-mask-image: var(--esmaecer); }
  main { padding: 18px 16px 60px; }
  h1 { font-size: 21px; }
  .grade, .duas, .tres { grid-template-columns: 1fr; }
  .tiles, .tiles.kpis, .tiles.metricas, .tiles.espera { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles:not(.kpis) .tile:last-child { grid-column: span 2; }
  .tiles.kpis .tile { padding: 12px 14px; }
  .grade { grid-template-columns: 1fr; }
  .modal { inset: 0; border-radius: 0; }
  .modal .corpo-ed { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .modal aside { border-left: 0; border-top: 1px solid var(--line); max-height: 30vh; }
  .barra-h { grid-template-columns: 110px 1fr 30px; }
  .tabela-wrap { mask-image: var(--esmaecer); -webkit-mask-image: var(--esmaecer); scrollbar-width: none; }
  .tabela-wrap::-webkit-scrollbar { display: none; }
  .tabela-wrap th:first-child, .tabela-wrap td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
  .sub-abas { mask-image: var(--esmaecer); -webkit-mask-image: var(--esmaecer); }
  .modo-fluxo main { padding: 8px 8px 8px; }
  .fluxo-barra { gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 24px; mask-image: var(--esmaecer); -webkit-mask-image: var(--esmaecer); }
  .fluxo-barra::-webkit-scrollbar { display: none; }
  .legenda-f, .ajuda-f, .rot-seg { display: none; }
  .modo-fluxo .gaveta { top: 0; }
}