/* ============================================================
   Design System do Cockpit Méliuz — fonte única de tokens.
   Regras de uso: DESIGN.md na raiz do cockpit.
   Ao mudar QUALQUER valor aqui, bump do ?v= nos <link>/<script>
   dos HTMLs que consomem este arquivo (cache do Cloudflare).
   ============================================================ */

:root {
  /* --- Paleta base (nomes históricos do app, valores do DS) ---
     Neutros: menos azulados, mais tinta. Semânticas: a paleta autoral
     do bloco Vigia promovida a padrão — mesma luminância, dessaturadas.
     --accent é TINTA (slate), não cor de marca. --yellow = alias de laranja. */
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface2: #eff0f3;
  --surface3: #e7e9ee;
  --border: #e1e3e9;
  --border-light: #c9cdd6;
  --text: #16181f;
  --text-dim: #555c6b;
  --text-muted: #878e9c;
  --accent: #3e4757;
  --accent-light: #5b6478;
  --accent-bg: rgba(62, 71, 87, .07);
  --accent-border: rgba(62, 71, 87, .25);
  --red: #c2325f;
  --red-soft: #d4587e;
  --red-bg: rgba(194, 50, 95, .09);
  --red-border: rgba(194, 50, 95, .32);
  --orange: #a9711a;
  --orange-bg: rgba(169, 113, 26, .10);
  --orange-border: rgba(169, 113, 26, .32);
  --green: #1f7a52;
  --green-bg: rgba(31, 122, 82, .09);
  --green-border: rgba(31, 122, 82, .32);
  --blue: #33658a;
  --blue-bg: rgba(51, 101, 138, .09);
  --blue-border: rgba(51, 101, 138, .28);
  --yellow: var(--orange);
  --yellow-bg: var(--orange-bg);
  --cyan: #1f7a7a;
  --cyan-bg: rgba(31, 122, 122, .09);
  --pink: #d40a52;
  --pink-bg: rgba(255, 14, 99, .07);
  --purple: #6d5aa8;
  --purple-bg: rgba(109, 90, 168, .10);
  --purple-border: rgba(109, 90, 168, .32);
  /* Amarelo claro: o P3 da Operação BF. O --yellow é alias do laranja e não serve
     para separar P2 de P3 a olho. */
  --amber: #d4a90a;
  --amber-bg: rgba(242, 201, 76, .22);
  --amber-border: rgba(212, 169, 10, .45);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .04);
  --shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .08);
  --radius: 12px;
  --radius-sm: 8px;
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Identidade Méliuz (uso cirúrgico: logo, aba ativa, links, botão Entrar) --- */
  --brand: #ff0e63;
  --brand-strong: #d40a52;   /* versão para texto/hover — contraste AA em fundo claro */
  --brand-bg: rgba(255, 14, 99, .07);
  --brand-border: rgba(255, 14, 99, .28);
  --brand-soft: rgba(255, 14, 99, .12);   /* fundo rosado que se vê: a contagem da Operação BF */

  /* --- Lavagens neutras (herança do bloco Vigia): hierarquia por opacidade,
         funcionam em qualquer tema porque não fixam matiz --- */
  --wash-1: rgba(127, 127, 127, .06);
  --wash-2: rgba(127, 127, 127, .09);
  --wash-3: rgba(127, 127, 127, .16);

  /* --- Séries de gráfico categórico (pizza, barras empilhadas, linhas de várias séries).
         Paleta validada para daltonismo na ORDEM abaixo (ΔE OKLab ≥ 8 entre vizinhas, ≥ 15 em
         visão normal): série vizinha segue a ordem, nunca pula. Vermelho, verde e âmbar de status
         não entram aqui — status não se confunde com série. Nasceu na pizza de justificativas da
         Taxa de Confirmação (set/2026). --- */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-ausente: #a3a7b0;   /* a categoria "não informado" (ex.: sem justificativa) */
  --series-outros: #d5d8de;    /* o resto agrupado em "outros" */

  /* --- Foco único do app (substitui os focus rings copiados) --- */
  --focus-ring: 0 0 0 3px rgba(62, 71, 87, .15);

  /* --- Tipografia --- */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Instrument Sans', 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-2xs: 10px;   /* micro-labels uppercase */
  --fs-xs: 11px;    /* metadados, badges */
  --fs-sm: 12px;    /* texto secundário */
  --fs-md: 13px;    /* corpo padrão do app */
  --fs-base: 14px;  /* inputs, botões, corpo destacado */
  --fs-lg: 16px;    /* título de seção */
  --fs-xl: 19px;    /* h2, número médio */
  --fs-2xl: 24px;   /* h1, saudação */
  --fs-3xl: 28px;   /* número de KPI */

  --lh-tight: 1.25;
  --lh-base: 1.5;
  --ls-caps: .06em;    /* o ÚNICO letter-spacing de micro-label uppercase */
  --ls-tight: -.015em; /* headings em display */

  /* --- Espaçamento (base 4) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* --- Raio (escala fechada; --radius-sm e --radius já existem no app) --- */
  --radius-xs: 6px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* --- Movimento --- */
  --transition-fast: .12s ease;

  /* --- Medida do app ---
     Header, barras de navegação e conteúdo compartilham a MESMA coluna:
     o fundo e a borda seguem de ponta a ponta, o conteúdo alinha no centro.
     --gutter é a margem lateral que sobra; em telas estreitas vira o padding
     mínimo, então serve de container e de respiro ao mesmo tempo. */
  --content-max: 1680px;
  --gutter: max(32px, calc((100% - var(--content-max)) / 2));

  /* --- Medida de leitura ---
     A COLUNA é larga (1680px); a LINHA DE TEXTO não pode ser. --measure é a
     prosa corrida e --measure-lede é o parágrafo de abertura, um degrau acima
     de corpo e de largura. Em px, e não em ch, de propósito: assim blocos com
     tamanhos de fonte diferentes param no MESMO ponto à direita, em vez de
     deixar quatro margens quase iguais e a página serrilhada. */
  --measure: 680px;
  --measure-lede: 860px;
}

