/* ==========================================================================
   Ferro em Brasa OS — casca · protótipo C2 (rodada 2)
   Padrão visual: design/03-padrao-visual-referencias.md (as 12 regras).
   Barra lateral cinza-clara 260 px · área principal branca com ar ·
   cartão com borda de 1 px e sombra quase nula · UMA ação principal por tela.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --fundo: #FFFFFF;
  --lateral: #F7F8FA;
  --moldura: #F2F3F5;
  --cartao: #FFFFFF;
  --cartao-2: #FAFBFC;
  --linha: #E8EAEE;
  --linha-forte: #D8DCE3;
  --texto: #16181D;
  --texto-2: #616A78;
  --texto-3: #8D95A3;

  /* o único acento das ações: quase-preto (regras 1 e 12) */
  --acento: #111827;
  --sobre-acento: #FFFFFF; /* texto em cima do acento */
  --acento-hover: #26303F;
  --marca: #E2551E;       /* só no símbolo da marca */
  --cinza-suave: #F1F3F6; /* fundo de código, chips e faixas */
  --cinza-suave-2: #EFF1F5;
  --borda-hover: #C6CDD7;
  --branco-fixo: #FFFFFF; /* o que fica branco mesmo no escuro: quadro de anexo, imagem, iframe */

  --canto: 14px;
  --canto-p: 10px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .04);
  --sombra-alta: 0 4px 12px rgba(16, 24, 40, .08), 0 24px 56px rgba(16, 24, 40, .12);

  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e7: 32px; --e8: 40px;

  /* 7 estados — 1 cor fixa + 1 fundo suave por palavra (regra 9) */
  --estado-trabalhando: #15803D;         --fundo-trabalhando: #ECF7F0;
  --estado-esperando-voce: #A16207;      --fundo-esperando-voce: #FBF4E6;
  /* r6, correção 9 / regra 12: a casa tem UM acento (quase-preto). A lavanda
     do "esperando aprovação" era a única cor de produto fora dele — e caía
     justamente no cartão de aprovação, a ação principal do Início. */
  --estado-esperando-aprovacao: #1F2430; --fundo-esperando-aprovacao: var(--cinza-suave);
  --estado-pronto: #1D4ED8;              --fundo-pronto: #EDF2FE;
  --estado-sem-sinal: #BE123C;           --fundo-sem-sinal: #FDEDF1;
  --estado-desativado: #5B6472;          --fundo-desativado: var(--cinza-suave);
  /* r5: "atrasado" saiu do mesmo âmbar de "esperando você" (#A16207). Distância
     no RGB: sqrt(37²+53²+11²) = 65,6 — acima dos 60 que a nota r4 exigiu. */
  --estado-atrasado: #7C2D12;            --fundo-atrasado: #F5EAE3;
}

* { box-sizing: border-box; }
/* rolagem sem animação: com 'smooth' o navegador anima qualquer scrollIntoView
   e a posição medida depois de um clique deixa de ser a real (medido 19/09). */
html { scroll-behavior: auto; }

body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; font-weight: 400; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.018em; }
h1 { font-size: 34px; line-height: 1.16; letter-spacing: -.026em; }
h2 { font-size: 16px; letter-spacing: -.012em; }
h3 { font-size: 14px; letter-spacing: -.008em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }

.eyebrow { display: block; font-size: 11px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--texto-3); }

/* ============================ estrutura ============================ */

.app { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }

.barra-lateral {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column; gap: var(--e2);
  background: var(--lateral); border-right: 1px solid var(--linha); padding: 12px 12px 10px;
}

.seletor {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 9px; border-radius: var(--canto-p); border: 1px solid transparent;
  background: none; cursor: pointer; text-align: left; font: inherit;
}
.seletor:hover { background: var(--cinza-suave-2); }
.seletor .marca-quadro { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--fundo); border: 1px solid var(--linha); }
.seletor .corpo { min-width: 0; flex: 1; }
.seletor .nome { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; display: block; }
.seletor .sub { font-size: 11.5px; color: var(--texto-2); display: block; }
.seletor .chevron { color: var(--texto-3); flex: none; }

.campo-busca {
  display: flex; align-items: center; gap: 8px; height: 33px; padding: 0 10px;
  border: 1px solid var(--linha-forte); border-radius: var(--canto-p);
  background: var(--fundo); color: var(--texto-3); font-size: 13px; cursor: text;
}
.campo-busca .rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.campo-busca .tecla { margin-left: auto; font-size: 11px; color: var(--texto-3); border: 1px solid var(--linha); border-radius: 5px; padding: 1px 5px; background: var(--cartao-2); }

.menu { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.menu-grupo { display: flex; align-items: center; gap: 8px; padding: 9px 9px 4px; font-size: 11px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--texto-3); }
.menu-grupo .risco { flex: 1; height: 1px; background: var(--linha); }
/* r6, correção 3: o item perdeu 2 px de altura em cima e embaixo. Era o que
   fazia "Ajustes" ficar 17 px abaixo da borda da lateral em 19/19 rotas. */
.menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 9px; border-radius: 8px; border: 0; background: none;
  color: var(--texto-2); font-size: 13.5px; font-weight: 500;
  cursor: pointer; text-align: left; width: 100%;
  transition: background .12s ease, color .12s ease;
}
.menu-item:hover { background: var(--cinza-suave-2); color: var(--texto); }
.menu-item.ativo { background: var(--cinza-suave-2); color: var(--texto); font-weight: 600; }
.menu-item svg { flex: none; opacity: .85; }
.menu-item .conta-bolinha { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--acento); color: var(--sobre-acento); font-size: 11px; font-weight: 600; display: grid; place-items: center; }
/* r5: sub-item da lateral (Agentes › Organograma) — indentado, com fio à esquerda */
.menu-item.filho { padding-left: 30px; font-size: 12.5px; color: var(--texto-2); position: relative; }
.menu-item.filho::before { content: ''; position: absolute; left: 17px; top: 6px; bottom: 6px; width: 1px; background: var(--linha-forte); }
.menu-item.filho.ativo { background: var(--cinza-suave-2); color: var(--texto); }
.lista-nomeada .item.filho { padding-left: 30px; }

.lateral-rodape { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.conta-lateral { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border-radius: var(--canto-p); border: 0; background: none; cursor: pointer; text-align: left; font: inherit; }
.conta-lateral:hover { background: var(--cinza-suave-2); }
.conta-lateral .corpo { min-width: 0; }
.conta-lateral .nome { font-size: 13px; font-weight: 500; display: block; }
.conta-lateral .sub { font-size: 11.5px; color: var(--texto-2); display: block; }
.cota-lateral { border-top: 1px solid var(--linha); padding: 10px 8px 2px; display: flex; flex-direction: column; gap: 6px; }
.cota-lateral .linha1 { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
.cota-lateral .valor { font-weight: 600; }
.cota-lateral .pe { font-size: 11.5px; color: var(--texto-3); }

.coluna { display: flex; flex-direction: column; min-width: 0; background: var(--moldura); }

.barra-topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--e3);
  height: 56px; padding: 0 var(--e4) 0 var(--e5);
  background: var(--moldura); border-bottom: 0;
}
.topo-titulo { font-size: 13.5px; font-weight: 600; color: var(--texto-2); }
.topo-direita { margin-left: auto; display: flex; align-items: center; gap: var(--e3); }
.topo-cota { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--texto-2); }

.tela {
  background: var(--fundo); border: 1px solid var(--linha); border-radius: 16px;
  margin: 0 16px 16px; padding: var(--e6) var(--e6) var(--e7); min-height: calc(100vh - 88px);
}

.migalha { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texto-2); margin-bottom: 10px; }
.migalha button { border: 0; background: none; padding: 0; cursor: pointer; color: var(--texto-2); display: inline-flex; align-items: center; gap: 4px; }
.migalha button:hover { color: var(--texto); text-decoration: underline; text-underline-offset: 2px; }
.migalha .sep { color: var(--texto-3); }
.migalha .atual { color: var(--texto); font-weight: 600; }

.cabeca-tela { margin-bottom: var(--e3); }
.cabeca-tela .linha1 { display: flex; align-items: center; gap: var(--e4); }
.cabeca-tela .ajuda { color: var(--texto-2); font-size: 14px; margin-top: 5px; }
.cabeca-tela .acao { margin-left: auto; }

.bloco { margin-bottom: var(--e7); }
.bloco-cabeca { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.bloco-cabeca h2 { font-size: 16px; }
.bloco-cabeca .conta { font-size: 12px; color: var(--texto-2); background: var(--cinza-suave); border-radius: 999px; padding: 1px 8px; font-weight: 500; }
.bloco-cabeca .direita { margin-left: auto; display: flex; gap: var(--e2); align-items: center; }

/* ============================ peças ============================ */

.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--canto); box-shadow: var(--sombra); }
.cartao-p { padding: var(--e4); }

.avatar {
  flex: none; position: relative; border-radius: 50%;
  width: 34px; height: 34px; overflow: hidden;
  background: var(--cinza-suave-2); color: #48546A;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  box-shadow: 0 0 0 2px var(--cartao), 0 0 0 3.5px var(--anel, var(--linha-forte));
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.g { width: 42px; height: 42px; font-size: 14px; }
.avatar.gg { width: 64px; height: 64px; font-size: 20px; }
.avatar.p { width: 25px; height: 25px; font-size: 10px; }
.avatar.pessoa { background: #F6F4F1; color: #6B5D4E; }

.pilula { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 19px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; }
.pilula.agente { background: var(--acento); color: var(--sobre-acento); }
.pilula.pessoa { background: var(--fundo); color: #4A5464; border: 1px solid var(--linha-forte); }
.pilula svg { flex: none; }

.chip-area { display: inline-flex; align-items: flex-start; gap: 6px; flex: 0 1 auto; min-height: 20px; padding: 2px 8px 2px 7px; border-radius: 10px; border: 1px solid var(--linha); background: var(--cartao); font-size: 11.5px; line-height: 1.35; color: var(--texto-2); min-width: 0; max-width: 100%; }
.chip-area .ponto { margin-top: 5px; }
.chip-area .rot { overflow: visible; white-space: normal; overflow-wrap: break-word; min-width: 0; }
.ponto { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--cor, var(--texto-3)); }

.estado { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--cor-estado); }
.estado .ponto { background: var(--cor-estado); }
.estado.chip { height: 21px; padding: 0 9px 0 7px; border-radius: 999px; background: var(--fundo-estado); border: 0; }
.e-trabalhando { --cor-estado: var(--estado-trabalhando); --fundo-estado: var(--fundo-trabalhando); }
.e-esperando-voce { --cor-estado: var(--estado-esperando-voce); --fundo-estado: var(--fundo-esperando-voce); }
.e-esperando-aprovacao { --cor-estado: var(--estado-esperando-aprovacao); --fundo-estado: var(--fundo-esperando-aprovacao); }
.e-pronto { --cor-estado: var(--estado-pronto); --fundo-estado: var(--fundo-pronto); }
.e-sem-sinal { --cor-estado: var(--estado-sem-sinal); --fundo-estado: var(--fundo-sem-sinal); }
.e-desativado { --cor-estado: var(--estado-desativado); --fundo-estado: var(--fundo-desativado); }
.e-atrasado { --cor-estado: var(--estado-atrasado); --fundo-estado: var(--fundo-atrasado); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 9px; cursor: pointer; border: 1px solid var(--linha-forte); background: var(--cartao); color: var(--texto); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background .12s ease, border-color .12s ease; }
.btn:hover { background: var(--cartao-2); border-color: var(--borda-hover); }
.btn.principal { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.btn.principal:hover { background: var(--acento-hover); }
.btn.pilula-acao { border-radius: 999px; height: 36px; padding: 0 17px; font-weight: 600; }
.btn.larga { width: 100%; height: 38px; font-weight: 600; }
.btn.forte { border: 1.5px solid var(--acento); color: var(--acento); font-weight: 600; background: var(--cartao); }
.btn.forte:hover { background: var(--cinza-suave); border-color: var(--acento); }
.btn.p { height: 30px; padding: 0 11px; font-size: 12.5px; }
.btn.texto { border-color: transparent; background: none; color: var(--texto-2); padding: 0 8px; }
.btn.texto:hover { background: var(--cinza-suave); color: var(--texto); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--cartao); border-color: var(--linha-forte); }
.btn.principal:disabled:hover { background: var(--acento); }

/* ---------- seleção própria (no lugar do <select> cru do navegador) ---------- */
.selecao { position: relative; }
.selecao-gatilho { width: 100%; display: flex; align-items: center; gap: 8px; font: inherit; font-size: 13.5px;
  color: var(--texto); background: var(--cartao); border: 1px solid var(--linha-forte); border-radius: 10px;
  height: 38px; padding: 0 11px; cursor: pointer; text-align: left; }
.selecao-gatilho .val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selecao-gatilho svg { flex: none; color: var(--texto-3); }
.selecao-gatilho:hover { border-color: var(--borda-hover); }
.selecao-gatilho:focus-visible { outline: 0; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(17,24,39,.07); }
.selecao-gatilho[aria-expanded="true"] { border-color: var(--acento); }
.selecao-lista { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); max-height: 244px; overflow: auto;
  background: var(--cartao); border: 1px solid var(--linha-forte); border-radius: 12px; box-shadow: var(--sombra-alta); padding: 5px; }
.selecao-lista [role="option"] { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
  font: inherit; font-size: 13px; color: var(--texto); background: none; border: 0; border-radius: 8px;
  padding: 7px 9px; cursor: pointer; text-align: left; }
.selecao-lista [role="option"]:hover, .selecao-lista [role="option"]:focus-visible { background: var(--cinza-suave); outline: 0; }
.selecao-lista [role="option"][aria-selected="true"] { background: var(--cinza-suave-2); font-weight: 600; }
.selecao-lista [role="option"] .sub { font-size: 11.5px; color: var(--texto-3); font-weight: 400; }

/* ---------- o cartão de "isto não volta" ---------- */
.cartao.ficha-cartao.sem-volta { border-color: var(--estado-sem-sinal); background: var(--fundo-sem-sinal); }
.cartao.ficha-cartao.sem-volta h3 { color: var(--estado-sem-sinal); }
.btn-circulo { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 0; background: var(--acento); color: var(--sobre-acento); cursor: pointer; }
.btn-circulo:hover { background: var(--acento-hover); }
.btn-icone { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; border: 0; background: none; color: var(--texto-2); cursor: pointer; }
.btn-icone:hover { background: var(--cinza-suave); color: var(--texto); }

.vazio { display: grid; place-items: center; gap: 10px; text-align: center; padding: 46px var(--e4); border: 1px solid var(--linha); border-radius: var(--canto); background: var(--cartao-2); }
.vazio .titulo { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.vazio .ajuda { color: var(--texto-2); font-size: 13.5px; max-width: 420px; }

/* ============================ Início ============================ */

.inicio { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--e6); align-items: start; }
.trilho { display: flex; flex-direction: column; gap: var(--e3); position: sticky; top: 76px; }

