/* =======================================================================================
   Mini CRM — Mais Auditores
   Implementacao do Design System (docs/DESIGN-SYSTEM.md), versao 2.1 — roxo + grafite + branco.

   Regra da casa: nenhum valor cru de cor, raio ou sombra em regra de componente. Se falta um
   token, cria-se o token. E o que mantem o sistema um sistema.
   ======================================================================================= */

/* As familias da marca sao usadas quando existem na maquina; nao ha CDN de fonte e nao ha
   arquivo remoto (principio 5 do Design System). Para fixar a tipografia em qualquer maquina,
   coloque os .woff2 em public/fonts/ e acrescente as regras @font-face correspondentes. */
@font-face { font-family: 'Poppins Local'; src: local('Poppins'), local('Poppins-Regular'); font-display: swap; }
@font-face { font-family: 'Playfair Local'; src: local('Playfair Display'), local('PlayfairDisplay-Regular'); font-display: swap; }

:root {
  /* 2.1 — cores de marca */
  --ac-purple: #8C52FF;
  --ac-lilac: #A87BFF;
  --ac-cream: #F6F5FA;
  --ac-stone: #ACA8B8;
  --ac-graphite: #545454;
  --ac-ink: #201C29;
  --ac-cream-hover: #E9E6F2;

  /* 2.2 — semanticas */
  --bg: var(--ac-cream);
  --bg-elev: #FFFFFF;
  --bg-sunk: #EDEBF3;
  --fg: var(--ac-ink);
  --fg-muted: var(--ac-graphite);
  --fg-soft: var(--ac-stone);
  --border: rgba(32, 28, 41, 0.10);
  --border-2: rgba(32, 28, 41, 0.16);
  --accent: var(--ac-purple);
  --accent-suave: rgba(140, 82, 255, 0.10);
  --accent-anel: rgba(140, 82, 255, 0.12);

  /* 2.3 — estado */
  --success: #4F7A5A;
  --warning: #D6A24E;
  --danger: #C0432D;
  --success-bg: rgba(79, 122, 90, 0.14);
  --success-bd: rgba(79, 122, 90, 0.32);
  --warning-bg: rgba(214, 162, 78, 0.10);
  --warning-bd: rgba(214, 162, 78, 0.35);
  --danger-bg: rgba(192, 67, 45, 0.12);
  --danger-bd: rgba(192, 67, 45, 0.32);

  /* 2.4 — tipografia */
  --font-sans: 'Poppins Local', Poppins, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Local', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tr-widest: 0.22em;

  /* 2.5 — raios */
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-5: 18px;
  --r-pill: 999px;

  /* 2.6 — elevacao (derivada da tinta da marca, nao do preto puro) */
  --shadow-sm: 0 1px 2px rgba(32, 28, 41, .06), 0 1px 1px rgba(32, 28, 41, .04);
  --shadow-md: 0 4px 14px rgba(32, 28, 41, .08), 0 1px 2px rgba(32, 28, 41, .04);
  --shadow-lg: 0 18px 48px rgba(32, 28, 41, .16), 0 3px 8px rgba(32, 28, 41, .06);

  /* 2.7 — movimento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  /* Principio 1: textura sutil de grade — caderno de trabalho, nao painel corporativo. */
  background-image:
    linear-gradient(rgba(140, 82, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 82, 255, .035) 1px, transparent 1px);
  background-size: 34px 34px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* RNF-11: o corpo nunca rola na horizontal */
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-sans); font-weight: 600; }
p { margin: 0 0 10px; }
a { color: var(--accent); }

/* Regra do italico (2.4): <em> em titulo vira serifa italica roxa. E a assinatura do produto. */
h1 em, h2 em, h3 em, .display-tela em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.oculto { display: none !important; }

/* Foco visivel em tudo que recebe foco (Acessibilidade, secao 7). */
:focus-visible {
  outline: none;
  border-color: var(--ac-purple);
  box-shadow: 0 0 0 3px var(--accent-anel);
}

.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------------------
   Animacoes nomeadas (2.7)
   -------------------------------------------------------------------------------------- */

