/* ============================================================================
   v4.css — Camada de apresentação V4 — Paróquia São Roque
   Carregado APÓS style.css. Não altera IDs, lógica, API ou backend.
   ============================================================================ */

/* ── 0. Regra crítica: [hidden] nunca pode ser sobrescrito ── */
[hidden] { display: none !important; }

/* ── 1. Tokens do design system V4 ── */
:root {
  /* Paleta navy */
  --v4-navy-950: #0b1f3a;
  --v4-navy-900: #102d55;
  --v4-navy-800: #17335d;
  --v4-blue-700: #173b73;
  --v4-blue-600: #24518f;

  /* Dourado — uso restrito a detalhes institucionais */
  --v4-gold-600: #d49a00;
  --v4-gold-500: #e0aa1c;
  --v4-gold-100: #fff7dc;

  /* Superfícies e texto */
  --v4-bg:      #f4f6f9;
  --v4-surface: #ffffff;
  --v4-text:    #253044;
  --v4-muted:   #6e7888;
  --v4-border:  #dce2ea;

  /* Semântico */
  --v4-success: #177245;
  --v4-warning: #b76e00;
  --v4-danger:  #b42318;
  --v4-info:    #24518f;

  /* Raios */
  --v4-radius-sm: 8px;
  --v4-radius:    14px;
  --v4-radius-lg: 18px;

  /* Sombras */
  --v4-shadow-sm: 0 4px 14px rgba(15,35,66,.07);
  --v4-shadow:    0 12px 34px rgba(15,35,66,.12);
  --v4-shadow-md: 0 10px 30px rgba(15,35,66,.12);

  /* Focus ring */
  --v4-focus: 0 0 0 4px rgba(212,154,0,0.22);

  /* Layout */
  --adm-sidebar-w: 248px;
}

/* ── 2. Sidebar: group label + sub-items + item ativo ── */

/* Rótulo de grupo (ex.: "Solicitações") */
.sidebar-group-label {
  display: block;
  padding: 14px 20px 4px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  pointer-events: none;
  user-select: none;
}

/* Sub-items levemente indentados */
.sidebar-sub-item {
  padding-left: 32px !important;
}
.sidebar-sub-item .sidebar-item-label {
  font-size: .82rem;
  color: rgba(255,255,255,0.80);
}
.sidebar-sub-item:hover .sidebar-item-label,
.sidebar-sub-item.sidebar-item-ativo .sidebar-item-label {
  color: #fff;
}


