/* Identidade inspirada no Slack: barra lateral berinjela, conteúdo claro, tipografia pesada nos títulos
   e as quatro cores de destaque (verde, azul, amarelo, vermelho) marcando os status. */
:root {
  --berinjela: #4a154b;
  --lateral: #3f0e40;
  --lateral-hover: #350d36;
  --lateral-texto: rgb(255 255 255 / 0.72);
  --lateral-texto-forte: #ffffff;
  --lateral-ativo: #1164a3;
  --lateral-borda: rgb(255 255 255 / 0.12);

  --fundo: #ffffff;
  --fundo-2: #f8f8f8;
  --coluna: #f4f4f4;
  --superficie: #ffffff;
  --texto: #1d1c1d;
  --sutil: #616061;
  --borda: #dddddd;
  --borda-forte: rgb(29 28 29 / 0.3);
  --primaria: #007a5a;
  --primaria-hover: #148567;
  --primaria-texto: #ffffff;
  --link: #1264a3;
  --foco: rgb(29 155 209 / 0.3);
  --perigo: #e01e5a;

  --verde: #2eb67d;
  --azul: #36c5f0;
  --amarelo: #ecb22e;
  --vermelho: #e01e5a;

  --urgente-fundo: rgb(224 30 90 / 0.1);
  --urgente-texto: #c01343;
  --alta-fundo: rgb(236 178 46 / 0.22);
  --alta-texto: #7c5200;
  --baixa-fundo: #efefef;
  --baixa-texto: #616061;
  --agente-fundo: rgb(74 21 75 / 0.1);
  --agente-texto: #4a154b;
  --atrasado: #e01e5a;
  --hoje-fundo: rgb(236 178 46 / 0.22);
  --hoje-texto: #7c5200;
  --mencao-fundo: rgb(29 155 209 / 0.1);
  --mencao-texto: #1264a3;

  --st-pedido: #868686;
  --st-em_desenvolvimento: #ecb22e;
  --st-aguardando_validacao: #36c5f0;
  --st-em_producao: #2eb67d;

  /* gráficos: paleta validada para daltonismo (azul x laranja) */
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --grade: #ebebeb;

  --sombra: 0 1px 3px rgb(0 0 0 / 0.08);
  --sombra-alta: 0 4px 12px rgb(0 0 0 / 0.12);
  --raio: 8px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --lateral: #19171d;
    --lateral-hover: #27242c;
    --lateral-borda: rgb(255 255 255 / 0.08);

    --fundo: #1a1d21;
    --fundo-2: #222529;
    --coluna: #1f2226;
    --superficie: #222529;
    --texto: #d1d2d3;
    --sutil: #ababad;
    --borda: #393b3f;
    --borda-forte: rgb(209 210 211 / 0.3);
    --link: #1d9bd1;

    --urgente-fundo: rgb(224 30 90 / 0.2);
    --urgente-texto: #ff7aa2;
    --alta-fundo: rgb(236 178 46 / 0.18);
    --alta-texto: #f2c75c;
    --baixa-fundo: #2c2f33;
    --baixa-texto: #ababad;
    --agente-fundo: rgb(205 160 207 / 0.16);
    --agente-texto: #e2b9e3;
    --atrasado: #ff5c8a;
    --hoje-fundo: rgb(236 178 46 / 0.18);
    --hoje-texto: #f2c75c;
    --mencao-fundo: rgb(29 155 209 / 0.2);
    --mencao-texto: #5ec2ef;

    --serie-1: #3987e5;
    --serie-2: #d95926;
    --grade: #2c2f33;

    --sombra: 0 1px 3px rgb(0 0 0 / 0.4);
    --sombra-alta: 0 4px 16px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}