@keyframes surge { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop   { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes rise  { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Movimento nunca comunica sozinho: sem ele, a informacao continua legivel. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------------------
   Login (10.1)
   -------------------------------------------------------------------------------------- */

#login {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--bg);
  background-image: radial-gradient(1100px 520px at 50% -10%, rgba(140, 82, 255, .13), transparent 62%);
}

.card-login {
  width: min(420px, 100%);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  box-shadow: var(--shadow-lg);
  padding: 36px;
  animation: pop .26s var(--ease);
}

.marca-pilula {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tr-widest);
  color: var(--fg-soft);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  margin-bottom: 18px;
}

.card-login h1 { font-size: 34px; letter-spacing: -.02em; margin-bottom: 6px; }
.card-login .sub { color: var(--fg-muted); margin-bottom: 24px; font-size: 18px; }

.erro-inline {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--r-3);
  background: var(--danger-bg);
  border: 1px solid var(--danger-bd);
  color: var(--danger);
  font-size: 18px;
}

/* --------------------------------------------------------------------------------------
   Topo (10.2)
   -------------------------------------------------------------------------------------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 40px;
  background: rgba(246, 245, 250, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.topo .marca {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.abas { display: flex; gap: 4px; flex: 1; }

.aba {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--fg-muted);
  padding: 9px 16px;
  min-height: 40px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all .18s var(--ease);
}
.aba:hover { background: var(--ac-cream-hover); color: var(--fg); }
/* A aba ativa e o elemento mais escuro do topo: localizacao antes de decoracao (3.2). */
.aba.ativa { background: var(--ac-ink); color: var(--ac-cream); }

.acoes-topo { display: flex; align-items: center; gap: 10px; }

/* --------------------------------------------------------------------------------------
   Botao (3.1)
   -------------------------------------------------------------------------------------- */

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--fg);
  background: var(--bg-elev);
  border: 1px solid var(--border-2);
  border-radius: var(--r-3);
  padding: 10px 18px;
  min-height: 40px; /* alvo de toque minimo (secao 7) */
  cursor: pointer;
  transition: all .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--fg-soft); }
.btn:active { transform: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn.primario { background: var(--ac-purple); border-color: var(--ac-purple); color: #fff; }
.btn.primario:hover { background: var(--ac-lilac); border-color: var(--ac-lilac); box-shadow: var(--shadow-md); }

.btn.perigo { background: transparent; border-color: var(--danger-bd); color: var(--danger); }
.btn.perigo:hover { background: var(--danger-bg); border-color: var(--danger); }

.btn.discreto { background: transparent; border-color: transparent; color: var(--fg-muted); }
.btn.discreto:hover { background: var(--ac-cream-hover); color: var(--fg); box-shadow: none; }

.btn.largo { width: 100%; }

/* --------------------------------------------------------------------------------------
   Dropdown do usuario (3.11)
   -------------------------------------------------------------------------------------- */

.menu-usuario { position: relative; }

.dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 190px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 40;
  animation: pop .18s var(--ease);
}

.dropdown .quem {
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.dropdown .quem strong { display: block; font-family: var(--font-sans); font-size: 18px; }
.dropdown .quem span { font-size: 16px; color: var(--fg-soft); }

.dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--fg-muted);
  padding: 9px 12px;
  min-height: 40px;
  border-radius: var(--r-2);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.dropdown button:hover { background: var(--ac-cream-hover); color: var(--accent); }

/* --------------------------------------------------------------------------------------
   Layout das telas
   -------------------------------------------------------------------------------------- */

main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 48px 40px 80px;
}

.tela { animation: surge .28s var(--ease); }

.display-tela {
  font-family: var(--font-sans);
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin-bottom: 6px;
}

.legenda-tela { color: var(--fg-muted); margin-bottom: 36px; font-size: 19px; }

.bloco { margin-bottom: 36px; }

.titulo-bloco {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.titulo-bloco .contagem {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 21px;
  color: var(--accent);
  text-transform: none;
  letter-spacing: 0;
}
.titulo-bloco .ponto {
  width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--fg-soft); flex: none;
}
.titulo-bloco.atrasado .ponto { background: var(--danger); }
.titulo-bloco.atrasado { color: var(--danger); }
.titulo-bloco.agora .ponto { background: var(--warning); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-widest);
  color: var(--fg-soft);
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------------------------
   Card de estatistica (3.3)
   -------------------------------------------------------------------------------------- */

