/* PONTE.TUR — pele "Paper soft" v3 (05/08/26, referência "Email Client UI"):
   canvas bege quente, toda superfície é card branco flutuante (radius 18, sombra
   dupla suave, SEM borda — borda só como divisor interno --line em listas/grades).
   Ação = preto (--ink): .primario vira pill preto, substitui indigo em link/foco/
   aba ativa/item ativo da sidebar. Base monocromática — cor só aparece em chips
   pastel (texto escuro + fundo pastel): verde=ok, roxo=rascunho da IA (era fúcsia),
   âmbar=pendente, vermelho=crítico.
   --brand/--brand-bg/--brand-ink e --chip/--paper seguem DEFINIDOS como aliases pro
   preto/pill/canvas — decisão lazy pra não caçar cada uso no CSS/JSX existente. */
:root {
  /* Contraste v5.1 (06/08/26, pedido do fundador: "páginas mais contrastadas,
     hierarquia mais presente"): os três tokens de base escureceram UM degrau.
     --canvas #F1EFEA→#EAE5DB: card/canvas 1.15→1.26 — o card passa a flutuar
     de verdade. --mut #676D78→#575D68: 5.20→6.62:1 no card, ≥5.1:1 em canvas e
     em todos os washes (medido). --line #ECEDEF→#E0E2E7: divisor visível sem
     virar grade. Escurecer o canvas SOZINHO derrubaria --mut abaixo de 4.5:1
     sobre ele (4.15) — os três andam juntos. */
  --canvas: #EAE5DB;
  --card: #FFFFFF;
  --ink: #131417;
  --mut: #575D68;
  --line: #E0E2E7;
  --pill: #F2F3F5;
  --r: 18px;
  --sombra: 0 1px 2px rgba(19, 20, 23, .04), 0 10px 30px rgba(19, 20, 23, .07);
  --sombra-hover: 0 2px 6px rgba(19, 20, 23, .06), 0 16px 40px rgba(19, 20, 23, .10);

  /* ── AÇÃO / MARCA (v4) — o preto deixa de ser a única voz ──────────────
     Azul-tinta: o mundo é "Paper soft", papel quente; tinta sobre papel é a
     escolha que o próprio mundo pede, não convenção de SaaS. É o ÚNICO papel
     do sistema que preenche sólido e saturado — por isso a ação continua
     sendo a coisa mais fácil de achar na tela, que era o valor do preto no v3.
     Medidos: 8.39:1 branco/--acao · 7.30:1 --acao/canvas · 7.18:1 --acao/--acao-bg. */
  --acao: #1D4E89;
  --acao-forte: #163C6B;   /* hover/pressed do preenchimento sólido */
  --acao-bg: #E7EEF7;      /* seleção, item ativo, "hoje" — superfície, não fill */

  /* ── ÁREAS DO APP (v4) — 4 zonas, não 9 telas ──────────────────────────
     Só a zona tem cor, e ela vive CONFINADA ao rail da sidebar e ao filete do
     título da tela. Nunca dentro de um card, nunca ao lado de um chip: é o
     confinamento que impede o "arco-íris por função" reprovado no §12.
     Roxo da IA reusa de propósito a assinatura roxa do rascunho (§4). */
  --area-operacao: #1F6F7A;      /* 5.81:1 */
  --area-conhecimento: #8A5A17;  /* 5.91:1 */
  --area-rede: #8A3A5C;          /* 7.39:1 */
  --area-ia: #6D3BC4;            /* 6.83:1 */

  /* ── TEMPERATURA OPERACIONAL (v4) — o que precisa de mim hoje ──────────
     Wash de SUPERFÍCIE na linha da lista (não border-left colorida: barra
     lateral acima de 1px é decoração de callout, não hierarquia). Tão leve
     que --ink e --mut seguem legíveis por cima — todos medidos ≥4.5:1. */
  --wash-agora: #EEF3F9;
  --wash-atrasado: #FDF1F0;
  --wash-pendente: #FDF6EC;
  --wash-arquivo: #F7F7F8;

  /* Escala de espaçamento (base 4): antes eram valores avulsos e quase tudo
     acabava em 8px, o que fazia toda relação pesar igual. Ritmo precisa de
     degraus. --e3 é o intervalo interno padrão; --e6/--e7 separam blocos. */
  --e1: 4px;  --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 20px; --e6: 28px;  --e7: 40px;

  /* ── ESCALA TIPOGRÁFICA (v5) ────────────────────────────────────────────
     O v4 tinha DOIS degraus úteis no painel — rótulo 13px e h1 23px — e nada
     entre eles, então todo tile pesava igual e a tela não dizia por onde
     começar. Cinco degraus com salto claro (ratio ~1.28), sem meio-termo que
     o olho não distingue. --t-mega é só para número de métrica: um dígito
     grande é um DADO, não decoração, e é a única coisa legível de longe. */
  --t-mega: 42px;      /* contagem de fila (só dígito, tabular) */
  --t-titulo: 27px;    /* h1 do painel */
  --t-destaque: 17px;  /* primeira linha de um tile que exige leitura */
  --t-corpo: 15px;
  --t-menor: 12.5px;
  --t-rotulo: 11.5px;  /* uppercase, título de tile */

  /* aliases: nome antigo, valor novo — não caçar cada uso.
     v4 aponta --brand* pro azul-tinta; isso colore de uma vez aba ativa,
     "hoje" do calendário, chip de viagem, bolha do usuário no chat, item
     ativo da sidebar e da lista de conversas. Mesmo truque do v3 (§12). */
  --brand: var(--acao);  --brand-bg: var(--acao-bg);  --brand-ink: var(--acao);
  --chip: var(--pill);   --paper: var(--canvas);

  /* estados: chips pastel (texto escuro + fundo pastel) — texto ajustado pra AA 4.5:1 medido */
  --draft: #7C3AED;      --draft-bg: #EFE7FB;   /* roxo: rascunho da IA (era fúcsia); 4.75:1 */
  --ok: #276B2A;         --ok-bg: #E3F3E0;      /* verde: positivo, confirmado; 5.64:1 (era #2F7D32 = 4.43) */
  --warn: #9C4A08;       --warn-bg: #FBEBD7;    /* 5.29:1 (era #B45309 = 4.30) */
  --err: #C62828;        --err-bg: #FBE3E1;     /* 4.60:1 */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  background: var(--canvas);
  min-height: 100vh;
  color: var(--ink);
  font-size: 15px; line-height: 1.5;
}

h1 { color: var(--ink); }
code, .mono { font-family: 'IBM Plex Mono', monospace; }

/* ── Shell: sidebar 232px · conteúdo · agente ── */
.app-shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.app-body { min-width: 0; }
/* minmax(0,1fr): sem isso o min-content do calendário estica o track e expulsa o agente */
.app-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) 360px; min-height: 100vh; }  /* copiloto 300→360: em 300px toda resposta virava coluna de 3 palavras */
.app-grid2 > div:first-child { min-width: 0; }
/* O `display: none` da coluna do agente vive junto do componente (mais abaixo),
   não aqui: a regra base `.agente-col-global { display: flex }` vem depois neste
   arquivo e, com a mesma especificidade, vencia — a coluna nunca escondia abaixo
   de 1180px e um painel vazio comia uma coluna inteira em notebook. */
@media (max-width: 1180px) { .app-grid2 { grid-template-columns: minmax(0, 1fr); } }

/* Sidebar = card flutuante (margem 12px do viewport, sticky) */
.sidebar {
  position: sticky; top: 0; height: calc(100vh - 24px); margin: 12px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--card); border-radius: var(--r); box-shadow: var(--sombra); padding: 16px 12px;
}
.sb-perfil {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  margin-bottom: 8px; border-radius: 12px; text-decoration: none; color: inherit;
}
.sb-perfil:hover { background: var(--pill); }
/* No painel o perfil É o item ativo da navegação — o painel não tem entrada
   própria na lista de zonas, e sem isto a sidebar não mostra onde você está. */
