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

/* Base visual do painel: tema claro, superficies brancas sobre cinza suave,
   laranja da marca como unico destaque. A marca da agencia entra na Fase 1
   (portal do cliente), quando o sistema passa a ser white-label.
   Os nomes de variavel antigos continuam valendo — ha estilo embutido nos
   .js apontando para --apagado, --alerta e --destaque. */
:root {
  --fundo: #f4f6f9;
  --fundo-alto: #eceff4;
  --painel: #ffffff;
  --painel-2: #f7f9fb;
  --vidro: #ffffff;
  --vidro-forte: #ffffff;
  --linha: rgba(17, 24, 39, .09);
  --linha-forte: rgba(17, 24, 39, .18);
  --texto: #141a22;
  --apagado: #6b7684;
  --destaque: #ff5a1f;
  --destaque-2: #ff7f47;
  --ok: #12a06e;
  --aviso-cor: #c98a00;
  --alerta: #e0342b;
  --raio: 20px;
  --raio-m: 14px;
  --raio-p: 12px;
  --sombra: 0 10px 30px rgba(17, 24, 39, .07), 0 2px 8px rgba(17, 24, 39, .04);
  --sombra-alta: 0 16px 44px rgba(17, 24, 39, .12);
  --lateral: 230px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 14px/1.6 Inter, "SF Pro Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .1px;
}

/* Luz ambiente: manchas quentes bem de leve, presas ao fundo para nao brigar
   com o conteudo que rola. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(760px 420px at 12% -8%, rgba(255, 90, 31, .07), transparent 70%),
    radial-gradient(900px 520px at 92% 0%, rgba(60, 110, 255, .05), transparent 70%);
}
/* O :not(dialog) importa: a janela modal e filha direta do body, e o
   position:relative daqui vencia o position:fixed do navegador. Com a
   pagina rolada, a janela abria acima do topo da tela — titulo, texto e
   rotulo do campo ficavam fora de vista. */
body > *:not(dialog) { position: relative; z-index: 1; }

a { color: var(--destaque); text-decoration: none; }
a:hover { color: var(--destaque-2); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(17, 24, 39, .16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(17, 24, 39, .28); background-clip: padding-box; }

/* ---- entrada e telas centradas ---- */
.centro {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.cartao {
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 24px;
  box-shadow: var(--sombra);
}

/* Cartao com luz propria: usado no bloco que o usuario olha primeiro. */
.cartao.destaque {
  border-color: rgba(255, 90, 31, .22);
  background:
    radial-gradient(620px 220px at 88% 0%, rgba(255, 90, 31, .09), transparent 70%),
    var(--painel);
}

.cabeca-cartao { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.cabeca-cartao h2 { margin: 0 0 4px; }
.icone-cartao {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: var(--raio-m);
  display: grid;
  place-items: center;
  color: var(--destaque);
  background: rgba(255, 90, 31, .1);
  border: 1px solid rgba(255, 90, 31, .2);
}
.icone-cartao svg { width: 20px; height: 20px; }

button.com-icone { display: inline-flex; align-items: center; gap: 8px; }

.entrada { width: 100%; max-width: 380px; padding: 32px; }
.entrada h1 { margin: 0 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -.4px; }
.entrada p.sub { margin: 0 0 22px; color: var(--apagado); font-size: 13px; }

label { display: block; font-size: 12px; color: var(--apagado); margin: 14px 0 6px; }

input, select, textarea {
  width: 100%;
  padding: 10px 13px;
  background: var(--painel);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-p);
  color: var(--texto);
  font: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input::placeholder, textarea::placeholder { color: #9aa3af; }
input:hover, select:hover, textarea:hover { border-color: rgba(17, 24, 39, .3); }
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--destaque);
  box-shadow: 0 0 0 3px rgba(255, 90, 31, .15);
}
select option { background: var(--painel); color: var(--texto); }

/* Caixa de marcar nao e campo de texto: a regra de cima (width 100%) estica a
   caixa ate a linha inteira e joga o rotulo para a direita. Vale para todo
   checkbox e radio do sistema. */
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; flex: 0 0 auto; padding: 0; margin: 0;
  accent-color: var(--destaque); cursor: pointer;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { cursor: default; }

button {
  padding: 10px 16px;
  border: 0;
  border-radius: var(--raio-p);
  background: linear-gradient(180deg, var(--destaque-2), var(--destaque));
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(255, 90, 31, .22);
  transition: filter .18s ease, box-shadow .18s ease, transform .12s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
button:hover { filter: brightness(1.04); box-shadow: 0 8px 20px rgba(255, 90, 31, .3); }
button:active { transform: translateY(1px); }
button.discreto {
  background: var(--painel);
  color: var(--texto);
  border: 1px solid var(--linha-forte);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}
button.discreto:hover { background: var(--painel-2); border-color: rgba(17, 24, 39, .3); box-shadow: none; filter: none; }
button:disabled { opacity: .45; cursor: default; filter: none; box-shadow: none; }

.largo { width: 100%; margin-top: 22px; }

.erro { color: var(--alerta); font-size: 13px; min-height: 18px; margin-top: 10px; }

/* ---- barra do topo (portal do cliente) ---- */
header.topo {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--linha);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 20;
}
/* A marca nunca quebra em duas linhas, e a navegacao rola de lado quando as
   abas nao cabem — com muitas abas, era a marca que se desmontava. */
header.topo .marca { font-weight: 700; letter-spacing: .2px; white-space: nowrap; flex: 0 0 auto; }
header.topo nav {
  display: flex;
  gap: 4px;
  margin-left: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}
header.topo nav button { white-space: nowrap; flex: 0 0 auto; }
header.topo nav button { background: transparent; color: var(--apagado); font-weight: 500; border-radius: var(--raio-p); box-shadow: none; }
header.topo nav button:hover { background: rgba(17, 24, 39, .05); color: var(--texto); box-shadow: none; filter: none; }
header.topo nav button.ativa { color: var(--destaque); background: rgba(255, 90, 31, .1); }
header.topo .direita { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--apagado); }

/* ---- estrutura com barra lateral (painel da agencia) ---- */
aside.lateral {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--lateral);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 12px 14px;
  background: var(--painel);
  border-right: 1px solid var(--linha);
  box-shadow: 8px 0 30px rgba(17, 24, 39, .05);
}