.sidebar-item { position: relative; }
.sidebar-item-ativo { background: rgba(255,255,255,0.11) !important; }
.sidebar-item-ativo::before {
  content: "";
  position: absolute;
  top: 8px; bottom: 8px; left: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--v4-gold-500);
}
.sidebar-item-ativo svg { color: var(--v4-gold-500); }
.sidebar-badge { background: var(--v4-gold-500) !important; color: #132b4c !important; }

/* ── 3. Inputs / selects ── */
.campo input[type=text],
.campo input[type=tel],
.campo input[type=email],
.campo input[type=password],
.campo input[type=number],
.campo input[type=date],
.campo input[type=search],
.campo select,
.input-form,
textarea {
  min-height: 44px;
  border: 1px solid #cfd7e3;
  border-radius: 9px;
  transition: border-color .15s, box-shadow .15s;
}
.campo input:focus,
.campo select:focus,
.input-form:focus,
textarea:focus {
  border-color: var(--v4-blue-700);
  box-shadow: 0 0 0 3px rgba(23,59,115,0.12);
  outline: none;
}

/* ── 4. Botões ── */
.btn {
  min-height: 40px;
  border: 1px solid #cfd7e3;
  border-radius: 9px;
  background: #fff;
  color: #344156;
}
.btn:hover { border-color: #aebaca; background: #f7f9fc; }
.btn-primario {
  border-color: var(--v4-blue-700) !important;
  background: linear-gradient(135deg, var(--v4-blue-700), var(--v4-navy-900)) !important;
  color: #fff !important;
}
.btn-primario:hover { background: var(--v4-navy-900) !important; }

/* ── 5. Cabeçalho de tela com card elevado ── */
.cabecalho-lista,
.config-barra-acoes {
  border: 1px solid #e2e7ee;
  border-radius: var(--v4-radius);
  background: #fff;
  box-shadow: var(--v4-shadow-sm);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.cabecalho-lista h2,
.config-titulo {
  color: var(--v4-navy-900);
  font-family: 'Playfair Display', Georgia, serif;
}

/* ── 6. Tabela ── */
.tabela-cadastros thead th {
  position: sticky; top: 0; z-index: 1;
  background: #f1f4f8; color: #465469;
  font-size: .72rem; letter-spacing: .025em; text-transform: uppercase;
  border-bottom: 1px solid #d7dee8; padding: 12px 14px;
}
.tabela-cadastros tbody td { padding: 12px 14px; border-bottom-color: #edf0f4; }
.tabela-cadastros tbody tr:hover td { background: #f7f9fc; }

/* ── 7. Quick cards ── */
.home-quick-card:hover {
  border-color: #c7d1df !important;
  box-shadow: 0 12px 26px rgba(15,35,66,0.11) !important;
  transform: translateY(-2px);
}
.hqc-azul    { background: #e8efff !important; color: #1d4f9c !important; }
.hqc-verde   { background: #e5f5ed !important; color: #267a58 !important; }
.hqc-laranja { background: #fff1df !important; color: #c66b11 !important; }
.hqc-roxo    { background: #f1eafe !important; color: #6f4bb3 !important; }
.hqc-amarelo { background: #fff7dc !important; color: #a96f00 !important; }
.hqc-rosa    { background: #faeaf1 !important; color: #a4436d !important; }
.hqc-cinza   { background: #f0f2f5 !important; color: #455168 !important; }

/* ── 8. HERO V4: card escuro com stats integradas ── */
.home-hero-card {
  display: flex;
  position: relative;
  min-height: 280px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 17px;
  background: linear-gradient(110deg, var(--v4-navy-900), var(--v4-blue-700));
  box-shadow: 0 14px 34px rgba(12,38,73,0.18);
  overflow: hidden;
  margin-bottom: 28px;
}
.home-hero-info {
  position: relative; z-index: 1; flex: 1;
  padding: 28px 30px;
  display: flex; flex-direction: column; justify-content: center;
}
.home-welcome-label {
  margin: 0 0 4px;
  color: var(--v4-gold-500);
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.home-welcome-title {
  margin: 0 0 4px;
  color: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.65rem, 3.2vw, 2.4rem);
  font-weight: 700; line-height: 1.12;
}
.home-welcome-subtitle {
  margin: 0 0 20px;
  color: rgba(255,255,255,0.72);
  font-size: .88rem;
}
/* IDs legado ficam hidden — não forçar display */
.home-hero-gold-line,
.home-hero-quote { display: none; }

.home-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin-top: auto;
}
.home-hero-stats .home-stat-card {
  min-height: 0; padding: 12px 14px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(3,18,37,0.10);
  flex-direction: column; gap: 3px;
}
.home-hero-stats .home-stat-card svg { color: var(--v4-blue-700); }
.home-hero-stats .stat-numero  { font-size: clamp(1.3rem,2.5vw,1.7rem); color: var(--v4-navy-900); }
.home-hero-stats .stat-descricao { font-size: .72rem; color: #53657d; line-height: 1.3; }
.home-hero-stats .stat-link    { font-size: .70rem; color: var(--v4-navy-800); font-weight: 600; }
.home-hero-stats .stat-icone   { width: 34px; height: 34px; border-radius: 8px; }

.home-hero-imagem {
  width: clamp(200px, 30%, 360px); flex-shrink: 0;
  position: relative; overflow: hidden; background: #c8b89a;
}
.home-hero-imagem::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--v4-blue-700) 0%, transparent 45%);
}
.home-hero-santo { width: 100%; height: 100%; object-fit: cover; object-position: center 13%; display: block; }

/* ── 9. Step indicator — auto-cadastro ── */
.auto-cadastro-marca { display: flex; align-items: center; gap: 14px; }
.auto-cadastro-marca img { flex-shrink: 0; }
.btn-voltar-publico { align-self: flex-start; margin-top: 4px; }
.cadastro-etapas {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 20px;
}
.cadastro-etapa {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding-top: 11px; color: #8a94a4; font-size: .75rem; font-weight: 600;
}
.cadastro-etapa::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; border-radius: 4px; background: #e2e7ee;
}
.cadastro-etapa b {
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: #edf0f4; color: #788395; font-size: .7rem; flex-shrink: 0;
}
.cadastro-etapa.ativa { color: var(--v4-navy-800); }
.cadastro-etapa.ativa::before { background: var(--v4-gold-600); }
.cadastro-etapa.ativa b { background: var(--v4-gold-600); color: #fff; }

/* ── 10. Privacy notice ── */
.privacy-notice {
  display: flex; gap: 12px; margin: 0 0 20px;
  padding: 14px 16px; border: 1px solid #bdd4f3;
  border-radius: 12px; background: #eef6ff; color: #24456d;
}
.privacy-notice-icon {
  display: grid; place-items: center; width: 38px; height: 38px;
  flex-shrink: 0; border-radius: 50%; background: var(--v4-blue-700); color: #fff;
}
.privacy-notice p { margin: 0; font-size: .82rem; line-height: 1.45; color: #24456d; }
.privacy-notice strong { display: block; margin-bottom: 3px; }

/* ── 11. Responsividade do hero e step indicator ── */
@media (max-width: 900px) {
  .home-hero-stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .home-hero-card { flex-direction: column-reverse; }
  .home-hero-imagem { width: 100%; height: 180px; }
  .home-hero-imagem::after { background: linear-gradient(0deg, var(--v4-blue-700) 0%, transparent 55%); }
  .home-hero-info { padding: 20px 16px; }
  .home-hero-stats { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .cadastro-etapas { grid-template-columns: repeat(4,minmax(66px,1fr)); overflow-x: auto; }
  .cadastro-etapa  { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (max-width: 520px) {
  .home-hero-stats { grid-template-columns: repeat(2,1fr); }
}

/* ============================================================================
   FASE 3 — Área pública: landing page V4, auto-cadastro e confirmado
   Todos os seletores públicos são prefixados com #tela-auto-cadastro
   ou com o ID específico para não afetar a área administrativa.
   ============================================================================ */

/* ── 13. Landing page: versículo com borda dourada à esquerda ── */
.bible-verse {
  border-left: 4px solid var(--v4-gold-500);
  border-radius: 10px;
  margin-top: 18px;
}

/* ── 14. Auto-cadastro: fundo e layout geral ── */
#tela-auto-cadastro {
  background: var(--v4-bg);
  max-width: none;       /* sobrescreve os 900px do style.css */
  margin: 0;
  padding: 0 0 80px;
  min-height: 100vh;
}

/* Cabeçalho público — card branco full-width */
#tela-auto-cadastro .auto-cadastro-topo {
  background: #fff;
  border-bottom: 1px solid var(--v4-border);
  box-shadow: 0 2px 10px rgba(15,35,66,.07);
  /* Grid: [marca | voltar] / [etapas] */
  display: grid;
  grid-template-areas:
    "marca voltar"
    "etapas etapas";
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px 12px;
  padding: 20px clamp(16px, 5vw, 40px);
  margin-bottom: 0;
}

#tela-auto-cadastro .auto-cadastro-marca {
  grid-area: marca;
}

#tela-auto-cadastro .btn-voltar-publico {
  grid-area: voltar;
  align-self: center;
  margin-top: 0;
}

#tela-auto-cadastro .cadastro-etapas {
  grid-area: etapas;
  margin: 0;         /* remove margin-top: 20px da regra geral */
}

#tela-auto-cadastro .auto-cadastro-titulo {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--v4-navy-900);
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  margin: 0;
}

#tela-auto-cadastro .auto-cadastro-subtitulo {
  color: var(--v4-muted);
  font-size: .88rem;
  margin: 2px 0 0;
}

/* Aviso de envio dentro da área limitada */
#aviso-pub {
  max-width: 900px;
  margin: 16px auto 0;
  padding: 0 clamp(12px, 4vw, 32px);
}

/* Form: wrapper interno max 900px */
#form-auto-cadastro {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px clamp(12px, 4vw, 32px) 40px;
}

/* Fieldsets como cards brancos */
#form-auto-cadastro .grupo {
  background: #fff;
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius);
  box-shadow: var(--v4-shadow-sm);
  padding: 20px 22px;
  margin-bottom: 16px;
}

#form-auto-cadastro .grupo legend {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--v4-navy-800);
  background: #fff;
  padding: 0 8px;
}

/* Aviso de privacidade — card azul informativo */
#aviso-privacidade {
  max-width: 900px;
  margin: 0 auto 16px;
}

