/* ============================================================
   MandatoWeb — Painel (folha única)
   Substitui app.css + gabinete-ui.css + tema-gabinete.css nas
   telas de painel. Master e Gabinete usam esta mesma folha.
   Temas: html[data-tema="claro"] | html[data-tema="escuro"] | html[data-tema="rose"]
   ============================================================ */

/* Rede de segurança: um SVG sem largura declarada assume o tamanho do
   viewBox e estoura o layout. Acontece quando a folha ainda não foi
   aplicada — cache antigo, por exemplo. Este teto vale para todos e é
   sobrescrito pelas regras de cada componente. */
svg { max-width: 100%; max-height: 100%; }

/* ================= 1. TOKENS ================= */
:root {
  /* Azul institucional do MandatoWeb: é a cor da interface e não muda
     com a marca do gabinete. Tentamos derivar tudo de --brand antes, mas
     isso repintava o painel inteiro — gráficos, abas, ícones. A marca do
     cliente aparece nos botões de ação (ver .bt--p mais abaixo). */
  --azul:    #2563EB;
  --azul2:   #3B82F6;
  --azul-c:  #60A5FA;
  --roxo:    #7C3AED;
  --roxo-c:  #A78BFA;
  --verde:   #10B981;
  --ambar:   #F59E0B;
  --rosa:    #F43F5E;
  --ciano:   #06B6D4;

  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --t: 200ms cubic-bezier(.2,.8,.2,1);

  --sb-w: 248px;

  /* Tokens da marca do gabinete (White Label).
     Ficam separados dos tokens de interface (--azul) de propósito: só os
     elementos que devem carregar a identidade do cliente usam estes —
     botão de ação e item ativo da sidebar. O resto do painel segue azul,
     para os gráficos e status manterem a leitura previsível.
     Sem marca definida, caem no azul institucional. */
  --mk:      var(--brand, var(--azul));
  --mk-2:    color-mix(in srgb, var(--brand, var(--azul2)) 78%, #fff);
  --mk-luz:  color-mix(in srgb, var(--brand, var(--azul)) 12%, transparent);
  --mk-brilho: color-mix(in srgb, var(--brand, var(--azul)) 50%, transparent);
}

html[data-tema="claro"] {
  --bg:      #F8FAFC;
  --bg-deg:  linear-gradient(180deg,#FBFCFE 0%,#F8FAFC 100%);
  --surf:    #FFFFFF;
  --surf2:   #F4F7FB;
  --surf-gl: rgba(255,255,255,.72);
  --linha:   #E5E7EB;
  --linha2:  #EEF1F6;
  --txt:     #0F172A;
  --txt2:    #64748B;
  --txt3:    #94A3B8;
  --brilho:  rgba(37,99,235,.08);
  --sombra:  0 1px 2px rgba(15,23,42,.04), 0 12px 28px -20px rgba(15,23,42,.28);
  --sombra-h:0 1px 2px rgba(15,23,42,.05), 0 22px 46px -24px rgba(37,99,235,.42);
  --sb-bg:   #FFFFFF;
  --hero-bg: linear-gradient(120deg,#FFFFFF 0%,#F7FAFF 52%,#EEF4FF 100%);
  --cg-img:  url('/assets/img/congresso-claro.webp');
  --hero-veu-1: rgba(255,255,255,.94);
  --hero-veu-3: rgba(255,255,255,.66);
  --hero-veu-2: rgba(255,255,255,.40);
  --hero-veu-4: rgba(255,255,255,.20);
  --hero-veu-5: rgba(255,255,255,.07);
  --hero-veu-base: rgba(255,255,255,.22);
  --grade:   rgba(15,23,42,.06);
}

/* ============================================================
   TEMA ROSÉ
   ============================================================
   Terceiro tema, ao lado de claro e escuro. O nome segue a lógica dos
   outros dois: `claro` e `escuro` nomeiam a QUALIDADE DA LUZ, não o público.
   `rose` continua essa linha — e evita o problema de chamar um tema de
   "feminino", que faria os outros dois lerem como masculinos por oposição,
   num produto vendido a gabinete público.

   É um tema CLARO. Por isso as regras presas a [data-tema="claro"] mais
   abaixo passaram a citar rose também: sem isso, o tema herdaria as cores
   de estado do tema escuro e teria texto claro sobre fundo perolado.

   O QUE ESTE BLOCO NÃO TOCA
   As variáveis --brand e --brand-fill continuam vindo do Branding, com a cor
   do gabinete. Num produto white label, a identidade do cliente vence o tema:
   um gabinete de marca verde vai ter botão verde aqui, e está certo. O que o
   tema pinta é a moldura — fundo, superfície, linha, sombra, menu.

   CONTRASTE CONFERIDO
   Rosa e lilás claros perdoam pouco: texto médio sobre fundo perolado cai
   abaixo do mínimo com facilidade. Os tons de texto abaixo foram medidos
   contra --bg e --surf, e passam em AA (4.5:1) para corpo e AAA (7:1) para
   o texto principal. */
html[data-tema="rose"] {
  /* ESCALA TONAL, NÃO BRANCO COM UM TOQUE DE ROSA.
     A primeira versão errava por timidez: fundo #FCF8FC e cartão #FFFDFE são
     branco na prática, e o resultado era o tema claro com um sopro de rosa.
     Um tema de verdade precisa de uma escala inteira na mesma matiz — é o
     que separa "tema" de "filtro".

     A escala abaixo anda do rosa-poeira ao ameixa, toda entre 300° e 320° de
     matiz. Nenhum passo é branco: o cartão é o ponto MAIS CLARO da escala, e
     mesmo ele tem cor. */

  --bg:      #F0E0E4;   /* a tela: rosa-poeira, visível sem ser doce */
  --bg-deg:  radial-gradient(125% 95% at 50% -15%, #EFDCE1 0%, #F0E0E4 46%, #F5E9EC 100%);

  /* O cartão sobe da tela em vez de descer para o branco — é assim que ele
     flutua sem precisar de sombra pesada. */
  --surf:    #FBF4F5;
  --surf2:   #F4E7EA;
  --surf-gl: rgba(251,243,250,.76);

  --linha:   #E0C7CE;
  --linha2:  #EAD7DC;

  --txt:     #3A2440;   /* 13,0:1 sobre o cartão — AAA */
  /* Estes dois tons foram escolhidos MEDINDO contra o pior fundo do tema,
     que não é a tela: é a base do degradê do menu (#EAC7D3), onde o item
     inativo mora. O que passava sobre a tela reprovava lá — e o menu é
     justamente onde há mais rótulo pequeno. */
  --txt2:    #654D6E;   /* tela 5,8:1 · menu 4,8:1 — AA nos dois */
  --txt3:    #685171;   /* tela 5,5:1 · menu 4,5:1 — AA nos dois */

  --brilho:  rgba(194,97,122,.16);
  --sombra:  0 1px 2px rgba(74,40,84,.07), 0 14px 32px -22px rgba(120,80,140,.42);
  --sombra-h:0 1px 2px rgba(74,40,84,.08), 0 24px 50px -24px rgba(150,110,180,.55);

  /* O MENU É O ELEMENTO MAIS SATURADO DA TELA.
     Ele é a única superfície grande e contínua do painel, então é onde a
     matiz se anuncia. Degradê do rosa champagne ao lilás, mais fundo que o
     conteúdo — o contraste entre coluna e página é o que dá estrutura. */
  --sb-bg:   linear-gradient(186deg, #EED3D8 0%, #EBCCD4 52%, #EAC7D3 100%);

  --hero-bg: linear-gradient(120deg,#F7E9EC 0%,#F0DBE0 54%,#F0D5DE 100%);
  --cg-img:  url('/assets/img/congresso-claro.webp');
  --hero-veu-1: rgba(244,231,234,.93);
  --hero-veu-3: rgba(244,231,234,.66);
  --hero-veu-2: rgba(244,231,234,.40);
  --hero-veu-4: rgba(244,231,234,.19);
  --hero-veu-5: rgba(244,231,234,.07);
  --hero-veu-base: rgba(244,231,234,.22);
  --grade:   rgba(74,40,84,.07);

  /* Acentos. O dourado fica em fio e borda: sobre fundo claro ele não passa
     no contraste de texto, e forçá-lo seria trocar leitura por enfeite. */
  /* #C2617A, e não mais o #E8A0BF.
     O antigo era bonito e ilegível: 1,89:1 sobre o cartão, 1,62:1 sobre a
     tela e 1,32:1 sobre o menu — reprovava em tudo, inclusive para ícone.
     Texto branco em cima dele dava 2,06:1, praticamente invisível.

     O novo mede 3,65:1 no cartão e 3,13:1 na tela: passa em AA para
     ícone, borda, gráfico e texto grande, que é o uso real desta variável.
     Para texto pequeno em corpo continuam valendo --txt2 e --txt3, que já
     foram medidos contra o pior fundo do tema.

     ATENÇÃO ao menu: sobre a base do degradê (#EAC7D3) o novo dá 2,58:1 e
     ainda reprova. Não use esta cor para item de menu — lá quem manda é
     --txt2. O rosa entra no conteúdo, não na coluna. */
  --ro-rosa:      #C2617A;
  --ro-champagne: #F8D7E8;
  --ro-lilas:     #B8A1E5;
  --ro-roxo:      #8E7CC3;
  --ro-ouro:      #D4AF37;
  --ro-grad:      linear-gradient(135deg, #C2617A 0%, #B8A1E5 100%);
}


html[data-tema="escuro"], html:not([data-tema]) {
  --bg:      #0B1120;
  --bg-deg:  radial-gradient(120% 90% at 50% -20%, #1E3A8A 0%, #0B1120 58%);
  --surf:    #101828;
  --surf2:   #16213A;
  --surf-gl: rgba(255,255,255,.04);
  --linha:   rgba(255,255,255,.08);
  --linha2:  rgba(255,255,255,.05);
  --txt:     #F8FAFC;
  --txt2:    #94A3B8;
  --txt3:    #64748B;
  --brilho:  rgba(37,99,235,.22);
  --sombra:  0 1px 2px rgba(0,0,0,.4), 0 18px 40px -26px rgba(0,0,0,.9);
  --sombra-h:0 1px 2px rgba(0,0,0,.4), 0 26px 54px -26px rgba(37,99,235,.55);
  --sb-bg:   #0D1424;
  --hero-bg: linear-gradient(120deg,#0E1730 0%,#122045 55%,#16295A 100%);
  --cg-img:  url('/assets/img/congresso-escuro.webp');
  --hero-veu-1: rgba(11,17,32,.90);
  --hero-veu-3: rgba(11,17,32,.62);
  --hero-veu-2: rgba(11,17,32,.38);
  --hero-veu-4: rgba(11,17,32,.18);
  --hero-veu-5: rgba(11,17,32,.06);
  --hero-veu-base: rgba(11,17,32,.20);
  --grade:   rgba(255,255,255,.05);
}

/* ---------- acabamento do tema Rosé ----------
   Tudo aqui é escopado ao tema: nenhuma destas regras existe para claro ou
   escuro. */

/* O cartão tem cor própria e um fio de luz no topo. Sem o `inset`, superfície
   clara sobre fundo claro vira mancha — é o brilho da borda superior que
   desenha a aresta. */
html[data-tema="rose"] .cx,
html[data-tema="rose"] .modal__box {
  background: linear-gradient(180deg, #FDF7FC 0%, #F8EFF7 100%);
  border-color: #E4CFE3;
  box-shadow: 0 1px 2px rgba(74,40,84,.06),
              0 18px 40px -26px rgba(140,95,165,.46),
              inset 0 1px 0 rgba(255,255,255,.85);
}

/* O item ativo do menu não pode ser um tint pálido sobre uma coluna já
   colorida — sumiria. Recebe superfície própria, mais clara que o degradê,
   com um fio à esquerda na cor do gabinete. */
html[data-tema="rose"] .it.on {
  background: linear-gradient(100deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
  color: #3A2440;
  box-shadow: inset 0 0 0 1px rgba(142,124,195,.26),
              0 2px 10px -4px rgba(120,80,140,.34);
}
html[data-tema="rose"] .it.on::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--brand-fill, #8E7CC3);
}
html[data-tema="rose"] .it:hover { background: rgba(255,255,255,.46); color: #3A2440; }

/* Campos e caixas de busca acompanham a escala, senão viram retângulos
   brancos no meio de uma tela colorida — que foi exatamente a crítica. */
html[data-tema="rose"] input:not([type=checkbox]):not([type=radio]),
html[data-tema="rose"] select,
html[data-tema="rose"] textarea,
html[data-tema="rose"] .search,
html[data-tema="rose"] .busca {
  background: #F7EDF6;
  border-color: #E0C9DF;
  color: #3A2440;
}
html[data-tema="rose"] input::placeholder,
html[data-tema="rose"] textarea::placeholder { color: #8B7594; }

/* A barra de topo é superfície grande: em branco ela cortava a tela em duas. */
html[data-tema="rose"] .tp {
  background: linear-gradient(180deg, rgba(247,237,246,.92), rgba(240,227,240,.88));
  border-bottom-color: #E4CFE3;
}

/* Transição de tema, presa ao Rosé — é a regra que na versão anterior
   vazava para os outros dois. Cobre só cor e fundo: animar `all` faria a
   página recalcular layout a cada troca. */
html[data-tema="rose"] body,
html[data-tema="rose"] .cx,
html[data-tema="rose"] .sb,
html[data-tema="rose"] .tp {
  transition: background-color .32s ease, background-image .32s ease,
              color .32s ease, border-color .32s ease;
}
@media (prefers-reduced-motion: reduce) {
  html[data-tema="rose"] body, html[data-tema="rose"] .cx,
  html[data-tema="rose"] .sb, html[data-tema="rose"] .tp { transition: none; }
}

/* ================= 2. BASE ================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-deg) fixed, var(--bg);
  color: var(--txt);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--t), color var(--t);
}
h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -.022em; color: var(--txt); }
h1 { font-size: 1.6rem; font-weight: 700; }
h2 { font-size: 1.02rem; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 6px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--linha); border-radius: 8px;
  border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--txt3); background-clip: padding-box; }

/* ================= 3. ESTRUTURA ================= */
.pg { display: grid; grid-template-columns: var(--sb-w) 1fr; min-height: 100vh; }
.pg__main { min-width: 0; display: flex; flex-direction: column; }
.pg__wrap { padding: 24px 32px 40px; width: 100%; max-width: 1560px; flex: 1; }
@media (max-width: 1200px) { .pg__wrap { padding: 20px 20px 32px; } }

/* ================= 4. SIDEBAR ================= */
.sb {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--sb-bg);
  border-right: 1px solid var(--linha);
  padding: 20px 14px 16px;
  z-index: 60;
}
.sb__marca { display: flex; align-items: center; gap: 11px; padding: 2px 8px 22px; }
.sb__logo {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center; color: #fff; overflow: hidden;
  background: linear-gradient(140deg, var(--brand, var(--azul)), var(--roxo));
  box-shadow: 0 8px 22px -8px rgba(37,99,235,.75);
  font-weight: 700; font-size: 1rem;
}
.sb__logo img { width: 100%; height: 100%; object-fit: cover; }
.sb__nome { line-height: 1.15; min-width: 0; }
.sb__nome b { display: block; font-size: .96rem; font-weight: 700; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb__nome span { font-size: .63rem; letter-spacing: .13em; text-transform: uppercase; color: var(--txt3); }

.sb__nav { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.sb__lbl {
  font-size: .64rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--txt3); margin: 16px 10px 6px;
}
.sb__lbl:first-child { margin-top: 0; }

.it {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 10px; width: 100%;
  color: var(--txt2); font-size: .875rem; font-weight: 500;
  background: none; border: 0; cursor: pointer; text-align: left;
  transition: background var(--t), color var(--t);
}
.it svg { width: 19px; height: 19px; flex: none; stroke-width: 1.6; }
.it:hover { background: var(--surf2); color: var(--txt); }
/* Item ativo: usa a cor da marca do gabinete, não o azul da interface. */
.it.on {
  background: var(--mk-luz); color: var(--mk); font-weight: 600;
}
html[data-tema="escuro"] .it.on {
  color: var(--mk);
  box-shadow: inset 0 0 24px -8px var(--mk-brilho);
}
.it.on::before {
  content: ''; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 24px; border-radius: 0 4px 4px 0;
  background: linear-gradient(var(--mk), var(--mk-2));
  box-shadow: 0 0 14px 1px var(--mk-brilho);
}
.it__tag {
  margin-left: auto; font-size: .62rem; font-weight: 700; padding: 2px 7px;
  border-radius: 999px; background: var(--mk-luz); color: var(--mk);
}
.it__pt {
  margin-left: auto; min-width: 8px; height: 8px; border-radius: 999px;
  background: var(--rosa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rosa) 22%, transparent);
}
.it--sair { color: var(--txt3); }
.it--sair:hover { color: var(--rosa); background: color-mix(in srgb, var(--rosa) 10%, transparent); }

/* Console Master: âmbar, para diferenciar dos itens do gabinete. Não usa
   a cor da marca de propósito — é um acesso da plataforma, não do
   cliente, e a distinção evita clique por engano. */
.it--master { color: var(--ambar); }
.it--master:hover {
  color: var(--ambar);
  background: color-mix(in srgb, var(--ambar) 12%, transparent);
}
.it--master svg { opacity: .9; }

/* cartão de plano no rodapé da sidebar */
.sb__pe { margin-top: auto; display: grid; gap: 10px; padding-top: 14px; }
.plano {
  border: 1px solid var(--linha); border-radius: var(--r-m); padding: 14px;
  background: linear-gradient(150deg, var(--brilho), transparent 70%), var(--surf);
}
.plano__c { font-size: 1.1rem; line-height: 1; }
.plano b { display: block; font-size: .9rem; margin: 6px 0 2px; }
.plano span { font-size: .76rem; color: var(--txt2); }
.plano a { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px;
  font-size: .78rem; font-weight: 600; color: var(--brand); }

.saude { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--linha);
  border-radius: var(--r-m); background: var(--surf); }
.saude b { font-size: .8rem; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.saude b::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--verde);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent); }
.saude span { font-size: .74rem; color: var(--txt3); }

/* ================= 5. TOPBAR ================= */
.tp {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 32px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--linha);
}
.tp__menu { display: none; background: none; border: 0; color: var(--txt2); cursor: pointer; }
.tp__menu svg { width: 22px; height: 22px; }

.busca {
  flex: 1; max-width: 620px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 12px;
  background: var(--surf); border: 1px solid var(--linha);
  color: var(--txt3);
  transition: border-color var(--t), box-shadow var(--t);
}
.busca:focus-within { border-color: var(--azul); box-shadow: 0 0 0 4px var(--brilho); }
.busca kbd {
  font: 600 .7rem Inter, sans-serif; color: var(--txt2);
  background: var(--surf2); border: 1px solid var(--linha);
  border-radius: 6px; padding: 3px 7px; flex: none;
}
.busca input { flex: 1; min-width: 0; background: none; border: 0; outline: 0;
  color: var(--txt); font: inherit; font-size: .9rem; }
.busca input::placeholder { color: var(--txt3); }

.tp__dir { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.tpi {
  position: relative; display: grid; place-items: center; gap: 3px;
  min-width: 54px; padding: 6px 8px; border-radius: 11px;
  background: none; border: 0; cursor: pointer; color: var(--txt2);
  transition: background var(--t), color var(--t);
}
.tpi:hover { background: var(--surf2); color: var(--txt); }
/* SÓ O DESENHO NA COR DA MARCA, O RÓTULO CONTINUA NEUTRO.
   Pintar o texto junto encheria o topo de cor e nenhum dos três viraria
   destaque — o olho precisa de contraste entre o que é acento e o que é
   apoio. */
.tpi svg { width: 20px; height: 20px; stroke-width: 1.6;
  color: var(--brand-forte, var(--brand)); }
.tpi__l { font-size: .66rem; font-weight: 500; color: var(--txt3); }
/* No hover o ícone vai para a cor de texto: é o sinal de que ele responde
   ao clique, e sem isso o botão parece decoração. */
.tpi:hover svg { color: var(--txt); }
.tpi__b {
  position: absolute; top: 1px; right: 8px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--azul); color: #fff; border: 2px solid var(--bg);
  font: 700 .62rem Inter, sans-serif; display: grid; place-items: center;
}
.perfil {
  display: flex; align-items: center; gap: 10px; margin-left: 6px;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--surf); cursor: pointer;
}
.perfil__av {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 600; font-size: .85rem;
  background: linear-gradient(140deg, var(--brand, var(--azul)), var(--roxo));
}
.perfil__t { line-height: 1.2; }
/* O nome no canto superior direito na cor do gabinete, como na saudação.
   Só o nome — o papel logo abaixo segue neutro, senão os dois competem e
   nenhum vira ponto de atenção. */
.perfil__t b { display: block; font-size: .84rem; font-weight: 600;
  color: var(--brand-forte, var(--brand)); }
.perfil__t span { font-size: .72rem; color: var(--txt3); }

/* ================= 6. HERO com o Congresso ================= */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-l); border: 1px solid var(--linha);
  background: var(--hero-bg);
  padding: 34px 34px 36px;
  margin-bottom: 26px;
  min-height: 208px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  box-shadow: var(--sombra);
}
/* Banner fotográfico do Congresso Nacional.
   Duas artes: uma clara e uma escura. A troca é feita pela variável
   --cg-img, definida junto com os tokens de cada tema, então o banner
   acompanha o tema sem JS e sem baixar as duas imagens. */
.hero__art {
  position: absolute !important;
  right: 0; top: 0; bottom: 0; left: auto;
  width: min(78%, 1000px); pointer-events: none;
  /* Nível 0: acima do fundo do cartão, abaixo dos véus (1) e do texto (2). */
  z-index: 0;
  /* WebP é suportado por todo navegador atual; os .jpg ficam no servidor
     apenas como reserva manual, caso algum dia precise trocar a arte. */
  background-image: var(--cg-img);
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  /* A foto também se dissolve pela própria borda esquerda. Sem isto, ela
     termina numa linha reta e o véu por cima só disfarça — o corte
     continua perceptível em telas grandes. */
  mask-image: linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,.35) 16%, rgba(0,0,0,.8) 34%, #000 52%);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,.35) 16%, rgba(0,0,0,.8) 34%, #000 52%);
}

/* Véu: garante contraste do texto sobre a foto, sem apagar o prédio.
   Escurece/clareia só o terço esquerdo, onde ficam saudação e pílulas. */
/* Véu: garante contraste do texto sobre a foto, sem apagar o prédio.
   A transição usa muitas paradas de propósito. Com poucas, o olho enxerga
   a borda onde o véu acaba e a foto começa — vira um corte reto no meio
   do cartão. Espalhando a opacidade em passos curtos, a foto "emerge"
   aos poucos e a peça parece contínua. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    var(--hero-veu-1)  0%,
    var(--hero-veu-1) 26%,
    var(--hero-veu-3) 38%,
    var(--hero-veu-2) 50%,
    var(--hero-veu-4) 62%,
    var(--hero-veu-5) 74%,
    transparent       88%);
}
/* Emenda suave entre a foto e a borda do cartão, para não cortar seco. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 78%, var(--hero-veu-base) 100%);
}
/* Só o CONTEÚDO sobe para o nível 2. O :not() é essencial: sem ele esta
   regra atingia também o .hero__art, trocando seu position:absolute por
   relative — a foto colapsava para ~89px de largura e sumia. */
.hero > *:not(.hero__art) { position: relative; z-index: 2; }
.hero > .bt { align-self: center; flex: 0 0 auto; white-space: nowrap; }
/* flex-basis generoso + min-width impedem que a coluna de texto colapse
   e quebre cada palavra em uma linha quando o botão disputa espaço. */
.hero__esq { flex: 1 1 460px; min-width: 320px; max-width: 640px; }
.hero__h {
  font-size: clamp(1.6rem, 2.9vw, 2.5rem); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.1; margin-bottom: 8px;
  text-wrap: balance; overflow-wrap: break-word;
}
/* O NOME DE QUEM ENTROU USA A COR DO GABINETE.
   Eram duas regras: azul cru no claro, azul clarinho no escuro. Viram uma
   só, porque o Branding já publica `--brand` com essa mesma troca — cor crua
   no :root, versão clareada em [data-tema="escuro"]. Somar uma segunda regra
   aqui só duplicaria a lógica em outro lugar.

   No tema Rosé, que é claro, vale o valor do :root — a cor crua, que é a
   certa sobre fundo claro. */
/* `--brand-forte`, e não `--brand`: aqui queremos a cor CRUA, no tom que a
   pessoa escolheu. O `--brand` é clareado no tema escuro — certo para ícone
   pequeno, errado para o nome, que é grande e em negrito e perde a força ao
   ser lavado.

   O Branding só clareia esta variável se a cor crua não alcançar 3:1 sobre
   o fundo escuro, o que na prática só acontece com marcas realmente escuras
   (bordô, azul-marinho). O piso está lá para o gabinete de marca escura não
   ficar com o próprio nome ilegível. */
.hero__h b { color: var(--brand-forte, var(--brand)); font-weight: 700; }
.hero__s { color: var(--txt2); font-size: .95rem; margin-bottom: 18px; max-width: 56ch; }
.hero__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pl {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 9px 15px; border-radius: 11px; font-size: .82rem; font-weight: 500;
  background: var(--surf-gl); border: 1px solid var(--linha); color: var(--txt2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pl svg { width: 15px; height: 15px; color: var(--txt3); stroke-width: 1.7; }
.pl i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent); }

/* botões */
.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: 13px; border: 0; cursor: pointer; flex: none;
  font-size: .92rem; font-weight: 600; color: #fff;
  /* Aqui — e só aqui — a marca do gabinete aparece. O botão de ação é o
     elemento certo para carregar a identidade do cliente: destaca sem
     repintar a interface toda. Sem marca definida, usa o azul padrão.
     O segundo tom vem de um color-mix, para o gradiente funcionar com
     qualquer cor escolhida. */
  background: linear-gradient(135deg, var(--mk), var(--mk-2));
  box-shadow: 0 15px 40px color-mix(in srgb, var(--mk) 35%, transparent);
  transition: transform var(--t), box-shadow var(--t), filter var(--t);
}
.bt:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--mk) 48%, transparent);
}
.bt:active { transform: translateY(0); }
.bt svg { width: 18px; height: 18px; stroke-width: 2.2; }
.bt--g {
  background: var(--surf); color: var(--txt); border: 1px solid var(--linha); box-shadow: none;
}
.bt--g:hover { border-color: var(--azul); box-shadow: 0 0 0 4px var(--brilho); }
.bt--sm { padding: 9px 15px; font-size: .84rem; border-radius: 10px; }