.lateral .topo-marca { display: flex; align-items: center; padding: 6px 10px 12px; flex: 0 0 auto; }
.lateral .logo { max-width: 100%; max-height: 32px; object-fit: contain; display: block; }
.lateral .marca { font-weight: 700; font-size: 14px; line-height: 1.25; letter-spacing: -.1px; }

/* Os itens dividem a altura que sobra, entre 32 e 42px. Quando nem no minimo
   cabem — o menu cresceu de 16 para 23 secoes —, a lista rola em vez de
   cortar: item invisivel no fim da lista e item inalcancavel. */
nav.menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
nav.menu::-webkit-scrollbar { width: 6px; }
nav.menu::-webkit-scrollbar-thumb { background: var(--linha-forte); border-radius: 3px; }
nav.menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 32px;
  max-height: 42px;
  padding: 0 11px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #4b5563;
  font-weight: 500;
  font-size: 13.5px;
  text-align: left;
  box-shadow: none;
}
nav.menu button svg,
.rodape-lateral button svg,
button.icone svg,
.barra-cima .busca svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
nav.menu button svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .75; }
nav.menu button .rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav.menu button:hover { background: rgba(17, 24, 39, .05); color: var(--texto); box-shadow: none; filter: none; }
nav.menu button.ativa {
  color: var(--destaque);
  background: rgba(255, 90, 31, .1);
  font-weight: 600;
}
nav.menu button.ativa svg { color: var(--destaque); opacity: 1; }

.lateral .rodape-lateral { border-top: 1px solid var(--linha); padding-top: 10px; display: grid; gap: 6px; flex: 0 0 auto; }
.lateral .pessoa { display: flex; align-items: center; gap: 10px; padding: 2px 6px; min-width: 0; }
.lateral .pessoa .dados { min-width: 0; display: grid; }
.lateral .pessoa .nome { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral .pessoa .papel { font-size: 11px; color: var(--apagado); }
.lateral .rodape-lateral button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; }
.lateral .rodape-lateral button svg { width: 16px; height: 16px; }

.avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(160deg, #3b4553, #1f2733);
}

/* barra de cima do painel: busca, aviso e identidade */
header.barra-cima {
  position: sticky;
  top: 0;
  z-index: 30;
  margin-left: var(--lateral);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 40px;
  background: rgba(244, 246, 249, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linha);
}
.barra-cima .busca { position: relative; flex: 1 1 auto; max-width: 560px; }
.barra-cima .busca svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--apagado);
  pointer-events: none;
}
.barra-cima .busca input { padding-left: 40px; border-radius: 999px; height: 38px; border-color: var(--linha); }
.barra-cima .direita { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* resultado da busca de secoes: atalho para as abas do menu */
.achados {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  box-shadow: var(--sombra-alta);
  padding: 6px;
  display: none;
  max-height: 320px;
  overflow-y: auto;
}
.achados.aberto { display: block; }
.achados button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--texto);
  font-weight: 500;
  padding: 9px 12px;
  border-radius: 10px;
  box-shadow: none;
}
.achados button:hover, .achados button.marcado { background: rgba(255, 90, 31, .1); color: var(--destaque); box-shadow: none; filter: none; }
.achados .vazio { padding: 14px 12px; text-align: left; }

button.icone {
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--painel);
  border: 1px solid var(--linha);
  color: var(--apagado);
  position: relative;
  box-shadow: none;
}
button.icone:hover { background: var(--painel-2); color: var(--texto); box-shadow: none; filter: none; }
button.icone svg { width: 18px; height: 18px; }
button.icone .ponto {
  position: absolute;
  top: 7px;
  right: 8px;
  min-width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--destaque);
  box-shadow: 0 0 0 2px var(--painel);
  display: none;
}
button.icone.urgente { color: var(--destaque); border-color: rgba(255, 90, 31, .35); }
button.icone.urgente .ponto { display: block; }

button.abrir-menu { display: none; }

main { padding: 22px 40px 56px; max-width: 1500px; margin: 0 auto; }
body.com-lateral main { margin-left: var(--lateral); max-width: calc(1500px + var(--lateral)); }

h1 { letter-spacing: -.6px; }
h2 { font-size: 20px; margin: 0 0 16px; font-weight: 650; letter-spacing: -.3px; }

:focus-visible {
  outline: 2px solid var(--destaque);
  outline-offset: 2px;
  border-radius: 8px;
}
tr.clicavel:focus-visible { outline-offset: -2px; }

/* ---- tabelas ---- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 13px 12px; border-bottom: 1px solid var(--linha); }
tbody tr:last-child td { border-bottom: 0; }
th {
  color: var(--apagado);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  background: transparent;
  border-bottom: 1px solid var(--linha-forte);
}
tr.clicavel { cursor: pointer; transition: background .16s ease; }
tr.clicavel:hover { background: rgba(255, 90, 31, .05); }
/* Tabela larga rola dentro do cartao, nunca empurra a pagina de lado. */
.cartao { overflow-x: auto; }

/* Lista solta na pagina ganha corpo de cartao; dentro de um .cartao ela
   continua sendo so a tabela, para nao empilhar duas molduras. */
#conteudo table {
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: var(--sombra);
}
#conteudo table th:first-child, #conteudo table td:first-child { padding-left: 22px; }
#conteudo table th:last-child, #conteudo table td:last-child { padding-right: 22px; }
#conteudo .cartao table, #conteudo dialog table, dialog table {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#conteudo .cartao table th, dialog table th { background: transparent; }
#conteudo .cartao table th:first-child, #conteudo .cartao table td:first-child { padding-left: 12px; }
#conteudo .cartao table th:last-child, #conteudo .cartao table td:last-child { padding-right: 12px; }

.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--linha-forte);
  background: var(--painel-2);
  color: var(--apagado);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.selo.ativo, .selo.ok, .selo.paga, .selo.aceita, .selo.publicado, .selo.pronto, .selo.conectada, .selo.concluida {
  color: #0b7a54;
  border-color: rgba(18, 160, 110, .3);
  background: rgba(18, 160, 110, .1);
}
.selo.pausado, .selo.atencao, .selo.risco, .selo.enviado, .selo.em_producao, .selo.revisado, .selo.alta {
  color: #96690a;
  border-color: rgba(201, 138, 0, .32);
  background: rgba(201, 138, 0, .12);
}
.selo.encerrado, .selo.critico, .selo.expirado, .selo.recusada {
  color: #b3241c;
  border-color: rgba(224, 52, 43, .3);
  background: rgba(224, 52, 43, .1);
}

