/* LASTRO — o painel como centro de comando. Ver docs/38_PAINEL_COMANDO.md.

   Vale SÓ para a vista do painel (.casca): as outras telas
   continuam no design system atual até o painel ser aprovado. Nenhum hex
   aqui — os tokens do tema Pará estão em tokens.css §13.

   Fotos e mapa são ESPAÇOS: /assets/img/para-header.webp,
   /assets/img/sidebar-igreja.webp, /assets/img/sidebar-bandeira.webp, /assets/img/mapa-para.webp,
   /assets/img/simbolo-para.svg. Sem o arquivo, fica o gradiente. */

.casca {
  background: var(--pa-fundo);
  color: var(--pa-texto);
  min-height: 100dvh;
}
/* Casca de aplicativo (computador): lateral fixa, capa e rodapé parados, só o
   miolo rola. Um scroll só — o da .pc-rolagem; a página em si não rola.
   05/09: a casca vale para TODA tela com navegação (layout.js monta capa,
   rolagem e rodapé); .casca é posta pelo layout, não pela rota. */
@media (min-width: 56rem) {
  #app-root.casca { height: 100vh; height: 100dvh; overflow: hidden; }
  .casca .tela { height: 100vh; height: 100dvh; }
  .casca .tela { display: flex; flex-direction: column; min-height: 0; }
  .casca .hero { flex: 0 0 auto; margin-bottom: 0; }
  .casca .pc-rolagem { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; margin: 0 calc(var(--space-6) * -1); padding: 20px var(--space-6) 0; }
  .casca .pc-rodape { flex: 0 0 auto; margin-top: 0; }
}
/* Até 1440 px a calha da barra de rolagem come a largura: o miolo ganha 8 px
   de cada lado para a fila de KPIs continuar inteira em 1366. */
@media (min-width: 56rem) and (max-width: 90rem) {
  .casca .pc-rolagem { padding-left: var(--space-4); padding-right: var(--space-4); }
}
.casca .tela {
  max-width: none;
  margin: 0;
  padding: 0 var(--space-4) 0;
}
/* Os cards ficam centrados; capa e rodapé sangram até a borda da lateral. */
.pc-miolo { max-width: 88rem; margin: 0 auto; }
.pc-rolagem { min-width: 0; }
.casca[data-view="painel"] .tela__topo { display: none; }

/* ════════ moldura: a lateral navy ════════
   Só no painel e só no computador. Cabe em 100dvh SEM rolar: marca e navegação
   têm altura própria, o bloco regional tem altura fixa por faixa de altura de
   tela (--reg-*), e o que sobra fica com a navegação. Nunca overflow: auto
   aqui — em tela baixa os espaços encolhem, o menu não some (docs/38). */
@media (min-width: 56rem) {
  .casca .nav {
    --nav-item: 44px;
    --nav-icone: 18px;
    --nav-fonte: 14px;
    --nav-rotulo: 11px;
    --nav-gap-grupo: 14px;
    --nav-gap-rotulo: 6px;
    --nav-topo: 1.25rem;
    --nav-logo: 8.25rem;
    --nav-slogan: 11px;
    --dec-foto: 200px;
    --dec-fita: 160%;
    --dec-assinatura: 128px;
    --dec-pe: 14px;
    --reg-sobe: 24px;
    height: 100vh;
    height: 100dvh;
    width: 13.75rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-right: 0;
    background: linear-gradient(180deg, var(--pa-navy-2) 0%, var(--pa-navy-1) 40%, var(--pa-navy-1) 100%);
    color: var(--pa-nav-texto);
    font-family: var(--font-moldura);
  }
  body.com-nav #app-root.casca { padding-left: 13.75rem; }
  .casca .tela { padding: 0 var(--space-6) 0; }

  /* marca: logo branca oficial + slogan, sem gastar altura */
  .casca .nav__marca { flex: 0 0 auto; padding: 1.125rem 1.125rem 0; position: relative; z-index: 2; }
  .casca .nav__logo--cor, .casca .nav__cliente { display: none; }
  .casca .nav__logo--branca { display: block; width: var(--nav-logo); }
  .casca .nav__slogan {
    margin-top: 7px;
    font-family: var(--font-moldura);
    font-size: var(--nav-slogan);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--pa-branco-92);
  }

  /* navegação */
  .casca .nav__grupos { flex: 0 0 auto; gap: var(--nav-gap-grupo); padding: var(--nav-topo) 0.75rem var(--reg-sobe); position: relative; z-index: 2; }
  .casca .nav__grupo { gap: 2px; }
  .casca .nav__rotulo {
    margin: 0 0 var(--nav-gap-rotulo);
    padding: 0 0.875rem;
    font-size: var(--nav-rotulo);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--pa-nav-rotulo);
  }
  .casca .nav__item {
    min-height: var(--nav-item);
    padding: 0 0.875rem;
    gap: 0.625rem;
    border-radius: 8px;
    font-size: var(--nav-fonte);
    font-weight: 600;
    color: var(--pa-nav-texto);
  }
  .casca .nav__item svg { width: var(--nav-icone); height: var(--nav-icone); }
  .casca .nav__item:hover { background: var(--pa-nav-hover); color: var(--text-inverted); }
  .casca .nav__item--ativo,
  .casca .nav__item--ativo:hover {
    background: var(--pa-vermelho-moldura);
    color: var(--text-inverted);
    border-radius: 9px;
    box-shadow: var(--pa-sombra-ativo);
  }
  .casca .nav__item--ativo::after {
    content: '›';
    margin-left: auto;
    font-size: var(--text-lg);
    line-height: 1;
    opacity: .9;
  }
  .casca .nav__sino { margin-left: 0; }
  /* quem está logado e o Sair estão na capa */
  .casca .nav__pe { display: none; }

  /* ── decoração regional, ancorada no pé da lateral (pages/painel.js monta o DOM) ──
     Fica ATRÁS do menu (z-index 0) e não entra no cálculo vertical dele.
     Camadas, de trás para a frente: a igreja à hora azul como presença
     atmosférica (máscara vertical: nasce do navy em cima e some embaixo),
     a fita vermelha e branca com a estrela (sidebar-bandeira.webp, com alpha,
     mais larga que a coluna: mostra a descida e a subida para a direita), o
     navy da própria lateral, e a assinatura manuscrita. Nada retangular. */
  .casca .nav__regiao {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 0;
    height: calc(var(--dec-pe) + var(--dec-assinatura) * 1.03 + var(--dec-foto) + 60px);
    margin: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .nav__regiao-foto {
    position: absolute; left: 0;
    bottom: calc(var(--dec-pe) + var(--dec-assinatura) * 1.03 + 8px + var(--dec-fita) * 0.22 * 0.5);
    width: 100%;
    height: var(--dec-foto);
    object-fit: cover;
    object-position: center 38%;
    display: block;
    opacity: var(--dec-foto-opacidade, 0.22);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, var(--pa-navy-1) 50%, var(--pa-navy-1) 85%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, var(--pa-navy-1) 50%, var(--pa-navy-1) 85%, transparent 100%);
  }
  .nav__regiao-fita {
    position: absolute; right: 0;
    bottom: calc(var(--dec-pe) + var(--dec-assinatura) * 1.03 + 8px);
    width: var(--dec-fita);
    height: auto;
    display: block;
  }
  .nav__regiao-assinatura {
    position: absolute; left: 50%;
    bottom: var(--dec-pe);
    width: var(--dec-assinatura);
    height: auto;
    transform: translateX(-50%);
    display: block;
  }

  /* ── por altura de tela: a decoração encolhe, o menu não ── */
  @media (min-height: 1000px) {
    .casca .nav { --dec-foto: 300px; --dec-fita: 180%; --dec-assinatura: 136px; --dec-foto-opacidade: 0.55; }
  }
  @media (max-height: 850px) {
    .casca .nav {
      --nav-item: 40px; --nav-icone: 18px; --nav-fonte: 13.5px; --nav-gap-grupo: 12px; --nav-gap-rotulo: 5px;
      --nav-topo: 1rem; --nav-logo: 7.75rem; --nav-slogan: 10.5px;
      --dec-foto: 160px; --dec-fita: 150%; --dec-assinatura: 112px;
    }
  }
  @media (max-height: 780px) {
    .casca .nav {
      --nav-item: 38px; --nav-icone: 17px; --nav-fonte: 13px; --nav-rotulo: 10px; --nav-gap-grupo: 10px; --nav-gap-rotulo: 4px;
      --nav-topo: 0.875rem; --nav-logo: 7.5rem; --nav-slogan: 10px;
      --dec-foto: 110px; --dec-fita: 140%; --dec-assinatura: 96px; --dec-pe: 12px; --dec-foto-opacidade: 0.18;
    }
    .casca .nav__marca { padding-top: 0.875rem; }
  }
}

