/*
  ponte.css — a ponte entre o mockup e o sistema.

  O mockup aprovado é uma tela só, controlada por JavaScript: a navegação lá
  são <button>. O sistema é multipágina: a navegação aqui são <a>, porque link
  abre em outra aba, funciona sem script e o navegador sabe onde você está.

  Este arquivo NÃO inventa design. Ele só repete, para <a>, as mesmas regras que
  o app.css já define para <button>. Nada de cor, medida ou fonte nova: tudo sai
  das variáveis do mockup.

  Regra: se precisar de uma decisão visual nova, ela nasce no mockup e desce
  para o app.css. Aqui só entra tradução de elemento (ADR-0004 e ADR-0009).
*/

/* ---- navegação: <a> onde o mockup usava <button> ---- */
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
  border-left: 2px solid transparent;
  text-decoration: none;
}

.nav a svg { flex: 0 0 auto; opacity: .75; }
.nav a:hover { color: var(--text); }
.nav a:hover svg { opacity: 1; }

.nav a.on {
  color: var(--honey);
  border-left-color: var(--honey);
  background: var(--surface);
  font-weight: 600;
}

.nav a.on svg { opacity: 1; }

/* Rótulo de grupo: o app.css usa o padding do .sec, menor que o dos itens,
   e por isso a palavra encostava na margem. Aqui ele alinha com os itens. */
.nav .sec {
  padding: 15px 16px 5px;
  margin: 0;
}

.nav .sec:first-of-type { padding-top: 6px; }

/* ---- botão do menu, na barra do topo ---- */
.menubt {
  background: none;
  border: 1px solid rgba(255, 255, 255, .28);
  color: inherit;
  padding: 5px 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}

.menubt:hover { border-color: currentColor; }

/* ---- menu recolhido no computador: só os ícones ---- */
:root[data-menu="fechado"] .body { grid-template-columns: 50px 1fr; }
:root[data-menu="fechado"] .nav a { justify-content: center; padding: 10px 0; gap: 0; }
:root[data-menu="fechado"] .nav a span { display: none; }

/* O rótulo do grupo vira um traço: texto de 3 letras em 50px fica ilegível */
:root[data-menu="fechado"] .nav .sec {
  font-size: 0;
  padding: 8px 14px 7px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

:root[data-menu="fechado"] .nav .sec:first-of-type { border-top: none; margin-top: 0; padding-top: 2px; }

/* ---- fundo escuro da gaveta, só existe no celular ---- */
.fundo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 30;
}

/* ---- link dentro do conteúdo: herda a cor do texto, sublinha ao passar ---- */
.view a,
.ph a { color: inherit; text-decoration: none; }
.view a:hover,
.ph a:hover { text-decoration: underline; text-decoration-color: var(--honey); }

/* chip que é link (filtros da carteira, troca de funil) */
.filters a.chip { text-decoration: none; }
.filters a.chip:hover { color: var(--text); border-color: var(--line-2); }

/* ---- o botão de concluir mora dentro de um <form>, não pode virar bloco ---- */
.task form { display: contents; }

/* ---- aviso de topo: usa as cores que o app.css já define ---- */
.note.good { border-left: 3px solid var(--ok); }
.note.warn { border-left: 3px solid var(--honey); }

/* ---- coluna de ação da .rule: largura fixa ----
   O app.css não previu .rule com ação do lado direito. Sem largura fixa, a
   coluna acompanha o tamanho do texto e o botão dança de linha para linha
   conforme o preço tem mais ou menos dígitos.
   Medidas tiradas do próprio mockup: mesmo respiro do .acts. */
.rule > .acao {
  flex: 0 0 138px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  text-align: right;
}

.rule > .acao .tag { display: block; text-align: right; }
.rule > .acao .btn { width: 100%; text-align: center; }
.rule > .acao form { margin: 0; }

@media (max-width: 560px) {
  .rule { flex-wrap: wrap; }
  .rule > .acao { flex: 1 1 100%; text-align: left; }
  .rule > .acao .tag { text-align: left; }
}