/* ================= 7. GRADE DO DASHBOARD ================= */
.grid { display: grid; grid-template-columns: minmax(0,1fr) 348px; gap: 26px; align-items: start; }
@media (max-width: 1280px) { .grid { grid-template-columns: 1fr; } }
.grid__col { display: grid; gap: 26px; min-width: 0; }

/* ================= 8. CARTÕES ================= */
.cx {
  background: var(--surf); border: 1px solid var(--linha);
  border-radius: var(--r-l); box-shadow: var(--sombra);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
html[data-tema="escuro"] .cx {
  background: var(--surf-gl);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  border-color: rgba(255,255,255,.08);
}
.cx__h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 17px 20px; border-bottom: 1px solid var(--linha2);
}
.cx__h h2 { font-size: 1rem; }
.cx__b { padding: 18px 20px 20px; }
.sel {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 7px 12px; border-radius: 9px; font-size: .8rem; color: var(--txt2);
  background: var(--surf2); border: 1px solid var(--linha); cursor: pointer;
}
.sel svg { width: 14px; height: 14px; }
.mais {
  background: none; border: 0; color: var(--txt3); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0 4px;
}

/* ---- KPIs ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 14px; margin-bottom: 22px; }

/* ================= INDICADORES DO PAINEL =================
   O FORMATO É O MESMO DA TELA DE ATENDIMENTOS.
   Antes o painel usava um ladrilho grande à esquerda, com gradiente cheio e
   ícone branco; a tela de Atendimentos usava um quadrado pequeno no canto
   superior direito, com fundo tingido e ícone colorido. O mesmo número
   aparecia de dois jeitos em duas telas, e a pessoa precisava reaprender a
   ler ao trocar de aba.

   Aqui o painel adota o formato da outra tela. A marcação continua a mesma —
   quem muda é só o CSS, então o JavaScript que monta os cartões não precisou
   ser tocado.

   `--c` é a cor do cartão. Cada modificador troca essa variável, e o ícone, a
   borda de foco e a sombra saem dela. */
