/* tema Grafite: base neutra, menu escuro, tijolo só no detalhe; fundos que eram rosados viram cinza claro.
     Fundo claro = cinza da barra de endereço do navegador (#E1E1E2), pedido de Alexandre em 06/10/2026. */
  :root{
    color-scheme:light;
    --bg:#E1E1E2; --s1:#FFFFFF; --s2:#F1F1F2; --s3:#E6E6E7;
    --line:#DADADC; --line2:#C9C9CC;
    --ink:#1F1F21; --mut:#64615D; --dim:#9A9691;
    --brand:#C62B2B; --brand2:#9E1F1F; --brand-soft:#EBEBEC; --brand-line:#D3D3D6;
    --grafite:#3A3A3C; --nome:#3A3A3C;
    --ok:#17734A; --ok-bg:#DEF1E7;
    --warn:#8A5B00; --warn-bg:#FAF0D2;
    --err:#B3264A; --err-bg:#EBEBEC;
    --nav-bg:#2B2B2E; --nav-line:#2B2B2E; --nav-ink:#CFCDCA; --nav-dim:#8B8884;
    --nav-hover:#36363A; --nav-on:#404045; --nav-on-ink:#FFFFFF; --nav-acc:#EF6A61;
    /* fontes (Alexandre, 29/10/2026): Source Sans 3 no texto, no menu, nas tabelas e nos números; só o título das telas fica na
       IBM Plex Sans. --mono era a Plex Mono: os números passam para a Source Sans 3 (algarismos de largura igual, no body) e o que
       é código de verdade (HTML da assinatura, link de senha) usa --codigo, a monoespaçada do sistema. */
    --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
    --mono:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
    --tit:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    --codigo:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  }
  :root[data-tema="escuro"]{
    color-scheme:dark;
    --bg:#131315; --s1:#1B1B1E; --s2:#232327; --s3:#2D2D32;
    --line:#2C2C31; --line2:#3B3B41;
    --ink:#EDECEA; --mut:#A6A39F; --dim:#7F7C78;
    --brand:#E5574E; --brand2:#F28B84; --brand-soft:#2A2A2F; --brand-line:#3B3B41;
    --grafite:#4A4A50; --nome:#EDECEA;
    --ok:#6FD3A0; --ok-bg:#16352A;
    --warn:#E8C16A; --warn-bg:#382D12;
    --err:#F08AA0; --err-bg:#2A2A2F;
    --nav-bg:#18181B; --nav-line:#2A2A2F; --nav-ink:#C4C2BE; --nav-dim:#77746F;
    --nav-hover:#232327; --nav-on:#2C2C31; --nav-on-ink:#FFFFFF; --nav-acc:#EF6A61;
  }
  *{box-sizing:border-box;margin:0}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
  body{font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink);
    background:var(--bg);-webkit-font-smoothing:antialiased;
    font-size-adjust:.516;               /* a Source Sans 3 é menor que a Plex no mesmo tamanho: iguala pela altura do "x" da Plex, as telas ficam com o tamanho de antes */
    font-variant-numeric:tabular-nums}   /* números alinhados nas colunas, como faziam com a Plex Mono */
  a{color:var(--brand)} a:hover{color:var(--brand2)}
  .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

  .app{width:100%;margin:0;height:100vh;
    display:grid;grid-template-columns:236px 1fr;grid-template-rows:56px 1fr;
    background:var(--bg);overflow:hidden}

  /* ---- topo ---- */
  .top{grid-column:1/3;display:flex;align-items:center;gap:16px;padding:0 20px;
    background:var(--s1);border-bottom:1px solid var(--line)}
  .brand{display:flex;align-items:center;gap:10px;min-width:0}
  .logo{height:26px;width:auto;flex:none}
  .brand .nm{font-weight:700;font-size:15px;letter-spacing:-.015em;color:var(--nome);white-space:nowrap}
  .brand .nm em{font-style:normal;color:var(--brand)}
  .brand .un{font-size:11px;color:var(--dim);border-left:1px solid var(--line2);padding-left:10px;white-space:nowrap}
  .search{flex:1;max-width:400px;display:flex;align-items:center;gap:8px;background:var(--s2);
    border:1px solid var(--line);border-radius:8px;padding:7px 12px;color:var(--dim);font-size:12px}
  .search svg{width:14px;height:14px;flex:none}
  .search .kbd{margin-left:auto;font-family:var(--mono);font-size:10px;border:1px solid var(--line2);
    border-radius:4px;padding:1px 5px;background:var(--s1);color:var(--mut)}
  .cost{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--mut);
    background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:999px;padding:5px 12px;white-space:nowrap}
  .cost b{color:var(--brand2);font-weight:600;font-family:var(--mono)}
  .avatar{width:32px;height:32px;border-radius:50%;background:var(--grafite);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex:none}

  /* ---- nav ---- */
  nav{background:var(--nav-bg);border-right:1px solid var(--nav-line);padding:14px 10px;
    display:flex;flex-direction:column;gap:2px;overflow-y:auto}
  .nsec{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;
    color:var(--nav-dim);padding:13px 10px 5px}
  .nsec:first-child{padding-top:0}
  .nv{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;cursor:pointer;
    font-family:inherit;font-size:12.5px;color:var(--nav-ink);background:transparent;
    border-radius:7px;padding:7px 10px}
  .nv:hover{background:var(--nav-hover);color:var(--nav-on-ink)}
  .nv:focus-visible{outline:2px solid var(--nav-acc);outline-offset:1px}
  .nv.on{background:var(--nav-on);color:var(--nav-on-ink);font-weight:600;box-shadow:inset 3px 0 0 var(--nav-acc)}
  .nv.on svg{color:var(--nav-acc)}
  .nv svg{width:15px;height:15px;flex:none}
  .nv .bdg{margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:600;
    background:var(--brand);color:#fff;border-radius:999px;padding:0 6px;line-height:16px}
  .root-foot{margin-top:auto;padding:12px 10px 4px;font-size:10px;color:var(--nav-dim);line-height:1.4}

  /* ---- conteúdo ---- */
  main{overflow-y:auto;padding:22px 26px 34px}
  .vhead{margin-bottom:16px}
  .vhead h1{font-family:var(--tit);font-size:19px;font-weight:600;letter-spacing:-.015em}
  .vhead p{font-size:12px;color:var(--mut);margin-top:3px;max-width:74ch}
  .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
  .kpi{background:var(--s1);border:1px solid var(--line);border-radius:10px;padding:13px 15px}
  .kpi .v{font-size:21px;font-weight:600;letter-spacing:-.015em;font-family:var(--mono)}
  .kpi .l{font-size:11px;color:var(--mut);margin-top:2px}
  .kpi .s{font-size:10.5px;margin-top:6px}
  .grid2{display:grid;grid-template-columns:3fr 2fr;gap:12px;align-items:start}
  .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
  .panel{background:var(--s1);border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .panel .ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    padding:11px 15px;border-bottom:1px solid var(--line)}
  .panel .ph h2{font-size:12px;font-weight:600}
  .panel .ph span{font-size:10.5px;color:var(--dim);text-align:right}
  .panel .pb{padding:13px 15px;display:flex;flex-direction:column;gap:10px}
  .scroller{overflow-x:auto}
  table{width:100%;border-collapse:collapse;font-size:12px;min-width:520px}
  th{text-align:left;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
    color:var(--dim);padding:9px 15px;border-bottom:1px solid var(--line);white-space:nowrap}
  td{padding:10px 15px;border-bottom:1px solid var(--line);vertical-align:top}
  tr:last-child td{border-bottom:0}
  .pill{display:inline-block;font-size:10.5px;font-weight:600;border-radius:999px;padding:1px 8px;white-space:nowrap}
  .p-ok{background:var(--ok-bg);color:var(--ok)}
  .p-warn{background:var(--warn-bg);color:var(--warn)}
  .p-err{background:var(--err-bg);color:var(--err)}
  .p-brand{background:var(--brand-soft);color:var(--brand2)}
  .p-dim{background:var(--s2);color:var(--mut)}
  .mut{color:var(--mut)} .dim{color:var(--dim)} .sm{font-size:11px}
  .item{display:flex;gap:10px;align-items:flex-start}
  .item .dot{flex:none;width:7px;height:7px;border-radius:50%;margin-top:6px}
  .bar{height:6px;border-radius:99px;background:var(--s3);overflow:hidden}
  .bar i{display:block;height:100%;border-radius:99px;background:var(--brand)}
  .krow{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
  .krow b{font-weight:600;font-family:var(--mono)}
  .quote{border-left:2px solid var(--brand);padding:8px 0 8px 14px;font-size:12px;color:var(--mut)}

  /* agentes */
  .agent{border:1px solid var(--line);border-radius:10px;background:var(--s1);overflow:hidden}
  .agent .ah{display:flex;align-items:center;gap:10px;padding:12px 15px;
    border-bottom:1px solid var(--line);background:var(--s2)}
  .agent .ic{width:30px;height:30px;border-radius:8px;background:var(--grafite);color:#fff;
    display:flex;align-items:center;justify-content:center;flex:none}
  .agent .ic svg{width:16px;height:16px}
  .agent h3{font-size:12.5px;font-weight:600}
  .agent .ah .sm{margin-left:auto}
  .agent .ab{padding:12px 15px;display:flex;flex-direction:column;gap:7px;font-size:11.5px}

  /* régua */
  .ladder{display:flex;flex-direction:column;gap:8px}
  .rung{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;
    border:1px solid var(--line);border-radius:9px;padding:10px 14px;background:var(--s1)}
  .rung .rn{font-family:var(--mono);font-weight:600;font-size:14px;color:var(--brand)}
  .rung .rd{font-size:12px;font-weight:600}
  .rung .rd span{display:block;font-size:10.5px;color:var(--mut);font-weight:400}

  /* fluxos */
  .flow{display:flex;align-items:stretch;overflow-x:auto}
  .step{flex:1;min-width:168px;border:1px solid var(--line);background:var(--s1);padding:12px 14px}
  .step:first-child{border-radius:10px 0 0 10px}
  .step:last-child{border-radius:0 10px 10px 0}
  .step + .step{border-left:0}
  .step h4{font-size:11.5px;font-weight:600}
  .step .who{font-size:10.5px;color:var(--mut);margin-top:2px}
  .step .leak{font-size:10.5px;margin-top:8px;color:var(--err)}
  .step .save{font-size:10.5px;margin-top:8px;color:var(--ok);font-weight:600}

  /* kanban */
  .kb{display:grid;grid-template-columns:repeat(4,minmax(232px,1fr));gap:12px;overflow-x:auto;padding-bottom:6px}
  .kcol{background:var(--s2);border:1px solid var(--line);border-radius:10px;padding:10px;
    display:flex;flex-direction:column;gap:8px}
  .kh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:2px 4px 6px}
  .kh b{font-size:12px}
  .kh span{font-size:10.5px;color:var(--mut);font-family:var(--mono)}
  .kcard{background:var(--s1);border:1px solid var(--line);border-radius:8px;padding:10px 12px;
    display:flex;flex-direction:column;gap:4px}
  .kcard.pend{border-color:rgba(138,91,0,.45);box-shadow:inset 3px 0 0 var(--warn)}
  .kn{font-size:12px;font-weight:600}
  .kc{font-size:10.5px;color:var(--mut)}
  .kv{font-size:12.5px;font-weight:600;font-family:var(--mono)}
  .kfoot{display:flex;align-items:center;gap:6px;margin-top:2px}
  .kdias{font-size:10px;color:var(--dim);font-family:var(--mono)}
  .kdias.late{color:var(--err);font-weight:600}
  .kav{margin-left:auto;width:19px;height:19px;border-radius:50%;background:var(--s3);color:var(--mut);
    font-size:9.5px;font-weight:600;display:flex;align-items:center;justify-content:center}
  .kag{font-size:10px;color:var(--brand2);background:var(--brand-soft);border-radius:5px;padding:4px 7px;margin-top:3px}

  /* organograma */
  .org{display:flex;flex-direction:column;align-items:center;gap:0}
  .node{border:1px solid var(--line2);background:var(--s1);border-radius:8px;padding:9px 16px;text-align:center;min-width:150px}
  .node b{display:block;font-size:12px}
  .node span{font-size:10.5px;color:var(--mut)}
  .node.ai{border-style:dashed;border-color:var(--brand-line);background:var(--brand-soft)}
  .node.ai b{color:var(--brand2)}
  .trunk{width:1px;height:20px;background:var(--line2)}
  .tree{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%;
    border-top:1px solid var(--line2);padding-top:20px;position:relative}
  .pillar{display:flex;flex-direction:column;align-items:center;gap:10px}

  /* organograma deitado (render-os.js) */
  .oc{overflow-x:auto;padding:2px 0 6px}
  .oc ul{display:flex;justify-content:center;position:relative;margin:0;padding:18px 0 0;list-style:none}
  .oc li{display:flex;flex-direction:column;align-items:center;position:relative;padding:18px 7px 0}
  .oc li::before,.oc li::after{content:'';position:absolute;top:0;right:50%;width:50%;height:18px;border-top:1px solid var(--line2)}
  .oc li::after{right:auto;left:50%;border-left:1px solid var(--line2)}
  .oc li:only-child::before,.oc li:only-child::after{display:none}
  .oc li:only-child{padding-top:0}
  .oc li:first-child::before,.oc li:last-child::after{border:0 none}
  .oc li:last-child::before{border-right:1px solid var(--line2);border-radius:0 6px 0 0}
  .oc li:first-child::after{border-radius:6px 0 0 0}
  .oc ul ul::before{content:'';position:absolute;top:0;left:50%;height:18px;border-left:1px solid var(--line2)}
  .oc>ul{padding-top:0}
  .oc-card{position:relative;width:210px;border:1px solid var(--s3);border-radius:8px;padding:8px 11px;background:var(--s2);text-align:center}
  .oc-card b{display:block;font-size:12px}
  .oc-card .dim,.oc-card .mut{display:block}
  .oc-card .oc-rp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .oc-pilha{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding-top:18px}
  .oc-pilha::before{content:'';position:absolute;top:0;bottom:20px;left:50%;border-left:1px solid var(--line2)}
  .oc-grupo{position:relative;font-size:10.5px;color:var(--mut);background:var(--s1);border:1px solid var(--line2);border-radius:999px;padding:2px 10px;max-width:210px;text-align:center}
  .oc-lista{display:none}
  @media(max-width:760px){ .oc{display:none} .oc-lista{display:block} }

  /* conexões */
  .conn{display:flex;align-items:center;gap:12px;background:var(--s1);border:1px solid var(--line);
    border-radius:10px;padding:11px 15px}
  .conn .ci{width:30px;height:30px;border-radius:8px;background:var(--s2);color:var(--mut);
    display:flex;align-items:center;justify-content:center;flex:none}
  .conn .ci svg{width:16px;height:16px}
  .conn b{display:block;font-size:12.5px}
  .conn span{font-size:10.5px;color:var(--mut)}
  .conn .pill{margin-left:auto}

  .demo{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--mut);
    max-width:1440px;margin:0 auto 8px;padding:0 2px}
  .demo b{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--brand2);background:var(--brand-soft);border:1px solid var(--brand-line);
    border-radius:999px;padding:2px 9px}

  @media(max-width:1000px){
    .app{grid-template-columns:1fr;grid-template-rows:56px auto 1fr;height:auto}
    .top{grid-column:1/2}
    nav{border-right:0;border-bottom:1px solid var(--nav-line);flex-direction:row;flex-wrap:wrap;gap:6px}
    .nsec{width:100%;padding:6px 4px 0}
    .nv{width:auto}
    .root-foot{width:100%;margin-top:6px}
    .search{display:none}
    .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid2,.grid3{grid-template-columns:1fr}
  }