/* ==========================================================================
   Origyn — design system do CRM
   Extraido do origyn.solutions: roxo pontual, muito branco, tipografia
   editorial. Acento e acento; nada de gradiente por toda parte.
   ========================================================================== */

:root {
  /* marca */
  --roxo:        #6D28D9;
  --roxo-claro:  #9B6DFF;
  --roxo-escuro: #4C1D95;
  --roxo-fraco:  #F3EFFF;
  --roxo-linha:  #E3D9FF;

  /* tinta */
  --tinta:       #1A1A1A;
  --tinta-forte: #14161C;
  --texto:       #333333;
  --texto-2:     #5A5F6B;
  --texto-3:     #8A8F9A;

  /* superficie */
  --branco:      #FFFFFF;
  --papel:       #F8F8F6;
  --papel-2:     #F2F2EF;
  --linha:       #E5E4E0;
  --linha-2:     #D2D5DD;

  /* estado */
  --verde:       #0F7A4D;
  --verde-fraco: #E8F5EF;
  --ambar:       #A76A00;
  --ambar-fraco: #FDF3E2;
  --vermelho:    #B3261E;
  --verm-fraco:  #FDECEA;

  /* forma */
  --r-pill:  999px;
  --r-card:  10px;
  --r-campo: 8px;
  --sombra:      0 1px 2px rgba(20, 22, 28, .04), 0 1px 3px rgba(20, 22, 28, .06);
  --sombra-alta: 0 4px 12px rgba(20, 22, 28, .08), 0 12px 32px rgba(20, 22, 28, .10);

  --lateral: 244px;
  --topo: 60px;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local('Geist');
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--tinta);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
h1 { font-size: 26px; line-height: 1.2; }
h2 { font-size: 19px; }
h3 { font-size: 15px; }

a { color: var(--roxo); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ==========================================================================
   Wordmark
   ========================================================================== */
.wordmark {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .14em;
  color: var(--tinta);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.wordmark:hover { text-decoration: none; }
.wordmark .y { color: var(--roxo); }

/* ==========================================================================
   Estrutura
   ========================================================================== */
.app { display: flex; min-height: 100vh; }

.lateral {
  width: var(--lateral);
  flex: 0 0 var(--lateral);
  background: var(--branco);
  border-right: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.lateral-topo {
  height: var(--topo);
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--linha);
  flex: 0 0 var(--topo);
}
.nav { padding: 14px 12px; flex: 1; overflow-y: auto; }
.nav-grupo {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--texto-3);
  padding: 14px 10px 6px;
}
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-campo);
  color: var(--texto-2);
  font-weight: 500;
  font-size: 13.5px;
  margin-bottom: 1px;
  transition: background .12s ease, color .12s ease;
}
.nav a:hover { background: var(--papel-2); color: var(--tinta); text-decoration: none; }
.nav a.ativo { background: var(--roxo-fraco); color: var(--roxo-escuro); font-weight: 600; }
.nav a.ativo svg { color: var(--roxo); }
.nav svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--texto-3); }
.nav-conta {
  border-top: 1px solid var(--linha);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: var(--r-pill);
  background: var(--roxo);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}
.avatar.sm { width: 22px; height: 22px; flex-basis: 22px; font-size: 9px; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
  height: var(--topo);
  flex: 0 0 var(--topo);
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topo-titulo { display: flex; align-items: baseline; gap: 12px; }
.topo-titulo .sub { color: var(--texto-3); font-size: 13px; }
.topo-acoes { display: flex; align-items: center; gap: 8px; }

.conteudo { padding: 26px; flex: 1; }
.conteudo.cheio { padding: 0; display: flex; flex-direction: column; min-height: 0; }

/* ==========================================================================
   Cartao
   ========================================================================== */
.card {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-card);
  box-shadow: var(--sombra);
}
.card-topo {
  padding: 14px 18px;
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-corpo { padding: 18px; }

.grade { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 860px)  { .g2, .g3 { grid-template-columns: 1fr; } }

/* numero grande, no tom do site */
.metrica { padding: 18px; }
.metrica .rotulo {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-3);
  margin-bottom: 8px;
}
.metrica .valor {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--tinta);
  line-height: 1.05;
}
.metrica .nota { font-size: 12px; color: var(--texto-2); margin-top: 6px; }
.metrica .nota.sobe { color: var(--verde); }
.metrica .nota.desce { color: var(--vermelho); }