:root[data-tema="escuro"] {
  --lateral: #19171d;
  --lateral-hover: #27242c;
  --lateral-borda: rgb(255 255 255 / 0.08);

  --fundo: #1a1d21;
  --fundo-2: #222529;
  --coluna: #1f2226;
  --superficie: #222529;
  --texto: #d1d2d3;
  --sutil: #ababad;
  --borda: #393b3f;
  --borda-forte: rgb(209 210 211 / 0.3);
  --link: #1d9bd1;

  --urgente-fundo: rgb(224 30 90 / 0.2);
  --urgente-texto: #ff7aa2;
  --alta-fundo: rgb(236 178 46 / 0.18);
  --alta-texto: #f2c75c;
  --baixa-fundo: #2c2f33;
  --baixa-texto: #ababad;
  --agente-fundo: rgb(205 160 207 / 0.16);
  --agente-texto: #e2b9e3;
  --atrasado: #ff5c8a;
  --hoje-fundo: rgb(236 178 46 / 0.18);
  --hoje-texto: #f2c75c;
  --mencao-fundo: rgb(29 155 209 / 0.2);
  --mencao-texto: #5ec2ef;

  --serie-1: #3987e5;
  --serie-2: #d95926;
  --grade: #2c2f33;

  --sombra: 0 1px 3px rgb(0 0 0 / 0.4);
  --sombra-alta: 0 4px 16px rgb(0 0 0 / 0.5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 15px/1.46668 "Lato", "Slack-Lato", "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.25; }
a { color: var(--link); }
.sutil { color: var(--sutil); }
.erro { color: var(--perigo); min-height: 1.2em; margin: 0; font-size: 14px; }
svg { flex: none; }

/* ---------- controles ---------- */
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--fundo);
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--link);
  box-shadow: 0 0 0 1px var(--link), 0 0 0 5px var(--foco);
}
button:focus-visible, a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--link), 0 0 0 5px var(--foco);
}
label { display: grid; gap: 6px; font-weight: 700; font-size: 15px; }

button {
  padding: 0 14px;
  min-height: 36px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--fundo);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.08s, box-shadow 0.08s;
}
button:hover { background: var(--fundo-2); box-shadow: var(--sombra); }
button.primario { background: var(--primaria); border-color: var(--primaria); color: var(--primaria-texto); }
button.primario:hover { background: var(--primaria-hover); }
button.link {
  min-height: 0;
  border: 0;
  background: none;
  padding: 2px 4px;
  color: var(--link);
  font-weight: 400;
  box-shadow: none;
}
button.link:hover { text-decoration: underline; background: none; }
button.link.perigo { color: var(--perigo); }
button:disabled { opacity: 0.6; cursor: default; }

/* ---------- login ---------- */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--berinjela);
}
.login-caixa {
  width: min(420px, 100%);
  display: grid;
  gap: 16px;
  padding: 36px 32px;
  background: var(--fundo);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.35);
}
.login-caixa h1 { font-size: 28px; font-weight: 900; letter-spacing: -0.01em; }
.login-caixa p { margin: 0; }
.login-caixa button { min-height: 44px; font-size: 17px; }

/* ---------- estrutura: lateral + principal ---------- */
.app {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
}
.principal { display: flex; flex-direction: column; min-width: 0; overflow: auto; }
.principal > main { flex: 1; }