/* Pares escuros — ativos só em páginas que optam com <html data-theme="auto">
   (hoje: parceiros.html; o cockpit segue claro). Lavagens (--wash-*) e
   aliases (--yellow) são theme-agnostic e não precisam de par. */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bg: #101216;
    --surface: #181b21;
    --surface2: #1e2129;
    --surface3: #262a33;
    --border: #2a2e38;
    --border-light: #3a404c;
    --text: #e6e8ee;
    --text-dim: #a8afbc;
    --text-muted: #7c8391;
    --accent: #5d6b82;
    --accent-light: #6f7d94;
    --accent-bg: rgba(148, 160, 180, .12);
    --accent-border: rgba(148, 160, 180, .3);
    --red: #e0688d;
    --red-soft: #e88ba7;
    --red-bg: rgba(224, 104, 141, .12);
    --red-border: rgba(224, 104, 141, .3);
    --orange: #cf9a45;
    --orange-bg: rgba(207, 154, 69, .12);
    --orange-border: rgba(207, 154, 69, .3);
    --green: #4bae85;
    --green-bg: rgba(75, 174, 133, .12);
    --green-border: rgba(75, 174, 133, .3);
    --blue: #6f9fc4;
    --blue-bg: rgba(111, 159, 196, .12);
    --blue-border: rgba(111, 159, 196, .28);
    --cyan: #55a8a8;
    --cyan-bg: rgba(85, 168, 168, .12);
    --pink: #ff4d86;
    --pink-bg: rgba(255, 77, 134, .10);
    --purple: #9d8ccb;
    --purple-bg: rgba(157, 140, 203, .14);
    --purple-border: rgba(157, 140, 203, .32);
    --amber: #e8c547;
    --amber-bg: rgba(232, 197, 71, .14);
    --amber-border: rgba(232, 197, 71, .35);
    --brand-soft: rgba(255, 77, 134, .16);
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-ausente: #6b707b;
    --series-outros: #3a3f49;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
    --shadow: 0 2px 8px rgba(0, 0, 0, .35);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .45);
    --brand-strong: #ff4d86; /* em fundo escuro o rosa cheio vira o tom de texto */
    --focus-ring: 0 0 0 3px rgba(160, 170, 190, .2);
  }
}

/* ============================================================
   Componentes canônicos (prefixo ds-). Código novo usa estes;
   os legados são agrupados sobre estas receitas por fase (F6).
   ============================================================ */