/* Rádios como opções visuais */
#tela-auto-cadastro .grupo-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

#tela-auto-cadastro .grupo-radio label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  min-height: 40px;
  border: 1px solid var(--v4-border);
  border-radius: 8px;
  background: #fafbfd;
  cursor: pointer;
  font-size: .87rem;
  transition: border-color .15s, background .15s;
}

#tela-auto-cadastro .grupo-radio label:hover {
  border-color: var(--v4-blue-700);
  background: #eef4ff;
}

/* Estado selecionado via :has() — supported em todos os browsers modernos */
#tela-auto-cadastro .grupo-radio label:has(input[type=radio]:checked) {
  background: #eef4ff;
  border-color: #9bb0d0;
  font-weight: 600;
  color: var(--v4-navy-800);
}

/* Botão de envio */
.btn-pub-submit {
  min-height: 50px !important;
  width: 100%;
  max-width: 360px;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  letter-spacing: .01em;
}

.auto-cadastro-acoes {
  display: flex;
  justify-content: center;
  padding: 16px 0 8px;
}

/* ── 15. Tela de confirmação V4 ── */
/* ATENÇÃO: NÃO setar display aqui — seletores ID têm especificidade maior
   que .tela { display: none } e causariam a tela sempre visível.
   O display: flex é controlado apenas quando .ativa. */