/* ==========================================================================
   Botao
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--roxo);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .13s ease, border-color .13s ease, color .13s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--roxo-escuro); text-decoration: none; color: #fff; }
.btn svg { width: 15px; height: 15px; }

.btn.claro { background: var(--branco); color: var(--tinta); border-color: var(--linha-2); }
.btn.claro:hover { background: var(--papel-2); color: var(--tinta); border-color: var(--texto-3); }

.btn.fantasma { background: transparent; color: var(--texto-2); }
.btn.fantasma:hover { background: var(--papel-2); color: var(--tinta); }

.btn.perigo { background: var(--vermelho); }
.btn.perigo:hover { background: #8E1D17; }

.btn.sm { padding: 5px 12px; font-size: 12.5px; }
.btn.icone { padding: 7px; border-radius: var(--r-campo); }

/* ==========================================================================
   Formulario
   ========================================================================== */
.campo { margin-bottom: 14px; }
.campo label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--texto-2);
  margin-bottom: 5px;
}
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=tel], input[type=search], input[type=datetime-local],
select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--linha-2);
  border-radius: var(--r-campo);
  background: var(--branco);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--tinta);
  transition: border-color .13s ease, box-shadow .13s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--roxo);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, .12);
}
textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A5F6B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 32px;
}
.linha-campos { display: flex; gap: 12px; }
.linha-campos > * { flex: 1; min-width: 0; }
.ajuda { font-size: 12px; color: var(--texto-3); margin-top: 4px; }

/* ==========================================================================
   Etiqueta
   ========================================================================== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2.5px 10px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 500;
  background: var(--papel-2);
  color: var(--texto-2);
  border: 1px solid transparent;
  white-space: nowrap;
}
.tag.roxo     { background: var(--roxo-fraco);  color: var(--roxo-escuro); }
.tag.verde    { background: var(--verde-fraco); color: var(--verde); }
.tag.ambar    { background: var(--ambar-fraco); color: var(--ambar); }
.tag.vermelho { background: var(--verm-fraco);  color: var(--vermelho); }
.tag.contorno { background: transparent; border-color: var(--linha-2); color: var(--texto-2); }
.ponto { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; }

/* ==========================================================================
   Tabela
   ========================================================================== */
.tabela-wrap { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tabela th {
  text-align: left;
  padding: 10px 18px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-3);
  border-bottom: 1px solid var(--linha);
  background: var(--papel);
  white-space: nowrap;
}
table.tabela td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
}
table.tabela tbody tr:last-child td { border-bottom: none; }
table.tabela tbody tr:hover { background: var(--papel); }
table.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.linha-clicavel { cursor: pointer; }

.vazio {
  padding: 52px 24px;
  text-align: center;
  color: var(--texto-3);
}
.vazio h3 { color: var(--texto-2); margin-bottom: 6px; font-weight: 500; }
.vazio p { margin: 0 0 16px; font-size: 13px; }

/* ==========================================================================
   Quadro kanban (tarefas e pipeline)
   ========================================================================== */