.sb-perfil.ativo { background: var(--acao-bg); }
.sb-perfil.ativo .sb-perfil-nome { color: var(--acao); }
.sb-perfil.ativo .sb-avatar { background: var(--acao); color: #fff; }
.sb-avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--pill); color: var(--ink); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.sb-perfil-nome { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.sb-perfil-email {
  font-size: 11.5px; color: var(--mut); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px;
}
/* Zona da sidebar (v4) — 9 itens de nav idênticos viravam uma lista sem
   hierarquia: "Viagens" e "Acervo" pesavam igual. Agora as telas se agrupam em
   4 zonas e SÓ a zona carrega cor. O filete que sai do rótulo é a mesma forma
   do filete sob o título da tela — sidebar e conteúdo falam a mesma língua. */
.sb-zona {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--zona, var(--mut)); padding: 0 10px 6px; margin-top: var(--e4);
  display: flex; align-items: center; gap: 8px;
}
.sb-nav + .sb-zona { margin-top: var(--e5); }
.sb-zona::after {
  content: ''; flex: 1; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .3;
}
.sb-nav { display: flex; flex-direction: column; gap: 1px; }
.sb-nav a {
  display: flex; align-items: center; gap: 8px;
  color: var(--mut); text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 7px 10px; border-radius: 12px;
}
.sb-nav a:hover { background: var(--chip); color: var(--ink); }
.sb-nav a.ativo { background: var(--brand-bg); color: var(--brand-ink); font-weight: 600; }
/* v5.2 (ref. Notion): ícone por item de nav. Herda a cor do link (mut → ink no
   hover → azul no ativo) — o ícone acompanha o estado sem cor própria. */
.sb-ico { display: flex; flex: none; opacity: .85; }

/* ── Sub-pastas da nav (v5) ──────────────────────────────────────────────
   O rótulo continua sendo um link (navega pra pasta-mãe) e a seta é um botão
   à parte (só abre). Um alvo único faria uma das duas ações mentir. */
.sb-item-linha { display: flex; align-items: center; gap: 2px; }
.sb-item-linha > a { flex: 1; min-width: 0; }
.sb-expandir {
  flex: none; background: none; border: none; padding: 0; margin-right: 4px;
  width: 22px; height: 26px; display: flex; align-items: center; justify-content: center;
  color: var(--mut); border-radius: 6px; cursor: pointer;
}
.sb-expandir:hover { background: var(--chip); color: var(--ink); }
.sb-seta { display: block; font-size: 15px; line-height: 1; transition: transform .15s ease; }
.sb-seta.aberta { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .sb-seta { transition: none; } }

/* Filete vertical no lugar de indentação por padding: com padding, sub-item e
   item de nav ficam visualmente no mesmo plano e a hierarquia some. O filete é
   1px — não é a "barra lateral colorida" que o §5 proíbe (aquela é acento de
   card acima de 1px); aqui é divisor de estrutura, o caso canônico de --line. */
.sb-sub {
  display: flex; flex-direction: column; gap: 1px;
  margin: 2px 0 6px 18px; padding-left: 10px; border-left: 1px solid var(--line);
}
.sb-sub a {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 400; color: var(--mut);
  padding: 5px 8px; border-radius: 8px; text-decoration: none;
}
.sb-sub a:hover { background: var(--chip); color: var(--ink); }
.sb-sub a.ativo { background: var(--acao-bg); color: var(--acao); font-weight: 600; }
.sb-sub-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.sb-sub-rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-sub .sb-vazio { padding: 4px 8px; }
.sb-acoes a { font-size: 13px; padding: 5px 10px; }
.sb-sec {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--mut); padding: 14px 10px 4px;
}
.sb-feed { display: flex; flex-direction: column; gap: 1px; }
.sb-item {
  display: flex; align-items: baseline; gap: 7px; padding: 5px 10px; border-radius: 7px;
  color: var(--ink); text-decoration: none; font-size: 12.5px;
}
.sb-item:hover { background: var(--chip); }
.sb-item.atrasado { color: var(--err); }
.sb-data { font-size: 10.5px; color: var(--mut); flex: none; }
.sb-item.atrasado .sb-data { color: var(--err); }
.sb-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-vazio { color: var(--mut); font-size: 12px; padding: 4px 10px; }
.sb-sair {
  margin-top: auto; background: var(--pill); border: none; color: var(--mut);
  font-size: 12.5px; padding: 6px 12px; border-radius: 999px;
}
.sb-sair:hover { background: var(--line); color: var(--ink); }
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; margin: 12px; }
  /* No PAINEL a sidebar desce pro fim. Empilhada no topo ela custava 504px de
     rolagem de menu antes do primeiro dado — e o painel é a tela de ENTRADA:
     quem abre quer ver o que vence hoje, não a navegação. Numa tela interna o
     topo é o certo (você chegou lá navegando); aqui é o inverso. */
  .app-shell-painel { display: flex; flex-direction: column; }
  .app-shell-painel .sidebar { order: 2; margin-top: 0; }
  .app-shell-painel .app-body { order: 1; }
  /* Sidebar vira bloco no topo: em coluna única os 4 rótulos de zona somariam
     ~136px de rolagem antes do conteúdo. Em grade de 2 colunas cada zona ocupa
     metade da altura e o agrupamento continua legível. */
  .sb-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px; }
  /* A nav vira grade de 2 colunas aqui; sem isto o bloco de sub-pastas cai numa
     célula de ~144px, espremido ao lado de um item irmão. Ele atravessa a linha
     inteira e mantém o filete de hierarquia. */
  .sb-sub { grid-column: 1 / -1; margin-left: 8px; }
  .sb-zona { margin-top: var(--e3); }
  .sb-nav + .sb-zona { margin-top: var(--e4); }
}

.wrap { max-width: 1100px; margin: 0 auto; padding: var(--e6) var(--e6) 80px; }

/* ── Cards: brancos, flutuantes, sombra dupla suave, sem borda ── */
.card {
  background: var(--card); border-radius: var(--r); box-shadow: var(--sombra);
  padding: var(--e3) var(--e4);
}
/* gap ENTRE itens > padding DENTRO do item: era 8 contra 14/16, proximidade
   invertida — sem a sombra, itens vizinhos liam como um bloco só, e o card
   passava a ser o único agrupador da tela. */
.lista { display: flex; flex-direction: column; gap: var(--e3); }  /* densidade v5.2: 20→12 */
.lista .card { cursor: pointer; transition: box-shadow .12s; }
.lista .card:hover { box-shadow: var(--sombra-hover); }

/* ── Cabeçalho de tela (v4) ──────────────────────────────────────────────
   Antes: título e botão flutuavam soltos no canvas, a barra de busca também,
   e só o conteúdo estava em card — duas lógicas de superfície na mesma tela.
   Agora o topo é um bloco só, e o filete sob o título carrega a cor da zona
   (--zona vem inline do App; sem zona, cai no preto de sistema). */
.tela-cab { margin-bottom: 14px; }  /* densidade v5.2 */
.tela-cab-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
/* v5.1: o h1 interno sobe pra --t-titulo (era o 20px base — a 5px do corpo,
   quase o mesmo peso dos títulos de item, e a tela não dizia por onde começar).
   Mesma voz do painel. Filete 2→3px: mesma espessura do filete de tile do bento. */
.tela-cab h1 {
  margin: 0; padding-bottom: 6px; display: inline-block;
  font-size: var(--t-titulo); letter-spacing: -.02em;
  border-bottom: 3px solid var(--zona, var(--ink));
}
.tela-cab-ferramentas { display: flex; gap: var(--e2); align-items: center; margin-top: 10px; flex-wrap: wrap; }
.tela-cab-ferramentas input[type="search"] { flex: 1; min-width: 190px; }
.tela-cab-filtros { display: flex; gap: 5px; flex: none; flex-wrap: wrap; }

/* ── Lista densa (v4) ────────────────────────────────────────────────────
   Era N cards soltos: N sombras, N ilhas, 4 viagens ocupando a tela inteira.
   Vira UM card com linhas divididas por --line — o card volta ao papel de
   agrupar em vez de decorar cada item, e a agência grande vê a operação toda
   sem rolar. §5 DESIGN.md: --line é exatamente isso, divisor interno. */