#tela-cadastro-confirmado {
  background: var(--v4-bg);
  min-height: 100vh;
  padding: 40px 16px;
}
#tela-cadastro-confirmado.ativa {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.confirmado-container {
  background: #fff;
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius-lg);
  box-shadow: var(--v4-shadow-md);
  padding: 48px clamp(24px, 6vw, 48px);
  max-width: 500px;
  width: 100%;
  text-align: center;
}

.confirmado-icone {
  font-size: 2.6rem;
  color: var(--v4-gold-600);
  margin-bottom: 16px;
  display: block;
}

.confirmado-titulo {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--v4-navy-900);
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  margin: 0 0 12px;
}

.confirmado-mensagem {
  color: var(--v4-muted);
  font-size: .94rem;
  line-height: 1.65;
  margin: 0 0 20px;
}

.confirmado-ficha {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--v4-navy-800);
  background: var(--v4-gold-100);
  border: 1px solid var(--v4-gold-600);
  border-radius: 10px;
  padding: 12px 20px;
  margin: 0 auto 24px;
}

.confirmado-btn {
  min-height: 48px !important;
  min-width: 200px;
  font-size: .95rem;
}

/* ── 16. Responsividade da área pública ── */
@media (max-width: 600px) {
  /* Topo: collapsa para coluna (marca em cima, botão embaixo, etapas abaixo) */
  #tela-auto-cadastro .auto-cadastro-topo {
    padding: 14px 16px;
    grid-template-areas:
      "marca voltar"
      "etapas etapas";
    grid-template-columns: 1fr auto;
    gap: 12px 8px;
  }
  /* Esconde subtítulo para ganhar espaço no mobile */
  #tela-auto-cadastro .auto-cadastro-subtitulo { display: none; }
  #form-auto-cadastro .grupo { padding: 16px 14px; }
  #tela-auto-cadastro .grupo-radio { gap: 6px; }
  #tela-auto-cadastro .grupo-radio label { padding: 7px 10px; font-size: .82rem; }
  .confirmado-container { padding: 32px 20px; }
}

