/* =========================================================
   BPO NEXO — DASHBOARD DO PORTAL DO CLIENTE (seção #portal)

   Tela de "Visão geral" ilustrativa no padrão do Design System
   Phoenix (design-system/phoenix/design-system.html): cartões
   brancos com borda de 1px e raio de .5rem, sombra rasa, rótulos em
   cinza-azulado, badges "phoenix" (fundo suave + borda + texto
   forte), tabela com cabeçalho em caixa-alta e barras de progresso
   finas. O tom de destaque é o verde da logo (#50aa46).

   A tela é sempre clara, nos dois temas do site — como os cartões
   do Phoenix em volta do gráfico do Hero. Carregado depois de
   noema.css. Gráficos em assets/js/portal-cliente.js.
   ========================================================= */
.pc {
  /* Tokens do Phoenix (theme.min.css, :root) */
  --pc-corpo: #f5f7fa;            /* --phoenix-body-bg */
  --pc-card: #ffffff;             /* --phoenix-emphasis-bg */
  --pc-realce: #eff2f6;           /* --phoenix-body-highlight-bg */
  --pc-borda: #e3e6ed;            /* --phoenix-secondary-bg */
  --pc-borda-forte: #cbd0dd;      /* --phoenix-border-color */
  --pc-texto-forte: #141824;      /* --phoenix-emphasis-color */
  --pc-texto: #31374a;            /* --phoenix-body-color */
  --pc-texto-2: #525b75;          /* --phoenix-tertiary-color */
  --pc-texto-3: #8a94ad;          /* --phoenix-quaternary-color */
  --pc-sombra: 0 2px 4px -2px rgba(36, 40, 46, 0.08);   /* --phoenix-box-shadow */
  /* Destaque: verdes da logo e o navy do "BPO" */
  --pc-verde: #50aa46;
  --pc-verde-claro: #7bbf3d;
  --pc-verde-texto: #2f7a28;
  --pc-navy: #0c2036;
  /* Badges phoenix (bg-subtle / text-emphasis / border-subtle) */
  --pc-sucesso-bg: #e3f4dd;  --pc-sucesso-tx: #2f7a28;  --pc-sucesso-bd: #a9d79c;
  --pc-alerta-bg: #ffefca;   --pc-alerta-tx: #bc3803;   --pc-alerta-bd: #ffcc85;
  --pc-info-bg: #c7ebff;     --pc-info-tx: #005585;     --pc-info-bd: #60c6ff;
  --pc-neutro-bg: #eff2f6;   --pc-neutro-tx: #525b75;   --pc-neutro-bd: #cbd0dd;

  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--pc-corpo);
  border: 1px solid var(--pc-borda-forte);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 30px 70px -30px rgba(3, 25, 46, 0.45),
              0 12px 24px -12px rgba(3, 25, 46, 0.18);
  color: var(--pc-texto);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: left;
  color-scheme: light;
}
.pc .lucide { width: 16px; height: 16px; flex: none; }

/* --- Brilho atrás da janela: elipse no verde da logo, em degradê
   radial com transparência e blur, para dar profundidade sem
   competir com os dados --- */
