@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;
  color: #111827;
  background: #f5f7fa;
  font-family: 'Inter', sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  background: #fff;
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  /* flex column: o rodapé (irmão do <main>/<header> em templates/allauth/
     layouts/base.html, que não usa a estrutura #app-shell/.app-main do
     base.html) só fica colado no fim da página se o body distribuir a
     altura -- sem isso, páginas allauth com pouco conteúdo (ex.: tela de
     logout/confirmação do Google) deixam o rodapé flutuando no meio. */
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e9f0 100%);
  overscroll-behavior-y: none;
}

.site-header {
  margin: 0;
  background: #fff;
  color: #0f172a;
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.container {
  width: min(1180px, calc(100% - 1.25rem));
  margin: 0 auto;
  padding: 1.25rem 0;
}

.header-inner {
  width: 100%;
  padding: 0.85rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  min-width: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

.brand a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #0f172a;
}

.brand-logo {
  height: 2.75rem;
  width: auto;
  display: block;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.brand-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}

.brand-text {
  font-weight: 700;
  font-size: 1.15rem;
  color: #0f172a;
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.main-nav a {
  /* "Entrar" era um link de texto solto -- lia mal isolado num header
     simples de 1 ação só, e sem contorno nenhum ficava perdido/pouco
     convidativo perto da logo. Vira um botão de verdade, mesma
     linguagem visual do .fbtn usado no resto do site (pill azul).
     Achado de UX mobile, 2026-08-13. */
  min-height: 2.75rem;
  padding: 0 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #1a4b8f;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  transition: transform .15s ease, opacity .15s ease;
}

.main-nav a:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

.page-shell {
  padding-top: 2rem;
  flex: 1;
}

.page-hero {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
  /* Dentro de um pai flex (.app-content), continua ocupando a largura
     toda e alinhado à esquerda, em vez de encolher/centralizar junto
     com o card abaixo (só o card deve ficar mais estreito e centrado). */
  align-self: stretch;
  width: 100%;
}

.eyebrow {
  color: #1a4b8f;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 0.75rem;
}

.page-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 2.5vw, 3rem);
  line-height: 1.05;
}

.page-hero p {
  margin: 1rem 0 0;
  color: var(--text-secondary, #475569);
  max-width: 56rem;
  font-size: 1rem;
  line-height: 1.8;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

.stat-card {
  background: #fff;
  border-radius: 1rem;
  padding: 1.35rem 1.25rem;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
  display: block;
  text-decoration: none;
  border: 2px solid transparent;
  transition: border-color .15s ease, transform .15s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-card.active {
  border-color: #193657;
}

.stat-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted, #6b7280);
  margin-bottom: 0.75rem;
}

/* Mesma cor escura do título de seção (.section-heading) em todos os
   cards -- eram coloridos por categoria antes (azul/vermelho/laranja/
   verde), o que lia como decoração e não como "esse é o número em
   destaque", que é o efeito que o card de Urgentes/section-heading tem. */
.stat-num {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
}

.search-panel {
  background: var(--bg-surface, #fff);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
  margin-bottom: 1.25rem;
}

/* Só o filtro de tema acompanha o cabeçalho ao rolar (a barra de busca
   grande voltou a ficar estática, como antes -- ficar sticky tampava boa
   parte da primeira fileira de cards ao rolar listas longas). Pill já
   pequena o bastante pra não precisar de um modo "compacto" à parte.
   --header-height é medido em JS (initStickyHeaderOffset em main.js). */
.tema-filter-floating {
  position: sticky;
  top: var(--header-height, 4.5rem);
  z-index: 14;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 2rem;
  pointer-events: none;
}

.tema-filter-floating .tema-dropdown {
  margin-top: 0;
  pointer-events: auto;
}

.tema-filter-floating .tema-dropdown-trigger {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

/* Esse dropdown é o único ancorado à direita (.tema-filter-floating usa
   justify-content: flex-end) -- o painel padrão (.tema-dropdown-panel)
   nasce com left:0, relativo ao gatilho, então num gatilho já perto da
   borda direita da tela ele estourava o viewport em mobile (achado da
   auditoria, 2026-08-13: caixa de busca e itens cortados em 360px).
   Ancorar pela direita resolve sem afetar o outro uso do mesmo painel
   (dropdown de "Área de interesse", que já nasce alinhado à esquerda). */
.tema-filter-floating .tema-dropdown-panel {
  left: auto;
  right: 0;
}

.search-form {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.search-form input {
  flex: 1;
  min-width: 240px;
  padding: 1rem 1.1rem;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  font-size: 1rem;
  outline: none;
}

.search-input-wrapper {
  position: relative;
  flex: 1;
  min-width: 240px;
}

.search-input-wrapper input {
  width: 100%;
  min-width: 0;
  /* Junto com o scrollIntoView() no focus (main.js), garante que a
     topbar fixa não cubra o campo depois de rolar pra ele em mobile. */
  scroll-margin-top: calc(var(--header-height, 4.5rem) + 1rem);
}

.search-suggestions {
  position: absolute;
  z-index: 15;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 25px 55px rgba(15, 23, 42, 0.18);
  padding: 0.5rem;
  max-height: 360px;
  overflow-y: auto;
}

.search-suggestions.hidden {
  display: none;
}

.search-suggestion-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.65rem;
  text-decoration: none;
}

.search-suggestion-item:hover {
  background: #f1f5f9;
}

.search-suggestion-title {
  font-weight: 600;
  color: #111827;
  font-size: 0.9rem;
}

.search-suggestion-meta {
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
}

.search-suggestion-empty {
  padding: 0.75rem 0.85rem;
  margin: 0;
  color: var(--text-muted, #64748b);
  font-size: 0.85rem;
}

.search-form button,
.fbtn,
.modal-close {
  min-height: 2.75rem;
}

.search-form input:focus {
  border-color: #1a4b8f;
  box-shadow: 0 0 0 4px rgba(26, 75, 143, 0.08);
}

.fbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.4rem;
  border: none;
  border-radius: 999px;
  background: #1a4b8f;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}

.fbtn:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

.perfil-conta-link-danger-btn {
  background: #dc2626;
}

.tema-dropdown {
  position: relative;
  margin-top: 1rem;
}

.tema-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 220px;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  cursor: pointer;
  list-style: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.tema-dropdown-trigger::-webkit-details-marker,
.tema-dropdown-trigger::marker {
  display: none;
  content: '';
}

.tema-dropdown[open] .tema-dropdown-trigger {
  border-color: #1a4b8f;
  box-shadow: 0 0 0 4px rgba(26, 75, 143, 0.1);
}

.tema-dropdown-icon {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  color: #1a4b8f;
  flex-shrink: 0;
}

.tema-dropdown-icon svg,
.tema-dropdown-chevron svg {
  width: 100%;
  height: 100%;
}

.tema-dropdown-label {
  flex: 1;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tema-dropdown-label strong {
  color: #1a4b8f;
}

.tema-dropdown-chevron {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  color: #94a3b8;
  transition: transform .15s ease;
  flex-shrink: 0;
}

.tema-dropdown[open] .tema-dropdown-chevron {
  transform: rotate(180deg);
}

.tema-dropdown-panel {
  position: absolute;
  z-index: 15;
  top: calc(100% + 0.5rem);
  left: 0;
  width: min(420px, 90vw);
  background: #fff;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 25px 55px rgba(15, 23, 42, 0.18);
  padding: 0.75rem;
}

.tema-dropdown-search {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  margin-bottom: 0.6rem;
  /* 16px evita zoom automático ao focar em mobile -- achado da auditoria
     mobile, 2026-08-13. */
  font-size: 1rem;
  outline: none;
}

.tema-dropdown-search:focus {
  border-color: #1a4b8f;
  box-shadow: 0 0 0 3px rgba(26, 75, 143, 0.08);
}

.tema-dropdown-list {
  max-height: 320px;
  overflow-y: auto;
  display: grid;
  gap: 0.15rem;
}

.tema-option {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 0.6rem;
  color: #334155;
  text-decoration: none;
  font-size: 0.87rem;
}

.tema-option:hover {
  background: #f1f5f9;
}

.tema-option.active {
  background: #1a4b8f;
  color: #fff;
  font-weight: 600;
}

.tema-option.hidden {
  display: none;
}

.cards-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.home-section {
  margin-bottom: 2.5rem;
}

.section-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 1rem;
}

.filtro-limpar-link {
  margin-left: 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #193657;
  text-decoration: none;
}

.filtro-limpar-link:hover {
  text-decoration: underline;
}

.card {
  border-radius: 1.25rem;
  background: #fff;
  padding: 1.35rem;
  position: relative;
  border-left: 4px solid #1a4b8f;
  box-shadow: 0 25px 45px rgba(15, 23, 42, 0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 55px rgba(15, 23, 42, 0.12);
}

.card-brief {
  display: grid;
  gap: 0.65rem;
  background:
    linear-gradient(180deg, rgba(26, 75, 143, 0.03), rgba(255, 255, 255, 0.98)),
    #fff;
}

.card-meta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-secondary, #475569);
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.meta-item svg {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  color: #94a3b8;
}

.meta-sep {
  color: #cbd5e1;
}

.card.urgente {
  border-left-color: #dc2626;
  animation: urgentePulse 3s infinite;
}

@keyframes urgentePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
  50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0.08); }
}

.card-top-row {
  display: flex;
  justify-content: space-between;
  /* center, não flex-start -- o botão de favoritar (44px, alvo de toque
     WCAG) e os badges de prioridade (~30px) tinham alturas diferentes;
     alinhados pelo topo, os badges ficavam visualmente ~7px acima do
     centro dos ícones ao lado (achado medindo bounding boxes, não só
     olhando a imagem). */
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}

.favorito-form {
  display: contents;
}

.favorito-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}

.favorito-btn svg {
  width: 1.35rem;
  height: 1.35rem;
}

.favorito-btn:hover {
  transform: translateY(-1px);
  color: #f59e0b;
}

.favorito-btn.active {
  color: #f59e0b;
}

.card-actions-row {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.detail-header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.icon-action-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
  list-style: none;
}

.icon-action-btn::-webkit-details-marker,
.icon-action-btn::marker {
  display: none;
  content: '';
}

.icon-action-btn svg {
  width: 1.15rem;
  height: 1.15rem;
}

.icon-action-btn:hover {
  transform: translateY(-1px);
  color: #193657;
}

.print-dropdown,
.share-dropdown {
  position: relative;
}

/* Menu de impressão abre ao passar o mouse (ou ao focar via teclado/toque,
   pra continuar acessível sem hover de verdade) -- sem JS nenhum, pedido
   explícito do usuário pra imitar o menu "Versões para impressão" do site
   da Câmara dos Deputados. */
.print-dropdown .card-action-dropdown-panel {
  display: none;
}

.print-dropdown:hover .card-action-dropdown-panel,
.print-dropdown:focus-within .card-action-dropdown-panel {
  display: flex;
}

.card-action-dropdown-panel {
  position: absolute;
  z-index: 15;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
  padding: 0.35rem;
}

.card-action-dropdown-panel a,
.card-action-dropdown-panel button {
  border: none;
  background: none;
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  color: #334155;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}

.card-action-dropdown-panel a:hover,
.card-action-dropdown-panel button:hover {
  background: #f1f5f9;
}


.card-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
}

.chip-tema {
  background: #eff6ff;
  color: #1a4b8f;
  border: 1px solid rgba(26, 75, 143, 0.15);
}

.chip-tema-link {
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease;
}

.chip-tema-link:hover {
  filter: brightness(0.95);
  text-decoration: underline;
}

.card h2 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
  max-height: 2.6em;
}

.card h2 a {
  text-decoration: none;
  color: #111827;
}

.card h2 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.card h2 a:hover {
  text-decoration: underline;
}

.card-excerpt {
  color: var(--text-secondary, #475569);
  margin: 0;
  line-height: 1.55;
  max-height: 3.1em;
}

.card-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--text-muted, #6b7280);
  font-size: 0.95rem;
}

.card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-start;
  padding-top: 0.65rem;
  border-top: 1px solid #f1f5f9;
}