.lateral {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--lateral);
  color: var(--lateral-texto);
  border-right: 1px solid var(--lateral-borda);
}
.espaco {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 10px 16px;
  min-height: 56px;
  border-bottom: 1px solid var(--lateral-borda);
}
.espaco-nome { display: flex; align-items: center; gap: 10px; min-width: 0; }
.espaco-nome div strong { display: block; color: var(--lateral-texto-forte); font-size: 18px; font-weight: 900; line-height: 1.1; }
.espaco-nome div span { display: block; font-size: 13px; }
.espaco-logo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--berinjela);
  font-weight: 900;
  font-size: 17px;
}
.botao-novo {
  display: grid;
  place-items: center;
  width: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: var(--berinjela);
}
.botao-novo:hover { background: #f1e9f1; }
.botao-novo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.lateral-rolagem { flex: 1; overflow-y: auto; padding: 12px 0; }
.nav-lista { list-style: none; margin: 0; padding: 0 8px; display: grid; gap: 1px; }
.nav-lista button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--lateral-texto);
  font-weight: 400;
  font-size: 15px;
  text-align: left;
  box-shadow: none;
}
.nav-lista button:hover { background: var(--lateral-hover); color: var(--lateral-texto-forte); }
.nav-lista button[aria-pressed="true"],
.nav-lista button[aria-current="page"] { background: var(--lateral-ativo); color: #fff; font-weight: 700; }
.nav-lista svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.nav-lista svg circle { fill: currentColor; stroke: none; }
.nav-lista .cerquilha { width: 17px; text-align: center; opacity: 0.8; font-weight: 400; }
.nav-nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-contagem {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgb(255 255 255 / 0.14);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.nav-adicionar { opacity: 0.8; }

.secao-lateral { margin-top: 18px; }
.secao-lateral-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 4px 18px;
  font-size: 15px;
}
.icone-lateral {
  display: grid;
  place-items: center;
  width: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--lateral-texto);
  box-shadow: none;
}
.icone-lateral:hover { background: var(--lateral-hover); color: #fff; }
.icone-lateral svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.eu {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--lateral-borda);
}
.eu-info { flex: 1; min-width: 0; line-height: 1.2; }
.eu-info strong { display: block; color: var(--lateral-texto-forte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eu-info span { font-size: 13px; }
.sair {
  min-height: 28px;
  padding: 0 10px;
  border-color: var(--lateral-borda);
  background: none;
  color: var(--lateral-texto);
  font-size: 13px;
  box-shadow: none;
}
.sair:hover { background: var(--lateral-hover); color: #fff; }
.tema {
  display: grid;
  place-items: center;
  width: 30px;
  min-height: 28px;
  padding: 0;
  border-color: var(--lateral-borda);
  background: none;
  color: var(--lateral-texto);
  box-shadow: none;
}
.tema:hover { background: var(--lateral-hover); color: #fff; }
.tema svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* ---------- cabeçalho do conteúdo ---------- */
.cabecalho {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--borda);
  background: var(--fundo);
  position: sticky;
  top: 0;
  z-index: 2;
}
.cabecalho h1 { font-size: 18px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabecalho h1 .cerquilha { color: var(--sutil); font-weight: 400; }
.cabecalho-desc { color: var(--sutil); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu {
  display: none;
  place-items: center;
  align-self: center;
  width: 36px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.menu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* ---------- filtros ---------- */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--borda);
  background: var(--fundo);
}
.busca {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  max-width: 400px;
  font-weight: 400;
}
.busca svg { position: absolute; left: 10px; width: 16px; height: 16px; fill: none; stroke: var(--sutil); stroke-width: 1.8; stroke-linecap: round; }
.busca input { padding-left: 34px; min-height: 34px; background: var(--fundo-2); }
.filtros select {
  width: auto;
  max-width: 210px;
  min-height: 34px;
  padding: 4px 10px;
  border-radius: 18px;
  font-size: 14px;
  background: var(--fundo);
}
.check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 14px; white-space: nowrap; }
.check input { width: auto; accent-color: var(--primaria); }
.contagem-filtro { font-size: 13px; }

/* ---------- chips ---------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  background: var(--baixa-fundo);
  color: var(--sutil);
  white-space: nowrap;
}
.etiqueta.agente { background: var(--agente-fundo); color: var(--agente-texto); }
.etiqueta.area { font-family: ui-monospace, Menlo, monospace; font-weight: 500; }
.etiqueta.status {
  background: var(--fundo-2);
  color: var(--texto);
  border: 1px solid var(--borda);
}
.etiqueta.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-status);
}
.etiqueta.prio-urgente { background: var(--urgente-fundo); color: var(--urgente-texto); }
.etiqueta.prio-alta { background: var(--alta-fundo); color: var(--alta-texto); }
.etiqueta.prio-baixa { background: var(--baixa-fundo); color: var(--baixa-texto); font-weight: 400; }
.etiqueta.prazo { font-weight: 400; color: var(--sutil); background: transparent; padding: 1px 2px; }
.etiqueta.prazo.atrasado { background: var(--urgente-fundo); color: var(--atrasado); font-weight: 700; padding: 1px 7px; }
.etiqueta.prazo.hoje { background: var(--hoje-fundo); color: var(--hoje-texto); font-weight: 700; padding: 1px 7px; }
.etiqueta.projeto { background: transparent; border: 1px solid var(--borda); font-weight: 400; }
.etiqueta.projeto::before { content: "#"; color: var(--sutil); }
.etiqueta.tag { font-weight: 400; }

/* 8 tons para etiquetas livres; a cor sai do texto e o nome está sempre escrito */
.tag-0 { background: #e8f5fa; color: #0b5a7d; }
.tag-1 { background: #e5f6ee; color: #146344; }
.tag-2 { background: #fdf3dc; color: #7c5200; }
.tag-3 { background: #fce8ef; color: #9c1446; }
.tag-4 { background: #f2e9f2; color: #4a154b; }
.tag-5 { background: #e8eef8; color: #1d4b8f; }
.tag-6 { background: #fdece3; color: #8f3a0c; }
.tag-7 { background: #efefef; color: #454245; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tag-0 { background: #13313d; color: #8fd6f2; }
  :root:not([data-tema="claro"]) .tag-1 { background: #133227; color: #8bdbb7; }
  :root:not([data-tema="claro"]) .tag-2 { background: #3a3018; color: #f2cf79; }
  :root:not([data-tema="claro"]) .tag-3 { background: #3d1826; color: #f59bbb; }
  :root:not([data-tema="claro"]) .tag-4 { background: #33213a; color: #dcb6e0; }
  :root:not([data-tema="claro"]) .tag-5 { background: #1a2a42; color: #9fc0f2; }
  :root:not([data-tema="claro"]) .tag-6 { background: #3d2418; color: #f4b591; }
  :root:not([data-tema="claro"]) .tag-7 { background: #2c2f33; color: #c4c5c7; }
}
:root[data-tema="escuro"] .tag-0 { background: #13313d; color: #8fd6f2; }
:root[data-tema="escuro"] .tag-1 { background: #133227; color: #8bdbb7; }
:root[data-tema="escuro"] .tag-2 { background: #3a3018; color: #f2cf79; }
:root[data-tema="escuro"] .tag-3 { background: #3d1826; color: #f59bbb; }
:root[data-tema="escuro"] .tag-4 { background: #33213a; color: #dcb6e0; }
:root[data-tema="escuro"] .tag-5 { background: #1a2a42; color: #9fc0f2; }
:root[data-tema="escuro"] .tag-6 { background: #3d2418; color: #f4b591; }
:root[data-tema="escuro"] .tag-7 { background: #2c2f33; color: #c4c5c7; }

/* avatares quadrados arredondados, cor por pessoa */
.avatar {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 5px;
  background: var(--berinjela);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.avatar-grande { width: 36px; height: 36px; border-radius: 8px; font-size: 14px; }
.av-0 { background: #e01e5a; }
.av-1 { background: #1264a3; }
.av-2 { background: #007a5a; }
.av-3 { background: #9e6a03; }
.av-4 { background: #611f69; }
.av-5 { background: #0b7a8f; }

.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cor-status); margin-right: 6px; vertical-align: 0; }

.st-pedido { --cor-status: var(--st-pedido); }
.st-em_desenvolvimento { --cor-status: var(--st-em_desenvolvimento); }
.st-aguardando_validacao { --cor-status: var(--st-aguardando_validacao); }
.st-em_producao { --cor-status: var(--st-em_producao); }

/* ---------- quadro ---------- */
.quadro {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 12px;
  padding: 16px 20px;
  align-items: start;
  overflow-x: auto;
}
.coluna {
  background: var(--coluna);
  border-radius: 10px;
  padding: 10px;
  min-height: 140px;
}
.coluna.alvo { outline: 2px dashed var(--link); outline-offset: -2px; }
.coluna-topo { display: flex; align-items: center; gap: 8px; margin: 2px 4px 10px; }
.coluna-topo::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cor-status);
  flex: none;
}
.coluna-topo h2 { font-size: 15px; font-weight: 900; }
.coluna-topo .sub { font-size: 12px; color: var(--sutil); }
.coluna-topo .contagem {
  margin-left: auto;
  min-width: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  color: var(--sutil);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cartoes { display: grid; gap: 8px; }
.ordem { width: 100%; margin-bottom: 8px; min-height: 30px; padding: 3px 8px; font-size: 13px; border-radius: 6px; background: var(--fundo); }
.vazio { color: var(--sutil); font-size: 13px; text-align: center; padding: 18px 0; }

.cartao {
  display: grid;
  gap: 6px;
  width: 100%;
  min-height: 0;
  text-align: left;
  padding: 10px 12px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: none;
  font-weight: 400;
  font-size: 14px;
}
.cartao:hover { background: var(--superficie); border-color: var(--borda-forte); box-shadow: var(--sombra-alta); }
.cartao.prio-borda-urgente { border-left-color: var(--vermelho); }
.cartao.prio-borda-alta { border-left-color: var(--amarelo); }
.cartao.cartao-atrasado { box-shadow: inset 0 0 0 1px var(--atrasado); }
.cartao[draggable="true"] { cursor: grab; }
.cartao.arrastando { opacity: 0.4; }
.cartao-titulo { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; line-height: 1.35; }
.cartao-pai { font-size: 12px; color: var(--sutil); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-meta { display: flex; flex-wrap: wrap; gap: 5px 6px; align-items: center; font-size: 12px; color: var(--sutil); }
.cartao-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ---------- lista ---------- */
.lista { padding: 16px 20px; }
.tabela-rolagem { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th, .tabela td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela th { font-size: 13px; color: var(--sutil); white-space: nowrap; background: var(--fundo-2); position: sticky; top: 0; }
.tabela tbody tr[data-id] { cursor: pointer; }
.tabela tbody tr[data-id]:hover { background: var(--fundo-2); }
.tabela tr.linha-atrasada td:first-child { box-shadow: inset 3px 0 0 var(--atrasado); }
.tabela .num { font-variant-numeric: tabular-nums; text-align: right; }
.tabela th.num { text-align: right; }
.tabela .col-titulo { min-width: 280px; }
.tabela .col-titulo a { color: inherit; font-weight: 700; text-decoration: none; }
.tabela .col-titulo a:hover { color: var(--link); text-decoration: underline; }
.tabela .vazio { text-align: center; }
.tabela.compacta { font-size: 13px; }
.tabela.compacta th, .tabela.compacta td { padding: 6px 8px; }
.sub-linha { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
button.ordenar {
  min-height: 0;
  border: 0;
  background: none;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  color: inherit;
  box-shadow: none;
}
button.ordenar:hover { color: var(--texto); background: none; }

/* ---------- diálogos ---------- */
dialog {
  width: min(640px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--fundo);
  color: var(--texto);
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.3);
}
dialog.largo { width: min(860px, calc(100% - 32px)); }
dialog::backdrop { background: rgb(0 0 0 / 0.6); }
.dlg-topo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  background: var(--fundo);
  z-index: 1;
}
.dlg-topo h2 { font-size: 22px; font-weight: 900; flex: 1; overflow-wrap: anywhere; }
.fechar {
  display: grid;
  place-items: center;
  width: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--sutil);
  box-shadow: none;
}
.dlg-corpo { display: grid; gap: 16px; padding: 18px 24px; }
.dlg-rodape {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 24px 20px;
}
.grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.aviso-pai { margin: 0; padding: 8px 12px; border-radius: var(--raio); background: var(--fundo-2); color: var(--sutil); font-size: 14px; }

/* ---------- detalhe ---------- */
.det-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14px; color: var(--sutil); }
.link-pai { font-size: 14px; color: var(--link); text-decoration: none; }
.link-pai:hover { text-decoration: underline; }
.campo-inline { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 14px; }
.campo-inline select { width: auto; padding: 3px 8px; font-size: 14px; }
.secao h3 { font-size: 13px; font-weight: 700; color: var(--sutil); margin-bottom: 6px; }
.secao-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.secao-topo h3 { display: flex; gap: 8px; align-items: baseline; }
.secao-topo h3 .sutil { font-weight: 400; }
.texto-livre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--raio);
  background: var(--fundo-2);
}
.acoes .rotulo { font-size: 14px; color: var(--sutil); }
.acoes button { min-height: 30px; font-size: 14px; }
.caixa-retorno {
  padding: 14px;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--verde);
  display: grid;
  gap: 8px;
}
.caixa-retorno button { justify-self: start; }
.lista-sub { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lista-sub li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; padding: 4px 8px; border-radius: 6px; }
.lista-sub li:hover { background: var(--fundo-2); }
.lista-sub a { color: inherit; font-weight: 700; text-decoration: none; }
.lista-sub a:hover { color: var(--link); text-decoration: underline; }
.lista-sub .avatar { width: 20px; height: 20px; font-size: 9px; }
.vazio-sub { margin: 0; font-size: 14px; }
.botao-arquivo { cursor: pointer; font-size: 14px; font-weight: 400; color: var(--link); }
.botao-arquivo:hover { text-decoration: underline; }
.anexos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.anexo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.anexo img { width: 56px; height: 42px; object-fit: cover; border-radius: 4px; display: block; }
.anexo-icone {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: var(--fundo-2);
  font-size: 20px;
}
.anexo-info { display: grid; min-width: 0; flex: 1; font-size: 13px; line-height: 1.3; }
.anexo-info a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--link); font-weight: 700; text-decoration: none; }
.anexo-info a:hover { text-decoration: underline; }
.anexo .link { font-size: 12px; }
#secao-anexos.enviando { opacity: 0.6; }
#secao-anexos > p { margin: 0; font-size: 14px; }
dialog.soltar-arquivo { outline: 3px dashed var(--link); outline-offset: -8px; }

/* histórico: comentários como mensagens, o resto como linhas de sistema */
.linha-tempo { list-style: none; margin: 0 -10px; padding: 0; display: grid; }
.linha-tempo .quando { font-size: 12px; color: var(--sutil); font-weight: 400; }
.linha-tempo .msg {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
}
.linha-tempo .msg:hover { background: var(--fundo-2); }
.avatar-msg { width: 36px; height: 36px; border-radius: 8px; font-size: 13px; }
.msg-topo { display: flex; align-items: baseline; gap: 8px; }
.msg-topo strong { font-weight: 900; }
.linha-tempo .sistema {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 10px;
  font-size: 13px;
  color: var(--sutil);
}
.linha-tempo .sistema strong { color: var(--texto); font-weight: 700; }
.linha-tempo .sistema em { font-style: normal; color: var(--texto); }
.sistema-icone { width: 36px; flex: none; text-align: center; color: var(--sutil); font-weight: 700; }
.mencao { background: var(--mencao-fundo); color: var(--mencao-texto); border-radius: 3px; padding: 0 2px; font-weight: 400; }

.form-comentario {
  display: grid;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  overflow: hidden;
}
.form-comentario:focus-within { border-color: var(--link); box-shadow: 0 0 0 1px var(--link), 0 0 0 5px var(--foco); }
.form-comentario textarea { border: 0; border-radius: 0; box-shadow: none; padding: 10px 12px; }
.form-comentario textarea:focus { box-shadow: none; }
.form-comentario button {
  justify-self: end;
  margin: 0 8px 8px;
  min-height: 30px;
  background: var(--primaria);
  border-color: var(--primaria);
  color: #fff;
  font-size: 14px;
}
.form-comentario button:hover { background: var(--primaria-hover); }

/* sugestões de @menção (posicionadas via JS dentro do diálogo) */
.sugestoes {
  position: absolute;
  z-index: 10;
  list-style: none;
  margin: 0;
  padding: 6px;
  min-width: 240px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
}
.sugestoes li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 15px; }
.sugestoes li[aria-selected="true"] { background: var(--lateral-ativo); color: #fff; }
.sugestoes li:not([aria-selected="true"]):hover { background: var(--fundo-2); }

/* ---------- projetos ---------- */
.lista-projetos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-projetos li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lista-projetos li input { flex: 1 1 200px; width: auto; }
.lista-projetos li .sutil { font-size: 12px; }
.linha-form { display: flex; gap: 8px; }

/* ---------- métricas ---------- */
.metricas { padding: 16px 20px; display: grid; gap: 16px; align-content: start; }
.metricas-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.metricas-topo h2 { font-size: 18px; font-weight: 900; }
.metricas-topo select { width: auto; border-radius: 18px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tile {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
}
.tile-rotulo { font-size: 13px; color: var(--sutil); font-weight: 700; }
.tile-valor { font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.2; }
.tile-detalhe { font-size: 12px; color: var(--sutil); }
.tile.tile-alerta { border-color: var(--atrasado); box-shadow: inset 4px 0 0 var(--atrasado); }
.tile.tile-alerta .tile-rotulo::before { content: "⚠ "; color: var(--atrasado); }
.paineis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.painel {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 16px 18px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
  min-width: 0;
}
.painel h3 { font-size: 15px; font-weight: 900; }
.painel > p { margin: 0; font-size: 13px; }
.painel-largo { grid-column: 1 / -1; }
.grafico { width: 100%; max-width: 620px; height: auto; display: block; overflow: visible; }
.grafico .hit { fill: transparent; }
.grafico .alvo-dica:hover .hit, .grafico .alvo-dica:focus .hit { fill: var(--fundo-2); }
.grafico .alvo-dica:focus { outline: none; }
.g-serie-1 { fill: var(--serie-1); }
.g-serie-2 { fill: var(--serie-2); }
.g-rotulo { font-size: 13px; fill: var(--texto); }
.g-valor { font-size: 13px; fill: var(--texto); font-weight: 700; font-variant-numeric: tabular-nums; }
.g-eixo { font-size: 11px; fill: var(--sutil); font-variant-numeric: tabular-nums; }
.g-grade { stroke: var(--grade); stroke-width: 1; }
.g-base { stroke: var(--borda); stroke-width: 1; }
.legenda { display: flex; gap: 14px; font-size: 12px; color: var(--sutil); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.amostra { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.amostra.g-serie-1 { background: var(--serie-1); }
.amostra.g-serie-2 { background: var(--serie-2); }
.ver-tabela summary { cursor: pointer; font-size: 13px; color: var(--link); }
.ver-tabela table { margin-top: 6px; }
.vazio-grafico { padding: 24px 0; text-align: center; }
.col-barra { min-width: 180px; }
.celula-barra { display: flex; align-items: center; gap: 8px; }
.mini-barra { width: 120px; height: 10px; flex: none; }
.dica {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  max-width: 280px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #1d1c1d;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--sombra-alta);
}

/* ---------- telas menores: lateral vira gaveta ---------- */
.cortina { display: none; }
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(280px, 85vw);
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 0.18s ease;
  }
  .app.menu-aberto .lateral { transform: none; box-shadow: var(--sombra-alta); }
  .cortina { display: block; position: fixed; inset: 0; z-index: 25; background: rgb(0 0 0 / 0.45); }
  .menu { display: grid; }
  .cabecalho { padding: 10px 12px; }
  .cabecalho-desc { display: none; }
  .filtros, .lista, .metricas { padding-left: 12px; padding-right: 12px; }
  .quadro { padding: 12px; grid-template-columns: repeat(4, minmax(260px, 85vw)); }
  .paineis { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .filtros select { max-width: none; flex: 1 1 45%; }
  .busca { max-width: none; }
}