.grade-kpi {
  display: grid;
  /* minmax(0,1fr) e nao 1fr: com 1fr a coluna nao encolhe abaixo do conteudo, e um SVG de
     largura fixa dentro de um painel empurraria a pagina para a rolagem horizontal (RNF-11). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 36px;
}

.stat-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  transition: all .18s var(--ease);
}
.stat-card.clicavel { cursor: pointer; }
.stat-card.clicavel:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.stat-num {
  font-family: var(--font-serif);
  font-size: 50px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  display: block;
  margin-bottom: 8px;
}
.stat-num.medio { font-size: 38px; }
.stat-card.alerta .stat-num { color: var(--danger); }
.stat-card.ganho .stat-num { color: var(--success); }

.stat-lbl {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-soft);
}
.stat-ctx { font-size: 16px; color: var(--fg-muted); margin-top: 6px; }
.stat-ctx .destaque { color: var(--accent); font-weight: 600; }

/* --------------------------------------------------------------------------------------
   Item de lista (3.4)
   -------------------------------------------------------------------------------------- */

.lista { display: flex; flex-direction: column; gap: 10px; }

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-sm);
  padding: 14px 18px;
  min-height: 40px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  transition: all .18s var(--ease);
}
/* Hover desliza para a direita: sinaliza "isto abre algo" (3.4). */
.item:hover { transform: translateX(3px); box-shadow: var(--shadow-md); border-color: var(--border-2); }

/* display:block e obrigatorio aqui: `overflow` e `text-overflow` nao valem em elemento
   inline, e sem eles o subtitulo longo vaza para fora do cartao em tela estreita. */
.item .esq { min-width: 0; display: block; overflow: hidden; }
.item .nome { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 19px; }
.item .sub {
  display: block;
  font-size: 17px;
  color: var(--fg-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item .dir {
  max-width: 46%;
  text-align: right;
  font-size: 17px;
  color: var(--fg-muted);
  flex: none;
}
.item .dir .data { display: block; color: var(--accent); font-weight: 600; }
.item.atrasado .dir .data { color: var(--danger); }

/* --------------------------------------------------------------------------------------
   Funil (3.5, 3.6)
   -------------------------------------------------------------------------------------- */

.kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }

.coluna {
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  padding: 16px;
  min-height: 220px; /* nunca colapsa quando vazia */
  transition: all .18s var(--ease);
}
.coluna.dragover { border-color: var(--ac-purple); background: rgba(140, 82, 255, .06); }

.coluna h3 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg-muted);
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.coluna h3 .qtd { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--accent); letter-spacing: 0; }

.cartao {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: grab;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.cartao:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cartao:active { cursor: grabbing; }
.cartao.arrastando { opacity: .35; transform: rotate(1.5deg); }

.cartao .nome { font-family: var(--font-sans); font-weight: 600; font-size: 18px; }
.cartao .empresa { font-size: 16px; color: var(--fg-soft); margin-bottom: 6px; }
.cartao .valor { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--success); }

/* --------------------------------------------------------------------------------------
   Entregas — ciclo de trabalho
   -------------------------------------------------------------------------------------- */

.barra-filtros {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.campo-inline { margin-bottom: 0; min-width: 200px; }

.lista-ciclos { display: flex; flex-direction: column; gap: 12px; }

.cartao-ciclo {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.cartao-ciclo:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-2); }
/* Concluido e travado marcam a BORDA, nao o fundo: cor solida de bloco esta fora do sistema. */
.cartao-ciclo.concluido { border-left: 4px solid var(--success); }
.cartao-ciclo.travado { border-left: 4px solid var(--danger); }

.cabeca-ciclo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.titulo-ciclo { display: block; min-width: 0; }
.titulo-ciclo strong { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 19px; }
.titulo-ciclo .sub {
  display: block;
  font-size: 16px;
  color: var(--fg-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lado-ciclo { display: flex; align-items: baseline; gap: 12px; flex: none; }
.lado-ciclo .ano {
  font-family: var(--font-sans);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-soft);
}
.lado-ciclo .fracao { font-family: var(--font-serif); font-style: italic; font-size: 24px; color: var(--accent); }

/* A trilha das oito etapas. Envolve em telas estreitas em vez de rolar: a sequencia continua
   legivel quebrada em linhas, e o cartao nunca vira uma barra de rolagem escondida. */
.trilha { display: flex; flex-wrap: wrap; gap: 6px; }

.etapa-pin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-2);
  color: var(--fg-soft);
  background: var(--bg);
  white-space: nowrap;
}
.etapa-pin .marca { font-weight: 700; }
.etapa-pin.concluida {
  background: var(--success-bg);
  border-color: var(--success-bd);
  color: var(--success);
}
.etapa-pin.em_andamento {
  background: var(--warning-bg);
  border-color: var(--warning-bd);
  color: var(--warning);
}
.etapa-pin.pendente .marca { color: var(--fg-soft); }