/* ============================================================================
   FASE 5 — tela-lista + tela-formulario: visual V4
   ============================================================================ */

/* ── 18. Telas internas: padding + max-width V4 ── */
#conteudo > .tela:not(#tela-inicial-home) {
  max-width: 1380px;
  margin: 0 auto;
  padding: 24px;
}

/* ── 18. Barra de busca: card branco + campo full-width ── */
.campo-busca-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius);
  background: #fff;
  box-shadow: var(--v4-shadow-sm);
}
#campo-busca {
  flex: 1;
  max-width: none;
  min-height: 40px;
  border: 1px solid #cfd7e3;
  border-radius: 9px;
  padding: 8px 14px;
  font-size: .92rem;
}
#campo-busca:focus {
  border-color: var(--v4-blue-700);
  box-shadow: 0 0 0 3px rgba(23,59,115,0.10);
  outline: none;
}

/* ── 18. Busca avançada: painel azulado ── */
#painel-busca-avancada {
  background: #eff4ff;
  border: 1px solid #c7d8f7;
  border-radius: var(--v4-radius);
  padding: 16px;
  margin-bottom: 12px;
}
.busca-avancada-campos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
}
.busca-campo-grupo label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--v4-muted);
  margin-bottom: 4px;
}

/* ── 18. Container da tabela: card branco com overflow auto ── */
.container-tabela {
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius);
  background: #fff;
  box-shadow: var(--v4-shadow-sm);
  overflow: auto;
}

/* ── 18. Estado vazio V4 ── */
.lista-vazia {
  padding: 56px 20px;
  text-align: center;
  color: var(--v4-muted);
  font-style: normal;
  font-size: .92rem;
}

/* ── 18. Paginação V4 ── */
.paginacao-container { padding: 16px 0 8px; }
.paginacao-info      { font-size: .8rem; color: var(--v4-muted); }

/* ── 18. Formulário como card V4 ── */
#formulario-cadastro {
  background: #fff;
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius);
  box-shadow: var(--v4-shadow-sm);
  padding: 22px;
}

/* ── 18. Fieldsets V4: border + radius refinados ── */
.grupo {
  border-color: var(--v4-border);
  border-radius: var(--v4-radius-sm);
}
.grupo > legend {
  color: var(--v4-navy-800);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
}

/* ── 18. Labels dos campos V4 ── */
.campo > label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--v4-muted);
}

/* ── 18. Avisos e badges V4 ── */
.aviso { border-radius: var(--v4-radius-sm); }
.badge { border-radius: 999px; }
.badge-situacao-ativo    { background: #e3f5ec; color: var(--v4-success); border-color: #a3d9bb; }
.badge-situacao-inativo  { background: #fef2f2; color: var(--v4-danger);  border-color: #fca5a5; }
.badge-situacao-pendente { background: var(--v4-gold-100); color: var(--v4-warning); border-color: #fcd34d; }

/* ============================================================================
   FASE 6 — Aniversariantes, ficha impressão, tela-comunicado e page-header
   ============================================================================ */

/* ── 19. page-header: card branco V4 ── */
.page-header {
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius);
  background: #fff;
  box-shadow: var(--v4-shadow-sm);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.page-header-titulo {
  color: var(--v4-navy-900);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.1rem, 2.5vw, 1.45rem);
}
.page-header-subtitulo { color: var(--v4-muted); font-size: .84rem; }

/* ── 19. Config grid + cards V4 ── */
.config-grid {
  gap: 12px;
  margin-bottom: 20px;
}
.config-card-btn {
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius-sm);
  background: #fff;
  padding: 14px 16px;
}
.config-card-btn:hover,
.config-card-btn:focus-visible {
  border-color: #c0cfe0;
  box-shadow: var(--v4-shadow-sm);
  transform: translateY(-1px);
}
.config-group-label {
  color: var(--v4-muted);
  letter-spacing: .1em;
  margin: 16px 0 8px;
}

/* ── 19. tela-aniversariantes: destaques na tabela ── */

/* Dia: célula com fundo azul-pastel = badge implícito */
#corpo-aniversariantes td.col-data {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--v4-navy-800);
  background: #eef3ff;
}