.destaque { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: var(--e5); padding: var(--e5); align-items: center; }
.destaque .retrato { border-radius: 12px; background: var(--cartao-2); border: 1px solid var(--linha); display: grid; place-items: center; padding: var(--e4); height: 100%; }
.destaque .retrato img { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 3px var(--fundo), 0 0 0 5px var(--anel, var(--linha-forte)); }
.destaque .corpo { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.destaque .titulo { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.destaque .frase { font-size: 14px; color: var(--texto); }
.destaque .consequencia { font-size: 13px; color: var(--texto-2); }
.destaque .marcas { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.destaque .acoes { display: flex; gap: 8px; align-items: center; margin-top: 2px; }

.mural { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.mural .pedido { padding: var(--e4); display: flex; flex-direction: column; gap: 8px; }
.mural .pedido .topo { display: flex; align-items: center; gap: 8px; }
.mural .pedido .quando { margin-left: auto; font-size: 11.5px; color: var(--texto-3); }
.mural .pedido .titulo { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.mural .pedido .frase { font-size: 13px; color: var(--texto-2); }
.mural .pedido .consequencia { font-size: 12.5px; color: var(--texto-2); border-left: 2px solid var(--linha-forte); padding-left: 9px; }
.mural .pedido .acoes { display: flex; gap: 6px; margin-top: auto; padding-top: 2px; }

.pulso { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e3); }
.pulso .item { padding: 13px var(--e4); display: flex; flex-direction: column; gap: 3px; }
.pulso .rotulo { font-size: 12px; color: var(--texto-2); display: flex; align-items: center; gap: 6px; }
.pulso .num { font-size: 24px; font-weight: 600; letter-spacing: -.028em; }
.pulso .pe { font-size: 11.5px; color: var(--texto-3); }
.frase-pulso { margin-top: var(--e3); font-size: 13.5px; color: var(--texto-2); }

.areas-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.area-cartao { padding: 13px var(--e4); text-align: left; cursor: pointer; width: 100%; display: flex; flex-direction: column; gap: 7px; font: inherit; transition: border-color .14s ease, box-shadow .14s ease; }
.area-cartao:hover { border-color: var(--linha-forte); box-shadow: 0 2px 8px rgba(16, 24, 40, .07); }
.area-cartao .topo { display: flex; align-items: center; gap: 7px; }
.area-cartao .nome { font-size: 13.5px; font-weight: 600; }
.area-cartao .qtd { margin-left: auto; font-size: 11.5px; color: var(--texto-2); }
.area-cartao .dono { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--texto-2); }
.area-cartao .estados { display: flex; flex-direction: column; gap: 4px; }
.area-cartao .linha-estado { font-size: 12px; color: var(--texto-2); display: flex; flex-wrap: wrap; gap: 1px 6px; align-items: baseline; min-width: 0; }
.area-cartao .linha-estado .quem { color: var(--texto); min-width: 0; white-space: normal; overflow-wrap: break-word; }

.tabela { overflow: hidden; }
.tabela .cabecalho, .tabela .linha { display: grid; grid-template-columns: 46px 186px minmax(0, 1fr) 168px 86px 82px; align-items: center; gap: 12px; padding: 9px var(--e4); }
.tabela .cabecalho { font-size: 11.5px; color: var(--texto-3); border-bottom: 1px solid var(--linha); background: none; font-weight: 500; letter-spacing: .01em; }
.tabela .linha { border-bottom: 1px solid var(--cinza-suave); font-size: 13px; }
.tabela .linha:last-of-type { border-bottom: 0; }
.tabela .hora { font-variant-numeric: tabular-nums; color: var(--texto-3); font-size: 12px; }
.tabela .quem { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tabela .quem .nome { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabela .oque { color: var(--texto-2); white-space: normal; overflow: visible; min-width: 0; overflow-wrap: break-word; }
.tabela .ferramenta { font-size: 12px; color: var(--texto-2); display: flex; align-items: center; gap: 7px; min-width: 0; }
.tabela .ferramenta .rot { white-space: normal; overflow-wrap: break-word; }
.tabela .metrica { justify-self: start; font-size: 11.5px; color: var(--texto-2); background: var(--cinza-suave); border-radius: 999px; padding: 2px 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela .acao-linha { justify-self: end; }
.tabela .compressor { display: flex; justify-content: center; padding: 11px; border-top: 1px solid var(--linha); background: var(--cartao-2); }

.passo-linha { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--linha); background: var(--cartao); font-size: 13px; }
.passo-linha.feito { background: var(--cartao-2); color: var(--texto-2); }
.passo-linha .bola { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1.5px solid var(--linha-forte); color: var(--sobre-acento); font-size: 10px; }
.passo-linha.feito .bola { background: var(--estado-trabalhando); border-color: var(--estado-trabalhando); }

.barra { height: 7px; border-radius: 999px; background: var(--cinza-suave-2); overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: 999px; background: var(--acento); }
.cota { padding: var(--e4); display: flex; flex-direction: column; gap: 9px; }
.cota .linha1 { display: flex; align-items: baseline; gap: var(--e2); }
.cota .valor { font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.cota .quando { margin-left: auto; font-size: 11.5px; color: var(--texto-2); }
.cota .pe { font-size: 12px; color: var(--texto-2); }
.gasto-linha { display: flex; align-items: center; gap: 8px; padding: 8px var(--e4); border-top: 1px solid var(--cinza-suave); font-size: 12.5px; }
.gasto-linha .nome { color: var(--texto); }
.gasto-linha .v { margin-left: auto; color: var(--texto-2); font-variant-numeric: tabular-nums; }

/* ============================ Pessoas & Cargos ============================ */

.areas-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; align-items: start; }
.area-bloco { overflow: hidden; }
.area-bloco.aberta { grid-column: 1 / -1; }
.area-cabeca { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 14px; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; }
.area-cabeca:hover { background: var(--lateral); }
.area-cabeca .nome { font-size: 13.5px; font-weight: 600; }
.area-cabeca .qtd { font-size: 12px; color: var(--texto-2); }
.area-cabeca .seta { margin-left: auto; color: var(--texto-3); transition: transform .16s ease; }
.area-bloco.aberta .area-cabeca .seta { transform: rotate(90deg); }
.linha-dono { display: flex; align-items: center; gap: 8px; padding: 0 14px 5px; font-size: 12.5px; color: var(--texto-2); border-bottom: 1px solid var(--cinza-suave); }
.linha-dono .nome { color: var(--texto); font-weight: 500; }
.linha-dono .avatar { width: 22px; height: 22px; font-size: 9.5px; }
.resumo-estados { padding: 5px 14px 8px; display: flex; flex-direction: column; gap: 3px; }
.resumo-estados .linha { display: flex; gap: 7px; align-items: baseline; font-size: 12px; line-height: 1.34; }
.resumo-estados .linha .estado { flex: none; }
.resumo-estados .nomes { color: var(--texto-2); min-width: 0; }

.cargos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 10px; padding: var(--e3) 14px var(--e4); }
.cargo-cartao { display: flex; align-items: center; gap: 10px; padding: 10px 11px; width: 100%; border: 1px solid var(--linha); border-radius: var(--canto-p); background: var(--cartao); cursor: pointer; text-align: left; font: inherit; }
.cargo-cartao:hover { border-color: var(--linha-forte); background: var(--cartao-2); }
.cargo-cartao.selecionado { border-color: var(--acento); }
.cargo-cartao .corpo { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cargo-cartao .nome { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cargo-cartao .baixo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.leiza-cartao { display: flex; align-items: center; gap: var(--e3); padding: 8px var(--e4); margin-bottom: 8px; }
.leiza-cartao .corpo { min-width: 0; }
.leiza-cartao .nome { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.leiza-cartao .frase { font-size: 12.5px; color: var(--texto-2); margin-top: 2px; }
.leiza-cartao .acoes { margin-left: auto; display: flex; gap: var(--e2); align-items: center; }

/* ============================ painel lateral ============================ */

.veu { position: fixed; inset: 0; background: rgba(16, 24, 40, .3); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .16s ease; }
.veu.aberto { opacity: 1; pointer-events: auto; }
.painel { position: fixed; top: 0; right: 0; bottom: 0; width: 430px; max-width: 100vw; z-index: 50; background: var(--lateral); border-left: 1px solid var(--linha); box-shadow: var(--sombra-alta); transform: translateX(100%); transition: transform .18s ease; display: flex; flex-direction: column; }
.painel.aberto { transform: none; }
.painel-topo { display: flex; align-items: center; gap: 10px; padding: var(--e4); border-bottom: 1px solid var(--linha); background: var(--cartao); }
.painel-topo .titulo { font-size: 14px; font-weight: 600; }
.painel-topo .fechar { margin-left: auto; }
.painel-corpo { overflow-y: auto; padding: var(--e4); display: flex; flex-direction: column; gap: 10px; }
.ficha-cartao { padding: 13px var(--e4); }
.ficha-cartao h3 { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 7px; }
.ficha-cartao .texto { font-size: 13.5px; }
.ficha-cartao ul { margin: 0; padding-left: 17px; font-size: 13.5px; }
.ficha-cartao li { margin-bottom: 3px; }
.ficha-cartao .marcas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.marca-item { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid var(--linha); border-radius: 999px; font-size: 12px; color: var(--texto-2); background: var(--cartao-2); }

/* ============================ Conversas ============================ */

.conversas { display: grid; grid-template-columns: 274px minmax(0, 1fr); gap: var(--e3); height: calc(100vh - 236px); min-height: 560px; }
.conversas.com-info { grid-template-columns: 274px minmax(0, 1fr) 286px; }
.lista-conversas { overflow-y: auto; padding: var(--e3); display: flex; flex-direction: column; gap: 1px; background: var(--cartao); }
.lista-conversas .grupo { display: flex; align-items: center; gap: 8px; padding: 12px 9px 5px; font-size: 11px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--texto-3); }
.lista-conversas .grupo .risco { flex: 1; height: 1px; background: var(--linha); }
.conversa-item { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 9px; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; width: 100%; }
.conversa-item:hover { background: var(--cartao-2); }
.conversa-item.ativo { background: var(--cinza-suave-2); }
.conversa-item .corpo { min-width: 0; flex: 1; }
.conversa-item .nome { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; white-space: normal; overflow: visible; }
.conversa-item .nome .rot { overflow: visible; white-space: normal; overflow-wrap: break-word; min-width: 0; }
.conversa-item .resumo { display: block; font-size: 12px; line-height: 1.35; color: var(--texto-2); white-space: normal; overflow: visible; overflow-wrap: break-word; }
.conversa-item .corpo { display: block; }
.conversa-item .novas { font-size: 11px; color: var(--estado-esperando-voce); font-weight: 600; white-space: nowrap; }
.canal-quadrado { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--linha); background: var(--cartao-2); color: var(--texto-2); font-size: 13px; font-weight: 600; }

.fio { display: flex; flex-direction: column; overflow: hidden; }
.fio-topo { display: flex; align-items: center; gap: 10px; padding: 11px var(--e4); border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.fio-topo .nome { white-space: nowrap; }
.fio-topo .nome { font-size: 14px; font-weight: 600; }
.fio-topo .sub { font-size: 12px; color: var(--texto-2); }
.fio-corpo { flex: 1; overflow-y: auto; padding: var(--e5) var(--e5) var(--e4); display: flex; flex-direction: column; gap: var(--e5); }

.msg { display: flex; gap: 10px; }
.msg .corpo { min-width: 0; flex: 1; }
.msg .cabeca { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 5px; }
.msg .autor { font-size: 13px; font-weight: 600; }
.msg .hora { font-size: 11.5px; color: var(--texto-3); }
.msg .texto { font-size: 14px; color: var(--texto); max-width: 660px; }
.msg.de-pessoa .texto { background: var(--cartao-2); border: 1px solid var(--linha); border-radius: 12px; padding: 9px 12px; display: inline-block; }
.msg.do-dono { flex-direction: row-reverse; }
.msg.do-dono .cabeca { justify-content: flex-end; }
.msg.do-dono .texto { background: var(--cinza-suave); border: 0; border-radius: 14px; padding: 10px 14px; display: inline-block; }
.msg.do-dono .corpo { display: flex; flex-direction: column; align-items: flex-end; }

.trabalhou { margin-bottom: 9px; }
.trabalhou .gatilho { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; font-size: 12.5px; color: var(--texto-2); padding: 0; font-weight: 500; }
.trabalhou .gatilho:hover { color: var(--texto); }
.trabalhou .gatilho .seta { transition: transform .16s ease; }
.trabalhou.aberto .gatilho .seta { transform: rotate(90deg); }
.trabalhou .passos-lista { margin: 8px 0 0; padding: 0 0 0 13px; border-left: 2px solid var(--linha); list-style: none; display: flex; flex-direction: column; gap: 5px; }
.trabalhou .passos-lista li { font-size: 12.5px; color: var(--texto-2); }
.pensando { display: flex; flex-direction: column; gap: 7px; }
.pensando .linha1 { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--texto-2); }
.pensando .passos-lista { margin: 0; padding: 0 0 0 13px; border-left: 2px solid var(--linha); list-style: none; display: flex; flex-direction: column; gap: 4px; }
.pensando .passos-lista li { font-size: 12.5px; color: var(--texto-2); }
.pisca { width: 7px; height: 7px; border-radius: 50%; background: var(--estado-trabalhando); animation: bate 1.4s ease-in-out infinite; }
@keyframes bate { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pisca { animation: none; opacity: 1; } * { transition-duration: .01ms !important; } }

.carrossel { margin-top: 10px; max-width: 660px; }
.carrossel .trilho-fotos { display: flex; gap: var(--e2); overflow-x: auto; padding-bottom: 4px; }
.carrossel .foto { flex: none; width: 150px; border: 1px solid var(--linha); border-radius: 11px; overflow: hidden; background: var(--cartao); cursor: zoom-in; padding: 0; font: inherit; text-align: left; }
.carrossel .foto img { width: 100%; height: 104px; object-fit: cover; display: block; }
.carrossel .foto .legenda { font-size: 11.5px; color: var(--texto-2); padding: 6px 8px; }
.carrossel .pe { font-size: 11.5px; color: var(--texto-3); margin-top: 6px; }

.anexo-html { margin-top: 10px; max-width: 660px; border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; background: var(--cartao); box-shadow: var(--sombra); }
.anexo-html .cabeca { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-bottom: 1px solid var(--linha); }
.anexo-html .quadro-icone { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; border: 1px solid var(--linha); background: var(--cartao-2); color: var(--texto-2); }
.anexo-html .titulo { font-size: 13px; font-weight: 600; }
.anexo-html .sub { font-size: 11.5px; color: var(--texto-2); }
.anexo-html .acoes { margin-left: auto; }
.anexo-html iframe { width: 100%; height: 228px; border: 0; display: block; background: #FFFFFF; }

.portao { margin-top: 10px; max-width: 660px; border: 1px solid var(--linha-forte); border-radius: 12px; background: var(--cartao); overflow: hidden; }
.portao .cabeca { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-bottom: 1px solid var(--linha); }
.portao .titulo { font-size: 13.5px; font-weight: 600; }
.portao .corpo { padding: 11px 13px; display: flex; flex-direction: column; gap: 9px; }
.portao .linhas { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--texto-2); }
.portao .assinatura { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--texto-2); flex-wrap: wrap; }
.portao .consequencia { font-size: 12.5px; font-weight: 500; color: var(--estado-esperando-aprovacao); background: var(--fundo-esperando-aprovacao); border-radius: 9px; padding: 7px 10px; }
.portao .acoes { display: flex; gap: 6px; padding: 0 13px 12px; }
.portao .resolvido { padding: 11px 13px; font-size: 13px; color: var(--texto-2); }

.compositor { border-top: 1px solid var(--linha); padding: var(--e3) var(--e4) var(--e4); }
.caixa { border: 1px solid var(--linha-forte); border-radius: var(--canto); background: var(--cartao); padding: 11px 12px 9px; display: flex; flex-direction: column; gap: 9px; box-shadow: var(--sombra); }
.caixa .campo { font-size: 14px; color: var(--texto-3); min-height: 22px; }
.caixa .pe { display: flex; align-items: center; gap: 7px; }
.caixa .pe .direita { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.chip-modo { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--linha); background: var(--cartao-2); font-size: 12px; color: var(--texto-2); cursor: pointer; }

.tela-cheia { position: fixed; inset: 0; z-index: 60; background: rgba(16, 24, 40, .94); display: flex; flex-direction: column; padding: 0 var(--e6) var(--e6); gap: 0; }
.tela-cheia .cabeca { display: flex; align-items: center; gap: var(--e3); color: var(--sobre-acento); height: 58px; }
.tela-cheia .cabeca .titulo { font-size: 15px; font-weight: 600; }
.tela-cheia .cabeca .btn { margin-left: auto; }
.tela-cheia .quadro { flex: 1; background: #FFFFFF; border-radius: var(--canto); overflow: hidden; }
.tela-cheia iframe, .tela-cheia img { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #FFFFFF; }

/* ============================ Trabalho ============================ */

.filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--e4); }
.filtro { height: 31px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--cartao); color: var(--texto-2); font-size: 12.5px; cursor: pointer; font-weight: 500; }
.filtro:hover { background: var(--cartao-2); }
.filtro.ativo { background: var(--cinza-suave-2); border-color: var(--linha-forte); color: var(--texto); font-weight: 600; }

.quadro-colunas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e3); align-items: start; }
.coluna-trabalho { display: flex; flex-direction: column; gap: var(--e2); }
.coluna-trabalho .cabeca { display: flex; align-items: center; gap: 7px; padding: 0 2px 2px; }
.coluna-trabalho .cabeca .nome { font-size: 12.5px; font-weight: 600; }
.coluna-trabalho .cabeca .qtd { font-size: 11.5px; color: var(--texto-3); }
.tarefa { padding: 11px 12px; display: flex; flex-direction: column; gap: 7px; width: 100%; cursor: pointer; text-align: left; font: inherit; }
.tarefa:hover { border-color: var(--linha-forte); box-shadow: 0 2px 8px rgba(16, 24, 40, .07); }
.tarefa .titulo { font-size: 13px; font-weight: 500; line-height: 1.35; }
.tarefa .pe { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tarefa .prazo { font-size: 11.5px; color: var(--texto-3); }
.coluna-vazia { font-size: 12px; color: var(--texto-3); padding: var(--e4) 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; border: 1px dashed var(--linha-forte); border-radius: var(--canto-p); background: var(--cartao-2); }
.passos { margin: 0; padding-left: 18px; font-size: 13px; color: var(--texto-2); }

/* ============================ Painéis ============================ */

.paineis-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.painel-area { padding: var(--e4); display: flex; flex-direction: column; gap: 11px; }
.painel-area .topo { display: flex; align-items: center; gap: 8px; }
.painel-area .nome { font-size: 13.5px; font-weight: 600; }
.painel-area .dono { margin-left: auto; font-size: 12px; color: var(--texto-2); }
.painel-area .numeros { display: flex; gap: var(--e6); flex-wrap: wrap; }
.painel-area .num { display: flex; flex-direction: column; gap: 1px; }
.painel-area .num .v { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.painel-area .num .r { font-size: 11.5px; color: var(--texto-2); }
.painel-area .indicador { font-size: 12.5px; color: var(--texto-2); border-top: 1px solid var(--cinza-suave); padding-top: 9px; }
.painel-area .indicador b { color: var(--texto); font-weight: 600; }

.mapa-calor { display: flex; flex-direction: column; gap: 10px; padding: var(--e4); }
.mapa-calor .legenda .quadrinho { width: 12px; height: 12px; border-radius: 3px; }
.mapa-calor .quadrinho { background: var(--cinza-suave-2); }
.mapa-calor .n1 { background: #D6EADC; } .mapa-calor .n2 { background: #A8D5B6; }
.mapa-calor .n3 { background: #6BB989; } .mapa-calor .n4 { background: #2F8B57; }
.mapa-calor .legenda { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--texto-3); }

/* ============================ Cérebro ============================ */

.cerebro { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--e3); align-items: start; }
.memoria { padding: 12px var(--e4); display: flex; flex-direction: column; gap: 8px; }
.memoria .topo { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.memoria .tipo { font-size: 11.5px; color: var(--texto-2); border: 1px solid var(--linha); border-radius: 999px; padding: 1px 8px; }
.memoria .quando { margin-left: auto; font-size: 11.5px; color: var(--texto-3); }
.memoria .texto { font-size: 13.5px; }
.memoria .acoes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.memoria .ja { font-size: 12.5px; color: var(--texto-2); }
.grafo-cartao { padding: var(--e4); }
.grafo-cabeca { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.grafo-cabeca .direita { margin-left: auto; display: flex; gap: 6px; }
.grafo-quadro { position: relative; height: 460px; margin-top: var(--e3); overflow: auto; cursor: default;
  border: 1px solid var(--linha); border-radius: var(--canto);
  background: var(--cartao-2) radial-gradient(#E4E7EC 1px, transparent 1px); background-size: 22px 22px; }
.grafo-tapete { position: relative; }
.grafo-palco { position: absolute; top: 12px; left: 12px; transform-origin: 0 0; }
.grafo-linhas { position: absolute; top: 0; left: 0; overflow: visible; }
.grafo-no { position: absolute; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 7px;
  max-width: 220px; background: var(--cartao); border: 1px solid var(--linha-forte); border-radius: 999px;
  padding: 6px 12px 6px 9px; font: inherit; cursor: pointer; box-shadow: var(--sombra); text-align: left; }
.grafo-no:hover { border-color: var(--acento); }
.grafo-no:focus-visible { outline: 0; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(17,24,39,.07); }
.grafo-no .bolinha { width: 9px; height: 9px; border-radius: 50%; background: var(--cor); flex: none; }
.grafo-no .rot { font-size: var(--rot-px, 12.6px); font-weight: 600; color: var(--texto); white-space: nowrap; }
.grafo-no .tipo { font-size: calc(var(--rot-px, 12.6px) * .82); color: var(--texto-3); white-space: nowrap; }
.grafo-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: var(--e3); font-size: 12px; color: var(--texto-2); }
.grafo-legenda .marca-item { display: inline-flex; align-items: center; gap: 7px; }

/* ============================ Ajustes ============================ */

.ajustes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); align-items: start; }
.linha-simples { display: flex; align-items: center; gap: 10px; padding: 10px var(--e4); border-bottom: 1px solid var(--cinza-suave); font-size: 13px; }
.linha-simples:last-child { border-bottom: 0; }
.linha-simples .quadro-logo { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; border: 1px solid var(--linha); background: var(--cartao-2); font-size: 11.5px; font-weight: 600; color: var(--texto-2); }
.linha-simples .nome { font-weight: 500; }
.linha-simples .para { color: var(--texto-2); font-size: 12.5px; }
.linha-simples .direita { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cartao-cabeca { padding: 12px var(--e4); border-bottom: 1px solid var(--linha); display: flex; align-items: center; gap: 8px; }
.cartao-cabeca h2 { font-size: 14px; }
.cartao-cabeca .ajuda { font-size: 12px; color: var(--texto-2); margin-left: auto; }

/* ============================ telas estreitas ============================ */

@media (max-width: 1100px) {
  .inicio { grid-template-columns: minmax(0, 1fr); }
  .trilho { position: static; }
  .areas-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .barra-lateral { position: sticky; top: 0; z-index: 30; height: auto; flex-direction: column; gap: 8px; border-right: 0; border-bottom: 1px solid var(--linha); padding: 10px 12px 0; }
  .campo-busca, .menu-grupo, .lateral-rodape { display: none; }
  .menu { flex-direction: row; flex-wrap: wrap; gap: 5px; overflow: visible; padding-bottom: 9px; }
  .menu-item { flex: none; width: auto; padding: 6px 10px; font-size: 12.5px; border-radius: 999px; border: 1px solid var(--linha); background: var(--cartao); }
  .menu-item svg { width: 14px; height: 14px; }
  .menu-item .conta-bolinha { margin-left: 2px; }
  .barra-topo { padding: 0 var(--e4); gap: var(--e2); height: 50px; }
  .topo-cota { min-width: 108px; }
  .topo-aviso { display: none; }
  .topo-conta { display: none; }
  .tela { padding: var(--e4) var(--e4) var(--e6); margin: 0 8px 8px; border-radius: 12px; min-height: 0; }
  h1 { font-size: 26px; }
  .destaque { grid-template-columns: minmax(0, 1fr); gap: var(--e4); padding: var(--e4); }
  .destaque .retrato { padding: var(--e3); }
  .destaque .retrato img { width: 72px; height: 72px; }
  .mural, .pulso, .areas-grade, .areas-lista, .paineis-grade, .ajustes, .quadro-colunas, .cerebro { grid-template-columns: minmax(0, 1fr); }
  .conversas { grid-template-columns: minmax(0, 1fr); height: auto; }
  .lista-conversas { max-height: 200px; }
  .fio { height: 66vh; }
  .painel { width: 100%; }
  .tabela .cabecalho { display: none; }
  .tabela .linha { grid-template-columns: 44px minmax(0, 1fr) 72px; grid-template-areas: "hora quem acao" "hora oque oque"; row-gap: 3px; }
  .tabela .hora { grid-area: hora; } .tabela .quem { grid-area: quem; }
  .tabela .oque { grid-area: oque; white-space: normal; }
  .tabela .acao-linha { grid-area: acao; }
  .tabela .ferramenta, .tabela .metrica { display: none; }
  .grafo-cartao { position: static; }
}

/* ==========================================================================
   RODADA 3 — peças novas (19/09/2026, noite)
   Pedido do João nesta rodada: agente = tile de ícone de ofício (não ilustração),
   pessoa = foto; menos cor (área só em ponto de 6 px); logo oficial com a cor da
   marca em tile branco; recibo com desfazer; compositor vivo; zero texto cortado.
   ========================================================================== */

/* ---------- identidade: tile de ofício (agente) × foto redonda (pessoa) ---------- */
.tile {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; overflow: hidden;
  background: #F2F4F7; border: 1px solid var(--linha); color: #48546A;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.tile svg { width: 19px; height: 19px; }
.tile .ini { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; color: #6B7280; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tile.geral { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.tile.geral .ini { color: var(--sobre-acento); }
.tile.pessoa { border-radius: 50%; background: #F1EEE9; color: #6B5D4E; border-color: #E4DED6; }
.tile.p { width: 26px; height: 26px; border-radius: 7px; font-size: 10px; }
.tile.p svg { width: 15px; height: 15px; }
.tile.p.pessoa { border-radius: 50%; }
.tile.g { width: 42px; height: 42px; border-radius: 11px; font-size: 14px; }
.tile.g svg { width: 23px; height: 23px; }
.tile.gg { width: 64px; height: 64px; border-radius: 16px; font-size: 20px; }
.tile.gg svg { width: 32px; height: 32px; }
.tile.gg.pessoa, .tile.g.pessoa { border-radius: 50%; }

/* ---------- logo de ferramenta: SVG oficial, cor de marca, tile branco ---------- */
.logo-tile {
  flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  background: var(--fundo); border: 1px solid var(--linha); overflow: hidden;
}
.logo-tile img { width: 21px; height: 21px; display: block; }
.logo-tile .mono { font-size: 16px; font-weight: 700; color: var(--marca-cor, #4A5464); letter-spacing: -.02em; }
.logo-tile.p { width: 28px; height: 28px; border-radius: 7px; }
.logo-tile.p img { width: 18px; height: 18px; }
.logo-tile.p .mono { font-size: 13px; }
.logo-tile.palavra { width: auto; min-width: 32px; padding: 0 10px; font-size: 13.5px; font-weight: 700;
  letter-spacing: -.03em; color: var(--marca-cor); white-space: nowrap; overflow: visible; }
.logo-tile.palavra.p { width: auto; padding: 0 8px; font-size: 11.5px; min-width: 28px; }
.logo-tile.palavra.g { width: auto; padding: 0 12px; font-size: 16px; min-width: 40px; }
.logo-tile.g { width: 40px; height: 40px; border-radius: 10px; }
.logo-tile.g img { width: 24px; height: 24px; }

.marca-item.com-logo { padding: 0 11px 0 3px; height: 34px; gap: 8px; background: var(--cartao); }

/* ---------- barra superior útil ---------- */
.topo-aviso {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--cartao);
  font-size: 12.5px; font-weight: 500; color: var(--texto); cursor: pointer;
}
.topo-aviso:hover { background: var(--fundo); border-color: var(--borda-hover); }
.topo-aviso .bolinha { width: 17px; height: 17px; border-radius: 999px; background: var(--acento); color: var(--sobre-acento); font-size: 10.5px; font-weight: 600; display: grid; place-items: center; }
.topo-cota { display: flex; flex-direction: column; gap: 3px; min-width: 176px; }
.topo-cota .l1 { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--texto-2); }
.topo-cota .l1 b { font-size: 12px; color: var(--texto); font-weight: 600; }
.topo-cota .barra { height: 4px; }
.topo-conta { width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; background: none; cursor: pointer; overflow: hidden; flex: none; }
.topo-conta img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

/* ---------- recibo com "Desfazer" (10 s) ---------- */
.recibos { position: fixed; left: 276px; bottom: 20px; z-index: 70; display: flex; flex-direction: column; gap: 8px; }
.recibo {
  display: flex; align-items: center; gap: 12px; min-width: 360px; max-width: 520px;
  padding: 11px 12px 11px 14px; border-radius: 12px; background: var(--acento); color: var(--sobre-acento);
  box-shadow: var(--sombra-alta); position: relative; overflow: hidden;
}
.recibo .texto { font-size: 13px; line-height: 1.4; }
.recibo .texto b { font-weight: 600; }
.recibo .pe { display: block; font-size: 11.5px; color: #B9C0CC; margin-top: 2px; }
.recibo .desfazer {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.34); background: none; color: var(--sobre-acento);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.recibo .desfazer:hover { background: rgba(255,255,255,.14); }
.recibo .relogio { position: absolute; left: 0; bottom: 0; height: 3px; background: #6E7A8C; animation: escorre 30s linear forwards; }
.recibo .desfazer .conta { font-variant-numeric: tabular-nums; opacity: .8; font-weight: 600; }
@keyframes escorre { from { width: 100%; } to { width: 0; } }
@media (prefers-reduced-motion: reduce) { .recibo .relogio { animation: none; width: 100%; } }

/* ---------- adiar: escolher até quando ---------- */
.adiar-lista { display: flex; flex-direction: column; gap: 6px; }
.adiar-lista .opcao { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--canto-p); background: var(--cartao); cursor: pointer; font: inherit; text-align: left; width: 100%; }
.adiar-lista .opcao:hover { border-color: var(--linha-forte); background: var(--cartao-2); }
.data-livre { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px dashed var(--linha-forte); border-radius: var(--canto-p); }
.data-livre input { font: inherit; font-size: 13px; border: 1px solid var(--linha-forte); border-radius: 8px; padding: 5px 8px; color: var(--texto); background: var(--cartao); }

/* ---------- Pulso clicável ---------- */
.pulso .item { text-align: left; font: inherit; width: 100%; cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease; }
.pulso .item:hover { border-color: var(--linha-forte); box-shadow: 0 2px 8px rgba(16,24,40,.07); }
.pulso .item .abrir { font-size: 11.5px; color: var(--texto-2); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.lista-nomeada { display: flex; flex-direction: column; gap: 7px; }
.lista-nomeada .item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--linha); border-radius: var(--canto-p); background: var(--cartao); width: 100%; text-align: left; font: inherit; cursor: pointer; }
.lista-nomeada .item:hover { border-color: var(--linha-forte); background: var(--cartao-2); }
/* r6, correção 5: a 390 px o nome do destino era partido no meio da palavra
   ("Entre/gas", "Organogr/ama"). A coluna do nome passa a ter largura mínima
   e nenhuma quebra dentro da palavra. */
.lista-nomeada .item .nome { font-size: 13px; font-weight: 500; flex: 1 1 auto; min-width: 12ch; overflow-wrap: normal; word-break: normal; }
.lista-nomeada .item .direita { margin-left: auto; flex: none; }

/* ---------- compositor vivo ---------- */
.caixa .campo {
  width: 100%; border: 0; outline: 0; resize: none; background: none;
  font: inherit; font-size: 14px; color: var(--texto); min-height: 46px; max-height: 160px;
  line-height: 1.45; padding: 0; display: block;
}
.caixa .campo::placeholder { color: var(--texto-3); }
.caixa.focada { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(17,24,39,.07); }
.caixa .dica { font-size: 11.5px; color: var(--texto-3); margin-left: 4px; }
.faixa-apps { display: flex; align-items: center; gap: 9px; padding: 8px 12px; margin-bottom: 8px; border: 1px solid var(--linha); border-radius: var(--canto-p); background: var(--cartao-2); }
.faixa-apps .rot { font-size: 12px; color: var(--texto-2); }
.faixa-apps .logos { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.faixa-apps .fechar { border: 0; background: none; cursor: pointer; color: var(--texto-3); display: grid; place-items: center; padding: 2px; }

/* ---------- cartão de fontes e prova (12-dash) ---------- */
.fontes { margin-top: 10px; max-width: 660px; border: 1px solid var(--linha); border-radius: 12px; background: var(--cartao); overflow: hidden; }
.fontes .cabeca { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--linha); }
.fontes .cabeca .eyebrow { color: var(--texto-3); }
.fontes .item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--cinza-suave); font-size: 12.5px; }
.fontes .item:last-of-type { border-bottom: 0; }
.fontes .item .txt { min-width: 0; overflow-wrap: break-word; }
.fontes .item .quando { margin-left: auto; flex: none; font-size: 11.5px; color: var(--texto-3); }
.fontes .mais { padding: 8px 12px; border-top: 1px solid var(--linha); background: var(--cartao-2); }

/* ---------- anexo HTML: "continua…" ---------- */
.anexo-html .continua {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  border-top: 1px solid var(--linha); background: var(--cartao-2);
  font-size: 11.5px; color: var(--texto-2);
}
.anexo-html .continua .btn { margin-left: auto; }
.anexo-html .quadro-iframe { position: relative; }
.anexo-html .quadro-iframe::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42px;
  background: linear-gradient(rgba(255,255,255,0), var(--fundo)); pointer-events: none;
}

/* ---------- Conversas: 3º painel de informação ---------- */
.painel-info { display: flex; flex-direction: column; overflow-y: auto; }
.painel-info .capa { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--e5) var(--e4); border-bottom: 1px solid var(--linha); text-align: center; }
.painel-info .capa .nome { font-size: 15px; font-weight: 600; }
.painel-info .capa .sub { font-size: 12px; color: var(--texto-2); }
.painel-info .secao { padding: 12px var(--e4); border-bottom: 1px solid var(--cinza-suave); display: flex; flex-direction: column; gap: 7px; }
.painel-info .secao .texto { font-size: 12.5px; color: var(--texto-2); }
.painel-info .secao .marcas { display: flex; flex-wrap: wrap; gap: 6px; }
.fio-topo .abre-info { margin-left: auto; }

/* ---------- Painéis: delta com seta e cor, mapa de calor com eixos ---------- */
.delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
.delta.sobe { color: var(--estado-trabalhando); }
.delta.desce { color: var(--estado-sem-sinal); }
.delta svg { width: 13px; height: 13px; }

.mapa-calor .eixos { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 8px; align-items: start; }
.mapa-calor .dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; font-size: 10.5px; color: var(--texto-3); text-align: center; }
.mapa-calor .semanas { display: grid; grid-template-rows: repeat(8, 17px); gap: 4px; font-size: 10.5px; color: var(--texto-3); text-align: right; }
.mapa-calor .semanas span { line-height: 17px; }
.mapa-calor .grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 17px; gap: 4px; }
.mapa-calor .quadrinho { width: auto; height: 17px; border-radius: 4px; position: relative; cursor: default; }
.mapa-calor .quadrinho[data-rot]:hover::after {
  content: attr(data-rot); position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%);
  white-space: nowrap; background: var(--acento); color: var(--sobre-acento); font-size: 11px; font-weight: 500;
  padding: 4px 8px; border-radius: 7px; z-index: 5; pointer-events: none;
}
.mapa-calor .estatisticas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; border-top: 1px solid var(--cinza-suave); padding-top: 10px; }
.mapa-calor .estatisticas .r { display: block; font-size: 11px; color: var(--texto-2); }
.mapa-calor .estatisticas .v { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.015em; margin-top: 1px; }