.rodape-ciclo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  font-size: 16px;
  color: var(--fg-muted);
}
.rodape-ciclo .proxima strong { color: var(--accent); font-family: var(--font-sans); }

/* Formulario das etapas: rotulo + duas colunas (inicio, conclusao), cada uma caixa + data. */
.etapas-form { display: flex; flex-direction: column; gap: 8px; }

.etapas-form-cabeca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1fr 1fr;
  gap: 12px;
  padding: 0 12px;
  margin-bottom: 4px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-soft);
}

.linha-etapa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1fr 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--r-3);
  background: var(--bg);
}
/* A cor de fundo da linha acompanha a situacao derivada — leitura rapida sem abrir nada. */
.linha-etapa[data-situacao="concluida"] { background: var(--success-bg); }
.linha-etapa[data-situacao="em_andamento"] { background: var(--warning-bg); }

.linha-etapa .rotulo-etapa {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--fg);
  margin: 0;
}
.linha-etapa .par { display: flex; align-items: center; gap: 8px; min-width: 0; }
.linha-etapa input[type="checkbox"] { width: 20px; height: 20px; flex: none; accent-color: var(--ac-purple); cursor: pointer; }
.linha-etapa input[type="date"] {
  min-width: 0;
  flex: 1;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 8px 10px;
  min-height: 40px;
  background: var(--bg-elev);
  border: 1px solid var(--border-2);
  border-radius: var(--r-3);
  color: var(--fg);
}
.linha-etapa input[type="date"]:focus {
  outline: none;
  border-color: var(--ac-purple);
  box-shadow: 0 0 0 3px var(--accent-anel);
}

.ajuda-bloco { font-size: 16px; color: var(--fg-soft); margin-bottom: 14px; }

/* Dentro da ficha do cliente o cartao aparece mais discreto — ali ele e resumo, nao a tela. */
.lista-ciclos.compacta { margin-bottom: 16px; }
.lista-ciclos.compacta .cartao-ciclo { padding: 14px 16px; box-shadow: none; }
.lista-ciclos.compacta .titulo-ciclo strong { font-size: 17px; }

/* --------------------------------------------------------------------------------------
   Conversas — fila de handoff do WhatsApp
   -------------------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------------------
   Tela de conversas — chat de duas colunas

   Nao e o WhatsApp Web embutido (ele bloqueia iframe, e a CSP daqui tambem): e a tela do
   proprio CRM, com a convencao visual que a pessoa ja conhece — recebida a esquerda, enviada
   a direita.
   -------------------------------------------------------------------------------------- */

.chat {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 18px;
  align-items: start;
  min-height: 60vh;
}

.aviso-chat {
  background: var(--warning-bg);
  border: 1px solid var(--warning-bd);
  border-radius: var(--r-4);
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 16px;
  color: var(--fg-muted);
}

/* ---------------------------------------------------------------- coluna esquerda */

.chat-lista {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  max-height: 72vh;
  overflow-y: auto;
}

.filtros-conversa { margin-bottom: 14px; display: flex; width: 100%; }
.filtros-conversa .seg { flex: 1; padding: 7px 10px; font-size: 15px; }

.linha-conversa {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--r-4);
  padding: 12px 14px;
  cursor: pointer;
  transition: background .18s var(--ease);
}
.linha-conversa:hover { background: var(--ac-cream-hover); }
.linha-conversa.ativa { background: var(--accent-suave); box-shadow: inset 3px 0 0 var(--ac-purple); }