/* ════════ moldura: a capa ════════
   Camadas: fotografia panorâmica, véu azul, texto, pincelada, mapa, e a
   linha [seletor][sino][avatar][pessoa][sair] com o lema embaixo.
   É parte de um dashboard, não hero de landing page: 145px. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 43fr 25fr 32fr;
  gap: var(--space-4);
  align-items: center;
  height: 10rem;
  min-height: 0;
  margin: 0 calc(var(--space-4) * -1) 20px;
  padding: 24px var(--space-6) 26px;
  border-radius: 0;
  color: var(--text-inverted);
  font-family: var(--font-moldura);
  background:
    linear-gradient(90deg, var(--pa-veu-h1) 0%, var(--pa-veu-h2) 50%, var(--pa-veu-h3) 100%),
    url('/assets/img/para-header.webp') center / cover no-repeat,
    linear-gradient(120deg, var(--pa-navy-1), var(--pa-navy-4));
  overflow: hidden;
}
/* recorte sutil na base: o fundo do painel entra 6–12px na capa, sem linha reta */
.hero__base { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 8px; display: block; fill: var(--pa-fundo); z-index: 1; pointer-events: none; }
.hero__texto { grid-column: 1; position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; min-width: 0; }
.hero__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.65px; text-transform: uppercase; color: var(--pa-branco-88); }
.hero__frase { margin: 0; font-size: 31px; font-weight: 600; line-height: 1.06; letter-spacing: -0.8px; color: var(--text-inverted); text-shadow: var(--pa-sombra-texto); -webkit-text-stroke: 0; text-wrap: balance; }
.hero__frase-forte { font-weight: 750; }
/* a pincelada: SVG irregular, curto, levemente inclinado — detalhe, não divisor */
.hero__traco { display: block; width: 102px; height: 7px; fill: var(--pa-vermelho-moldura); transform: rotate(-2deg); transform-origin: left center; }
.hero__meta { margin: 0; font-size: 12px; font-weight: 600; color: var(--pa-branco-92); }
.hero__meta strong { font-size: 12px; font-weight: 700; }

/* O mapa do Pará (o mesmo asset aprovado, com a bandeira) como marca-d'água
   grande atrás da headline: impresso no fundo, sem sombra nem rotação, saindo
   pelo topo. Fica entre a foto/véu (fundo) e os textos (z 3); não chega à área
   da pessoa. Espaço para /assets/img/mapa-para.webp. */
.hero__mapa {
  position: absolute;
  left: 12.5rem;
  top: -2.75rem;
  z-index: 2;
  width: 21rem;
  height: 19.5rem;
  background: url('/assets/img/mapa-para.webp') center top / contain no-repeat;
  opacity: 0.16;
  pointer-events: none;
}
@media (max-width: 90rem) { .hero__mapa { left: 11rem; width: 19rem; height: 17.5rem; } }

.hero__lado { grid-column: 3; position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 12px; min-width: 0; }
.hero__linha { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.hero__operacao {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 10px;
  border-radius: 7px;
  background: var(--pa-seletor);
  border: 1px solid var(--pa-linha-branca);
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
  min-width: 0;
}
.hero__operacao span { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 90rem) { .hero__operacao span { display: none; } .hero__operacao { padding: 0 8px; } }
.hero__operacao svg { width: 14px; height: 14px; flex: none; }
.hero__sino { position: relative; display: flex; color: var(--text-inverted); }
.hero__sino svg { width: 19px; height: 19px; }
.hero__sino-n {
  position: absolute; top: -5px; right: -7px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--pa-vermelho-moldura); color: var(--text-inverted);
  font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
}
.hero__avatar {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--radius-full);
  background: var(--text-inverted); color: var(--pa-navy-2);
  font-size: 13px; font-weight: 700;
  border: 1px solid var(--pa-branco-50);
  overflow: hidden;
  flex: none;
}
.hero__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__quem { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; max-width: 8.5rem; }
.hero__quem strong { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero__quem small { font-size: 10px; font-weight: 500; color: var(--pa-branco-72); text-transform: capitalize; }
.hero__sair { display: flex; padding: 6px; border: 0; border-radius: var(--radius-md); background: none; color: var(--pa-branco-72); }
.hero__sair:hover { background: var(--pa-nav-hover); color: var(--text-inverted); }
.hero__sair svg { width: 17px; height: 17px; }
.hero__lema {
  margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  font-size: 15px; font-style: italic; font-weight: 750; line-height: 1.05;
  letter-spacing: 0.2px; text-transform: uppercase; text-align: right;
  color: var(--pa-branco-92);
}
.hero__lema--destaque { color: var(--text-inverted); }
.hero__lema .hero__traco { width: 68px; height: 6px; margin-top: 2px; transform-origin: right center; }
@media (min-width: 100rem) { .hero { height: 10.5rem; } }
@media (max-height: 780px) {
  .hero { height: 9.0625rem; padding: 18px var(--space-6) 20px; }
  .hero__texto { gap: 6px; }
  .hero__frase { font-size: 27px; }
  .hero__mapa { width: 18rem; height: 16.5rem; top: -2.25rem; }
}


/* ════════ blocos ════════ */
.pc-secao { margin: var(--space-6) 0 var(--space-3); display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.pc-secao h2 { margin: 0; font-size: var(--text-xl); font-weight: var(--fw-strong); letter-spacing: var(--tracking-tight); color: var(--pa-texto); }
.pc-secao small { font-size: var(--text-sm); color: var(--pa-cinza); }

.pc-card {
  background: var(--surface);
  border: 1px solid var(--pa-borda);
  border-radius: var(--radius-lg);
  box-shadow: var(--pa-sombra);
  padding: var(--space-5);
  min-width: 0;
  transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.pc-card--acao:hover { transform: translateY(-1px); box-shadow: var(--pa-sombra-hover); }
.pc-card__titulo { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--fw-strong); color: var(--pa-texto); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.pc-card__titulo small { font-weight: var(--fw-regular); color: var(--pa-cinza); }
.pc-card__texto { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--pa-cinza); line-height: 1.5; }
.pc-card--azul { background: linear-gradient(135deg, var(--pa-navy-2), var(--pa-azul)); color: var(--text-inverted); border: 0; }
.pc-card--azul .pc-kpi__rotulo, .pc-card--azul .pc-kpi__apoio, .pc-card--azul .pc-card__texto { color: var(--pa-nav-texto); }
.pc-card--azul .pc-kpi__valor { color: var(--text-inverted); }
.pc-card--vermelho { background: linear-gradient(135deg, var(--pa-vermelho-2), var(--pa-vermelho)); color: var(--text-inverted); border: 0; }
.pc-card--vermelho .pc-kpi__rotulo, .pc-card--vermelho .pc-kpi__apoio { color: var(--pa-nav-texto); }
.pc-card--vermelho .pc-kpi__valor { color: var(--text-inverted); }

/* KPIs */
.pc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--space-3); }
.pc-kpi { display: grid; gap: var(--space-1); }
.pc-kpi__topo { display: flex; align-items: center; justify-content: space-between; }
.pc-kpi__rotulo { font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--pa-cinza); }
.pc-kpi__icone { width: 18px; height: 18px; color: var(--pa-azul); }
.pc-kpi__valor { font-size: 32px; font-weight: var(--fw-bold); line-height: 1.05; letter-spacing: var(--tracking-tighter); font-variant-numeric: tabular-nums; color: var(--pa-texto); }
.pc-kpi__valor--declarado { color: var(--stage-declarado); }
.pc-kpi__valor--lastreado { color: var(--stage-lastreado); }
.pc-kpi__valor--vazio { color: var(--text-subtle); }
.pc-kpi__apoio { font-size: var(--text-xs); color: var(--pa-cinza); display: flex; align-items: center; gap: var(--space-1); }
.pc-var { font-weight: var(--fw-bold); }
.pc-var--sobe { color: var(--pa-verde); }
.pc-var--desce { color: var(--pa-vermelho); }
.pc-card--azul .pc-var--sobe, .pc-card--vermelho .pc-var--sobe, .pc-card--azul .pc-var--desce, .pc-card--vermelho .pc-var--desce { color: var(--text-inverted); }

