/* Visual alinhado ao app Conexão da Igreja RED: Inter, superfícies limpas, cantos bem arredondados. */
:root {
  --vermelho: #c92041;
  --vermelho-texto: #c92041;
  --vermelho-suave: #fdecef;
  --verde: #15803d;
  --verde-suave: #e8f6ee;
  --ambar: #c2620a;
  --ambar-suave: #fdf1e4;
  --azul: #3b5bdb;
  --azul-suave: #eef1fd;
  --fundo: #ffffff;
  --fundo-suave: #f5f5f5;
  --cartao: #ffffff;
  --borda: #e8e8e8;
  --texto: #111111;
  --texto-suave: #6b6b6b;
  --inverso: #111111;
  --inverso-texto: #ffffff;
  --raio: 20px;
  --raio-p: 12px;
  color-scheme: light;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--texto);
  background: var(--fundo);
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --vermelho-texto: #f0506e;
    --vermelho-suave: #2a1015;
    --verde: #3ccf85;
    --verde-suave: #0f2a1c;
    --ambar: #f0a23b;
    --ambar-suave: #2b1d0a;
    --azul: #7d95f5;
    --azul-suave: #151c33;
    --fundo: #0a0a0a;
    --fundo-suave: #1a1a1a;
    --cartao: #0f0f0f;
    --borda: #262626;
    --texto: #f5f5f5;
    --texto-suave: #8f8f8f;
    --inverso: #f5f5f5;
    --inverso-texto: #0a0a0a;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --vermelho-texto: #f0506e;
  --vermelho-suave: #2a1015;
  --verde: #3ccf85;
  --verde-suave: #0f2a1c;
  --ambar: #f0a23b;
  --ambar-suave: #2b1d0a;
  --azul: #7d95f5;
  --azul-suave: #151c33;
  --fundo: #0a0a0a;
  --fundo-suave: #1a1a1a;
  --cartao: #0f0f0f;
  --borda: #262626;
  --texto: #f5f5f5;
  --texto-suave: #8f8f8f;
  --inverso: #f5f5f5;
  --inverso-texto: #0a0a0a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); }
button, input, select, textarea { font: inherit; color: inherit; }
svg.lucide { width: 20px; height: 20px; stroke-width: 2; flex-shrink: 0; }
svg.lucide.p { width: 16px; height: 16px; }
svg.lucide.g { width: 24px; height: 24px; }
svg.lucide.xg { width: 48px; height: 48px; stroke-width: 1.75; }

.topo {
  background: var(--cartao);
  color: var(--texto);
  border-bottom: 1px solid var(--borda);
  padding: 12px 16px;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topo h1 { font-size: 17px; margin: 0; font-weight: 700; letter-spacing: -0.01em; flex: 1; }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda);
  background: var(--cartao);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}
.botao:active { opacity: 0.6; }
.botao:disabled { opacity: 0.4; }
.botao.primario { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.botao.escuro { background: var(--inverso); border-color: var(--inverso); color: var(--inverso-texto); }
.botao.perigo { color: var(--vermelho-texto); }
.botao.icone { padding: 0; width: 44px; border-radius: 999px; }
.botao.fantasma { background: transparent; border-color: transparent; }
.botao.redondo { background: var(--fundo-suave); border-color: transparent; }

.secao-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 28px 0 10px;
}
.secao-titulo h2 {
  flex: 1;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
}

.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: var(--cartao);
  font-size: 14px;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.chip.desligado { text-decoration: line-through; opacity: 0.5; }
.chip.ativo { background: var(--inverso); border-color: var(--inverso); color: var(--inverso-texto); }

.selo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--fundo-suave);
  color: var(--texto-suave);
}
.selo.verde { background: var(--verde-suave); color: var(--verde); }
.selo.ambar { background: var(--ambar-suave); color: var(--ambar); }
.selo.vermelho { background: var(--vermelho-suave); color: var(--vermelho-texto); }
.selo.azul { background: var(--azul-suave); color: var(--azul); }

.foto {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  background: var(--fundo-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-suave);
  flex-shrink: 0;
}

dialog {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 0;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  background: var(--cartao);
  color: var(--texto);
}
dialog::backdrop { background: rgb(0 0 0 / 0.55); }
dialog form { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
dialog h3 { margin: 0; font-size: 18px; font-weight: 700; }

label.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--texto-suave); }
label.campo input, label.campo select, label.campo textarea {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--fundo);
  font-size: 16px;
  font-weight: 500;
  color: var(--texto);
}
.linha { display: flex; gap: 12px; align-items: center; }
.linha > * { flex: 1; }
.acoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

.vazio { text-align: center; color: var(--texto-suave); padding: 48px 16px; }
.aviso-erro { color: var(--vermelho-texto); font-weight: 600; font-size: 14px; min-height: 1em; }
.dica { margin: 0; font-size: 13px; color: var(--texto-suave); }
.oculto { display: none !important; }

/* Logo oficial da Igreja RED no cabeçalho. */
.marca { display: flex; align-items: center; gap: 10px; }
.marca .logo-red { width: 36px; height: 36px; flex-shrink: 0; }