/* ==================================================================
   Correções de respiro e largura
   ==================================================================
   O app.css define .hd só com cor, fonte e fundo — sem padding. No mockup
   ela sempre aparecia dentro de um elemento que já dava o respiro; nas telas
   do sistema ela é o cabeçalho do painel, e sem padding o texto encosta na
   borda. Mesma coisa com tabela larga dentro de card estreito.
   ------------------------------------------------------------------ */

/* ---- cabeçalho de painel ---- */
.panel > .hd,
.chartbox > .hd,
.panel > .head,
.frame .hd {
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
}

/* ---- tabela dentro de painel: rola em vez de vazar ---- */
.panel { overflow-x: auto; }

/* ---- cards de gráfico: mais largos, e a tabela cabe dentro ---- */
.charts { grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); }

.chartbox { overflow: hidden; }
.chartbox table { min-width: 0; table-layout: fixed; }
.chartbox th,
.chartbox td { padding: 8px 11px; }

/* nome da etapa ou do motivo: corta com reticências em vez de empurrar a linha */
.chartbox td:first-child,
.chartbox th:first-child { width: 34%; }
.chartbox td:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* a coluna do valor precisa caber inteira: é ela que estava sendo cortada */
.chartbox td:last-child,
.chartbox th:last-child {
  width: 27%;
  text-align: right;
  white-space: nowrap;
}

.chartbox .bar { min-width: 40px; }

/* ---- listas de tarefa e item: respiro igual ao dos painéis ---- */
.panel > .task:first-of-type { border-top: none; }
.panel > .pitem:first-of-type { margin-top: 11px; }
.panel > .pitem { margin-left: 13px; margin-right: 13px; }

/* ---- indicadores: legenda não encosta na borda de baixo ---- */
.kpi { padding: 12px 13px 13px; }

/* ---- rodapé de painel ---- */
.panel > .note:last-child { border-bottom: none; }

@media (max-width: 700px) {
  .charts { grid-template-columns: 1fr; }
  .chartbox td:first-child { width: auto; }
}

/* larguras das 4 colunas dos quadros de relatório:
   rótulo | número | barra | valor */
.chartbox td:nth-child(2),
.chartbox th:nth-child(2) { width: 14%; white-space: nowrap; }
.chartbox td:nth-child(3),
.chartbox th:nth-child(3) { width: 25%; }

/* ---- linhas de "rótulo à esquerda, número à direita" ----
   O app.css dá a estas linhas 13px de recuo, o mesmo do cabeçalho. Só que
   elas vão de ponta a ponta do painel, e o número encosta na borda direita.
   Aqui elas ganham o respiro que uma linha de leitura precisa, e o painel
   fecha com folga embaixo em vez de cortar rente. */
.panel > .kv,
aside .panel > .kv {
  padding: 7px 15px;
  gap: 16px;
}

.panel > .kv:first-of-type { padding-top: 13px; }
.panel > .kv:last-child { padding-bottom: 14px; }

/* rótulo pequeno não pode empurrar o número para fora */
.panel > .kv span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel > .kv b { white-space: nowrap; flex: 0 0 auto; }

/* quando a última coisa do painel é um aviso, ele fecha o bloco sozinho */
.panel > .note:last-child { padding-bottom: 13px; }

/* ---- painel de dois blocos lado a lado: respiro entre eles ---- */
.grid2 > .panel:last-child { margin-bottom: 15px; }


/* ==================================================================
   O sistema ocupa a tela
   ==================================================================
   O .app do mockup tinha largura máxima e margem em volta porque era uma
   página de apresentação, com o sistema desenhado dentro de uma moldura. Num
   sistema de verdade a moldura é a própria janela: sobra branco à toa e a
   tabela de orçamentos fica espremida enquanto metade da tela está vazia. */
.app {
  max-width: none;
  margin: 0;
  padding: 0;
}