/* grades */
.pc-grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.pc-grade-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.pc-grade-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); }
.pc-grade-materiais { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-3); }
@media (max-width: 72rem) { .pc-grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 60rem) { .pc-grade-3, .pc-grade-2-1 { grid-template-columns: 1fr; } }
@media (max-width: 40rem) { .pc-grade-4 { grid-template-columns: 1fr; } .pc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* placeholder honesto: onde o mapa vai entrar */
.pc-mapa {
  display: grid; place-items: center;
  min-height: 9rem; margin-bottom: var(--space-3);
  border: 1px dashed var(--pa-borda); border-radius: var(--radius-md);
  background: var(--pa-fundo);
  color: var(--pa-cinza); font-size: var(--text-xs); text-align: center; padding: var(--space-3);
}

/* materiais */
.pc-tabs { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-bottom: var(--space-4); }
.pc-tab {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--pa-borda); border-radius: var(--radius-full);
  background: var(--surface); color: var(--pa-cinza);
  font-size: var(--text-sm); font-weight: var(--fw-strong);
}
.pc-tab--ativo { background: var(--pa-navy-2); border-color: var(--pa-navy-2); color: var(--text-inverted); }
.pc-material { display: grid; gap: var(--space-2); }
.pc-material__nome { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-strong); }
.pc-material__nome svg { width: 18px; height: 18px; color: var(--pa-azul); }
.pc-material__grande { font-size: var(--text-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.pc-material__grande small { font-size: var(--text-xs); font-weight: var(--fw-regular); color: var(--pa-cinza); margin-left: var(--space-1); }
.pc-material__linhas { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); font-size: var(--text-xs); color: var(--pa-cinza); }
.pc-material__linhas b { color: var(--pa-texto); font-variant-numeric: tabular-nums; text-align: right; }

.pc-badge { display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--fw-strong); white-space: nowrap; }
.pc-badge--verde { background: var(--pa-verde-soft); color: var(--pa-verde); }
.pc-badge--azul { background: var(--pa-azul-soft); color: var(--pa-azul); }
.pc-badge--amarelo { background: var(--pa-amarelo-soft); color: var(--pa-amarelo-escuro); }
.pc-badge--vermelho { background: var(--pa-vermelho-soft); color: var(--pa-vermelho-2); }
.pc-badge--cinza { background: var(--neutral-bg); color: var(--pa-cinza); }
.pc-tabela td, .pc-tabela th { padding: var(--space-2) var(--space-3); }
.pc-vazio { margin: 0; padding: var(--space-4); font-size: var(--text-sm); color: var(--pa-cinza); text-align: center; }
.pc-lista { display: grid; gap: var(--space-2); }
.pc-lista__item { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.pc-lista__item b { font-variant-numeric: tabular-nums; }
.pc-botao { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-3); font-size: var(--text-sm); font-weight: var(--fw-strong); color: var(--pa-azul); text-decoration: none; }
.pc-botao svg { width: 16px; height: 16px; }
.pc-grande { font-size: 40px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-tighter); line-height: 1; color: var(--pa-texto); font-variant-numeric: tabular-nums; }
.pc-grande small { font-size: var(--text-sm); font-weight: var(--fw-regular); color: var(--pa-cinza); letter-spacing: 0; margin-left: var(--space-2); }
.pc-nota { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--pa-cinza); }
.pc-aviso-lei { margin: var(--space-6) 0 0; padding: 9px var(--space-4); min-height: 32px; font-size: 11px; line-height: 1.3; color: var(--pa-cinza); text-align: center; background: var(--surface); border-top: 1px solid var(--pa-borda); }