.lista-card { background: var(--card); border-radius: var(--r); box-shadow: var(--sombra); overflow: hidden; }
.lista-zona {
  display: flex; align-items: baseline; gap: 8px;
  padding: 14px var(--e4) 5px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--mut);
  border-bottom: 1px solid var(--line);
}
.lista-zona:first-child { padding-top: 8px; }
.lista-zona .cont { font-weight: 600; letter-spacing: 0; opacity: .75; }
.lista-linha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e3);
  padding: 7px var(--e4); cursor: pointer; border-bottom: 1px solid var(--line);
}
.lista-linha:last-child { border-bottom: none; }
.lista-titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-sub {
  color: var(--mut); font-size: 12.5px; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Temperatura operacional: wash de superfície, não barra lateral colorida.
   Responde "o que preciso ver hoje" antes da leitura. */
.lista-linha.t-agora { background: var(--wash-agora); }
.lista-linha.t-atrasado { background: var(--wash-atrasado); }
.lista-linha.t-pendente { background: var(--wash-pendente); }
/* Arquivado RECUA: peso menor e cinza, em vez de competir com o que está vivo. */
.lista-linha.t-arquivo { background: var(--wash-arquivo); }
.lista-linha.t-arquivo .lista-titulo { font-weight: 500; color: var(--mut); }
.lista-linha:hover { background: var(--pill); }   /* hover vence o wash: vem depois */

/* ── Estado vazio (v4) — ensina a interface, não anuncia o nada ───────── */
.vazio-estado {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; padding: var(--e7) var(--e5); text-align: center;
}
.vazio-estado strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.vazio-estado p { margin: 0; font-size: 13.5px; color: var(--mut); max-width: 40ch; line-height: 1.5; }
.vazio-estado .dica { font-size: 12.5px; color: var(--mut); }
.vazio-estado kbd {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; background: var(--pill);
  border-radius: 5px; padding: 1px 6px; color: var(--ink);
}

/* Tipografia */
h1 { font-size: 20px; margin: 0 0 14px; }
/* v5.1: h2 de card entra na escala (--t-destaque). Com o h1 interno em 27px,
   16px ficava a 1px do corpo — degrau que o olho não distingue. */
h2 { font-size: var(--t-destaque); margin: 0 0 10px; }
.mut { color: var(--mut); font-size: 13px; }

/* Badges — cor segue o significado */
.badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 99px; text-transform: uppercase; letter-spacing: .03em;
}
.badge.proposta   { background: var(--chip); color: var(--mut); }
.badge.confirmada { background: var(--ok-bg); color: var(--ok); }
.badge.em_curso   { background: var(--brand); color: #fff; }
.badge.concluida  { background: var(--chip); color: var(--ink); }
.badge.rascunho   { background: var(--draft-bg); color: var(--draft); }
.badge.oficial    { background: var(--ok-bg); color: var(--ok); }
.badge.pendente   { background: var(--warn-bg); color: var(--warn); }
.badge.aprovado   { background: var(--ok-bg); color: var(--ok); }
.badge.aplicado   { background: var(--ok-bg); color: var(--ok); }
.badge.erro       { background: var(--err-bg); color: var(--err); }

/* Formulários */
input, select, textarea {
  font: inherit; color: var(--ink); background: #F5F6F7;
  border: 1px solid transparent; border-radius: 12px; padding: 8px 11px; width: 100%;
}
/* Foco = azul-tinta (v4): o anel de foco é sinal de sistema, mesma família da
   ação. Preto sobre #F5F6F7 lia como borda estática, não como "estou aqui". */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acao); box-shadow: 0 0 0 3px var(--acao-bg); }
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--mut); margin: 10px 0 4px; }
.linha { display: flex; gap: 12px; }
.linha > * { flex: 1; }

/* Botões — .primario pill azul-tinta (v4); base/.mini pill cinza-claro (--pill) */
button {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: 999px;
  border: none; background: var(--pill); color: var(--ink); padding: 8px 16px;
}
button:hover { background: var(--line); }
button.primario { background: var(--acao); color: #fff; }
button.primario:hover { background: var(--acao-forte); }
button:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
button.perigo { color: var(--err); }
button.mini { padding: 4px 11px; font-size: 12.5px; font-weight: 500; }
/* Seleção (filtro ativo, aba de chip): superfície tingida na família da ação,
   nunca preenchimento sólido — este fica só para a ação primária da tela. */
button.sel { background: var(--acao-bg); color: var(--acao); font-weight: 600; }
button.sel:hover { background: var(--acao-bg); filter: brightness(.97); }
button:disabled { opacity: .5; cursor: default; }

/* Abas */
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 14px 0; }
.abas button {
  border: none; background: none; border-radius: 6px 6px 0 0; padding: 7px 14px;
  font-weight: 600; color: var(--mut); margin-bottom: -1px; border-bottom: 2px solid transparent;
}
.abas button:hover { border-color: transparent; color: var(--ink); }
.abas button.ativa { color: var(--brand-ink); border-bottom-color: var(--brand); }

/* Links com cara de botão mini (utilitários neutros; hover acende na marca).
   WhatsApp = verde (identidade do WA = o verde-positivo do sistema). */
a.mini-link {
  display: inline-block; font-size: 12.5px; font-weight: 600; padding: 4px 10px;
  border: none; border-radius: 999px; text-decoration: none;
  color: var(--ink); background: var(--chip); white-space: nowrap;
}
a.mini-link:hover { background: var(--line); }
a.mini-link.wa { color: var(--ok); background: var(--ok-bg); }
a.mini-link.wa:hover { background: var(--ok-bg); filter: brightness(.96); }

/* Botões de ação com cor de estado — pastel (texto escuro + fundo pastel) */
button.mini.ok, button.mini.wa { background: var(--ok-bg); color: var(--ok); }
button.mini.ok:hover, button.mini.wa:hover { filter: brightness(.96); }

/* Agenda kanban — compacto */
/* Densidade v5.2 (mesma régua da linha do tempo e do calendário). */
.kanban {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr);
  gap: 6px; align-items: stretch; overflow-x: auto; padding-bottom: 6px;
}
/* A coluna é o card flutuante; os itens dentro são superfície plana. Era o
   inverso — coluna com fundo+borda contendo .card com --sombra, ou seja card
   dentro de card, as duas sombras empilhadas que o §5 do DESIGN.md proíbe.
   align-items: stretch: com `start`, "Hoje" vazia virava a menor coluna da tela
   justamente no dia que mais importa. */
.kanban .col {
  background: var(--card); border: none;
  border-radius: 14px; box-shadow: var(--sombra); padding: 6px; min-height: 90px;
}
.kanban .col h3 {
  margin: 1px 2px 5px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--mut); display: flex; gap: 6px; align-items: baseline;
}
.kanban .col h3 .mut { color: var(--mut); font-size: 10.5px; }
.kanban .col.alvo { outline: 2px dashed var(--brand); outline-offset: -2px; }
.kanban .card {
  padding: 5px 8px; margin-bottom: 3px; cursor: grab; font-size: 12.5px;
  background: var(--pill); box-shadow: none; border-radius: 8px;
}
.kanban .card .mut { font-size: 12px; }
.kanban .card:active { cursor: grabbing; }
.kanban .card .titulo { font-weight: 600; }
.kanban .card a { color: var(--brand-ink); text-decoration: none; }
.kanban .card a:hover { text-decoration: underline; }

