/* ==========================================================================
   Sistema Ivan Gouveia — design system (protótipo visual)
   Estrutura inspirada no painel "NOVA Analytics"; identidade, paleta e
   tipografia iguais às do site (azul-marinho + dourado, Poppins).
   Tokens em :root; componentes abaixo. CSS específico de uma tela vai num
   <style> no <head> da própria página.

   Nomes legados das cores de apoio (mantidos para não mexer nas telas):
   .cor-roxo / data-cor="roxo" = dourado (cor primária) · .cor-azul / "azul" = azul-marinho
   ========================================================================== */

@font-face { font-family: Poppins; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/poppins-latin-ext-300-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/poppins-latin-300-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  /* identidade do site */
  --marinho-escuro: #080c14;   /* fundo do topo/rodapé do site */
  --marinho: #1a1f39;          /* faixa "Não sabe por onde começar?" */
  --marinho-2: #2a3256;
  --marinho-borda: #1b1f2e;
  --lavanda: #a9b6db;
  --ouro-1: #b98a33;
  --ouro-2: #d1ae63;
  --ouro-3: #ead497;
  --ouro-claro: #f2dba1;
  --degrade-ouro: linear-gradient(90deg, var(--ouro-1) 0%, var(--ouro-2) 55%, var(--ouro-3) 100%);

  /* primária = dourado. --primaria para preenchimentos; --primaria-texto para texto/ícones sobre fundo claro */
  --primaria: #b98a33;
  --primaria-600: #a77a26;
  --primaria-700: #8a6320;
  --primaria-texto: #8a6320;
  --primaria-100: #f0e2c0;
  --primaria-50: #faf4e6;
  --sobre-ouro: #16120a;       /* texto sobre botão dourado (como no site) */

  --verde: #1f9d55;      --verde-50: #e6f5ec;   --verde-forte: #23b862;
  --azul: #2a3256;       --azul-50: #e8ebf5;
  --laranja: #d97a0f;    --laranja-50: #fdf0e1;
  --vermelho: #d0263c;   --vermelho-50: #fcebed;
  --rosa: #b5487a;       --rosa-50: #f8e9f0;
  --ciano: #1f8a8a;      --ciano-50: #e3f2f2;

  --fundo: #f4f6fb;
  --cartao: #ffffff;
  --cartao-2: #fafbfd;
  --borda: #e6e9f2;
  --borda-forte: #d8dce9;
  --texto: #0b1020;
  --texto-2: #4a5070;
  --texto-3: #8a90a6;

  --trilho: #edf0f7;            /* trilhas de progresso, grades de gráfico */
  --neutro-fundo: #eff1f6;
  --coluna-fundo: #eef1f9;
  --topbar-fundo: rgba(244, 246, 251, .88);
  --g-roxo: #c39443; --g-ouro: #c39443; --g-azul: #2a3256; --g-marinho: #2a3256; --g-lavanda: #a9b6db;
  --g-verde: #23b862; --g-laranja: #d97a0f; --g-vermelho: #d0263c; --g-rosa: #b5487a; --g-ciano: #1f8a8a; --g-cinza: #c9cede;
  --g-serie1: #b98a33; --g-serie2: #2a3256; --g-barra1: #c39443; --g-barra2: #a9b6db;

  --sidebar-fundo: var(--marinho-escuro);
  --sidebar-texto: #c3c8de;
  --sidebar-mudo: #8d93ad;

  --raio: 14px;
  --raio-sm: 10px;
  --raio-xs: 8px;
  --sombra: 0 1px 2px rgba(11, 16, 32, .04), 0 8px 24px -14px rgba(11, 16, 32, .14);
  --sombra-flutuante: 0 12px 40px -12px rgba(11, 16, 32, .3);
  --sombra-ouro: 0 10px 24px -12px rgba(209, 174, 99, .7);

  --fonte: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-marca: Georgia, "Times New Roman", serif;
  --largura-sidebar: 236px;
  --altura-topbar: 72px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--fonte); font-size: 13.5px; line-height: 1.55; color: var(--texto);
  background: var(--fundo); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--primaria-600); outline-offset: 2px; }