.barra { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.barra input, .barra select { width: auto; }
.barra .empurra { margin-left: auto; }
.barra h2 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.8px; }

.linha-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; }

dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  max-width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: var(--painel);
  color: var(--texto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 26px;
  min-width: 400px;
  box-shadow: var(--sombra-alta);
}
dialog::backdrop { background: rgba(17, 24, 39, .35); }
dialog h2 { font-size: 19px; }
dialog .acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }

.vazio { color: var(--apagado); padding: 34px 0; text-align: center; font-size: 13px; }

/* ---- acervo e posts ---- */
.sub-abas { display: flex; gap: 4px; margin: 0 0 20px; border-bottom: 1px solid var(--linha); padding-bottom: 6px; overflow-x: auto; }
.sub-abas button { background: transparent; color: var(--apagado); font-weight: 500; border-radius: var(--raio-p); white-space: nowrap; box-shadow: none; }
.sub-abas button:hover { background: rgba(17, 24, 39, .05); color: var(--texto); box-shadow: none; filter: none; }
.sub-abas button.ativa { color: var(--destaque); background: rgba(255, 90, 31, .1); }

.solta {
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-m);
  padding: 22px;
  text-align: center;
  color: var(--apagado);
  font-size: 13px;
  margin-bottom: 18px;
  background: var(--painel);
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.solta.sobre { border-color: var(--destaque); color: var(--texto); background: rgba(255, 90, 31, .07); }
.solta div { text-align: left; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }

