/* marca-k3.css — identidade visual K3 Invest, sobre o design system
   =================================================================
   Carregado por último. É o ÚNICO arquivo que diz quanto vale cada cor,
   cada fonte e cada raio do painel. `styles.css` e `automacao.css` desenham
   tudo com nomes genéricos (--bg, --paper, --ink, --teal, --k3-fonte-ui…);
   quem dá valor a esses nomes é este arquivo.

   Azul K3     #1E2D54    estrutura a comunicação
   Dourado K3  #D1A771    apoio, destaque pontual
   Cinza K3    #3F3F3F    texto e hierarquia

   -------------------------------------------------------------------------
   O QUE MUDOU NESTA VERSÃO

   Os valores agora vêm do design system da K3, resolvidos em número aqui
   dentro — o painel continua sem depender de nenhuma folha externa. Nada de
   estrutura mudou: mesmas classes, mesmo HTML, mesmo JS. Só os valores.

   Quatro mudanças que se veem:

       papel     #F4F5F7 cinza frio     ->  #FBFAF7 papel morno
       tinta     #7C838F no apoio       ->  #5C6270 (passa 4.5:1 em papel
                                             tingido; o cinza frio não passava)
       forma     cartão 10px            ->  14px, campo 10px
       sombra    uma só                 ->  a escala xs/sm/md do sistema

   E duas que não mudaram, porque o manual da K3 manda mais que o sistema:
   Montserrat como família única, e o dourado areia #D1A771 — não a mostarda.

   A rampa de papel é morna de propósito: é ela que faz o azul da marca
   parecer azul, e não cinza-azulado. O cinza frio anterior competia.
   -------------------------------------------------------------------------
   REGRA DE TINTA HERDADA DO SISTEMA

   O cinza mais claro (--ink-fraco) NÃO é cor de texto: serve para fio,
   bolinha inativa e traço de ícone. Rótulo pequeno, metadado e legenda vão
   em --ink-mute, que passa 4.5:1 contra o papel mais escuro em uso
   (#EDEBE5). Antes o painel usava um cinza de 3,9:1 em rótulo de 10px.     */

:root{
  /* ================================================== FAMÍLIAS (uma linha) */
  /* O manual define Montserrat como a família da marca. Uma só, em todo
     lugar. `styles.css` e `automacao.css` leem estes três nomes — trocar
     aqui troca o painel inteiro. */
  --k3-fonte-ui:'Montserrat',system-ui,-apple-system,sans-serif;
  --k3-fonte-display:'Montserrat',system-ui,-apple-system,sans-serif;
  --k3-fonte-num:'Montserrat',system-ui,-apple-system,sans-serif;

  /* ====================================================== PALETA DA MARCA */
  --k3-azul:#1E2D54;
  --k3-dourado:#D1A771;
  --k3-dourado-texto:#8A6634;   /* o dourado legível sobre branco — 4.9:1 */
  --k3-cinza:#3F3F3F;
  --k3-preto:#000000;
  --k3-branco:#FFFFFF;

  /* rampa do azul, do sistema — hover, faixa escura, tinta de título */
  --k3-azul-950:#0B1426;
  --k3-azul-900:#0F1B33;
  --k3-azul-800:#17233F;
  --k3-azul-600:#2B3F6E;
  --k3-azul-500:#3A5080;
  --k3-azul-50:#F2F4F8;

  /* ==================================== SUPERFÍCIE E TEXTO (papel morno) */
  --bg:#FBFAF7;                 /* canvas */
  --paper:var(--k3-branco);     /* cartão */
  --papel-fundo:#F6F5F1;        /* cartão rebaixado */
  --papel-morto:#EDEBE5;        /* o papel mais escuro em que há texto */

  --ink:#1E2D54;                /* título — o azul da marca */
  --ink-corpo:#434A58;          /* corpo de texto */
  --ink-soft:#434A58;
  --ink-mute:#5C6270;           /* apoio, legenda, rótulo pequeno — 5.1:1 */
  --ink-fraco:#6E7480;          /* NÃO é cor de texto: fio, bolinha, ícone */

  --line:#EDEBE5;
  --line-strong:#CBC7BC;

  /* ------------------------------------------------------------ semânticos
     O painel herdou nomes de uma paleta anterior (--teal, --bronze). Os
     nomes ficaram; o significado é o da marca. */
  --teal:var(--k3-azul);
  --teal-soft:var(--k3-azul-50);
  --bronze:var(--k3-dourado-texto);
  --bronze-soft:#F7EEE3;

  /* Estados — a única parte da paleta que o manual não cobre, porque não é
     assunto de marca e sim de leitura: verde é "subiu", vermelho é "caiu".
     Valores do design system, já resolvidos em número. */
  --ok:#15633F;      --ok-soft:#DCF0E5;
  --erro:#8F1E17;    --erro-soft:#FBE1DE;
  --warn:#96590A;    --warn-soft:#FBEBCF;
  --info:#1E5A94;    --info-soft:#DCEAF7;

  --blue-brand:var(--k3-azul);
  --navy-deep:var(--k3-azul-900);

  /* ---------------------------------------------------------------- forma */
  --radius:14px;          /* cartão */
  --radius-campo:10px;    /* campo e botão */
  --radius-chip:8px;
  --radius-pill:999px;
  --altura-campo:40px;
  --anel-foco:0 0 0 3px rgba(58,80,128,.28);
  --sombra-xs:0 1px 2px rgba(15,27,51,.06);
  --sombra-sm:0 1px 3px rgba(15,27,51,.07),0 1px 2px rgba(15,27,51,.04);
  --sombra-md:0 4px 14px rgba(15,27,51,.08);
  --sombra-lg:0 12px 32px rgba(15,27,51,.12);

  accent-color:var(--k3-azul);
  color-scheme:light;
}