/* ════════ gráficos (components/graficos.js) ════════ */
.g-barras { display: grid; gap: var(--space-2); }
.g-barra { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr auto; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.g-barra__rotulo { color: var(--pa-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-barra__svg { display: block; width: 100%; height: 10px; }
.g-barra__valor { font-variant-numeric: tabular-nums; font-weight: var(--fw-strong); white-space: nowrap; }
.g-trilho { fill: var(--pa-trilho); }
.g-fill { fill: var(--pa-azul); }
.g-fill--azul { fill: var(--pa-azul); }
.g-fill--navy { fill: var(--pa-navy-2); }
.g-fill--vermelho { fill: var(--pa-vermelho); }
.g-fill--cinza { fill: var(--pa-cinza-claro); }
.g-fill--verde { fill: var(--pa-verde); }
.g-fill--amarelo { fill: var(--pa-amarelo); }
.g-fill--meta { fill: var(--stage-meta); }
.g-fill--declarado { fill: var(--stage-declarado-fill); }
.g-fill--identificado { fill: var(--stage-identificado-fill); }
.g-fill--validado { fill: var(--stage-validado-fill); }
.g-fill--lastreado { fill: var(--stage-lastreado-fill); }

.g-grafico { display: grid; gap: var(--space-2); }
.g-linha__svg { display: block; width: 100%; height: auto; }
.g-grade { stroke: var(--pa-borda); stroke-width: 1; }
.g-eixo { fill: var(--pa-cinza); font-size: 9px; }
.g-linha { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.g-linha--azul { stroke: var(--pa-azul); }
.g-linha--vermelho { stroke: var(--pa-vermelho); }
.g-linha--declarado { stroke: var(--stage-declarado); }
.g-linha--lastreado { stroke: var(--stage-lastreado); }
.g-ponto { stroke: var(--surface); stroke-width: 1.5; }
.g-ponto--azul { fill: var(--pa-azul); }
.g-ponto--vermelho { fill: var(--pa-vermelho); }
.g-ponto--declarado { fill: var(--stage-declarado); }
.g-ponto--lastreado { fill: var(--stage-lastreado); }
.g-valor { font-size: 10px; font-weight: 700; }
.g-valor--azul { fill: var(--pa-azul); }
.g-valor--vermelho { fill: var(--pa-vermelho); }
.g-valor--declarado { fill: var(--stage-declarado); }
.g-valor--lastreado { fill: var(--stage-lastreado); }
.g-legenda { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-xs); color: var(--pa-cinza); }
.g-legenda--coluna { flex-direction: column; gap: var(--space-1); }
.g-legenda__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.g-legenda__item b { margin-left: auto; color: var(--pa-texto); font-variant-numeric: tabular-nums; }
.g-cor { width: 10px; height: 10px; border-radius: 3px; background: var(--pa-cinza-claro); flex: none; }
.g-cor--azul { background: var(--pa-azul); }
.g-cor--navy { background: var(--pa-navy-2); }
.g-cor--vermelho { background: var(--pa-vermelho); }
.g-cor--verde { background: var(--pa-verde); }
.g-cor--amarelo { background: var(--pa-amarelo); }
.g-cor--cinza { background: var(--pa-cinza-claro); }
.g-cor--declarado { background: var(--stage-declarado-fill); }
.g-cor--lastreado { background: var(--stage-lastreado-fill); }
.g-cor--identificado { background: var(--stage-identificado-fill); }

.g-donut { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: var(--space-4); }
.g-donut__svg { width: 7rem; height: 7rem; }
.g-trilho-donut { fill: none; stroke: var(--pa-trilho); }
.g-fatia { fill: none; }
.g-fatia--azul { stroke: var(--pa-azul); }
.g-fatia--navy { stroke: var(--pa-navy-2); }
.g-fatia--vermelho { stroke: var(--pa-vermelho); }
.g-fatia--verde { stroke: var(--pa-verde); }
.g-fatia--amarelo { stroke: var(--pa-amarelo); }
.g-fatia--cinza { stroke: var(--pa-cinza-claro); }
.g-fatia--declarado { stroke: var(--stage-declarado-fill); }
.g-fatia--lastreado { stroke: var(--stage-lastreado-fill); }
.g-fatia--identificado { stroke: var(--stage-identificado-fill); }
.g-centro { fill: var(--pa-texto); font-size: 16px; font-weight: 700; }
.g-centro-rotulo { fill: var(--pa-cinza); font-size: 7px; text-transform: uppercase; letter-spacing: .06em; }

.g-progresso { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); }
.g-progresso__topo { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.g-progresso__rotulo { color: var(--pa-texto); }
.g-progresso__valor { color: var(--pa-cinza); font-variant-numeric: tabular-nums; }
.g-progresso__svg { display: block; width: 100%; height: 8px; }
.g-progresso__pct { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--pa-azul); }

/* ════════ moldura: o rodapé ════════
   Faixa fina navy, dentro do conteúdo (nunca por baixo da lateral). */
.pc-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  height: 2.25rem;
  margin: var(--space-8) calc(var(--space-4) * -1) 0;
  padding: 0 var(--space-6);
  background: var(--pa-navy-5);
  color: var(--pa-branco-68);
  font-family: var(--font-moldura);
  font-size: 10px; font-weight: 500; line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}
.pc-rodape__esq, .pc-rodape__dir { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.pc-rodape__esq span, .pc-rodape__dir span { overflow: hidden; text-overflow: ellipsis; }
.pc-rodape__logo { display: block; width: 5rem; height: auto; flex: none; }
.pc-rodape small { font-size: 10px; opacity: .7; flex: none; }
.pc-rodape__simbolo { width: 18px; height: 18px; flex: none; background: url('/assets/img/simbolo-para.svg') center / contain no-repeat; }
@media (min-width: 56rem) {
  .hero { margin-left: calc(var(--space-6) * -1); margin-right: calc(var(--space-6) * -1); }
  .pc-rodape { margin-left: calc(var(--space-6) * -1); margin-right: calc(var(--space-6) * -1); }
}

/* ════════ celular ════════ */
@media (max-width: 56rem) {
  .hero { grid-template-columns: 1fr; height: auto; padding: var(--space-5); margin-top: 0; }
  .casca .tela { padding-top: 0; }
  .hero__mapa, .hero__base { display: none; }
  .hero { overflow: hidden; }
  .hero__lado { align-items: flex-start; }
  .hero__linha { flex-wrap: wrap; }
  .hero__lema { align-items: flex-start; text-align: left; }
  .hero__frase { font-size: var(--text-2xl); }
  .pc-rodape { height: auto; padding: var(--space-3) var(--space-4); flex-wrap: wrap; white-space: normal; line-height: 1.4; }
  .casca .tela { padding-bottom: var(--space-16); }
}


/* ════════════════════════════════════════════════════════════════════════
   PRESENÇA TERRITORIAL — o mapa do Pará como protagonista do miolo.
   Briefing de 05/09/2026, docs/39_PRESENCA_TERRITORIAL.md.
   Componentes: presenca-territorial.js, mapa-para.js, ponto-territorio.js,
   dica-territorio.js, prioridades-territorio.js, seletor-modo.js,
   folha-inferior.js. Nenhum hex aqui — tokens.css §13.
   ════════════════════════════════════════════════════════════════════════ */

/* ── a seção ── */
.pt { margin-top: var(--space-5); }
.pt__card { padding: var(--space-5) var(--space-5) var(--space-4); }
.pt__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.pt__titulo h2 { margin: 0; font-size: var(--text-xl); font-weight: var(--fw-strong); letter-spacing: var(--tracking-tight); color: var(--pa-texto); }
.pt__titulo p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--pa-cinza); }
.pt__controles { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.pt__contador { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--fw-strong); color: var(--pa-cinza); white-space: nowrap; }
.pt__contador-ponto { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--pa-azul); flex: none; }
.pt__contador-ponto--vivo { background: var(--stage-lastreado); }

.pt__corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 72rem) {
  .pt__corpo { grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--space-5); }
}