.kanban {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 26px 26px;
  overflow-x: auto;
  flex: 1;
  min-height: 0;
}
.coluna {
  flex: 0 0 282px;
  width: 282px;
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--topo) - 46px);
}
.coluna-topo {
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--linha);
}
.coluna-topo .nome {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 7px;
}
.coluna-topo .conta {
  font-size: 11px;
  color: var(--texto-3);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
.coluna-lista {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 56px;
}
.coluna-rodape { padding: 8px 10px 10px; }
.coluna-rodape .add {
  width: 100%;
  padding: 7px;
  border: 1px dashed var(--linha-2);
  border-radius: var(--r-campo);
  background: transparent;
  color: var(--texto-3);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.coluna-rodape .add:hover { border-color: var(--roxo); color: var(--roxo); background: var(--branco); }

.ficha {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-campo);
  padding: 11px 12px;
  cursor: grab;
  box-shadow: var(--sombra);
  transition: box-shadow .13s ease, border-color .13s ease, transform .13s ease;
}
.ficha:hover { border-color: var(--linha-2); box-shadow: var(--sombra-alta); }
.ficha:active { cursor: grabbing; }
.ficha.arrastando { opacity: .4; transform: rotate(1.5deg); }
.ficha .titulo {
  font-size: 13px;
  font-weight: 500;
  color: var(--tinta);
  line-height: 1.4;
  margin-bottom: 7px;
}
.ficha .meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--texto-3);
}
.ficha .barra-prio {
  height: 3px;
  border-radius: var(--r-pill);
  margin: -11px -12px 9px;
  border-top-left-radius: var(--r-campo);
  border-top-right-radius: var(--r-campo);
}
.prio-urgente {
  background: repeating-linear-gradient(45deg,
    var(--vermelho) 0 4px, #7A1610 4px 8px);
}
.prio-alta  { background: var(--vermelho); }
.prio-media { background: var(--roxo-claro); }
.prio-baixa { background: var(--linha-2); }

.coluna-lista.solta-aqui {
  background: var(--roxo-fraco);
  border-radius: var(--r-campo);
  outline: 2px dashed var(--roxo-linha);
  outline-offset: -4px;
}

.prazo-vencido { color: var(--vermelho) !important; font-weight: 600; }
.prazo-hoje    { color: var(--ambar) !important;    font-weight: 600; }
.prazo-perto   { color: var(--texto-2) !important; }

/* ==========================================================================
   Inbox
   ========================================================================== */
.inbox { display: flex; flex: 1; min-height: 0; }
.inbox-lista {
  /* A lista e indice, nao leitura: nome, previa de uma linha e a hora cabem
     em 262px. O que sobra vai para onde a pessoa realmente passa o tempo, que
     e ler a conversa e escrever a resposta. */
  flex: 0 0 262px;
  /* min-width:0 e obrigatorio, nao enfeite. Item de flex nasce com
     min-width:auto, que significa "nao encolha abaixo do seu conteudo", e a
     previa da conversa usa white-space:nowrap. Resultado: a barra ignorava a
     largura declarada e crescia junto com a mensagem mais longa da lista.
     Media 709px onde a regra pedia 262. */
  min-width: 0;
  border-right: 1px solid var(--linha);
  background: var(--branco);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.inbox-filtros {
  padding: 12px 14px;
  border-bottom: 1px solid var(--linha);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.filtro-pill {
  padding: 4px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--linha-2);
  background: var(--branco);
  color: var(--texto-2);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.filtro-pill:hover { border-color: var(--texto-3); text-decoration: none; color: var(--tinta); }
.filtro-pill.ativo { background: var(--tinta); border-color: var(--tinta); color: #fff; }

.conversas { overflow-y: auto; flex: 1; }
.conversa-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--linha);
  cursor: pointer;
  display: block;
  color: inherit;
  text-decoration: none;
}
.conversa-item:hover { background: var(--papel); text-decoration: none; }
.conversa-item.ativa { background: var(--roxo-fraco); box-shadow: inset 2px 0 0 var(--roxo); }
.conversa-item .linha1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.conversa-item .nome { font-weight: 600; font-size: 13px; color: var(--tinta); }
.conversa-item .quando { font-size: 11px; color: var(--texto-3); white-space: nowrap; }
.conversa-item .previa {
  font-size: 12.5px;
  color: var(--texto-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bolha-nao-lida {
  background: var(--roxo);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}

.inbox-conversa { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--papel); }
.conversa-topo {
  padding: 12px 20px;
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mensagens { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 74%; display: flex; flex-direction: column; gap: 3px; }
.msg.entrada { align-self: flex-start; }
.msg.saida { align-self: flex-end; align-items: flex-end; }
.msg .bolha {
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  /* pre-wrap NAO pode viver aqui. Ele existe para preservar a quebra de linha
     de quem escreveu, mas preserva tambem a indentacao do HTML: quando a bolha
     passou a ter citacao, midia e botoes dentro, cada linha do template virou
     linha em branco na tela e a bolha foi de 59 para 283px. Fica so no
     pedaco que carrega o texto. */
  word-break: break-word;
}
.msg-texto { white-space: pre-wrap; }
.msg.entrada .bolha {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-bottom-left-radius: 4px;
  color: var(--texto);
}
.msg.saida .bolha {
  background: var(--roxo);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg .rodape { font-size: 10.5px; color: var(--texto-3); padding: 0 4px; }
.compositor {
  padding: 14px 22px 18px;
  background: var(--branco);
  border-top: 1px solid var(--linha);
}
.compositor form { display: flex; gap: 10px; align-items: flex-end; }
/* Escrever e o trabalho: o campo nasce com duas linhas de folga e cresce
   mais antes de virar rolagem. */
.compositor textarea { min-height: 96px; max-height: 340px; border-radius: 18px; padding: 13px 17px; }

.canal-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.canal-whatsapp  { background: #E7F6EC; color: #0F7A4D; }
.canal-instagram { background: #FCEAF3; color: #B02A70; }
.canal-widget    { background: var(--roxo-fraco); color: var(--roxo-escuro); }
.canal-interno   { background: var(--papel-2); color: var(--texto-2); }

/* ==========================================================================
   Modal
   ========================================================================== */
.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 28, .42);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px 40px;
  z-index: 100;
  overflow-y: auto;
}
.modal-fundo[hidden] { display: none; }
.modal {
  background: var(--branco);
  border-radius: 14px;
  box-shadow: var(--sombra-alta);
  width: 100%;
  max-width: 560px;
  animation: sobe .16s ease;
}
.modal.largo { max-width: 720px; }
@keyframes sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.modal-topo {
  padding: 18px 22px;
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-corpo { padding: 22px; }
.modal-rodape {
  padding: 14px 22px;
  border-top: 1px solid var(--linha);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--papel);
  border-radius: 0 0 14px 14px;
}
.fechar {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--texto-3);
  padding: 4px;
  line-height: 0;
  border-radius: var(--r-campo);
}
.fechar:hover { background: var(--papel-2); color: var(--tinta); }

/* ==========================================================================
   Aviso
   ========================================================================== */
.aviso {
  padding: 11px 16px;
  border-radius: var(--r-campo);
  font-size: 13px;
  margin-bottom: 16px;
  border: 1px solid;
  display: flex;
  align-items: center;
  gap: 9px;
}
.aviso.ok   { background: var(--verde-fraco); border-color: #BFE3D2; color: var(--verde); }
.aviso.erro { background: var(--verm-fraco);  border-color: #F3C9C5; color: var(--vermelho); }
.aviso.info { background: var(--roxo-fraco);  border-color: var(--roxo-linha); color: var(--roxo-escuro); }

/* ==========================================================================
   Login
   ========================================================================== */
/* Tela dividida: a arte ocupa metade e o formulario fica em branco puro.
   O fundo escuro vive SO aqui, na porta de entrada — o painel por dentro
   segue claro, como manda a identidade. Login e vitrine; painel e ferramenta. */
.login-body { margin: 0; background: var(--branco); }
.login-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

/* ---- lado da arte ---- */
.login-arte {
  position: relative;
  background-color: #0A0A0C;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px 46px;
  overflow: hidden;
}
/* "CRM interno" em versalete espacado: e um rotulo, nao uma frase de
   propaganda. O espacamento largo e o mesmo gesto do wordmark da marca. */
.login-arte-baixo { position: relative; z-index: 2; }
.login-arte-baixo h1 {
  color: #fff;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0;
}

/* ---- lado do formulario ---- */
.login-form {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 32px; background: var(--branco);
}
.login-caixa { width: 100%; max-width: 348px; }
.login-marca { margin-bottom: 34px; }
.login-marca img { height: 42px; width: auto; display: block; }
.login-caixa h2 {
  font-size: 25px; letter-spacing: -.02em; color: var(--tinta);
  margin: 0 0 6px; font-weight: 600;
}
.login-sub { color: var(--texto-3); font-size: 13.5px; margin: 0 0 26px; }
.login-caixa .campo { margin-bottom: 15px; }
.login-caixa .btn.login-btn { width: 100%; padding: 11px; margin-top: 8px; }
.login-rodape {
  color: var(--texto-3); font-size: 12.5px; text-align: center;
  margin: 22px 0 0;
}

/* Em tela estreita a arte vira uma faixa no topo. Sumir com ela por completo
   deixaria a entrada sem marca nenhuma; 152px bastam para o mapa se ler. */
@media (max-width: 880px) {
  .login-split { grid-template-columns: 1fr; }
  .login-arte {
    min-height: 152px; padding: 22px 24px;
    justify-content: flex-end;
  }
  .login-arte-topo { display: none; }
  .login-arte-baixo h1 { font-size: 17px; letter-spacing: .18em; }
  .login-marca { margin-bottom: 26px; }
  .login-marca img { height: 34px; }
  .login-form { padding: 34px 24px 48px; align-items: flex-start; }
}

/* ==========================================================================
   Utilitarios
   ========================================================================== */
.flex { display: flex; }
.entre { justify-content: space-between; }
.centro-v { align-items: center; }
.gap6 { gap: 6px; } .gap10 { gap: 10px; } .gap16 { gap: 16px; }
.mt0 { margin-top: 0; } .mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.mb0 { margin-bottom: 0; } .mb8 { margin-bottom: 8px; } .mb16 { margin-bottom: 16px; } .mb24 { margin-bottom: 24px; }
.t2 { color: var(--texto-2); } .t3 { color: var(--texto-3); }
.pequeno { font-size: 12px; }
.forte { font-weight: 600; color: var(--tinta); }
.num-tab { font-variant-numeric: tabular-nums; }
.dir { text-align: right; }
.nowrap { white-space: nowrap; }
.crescer { flex: 1; min-width: 0; }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.busca { position: relative; }
.busca svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--texto-3); pointer-events: none;
}
.busca input { padding-left: 33px; border-radius: var(--r-pill); }

.erro-tela { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.erro-tela .codigo { font-size: 58px; font-weight: 600; color: var(--roxo); letter-spacing: -.04em; line-height: 1; }

/* ==========================================================================
   Totais por moeda — nunca somamos moedas diferentes num numero so
   ========================================================================== */
.metrica .grupo-moeda { display: block; }
.metrica .valor-moeda {
  display: block;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--tinta);
  line-height: 1.1;
}
.metrica .valor-moeda + .valor-moeda {
  font-size: 21px;
  color: var(--texto-2);
  margin-top: 2px;
}
.metrica .nota .grupo-moeda { display: inline; }
.metrica .nota .valor-moeda {
  display: inline;
  font-size: 12px;
  font-weight: 500;
  color: inherit;
  letter-spacing: 0;
  margin: 0;
}
.metrica .nota .valor-moeda + .valor-moeda::before { content: " · "; }

/* ==========================================================================
   Marca — arquivo real do site, nao aproximacao em CSS.
   O Y e uma cunha em degrade roxo e o O tem corte na base: nao da para
   reproduzir com fonte. Ver docs/marca.md antes de trocar.
   ========================================================================== */
.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca:hover { text-decoration: none; opacity: .82; }
.marca img { height: 22px; width: auto; display: block; }

.marca-login { height: 30px; width: auto; }

/* wordmark em texto: so onde imagem nao serve (e-mail, favicon) */

.aviso.ambar-aviso { background: var(--ambar-fraco); border-color: #F0DDB8; color: var(--ambar); }

/* ==========================================================================
   Visao geral: seletor de periodo e placar do time
   ========================================================================== */

/* O seletor e pill, como o resto da marca. Sem fundo escuro, sem neon. */
.periodo {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 20px;
}
.periodo a {
  padding: 6px 13px; border-radius: var(--r-pill); font-size: 12.5px;
  color: var(--texto-2); text-decoration: none; border: 1px solid transparent;
  white-space: nowrap; transition: background .12s, color .12s;
}
.periodo a:hover { background: var(--papel-2); color: var(--texto); }
.periodo a.ativo {
  background: var(--roxo-fraco); color: var(--roxo-escuro);
  border-color: var(--roxo-linha); font-weight: 500;
}
.periodo form {
  display: flex; gap: 6px; align-items: center; margin-left: 4px;
}
.periodo input[type="date"] {
  width: auto; padding: 5px 9px; font-size: 12px;
}
/* Diz o que ficou dentro da janela — regra da casa: tela que filtra avisa. */
.periodo-nota {
  font-size: 12px; color: var(--texto-3); margin: -12px 0 20px;
}

/* Placar: uma linha por pessoa, barra proporcional ao peso. */
.placar { padding: 6px 0; }
.placar-linha {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px;
}
.placar-linha + .placar-linha { border-top: 1px solid var(--linha); }
.placar-nome { flex: 0 0 108px; font-size: 13px; color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placar-trilho {
  flex: 1 1 auto; height: 8px; background: var(--papel-2);
  border-radius: var(--r-pill); overflow: hidden; min-width: 40px;
}
.placar-barra {
  height: 100%; background: var(--roxo); border-radius: var(--r-pill);
  min-width: 3px;
}
.placar-valor {
  flex: 0 0 auto; text-align: right; font-size: 12.5px;
  font-variant-numeric: tabular-nums; color: var(--texto);
}
.placar-valor .n { color: var(--texto-3); font-size: 11.5px; }

/* Agenda: o que vai acontecer, tarefa e compromisso na mesma lista. */
.agenda-dia {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-3); padding: 12px 18px 4px;
}
.agenda-item {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 18px;
  text-decoration: none; color: inherit;
}
.agenda-item:hover { background: var(--papel); }
.agenda-item + .agenda-item { border-top: 1px solid var(--linha); }
.agenda-hora {
  flex: 0 0 46px; font-size: 12px; color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}
.agenda-corpo { flex: 1 1 auto; min-width: 0; }
.agenda-corpo .t { font-size: 13px; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-corpo .s { font-size: 11.5px; color: var(--texto-3); }

/* ==========================================================================
   Grafico mensal: balao com os valores no hover
   O `title` nativo demora ~1s, nao formata e nao mostra o resultado. Aqui o
   balao e instantaneo e traz a conta pronta.
   ========================================================================== */
:root {
  --verde-claro: #6EE7B7;
  --verm-claro:  #FCA5A5;
}
.grafico-col { position: relative; }
.grafico-tip {
  position: absolute; bottom: calc(100% - 10px); left: 50%;
  transform: translate(-50%, 4px);
  background: var(--tinta-forte); color: #fff;
  padding: 9px 12px; border-radius: 8px; white-space: nowrap;
  font-size: 11.5px; line-height: 1.7; z-index: 20;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  box-shadow: 0 6px 20px rgba(20, 22, 28, .22);
}
.grafico-tip .mes {
  font-weight: 600; margin-bottom: 3px; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.16); padding-bottom: 4px;
}
.grafico-tip .saldo {
  margin-top: 3px; padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.grafico-tip .ponto { width: 7px; height: 7px; display: inline-block;
  border-radius: 50%; margin-right: 5px; }
.grafico-tip strong { font-variant-numeric: tabular-nums; }
/* bico do balao */
.grafico-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--tinta-forte);
}
.grafico-col:hover .grafico-tip {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
/* a barra reage junto, para ficar claro qual coluna esta sendo lida */
.grafico-barra { transition: filter .12s; }
.grafico-col:hover .grafico-barra { filter: brightness(1.12) saturate(1.1); }

/* Arrastar o quadro para rolar: a mao aberta convida, a fechada confirma. */
.kanban { cursor: grab; }
.kanban.arrastando { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.kanban.arrastando .ficha { pointer-events: none; }
/* a ficha e o formulario mantem o cursor normal: la o clique ainda e clique */
.kanban .ficha, .kanban a, .kanban button,
.kanban input, .kanban select, .kanban textarea { cursor: auto; }
.kanban .ficha { cursor: grab; }

/* ==========================================================================
   Comprovantes: gaveta que abre debaixo do lancamento
   ========================================================================== */
.linha-gaveta > td { padding: 0 !important; background: var(--papel); }
.gaveta { padding: 14px 18px; border-bottom: 1px solid var(--linha); }
.anexo-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.anexo-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--branco); border: 1px solid var(--linha-2);
  border-radius: var(--r-pill); padding: 5px 6px 5px 12px; font-size: 12px;
  max-width: 340px;
}
.anexo-chip a {
  color: var(--roxo-escuro); text-decoration: none; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.anexo-chip a:hover { text-decoration: underline; }
.anexo-chip button {
  border: 0; background: transparent; color: var(--texto-3);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px;
}
.anexo-chip button:hover { color: var(--vermelho); }
/* o clipe fica roxo quando ja ha comprovante — da para varrer a coluna
   inteira com o olho e ver o que falta anexar */
.btn.tem-anexo { color: var(--roxo); position: relative; }
.anexo-conta {
  position: absolute; top: -3px; right: -3px;
  background: var(--roxo); color: #fff; border-radius: var(--r-pill);
  font-size: 9px; line-height: 1; padding: 2px 4px; font-weight: 600;
}

/* ==========================================================================
   Falar com a IA: conversa de ensaio de um lado, ensino do outro
   ========================================================================== */
/* Os dois juntos de proposito: a licao nasce de ver a resposta torta. Separar
   em duas telas faz a pessoa ver o erro, mudar de tela e esquecer o que ia
   escrever. */
.ensaio-split {
  display: flex;
  flex: 1;
  min-height: 0;
}
.ensaio-chat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border-right: 1px solid var(--linha);
}
.ensaio-chat .card-topo { background: var(--branco); gap: 10px; }
.ensaio-lado {
  flex: 0 0 384px;
  max-width: 42vw;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--branco);
  min-height: 0;
}
.ensaio-lado .card-corpo { overflow-y: auto; flex: 1; }

.ensaio-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ensaio-m {
  max-width: 74%;
  padding: 10px 14px;
  border-radius: 15px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.ensaio-eu {
  align-self: flex-end;
  background: var(--roxo);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.ensaio-ela {
  align-self: flex-start;
  background: var(--branco);
  border: 1px solid var(--linha);
  color: var(--tinta);
  border-bottom-left-radius: 5px;
}
.ensaio-pensando { color: var(--texto-3); letter-spacing: 3px; }

.ensaio-escrever {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 14px 18px;
  border-top: 1px solid var(--linha);
  background: var(--branco);
}
.ensaio-escrever textarea {
  flex: 1;
  resize: none;
  min-height: 76px;
  max-height: 240px;
  font-family: inherit;
}

.licao {
  border: 1px solid var(--linha);
  border-radius: var(--r-campo);
  padding: 11px 13px;
  margin-bottom: 9px;
  font-size: 13.5px;
  line-height: 1.5;
}
.licao-off { opacity: .5; }
.licao-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

@media (max-width: 1000px) {
  .ensaio-split { flex-direction: column; }
  .ensaio-lado { flex: none; max-width: none; border-top: 1px solid var(--linha); }
}

/* ==========================================================================
   Mensagem: acoes ao passar o mouse, citacao, midia
   ========================================================================== */
/* As acoes ficam escondidas ate o mouse chegar. Botao visivel em toda bolha
   transforma a conversa numa parede de botoes e some com o texto, que e o
   que a pessoa esta ali para ler. */
/* O atributo hidden do HTML vale display:none, mas QUALQUER classe com
   display: ganha dele. Tres coisas nasceram abertas na tela por causa disso
   (paleta de emoji, barra de responder, etiqueta do anexo). Uma linha aqui
   resolve para o app inteiro e para o que vier depois. */
[hidden] { display: none !important; }

.msg .bolha { position: relative; }
.msg-acoes {
  position: absolute;
  top: -11px;
  display: none;
  gap: 2px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-pill);
  padding: 2px;
  box-shadow: 0 2px 8px rgba(20, 22, 28, .1);
  white-space: nowrap;
  z-index: 2;
}
.msg.entrada .msg-acoes { left: 8px; }
.msg.saida   .msg-acoes { right: 8px; }
.msg:hover .msg-acoes,
.msg:focus-within .msg-acoes { display: flex; }
.msg-acao {
  border: none;
  background: transparent;
  color: var(--texto-2);
  font: 500 11.5px inherit;
  font-family: inherit;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
}
.msg-acao:hover { background: var(--papel-2); color: var(--tinta); text-decoration: none; }
.msg-fonte { display: none; }

/* Citacao dentro da bolha: barra na lateral, como todo mundo faz, porque e o
   desenho que as pessoas ja sabem ler. */
.citacao {
  display: block;
  border-left: 3px solid var(--roxo);
  background: rgba(109, 40, 217, .07);
  border-radius: 6px;
  padding: 5px 9px;
  margin-bottom: 6px;
  text-decoration: none;
  color: inherit;
}
.msg.saida .citacao { background: rgba(255, 255, 255, .16); border-left-color: rgba(255,255,255,.7); }
.citacao:hover { text-decoration: none; opacity: .85; }
.citacao-quem { display: block; font-size: 11px; font-weight: 600; opacity: .85; }
.citacao-txt {
  display: block;
  font-size: 12px;
  opacity: .8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-foto {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: 10px;
  margin-bottom: 4px;
}
.msg-audio { display: block; width: 260px; max-width: 100%; margin: 2px 0; }
.msg-arquivo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .05);
  text-decoration: none;
  color: inherit;
}
.msg.saida .msg-arquivo { background: rgba(255, 255, 255, .18); }

/* ---- barra de escrever ---- */
.responder-a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-left: 3px solid var(--roxo);
  background: var(--roxo-fraco);
  border-radius: 6px;
}
.compositor-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.compositor-acoes label { margin: 0; cursor: pointer; }
.paleta-emoji {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 420px;
  padding: 8px;
  margin-bottom: 8px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-campo);
  box-shadow: 0 6px 20px rgba(20, 22, 28, .12);
}
.paleta-emoji .emoji {
  border: none;
  background: transparent;
  font-size: 19px;
  line-height: 1;
  padding: 5px;
  border-radius: 6px;
  cursor: pointer;
}
.paleta-emoji .emoji:hover { background: var(--papel-2); }

/* ==========================================================================
   Resumo do topo das conversas
   ========================================================================== */
/* O numero que importa e quantas conversas esperam a pessoa, e nao quantas
   existem. "2 conversas" nao move ninguem; "2 esperando resposta" move. */
.resumo { display: inline-flex; align-items: center; gap: 8px; }
.selo-espera {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--roxo);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: var(--r-pill);
}
.selo-espera::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: #fff;
  animation: pulso 1.8s ease-in-out infinite;
}
@keyframes pulso { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
.selo-calmo {
  display: inline-flex;
  align-items: center;
  background: var(--papel-2);
  color: var(--texto-2);
  font-size: 12px;
  padding: 3px 11px;
  border-radius: var(--r-pill);
}

/* O campo de arquivo do navegador e feio e nao da para estilizar. Quem aparece
   e o botao "Anexo"; o campo fica invisivel POR CONSTRUCAO, e nao por um
   atributo que um script pode remover sem querer. Continua clicavel por codigo
   e por clique no rotulo, que e como ele e usado. */
#campoAnexo {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   Selecao em lote na lista de conversas
   ========================================================================== */
/* A barra FLUTUA no rodape da tela. Dentro da coluna da lista, com 262px, o
   botao Apagar ficava cortado pela borda e ninguem via que existia. */
.lote-flutua {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  background: var(--tinta);
  color: #fff;
  border-radius: var(--r-pill);
  box-shadow: 0 10px 34px rgba(20, 22, 28, .3);
  font-size: 13px;
  white-space: nowrap;
}
.lote-flutua strong { font-weight: 600; padding-left: 4px; }
.lote-sep { width: 1px; height: 20px; background: rgba(255, 255, 255, .22); }
.lote-flutua .btn.fantasma { color: rgba(255, 255, 255, .72); }
.lote-flutua .btn.fantasma:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.lote-cabeca {
  padding: 7px 14px;
  border-bottom: 1px solid var(--linha);
  background: var(--branco);
}
.lote-todas {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--texto-2);
  cursor: pointer;
  margin: 0;
}
.marca-conversa {
  display: flex;
  align-items: center;
  margin: 0 7px 0 0;
  flex: none;
}
.marca-conversa input { margin: 0; cursor: pointer; width: 15px; height: 15px; }

/* Tarja de aviso, no lugar do alert do navegador. */
.tarja {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--tinta);
  color: #fff;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(20, 22, 28, .28);
  max-width: 90vw;
  transition: opacity .35s ease, transform .35s ease;
}
.tarja-erro { background: var(--vermelho); }
.tarja.saindo { opacity: 0; transform: translateX(-50%) translateY(8px); }

/* ==========================================================================
   Proximos boletos, agrupados por urgencia
   ========================================================================== */
/* Lista corrida obriga a ler tudo para achar o que queima. Agrupado, o olho
   para no primeiro bloco e ja sabe o tamanho do problema. */
.grupo-boleto + .grupo-boleto { border-top: 1px solid var(--linha); }
.grupo-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  font-size: 13px;
}
.grupo-boleto.vencidos .grupo-topo { background: var(--verm-fraco); color: var(--vermelho); }
.grupo-boleto.hoje .grupo-topo { background: var(--ambar-fraco); color: var(--ambar); }
.grupo-boleto .tabela td { padding-top: 9px; padding-bottom: 9px; }