.footer-movimentacao {
  color: var(--text-muted, #6b7280);
  font-size: 0.85rem;
  line-height: 1.5;
}

.tag-alta,
.tag-media,
.tag-baixa,
.tag-vitoria,
.tag-normal,
.tag-urgente,
.tag-aprovada,
.badge-pauta,
.badge-parada {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tag-alta   { background: linear-gradient(135deg, #dc2626, #b91c1c); color: #fff; }
.tag-media  { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.tag-baixa  { background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; }
.tag-vitoria{ background: linear-gradient(135deg, #FFC72C, #eab308); color: #1A4B8F; font-weight: 700; }
.tag-normal { background: linear-gradient(135deg, #f8fafc, #f1f5f9); color: #475569; border: 1px solid #cbd5e1; }
.tag-urgente{ background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; font-weight: 700; letter-spacing: .05em; animation: pulse 2s infinite; }
.tag-aprovada{ background: linear-gradient(135deg, #059669, #047857); color: #fff; font-weight: 700; letter-spacing: .05em; }
/* badge-pauta tinha uma cor fixa (vermelha) pra "PAUTA" e "SEM PAUTA" --
   "sem pauta" (situação neutra, maioria dos casos) ficava com a mesma cor
   de alerta de "pauta" (situação que pede ação). -on/-off distinguem as
   duas situações. */
.badge-pauta-on  { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.badge-pauta-off { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.badge-parada { background: #fefce8; color: #a16207; border: 1px solid #fef08a; font-size: 10px; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary, #475569);
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.pagination-link {
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #1a4b8f;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
}

.pagination-link:hover {
  border-color: #1a4b8f;
}

.pagination-status {
  font-size: 0.85rem;
  color: var(--text-muted, #64748b);
}

[data-theme="dark"] .pagination-link {
  background: var(--bg-surface-alt);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.auth-page {
  display: flex;
  justify-content: center;
  padding: 2rem 0 4rem;
}

.auth-card {
  width: min(420px, 100%);
  background: #fff;
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 25px 55px rgba(15, 23, 42, 0.1);
}

/* Política de Privacidade tem texto longo -- 420px deixava a maior parte
   da tela em branco (mesmo raciocínio do .perfil-card). */
.auth-card-wide {
  width: 100%;
  max-width: 720px;
}

.exclusao-card {
  text-align: center;
}

.exclusao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  margin-bottom: 1.1rem;
}

.exclusao-icone svg {
  width: 1.8rem;
  height: 1.8rem;
}

.exclusao-icone-alerta {
  background: #fef2f2;
  color: #dc2626;
}

.exclusao-icone-sucesso {
  background: #f0fdf4;
  color: #15803d;
}

.exclusao-titulo {
  margin: 0 0 0.75rem;
  font-size: 1.3rem;
}

.exclusao-texto {
  color: var(--text-secondary, #475569);
  line-height: 1.7;
  margin: 0 0 1.1rem;
}

.exclusao-texto-erro {
  color: #dc2626;
}

.exclusao-lista {
  text-align: left;
  margin: 0 auto 1.5rem;
  max-width: 30rem;
  padding-left: 1.25rem;
  color: var(--text-secondary, #475569);
  line-height: 1.9;
}

.exclusao-acoes {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
}

.exclusao-acoes .fbtn {
  width: auto;
  flex: 1;
}

.exclusao-cancelar-btn {
  background: var(--bg-surface-alt, #f1f5f9);
  color: var(--text-primary, #111827);
}

/* Meu perfil reaproveita .auth-card (login/cadastro), mas tem mais campos
   (foto, nome/sobrenome, município/UF, setor, cargo, telefone) -- 420px
   deixava a maior parte da tela em branco. */
.perfil-card {
  width: min(820px, 100%);
}

/* Campos relacionados lado a lado (Nome/Sobrenome, Município/UF, Setor/
   Cargo) em vez de empilhados -- usa a largura maior do card de verdade,
   em vez de só esticar cada campo sozinho. Cada .form-row é 1 item do
   flex column do .auth-form (mesmo espaçamento vertical de sempre); por
   dentro é um grid de 2 colunas. */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.1rem;
}

.form-row-uf {
  grid-template-columns: 2fr 1fr;
}

.form-field {
  display: flex;
  flex-direction: column;
}

.auth-subtitle {
  color: var(--text-muted, #6b7280);
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
  line-height: 1.6;
}

.auth-error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.88rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="tel"] {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.85rem;
  /* 16px é o limiar que evita o zoom automático do Safari/Chrome mobile
     ao focar o campo -- estava em 0.95rem (15.2px), achado da auditoria
     mobile (2026-08-13). */
  font-size: 1rem;
  margin-bottom: 0.9rem;
  outline: none;
}

.auth-form input:focus {
  border-color: #1a4b8f;
  box-shadow: 0 0 0 3px rgba(26, 75, 143, 0.08);
}

.auth-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary, #475569);
  margin-bottom: 0.75rem;
}

.auth-link {
  align-self: flex-end;
  font-size: 0.82rem;
  color: #1a4b8f;
  text-decoration: none;
  margin-bottom: 1rem;
}

.auth-link:hover {
  text-decoration: underline;
}

.auth-submit {
  width: 100%;
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-muted, #9ca3af);
  font-size: 0.82rem;
  margin: 1.5rem 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid #e5e7eb;
}

.auth-divider span {
  padding: 0 0.85rem;
}

.google-hint {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted, #6b7280);
  background: var(--bg-surface-alt, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 0.65rem;
  padding: 0.7rem 0.9rem;
  margin: 0 0 0.85rem;
}

.google-hint a {
  color: #1a4b8f;
  font-weight: 600;
  text-decoration: none;
}

.google-hint a:hover {
  text-decoration: underline;
}

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.85rem;
  background: #fff;
  color: #1f2937;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease;
}

.google-btn:hover {
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}

.auth-footer {
  text-align: center;
  margin: 1.5rem 0 0;
  font-size: 0.88rem;
  color: var(--text-muted, #6b7280);
}

.auth-footer a {
  color: #1a4b8f;
  font-weight: 600;
  text-decoration: none;
}

.auth-footer a:hover {
  text-decoration: underline;
}

.perfil-avatar-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.perfil-avatar-preview {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.perfil-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a4b8f;
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
}

.usuario-publico-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.usuario-publico-avatar {
  width: 4.5rem;
  height: 4.5rem;
  font-size: 1.6rem;
}

/* Widget nativo do Django (ClearableFileInput) -- funcionalmente ainda é
   ele quem recebe o arquivo/aciona o "Limpar", só não aparece mais: a UI
   visível agora é o lápis + menu abaixo, que só disparam clique nele. */
.perfil-avatar-widget-hidden {
  display: none;
}

.perfil-avatar-edit {
  position: relative;
  flex-shrink: 0;
}

.perfil-avatar-edit-btn {
  /* Área de toque real de 44px (WCAG), maior que o círculo visível de
     propósito -- o ::before abaixo desenha só o círculo pequeno no meio
     dela, então o botão não fica gigante ao lado do avatar. */
  position: absolute;
  right: -0.65rem;
  bottom: -0.65rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  list-style: none;
  opacity: 1;
  transform: scale(1);
  transition: opacity .15s ease, transform .15s ease;
}

.perfil-avatar-edit-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #1a4b8f;
  border: 2px solid var(--surface, #fff);
}

/* Some no hover só em dispositivo com mouse de verdade -- em touchscreen
   (hover:none) não existe um jeito confiável de "passar o mouse" antes de
   tocar, então o botão ficava só tecnicamente clicável mas invisível,
   sem nenhuma pista de que estava ali (achado da auditoria mobile,
   2026-08-13, confirmado medindo opacity computado = 0 sem hover). */
@media (hover: hover) {
  .perfil-avatar-edit-btn {
    opacity: 0;
    transform: scale(0.85);
  }

  .perfil-avatar-edit:hover .perfil-avatar-edit-btn,
  .perfil-avatar-edit:focus-within .perfil-avatar-edit-btn,
  .perfil-avatar-menu[open] .perfil-avatar-edit-btn {
    opacity: 1;
    transform: scale(1);
  }
}

.perfil-avatar-edit-btn::-webkit-details-marker,
.perfil-avatar-edit-btn::marker {
  display: none;
  content: '';
}

.perfil-avatar-edit-btn svg {
  position: relative;
  z-index: 1;
  width: 0.85rem;
  height: 0.85rem;
}

.perfil-avatar-menu-panel {
  position: absolute;
  z-index: 15;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
  padding: 0.35rem;
}

.perfil-avatar-menu-panel button {
  border: none;
  background: none;
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  color: #334155;
  cursor: pointer;
}

.perfil-avatar-menu-panel button:hover {
  background: #f1f5f9;
}

.perfil-avatar-menu-panel button[data-avatar-action="remover"] {
  color: #b3261e;
}

/* Paginas geradas pelo allauth (logout, confirmacao social, reset de senha etc.)
   usam elementos HTML puros (h1/form/input/button/p), sem classes. */
.auth-card h1 {
  margin: 0 0 0.75rem;
  font-size: 1.4rem;
  color: var(--text-primary, #111827);
}

.auth-card p {
  color: var(--text-muted, #6b7280);
  line-height: 1.6;
  margin: 0 0 1.25rem;
}

.auth-card form p {
  margin: 0 0 0.9rem;
}

.auth-card form label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
}

.auth-card form input:not([type="hidden"]):not([type="checkbox"]):not([type="file"]),
.auth-card form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.85rem;
  /* 16px é o limiar que evita o zoom automático do Safari/Chrome mobile
     ao focar o campo -- estava em 0.95rem (15.2px). Essa regra (mais
     específica que .auth-form input[type=...] logo abaixo) é quem
     realmente manda em cadastro/login/perfil -- achado da auditoria
     mobile, 2026-08-13: a primeira tentativa de fix mexeu na regra
     errada, essa aqui que vencia a cascata o tempo todo. */
  font-size: 1rem;
  outline: none;
}

.auth-card form input:focus,
.auth-card form textarea:focus {
  border-color: #1a4b8f;
  box-shadow: 0 0 0 3px rgba(26, 75, 143, 0.08);
}

.auth-card form button[type="submit"],
.auth-card form a[href] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem 1.4rem;
  border: none;
  border-radius: 999px;
  background: #1a4b8f;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  margin-top: 0.5rem;
}

.auth-card form button[type="submit"]:hover,
.auth-card form a[href]:hover {
  opacity: 0.95;
}

.auth-messages {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.auth-messages li {
  background: #eff6ff;
  color: #1a4b8f;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.detail-panel {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 35px 80px rgba(15, 23, 42, 0.12);
}

.detail-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

/* Ícones de ação (favoritar/imprimir/compartilhar) e badges de status
   (URGENTE/APROVADA) juntos numa linha só, no topo do card -- antes os
   ícones viviam num bloco separado, que em mobile (.detail-header
   empilhado) caía abaixo do título inteiro, longe do que ele controla
   (achado real do usuário, captura de tela de produção). */
.detail-header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.detail-header h1 {
  margin: 0.5rem 0 0;
  font-size: clamp(1.9rem, 2.2vw, 2.75rem);
}

.detail-title-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}

.detail-title-link:hover {
  text-decoration: underline;
}

.detail-title-link-icon {
  width: 0.65em;
  height: 0.65em;
  flex-shrink: 0;
  align-self: center;
  color: var(--text-muted, #6b7280);
}

.detail-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
  align-items: center;
}

.detail-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 2.2fr 1fr;
  /* Sem isso, os dois lados esticam pra ocupar a mesma altura (default do
     grid) -- a coluna da esquerda (Resumo etc.) inchava/deformava junto
     conforme a lista de comentários da direita crescia. Cada coluna agora
     usa só a altura do próprio conteúdo. */
  align-items: start;
}

.detail-panel-main {
  display: grid;
  gap: 1.5rem;
  /* Item de grid sem min-width:0 nunca encolhe abaixo do próprio
     conteúdo -- mesma causa do overflow horizontal já corrigido na
     topbar (achado da auditoria mobile, 2026-08-13): em mobile
     (.detail-grid vira 1 coluna), essa seção ficava ~66px mais larga
     que o viewport, sem cortar nada visível mas empurrando o documento
     inteiro pra scroll horizontal. */
  min-width: 0;
}

.detail-sidebar {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

.panel-block {
  background: #fff;
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
  min-width: 0;
}

.panel-block h2,
.panel-block h3 {
  margin: 0 0 0.9rem;
  font-size: 1rem;
}

.panel-block p {
  margin: 0;
  line-height: 1.8;
  color: var(--text-secondary, #475569);
  /* Nunca corta palavra no meio (ex.: ementa/resumo comprido em tela
     estreita) -- rede de segurança mesmo com o overflow horizontal já
     corrigido acima. */
  overflow-wrap: break-word;
}

.two-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.merit-panel {
  padding-top: 1.25rem;
}

.merit-columns {
  display: grid;
  gap: 1rem;
}

.merit-columns > div h3 {
  font-size: 0.82rem;
  color: var(--text-muted, #6b7280);
  margin-bottom: 0.5rem;
}

.noticias-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.noticia-card {
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 0.9rem;
}

.noticia-titulo {
  display: block;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  text-decoration: none;
  line-height: 1.4;
}

.noticia-titulo:hover {
  text-decoration: underline;
}

.noticia-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}

.noticia-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: #eff6ff;
  color: #1a4b8f;
  border: 1px solid rgba(26, 75, 143, 0.15);
}

.noticia-data {
  font-size: 0.78rem;
  color: var(--text-muted, #6b7280);
}

.noticia-resumo {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary, #475569);
}

.anexos-lista {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.anexo-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 0.8rem;
}

.anexo-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--text-muted, #6b7280);
}

.anexo-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.anexo-nome {
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  text-decoration: none;
  overflow-wrap: break-word;
}

.anexo-nome:hover {
  text-decoration: underline;
}

.anexo-meta {
  font-size: 0.76rem;
  color: var(--text-muted, #6b7280);
}

.anexo-status {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
}

.anexo-status-pendente {
  background: #fef3c7;
  color: #92400e;
}

.anexo-status-rejeitado {
  background: #fee2e2;
  color: #b3261e;
}

.anexo-aviso-moderacao {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.6rem 0.85rem;
  border-radius: 0.75rem;
  background: #eef2ff;
  color: #193657;
  font-size: 0.78rem;
}

.anexo-aviso-moderacao svg {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
}

.anexo-upload-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: 1rem;
  /* Item de grid dentro de .anexo-form (display:grid) -- sem isso, o
     texto sem quebra de .anexo-upload-hint/-filename empurra a linha
     inteira pra fora do viewport em mobile (mesmo bug de "grid/flex item
     não encolhe abaixo do conteúdo" de outras seções do site). */
  min-width: 0;
}

.anexo-upload-info {
  flex: 1;
  min-width: 0;
}

.anexo-upload-hint,
.anexo-upload-filename {
  display: block;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anexo-upload-hint {
  color: var(--text-muted, #6b7280);
}

.anexo-upload-filename {
  color: var(--text-primary, #1e293b);
  font-weight: 600;
}

.anexo-upload-remove-btn {
  flex-shrink: 0;
  border: none;
  background: none;
  color: #94a3b8;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}

.anexo-upload-remove-btn:hover {
  color: #dc2626;
}

.anexo-excluir-form {
  margin: 0;
}

.anexo-excluir-btn {
  border: none;
  background: none;
  color: #94a3b8;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}

.anexo-excluir-btn:hover {
  color: #dc2626;
}

.anexo-form {
  display: grid;
  gap: 0.75rem;
}

.anexo-form input[type="text"] {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 1rem;
  font-size: 0.9rem;
}

.participation-form {
  display: grid;
  gap: 1rem;
}

.participation-form input,
.participation-form textarea {
  width: 100%;
  padding: 0.95rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 1rem;
  /* 16px evita zoom automático ao focar em mobile -- achado da auditoria
     mobile, 2026-08-13. */
  font-size: 1rem;
  outline: none;
}

.participation-form textarea {
  min-height: 130px;
  resize: vertical;
}

.field-label {
  margin-bottom: 0.5rem;
  display: block;
  /* Era 0.75rem (12px) -- achado da auditoria mobile (2026-08-13):
     abaixo do ideal de legibilidade. Continua pequeno de propósito (é
     rótulo em caixa alta, não texto de leitura), só não tão no limite. */
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
}

.field-error {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  font-size: 0.82rem;
  color: #dc2626;
}

/* Valor não-editável dentro de um formulário (ex.: Perfil de acesso em
   /perfil/ -- classificado automaticamente no cadastro, só o Root/
   Administrador FNP altera, via Admin). Mesma forma/tamanho de um input
   real pra não destoar visualmente, com fundo neutro sinalizando "travado". */
.field-static {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.85rem;
  font-size: 1rem;
  margin-bottom: 0.9rem;
  background: var(--bg-surface-alt, #f8fafc);
  color: var(--text-secondary, #475569);
}

.field-static svg {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  opacity: 0.6;
}

.toast.success {
  border-radius: 1rem;
}

.comments {
  list-style: none;
  padding: 0;
  margin: 0;
  /* .comments-nested (mais abaixo) sobrescreve display/gap com os
     próprios valores -- isso aqui vale só pra lista raiz de
     comentários. Precisa de gap de verdade agora que o cartão cinza
     em volta de cada comentário foi removido (só o balão sobrou como
     elemento visual) -- sem isso os comentários raiz ficariam colados
     uns nos outros. */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

#form-comentario {
  margin-top: 1.5rem;
}

.comments-ver-mais {
  display: block;
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.65rem 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.65rem;
  background: transparent;
  color: #193657;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color .15s ease;
}

.comments-ver-mais:hover {
  background: #f1f5f9;
}

[data-theme="dark"] .comments-ver-mais {
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .comments-ver-mais:hover {
  background: var(--bg-surface-alt);
}

.forum-block .forum-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0.9rem;
}

.forum-header h2 {
  margin: 0;
}

.forum-metrics {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-muted, #6b7280);
}

.forum-metric strong {
  color: #193657;
  font-weight: 700;
}

/* Sem cartão próprio (sem padding/fundo/borda) -- só o balão
   (.comment-bubble) carrega o visual, igual ao Facebook, que nunca
   aninha uma caixa dentro de outra. Antes só a resposta aninhada tinha
   esse tratamento (por falta de largura no mobile); unificado pro
   comentário raiz também (2026-08-14, a pedido do usuário -- "melhorar
   o fórum desktop igual fizemos com o mobile"): a caixa cinza duplicada
   (cartão cinza-claro por fora, balão cinza-claro por dentro, cores
   quase idênticas) deixava a separação entre nome+texto e a barra de
   metadados difícil de enxergar, e o desktop tinha o mesmo problema do
   mobile mesmo com mais espaço disponível -- o fórum vive na coluna
   lateral estreita da página de detalhe, não no conteúdo principal. */
.comment-card {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  /* Resposta aninhada (.comments-nested, abaixo) é grid -- sem
     min-width:0 este <li> não encolhe abaixo do próprio conteúdo dentro
     da coluna implícita do grid, e cada nível de resposta empurra o
     comentário pra fora do viewport em telas estreitas (achado da
     auditoria mobile, 2026-08-13 -- overflow real em produção, não só a
     topbar). */
  min-width: 0;
}

.comment-avatar {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: #193657;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}

.comment-avatar-img {
  object-fit: cover;
}

/* Resposta aninhada com avatar menor que o comentário raiz -- mesma
   hierarquia visual do Facebook (o cartão em si já foi removido de
   ambos os níveis acima, ver .comment-card). */
.comment-card.comment-reply {
  gap: 0.5rem;
}

.comment-card.comment-reply .comment-avatar {
  width: 1.7rem;
  height: 1.7rem;
  font-size: 0.7rem;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

/* Nome + texto agrupados num "balão" (padrão Facebook) -- separa
   claramente o conteúdo do comentário da barra de metadados/ações
   abaixo, em vez de nome+data disputando espaço na mesma linha do
   texto (achado via captura de tela real, 2026-08-13: data cortando na
   borda da tela e resposta aninhada quebrando palavra por palavra por
   falta de largura). */
.comment-bubble {
  background: #eef1f5;
  border-radius: 1rem;
  padding: 0.55rem 0.85rem;
  display: inline-block;
  max-width: 100%;
}

.comment-author {
  margin-bottom: 0.15rem;
  font-size: 0.92rem;
}

.comment-time {
  font-size: 0.75rem;
  color: #94a3b8;
  white-space: nowrap;
}

.comment-author-link {
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

.comment-author-link:hover {
  text-decoration: underline;
}

.comment-bubble p {
  margin: 0;
  line-height: 1.6;
  color: #334155;
  overflow-wrap: break-word;
}

.comment-midia-link {
  display: block;
  margin-top: 0.5rem;
}

.comment-midia-imagem {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: 0.75rem;
  object-fit: cover;
}

.comment-midia-video {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: 0.75rem;
}

.comment-video-wrapper {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin-top: 0.5rem;
}

/* Botão de velocidade sempre visível, ao lado dos controles nativos --
   o Chrome/Firefox escondem "Playback speed" dentro do menu de
   configurações (o "3 pontinhos") do <video controls>, exigindo 2
   cliques. Isso deixa a troca de velocidade num clique só, sem digging. */
.comment-video-speed-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

/* Botão de velocidade compartilhado (áudio e vídeo) -- cicla
   0.5x/1x/1.5x/2x, sempre acessível, nunca escondido atrás de menu. */
.comment-media-speed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #193657;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.comment-video-speed-btn {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.comment-media-speed-btn:hover {
  border-color: #193657;
}

.comment-video-speed-btn:hover {
  border-color: #fff;
}

/* Player de áudio estilo WhatsApp: botão redondo de play/pause, barra de
   progresso clicável, tempo e velocidade -- substitui o <audio controls>
   nativo, que no Chrome esconde volume/velocidade atrás do "3 pontinhos"
   quando o elemento é estreito. */
.comment-audio-player {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 320px;
  margin-top: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 999px;
  background: var(--bg-surface-alt, #f1f5f9);
}

.comment-audio-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.3rem;
  height: 2.3rem;
  border: none;
  border-radius: 999px;
  background: #193657;
  color: #fff;
  cursor: pointer;
}

.comment-audio-toggle-btn svg {
  width: 1.1rem;
  height: 1.1rem;
}

.comment-audio-toggle-btn .icon-play {
  margin-left: 0.15rem;
}

.comment-audio-seek {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 0.35rem;
  border-radius: 999px;
  background: #cbd5e1;
  cursor: pointer;
}

.comment-audio-seek-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: #193657;
  pointer-events: none;
}

.comment-audio-time {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #6b7280);
  min-width: 2.6rem;
}

.comment-audio-player .comment-media-speed-btn {
  flex-shrink: 0;
  background: var(--bg-surface, #fff);
}

/* Precisa vir DEPOIS de .comment-audio-player .comment-media-speed-btn
   (mesma especificidade -- quem vem por último no arquivo vence), senão
   o botão ativo fica com fundo branco + texto branco, ilegível. */
.comment-media-speed-btn.velocidade-ativa {
  background: #193657;
  color: #fff;
  border-color: #193657;
}

.comment-reply-btn {
  border: none;
  background: none;
  color: #193657;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
}

.comment-like-form {
  display: inline;
  margin: 0;
}

.comment-like-btn,
.comment-like-count-readonly {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}

.comment-like-btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

.comment-like-btn svg,
.comment-like-count-readonly svg {
  width: 0.95rem;
  height: 0.95rem;
}

.comment-like-btn:hover {
  color: #193657;
}

.comment-like-btn.active {
  color: #193657;
}

.comment-reply-btn:hover {
  text-decoration: underline;
}

.comment-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 0.3rem;
}

.comment-denuncia-form {
  display: inline;
  margin: 0;
}

.comment-denuncia-btn {
  border: none;
  background: none;
  color: #94a3b8;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
}

.comment-denuncia-btn:hover {
  color: #dc2626;
  text-decoration: underline;
}

.comment-excluir-form {
  display: inline;
  margin: 0;
}

.comment-excluir-btn {
  border: none;
  background: none;
  color: #94a3b8;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
}

.comment-excluir-btn:hover {
  color: #dc2626;
  text-decoration: underline;
}

.comment-reply-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: #193657;
  background: #eef2ff;
  border-radius: 0.65rem;
  padding: 0.5rem 0.75rem;
}

.comment-reply-indicator button {
  border: none;
  background: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  margin-left: auto;
}

/* Toolbar de anexo do comentário, estilo rede social/mensageiro (WhatsApp)
   -- "+" abre o seletor de arquivo nativo, câmera abre o modal de captura
   ao vivo. Substitui o <input type="file"> cru que ficava solto abaixo do
   textarea (achado real do usuário -- "ficou muito esquisito"). */
.comment-midia-widget-hidden {
  display: none;
}

.comment-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.comment-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: none;
  color: #475569;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.comment-toolbar-btn svg {
  width: 1.2rem;
  height: 1.2rem;
}

.comment-toolbar-btn:hover {
  color: #193657;
  border-color: #193657;
}

.comment-publicar-btn {
  margin-left: auto;
  width: auto;
}

.comment-midia-preview {
  position: relative;
  width: fit-content;
  max-width: 180px;
}

.comment-midia-preview img,
.comment-midia-preview video {
  display: block;
  width: 100%;
  max-height: 160px;
  border-radius: 0.75rem;
  object-fit: cover;
  background: #000;
}

.comment-midia-preview audio {
  display: block;
  width: 100%;
}

/* Pré-visualização de áudio/documento é mais larga que a de foto/vídeo
   (não é um quadrado 180px) -- classe adicionada via JS conforme o tipo. */
.comment-midia-preview-wide {
  max-width: 320px;
  width: 100%;
}

.comment-midia-preview-documento {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 0.75rem;
  background: var(--bg-surface-alt, #f8fafc);
}

.comment-midia-preview-documento svg {
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--text-muted, #6b7280);
}

.comment-midia-preview-documento span {
  font-size: 0.85rem;
  color: var(--text-primary, #1e293b);
  overflow-wrap: break-word;
}

.comment-midia-documento {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 0.7rem;
  text-decoration: none;
  color: var(--text-primary, #1e293b);
  font-weight: 600;
  font-size: 0.85rem;
  max-width: 100%;
}

.comment-midia-documento:hover {
  border-color: #193657;
}

.comment-midia-documento svg {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--text-muted, #6b7280);
}

.comment-midia-documento span {
  overflow-wrap: break-word;
}

.comment-midia-remove-btn {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid var(--bg-surface, #fff);
  border-radius: 999px;
  background: #475569;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.comment-camera-gravando {
  position: absolute;
  top: 1.75rem;
  left: 1.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.9);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
}

.comment-audio-modal-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.comment-audio-modal-panel .comment-camera-gravando {
  position: static;
}

.comment-audio-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 999px;
  background: var(--bg-surface-alt, #f1f5f9);
  color: #193657;
}

.comment-audio-visual svg {
  width: 2.2rem;
  height: 2.2rem;
}

.comment-audio-visual.gravando {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
  animation: comment-audio-pulso 1.4s ease-in-out infinite;
}

@keyframes comment-audio-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); }
  50% { box-shadow: 0 0 0 0.85rem rgba(220, 38, 38, 0); }
}

.site-footer {
  padding: 1.25rem 0 0.85rem;
  margin-top: 3rem;
  background: #193657;
}

.footer-inner {
  width: 100%;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.78);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.footer-col {
  display: grid;
  gap: 0.3rem;
  min-width: 260px;
}

.footer-col-social {
  align-content: start;
  /* Título "Siga-nos" e a fileira de ícones centralizados um em relação
     ao outro dentro da coluna -- antes os dois só ficavam alinhados à
     esquerda (achado via captura de tela real, 2026-08-14). */
  justify-items: center;
}

.footer-heading {
  margin: 0 0 0.15rem;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
}

.footer-text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
}

.footer-text a {
  color: rgba(255, 255, 255, 0.85);
}

.footer-phone-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.footer-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
}

.footer-icon-inline {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
}

.footer-icon-inline svg {
  width: 100%;
  height: 100%;
}

.footer-sep {
  opacity: 0.5;
}

.footer-social {
  display: flex;
  gap: 0.6rem;
}

.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: background .15s ease;
}

.footer-social-icon:hover {
  background: rgba(255, 255, 255, 0.22);
}

.footer-social-icon svg {
  width: 0.9rem;
  height: 0.9rem;
}

.footer-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 0;
}

.footer-copy {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  text-align: center;
}

.footer-copy a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.footer-copy a:hover {
  text-decoration: underline;
}

.footer-utility-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.footer-utility-row .footer-copy {
  text-align: left;
}

.hidden {
  display: none !important;
}

.comments-nested {
  margin-top: 0.85rem;
  padding-left: 1.25rem;
  border-left: 2px solid #e2e8f0;
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.realtime-toast {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  max-width: min(320px, calc(100% - 3rem));
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: rgba(26, 75, 143, 0.95);
  color: #fff;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
  font-size: 0.95rem;
  line-height: 1.5;
  animation: toastIn 0.25s ease forwards;
}

@keyframes toastIn {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.back-to-top-btn {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: none;
  background: #193657;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
  cursor: pointer;
  z-index: 40;
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background-color .15s ease;
}

.back-to-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top-btn:hover {
  background: #142943;
}

.back-to-top-btn svg {
  width: 1.3rem;
  height: 1.3rem;
}

@media (max-width: 820px) {
  .detail-grid,
  .stats-grid,
  .two-columns {
    grid-template-columns: 1fr;
  }

  /* 2rem de padding cada lado (32px) é o maior consumidor de largura
     útil da página inteira em telas estreitas -- medido via trace da
     cadeia de ancestrais (achado real, 2026-08-13): sozinho responde por
     mais espaço perdido que todo o resto somado (avatar, indentação e
     padding do balão de comentário aninhado). */
  .detail-panel {
    padding: 1.25rem;
  }

  /* Antes centralizava .header-inner e forçava .main-nav pra 100% de
     largura -- como os dois filhos (.brand e .main-nav) já quebram linha
     sozinhos em telas estreitas (flex-wrap do .header-inner), cada um
     ficava centralizado na própria linha isoladamente: a logo "grudada"
     à esquerda (larga demais pra centralizar de verdade) e "Entrar"
     flutuando sozinho, centralizado, numa segunda linha -- lido como
     desalinhado/quebrado. Mantém space-between (do base) pra logo ficar
     sempre à esquerda e "Entrar" sempre à direita, mesmo se quebrar
     linha (achado de UX mobile, 2026-08-13). */
  .main-nav {
    flex-shrink: 0;
  }

  .search-form {
    flex-direction: column;
  }

  .search-form input,
  .search-form button {
    width: 100%;
  }

  .card {
    padding: 1.15rem;
  }

  .card-head {
    flex-direction: column;
  }

  .tag-row {
    justify-content: flex-start;
  }

  .page-hero h1 {
    font-size: clamp(1.7rem, 7vw, 2.4rem);
  }

  .modal-panel {
    padding: 1rem;
    border-radius: 1rem;
  }
}

@media (max-width: 560px) {
  .container {
    width: min(100%, calc(100% - 1rem));
    padding: 1rem 0;
  }

  .form-row,
  .form-row-uf {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .page-shell {
    padding-top: 1rem;
  }

  .page-hero p,
  .card-excerpt,
  .panel-block p,
  .modal-content {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  /* Logo (com "Frente Nacional de Prefeitas e Prefeitos" já embutido na
     própria imagem) já basta como marca num header compacto -- monta
     junto com "Painel Legislativo da FNP" mais o botão "Entrar", os
     três não cabem numa linha só em ~360px sem espremer/quebrar
     (achado de UX mobile, 2026-08-13). O título completo continua
     aparecendo no H1 logo abaixo. */
  .brand-text {
    display: none;
  }

  .realtime-toast {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    max-width: none;
  }

  /* Cards de estatística em grid 2 colunas no celular -- a pilha de 5
     cards cheios de espaço vazio virava um scroll comprido antes de
     chegar no conteúdo de verdade (achado do usuário, captura de tela
     de produção). TOTAL (a métrica de resumo, já marcada como "active"
     por padrão) ocupa a linha inteira e fica um pouco maior; as outras
     4 formam um grid 2x2 compacto logo abaixo. */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }

  .stats-grid .stat-card:first-child {
    grid-column: 1 / -1;
  }

  .stat-card {
    padding: 0.9rem 1rem;
  }

  .stat-label {
    font-size: 0.7rem;
    margin-bottom: 0.35rem;
  }

  .stat-num {
    font-size: 1.5rem;
  }

  .stats-grid .stat-card:first-child .stat-num {
    font-size: 2.25rem;
  }
}

/* ==================== App shell (usuario autenticado) ==================== */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  /* rem, não px -- o botão de tamanho de fonte (Aa) escala o resto do
     conteúdo da sidebar (texto/ícones/preenchimento, tudo em rem); se a
     largura ficasse fixa em px, o espaço disponível encolheria na
     prática cada vez que a fonte aumentasse, truncando os rótulos. */
  width: 14rem;
  flex-shrink: 0;
  background: #16233c;
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  padding: 1rem 0.85rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: width .2s ease, padding .2s ease;
}

.app-shell.sidebar-collapsed .app-sidebar {
  width: 4.75rem;
  padding: 1.25rem 0.6rem;
}

.app-sidebar-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 1.1rem;
}

.app-sidebar-logo {
  height: 2rem;
  width: auto;
  filter: brightness(0) invert(1);
}

/* logo-FNP.png é um lockup só (marca "FNP" + "Frente Nacional..." por
   extenso, sem versão separada só do ícone) -- com height:2rem e
   width:auto, a imagem inteira (187x69px, proporção ~2.7:1) não cabe na
   largura da sidebar recolhida (4.75rem = 76px, ~57px de área útil já
   descontando padding), cortando o texto no meio sem terminar em lugar
   nenhum limpo (achado via captura de tela real, 2026-08-13). Fix:
   object-fit:cover recorta só a marca "FNP" + as 3 bolinhas de cor.
   **Correção 2026-08-14**: a largura original (2.25rem = recorte de
   ~78px) cortava o "P" bem no meio da curva, sobrando só o traço
   vertical -- achado só reconferindo com screenshot em alta resolução
   focado no ícone (em telas normais o elemento é pequeno demais pra
   notar). Testado com crops de 85-110px via Pillow: o "P" só fecha
   completo a partir de ~90px, e o texto "FRENTE..." começa a vazar a
   partir de ~96-100px -- 2.67rem (recorte de 92px) fica no meio desse
   intervalo seguro. */
.app-shell.sidebar-collapsed .app-sidebar-logo {
  width: 2.67rem;
  height: 2rem;
  object-fit: cover;
  object-position: left center;
}

.app-sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.sidebar-section-label {
  margin: 0.65rem 0 0.25rem;
  padding: 0 0.65rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.55rem;
  color: #cbd5e1;
  text-decoration: none;
  /* Mesmo tamanho da barra lateral do Admin (.fnp-nav-link) -- ficava
     menor de propósito porque "Exportar meus dados" não cabia, mas
     esse item saiu da sidebar (exportação de dados virou exclusiva do
     Root, só no Admin agora), então não há mais rótulo comprido o
     bastante pra forçar uma fonte menor aqui. */
  font-size: 0.9rem;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
  /* Rede de segurança: se algum rótulo futuro ainda não couber, trunca
     com "..." em vez de estourar a largura fixa da sidebar e forçar
     rolagem horizontal. */
  overflow: hidden;
}

.sidebar-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.sidebar-link svg {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}

.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.sidebar-link.active {
  background: #1a4b8f;
  color: #fff;
}

.sidebar-link-danger {
  color: #f87171;
}

.sidebar-link-danger:hover {
  background: rgba(220, 38, 38, 0.18);
  color: #fca5a5;
}

.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.65rem;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 0.55rem;
  font-size: 0.76rem;
  margin-top: 0.4rem;
  font-family: inherit;
}

.sidebar-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.sidebar-collapse-btn svg {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}

.app-shell.sidebar-collapsed .sidebar-link span,
.app-shell.sidebar-collapsed .sidebar-section-label,
.app-shell.sidebar-collapsed .sidebar-collapse-btn span {
  display: none;
}

.app-shell.sidebar-collapsed .sidebar-link,
.app-shell.sidebar-collapsed .sidebar-collapse-btn {
  justify-content: center;
}

.app-main {
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.5rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 15;
}

.topbar-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.topbar-brand-logo {
  height: 1.9rem;
  width: auto;
}

[data-theme="dark"] .topbar-brand-logo {
  filter: brightness(0) invert(1);
}

.topbar-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.topbar-back-link:hover {
  color: var(--text-primary);
}

.topbar-back-link svg {
  width: 1.05rem;
  height: 1.05rem;
}

.topbar-divider {
  color: var(--border-color);
  font-weight: 300;
  flex-shrink: 0;
}

.app-topbar-title {
  flex: 1;
  /* min-width:0 é o que falta pra um item flex com flex:1 conseguir
     encolher abaixo do tamanho do próprio conteúdo -- sem isso, um
     título/breadcrumb comprido empurra o .app-topbar inteiro pra fora do
     viewport em vez de truncar, forçando o resto da topbar (busca, avatar,
     sino...) pra uma coluna de 1 ícone por linha em telas estreitas
     (achado da auditoria mobile, 2026-08-13). */
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.topbar-breadcrumb-parent {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
}

.topbar-breadcrumb-parent:hover {
  color: var(--text-primary);
}

.topbar-breadcrumb-sep {
  color: var(--text-secondary);
  margin: 0 0.35rem;
}

.app-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

/* Só existe pra abrir a gaveta da sidebar em mobile -- no desktop a
   sidebar já é permanente, o hambúrguer não tem o que fazer lá. */
.sidebar-hamburger {
  display: none;
}

.icon-btn:hover {
  background: var(--bg-surface-alt);
}

.icon-btn svg {
  width: 1.15rem;
  height: 1.15rem;
}

.topbar-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: 0.65rem;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-alt);
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
}

.topbar-search-trigger svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.topbar-search-trigger kbd {
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.35rem;
  background: var(--border-color);
  font-size: 0.7rem;
  font-family: inherit;
}

.topbar-search-trigger:hover {
  border-color: #1a4b8f;
}

/* Só existe pro mobile (ver .topbar-mobile-search no @media) -- campo de
   busca de verdade, sempre visível, no lugar do botão que abre o modal
   Ctrl+K (esse continua existindo só no desktop). */
.topbar-mobile-search {
  display: none;
}

.icon-moon {
  display: none;
}

[data-theme="dark"] .icon-sun {
  display: none;
}

[data-theme="dark"] .icon-moon {
  display: inline-block;
}

.notif-wrapper {
  position: relative;
}

.notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid var(--bg-surface);
}

.notif-dropdown {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: 320px;
  background: var(--bg-surface);
  border-radius: 1rem;
  border: 1px solid var(--border-color);
  box-shadow: 0 25px 55px rgba(15, 23, 42, 0.18);
  z-index: 20;
  display: none;
}

.notif-dropdown.open {
  display: block;
}

.notif-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9rem;
  color: var(--text-primary);
}

.notif-mark-all {
  border: none;
  background: none;
  color: #1a4b8f;
  font-size: 0.78rem;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}

.notif-list {
  max-height: 320px;
  overflow-y: auto;
}

.notif-item {
  display: block;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  text-decoration: none;
  color: var(--text-secondary);
}

.notif-item:hover {
  background: var(--bg-surface-alt);
}

.notif-item.unread {
  background: rgba(26, 75, 143, 0.06);
}

.notif-msg {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
  color: var(--text-primary);
}

.notif-time {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.notif-empty {
  padding: 1.25rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.75rem 0.3rem 0.3rem;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
}

.user-menu-trigger:hover {
  background: var(--bg-surface-alt);
}

.topbar-logout {
  font-size: 0.85rem;
  font-weight: 600;
  color: #dc2626;
  text-decoration: none;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  flex-shrink: 0;
}

.topbar-logout:hover {
  background: #fef2f2;
}

.user-avatar {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: #1a4b8f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.user-avatar-img {
  object-fit: cover;
}

.user-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.app-content {
  flex: 1;
  padding: 1.75rem 2rem;
  /* Conteúdo (ex.: .perfil-card) fica centralizado em vez de grudado no
     canto esquerdo em telas largas -- .app-content preenche todo o
     espaço ao lado da sidebar, mas o cartão em si é mais estreito.
     Cada filho mantém sua própria largura (ex.: .perfil-card continua
     min(640px, 100%)), só o alinhamento horizontal muda. */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ==================== Modal de busca (Ctrl+K) ==================== */

.search-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  background: rgba(15, 23, 42, 0.5);
}

.search-modal.hidden {
  display: none;
}

.search-modal-backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.search-modal-panel {
  position: relative;
  width: min(600px, 90vw);
  background: var(--bg-surface);
  border-radius: 1rem;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.25);
  padding: 0.25rem;
}

.search-modal-panel form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1.1rem;
}

.search-modal-panel svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.search-modal-panel input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1.05rem;
  padding: 0.65rem 0;
  background: transparent;
  color: var(--text-primary);
}

.search-modal-panel kbd {
  padding: 0.15rem 0.5rem;
  border-radius: 0.35rem;
  background: var(--bg-surface-alt);
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ==================== Modal "Ajuda desta página" (Ctrl+K reaproveita
   .search-modal; este é outro modal, mesmo padrão overlay+painel) ==================== */

.help-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(15, 23, 42, 0.5);
}

.help-modal.hidden {
  display: none;
}

.help-modal-backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.help-modal-panel {
  position: relative;
  width: min(540px, 100%);
  background: var(--bg-surface);
  border-radius: 1rem;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.3);
  overflow: hidden;
}

.help-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.25rem 1.5rem;
  background: #193657;
  color: #fff;
}

.help-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.help-modal-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.help-modal-heading {
  flex: 1;
  min-width: 0;
}

.help-modal-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.15rem;
}

.help-modal-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.help-modal-close {
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.help-modal-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.help-modal-close svg {
  width: 1rem;
  height: 1rem;
}

.help-modal-body {
  padding: 1.25rem 1.5rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.55;
}

.help-modal-subheading {
  margin: 1rem 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.help-modal-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.help-modal-list li {
  position: relative;
  padding-left: 1.1rem;
}

.help-modal-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #1a4b8f;
}

.help-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
}

.help-modal-support {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.help-modal-support a {
  color: #1a4b8f;
  font-weight: 600;
  text-decoration: none;
}

.help-modal-footer-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.help-modal-btn-ghost,
.help-modal-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: 0.65rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.help-modal-btn-ghost {
  border: 1px solid var(--border-color);
  background: none;
  color: var(--text-secondary);
}

.help-modal-btn-ghost:hover {
  background: var(--bg-surface-alt);
}

.help-modal-btn-ghost svg {
  width: 1rem;
  height: 1rem;
}

.help-modal-btn-primary {
  border: none;
  background: #193657;
  color: #fff;
}

.help-modal-btn-primary:hover {
  background: #142943;
}

/* ==================== Modal de captura de foto por webcam (Meu perfil) ====================
   O atributo capture="..." do <input type="file"> só é respeitado por
   navegador mobile (abre o app de câmera nativo) -- no desktop ele cai no
   seletor de arquivo normal, sem abrir webcam nenhuma. Pra "Abrir câmera"
   funcionar de verdade em qualquer dispositivo, usa getUserMedia + <video>
   ao vivo + captura de frame num <canvas> (ver initPerfilAvatarEdit). */
.avatar-camera-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.6);
}

.avatar-camera-modal.hidden {
  display: none;
}

.avatar-camera-modal-backdrop {
  position: absolute;
  inset: 0;
}

.avatar-camera-modal-panel {
  position: relative;
  width: min(420px, 90vw);
  background: var(--bg-surface, #fff);
  border-radius: 1rem;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.25);
  padding: 1.25rem;
}

.avatar-camera-modal-panel video {
  width: 100%;
  border-radius: 0.75rem;
  background: #000;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scaleX(-1); /* espelhado, como qualquer webcam de "selfie" */
}

.avatar-camera-erro {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: #b3261e;
}

.avatar-camera-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1rem;
}

.avatar-camera-modal-actions .fbtn {
  width: auto;
}

.avatar-camera-cancelar-btn {
  background: var(--bg-surface-alt, #f1f5f9);
  color: var(--text-primary, #111827);
}

/* ==================== Tour de onboarding (primeiro acesso) ==================== */

.tour-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(15, 23, 42, 0.5);
}

.tour-modal.hidden {
  display: none;
}

.tour-modal-backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.tour-modal-panel {
  position: relative;
  width: min(460px, 100%);
  background: var(--bg-surface);
  border-radius: 1rem;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.3);
  overflow: hidden;
}

.tour-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.25rem 0.6rem;
  background: #193657;
  color: #fff;
}

.tour-modal-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.tour-modal-step-count {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
  flex-shrink: 0;
}

.tour-modal-progress {
  display: flex;
  gap: 0.3rem;
  padding: 0 1.25rem 0.85rem;
  background: #193657;
}

.tour-modal-progress-bar {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}

.tour-modal-progress-bar.active {
  background: #fff;
}

.tour-modal-body {
  padding: 1.15rem 1.25rem;
  min-height: 6.5rem;
}

.tour-modal-slide.hidden {
  display: none;
}

.tour-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.6rem;
  background: rgba(26, 75, 143, 0.1);
  color: #1a4b8f;
  margin-bottom: 0.55rem;
}

.tour-modal-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.tour-modal-slide h3 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.tour-modal-slide p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.tour-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border-color);
}

.tour-modal-checkbox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.tour-modal-footer-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
}

#tour-modal-close-text {
  color: var(--text-muted);
}

.tour-modal-btn-ghost,
.tour-modal-btn-primary {
  padding: 0.45rem 0.75rem;
  border-radius: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.tour-modal-btn-ghost {
  border: none;
  background: none;
  color: var(--text-secondary);
}

.tour-modal-btn-ghost:hover {
  background: var(--bg-surface-alt);
}

.tour-modal-btn-ghost:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tour-modal-btn-ghost:disabled:hover {
  background: none;
}

.tour-modal-btn-primary {
  border: none;
  background: #193657;
  color: #fff;
}

.tour-modal-btn-primary:hover {
  background: #142943;
}

/* Fundo escurecido atrás da gaveta -- clicável pra fechar, cobre o
   conteúdo (não a própria sidebar) enquanto a gaveta está aberta. */
.app-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 29;
  background: rgba(15, 23, 42, 0.5);
}

.app-sidebar-close {
  display: none;
}

@media (max-width: 900px) {
  .app-sidebar {
    position: fixed;
    z-index: 30;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    /* Sempre no tamanho "expandido" dentro da gaveta -- o modo ícone-só
       do desktop (.sidebar-collapsed) não faz sentido aqui, a gaveta some
       inteira quando fechada, não precisa de uma versão "meio aberta". */
    width: 16rem;
    padding: 1.25rem 1rem;
  }

  /* Mesma especificidade (3 classes) do que a regra de "recolhido" do
     desktop -- garante que a gaveta mobile sempre abre em largura cheia,
     mesmo que fnp-sidebar-collapsed=1 tenha ficado salvo de uma sessão
     de tela larga no mesmo aparelho (ex.: janela redimensionada). */
  .app-shell.sidebar-collapsed.sidebar-mobile-open .app-sidebar {
    width: 16rem;
    padding: 1.25rem 1rem;
  }

  /* Mesmo problema, achado depois via captura de tela real (2026-08-13):
     o fix acima só restaurava a LARGURA da gaveta, mas o rótulo de cada
     item (.sidebar-link span) continuava escondido por
     .sidebar-collapsed .sidebar-link span (display:none) -- sobrava só
     ícone, sem texto, com a gaveta já larga. Mesma técnica de
     especificidade (3 classes) pra vencer a regra de 2 classes do modo
     "recolhido" do desktop. */
  .app-shell.sidebar-collapsed.sidebar-mobile-open .sidebar-link span,
  .app-shell.sidebar-collapsed.sidebar-mobile-open .sidebar-section-label,
  .app-shell.sidebar-collapsed.sidebar-mobile-open .sidebar-collapse-btn span {
    display: inline;
  }

  .app-shell.sidebar-collapsed.sidebar-mobile-open .sidebar-link,
  .app-shell.sidebar-collapsed.sidebar-mobile-open .sidebar-collapse-btn {
    justify-content: flex-start;
  }

  /* Mesmo problema: o recorte do logo (só a marca "FNP", pro modo
     recolhido do desktop) também vazava pra a gaveta mobile quando
     fnp-sidebar-collapsed=1 tinha ficado salvo -- a gaveta é sempre
     largura cheia, não faz sentido cortar o logo nela. */
  .app-shell.sidebar-collapsed.sidebar-mobile-open .app-sidebar-logo {
    width: auto;
    height: 2rem;
    object-fit: initial;
    object-position: initial;
  }

  /* Estado da gaveta é uma classe própria (.sidebar-mobile-open),
     independente do "recolher" de desktop (.sidebar-collapsed) -- ver
     initAppShell() em main.js. Antes os dois compartilhavam a mesma
     flag, então a gaveta nascia aberta sempre que a preferência de
     desktop estivesse "não recolhida" (o padrão), cobrindo a tela
     inteira sem jeito de fechar (achado da auditoria mobile,
     2026-08-13). */
  .app-shell.sidebar-mobile-open .app-sidebar {
    transform: translateX(0);
  }

  .app-shell.sidebar-mobile-open .app-sidebar-backdrop {
    display: block;
  }

  .sidebar-hamburger {
    display: inline-flex;
  }

  /* "Recolher" (modo ícone-só) é um conceito de desktop -- em mobile a
     gaveta já fecha inteira, não faz sentido oferecer os dois. */
  .sidebar-collapse-btn {
    display: none;
  }

  .app-sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    cursor: pointer;
  }

  .app-sidebar-close:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
  }

  .app-sidebar-close svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  /* Título/breadcrumb e ícones de ação disputavam a mesma linha com a
     marca/"Voltar" -- com 6-7 ícones (busca, avatar, sino, Aa, tema,
     ajuda, sair) isso sobrava só uma coluna estreita à direita, forçando
     quebra em ~1-2 ícones por linha ("dois grupos soltos" reportado pelo
     usuário via captura de tela em produção, 2026-08-13). Sequência
     ganhou 3 linhas próprias: marca+Voltar, título, e uma linha cheia só
     pra ações -- cada uma com a largura toda do viewport pra organizar. */
  /* Redesenho pedido pelo usuário via mockup anotado (2026-08-13, mesmo
     dia): cabeçalho vira UMA linha só (logo + título + todos os ícones,
     incluindo avatar/sino), e o "Buscar..." que abria o modal Ctrl+K
     virou um campo de busca de verdade numa segunda linha, ocupando a
     largura toda -- ver .topbar-mobile-search. Pra caber título + 6
     controles numa linha de 360-414px, os ícones ficam menores que o
     padrão de 44px (WCAG) usado no resto do site -- trade-off visual
     pedido explicitamente pelo usuário nesta rodada, sinalizado no chat.
     .app-topbar-actions vira display:contents pra seus filhos (busca,
     avatar, sino, Aa, tema, ajuda, sair) participarem do flex-wrap do
     .app-topbar direto, e não ficarem presos numa segunda linha própria
     -- só assim avatar/sino conseguem ficar na mesma linha do título. */
  .app-topbar {
    flex-wrap: wrap;
    /* 0.5rem (8px) nas laterais -- não 0.75rem -- pra alinhar com a
       margem de conteúdo usada no resto da página (.page-shell/.card/
       .stats-grid, todos em 8px no mobile); antes a logo do topbar
       ficava 4px mais recuada que o título/cards logo abaixo (achado
       medindo bounding boxes). */
    padding: 0.6rem 0.5rem;
    column-gap: 0.3rem;
    row-gap: 0.6rem;
  }

  .topbar-brand-logo {
    height: 1.4rem;
  }

  .app-topbar-title {
    font-size: 0.9rem;
  }

  .user-name {
    display: none;
  }

  /* Substituído pelo campo de busca sempre visível (.topbar-mobile-search)
     -- manter os dois seria duplicidade de função, mesmo achado que
     tirou a busca solta do meio da home em mobile (.search-panel). */
  .topbar-search-trigger {
    display: none;
  }

  .icon-btn {
    width: 2rem;
    height: 2rem;
  }

  .icon-btn svg {
    width: 1.05rem;
    height: 1.05rem;
  }

  .app-topbar-actions {
    display: contents;
  }

  /* Ordem exata pedida via mockup, conferida item a item: Início, Aa,
     tema, ajuda, notificações, perfil, Sair (perfil sempre logo antes
     de Sair, notificações sempre logo antes do perfil). */
  #home-link-btn {
    order: 2;
  }

  #font-size-btn {
    order: 3;
  }

  #theme-toggle-btn {
    order: 4;
  }

  #page-help-btn {
    order: 5;
  }

  .notif-wrapper {
    order: 6;
  }

  .user-menu-trigger {
    order: 7;
    flex-shrink: 0;
    gap: 0;
    padding: 0;
  }

  .user-avatar {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
  }

  .topbar-logout {
    order: 8;
    flex-shrink: 0;
    padding: 0.25rem 0.3rem;
    font-size: 0.75rem;
  }

  /* Pseudo-elemento "quebra-linha": flex-basis:100% força tudo que vem
     depois (a busca) pra uma linha nova, sem precisar de um <div>
     extra só pra isso. */
  .app-topbar::after {
    content: '';
    order: 9;
    flex-basis: 100%;
  }

  .topbar-mobile-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    order: 10;
    flex-basis: 100%;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface-alt);
  }

  .topbar-mobile-search svg {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--text-muted);
  }

  .topbar-mobile-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    padding: 0;
    /* >=16px evita o zoom automático do iOS ao focar (achado da
       auditoria mobile, 2026-08-13). */
    font-size: 1rem;
    color: var(--text-primary);
  }

  .topbar-mobile-search input:focus {
    outline: none;
  }

  /* Duplicava a função do campo de busca acima, sempre visível no
     cabeçalho -- mesmo achado do usuário (captura de tela real,
     2026-08-13). Continua existindo normalmente no desktop. */
  .search-panel {
    display: none;
  }

  /* Área de toque mínima de 44px (achado da auditoria mobile,
     2026-08-13) -- no desktop o tamanho compacto original já é
     suficiente com mouse, então isso fica só na faixa mobile. */
  .sidebar-link {
    min-height: 2.75rem;
  }

  .tema-option {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
  }

  .favorito-btn,
  .icon-action-btn,
  .comment-toolbar-btn,
  .comment-audio-toggle-btn {
    width: 2.75rem;
    height: 2.75rem;
  }

  .comment-media-speed-btn {
    min-height: 2.75rem;
    padding: 0.25rem 0.75rem;
  }

  /* 4 ícones (foto/vídeo, câmera, documento, áudio) + botão de publicar não
     cabem numa linha só em telas estreitas -- publicar quebra pra linha
     própria em vez de espremer os ícones. */
  .comment-toolbar {
    flex-wrap: wrap;
  }

  .comment-publicar-btn {
    margin-left: 0;
    flex-basis: 100%;
  }

  /* Área de toque mínima de 44px, mesma diretriz acima -- desktop usa
     mouse, então esses dois ficam compactos só fora do mobile. */
  .app-sidebar-close {
    width: 2.75rem;
    height: 2.75rem;
  }

  .perfil-avatar-menu-panel button {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
  }

  /* Indentação de resposta mais enxuta em telas estreitas -- 1.25rem
     por nível, somado ao avatar, sobrava pouca largura de verdade pro
     texto (achado via captura de tela real, 2026-08-13: texto quebrando
     palavra por palavra numa coluna estreitíssima). */
  .comments-nested {
    padding-left: 0.65rem;
    gap: 0.6rem;
  }

  .comment-card {
    gap: 0.55rem;
  }

  /* Padding generoso (1.5rem cada lado) sobra em telas de 360-414px --
     reduzido só no mobile, some dado à largura útil pro texto do
     fórum e demais cartões do painel de detalhe. */
  .panel-block {
    padding: 1rem;
  }
}