/* ---------- Cérebro: mapa clicável ---------- */
/* r5: escolher a pasta de destino da subida — a árvore é o alvo do clique */
.subida .destino { border-top: 1px solid var(--linha); margin-top: var(--e3); padding-top: var(--e3); }
.destino-arvore { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.destino-item { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; color: var(--texto-2);
  background: var(--cartao); border: 1px solid var(--linha-forte); border-radius: 999px; height: 30px; padding: 0 11px; cursor: pointer; }
.destino-item:hover { border-color: var(--acento); color: var(--texto); }
.destino-item.escolhida { border-color: var(--acento); border-width: 1.5px; color: var(--texto); font-weight: 600; }

/* ---------- ficha do cargo: ação dentro do painel ---------- */
.ficha-acoes { display: flex; gap: 7px; flex-wrap: wrap; }

/* ---------- herói de Pessoas: meta em ícone + número ---------- */
.meta-linha { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; font-size: 12.5px; color: var(--texto-2); }
.meta-linha span { display: inline-flex; align-items: center; gap: 6px; }
.meta-linha b { color: var(--texto); font-weight: 600; }

/* ---------- telas estreitas: recibo ocupa a largura ---------- */
@media (max-width: 900px) {
  .recibos { left: 8px; right: 8px; bottom: 8px; }
  .recibo { min-width: 0; max-width: none; }
  .conversas, .conversas.com-info { grid-template-columns: minmax(0, 1fr); height: auto; }
  .painel-info { max-height: 320px; }
  .mapa-calor .estatisticas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabela .ferramenta { display: flex; }
  .tabela .linha { grid-template-columns: 44px minmax(0, 1fr) 72px; grid-template-areas: "hora quem acao" "hora oque oque" "hora ferramenta metrica"; }
  .tabela .ferramenta { grid-area: ferramenta; }
  .tabela .metrica { grid-area: metrica; justify-self: end; }
}

/* ---------- Início: "Precisa de você" mais denso, "Hoje" de largura cheia ---------- */
.inicio { grid-template-areas: "principal trilho" "hoje trilho"; align-items: start; }
.inicio > .principal { grid-area: principal; min-width: 0; }
.inicio > .trilho { grid-area: trilho; }
.inicio > #bloco-hoje { grid-area: hoje; min-width: 0; }

.destaque { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: var(--e5); }
.destaque .cabeca { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.destaque .cabeca .titulo { font-size: 19px; font-weight: 600; letter-spacing: -.015em; margin-right: 2px; }
.destaque .cabeca .quando { font-size: 11.5px; color: var(--texto-3); margin-left: auto; }
.destaque .frase { font-size: 15px; color: var(--texto); max-width: 68ch; }
.consequencias { display: flex; flex-direction: column; gap: 5px; border-left: 2px solid var(--linha-forte); padding-left: 11px; }
.consequencias .se { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--texto-2); }
.consequencias .se svg { flex: none; margin-top: 2px; }
.consequencias .se.aprovar svg { color: var(--estado-trabalhando); }
.consequencias .se.recusar svg { color: var(--estado-sem-sinal); }
.destaque .acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.mural .pedido .consequencias { border-left-width: 2px; padding-left: 9px; }
.mural .pedido .acoes { flex-wrap: wrap; }
.area-cartao .eyebrow { font-size: 10px; }
.portao .consequencia.recusa { color: var(--texto-2); background: var(--cartao-2); border: 1px solid var(--linha); font-weight: 400; }
.memoria .eyebrow { font-size: 10px; }
.painel-area .eyebrow { font-size: 10px; }
.tarefa .eyebrow { font-size: 10px; }

@media (max-width: 1100px) {
  .inicio { grid-template-areas: "principal" "trilho" "hoje"; }
}
@media (max-width: 900px) {
  .tabela .metrica { display: inline-flex; }
  .destaque .cabeca .quando { margin-left: 0; }
}

/* ---------- zero texto cortado também em 390 px (correção 4 + 11) ---------- */
.tabela .quem .nome { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
.portao .acoes { flex-wrap: wrap; }
.portao .linhas { min-width: 0; }
.faixa-apps { flex-wrap: wrap; }
.faixa-apps .logos { margin-left: auto; }
.caixa .pe { flex-wrap: wrap; }
.caixa .pe .direita { margin-left: auto; }

@media (max-width: 900px) {
  .leiza-cartao { flex-wrap: wrap; }
  .leiza-cartao .corpo { flex: 1 1 200px; }
  .leiza-cartao .nome { flex-wrap: wrap; }
  .leiza-cartao .acoes { margin-left: 0; width: 100%; }
  .faixa-apps .logos { margin-left: 0; }
  .caixa .pe .direita { margin-left: auto; }
  .fio-topo { flex-wrap: wrap; }
  .fio-topo .abre-info { margin-left: 0; }
  .tela-cheia { padding: 0 var(--e4) var(--e4); }
}

/* ---------- 390 px: a barra de topo fica com a cota (e só com ela) ---------- */
.so-estreito { display: none; }
@media (max-width: 900px) {
  .barra-topo { padding: 0 12px; height: 46px; }
  .topo-aviso, .topo-conta { display: none; }
  /* no celular o nome da tela já é o H1 logo abaixo: a barra fica só com o
     seletor de período e o dinheiro, e nada precisa ser cortado */
  .topo-titulo { display: none; }
  .topo-direita { flex: 1; min-width: 0; gap: 8px; justify-content: flex-end; }
  /* o seletor de período continua à vista no celular, só mais estreito */
  .topo-periodo { flex: none; }
  .topo-periodo .periodo { height: 21px; padding: 0 6px; font-size: 10.5px; }
  .topo-cota { min-width: 0; width: auto; flex: 0 1 auto; }
  .topo-cota .l1 { white-space: nowrap; font-size: 10.5px; gap: 3px; }
  .so-largo { display: none; }
  .so-estreito { display: inline; }
}

/* ---------- tela cheia: começa depois da lateral, o título não encosta no logo ---------- */
.tela-cheia { left: 260px; inset: 0 0 0 260px; }
@media (max-width: 900px) { .tela-cheia { left: 0; inset: 0; } }

/* ==========================================================================
   RODADA 4 — a navegação do Paperclip em português (19/09/2026, noite)
   4 grupos na lateral · Início = Dashboard melhorado · Agentes em Lista ⇄
   Organograma · Criar cargo em 5 passos · página do cargo com 9 abas ·
   Skills, Conexões, Custos, Atividade, Cérebro e Ajustes.
   Regra que vale em tudo: texto quebra, nunca é cortado.
   ========================================================================== */

/* ---------- lateral: botão de ação, busca e "mais destinos" ---------- */
.barra-lateral .nova-tarefa { width: 100%; height: 34px; font-weight: 600; justify-content: flex-start; gap: 9px; padding: 0 11px; }
.campo-busca { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.campo-busca:hover { background: var(--fundo); border-color: var(--borda-hover); }
.campo-busca .rot { overflow: visible; text-overflow: clip; white-space: nowrap; }
.menu-item .rot { min-width: 0; overflow-wrap: normal; word-break: normal; }
.menu-mais { display: none; }
.menu-grupo.forte { padding: 12px 2px 6px; color: var(--texto-2); }

/* ---------- abas de tela ---------- */
.abas { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--linha); margin: 2px 0 16px; }
.aba { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 0; background: none;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--texto-2); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.aba:hover { color: var(--texto); }
.aba.ativa { color: var(--texto); font-weight: 600; border-bottom-color: var(--acento); }
.aba[disabled] { cursor: default; }
.aba .qtd { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--cinza-suave-2); color: var(--texto-2);
  font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.aba.ativa .qtd { background: var(--acento); color: var(--sobre-acento); }

.filtros-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.filtros-linha .rot { font-size: 11px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--texto-3); }
.filtro[disabled] { cursor: default; }
.dica { font-size: 12.5px; color: var(--texto-2); }
.texto-ajuda { font-size: 12.5px; color: var(--texto-2); margin: 6px 0; }
.fraco { color: var(--texto-3); font-size: 12px; }
.forte { color: var(--texto); font-weight: 600; }
.vazio-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mais-linha { margin-top: 12px; }

/* ---------- campos ---------- */
.campo-rotulo { display: block; font-size: 12px; font-weight: 600; color: var(--texto-2); margin: 10px 0 5px; }
.campo-texto { width: 100%; font: inherit; font-size: 13.5px; color: var(--texto); background: var(--cartao);
  border: 1px solid var(--linha-forte); border-radius: 9px; padding: 8px 10px; }
.campo-texto:focus { outline: 0; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(17,24,39,.07); }
.campo-texto.alto { min-height: 120px; resize: vertical; line-height: 1.55; }
.campo-texto.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.busca-campo { display: flex; align-items: center; gap: 9px; border: 1px solid var(--linha-forte); border-radius: 10px; padding: 0 11px; height: 40px; }
.busca-campo input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 14px; background: none; min-width: 0; }
.form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.sub-titulo { margin-top: 16px; font-size: 13.5px; }
.rodape-form { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* ---------- alterar imagem ---------- */
.imagem-bloco { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha); flex-wrap: wrap; }
.imagem-bloco .previa { flex: none; width: 52px; height: 52px; border-radius: 12px; border: 1px dashed var(--linha-forte);
  display: grid; place-items: center; overflow: hidden; color: var(--texto-3); background: var(--cartao-2); }