/* ── seletor segmentado ── */
.pt-seletor { display: inline-flex; padding: 3px; border-radius: var(--radius-md); background: var(--pa-fundo); border: 1px solid var(--pa-borda); }
.pt-seletor__opcao {
  min-height: 34px; padding: 0 var(--space-3);
  border: 0; border-radius: 6px; background: none;
  font-size: var(--text-xs); font-weight: var(--fw-strong); letter-spacing: 0.2px;
  color: var(--pa-cinza); cursor: pointer;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.pt-seletor__opcao:hover { color: var(--pa-texto); }
.pt-seletor__opcao--ativa, .pt-seletor__opcao--ativa:hover { background: var(--pa-navy-2); color: var(--text-inverted); box-shadow: var(--pa-sombra); }

/* ── o mapa ── */
.pt-mapa {
  position: relative;
  height: clamp(380px, 46vh, 500px);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: visible;
}
.pt-mapa__svg {
  display: block; width: 100%; height: 100%;
  overflow: visible;
  animation: pt-entrada 400ms var(--ease-out) both;
}
@keyframes pt-entrada { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.pt-mapa__estado {
  fill: var(--pa-mapa-fundo);
  stroke: var(--pa-mapa-contorno);
  stroke-width: 1.25;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 2px 3px var(--pa-mapa-sombra));
}
.pt-mapa--vazio .pt-mapa__estado { opacity: .55; filter: none; }

/* pontos: traço de comprimento zero com ponta redonda; a largura do traço é
   o diâmetro em PIXELS DE TELA (non-scaling-stroke), o mesmo em qualquer
   largura de mapa. A cor é do grupo (currentColor), por classe de tom. */
.pt-pontos { transition: opacity 200ms var(--ease), transform 200ms var(--ease); transform-origin: center; transform-box: fill-box; }
.pt-pontos--troca { opacity: .35; transform: scale(.985); }
.pt-ponto { color: var(--pa-cinza-azulado); cursor: pointer; outline: none; }
.pt-ponto--azul { color: var(--pa-azul); }
.pt-ponto--verde { color: var(--stage-lastreado); }
.pt-ponto--vermelho { color: var(--pa-vermelho-moldura); }
.pt-ponto--cinza { color: var(--pa-cinza-azulado); }
.pt-ponto path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pt-ponto__no { stroke: currentColor; stroke-width: 8px; transition: stroke-width var(--duration-fast) var(--ease); }
.pt-ponto__borda { stroke: var(--surface); stroke-width: 12px; }
.pt-ponto__anel { stroke: currentColor; stroke-width: 20px; opacity: 0; transition: opacity var(--duration-fast) var(--ease); }
.pt-ponto__toque { stroke: transparent; stroke-width: 44px; pointer-events: stroke; }
/* com mouse, o alvo de 44 px faria vizinhos (Abaetetuba, Moju, Barcarena) se
   cobrirem; o cursor é preciso, o alvo encolhe */
@media (hover: hover) and (pointer: fine) { .pt-ponto__toque { stroke-width: 24px; } }
.pt-ponto:hover .pt-ponto__no, .pt-ponto:focus-visible .pt-ponto__no { stroke-width: 10px; }
.pt-ponto:focus-visible .pt-ponto__anel { opacity: .25; }
.pt-ponto--selecionado .pt-ponto__no { stroke-width: 10px; }
.pt-ponto--selecionado .pt-ponto__anel { opacity: .28; }
.pt-ponto--selecionado .pt-ponto__borda { stroke-width: 14px; }

/* o halo: um só anel que nasce no ponto, cresce e some. Só nos até 3 pontos
   escolhidos pelo dado (territorial.js), nunca todos. */
.pt-ponto__halo { stroke: currentColor; opacity: 0; }
.pt-ponto--pulsa .pt-ponto__halo { animation: pt-halo 2.8s var(--ease-out) infinite; }
@keyframes pt-halo {
  0%   { stroke-width: 8px;  opacity: .5; }
  75%  { stroke-width: 36px; opacity: 0; }
  100% { stroke-width: 36px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-ponto--pulsa .pt-ponto__halo { animation: none; opacity: 0; }
  .pt-mapa__svg { animation: none; }
}

/* legenda mínima, no pé do mapa */
.pt-legenda {
  position: absolute; left: 0; bottom: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  font-size: 11px; font-weight: var(--fw-medium); color: var(--pa-cinza);
}
.pt-legenda__item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pt-legenda__cor { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--pa-cinza-azulado); }
.pt-legenda__cor--azul { background: var(--pa-azul); }
.pt-legenda__cor--verde { background: var(--stage-lastreado); }
.pt-legenda__cor--vermelho { background: var(--pa-vermelho-moldura); }
.pt-legenda__cor--cinza { background: var(--pa-cinza-azulado); }

/* estado vazio: a silhueta fica, o texto diz o que falta */
.pt-mapa__vazio {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(22rem, calc(100% - var(--space-6)));
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--pa-branco-96);
  border: 1px solid var(--pa-borda);
  box-shadow: var(--pa-sombra);
  text-align: center;
}
.pt-mapa__vazio-titulo { margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: var(--fw-strong); color: var(--pa-texto); }
.pt-mapa__vazio-texto { margin: 0; font-size: var(--text-xs); color: var(--pa-cinza); line-height: 1.5; }
.pt-mapa__vazio .pc-botao { margin-top: var(--space-2); }

/* ── a dica (computador) ── */
.pt-dica {
  position: absolute; z-index: var(--z-tooltip);
  width: max-content; min-width: 13rem; max-width: 17rem;
  padding: var(--space-3) 14px;
  border-radius: 10px;
  background: var(--pa-dica-fundo); color: var(--text-inverted);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-xs); line-height: 1.4;
  pointer-events: none;
}
.pt-dica--detalhe, .pt-dica--folha { position: static; width: auto; max-width: none; min-width: 0; pointer-events: auto; box-shadow: none; }
.pt-dica__cabeca { margin-bottom: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--pa-dica-linha); }
.pt-dica__nome { display: block; font-size: var(--text-sm); font-weight: var(--fw-bold); letter-spacing: 0.2px; text-transform: uppercase; }
.pt-dica__sub { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; color: var(--pa-dica-texto); font-size: 11px; }
.pt-dica__situacao { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--pa-cinza-azulado); flex: none; }
.pt-dica__situacao--azul { background: var(--pa-azul-2); }
.pt-dica__situacao--verde { background: var(--stage-lastreado-fill); }
.pt-dica__situacao--vermelho { background: var(--pa-vermelho-claro); }
.pt-dica__linha { display: flex; justify-content: space-between; gap: var(--space-3); padding: 3px 0; }
.pt-dica__linha span { color: var(--pa-dica-texto); }
.pt-dica__linha b { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-dica__linha small { font-weight: var(--fw-regular); color: var(--pa-dica-texto); }
.pt-dica__linha--lastreado b { color: var(--primary-border); }
.pt-dica__linha--declarado b { color: var(--stage-declarado-border); }
.pt-dica__linha--alerta b { color: var(--pa-vermelho-claro); }

/* ── prioridades ── */
.pt-prioridades { min-width: 0; }
.pt-prioridades__titulo { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--pa-cinza); }
.pt-prioridades__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.pt-prioridades__vazio { margin: 0; padding: var(--space-3) 0; font-size: var(--text-sm); color: var(--pa-cinza); }
.pt-prioridade__botao {
  display: flex; align-items: flex-start; gap: var(--space-2);
  width: 100%; min-height: 44px; padding: var(--space-2) var(--space-2);
  border: 1px solid transparent; border-radius: var(--radius-md); background: none;
  text-align: left; cursor: pointer;
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.pt-prioridade__botao:hover { background: var(--pa-fundo); }
.pt-prioridade__botao--ativo, .pt-prioridade__botao--ativo:hover { background: var(--pa-azul-soft); border-color: var(--pa-borda); }
.pt-prioridade__cor { width: 9px; height: 9px; margin-top: 5px; border-radius: var(--radius-full); background: var(--pa-cinza-azulado); flex: none; }
.pt-prioridade--vermelho .pt-prioridade__cor { background: var(--pa-vermelho-moldura); }
.pt-prioridade--amarelo .pt-prioridade__cor { background: var(--pa-amarelo); }
.pt-prioridade--azul .pt-prioridade__cor { background: var(--pa-azul); }
.pt-prioridade__corpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pt-prioridade__nome { font-size: var(--text-sm); font-weight: var(--fw-strong); color: var(--pa-texto); }
.pt-prioridade__titulo { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--pa-texto); }
.pt-prioridade__texto { font-size: 11px; color: var(--pa-cinza); }
.pt-prioridades__mais, .pt-prioridades__voltar {
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin-top: var(--space-2); padding: var(--space-2) 0; min-height: 36px;
  border: 0; background: none; cursor: pointer;
  font-size: var(--text-sm); font-weight: var(--fw-strong); color: var(--pa-azul);
}
.pt-prioridades__mais svg, .pt-prioridades__voltar svg { width: 16px; height: 16px; }
.pt-prioridades__voltar { margin: 0 0 var(--space-2); }
.pt-prioridades__detalhe .pt-dica--detalhe { border-radius: var(--radius-md); }

/* esqueleto com a forma do card: sem pulo quando o dado chega */
.pt-esqueleto__titulo { width: 14rem; height: 22px; }
.pt-esqueleto__seletor { width: 16rem; height: 34px; }
.pt-esqueleto__mapa { border-radius: var(--radius-md); }
.pt-esqueleto__linha { height: 44px; margin-bottom: var(--space-2); }