.kpi {
  position: relative; overflow: hidden;
  display: grid; gap: 2px; padding: 17px 18px;
  --c: var(--azul);
}
.kpi:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--c) 45%, var(--linha));
  box-shadow: var(--sombra-h);
}

/* O bloco que agrupava ícone + texto deixa de ser flex: o ícone sai do fluxo
   e vai para o canto, e o texto ocupa a largura toda. */
.kpi__t { display: block; }

.kpi__ic {
  position: absolute; top: 17px; right: 18px;
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  /* Fundo TINGIDO, não gradiente cheio: o ícone é apoio, não protagonista.
     O número é o que a pessoa veio ler. */
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  box-shadow: none;
}
.kpi__ic svg { width: 19px; height: 19px; stroke-width: 1.8; }

/* A margem à direita impede o texto de passar por baixo do ícone quando o
   rótulo é longo — "Agenda da semana" encostava nele. */
.kpi__l { font-size: .82rem; font-weight: 500; color: var(--txt2); padding-right: 52px; }
.kpi__n { font-size: 1.7rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.15; color: var(--txt); }
.kpi__n small { font-size: .95rem; font-weight: 600; color: var(--txt2); margin-left: 2px; }
.kpi__d { font-size: .74rem; font-weight: 500; color: var(--verde); margin-top: 1px; }
.kpi__d--dn { color: var(--rosa); }
.kpi__d--nt { color: var(--txt3); font-weight: 400; }