.imagem-bloco .previa.redonda { border-radius: 50%; }
.imagem-bloco .previa img { width: 100%; height: 100%; object-fit: cover; }
.imagem-bloco .corpo { min-width: 0; flex: 1 1 210px; display: flex; flex-direction: column; gap: 3px; }
.imagem-bloco .rot { font-size: 13px; font-weight: 600; }
.imagem-bloco .ajuda { font-size: 11.5px; color: var(--texto-3); }
.imagem-bloco .linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.imagem-bloco input[type=file] { font-size: 11.5px; color: var(--texto-2); max-width: 100%; }
.imagem-bloco .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- ficha no painel ---------- */
.ficha-topo { display: flex; align-items: center; gap: 11px; }
.ficha-nome { font-weight: 600; font-size: 15px; }
.ficha-marcas { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; align-items: center; }
.ficha-pe { margin-top: 11px; font-size: 12.5px; color: var(--texto-2); }
.lista-nomeada .item .eyebrow { flex: none; }
.lista-nomeada .item .direita { font-size: 12px; color: var(--texto-3); text-align: right; min-width: 0; overflow-wrap: normal; word-break: normal; }

/* ---------- gasto × teto ---------- */
.teto { display: flex; flex-direction: column; gap: 6px; }
.teto .l1, .l1 { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--texto-2); }
.l1 .direita, .l2 .direita, .l3 .direita { margin-left: auto; }
.teto .l1 b { color: var(--texto); }
.barra.atencao > i { background: var(--estado-atrasado); }
.barra.estourou > i { background: var(--estado-sem-sinal); }
.barra.fina { height: 5px; }