/* ── "O método" compacto: dois cards, altura pelo conteúdo ── */
.pc-grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.pc-grade-3, .pc-grade-4 { align-items: start; }
.pc-card--destaque { border-top: 3px solid var(--pa-vermelho-moldura); }
.pc-card__titulo--destaque { color: var(--pa-vermelho-2); }
.pc-vazio--rodada { text-align: left; padding: var(--space-2) 0 0; }
.pc-vazio--rodada strong { display: block; color: var(--pa-texto); margin-bottom: 2px; }
@media (max-width: 60rem) { .pc-grade-2 { grid-template-columns: 1fr; } }

/* ── folha inferior (celular) ── */
.folha { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: flex-end; justify-content: center; }
.folha__fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, .40); opacity: 0; transition: opacity 220ms var(--ease); }
.folha__caixa {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-width: 34rem;
  min-height: 38dvh; max-height: 72dvh;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  box-shadow: var(--shadow-xl);
  transform: translateY(100%);
  transition: transform 220ms var(--ease-out);
}
.folha__caixa--arrastando { transition: none; }
.folha--aberta .folha__fundo { opacity: 1; }
.folha--aberta .folha__caixa { transform: none; }
.folha__alca { display: grid; place-items: center; height: 28px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
.folha__alca i { display: block; width: 40px; height: 4px; border-radius: var(--radius-full); background: var(--pa-cinza-claro); }
.folha__corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--space-4) var(--space-3); }
.folha__corpo .pt-dica--folha { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); }
.folha__corpo .pt-dica--folha .pt-dica__nome { font-size: var(--text-lg); }
.folha__corpo .pt-dica--folha .pt-dica__linha b { font-size: var(--text-base); }
.folha__acoes { padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--pa-borda); }

/* ── celular e tablet ── */
@media (max-width: 72rem) {
  /* tablet: mapa em toda a largura e prioridades embaixo, em colunas */
  .pt-prioridades__lista { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
}
@media (max-width: 56rem) {
  .pt { margin-top: var(--space-4); }
  .pt__card { padding: var(--space-4) var(--space-4) var(--space-3); }
  .pt__topo { margin-bottom: var(--space-3); }
  .pt__titulo h2 { font-size: var(--text-lg); }
  .pt__controles { width: 100%; flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .pt__contador { white-space: normal; align-items: flex-start; line-height: 1.35; }
  .pt__contador-ponto { margin-top: 4px; }
  .pt-seletor { display: flex; width: 100%; }
  .pt-seletor__opcao { flex: 1 1 0; min-height: 44px; font-size: var(--text-sm); }
  .pt-mapa { height: auto; aspect-ratio: 1 / 1; margin: 0 calc(var(--space-2) * -1); }
  .pt-legenda { position: static; justify-content: center; margin-top: var(--space-2); }
  .pt-mapa > .pt-dica { display: none; }
  .pt-prioridades__lista { grid-template-columns: 1fr; }
  .pt-prioridades__detalhe { display: none; }
}
@media (max-width: 56rem) and (orientation: landscape) {
  .pt-mapa { aspect-ratio: auto; height: 72vh; }
}

/* ════════ celular: casca de aplicativo ════════
   Só no painel (o resto do app segue site.css até ser aprovado). A capa vira
   uma barra compacta [ADG Base] [Campanha] [sino] [avatar], os KPIs ficam em
   2×3, e a barra inferior fica navy com o item ativo em branco e um traço
   vermelho — a mesma identidade da lateral do computador. */
@media (max-width: 56rem) {
  .hero { display: block; height: auto; margin: 0 calc(var(--space-4) * -1) var(--space-4); padding: calc(var(--space-2) + env(safe-area-inset-top)) var(--space-4) var(--space-2); }
  .hero__texto, .hero__lado, .hero__mapa, .hero__base { display: none; }
  .hero__compacto { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; }
  .hero__compacto-logo { display: block; width: 6.25rem; height: auto; flex: none; }
  .hero__compacto .hero__operacao { height: 32px; margin-left: auto; min-width: 0; max-width: 46%; }
  .hero__compacto .hero__operacao span { display: block; max-width: none; font-size: 11px; }
  .hero__compacto .hero__avatar { width: 34px; height: 34px; font-size: 12px; }
  .hero__compacto .hero__sino { padding: 6px; }

  .pc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .pc-kpi { padding: var(--space-3) var(--space-4); }
  .pc-kpi__valor { font-size: 26px; }
  .pc-kpi__icone { width: 16px; height: 16px; }
  .pc-secao { margin-top: var(--space-5); flex-direction: column; align-items: flex-start; gap: 2px; }
  .pc-secao h2 { font-size: var(--text-lg); }
  .pc-card { padding: var(--space-4); }
  .pc-grade-4, .pc-grade-2-1 { gap: var(--space-3); }
  .pc-grande { font-size: 32px; }

  .casca .nav { background: var(--pa-navy-1); border-top-color: var(--pa-linha-branca); }
  .casca .nav__item { color: var(--pa-nav-texto); min-height: 60px; }
  .casca .nav__item:hover { color: var(--text-inverted); }
  .casca .nav__item--ativo, .casca .nav__item--ativo:hover { color: var(--text-inverted); }
  .casca .nav__item--ativo::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--pa-vermelho-moldura);
  }
  .casca .nav__mais[aria-expanded="true"] { color: var(--text-inverted); }
  .casca .nav--aberto .nav__item--extra { background: var(--pa-navy-2); border-bottom-color: var(--pa-linha-branca); }
  .casca .nav--aberto .nav__pe { background: var(--pa-navy-2); border-bottom-color: var(--pa-linha-branca); }
  .casca .nav--aberto .nav__quem strong { color: var(--text-inverted); }
  .casca .nav--aberto .nav__quem small, .casca .nav--aberto .nav__sair { color: var(--pa-nav-texto); }
  .casca .tela { padding-bottom: calc(var(--space-20) + env(safe-area-inset-bottom)); }

  /* Sem cabeçalho no celular (Marcelo, 05/09: "pode tirar o header no celular,
     deixa só na lateral"). A capa é do computador; aqui a tela começa no
     título, e a barra inferior já traz Avisos com o contador. A foto do
     candidato continua em Ajustes, e a pessoa/Sair no "Mais". Menos 450 KB
     de imagem na primeira abertura. */
  .casca .hero { display: none; }
  .casca .tela { padding-top: calc(var(--space-4) + env(safe-area-inset-top)); }
  /* O rodapé também é do computador (Marcelo, 05/09: "no celular não tem
     necessidade"). A versão continua em Ajustes › Aplicativo. */
  .casca .pc-rodape { display: none; }

  /* O convite para instalar: uma faixa acima da barra, navy, uma vez. */
  .convite-instalar {
    position: fixed; left: var(--space-3); right: var(--space-3);
    bottom: calc(60px + var(--space-3) + env(safe-area-inset-bottom));
    z-index: var(--z-dropdown);
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--pa-navy-2); color: var(--text-inverted);
    border: 1px solid var(--pa-linha-branca); border-radius: var(--radius-lg); box-shadow: var(--pa-sombra);
  }
  .convite-instalar__texto { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .convite-instalar__texto strong { font-size: var(--text-sm); }
  .convite-instalar__texto span { font-size: var(--text-xs); color: var(--pa-nav-texto); }
  .convite-instalar__acoes { display: flex; gap: var(--space-2); flex: 0 0 auto; }
  .convite-instalar .btn--ghost { color: var(--text-inverted); }
  body.nav-aberta .convite-instalar { display: none; }
}
@media (min-width: 56.01rem) { .convite-instalar { display: none; } }
@media (min-width: 56.01rem) { .hero__compacto { display: none; } }


