/* =====================================================================
   PoliNexus — Design System
   =====================================================================
   Fonte única de verdade do visual do produto. Antes disso, as 8 páginas
   carregavam ~80 linhas de CSS duplicado cada uma: trocar um token exigia
   editar 8 arquivos, e foi assim que tons reprovados em contraste se
   espalharam sem ninguém notar.

   REGRA: no CSS das páginas use só os papéis semânticos (--color-text,
   --color-primary...), nunca os tokens brutos nem hex solto. Trocar a
   paleta inteira deve ser mexer só na raiz deste arquivo.

   Contrastes validados com scripts/check_contrast.py (WCAG AA):
     branco     sobre --blue-600 ......... 6,25:1  OK
     --navy     sobre --bg ............... 17,29:1 OK
     --slate-600 sobre --bg .............. 7,08:1  OK
     --slate-500 sobre branco ............ 4,76:1  OK  (era #7A879C = 3,64 REPROVADO)
     --success  sobre branco ............. 5,87:1  OK  (era #21B573 = 2,65 REPROVADO)
     --sky-700  sobre branco ............. 3,58:1  OK p/ texto grande (era #00A9E9 = 2,67)
     --cyan     sobre --navy ............. 10,38:1 OK  (só use ciano sobre fundo escuro)
   ===================================================================== */

/* ---------------------------------------------------------------- RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100dvh; }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* --------------------------------------------------------------- TOKENS */
:root {
  /* Marca */
  --navy:      #0B132B;
  --navy-700:  #122B5C;
  --navy-600:  #12328F;
  --blue-600:  #0D47FF;   /* primária */
  --blue-700:  #0B39CC;   /* hover */
  --blue-50:   #EEF3FF;   /* fundo sutil de destaque */
  --cyan:      #00D4FF;   /* SÓ sobre fundo escuro */
  --sky-700:   #0090CC;   /* equivalente do ciano para fundo claro */

  /* Neutros — azulados, para casar com a marca (cinza puro fica sujo ao lado do azul) */
  --slate-50:  #F6F8FC;
  --slate-100: #E2E8F2;
  --slate-200: #CBD5E4;
  --slate-500: #64748B;
  --slate-600: #4A5568;
  --slate-900: #0B132B;

  /* Semânticas — todas validadas sobre fundo branco */
  --success:   #12734B;
  --success-bg:#E8F8F0;
  --warning:   #9A5B12;
  --warning-bg:#FEF2E6;
  --danger:    #9B2226;
  --danger-bg: #FEE8E8;

  /* Papéis semânticos — use SEMPRE estes no CSS das páginas */
  --color-bg:          var(--slate-50);
  --color-surface:     #FFFFFF;
  --color-text:        var(--slate-900);
  --color-text-muted:  var(--slate-600);
  --color-text-subtle: var(--slate-500);
  --color-border:      var(--slate-100);
  --color-primary:     var(--blue-600);
  --color-primary-hover: var(--blue-700);
  --color-on-primary:  #FFFFFF;

  /* Tipografia fluida */
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display:  clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --font-h1:       clamp(1.5rem, 1.35rem + 0.7vw, 2rem);
  --font-h2:       clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --font-body-lg:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  /* 16px NO CORPO, e não 15: o texto é lido no celular, no meio da rua,
     por quem não tem tempo de apertar os olhos. A densidade de painel
     saía cara exatamente para quem mais usa o sistema. */
  --font-body:     1rem;        /* 16px */
  --font-sm:       0.875rem;    /* 14px */
  --font-xs:       0.8125rem;   /* 13px */
  --lh-tight: 1.2;
  --lh-normal: 1.6;

  /* Espaçamento base-8 */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-24: 6rem;

  --container-max: 1080px;
  --container-pad: clamp(var(--space-4), 4vw, var(--space-5));

  /* Elevação */
  --shadow-sm: 0 1px 2px rgba(11, 19, 43, 0.06);
  --shadow-md: 0 4px 14px rgba(11, 19, 43, 0.08);
  --shadow-lg: 0 12px 32px rgba(11, 19, 43, 0.14);
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 150ms;
  --base: 300ms;
  --slow: 800ms;
}

/* =====================================================================
   MOVIMENTO
   =====================================================================
   Tres coisas, e nao um catalogo: entrada de lista, espera e numero que
   conta. Animacao que nao responde a uma pergunta do usuario e enfeite,
   e enfeite atrasa a leitura de quem esta com pressa.

   Tudo aqui morre no bloco de `prefers-reduced-motion` logo abaixo. Nao
   e detalhe de acessibilidade: parte das pessoas sente enjoo com
   movimento na tela, e o sistema abre no celular, em pe, na rua.
   ===================================================================== */

/* ENTRADA. Sobe 8px e aparece. O atraso vem do indice, para a lista
   entrar em cascata em vez de piscar inteira - e o que faz a tela
   parecer que montou, e nao que apareceu.

   O indice e LIMITADO por quem chama (ver pxEntrada no polinexus.js):
   com 300 linhas a 28ms cada, a ultima levaria oito segundos. */
@keyframes px-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.px-entra {
  animation: px-entra var(--base) var(--ease) both;
  animation-delay: calc(var(--px-i, 0) * 28ms);
}

/* ESPERA. Barras cinza que brilham, no lugar de "Carregando...".
   A diferenca nao e enfeite: o esqueleto mostra a FORMA do que vem, e
   a tela nao pula quando o conteudo chega. */
@keyframes px-brilho { to { background-position: -200% 0; } }
.px-esqueleto {
  background: linear-gradient(90deg,
      var(--color-bg) 25%, var(--color-surface) 37%, var(--color-bg) 63%);
  background-size: 200% 100%;
  animation: px-brilho 1.3s linear infinite;
  border-radius: var(--radius-sm);
  height: 14px;
  margin-bottom: 10px;
}
.px-esqueleto:last-child { margin-bottom: 0; }
.px-esqueleto--titulo { height: 22px; width: 40%; margin-bottom: 14px; }
.px-esqueleto--curto { width: 60%; }
.px-esqueleto--linha { height: 46px; }

/* TROCA DE ABA E DE FILTRO. Sem deslocamento: o conteudo troca no
   lugar, e mover a pagina embaixo do dedo de quem acabou de tocar num
   botao e a forma mais rapida de errar o proximo toque. */
@keyframes px-troca {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.px-troca { animation: px-troca var(--fast) var(--ease) both; }

/* NUMERO QUE CONTA. So a fonte tabular, que impede a largura de mudar a
   cada quadro e o numero de tremer enquanto sobe. A contagem em si esta
   no pxContar. */
.px-conta { font-variant-numeric: tabular-nums; }

/* Enquanto o Alpine nao assume o bloco, ele fica escondido: sem isto a
   marcacao crua aparece por um piscar. */
[x-cloak] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------------------------------------------- BASE */
body {
  font-family: var(--font-family);
  font-size: var(--font-body);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: var(--lh-tight); font-weight: 800; letter-spacing: -0.015em; }
h1 { font-size: var(--font-h1); }
h2 { font-size: var(--font-h2); }
strong, b { font-weight: 700; }

/* Foco visível — nunca remover sem substituto (navegação por teclado). */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.muted   { color: var(--color-text-muted); }
.subtle  { color: var(--color-text-subtle); }
.center  { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- HEADER */
.px-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 20;
}
.px-nav {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-3) var(--container-pad);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}

/* Marca: ícone Axis Link + wordmark + tagline */
.px-brand { display: flex; align-items: center; gap: 11px; }
.px-brand .axis { width: 36px; height: 36px; flex: 0 0 auto; }
.px-brand__txt { display: flex; flex-direction: column; line-height: 1.05; }
.px-brand__name { font-weight: 900; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--color-text); }
/* Gradiente do wordmark para em --sky-700: o ciano puro dá 1,77:1 sobre
   branco e ficaria ilegível na ponta clara. */
.px-brand__name .nx {
  background: linear-gradient(90deg, var(--blue-600), var(--sky-700));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.px-brand__tag {
  font-size: 0.4375rem; letter-spacing: 0.13em; font-weight: 800;
  color: var(--color-text-subtle); margin-top: 3px; white-space: nowrap;
}
.px-brand__tag i { color: var(--sky-700); font-style: normal; padding: 0 2px; }
@media (max-width: 640px) { .px-brand__tag { display: none; } }

.px-navlinks { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-sm); }
.px-navlinks a { color: var(--color-text-muted); padding: var(--space-1) 0; }
.px-navlinks a:hover { color: var(--color-primary); }
.px-navlinks a.on { color: var(--color-primary); font-weight: 700; }
@media (max-width: 560px) {
  .px-navlinks { gap: var(--space-2); font-size: var(--font-xs); }
}

/* --------------------------------------------------------------- LAYOUT */
.px-main {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-6) var(--container-pad) var(--space-16);
}
.px-main--estreito { max-width: 560px; }
.px-main--medio    { max-width: 680px; }

.px-topo {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap;
}

/* ---------------------------------------------------------------- CARDS */
.px-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.px-card--destaque { border: 2px solid var(--color-primary); }
.px-card__titulo { font-size: var(--font-h2); margin-bottom: var(--space-3); }
.px-card__sub {
  font-size: var(--font-xs); color: var(--color-text-muted);
  margin-top: calc(var(--space-2) * -1); margin-bottom: var(--space-3); line-height: 1.55;
}

/* Cabeçalho escuro (hero de painel / resultado) */
.px-hero {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-700) 58%, var(--navy-600) 100%);
  color: #fff; border: none;
}
.px-hero .px-card__titulo { color: #fff; }
.px-hero .eyebrow {
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyan); font-weight: 800;
}

.tg-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.75rem; font-weight: 800; letter-spacing: .18em;
  background: var(--color-bg); border: 1px dashed var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4);
  text-align: center; margin: var(--space-3) 0;
}
.tg-acoes { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.tg-ligado {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--font-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--success); background: var(--success-bg);
  border-radius: var(--radius-pill); padding: 3px 9px;
}
.tg-avisos { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.tg-avisos label { display: flex; align-items: flex-start; gap: var(--space-2);
                   font-size: var(--font-sm); cursor: pointer; }

/* ------------------------------------------------------------- BOTÕES */
.px-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--color-primary); color: var(--color-on-primary);
  font-size: var(--font-body); font-weight: 800; cursor: pointer;
  transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.px-btn:hover { background: var(--color-primary-hover); }