.linha-conversa .cabeca-conversa { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.linha-conversa .nome { font-family: var(--font-sans); font-weight: 600; font-size: 17px; color: var(--fg); }
.linha-conversa .quando { font-size: 13px; color: var(--fg-soft); white-space: nowrap; }
.linha-conversa .sub { display: block; font-size: 14px; color: var(--fg-soft); margin: 2px 0 4px; }
.linha-conversa .trecho-conversa {
  display: block;
  font-size: 15px;
  color: var(--fg-muted);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.etiqueta-conversa {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-2);
  font-size: 12px;
  color: var(--fg-muted);
}
.etiqueta-conversa.cliente { border-color: var(--ac-purple); color: var(--accent); }

/* ---------------------------------------------------------------- coluna direita */

.chat-painel {
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  box-shadow: var(--shadow-sm);
  min-height: 72vh;
  max-height: 72vh;
}

.chat-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.chat-cabeca strong { font-family: var(--font-sans); font-size: 19px; display: block; }
.chat-cabeca .sub { font-size: 14px; color: var(--fg-soft); }
.chat-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.select-tipo, .select-modelo {
  font: inherit;
  font-size: 15px;
  padding: 6px 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-4);
  background: var(--bg-elev);
  color: var(--fg);
}

.chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: var(--bg-sunk);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-vazio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-soft);
  font-size: 17px;
}

.balao {
  max-width: 74%;
  padding: 10px 14px;
  border-radius: var(--r-4);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.balao p { margin: 0; font-size: 16px; color: var(--fg); white-space: pre-wrap; word-break: break-word; }
.balao.recebida { align-self: flex-start; border-bottom-left-radius: 4px; }
.balao.enviada {
  align-self: flex-end;
  background: var(--accent-suave);
  border-color: var(--accent-anel);
  border-bottom-right-radius: 4px;
}

/* Rascunho e falha: os dois estados em que a mensagem AINDA nao chegou em ninguem. Precisam
   ser visualmente distintos do enviado, senao a pessoa acha que ja mandou. */
.balao.rascunho { background: var(--warning-bg); border: 1px dashed var(--warning-bd); }
.balao.falhou { background: var(--danger-bg); border-color: var(--danger-bd); }

.rodape-balao {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.rodape-balao .hora { font-size: 12px; color: var(--fg-soft); }
.estado-msg { font-size: 13px; color: var(--fg-muted); }
.estado-msg.rascunho { color: var(--warning); font-weight: 600; }
.estado-msg.falhou { color: var(--danger); font-weight: 600; }

.chat-envio {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}
.chat-envio textarea {
  flex: 1;
  font: inherit;
  font-size: 16px;
  padding: 10px 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-4);
  background: var(--bg-elev);
  color: var(--fg);
  resize: vertical;
  min-height: 44px;
}
.chat-envio textarea:focus { outline: 2px solid var(--accent-anel); border-color: var(--ac-purple); }

.btn.pequeno { padding: 6px 14px; font-size: 15px; }

.ajuda { font-size: 15px; color: var(--fg-soft); margin: -4px 0 16px; }

@media (max-width: 900px) {
  .chat { grid-template-columns: 1fr; }
  .chat-lista { max-height: 40vh; }
  .chat-painel { min-height: 55vh; max-height: 70vh; }
  .balao { max-width: 88%; }
}

/* --------------------------------------------------------------------------------------
   Busca e clientes (10.6)
   -------------------------------------------------------------------------------------- */

.barra-busca { margin-bottom: 20px; }

.barra-busca input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 19px;
  padding: 13px 18px;
  min-height: 44px;
  background: var(--bg-elev);
  border: 1px solid var(--border-2);
  border-radius: var(--r-4);
  color: var(--fg);
  transition: all .18s var(--ease);
}
.barra-busca input::placeholder { color: var(--fg-soft); }

/* --------------------------------------------------------------------------------------
   Modal (3.7)
   -------------------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  /* Acima do #login (60): a explicacao do "Esqueci minha senha" e a unica coisa que abre por
     cima da tela de entrada, e abaixo dela o modal ficava aberto e invisivel. */
  z-index: 70;
  background: rgba(32, 28, 41, .45);
  backdrop-filter: blur(4px);
  overflow-y: auto;
  padding: 48px 20px;
  animation: fade .2s var(--ease);
}

.modal-conteudo {
  position: relative;
  width: min(660px, 100%);
  margin: 0 auto;
  background: var(--bg-elev);
  border-radius: var(--r-5);
  box-shadow: var(--shadow-lg);
  padding: 36px;
  animation: pop .24s var(--ease);
}