/* ════════ a casca nas outras telas (05/09/2026) ════════
   Fora do painel a tela tem título, subtítulo e ação (.tela__topo) dentro
   do miolo, e o miolo é mais estreito: lista e formulário leem melhor. */
.casca:not([data-view="painel"]) .pc-miolo { max-width: 72rem; }
.casca .tela__topo { align-items: center; margin: var(--space-2) 0 var(--space-5); }
.casca .tela__topo .section-header__title { margin: 0; font-size: var(--text-2xl); font-weight: var(--fw-strong); letter-spacing: var(--tracking-tight); color: var(--pa-texto); }
.casca .tela__topo .section-header__sub { color: var(--pa-cinza); }
.casca .kpis { gap: var(--space-3); background: none; border: 0; border-radius: 0; overflow: visible; }
.casca .kpis > div { background: var(--surface); border: 1px solid var(--pa-borda); border-radius: var(--radius-lg); box-shadow: var(--pa-sombra); padding: var(--space-4) var(--space-5); }
.casca .kpi__r { color: var(--pa-cinza); }
.casca .linha { background: var(--surface); border-color: var(--pa-borda); border-radius: var(--radius-lg); box-shadow: var(--pa-sombra); }
.casca .linha:hover { border-color: var(--pa-cinza-claro); }
.casca .card, .casca .cartao { border-color: var(--pa-borda); box-shadow: var(--pa-sombra); }
@media (max-width: 56rem) {
  .casca .tela__topo { margin: 0 0 var(--space-4); }
  .casca .tela__topo .section-header__title { font-size: var(--text-xl); }
  .casca .fab { bottom: calc(60px + var(--space-3) + env(safe-area-inset-bottom)); }
}


/* ════════ tudo clicável (05/09/2026) ════════
   Card, número, barra, fatia e linha do painel abrem um detalhe (components/
   detalhe.js): no celular a folha inferior, no computador a mesma folha como
   modal central. O que é clicável mostra a mão e sobe 1 px; um canto discreto
   ("ver") avisa no toque, onde não há hover. */
.pc-clicavel { cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; display: block; position: relative; appearance: none; }
.pc-clicavel:hover { transform: translateY(-1px); box-shadow: var(--pa-sombra-hover); }
.pc-clicavel:focus-visible { outline: 2px solid var(--pa-azul); outline-offset: 2px; }
.pc-kpi.pc-clicavel, .pc-material.pc-clicavel { display: grid; }
.pc-grande.pc-clicavel { border: 0; background: none; padding: 0; box-shadow: none; }
.pc-grande.pc-clicavel:hover { transform: none; color: var(--pa-azul); }
.pc-card__abrir { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.4px; text-transform: uppercase; color: var(--pa-azul); white-space: nowrap; }
.pc-card__abrir svg { width: 12px; height: 12px; }
.pc-card--azul .pc-card__abrir, .pc-card--vermelho .pc-card__abrir { color: var(--pa-branco-88); }
.pc-kpi__topo .pc-card__abrir { margin-left: var(--space-2); }
.pc-lista__item--clicavel { width: 100%; padding: var(--space-2) var(--space-2); margin: 0 calc(var(--space-2) * -1); width: calc(100% + var(--space-4)); border: 0; border-radius: var(--radius-md); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; align-items: center; }
.pc-lista__item--clicavel:hover { background: var(--pa-fundo); }
.pc-lista__item--clicavel:focus-visible { outline: 2px solid var(--pa-azul); outline-offset: -2px; }
.pc-tabela__linha--clicavel { cursor: pointer; }
.pc-tabela__linha--clicavel:hover td { background: var(--pa-fundo); }
.pc-material.pc-clicavel { text-align: left; }
.g-barra--clicavel { width: 100%; padding: 2px var(--space-1); margin: 0 calc(var(--space-1) * -1); width: calc(100% + var(--space-2)); border: 0; border-radius: var(--radius); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.g-barra--clicavel:hover { background: var(--pa-fundo); }
.g-barra--clicavel:focus-visible { outline: 2px solid var(--pa-azul); outline-offset: -2px; }
.g-legenda__item--clicavel { border: 0; padding: 2px var(--space-1); margin: 0 calc(var(--space-1) * -1); border-radius: var(--radius); background: none; font: inherit; color: inherit; cursor: pointer; }
.g-legenda__item--clicavel:hover { background: var(--pa-fundo); color: var(--pa-texto); }
.g-legenda__item--clicavel:focus-visible { outline: 2px solid var(--pa-azul); outline-offset: -2px; }
.g-progresso--clicavel { width: 100%; padding: var(--space-1) var(--space-2); margin: 0 calc(var(--space-2) * -1) var(--space-2); width: calc(100% + var(--space-4)); border: 0; border-radius: var(--radius-md); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.g-progresso--clicavel:hover { background: var(--pa-fundo); }
.g-progresso--clicavel:focus-visible { outline: 2px solid var(--pa-azul); outline-offset: -2px; }

/* o detalhe, por dentro */
.dt { display: grid; gap: var(--space-4); color: var(--pa-texto); }
.dt__voltar { display: inline-flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); padding: var(--space-1) 0; border: 0; background: none; font-size: var(--text-sm); font-weight: var(--fw-strong); color: var(--pa-azul); cursor: pointer; }
.dt__voltar svg { width: 16px; height: 16px; }
.dt__grandes { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--space-2); }
.dt__grande { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-3); border-radius: var(--radius-md); background: var(--pa-fundo); border: 1px solid var(--pa-borda); }
.dt__grande strong { font-size: 24px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-tighter); line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--pa-texto); }
.dt__grande span { font-size: 11px; font-weight: var(--fw-strong); text-transform: uppercase; letter-spacing: 0.4px; color: var(--pa-cinza); }
.dt__grande--lastreado strong { color: var(--stage-lastreado); }
.dt__grande--declarado strong { color: var(--stage-declarado); }
.dt__grande--alerta strong { color: var(--pa-vermelho-2); }
.dt__titulo { margin: var(--space-1) 0 0; font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--pa-cinza); display: flex; align-items: baseline; gap: var(--space-2); }
.dt__titulo small { font-weight: var(--fw-regular); text-transform: none; letter-spacing: 0; color: var(--pa-cinza); }
.dt__pares { display: grid; gap: 0; border: 1px solid var(--pa-borda); border-radius: var(--radius-md); overflow: hidden; }
.dt__par { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); background: var(--surface); }
.dt__par + .dt__par { border-top: 1px solid var(--pa-borda); }
.dt__par span { color: var(--pa-cinza); }
.dt__par b { font-variant-numeric: tabular-nums; text-align: right; }
.dt__par--alerta b { color: var(--pa-vermelho-2); }
.dt__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.dt__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--pa-borda); border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-sm); }
.dt__item[data-detalhe] { cursor: pointer; }
.dt__item[data-detalhe]:hover { background: var(--pa-fundo); border-color: var(--pa-cinza-claro); }
.dt__item--alerta { border-left: 3px solid var(--pa-vermelho-moldura); }
.dt__item--lastreado { border-left: 3px solid var(--stage-lastreado); }
.dt__item-corpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dt__item-corpo strong { font-weight: var(--fw-strong); }
.dt__item-corpo small { font-size: var(--text-xs); color: var(--pa-cinza); }
.dt__item-valor { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.dt__item-valor small { font-weight: var(--fw-regular); color: var(--pa-cinza); }
.dt__nota { margin: 0; font-size: var(--text-xs); line-height: 1.5; color: var(--pa-cinza); }
.dt__texto { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--pa-texto); }
.dt__vazio { margin: 0; padding: var(--space-2) 0; font-size: var(--text-sm); color: var(--pa-cinza); }