.px-btn:active { transform: scale(0.985); }
.px-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.px-btn--bloco { width: 100%; }
.px-btn--grande { padding: var(--space-4) var(--space-6); font-size: var(--font-body-lg); }
.px-btn--fantasma {
  background: transparent; border-color: var(--color-border); color: var(--color-text-muted);
  font-weight: 600;
}
.px-btn--fantasma:hover { background: var(--color-bg); border-color: var(--slate-200); color: var(--color-text); }
.px-btn--perigo { background: var(--color-surface); border-color: #F3C9C9; color: var(--danger); }
.px-btn--perigo:hover { background: var(--danger-bg); }
.px-btn--escuro { background: var(--navy); }
.px-btn--escuro:hover { background: var(--navy-700); }

/* Botão pequeno de ação em lista */
.px-btn-mini {
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); border-radius: var(--radius-sm);
  padding: var(--space-2) 11px; font-size: var(--font-xs); font-weight: 700; cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.px-btn-mini:hover { border-color: var(--slate-200); color: var(--color-text); }
.px-btn-mini--pri { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.px-btn-mini--pri:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #fff; }
.px-btn-mini--ok { background: var(--success); border-color: var(--success); color: #fff; }

/* Link de ação em texto */
.px-link { color: var(--color-primary); font-weight: 700; font-size: var(--font-sm); }
.px-link:hover { text-decoration: underline; }

/* ----------------------------------------------------------- FORMULÁRIO */
.px-label {
  display: block; font-size: var(--font-xs); font-weight: 700;
  margin: var(--space-3) 0 var(--space-1);
}
.px-input, .px-select, .px-textarea {
  width: 100%; padding: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text);
  font-size: var(--font-body-lg);
  transition: border-color var(--fast) var(--ease);
}
.px-input:hover, .px-select:hover, .px-textarea:hover { border-color: var(--slate-200); }
.px-input:focus, .px-select:focus, .px-textarea:focus {
  outline: 2px solid var(--color-primary); outline-offset: -1px; border-color: var(--color-primary);
}
.px-input:disabled { background: #F4F6FA; color: var(--color-text-subtle); }

/* O olho para ver a senha.
 *
 * Dentro do campo, encostado na direita: fora dele viraria mais um
 * controle na coluna, e o que a pessoa procura e "ver o que eu digitei",
 * nao um botao. Senha longa digitada errada em teclado de celular e a
 * causa mais comum de "nao consigo entrar", e ate aqui nao havia como
 * conferir. */
.px-senha { position: relative; }
.px-senha .px-input { padding-right: 44px; }
.px-olho {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--color-text-muted); border-radius: 50%;
}
.px-olho:hover { color: var(--color-text); background: rgba(11,19,43,.06); }
.px-olho svg { width: 19px; height: 19px; }
.px-textarea { resize: vertical; min-height: 72px; font-family: inherit; }
.px-dica { font-size: var(--font-xs); color: var(--color-text-muted); margin-top: var(--space-1); line-height: 1.55; }

/* Aceite de termos. A caixa NÃO vem marcada: consentimento pré-assinalado
   não vale como consentimento (LGPD art. 8º, e o mesmo raciocínio do CDC
   sobre cláusula que o consumidor não teve de aprovar ativamente).
   Alvo de 20px + área clicável em todo o rótulo, porque no celular esse é
   o último obstáculo antes do cadastro — errar o toque custa conversão. */
.px-aceite {
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin-top: var(--space-5); cursor: pointer;
  font-size: var(--font-sm); line-height: 1.55; color: var(--color-text-muted);
}
.px-aceite input {
  width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px;
  accent-color: var(--color-primary); cursor: pointer;
}
.px-aceite input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.px-aceite a { color: var(--color-primary); text-decoration: underline; }

.px-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 520px) { .px-duplo { grid-template-columns: 1fr; gap: 0; } }

/* Abas (login/cadastro) */
.px-abas {
  display: flex; gap: var(--space-1); margin-bottom: var(--space-4);
  background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-1);
}
.px-abas button {
  flex: 1; border: none; background: transparent; padding: var(--space-3);
  border-radius: var(--radius-sm); font-weight: 700; font-size: var(--font-sm);
  color: var(--color-text-muted); cursor: pointer;
}
.px-abas button.on { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }

/* -------------------------------------------------------------- AVISOS */
.px-msg {
  border-radius: var(--radius-sm); padding: var(--space-3) 13px;
  font-size: var(--font-sm); line-height: 1.55; margin-top: var(--space-3); display: none;
}
.px-msg.on { display: block; }
.px-msg--erro { background: var(--danger-bg);  color: var(--danger); }
.px-msg--ok   { background: var(--success-bg); color: var(--success); }
.px-msg--aviso{ background: var(--warning-bg); color: var(--warning); }

.px-banner {
  background: var(--blue-50); border-radius: var(--radius-md);
  padding: 11px var(--space-4); font-size: var(--font-sm);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4);
}
.px-banner b { color: var(--color-primary); }
.px-banner a {
  background: var(--color-primary); color: #fff; font-weight: 700;
  font-size: var(--font-xs); padding: var(--space-2) 15px;
  border-radius: var(--radius-sm); white-space: nowrap;
}

/* ----------------------------------------------------------------- KPIs */
.px-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.px-kpis--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 860px) { .px-kpis--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .px-kpis, .px-kpis--5 { grid-template-columns: repeat(2, 1fr); } }

.px-kpi {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4); text-align: center;
}
.px-kpi b { display: block; font-size: 1.625rem; font-weight: 900; color: var(--color-primary); line-height: 1.1; }
.px-kpi span { font-size: var(--font-xs); color: var(--color-text-muted); font-weight: 600; }
.px-kpi__nota { display: block; font-size: 0.625rem; color: var(--color-text-subtle); margin-top: 2px; }
.px-kpi--alerta b { color: var(--danger); }
.px-kpi--ok b { color: var(--success); }

/* --------------------------------------------------------------- TABELA */
/* Tabela densa para telas de gestão, onde comparar muitas linhas importa
   mais que respiro visual. O wrapper rola sozinho: sem ele, uma tabela
   larga empurra a página inteira e quebra o layout no celular. */
.px-tabela-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); }
.px-tabela { width: 100%; border-collapse: collapse; font-size: var(--font-sm); }
.px-tabela th {
  text-align: left; font-weight: 700; font-size: var(--font-xs);
  color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em;
  padding: var(--space-2) var(--space-3); border-bottom: 2px solid var(--color-border);
  white-space: nowrap; position: sticky; top: 0; background: var(--color-surface);
}
.px-tabela td {
  padding: var(--space-3); border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.px-tabela tbody tr:hover { background: var(--color-bg); }
.px-tabela tbody tr:last-child td { border-bottom: 0; }
.px-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.px-tabela .nowrap { white-space: nowrap; }
.px-tabela__vazio { text-align: center; color: var(--color-text-muted); padding: var(--space-8) !important; }

/* Filtros acima de uma tabela. */
.px-filtros { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-4); }
.px-filtro {
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); border-radius: var(--radius-pill);
  padding: 6px 14px; font-size: var(--font-xs); font-weight: 700; cursor: pointer;
  font-family: inherit; transition: all var(--fast) var(--ease);
}
.px-filtro:hover { border-color: var(--color-primary); color: var(--color-primary); }
.px-filtro.on { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }

/* ------------------------------------------------------------ MINIGRAFICO */
/* Barras de série temporal em SVG puro — nenhuma biblioteca. Volume aqui é
   de 30 pontos; carregar uma lib de gráficos para isso custaria mais que o
   dado mostrado. */
.px-spark { display: flex; align-items: flex-end; gap: 2px; height: 72px; }
.px-spark div {
  flex: 1; background: var(--blue-600); border-radius: 2px 2px 0 0;
  min-height: 2px; opacity: .85; transition: opacity var(--fast) var(--ease);
}
.px-spark div:hover { opacity: 1; }
.px-spark div.zero { background: var(--color-border); }
.px-spark-eixo { display: flex; justify-content: space-between; font-size: 0.625rem; color: var(--color-text-subtle); margin-top: var(--space-2); }