/* Ficha: muted */
#corpo-aniversariantes td.col-ficha {
  color: var(--v4-muted);
  font-size: .84rem;
}

/* Telefone: tabular */
#corpo-aniversariantes td:nth-child(4) {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* Idade: badge sutil */
#corpo-aniversariantes td:last-child {
  font-size: .84rem;
  font-weight: 600;
  color: var(--v4-muted);
  text-align: center;
}

/* ── 19. Ficha de impressão V4 ── */
.ficha-impressao {
  border-color: var(--v4-border);
  border-radius: var(--v4-radius);
  box-shadow: var(--v4-shadow-sm);
}

/* ── 19. tela-comunicado: wrapper e documento ── */
.comunicado-wrapper {
  max-width: 820px;
  margin: 16px auto 40px;
  padding: 0 12px;
}
.comunicado-doc {
  border-color: var(--v4-border);
  border-radius: var(--v4-radius);
  box-shadow: var(--v4-shadow-sm);
  overflow: hidden;
}

/* ============================================================================
   FASE 7 — Relatórios: cabeçalho, KPIs, gráficos, filtros
   ============================================================================ */

/* ── 20. KPI cards (config-card.card-stat) V4 ── */
.config-cards {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.config-card.card-stat {
  background: #fff;
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius);
  box-shadow: var(--v4-shadow-sm);
  padding: 18px 20px;
  align-items: flex-start;
  gap: 14px;
}
.config-card.card-stat .config-card-icone {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  flex-shrink: 0;
}
.config-card.card-stat .config-card-conteudo h3 {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--v4-muted);
  margin: 0 0 6px;
}