/* a folha com cabeçalho */
.folha__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-4) var(--space-3); border-bottom: 1px solid var(--pa-borda); }
.folha__titulos { min-width: 0; }
.folha__titulo { margin: 0; font-size: var(--text-lg); font-weight: var(--fw-strong); letter-spacing: var(--tracking-tight); color: var(--pa-texto); }
.folha__sub { margin: 2px 0 0; font-size: var(--text-xs); color: var(--pa-cinza); }
.folha__fechar { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 0; border-radius: var(--radius-md); background: none; color: var(--pa-cinza); cursor: pointer; }
.folha__fechar:hover { background: var(--pa-fundo); color: var(--pa-texto); }
.folha__fechar svg { width: 18px; height: 18px; }
.folha--detalhe .folha__corpo { padding-top: var(--space-3); }
.folha--detalhe .folha__caixa { max-height: 86dvh; }

/* no computador o detalhe é um modal central, sem alça */
@media (min-width: 56.01rem) {
  .folha--detalhe { align-items: center; padding: var(--space-6); }
  .folha--detalhe .folha__caixa { max-width: 40rem; min-height: 0; max-height: 84vh; border-radius: 16px; transform: translateY(12px); opacity: 0; transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); }
  .folha--detalhe.folha--aberta .folha__caixa { transform: none; opacity: 1; }
  .folha--detalhe .folha__alca { display: none; }
  .folha--detalhe .folha__topo { padding-top: var(--space-4); }
  .folha--detalhe .folha__acoes { display: flex; gap: var(--space-2); padding-bottom: var(--space-4); }
  .folha--detalhe .folha__acoes .btn { width: auto; flex: 1 1 0; }
}

/* ════════ o (i) e o sino (05/09/2026) ════════ */
.info {
  display: inline-grid; place-items: center; vertical-align: middle;
  width: 22px; height: 22px; margin-left: 4px; padding: 0;
  border: 0; border-radius: var(--radius-full);
  background: var(--pa-azul-soft); color: var(--pa-azul);
  cursor: pointer; flex: none;
}
.info svg { width: 13px; height: 13px; }
.info:hover { background: var(--pa-azul); color: var(--text-inverted); }
.info:focus-visible { outline: 2px solid var(--pa-azul); outline-offset: 2px; }
h1 .info, h2 .info, h3 .info, .card__titulo .info, .secao__titulo .info { position: relative; top: -1px; }
.field__label .info { margin-left: 6px; }
button.hero__sino { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.dt__item--visto { opacity: .72; }
/* botão + (i) na mesma linha, sem esticar o botão */
.acoes-linha { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* pé da lista longa: "ver mais" e o contador (components/lista.js) */
.lista__pe { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 var(--space-2); }

/* ════════ a foto do candidato na capa (05/09/2026) ════════
   "Eles gostam de ser vistos": grande, no centro da capa, com nome e cargo;
   na barra compacta do celular vira miniatura ao lado da marca. A pessoa
   logada continua à direita, um pouco maior do que era. */
.hero__candidato { grid-column: 2; position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; }
.hero__candidato-foto {
  display: grid; place-items: center; overflow: hidden;
  width: 88px; height: 88px; border-radius: var(--radius-full);
  background: var(--pa-navy-2); color: var(--text-inverted);
  border: 3px solid var(--pa-branco-90); box-shadow: var(--pa-sombra-mapa);
  font-size: 28px; font-weight: 700; letter-spacing: -0.5px;
}
.hero__candidato-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__candidato-nome { max-width: 100%; font-size: 14px; font-weight: 700; color: var(--text-inverted); text-shadow: var(--pa-sombra-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero__candidato-cargo { font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--pa-branco-72); white-space: nowrap; }
.hero__avatar { width: 44px; height: 44px; font-size: 14px; }
.hero__quem strong { font-size: 14px; }
.hero__quem small { font-size: 11px; }
@media (max-height: 780px) { .hero__candidato-foto { width: 72px; height: 72px; font-size: 24px; } .hero__candidato-nome { font-size: 13px; } }
.hero__candidato-mini { display: block; width: 32px; height: 32px; border-radius: var(--radius-full); overflow: hidden; border: 2px solid var(--pa-branco-90); flex: none; }
.hero__candidato-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 56rem) { .hero__candidato { display: none; } }

/* recorte de foto (components/recorte-foto.js) */
.recorte__caixa { max-width: 24rem; }
.recorte__area { position: relative; width: 260px; height: 260px; margin: 0 auto; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-inverted); touch-action: none; cursor: grab; }
.recorte__area:active { cursor: grabbing; }
.recorte__img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.recorte__mascara { position: absolute; inset: 0; border-radius: var(--radius-full); box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.5); pointer-events: none; }
.recorte__zoom-rotulo { display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--text-secondary); }
.recorte__zoom { width: 100%; }
.foto-campo__previa--grande { width: 96px; height: 96px; }
.foto-campo--grande { grid-template-columns: 96px 1fr; }
/* o admin troca a foto pela capa: a foto é botão, com a câmera no canto */
button.hero__candidato { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; color: inherit; }
button.hero__candidato:hover .hero__candidato-foto { border-color: var(--text-inverted); box-shadow: var(--pa-sombra-ativo); }
button.hero__candidato:focus-visible { outline: 2px solid var(--text-inverted); outline-offset: 4px; border-radius: 12px; }
.hero__candidato-foto { position: relative; overflow: visible; }
.hero__candidato-foto img { border-radius: var(--radius-full); }
.hero__candidato-foto svg { width: 34px; height: 34px; opacity: .85; }
.hero__candidato-trocar { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--pa-vermelho-moldura); color: var(--text-inverted); border: 2px solid var(--text-inverted); box-shadow: var(--pa-sombra-ativo); }
.hero__candidato-trocar svg { width: 13px; height: 13px; opacity: 1; }
button.hero__candidato-mini { border: 2px solid var(--pa-branco-90); background: none; padding: 0; cursor: pointer; }
.hero__candidato-mini--vazio { display: grid; place-items: center; color: var(--text-inverted); background: var(--pa-navy-2); }
.hero__candidato-mini--vazio svg { width: 16px; height: 16px; }

/* ════════ Permissões: a matriz pessoa × módulo (05/09/2026) ════════ */
.perm__wrap { margin-top: var(--space-2); }
.perm { min-width: 40rem; }
.perm th, .perm td { padding: var(--space-2) var(--space-2); vertical-align: middle; }
.perm__pessoa { text-align: left; min-width: 11rem; }
.perm__pessoa strong { display: block; font-weight: var(--fw-strong); }
.perm__pessoa small { display: block; font-size: var(--text-xs); color: var(--pa-cinza); margin-top: 2px; }
.perm__modulo { text-align: center; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.4px; text-transform: uppercase; color: var(--pa-cinza); }
.perm__modulo span { display: inline-block; max-width: 5.5rem; white-space: normal; line-height: 1.2; }
.perm__celula { text-align: center; }
.perm__marca { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; cursor: pointer; border-radius: var(--radius-md); }
.perm__marca:hover { background: var(--pa-fundo); }
.perm__marca input { width: 20px; height: 20px; margin: 0; cursor: pointer; }
.perm__marca input:disabled { cursor: not-allowed; opacity: .55; }
.perm__diferente { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--pa-vermelho-moldura); }
.perm__linha--desligada { opacity: .55; }
@media (max-width: 56rem) {
  .perm { min-width: 36rem; }
  .perm__pessoa { min-width: 9rem; }
  .perm__marca { width: 40px; height: 40px; }
}