.frame {
  border: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.frame > .body { flex: 1; min-height: 0; }

/* ==================================================================
   Celular: o menu vira gaveta
   ==================================================================
   Menu lateral fixo numa tela de 390px come metade do espaço útil. Aqui ele
   sai do fluxo, fica escondido fora da tela e entra por cima quando chamado.
   O mesmo botão da barra serve para os dois casos: no computador ele encolhe
   o menu, no celular ele abre a gaveta. */
@media (max-width: 860px) {
  .body,
  :root[data-menu="fechado"] .body { grid-template-columns: 1fr; }

  .nav,
  :root[data-menu="fechado"] .nav {
    /* O app.css transforma o menu em barra horizontal nesta largura.
       A gaveta precisa voltar a ser lista vertical, senão os itens ficam
       lado a lado dentro dela. */
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 236px;
    z-index: 40;
    overflow-y: auto;
    border-right: 1px solid var(--line-2);
    transform: translateX(-100%);
    transition: transform .18s ease;
  }

  :root[data-gaveta="aberta"] .nav { transform: none; }

  /* Dentro da gaveta o menu é sempre por extenso, mesmo recolhido no PC */
  :root[data-menu="fechado"] .nav a { justify-content: flex-start; padding: 10px 16px; gap: 10px; }
  :root[data-menu="fechado"] .nav a span { display: inline; }
  :root[data-menu="fechado"] .nav .sec {
    font-size: .55rem;
    padding: 15px 16px 5px;
    border-top: none;
    margin-top: 0;
  }

  .topbar { padding: 9px 11px; }
  .searchwrap { order: 3; flex: 1 1 100%; max-width: none; }
  .brand em { display: none; }

  .grid2 { grid-template-columns: 1fr; }
  .view { padding: 13px; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

@media (min-width: 861px) {
  /* No computador não existe gaveta nem fundo escuro */
  .fundo { display: none !important; }
}

/* ---- lista de resposta pronta, chamada digitando "/" ----
   O mockup tinha os atalhos como botões fixos embaixo do campo (.macro). Aqui
   eles viram uma lista que aparece enquanto se digita, que é o comportamento
   que todo mundo já conhece de outros aplicativos. Cores e medidas continuam
   sendo as do mockup. */
.comatalho { position: relative; }

.atalhos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 4px);
  z-index: 20;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: 0 -6px 22px rgba(0, 0, 0, .28);
}

.atalhos li {
  padding: 8px 11px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 9px;
  align-items: baseline;
}

.atalhos li:last-child { border-bottom: none; }
.atalhos li:hover,
.atalhos li.sel { background: var(--surface-2); }
.atalhos li.sel { box-shadow: inset 3px 0 0 var(--honey); }

.atalhos b {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--honey);
  white-space: nowrap;
}

.atalhos span { font-size: .82rem; font-weight: 600; }