/* ============================== superfícies escuras: devolver a herança ===
   A camada base trazia

       h1,h2,h3,h4{ color:var(--text-strong) }

   e regra escrita direto no elemento vence herança: todo título dentro de
   uma superfície escura — o herói das telas 01 e 02, o splash, o painel de
   login — virava azul sobre azul e sumia.

   A correção é devolver a herança onde o fundo é escuro: quem manda na cor
   ali é o `color:#fff` da própria superfície. Mesmo sem a camada base
   carregada, a regra é inofensiva — e protege contra a próxima folha que
   resolver pintar título por elemento.

   O `.avatar` ficou FORA desta lista de propósito: ele já define o próprio
   `color` e não tem título dentro. Botar `inherit` nele fazia as iniciais do
   cliente herdarem a cor da página e desaparecerem no círculo dourado. */
.hero h1, .hero h2, .hero h3, .hero h4, .hero p, .hero a,
#splash h1, #splash h2, #splash h3, #splash h4, #splash p, #splash a,
.auth-panel h1, .auth-panel h2, .auth-panel h3, .auth-panel p{
  color:inherit;
}

/* ------------------------------------------------------------ tipografia */
body, h1, h2, h3, h4, .serif, .mono,
button, input, select, textarea, table, th, td,
.pagehead h1, .dm-btn, .dm-input, .cd-num, .dm-num,
#splash, #splash h1{
  font-family:var(--k3-fonte-ui);
}
body{color:var(--ink-corpo)}

/* Os seletores abaixo pedem 'Newsreader', 'Poppins' ou 'IBM Plex Mono' dentro
   do `styles.css`, de uma versão anterior do painel. O `index.html` não carrega
   nenhuma das três: cada uma caía na serif ou na monoespaçada do sistema, e o
   resultado era tipografia de três origens na mesma tela. Como Montserrat é
   família única no manual, a lista devolve todas elas para a fonte da marca.

   A lista é explícita, e não um `body *`, porque seletor de classe vence
   seletor de elemento: `body *` não alcançaria `.ops-updated`. */
.brand .mark, .navbtn .n, .clisub, .profile-head .meta, .field .v.mono,
.kpi .v, .stat .num, .hero .hk strong, .dm-data, .dm-charcount, .dm-sep,
.k3-wordmark, #splash .tagline, #splash .foot, .ops-updated,
.profile-bar .pct, .dm-link-fp code, .fp-sub span, .dm-moeda .dm-input,
.conversation-client .cc-hora, .conversation-head h2, .ops-header h2,
.calendar-heading h1, .auth-panel h2, .auth-panel label{
  font-family:var(--k3-fonte-ui);
}

/* números alinhados sem precisar de fonte monoespaçada */
.mono, .cd-num, .dm-num, .cd-funil-item strong, .funil-valor,
.prog-num, .rastro-linha strong, td.mono, .ops-mark, .navbtn .n,
.conta-copiavel, .int-tabela td.mono, .hk strong, .fi-num, .env-contagem{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:-0.01em;
}