.ds-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.ds-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}

.ds-section-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  color: var(--text);
}

.ds-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
}
.ds-kpi-value {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
  color: var(--text);
}
.ds-kpi-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-muted);
}
.ds-kpi--alert { border-color: var(--red-border); background: var(--red-bg); }

.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 var(--fs-sm)/1 var(--font-body);
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text-dim);
  cursor: pointer;
  transition: var(--transition-fast);
}
.ds-btn:hover { background: var(--wash-1); color: var(--text); }
.ds-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ds-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.ds-btn--primary:hover { background: var(--accent-light); color: #fff; }
.ds-btn--ghost { background: transparent; border-color: transparent; }
.ds-btn--danger { background: var(--red-bg); border-color: var(--red-border); color: var(--red); }

.ds-input {
  font: 400 var(--fs-base)/1.4 var(--font-body);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: var(--transition-fast);
}
.ds-input:focus { border-color: var(--accent-border); box-shadow: var(--focus-ring); }
.ds-input::placeholder { color: var(--text-muted); }

.ds-empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Status = dot colorido + label texto (substitui emoji de enum) */
.ds-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex: none;
  vertical-align: middle;
}

.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--wash-1);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-dim);
}

/* ============================================================
   Procedência — de quando é o dado e de onde ele veio.
   Uma tela que consulta banco carrega este bloco: hora da
   leitura (com SEGUNDO), fontes e até quando o dado vai.
   Volume baixo de propósito: é rodapé de confiança, não KPI.
   ============================================================ */
.ds-proc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-light);
  border-radius: var(--radius-xs);
  background: var(--wash-1);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}
.ds-proc-quando { color: var(--text-dim); }
.ds-proc-quando b { color: var(--text); font-weight: 600; }
.ds-proc-idade::before { content: " · "; }
.ds-proc-sem { color: var(--orange); }
.ds-proc-fontes b { color: var(--text-dim); font-weight: 600; }
.ds-proc-frescor { font-style: italic; }
.ds-proc-extra { color: var(--text-dim); }

/* ============================================================
   Modo de operar — "Como se trabalha esta aba".
   O combinado escrito: objetivo, ritmo, passos e limites. Vai no
   TOPO de toda aba de processo, ANTES de qualquer número, e nasce
   COLAPSADA: quem já conhece o combinado não rola por cima dele
   todo dia, e quem chega abre uma vez.
   Quem escreve é renderModusOperandi(elId, cfg) no cockpit.
   ============================================================ */
.ds-mo-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin-bottom: var(--sp-5); overflow: hidden;
}
.ds-mo-head { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-light); }
.ds-mo-section.collapsed .ds-mo-head { border-bottom: none; }
.ds-mo-title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--text); }
.ds-mo-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.ds-mo-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.ds-mo-objetivo {
  font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--text-dim);
  background: var(--wash-1); border-left: 3px solid var(--accent);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); margin-bottom: var(--sp-4);
}
.ds-mo-objetivo strong { color: var(--text); }
.ds-mo-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sp-5); }
.ds-mo-col-tit {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-weight: 700; color: var(--text-muted); margin-bottom: var(--sp-2);
}
.ds-mo-ritmo, .ds-mo-passos { margin: 0; padding-left: var(--sp-4); }
.ds-mo-ritmo li, .ds-mo-passos li {
  font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--text-dim); margin-bottom: var(--sp-3);
}
.ds-mo-ritmo li::marker, .ds-mo-passos li::marker { color: var(--text-muted); font-weight: 700; }
.ds-mo-quando {
  display: block; font-size: var(--fs-2xs); text-transform: uppercase;
  letter-spacing: var(--ls-caps); font-weight: 700; color: var(--accent); margin-bottom: 2px;
}
.ds-mo-passos strong, .ds-mo-ritmo strong { color: var(--text); }
.ds-mo-onde {
  display: block; margin-top: 3px; font-size: var(--fs-2xs);
  color: var(--text-muted); font-family: var(--font-mono);
}
.ds-mo-limites { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border-light); }
.ds-mo-limites ul { margin: 0; padding-left: var(--sp-4); }
.ds-mo-limites li { font-size: var(--fs-xs); line-height: var(--lh-base); color: var(--text-muted); margin-bottom: var(--sp-2); }
.ds-mo-limites strong { color: var(--text-dim); }
@media (max-width: 900px) { .ds-mo-cols { grid-template-columns: 1fr; } }