.atalhos em {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ==================================================================
   INBOX — três colunas, como aplicativo de conversa
   ==================================================================
   O mockup desenhou o inbox como lista de painéis empilhados, e na prática
   isso vira relatório: o atendente sai da conversa toda vez que troca de
   cliente. Aqui a lista, a conversa e o painel do cliente convivem, e o
   histórico rola sozinho até a última mensagem.

   Nada de cor nova: tudo sai das variáveis do mockup.
   ------------------------------------------------------------------ */

.view:has(.inbox) { padding: 0; overflow: hidden; }

.inbox {
  display: grid;
  grid-template-columns: 320px 1fr 300px;
  height: 100%;
  min-height: 0;
  background: var(--ground);
}

/* ---------- coluna 1: lista ---------- */
.ibx-lista {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.ibx-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.ibx-chip {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 4px 10px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ibx-chip:hover { color: var(--text); border-color: var(--muted); }

.ibx-chip.on {
  color: var(--honey);
  border-color: var(--honey);
  background: color-mix(in srgb, var(--honey) 12%, transparent);
}

.ibx-chip b { font-weight: 700; opacity: .8; }

.ibx-dono { flex: 1 1 100%; }
.ibx-dono select { width: 100%; }

.ibx-conversas {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.ibx-conversas li { border-bottom: 1px solid var(--line); }

.ibx-conversas a {
  display: flex;
  gap: 11px;
  padding: 12px 13px;
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
}

.ibx-conversas a:hover { background: var(--surface-2); text-decoration: none; }

.ibx-conversas li.on a {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--honey);
}

.ibx-av {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pine);
  color: var(--ground);
  font-weight: 700;
  font-size: .9rem;
}

.ibx-meio { flex: 1; min-width: 0; display: block; }

.ibx-l1 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.ibx-l1 b {
  font-size: .85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ibx-l1 em {
  font-style: normal;
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--faint);
  white-space: nowrap;
}

.ibx-l2 {
  display: block;
  color: var(--muted);
  font-size: .79rem;
  margin: 2px 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ibx-l3 { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.ibx-canal,
.ibx-janela,
.ibx-dono-nome {
  font-family: var(--mono);
  font-size: .57rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--faint);
}

.ibx-janela { border-radius: 999px; padding: 2px 7px; border: 1px solid var(--line-2); }
.ibx-janela.viva { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.ibx-janela.morta { color: var(--brick); border-color: color-mix(in srgb, var(--brick) 45%, transparent); }

.ibx-vazio, .ibx-dica {
  padding: 22px 14px;
  color: var(--muted);
  font-size: .83rem;
  line-height: 1.6;
}

/* ---------- coluna 2: conversa ---------- */
.ibx-thread {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--ground);
}

.ibx-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.ibx-topo b { display: block; font-size: 1rem; font-weight: 600; }
.ibx-topo span { display: block; color: var(--muted); font-size: .79rem; margin-top: 2px; }

.ibx-selos { display: flex; gap: 6px; flex-wrap: wrap; }

.ibx-selo {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--muted);
  white-space: nowrap;
}

.ibx-selo.viva { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.ibx-selo.morta { color: var(--brick); border-color: color-mix(in srgb, var(--brick) 45%, transparent); }
.ibx-selo.estado { color: var(--honey); border-color: color-mix(in srgb, var(--honey) 45%, transparent); }

.ibx-msgs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ibx-dia { text-align: center; margin: 6px 0; }

.ibx-dia span {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 11px;
}

.ibx-bolha {
  max-width: min(560px, 78%);
  padding: 9px 13px 7px;
  border-radius: 14px;
  font-size: .87rem;
  line-height: 1.55;
}

.ibx-bolha p { margin: 0; white-space: pre-wrap; word-break: break-word; }

.ibx-bolha.dele {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}

.ibx-bolha.nossa {
  align-self: flex-end;
  background: var(--pine);
  color: var(--ground);
  border-bottom-right-radius: 4px;
}

.ibx-hora {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .04em;
  opacity: .65;
  text-align: right;
}

.ibx-bolha.dele .ibx-hora { color: var(--faint); opacity: 1; }
.ibx-hora .alerta { color: var(--brick); background: var(--surface); padding: 1px 5px; border-radius: 4px; }

.ibx-nada {
  margin: auto;
  text-align: center;
  color: var(--muted);
  padding: 40px 20px;
}

.ibx-nada b { display: block; color: var(--text); margin-bottom: 6px; }

/* ---------- envio ---------- */
.ibx-envio {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 10px 14px 14px;
}

.ibx-abas { display: flex; gap: 4px; margin-bottom: 9px; }

.ibx-abas button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 5px 9px;
  cursor: pointer;
}

.ibx-abas button.on { color: var(--honey); border-bottom-color: var(--honey); }

.ibx-form { display: flex; gap: 9px; align-items: flex-end; }
.ibx-form .comatalho { flex: 1; }

.ibx-form textarea {
  width: 100%;
  resize: vertical;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: .87rem;
}

.ibx-form.nota textarea { border-color: var(--honey); }
.ibx-form .btn { border-radius: 8px; padding: 9px 16px; }

.ibx-bloqueio {
  border: 1px solid color-mix(in srgb, var(--honey) 45%, var(--line-2));
  border-radius: 10px;
  background: color-mix(in srgb, var(--honey) 7%, transparent);
  padding: 13px 15px;
  font-size: .84rem;
  line-height: 1.6;
}

.ibx-bloqueio b { color: var(--text); }
.ibx-bloqueio p { margin: 6px 0 0; color: var(--muted); }
.ibx-bloqueio .saida { color: var(--text); }

/* ---------- coluna 3: painel ---------- */
.ibx-painel {
  border-left: 1px solid var(--line);
  background: var(--surface);
  overflow-y: auto;
  min-height: 0;
}

.ibx-bloco { padding: 14px 15px; border-bottom: 1px solid var(--line); }

.ibx-bloco h3 {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
}

.ibx-kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  font-size: .81rem;
  padding: 4px 0;
}

.ibx-kv span { color: var(--muted); }
.ibx-kv b { text-align: right; }

.ibx-bloco label {
  display: block;
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 9px 0 3px;
}

.ibx-bloco select,
.ibx-bloco input { width: 100%; border-radius: 6px; }
.ibx-bloco .btn { width: 100%; margin-top: 10px; border-radius: 6px; }

.ibx-nota {
  border: 1px solid var(--line);
  border-left: 3px solid var(--honey);
  border-radius: 8px;
  padding: 9px 11px;
  margin-bottom: 8px;
  font-size: .81rem;
}

.ibx-nota b { font-size: .78rem; }
.ibx-nota em { font-style: normal; font-family: var(--mono); font-size: .58rem; color: var(--faint); margin-left: 6px; }
.ibx-nota p { margin: 5px 0 0; color: var(--muted); line-height: 1.55; }

/* ---------- telas menores ---------- */
@media (max-width: 1200px) {
  .inbox { grid-template-columns: 290px 1fr; }
  .ibx-painel { display: none; }
}

@media (max-width: 860px) {
  .view:has(.inbox) { overflow: auto; }
  .inbox { grid-template-columns: 1fr; height: auto; }
  .ibx-lista { border-right: none; border-bottom: 1px solid var(--line); max-height: 46vh; }
  .ibx-msgs { max-height: 55vh; }
}

/* garante altura para o inbox esticar dentro do quadro */
.frame > .body { min-height: 0; }
.view { min-height: 0; }

/* ==================================================================
   Suavizar as quinas
   ==================================================================
   O mockup foi desenhado com cantos retos, e num sistema inteiro isso deixa
   a tela dura. Raio pequeno, aplicado de forma consistente: continua sóbrio,
   mas para de parecer planilha. Nenhuma cor muda.
   ------------------------------------------------------------------ */
.panel,
.chartbox,
.frm,
.filters,
.empty,
.code,
.rule,
.pitem,
.kpis { border-radius: 8px; }

.kpis { overflow: hidden; }

.btn,
.tag,
.chip,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="number"],
input[type="tel"],
input[type="search"],
select,
textarea { border-radius: 6px; }