.pagehead h1{font-size:27px; font-weight:700; letter-spacing:-0.02em; color:var(--k3-azul)}
.pagehead p{font-size:13px; color:var(--ink-mute)}
.section h3{
  font-size:11px; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-mute); margin:0 0 14px;
}
/* Sobre papel, o dourado da marca não tem contraste para texto de 10px:
   o rótulo usa o dourado legível. Sobre faixa escura ele volta a ser o da
   marca — ali o contraste vem do fundo. */
.eyebrow{
  font:700 10px var(--k3-fonte-ui); letter-spacing:0.14em;
  text-transform:uppercase; color:var(--k3-dourado-texto);
}
.hero .eyebrow, #splash .eyebrow, .auth-panel .eyebrow{color:#DCBB90}
.cd-num, .dm-num{font-weight:700; font-size:28px; letter-spacing:-0.03em; color:var(--k3-azul)}
.dm-sep{font-size:15px; font-weight:700; letter-spacing:-0.01em}
.cd-lbl, .dm-lbl, .fi-rot, .lbl{color:var(--ink-mute)}
.cd-sub, .dm-pct, .fi-sub, .env-sub, .meta, .sub{color:var(--ink-mute)}

/* ------------------------------------------------------------------ marca */
/* "K3 Invest." com o ponto em dourado, como no manual */
.brand .mark{
  font-family:var(--k3-fonte-display); font-weight:700;
  font-size:19px; letter-spacing:-0.03em; color:var(--k3-azul);
}
.brand .mark .ponto{color:var(--k3-dourado); font-weight:800}
.brand .sub{
  font-size:10px; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-mute);
}