/* Fornecedores — grade compacta; cards esticam por linha, ações na base */
.forn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }  /* densidade v5.2 */
.forn-grid .card { padding: 8px 11px; font-size: 13.5px; cursor: pointer; transition: box-shadow .12s; display: flex; flex-direction: column; }
.forn-grid .card:hover { box-shadow: var(--sombra-hover); }
.forn-tipo {
  flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; background: var(--chip); color: var(--mut);
  border-radius: 99px; padding: 2px 8px;
}
.forn-notas {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Coluna do agente (direita, telas sem viagem aberta) — canvas + padding, o
   .agente-painel de dentro é que flutua (card/--sombra, §3 DESIGN.md: sem
   contorno de superfície). */
.agente-col-global {
  position: sticky; top: 0; height: 100vh; padding: 12px; gap: 10px;
  display: flex; flex-direction: column; background: var(--canvas);
}
/* Aqui, depois da regra base — ver comentário no @media lá de cima. */
@media (max-width: 1180px) { .agente-col-global { display: none; } }
.agente-sel { padding: 10px 12px 8px; border-bottom: 1px solid var(--line); }
.agente-sel label { margin: 0 0 4px; }
.agente-col-global .agente-painel { flex: 1; min-height: 0; }

/* Calendário mensal (Agenda) — densidade v5.2 acompanhando a linha do tempo:
   célula 92→70px, respiros de 5→3px. Mês inteiro sobe na tela sem rolar. */
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-cab {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--mut); text-align: center; padding: 1px 0 4px;
}
.cal-dia {
  background: #fff; border: 1px solid var(--line);
  border-radius: 7px; min-height: 70px; padding: 3px 5px 4px;
  display: flex; flex-direction: column; gap: 2px;
}
/* Transparente (era var(--paper)): dentro da moldura v5.2 o bege do canvas
   viraria um remendo escuro; transparente funde com qualquer superfície. */