/* As cores. São as mesmas quatro da tela de Atendimentos, mais ciano e roxo
   para os cartões que não são de prazo. */
.kpi--ambar { --c: var(--ambar); }
.kpi--rosa  { --c: var(--rosa); }
.kpi--verde { --c: var(--verde); }
.kpi--ciano { --c: var(--ciano); }
.kpi--roxo  { --c: var(--roxo); }

.kpi__mais { position: absolute; top: 14px; right: 14px; }
.kpi__sp { height: 40px; margin-top: 10px; }
.kpi__sp svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---- gráficos ---- */
/* `overflow: hidden`, e não `visible`.
   O `visible` deixava qualquer coisa desenhada fora da área do gráfico
   escapar por cima do cartão vizinho. Nada deveria sair do viewBox — mas
   quando sai, é melhor o desenho ficar cortado do que invadir a tela. */
/* `max-width` mais centralização.
   Com `meet`, o desenho mantém a proporção e sobra margem numa tela larga.
   Sem o teto, essa margem ficava enorme e o gráfico parecia perdido no meio
   do cartão. Com ele, a folga vira enquadramento. */
.gr { width: 100%; max-width: 760px; margin: 0 auto;
      height: 250px; display: block; overflow: hidden; }
.gr text { font: 500 10.5px Inter, sans-serif; fill: var(--txt3); }
.gr .eixo { stroke: var(--grade); stroke-width: 1; }
.gr .pt { fill: var(--surf); stroke: var(--azul); stroke-width: 2; }
.gr .barra { fill: var(--azul); rx: 4; transition: fill var(--t); }
.gr .barra:hover { fill: var(--azul2); }