/* ------------------------------------------------------------- formulário */
.dm-input, select, input[type="text"], input[type="password"],
input[type="email"], input[type="number"], input[type="date"], textarea{
  font-size:13px;
  border-radius:var(--radius-campo);
  border:1px solid var(--line-strong);
  background:var(--paper);
  color:var(--ink-corpo);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.dm-input::placeholder, textarea::placeholder{color:var(--ink-mute)}
.dm-input:focus, select:focus, input:focus, textarea:focus{
  outline:none; border-color:var(--k3-azul-500); box-shadow:var(--anel-foco);
}

.dm-btn{
  font-size:12.5px; font-weight:600; letter-spacing:-0.01em;
  padding:0 20px; min-height:var(--altura-campo);
  border-radius:var(--radius-campo);
  background:var(--k3-azul); border:1px solid var(--k3-azul); color:#fff;
  box-shadow:var(--sombra-xs);
  transition:background .15s ease, border-color .15s ease, transform .06s ease;
}
.dm-btn:hover{background:var(--k3-azul-800); border-color:var(--k3-azul-800)}
.dm-btn:active{background:var(--k3-azul-900); transform:translateY(1px)}
.dm-btn-sec{
  background:var(--paper); color:var(--k3-azul);
  border:1px solid var(--line-strong); box-shadow:none;
}
.dm-btn-sec:hover{background:var(--papel-fundo); border-color:var(--k3-azul-500)}
/* Desabilitado com cor própria, e não com opacidade: opacidade em cima de
   fundo claro apagava o texto a ponto de não dar para ler o que o botão
   fazia quando ele voltasse a funcionar. */
.dm-btn:disabled{
  background:#EDEBE5; border-color:#EDEBE5; color:#A9A59B;
  box-shadow:none; cursor:not-allowed; opacity:1;
}

.dm-lista-toggle{
  font-size:12px; border-radius:var(--radius-pill); padding:5px 13px;
  border:1px solid var(--line-strong); background:transparent;
  color:var(--ink-mute); transition:border-color .15s, color .15s;
}
.dm-lista-toggle:hover{border-color:var(--k3-azul-500); color:var(--k3-azul)}

/* ------------------------------------------------------------ superfícies
   Esta lista é a do arquivo original, de propósito. Ela NÃO pode crescer
   para `.auth-panel`, `#splash` ou `.hero`: essas superfícies são escuras e
   têm a regra de herança de cor logo acima, então pintá-las de branco deixa
   título branco sobre branco. Já aconteceu. */
.section, .cd-kpi, .conexao-faixa, .dm-kpi, .rastro{
  border-radius:var(--radius); border:1px solid var(--line);
  background:var(--paper);
}
.section, .cd-kpi, .dm-kpi{box-shadow:var(--sombra-xs)}
.badge, .cd-cat, .estado, .int-marca, .fi-selo{
  font-size:11px; font-weight:600; padding:3px 11px;
  border-radius:var(--radius-pill); letter-spacing:0.01em;
}

/* navegação lateral */
.navbtn{border-radius:var(--radius-campo); font-weight:500; color:var(--ink-corpo)}
.navbtn:hover{background:var(--papel-fundo)}
.navbtn.active{background:var(--teal-soft); color:var(--k3-azul); font-weight:600}
.navbtn .n{color:var(--k3-dourado-texto); font-weight:700}
.navbtn.active .n{color:var(--k3-azul)}

/* abas */
.aba{color:var(--ink-mute)}
.aba.ativa{color:var(--k3-azul); border-bottom-color:var(--k3-dourado); font-weight:700}

/* A tabela fica como `styles.css` desenhou: largura de coluna, alinhamento e
   fio já estão resolvidos lá. Uma versão desta folha mexeu no `th` — pôs
   maiúscula com entreletra — e as duas primeiras colunas da Central de
   prioridades passaram uma por cima da outra.

   Só uma correção ficou, e é de defeito antigo: a coluna de posição tem
   42px de largura e o cabeçalho "Posição" não cabe nela, então a palavra
   invadia "Cliente". Reserva o espaço do próprio texto. */
th.row-number{min-width:80px; white-space:nowrap}

/* barras e progresso usam o dourado como cor de apoio */
.funil-barra > span{background:var(--k3-azul)}
.prog > span{background:var(--k3-dourado)}
.cd-funil-item strong{color:var(--k3-azul)}

/* foco visível consistente */
.dm-btn:focus-visible, .aba:focus-visible, .camp-item:focus-visible,
.navbtn:focus-visible, .dm-lista-toggle:focus-visible{
  outline:2px solid var(--k3-dourado); outline-offset:2px;
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

.rodape-nota{font-size:12px; color:var(--ink-mute); margin-top:10px; line-height:1.5}

/* ===================================================== copiar a conta ===
   O botão que fica ao lado de todo número de conta. Discreto parado,
   visível quando o mouse passa pela linha, e com resposta própria — verde
   no acerto, vermelho no erro — porque copiar sem retorno não se percebe. */
.conta-copiavel{display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.btn-copiar{
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; padding:0; border:0; border-radius:4px;
  background:transparent; color:var(--ink-fraco); cursor:pointer;
  opacity:.45; transition:opacity .12s, background .12s, color .12s;
  vertical-align:middle; flex:0 0 auto;
}
.btn-copiar svg{width:12px; height:12px; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
tr:hover .btn-copiar, .field:hover .btn-copiar, .meta:hover .btn-copiar{opacity:.8}
.btn-copiar:hover{opacity:1; background:var(--k3-azul-50); color:var(--k3-azul)}
.btn-copiar:focus-visible{opacity:1; outline:2px solid var(--k3-dourado); outline-offset:1px}
.btn-copiar-ok{opacity:1 !important; color:var(--ok); background:var(--ok-soft)}
.btn-copiar-erro{
  opacity:1 !important; color:var(--erro); background:var(--erro-soft);
  font-size:12px; font-weight:700;
}

/* ============================================ elegíveis das campanhas ===
   O seletor de campanha reaproveita o mesmo componente da aba 07: são duas
   telas com a mesma pergunta ("qual das duas listas?"), e responder de dois
   jeitos diferentes seria confundir de graça. */
.int-descricao{margin:-6px 0 14px; color:var(--ink-mute); font-size:13px}
.int-marca{
  display:inline-block; margin-left:6px; padding:1px 7px;
  border-radius:var(--radius-pill); background:var(--k3-azul-50);
  color:var(--k3-azul); font-size:10.5px; font-weight:600;
  letter-spacing:.02em; vertical-align:middle;
}
.fi-selo{margin-left:auto; align-self:center}
.profile-head{align-items:center}

/* =========================================== teste do link público ===
   Endereço de túnel caído tem cara perfeita. O botão ao lado do campo é o
   único jeito de saber, sem esperar um cliente reclamar. */
.base-teste-status.ok{color:var(--ok)}
.base-teste-status.erro{color:var(--erro)}