/* ============================================================
   Humano responsável — quem se aciona quando esta tela acende.
   Fica no cabeçalho da aba, à direita do título, e vale para
   TODO MUNDO que abre a tela (não só para quem administra acesso).
   Uma pessoa por aba, sempre: dois donos é o mesmo que nenhum.
   A foto é opcional — sem ela entra o monograma, que nunca quebra.
   Quem escreve é donoNoTopo(tabId) no cockpit.
   ============================================================ */
.ds-dono {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-left: auto; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); flex: none; max-width: 300px;
}
.ds-dono-foto, .ds-dono-mono {
  width: 38px; height: 38px; border-radius: var(--radius-full); flex: none;
  object-fit: cover; background: var(--surface3);
}
.ds-dono-mono {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700;
  color: var(--text-dim); letter-spacing: 0;
}
.ds-dono-txt { display: flex; flex-direction: column; min-width: 0; }
.ds-dono-rot {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-weight: 700; color: var(--text-muted);
}
.ds-dono-nome {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-dono-mail {
  font-size: var(--fs-2xs); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-dono-mail:hover { color: var(--brand-strong); }
/* O Slack é onde a pessoa é acionada de verdade — por isso ganha ícone e a
   tinta de link, enquanto o e-mail fica em volume de legenda. */
.ds-dono-slack {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
  font-size: var(--fs-2xs); font-weight: 600; color: var(--brand-strong);
  text-decoration: none;
}
.ds-dono-slack:hover { text-decoration: underline; }
/* Sem dono definido a aba DIZ que não tem — silêncio aqui vira
   "pergunte a qualquer um", que é o estado que este bloco combate. */
.ds-dono-sem .ds-dono-nome { color: var(--orange); font-weight: 500; }
@media (max-width: 700px) { .ds-dono { display: none; } }

/* ============================================================
   AJUDA DA ABA — "O que esta aba responde", logo abaixo do título.
   O texto vem de abas/<data-tab>.md, LIDO em tempo de execução. Fonte única de
   propósito: uma ajuda escrita aqui dentro seria uma segunda descrição da mesma
   tela, e duas descrições divergem em silêncio.
   Faixa PRÓPRIA, fora de .area-header e de .exec-greeting: três painéis usam um
   e dezessete usam o outro, e os dois títulos são reescritos por textContent /
   innerHTML — botão posto lá dentro sumiria na primeira saudação redesenhada.
   Quem escreve é ajudaNoTopo(tabId) no cockpit.
   ============================================================ */
.ds-ajuda-linha { margin: 0 0 var(--sp-4); }
.ds-ajuda {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--radius-full);
  background: var(--surface); color: var(--text-muted); cursor: pointer;
  font-family: inherit; font-size: var(--fs-xs); font-weight: 600;
  transition: var(--transition-fast);
}
.ds-ajuda .mi { font-size: var(--fs-md); }
.ds-ajuda:hover { color: var(--brand-strong); border-color: var(--brand-border); }
.ds-ajuda[aria-expanded="true"] {
  color: var(--brand-strong); border-color: var(--brand-border); background: var(--brand-bg);
}
.ds-ajuda-pop {
  margin: var(--sp-3) 0 0; padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: var(--radius); background: var(--surface);
  max-width: var(--measure); font-size: var(--fs-sm); line-height: var(--lh-base);
  color: var(--text-dim);
}
.ds-ajuda-pop p { margin: 0 0 var(--sp-2); }
.ds-ajuda-pop p:last-child { margin-bottom: 0; }
.ds-ajuda-pop strong { color: var(--text); font-weight: 600; }
/* A procedência da ajuda fica à vista: quem lê sabe de onde saiu o texto e,
   se estiver errado, sabe qual arquivo corrigir — sem perguntar a ninguém. */
.ds-ajuda-fonte {
  display: block; margin-top: var(--sp-3);
  font-size: var(--fs-2xs); color: var(--text-muted); font-family: var(--font-mono);
}

/* O editor do dono, no fim da seção de acesso. Separado por uma linha do
   resto: quem ENTRA e quem RESPONDE são duas decisões, não uma. */
.ds-dono-edit {
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--border-light);
}
.ds-dono-edit-tit { color: var(--text-dim); margin-bottom: var(--sp-2); }