.portal__mockup::before,
.portal__mockup::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
.portal__mockup::before {
  inset: -8% -4% -10%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--pc-verde, #50aa46) 26%, transparent),
    color-mix(in srgb, #7bbf3d 10%, transparent) 55%,
    transparent 100%);
  filter: blur(36px);
  opacity: 0.85;
}
.portal__mockup::after {
  inset: 18% 22% 6%;
  background: radial-gradient(closest-side, rgba(80, 170, 70, 0.22), transparent 70%);
  filter: blur(48px);
  animation: pcBrilho 7s ease-in-out infinite;
}
@keyframes pcBrilho {
  0%, 100% { opacity: 0.6; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* --- Janela (barra do navegador) --- */
.pc__janela {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: #e9edf3;
  border-bottom: 1px solid var(--pc-borda-forte);
}
.pc__pontos { display: inline-flex; gap: 6px; }
.pc__pontos i { width: 10px; height: 10px; border-radius: 50%; background: #cbd0dd; }
.pc__pontos i:nth-child(1) { background: #f6766a; }
.pc__pontos i:nth-child(2) { background: #f5c04e; }
.pc__pontos i:nth-child(3) { background: #62c554; }
.pc__url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 380px;
  margin-inline: auto;
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--pc-card);
  border: 1px solid var(--pc-borda);
  font-size: 0.7rem;
  color: var(--pc-texto-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc__url .lucide { width: 12px; height: 12px; color: var(--pc-verde-texto); }

/* --- Barra superior (navbar-top do Phoenix) --- */
.pc__barra {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  background: var(--pc-card);
  border-bottom: 1px solid var(--pc-borda);
}
.pc__marca { display: flex; align-items: center; gap: 10px; flex: none; width: 196px; }
.pc__marca img { border-radius: 50%; }
.pc__marca b {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--pc-navy);
}
.pc__marca em { font-style: normal; color: var(--pc-verde); }
.pc__marca small { display: block; font-size: 0.66rem; color: var(--pc-texto-3); }

/* .search-box: campo com ícone à esquerda e atalho à direita */
.pc__busca {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  max-width: 420px;
  padding: 7px 10px 7px 12px;
  border-radius: 6px;
  background: var(--pc-card);
  border: 1px solid var(--pc-borda-forte);
  color: var(--pc-texto-3);
  white-space: nowrap;
  overflow: hidden;
}
.pc__busca span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.pc__busca kbd {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--pc-realce);
  border: 1px solid var(--pc-borda);
  font-family: inherit;
  font-size: 0.64rem;
  color: var(--pc-texto-2);
}

.pc__acoes { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.pc__sinc {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.7rem;
  color: var(--pc-texto-2);
  white-space: nowrap;
}
.pc__pulso {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pc-verde);
}
.pc__pulso::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--pc-verde);
  animation: pcPulso 2.4s ease-out infinite;
}
@keyframes pcPulso {
  from { opacity: 0.8; transform: scale(0.6); }
  to { opacity: 0; transform: scale(1.8); }
}
.pc__sinc b { font-weight: 700; color: var(--pc-texto); }
.pc__sinc .lucide { width: 12px; height: 12px; }
.pc__sinc-ok { color: var(--pc-verde); }
.pc__sinc-parcial { color: #e5780b; }
.pc__sinc-sep { color: var(--pc-texto-3); }
/* "Atualizações:" antes das etiquetas, discreto (como na barra do sistema) */
.pc__sinc-rotulo { color: var(--pc-texto-3); white-space: nowrap; }
/* o "Parcial" é o Sync Parcial (link), como na barra do sistema */
.pc__sinc-link { color: var(--pc-verde-texto); text-decoration: underline; text-decoration-color: rgba(80, 170, 70, 0.45); text-underline-offset: 3px; }
.pc__sinc-link b { color: inherit; }
.pc__icone-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--pc-texto-2);
}
.pc__aviso {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fa3b1d;
  box-shadow: 0 0 0 2px var(--pc-card);
}
.pc__usuario { display: flex; align-items: center; gap: 10px; }
.pc__avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pc-navy);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}
.pc__usuario-nome b { display: block; font-size: 0.75rem; color: var(--pc-texto-forte); line-height: 1.2; }
.pc__usuario-nome small { display: block; font-size: 0.66rem; color: var(--pc-texto-3); }

/* --- Corpo: só o conteúdo (o mockup não mostra o menu lateral) --- */
.pc__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.pc__conteudo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 20px 24px 24px;
}