.modal-conteudo h2 { font-size: 34px; letter-spacing: -.02em; margin-bottom: 4px; }
.modal-conteudo .sub-modal { color: var(--fg-muted); font-size: 18px; margin-bottom: 24px; }

.fechar-modal {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 32px;
  line-height: 1;
  color: var(--fg-soft);
  background: transparent;
  border: 0;
  border-radius: var(--r-3);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.fechar-modal:hover { background: var(--ac-cream-hover); color: var(--fg); }

.rodape-modal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.rodape-modal .espaco { flex: 1; }

/* --------------------------------------------------------------------------------------
   Campos (3.8)
   -------------------------------------------------------------------------------------- */

.campo { margin-bottom: 16px; }

.campo label {
  display: block;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-muted);
  margin-bottom: 6px;
}

.campo input, .campo select, .campo textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 19px;
  color: var(--fg);
  background: var(--bg); /* o campo "afunda" no card branco */
  border: 1px solid var(--border-2);
  border-radius: var(--r-3);
  padding: 11px 14px;
  min-height: 42px;
  transition: all .18s var(--ease);
}
.campo textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--ac-purple);
  box-shadow: 0 0 0 3px var(--accent-anel);
}
.campo .ajuda { font-size: 16px; color: var(--fg-soft); margin-top: 5px; }

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

fieldset { border: 0; padding: 0; margin: 0 0 8px; }
legend {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-widest);
  color: var(--fg-soft);
  padding: 0;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------------------
   Tags, chips e badges (3.9)
   -------------------------------------------------------------------------------------- */

.tag, .chip, .badge-ia {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--r-pill);
  padding: 3px 10px;
  white-space: nowrap;
}

.tag.ganho { background: var(--success-bg); color: var(--success); }
.tag.perdido { background: var(--danger-bg); color: var(--danger); }
.tag.aberto { background: var(--accent-suave); color: var(--accent); }

.chip { border: 1px solid var(--border-2); color: var(--fg-muted); }
.chip.accent { border-color: var(--ac-purple); color: var(--accent); }

.badge-ia {
  background: rgba(140, 82, 255, .14);
  color: var(--accent);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.tags-linha { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }

/* --------------------------------------------------------------------------------------
   Ficha do cliente (10.7)
   -------------------------------------------------------------------------------------- */

.dados-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin-bottom: 24px;
}

.dado .rotulo {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-soft);
}
.dado .valor { font-size: 19px; word-break: break-word; }
.dado .valor.numero { font-family: var(--font-serif); font-style: italic; font-size: 24px; }

.interacao {
  background: var(--bg-sunk);
  border-radius: var(--r-3);
  padding: 12px 14px;
  margin-bottom: 10px;
}
/* A interacao mais recente e a que responde "em que pe estamos" — ela ganha destaque. */
.interacao.ultima { background: var(--accent-suave); border: 1px solid rgba(140, 82, 255, .22); }
.interacao .cabeca {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 16px;
  color: var(--fg-soft);
  margin-bottom: 6px;
}
.interacao .quando { font-style: italic; }

/* Faixa de leitura rapida no topo da ficha: quando foi a ultima conversa e o que vem agora. */
.faixa-contato {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-sunk);
  border-left: 4px solid var(--ac-purple);
  border-radius: var(--r-3);
  padding: 14px 16px;
  margin-bottom: 24px;
}
.faixa-contato.frio { border-left-color: var(--danger); }
.faixa-contato .proxima-acao-resumo { font-size: 16px; color: var(--fg-muted); }
.faixa-contato .proxima-acao-resumo strong { color: var(--fg); font-family: var(--font-sans); }