/* donut */
.donut { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.donut__g { position: relative; width: 178px; height: 178px; flex: none; }
.donut__g svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.donut__c {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.donut__c b { display: block; font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; }
.donut__c span { font-size: .76rem; color: var(--txt3); }
.donut__leg { flex: 1; min-width: 170px; display: grid; gap: 11px; }
.donut__i { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 11px; font-size: .84rem; }
.donut__i i { width: 10px; height: 10px; border-radius: 50%; }
.donut__i em { font-style: normal; color: var(--txt2); font-size: .8rem; }
.donut__i b { font-weight: 600; }

/* ---- barras verticais simples (reaproveita markup antigo) ---- */
.barras { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding: 8px 0 0; }
.barra { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; }
.barra__b {
  width: 100%; max-width: 46px; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--azul2), var(--azul));
  animation: sobe .6s cubic-bezier(.2,.8,.2,1) backwards;
}
.barra__v { font-size: .76rem; font-weight: 600; color: var(--txt2); }
.barra__l { font-size: .72rem; color: var(--txt3); }
@keyframes sobe { from { height: 0 !important; opacity: 0; } }

/* ================= 9. COLUNA DIREITA ================= */
/* Assistente (casca visual — sem backend por enquanto) */
.ia__h { display: flex; align-items: center; gap: 10px; padding: 17px 20px 12px; }
.ia__h svg { width: 20px; height: 20px; color: var(--brand); }
.ia__h h2 { font-size: 1rem; }
.ia__b { padding: 0 20px 20px; }
.ia__ola { font-weight: 600; margin-bottom: 3px; }
.ia__sub { font-size: .84rem; color: var(--txt2); margin-bottom: 14px; }
.ia__campo {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  padding: 11px 12px 11px 15px; border-radius: 12px;
  background: var(--surf2); border: 1px solid var(--linha);
}
.ia__campo input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--txt); font: inherit; font-size: .86rem; }
.ia__campo input::placeholder { color: var(--txt3); }
.ia__go {
  width: 30px; height: 30px; border-radius: 9px; flex: none; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--azul), var(--azul2));
}
.ia__go svg { width: 15px; height: 15px; stroke-width: 2.2; }
.ia__acoes { display: grid; gap: 9px; }
.ia__a {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 12px; cursor: pointer;
  background: var(--surf2); border: 1px solid var(--linha); color: inherit;
  transition: border-color var(--t), transform var(--t), background var(--t);
}
.ia__a:hover { border-color: var(--azul); transform: translateX(2px); }
.ia__a > svg:first-child { width: 19px; height: 19px; flex: none; color: var(--brand); stroke-width: 1.7; }
.ia__a div { flex: 1; min-width: 0; line-height: 1.3; }
.ia__a b { display: block; font-size: .85rem; font-weight: 600; }
.ia__a span { font-size: .76rem; color: var(--txt2); }
.ia__a .seta { width: 15px; height: 15px; color: var(--txt3); flex: none; }
.ia__nota { font-size: .72rem; color: var(--txt3); margin-top: 12px; text-align: center; }