/* ----------------------------------------------------------------- TAGS */
.px-tag {
  display: inline-block; font-size: 0.65625rem; font-weight: 800;
  padding: 3px 9px; border-radius: var(--radius-pill);
  margin-left: var(--space-2); vertical-align: middle;
}
.px-tag--alta        { background: var(--success-bg); color: var(--success); }
.px-tag--media       { background: var(--warning-bg); color: var(--warning); }
.px-tag--baixa       { background: var(--danger-bg);  color: var(--danger); }
.px-tag--sem_contato { background: #EDF1F7;           color: var(--slate-500); }

/* Classificação de território — a cor indica URGÊNCIA DE AÇÃO, não o
   "estado bom/ruim": risco e recuperação exigem reação agora;
   consolidação e manutenção são posição conquistada. */
.px-tag--risco            { background: var(--danger-bg);  color: var(--danger); }
.px-tag--recuperacao      { background: var(--warning-bg); color: var(--warning); }
.px-tag--expansao         { background: var(--blue-50);    color: var(--blue-600); }
.px-tag--oportunidade     { background: #E6F6FC;           color: var(--sky-700); }
.px-tag--consolidacao     { background: var(--success-bg); color: var(--success); }
.px-tag--manutencao       { background: var(--success-bg); color: var(--success); }
.px-tag--baixa_prioridade { background: #EDF1F7;           color: var(--slate-500); }

/* Ciclo de vida do cliente no painel interno. Verde = receita entrando;
   âmbar = janela de ação aberta; vermelho = dinheiro saindo pela porta. */
.px-tag--pagando       { background: var(--success-bg); color: var(--success); }
.px-tag--trial         { background: var(--blue-50);    color: var(--blue-600); }
.px-tag--trial_acabando{ background: var(--warning-bg); color: var(--warning); }
.px-tag--trial_vencido { background: var(--danger-bg);  color: var(--danger); }
.px-tag--atrasado      { background: var(--warning-bg); color: var(--warning); }
.px-tag--bloqueado     { background: var(--danger-bg);  color: var(--danger); }
.px-tag--cortesia      { background: #EDF1F7;           color: var(--slate-500); }
.px-tag--sem_plano     { background: #EDF1F7;           color: var(--slate-500); }
.px-tag--interna       { background: var(--navy);       color: #fff; }

/* -------------------------------------------------------------- BARRAS */
.px-barra { height: 11px; background: var(--color-border); border-radius: var(--radius-pill); overflow: hidden; }
.px-barra > div {
  height: 100%; width: 0; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--blue-600), var(--sky-700));
  transition: width var(--slow) var(--ease);
}
.px-barra--ok > div      { background: var(--success); }
.px-barra--aviso > div   { background: var(--warning); }
.px-barra--perigo > div  { background: var(--danger); }
.px-barra--neutra > div  { background: linear-gradient(90deg, #7C93C3, #A9BCDF); }

/* Linha de dado (rótulo à esquerda, valor à direita) */
.px-linha {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-2) 0; border-bottom: 1px dashed var(--color-border);
  font-size: var(--font-sm);
}
.px-linha:last-child { border-bottom: none; }
.px-linha b { font-weight: 800; }
.px-fonte { font-size: var(--font-xs); color: var(--color-text-subtle); margin-top: var(--space-2); line-height: 1.55; }

/* --------------------------------------------------------------- MODAIS */
.px-fundo {
  position: fixed; inset: 0; background: rgba(11, 19, 43, 0.55);
  display: none; align-items: center; justify-content: center;
  padding: var(--space-4); z-index: 50;
}
.px-fundo.on { display: flex; }
.px-modal {
  background: var(--color-surface); border-radius: var(--radius-lg);
  padding: var(--space-6); max-width: 520px; width: 100%;
  max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg);
}
.px-modal h2 { font-size: 1.125rem; margin-bottom: var(--space-1); }
.px-modal-acoes { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.px-modal-acoes .px-btn { flex: 1; }
.px-modal-acoes .px-btn--fantasma, .px-modal-acoes .px-btn--perigo { flex: 0 0 auto; }

/* --------------------------------------------------------------- ESTADOS */
.px-vazio {
  text-align: center; padding: var(--space-10) var(--space-5);
  color: var(--color-text-muted); font-size: var(--font-body); line-height: 1.65;
}
.px-carregando { text-align: center; padding: var(--space-12) 0; color: var(--color-text-muted); }

/* =====================================================================
   APP SHELL — sidebar fixa + topbar (padrão de painel SaaS)
   =====================================================================
   Substitui o header horizontal nas telas internas: com 4 seções já
   apertava, e ainda entram territórios, agenda e IA. Navegação vertical
   escala sem repensar o layout a cada módulo novo.
   ===================================================================== */
.px-app { display: flex; min-height: 100dvh; }

.px-sidebar {
  position: fixed; inset-block: 0; left: 0; width: 244px; z-index: 40;
  background: var(--navy); color: #fff;
  display: flex; flex-direction: column;
  transition: transform var(--base) var(--ease);
}
/* A marca tambem reserva a faixa do sistema: a barra lateral vira
   gaveta no celular e comeca no topo absoluto da tela, entao o logo
   ficaria atras do relogio pelo mesmo motivo da barra do topo. */
.px-sidebar__brand {
  padding: var(--space-5) var(--space-5) var(--space-4);
  padding-top: calc(var(--space-5) + env(safe-area-inset-top));
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.px-sidebar__brand .px-brand__name { color: #fff; font-size: 1.1875rem; }
/* Sobre o navy o ciano tem 10,38:1 — aqui ele pode aparecer inteiro. */
.px-sidebar__brand .px-brand__name .nx {
  background: linear-gradient(90deg, #4D8DFF, var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.px-sidebar__brand .px-brand__tag { color: rgba(255,255,255,0.5); display: block; }
.px-sidebar__brand .px-brand__tag i { color: var(--cyan); }

.px-sidebar__nav { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-3); }
/* Seletor de modo, no topo da barra lateral.
 *
 * Dois botoes lado a lado dentro de uma pista, como um interruptor: a
 * forma comunica "um OU outro" antes de qualquer texto. Um dropdown
 * esconderia a opcao nao escolhida, e a graca aqui e justamente ver que
 * existe o outro lado.
 *
 * Em coluna abaixo de 1024px NAO: a barra lateral vira gaveta no
 * celular e a largura sobra. Fica igual nos dois. */
.px-modo {
  display: flex; gap: 3px; padding: 3px;
  background: rgba(255,255,255,.07); border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}
.px-modo__btn {
  flex: 1; padding: 8px 6px; border: 0; border-radius: calc(var(--radius-sm) - 2px);
  background: transparent; color: #A9BCDF;
  font-family: inherit; font-size: 0.6875rem; font-weight: 800;
  letter-spacing: .02em; cursor: pointer; white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.px-modo__btn:hover { color: #fff; }
.px-modo__btn.on { background: var(--color-primary); color: #fff; }

/* O titulo do grupo virou BOTAO: ele esconde e mostra os itens abaixo.
   As propriedades de aparencia continuam as mesmas de quando era um
   span, e as de reset (background, border, font-family) existem porque
   um <button> nao herda nenhuma delas do menu escuro em volta. */
.px-sidebar__grupo {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; background: none; border: 0; font-family: inherit; text-align: left;
  cursor: pointer;
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.42);
  padding: var(--space-4) var(--space-3) var(--space-2);
}
.px-sidebar__grupo:hover { color: rgba(255,255,255,0.78); }
/* A seta aponta para baixo com o grupo aberto e para o lado com ele
   fechado. E o unico sinal de que ha algo escondido ali: sem ela, o
   grupo fechado parece um menu que simplesmente nao tem aquelas telas.
   Sao dois desenhos, e nao um girado: `transform` nao pega no elemento
   <svg> externo, e a seta ficava parada apontando sempre para baixo. */
.px-grupo__seta { width: 13px; height: 13px; flex: 0 0 auto; opacity: .7; }
.px-sidebar__grupo[aria-expanded="true"]  .px-seta--lado,
.px-sidebar__grupo[aria-expanded="false"] .px-seta--baixo { display: none; }
.px-grupo.fechado { display: none; }

/* Com a barra encolhida so ha icones, e um titulo de grupo invisivel
   nao teria como ser clicado para reabrir o que ele esconde. Os itens
   voltam inteiros; a preferencia de cada grupo continua guardada e volta
   a valer quando a barra abre. */
.px-mini .px-grupo.fechado { display: block; }
.px-sidebar__nav a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-sm);
  color: #A9BCDF; font-size: var(--font-sm); font-weight: 600;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.px-sidebar__nav a svg { width: 18px; height: 18px; flex: 0 0 auto; }
.px-sidebar__nav a:hover { background: rgba(255,255,255,0.07); color: #fff; }
.px-sidebar__nav a.on { background: var(--blue-600); color: #fff; }
.px-sidebar__nav a.on svg { color: #fff; }
.px-sidebar__nav a.desabilitado { opacity: 0.45; cursor: default; }
.px-sidebar__nav a.desabilitado:hover { background: none; color: #A9BCDF; }
.px-sidebar__tagsoon {
  margin-left: auto; font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.04em;
  background: rgba(255,255,255,0.12); padding: 2px 6px; border-radius: var(--radius-pill);
}

.px-sidebar__rodape { padding: var(--space-3); border-top: 1px solid rgba(255,255,255,0.09); }
.px-plano {
  background: rgba(255,255,255,0.07); border-radius: var(--radius-md);
  padding: var(--space-3); font-size: var(--font-xs);
}
.px-plano b { display: block; color: #fff; font-size: var(--font-sm); margin-bottom: 2px; }
.px-plano span { color: #A9BCDF; line-height: 1.5; }
.px-plano a {
  display: block; text-align: center; margin-top: var(--space-3);
  background: var(--cyan); color: var(--navy); font-weight: 800;
  padding: var(--space-2); border-radius: var(--radius-sm); font-size: var(--font-xs);
}

/* Conteúdo à direita da sidebar */
.px-conteudo { flex: 1; min-width: 0; margin-left: 244px; display: flex; flex-direction: column; }

/* A barra do topo reserva a area do notch — como REDE, nao como remedio.
 *
 * O remedio de verdade e o meta apple-mobile-web-app-status-bar-style em
 * "default": com ele o iOS reserva a faixa da barra de status sozinho e
 * nao ha o que compensar. Antes ele estava em "black-translucent", que
 * joga o conteudo por baixo do relogio e obriga TODA tela a compensar —
 * e uma compensacao que falha em um lugar corta o titulo, que foi
 * exatamente o que aconteceu no iPhone.
 *
 * Este padding fica porque `viewport-fit=cover` continua no viewport e
 * outros navegadores podem honrar o overlay. env() vale zero em aparelho
 * sem notch e no computador, entao a mesma regra serve para todos sem
 * media query, e somar zero nao muda nada.
 *
 * O rodape faz o mesmo do outro lado, com safe-area-inset-bottom. */
.px-topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-5);
  padding-top: calc(var(--space-3) + env(safe-area-inset-top));
  display: flex; align-items: center; gap: var(--space-4);
}
.px-topbar__titulo { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.015em; }
.px-topbar__sub { font-size: var(--font-xs); color: var(--color-text-muted); font-weight: 500; }
.px-topbar__dir { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }

/* Os botoes da barra, num lugar so.
   O empurrao para a direita e do .px-topbar__dir acima, e e o UNICO que
   existe: antes cada botao trazia o seu `margin-left: auto` e o CSS
   cancelava o do vizinho com regras de irmao adjacente, o que dava uma
   barra diferente em cada tela. A ordem vem do PX_TOPBAR_ORDEM, no
   polinexus.js. */
.px-topbar__acoes { display: flex; align-items: center; gap: var(--space-2); }

/* =====================================================================
   O MENU DA CONTA
   =====================================================================
   Clicar no proprio nome abre foto, e-mail, os dados da campanha, as
   configuracoes e a saida. As tres ultimas saíram da barra lateral, onde
   eram os ultimos itens de um menu de dezesseis telas. */
.px-conta { position: relative; }
/* ELE PRECISA PARECER UM BOTÃO, e não parecia: era o mesmo nome escrito
   na barra de antes, sem borda, sem seta e sem nada que dissesse que
   abria alguma coisa. Quem não sabe que ali tem menu não clica em texto.
   A borda e a seta resolvem os dois lados: a borda diz "isto é um
   controle", a seta diz "abre para baixo". */
.px-conta__botao {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface); border: 1px solid var(--color-border);
  padding: 4px 8px 4px 10px; border-radius: var(--radius-pill);
  font-family: inherit; color: inherit; cursor: pointer; text-align: left;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.px-conta__botao:hover { background: var(--color-bg); border-color: var(--color-text-subtle); }
.px-conta__botao[aria-expanded="true"] { background: var(--color-bg); border-color: var(--blue-600); }

.px-conta__seta { width: 14px; height: 14px; flex: 0 0 auto;
  color: var(--color-text-muted); transition: transform var(--fast) var(--ease); }
.px-conta__botao[aria-expanded="true"] .px-conta__seta { transform: rotate(180deg); }

/* No celular sobra o avatar e a seta: o nome e "Minha conta" já somem
   pelo .px-topbar__usuario, e o botão vazio ficaria com ar de erro. */
@media (max-width: 560px) { .px-conta__botao { padding: 4px 6px; } }

.px-conta__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 45;
  width: min(300px, calc(100vw - 32px));
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  overflow: hidden;
}
.px-conta__quem {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3); border-bottom: 1px solid var(--color-border);
}
/* O circulo grande e o mesmo desenho do avatar da barra, so que maior:
   o mesmo fundo, as mesmas iniciais quando nao ha foto. */
.px-conta__foto {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy); color: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-xs); font-weight: 800;
}
.px-conta__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-conta__dados { min-width: 0; }
.px-conta__dados b { display: block; font-size: var(--font-sm); }
/* O e-mail e o unico texto aqui que pode ser mais longo que a caixa, e
   quebrar no meio de um dominio deixa a linha ilegivel. */
.px-conta__dados span {
  display: block; font-size: var(--font-xs); color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.px-conta__foto-acoes { display: flex; gap: var(--space-2); margin-top: 6px; }
.px-conta__foto-acoes button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: var(--font-xs); font-weight: 700;
  color: var(--blue-600); text-decoration: underline;
}
.px-conta__foto-acoes button:hover { color: var(--blue-700); }

.px-conta__itens, .px-conta__sair { padding: var(--space-2) 0; }
.px-conta__sair { border-top: 1px solid var(--color-border); }
.px-conta__menu a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text); text-decoration: none;
  font-size: var(--font-sm); font-weight: 600;
}
.px-conta__menu a:hover { background: var(--color-bg); }
.px-conta__menu a svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--color-text-muted); }
.px-conta__erro {
  margin: 0; padding: var(--space-2) var(--space-3);
  font-size: var(--font-xs); color: var(--danger, #B91C1C);
}
.px-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(140deg, var(--blue-600), var(--sky-700));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: var(--font-xs);
  /* Sem isto a foto sai QUADRADA por cima do círculo: o `border-radius`
     recorta o fundo do próprio elemento, e não o filho que vaza dele. */
  overflow: hidden;
}
/* `cover` e não `contain`: foto de gente quase nunca é quadrada, e
   `contain` deixaria duas tarjas vazias em volta do rosto. O recorte
   central já foi feito no navegador antes de subir, então aqui ele só
   confirma. */
.px-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-topbar__usuario { font-size: var(--font-xs); line-height: 1.3; }
.px-topbar__usuario b { display: block; font-size: var(--font-sm); }
.px-topbar__usuario span { color: var(--color-text-muted); }
@media (max-width: 560px) { .px-topbar__usuario { display: none; } }

.px-menu-toggle {
  display: none; background: none; border: none; cursor: pointer;
  padding: var(--space-2); color: var(--color-text);
}
.px-menu-toggle svg { width: 22px; height: 22px; }

/*
 * max-width: 100%, e não `none`.
 *
 * .px-main é item de um flex container em coluna. Sem teto, o navegador
 * dimensiona a linha do flex pelo conteúdo mais largo — e uma tabela de
 * seis colunas esticava a MAIN inteira para 695px dentro de uma tela de
 * 375px. O resultado não era a tabela rolando de lado: era a PÁGINA
 * inteira, arrastando topo, cartões e menu junto. Com o teto, a rolagem
 * volta para dentro de .px-tabela-wrap, que é quem tem overflow-x.
 */
.px-conteudo .px-main { max-width: 100%; padding: var(--space-5); flex: 1; }
/* =====================================================================
   O MAPA VAZANDO POR CIMA DO MENU
   =====================================================================
   Descoberto em 07/09/2026: com o menu lateral aberto no celular, o mapa
   da Cobertura da rua aparecia POR CIMA dele — tiles, controles de zoom e
   tudo, cobrindo os itens do menu.

   A CAUSA nao e do nosso CSS, e sim de como o Leaflet empilha: ele poe as
   camadas internas em `z-index: 400` e o controle de zoom em 1000. O
   `.leaflet-container` e `position: relative` mas fica com `z-index:
   auto`, e isso NAO cria contexto de empilhamento — entao aqueles 400 e
   1000 sobem e disputam a pagina inteira com o menu (40) e a cortina
   (35), que perdem por muito.

   `z-index: 0` resolve porque o valor deixa de ser `auto`: o container
   passa a ser um contexto proprio, e tudo que o Leaflet desenha fica
   preso dentro dele. Zero, e nao 1, para nao ganhar de nada que ja esteja
   por perto.

   Vale para as duas telas com mapa (Cobertura da rua e Estatisticas), e
   vale de graca para a proxima que houver — por isso mora aqui, e nao no
   <style> de cada uma. */
.leaflet-container { z-index: 0; }

.px-conteudo .px-topbar { max-width: 100%; min-width: 0; }

/* E O MESMO REMEDIO PARA O MIOLO, pelo mesmo motivo — descoberto em
   07/09/2026, medindo a tela de Configuracoes num aparelho de 375px.
 *
 * `.px-conteudo` e uma coluna flex, e todo item de flex nasce com
 * `min-width: auto`: ele NAO encolhe abaixo do proprio conteudo. Uma
 * fileira que nao quebra — as quatro abas de Configuracoes somam 505px —
 * puxava o `.px-main` inteiro para 529px dentro de uma tela de 375.
 *
 * E o pior nao era rolar de lado: o `.px-conteudo` tem `overflow-x: clip`
 * no celular, entao o excesso era CORTADO. O lado direito de todos os
 * cartoes daquela tela simplesmente nao existia para quem estava no
 * telefone, sem barra de rolagem e sem nada avisando.
 *
 * Com `min-width: 0` o miolo obedece a largura da tela, e quem tem
 * conteudo largo demais rola dentro de si — que e o que a propria
 * `.cfg-abas` ja pedia com o `overflow-x: auto` dela, e nao conseguia. */
/* `max-width: 100%` JUNTO, e ele e a metade que resolve. So o
 * `min-width: 0` nao bastou: a tela de Configuracoes declara
 * `.px-conteudo .px-main { max-width: 720px }`, e com um teto de 720 o
 * item continuava livre para assumir os 530 do proprio conteudo. O 100%
 * amarra o teto a largura de quem contem, e e o mesmo par que a barra de
 * topo ali em cima ja usava. */
.px-conteudo .px-main { min-width: 0; max-width: 100%; }

/* Overlay do drawer no mobile */
.px-overlay {
  display: none; position: fixed; inset: 0; z-index: 35;
  background: rgba(11,19,43,0.5);
}
.px-overlay.on { display: block; }

/* AS SUB-ABAS DO PAINEL INTERNO. Grudadas embaixo do topo, e rolando de
   lado no telefone: quebradas em duas linhas elas empurrariam o conteudo
   e a primeira coisa da tela seria a propria navegacao. */
.px-subabas {
  position: sticky; top: 0; z-index: 29;
  display: flex; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}
.px-subaba {
  flex: 0 0 auto; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: 6px 14px; font-size: var(--font-sm); font-weight: 700;
  color: var(--color-text-muted); background: var(--color-bg);
}
.px-subaba:hover { color: var(--color-text); }
.px-subaba.on {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}
@media (max-width: 720px) {
  .px-subabas { padding: var(--space-2) var(--space-4); }
}

/* =====================================================================
   A BARRA DO TOPO NO CELULAR
   =====================================================================
   O bloco do titulo e item de flex, e item de flex nasce com
   `min-width: auto`, que e o MINIMO DO CONTEUDO. Com "118 entrega(s)
   registrada(s)" ao lado de dois botoes e tres icones, o minimo da barra
   passava da largura do telefone.

   E o estrago nao ficava na barra: ela empurrava a PAGINA inteira, que
   passava a rolar de lado. Rolada, o botao do menu sumia para a esquerda
   (parecia que a tela nao tinha menu) e o conteudo aparecia cortado na
   direita. Duas queixas, um motivo so.
   ===================================================================== */
@media (max-width: 720px) {
  .px-topbar { flex-wrap: wrap; row-gap: var(--space-2); }
  /* O bloco do titulo passa a poder encolher. */
  .px-topbar > div { min-width: 0; }
  .px-topbar__titulo, .px-topbar__sub { overflow-wrap: anywhere; }
  /* As acoes caem para a linha de baixo em vez de espremer o titulo. */
  .px-topbar__dir { flex-wrap: wrap; justify-content: flex-end; }
}

/* A REDE, e nao o conserto: o conserto sao os `min-width: 0` acima.
   `clip`, e nao `hidden`, porque `hidden` cria um container de rolagem e
   quebra o `position: sticky` da propria barra. */
.px-conteudo { min-width: 0; }
@media (max-width: 720px) {
  .px-conteudo { overflow-x: clip; }
}

@media (max-width: 1024px) {
  .px-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .px-sidebar.on { transform: translateX(0); }
  .px-conteudo { margin-left: 0; }
  .px-menu-toggle { display: flex; }
}

/* -------------------------------------------- BARRA LATERAL ENCOLHIDA
 *
 * O bloco inteiro vive dentro de min-width: 1025px, e nao e descuido: no
 * celular a barra ja e gaveta, some sozinha e nao rouba largura de
 * ninguem. Encolher la nao resolveria nada e ainda faria a gaveta abrir
 * com 64px de largura, so com icones, que e pior que a gaveta normal.
 *
 * Existe pela tela de conversas: um mensageiro precisa de lista a
 * esquerda e conversa a direita, e 244px de menu comem justamente a
 * largura de que a lista precisa. Serve para qualquer tela larga.
 *
 * O seletor de modo some junto com os rotulos. Ele e so texto, e dois
 * botoes escritos nao cabem em 64px sem virar sigla; para trocar de modo
 * a pessoa reabre o menu, que e um clique. O botao de reabrir e o unico
 * que fica sempre visivel, justamente para essa volta ser barata.
 */
@media (min-width: 1025px) {
  .px-mini .px-sidebar  { width: 64px; }
  .px-mini .px-conteudo { margin-left: 64px; }

  .px-mini .px-sidebar__brand { padding-left: 0; padding-right: 0; }
  .px-mini .px-brand { justify-content: center; }
  .px-mini .px-brand__txt,
  .px-mini .px-sidebar__grupo,
  .px-mini .px-modo,
  .px-mini .px-plano,
  .px-mini .px-item__txt { display: none; }

  .px-mini .px-sidebar__nav { padding: var(--space-4) var(--space-2); }
  /* justify-content e nao text-align: o link e flex, e sem isto o icone
     encosta na esquerda em vez de centralizar. */
  .px-mini .px-sidebar__nav a { justify-content: center; gap: 0; }

  /* O botao de encolher so existe onde encolher significa algo. */
  .px-encolher {
    display: flex; align-items: center; gap: var(--space-3); width: 100%;
    background: rgba(255,255,255,0.07); border: 0; cursor: pointer;
    color: #A9BCDF; font-family: inherit; font-size: var(--font-xs);
    font-weight: 700; padding: var(--space-3); border-radius: var(--radius-sm);
    margin-top: var(--space-2);
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
  }
  .px-encolher:hover { background: rgba(255,255,255,0.14); color: #fff; }
  .px-encolher svg { width: 16px; height: 16px; flex: 0 0 auto; }
  .px-mini .px-encolher { justify-content: center; gap: 0; }
  /* A seta aponta para onde o clique leva a barra: para dentro quando
     ela esta aberta, para fora quando esta encolhida. */
  .px-mini .px-encolher svg { transform: scaleX(-1); }
}
@media (max-width: 1024px) { .px-encolher { display: none; } }

/* ---------------------------------------------------- KPI com ícone */
.px-kpi--icone { display: flex; align-items: center; gap: var(--space-3); text-align: left; }
.px-kpi__ico {
  width: 44px; height: 44px; border-radius: var(--radius-md); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.px-kpi__ico svg { width: 22px; height: 22px; }
.px-kpi__ico--azul  { background: var(--blue-50);    color: var(--blue-600); }
.px-kpi__ico--verde { background: var(--success-bg); color: var(--success); }
.px-kpi__ico--ambar { background: var(--warning-bg); color: var(--warning); }
.px-kpi__ico--vermelho { background: var(--danger-bg); color: var(--danger); }
.px-kpi__ico--ciano { background: #E6F6FC;           color: var(--sky-700); }
.px-kpi--icone b { font-size: 1.5rem; color: var(--color-text); }
.px-kpi--icone .px-kpi__ico + div { min-width: 0; }

/* ------------------------------------------------------- GRÁFICOS */
/* SVG puro: nenhuma biblioteca de gráfico justifica o peso aqui. */
.px-donut { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.px-donut svg { width: 132px; height: 132px; flex: 0 0 auto; transform: rotate(-90deg); }
.px-donut__centro { position: relative; }
.px-donut__valor {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; transform: none;
}
.px-donut__valor b { font-size: 1.5rem; font-weight: 900; line-height: 1; }
.px-donut__valor span { font-size: 0.625rem; color: var(--color-text-muted); margin-top: 2px; }
.px-legenda { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--font-xs); }
.px-legenda div { display: flex; align-items: center; gap: var(--space-2); }
.px-legenda i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.px-legenda b { margin-left: auto; padding-left: var(--space-3); }

/* Barras horizontais rotuladas (dimensões, rankings) */
.px-bar { margin-bottom: var(--space-3); }
.px-bar__topo {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--font-xs); font-weight: 700; margin-bottom: 5px;
}
.px-chip {
  font-size: var(--font-xs); font-weight: 900; padding: 2px 9px;
  border-radius: var(--radius-pill); color: #fff;
}
.px-chip--baixo { background: var(--danger); }
.px-chip--medio { background: var(--warning); }
.px-chip--alto  { background: var(--success); }

/* Lista de passos numerados */
.px-passo {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 13px; border-radius: var(--radius-md);
  background: var(--color-bg); margin-bottom: var(--space-2);
}
.px-passo__n {
  flex: 0 0 30px; height: 30px; border-radius: var(--radius-sm);
  background: var(--color-primary); color: #fff; font-weight: 900;
  display: flex; align-items: center; justify-content: center; font-size: var(--font-sm);
}
.px-passo b { display: block; font-size: var(--font-sm); margin-bottom: 2px; }
.px-passo span { font-size: var(--font-xs); color: var(--color-text-muted); line-height: 1.55; }
.px-passo__soon {
  display: inline-block; margin-top: var(--space-1); font-size: 0.6875rem; font-weight: 700;
  color: var(--color-text-subtle); background: #EDF1F7;
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
}

/* =====================================================================
   DOCUMENTO OFICIAL — folha imprimível
   =====================================================================
   Ofício sai por Ctrl+P → "Salvar como PDF", e não por biblioteca de PDF:
   hospedagem compartilhada não tem uma instalada, e adicionar dependência
   que a Hostinger pode quebrar num update sairia mais caro que o ganho.
   O resultado é o mesmo arquivo, com layout que a gente controla no CSS.
   ===================================================================== */
.folha {
  background: #fff;
  max-width: 21cm;
  min-height: 29.7cm;
  margin: 0 auto;
  padding: 2.5cm 3cm;
  box-shadow: var(--shadow-lg);
  /* Serifada e 12pt: é o que a casa legislativa espera de um documento
     protocolado. A interface continua em Inter. */
  font-family: 'Times New Roman', Times, serif;
  font-size: 12pt;
  line-height: 1.5;
  color: #000;
}
.folha__cab { text-align: center; margin-bottom: var(--space-10); }
.folha__cab b { display: block; font-size: 13pt; text-transform: uppercase; letter-spacing: .02em; }
.folha__cab span { display: block; font-size: 11pt; }
.folha__num { font-weight: bold; margin-bottom: var(--space-6); }
.folha__dest { margin-bottom: var(--space-6); }
.folha__dest b { display: block; }
.folha__assunto { margin-bottom: var(--space-6); }
.folha__corpo { text-align: justify; white-space: pre-wrap; margin-bottom: var(--space-12); }
.folha__assina { text-align: center; margin-top: var(--space-16); }
.folha__assina hr { width: 60%; margin: 0 auto var(--space-2); border: 0; border-top: 1px solid #000; }
.folha__assina b { display: block; }
.folha__assina span { display: block; font-size: 11pt; }
.folha__data { text-align: right; margin-bottom: var(--space-8); }

@media print {
  /* Some tudo que não é o documento: barra lateral, botões, topo. */
  .px-sidebar, .px-topbar, .px-overlay, .nao-imprime { display: none !important; }
  .px-conteudo { margin-left: 0 !important; }
  .px-main { padding: 0 !important; max-width: none !important; }
  body { background: #fff; }
  .folha { box-shadow: none; margin: 0; max-width: none; padding: 0; min-height: 0; }
  @page { size: A4; margin: 2.5cm 3cm; }
}

/* =====================================================================
   REPORTE DE BUG / SUGESTÃO — botão flutuante
   =====================================================================
   Fica em todas as telas internas porque bug não avisa onde vai
   acontecer. Discreto o bastante para não competir com a operação, e
   sempre no mesmo lugar: quem precisa dele já está irritado, e procurar
   onde reclamar piora.
   ===================================================================== */
.px-fb-botao {
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 45;
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--navy); color: #fff; border: 0;
  border-radius: var(--radius-pill); padding: var(--space-3) var(--space-5);
  font-size: var(--font-sm); font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow-lg); font-family: inherit;
  transition: transform var(--fast) var(--ease);
}
.px-fb-botao:hover { transform: translateY(-2px); }
.px-fb-botao svg { width: 17px; height: 17px; }
@media (max-width: 640px) {
  /* No celular vira só o ícone: o rótulo cobriria o conteúdo. */
  .px-fb-botao span { display: none; }
  .px-fb-botao { padding: var(--space-3); right: var(--space-4); bottom: var(--space-4); }
}
@media print { .px-fb-botao { display: none; } }
/* Com a gaveta da Vega aberta, o botao ficava por cima do campo de
   resposta: ele e fixo no mesmo canto e tem z-index maior. */
body.px-vega-aberta .px-fb-botao { display: none; }

.px-fb-item { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.px-fb-item:last-child { border-bottom: 0; }
.px-fb-item b { display: block; font-size: var(--font-sm); }
.px-fb-item span { font-size: var(--font-xs); color: var(--color-text-muted); }
.px-fb-item .resposta {
  display: block; margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
  background: var(--success-bg); border-radius: var(--radius-sm);
  font-size: var(--font-sm); color: var(--color-text);
}

/* ------------------------------------------------------------ SINO */
/* Fica na topbar, não flutuando: o botão de Reportar já ocupa o canto
   inferior direito, e dois botões flutuantes brigam no celular. */
.px-sino {
  position: relative; flex: 0 0 auto;
  background: none; border: 0; cursor: pointer; padding: var(--space-2);
  border-radius: var(--radius-sm); color: var(--color-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  /* 44x44 é o menor alvo que um dedo acerta sem errar o vizinho. O
     desenho continua de 20px: quem cresce é a área de toque. */
  min-width: 44px; min-height: 44px;
}
.px-sino:hover { background: var(--color-bg); color: var(--color-text); }
.px-sino svg { width: 20px; height: 20px; }
.px-sino__n {
  position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 9px; background: var(--danger, #B91C1C);
  color: #fff; font-size: 10px; font-weight: 800; line-height: 17px;
  text-align: center;
}
/* O cracha do PoliWhats usa o mesmo desenho do sino, mas e um link e
   nao abre painel: ele leva para a tela. */
.px-pw { text-decoration: none; }
.px-pw .px-sino__n { background: var(--color-primary, #0D47FF); }
/* Com os dois na barra, so o primeiro empurra para a direita. */

.px-sino-painel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: min(340px, calc(100vw - 32px));
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--space-3); text-align: left; cursor: default;
  max-height: 60vh; overflow-y: auto;
}
.px-sino-painel h3 { font-size: var(--font-body); margin-bottom: var(--space-2); }
.px-sino-item { padding: var(--space-2) 0; border-bottom: 1px dashed var(--color-border); }
.px-sino-item:last-of-type { border-bottom: 0; }
.px-sino-item b { display: block; font-size: var(--font-sm); }
.px-sino-item span { font-size: var(--font-xs); color: var(--color-text-muted); }

/* Convite de parceria no sino. Destacado de proposito: e o unico item do
   painel que pede uma DECISAO, e nao pode parecer mais um aviso. */
.px-sino-convite {
  border: 1px solid var(--color-primary); border-radius: var(--radius-md);
  background: var(--blue-50); padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.px-sino-convite b { display: block; font-size: var(--font-sm); color: var(--color-primary); }
.px-sino-convite p { font-size: var(--font-xs); line-height: 1.55; margin-top: var(--space-2); }
.px-sino-convite__nota { color: var(--color-text-muted); }
.px-sino-convite__acoes {
  display: flex; gap: var(--space-2); align-items: center;
  flex-wrap: wrap; margin-top: var(--space-3);
}

/* ------------------------------------------------------------ AJUDA */
/* O "?" ao lado do título do card. Discreto por padrão: quem já sabe o
   que o card faz não pode ser interrompido por um ícone gritando. */
.px-card__titulo { display: inline-flex; align-items: center; gap: 6px; }
.px-ajuda {
  width: 18px; height: 18px; flex: 0 0 auto; padding: 0;
  border: 1px solid var(--color-border); border-radius: 50%;
  background: none; color: var(--color-text-subtle);
  font-size: 11px; font-weight: 800; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.px-ajuda:hover, .px-ajuda[aria-expanded="true"] {
  background: var(--color-primary, #0D47FF); border-color: transparent; color: #fff;
}
.px-ajuda-caixa {
  position: absolute; z-index: 50; max-width: min(320px, calc(100vw - 32px));
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--space-3); font-size: var(--font-sm); line-height: 1.55;
  font-weight: 400; color: var(--color-text); text-align: left;
}
.px-ajuda-caixa b { display: block; margin-bottom: 4px; }

/* =====================================================================
   CELULAR
   =====================================================================
   O sistema é usado na rua: liderança conferindo contato antes de bater
   na porta, assessor anotando demanda no meio da visita. O que vale aqui
   não é encolher a tela do computador — é trocar o que não funciona com
   o polegar por algo que funciona.
   ===================================================================== */

/* ------------------------------------------- tabela vira lista de cartões */
/*
 * Tabela de seis colunas não se lê num telefone: rolar de lado esconde a
 * coluna que importa e faz perder de vista de qual linha ela era. Cada
 * linha vira um cartão, e o rótulo da coluna vem junto do valor — quem
 * lê nunca precisa lembrar qual coluna era qual.
 *
 * Os rótulos entram por data-rotulo, escrito pelo pxTabelasComoCartoes()
 * a partir do próprio <thead>. Assim nenhuma tela precisou ser alterada,
 * e tabela nova nasce funcionando.
 */
@media (max-width: 640px) {
  .px-tabela--cartoes { display: block; }
  .px-tabela--cartoes thead { display: none; }
  .px-tabela--cartoes tbody { display: block; }

  .px-tabela--cartoes tbody tr {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    background: var(--color-surface);
  }
  .px-tabela--cartoes tbody tr:hover { background: var(--color-surface); }
  .px-tabela--cartoes tbody tr:last-child td { border-bottom: 0; }

  .px-tabela--cartoes td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-4);
    padding: 5px 0; border-bottom: 0;
    text-align: right;
  }
  .px-tabela--cartoes td::before {
    content: attr(data-rotulo);
    flex: 0 0 auto;
    font-size: var(--font-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: var(--color-text-muted);
    text-align: left;
  }
  /* Célula sem rótulo (coluna de botões) ocupa a linha inteira. */
  .px-tabela--cartoes td:not([data-rotulo])::before { content: none; }
  .px-tabela--cartoes td:not([data-rotulo]) { justify-content: flex-end; }

  /* A primeira coluna é o nome da coisa: vira o título do cartão. */
  .px-tabela--cartoes td:first-child {
    display: block; text-align: left;
    font-weight: 700; font-size: var(--font-body);
    padding-bottom: var(--space-2); margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
  }
  .px-tabela--cartoes td:first-child::before { display: none; }

  .px-tabela--cartoes .num { text-align: right; }
  /* O wrapper existia só para rolar de lado; sem tabela larga, ele estorva. */
  .px-tabela-wrap:has(.px-tabela--cartoes) { overflow-x: visible; margin: 0; padding: 0; }
}

/* --------------------------------------------------- barra de navegação */
/*
 * Cinco destinos fixos no rodapé, ao alcance do polegar. A gaveta lateral
 * continua existindo para o resto — mas obrigar dois toques (abrir o menu,
 * escolher) para as telas do dia a dia é o que faz um site parecer site
 * em vez de aplicativo.
 *
 * Só aparece no celular, e some quando o teclado abre (ver pxBarraBaixo).
 */
.px-rodape {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 38;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 12px rgba(11,19,43,.06);
}
/* Colunas pelo NUMERO DE ITENS, e nao fixas em cinco.
 *
 * A barra passou a ter conteudo por modo, com quatro atalhos em cada um.
 * Com repeat(5, 1fr) os quatro se espremiam em 4/5 da largura e sobrava
 * um vao a direita. auto-flow acompanha qualquer quantidade, entao
 * mexer na lista do rodape deixa de exigir mexer no CSS junto. */
.px-rodape__itens {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
}
.px-rodape a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 9px 2px 7px;
  font-size: 12px; font-weight: 700; letter-spacing: -.01em;
  color: var(--color-text-muted); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.px-rodape a svg { width: 21px; height: 21px; }
.px-rodape a.on { color: var(--color-primary); }
.px-rodape a.on svg { stroke-width: 2.4; }

@media (max-width: 640px) {
  .px-rodape { display: block; }
  /* Espaço para a barra não cobrir o fim da página. */
  .px-conteudo .px-main { padding-bottom: 84px; }
  .px-fb-botao { bottom: 76px; }
}
.px-rodape--oculto { transform: translateY(110%); }

/* =====================================================================
   O CELULAR: ISTO PRECISA PARECER UM APP, E NAO UM SITE ENCOLHIDO
   =====================================================================
   O QUE ESTAVA ERRADO, medido em 07/09/2026 num iPhone de 375px:

     barra de topo    123px, e 179px no CRM — tres linhas
     cartao de KPI    130px cada, dois por linha
     heroi das Config 541px, so ele
     botao comum      50px de altura, e a fonte de 15px do computador
     chip de filtro   44px, um ou dois por linha

   Somando: a primeira tela mostrava dois cartoes e meio. Num app de
   verdade cabem seis. A tela nao estava quebrada — estava FOLGADA, que e
   um defeito mais dificil de ver porque cada peca, sozinha, parece certa.

   A REGRA QUE GUIA ESTE BLOCO: no computador o espaco em branco separa
   assuntos; no celular ele empurra o assunto para fora da tela. Entao o
   respiro cai, a tipografia encolhe um degrau, e a HIERARQUIA fica por
   conta do peso e da cor — que nao custam pixel nenhum.

   O QUE NAO ENCOLHE, e e deliberado:

   - o alvo de toque dos botoes de ACAO continua em 44px. E o minimo que
     se acerta com o polegar em movimento, e errar um botao de acao custa
     mais que rolar mais um dedo;
   - o campo de texto continua com fonte de 16px. Abaixo disso o iOS da
     zoom sozinho ao focar, e nao desfaz: a tela fica torta pelo resto da
     sessao;
   - o CHIP de filtro desce para 38px, e ele nao e excecao a regra acima:
     errar um filtro nao apaga nada, e uma fileira de chips de 44px come
     mais tela do que os proprios dados que ela filtra.
   ===================================================================== */
@media (max-width: 640px) {
  /* --- respiro geral -------------------------------------------------- */
  .px-conteudo .px-main { padding-left: var(--space-3); padding-right: var(--space-3); }
  .px-main { padding-top: var(--space-4); }

  .px-card {
    padding: var(--space-4) var(--space-3);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
  }
  .px-card__titulo { font-size: var(--font-body-lg); margin-bottom: var(--space-2); }
  .px-card__sub { margin-bottom: var(--space-3); }

  /* --- a barra de topo ------------------------------------------------- */
  /* Ela quebra em duas linhas no celular, e vai continuar quebrando: sao
     quatro icones, a Vega, o guia e a conta. O que da para fazer e cada
     linha custar menos. */
  .px-topbar { padding: var(--space-2) var(--space-3); row-gap: var(--space-1); }
  .px-topbar__titulo { font-size: var(--font-body); line-height: 1.25; }
  .px-topbar__sub { font-size: 0.6875rem; line-height: 1.25; }
  .px-topbar__acoes { gap: 2px; }
  .px-sino { padding: 6px; }
  .px-sino svg { width: 19px; height: 19px; }
  .px-menu-toggle { padding: 6px; }
  /* 44x44 em TODO botão do topo, e não só no sino. Cabe: o título já
     fica numa linha e os ícones na outra, junto da conta, e seis
     alvos de 44px somam 280px numa linha de 351. Medido com três
     ícones, Vega, guia e conta numa tela de 375. */
  .px-menu-toggle, .px-vega-botao, .px-tour-botao, .px-conta__botao {
    min-width: 44px; min-height: 44px; justify-content: center;
  }
  /* O avatar e a unica coisa que sobra do bloco da conta no celular (o
     nome ja some aos 560px), e era ele quem definia a altura da segunda
     linha inteira. */
  .px-avatar { width: 30px; height: 30px; }

  /* Algumas telas penduram a ACAO PRINCIPAL na barra ("+ Nova
     lideranca", "+ Novo comite"). Somada aos seis icones e a conta, ela
     nao cabe numa linha de 375px e a barra virava tres andares de 147px.
     Nao da para tirar a acao dali sem mexer em quinze telas; da para
     fazer cada andar custar menos. */
  /* A CONTA FICA NA LINHA DOS ICONES, sempre.
   *
   * Ela caia sozinha numa terceira linha nas telas que penduram a acao
   * principal na barra ("+ Nova lideranca"), e uma linha inteira para um
   * avatar de 30px e o tipo de coisa que faz o app parecer site.
   *
   * `order` resolve sem mexer no HTML de quinze telas: a conta vem logo
   * depois dos icones, e quem desce para a linha de baixo, quando nao
   * couber, e a ACAO — que e o item mais largo e o unico que se lê. */
  .px-topbar__dir { gap: 6px; row-gap: 4px; }
  .px-topbar__acoes { order: 1; }
  .px-conta { order: 2; }
  .px-topbar__dir > .px-btn { order: 3; min-height: 34px; padding: 6px 10px; font-size: 11.5px; }

  /* A ENGRENAGEM SAI DA BARRA no celular: ela ja e o segundo item do
     menu da conta, ali do lado, e o mesmo botao em dois lugares a um
     centimetro um do outro nao e atalho, e desordem. No computador ela
     fica, porque la sobra barra. */
  #px-config-btn { display: none; }
  .px-conta__botao { padding: 3px; gap: 0; }
  /* A SETA SAI, e sao 16px que decidem a linha.
     Com ela, icones + conta + a acao da tela somavam 361px numa faixa de
     351 — dez pixels, e a acao caia para uma segunda linha. Sem ela cabe.
     O que a seta dizia ("isto abre") continua dito pela moldura em volta
     do avatar, e no telefone tocar no proprio rosto para abrir a conta e
     gesto conhecido. No computador ela fica. */
  .px-conta__seta { display: none; }

  /* --- numeros --------------------------------------------------------- */
  /* O rotulo do KPI quebrava em tres linhas ("contas criadas no periodo")
     e era ele, e nao o numero, que fazia o cartao ter 130px. */
  .px-kpi { padding: var(--space-3) var(--space-2); border-radius: var(--radius-md); }
  .px-kpi b { font-size: 1.375rem; }
  /* 12px e 11px, e não 11 e 10: abaixo disso o rótulo do número vira
     mancha cinza, e o número sem rótulo não diz nada. */
  .px-kpi span { font-size: 0.75rem; line-height: 1.25; }
  .px-kpi__nota { font-size: 0.6875rem; line-height: 1.2; }
  .px-kpis, .px-kpis--5 { gap: var(--space-2); }

  /* O KPI COM ICONE e o pior caso: o quadrado de 44px comia 40% da
     largura da coluna, e o rotulo caia em quatro linhas ao lado dele.
     Era o TEXTO, e nao o numero, que fazia o cartao ter 114px. */
  .px-kpi--icone { gap: var(--space-2); }
  .px-kpi__ico { width: 32px; height: 32px; border-radius: var(--radius-sm); }
  .px-kpi__ico svg { width: 17px; height: 17px; }
  .px-kpi--icone b { font-size: 1.25rem; }

  /* --- botoes ---------------------------------------------------------- */
  /* 44px de ALTURA continua; o que sai e a largura gasta e o corpo da
     fonte, que era o do computador. */
  .px-btn, .px-btn-mini, .px-filtro, .px-select, .px-input { min-height: 44px; }
  .px-btn { padding: 10px var(--space-4); font-size: var(--font-sm); }
  .px-btn--grande { padding: var(--space-3) var(--space-4); font-size: var(--font-body); }

  /* 44px de ALTURA também no botão pequeno e no filtro. Eles tinham
     38px para a fileira não virar parede, mas o dedo erra o alvo de 38px,
     e errar o toque é o susto que faz desistir. O visual continua
     compacto: a letra e o recuo lateral seguem pequenos, só a altura
     tocável cresce. */
  .px-btn-mini { min-height: 44px; padding: var(--space-2) var(--space-3); }

  .px-filtro { min-height: 44px; padding: 8px 13px; }

  /* A FILEIRA DE FILTROS ROLA DE LADO, em vez de quebrar em tres linhas.
     Sete filtros em Clientes ocupavam 126px — mais alto que o primeiro
     cartao que eles filtram. E o mesmo desenho da faixa de etiquetas do
     PoliWhats, e a mesma razao: filtro quebrado empurra o DADO para fora
     da tela, e o dado e o que a pessoa veio ver.
     O preco e real: o filtro da ponta direita fica escondido ate alguem
     arrastar. Por isso o pxFiltrosVisivel(), no polinexus.js, traz o
     filtro LIGADO para dentro da vista — sem ele, a pessoa nao veria por
     qual recorte a lista esta passando. */
  .px-filtros {
    gap: 6px; margin-bottom: var(--space-3);
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none;
  }
  .px-filtros::-webkit-scrollbar { display: none; }
  .px-filtros > * { flex: 0 0 auto; }

  /* --- formulario ------------------------------------------------------ */
  /* iOS da zoom no campo quando a fonte e menor que 16px, e depois nao
     desfaz — a tela fica torta pelo resto da sessao. */
  .px-input, .px-select, .px-textarea, input, select, textarea { font-size: 16px; }
  .px-input, .px-select { padding: 10px var(--space-3); }
  .px-label { margin-bottom: 4px; font-size: 0.6875rem; }
  .px-duplo { gap: var(--space-3); }
  .px-dica { margin-top: 4px; }

  /* Cabeçalho de tabela grudento não faz sentido em cartão. */
  .px-tabela th { position: static; }
  .px-tabela--cartoes tbody tr { padding: var(--space-3); margin-bottom: var(--space-2); }
}

/* =====================================================================
   VEGA — gaveta de conversa
   ===================================================================== */

/* O botão vive na barra do topo, ao lado do sino.
   Flutuando embaixo ele disputava o canto com o Reportar e com o rodapé
   de navegação do celular: três coisas empilhadas e nenhuma com
   hierarquia clara. No topo ele fica junto do resto que é "do sistema",
   e não do conteúdo da tela.

   Continua SEPARADO do Reportar: a Vega responde, o Reportar registra o
   que ela não soube. Trocar um pelo outro perderia o canal que avisa
   quando o produto quebrou. */
.px-vega-botao {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 12px 6px 6px; border-radius: var(--radius-pill);
  border: 1px solid rgba(0,212,255,.34);
  background: var(--navy); color: #fff;
  font-family: inherit; font-size: var(--font-xs); font-weight: 800;
  cursor: pointer; white-space: nowrap;
  transition: background var(--fast) var(--ease);
}
.px-vega-botao:hover { background: var(--navy-700, #122B5C); }

.px-vega-selo {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,212,255,.18); border: 1px solid rgba(0,212,255,.45);
  color: var(--cyan);
}
/* 13px dentro de um selo de 22: a estrela precisa de ar em volta, senão
   as pontas encostam na borda do círculo e o desenho vira mancha. */
.px-vega-estrela { width: 13px; height: 13px; display: block; }

.px-vega {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41;
  width: min(420px, 100%);
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--base) var(--ease);
}
.px-vega.on { transform: translateX(0); }

.px-vega__topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--navy); color: #fff;
}
.px-vega__quem { display: flex; align-items: center; gap: var(--space-3); }
.px-vega__quem b { display: block; font-size: var(--font-body-lg); }
.px-vega__quem span { font-size: var(--font-xs); color: #8FA3C8; }
.px-vega__x {
  background: none; border: 0; color: #8FA3C8; font-size: 1.75rem;
  line-height: 1; cursor: pointer; padding: 0 4px;
}
.px-vega__x:hover { color: #fff; }

/* Boas-vindas: a barra de passos, no alto da gaveta.
   Fica ENTRE o cabecalho e as bolhas, e nao no fim, porque e a resposta
   para "quanto falta" — pergunta que se faz antes de comecar, nao
   depois de rolar a conversa inteira. */
.px-vega__passos {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,.10);
  display: flex; align-items: center; gap: var(--space-3);
}
.px-vega__passos span {
  font-size: 11px; font-weight: 800; color: #8FA3C8; white-space: nowrap;
}
.px-vega-barra {
  flex: 1; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.12); overflow: hidden;
}
.px-vega-barra i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-600), var(--cyan));
  transition: width .35s ease;
}

.px-vega__corpo {
  flex: 1; overflow-y: auto; padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}

.px-vega-bolha {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  font-size: var(--font-sm); line-height: 1.6; max-width: 92%;
  white-space: pre-wrap;
}
.px-vega-bolha--eu {
  align-self: flex-end; background: var(--color-primary); color: #fff;
  border-bottom-right-radius: 4px;
}
.px-vega-bolha--vega {
  align-self: flex-start; background: var(--color-bg);
  border: 1px solid var(--color-border); border-bottom-left-radius: 4px;
}

/* O botão de virar chamado nasce dentro da bolha e fica discreto: ele é
   a saída, não a ação principal. */
.px-vega-chamado {
  display: block; margin-top: var(--space-3);
  font-size: var(--font-xs); padding: 5px 10px;
}

.px-vega__pe {
  display: flex; gap: var(--space-2); padding: var(--space-4);
  border-top: 1px solid var(--color-border); background: var(--color-surface);
}
.px-vega__pe input {
  flex: 1; min-width: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 10px 12px; font-family: inherit; font-size: var(--font-sm);
  background: var(--color-bg); color: var(--color-text);
}
.px-vega__pe input:focus { outline: 2px solid var(--color-primary); outline-offset: -1px; }

@media (max-width: 640px) {
  /* No celular a gaveta ocupa a tela toda: 420px numa tela de 375
     deixaria conversa espremida contra a borda. */
  .px-vega { width: 100%; }
  /* Barra do topo é apertada no celular: fica só o selo. */
  .px-vega-botao__txt { display: none; }
  .px-vega-botao { padding: 5px; }
}


/* =====================================================================
   A VEGA GUIANDO, NA TELA DE VERDADE

   Portado da Central do Hunter, onde o mesmo motor roda dentro de uma
   pagina so, com abas. Aqui cada tela e um ARQUIVO, entao a trilha
   atravessa navegacao: ver pxTrilhaIr() no polinexus.js.

   A diferenca entre isto e uma tela de ajuda: ajuda escrita numa pagina
   de ajuda ninguem le. Aqui o balao aponta para o elemento DE VERDADE,
   na tela de verdade, e a pessoa ve ONDE fica a coisa em vez de ler a
   descricao dela.
   ===================================================================== */

/* O recorte. Um retangulo com sombra gigante ao redor: o resto da tela
   escurece e o alvo fica aceso. Nao captura clique, isso e do escudo no
   JavaScript. Aqui e so a luz. */
.px-tour-luz { position: fixed; z-index: 1200; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(11,19,43,.62), 0 0 0 2px var(--blue-600) inset;
  transition: left .38s cubic-bezier(.2,.8,.3,1), top .38s cubic-bezier(.2,.8,.3,1),
              width .38s cubic-bezier(.2,.8,.3,1), height .38s cubic-bezier(.2,.8,.3,1); }
/* Clique no lugar errado: o alvo balanca. Dizer "nao e ai" MOSTRANDO
   onde e vale mais que um aviso escrito. */
.px-tour-luz.bate { animation: pxTourBate .42s ease; }
@keyframes pxTourBate {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); } 45% { transform: translateX(6px); }
  70% { transform: translateX(-3px); }
}

.px-tour-foco { position: relative; z-index: 1201; border-radius: 10px; }

.px-tour-mao { position: fixed; z-index: 1203; font-size: 26px; pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(11,19,43,.45));
  animation: pxTourMao 1.5s ease-in-out infinite; }
@keyframes pxTourMao { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* O TETO DE ALTURA nao e enfeite: e o que garante que os botoes existam.
   Um passo com texto longo numa janela baixa (ou um celular deitado)
   empurraria o "Proximo" para fora da tela, e o escudo bloqueia todo
   clique fora do balao — a pessoa ficaria presa. Aqui o balao rola por
   dentro e o rodape dele fica sempre alcancavel. */
.px-tour-balao { position: fixed; z-index: 1202; width: min(340px, 92vw);
  max-height: calc(100vh - 24px); overflow-y: auto;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px; box-shadow: 0 18px 44px -14px rgba(11,19,43,.42); padding: 15px 16px; }
.px-tour-vega { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.px-tour-av { width: 24px; height: 24px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; font-size: 13px;
  background: linear-gradient(140deg, var(--blue-50), #E6F0FB); border: 1px solid var(--slate-100); }
.px-tour-quem { font-size: 11.5px; font-weight: 700; color: var(--blue-600); letter-spacing: .02em; }
.px-tour-cont { margin-left: auto; font-size: 10.5px; font-weight: 700;
  color: var(--color-text-muted); background: var(--slate-50);
  border-radius: 999px; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.px-tour-topo { font-size: 14.5px; font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
.px-tour-txt { font-size: 13px; line-height: 1.62; color: var(--color-text-muted); }
.px-tour-txt b { color: var(--color-text); }
.px-tour-faca { margin-top: 10px; background: var(--blue-50); border: 1px solid var(--slate-100);
  border-radius: 10px; padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: var(--navy-600); }
.px-tour-pe { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.px-tour-b { border: 1px solid var(--blue-600); background: var(--blue-600); color: #fff;
  border-radius: 9px; padding: 7px 13px; font-family: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; min-height: 34px; }
.px-tour-b:hover { background: var(--blue-700); border-color: var(--blue-700); }
.px-tour-b.sec { background: var(--color-surface); color: var(--color-text-muted);
  border-color: var(--color-border); }
.px-tour-b.sec:hover { color: var(--color-text); border-color: var(--slate-200); }
.px-tour-b:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }

/* O convite entre telas. Canto inferior, sobe e some sozinho.
   z ABAIXO do modal de proposito: sugestao flutuante nunca pode ficar
   por cima de um dialogo e roubar o clique. O guia ja terminou quando
   ela aparece, entao nao disputa com o balao. */
.px-vg-convite { position: fixed; z-index: 900; left: 16px; bottom: 16px;
  max-width: min(420px, 92vw); display: flex; align-items: center; gap: 11px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 3px solid var(--blue-600); border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 18px 44px -20px rgba(11,19,43,.55);
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.3,1); }
.px-vg-convite.on { opacity: 1; transform: none; }
.px-vg-av { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; display: flex;
  align-items: center; justify-content: center; font-size: 17px;
  background: linear-gradient(140deg, var(--blue-50), #E6F0FB); border: 1px solid var(--slate-100); }
.px-vg-txt { flex: 1; min-width: 0; }
.px-vg-txt b { display: block; font-size: 13.5px; font-weight: 700;
  color: var(--color-text); line-height: 1.3; }
.px-vg-txt small { display: block; font-size: 11.5px; color: var(--color-text-muted);
  line-height: 1.45; margin-top: 2px; }
.px-vg-sim { flex: 0 0 auto; border: 0; border-radius: 10px; padding: 9px 14px;
  background: var(--blue-600); color: #fff; font-family: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; min-height: 38px; }
.px-vg-sim:hover { background: var(--blue-700); }
.px-vg-nao { flex: 0 0 auto; border: 0; background: transparent; color: var(--color-text-subtle);
  font-size: 16px; cursor: pointer; padding: 6px 4px; line-height: 1; }
.px-vg-nao:hover { color: var(--color-text); }

/* O botao na barra do topo. Pulsa devagar enquanto ha tela por conhecer,
   e para de pulsar quando a trilha acaba. */
.px-tour-botao { display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); border-radius: 10px; padding: 7px 12px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  min-height: 36px; white-space: nowrap; }
.px-tour-botao:hover { border-color: var(--blue-600); color: var(--blue-600); }
.px-tour-botao--falta { background: var(--blue-600); border-color: var(--blue-600); color: #fff;
  animation: pxVgPulsa 3.4s ease-in-out infinite; }
.px-tour-botao--falta:hover { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
@keyframes pxVgPulsa {
  0%,100% { box-shadow: 0 0 0 0 rgba(13,71,255,.42); }
  55% { box-shadow: 0 0 0 9px rgba(13,71,255,0); }
}

@media (max-width: 760px) {
  .px-vg-convite { left: 10px; right: 10px; bottom: 10px; max-width: none; }
  /* min-height aqui também: a regra do botão vem depois do bloco do
     celular na folha e, com o mesmo peso, ganhava com os seus 36px. */
  .px-tour-botao { padding: 5px 9px; font-size: 11.5px; min-height: 44px; min-width: 44px; justify-content: center; }
  .px-tour-botao__txt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .px-tour-luz, .px-tour-mao, .px-tour-botao--falta, .px-vg-convite {
    animation: none !important; transition: none !important; }
}

/* =====================================================================
   O BLOCO DE NOTAS (migração 096), a gaveta da direita
   ===================================================================== */
.px-notas {
  position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 100%;
  background: var(--color-surface); box-shadow: var(--shadow-lg);
  transform: translateX(105%); transition: transform var(--fast, .18s) var(--ease, ease);
  z-index: 70; display: flex; flex-direction: column;
}
.px-notas.on { transform: translateX(0); }
.px-notas__topo {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border);
}
.px-notas__topo b { font-size: var(--font-body-lg); }
.px-notas__salvo { flex: 1; font-size: var(--font-xs); color: var(--color-text-muted); }
.px-notas__x {
  background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer;
  color: var(--color-text-muted); padding: 0 4px;
}
.px-notas__corpo { flex: 1; overflow-y: auto; padding: var(--space-4); }
.px-nt-aviso {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--font-sm); margin-bottom: var(--space-3);
}
.px-nt-aviso b { flex: 1; }
.px-nt-rot {
  font-size: var(--font-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: 6px;
}
.px-nt-antes {
  border: 1px solid var(--color-border); border-left: 3px solid var(--warning);
  border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: var(--space-3);
}
.px-nt-abas {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border); padding-bottom: 6px; margin-bottom: var(--space-2);
}
.px-nt-aba {
  border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text-muted);
  border-radius: 9px 9px 0 0; padding: 5px 12px; font: inherit; font-size: var(--font-xs);
  font-weight: 700; cursor: pointer;
}
.px-nt-aba.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.px-nt-aba--mais { font-size: var(--font-sm); }
.px-nt-vao { flex: 1; }
.px-nt-onde { font-size: var(--font-xs); color: var(--color-text-muted); margin-bottom: 6px; }
.px-nt-fica { color: var(--success); }
.px-nt-barra { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.px-nt-sep { width: 1px; align-self: stretch; background: var(--color-border); margin: 0 4px; }
.px-nt-cor { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--color-border); cursor: pointer; padding: 0; }
.px-nt-ed {
  min-height: 220px; max-height: 44vh; overflow: auto;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 10px 12px; background: var(--color-bg); color: var(--color-text);
  font-size: var(--font-sm); line-height: 1.55; outline: none;
}
.px-nt-ed:focus { border-color: var(--color-primary); }
.px-nt-ed[contenteditable="false"] { opacity: .85; }
.px-nt-itens { margin-top: var(--space-3); }
.px-nt-novo { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.px-nt-novo .px-input { flex: 1; min-width: 0; padding: 7px 10px; }
.px-nt-item { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; font-size: var(--font-sm); }
.px-nt-item input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; }
.px-nt-item span { flex: 1; min-width: 0; outline: none; }
.px-nt-item small { flex: 0 0 auto; font-size: var(--font-xs); color: var(--color-text-muted); }
.px-nt-item--feito span { text-decoration: line-through; color: var(--color-text-muted); }
.px-nt-lixo { background: none; border: 0; color: var(--color-text-muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }
.px-nt-dia { display: flex; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--color-border); font-size: var(--font-sm); }
.px-nt-dia > div { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .px-notas { width: 100%; }
  .px-nt-ed { max-height: 36vh; }
}

/* =====================================================================
   O AVISO DO SISTEMA (pxAviso), no lugar da janela do navegador.
   Embaixo e centralizado, onde o polegar alcança o Fechar; acima da
   barra do celular; um embaixo do outro quando chegam juntos.
   ===================================================================== */
.px-avisos {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 9000;
  display: flex; flex-direction: column; gap: var(--space-2);
  width: min(560px, calc(100% - 24px)); pointer-events: none;
}
.px-aviso {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--slate-900, #0B132B); color: #fff;
  border-radius: var(--radius-md, 12px); padding: var(--space-3) var(--space-4);
  box-shadow: 0 10px 30px rgba(11, 19, 43, .25);
  animation: px-aviso-entra .18s var(--ease, ease-out);
}
.px-aviso p { margin: 0; flex: 1; font-size: var(--font-body); line-height: 1.4; }
.px-aviso--erro { background: #7A1D1D; }
.px-aviso--ok   { background: #14532D; }
.px-aviso__fechar {
  flex: 0 0 auto; min-height: 44px; padding: 0 var(--space-3);
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--radius-sm); font-weight: 700; font-size: var(--font-sm); cursor: pointer;
}

/* A resposta embaixo do item do menu da conta ("vence em 12 dias"). */
.px-conta__nota { display: block; font-size: var(--font-xs); color: var(--color-text-muted); font-weight: 500; }

/* A janela do Pix (19/09/2026). */
.px-pix { max-width: 420px; text-align: center; }
.px-pix__valor { font-size: 2rem; font-weight: 900; color: var(--color-text); margin-top: var(--space-2); }
.px-pix__nota { font-size: var(--font-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.px-pix__qr { width: 200px; height: 200px; image-rendering: pixelated; border-radius: var(--radius-sm); }
.px-pix .px-label { text-align: left; }
.px-pix__codigo { font-family: var(--fonte-mono, monospace); font-size: var(--font-xs); word-break: break-all; }
/* A faixa do acesso de suporte (19/09/2026): no alto, fixa, amarela, com
   a volta ao painel sempre a vista. */
.px-suporte-faixa {
  position: sticky; top: 0; z-index: 9500;
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) var(--space-4);
  background: #FFF4D6; color: #5C3D00; border-bottom: 1px solid #F0D48A;
  font-size: var(--font-sm); line-height: 1.4;
}
.px-suporte-faixa > span { flex: 1 1 240px; min-width: 0; }
.px-suporte-faixa__btn {
  flex: 0 0 auto; min-height: 44px; padding: 0 var(--space-4); border: 0;
  border-radius: var(--radius-sm); background: #8A5A00; color: #fff;
  font: inherit; font-weight: 800; cursor: pointer;
}
.px-suporte-faixa__btn:hover { background: #734B00; }

/* O botao do aviso (Desfazer): branco cheio, porque e a saida que a
   pessoa procura logo depois de excluir. */
.px-aviso__acao {
  flex: 0 0 auto; min-height: 44px; padding: 0 var(--space-4);
  background: #fff; color: var(--slate-900, #0B132B); border: 0;
  border-radius: var(--radius-sm); font-weight: 800; font-size: var(--font-sm); cursor: pointer;
}
/* No celular a barra de baixo mora ali: o aviso sobe o bastante para
   não cobrir Início, Contatos e o resto enquanto está na tela. */
@media (max-width: 640px) {
  .px-avisos { bottom: calc(58px + 12px + env(safe-area-inset-bottom)); }
}
@keyframes px-aviso-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .px-aviso { animation: none; } }

/* =====================================================================
   A PERGUNTA DO SISTEMA (pxConfirmar, pxPedir), no lugar do confirm() e
   do prompt() do navegador. Acima de qualquer modal aberto, porque ela
   quase sempre nasce de dentro de um (o Excluir fica no formulário), e
   abaixo do aviso, que pode chegar enquanto ela está aberta.
   ===================================================================== */
.px-pergunta { z-index: 8000; }
.px-pergunta .px-modal { max-width: 440px; }
.px-pergunta h2 { font-size: 1.125rem; line-height: 1.35; margin-bottom: var(--space-2); }
.px-pergunta__texto { color: var(--color-text-muted); font-size: var(--font-body); line-height: 1.5; margin: 0 0 var(--space-3); white-space: pre-line; }
.px-pergunta .px-input, .px-pergunta .px-textarea { width: 100%; }
.px-pergunta__ver { display: flex; align-items: center; gap: 6px; margin-top: var(--space-2);
  font-size: var(--font-sm); color: var(--color-text-muted); min-height: 44px; cursor: pointer; }
.px-pergunta__erro { color: var(--danger); font-size: var(--font-sm); font-weight: 600; margin: var(--space-2) 0 0; min-height: 1.2em; }
.px-pergunta .px-modal-acoes .px-btn { min-height: 44px; }
/* O botão que apaga é vermelho e cheio: a cor avisa, e o texto
   ("Excluir contato") diz o quê. Cor sozinha não bastaria. */
.px-btn--apagar { background: var(--danger); color: #fff; border-color: var(--danger); }
.px-btn--apagar:hover { background: #9B1C1C; }
@media (max-width: 640px) {
  .px-pergunta { align-items: flex-end; padding: 0; }
  .px-pergunta .px-modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-width: none;
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); }
}