.ultimo-contato {
  display: block;
  font-size: 16px;
  color: var(--fg-muted);
  margin-top: 4px;
}
.ultimo-contato strong { font-family: var(--font-sans); color: var(--accent); }
.ultimo-contato.frio strong, .ultimo-contato.sem-contato { color: var(--danger); }
.ultimo-contato .trecho {
  display: block;
  color: var(--fg-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.interacao .texto { font-size: 18px; white-space: pre-wrap; word-break: break-word; }

.lista-rolavel { max-height: 320px; overflow-y: auto; padding-right: 4px; }

/* --------------------------------------------------------------------------------------
   Chave revelada (3.12)
   -------------------------------------------------------------------------------------- */

.key-revelada {
  background: var(--accent-suave);
  border: 1px solid rgba(140, 82, 255, .3);
  border-radius: var(--r-4);
  padding: 16px;
  margin-bottom: 18px;
}
.key-revelada .aviso { font-size: 17px; color: var(--fg-muted); margin-bottom: 10px; }
.key-revelada code {
  display: block;
  background: var(--ac-ink);
  color: var(--ac-cream);
  font-family: var(--font-mono);
  font-size: 17px;
  padding: 12px 14px;
  border-radius: var(--r-2);
  word-break: break-all;
  user-select: all; /* seleciona tudo em um clique */
}

.mono { font-family: var(--font-mono); font-size: 16px; color: var(--fg-muted); }

/* Botao que se comporta como link: usado onde a acao e secundaria e nao merece peso de botao
   (o "Esqueci minha senha" do login). Continua sendo <button> por causa da delegacao de
   eventos — <a href="#"> sem destino real seria pior para leitor de tela. */
.link-discreto {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 4px;
  font: inherit;
  font-size: 16px;
  color: var(--fg-soft);
  background: none;
  border: 0;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-discreto:hover { color: var(--accent); }

/* Bloco de comando dentro de modal: precisa quebrar linha, senao estoura a largura no celular. */
pre.mono {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-sunk);
  border-radius: var(--r-3);
  padding: 12px 14px;
  margin: 0 0 16px;
}

/* --------------------------------------------------------------------------------------
   Estado vazio (3.13) e aviso do dashboard (3.14)
   -------------------------------------------------------------------------------------- */

.vazio {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--fg-soft);
  padding: 18px 2px;
}

.dash-aviso {
  background: var(--warning-bg);
  border: 1px solid var(--warning-bd);
  border-radius: var(--r-4);
  padding: 14px 18px;
  margin-bottom: 28px;
  font-size: 18px;
  color: var(--fg-muted);
}
.dash-aviso strong { color: var(--warning); font-family: var(--font-sans); }
.dash-aviso ul { margin: 8px 0 0; padding-left: 18px; }

/* --------------------------------------------------------------------------------------
   Toast (3.10)
   -------------------------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 70;
  background: var(--ac-ink);
  color: var(--ac-cream);
  font-family: var(--font-sans);
  font-size: 18px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
  animation: rise .24s var(--ease);
  max-width: min(560px, calc(100vw - 40px));
  text-align: center;
}
.toast.erro { background: var(--danger); color: #fff; }

/* --------------------------------------------------------------------------------------
   Dashboard e graficos (secao 4)
   -------------------------------------------------------------------------------------- */

.grade-dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.painel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
}
.painel h3 {
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.painel .nota { font-size: 16px; color: var(--fg-soft); margin-bottom: 16px; }

.rolar-x { overflow-x: auto; } /* conteudo largo rola dentro do proprio container (secao 5) */

svg { display: block; max-width: 100%; }
.svg-rotulo { font-family: var(--font-body); font-size: 15px; fill: var(--ac-stone); }
.svg-valor { font-family: var(--font-sans); font-size: 15.5px; font-weight: 600; fill: var(--ac-graphite); }
.svg-grade { stroke: rgba(32, 28, 41, .10); stroke-width: 1; }

/* Toda serie colorida tem legenda: cor nunca e o unico portador da informacao (secao 4). */
.legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 16px; color: var(--fg-muted); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; background: var(--ac-stone); }
.legenda i.cor-ganho { background: var(--success); }
.legenda i.cor-perdido { background: var(--danger); }
.legenda i.cor-accent { background: var(--ac-purple); }

.espaco-topo { margin-top: 28px; }

.tabela-simples { width: 100%; border-collapse: collapse; font-size: 18px; }
.tabela-simples th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-soft);
  padding: 6px 10px 6px 0;
  white-space: nowrap;
}
.tabela-simples td { padding: 9px 10px 9px 0; border-top: 1px solid var(--border); }
.tabela-simples td.num { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--accent); }

/* --------------------------------------------------------------------------------------
   Pagina /docs
   -------------------------------------------------------------------------------------- */

.pagina-docs { background: var(--bg-elev); background-image: none; }