/* Ícone SVG (design/icons.js): dimensiona por 1em, herda cor do texto */
.mi {
  display: inline-flex;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex: none;
}
.mi svg { width: 100%; height: 100%; display: block; }

/* ============================================================
   Auth (login, sem-acesso, badge de usuário, flash) — cockpit.
   Vive aqui porque o JS injeta essas telas antes de qualquer
   estilo da página valer; tokens.css chega primeiro no <head>.
   ============================================================ */
.auth-cover {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}
.auth-card {
  width: 340px;
  max-width: 90vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6);
  box-shadow: var(--shadow);
}
.auth-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  margin-bottom: 6px;
}
.auth-sub { font-size: var(--fs-md); color: var(--text-dim); margin-bottom: var(--sp-4); line-height: var(--lh-base); }
.auth-input {
  width: 100%;
  box-sizing: border-box;
  font: 400 var(--fs-base)/1.4 var(--font-body);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text);
  outline: none;
  margin-bottom: 10px;
  transition: var(--transition-fast);
}
.auth-input:focus { border-color: var(--brand-border); box-shadow: 0 0 0 3px var(--brand-bg); }
.auth-go {
  width: 100%;
  padding: 11px;
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--brand);
  color: #fff;
  font: 600 var(--fs-base)/1 var(--font-body);
  cursor: pointer;
  transition: var(--transition-fast);
}
.auth-go:hover { background: var(--brand-strong); }
.auth-go:disabled { opacity: .6; cursor: default; }
.auth-msg { font-size: var(--fs-sm); margin-top: var(--sp-3); min-height: 16px; color: var(--text-muted); }
.auth-msg.err { color: var(--red); }
.auth-msg.ok { color: var(--green); }
.auth-msg.warn { color: var(--orange); }
.auth-links { font-size: var(--fs-sm); margin-top: 14px; display: flex; justify-content: space-between; gap: var(--sp-2); }
.auth-links a { text-decoration: none; }
.auth-links a.main { color: var(--brand-strong); }
.auth-links a.side { color: var(--text-muted); }
.auth-badge {
  position: fixed;
  top: 8px;
  right: 12px;
  z-index: 99998;
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  font: 500 var(--fs-sm)/1 var(--font-body);
  color: var(--text-dim);
  background: var(--surface);
  padding: 6px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.auth-badge a { color: var(--red); text-decoration: none; }
/* dentro do header: deixa de flutuar e entra na linha, ao lado da data */
.auth-badge-inline { position: static; box-shadow: none; background: var(--surface2); }
.auth-flash {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 99999;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font: 500 var(--fs-sm)/1.2 var(--font-body);
  color: #fff;
  background: var(--green);
  box-shadow: var(--shadow-lg);
  transition: opacity .3s;
  pointer-events: none;
}
.auth-flash.err { background: var(--red); }

/* ============================================================
   Backlog da aba — a fila de melhorias daquela tela.
   Primeiro bloco de toda aba de processo, NASCE COLAPSADO: é fila
   de quem constrói a tela, não conteúdo dela. Uma linha por item
   (check, texto, criticidade, prazo, responsável) e uma subseção
   de Histórico para o que já foi feito.
   Quem escreve é bklNoTopo(tabId) no cockpit, num ponto único
   pendurado no switchTab.
   ============================================================ */
.ds-bkl {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin-bottom: var(--sp-5); overflow: hidden;
}
.ds-bkl-head {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5); padding-right: var(--sp-8);
  border-bottom: 1px solid var(--border-light);
}
.ds-bkl.collapsed .ds-bkl-head { border-bottom: none; }
.ds-bkl-tit {
  font-family: var(--font-display); font-size: var(--fs-md);
  font-weight: 700; color: var(--text);
}
.ds-bkl-cont { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ds-bkl-atraso { color: var(--red); font-weight: 600; }
.ds-bkl-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.ds-bkl-nota {
  font-size: var(--fs-xs); line-height: var(--lh-base); color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

/* A linha de cadastro. `flex-wrap` porque são cinco campos: em tela
   estreita eles empilham em vez de encolher até ninguém ler. */
.ds-bkl-nova { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.ds-bkl-nova .ds-input { font-size: var(--fs-md); padding: 6px 9px; }
.ds-bkl-nova-item { flex: 1 1 260px; min-width: 180px; }
.ds-bkl-nova-sel { flex: 0 1 auto; }

.ds-bkl-lista { display: flex; flex-direction: column; gap: var(--sp-1); }
.ds-bkl-item {
  display: grid; align-items: center; gap: var(--sp-3);
  grid-template-columns: 18px minmax(0, 1fr) auto auto auto 24px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--surface);
}
.ds-bkl-item:hover { background: var(--wash-1); }
.ds-bkl-item--vencido { border-color: var(--red-border); background: var(--red-bg); }
.ds-bkl-check { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }
.ds-bkl-txt { font-size: var(--fs-md); line-height: var(--lh-base); color: var(--text); overflow-wrap: anywhere; }
.ds-bkl-meta {
  font-size: var(--fs-xs); color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ds-bkl-meta b { color: var(--text-dim); font-weight: 600; }
.ds-bkl-crit-alta   { color: var(--red);    border-color: var(--red-border);    background: var(--red-bg); }
.ds-bkl-crit-media  { color: var(--orange); border-color: var(--orange-border); background: var(--orange-bg); }
.ds-bkl-crit-baixa  { color: var(--text-muted); }
.ds-bkl-del {
  border: none; background: transparent; cursor: pointer; padding: 2px;
  color: var(--text-muted); line-height: 1; border-radius: var(--radius-xs);
}
.ds-bkl-del:hover { color: var(--red); background: var(--red-bg); }
.ds-bkl-del .mi { width: 14px; height: 14px; }

/* Histórico — o que já foi feito nesta tela. Subseção da mesma caixa,
   e não bloco à parte: a evolução da aba se lê junto do que falta. */
.ds-bkl-hist { margin-top: var(--sp-4); border-top: 1px solid var(--border-light); padding-top: var(--sp-3); }
.ds-bkl-hist-head { padding-right: var(--sp-6); }
.ds-bkl-hist-tit {
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted);
}
.ds-bkl-hist-lista { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-2); }
.ds-bkl-feito {
  display: grid; align-items: center; gap: var(--sp-3);
  grid-template-columns: 18px minmax(0, 1fr) auto 24px;
  padding: var(--sp-1) var(--sp-3);
}
.ds-bkl-feito .ds-bkl-txt { color: var(--text-muted); text-decoration: line-through; }

/* Em tela estreita a linha empilha: texto em cima, criticidade, prazo e
   responsável embaixo. `justify-self: start` porque chip e metadado esticados
   de ponta a ponta leem como barra, não como etiqueta. */
@media (max-width: 700px) {
  .ds-bkl-item, .ds-bkl-feito {
    grid-template-columns: 18px minmax(0, 1fr) 24px; gap: var(--sp-1) var(--sp-3);
  }
  .ds-bkl-item .ds-bkl-meta, .ds-bkl-item .ds-chip, .ds-bkl-feito .ds-bkl-meta {
    grid-column: 2; justify-self: start;
  }
  /* O apagar fica ancorado na PRIMEIRA linha, junto do texto: sem isto a
     auto-colocação o joga para o fim da pilha, longe do item que ele apaga. */
  .ds-bkl-item .ds-bkl-del, .ds-bkl-feito .ds-bkl-del { grid-area: 1 / 3; align-self: start; }
  .ds-bkl-nova .ds-btn { flex: 1 0 auto; justify-content: center; }
}

/* ============================================================
   Utilitários (para os padrões mais repetidos de style= inline)
   ============================================================ */
.u-muted { color: var(--text-muted); }
.u-dim { color: var(--text-dim); }
.u-tnum { font-variant-numeric: tabular-nums; }
.u-caps {
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: var(--fs-2xs);
  font-weight: 600;
}
.u-flex { display: flex; align-items: center; }
.u-gap-1 { gap: var(--sp-1); }
.u-gap-2 { gap: var(--sp-2); }
.u-gap-3 { gap: var(--sp-3); }
.u-right { text-align: right; }
.u-hidden { display: none !important; }