/* ==================== Tema escuro ==================== */

:root {
  --bg-body-1: #f5f7fa;
  --bg-body-2: #e4e9f0;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f8fafc;
  --text-primary: #111827;
  --text-secondary: #475569;
  --text-muted: #6b7280;
  --border-color: #e2e8f0;
}

[data-theme="dark"] {
  --bg-body-1: #0f172a;
  --bg-body-2: #0b1220;
  --bg-surface: #1e293b;
  --bg-surface-alt: #263349;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --border-color: #334155;
}

[data-theme="dark"] body {
  background: linear-gradient(135deg, var(--bg-body-1) 0%, var(--bg-body-2) 100%);
  color: var(--text-primary);
}

[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .search-panel,
[data-theme="dark"] .tema-dropdown-panel,
[data-theme="dark"] .perfil-avatar-menu-panel,
[data-theme="dark"] .card-action-dropdown-panel,
[data-theme="dark"] .detail-panel,
[data-theme="dark"] .panel-block,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .auth-card {
  background: var(--bg-surface);
  color: var(--text-primary);
}

[data-theme="dark"] .perfil-avatar-menu-panel button,
[data-theme="dark"] .card-action-dropdown-panel a,
[data-theme="dark"] .card-action-dropdown-panel button {
  color: var(--text-primary);
}

[data-theme="dark"] .perfil-avatar-menu-panel button:hover,
[data-theme="dark"] .card-action-dropdown-panel a:hover,
[data-theme="dark"] .card-action-dropdown-panel button:hover {
  background: var(--bg-surface-alt);
}

[data-theme="dark"] .card-brief-grid > div,
[data-theme="dark"] .tema-dropdown-trigger,
[data-theme="dark"] .topbar-search-trigger {
  background: var(--bg-surface-alt);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="dark"] .comment-bubble {
  background: var(--bg-body-2);
}

[data-theme="dark"] .comment-bubble p {
  color: var(--text-secondary);
}

[data-theme="dark"] .forum-metrics {
  color: var(--text-secondary);
}

[data-theme="dark"] .comment-reply-indicator,
[data-theme="dark"] .anexo-aviso-moderacao {
  background: var(--bg-surface-alt);
  color: var(--text-primary);
}

[data-theme="dark"] .anexo-upload-row {
  border-color: var(--border-color);
}

[data-theme="dark"] .card-footer {
  border-color: var(--border-color);
}

[data-theme="dark"] .page-hero h1,
[data-theme="dark"] .card h2 a,
[data-theme="dark"] .detail-header h1,
[data-theme="dark"] .stat-num,
[data-theme="dark"] .section-heading,
[data-theme="dark"] .auth-card h1 {
  color: var(--text-primary);
}

[data-theme="dark"] .page-hero p,
[data-theme="dark"] .card-excerpt,
[data-theme="dark"] .panel-block p,
[data-theme="dark"] .auth-subtitle,
[data-theme="dark"] .footer-movimentacao,
[data-theme="dark"] .card-meta-inline {
  color: var(--text-secondary);
}

[data-theme="dark"] .search-form input,
[data-theme="dark"] .auth-form input,
[data-theme="dark"] .participation-form input,
[data-theme="dark"] .participation-form textarea,
[data-theme="dark"] .anexo-form input[type="text"],
[data-theme="dark"] .tema-dropdown-search {
  background: var(--bg-surface-alt);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .field-static {
  background: var(--bg-surface-alt);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="dark"] .comment-toolbar-btn {
  border-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="dark"] .comment-audio-player {
  background: var(--bg-surface-alt);
}

[data-theme="dark"] .comment-audio-seek {
  background: var(--border-color);
}

[data-theme="dark"] .comment-audio-player .comment-media-speed-btn {
  background: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .search-suggestions {
  background: var(--bg-surface);
  border-color: var(--border-color);
}

[data-theme="dark"] .search-suggestion-item:hover {
  background: var(--bg-surface-alt);
}

[data-theme="dark"] .search-suggestion-title {
  color: var(--text-primary);
}

[data-theme="dark"] .google-btn {
  background: var(--bg-surface-alt);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Acessibilidade */

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

.skip-link {
  position: fixed;
  top: -4rem;
  left: 0.75rem;
  z-index: 1000;
  background: #193657;
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 0.5rem 0.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Sem forçar border-radius aqui (era 2px fixo) -- o contorno de foco
   agora segue o raio de cada elemento (Chrome/Firefox/Safari já
   acompanham o border-radius do próprio box automaticamente). Um
   valor fixo de 2px ficava bem em botão/input normal, mas distorcia
   qualquer coisa com raio maior (ex.: .user-menu-trigger, pill de
   999px) — o contorno virava um retângulo quase reto em cima de um
   avatar redondo, parecendo um anel torto. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #193657;
  outline-offset: 2px;
}

[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] textarea:focus-visible,
[data-theme="dark"] select:focus-visible,
[data-theme="dark"] summary:focus-visible,
[data-theme="dark"] [tabindex]:focus-visible {
  outline-color: #7fa8e0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}