/* Número grande de KPI — afeta relatórios e home hero (hero tem seletor mais específico) */
.stat-numero {
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  font-weight: 700;
  color: var(--v4-navy-900);
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}
.stat-detalhe {
  font-size: .78rem;
  color: var(--v4-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Badge de totais ativos/inativos nos KPIs */
.badge-estat {
  font-size: .7rem;
  padding: 3px 10px;
  border-radius: 8px;
  font-weight: 600;
}
.badge-estat-ativo   { background: #e3f5ec; color: var(--v4-success); }
.badge-estat-inativo { background: #fef2f2; color: var(--v4-danger);  }

/* ── 20. Nav rápida de relatórios V4 ── */
.rel-nav {
  background: #fff;
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius);
  box-shadow: var(--v4-shadow-sm);
  padding: 10px 14px;
  margin-bottom: 18px;
  /* position:sticky e z-index:50 continuam do style.css */
}
.rel-nav-btn {
  border-radius: 8px;
  padding: 6px 14px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--v4-muted);
  background: transparent;
}
.rel-nav-btn:hover {
  background: #f0f4f9;
  color: var(--v4-navy-900);
  text-decoration: none;
}
.rel-nav-btn-destaque {
  background: #e3f5ec;
  color: var(--v4-success);
  border: 1px solid #a3d9bb;
}
.rel-nav-btn-destaque:hover { background: #d1f0e1; color: var(--v4-success); text-decoration: none; }

/* ── 20. Blocos de gráfico V4 ── */
.rel-grafico-bloco {
  border-color: var(--v4-border);
  border-radius: var(--v4-radius);
  box-shadow: var(--v4-shadow-sm);
}
.rel-grafico-cabecalho h3 {
  color: var(--v4-navy-900);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
}
.rel-grafico-area { margin-top: 16px; }

/* ── 20. Filtros de inadimplentes: botão ativo V4 ── */
.btn-inad-filtro.ativo {
  background: var(--v4-navy-900) !important;
  border-color: var(--v4-navy-900) !important;
  color: #fff !important;
}

/* ── 20. Adimplência: cards V4 ── */
.adim-cards { gap: 12px; margin: 16px 0 20px; }
.adim-card {
  background: #fff;
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius-sm);
  box-shadow: none;
  padding: 14px 12px;
}
.adim-card-num {
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  font-weight: 700;
  line-height: 1.1;
}
.adim-card-label {
  font-size: .7rem;
  color: var(--v4-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ── 20. Cabeçalho institucional de impressão ── */
.home-cabecalho-institucional {
  border-radius: var(--v4-radius);
  overflow: hidden;
}

/* ── 20. Mobile: KPIs 2 colunas → 1 coluna ── */
@media (max-width: 640px) {
  .config-cards    { grid-template-columns: 1fr 1fr; }
  .adim-card       { flex: 1 1 calc(50% - 6px); }
  .rel-grafico-bloco { padding: 16px 14px; }
}
@media (max-width: 420px) {
  .config-cards    { grid-template-columns: 1fr; }
  .adim-card       { flex: 1 1 100%; }
}

/* ============================================================================
   FASE 8 — Configurações: 2 grupos + Comunicação 3 cards
   ============================================================================ */

/* ── 21. Configurações: grid 2 colunas desktop, 1 mobile ── */
#tela-configuracoes .config-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ── 21. Comunicação: grid 3 colunas desktop ── */
#tela-comunicacao .config-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ── 21. Responsividade ── */
@media (max-width: 900px) {
  #tela-comunicacao .config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  #tela-configuracoes .config-grid,
  #tela-comunicacao .config-grid { grid-template-columns: 1fr; }
}

/* ── 12. prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================================
   FASE 4 — Painel home: quick cards grid + footer admin
   Seletores sem !important quando possível — v4.css carrega após style.css,
   a ordem de cascata garante a precedência.
   ============================================================================ */

/* ── 17. home-scroll-area: max-width V4 + padding seguro ── */
.home-scroll-area {
  max-width: 1380px;
  padding: 24px 24px calc(34px + env(safe-area-inset-bottom));
}

/* ── 17. Título de seção ── */
.home-section-titulo {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--v4-navy-900);
  letter-spacing: -.01em;
  margin: 0 0 14px;
}

/* ── 17. Quick grid: 3 colunas no desktop
   Sobrescreve style.css que usa 4-col a partir de 900px ── */
.home-quick-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* ── 17. Card de atalho V4 ── */
.home-quick-card {
  min-height: 130px;
  border-color: var(--v4-border);
  border-radius: var(--v4-radius);
  box-shadow: var(--v4-shadow-sm);
}

/* ── 17. Ícone V4: border-radius aumentado ── */
.hqc-icone { border-radius: 13px; }

/* ── 17. Textos do card V4 ── */
.hqc-info strong { font-size: .84rem; color: var(--v4-text); }
.hqc-info p      { font-size: .76rem; color: var(--v4-muted); }

/* ── 17. Seta V4 ── */
.hqc-arrow { color: var(--v4-muted); }
.home-quick-card:hover .hqc-arrow { color: var(--v4-navy-900); }

/* ── 17. Rodapé da home V4 ── */
.home-rodape {
  margin-top: 24px;
  padding: 18px 0 10px;
  border-top: 1px solid var(--v4-border);
  gap: 10px;
}
.home-rodape-versiculo {
  font-size: .82rem;
  font-style: italic;
  font-weight: 500;
  color: var(--v4-gold-600);
}
.home-rodape-copy {
  font-size: .74rem;
  color: var(--v4-muted);
}

/* ── 17. Responsividade do quick grid ── */
@media (max-width: 1024px) {
  .home-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 480px) {
  .home-scroll-area { padding: 14px 12px calc(80px + env(safe-area-inset-bottom)); }
  .home-quick-grid  { grid-template-columns: 1fr; gap: 10px; }
  .home-quick-card  { min-height: 0; flex-direction: row; align-items: center; }
  .hqc-arrow        { margin-left: auto; }
}

/* ============================================================================
   FASE 9 — Auditoria, Usuários, Modais gerais, Solicitações
   ============================================================================ */

/* ── 22. Auditoria: filtros como card V4 ── */
.audit-filtros {
  background: #fff;
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius-sm);
  box-shadow: var(--v4-shadow-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}

/* ── 22. Badges de ação do audit log — pill V4 ── */
.audit-badge {
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .72rem;
  font-weight: 700;
  border: 1px solid transparent;
}
.audit-badge-insert  { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.audit-badge-update  { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.audit-badge-delete  { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.audit-badge-login   { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.audit-badge-export  { background: #ffedd5; color: #9a3412; border-color: #fdba74; }

/* ── 22. Auditoria: word-break em células de texto longo ── */
#corpo-auditoria td {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 260px;
}

/* ── 22. Modais gerais: radius e sombra V4 ── */
.modal-caixa {
  border-radius: var(--v4-radius);
  box-shadow: var(--v4-shadow);
}
.modal-caixa h3 {
  color: var(--v4-navy-900);
  border-bottom-color: var(--v4-border);
}
.modal-caixa-verif h3.verif-titulo {
  color: var(--v4-navy-800);
  border-bottom-color: var(--v4-navy-800);
}

/* ── 22. Modal com overlay (usuários, email-templates, etc.) ── */
.modal-overlay .modal-caixa {
  border-radius: var(--v4-radius);
}
.modal-header {
  border-bottom-color: var(--v4-border);
  border-radius: var(--v4-radius) var(--v4-radius) 0 0;
}
.modal-titulo {
  color: var(--v4-navy-900);
  font-size: 1rem;
}
.modal-fechar:focus-visible {
  outline: 2px solid var(--v4-focus);
  outline-offset: 2px;
}

/* ── 22. Solicitações: cards V4 ── */
.sol-card {
  border-color: var(--v4-border);
  border-radius: var(--v4-radius);
  box-shadow: var(--v4-shadow-sm);
}
.sol-card-ficha {
  border-radius: 999px;
}

/* ── 22. Badges de flag pastoral V4 — pill e refinamento ── */
.badge-flag {
  border-radius: 999px;
  font-size: .7rem;
}
.badge-pendente     { border-radius: 999px; }
.badge-flag-segunda  { border-color: #f59e0b; }
.badge-flag-remocao  { border-color: #fca5a5; }
.badge-flag-casamento { border-color: #6ee7b7; }

/* ── 22. Mobile: scroll horizontal na tabela de auditoria ── */
@media (max-width: 768px) {
  #tela-auditoria .container-tabela { overflow-x: auto; }
  #corpo-auditoria td { max-width: 140px; }
}

/* ============================================================================
   FASE 10 — Responsividade global e impressão
   ============================================================================ */

/* ── 23. Padding reduzido nas telas admin em mobile ── */
@media (max-width: 640px) {
  /* Telas dentro de #conteudo (exceto home) */
  #conteudo > .tela:not(#tela-inicial-home) {
    padding: 14px 12px;
  }

  /* Cabeçalho de página */
  .page-header {
    padding: 12px 14px;
    margin-bottom: 14px;
  }

  /* Formulário de cadastro */
  #formulario-cadastro {
    padding: 14px 12px;
  }

  /* Barra de busca */
  .campo-busca-wrap {
    padding: 8px 10px;
    gap: 8px;
  }

  /* Scroll horizontal em todas as tabelas admin */
  .container-tabela {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 23. Título do page-header em telas muito estreitas ── */
@media (max-width: 380px) {
  .page-header-titulo { font-size: 1rem; }
}

/* ── 23. Impressão: remover adições V4 que não pertencem ao papel ──
   O style.css já zera padding de .tela.ativa e esconde sidebar/topbar.
   Aqui apenas garantimos que sombras e fundos V4 não sujem a impressão. ── */
@media print {
  .page-header,
  .campo-busca-wrap,
  .container-tabela,
  #formulario-cadastro,
  .rel-nav,
  .rel-grafico-bloco,
  .sol-card,
  .audit-filtros {
    box-shadow: none !important;
  }

  /* Fundos de cartão V4 → branco no papel */
  .page-header,
  .campo-busca-wrap,
  .audit-filtros {
    background: #fff !important;
    border-color: #ddd !important;
  }
}