/* ============================================================
   Sistema de Moções da SBPC — 78ª RA — Design tokens
   ------------------------------------------------------------
   Arquivo único, carregado por index.php, detalhes.php e
   confirma.php (os três "pontos de entrada" HTML do sistema),
   pra manter uma identidade visual consistente sem duplicar CSS
   em cada página — mesmo raciocínio da classe única mocao-final.php.

   Direção: "documento oficial" — tinta, papel, selo — em vez do
   azul padrão do Bootstrap. Evita os clichês de design genérico
   (creme+terracota, preto+neon, jornal denso).
   ============================================================ */

:root {
  /* Cor */
  --paper:         #F6F7F9; /* fundo — papel frio, não creme */
  --paper-raised:  #FFFFFF;
  --ink-900:       #17223B; /* tinta — texto principal, títulos, botões primários */
  --ink-700:       #3D4C6E; /* tinta secundária — hover, texto de apoio */
  --ink-400:       #7C87A0; /* tinta clara — placeholders, ícones inativos */
  --seal-600:      #9C6B30; /* selo/bronze — assinatura, progresso, links, acento */
  --seal-700:      #7C5626;
  --seal-100:      #F1E6D8;
  --sage-600:      #3F6350; /* confirmado / sucesso */
  --sage-100:      #E1EAE4;
  --clay-600:      #8C3A2E; /* atenção / erro */
  --clay-100:      #F3E1DD;
  --line:          #DBDFE6; /* divisórias, bordas */

  /* Tipografia — três papéis:
     display    = títulos, selos, números-marco
     documento  = texto oficial lido (moção, resumo, regimento)
     interface  = formulários, botões, navegação */
  --font-display:   'Space Grotesk', system-ui, sans-serif;
  --font-documento: 'Source Serif 4', Georgia, serif;
  --font-interface: 'Source Sans 3', system-ui, sans-serif;

  /* Sobrescreve as variáveis do Bootstrap 5.3 — os componentes
     .btn-primary, .text-primary, .bg-primary-subtle, .badge etc.
     herdam a nova paleta automaticamente, sem precisar trocar
     classe por classe em cada arquivo PHP. */
  --bs-primary: #17223B;
  --bs-primary-rgb: 23, 34, 59;
  --bs-success: #3F6350;
  --bs-success-rgb: 63, 99, 80;
  --bs-danger: #8C3A2E;
  --bs-danger-rgb: 140, 58, 46;
  --bs-dark: #17223B;
  --bs-dark-rgb: 23, 34, 59;
  --bs-body-font-family: var(--font-interface);
  --bs-body-color: var(--ink-900);
  --bs-border-color: var(--line);
  --bs-link-color: var(--seal-600);
  --bs-link-hover-color: var(--ink-900);
  --bs-border-radius: 0.5rem;
  --bs-border-radius-lg: 0.65rem;
}

body {
  background-color: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-interface);
}

h1, h2, h3, h4, h5, h6,
.section-title {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* Texto "oficial" — o conteúdo real da moção, resumo, regimento.
   Serifada de propósito: reforça que é um documento sendo lido,
   não apenas interface de aplicativo. */
.texto-documento {
  font-family: var(--font-documento);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink-900);
}
.texto-documento strong { color: var(--ink-900); }

a { color: var(--seal-600); }
a:hover { color: var(--ink-900); }

.btn-primary {
  background-color: var(--ink-900);
  border-color: var(--ink-900);
  font-family: var(--font-interface);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--ink-700) !important;
  border-color: var(--ink-700) !important;
}

.btn-outline-primary {
  color: var(--ink-900);
  border-color: var(--ink-900);
}
.btn-outline-primary:hover {
  background-color: var(--ink-900);
  border-color: var(--ink-900);
}

.badge.bg-primary-subtle { background-color: var(--seal-100) !important; color: var(--seal-700) !important; }
.badge.bg-success-subtle { background-color: var(--sage-100) !important; color: var(--sage-600) !important; }
.badge.bg-danger-subtle  { background-color: var(--clay-100) !important; color: var(--clay-600) !important; }
.badge.bg-primary        { background-color: var(--ink-900) !important; }

.card {
  border-color: var(--line);
}

/* ------------------------------------------------------------
   Selo de assinaturas — elemento-assinatura do sistema.
   Substitui a barra de progresso genérica por N marcas
   circulares: cada uma representa literalmente 1 das 10
   assinaturas necessárias. Preenchida = confirmada.
   ------------------------------------------------------------ */
.selo-assinaturas {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.selo-assinaturas .marca {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-400);
  background: var(--paper-raised);
  flex-shrink: 0;
  transition: background-color 0.2s, border-color 0.2s;
}
.selo-assinaturas .marca.preenchida {
  border-color: var(--seal-600);
  background: var(--seal-600);
  color: #fff;
}

.selo-assinaturas-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1.5px solid var(--seal-600);
  color: var(--seal-700);
  background: var(--seal-100);
  white-space: nowrap;
}
.selo-assinaturas-mini.completo {
  border-color: var(--sage-600);
  color: #fff;
  background: var(--sage-600);
}

/* Número de moção estilo "documento oficial" */
.numero-mocao {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--seal-600);
  letter-spacing: 0.02em;
}

/* Painel com lombada — dá sensação de dossiê/documento em vez de
   cartão de aplicativo genérico. */
.painel-documento {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--seal-600);
  border-radius: var(--bs-border-radius);
}

/* Grade de definição (Comunicações / Propostas / Moções) —
   os três termos são uma taxonomia real que o leitor precisa
   distinguir, por isso ganham tratamento de rótulo, não só
   parágrafo corrido. */
.definicao-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.definicao-item .termo {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-900);
  display: block;
  margin-bottom: 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--seal-600);
}
.definicao-item .explicacao {
  font-family: var(--font-documento);
  color: var(--ink-700);
  line-height: 1.6;
  font-size: 0.98rem;
}