/* Cabeçalho da página + seletor de período (btn-group do Phoenix) */
.pc__cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pc__titulo {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--pc-texto-forte);
}
.pc__subtitulo { margin: 4px 0 0; font-size: 0.75rem; color: var(--pc-texto-3); }
.pc__periodos {
  display: inline-flex;
  padding: 3px;
  border-radius: 8px;
  background: var(--pc-card);
  border: 1px solid var(--pc-borda-forte);
}
.pc__periodos button {
  padding: 5px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pc-texto-2);
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}
.pc__periodos button:hover { color: var(--pc-texto-forte); background: var(--pc-realce); }
.pc__periodos button.is-ativo { background: var(--pc-navy); color: #fff; }
.pc__periodos button:focus-visible { outline: 2px solid var(--pc-verde); outline-offset: 1px; }

/* Cabeçalho em fundo azul — espelho da Visão Geral do Painel (css/visao-geral.css, .vg-cabecalho): o
   degradê do "Today $764.39" do Falcon, título e empresa em branco, período em vidro translúcido e o
   período escolhido em branco cheio. */
.pc__cabecalho {
  align-items: center;
  padding: 12px 16px;
  border-radius: 8px;
  background-image: linear-gradient(-45deg, #014ba7, #0183d0);
  box-shadow: 0 8px 20px rgba(1, 75, 167, 0.18);
}
.pc__cabecalho .pc__titulo { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
.pc__cabecalho .pc__subtitulo { color: rgba(255, 255, 255, 0.85); }
.pc__cabecalho .pc__periodos { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); }
.pc__cabecalho .pc__periodos button { color: rgba(255, 255, 255, 0.9); }
.pc__cabecalho .pc__periodos button:hover { color: #fff; background: rgba(255, 255, 255, 0.18); }
.pc__cabecalho .pc__periodos button.is-ativo { background: #fff; color: #014ba7; }
.pc__cabecalho .pc__periodos button:focus-visible { outline-color: #fff; }

/* --- Cartão base (.card do Phoenix) --- */
.pc__card {
  position: relative;
  min-width: 0;
  padding: 16px 18px;
  border-radius: 8px;
  background: var(--pc-card);
  border: 1px solid var(--pc-borda);
  box-shadow: var(--pc-sombra);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.pc__card:hover {
  border-color: var(--pc-borda-forte);
  box-shadow: 0 10px 24px -14px rgba(36, 40, 46, 0.28);
}
/* Cabeçalho no padrão dos cards do Painel ("Faixas de atraso": a faixa de cima com a borda de baixo e o
   título), de ponta a ponta do card (anula o padding dele); o link opcional à direita */
.pc__card-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: -16px -18px 12px; padding: 8px 18px; min-height: 2.4rem;
  border-bottom: 1px solid var(--pc-borda);
}
/* o da Conciliação, sobre o degradê azul (o card não tem padding: o cabeçalho também não recua) */
.pc__card-cabecalho--escuro { margin: 0; border-bottom-color: rgba(255, 255, 255, 0.15); }
.pc__card-cabecalho--escuro .pc__card-titulo { color: #fff; }
.pc__card-titulo {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pc-texto-forte);
}
/* no corpo, abaixo do cabeçalho: o subtítulo à esquerda e o que acompanha (totais, busca) à direita */
.pc__card-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pc__card-sub { margin: 0; font-size: 0.7rem; color: var(--pc-texto-3); }
.pc__card-sub--corpo { margin-bottom: 12px; }
.pc__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #2c7be5; /* o azul de link do sistema, o mesmo da Visão Geral do Painel */
  white-space: nowrap;
}
.pc__link .lucide { width: 14px; height: 14px; }

/* --- KPIs --- */
.pc__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* Cards de indicadores no modelo "New customers", "Total orders", "Top coupons" e "Paying vs non paying"
   do Phoenix (os mesmos da Visão Geral do Painel): cabeçalho padrão com o selo, o subtítulo e o valor à
   direita, um mini gráfico no lugar do ícone e a legenda em linhas (bullet-item: 1rem × 0.5rem) */
.pc__kpi { display: flex; flex-direction: column; }
.pc__kpi:hover { transform: translateY(-2px); }
/* o selo do título: o ícone e o texto na cor, sem fundo — o mesmo da Visão Geral do Painel */
.pc__kpi-selo {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; vertical-align: 1px;
  font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.pc__kpi-selo .lucide { width: 11px; height: 11px; stroke-width: 2.5; }
.pc__kpi-selo--sucesso { color: #00a15d; }
.pc__kpi-selo--perigo { color: #e63757; }
/* sobre o degradê azul do Saldo em contas: branco */
.pc__kpi:first-child .pc__kpi-selo { color: #fff; }
.pc__kpi-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* os valores em destaque, maiores (os mesmos da Visão Geral do Painel) */
.pc__kpi-valor { font-family: var(--font-heading); font-size: 1.5rem; line-height: 1.15; font-weight: 700; color: var(--pc-texto-forte); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* retangular: o mini gráfico e a legenda lado a lado (o card fica baixo); em card estreito, um embaixo
   do outro — container query na largura do próprio card */
.pc__kpi { container-type: inline-size; }
.pc__kpi-corpo { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; margin-top: 8px; }
.pc__kpi-grafico { flex: 0 0 42%; width: 42%; }
.pc__kpi-grafico--linha { flex: 1 1 auto; width: 100%; height: 95px; }
/* Saldo em contas no "Today $764.39" do Falcon: o card no degradê azul (o mesmo da Conciliação), o
   cabeçalho e os textos em branco, o valor de antes esmaecido */
.pc__kpi:first-child { background: linear-gradient(-45deg, #014ba7, #0183d0); border-color: transparent; color: #fff; }
.pc__kpi:first-child .pc__card-cabecalho { border-bottom-color: rgba(255, 255, 255, 0.15); }
.pc__kpi:first-child .pc__card-titulo { color: #fff; }
.pc__kpi-hoje h4 { margin: 0; font-family: var(--font-heading); font-size: 1.5rem; line-height: 1.15; font-weight: 600; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc__kpi-hoje p { margin: 0; font-size: 0.68rem; font-weight: 600; color: #fff; }
.pc__kpi-hoje p span { opacity: 0.5; }
/* "Doughnut Chart" do Falcon (a receber e a pagar): o anel ocupa de 40% a 70% do raio */
.pc__kpi-grafico--rosca { height: 105px; }
/* "Pie Multiple Chart" do Falcon (resultado): as duas pizzas lado a lado, com o nome embaixo de cada uma */
.pc__kpi-grafico--pizzas { height: 105px; }
.pc__kpi-legenda { flex: 1 1 auto; min-width: 0; }
@container (max-width: 380px) {
  .pc__kpi-corpo { flex-direction: column; align-items: stretch; gap: 8px; }
  .pc__kpi-grafico { flex: none; width: 100%; }
}
.pc__kpi-linha { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; font-weight: 600; color: var(--pc-texto); }
.pc__kpi-linha + .pc__kpi-linha { margin-top: 5px; }
.pc__kpi-linha b { font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc__kpi-rotulo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc__kpi-marcador { flex: 0 0 auto; width: 1rem; height: 0.5rem; border-radius: 2px; }
.pc__kpi-marcador--receita { background: #00d27a; }
.pc__kpi-marcador--receita-clara { background: #99edca; }
/* as vencidas (em aberto): o tom "mais forte" da cor do card — verde no a receber, vermelho no a pagar */
.pc__kpi-marcador--vencidas-receita { background: #085c3e; }
.pc__kpi-marcador--vencidas-despesa { background: #762438; }
.pc__kpi-marcador--receita-0 { background: #00894f; }
.pc__kpi-marcador--receita-1 { background: #00d27a; }
.pc__kpi-marcador--receita-2 { background: #99edca; }
.pc__kpi-marcador--receita-3 { background: rgba(0, 210, 122, 0.35); }
.pc__kpi-marcador--despesa { background: #e63757; }
.pc__kpi-marcador--despesa-clara { background: #f5afbc; }
.pc__kpi-marcador--despesa-0 { background: #b82c46; }
.pc__kpi-marcador--despesa-1 { background: #e63757; }
.pc__kpi-marcador--despesa-2 { background: #f5afbc; }

/* .badge-phoenix */
.pc__badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid;
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pc__badge .lucide { width: 11px; height: 11px; }
.pc__badge--sucesso { background: var(--pc-sucesso-bg); color: var(--pc-sucesso-tx); border-color: var(--pc-sucesso-bd); }
.pc__badge--alerta { background: var(--pc-alerta-bg); color: var(--pc-alerta-tx); border-color: var(--pc-alerta-bd); }
.pc__badge--info { background: var(--pc-info-bg); color: var(--pc-info-tx); border-color: var(--pc-info-bd); }
.pc__badge--neutro { background: var(--pc-neutro-bg); color: var(--pc-neutro-tx); border-color: var(--pc-neutro-bd); }

/* .progress fina do Phoenix; a barra cresce ao entrar em cena */
.pc__progresso {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--pc-realce);
  overflow: hidden;
}
.pc__progresso > span {
  display: block;
  height: 100%;
  width: var(--p);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pc-verde), var(--pc-verde-claro));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.pc.is-visivel .pc__progresso > span { transform: scaleX(1); }
.pc__progresso--neutro > span { background: linear-gradient(90deg, #8a94ad, #b6bdcf); }
.pc__progresso--alerta > span { background: linear-gradient(90deg, #e5780b, #ffb34d); }

/* --- Linhas de cartões --- */
.pc__linha { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 16px; }
/* Fluxo de caixa, Receitas e Despesas por categoria numa linha só (como na Visão Geral) */
.pc__linha--principal { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
/* tela média: o fluxo na largura toda e as duas categorias embaixo */
@media (max-width: 1539.98px) {
  .pc__linha--principal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc__linha--principal > .pc__fluxo { grid-column: 1 / -1; }
}

/* Fluxo de caixa */
.pc__resumo { display: flex; gap: 6px; margin: 0 -8px 0 0; }
/* Cada total é um botão que liga/desliga a série no gráfico */
.pc__resumo div {
  min-width: 0;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s, opacity 0.2s;
}
.pc__resumo div:hover { background: var(--pc-realce); }
.pc__resumo div:focus-visible { outline: 2px solid var(--pc-verde); outline-offset: 1px; }
.pc__resumo div.is-off { opacity: 0.4; }
.pc__resumo div.is-off dd { text-decoration: line-through; }
.pc__resumo dt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--pc-texto-3);
}
.pc__resumo dd {
  margin: 2px 0 0;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--pc-texto-forte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pc__ponto { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
/* cores do "Mixed chart" do Falcon (as mesmas do gráfico e da Visão Geral do Painel) */
.pc__ponto--entrada { background: #00d27a; }
.pc__ponto--saida { background: #e63757; }
.pc__ponto--resultado { width: 10px; height: 3px; border-radius: 2px; background: #f5803e; }
.pc__fluxo { display: flex; flex-direction: column; }
.pc__grafico--fluxo { flex: 1 1 auto; height: 290px; min-height: 290px; margin: 0 -6px -6px; }

/* Despesas por categoria */
.pc__despesas { display: flex; flex-direction: column; }
/* Despesas por categoria — "Marketing Expenses" do Falcon (o mesmo da Visão Geral do Painel) */
.pc__despesas-grafico { position: relative; }
.pc__grafico--rosca { height: 210px; }
.pc__despesas-centro { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.pc__despesas-circulo {
  width: 5.75rem; height: 5.75rem; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075); text-align: center; padding: 0 8px;
}
.pc__despesas-circulo b { white-space: nowrap; font-size: 0.95rem; color: var(--pc-texto-forte); font-variant-numeric: tabular-nums; }
.pc__despesas-circulo small { font-size: 10px; color: var(--pc-texto-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc__grupos-despesa { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 6px; }
.pc__grupo-despesa { border: 1px solid #e3e6ed; border-radius: 0.5rem; padding: 10px; min-width: 0; }
.pc__grupo-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pc__grupo-topo h6 { margin: 0; font-size: 12px; font-weight: 700; color: var(--pc-texto-forte); }
/* o percentual de cada grupo/categoria no total do card, antes do valor (o mesmo da Visão Geral do Painel) */
.pc__pct { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--pc-texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc__pct + b { margin-left: 6px !important; }
.pc__grupo-topo b { margin-left: auto; font-size: 11px; color: var(--pc-texto-forte); font-variant-numeric: tabular-nums; }
.pc__grupo-despesa ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.pc__grupo-despesa li { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; padding: 2px 4px; border-radius: 4px; transition: background 0.15s ease; }
.pc__grupo-despesa li.is-destaque { background: var(--pc-realce); }
.pc__grupo-nome { color: var(--pc-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pc__grupo-despesa li b { margin-left: auto; color: var(--pc-texto-forte); font-variant-numeric: tabular-nums; }
.pc__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }

/* Próximos vencimentos (.table do Phoenix) */
.pc__vencimentos { padding-bottom: 6px; }
.pc__tabela { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
.pc__tabela th {
  padding: 8px 8px;
  border-bottom: 1px solid var(--pc-borda-forte);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--pc-texto-3);
  white-space: nowrap;
}
.pc__tabela td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--pc-borda);
  color: var(--pc-texto-2);
  vertical-align: middle;
}
.pc__tabela tr:last-child td { border-bottom: 0; }
.pc__tabela tbody tr { transition: background-color 0.2s; }
.pc__tabela tbody tr:hover { background: var(--pc-corpo); }
.pc__tabela td b { display: block; font-weight: 700; color: var(--pc-texto-forte); }
.pc__tabela td small { display: block; font-size: 0.66rem; color: var(--pc-texto-3); }
.pc__tabela th:first-child,
.pc__tabela td:first-child { padding-left: 0; }
.pc__tabela th:last-child,
.pc__tabela td:last-child { padding-right: 0; }
.pc__num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--pc-texto-forte) !important; font-weight: 700; }

/* Conciliação bancária no modelo "Users online right now" do Falcon (o mesmo da Visão Geral do Painel):
   degradê azul, o % conciliado em destaque e a tabela das contas ocupando o resto do card (a lista rola
   por dentro, sem mudar a altura) */
.pc__card.pc__conciliacao {
  display: flex; flex-direction: column; padding: 0; color: #fff;
  background: linear-gradient(-45deg, #014ba7, #0183d0); border-color: transparent;
}
.pc__conciliacao-topo { padding: 12px 18px 12px; }
.pc__conciliacao-numero { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 400; line-height: 1.1; color: #fff; }
.pc__conciliacao-sub { margin: 2px 0 0; font-size: 0.64rem; color: rgba(255, 255, 255, 0.8); }
.pc__conciliacao-lista {
  display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 0.5rem; overflow: hidden; font-size: 0.7rem;
}
.pc__conciliacao-linha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 6.5rem; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #fff;
}
.pc__conciliacao-linha > :nth-child(n + 2) { text-align: right; }
.pc__conciliacao-linha--cabecalho { font-weight: 600; background: rgba(255, 255, 255, 0.1); border-bottom-color: rgba(255, 255, 255, 0.15); }
.pc__bancos { flex: 1 1 0; min-height: 8rem; margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.pc__banco:last-child { border-bottom: 0; }
.pc__banco-conta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pc__banco-conta img { flex: none; border-radius: 4px; background: #fff; }
.pc__banco-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pc__banco-participacao { font-weight: 600; white-space: nowrap; }
.pc__banco-saldo { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc__conciliacao-rodape { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 10px 18px; font-size: 0.66rem; font-weight: 600; }
.pc__conciliacao-rodape .lucide { width: 12px; height: 12px; }
.pc__nota {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: auto 0 0;
  padding-top: 12px;
  font-size: 0.68rem;
  color: var(--pc-texto-3);
}
.pc__nota .lucide { width: 13px; height: 13px; color: var(--pc-verde); }

/* --- Entrada: os cartões sobem em cascata quando a tela entra em cena --- */
.js .pc__kpi,
.js .pc__linha > .pc__card {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s, box-shadow 0.3s;
}
.js .pc.is-visivel .pc__kpi,
.js .pc.is-visivel .pc__linha > .pc__card { opacity: 1; transform: none; }
.js .pc.is-visivel .pc__kpi:hover { transform: translateY(-2px); }
.pc__kpi:nth-child(2) { transition-delay: 0.06s; }
.pc__kpi:nth-child(3) { transition-delay: 0.12s; }
.pc__kpi:nth-child(4) { transition-delay: 0.18s; }
.pc__linha--principal > .pc__card { transition-delay: 0.22s; }
.pc__linha:not(.pc__linha--principal) > .pc__card { transition-delay: 0.3s; }
.js .pc.is-visivel .pc__card:hover { transition-delay: 0s; }

/* =========================================================
   RESPONSIVIDADE
   ========================================================= */
@media (max-width: 1399.98px) {
  /* a barra do mockup é estreita: a última sincronização fica só a partir de 1400px */
  .pc__sinc { display: none; }
}

@media (max-width: 1199.98px) {
  .pc__marca { width: 164px; }
  .pc__usuario-nome { display: none; }
  .pc__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023.98px) {
  .pc__marca { width: auto; }
  .pc__linha { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
  .pc { border-radius: 10px; }
  .pc__janela { padding: 8px 12px; gap: 10px; }
  .pc__barra { gap: 12px; padding: 10px 14px; }
  .pc__busca,
  .pc__sinc { display: none; }
  .pc__conteudo { padding: 16px 14px 18px; gap: 12px; }
  .pc__cabecalho { flex-direction: column; align-items: stretch; }
  .pc__periodos { align-self: flex-start; }
  .pc__kpis { gap: 10px; }
  .pc__card { padding: 14px; }
  .pc__card-cabecalho { margin: -14px -14px 12px; padding: 8px 14px; }
  .pc__card-cabecalho--escuro { margin: 0; }
  .pc__card-topo { flex-direction: column; align-items: flex-start; }
  .pc__resumo { gap: 16px; flex-wrap: wrap; }
  .pc__grafico--fluxo { height: 240px; }
  .pc__col-cat { display: none; }
  .portal__mockup::before { inset: -4% 0 -6%; }
}

@media (max-width: 479.98px) {
  .pc__kpis { grid-template-columns: minmax(0, 1fr); }
  /* Tabela vira lista: data e descrição à esquerda, valor e status à
     direita, uma linha por título */
  .pc__tabela thead { display: none; }
  .pc__tabela,
  .pc__tabela tbody { display: block; }
  .pc__tabela tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid var(--pc-borda);
  }
  .pc__tabela tr:last-child { border-bottom: 0; }
  .pc__tabela td { padding: 0 !important; border: 0; }
  .pc__tabela td:nth-child(1) { grid-column: 1; grid-row: 1; font-size: 0.64rem; color: var(--pc-texto-3); }
  .pc__tabela td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .pc__tabela .pc__num { grid-column: 2; grid-row: 1; }
  .pc__tabela td:last-child { grid-column: 2; grid-row: 2; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .pc__pulso::after,
  .portal__mockup::after { animation: none; }
  .js .pc__kpi,
  .js .pc__linha > .pc__card { opacity: 1; transform: none; transition: none; }
  .pc__progresso > span { transform: none; transition: none; }
}

/* Próximos vencimentos — "Unsolved Tickets" do Falcon (o mesmo da Visão Geral do Painel) */
.pc__vencimentos-acoes { display: flex; align-items: center; gap: 10px; }
.pc__busca-falsa {
  display: inline-flex; align-items: center; gap: 18px; padding: 3px 8px;
  border: 1px solid var(--pc-borda); border-radius: 4px; font-size: 0.66rem; color: var(--pc-texto-3); white-space: nowrap;
}
.pc__busca-falsa .lucide { width: 11px; height: 11px; }
.pc__conta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pc__conta-icone {
  flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--pc-realce); color: #2c7be5;
}
.pc__conta-icone .lucide { width: 13px; height: 13px; }
.pc__conta-nome { font-weight: 600; color: var(--pc-texto-forte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9rem; }
.pc__tabela.pc__tabela--contas td b { color: #2c7be5; font-weight: 600; }
.pc__prioridade { display: flex; align-items: center; gap: 6px; }
.pc__prioridade span { font-weight: 600; font-size: 0.66rem; color: var(--pc-texto-2); white-space: nowrap; }
/* anel de prioridade (a mesma regra do .circle-progress-svg do Falcon) */
.pc__anel { transform: rotate(130deg); }
.pc__anel-trilho { stroke: var(--pc-borda); stroke-dasharray: 340px; stroke-dashoffset: 72; }
.pc__anel-barra { stroke-dasharray: 340px; stroke-dashoffset: calc(340px - 267px * var(--p) / 100); }
@media (max-width: 1199.98px) {
  .pc__busca-falsa { display: none; }
}
@media (max-width: 767.98px) {
  .pc__col-prioridade { display: none; }
}

/* Receita em verde e despesa em vermelho (as cores das telas Receitas e Despesas do Painel) */
.pc__receita { color: #00894f !important; }
.pc__despesa { color: #e63757 !important; }
.pc [data-resumo="entradas"] { color: #00894f; }
.pc [data-resumo="saidas"] { color: #e63757; }

/* Próximos vencimentos e Conciliação bancária mais altos (o mesmo da Visão Geral do Painel) */
.pc__vencimentos,
.pc__conciliacao { min-height: 26rem; }
.pc__tabela--contas td { padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 1023.98px) {
  .pc__vencimentos,
  .pc__conciliacao { min-height: 0; }
}

/* Despesas/Receitas por categoria com altura fixa (o mesmo da Visão Geral do Painel) */
.pc__despesas .pc__grupos-despesa { max-height: 9.5rem; overflow-y: auto; align-content: start; }

/* Card "A pagar · 30 dias" (o mesmo da Visão Geral do Painel): total no topo, faixas com valor e %,
   títulos no centro da rosca */