/* ---------- números do Início ---------- */
.numeros-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cartao.numero { display: flex; flex-direction: column; gap: 3px; padding: 16px; text-align: left; font: inherit; cursor: pointer; }
.cartao.numero:hover { border-color: var(--linha-forte); box-shadow: 0 2px 8px rgba(16,24,40,.07); }
.cartao.numero .v { font-size: 27px; font-weight: 600; letter-spacing: -.028em; }
.cartao.numero .pe { font-size: 12px; color: var(--texto-2); }
.cartao.numero .abrir { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--texto-3); margin-top: 4px; }

/* ---------- gráficos ---------- */
.graficos-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cartao.grafico { padding: 15px; display: flex; flex-direction: column; gap: 4px; }
.cartao.grafico .cabeca { display: flex; align-items: baseline; gap: 8px; }
.cartao.grafico h2 { font-size: 14px; min-width: 0; overflow-wrap: break-word; }
.cartao.grafico .cabeca .delta { margin-left: auto; flex: none; }
.numero-grande { font-size: 24px; font-weight: 600; letter-spacing: -.026em; display: flex; align-items: baseline; gap: 5px; }
.numero-grande .un { font-size: 12px; font-weight: 400; color: var(--texto-3); }
.cartao.grafico .quadro { position: relative; height: 92px; margin-top: 4px; }
/* r5: escopar no .quadro — antes `.cartao.grafico svg` engolia a seta de 13 px do delta. */
.cartao.grafico .quadro > svg { width: 100%; height: 92px; display: block; }
.cartao.grafico .colunas { position: absolute; inset: 0; }
/* r5: sem `background: transparent` a regra geral `.coluna` pintava var(--moldura) por cima das barras. */
.cartao.grafico .coluna { position: absolute; top: 0; bottom: 0; background: transparent; }
.cartao.grafico .coluna:hover { background: rgba(17,24,39,.05); }
.cartao.grafico .coluna:hover::after { content: attr(data-rot); position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  white-space: nowrap; background: var(--acento); color: var(--sobre-acento); font-size: 11px; font-weight: 500; padding: 4px 8px;
  border-radius: 7px; z-index: 6; pointer-events: none; }
.cartao.grafico .eixo { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--texto-3); }
.cartao.grafico .pe { font-size: 11.5px; color: var(--texto-3); }

/* ---------- listas de linhas ---------- */
.duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.lista-linhas { display: flex; flex-direction: column; overflow: hidden; }
.linha-atividade, .linha-tarefa, .linha-mini, .linha-exec {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--cinza-suave);
  background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; font: inherit; cursor: pointer; }
.linha-atividade:last-child, .linha-tarefa:last-child, .linha-mini:last-child, .linha-exec:last-child { border-bottom: 0; }
.linha-atividade:hover, .linha-tarefa:hover, .linha-mini:hover { background: var(--cartao-2); }
.linha-atividade.estatica, .linha-mini.estatica { cursor: default; }
.linha-atividade .hora, .linha-exec .hora { flex: none; width: 92px; font-size: 12px; color: var(--texto-3); }
.linha-atividade .tipo { flex: none; width: 82px; font-size: 11.5px; color: var(--texto-2); }
.linha-atividade .quem, .linha-tarefa .quem { flex: none; display: flex; align-items: center; gap: 7px; min-width: 0; }
.linha-atividade .quem .nome, .linha-tarefa .quem .nome { font-size: 12.5px; font-weight: 500; overflow-wrap: break-word; }
.linha-atividade .oque, .linha-exec .oque { flex: 1; min-width: 0; font-size: 13px; overflow-wrap: break-word; }
.linha-atividade .direita { margin-left: auto; flex: none; display: flex; align-items: center; gap: 8px; }
.linha-tarefa .marca { flex: none; }
.linha-tarefa .titulo { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; overflow-wrap: break-word; }
.linha-tarefa .id { flex: none; font-size: 11px; color: var(--texto-3); font-family: ui-monospace, Menlo, monospace; }
.linha-tarefa .col { flex: none; font-size: 12px; color: var(--texto-2); }
.linha-mini { gap: 8px; font-size: 13px; }
.linha-mini .direita { margin-left: auto; flex: none; }
.linha-exec .metrica { flex: none; font-size: 12.5px; font-weight: 500; }

/* ---------- caixa de entrada ---------- */
.lista-entrada { display: flex; flex-direction: column; overflow: hidden; }
.linha-entrada { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border-bottom: 1px solid var(--cinza-suave); }
.linha-entrada:last-child { border-bottom: 0; }
.linha-entrada.nao-lida { background: var(--cartao-2); }
.linha-entrada .chip-nao-lida { font-size: 11px; font-weight: 600; line-height: 1; color: var(--acento); border: 1px solid currentColor; border-radius: 999px; padding: 3px 7px; }
.linha-entrada .marca { flex: none; padding-top: 3px; }
.linha-entrada .corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.linha-entrada .corpo .nome { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.linha-entrada .corpo .frase { font-size: 13px; color: var(--texto-2); overflow-wrap: break-word; }
.linha-entrada .area { flex: none; }
.linha-entrada .quando { flex: none; font-size: 11.5px; color: var(--texto-3); width: 88px; text-align: right; }
.linha-entrada .acoes { flex: none; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- cota das contas ---------- */
.cotas-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cota-cartao { padding: 15px; display: flex; flex-direction: column; gap: 7px; }
.cota-cartao .topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cota-cartao .nome { font-size: 13.5px; font-weight: 600; min-width: 0; overflow-wrap: break-word; }
.cota-cartao .sub { font-size: 12px; color: var(--texto-2); }
.cota-cartao .l2 { font-size: 12.5px; color: var(--texto-2); }
.cota-cartao .l3 { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--texto-2); flex-wrap: wrap; }
.cota-cartao .acoes { display: flex; gap: 6px; margin-top: 2px; }

/* ---------- lista de agentes ---------- */
.troca-visao { display: inline-flex; border: 1px solid var(--linha-forte); border-radius: 999px; padding: 2px; background: var(--cartao); gap: 2px; }
.troca { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border: 0; border-radius: 999px;
  background: none; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--texto-2); cursor: pointer; }