.num, .tabela td, .kpi__valor, .metrica__valor { font-variant-numeric: tabular-nums; }
.sr { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* áreas com rolagem própria contêm o que estiver posicionado dentro delas (sem isso, um .sr escapa e estica a página) */
.nav, .abas, .kanban, .chat__lista, .chat__conversas, .chat__mensagens, .chat__info, .carrossel, .segmentado { position: relative; }

/* Ícones: <svg class="ic"><use href="#i-nome"/></svg> */
.ic { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
.ic--sm { width: 16px; height: 16px; }
.ic--lg { width: 24px; height: 24px; }

/* ---------- Utilitários ---------- */
.texto-2 { color: var(--texto-2); }
.texto-3 { color: var(--texto-3); }
.texto-sm { font-size: 12.5px; }
.texto-xs { font-size: 11.5px; }
.forte { font-weight: 600; }
.cor-sucesso { color: var(--verde); }
.cor-perigo { color: var(--vermelho); }
.cor-alerta { color: var(--laranja); }
.cor-primaria { color: var(--primaria-texto); }
.texto-ouro {   /* texto dourado do site (títulos sobre fundo escuro) */
  color: var(--ouro-2); background: linear-gradient(90deg, #c4913a 0%, #e6b75e 55%, #d8a24a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.linha { display: flex; align-items: center; gap: 8px; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pilha { display: flex; flex-direction: column; gap: 20px; }
.pilha--sm { gap: 12px; }
.empurra { margin-left: auto; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.largura-total { width: 100%; }

/* Grades: <div class="grade g-4"> ... ; .span-2 ocupa 2 colunas */
.grade { display: grid; gap: 20px; }
.grade > *, .pilha > * { min-width: 0; }   /* filhos não se esticam além da coluna; tabelas largas rolam dentro do cartão */
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-lateral { grid-template-columns: minmax(0, 1fr) 280px; }       /* conteúdo + coluna lateral */
.g-lateral-esq { grid-template-columns: 340px minmax(0, 1fr); }   /* coluna lateral + conteúdo */
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-todas { grid-column: 1 / -1; }

/* ==========================================================================
   Estrutura do app (sidebar + topbar + conteúdo). Montada pelo app.js.
   ========================================================================== */
.app {
  display: grid; grid-template-columns: var(--largura-sidebar) minmax(0, 1fr); min-height: 100vh;
  background: linear-gradient(to right, var(--sidebar-fundo) var(--largura-sidebar), transparent 0);
}

/* Barra lateral escura, com a mesma marca do topo do site */
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  padding: 22px 14px 18px; background: var(--sidebar-fundo); border-right: 1px solid var(--marinho-borda); z-index: 40;
  color: var(--sidebar-texto); color-scheme: dark;
}
.marca-app { display: flex; align-items: center; gap: 11px; padding: 2px 10px 26px; }
.marca-app__simbolo { display: block; flex: none; }
.marca-app__simbolo img { width: auto; height: 38px; }
.marca-app__nome {
  font-family: var(--fonte-marca); font-size: 16px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; line-height: 1.1;
  color: var(--ouro-2); background: var(--degrade-ouro); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.marca-app__sub { display: inline-block; margin-top: 5px; font-size: 8px; font-weight: 500; letter-spacing: .14em; white-space: nowrap; text-transform: uppercase; color: var(--ouro-2); }

.nav { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; scrollbar-color: #2a3150 transparent; }
.nav__sep { height: 1px; background: var(--marinho-borda); margin: 10px 10px; }
.nav__item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--raio-sm);
  color: var(--sidebar-texto); font-weight: 400; transition: background-color .15s, color .15s;
}
.nav__item .ic { color: var(--sidebar-mudo); transition: color .15s; }
.nav__item:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.nav__item:hover .ic { color: var(--ouro-2); }
.nav__item.is-ativo { background: var(--degrade-ouro); color: var(--sobre-ouro); font-weight: 500; box-shadow: var(--sombra-ouro); }
.nav__item.is-ativo .ic { color: var(--sobre-ouro); }
.nav__badge {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
  background: var(--ouro-2); color: var(--sobre-ouro);
}
.nav__item.is-ativo .nav__badge { background: var(--sobre-ouro); color: var(--ouro-3); }

.sidebar__cartao {
  margin-top: auto; padding: 18px; border-radius: var(--raio);
  background: var(--marinho); border: 1px solid #2a3150;
}
.sidebar__cartao-icone {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  background: rgba(209, 174, 99, .12); color: var(--ouro-2); margin-bottom: 14px;
}
.sidebar__cartao h3 { font-size: 14.5px; margin-bottom: 4px; color: #fff; }
.sidebar__cartao p { font-size: 12.5px; color: var(--sidebar-texto); margin-bottom: 14px; }

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

.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px;
  height: var(--altura-topbar); padding: 0 24px; background: var(--topbar-fundo);
  backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent;
}
.topbar.is-rolado { border-bottom-color: var(--borda); }
.topbar__menu { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--raio-sm); background: transparent; color: var(--texto-2); cursor: pointer; }
.topbar__menu:hover { background: var(--cartao); }
.busca {
  position: relative; flex: 1 1 260px; max-width: 380px; min-width: 0; display: flex; align-items: center;
}
.busca .ic { position: absolute; left: 14px; color: var(--texto-3); pointer-events: none; }
.busca input {
  width: 100%; height: 42px; padding: 0 56px 0 42px; border-radius: var(--raio-sm);
  background: var(--cartao); border: 1px solid var(--borda); outline: none; transition: border-color .15s, box-shadow .15s;
}
.busca input:focus { border-color: var(--primaria-texto); box-shadow: 0 0 0 4px var(--primaria-50); }
.busca kbd {
  position: absolute; right: 10px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--borda);
  font: 500 11px var(--fonte); color: var(--texto-3); background: var(--cartao-2);
}
.topbar__acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.prototipo {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px;
  background: var(--laranja-50); color: #a85a00; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
a.prototipo:hover { box-shadow: inset 0 0 0 1px var(--laranja); }
.btn-icone {
  position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--raio-sm);
  background: var(--cartao); border: 1px solid var(--borda); color: var(--texto-2); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.btn-icone:hover { color: var(--primaria-texto); border-color: var(--primaria-100); }
.btn-icone__ponto {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 600; color: #fff; background: var(--vermelho);
  box-shadow: 0 0 0 2px var(--fundo);
}
.usuario { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: 12px; cursor: pointer; border: 0; background: transparent; text-align: left; }
.usuario:hover { background: var(--cartao); }
.usuario__nome { font-weight: 600; font-size: 13.5px; line-height: 1.2; white-space: nowrap; }
.usuario__texto { white-space: nowrap; }
.usuario__papel { font-size: 12px; color: var(--texto-3); }

.app__conteudo { padding: 8px 24px 40px; }

/* Sobreposição da sidebar no celular/tablet */
.app__veu { display: none; }

/* Botões da barra superior */
.btn-icone--whats { color: var(--verde); }
.btn-icone--receber { color: var(--verde); }
.btn-icone--pagar { color: var(--vermelho); }
.btn-icone--whats:hover, .btn-icone--receber:hover { color: var(--verde); }
.btn-icone--pagar:hover { color: var(--vermelho); }
.suspenso__item .suspenso__texto small { white-space: normal; }
.btn-icone__ponto--verde { background: var(--verde-forte); }
.suspenso__menu--largo { width: 360px; max-width: calc(100vw - 24px); }
.suspenso__titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 10px; font-weight: 600; color: var(--texto); }
.suspenso__menu a .avatar { flex: none; }
.suspenso__texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.suspenso__texto strong { font-weight: 500; color: var(--texto); }
.suspenso__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 13px; color: var(--texto-2); }
.suspenso__item + .suspenso__item { border-top: 1px solid var(--borda); border-radius: 0; }
.suspenso__valor { margin-left: auto; padding-left: 8px; font-weight: 600; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.suspenso__rodape { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0 0; padding: 10px 10px 6px; border-top: 1px solid var(--borda); font-size: 12.5px; color: var(--texto-3); }
.suspenso__rodape strong { color: var(--texto); font-weight: 600; }
.suspenso__texto small { font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Cabeçalho da página ---------- */
.pagina-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 12px 0 24px; }
.pagina-topo h1 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.pagina-topo p { margin-top: 6px; color: var(--texto-2); }
.pagina-topo__acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.trilha { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12.5px; color: var(--texto-3); }
.trilha a:hover { color: var(--primaria-texto); }
.trilha .ic { width: 14px; height: 14px; }

/* ---------- Cartões ---------- */
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px; min-width: 0; }
.cartao--sem-padding { padding: 0; }
.cartao--destaque { background: radial-gradient(70% 90% at 85% 10%, rgba(48, 58, 118, .55) 0%, rgba(48, 58, 118, 0) 70%), linear-gradient(135deg, #0a0c19 0%, var(--marinho) 100%); color: #fff; border: 0; }
.cartao--destaque .btn--primario { box-shadow: none; }
.cartao__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cartao--sem-padding .cartao__topo { padding: 18px 20px 0; }
.cartao__titulo { font-size: 15px; font-weight: 600; }
.cartao__sub { font-size: 12.5px; color: var(--texto-3); margin-top: 2px; }
.cartao__acoes { display: flex; align-items: center; gap: 8px; }
.cartao__rodape { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda); }

/* ---------- KPI (cartão de indicador) ---------- */
.kpi { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.kpi__topo { display: flex; align-items: center; gap: 11px; }
.kpi__topo > div { min-width: 0; }
.kpi__rotulo { font-size: 12px; color: var(--texto-2); line-height: 1.3; }
.kpi__valor { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; }
.kpi__rodape { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.kpi__rodape > div { min-width: 0; }
.kpi__rodape .texto-xs { color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi__grafico { width: 66px; height: 30px; flex: none; }
.kpi .icone-quadro { width: 34px; height: 34px; border-radius: 10px; }
.kpi .icone-quadro .ic { width: 18px; height: 18px; }

.icone-quadro { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex: none; }
.icone-quadro--sm { width: 34px; height: 34px; border-radius: 10px; }
.icone-quadro--sm .ic { width: 17px; height: 17px; }
.cor-roxo { background: var(--primaria-50); color: var(--primaria-texto); }
.cor-verde { background: var(--verde-50); color: var(--verde); }
.cor-azul { background: var(--azul-50); color: var(--azul); }
.cor-laranja { background: var(--laranja-50); color: var(--laranja); }
.cor-vermelho { background: var(--vermelho-50); color: var(--vermelho); }
.cor-rosa { background: var(--rosa-50); color: var(--rosa); }
.cor-ciano { background: var(--ciano-50); color: var(--ciano); }

.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.delta .ic { width: 14px; height: 14px; }
.delta--sobe { color: var(--verde); }
.delta--desce { color: var(--vermelho); }

/* Métrica compacta (linha de 3 indicadores) */
.metrica { display: flex; align-items: center; gap: 14px; }
.metrica__rotulo { font-size: 13px; color: var(--texto-2); }
.metrica > div { min-width: 0; }
.metrica__valor { font-size: 19px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.metrica .delta { margin-left: auto; align-self: flex-start; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--raio-sm); border: 1px solid transparent;
  font-weight: 600; font-size: 13.5px; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn .ic { width: 18px; height: 18px; }
.btn--primario { background: var(--degrade-ouro); color: var(--sobre-ouro); box-shadow: var(--sombra-ouro); }
.btn--primario:hover { box-shadow: 0 14px 28px -12px rgba(222, 190, 120, .9); filter: saturate(1.08); }
.btn--suave { background: var(--primaria-50); color: var(--primaria-texto); }
.btn--suave:hover { background: var(--primaria-100); }
.btn--contorno { background: var(--cartao); border-color: var(--borda-forte); color: var(--texto); }
.btn--contorno:hover { border-color: var(--primaria-texto); color: var(--primaria-texto); }
.btn--fantasma { background: transparent; color: var(--texto-2); }
.btn--fantasma:hover { background: var(--fundo); color: var(--texto); }
.btn--sucesso { background: var(--verde); color: #fff; }
.btn--perigo { background: var(--vermelho-50); color: var(--vermelho); }
.btn--perigo:hover { background: #fbdcdc; }
.btn--whats { background: #1fa855; color: #fff; }
.btn--sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: var(--raio-xs); }
.btn--sm .ic { width: 16px; height: 16px; }
.btn--lg { height: 48px; padding: 0 22px; font-size: 14.5px; }
.btn--bloco { width: 100%; }
.btn--icone { width: 40px; padding: 0; }
.btn--sm.btn--icone { width: 32px; }

/* Seletor compacto (ex.: "Este mês ▾") */
.seletor {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px; border-radius: var(--raio-xs);
  border: 1px solid var(--borda); background: var(--cartao); font-size: 12.5px; font-weight: 500; color: var(--texto-2); cursor: pointer; white-space: nowrap;
}
.seletor .ic { width: 15px; height: 15px; }
.seletor--grande { height: 42px; padding: 0 14px; font-size: 13.5px; border-radius: var(--raio-sm); gap: 8px; }

/* ---------- Formulários ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo__rotulo { font-size: 13px; font-weight: 600; color: var(--texto); }
.campo__ajuda { font-size: 12px; color: var(--texto-3); }
.campo__erro { font-size: 12px; color: var(--vermelho); }
.entrada, .selecao, .area-texto {
  width: 100%; height: 44px; padding: 0 14px; border-radius: var(--raio-sm);
  border: 1px solid var(--borda-forte); background: var(--cartao); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.area-texto { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.entrada::placeholder, .area-texto::placeholder { color: #a6abbf; }
.entrada:focus, .selecao:focus, .area-texto:focus { border-color: var(--primaria-texto); box-shadow: 0 0 0 4px var(--primaria-50); }
.entrada.is-erro { border-color: var(--vermelho); box-shadow: 0 0 0 4px var(--vermelho-50); }
.selecao { appearance: none; padding-right: 38px; background: var(--cartao) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a90a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.entrada-icone { position: relative; display: flex; align-items: center; }
.entrada-icone > .ic { position: absolute; left: 14px; color: var(--texto-3); pointer-events: none; }
.entrada-icone .entrada { padding-left: 42px; }
.entrada-icone__acao { position: absolute; right: 6px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: var(--raio-xs); background: transparent; color: var(--texto-3); cursor: pointer; }
.entrada-icone__acao:hover { color: var(--primaria-texto); background: var(--primaria-50); }
.form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.form-grade .span-todas { grid-column: 1 / -1; }

.checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--texto-2); cursor: pointer; }
.checkbox input { appearance: none; flex: none; width: 18px; height: 18px; margin: 1px 0 0; border-radius: 5px; border: 1.5px solid var(--borda-forte); background: var(--cartao); display: grid; place-items: center; cursor: pointer; transition: background-color .15s, border-color .15s; }
.checkbox input:checked { background: var(--primaria); border-color: var(--primaria-texto); }
.checkbox input:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.checkbox a { color: var(--primaria-texto); font-weight: 500; }

.interruptor { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; }
.interruptor input { appearance: none; width: 38px; height: 22px; border-radius: 999px; background: var(--borda-forte); margin: 0; cursor: pointer; transition: background-color .2s; position: relative; flex: none; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s var(--ease); }
.interruptor input:checked { background: var(--primaria); }
.interruptor input:checked::after { transform: translateX(16px); }

/* Controle segmentado (ex.: Equipe | Cliente) */
.segmentado { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 4px; border-radius: 12px; background: var(--fundo); border: 1px solid var(--borda); gap: 4px; }
.segmentado > * { flex: none; }
.segmentado button, .segmentado label { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 9px; border: 0; background: transparent; font-weight: 600; font-size: 13px; color: var(--texto-2); cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; }
.segmentado .is-ativo { background: var(--cartao); color: var(--texto); box-shadow: 0 1px 3px rgba(16,24,64,.1); }
.segmentado--bloco { display: flex; }
.segmentado--bloco > * { flex: 1; justify-content: center; }

/* Filtros (chips) */
.barra-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borda); background: var(--cartao); font-size: 13px; font-weight: 500; color: var(--texto-2); cursor: pointer; }
.chip:hover { border-color: var(--primaria-100); color: var(--texto); }
.chip.is-ativo { background: var(--texto); border-color: var(--texto); color: #fff; }
.chip__contador { font-size: 11.5px; font-weight: 600; opacity: .7; }

/* ---------- Pills de status ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--sem-ponto::before { display: none; }
.pill--sucesso { background: var(--verde-50); color: var(--verde); }
.pill--alerta { background: var(--laranja-50); color: #c46b00; }
.pill--perigo { background: var(--vermelho-50); color: var(--vermelho); }
.pill--info { background: var(--azul-50); color: var(--azul); }
.pill--primario { background: var(--primaria-50); color: var(--primaria-texto); }
.pill--neutro { background: var(--neutro-fundo); color: var(--texto-2); }
.etiqueta { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
:where(.etiqueta) { background: var(--neutro-fundo); color: var(--texto-2); }   /* prioridade zero: .etiqueta.cor-azul etc. pintam */
.ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); flex: none; }
.ponto--sucesso { background: var(--verde-forte); } .ponto--alerta { background: var(--laranja); } .ponto--perigo { background: var(--vermelho); } .ponto--primario { background: var(--primaria); } .ponto--azul { background: var(--azul); }

/* ---------- Avatares ---------- */
.avatar {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none;
  font-size: 12.5px; font-weight: 600; color: #fff; background: var(--marinho-2);
}
.avatar--xs { width: 26px; height: 26px; font-size: 10.5px; }
.avatar--sm { width: 30px; height: 30px; font-size: 11px; }
.avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.avatar--xl { width: 76px; height: 76px; font-size: 24px; }
.avatar[data-cor="1"] { background: #2a3256; } .avatar[data-cor="2"] { background: #1f9d55; } .avatar[data-cor="3"] { background: #b98a33; }
.avatar[data-cor="4"] { background: #4b6fb8; } .avatar[data-cor="5"] { background: #b5487a; } .avatar[data-cor="6"] { background: #1f8a8a; }
.avatar[data-cor="7"] { background: #7a6a4f; } .avatar[data-cor="8"] { background: #c0392b; } .avatar[data-cor="9"] { background: #080c14; }
.avatares { display: flex; }
.avatares .avatar { box-shadow: 0 0 0 2px var(--cartao); }
.avatares .avatar + .avatar { margin-left: -8px; }
.avatar--mais { background: var(--primaria-50) !important; color: var(--primaria-texto); }

.pessoa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pessoa__nome { font-weight: 600; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pessoa__sub { font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pessoa > div { min-width: 0; }

/* ---------- Tabela ---------- */
.tabela-wrap { position: relative; overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
.cartao--sem-padding .tabela-wrap { margin: 0; padding: 0; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { padding: 10px 14px; text-align: left; font-size: 12px; font-weight: 600; color: var(--texto-3); white-space: nowrap; border-bottom: 1px solid var(--borda); }
.tabela td { padding: 13px 14px; border-bottom: 1px solid var(--borda); color: var(--texto-2); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr { transition: background-color .12s; }
.tabela tbody tr:hover { background: var(--cartao-2); }
.tabela th:first-child, .tabela td:first-child { padding-left: 4px; }
.cartao--sem-padding .tabela th:first-child, .cartao--sem-padding .tabela td:first-child { padding-left: 20px; }
.tabela .direita { text-align: right; }
.tabela td.num, .tabela td.direita { white-space: nowrap; }
.tabela .forte { color: var(--texto); }
.tabela__acoes { display: flex; gap: 4px; justify-content: flex-end; }
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--borda); font-size: 12.5px; color: var(--texto-3); }
.paginacao__botoes { display: flex; gap: 4px; }
.paginacao__botoes button { min-width: 32px; height: 32px; border-radius: var(--raio-xs); border: 1px solid var(--borda); background: var(--cartao); font-weight: 600; font-size: 12.5px; color: var(--texto-2); cursor: pointer; }
.paginacao__botoes .is-ativo { background: var(--primaria); border-color: var(--primaria-texto); color: #fff; }

/* ---------- Listas ---------- */
.lista > li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.lista > li:first-child { padding-top: 0; }
.lista > li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista__texto { flex: 1; min-width: 0; }
.lista__titulo { font-weight: 500; color: var(--texto); }
.lista__sub { font-size: 12px; color: var(--texto-3); }
.lista__meta { font-size: 12px; color: var(--texto-3); white-space: nowrap; display: flex; align-items: center; gap: 8px; }

/* ---------- Progresso ---------- */
.progresso { height: 8px; border-radius: 999px; background: var(--trilho); overflow: hidden; }
.progresso__barra { height: 100%; border-radius: inherit; background: var(--primaria); }
.progresso--verde .progresso__barra { background: var(--verde-forte); }
.progresso--laranja .progresso__barra { background: var(--laranja); }

/* Gráficos (gerados pelo app.js a partir de data-*) */
.grafico { position: relative; width: 100%; }
.grafico svg { display: block; width: 100%; height: 100%; overflow: visible; }
.grafico--area { height: 240px; }
.grafico--barras { height: 240px; }
.grafico__dica {
  position: absolute; transform: translate(-50%, -120%); padding: 6px 10px; border-radius: 8px; pointer-events: none;
  background: var(--cartao); box-shadow: var(--sombra-flutuante); border: 1px solid var(--borda); text-align: center; white-space: nowrap;
}
.grafico__dica strong { display: block; font-size: 13px; }
.grafico__dica span { font-size: 11px; color: var(--texto-3); }
.legenda { display: flex; flex-direction: column; gap: 12px; }
.legenda li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--texto-2); }
.legenda li strong { margin-left: auto; color: var(--texto); font-weight: 600; white-space: nowrap; }
.legenda--linha { flex-direction: row; flex-wrap: wrap; gap: 16px; }
.anel { position: relative; display: grid; place-items: center; }
.g-grade, .g-trilho { stroke: var(--trilho); }
.g-rotulo { fill: var(--texto-3); }
.g-serie1, .g-guia { stroke: var(--g-serie1); }
.g-serie2 { stroke: var(--g-serie2); }
.g-barra1 { fill: var(--g-barra1); }
.g-barra2 { fill: var(--g-barra2); }
.grafico .marcador { fill: var(--g-serie1); stroke: var(--cartao); }
.anel__centro { position: absolute; text-align: center; }
.anel__valor { font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.anel__rotulo { font-size: 12px; color: var(--texto-3); }

/* ---------- Abas ---------- */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 20px; overflow-x: auto; }
.aba { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px; border: 0; background: none; font-weight: 600; font-size: 13.5px; color: var(--texto-3); cursor: pointer; white-space: nowrap; }
.aba:hover { color: var(--texto); }
.aba.is-ativa { color: var(--primaria-texto); }
.aba.is-ativa::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--primaria); }
.aba .chip__contador { background: var(--fundo); padding: 1px 7px; border-radius: 999px; opacity: 1; }
.painel-aba[hidden] { display: none; }

/* ---------- Linha do tempo ---------- */
.linha-tempo { position: relative; display: flex; flex-direction: column; gap: 20px; padding-left: 26px; }
.linha-tempo::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--borda); }
.marco { position: relative; }
.marco::before { content: ""; position: absolute; left: -26px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--cartao); border: 3px solid var(--primaria); }
.marco--sucesso::before { border-color: var(--verde-forte); }
.marco--alerta::before { border-color: var(--laranja); }
.marco--neutro::before { border-color: var(--borda-forte); }
.marco__data { font-size: 12px; color: var(--texto-3); }
.marco__titulo { font-weight: 600; margin: 2px 0; }
.marco__texto { color: var(--texto-2); font-size: 13px; }

/* Etapas (progresso de processo, ex.: portal do cliente) */
.etapas { display: flex; gap: 6px; }
.etapa { flex: 1; min-width: 0; }
.etapa__barra { height: 6px; border-radius: 999px; background: var(--trilho); margin-bottom: 8px; }
.etapa.is-feita .etapa__barra { background: var(--verde-forte); }
.etapa.is-atual .etapa__barra { background: var(--primaria); }
.etapa__nome { font-size: 12px; font-weight: 600; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etapa.is-feita .etapa__nome, .etapa.is-atual .etapa__nome { color: var(--texto); }

/* ---------- Ações rápidas ---------- */
.acoes-rapidas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.acao-rapida {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px 8px;
  border-radius: 12px; border: 1px solid var(--borda); background: var(--cartao-2); font-size: 12.5px; font-weight: 600; color: var(--texto-2);
  text-align: center; transition: border-color .15s, transform .15s var(--ease), color .15s;
}
.acao-rapida:hover { border-color: var(--primaria-100); color: var(--texto); transform: translateY(-2px); }

/* ---------- Avisos ---------- */
.aviso { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; font-size: 13px; border: 1px solid; }
.aviso .ic { margin-top: 1px; }
.aviso strong { color: var(--texto); }
.aviso--info { background: var(--azul-50); border-color: #d5e0ff; color: #3a4c80; }
.aviso--alerta { background: var(--laranja-50); border-color: #ffdcb4; color: #7a4a10; }
.aviso--alerta .ic { color: var(--laranja); }
.aviso--perigo { background: var(--vermelho-50); border-color: #f8c9ca; color: #8a2a2d; }
.aviso--sucesso { background: var(--verde-50); border-color: #bfe9cf; color: #1c5c36; }
.vazio { display: grid; place-items: center; gap: 10px; padding: 40px 20px; text-align: center; color: var(--texto-3); }

/* ---------- Kanban ---------- */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.coluna { background: var(--coluna-fundo); border-radius: var(--raio); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.coluna__topo { display: flex; align-items: center; gap: 8px; padding: 4px 4px 6px; font-weight: 600; }
.coluna__topo .chip__contador { margin-left: 2px; }
.cartao-kanban { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 14px; box-shadow: 0 1px 2px rgba(16,24,64,.05); display: flex; flex-direction: column; gap: 10px; cursor: grab; }
.cartao-kanban:hover { border-color: var(--primaria-100); }
.cartao-kanban__titulo { font-weight: 600; color: var(--texto); line-height: 1.35; }

/* ---------- Atendimento / chat ---------- */
.chat { display: grid; grid-template-columns: 320px minmax(0, 1fr) 300px; height: calc(100vh - var(--altura-topbar) - 120px); min-height: 560px; overflow: hidden; }
.chat__lista { border-right: 1px solid var(--borda); display: flex; flex-direction: column; min-height: 0; }
.chat__lista-topo { padding: 16px; border-bottom: 1px solid var(--borda); display: flex; flex-direction: column; gap: 12px; }
.chat__conversas { overflow-y: auto; flex: 1; }
.conversa { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--borda); cursor: pointer; }
.conversa:hover { background: var(--cartao-2); }
.conversa.is-ativa { background: var(--primaria-50); box-shadow: inset 3px 0 0 var(--primaria); }
.conversa__corpo { flex: 1; min-width: 0; }
.conversa__previa { font-size: 12.5px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversa__nao-lidas { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--verde-forte); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.chat__conversa { display: flex; flex-direction: column; min-height: 0; background: var(--fundo); }
.chat__topo { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--cartao); border-bottom: 1px solid var(--borda); }
.chat__mensagens { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.mensagem { max-width: 68%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; box-shadow: 0 1px 1px rgba(16,24,64,.05); }
.mensagem--recebida { align-self: flex-start; background: var(--cartao); border-top-left-radius: 4px; }
.mensagem--enviada { align-self: flex-end; background: var(--marinho); color: #fff; border-top-right-radius: 4px; }
.mensagem__hora { display: block; margin-top: 4px; font-size: 10.5px; opacity: .65; text-align: right; }
.chat__dia { align-self: center; font-size: 11.5px; color: var(--texto-3); background: var(--cartao); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--borda); }
.chat__compositor { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--cartao); border-top: 1px solid var(--borda); }
.chat__compositor .entrada { height: 42px; }
.chat__info { border-left: 1px solid var(--borda); padding: 20px; overflow-y: auto; }

/* ---------- Calendário (semana) ---------- */
.calendario { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--borda); }
.calendario__cabeca { padding: 12px 8px; text-align: center; border-bottom: 1px solid var(--borda); border-left: 1px solid var(--borda); }
.calendario__cabeca .texto-xs { color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; }
.calendario__cabeca strong { display: block; font-size: 18px; font-weight: 600; }
.calendario__cabeca.is-hoje strong { color: var(--sobre-ouro); background: var(--degrade-ouro); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; margin: 2px auto 0; }
.calendario__hora { height: 64px; padding: 4px 8px 0 0; text-align: right; font-size: 11px; color: var(--texto-3); }
.calendario__celula { position: relative; height: 64px; border-left: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.evento { position: absolute; left: 4px; right: 4px; z-index: 1; padding: 6px 8px; border-radius: 8px; font-size: 11.5px; line-height: 1.3; overflow: hidden; border-left: 3px solid; }
.evento strong { display: block; font-size: 12px; }
.evento--roxo { background: var(--primaria-50); border-color: var(--primaria); color: #5c4214; }
.evento--verde { background: var(--verde-50); border-color: var(--verde-forte); color: #165c33; }
.evento--laranja { background: var(--laranja-50); border-color: var(--laranja); color: #7a4300; }
.evento--azul { background: var(--azul-50); border-color: var(--azul); color: #23408f; }
.evento--vermelho { background: var(--vermelho-50); border-color: var(--vermelho); color: #8a2a2d; }

/* ---------- Telas de acesso (login, cadastro) ---------- */
.auth { display: grid; grid-template-columns: minmax(420px, 46%) minmax(0, 1fr); min-height: 100vh; background: var(--cartao); }
.auth__painel {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: 44px 52px; color: #fff;
  background:
    radial-gradient(55% 60% at 80% 30%, rgba(48, 58, 118, .5) 0%, rgba(48, 58, 118, 0) 70%),
    radial-gradient(30% 40% at 96% 6%, rgba(110, 122, 190, .2) 0%, rgba(110, 122, 190, 0) 70%),
    linear-gradient(90deg, #080b18 0%, #0a0c19 45%, #10142f 100%);
}
.auth__painel::before, .auth__painel::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); pointer-events: none; }
.auth__painel::before { width: 620px; height: 620px; right: -260px; bottom: -220px; }
.auth__painel::after { width: 420px; height: 420px; right: -160px; bottom: -120px; }
.auth__marca { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.auth__marca img { height: 46px; width: auto; }
.auth__marca strong {
  display: block; font-family: var(--fonte-marca); font-size: 19px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ouro-2); background: var(--degrade-ouro); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.auth__marca span { display: block; margin-top: 4px; font-size: 8.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ouro-2); }
.auth__mensagem { position: relative; z-index: 1; max-width: 460px; }
.auth__mensagem h2 { font-size: 36px; line-height: 1.15; letter-spacing: -.02em; font-weight: 300; }
.auth__mensagem p { margin-top: 14px; font-size: 15px; opacity: .82; line-height: 1.6; }
.auth__vitrine { position: relative; z-index: 1; display: grid; gap: 14px; max-width: 420px; }
.auth__vidro { padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(6px); }
.auth__vidro--claro { background: #fff; color: var(--texto); border: 0; box-shadow: 0 30px 60px -30px rgba(10, 6, 60, .7); }
.auth__rodape { position: relative; z-index: 1; display: flex; gap: 18px; font-size: 12.5px; opacity: .75; }
.auth__lado { display: grid; place-items: center; padding: 40px 24px; background: var(--cartao); color: var(--texto); }
.auth__form { width: min(100%, 420px); }
.auth__form h1 { font-size: 28px; letter-spacing: -.025em; }
.auth__form > p { margin: 8px 0 26px; color: var(--texto-2); }
.auth__links { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.auth__links a, .link { color: var(--primaria-texto); font-weight: 600; }
.auth__divisor { display: flex; align-items: center; gap: 12px; margin: 22px 0; font-size: 12px; color: var(--texto-3); }
.auth__divisor::before, .auth__divisor::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
.auth__seguro { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 26px; font-size: 12px; color: var(--texto-3); }
.passos { display: flex; gap: 8px; margin-bottom: 26px; }
.passos li { flex: 1; }
.passos span { display: block; height: 4px; border-radius: 999px; background: var(--borda); margin-bottom: 8px; }
.passos li.is-feito span, .passos li.is-atual span { background: var(--primaria); }
.passos small { font-size: 11.5px; font-weight: 600; color: var(--texto-3); }
.passos li.is-atual small, .passos li.is-feito small { color: var(--texto); }
.forca { display: flex; gap: 4px; margin-top: 8px; }
.forca span { flex: 1; height: 4px; border-radius: 999px; background: var(--borda); }
.forca[data-nivel="1"] span:nth-child(-n+1) { background: var(--vermelho); }
.forca[data-nivel="2"] span:nth-child(-n+2) { background: var(--laranja); }
.forca[data-nivel="3"] span:nth-child(-n+3) { background: var(--azul); }
.forca[data-nivel="4"] span { background: var(--verde-forte); }

/* Login: "Equipe do escritório" usa o lado do formulário escuro (azul-marinho do site);
   "Sou cliente" volta ao branco. A troca anima cores e faz o formulário surgir. */
.auth[data-perfil="equipe"] .auth__lado {
  color-scheme: dark;
  --cartao: #0b0e1a; --cartao-2: #10142a; --fundo: #12162a;
  --borda: #1f2438; --borda-forte: #2a3150;
  --texto: #ffffff; --texto-2: #c3c8de; --texto-3: #8d93ad;
  --primaria-texto: #e2b35a; --primaria-50: rgba(209, 174, 99, .12); --primaria-100: rgba(209, 174, 99, .24);
  --azul: #a9b6db; --azul-50: rgba(169, 182, 219, .08);
  background: #0b0e1a;
}
.auth__lado { position: relative; isolation: isolate; }
.auth__lado::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 50% at 85% 0%, rgba(48, 58, 118, .38) 0%, rgba(48, 58, 118, 0) 70%);
  transition: opacity .7s cubic-bezier(.65, 0, .35, 1);
}
.auth[data-perfil="equipe"] .auth__lado::before { opacity: 1; }
.auth[data-perfil="equipe"] .segmentado .is-ativo { background: var(--degrade-ouro); color: var(--sobre-ouro); box-shadow: none; }
.auth[data-perfil="equipe"] .aviso--info { border-color: #2a3150; color: var(--texto-2); }
.auth[data-perfil="equipe"] .aviso--info strong { color: #fff; }
.auth[data-perfil="equipe"] .entrada::placeholder { color: #6f7590; }

.auth--transicao .auth__lado,
.auth--transicao .auth__lado * {
  transition-property: background-color, border-color, color, box-shadow, fill, stroke;
  transition-duration: .7s;
  transition-timing-function: cubic-bezier(.65, 0, .35, 1);
}
.auth--transicao .auth__lado { transition-property: background-color, border-color, color; }
.auth--transicao .auth__form form:not([hidden]) { animation: auth-surgir .55s var(--ease) .12s both; }
@keyframes auth-surgir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .auth--transicao .auth__lado, .auth--transicao .auth__lado * { transition: none; }
  .auth--transicao .auth__form form:not([hidden]) { animation: none; }
}

/* ---------- Menus suspensos ---------- */
.suspenso { position: relative; }
.suspenso__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 220px; padding: 6px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-flutuante);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s var(--ease), visibility 0s .15s;
}
.suspenso.is-aberto .suspenso__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.suspenso__menu a, .suspenso__menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; font-size: 13px; color: var(--texto-2); cursor: pointer; text-align: left; }
.suspenso__menu a:hover, .suspenso__menu button:hover { background: var(--fundo); color: var(--texto); }
.suspenso__menu hr { border: 0; border-top: 1px solid var(--borda); margin: 6px 0; }

/* ==========================================================================
   Tema escuro — mesmas cores do site (azul-marinho + dourado)
   Ativado pelo botão de lua na barra superior: <html data-tema="escuro">
   ========================================================================== */
html[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #080c14;
  --cartao: #0b0d1a;
  --cartao-2: #0f1222;
  --borda: #1b1f2e;
  --borda-forte: #2a3150;
  --texto: #ffffff;
  --texto-2: #c3c8de;
  --texto-3: #8d93ad;
  --primaria-texto: #e2b35a;
  --primaria-50: rgba(209, 174, 99, .12);
  --primaria-100: rgba(209, 174, 99, .24);
  --azul: #a9b6db;       --azul-50: rgba(169, 182, 219, .12);
  --verde-50: rgba(35, 184, 98, .14);
  --laranja-50: rgba(217, 122, 15, .16);
  --vermelho-50: rgba(208, 38, 60, .16);
  --rosa-50: rgba(181, 72, 122, .18);
  --ciano-50: rgba(31, 138, 138, .18);
  --trilho: #1b1f2e;
  --neutro-fundo: #1a1f39;
  --coluna-fundo: #0f1222;
  --topbar-fundo: rgba(8, 12, 20, .88);
  --sidebar-fundo: #05080f;
  --sombra: 0 1px 0 rgba(255, 255, 255, .02);
  --sombra-flutuante: 0 16px 48px -12px rgba(0, 0, 0, .7);
  --g-azul: #a9b6db; --g-marinho: #a9b6db; --g-serie2: #a9b6db; --g-barra2: #2a3256;
}
html[data-tema="escuro"] .sidebar { border-right-color: #12162a; }
html[data-tema="escuro"] .pill--alerta { color: #f0a54a; }
html[data-tema="escuro"] .aviso--info { border-color: #2a3150; color: #c3c8de; }
html[data-tema="escuro"] .aviso--alerta { border-color: #4a3410; color: #f0d2a8; }
html[data-tema="escuro"] .aviso--perigo { border-color: #4a1a22; color: #f3c2c8; }
html[data-tema="escuro"] .aviso--sucesso { border-color: #173a28; color: #bfe9cf; }
html[data-tema="escuro"] .mensagem--enviada { background: #2a3256; }
html[data-tema="escuro"] .chip.is-ativo { background: var(--degrade-ouro); border-color: transparent; color: var(--sobre-ouro); }
html[data-tema="escuro"] .btn--perigo:hover { background: rgba(208, 38, 60, .26); }
html[data-tema="escuro"] .evento--roxo { color: #f2dba1; }
html[data-tema="escuro"] .evento--verde { color: #bfe9cf; }
html[data-tema="escuro"] .evento--laranja { color: #f0d2a8; }
html[data-tema="escuro"] .evento--azul { color: #c3d0f0; }
html[data-tema="escuro"] .evento--vermelho { color: #f3c2c8; }
html[data-tema="escuro"] .selecao { background-color: var(--cartao); }
html[data-tema="escuro"] .avatar[data-cor="9"] { background: #1a1f39; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1360px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1480px) {
  .topbar .seletor { display: none; }
}
@media (max-width: 1280px) {
  .g-lateral { grid-template-columns: minmax(0, 1fr) 290px; }
  .chat { grid-template-columns: 290px minmax(0, 1fr); }
  .chat__info { display: none; }
}
@media (max-width: 1100px) {
  .app { grid-template-columns: minmax(0, 1fr); background: none; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; transform: translateX(-100%); transition: transform .25s var(--ease); box-shadow: var(--sombra-flutuante); }
  .app.is-menu-aberto .sidebar { transform: none; }
  .app__veu { position: fixed; inset: 0; z-index: 35; background: rgba(18, 21, 42, .4); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; display: block; border: 0; }
  .app.is-menu-aberto .app__veu { opacity: 1; visibility: visible; transition-delay: 0s; }
  .g-lateral, .g-lateral-esq, .g-3 { grid-template-columns: minmax(0, 1fr); }
  .span-2, .span-3 { grid-column: auto; }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth__painel { display: none; }
}
@media (max-width: 760px) {
  .topbar { padding: 0 16px; gap: 10px; }
  .busca { display: none; }
  .usuario__texto, .prototipo span, .topbar .seletor { display: none; }
  .app__conteudo { padding: 4px 16px 32px; }
  .g-2, .g-4, .form-grade { grid-template-columns: minmax(0, 1fr); }
  .pagina-topo h1 { font-size: 21px; }
  .chat { grid-template-columns: minmax(0, 1fr); height: auto; }
  .chat__lista { display: none; }
  .mensagem { max-width: 86%; }
  .calendario { min-width: 760px; }
}

@media (max-width: 1100px) {
  .topbar__extra { display: none !important; }
}
@media (max-width: 1480px) {
  .prototipo span { display: none; }
}