.chip, .tag { border-radius: 999px; }

.lcard { border-radius: 12px; }
.kc { border-radius: 8px; }
.searchwrap input { border-radius: 999px; padding-left: 13px; }
.menubt { border-radius: 6px; }

/* campo em foco: contorno na cor do sistema, não o azul do navegador */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--honey);
  outline-offset: 1px;
  border-color: var(--honey);
}

/* ==================================================================
   Rodapé do menu: quem sou eu, tema e sair
   ==================================================================
   O mockup não previu rodapé no menu. Ele é o lugar onde todo sistema põe a
   conta do usuário, e é para lá que a pessoa olha por instinto quando quer
   trocar a própria senha ou sair. Medidas e cores continuam sendo as do
   mockup. */
.nav { display: flex; flex-direction: column; }
.ibx-espaco { flex: 1; min-height: 12px; }

.rodape {
  border-top: 1px solid var(--line);
  padding: 9px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--surface-2);
}

/* ---- escolha do tema ---- */
.temas {
  display: flex;
  gap: 3px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 3px;
  background: var(--surface);
}

.temas .tema {
  flex: 1;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--faint);
  cursor: pointer;
  padding: 6px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .78rem;
  line-height: 1;
}

.temas .tema:hover { color: var(--text); }

.temas .tema.on {
  color: var(--honey);
  background: color-mix(in srgb, var(--honey) 13%, transparent);
}

/* na tela de perfil os botões mostram o nome do tema */
.panel .temas { margin: 12px 13px; padding: 4px; }
.panel .temas .tema { padding: 9px 6px; font-size: .8rem; }