/* Timeline */
.tl { display: grid; gap: 1px; padding: 6px 12px 14px; }
.tl__i {
  display: grid; grid-template-columns: 46px 36px 1fr; align-items: start; gap: 11px;
  padding: 10px 8px; border-radius: 11px; transition: background var(--t);
}
.tl__i:hover { background: var(--surf2); }
.tl__h { font-size: .74rem; color: var(--txt3); font-weight: 500; padding-top: 9px; }
.tl__ic {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: var(--brilho); color: var(--brand);
}
.tl__ic svg { width: 17px; height: 17px; stroke-width: 1.7; }
.tl__ic--vd { background: color-mix(in srgb, var(--verde) 14%, transparent); color: var(--verde); }
.tl__ic--rx { background: color-mix(in srgb, var(--roxo) 14%, transparent); color: var(--roxo-c); }
.tl__ic--am { background: color-mix(in srgb, var(--ambar) 14%, transparent); color: var(--ambar); }
.tl__c { min-width: 0; line-height: 1.35; }
.tl__t { font-size: .86rem; font-weight: 600; }
.tl__s { font-size: .78rem; color: var(--txt2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Mensagem de erro do painel. Fica oculta em operação normal, mas quando
   aparece precisa de respiro — sem margem, encosta no cartão de cima. */
/* ============================================================
   ÚLTIMOS ATENDIMENTOS — trilho horizontal
   O JS (dashboard-gab.js) monta estes cartões, mas as classes viviam
   só no gabinete-ui.css, que este painel não carrega. Sem elas, o
   bloco aparecia como texto solto, sem cartão nem formatação.
   ============================================================ */
.trilho {
  display: flex; gap: 13px; overflow-x: auto; padding: 4px 4px 14px;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.trilho::-webkit-scrollbar { height: 6px; }
.trilho::-webkit-scrollbar-thumb { background: var(--linha); border-radius: 999px; }
.trilho > * { scroll-snap-align: start; flex: 0 0 auto; }

.at {
  width: 266px; padding: 16px 17px; border-radius: 14px;
  background: var(--surf2); border: 1px solid var(--linha);
  display: block; position: relative; overflow: hidden;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.at:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--azul) 45%, var(--linha));
  box-shadow: var(--sombra-h);
}
.at__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.at__proto {
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  color: var(--azul-c);
}
.at__nome {
  font-size: .93rem; font-weight: 600; color: var(--txt);
  line-height: 1.35; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.at__meta {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  font-size: .78rem; color: var(--txt3);
}
.at__resp {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--linha2);
  font-size: .78rem; color: var(--txt2);
}

/* pílula de situação */
.sit {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  font-size: .72rem; font-weight: 600;
  background: var(--brilho); color: var(--azul-c);
  border: 1px solid color-mix(in srgb, var(--azul) 26%, transparent);
}
.sit i {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
}
.sit--ok {
  color: #34D399; background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.28);
}
.sit--and {
  color: #FBBF24; background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.28);
}
.sit--atraso {
  color: #FB7185; background: rgba(244,63,94,.12);
  border-color: rgba(244,63,94,.3);
}
/* status inicial (recebido, aguardando): mantém o azul institucional */
.sit--novo {
  color: var(--azul-c); background: var(--brilho);
  border-color: color-mix(in srgb, var(--azul) 26%, transparent);
}

/* ============================================================
   FUNIL DE AQUISIÇÃO — painel de vendas do Master
   Barras horizontais proporcionais à etapa mais larga. Escolhi barras
   em vez do trapézio clássico porque com poucas etapas o trapézio
   distorce a leitura: a diferença de largura vira ângulo, e ângulo
   engana mais que comprimento.
   ============================================================ */
.fn { display: grid; gap: 18px; }
.fn__i { animation: fnEntra .6s cubic-bezier(.22,1,.36,1) var(--d, 0s) backwards; }
@keyframes fnEntra { from { opacity: 0; transform: translateY(8px); } }

.fn__topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 7px;
}
.fn__rot { font-size: .875rem; font-weight: 500; color: var(--txt2); }
.fn__num {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 1.05rem; font-weight: 700; color: var(--txt);
  font-variant-numeric: tabular-nums;
}
.fn__num em {
  font-style: normal; font-size: .78rem; font-weight: 500;
  color: var(--txt3);
}

.fn__trilho {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--surf2);
}
.fn__trilho i {
  display: block; height: 100%; border-radius: 999px;
  transform-origin: left center;
  animation: fnBarra .8s cubic-bezier(.22,1,.36,1) backwards;
}
@keyframes fnBarra { from { transform: scaleX(0); } }

/* ---------- canais de aquisição ---------- */
.cnl { display: grid; gap: 15px; }
.cnl__i { animation: fnEntra .6s cubic-bezier(.22,1,.36,1) var(--d, 0s) backwards; }
.cnl__topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.cnl__rot { font-size: .875rem; font-weight: 500; color: var(--txt2); }
.cnl__rot em {
  font-style: normal; font-size: .74rem; color: var(--txt3);
  margin-left: 7px; padding: 2px 7px; border-radius: 999px;
  background: var(--surf2);
}
.cnl__num {
  display: inline-flex; align-items: baseline; gap: 9px;
  font-size: .95rem; font-weight: 700; color: var(--txt);
  font-variant-numeric: tabular-nums;
}
.cnl__num i {
  font-style: normal; font-size: .74rem; font-weight: 600;
  color: var(--verde);
}
.cnl__trilho {
  height: 8px; border-radius: 999px; overflow: hidden; background: var(--surf2);
}
.cnl__trilho i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--azul), var(--azul-c));
  transform-origin: left center;
  animation: fnBarra .8s cubic-bezier(.22,1,.36,1) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .cnl__i, .cnl__trilho i { animation: none !important; }
}

/* nota explicativa dentro de um cartão */
.cx__nota {
  margin: 0 0 14px; font-size: .82rem; line-height: 1.5; color: var(--txt3);
}

@media (prefers-reduced-motion: reduce) {
  .fn__i, .fn__trilho i { animation: none !important; }
}

/* ============================================================
   GRÁFICOS
   Feitos em SVG puro. Uma biblioteca resolveria, mas custaria umas
   centenas de KB para dois gráficos — e este painel é servido direto
   pelo PHP, sem bundler para enxugar o que não se usa.
   ============================================================ */

/* cores dos gráficos, por tema */
[data-tema="escuro"], .tema-escuro {
  --gl-1: #7C5CFF;   /* roxo, ponta do gradiente */
  --gl-2: #3B82F6;   /* azul, base do gradiente */
  --st-ok:  #34D399; /* concluído   */
  --st-and: #60A5FA; /* em andamento */
  --st-agu: #A78BFA; /* aguardando  */
  --st-atr: #FB7185; /* atrasado    */
  --st-can: #64748B; /* cancelado   */
  --st-nov: #22D3EE; /* recebido    */
}
[data-tema="claro"], [data-tema="rose"], .tema-claro {
  --gl-1: #6D46F5;
  --gl-2: #2563EB;
  --st-ok:  #059669;
  --st-and: #2563EB;
  --st-agu: #7C3AED;
  --st-atr: #E11D48;
  --st-can: #94A3B8;
  --st-nov: #0891B2;
}

/* ---------- linha com área ---------- */
.gl__box { position: relative; }
.gl { width: 100%; height: 200px; display: block; overflow: visible; }
.gl__grade { stroke: var(--linha2); stroke-width: 1; }
.gl__ry, .gl__rx {
  font-size: 10px; fill: var(--txt3);
  font-variant-numeric: tabular-nums;
}
.gl__ry { text-anchor: end; }
.gl__rx { text-anchor: middle; }

.gl__linha {
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 3px 10px color-mix(in srgb, var(--gl-1) 45%, transparent));
  stroke-dasharray: 2000; stroke-dashoffset: 2000;
  animation: glTraco 1.3s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes glTraco { to { stroke-dashoffset: 0; } }

.gl__area { opacity: 0; animation: glArea .8s ease .5s forwards; }
@keyframes glArea { to { opacity: 1; } }

