/* ============================================================================
   ConGeresAPP.css — estilos GLOBAIS do App Congeres
   ----------------------------------------------------------------------------
   Escopo deste arquivo: apenas o que vale para o app inteiro (tipografia base,
   headings, modais, botões e tabelas do Bootstrap/AdminLTE).

   NÃO coloque aqui estilo de módulo. Cada módulo tem seu próprio arquivo ou
   sua própria string CSS.

   Tokens (cor, raio, sombra, espaçamento) vivem em www/congeres-theme.css,
   que é carregado ANTES deste arquivo. Use var(--cg-*) — ou os apelidos
   legados var(--brand), var(--border), var(--radius-md)... que o tema
   remapeia para os canônicos.

   Estratégia tipográfica:
   - body define a base (16px desktop, reduz em mobile)
   - .limited-width e .custom-box forçam herança nos filhos (escopo seguro)
   - Outros módulos Shiny não são afetados
   ============================================================================ */



/* ══════════════════════════════════════════════════════════════════════════════
   BODY — base de toda a tipografia
   O Bootstrap 3 define body em 14px. Sobrescrevemos para 16px.
   ══════════════════════════════════════════════════════════════════════════════ */
body,
.main-header,
.main-sidebar,
.content-wrapper,
.right-side,
.sidebar,
.sidebar-menu > li > a,
.sidebar-menu .treeview-menu > li > a,
.box,
.small-box,
.info-box,
.nav-tabs-custom,
.modal-content,
.btn,
.form-control,
.selectize-input,
.selectize-dropdown,
.dataTables_wrapper,
table,
div,
span,
p,
a,
li,
label,
input,
textarea,
select,
button {
  font-family: 'Sora', sans-serif !important;
}

code, pre {
  font-family: 'JetBrains Mono', monospace !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HEADINGS GLOBAIS
   ══════════════════════════════════════════════════════════════════════════════ */
/* Alinhamento à esquerda em todos os níveis. O h2 era centralizado, o que
   destoava dos títulos de hero (à esquerda) na mesma tela. Para centralizar
   pontualmente, use a classe .centralizado. */
h1 { font-size: 2rem;     line-height: var(--cg-lh-tight); }
h2 { font-size: 1.625rem; line-height: 1.3;  text-align: left; padding-bottom: var(--cg-space-1); }
h3 { font-size: var(--cg-fs-h3); line-height: 1.35; }
h4 { font-size: 1.125rem; line-height: var(--cg-lh-snug); }


/* ══════════════════════════════════════════════════════════════════════════════
   ESCOPO DO APP PRINCIPAL (.limited-width e .custom-box)
   Força herança nos elementos filhos APENAS dentro dessas classes —
   não vaza para sidebar, selectize, outros módulos Shiny.
   ══════════════════════════════════════════════════════════════════════════════ */
.limited-width p,
.limited-width div,
.limited-width span,
.limited-width a,
.limited-width li,
.limited-width strong,
.custom-box p,
.custom-box div,
.custom-box span,
.custom-box a,
.custom-box li,
.custom-box strong {
  font-size: inherit;
}

/* Tabelas dentro do app: tamanho ligeiramente menor */
.limited-width td,
.limited-width th,
.custom-box td,
.custom-box th {
  font-size: 0.9375rem; /* 15px */
}


/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVIDADE — texto diminui ao reduzir tela, nunca aumenta
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { font-size: 14px; }

  h1 { font-size: 1.5rem;   }
  h2 { font-size: 1.25rem;  }
  h3 { font-size: 1.125rem; }
  h4 { font-size: 1rem;     }

  .limited-width td,
  .limited-width th,
  .custom-box td,
  .custom-box th { font-size: 0.8125rem; }
}

@media (max-width: 480px) {
  body { font-size: 13px; }

  h1 { font-size: 1.375rem; }
  h2 { font-size: 1.125rem; }
  h3 { font-size: 1rem;     }
  h4 { font-size: 0.9375rem;}

  .limited-width td,
  .limited-width th,
  .custom-box td,
  .custom-box th { font-size: 0.75rem; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   LAYOUT GLOBAL — classes originais do app
   Modal, botões, tabelas, painel do usuário e tokens migraram para
   www/congeres-theme.css. Aqui ficam apenas as classes próprias do app.
   ══════════════════════════════════════════════════════════════════════════════ */
.info-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
  gap: var(--cg-space-4);
  padding-bottom: var(--cg-space-2);
}
.info-item    { flex: 1 1 0; text-align: center; }
.info-title   { font-weight: var(--cg-fw-semibold); color: var(--cg-muted); }
.info-value   { margin-top: var(--cg-space-1); color: var(--cg-ink); font-weight: var(--cg-fw-semibold); }
.centralizado { text-align: center; }

/* A largura vem do tema (--cg-container), igual à de todas as outras telas. */
.limited-width {
  margin: 0 auto;
}

.custom-box {
  background: var(--cg-surface);
  width: 100%;
  max-width: 100%;
  margin: var(--cg-space-5) auto;
  padding: var(--cg-space-5);
  border-radius: var(--cg-radius-md);
  box-shadow: var(--cg-shadow-xs);
  border: 1px solid var(--cg-border);
  position: relative;
  z-index: 1;
}