/* --------------------------------------------------------------------------------------
   Responsividade (secao 5)
   -------------------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------------------
   Propostas e contratos (F2)

   Os cartoes reaproveitam .cartao-ciclo e o painel reaproveita .grade-kpi: proposta, contrato
   e ciclo de entrega sao a mesma leitura ("um trabalho, em que ponto esta"), e dar formas
   diferentes a leituras iguais e o jeito mais rapido de um sistema deixar de ter sistema.
   -------------------------------------------------------------------------------------- */

/* Seletor de visao dentro da aba Contratos. */
.segmentado {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: 28px;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}

.seg {
  font: inherit;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--fg-soft);
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  padding: 7px 20px;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.seg:hover { color: var(--fg); }
.seg.ativa { background: var(--bg-elev); color: var(--fg); box-shadow: var(--shadow-sm); }

/* O valor no cartao usa a serifa italica dos numeros do produto, como a fracao das entregas. */
.lado-ciclo .valor-doc {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  color: var(--accent);
}

.titulo-bloco.alerta .ponto { background: var(--danger); }

/* Vencendo nao e vencido: o amarelo avisa, o vermelho cobra. */
.tag.alerta { background: var(--warning-bg); color: var(--warning); }

/* Linha desativada continua legivel, so recua: some da escolha, nao da leitura. */
tr.inativa { opacity: .55; }

/* --------------------------------------------------------- Linhas de servico do formulario */

.bloco-itens {
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: 16px;
  margin-bottom: 18px;
}

.cabecalho-itens,
.linha-item {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 80px 120px 40px;
  gap: 8px;
  align-items: center;
}

.cabecalho-itens {
  font-family: var(--font-sans);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-soft);
  margin-bottom: 8px;
}

.linha-item { margin-bottom: 8px; }
.linha-item input, .linha-item select { width: 100%; min-width: 0; }

.rodape-itens {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.rodape-itens strong { font-size: 17px; }
.rodape-itens #total-itens { font-family: var(--font-serif); font-style: italic; font-size: 24px; color: var(--accent); }

/* --------------------------------------------------------- Linha do tempo (versoes, aditivos) */

.linha-tempo { list-style: none; margin: 0 0 20px; padding: 0; }

.linha-tempo li {
  position: relative;
  padding: 12px 0 12px 20px;
  border-left: 2px solid var(--border);
}
/* A versao vigente e a unica marcada: o resto e historia, e historia nao disputa atencao. */
.linha-tempo li.atual { border-left-color: var(--accent); }
.linha-tempo li::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-2);
}
.linha-tempo li.atual::before { background: var(--accent); }
.linha-tempo .sub { display: block; font-size: 15px; color: var(--fg-soft); }

@media (max-width: 560px) {
  .cabecalho-itens { display: none; }
  .linha-item { grid-template-columns: 1fr; gap: 6px; margin-bottom: 16px; }
}

@media (max-width: 900px) {
  .topo { flex-wrap: wrap; padding: 14px 20px; gap: 12px; }
  .topo .marca { flex: 1 1 auto; }
  .acoes-topo { flex: 0 0 auto; }
  /* flex-basis 100% obriga as abas a ocuparem a propria linha; so `width` nao basta num
     container que permite wrap — elas voltariam a dividir a linha com o menu do usuario. */
  .abas { order: 3; flex: 1 0 100%; overflow-x: auto; }
  main { padding: 28px 20px 60px; }
  .grade-kpi, .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-dash { grid-template-columns: 1fr; }
  .modal { padding: 20px 12px; }
  .modal-conteudo { padding: 24px; }
}

@media (max-width: 560px) {
  .grade-kpi, .kanban, .linha, .dados-grade { grid-template-columns: 1fr; }
  .display-tela { font-size: 36px; }
  .item { flex-direction: column; align-items: stretch; gap: 6px; }
  .item .esq, .item .dir { width: 100%; max-width: 100%; text-align: left; }
  .acoes-topo { flex: 1 1 100%; justify-content: space-between; }
  .cabeca-ciclo { flex-direction: column; gap: 8px; }
  .etapas-form-cabeca { display: none; }
  .linha-etapa { grid-template-columns: 1fr; gap: 8px; }
  .linha-etapa .par { justify-content: space-between; }
}