.gl__halo { fill: var(--gl-1); opacity: 0; transition: opacity 200ms ease; }
.gl__pt {
  fill: var(--surf); stroke: var(--gl-1); stroke-width: 2.5;
  opacity: 0; animation: glPonto .3s ease forwards;
  transition: r 200ms cubic-bezier(.22,1,.36,1);
}
@keyframes glPonto { to { opacity: 1; } }
.gl__p:nth-child(n) .gl__pt { animation-delay: 1s; }
.gl__p.on .gl__halo { opacity: .18; }
.gl__p.on .gl__pt   { r: 5.5; }

/* tooltip */
.gl__dica {
  position: absolute; z-index: 3; pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
  padding: 9px 12px; border-radius: 11px; white-space: nowrap;
  background: rgba(10,16,32,.94); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 12px 30px -12px rgba(4,10,24,.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
[data-tema="claro"] .gl__dica,
[data-tema="rose"] .gl__dica {
  background: rgba(255,255,255,.97); border-color: rgba(15,23,42,.1);
  box-shadow: 0 12px 30px -12px rgba(15,23,42,.28);
}
.gl__dica b {
  display: block; font-size: .78rem; font-weight: 600; color: var(--txt);
}
.gl__dica span {
  display: block; margin-top: 2px; font-size: .78rem; color: var(--txt2);
}
.gl__dica i {
  display: block; margin-top: 3px; font-style: normal; font-size: .72rem; font-weight: 600;
}
.gl__dica i.sobe  { color: var(--st-ok); }
.gl__dica i.desce { color: var(--st-atr); }

/* ---------- rosca ---------- */
.rosca {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.rosca svg { width: 154px; height: 154px; flex: none; }
.rosca__trilho {
  fill: none; stroke: var(--surf2); stroke-width: 15;
}
.rosca__f {
  fill: none; stroke-width: 15; stroke-linecap: butt;
  transform: rotate(-90deg); transform-origin: 70px 70px;
  transition: stroke-width 250ms cubic-bezier(.22,1,.36,1), opacity 250ms ease;
  animation: roscaEntra .9s cubic-bezier(.22,1,.36,1) backwards;
  cursor: default;
}
@keyframes roscaEntra { from { opacity: 0; stroke-width: 4; } }
.rosca__f.on { stroke-width: 19; }
.rosca:hover .rosca__f:not(.on) { opacity: .45; }

.rosca__n {
  text-anchor: middle; font-size: 25px; font-weight: 700; fill: var(--txt);
  font-variant-numeric: tabular-nums;
}
.rosca__l {
  text-anchor: middle; font-size: 10.5px; fill: var(--txt3);
  letter-spacing: .06em; text-transform: uppercase;
}

.rosca__leg { flex: 1; min-width: 190px; display: grid; gap: 9px; }
.rosca__leg li {
  display: grid; grid-template-columns: 9px 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 5px 8px; border-radius: 9px;
  font-size: .84rem; transition: background 220ms ease;
}
.rosca__leg li.on { background: var(--surf2); }
.rosca__leg i { width: 9px; height: 9px; border-radius: 50%; }
.rosca__leg span {
  color: var(--txt2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rosca__leg b { font-weight: 600; color: var(--txt); font-variant-numeric: tabular-nums; }
.rosca__leg em {
  font-style: normal; font-size: .76rem; color: var(--txt3);
  min-width: 34px; text-align: right; font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .rosca { justify-content: center; }
  .rosca__leg { min-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .gl__linha, .gl__area, .gl__pt, .rosca__f { animation: none !important; }
  .gl__linha { stroke-dashoffset: 0; }
  .gl__area, .gl__pt { opacity: 1; }
}

/* ============================================================
   BLOCOS DO DASHBOARD MONTADOS PELO JS
   Aniversariantes, compromissos, prioridades e listas com barra.
   Assim como os cartões acima, estas classes viviam apenas no
   gabinete-ui.css — que este painel não carrega. Adaptadas aqui
   para os tokens do tema (--surf, --linha, --txt...).
   ============================================================ */

/* ---- aniversariantes ---- */
.an {
  width: 176px; padding: 16px; border-radius: 14px; text-align: center;
  background: var(--surf2); border: 1px solid var(--linha);
  transition: transform var(--t), border-color var(--t);
}
.an:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--azul) 40%, var(--linha));
}
.an__av {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 10px;
  display: grid; place-items: center; color: #fff;
  font-weight: 600; font-size: .9rem;
  background: linear-gradient(140deg, var(--azul), var(--azul-c));
}
.an__n {
  font-size: .86rem; font-weight: 500; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.an__d { font-size: .76rem; color: var(--txt3); margin-top: 3px; }
.an__zap {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
  font-size: .74rem; color: #25D366; font-weight: 600;
}

/* ---- compromissos do dia ---- */
.cmp { display: flex; gap: 12px; padding: 10px 0; }
.cmp + .cmp { border-top: 1px solid var(--linha2); }
.cmp__d { text-align: center; flex-shrink: 0; min-width: 48px; }
.cmp__d b {
  display: block; font-size: .92rem; font-weight: 600;
  color: var(--txt); font-variant-numeric: tabular-nums;
}
.cmp__d small { font-size: .7rem; color: var(--txt3); }
.cmp__t { min-width: 0; }
.cmp__t b {
  display: block; font-size: .88rem; font-weight: 600; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmp__t small { font-size: .76rem; color: var(--txt3); }

/* ---- precisa da sua atenção ---- */
.pri {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
}
.pri + .pri { border-top: 1px solid var(--linha2); }
.pri__ic {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--txt3);
}
.pri--atraso .pri__ic {
  background: #FB7185; box-shadow: 0 0 0 4px rgba(244,63,94,.18);
}
.pri--hoje .pri__ic {
  background: var(--azul-c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--azul-c) 18%, transparent);
}
/* lembretes da equipe: âmbar, para distinguir de prazo estourado */
.pri--lembrete .pri__ic {
  background: #FBBF24; box-shadow: 0 0 0 4px rgba(245,158,11,.18);
}
.pri__txt { flex: 1; min-width: 0; }
.pri__txt b {
  display: block; font-size: .9rem; font-weight: 600; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pri__txt small {
  display: block; font-size: .76rem; color: var(--txt3); margin-top: 1px;
}
.pri__selo {
  font-size: .72rem; font-weight: 600; white-space: nowrap;
  padding: 4px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--txt3) 14%, transparent);
  color: var(--txt2);
}

/* ---- listas com barra (bairros, ranking) ---- */
.lst { display: grid; gap: 14px; }
.lst__i {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; font-size: .85rem;
}
.lst__i span {
  color: var(--txt2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lst__i b { font-weight: 600; color: var(--txt); font-variant-numeric: tabular-nums; }
.lst__bar {
  grid-column: 1 / -1; height: 6px; border-radius: 999px;
  background: var(--surf2); overflow: hidden;
}
.lst__bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--azul), var(--azul-c));
}

/* ---- estado de carregamento ---- */
.gb-skel {
  border-radius: 10px;
  background: linear-gradient(90deg, var(--surf2) 25%, var(--linha) 50%, var(--surf2) 75%);
  background-size: 200% 100%;
  animation: gbSkel 1.4s ease-in-out infinite;
}
.gb-skel--card { height: 92px; }
@keyframes gbSkel { to { background-position: -200% 0; } }

/* ---- estado vazio ---- */
.nada {
  padding: 34px 20px; text-align: center;
  color: var(--txt3); font-size: .88rem;
}

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

.tl__vazio { padding: 24px 20px; margin-top: 26px; text-align: center; color: var(--txt3); font-size: .84rem; }

/* ================= 10. TABELAS ================= */
.tbl-wrap { overflow: hidden; }
.tbl-top { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; border-bottom: 1px solid var(--linha2); flex-wrap: wrap; }
.tbl-top .sub { font-size: .82rem; color: var(--txt2); margin-top: 2px; }
.tbl-acoes { display: flex; gap: 9px; }
.tbl-scroll { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tbl thead th {
  text-align: left; padding: 11px 20px; white-space: nowrap;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--txt3); background: var(--surf2); border-bottom: 1px solid var(--linha);
}
.tbl tbody td { padding: 13px 20px; border-bottom: 1px solid var(--linha2); vertical-align: middle; }
.tbl tbody tr { transition: background var(--t); }
.tbl tbody tr:hover { background: var(--surf2); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .vazio { text-align: center; color: var(--txt3); padding: 34px 20px; }

.cli { display: flex; align-items: center; gap: 11px; }
.cli__av { width: 36px; height: 36px; border-radius: 10px; flex: none; color: #fff;
  display: grid; place-items: center; font-size: .78rem; font-weight: 700; }
.cli__n { font-weight: 600; }
.cli__s { font-size: .78rem; color: var(--txt3); }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; font-size: .74rem; font-weight: 600;
  background: var(--surf2); border: 1px solid var(--linha); color: var(--txt2);
}
.tag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag--ativo { color: var(--verde); background: color-mix(in srgb, var(--verde) 12%, transparent); border-color: color-mix(in srgb, var(--verde) 28%, transparent); }
.tag--inad  { color: var(--ambar); background: color-mix(in srgb, var(--ambar) 12%, transparent); border-color: color-mix(in srgb, var(--ambar) 28%, transparent); }
.tag--susp  { color: var(--rosa); background: color-mix(in srgb, var(--rosa) 12%, transparent); border-color: color-mix(in srgb, var(--rosa) 28%, transparent); }
.tag--plano { color: var(--brand); background: var(--brilho); border-color: color-mix(in srgb, var(--brand) 26%, transparent); }

.acoes { display: flex; gap: 6px; justify-content: flex-end; }
.ia-btn, .acoes .ia {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  border: 1px solid var(--linha); background: var(--surf); color: var(--txt2);
  transition: border-color var(--t), color var(--t);
}
.acoes .ia:hover { border-color: var(--azul); color: var(--azul); }
.acoes .ia svg { width: 16px; height: 16px; }

/* ================= 11. FORMULÁRIOS ================= */
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select, textarea {
  width: 100%; padding: 10px 13px; border-radius: 10px;
  background: var(--surf2); border: 1px solid var(--linha); color: var(--txt);
  font: inherit; font-size: .88rem; outline: 0;
  transition: border-color var(--t), box-shadow var(--t);
}
input:focus, select:focus, textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 4px var(--brilho); }
input::placeholder, textarea::placeholder { color: var(--txt3); }
label { display: block; font-size: .8rem; font-weight: 500; color: var(--txt2); margin-bottom: 6px; }
.campo { margin-bottom: 15px; }