/* ---- cartão do usuário ---- */
.euzinho {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
}

.euzinho:hover { background: var(--surface); text-decoration: none; }
.euzinho.on { border-color: var(--line-2); background: var(--surface); }

.euzinho-av {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pine);
  color: var(--ground);
  font-weight: 700;
  font-size: .78rem;
}

.euzinho-txt { min-width: 0; line-height: 1.25; }

.euzinho-txt b {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.euzinho-txt em {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: .57rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- sair ---- */
.sairbt {
  width: 100%;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.sairbt:hover { color: var(--brick); border-color: var(--brick); }

/* ---- menu recolhido: rodapé em coluna, só ícones ---- */
:root[data-menu="fechado"] .rodape { padding: 8px 6px; gap: 6px; }
:root[data-menu="fechado"] .temas { flex-direction: column; }
:root[data-menu="fechado"] .euzinho { justify-content: center; padding: 6px 0; }
:root[data-menu="fechado"] .euzinho-txt { display: none; }
:root[data-menu="fechado"] .sairbt { justify-content: center; padding: 7px 0; }
:root[data-menu="fechado"] .sairbt span { display: none; }

@media (max-width: 860px) {
  :root[data-menu="fechado"] .temas { flex-direction: row; }
  :root[data-menu="fechado"] .euzinho { justify-content: flex-start; padding: 7px 8px; }
  :root[data-menu="fechado"] .euzinho-txt { display: block; }
  :root[data-menu="fechado"] .sairbt { justify-content: flex-start; padding: 7px 9px; }
  :root[data-menu="fechado"] .sairbt span { display: inline; }
}

/* o botão de sair da barra do topo some: ele agora mora no rodapé do menu */
.topbar .topright form { display: none; }

/* ==================================================================
   Refino geral das telas
   ==================================================================
   Mesmas cores e mesmas fontes do mockup. O que muda aqui é respiro,
   hierarquia e retorno visual — o que separa uma tela que funciona de uma
   tela que dá vontade de usar. */

/* cabeçalho de painel com um pouco mais de presença */
.panel > .hd,
.chartbox > .hd {
  font-size: .58rem;
  letter-spacing: .11em;
  color: var(--muted);
  background: var(--surface-2);
}

/* linha de tabela responde ao mouse: ajuda a acompanhar a leitura */
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }

/* cabeçalho de tabela grudado no topo ao rolar listas longas */
.panel thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* botões: alvo maior e reação ao toque */
.btn {
  padding: 7px 13px;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}

.btn:hover { color: var(--text); border-color: var(--muted); }
.btn.pri:hover { color: #1B1B16; }
.btn:active { transform: translateY(1px); }

/* campos com altura confortável */
input, select, textarea {
  padding: 7px 10px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--text);
  font-size: .85rem;
}

input:disabled { opacity: .55; }

/* formulário em grade: respiro entre os campos */
.frm { gap: 0; }
.frm .fld { padding: 12px 13px; }

/* avisos com um filete da cor do assunto */
.note { border-left: 3px solid var(--line-2); }
.note.good { border-left-color: var(--ok); }
.note.warn { border-left-color: var(--honey); }

/* Espaço entre blocos EMPILHADOS.
   Dentro de uma grade quem separa é o gap, e margem no irmão adjacente
   empurra o segundo quadro para baixo — era isso que deixava os quadros
   vizinhos começando em alturas diferentes. */
.view > .panel + .panel,
.view > .chartbox + .chartbox,
.view > .panel + .charts,
.view > .charts + .panel,
.view > .note + .panel,
.grid2 > div > .panel + .panel,
.grid2 > aside > .panel + .panel { margin-top: 16px; }

/* item de grade nunca ganha margem: o gap já cuida disso */
.charts > *,
.semana > *,
.grid2 > *,
.kpis > * { margin-top: 0; }

/* estado vazio menos árido */
.empty {
  border-style: dashed;
  border-radius: 8px;
  margin: 13px;
  padding: 26px 18px;
}

/* faixa de indicadores: números respirando */
.kpi b { line-height: 1.15; }
.kpi em { line-height: 1.4; }

/* barra do topo com um pouco mais de altura e sombra sutil */
.topbar {
  padding: 11px 14px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}

/* chip de filtro como pílula */
.filters .chip { border-radius: 999px; padding: 5px 12px; }
.filters .chip.sel { box-shadow: none; border-color: var(--honey); color: var(--honey); }

/* cartão do kanban levanta ao passar o mouse */
.kc { transition: border-color .12s ease, transform .12s ease; }
.kc:hover { border-color: var(--line-2); transform: translateY(-1px); }

/* linha do tempo: leitura mais leve */
.tl .c span { line-height: 1.6; }

/* ==================================================================
   Largura de leitura e respiro entre blocos
   ==================================================================
   Tirar a largura máxima do sistema resolveu o "painel pequeno", mas foi longe
   demais: numa tela de 1920px a tabela estica de ponta a ponta e o olho perde
   a linha. O limite volta, agora no CONTEÚDO e não na moldura — o menu segue
   colado na borda, e o que se lê fica numa largura confortável.

   Junto vem o min-width: 0. Item de grid não encolhe abaixo do conteúdo sem
   ele, e era isso que empurrava o quarto quadro para fora da tela.
   ------------------------------------------------------------------ */

.view { padding: 18px 20px 26px; }

.view > * {
  max-width: 1560px;
  margin-left: auto;
  margin-right: auto;
}

/* o inbox é tela cheia de propósito */
.view > .inbox { max-width: none; }

/* ---- nada de item de grid empurrando o vizinho para fora ---- */
.charts > *,
.grid2 > *,
.kpis > *,
.board > * { min-width: 0; }

.charts, .grid2, .kpis, .board { min-width: 0; }

/* ---- respiro entre os blocos grandes ---- */
.kpis { margin-bottom: 16px; }
.charts { margin-bottom: 16px; gap: 16px; }
.grid2 { gap: 16px; margin-bottom: 16px; }
.filters { margin-bottom: 14px; }

/* último bloco da tela não encosta no rodapé */
.view > *:last-child { margin-bottom: 0; }

/* ---- quadros de gráfico: quatro cabem, três respiram melhor ---- */
.charts { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }

/* ---- indicadores: não deixar cada um virar um campo de futebol ---- */
.kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ---- painel de duas colunas: a lateral não pode espremer ---- */
.grid2 { grid-template-columns: minmax(0, 1fr) 320px; }

@media (max-width: 1100px) {
  .grid2 { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .view { padding: 13px 13px 20px; }
  .charts { grid-template-columns: 1fr; }
}

/* linha de rótulo e número: numa coluna larga o número foge para longe do
   rótulo e o olho perde o par. Um limite resolve sem mexer no alinhamento. */
.panel > .kv,
.chartbox > .kv { max-width: 620px; }

/* o mesmo respiro do painel para os quadros de gráfico */
.chartbox > .kv { padding: 7px 15px; }
.chartbox > .kv:first-of-type { padding-top: 13px; }
.chartbox > .kv:last-child { padding-bottom: 14px; }
.chartbox > .note:last-child { padding-bottom: 13px; }

/* ==================================================================
   Alinhamento dos blocos em grade
   ==================================================================
   Item de grid estica até a altura do vizinho mais alto por padrão. Era isso
   que deixava um vão grande embaixo dos quadros curtos: o quadro do SLA tem
   uma nota explicativa, e os outros três esticavam junto com ele.
   ------------------------------------------------------------------ */
.charts,
.grid2,
.semana { align-items: start; }

/* Quatro quadros em duas colunas fecham 2x2. Em três colunas sobra sempre um
   sozinho na segunda linha, com um buraco do lado. */
.charts { grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); }

/* ---- agenda: sete dias, não quatro quadros ---- */
.semana {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  margin-bottom: 16px;
}

.semana > .chartbox { min-width: 0; }
.semana .task { padding: 9px 10px; }
.semana .task .tt b { font-size: .79rem; }
.semana .empty { margin: 10px; padding: 16px 8px; font-size: .78rem; }
.semana > .chartbox > .hd { font-size: .55rem; letter-spacing: .07em; padding: 8px 10px; }

@media (max-width: 1400px) {
  .semana { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .semana { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .semana { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) {
  .charts { grid-template-columns: 1fr; }
}

/* lista de tarefa dentro de quadro de gráfico: mesmo respiro do painel */
.chartbox > .task:first-of-type { border-top: none; }
.chartbox > .empty { margin: 13px; }
.chartbox > .note { border-top: 1px solid var(--line); }

/* ponto separador não aparece sozinho quando o campo do lado está vazio */
.mute:empty, .cch:empty { display: none; }

/* selo de rascunho: conversa com texto começado e não enviado */
.ibx-rascunho {
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--honey);
  border: 1px solid color-mix(in srgb, var(--honey) 45%, transparent);
  border-radius: 999px;
  padding: 2px 7px;
}

/* ==================================================================
   Avisos flutuantes
   ==================================================================
   Antes o aviso de "gravado" entrava no fluxo da página e empurrava tudo para
   baixo. No Inbox, que ocupa a altura da janela, isso jogava o campo de
   mensagem para trás da barra de tarefas do Windows. Agora ele flutua: nasce
   por cima, some sozinho e não move nada de lugar.
   ------------------------------------------------------------------ */
.avisos {
  position: fixed;
  top: 62px;
  right: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(420px, calc(100vw - 36px));
  pointer-events: none;
}

.aviso {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px 11px 14px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
  font-size: .85rem;
  line-height: 1.5;
  animation: avisoEntra .18s ease;
}

.aviso.bom { border-left: 3px solid var(--ok); }
.aviso.ruim { border-left: 3px solid var(--brick); }

.aviso span { flex: 1; min-width: 0; word-break: break-word; }

.aviso button {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--faint);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.aviso button:hover { color: var(--text); }

.aviso.saindo { opacity: 0; transform: translateX(10px); transition: opacity .2s, transform .2s; }

@keyframes avisoEntra {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aviso { animation: none; }
}

@media (max-width: 700px) {
  .avisos { top: auto; bottom: 14px; left: 12px; right: 12px; max-width: none; }
}

/* o inbox ocupa a altura toda sem concorrer com aviso nenhum */
.view:has(.inbox) { display: block; height: 100%; }

/* ==================================================================
   Caixa de envio: emoji, atalho de teclado e botão alinhado
   ------------------------------------------------------------------ */

/* o botão fica na altura do meio do campo, não colado embaixo */
.ibx-form { align-items: center; }
.ibx-form .btn { align-self: center; white-space: nowrap; }

/* barra abaixo do campo */
.ibx-ferramentas {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.ferr {
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
  line-height: 0;
}

.ferr:hover, .ferr.on { color: var(--honey); border-color: var(--honey); }

.ibx-dicaenter {
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- painel de emoji ---- */
.emojis {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 25;
  width: min(330px, 90vw);
  max-height: 260px;
  overflow-y: auto;
  padding: 10px 12px 12px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: 0 -8px 26px rgba(0, 0, 0, .3);
}

.emoji-titulo {
  margin: 8px 0 5px;
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--faint);
}

.emoji-titulo:first-child { margin-top: 0; }

.emoji-grade {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
}

.emoji-grade button {
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 4px 0;
}

.emoji-grade button:hover { background: var(--surface-2); }

@media (max-width: 420px) {
  .emoji-grade { grid-template-columns: repeat(8, 1fr); }
}

/* ---- filtro por canal ---- */
.ibx-canais {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1 1 100%;
  padding-top: 6px;
  margin-top: 2px;
  border-top: 1px solid var(--line);
}

.ibx-chip.canal { gap: 6px; padding-left: 8px; }
.ibx-chip.canal svg { opacity: .8; }
.ibx-chip.canal.on svg { opacity: 1; }

/* ícone do canal na linha da conversa */
.ibx-canal { display: inline-flex; align-items: center; line-height: 0; opacity: .7; }
.ibx-conversas li.on .ibx-canal { opacity: 1; }