.card-midia {
  margin: 0;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card-midia:hover { border-color: rgba(255, 90, 31, .45); transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.card-midia .mini { width: 100%; object-fit: cover; display: block; background: var(--fundo-alto); }
.card-midia .mini.video { display: grid; place-items: center; color: var(--apagado); font-size: 13px; }
.card-midia figcaption { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.card-midia figcaption strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-midia figcaption span { color: var(--apagado); }
.card-midia .selo { align-self: flex-start; }
.card-midia .tags { color: var(--destaque); }

.dica { color: var(--apagado); font-size: 13px; margin: 0 0 14px; line-height: 1.65; max-width: 78ch; }

/* ---- calendario ---- */
.calendario {
  display: grid;
  /* minmax(0,...) e o que impede um titulo longo de esticar a coluna */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.cabecalho-dia {
  background: var(--painel-2);
  color: var(--apagado);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 600;
  padding: 8px 10px;
}
.calendario .dia {
  background: var(--painel);
  min-height: 110px;
  padding: 6px 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.calendario.semana .dia { min-height: 340px; }
.calendario .dia.fora { background: var(--painel-2); opacity: .7; }
.calendario .dia.hoje { box-shadow: inset 0 0 0 2px rgba(255, 90, 31, .45); background: #fff6f1; }
.calendario .dia.alvo { background: rgba(255, 90, 31, .1); }
.calendario .numero { font-size: 11px; color: var(--apagado); font-weight: 600; }

.pastilha {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--painel-2);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--apagado);
  border-radius: 7px;
  padding: 4px 6px;
  font-size: 11px;
  cursor: pointer;
  overflow: hidden;
  transition: background .16s ease;
}
.pastilha:hover { background: var(--fundo-alto); }
.pastilha.arrastando { opacity: .4; }
.pastilha img, .pastilha .sem-arte {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--fundo-alto);
  flex: 0 0 auto;
}
.pastilha .hora { color: var(--apagado); flex: 0 0 auto; }
.pastilha .texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pastilha .trava { color: var(--destaque); margin-left: auto; }
.pastilha .alerta { color: var(--alerta); margin-left: auto; font-weight: 700; }

.pastilha.cinza { border-left-color: #98a1ad; }
.pastilha.azul { border-left-color: #3b82f6; }
.pastilha.amarelo { border-left-color: var(--aviso-cor); }
.pastilha.verde { border-left-color: var(--ok); }
.pastilha.verde-escuro { border-left-color: #0b7a54; }
.pastilha.vermelho { border-left-color: var(--alerta); }

.grade-horarios { display: flex; flex-wrap: wrap; gap: 8px; }
.espaco {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 13px;
  border: 1px solid var(--linha-forte);
  background: var(--painel);
  border-radius: 999px;
  font-size: 13px;
}
.espaco.desligado { opacity: .5; text-decoration: line-through; }
.espaco .x {
  background: transparent;
  color: var(--apagado);
  padding: 0 4px;
  font-size: 15px;
  line-height: 1;
  border: 0;
  box-shadow: none;
}
.espaco .x:hover { color: var(--alerta); box-shadow: none; filter: none; }

/* ---- publicar agora ---- */
/* Urgencia nao pinta o item inteiro: quem avisa e o selo com o numero. O
   preenchido laranja continua querendo dizer apenas "voce esta aqui". */
nav.menu button#sino.urgente { color: var(--texto); font-weight: 600; }
nav.menu button#sino.urgente svg { color: var(--destaque); opacity: 1; }
nav.menu button .contador {
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--destaque);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 18px;
}
header.topo nav button#sino.urgente {
  color: #fff;
  background: linear-gradient(180deg, var(--destaque-2), var(--destaque));
  font-weight: 600;
}

.publicar-item { margin-bottom: 18px; }
.publicar-item .cabeca { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.publicar-item .corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .publicar-item .corpo { grid-template-columns: minmax(0, 1fr); } }
.publicar-item .texto-copia { font-size: 13px; line-height: 1.7; }
.publicar-item .grade { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
/* A arte e o que a pessoa vai olhar antes de postar: ocupa a coluna, nao uma
   miniatura de canto. */
.publicar-item .card-midia .mini { height: 230px; }
.publicar-item .card-midia .mini.quebrada {
  display: grid; place-items: center; font-size: 12px; color: var(--alerta, #b91c1c);
  background: rgba(185, 28, 28, .06);
}
/* O link e uma linha inteira; os tres botoes, a linha de baixo. Assim "Nao
   saiu" nao cai sozinho numa terceira. */
.acoes-publicar { margin-top: 16px; display: grid; gap: 10px; }
.acoes-publicar .botoes { display: flex; gap: 8px; flex-wrap: wrap; }

.passos { margin: 14px 0 0; padding-left: 20px; color: var(--apagado); font-size: 13px; line-height: 1.9; }
.passos-titulo { margin: 18px 0 0; font-weight: 600; font-size: 13px; }

/* ---------------- fila de publicacao ---------------- */
/* A linha e compacta de proposito: quem abre esta tela quer varrer o que
   esta atrasado, nao ler onze cartoes abertos. O painel do manual assistido
   abre por clique, um de cada vez. */
.fila-secao { margin: 22px 0 10px; }
.fila-secao h3 { margin: 0; font-size: 14px; letter-spacing: .01em; }
.fila-linha { margin-bottom: 10px; padding: 14px 16px; }
.fila-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fila-quem { display: flex; flex-direction: column; min-width: 0; margin-right: 4px; }
.fila-titulo { color: var(--apagado); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-quando { color: var(--apagado); font-size: 12px; font-variant-numeric: tabular-nums; }
.fila-painel { margin-top: 16px; border-top: 1px solid var(--linha); padding-top: 16px; }

/* Toda falha mostra a causa a esquerda e UMA acao de conserto a direita.
   Duas acoes ja seria pedir uma decisao a quem esta atrasado. */
.aviso.falha { display: flex; align-items: center; gap: 12px; }
.aviso.falha > div { flex: 1 1 auto; min-width: 0; }
.aviso.falha button { flex: 0 0 auto; }

.painel-publicar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .painel-publicar { grid-template-columns: minmax(0, 1fr); } }
.painel-publicar .texto-copia { font-size: 13px; line-height: 1.7; width: 100%; }
.painel-publicar .grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
/* A arte e o que a pessoa vai olhar antes de postar: ocupa a coluna, nao uma
   miniatura de canto. */
.painel-publicar .card-midia .mini { height: 230px; }
/* Arquivo que nao abre nao e um quadrado cinza: diz a causa e oferece saida
   (baixar mesmo assim, ou substituir), que ficam na legenda do cartao. */
.painel-publicar .card-midia .mini.quebrada {
  display: grid; place-items: center; align-content: center; gap: 4px; text-align: center;
  padding: 10px; font-size: 12px; color: var(--alerta);
  background: rgba(224, 52, 43, .06);
}
.painel-publicar .card-midia .mini.quebrada small { color: var(--apagado); font-weight: 400; }
.acoes-arte { display: flex; gap: 12px; }

/* A barra de confirmar gruda no rodape do painel. O passo 4 manda "volte aqui
   para confirmar" — e ate agora o botao de confirmar estava abaixo de onze
   itens de checklist, fora da tela de quem tinha acabado de ler o passo 4. */
.barra-confirmar {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 16px -16px -14px; padding: 12px 16px;
  background: var(--painel); border-top: 1px solid var(--linha);
  border-radius: 0 0 var(--raio) var(--raio);
  box-shadow: 0 -6px 18px rgba(17, 24, 39, .06);
}
.barra-confirmar-estado { color: var(--apagado); font-size: 12px; min-width: 0; }

/* ---- revisao e comentario ancorado ---- */
.revisao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 22px; align-items: start; }
@media (max-width: 900px) { .revisao { grid-template-columns: minmax(0, 1fr); } }

/* min-height segura os pinos no lugar mesmo se a arte nao carregar */
.arte { position: relative; display: inline-block; max-width: 100%; min-height: 80px; cursor: crosshair; }
.arte img { max-width: 100%; border-radius: var(--raio-m); display: block; background: var(--fundo-alto); }
.pino {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--destaque);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: help;
  box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(17, 24, 39, .3);
}

.legenda-linhas { margin: 0; padding-left: 22px; }
.legenda-linhas li { padding: 4px 8px; border-radius: 8px; cursor: pointer; }
.legenda-linhas li:hover { background: var(--painel-2); }

.comentario { border-left: 2px solid var(--linha-forte); padding: 8px 0 12px 12px; margin-bottom: 12px; font-size: 13px; }
.comentario.resolvido { opacity: .5; }
.comentario .onde { color: var(--apagado); font-size: 11px; }
.comentario button { margin-top: 8px; font-size: 12px; padding: 5px 10px; }

textarea { resize: vertical; font-family: inherit; }
td .mini { width: 48px; height: 48px; border-radius: 8px; }
.aviso {
  background: rgba(255, 90, 31, .08);
  border: 1px solid rgba(255, 90, 31, .22);
  border-radius: var(--raio-p);
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 16px;
  word-break: break-all;
}

/* ---- conexao de contas ---- */
.checagens { list-style: none; margin: 14px 0 0; padding: 0; font-size: 13px; }
.checagens li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linha); }
.checagens li:last-child { border-bottom: 0; }
.checagens .marca { width: 16px; flex: 0 0 auto; }
.checagens li.ok .marca { color: var(--ok); }
.checagens li.falta .marca { color: var(--alerta); }
.checagens li.falta small { color: var(--apagado); }

.opcao-conta {
  border: 1px solid var(--linha);
  background: var(--painel);
  border-radius: var(--raio-m);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.opcao-conta.com-problema { border-color: rgba(201, 138, 0, .4); background: rgba(201, 138, 0, .07); }

/* ---- funil comercial ---- */
/*
   O quadro e uma trilha horizontal unica. Nove etapas em grade de seis
   quebravam em duas linhas e destruiam a leitura do funil: a pessoa precisa
   ver o caminho do lead da esquerda para a direita, nao um mosaico.
   Coluna com largura fixa, sem wrap, rolagem so aqui dentro.
*/
.funil {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 12px;
  scroll-snap-type: x proximity;
}
/* A coluna e transparente de proposito: card dentro de card achata os
   cartoes e some com a hierarquia. O que separa as etapas e o filete sob o
   cabecalho, nao uma caixa. */
/* As colunas dividem a largura da tela: o funil inteiro cabe de uma vez, que
   e como ele se le — da esquerda para a direita, sem rolar. Abaixo de 1100px
   nao ha largura para isso sem virar tira de papel, e ai as colunas voltam a
   ter tamanho fixo e a faixa rola. */
.coluna-funil {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  scroll-snap-align: start;
}
@media (max-width: 1100px) {
  .coluna-funil { flex: 0 0 250px; }
}
.coluna-funil.alvo .lista-etapa { background: rgba(255, 90, 31, .06); border-radius: var(--raio-p); }
.coluna-funil.alvo .cabeca-coluna { border-bottom-color: var(--destaque); }

.cabeca-coluna {
  position: sticky;
  top: 0;
  z-index: 2;
  display: block;
  padding: 0 2px 8px;
  margin-bottom: 10px;
  border-bottom: 2px solid var(--linha);
  background: var(--fundo);
  /* Sentence case com acento: DIAGNOSTICO nao e o nome da etapa, e um grito
     sem til. */
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--texto);
}
/* Nome em uma linha so, com reticencia: coluna estreita nao pode empurrar o
   filete de uma etapa para uma altura diferente da vizinha. */
.cabeca-coluna strong {
  display: block;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cabeca-coluna .sub-coluna { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.cabeca-coluna .contagem { color: var(--apagado); font-size: 11.5px; white-space: nowrap; }
.cabeca-coluna .valor-etapa { margin-left: auto; color: var(--apagado); font-size: 11.5px; font-variant-numeric: tabular-nums; }

.lista-etapa { display: flex; flex-direction: column; gap: 8px; min-height: 8px; }
/* Etapa vazia nao ocupa a altura inteira: encolhe para um alvo de 64px que
   convida a soltar o cartao ali. */
.lista-etapa.vazia {
  min-height: 64px;
  font-size: 11.5px;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-p);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--apagado);
  font-size: 12px;
  text-align: center;
  padding: 8px;
}

.cartao-lead {
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: 10px;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.cartao-lead:hover { border-color: rgba(255, 90, 31, .45); transform: translateY(-1px); box-shadow: var(--sombra); }
.cartao-lead.arrastando { opacity: .45; transform: rotate(2deg); box-shadow: var(--sombra-alta); }

.linha-lead { display: flex; align-items: center; gap: 6px; }
.linha-lead .nome-lead { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Empresa e valor dividem a segunda linha: numa coluna de 145px eles nao
   cabem ao lado do nome, e empurrar o valor para uma linha so dele deixava o
   cartao cheio de ar. */
/* Nome na linha inteira, empresa e valor dividindo a de baixo. A ordem segue
   a prioridade de leitura do cartao: com quem eu falo, de onde ele e, quanto
   vale. O nome e o unico que nunca pode virar reticencia. */
.linha-empresa { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.empresa-lead {
  min-width: 0;
  color: var(--apagado);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.valor-lead { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; }

/* A bolinha de temperatura: quanto tempo faz que alguem falou com esse lead.
   Verde ate 3 dias, amarelo ate 7, vermelho depois. */
/* inline-block e nao so flex: a mesma bolinha aparece na celula da tabela da
   Lista, onde nao existe contexto flex para dar tamanho a ela. */
.temperatura {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--ok);
}
.temperatura.atencao { background: var(--aviso-cor); }
.temperatura.frio { background: var(--alerta); }

.pills-lead { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pill-servico, .pill-origem {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
/* O servico e colorido, a origem e neutra. Dois selos com o mesmo peso
   visual fazem a pessoa nao ler nenhum dos dois. */
.pill-servico { background: rgba(127, 119, 221, .14); color: #554fa6; }
.pill-origem { background: var(--fundo-alto); color: var(--apagado); }
.pill-quente { background: rgba(255, 90, 31, .14); color: #b8410f; font-size: 10px; padding: 3px 8px; border-radius: 999px; }

.rodape-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--linha);
  color: var(--apagado);
  font-size: 11.5px;
}
.rodape-lead .acao { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rodape-lead .acao.atrasada { color: var(--alerta); }
.rodape-lead .acao.ausente { color: var(--aviso-cor); }
.rodape-lead .dias { margin-left: auto; white-space: nowrap; }
.rodape-lead .dias.parado { color: var(--alerta); }

/* ---- filtros do funil ---- */
.filtros-funil {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.filtros-funil select, .filtros-funil input {
  width: auto;
  margin: 0;
  padding: 7px 10px;
  font-size: 12.5px;
  border-radius: var(--raio-p);
}
.filtros-funil input[type="search"] { min-width: 200px; }
.filtro-chip {
  border: 1px solid var(--linha);
  background: var(--painel);
  color: var(--apagado);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  width: auto;
  margin: 0;
}
.filtro-chip.ativo { border-color: var(--destaque); color: var(--destaque); background: rgba(255, 90, 31, .07); }

/* ---- barra de escopo do ciclo ---- */
/* Uma barra por tipo de entrega, mais o tracinho do dia em que o ciclo esta.
   Sem o marcador de tempo, "6 de 12" nao diz se e atraso ou se e dia 10. */
.escopo-barras { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.escopo-barra { position: relative; height: 6px; background: var(--fundo-alto); border-radius: 999px; overflow: hidden; }
.escopo-barra span { display: block; height: 100%; border-radius: 999px; background: var(--ok); }
.escopo-barra span.atrasado { background: var(--aviso-cor); }
.escopo-barra span.estourado { background: var(--alerta); }
.escopo-barra span.ocioso { background: var(--apagado); }
.escopo-barra span.extras { background: #378ADD; }
.marcador-ritmo {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--texto);
  opacity: .45;
}
.escopo-legenda { font-size: 11.5px; color: var(--apagado); margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ---- abas de status (contratos, extras) ---- */
.abas-status { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.abas-status button {
  width: auto;
  margin: 0;
  border: 1px solid var(--linha);
  background: var(--painel);
  color: var(--apagado);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 500;
}
.abas-status button.ativa { border-color: var(--destaque); color: var(--destaque); background: rgba(255, 90, 31, .07); }
.abas-status button .contagem { opacity: .7; margin-left: 4px; }

/* ---- metricas do topo ---- */
.metricas { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 18px; }
.metrica .rotulo { font-size: 12px; color: var(--apagado); }
.metrica .numero { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.metrica .delta { font-size: 12px; }
.metrica .delta.sobe { color: var(--ok); }
.metrica .delta.desce { color: var(--alerta); }

/* Dinheiro em tabela: numeral tabular e alinhado a direita, senao a coluna
   nao da para comparar de relance. */
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }

.alerta-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--linha);
  border-left: 3px solid var(--destaque);
  background: var(--painel);
  border-radius: 0 10px 10px 0;
  margin-bottom: 9px;
  font-size: 13px;
}
.alerta-linha.contrato_vencido, .alerta-linha.escopo_em_risco { border-left-color: var(--alerta); background: rgba(224, 52, 43, .06); }
.alerta-linha.extra_escopo, .alerta-linha.extra_pendente { border-left-color: var(--ok); background: rgba(18, 160, 110, .06); }
.alerta-linha.sem_assinatura, .alerta-linha.escopo_atrasado { border-left-color: var(--aviso-cor); background: rgba(201, 138, 0, .06); }
.alerta-linha .corpo-alerta { flex: 1 1 auto; min-width: 0; }
.alerta-linha .corpo-alerta .dica { max-width: none; }
.alerta-linha > button { flex: 0 0 auto; font-size: 12px; padding: 6px 12px; }
@media (max-width: 700px) { .alerta-linha { flex-wrap: wrap; } }

.barra-consumo { width: 90px; height: 6px; background: var(--fundo-alto); border-radius: 999px; overflow: hidden; display: inline-block; vertical-align: middle; }
.barra-consumo span { display: block; height: 100%; background: linear-gradient(90deg, var(--destaque-2), var(--destaque)); border-radius: 999px; }

/* ---- seletor de periodo (7 / 15 / 30 dias / datas) ---- */
/* Um controle, quatro opcoes, a escolhida marcada. Vive na barra do titulo
   porque e ali que se pergunta "de que periodo estamos falando". */
.segmentado { display: inline-flex; background: var(--fundo-alto); border: 1px solid var(--linha); border-radius: 999px; padding: 3px; gap: 2px; }
.segmentado button {
  width: auto;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--apagado);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1px;
  padding: 6px 13px;
  border-radius: 999px;
  box-shadow: none;
  white-space: nowrap;
}
.segmentado button:hover { color: var(--texto); background: rgba(17, 24, 39, .05); }
.segmentado button.ativo { background: var(--painel); color: var(--texto); box-shadow: 0 1px 3px rgba(17, 24, 39, .12); }
@media (max-width: 700px) { .segmentado { width: 100%; justify-content: space-between; } }

/* ---- pe de cartao: o dado secundario e a saida ---- */
/* Era uma tabela de cinco linhas so para dizer "1 pausado". Virou uma linha. */
.pe-do-cartao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
}
.pe-do-cartao button { width: auto; margin: 0; font-size: 12px; padding: 6px 12px; }

/* A contagem ao lado do titulo da secao, em vez de "(10)" dentro dele. */
.conta-secao {
  display: inline-block;
  vertical-align: 3px;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--apagado);
  background: var(--fundo-alto);
  border-radius: 999px;
  padding: 2px 9px;
}

/* ---- marcas do alerta: de quem depende e ha quanto tempo ---- */
/* Sao os dois dados que fazem o alerta mudar comportamento. Ficam pequenos
   porque a frase e que manda; ficam coloridos porque "trava com o cliente" e
   uma cobranca e "trava com voce" e trabalho seu. */
.marcas-alerta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chip-trava, .chip-tempo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--linha);
  color: var(--apagado);
  background: var(--painel-2);
  white-space: nowrap;
}
.chip-trava.voce { color: #8a4a00; border-color: rgba(201, 138, 0, .35); background: rgba(201, 138, 0, .1); }
.chip-trava.cliente { color: #0b5cab; border-color: rgba(11, 92, 171, .3); background: rgba(11, 92, 171, .09); }
.chip-trava.equipe { color: #0d7a54; border-color: rgba(18, 160, 110, .32); background: rgba(18, 160, 110, .1); }
.chip-trava.sistema { color: var(--apagado); }
/* Uma semana parado deixa de ser detalhe. */
.chip-tempo.velho { color: #a3211a; border-color: rgba(224, 52, 43, .35); background: rgba(224, 52, 43, .08); }

/* ---- dinheiro em risco: tres blocos lado a lado ---- */
.riscos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.bloco-risco {
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  padding: 14px;
  background: var(--painel-2);
  min-width: 0;
}
.cabeca-risco { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.cabeca-risco .rotulo { color: var(--apagado); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; font-weight: 600; }
.cabeca-risco strong { font-size: 21px; font-weight: 700; letter-spacing: -.6px; }
.lista-risco { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-risco li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  font-size: 13px;
  min-width: 0;
}
.lista-risco li > span:first-child { font-weight: 600; }

/* ---- indicadores e relatorio ---- */
/* A grade fecha a ultima linha em vez de deixar um cartao orfao: 6 itens
   viram 3x2, 4 viram 2x2. :has le a contagem sem precisar do JS. */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.indicadores:has(> .indicador:nth-child(6):last-child),
.indicadores:has(> .indicador:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.indicadores:has(> .indicador:nth-child(4):last-child),
.indicadores:has(> .indicador:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .indicadores, .indicadores:has(> .indicador:nth-child(6):last-child),
  .indicadores:has(> .indicador:nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .indicadores, .indicadores:has(> .indicador) { grid-template-columns: minmax(0, 1fr); }
}
.indicador {
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--sombra);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.indicador:hover { border-color: var(--linha-forte); transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.indicador .rotulo { color: var(--apagado); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; font-weight: 600; }
.indicador strong { font-size: 23px; font-weight: 700; letter-spacing: -.7px; line-height: 1.25; }
.indicador .rodape { color: var(--apagado); font-size: 12px; line-height: 1.4; }

.relatorio {
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 32px 36px;
  box-shadow: var(--sombra);
}
.relatorio .capa { border-bottom: 1px solid var(--linha); padding-bottom: 20px; margin-bottom: 24px; }
.relatorio .capa h1 { margin: 4px 0; font-size: 30px; }
.relatorio section { margin-bottom: 28px; }
.relatorio .leitura {
  white-space: pre-wrap;
  line-height: 1.75;
  background: var(--painel-2);
  border-left: 3px solid var(--destaque);
  padding: 14px 16px;
  border-radius: 0 10px 10px 0;
}

/* ---- lateral em janela baixa ----
   A lista nao rola, entao ela precisa encolher junto com a janela. Cada faixa
   aperta um pouco mais; abaixo de 620px de altura nem apertando cabe, e ai a
   rolagem volta — item escondido sem rolagem e item inalcancavel. */
@media (max-height: 820px) {
  nav.menu button { min-height: 30px; font-size: 13px; }
  .lateral .logo { max-height: 28px; }
}
@media (max-height: 720px) {
  aside.lateral { padding: 12px 12px 10px; gap: 6px; }
  .lateral .topo-marca { padding: 2px 10px 6px; }
  .lateral .logo { max-height: 24px; }
  nav.menu { gap: 1px; }
  nav.menu button { min-height: 26px; font-size: 12.5px; gap: 9px; padding: 0 10px; }
  nav.menu button svg { width: 16px; height: 16px; }
  .lateral .rodape-lateral { padding-top: 8px; gap: 4px; }
  .lateral .rodape-lateral button { padding: 6px 12px; }
  .avatar { width: 28px; height: 28px; }
}
@media (max-height: 620px) {
  nav.menu { overflow-y: auto; }
  nav.menu button { flex: 0 0 auto; min-height: 30px; }
}

/* ---- responsivo: a lateral vira gaveta ---- */
@media (max-width: 1100px) {
  :root { --lateral: 0px; }
  aside.lateral {
    width: 250px;
    transform: translateX(-100%);
    transition: transform .22s ease;
  }
  body.menu-aberto aside.lateral { transform: translateX(0); }
  body.menu-aberto::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .35);
    z-index: 35;
  }
  button.abrir-menu { display: grid; }
  header.barra-cima { margin-left: 0; padding: 14px 20px; }
  body.com-lateral main { margin-left: 0; }
  main { padding: 20px 20px 48px; }
}

@media (max-width: 640px) {
  .barra h2 { font-size: 22px; }
  .cartao { padding: 18px; border-radius: var(--raio-m); }
  dialog { min-width: 0; width: calc(100vw - 32px); }
  .barra-cima .busca { max-width: none; }
  main { padding: 16px 14px 44px; }
  .barra-cima .direita .avatar { display: none; }
}

/* Salvar como PDF = imprimir. Sem os controles da tela. */
@media print {
  header.topo, header.barra-cima, aside.lateral, .nao-imprimir, .barra { display: none !important; }
  body::before { display: none; }
  body, .relatorio { background: #fff; color: #111; border: 0; }
  body.com-lateral main { margin-left: 0; }
  .relatorio { box-shadow: none; }
  .relatorio .leitura { background: #f5f5f5; color: #111; }
  .indicador { background: #f7f7f7; border-color: #ddd; color: #111; box-shadow: none; }
  .dica, .indicador .rotulo, .indicador .rodape { color: #555; }
  th, td, .relatorio section, .relatorio strong { color: #111; border-color: #ddd; }
  th { color: #555; }
  main { max-width: none; padding: 0; }
}

/* ---------- lista de clientes (spec Clientes) ----------
   As colunas novas precisam caber sem espremer o nome do cliente. O escopo e
   a saude viram sinais graficos justamente para nao virarem mais texto. */
.barra-filtros select { max-width: 190px; }
.caixinha { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--apagado); }
.caixinha input { width: auto; margin: 0; }

.tabela-clientes td { vertical-align: middle; }
.cliente-celula { display: flex; align-items: center; gap: 10px; }
/* O nome do cliente e a ancora da linha: quebrar em duas linhas atrapalha a
   varredura vertical, que e para o que a lista serve. Mas ele tambem nao pode
   empurrar a tabela para fora da tela — nome longo trunca com reticencias, e
   o titulo mostra o nome inteiro. */
.cliente-celula .duas-linhas { min-width: 0; }
.cliente-celula .duas-linhas > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}
.duas-linhas { display: flex; flex-direction: column; line-height: 1.3; }
.micro { font-size: 11px; color: var(--apagado); }
.fraco { color: var(--apagado); }

/* Cadastro pela metade nao pode sair como travessao mudo (CLI-D03). */
.alerta-fraco {
  display: inline-block;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  color: #96690a;
  background: rgba(201, 138, 0, .12);
  border: 1px solid rgba(201, 138, 0, .3);
  border-radius: 999px;
  padding: 3px 8px;
}

.avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 8px;
  background: var(--fundo-alto);
  color: var(--texto);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
}

/* A barra de escopo com marcador de ritmo. O tracinho e onde a entrega
   deveria estar hoje — sem ele a porcentagem nao diz se esta atrasado. */
.escopo { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.escopo-trilho {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--fundo-alto);
  overflow: visible;
}
.escopo-feito { height: 6px; border-radius: 999px; background: var(--ok); }
.escopo-feito.atrasado { background: var(--aviso-cor); }
.escopo-feito.estourado { background: var(--alerta); }
.escopo-ritmo {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  background: var(--linha-forte);
  border-radius: 2px;
}
.escopo-texto { font-size: 11px; color: var(--apagado); white-space: nowrap; }

.selo.saude-bem { color: #0b7a54; border-color: rgba(18, 160, 110, .3); background: rgba(18, 160, 110, .1); }
.selo.saude-atencao { color: #96690a; border-color: rgba(201, 138, 0, .32); background: rgba(201, 138, 0, .12); }
.selo.saude-risco, .selo.perigo { color: #b3241c; border-color: rgba(224, 52, 43, .3); background: rgba(224, 52, 43, .1); }
.selo.prospect { color: #4b5563; border-color: var(--linha-forte); background: var(--fundo-alto); }
.selo.onboarding { color: #1d4ed8; border-color: rgba(29, 78, 216, .28); background: rgba(29, 78, 216, .1); }

/* Acao por linha sem abrir a ficha. Aparece no hover para nao poluir a
   varredura, e fica sempre visivel no toque, onde nao existe hover. */
/* A coluna de acoes nao pode ser comprimida: com `table-layout: auto` o
   navegador espremia esta celula e o rotulo do botao saia cortado
   ("Comple..."). `width: 1%` com nowrap faz a coluna pedir exatamente o que
   precisa e o resto da largura ir para as colunas de dados. */
.acoes-linha { text-align: right; white-space: nowrap; width: 1%; }
/* Nome proprio de proposito: `.mini` ja era a miniatura de midia do acervo
   (`td .mini` tem 48x48), e um botao com nome de foto nascia com 48px de
   largura e o rotulo cortado. */
.acoes-linha .botao-linha { opacity: 0; transition: opacity .12s; margin-left: 4px; }
tr:hover .acoes-linha .botao-linha, .acoes-linha .botao-linha:focus-visible { opacity: 1; }
@media (hover: none) { .acoes-linha .botao-linha { opacity: 1; } }
.botao-linha {
  font-size: 11px;
  padding: 4px 9px;
  white-space: nowrap;
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--painel-2);
  color: var(--texto);
  border: 1px solid var(--linha);
  box-shadow: none;
}
.botao-linha.alerta { color: #96690a; border-color: rgba(201, 138, 0, .3); background: rgba(201, 138, 0, .1); }

/* Estado vazio com proximo passo, nao so uma frase (CLI-D09 e ONB-D03). */
.vazio-desenhado {
  text-align: center;
  padding: 48px 24px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
}
.vazio-desenhado h3 { margin: 0 0 6px; }
.vazio-desenhado p { margin: 0 auto 18px; color: var(--apagado); max-width: 460px; }
.vazio-acoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- onboarding (spec Onboarding) ----------
   Lista em linha para dar para comparar clientes; o cartao empilhado de antes
   escondia quem estava parado ha mais tempo. */
.tabela-onboarding td { vertical-align: middle; }
.onb-item .empurra { margin-left: auto; }
.onb-descartado { opacity: .5; }
.prazo-estourado { font-size: 11px; font-weight: 600; color: #b3241c; }

/* Editor de modelos de onboarding (Administracao). */
.modelo-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.modelo-item:last-child { border-bottom: 0; }
.modelo-item .titulo { flex: 1; }
.modelo-item input[type="number"] { width: 64px; }

/* ---------- datas comemorativas (spec Datas) ----------
   A faixa e fina e fica no topo do dia: e contexto para o que se planeja
   naquele dia, nao mais um item agendado disputando espaco com os posts. */
.faixa-data {
  font-size: 10px;
  line-height: 1.4;
  padding: 1px 5px;
  margin: -2px -2px 3px;
  border-radius: 4px 4px 0 0;
  border-top: 3px solid var(--linha-forte);
  background: var(--fundo-alto);
  color: var(--apagado);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.faixa-data.alta { border-top-color: #b3241c; color: #b3241c; background: rgba(224, 52, 43, .07); }
.faixa-data.media { border-top-color: #96690a; color: #96690a; background: rgba(201, 138, 0, .07); }
.faixa-data.baixa { border-top-color: var(--linha-forte); }

/* O mes e uma linha separadora dentro da mesma tabela. Uma tabela por mes
   fazia doze cabecalhos iguais competirem com o conteudo. */
.linha-mes td {
  padding: 12px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--apagado);
  background: var(--painel-2);
}

.nome-modelo { font-size: 15px; }

.ponto-relevancia {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--linha-forte);
}
.ponto-relevancia.alta { background: #e0342b; }
.ponto-relevancia.media { background: #c98a00; }

.lead-dias { width: 56px; }

/* Distribuicao da carteira: barra empilhada, nao rosca — a proporcao entre
   as tres faixas le-se mais rapido em linha. */
.distribuicao { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--fundo-alto); }
.distribuicao .parte.bem { background: var(--ok); }
.distribuicao .parte.atencao { background: var(--aviso-cor); }
.distribuicao .parte.risco { background: var(--alerta); }
.distribuicao .parte.sem { background: var(--linha-forte); }

/* ---------- projetos (spec Projetos) ---------- */

/* Abas por tipo, no lugar das seis sanfonas. O numerinho e o que da motivo
   para clicar: aba com zero nao precisa ser aberta para se descobrir vazia. */
.abas-tipo { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.abas-tipo button small {
  margin-left: 6px;
  opacity: .7;
  font-weight: 600;
}

/* O stepper de etapas. Sem estilo proprio, cada passo herdava o botao
   primario e a barra inteira saia laranja — o que, alem de feio, codifica
   estado na cor da marca, que e justamente o que o sistema de design proibe.
   Aqui a cor diz uma coisa so: onde o projeto esta. */
.stepper {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.stepper .passo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--painel);
  border: 1px solid var(--linha);
  color: var(--apagado);
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
}
.stepper .passo .bolinha {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fundo-alto);
  font-size: 10px;
  font-weight: 700;
}
.stepper .passo.feita { color: #0b7a54; border-color: rgba(18, 160, 110, .3); }
.stepper .passo.feita .bolinha { background: rgba(18, 160, 110, .15); color: #0b7a54; }
.stepper .passo.atual {
  color: var(--texto);
  font-weight: 600;
  border-color: var(--linha-forte);
  background: var(--painel-2);
}
.stepper .passo.atual .bolinha { background: var(--texto); color: var(--painel); }
.stepper .passo.atual.perigo { color: #b3241c; border-color: rgba(224, 52, 43, .35); background: rgba(224, 52, 43, .08); }
.stepper .passo.atual.perigo .bolinha { background: #b3241c; color: #fff; }
.stepper .passo:hover { border-color: var(--linha-forte); }

/* A ficha usa h2 como titulo de bloco, nao de pagina. */
.linha-info { display: flex; gap: 28px; flex-wrap: wrap; }
.cartao > h2, .cartao .barra h2 { font-size: 15px; }
.tabela-projetos td { vertical-align: middle; }

/* Vazio dentro de tabela: uma linha curta que diz o que e, e a frase que
   explica para que serve. Descrever a funcionalidade sem oferecer o proximo
   passo e o vazio que nao ajuda ninguem. */
.vazio-tabela { text-align: center; padding: 26px 16px; color: var(--apagado); }
.vazio-tabela strong { color: var(--texto); display: inline-block; margin-bottom: 4px; }

/* ---- ocupacao da equipe (spec Equipe) ---- */
/* Laranja e a cor de acao da marca: botao principal, nada mais. Ocupacao e
   estado, e estado pede a escala que todo mundo ja le sem legenda — neutro
   quando sobra, verde quando esta bom, amarelo quando enche, vermelho quando
   passou. A barra de consumo antiga usava o degrade laranja para tudo, o que
   pintava "sobrecarregado" com a mesma cor de "salvar". */
.ocupacao { width: 92px; height: 6px; background: var(--fundo-alto); border-radius: 999px; overflow: hidden; display: inline-block; vertical-align: middle; }
.ocupacao > span { display: block; height: 100%; border-radius: 999px; background: var(--apagado); }
.ocupacao.faixa-ocioso > span { background: var(--apagado); }
.ocupacao.faixa-saudavel > span { background: var(--ok); }
.ocupacao.faixa-cheio > span { background: var(--aviso-cor); }
.ocupacao.faixa-sobrecarregado > span { background: var(--alerta); }
.ocupacao-num { margin-left: 8px; color: var(--apagado); }
.faixa-texto-cheio { color: var(--aviso-cor); }
.faixa-texto-sobrecarregado { color: var(--alerta); font-weight: 600; }
/* Margem negativa e margem magra tem a mesma leitura: pare e olhe. */
td.ruim { color: var(--alerta); font-weight: 600; }