/* ================= 12. MODAIS / AVISOS ================= */
.modal, .modal__box, dialog, .dropdown {
  background: var(--surf); border: 1px solid var(--linha);
  border-radius: var(--r-l); box-shadow: var(--sombra-h); color: var(--txt);
}
.alerta { padding: 13px 18px; border-radius: var(--r-m); font-size: .87rem; margin-bottom: 16px;
  border: 1px solid var(--linha); background: var(--surf); }
.alerta--ok { color: var(--verde); background: color-mix(in srgb, var(--verde) 10%, transparent);
  border-color: color-mix(in srgb, var(--verde) 26%, transparent); }
.trialbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; border-radius: var(--r-m); margin-bottom: 16px; font-size: .87rem;
  background: var(--brilho); border: 1px solid color-mix(in srgb, var(--azul) 26%, transparent);
}
.trialbar a { font-weight: 600; color: var(--brand); }
.trialbar--fim { background: color-mix(in srgb, var(--ambar) 12%, transparent);
  border-color: color-mix(in srgb, var(--ambar) 30%, transparent); }
.trialbar--fim a { color: var(--ambar); }

/* ================= 13. RODAPÉ ================= */
.rodape {
  display: flex; align-items: center; justify-content: center; gap: 11px; flex-wrap: wrap;
  padding: 26px 0 8px; color: var(--txt3); font-size: .82rem;
}
.rodape b { color: var(--txt2); font-weight: 600; }
.rodape__tag { padding: 5px 13px; border-radius: 999px; font-size: .76rem; font-weight: 600;
  background: var(--brilho); color: var(--brand); }

/* ================= 14. ANIMAÇÕES ================= */
@keyframes sobeFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise { animation: sobeFade .32s cubic-bezier(.2,.8,.2,1) backwards; }
.grid__col > *, .kpis > * { animation: sobeFade .3s cubic-bezier(.2,.8,.2,1) backwards; }
.kpis > *:nth-child(2) { animation-delay: .05s; }
.kpis > *:nth-child(3) { animation-delay: .1s; }
.kpis > *:nth-child(4) { animation-delay: .15s; }

/* ================= 15. RESPONSIVO ================= */
@media (max-width: 1024px) {
  .pg { grid-template-columns: 1fr; }
  .sb {
    position: fixed; left: 0; top: 0; width: 272px;
    transform: translateX(-100%); transition: transform var(--t);
  }
  .sb.aberta { transform: none; box-shadow: 0 0 60px rgba(0,0,0,.4); }
  .tp__menu { display: grid; place-items: center; }
  .sombra-menu { position: fixed; inset: 0; background: rgba(2,6,23,.5); z-index: 55;
    opacity: 0; pointer-events: none; transition: opacity var(--t); }
  .sombra-menu.on { opacity: 1; pointer-events: auto; }
  .tp { padding: 10px 16px; }
  .busca kbd, .tpi__l, .perfil__t { display: none; }
  .hero { flex-direction: column; padding: 24px 20px 26px; }
  .hero__art { width: 100%; opacity: .5; }
  .hero__esq { max-width: none; }
  /* Sem espaço lateral, o véu passa a cobrir tudo para o texto seguir legível. */
  .hero::before {
    background: linear-gradient(180deg, var(--hero-veu-1) 0%, var(--hero-veu-2) 62%, transparent 100%);
  }
  .bt { width: 100%; }
}
@media (max-width: 560px) {
  .pg__wrap { padding: 16px 14px 28px; }
  .hero__h { font-size: 1.5rem; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kpi { padding: 14px 14px 10px; }
  .kpi__n { font-size: 1.5rem; }
  .kpi__ic { width: 38px; height: 38px; border-radius: 11px; }
  .donut { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ================= 16. IMPRESSÃO ================= */
@media print {
  .sb, .tp, .rodape, .bt, .sel { display: none !important; }
  .pg { grid-template-columns: 1fr; }
  .cx { break-inside: avoid; box-shadow: none; }
}

/* Botão de excluir na tabela de gabinetes do Painel Master. */
.acoes .ia--rm:hover {
  border-color: var(--rosa); color: var(--rosa);
  background: color-mix(in srgb, var(--rosa) 8%, transparent);
}