.cal-vazio { background: transparent; border-color: transparent; }
.cal-hoje { outline: 2px solid var(--brand); outline-offset: -2px; background: var(--brand-bg); }
.cal-num { font-size: 11px; font-weight: 600; color: var(--mut); align-self: flex-end; }
.cal-hoje .cal-num { color: var(--brand-ink); }
.cal-chip {
  display: block; font-size: 10.5px; line-height: 1.25; padding: 1px 5px; border-radius: 5px;
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Só o dia de INÍCIO preenche sólido. Os dias de continuação são a mesma viagem
   em voz baixa (7.18:1) — antes eram todos preenchidos e mudos. */
.cal-chip.viagem { background: var(--acao-bg); color: var(--acao); font-weight: 600; }
.cal-chip.viagem.ini { background: var(--acao); color: #fff; }
.cal-chip.voo     { background: var(--chip); color: var(--ink); font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
.cal-chip.tarefa  { background: var(--chip); color: var(--ink); }
.cal-chip.tarefa.atrasada { background: var(--err-bg); color: var(--err); }
.cal-chip.tarefa.feita { opacity: .55; text-decoration: line-through; }
.cal-chip:hover { filter: brightness(.95); }
@media (max-width: 860px) { .cal-dia { min-height: 54px; } .cal-chip { font-size: 10px; } }

/* ── v5.2 — padrões roubados das referências (Notion app / Mews PMS), pele
   intacta. Decisão do fundador 07/08/26: "roubar padrões, Paper soft fica". ── */

/* Dot de estado: forma COMPACTA do papel "estado" (§6). Sempre acompanhado de
   texto — cor nunca é o único indicador (§10). */
.dot-status { display: inline-block; width: 8px; height: 8px; border-radius: 99px; flex: none; }
.lista-titulo .dot-status { margin-right: 7px; }
.kanban .col h3 { align-items: center; }
.kanban .col h3 .dot-status { width: 7px; height: 7px; }

/* Moldura (ref. Notion Mail): painel PLANO que emoldura grid denso (calendário,
   kanban, timeline). Não é card — sem sombra, não flutua; é a superfície de
   agrupamento entre o canvas e os cards de dentro. Card-dentro-de-card (§5)
   segue proibido: moldura não empilha sombra nenhuma. */
.moldura { background: #F2EFE8; border-radius: 14px; padding: 10px; }
.moldura .kanban { padding-bottom: 4px; }

/* ── Linha do tempo (ref. Mews): viagem = linha, dia = coluna, barra = duração.
   O underlay pinta colunas inteiras (hoje, fim de semana) atrás das linhas com
   o MESMO grid-template — pintar por célula exigiria 21 células vazias por
   linha. Barra usa a cor do ESTADO na forma de sempre (§6): pastel + texto
   escuro; em_curso é a exceção sólida, como em todo o app. */
.tl-rolagem { overflow-x: auto; }
.timeline {
  position: relative; display: grid; gap: 2px 0; min-width: 1080px;
  grid-auto-rows: minmax(27px, auto); align-items: stretch;
}
.tl-underlay { position: absolute; inset: 0; display: grid; pointer-events: none; }
/* Coluna CHAPADA (radius 0): com radius as células liam como pílulas soltas
   penduradas no cabeçalho, não como o dia inteiro tingido (ref. Mews). */
.tl-underlay i { border-radius: 0; }
.tl-underlay .tl-fds { background: rgba(19, 20, 23, .045); }
.tl-underlay .tl-hoje { background: var(--acao-bg); }
.tl-cab {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 0; padding: 2px 0 4px; font-size: 9.5px; color: var(--mut);
}
.tl-cab.tl-rotulo { flex-direction: row; gap: 4px; align-items: center; justify-content: flex-start; padding-left: 2px; }
.tl-cab-hoje { color: var(--acao); font-weight: 700; }
.tl-dnum { font-size: 11px; }
.tl-mes { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tl-rotulo {
  /* grid-column: 1 explícito: sem ele o auto-flow encaixa o rótulo da viagem
     seguinte na PRIMEIRA célula livre da mesma linha, depois da barra anterior
     — duas viagens viravam uma linha só. Coluna 1 ocupada força linha nova. */
  grid-column: 1;
  position: relative; display: flex; align-items: center; gap: 7px; min-width: 0;
  padding: 1px 8px 1px 2px; text-decoration: none; color: inherit; border-radius: 8px;
}
a.tl-rotulo:hover { background: rgba(255, 255, 255, .6); }
.tl-rotulo-txt { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.tl-titulo, .tl-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-titulo { font-size: 12.5px; font-weight: 600; flex: none; max-width: 70%; }
.tl-sub { font-size: 11px; color: var(--mut); }
.tl-barra {
  position: relative; align-self: center; display: block; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; text-decoration: none;
  font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 7px;
  margin: 0 1px; transition: filter .12s;
}
.tl-barra:hover { filter: brightness(.95); }
.tl-barra.proposta   { background: var(--warn-bg); color: var(--warn); }
.tl-barra.confirmada { background: var(--ok-bg); color: var(--ok); }
.tl-barra.em_curso   { background: var(--acao); color: #fff; }
.tl-barra.concluida  { background: var(--pill); color: var(--mut); }
/* Viagem que atravessa a borda da janela: canto reto = "continua além daqui". */
.tl-barra.corta-ini { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.tl-barra.corta-fim { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.tl-vazio { grid-column: 1 / -1; position: relative; padding: var(--e6) var(--e4); text-align: center; color: var(--mut); font-size: 13.5px; }

/* Painel de mapa embutido (Roteiro) */
.mapa-painel iframe { width: 100%; height: 320px; border: 0; border-radius: var(--r); display: block; }

/* Drawer lateral (formulários) */
.drawer-fundo { position: fixed; inset: 0; background: rgba(19,20,23,.4); z-index: 90; }
/* Card flutuante como toda superfície (§5): tinha radius 0 e ficava colado na
   borda do viewport — a única superfície do app que não era card arredondado. */
.drawer {
  position: fixed; top: 12px; right: 12px; bottom: 12px; width: min(440px, 92vw); z-index: 91;
  background: var(--card); border-radius: var(--r);
  box-shadow: -8px 0 32px rgba(19, 20, 23, .18); padding: var(--e5); overflow-y: auto;
}
.drawer h2 { margin-bottom: 14px; }
.drawer .acoes { display: flex; gap: 10px; margin-top: 18px; }

/* Painel do agente — card flutuante v3 (§3 DESIGN.md: --card + --sombra, sem
   contorno de superfície; era border-left + branco chapado, estrutura v2). */
.agente-painel {
  display: flex; flex-direction: column; height: 100%;
  background: var(--card); border-radius: var(--r); box-shadow: var(--sombra); overflow: hidden;
}
.agente-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: 14px; white-space: pre-wrap; }
/* Resposta do modelo vira BLOCOS (turMd em Copiloto.jsx), então as quebras já
   vêm dos <p>/<li> — manter pre-wrap aqui somaria o \n do texto ao margin do
   parágrafo e abriria o dobro do espaço. A bolha do usuário segue pre-wrap: ali
   o conteúdo é o que ele digitou, cru. */
.msg.agente { white-space: normal; }
.msg.agente > p { margin: 0 0 8px; }
.msg.agente > p:last-of-type { margin-bottom: 0; }
.msg-titulo { font-weight: 700; }
.msg-lista { margin: 0 0 8px; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.msg-lista:last-child { margin-bottom: 0; }
.msg .msg-acoes ~ p { margin-top: 8px; }
.msg code {
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px;
  background: rgba(19, 20, 23, .07); border-radius: 5px; padding: 1px 5px;
}
.msg.user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.msg.agente { align-self: flex-start; background: var(--paper); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.agente-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.agente-input input { font-size: 14px; padding: 10px 13px; }

/* Prévia de import do WhatsApp (card dentro do chat, superfícies do kraft) */
.wa-previa { max-width: 100%; align-self: stretch; }
.wa-campo { display: block; font-size: 12px; font-weight: 600; margin-top: 8px; }
.wa-campo input, .wa-campo select { width: 100%; margin-top: 3px; font-size: 13px; padding: 6px 9px; }
.wa-participante { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 13px; margin-top: 3px; }
.wa-participante input { width: auto; margin: 0; }

/* Sugestões do estado vazio do copiloto — pílulas de contorno, não pílulas
   preenchidas: preenchimento sólido é reservado à ação primária (§6 v4). */
.agente-sugestoes { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-top: 2px; }
.agente-sugestao {
  text-align: left; font-size: 12.5px; font-weight: 500; line-height: 1.35;
  background: transparent; border: 1px solid var(--line); color: var(--mut);
  border-radius: 12px; padding: 6px 11px; max-width: 100%;
}
.agente-sugestao:hover { background: var(--acao-bg); border-color: transparent; color: var(--acao); }

/* ── Painel inicial: bento (#/) ──────────────────────────────────────────
   Sem sidebar; os tiles SÃO a entrada. Áreas nomeadas em vez de spans soltos:
   a composição fica legível no CSS e o mobile é uma reordenação declarada, não
   um efeito colateral do auto-flow. Tiles de tamanhos diferentes de propósito —
   grade uniforme de cards iguais é o oposto de bento e não hierarquiza nada. */
/* v5 (06/08/26) — o painel era RETRATO numa plataforma que é paisagem: três
   colunas de fluxo (2fr·1fr·1fr) travadas em 1240px. Num monitor de 2000px isso
   deixava 38% da tela como margem morta e empilhava 1206px de altura na coluna
   larga, enquanto as estreitas terminavam em 900 e 656 — o vão que sobrava
   embaixo era o sintoma, a coluna de fluxo era a causa: coluna empilha, e
   empilhar é vertical por definição.
   Agora é um grid de 12 colunas com linhas de altura fixa: cada tile declara
   LARGURA (span de coluna) e ALTURA (span de linha). É isso que faz um bento
   ser bento — proporções diferentes de propósito — e é o que a versão de
   colunas não conseguia expressar. Some junto o defeito do grid-template-areas
   (toda linha herdando a altura do tile mais alto): aqui a altura é declarada,
   não herdada. */
.bento-shell {
  width: min(1720px, 100%);
  margin: 0 auto; padding: var(--e6) var(--e6) var(--e7);
}
.bento-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); margin-bottom: var(--e5); flex-wrap: wrap;
}
.bento-topo h1 { margin: 0; font-size: var(--t-titulo); letter-spacing: -.02em; }
.bento-topo-esq { display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; min-width: 0; }
/* Ações primárias no topo, não escondidas num tile "Criar" no rodapé da terceira
   coluna: criar viagem é o ato mais frequente da agência e estava a 900px de
   rolagem do topo. */
.bento-topo-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* `dense` reencaixa tiles baixos nos buracos que os altos deixam. Sem ele, um
   tile de 2 linhas ao lado de um de 3 abre um vazio de 1 linha que nada ocupa —
   era metade do "vão" que sobrava embaixo das faixas. */
.bento {
  display: grid; gap: var(--e3);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 78px;
  grid-auto-flow: row dense;
}

/* Os spans de linha abaixo saem de MEDIÇÃO do conteúdo renderizado, não de
   estimativa: t-espacos estava com 62% da própria altura vazia, fixadas 83%,
   capturado 81%, enquanto t-acervo transbordava 234px. Altura declarada só
   funciona se for declarada a partir do que o tile realmente carrega. */

/* Faixa de comando: a busca cruza o acervo inteiro, então atravessa a tela toda. */
.t-busca { grid-column: span 12; grid-row: span 1; }
.t-busca.tem-achados { grid-row: span 4; }

/* O que vence hoje, dividindo as 12 colunas. "Sua semana" leva a fatia maior:
   é lista de itens acionáveis (checkbox + prazo + responsável + viagem), e cada
   linha precisa de largura pra não truncar o contexto no meio. */
.t-agora     { grid-column: span 5; grid-row: span 3; }
.t-tarefas   { grid-column: span 7; grid-row: span 3; }

/* Duas colunas ALTAS e estreitas ancoram o miolo: copiloto (conversa) e
   conhecimento (acervo). Conversa é uma pilha cronológica — cresce pra baixo,
   uma mensagem por vez —, então coluna estreita e alta é a forma que o conteúdo
   pede; largura sobrando só afastava a bolha do avatar. */
.t-copiloto  { grid-column: span 3; grid-row: span 7; }
.t-acervo    { grid-column: span 4; grid-row: span 7; }

/* As 5 colunas restantes ao lado das duas altas somam EXATAMENTE as mesmas 7
   linhas (4 + 3), então a faixa fecha reta em vez de deixar degrau. Foi o que
   faltava na primeira tentativa: tiles de 5 colunas e 2 linhas não cabiam em
   vão nenhum, o `dense` não tinha onde encaixá-los e a página cresceu 180px. */
.t-cal       { grid-column: span 5; grid-row: span 4; }
.t-rascunho  { grid-column: span 5; grid-row: span 3; }

/* Faixa de baixo: três tiles de leitura rápida dividindo as 12 colunas. */
.t-espacos   { grid-column: span 4; grid-row: span 2; }
.t-fixadas   { grid-column: span 4; grid-row: span 2; }
.t-capturado { grid-column: span 4; grid-row: span 2; }

.bento-tile {
  background: var(--card); border-radius: var(--r); box-shadow: var(--sombra);
  padding: var(--e4); display: flex; flex-direction: column; gap: var(--e2);
  min-width: 0; min-height: 0; overflow: hidden; position: relative;
}
/* Filete de área no topo do tile (v5). O §6 do DESIGN.md confina cor de área ao
   rail da sidebar e ao filete sob o h1 da tela — mas o painel É o único shell
   SEM sidebar, então a zona não tinha onde aparecer e doze tiles ficavam
   indistinguíveis. A regra que segura o sistema é a FORMA, não o lugar: área
   continua sendo filete, e filete continua não sendo preenchimento nem chip.
   Herda de --tile-area, setado inline pelo JSX. */
.bento-tile[style*="--tile-area"]::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--tile-area); border-radius: var(--r) var(--r) 0 0;
}
/* Conteúdo que passa da altura declarada rola DENTRO do tile — a altura do grid
   é um contrato, não uma sugestão. */
.bento-corpo { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
/* O painel do copiloto já é o card — aqui o tile só dá a moldura e o cabeçalho. */
/* ── Copiloto: papel KRAFT (v5) ───────────────────────────────────────────
   Onze tiles são papel branco porque são REGISTROS da agência; um é a IA, que
   não é registro — é a coisa que fala. Kraft resolve isso sem sair do mundo:
   continua papel (o canvas é bege, a matéria é a mesma), só que outro papel.
   Uma passagem por fundo escuro foi testada e descartada: era a única superfície
   do app que negava o próprio material.
   Texto PRETO (--ink), como todo o resto do app — 8.9:1 sobre o kraft. */
.t-copiloto {
  padding: var(--e4) var(--e4) var(--e3);
  background: #CFBA99;
  /* Trama de pontos escuros de 1px a cada 5px: é a fibra do papel pardo. Some
     na distância de leitura e aparece de perto — textura de matéria, não ornamento. */
  background-image: radial-gradient(rgba(60, 42, 20, .10) 1px, transparent 1px);
  background-size: 5px 5px;
  color: var(--ink);
}
/* Rótulo em preto junto com o resto (o roxo da zona dá só 3.9:1 sobre kraft e
   ficaria abaixo do piso). A zona segue identificada pelo filete do topo. */
.t-copiloto .bento-cab h2 { color: var(--ink); }
.t-copiloto .mini-link { background: rgba(255, 255, 255, .55); color: var(--ink); }
.t-copiloto .mini-link:hover { background: rgba(255, 255, 255, .85); }
/* O chat tem o PRÓPRIO scroll (.agente-msgs). Sem desligar o do .bento-corpo,
   dois contêineres roláveis se aninham e a roda do mouse move o errado. */
.t-copiloto .bento-corpo { overflow: hidden; }
.t-copiloto .agente-painel {
  box-shadow: none; border-radius: 12px; background: transparent; flex: 1; min-height: 0;
}
.t-copiloto .agente-msgs { padding: var(--e3) 0; }
/* Bolha do assistente: papel claro colado no kraft. Translúcido em vez de branco
   chapado pra a fibra do fundo continuar passando por baixo. */
.t-copiloto .msg.agente {
  background: rgba(255, 253, 248, .72); border-color: transparent; color: var(--ink);
}
.t-copiloto .msg.agente.mut { color: #6A5C46; }
/* Bolha do usuário mantém o azul-tinta de ação do sistema: sobre kraft ele volta
   a ter leitura (o fundo é claro de novo), então não precisa de exceção. */
.t-copiloto .msg.user { background: var(--acao); color: #fff; }
.t-copiloto .agente-sugestao {
  border-color: rgba(60, 42, 20, .28); color: #4A3E2C; background: transparent;
}
.t-copiloto .agente-sugestao:hover { background: rgba(255, 253, 248, .70); color: var(--ink); border-color: transparent; }
.t-copiloto .agente-input { border-top-color: rgba(60, 42, 20, .20); padding: var(--e3) 0 0; }
.t-copiloto .agente-input input {
  background: rgba(255, 253, 248, .80); color: var(--ink); border-color: transparent;
}
.t-copiloto .agente-input input::placeholder { color: #6A5C46; }
.t-copiloto .agente-input input:focus {
  border-color: var(--acao); box-shadow: 0 0 0 3px rgba(29, 78, 137, .18); background: #FFFDF8;
}
.t-copiloto .anexo-botao { background: rgba(255, 253, 248, .80); box-shadow: none; color: var(--ink); }
.t-copiloto .anexo-botao:hover { background: #FFFDF8; box-shadow: none; }
.t-copiloto .msg-fonte { background: rgba(255, 253, 248, .70); border-color: transparent; color: #4A3E2C; }
.t-copiloto .msg-copiar { background: rgba(255, 253, 248, .85); color: var(--ink); }

/* O título do tile carrega a cor da área a que ele pertence — mesmo par do
   filete acima. Era --mut em todos os doze, o que fazia a tela inteira sussurrar
   no mesmo tom e não dizia a que família cada caixa pertencia. */
.bento-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e2); flex: none; padding-bottom: 2px;
}
.bento-cab h2 {
  margin: 0; font-size: var(--t-rotulo); font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tile-area, var(--mut)); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.bento-cab-acoes { display: flex; align-items: center; gap: var(--e1); flex: none; }
.bento-quieto { margin: auto 0; font-size: var(--t-menor); }

.bento-busca-form { display: flex; gap: var(--e2); align-items: center; }
.bento-achados { display: flex; flex-direction: column; gap: 2px; margin-top: var(--e1); }
.bento-achado {
  display: flex; align-items: center; gap: var(--e2); padding: 6px 8px; border-radius: 10px;
  text-decoration: none; color: var(--ink); font-size: 13.5px; min-width: 0;
}
.bento-achado:hover { background: var(--pill); }
.bento-achado-tit { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bento-achado .mut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

.bento-linha {
  display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: 10px;
  text-decoration: none; color: var(--ink); min-width: 0;
}
.bento-linha:hover { background: var(--pill); }
.bento-linha-tit { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Um degrau acima do resto da lista: a viagem em curso é a linha que a agência
   procura primeiro, e ela pesava igual ao voo listado abaixo. */
.bento-linha-tit.destaque { font-size: var(--t-destaque); font-weight: 700; letter-spacing: -.01em; }
/* Ícone + texto na mesma linha de base sem o ícone comer o ellipsis do título. */
.bento-linha-tit.com-ico { display: flex; align-items: center; gap: 7px; }
.bento-linha-tit.com-ico > svg { color: var(--mut); }
.t-agora-linha .bento-linha-tit.com-ico > svg { color: var(--acao); }
.bento-linha .mut.linha-badge { display: flex; align-items: center; gap: 6px; }
/* Subtítulo quebra em vez de truncar: em tile estreito "até 07/08/2026" virava
   "até 0…", o que esconde justamente o dado (a data). Duas linhas cabem. */
.bento-linha .mut {
  font-size: 12.5px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bento-linha.t-agora-linha { background: var(--wash-agora); }
.bento-linha.t-agora-linha:hover { background: var(--acao-bg); }

.bento-tarefas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.bento-tarefas label {
  display: flex; align-items: flex-start; gap: var(--e2); margin: 0;
  padding: 7px 8px; border-radius: 10px; cursor: pointer; font-weight: 400; color: var(--ink);
}
.bento-tarefas label:hover { background: var(--pill); }
/* Alvo de toque: o quadrado desenhado é 16px, a área clicável é a linha inteira. */
.bento-tarefas input[type="checkbox"] { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: var(--acao); }
.bento-tarefa-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bento-tarefas .atrasada .bento-linha-tit { color: var(--err); }
/* Concluída na sessão: fica visível e riscada — é o feedback e o desfazer. */
.bento-tarefas .feita { opacity: .55; }
.bento-tarefas .feita .bento-linha-tit { text-decoration: line-through; }

/* Mini calendário — o dia é ponto de densidade, não chip legível: texto numa
   célula de ~30px seria truncado até virar enigma (o defeito que a Agenda tinha
   com os chips '·'). Aqui o olho lê "que semana está cheia"; o detalhe é a Agenda. */
.mini-nav { display: flex; gap: 2px; flex: none; }
.mini-nav button { padding: 2px 8px; font-size: 12px; line-height: 1.4; }
.mini-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-top: var(--e1); }
.mini-cal-cab {
  text-align: center; font-size: 10px; font-weight: 700; color: var(--mut);
  text-transform: uppercase; letter-spacing: .04em; padding-bottom: 2px;
}
.mini-cal-dia {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 0 3px; border-radius: 8px; text-decoration: none;
  color: var(--ink); font-size: 12px; min-height: 34px;
}
.mini-cal-dia:hover { background: var(--pill); }
.mini-cal-dia.hoje { background: var(--acao); color: #fff; font-weight: 700; }
.mini-cal-num { line-height: 1; font-variant-numeric: tabular-nums; }
.mini-cal-pontos { display: flex; gap: 2px; min-height: 5px; align-items: center; }
.mini-cal-pontos i, .mini-cal-legenda i {
  display: block; width: 5px; height: 5px; border-radius: 50%;
}
.mini-cal-pontos .p-viagem, .mini-cal-legenda .p-viagem { background: var(--acao); }
.mini-cal-pontos .p-voo, .mini-cal-legenda .p-voo { background: var(--mut); }
.mini-cal-pontos .p-tarefa, .mini-cal-legenda .p-tarefa { background: var(--warn); }
.mini-cal-pontos .p-atrasada { background: var(--err); }
/* No dia de hoje o fundo é o próprio azul da ação — o ponto de viagem sumiria. */
.mini-cal-dia.hoje .p-viagem { background: #fff; }
.mini-cal-legenda {
  display: flex; gap: var(--e3); flex-wrap: wrap; padding-top: var(--e2);
  font-size: 11px; color: var(--mut);
}
.mini-cal-legenda span { display: flex; align-items: center; gap: 4px; }

/* Bloco de rascunho (Scratch Pad) */
/* O textarea preenche a altura declarada do tile em vez de um `rows` fixo que
   deixava cinza vazio embaixo. */
.bento-rascunho { display: flex; flex-direction: column; gap: var(--e2); flex: 1; min-height: 0; }
.t-rascunho .bento-corpo { overflow: hidden; }
.bento-rascunho textarea { resize: none; flex: 1; min-height: 80px; line-height: 1.45; }
.bento-rascunho-acoes { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); }
.bento-rascunho-acoes .mut {
  font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Ponto de cor do espaço, na linha do tile. */
.bento-ponto {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle;
}
.t-capturado .bento-linha .mut { display: flex; align-items: center; gap: 6px; }

/* Conhecimento: estrutura real do acervo (cadernos, tags, notas recentes). */
.bento-grupo { display: flex; flex-direction: column; gap: 3px; }
.bento-grupo-rot {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--mut); margin-top: var(--e1);
}
.bento-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.bento-chip-est {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  background: var(--pill); color: var(--ink); border-radius: 99px;
  padding: 3px 10px; font-size: 12.5px; font-weight: 500; max-width: 100%;
}
.bento-chip-est i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.bento-chip-est:hover { background: var(--acao-bg); color: var(--acao); }
.bento-chip-est.mais { color: var(--mut); font-weight: 600; }
.t-acervo .notas-tagchip { text-decoration: none; font-size: 12.5px; }
.t-acervo .bento-atalhos { margin-top: auto; padding-top: var(--e2); }

.bento-atalhos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e1); }
.bento-atalhos a {
  text-decoration: none; color: var(--ink); font-size: 13px; font-weight: 500;
  background: var(--pill); border-radius: 10px; padding: 9px 10px; text-align: center;
}
.bento-atalhos a:hover { background: var(--acao-bg); color: var(--acao); }

/* Laptop: 12 → 6 colunas. Os spans caem pela metade, as faixas viram duas por
   linha e a altura declarada continua valendo. */
@media (max-width: 1400px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .t-busca { grid-column: span 6; }
  .t-agora, .t-tarefas { grid-column: span 3; }
  .t-copiloto { grid-column: span 4; }
  .t-cal { grid-column: span 2; grid-row: span 4; }
  .t-acervo { grid-column: span 3; }
  .t-rascunho { grid-column: span 3; grid-row: span 3; }
  .t-espacos { grid-column: span 2; grid-row: span 3; }
  .t-fixadas, .t-capturado { grid-column: span 2; }
}
/* Tablet: 2 colunas, altura livre. Abaixo daqui a altura declarada em linhas
   passa a atrapalhar (tile largo virou estreito e o conteúdo cresce), então o
   span de linha é solto e cada tile volta a ter a própria altura. */
@media (max-width: 1020px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .bento-tile { grid-column: span 1 !important; grid-row: auto !important; }
  .t-busca { grid-column: span 2 !important; }
  .t-copiloto { min-height: 380px; }
  .bento-corpo { overflow-y: visible; }
}
/* Mobile: coluna única, reordenada por URGÊNCIA — o que vence hoje primeiro, não
   a ordem que o desktop precisava. */
@media (max-width: 700px) {
  .bento-shell { padding: var(--e4) var(--e3) var(--e6); }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento-tile, .t-busca { grid-column: span 1 !important; }
  .t-busca { order: 1; } .t-tarefas { order: 2; } .t-agora { order: 3; }
  .t-cal { order: 4; } .t-copiloto { order: 5; }
  .t-rascunho { order: 7; } .t-fixadas { order: 8; } .t-acervo { order: 9; }
  .t-espacos { order: 10; } .t-capturado { order: 11; }
  .t-copiloto { min-height: 340px; }
  .bento-busca-form { flex-wrap: wrap; }
  /* `flex: 1` nos três dividia a largura em partes iguais e quebrava "Nova
     viagem" em duas linhas. A ação primária fica com a linha inteira; as duas
     secundárias dividem a de baixo. */
  .bento-topo-acoes { width: 100%; }
  .bento-topo-acoes > .primario { flex: 1 0 100%; }
  .bento-topo-acoes > .mini-link { flex: 1; text-align: center; }
  .bento-atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Toast */
/* z-index 99, acima do drawer, DE PROPÓSITO: o toast reporta erro de salvamento,
   inclusive erro vindo de dentro do drawer. Empurrá-lo pra trás do scrim
   esconderia justamente a mensagem que o usuário precisa ler. Com o drawer
   estreitado pra 440px + 12px de margem, os dois só se cruzam abaixo de ~900px
   de viewport — largura em que estar por cima é o comportamento certo. */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 99;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 14px;
  box-shadow: 0 4px 16px rgba(19,20,23,.25);
}
.toast.erro { background: var(--err); }

/* Página inicial: lead + login */
.landing { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--paper); }
.landing-grid { display: grid; grid-template-columns: 440px 340px; gap: 18px; align-items: stretch; }
.lead { display: flex; flex-direction: column; padding: 24px; }
.lead-destaque {
  background: var(--brand-bg); border-radius: var(--r);
  padding: 12px 14px; font-size: 14px;
}
.lead-destaque strong { color: var(--brand-ink); }
.login-caixa {
  width: 100%; background: #fff; border-radius: var(--r); box-shadow: var(--sombra); padding: 28px;
  align-self: center;
}
@media (max-width: 860px) { .landing-grid { grid-template-columns: 1fr; width: min(440px, 94vw); } }

/* Revisão de documentos: lado a lado */
.revisao { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.revisao .doc-visor { position: sticky; top: 16px; }
.revisao .doc-visor iframe, .revisao .doc-visor img {
  width: 100%; min-height: 480px; border: 1px solid var(--line); border-radius: var(--r); background: #fff;
}
@media (max-width: 860px) { .revisao { grid-template-columns: 1fr; } .revisao .doc-visor { position: static; } }

/* ── Acervo / ingestão Evernote ── */
/* Categoria não é estado: chip NEUTRO (DESIGN.md §6) */
.chip-cat {
  display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; background: var(--chip); color: var(--mut);
  border-radius: 99px; padding: 2px 8px; white-space: nowrap;
}
.prog {
  display: inline-block; width: 180px; height: 8px; border-radius: 99px;
  background: var(--chip); border: 1px solid var(--line); overflow: hidden; vertical-align: middle;
}
/* scaleX, não width: animar width causa reflow a cada frame (o detector pega).
   O JSX passa --p (0–1); transform-origin left faz a barra crescer da esquerda. */
.prog > span {
  display: block; height: 100%; width: 100%; background: var(--acao);
  transform: scaleX(var(--p, 0)); transform-origin: left;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) { .prog > span { transition: none; } }
.acervo-nota, .dup-grupo { cursor: pointer; transition: box-shadow .12s; padding: 9px 12px; }
.acervo-nota:hover, .dup-grupo:hover { box-shadow: var(--sombra-hover); }

/* ── Copiloto ── */
.msg-acoes { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; align-items: center; }
.msg-fonte {
  font-size: 11px; font-weight: 600; background: var(--chip); border: 1px solid var(--line);
  border-radius: 99px; padding: 1px 8px; color: var(--mut); text-decoration: none;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.msg-fonte { color: var(--brand-ink); }
.msg-copiar {
  font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 99px;
  margin-left: auto; background: #fff;
}
.anexo-botao {
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: none; background: #fff; box-shadow: var(--sombra);
  border-radius: 8px; padding: 0 9px; margin: 0; font-size: 15px;
}
.anexo-botao:hover { box-shadow: var(--sombra-hover); }
.copiloto-tela {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px;
  height: 100vh; padding: 12px; background: var(--canvas);
}
/* Card flutuante v3 (era border-right + fundo canvas chapado — mesma superfície
   do body por trás de uma borda, estrutura v2 proibida pelo §3 DESIGN.md). */
.conversa-lista {
  background: var(--card); border-radius: var(--r); box-shadow: var(--sombra);
  padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
}
.conversa-item {
  text-align: left; font-size: 13px; font-weight: 500; border: none; background: none;
  padding: 6px 10px; border-radius: 7px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conversa-item:hover { background: var(--chip); border-color: transparent; }
.conversa-item.ativa { background: var(--brand-bg); color: var(--brand-ink); font-weight: 600; }
.copiloto-chat { display: flex; flex-direction: column; min-width: 0; }
.copiloto-chat .agente-painel { max-width: 860px; width: 100%; margin: 0 auto; }
@media (max-width: 860px) { .copiloto-tela { grid-template-columns: 1fr; } .conversa-lista { display: none; } }

/* Detalhe da viagem com agente lateral — padding pro .agente-painel (AgentePanel)
   flutuar (mesmo tratamento de .agente-col-global acima). */
.viagem-grid { display: grid; grid-template-columns: 1fr 360px; gap: 0; }  /* alinhado à coluna global */
.viagem-grid .agente-col { height: 100vh; position: sticky; top: 0; padding: 12px; }
@media (max-width: 980px) { .viagem-grid { grid-template-columns: 1fr; } .viagem-grid .agente-col { display: none; } }

/* ── Tela Notas: 3 painéis flutuantes (Paper soft v3 — DESIGN.md §5:
   "toda superfície é card flutuante", sem borda de superfície; --line só
   como divisor interno). Cada painel é seu próprio .card sobre --canvas,
   separados por gap — não uma faixa branca contínua com border-right. ── */
/* height: 100vh, não 100% — o pai (.app-body) não tem altura, então `100%`
   resolvia pra auto e o grid crescia até a altura do painel mais alto (a árvore
   de tags chegava a 3400px). Com isso o `overflow-y: auto` dos painéis nunca
   valia: quem rolava era a página inteira, e o conteúdo centralizado do painel
   vazio caía fora da tela. Mesmo tratamento do .copiloto-tela, que já era 100vh. */
.notas-shell {
  display: grid; grid-template-columns: 220px 300px minmax(0, 1fr); gap: 12px;
  height: 100vh; min-height: 0; padding: 12px; background: var(--canvas);
}
.notas-arvore, .notas-lista, .notas-nota {
  background: var(--card); border-radius: var(--r); box-shadow: var(--sombra); overflow-y: auto;
}
.notas-arvore { padding: 10px 8px; }
.notas-lista { padding: 10px; }
.notas-nota { padding: 14px 18px; }
.notas-vazia { display: flex; align-items: center; justify-content: center; }
.notas-no { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; cursor: pointer; color: var(--ink); font-size: 13px; }
.notas-no:hover { background: var(--pill); }
.notas-no.ativo { background: var(--pill); color: var(--ink); font-weight: 600; }
.notas-no-nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notas-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.notas-item { cursor: pointer; margin-bottom: 6px; }
/* item já vive dentro do card flutuante .notas-lista — sem sombra própria
   (card-dentro-de-card = 2 sombras empilhadas, proibido no DESIGN.md §5);
   --line como divisor interno é o caso de uso canônico do token (§3). */
.notas-lista .notas-item { box-shadow: none; border: 1px solid var(--line); padding: 9px 11px; }
.notas-lista .notas-item:hover { box-shadow: none; background: var(--pill); border-color: transparent; }
.notas-snippet { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notas-item-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.notas-tagchip { display: inline-block; background: var(--pill); border-radius: 99px; padding: 1px 8px; font-size: 12px; margin-right: 4px; }
.notas-tagchip a { cursor: pointer; color: inherit; margin-left: 3px; opacity: .6; }
.notas-tagchip a:hover { opacity: 1; }

/* Task 7 — gestão da estrutura: botões de criar + menu ⋯ por nó (popover). */
.notas-criar { display: flex; gap: 6px; margin: 2px 0 10px; }
.notas-criar button { flex: 1; padding: 4px 4px; font-size: 12px; }
.notas-sec-tags { display: flex; align-items: center; justify-content: space-between; padding-right: 4px; }
.notas-menu-btn { opacity: 0; margin-left: auto; flex: 0 0 auto; }
.notas-no:hover .notas-menu-btn { opacity: 1; }
/* Card flutuante padrão (§5 DESIGN.md: sombra, não borda) — z-index acima do
   .drawer-fundo transparente (90) que fecha o popover no clique fora. */
.notas-menu {
  position: fixed; z-index: 91; background: var(--card); border-radius: var(--r); box-shadow: var(--sombra);
  padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 190px; font-size: 13.5px;
}
.notas-menu a { cursor: pointer; }
.notas-menu a.perigo { color: var(--err); }
.notas-menu-cores { display: flex; gap: 4px; flex-wrap: wrap; }
/* Swatch do popover é redondo e mostra o par (fundo pastel + borda no texto) —
   .nota-cor em si (quadrado 22px) segue compartilhado com a paleta do editor. */
.notas-menu-cores .nota-cor { border-radius: 50%; border-width: 2px; }
.nota-corpo { font-size: 15px; line-height: 1.55; }
.nota-corpo h1 { font-size: 19px; } .nota-corpo h2 { font-size: 16px; } .nota-corpo h3 { font-size: 15px; font-weight: 600; }

/* Editor de nota (Task 5) — toolbar/paleta usam --line só como divisor
   interno (§3 DESIGN.md, mesmo caso de uso do .notas-lista .notas-item);
   corpo editável segue o padrão de Inputs/selects (§5): fundo #F5F6F7,
   radius 12, sem borda dura, foco = borda 1px --ink. */
.nota-titulo { flex: 1; font-size: 19px; font-weight: 700; border: none; background: transparent; padding: 4px 0; }
.nota-titulo:focus { outline: none; border-bottom: 2px solid var(--ink); }
.nota-toolbar {
  display: flex; gap: 4px; flex-wrap: wrap; padding: 6px 2px;
  border-bottom: 1px solid var(--line); background: var(--card);
  position: sticky; top: 0; z-index: 2;
}
.nota-paleta { display: flex; gap: 6px; padding: 6px 2px; border-bottom: 1px solid var(--line); }
.nota-cor { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); cursor: pointer; padding: 0; }
.nota-editavel {
  min-height: 320px; background: #F5F6F7; border: 1px solid transparent;
  border-radius: 12px; padding: 12px 14px; margin-top: 8px;
}
.nota-editavel:focus { outline: none; border-color: var(--ink); }
.nota-tags { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 6px 0 10px; }
.nota-tag-busca { width: 90px; border: none; background: transparent; font-size: 13px; padding: 4px 2px; }
.nota-tag-sugerida { cursor: pointer; border: 1px dashed var(--line); background: transparent; color: var(--mut); }
.nota-caderno-select { flex: 0 0 170px; }
.nota-anexos { margin-top: 12px; }
.nota-anexo { display: flex; gap: 8px; align-items: center; padding: 4px 0; font-size: 13.5px; }
.nota-anexo a { cursor: pointer; color: var(--ink); text-decoration: underline; }
.notas-voltar { display: none; }
@media (max-width: 900px) {
  .notas-shell { grid-template-columns: minmax(0, 1fr); }
  .notas-shell.painel-arvore .notas-lista, .notas-shell.painel-arvore .notas-nota { display: none; }
  .notas-shell.painel-lista .notas-arvore, .notas-shell.painel-lista .notas-nota { display: none; }
  .notas-shell.painel-nota .notas-arvore, .notas-shell.painel-nota .notas-lista { display: none; }
  .notas-voltar { display: inline-block; }
  /* Título input + select de caderno na mesma .linha (flex:1 cada, §.linha > *)
     espremiam o título pra ~50px em telas estreitas — select cai pra linha própria. */
  .notas-nota > .linha { flex-wrap: wrap; }
  .nota-caderno-select { flex: 1 1 100%; }
}