.troca:hover { color: var(--texto); }
.troca.ativa { background: var(--cinza-suave-2); color: var(--texto); font-weight: 600; cursor: default; }
.lista-agentes { display: flex; flex-direction: column; overflow: hidden; }
.linha-agente { display: flex; align-items: center; gap: 11px; padding: 11px 15px 11px 0; border-bottom: 1px solid var(--cinza-suave); position: relative; }
.linha-agente:last-child { border-bottom: 0; }
.linha-agente:hover { background: var(--cartao-2); }
.linha-agente .capsula { flex: none; width: 4px; align-self: stretch; border-radius: 0 4px 4px 0; background: var(--cor-estado, var(--linha-forte)); margin-right: 6px; }
.linha-agente .corpo { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.linha-agente .corpo .nome { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.linha-agente .corpo .sub { font-size: 12px; color: var(--texto-2); overflow-wrap: break-word; }
.linha-agente .col { flex: none; font-size: 11.5px; color: var(--texto-2); }
.linha-agente .col.conta { display: flex; align-items: center; gap: 7px; width: 186px; min-width: 0; }
.linha-agente .col.conta .rot { min-width: 0; overflow-wrap: break-word; line-height: 1.3; }
.linha-agente .col.quando { width: 112px; line-height: 1.3; }
.linha-agente .col.estado { width: 142px; }
.linha-agente .estrela { flex: none; border: 0; background: none; padding: 4px; cursor: pointer; color: var(--texto-3); border-radius: 6px; }
.linha-agente .estrela:hover { background: var(--cinza-suave); color: var(--texto); }
.linha-agente .estrela.cheia { color: #B4820B; }

/* ---------- organograma ---------- */
.org-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.org-barra .direita { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.org-quadro { position: relative; height: 560px; border: 1px solid var(--linha); border-radius: var(--canto);
  background: var(--cartao-2) radial-gradient(#E4E7EC 1px, transparent 1px); background-size: 22px 22px;
  overflow: auto; cursor: grab; overscroll-behavior: contain; }
.org-quadro.arrastando { cursor: grabbing; }
/* r5: o tapete dá tamanho real ao palco escalado — é ele que faz a barra de
   rolagem aparecer quando a empresa inteira é mais larga que a tela. */
.org-tapete { position: relative; }
/* as bordas esvaem: fica claro que o desenho continua para os lados */
.org-caixa { position: relative; }
.org-caixa::before, .org-caixa::after { content: ''; position: absolute; top: 1px; bottom: 1px; width: 34px; pointer-events: none; z-index: 3; }
.org-caixa::before { left: 1px; border-radius: var(--canto) 0 0 var(--canto);
  background: linear-gradient(90deg, var(--lateral), transparent); }
.org-caixa::after { right: 1px; border-radius: 0 var(--canto) var(--canto) 0;
  background: linear-gradient(270deg, var(--lateral), transparent); }
/* barra de rolagem sempre à vista: a empresa inteira é mais larga que a tela e
   a pessoa precisa VER que dá para rolar de lado */
.org-quadro { scrollbar-width: auto; scrollbar-color: #C4C9D2 var(--cinza-suave); }
.org-quadro::-webkit-scrollbar { width: 12px; height: 12px; }
.org-quadro::-webkit-scrollbar-track { background: var(--cinza-suave); border-radius: 999px; }
.org-quadro::-webkit-scrollbar-thumb { background: #C4C9D2; border-radius: 999px; border: 3px solid var(--cinza-suave); }
.org-quadro::-webkit-scrollbar-thumb:hover { background: #A8AFBB; }
.org-palco { position: absolute; top: 12px; left: 12px; transform-origin: 0 0; }
.org-linhas { position: absolute; top: 0; left: 0; overflow: visible; }
.org-no { position: absolute; display: flex; flex-direction: column; }
.org-corpo { flex: 1; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; text-align: left;
  background: var(--cartao); border: 1px solid var(--linha-forte); border-radius: 12px; padding: 10px 11px;
  font: inherit; cursor: pointer; position: relative; box-shadow: var(--sombra); overflow: hidden; }
.org-corpo:hover { border-color: var(--acento); }
.org-no.raiz .org-corpo { border-color: var(--acento); border-width: 1.5px; }
.org-corpo .l1 { display: flex; align-items: center; gap: 8px; width: 100%; }
.org-corpo .l1 .nome { font-size: var(--nome-px, 12.5px); font-weight: 600; line-height: 1.3; min-width: 0; overflow-wrap: break-word; }
.org-corpo .l3 { font-size: 11px; color: var(--texto-2); min-width: 0; overflow-wrap: break-word; }
.org-corpo .l4 { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--texto-3); }
.org-corpo .l5 { font-size: 10.5px; color: var(--texto-2); }
.org-corpo .dono { display: flex; align-items: center; gap: 6px; width: 100%; border-top: 1px solid var(--cinza-suave); padding-top: 6px; margin-top: auto; }
.org-corpo .dono .rot { font-size: 11px; color: var(--texto-2); min-width: 0; overflow-wrap: break-word; }
.org-corpo .ponto-area { position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--cor); }
.org-mais { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--cartao);
  font: inherit; font-size: 11px; font-weight: 500; color: var(--texto-2); cursor: pointer; white-space: nowrap; z-index: 2; }
.org-mais:hover { border-color: var(--acento); color: var(--texto); }
.org-pe { font-size: 12px; color: var(--texto-3); margin-top: 8px; }

/* ---------- trilha de passos (criar cargo) ---------- */
.trilha { display: flex; align-items: center; gap: 22px; list-style: none; padding: 0; margin: 0 0 16px; flex-wrap: wrap; }
.trilha li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-3); }
.trilha li .bola { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px;
  font-weight: 600; border: 1px solid var(--linha-forte); background: var(--cartao); color: var(--texto-2); }
.trilha li.agora { color: var(--texto); font-weight: 600; }
.trilha li.agora .bola { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.trilha li.feito { color: var(--texto-2); }
.trilha li.feito .bola { background: var(--fundo-trabalhando); border-color: var(--fundo-trabalhando); color: var(--estado-trabalhando); }

/* ---------- formulários em cartão ---------- */
.bloco-form { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.bloco-form h2 { font-size: 16px; }
.bloco-form .texto { font-size: 13.5px; color: var(--texto-2); overflow-wrap: break-word; }
.escolha-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.escolha-lista { display: flex; flex-direction: column; gap: 8px; }
.escolha { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 13px; border: 1px solid var(--linha-forte);
  border-radius: 12px; background: var(--cartao); font: inherit; text-align: left; cursor: pointer; }
.escolha:hover { border-color: var(--acento); }
.escolha.escolhida { border-color: var(--acento); border-width: 1.5px; background: var(--cartao-2); }
/* seletor de período na barra do topo: 3 palavras, a ativa em pílula */
.topo-periodo { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--cartao-2); }
.topo-periodo .periodo { font: inherit; font-size: 12px; font-weight: 500; color: var(--texto-2); background: none;
  border: 0; border-radius: 999px; height: 24px; padding: 0 10px; cursor: pointer; }
.topo-periodo .periodo:hover { color: var(--texto); background: var(--cinza-suave-2); }
.topo-periodo .periodo.ativo { background: var(--cartao); color: var(--texto); font-weight: 600; box-shadow: var(--sombra); }

.marca-escolhido { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px;
  background: var(--acento); color: var(--sobre-acento); font-size: 11px; font-weight: 600; flex: none; }
.escolha.larga .marca-escolhido { margin-left: auto; }
/* teto de gasto: o R$ fica colado no campo, e a unidade depois dele */
.campo-moeda { display: flex; align-items: center; gap: 8px; }
.campo-moeda .moeda { font-size: 13.5px; font-weight: 600; color: var(--texto-2); flex: none; }
.campo-moeda .unidade { font-size: 12.5px; color: var(--texto-3); flex: none; }
.campo-moeda .campo-texto { flex: 1; min-width: 0; }
.resumo-lista .v.vazio { color: var(--texto-3); font-style: italic; }
.escolha .nome { font-size: 13.5px; font-weight: 600; }
.escolha .sub { font-size: 11.5px; color: var(--texto-2); overflow-wrap: break-word; }
.escolha.larga { flex-direction: row; align-items: center; gap: 11px; }
.escolha.larga .corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.politica-lista { display: flex; flex-direction: column; gap: 7px; }
.politica-linha { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--linha); border-radius: 10px; flex-wrap: wrap; }
.politica-linha .nome { flex: 1 1 160px; min-width: 0; font-size: 13px; overflow-wrap: break-word; }
.politica-linha .botoes { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--linha); border-radius: 999px; background: var(--cartao-2); }
.mini { height: 26px; padding: 0 11px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 11.5px;
  font-weight: 500; color: var(--texto-2); cursor: pointer; white-space: nowrap; }
.mini:hover { color: var(--texto); }
.mini.ativa { background: var(--acento); color: var(--sobre-acento); font-weight: 600; cursor: default; }
.resumo-lista { display: flex; flex-direction: column; }
.resumo-lista .linha { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--cinza-suave); align-items: baseline; }
.resumo-lista .linha:last-child { border-bottom: 0; }
.resumo-lista .r { flex: none; width: 168px; font-size: 12px; color: var(--texto-2); }
.resumo-lista .v { flex: 1; min-width: 0; font-size: 13.5px; overflow-wrap: break-word; }

/* ---------- cabeça da página do cargo ---------- */
.cabeca-cargo { display: flex; gap: 18px; padding: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
.cabeca-cargo .retrato { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; flex: 0 0 auto; }
/* r5: a coluna da esquerda só ocupa espaço quando tem conteúdo (o bloco de
   trocar a imagem). No detalhe da conexão ela encolhe para o tamanho da logo,
   em vez de gastar 300 px com um tile de 44. */
.cabeca-cargo .retrato:has(.imagem-bloco) { flex: 0 1 250px; min-width: 200px; }
.cabeca-cargo .retrato .imagem-bloco { border-top: 0; padding-top: 0; margin-top: 4px; }
.cabeca-cargo .corpo { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cabeca-cargo .linha-nome { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cabeca-cargo h1 { font-size: 27px; }
.cabeca-cargo .linha-meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.cabeca-cargo .meta { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--texto-2); min-width: 0; overflow-wrap: break-word; }
.cabeca-cargo .linha-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.cargo-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.mini-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 4px 0 10px; }
.mini-numeros span { display: flex; flex-direction: column; font-size: 11.5px; color: var(--texto-2); }
.mini-numeros b { font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--texto); }
.linha-pe { font-size: 12px; color: var(--texto-3); margin-top: 8px; }
.linha-conta { display: flex; align-items: center; gap: 10px; font-size: 13px; margin: 4px 0; flex-wrap: wrap; }
.linha-conta > span { min-width: 0; overflow-wrap: break-word; }

/* ---------- grades de cartão ---------- */
.cartoes-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.cartoes-grade.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cartoes-grade.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- skills ---------- */
.cartao.skill { padding: 16px; display: flex; flex-direction: column; gap: 7px; }
.cartao.skill .topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cartao.skill .nome { font-size: 14.5px; font-weight: 600; overflow-wrap: break-word; }
.cartao.skill .sub { font-size: 11.5px; color: var(--texto-2); }
.cartao.skill .texto { font-size: 13px; color: var(--texto-2); overflow-wrap: break-word; }
.cartao.skill .pe-skill { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cartao.skill .acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.chip-catalogo { font-size: 11px; font-weight: 500; color: var(--texto-2); border: 1px solid var(--linha-forte); border-radius: 999px; padding: 2px 9px; }
.skill-grade { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 12px; align-items: start; }
.lista-arquivos { padding: 14px; display: flex; flex-direction: column; gap: 5px; }
.arquivo { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px;
  background: none; font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: var(--texto-2); }
.arquivo:hover { background: var(--cartao-2); color: var(--texto); }
.arquivo.ativo { background: var(--cinza-suave-2); color: var(--texto); font-weight: 600; cursor: default; }
.quem-usa { border-top: 1px solid var(--linha); margin-top: 8px; padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.cartao.editor { display: flex; flex-direction: column; overflow: hidden; }
.editor-topo { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.editor-topo .nome { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.editor-topo .direita { margin-left: auto; display: flex; gap: 6px; }
.editor-texto { border: 0; border-radius: 0; min-height: 330px; }
.editor-texto:focus { box-shadow: none; }
.diff { padding: 14px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.diff .l { display: flex; gap: 10px; padding: 3px 8px; border-radius: 5px; overflow-wrap: anywhere; }
.diff .l.dentro { background: var(--fundo-trabalhando); color: #14532D; }
.diff .l.fora { background: var(--fundo-sem-sinal); color: #881337; }
.diff .sinal { flex: none; width: 10px; color: var(--texto-3); }

/* ---------- projetos, rotinas, entregas, metas ---------- */
.cartao.projeto { padding: 0; display: flex; flex-direction: column; }
.cartao.projeto .topo { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px 0; }
.cartao.projeto .corpo { display: flex; flex-direction: column; gap: 7px; padding: 6px 15px 15px; background: none; border: 0;
  font: inherit; text-align: left; cursor: pointer; }
.cartao.projeto .corpo:hover .nome { text-decoration: underline; }
.cartao.projeto .nome { font-size: 15px; font-weight: 600; overflow-wrap: break-word; }
.cartao.projeto .texto { font-size: 12.5px; color: var(--texto-2); overflow-wrap: break-word; }
.cartao.projeto .pe { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.estrela { border: 0; background: none; padding: 4px; cursor: pointer; color: var(--texto-3); border-radius: 6px; }
.estrela:hover { background: var(--cinza-suave); color: var(--texto); }
.estrela.cheia { color: #B4820B; }

.lista-rotinas { display: flex; flex-direction: column; overflow: hidden; }
.linha-rotina { display: flex; align-items: center; gap: 11px; padding: 12px 15px; border-bottom: 1px solid var(--cinza-suave); flex-wrap: wrap; }
.linha-rotina:last-child { border-bottom: 0; }
.linha-rotina:hover { background: var(--cartao-2); }
.linha-rotina .corpo { flex: 1 1 210px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.linha-rotina .corpo .nome { font-size: 13.5px; font-weight: 600; overflow-wrap: break-word; }
.linha-rotina .corpo .sub { font-size: 12px; color: var(--texto-2); overflow-wrap: break-word; }
.linha-rotina .col { flex: none; font-size: 11px; color: var(--texto-3); line-height: 1.35; width: 124px; }
.linha-rotina .col.estado { width: 128px; }
.linha-rotina .col.acao { width: auto; display: flex; gap: 6px; margin-left: auto; justify-content: flex-end; }
@media (max-width: 1100px) { .linha-rotina .col.acao { margin-left: auto; } }

.cartao.entrega { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.cartao.entrega .topo { display: flex; align-items: center; gap: 10px; }
.cartao.entrega .nome { font-size: 14.5px; font-weight: 600; overflow-wrap: break-word; }
.cartao.entrega .texto { font-size: 13px; color: var(--texto-2); overflow-wrap: break-word; }
.cartao.entrega .quem { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; }
.cartao.entrega .acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.fontes-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.fontes-lista .item { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.fontes-lista .txt { min-width: 0; overflow-wrap: break-word; }

.metas-lista { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.cartao.meta { padding: 18px; display: flex; flex-direction: column; gap: 9px; }
.cartao.meta .topo { display: flex; align-items: center; gap: 10px; }
.cartao.meta .topo .eyebrow { flex: 1; }
.cartao.meta .linha-nome { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cartao.meta h2 { font-size: 18px; min-width: 0; overflow-wrap: break-word; }
.cartao.meta .valor { margin-left: auto; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.cartao.meta .pe { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--texto-2); flex-wrap: wrap; }
.cartao.meta .filhas { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--linha); padding-top: 10px; margin-top: 4px; }
.filha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filha .risco { flex: none; width: 14px; height: 14px; border-left: 1px solid var(--linha-forte); border-bottom: 1px solid var(--linha-forte); border-radius: 0 0 0 4px; }
.filha .corpo { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.filha .corpo .nome { font-size: 13px; font-weight: 500; overflow-wrap: break-word; }
.filha .corpo .sub { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--texto-2); flex-wrap: wrap; }
.filha .valor { flex: none; font-size: 12.5px; font-weight: 600; width: 118px; }
.filha .barra { flex: none; width: 110px; }
.filha .pct { flex: none; font-size: 11.5px; color: var(--texto-2); width: 38px; }
.cartao.indicador { padding: 16px; display: flex; flex-direction: column; gap: 5px; }
.cartao.indicador .linha-nome { display: flex; align-items: baseline; gap: 10px; }
.cartao.indicador h3 { min-width: 0; overflow-wrap: break-word; }
.cartao.indicador .delta { margin-left: auto; flex: none; }
.cartao.indicador .v { font-size: 23px; font-weight: 600; letter-spacing: -.026em; }
.mini-linha { width: 100%; height: 52px; margin-top: 4px; }
.cartao.indicador .pe { font-size: 11.5px; color: var(--texto-3); }

/* ---------- conversas: ajustes da rodada 4 ---------- */
.conversa-item .lado { flex: none; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.painel-info .marcas-centro { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.painel-info .linha-area { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.painel-info .linha-dono2 { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texto-2); }

/* ---------- conexões ---------- */
.cartao.conexao { padding: 16px; display: flex; flex-direction: column; gap: 7px; }
.cartao.conexao .topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cartao.conexao .nome { font-size: 14px; font-weight: 600; overflow-wrap: break-word; }
.cartao.conexao .texto { font-size: 12.5px; color: var(--texto-2); flex: 1; overflow-wrap: break-word; }
.cartao.conexao .acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.lista-conexoes { display: flex; flex-direction: column; overflow: hidden; }
.linha-conexao { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--cinza-suave); flex-wrap: wrap; }
.linha-conexao:last-child { border-bottom: 0; }
.linha-conexao:hover { background: var(--cartao-2); }
.linha-conexao .corpo { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.linha-conexao .corpo .nome { font-size: 13.5px; font-weight: 600; overflow-wrap: break-word; }
.linha-conexao .corpo .sub { font-size: 12px; color: var(--texto-2); overflow-wrap: break-word; }
.linha-conexao .col { flex: none; display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--texto-2); }
.linha-conexao .col.estado { width: 200px; flex-wrap: wrap; }
.linha-conexao .col.dono { width: 190px; flex-wrap: wrap; }
.linha-conexao .col.acao { gap: 6px; }
.servicos-lista { display: flex; flex-direction: column; gap: 7px; }
.servico { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px; }
.servico .nome { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; overflow-wrap: break-word; }

/* ---------- custos ---------- */
.lista-teto { display: flex; flex-direction: column; overflow: hidden; }
.linha-teto { display: flex; align-items: center; gap: 16px; padding: 13px 15px; border-bottom: 1px solid var(--cinza-suave); flex-wrap: wrap; }
.linha-teto:last-child { border-bottom: 0; }
.linha-teto .nome { flex: 0 0 220px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; min-width: 0; overflow-wrap: break-word; }
.linha-teto .corpo { flex: 1 1 260px; min-width: 0; }
.incidente { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--cinza-suave); flex-wrap: wrap; }
.incidente:last-child { border-bottom: 0; }
.incidente .corpo { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.incidente .texto { font-size: 13px; overflow-wrap: break-word; }

/* ---------- cérebro: arquivos no formato do repositório ---------- */
.git-barra { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; margin-bottom: 10px; }
.git-barra button { border: 0; background: none; font: inherit; font-size: 13px; color: var(--texto-2); cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.git-barra button:hover { background: var(--cinza-suave); color: var(--texto); }
.git-barra .sep { color: var(--texto-3); }
.git-barra .atual { font-weight: 600; }
.git-barra .direita { margin-left: auto; }
.btn.subir { display: inline-flex; }
.escondido { position: absolute; width: 1px; height: 1px; opacity: .01; pointer-events: auto; }
.lista-arquivos-git { display: flex; flex-direction: column; overflow: hidden; }
.cabeca-git, .linha-git { display: flex; align-items: center; gap: 14px; padding: 10px 15px; }
.cabeca-git { background: var(--cartao-2); border-bottom: 1px solid var(--linha); font-size: 11px; font-weight: 600;
  letter-spacing: .085em; text-transform: uppercase; color: var(--texto-3); }
.cabeca-git span:first-child, .linha-git .nome { flex: 1; min-width: 0; }
.cabeca-git span + span, .linha-git .col { flex: none; width: 150px; font-size: 12px; color: var(--texto-2); }
.linha-git { border-bottom: 1px solid var(--cinza-suave); background: none; border-left: 0; border-right: 0; border-top: 0;
  width: 100%; text-align: left; font: inherit; cursor: pointer; }
.linha-git:last-child { border-bottom: 0; }
.linha-git:hover { background: var(--cartao-2); }
.linha-git .nome { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--texto); overflow-wrap: break-word; }
.linha-git .nome svg { color: var(--texto-3); flex: none; }
.cartao.subida { padding: 13px 15px; margin-bottom: 12px; }
.cartao.subida .l1 { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.cartao.subida .l1 .btn { margin-left: auto; }
.cartao.subida ul { margin: 8px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.cartao.subida li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--texto-2); overflow-wrap: anywhere; }
.leitor-md { padding: 0; overflow: hidden; }
.leitor-topo { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--linha); background: var(--cartao-2); flex-wrap: wrap; }
.leitor-topo .nome { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.leitor-topo .direita { margin-left: auto; }
.md { padding: 18px 20px 24px; max-width: 76ch; }
.md h2 { font-size: 21px; margin: 4px 0 10px; }
.md h3 { font-size: 15px; margin: 18px 0 6px; }
.md h4 { font-size: 13.5px; margin: 14px 0 5px; color: var(--texto-2); }
.md p { font-size: 13.5px; color: var(--texto-2); margin: 0 0 9px; line-height: 1.62; }
.md ul { margin: 0 0 10px; padding-left: 18px; }
.md li { font-size: 13.5px; color: var(--texto-2); margin-bottom: 4px; }
.md table { border-collapse: collapse; margin: 4px 0 12px; width: 100%; }
.md td { border: 1px solid var(--linha); padding: 6px 10px; font-size: 13px; }

/* ---------- ajustes ---------- */
.lista-pessoas { display: flex; flex-direction: column; overflow: hidden; }
.linha-pessoa { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--cinza-suave); flex-wrap: wrap; }
.linha-pessoa:last-child { border-bottom: 0; }
.linha-pessoa:hover { background: var(--cartao-2); }
.linha-pessoa .corpo { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.linha-pessoa .corpo .nome { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; flex-wrap: wrap; }
.linha-pessoa .corpo .sub { font-size: 12px; color: var(--texto-2); }
.linha-pessoa .col { flex: none; font-size: 12px; color: var(--texto-2); width: 210px; overflow-wrap: break-word; }
.linha-pessoa .col.acao { width: auto; }

/* ---------- telas estreitas da rodada 4 ---------- */
@media (max-width: 1250px) {
  .numeros-grade, .graficos-grade, .cotas-grade, .cartoes-grade.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cargo-grade, .cartoes-grade.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .menu-item:not([data-principal]) { display: none; }
  .menu-item.menu-mais { display: inline-flex; }
  .numeros-grade, .graficos-grade, .cotas-grade, .duas-colunas, .cargo-grade,
  .cartoes-grade, .cartoes-grade.tres, .cartoes-grade.quatro, .skill-grade, .form-grade,
  .escolha-grade, .escolha-grade.tres, .mini-numeros { grid-template-columns: minmax(0, 1fr); }
  .org-quadro { height: 420px; }
  .linha-agente { flex-wrap: wrap; padding: 12px 12px 12px 0; }
  .linha-agente .col.conta, .linha-agente .col.quando, .linha-agente .col.estado { width: auto; }
  .linha-entrada { flex-wrap: wrap; }
  .linha-entrada .quando { width: auto; text-align: left; }
  .linha-teto .nome { flex: 1 1 100%; }
  .cabeca-git span + span, .linha-git .col { width: 96px; font-size: 11px; }
  .filha .valor, .filha .barra, .filha .pct { width: auto; }
  .trilha { gap: 12px; }
  .cabeca-cargo h1 { font-size: 22px; }
}

/* ---------- organograma: o cargo empilhado na coluna da área ---------- */
.org-corpo.compacto { flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; }
.org-corpo.compacto .l1 { width: auto; flex: 1; min-width: 0; }
.org-corpo.compacto .l1 .nome { font-size: 11.5px; font-weight: 500; }
.org-corpo.compacto .l2 { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.org-corpo.compacto .estado { font-size: 10.5px; }
.org-corpo.compacto .l5 { font-size: 10px; color: var(--texto-3); }
.org-corpo.compacto .ponto-area { top: 7px; right: 7px; }
.org-quadro { height: 600px; }
@media (max-width: 900px) { .org-quadro { height: 440px; } }

/* ---------- organograma: acertos de medida (cargo empilhado e dono da área) ---------- */
.org-corpo.compacto { flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 9px; }
.org-corpo.compacto .l1 { display: flex; align-items: flex-start; gap: 7px; width: 100%; flex-wrap: wrap; }
.org-corpo.compacto .l1 .nome { font-size: var(--nome-px, 11.5px); font-weight: 600; line-height: 1.3; flex: 1; }
.org-corpo.compacto .l2 { flex: none; display: flex; align-items: center; gap: 6px; padding-left: 29px; }

/* r5: a legenda das 8 áreas — o ponto de cor do cartão deixa de ser mudo */
.org-legenda { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px;
  font-size: 11.5px; color: var(--texto-2); }
.org-legenda .rot { color: var(--texto-3); }
.org-legenda .item { display: inline-flex; align-items: center; gap: 5px; }
.org-legenda .item i { width: 7px; height: 7px; border-radius: 50%; background: var(--cor); flex: none; }
/* r5: de longe (62 %) o cartão fica só com nome + estado e a pílula do agente */
.org-palco.baixo .org-corpo { gap: 6px; padding: 9px 11px; }
.org-palco.baixo .org-corpo .pilula { height: 18px; font-size: 10.5px; }
.org-corpo .dono .pilula { height: 16px; padding: 0 6px; font-size: 10px; }
.org-corpo .dono .rot { font-size: 10.5px; white-space: nowrap; }
.org-corpo .dono .tile.p { width: 20px; height: 20px; }

/* ---------- acertos finos ---------- */
.bloco-form > .btn { align-self: flex-start; }
.aviso-compositor { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 12.5px; color: var(--estado-atrasado); }
.conversa-item[disabled] { cursor: default; }
.escolha.larga .logo-tile, .escolha.larga .tile { flex: none; }
.cabeca-cargo .retrato .imagem-bloco .previa { width: 44px; height: 44px; }
.cartoes-grade.quatro, .cartoes-grade.tres { align-items: stretch; }
.cartao.conexao .acoes, .cartao.skill .acoes, .cartao.entrega .acoes { margin-top: auto; }

/* ---------- 390 px: a ação da cabeça de tela quebra a linha, nunca vaza ---------- */
.cabeca-tela .linha1 { flex-wrap: wrap; }
.cabeca-tela .acao { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .cabeca-tela .acao { width: 100%; margin-left: 0; }
  .troca-visao { flex-wrap: wrap; }
  .org-barra .direita { margin-left: 0; }
}

/* [hidden] tem de vencer a classe: sem isto o chip da barra de topo continuava
   clicável e sem destino dentro da própria Caixa de entrada (medido 19/09). */
.topo-aviso[hidden], [hidden] { display: none !important; }

/* ==========================================================================
   RODADA 6 — as correções medidas da nota r5
   ========================================================================== */

/* ---------- correção 2: "Ver a empresa inteira" recolhe a lateral ---------- */
.org-inteiro .app { grid-template-columns: minmax(0, 1fr); }
.org-inteiro .barra-lateral { display: none; }
.org-inteiro .tela-cheia { left: 0; inset: 0; }

/* O cartão do modo inteiro é enxuto: o NOME tem a linha inteira (nunca sobra
   texto fora da caixa) e o estado + a palavra "agente" vêm embaixo. O da área
   e o da raiz cabem numa linha só, porque o nome deles é curto. */
.org-palco.baixo .org-corpo { flex-direction: row; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; }
.org-palco.baixo .org-corpo .l1 { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; padding-right: 10px; }
.org-palco.baixo .org-corpo .l1 .nome {
  font-size: var(--nome-px, 12.6px); font-weight: 600; line-height: 1.3;
  min-width: 0; flex: 1 1 auto; overflow-wrap: normal; word-break: normal;
}
.org-palco.baixo .org-corpo .l2 { flex: none; display: flex; align-items: center; gap: 6px; padding-left: 0; flex-direction: row; }
.org-palco.baixo .org-corpo .tile.p { width: 20px; height: 20px; flex: none; }
.org-palco.baixo .org-corpo .pilula { height: 17px; font-size: 10px; flex: none; }
.org-palco.baixo .org-corpo .estado { flex: none; font-size: 10.5px; }
.org-palco.baixo .org-corpo .ponto-area { position: absolute; top: 7px; right: 7px; }
.org-palco.baixo .org-corpo.compacto { flex-direction: column; align-items: stretch; gap: 2px; padding: 5px 9px; }
.org-palco.baixo .org-corpo.compacto .l1 { width: 100%; padding-right: 14px; }
.org-palco.baixo .org-corpo.compacto .l2 { align-self: flex-start; }
.org-palco.baixo .org-mais { margin-top: 3px; }

/* ---------- correção 8: estado vazio com ilustração leve (regra 7) ---------- */
.vazio-arte { display: block; line-height: 0; margin-bottom: 2px; }
.vazio-arte svg { display: block; }

/* ---------- correção 8: checklist "Primeiros passos" (05-uxcel, 10-langsmith) ---------- */
.cartao.primeiros { padding: var(--e5); display: flex; flex-direction: column; gap: 10px; }
.cartao.primeiros .cabeca { display: flex; align-items: baseline; gap: 10px; }
.cartao.primeiros .cabeca .conta { margin-left: auto; font-size: 12px; color: var(--texto-2); }
.cartao.primeiros > .barra { height: 6px; border-radius: 999px; background: var(--moldura); overflow: hidden; }
.cartao.primeiros > .barra i { display: block; height: 100%; background: var(--estado-trabalhando); border-radius: 999px; }
.passos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.passos-lista li {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  border: 1px solid var(--linha); border-radius: var(--canto-p); background: var(--cartao);
}
.passos-lista li.feito { background: var(--fundo-trabalhando); border-color: #CFE7D8; }
.passos-lista .marca {
  flex: none; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--linha-forte); background: var(--fundo); color: var(--sobre-acento);
}
.passos-lista li.feito .marca { background: var(--estado-trabalhando); border-color: var(--estado-trabalhando); }
.passos-lista .corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.passos-lista .nome { font-size: 13.5px; font-weight: 600; }
.passos-lista li.feito .nome { text-decoration: line-through; text-decoration-color: #9CBBA8; }
.passos-lista .ajuda { font-size: 12px; color: var(--texto-2); }
.passos-lista .btn, .passos-lista .estado { flex: none; margin-left: auto; }

/* ---------- correção 6: "De onde vem este número" abre no lugar ---------- */
.de-onde {
  flex: 1 1 100%; margin-top: 8px; padding: 11px 13px; border: 1px solid var(--linha);
  border-radius: var(--canto-p); background: var(--cartao-2); display: flex; flex-direction: column; gap: 7px;
}
.de-onde .texto { font-size: 13px; color: var(--texto-2); }
.de-onde .marcas { display: flex; gap: 7px; flex-wrap: wrap; }
.de-onde .ficha-acoes { margin-top: 2px; }

/* ---------- correção 5: a 390 px o nome do destino fica com a linha inteira ---------- */
@media (max-width: 620px) {
  .lista-nomeada .item { flex-wrap: wrap; }
  .lista-nomeada .item .nome { flex: 1 1 auto; min-width: 0; }
  .lista-nomeada .item .direita { margin-left: 0; flex: 1 1 100%; text-align: left; }
}

/* ---------- correção 9: Custos no nível da 14-cursor ---------- */
/* duas colunas com a MESMA altura (a r5 tinha 430 · 890 · 608 lado a lado) */
.custos-linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; margin-bottom: 12px; }
.custos-linha > .cartao { display: flex; flex-direction: column; gap: 9px; }
.custos-linha > .cartao .ficha-acoes { margin-top: auto; }
@media (max-width: 1100px) { .custos-linha { grid-template-columns: minmax(0, 1fr); } }

.cartao.mapa-calor { padding: var(--e5); display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.cartao.mapa-calor .cabeca { display: flex; align-items: baseline; gap: 10px; }
.cartao.mapa-calor .cabeca h2 { font-size: 20px; letter-spacing: -.02em; }
.cartao.mapa-calor .cabeca .direita { margin-left: auto; font-size: 12px; color: var(--texto-3); }
/* eixo do mês em cima, eixo do dia da semana à esquerda */
.mapa-calor .eixos { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; gap: 5px 7px; align-items: start; }
.mapa-calor .canto { grid-column: 1; grid-row: 1; }
.mapa-calor .meses { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(var(--semanas), minmax(0, 1fr)); font-size: 10.5px; color: var(--texto-3); }
.mapa-calor .dias-semana { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(7, 13px); gap: 3px; font-size: 10px; color: var(--texto-3); text-align: right; }
.mapa-calor .dias-semana span { line-height: 13px; }
.mapa-calor .grade {
  grid-column: 2; grid-row: 2; display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(7, 13px); grid-auto-columns: minmax(0, 1fr); gap: 3px;
}
.mapa-calor .quadrinho { height: 13px; border-radius: 3px; position: relative; background: var(--cinza-suave-2); }
.mapa-calor .quadrinho.fora { background: transparent; }
/* um acento só: o quase-preto da casa, em 4 forças */
.mapa-calor .quadrinho.n0 { background: var(--cinza-suave-2); }
.mapa-calor .quadrinho.n1 { background: #C7CCD6; }
.mapa-calor .quadrinho.n2 { background: #8E96A6; }
.mapa-calor .quadrinho.n3 { background: #4A5464; }
.mapa-calor .quadrinho.n4 { background: #16181D; }
.mapa-calor .legenda-calor { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--texto-3); }
.mapa-calor .legenda-calor .quadrinho { width: 13px; flex: none; }
.mapa-calor .legenda-calor .direita { margin-left: auto; }
.mapa-calor .estatisticas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; border-top: 1px solid var(--cinza-suave); padding-top: 12px; }
.mapa-calor .estatisticas .r { display: block; font-size: 11px; color: var(--texto-2); }
.mapa-calor .estatisticas .v { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.015em; margin: 2px 0 1px; }
@media (max-width: 760px) { .mapa-calor .estatisticas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- correção 5: a 390 px nenhuma coluna de texto é espremida até partir a palavra ----------
   Medido na r6: `.linha-atividade .oque` ficava com 8 px de caixa e o texto era
   quebrado no meio da palavra. Em tela estreita a linha vira duas. */
@media (max-width: 680px) {
  .linha-atividade, .linha-tarefa, .linha-exec { flex-wrap: wrap; row-gap: 4px; }
  .linha-atividade .oque, .linha-exec .oque, .linha-tarefa .titulo { flex: 1 1 100%; min-width: 0; order: 5; }
  .linha-atividade .direita, .linha-tarefa .id { margin-left: auto; }
  .linha-entrada { flex-wrap: wrap; row-gap: 5px; }
  .linha-entrada .corpo { flex: 1 1 100%; min-width: 0; }
  .linha-entrada .area, .linha-entrada .quando, .linha-entrada .acoes { flex: none; }
  .linha-entrada .acoes { margin-left: auto; }
  .resumo-lista .linha { flex-wrap: wrap; row-gap: 3px; }
  .resumo-lista .linha .r { flex: 1 1 100%; }
  .resumo-lista .linha .v { flex: 1 1 auto; min-width: 0; }
  .resumo-lista .linha .direita { margin-left: auto; }
}

/* ==========================================================================
   RODADA 7 — os 8 defeitos medidos da nota r6
   ========================================================================== */

/* ---------- correção 1: o recibo tem ✕ e sai da tela em 6 s ----------
   No modo "empresa inteira" ele ficava fixo (y 804, opacidade 1 aos 8 s) por
   cima do desenho e cobria um cartão. Agora todo recibo tem fechar, e o que
   não tem "Desfazer" some sozinho em 6 s — a barrinha do relógio corre junto. */
.recibo .fechar-recibo {
  flex: none; margin-left: auto; width: 26px; height: 26px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 7px; border: 0;
  background: none; color: #C8CEDA; cursor: pointer; padding: 0;
}
.recibo .desfazer + .fechar-recibo { margin-left: 0; }
.recibo .fechar-recibo:hover { background: rgba(255, 255, 255, .14); color: var(--sobre-acento); }
.recibo.curto .relogio { animation-duration: 6s; }

/* ---------- correção 1: a empresa inteira cabe na JANELA (≤ 900 px) ----------
   O desenho não mudou de ideia: o que mudou é que, no modo inteiro, a moldura
   em volta dele encolhe (a frase de ajuda da cabeça, os vãos, o rodapé) e o
   cartão do cargo fica com 2 linhas curtas de ~40 px. É isso que tira os 11
   cartões de baixo da dobra sem apertar a letra do nome. */
.org-inteiro .cabeca-tela .ajuda { display: none; }
.org-inteiro .cabeca-tela { margin-bottom: 8px; }
.org-inteiro .cabeca-tela h1 { font-size: 22px; }
.org-inteiro .tela { padding: var(--e4) var(--e6) 12px; margin-bottom: 8px; }
.org-inteiro .org-barra { margin-bottom: 6px; }
.org-inteiro .org-legenda { margin-top: 6px; font-size: 11px; gap: 10px; }
.org-inteiro .org-pe { margin-top: 5px; font-size: 11.5px; line-height: 1.45; }

.org-inteiro .org-palco.baixo .org-corpo { padding: 5px 18px 5px 10px; gap: 6px; }
.org-inteiro .org-palco.baixo .org-corpo.compacto { padding: 4px 9px; gap: 0; }
.org-inteiro .org-palco.baixo .org-corpo.compacto .l1 { padding-right: 12px; }
.org-inteiro .org-palco.baixo .org-corpo.compacto .tile.p { width: 16px; height: 16px; }
.org-inteiro .org-palco.baixo .org-corpo.compacto .pilula { height: 14px; font-size: 10px; padding: 0 6px; }
.org-inteiro .org-palco.baixo .org-corpo.compacto .estado { font-size: 10.5px; line-height: 14px; }
.org-inteiro .org-palco.baixo .org-corpo.compacto .estado .ponto { width: 6px; height: 6px; }
.org-inteiro .org-mais { height: 20px; font-size: 10.5px; bottom: -11px; }

/* ---------- correção 6: a linha que fecha a conta dos tetos ---------- */
.linha-soma { margin: 0 0 10px; }

/* ==========================================================================
   C3 — casca real (design/09-casca-real.md): as únicas peças novas de tela.
   Tela de entrada e "motor fora do ar" (antes da interface existir), chip do
   modo (demonstração · sem atualização ao vivo), faixa "não consegui carregar"
   e o recibo vermelho de erro. Nada do que passou na régua muda de lugar.
   ========================================================================== */
#motor-tela { position: fixed; inset: 0; z-index: 60; background: var(--lateral); overflow: auto; }
#motor-tela[hidden] { display: none; }
.motor-tela { min-height: 100%; display: grid; place-items: center; padding: var(--e6) var(--e4); }
.motor-cartao { width: 100%; max-width: 400px; padding: var(--e7) var(--e6); display: grid; gap: var(--e3); }
.motor-cartao h1 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.motor-cartao .motor-titulo { font-size: 14px; color: var(--texto-2); margin: 0 0 var(--e2); }
.motor-cartao .texto { font-size: 14px; line-height: 1.5; color: var(--texto); margin: 0; }
.motor-cartao form { display: grid; gap: var(--e2); }
.motor-cartao .campo-texto { width: 100%; }
.motor-cartao .ficha-acoes { margin-top: var(--e2); }
.motor-cartao .ficha-acoes .btn { text-decoration: none; }
.motor-marca { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--fundo); border: 1px solid var(--linha); }
.motor-marca img { width: 30px; height: 30px; object-fit: contain; }
.motor-erro { font-size: 12.5px; font-weight: 500; color: var(--estado-sem-sinal); margin: 0; }
.motor-erro[hidden] { display: none; }
.chip-motor { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; border: 1px solid var(--linha-forte); background: var(--cartao); color: var(--texto-2); white-space: nowrap; }
.chip-motor[hidden] { display: none; }
.chip-motor.demo { border-style: dashed; }
.chip-motor.atencao { color: var(--estado-atrasado); background: var(--fundo-atrasado); border-color: transparent; }
.faixa-falha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 var(--e4); padding: 10px 14px; border-radius: var(--canto-p); border: 1px solid var(--linha-forte); background: var(--fundo-atrasado); color: var(--estado-atrasado); font-size: 13px; }
.faixa-falha .btn { margin-left: auto; }
.recibo.erro { background: var(--estado-sem-sinal); }
.recibo.erro .pe { color: #FDD7DF; }
.recibo.erro .relogio { background: rgba(255,255,255,.45); }
@media (max-width: 900px) { .chip-motor { display: none; } .chip-motor.atencao { display: inline-flex; } }

/* texto livre escrito por gente ou cargo: links e ids colados quebram onde for preciso */
[data-livre] { overflow-wrap: anywhere; min-width: 0; }

/* nota do próprio motor no fio da conversa: sem retrato, discreta */
.msg.de-sistema { justify-content: center; }
.msg.de-sistema .corpo { max-width: 620px; flex: 0 1 auto; }
.msg.de-sistema .cabeca .autor { display: inline-flex; align-items: center; gap: 5px; color: var(--texto-3); font-size: 12px; }
.msg.de-sistema .nota-sistema { background: #F5F6F8; border: 1px dashed var(--linha-forte); border-radius: var(--canto-p); padding: 8px 12px; color: var(--texto-2); font-size: 13px; }

/* markdown dentro da bolha do cargo: parágrafos curtos, listas, código e negrito discretos */
.msg .texto.md p { margin: 0 0 6px; }
.msg .texto.md p:last-child { margin-bottom: 0; }
.msg .texto.md ul { margin: 4px 0 6px 18px; padding: 0; }
.msg .texto.md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--cinza-suave); border-radius: 5px; padding: 1px 5px; }
.msg .texto.md h2, .msg .texto.md h3, .msg .texto.md h4 { font-size: 14px; margin: 8px 0 4px; }
.msg .arquivos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ---------- C3 · celular (≤ 900 px): a conversa rola com a página e a caixa de escrever gruda embaixo ---------- */
@media (max-width: 900px) {
  .fio { height: auto; overflow: visible; }
  .fio-corpo { overflow: visible; flex: none; min-height: 40vh; }
  .compositor { position: sticky; bottom: 0; background: var(--cartao); z-index: 3; }
  .lista-conversas { max-height: 150px; }
}
/* ---------- C3 · telas estreitas (≤ 480 px): pílulas e chips quebram linha em vez de vazar ---------- */
@media (max-width: 480px) {
  .filtro { height: auto; min-height: 31px; white-space: normal; line-height: 1.25; padding: 6px 12px; text-align: left; }
  .chip-motor, .chip-motor.atencao { height: auto; max-width: 44vw; white-space: normal; line-height: 1.15; padding: 3px 8px; text-align: center; }
  .topo-direita { flex-wrap: wrap; row-gap: 4px; justify-content: flex-end; }
}
@media (max-width: 480px) {
  .bloco-cabeca { flex-wrap: wrap; row-gap: 6px; }
  .bloco-cabeca h2 { white-space: nowrap; }
  .bloco-cabeca .conta { white-space: nowrap; }
  .bloco-cabeca .direita { flex-basis: 100%; }
}

.trabalhou .gatilho.so-texto { cursor: default; }
/* cartão do quadro: nome do cargo e pílula na mesma linha, com reticências */
.cartao.tarefa .pe { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: nowrap; }
.cartao.tarefa .pe .prazo { min-width: 0; white-space: normal; overflow-wrap: break-word; }
.cartao.tarefa .pe .pilula { flex: none; }
.linha-teto .consumo { display: block; font-size: 12px; margin-top: 2px; }
.faixa-aviso { margin: 0 0 var(--e4); padding: 10px 14px; border-radius: var(--canto-p); border: 1px dashed var(--linha-forte); background: var(--lateral); color: var(--texto-2); font-size: 13px; }
/* celular: compositor enxuto (sem faixa de apps, chips de modo escondidos), 1 linha de texto */
@media (max-width: 480px) {
  .compositor { padding: 8px 10px 10px; }
  .compositor .faixa-apps { display: none; }
  .compositor .campo { min-height: 40px; }
  .compositor .pe .dica, .compositor .pe #recado { display: none; }
  .compositor .pe { flex-wrap: wrap; row-gap: 6px; }
  .lista-conversas { max-height: 120px; }
}

/* R3 (20/09): comentários do cargo na página da tarefa — mesmo desenho do fio de conversa */
.fio-tarefa .msg { margin-top: 12px; }
.fio-tarefa .msg + .msg { border-top: 1px solid var(--linha); padding-top: 12px; }

/* rodada 14 (20/09): o que o cargo entrega aparece dentro da mensagem — página colada, imagem no texto, bloco de código */
.md pre, .texto.md pre, .leitor-md pre { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--cinza-suave); overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.45; max-height: 320px; }
.md pre code, .texto.md pre code { background: none; padding: 0; }
.md .md-img, .texto.md .md-img { display: block; max-width: 100%; max-height: 420px; margin-top: 8px; border-radius: 10px; border: 1px solid var(--linha); }
.anexo-html.pagina-embutida iframe { height: 420px; }
.anexo-html.pagina-embutida pre.codigo { margin: 0; border: 0; border-radius: 0; max-height: 420px; }
.fio-tarefa .msg .texto.md > :first-child { margin-top: 0; }
.fio-tarefa .anexo-html, .fio-tarefa .carrossel { max-width: none; }
.marca-item.clicavel { cursor: pointer; font: inherit; color: inherit; text-decoration: none; }
.marca-item.clicavel:hover { border-color: var(--texto-2); }
/* o fio da tarefa ocupa a largura toda: o que o cargo entrega (página, imagem) precisa de espaço para ser lido */
.cargo-grade .fio-tarefa { grid-column: 1 / -1; }
.fio-tarefa .msg .corpo { max-width: 860px; }
/* sessões do cargo (tabela) */
.cartao.tabela.sessoes .cabecalho, .cartao.tabela.sessoes .linha { grid-template-columns: 110px minmax(0, 1fr) 130px 70px 110px; }
.cartao.tabela.sessoes .oque a, .linha-exec .oque a { color: inherit; text-decoration: none; }
.cartao.tabela.sessoes .oque a:hover, .linha-exec .oque a:hover { text-decoration: underline; }
.trabalhou button.gatilho { cursor: pointer; }
/* instruções do cargo (o arquivo que ele lê) */
.leitor-instrucoes { max-width: 860px; }
.leitor-instrucoes h2, .leitor-instrucoes h3 { margin-top: 14px; }
.leitor-instrucoes ul { padding-left: 20px; }
.marca-item.clicavel.escolhida { border-color: var(--acento); border-width: 1.5px; font-weight: 600; }
.ligar-conta { margin-top: 12px; }


/* ============================== modo escuro (20/09) ============================== */
/* Só tokens: nada de cor nova. "do sistema" segue o aparelho; o botão em Ajustes › Perfil força claro/escuro. */
:root[data-tema="escuro"] {
  --fundo: #111318; --lateral: #16191F; --moldura: #0D0F13; --cartao: #1A1D24; --cartao-2: #20242C;
  --linha: #2B3039; --linha-forte: #3A404B; --texto: #E8EAEE; --texto-2: #A5ADBA; --texto-3: #7C8595;
  --acento: #E8EAEE; --sobre-acento: #111318; --acento-hover: #D2D6DD;
  --cinza-suave: #242932; --cinza-suave-2: #2A3039; --borda-hover: #4A5261;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4); --sombra-alta: 0 4px 12px rgba(0, 0, 0, .5), 0 24px 56px rgba(0, 0, 0, .6);
  --fundo-trabalhando: #14301F; --fundo-esperando-voce: #33290F; --fundo-esperando-aprovacao: #262B36; --fundo-pronto: #172449;
  --fundo-sem-sinal: #3B1220; --fundo-desativado: #262B33; --fundo-atrasado: #3A1E12;
  --estado-trabalhando: #4ADE80; --estado-esperando-voce: #FACC15; --estado-esperando-aprovacao: #C7CDD8; --estado-pronto: #93B4FF;
  --estado-sem-sinal: #FB7185; --estado-desativado: #9AA3B2; --estado-atrasado: #FDBA74;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-tema="escuro"]) {
    --fundo: #111318; --lateral: #16191F; --moldura: #0D0F13; --cartao: #1A1D24; --cartao-2: #20242C;
    --linha: #2B3039; --linha-forte: #3A404B; --texto: #E8EAEE; --texto-2: #A5ADBA; --texto-3: #7C8595;
    --acento: #E8EAEE; --sobre-acento: #111318; --acento-hover: #D2D6DD;
    --cinza-suave: #242932; --cinza-suave-2: #2A3039; --borda-hover: #4A5261;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4); --sombra-alta: 0 4px 12px rgba(0, 0, 0, .5), 0 24px 56px rgba(0, 0, 0, .6);
    --fundo-trabalhando: #14301F; --fundo-esperando-voce: #33290F; --fundo-esperando-aprovacao: #262B36; --fundo-pronto: #172449;
    --fundo-sem-sinal: #3B1220; --fundo-desativado: #262B33; --fundo-atrasado: #3A1E12;
    --estado-trabalhando: #4ADE80; --estado-esperando-voce: #FACC15; --estado-esperando-aprovacao: #C7CDD8; --estado-pronto: #93B4FF;
    --estado-sem-sinal: #FB7185; --estado-desativado: #9AA3B2; --estado-atrasado: #FDBA74;
    color-scheme: dark;
  }
}
/* quadros de anexo, páginas embutidas e imagens ficam claros mesmo no escuro: o conteúdo é do arquivo, não da casca */
.anexo-html iframe, .tela-cheia .quadro, .pagina-embutida iframe { background: var(--branco-fixo); }
/* o tile de logo fica branco também no escuro: a logo é da marca, não da casca */
:root[data-tema="escuro"] .logo-tile { background: var(--branco-fixo); border-color: var(--linha-forte); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]):not([data-tema="escuro"]) .logo-tile { background: var(--branco-fixo); border-color: var(--linha-forte); } }
/* a linha "estado + prazo" do cartão de tarefa quebra por item, nunca no meio da palavra (varredura da apresentação) */
.cartao.tarefa .pe:last-child { flex-wrap: wrap; row-gap: 2px; }
.cartao.tarefa .pe .prazo { overflow-wrap: normal; }