/* =====================================================================
   Escalas Litúrgicas | São João Bosco — estilos (Versão Visual 2.0)

   Organização:
     1. Tokens (cores, tipografia, espaço, raio, sombra, transição) + tema escuro
     2. Base
     3. Layout: app, sidebar, conta, menu mobile, conteúdo
     4. Cabeçalho de página
     5. Componentes: cartões, números, botões, formulários, selos, tabelas,
        listas, abas, menu suspenso, modal, avisos, estados vazios
     6. Telas: escala/vagas, calendário, disponibilidade, notificações,
        membros, WhatsApp, login, página institucional
     7. Impressão
   Cores só por token: nada de hexadecimal fora do bloco 1.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */

:root {
  color-scheme: light;

  /* Cores: identidade vinho/terracota + neutros quentes. */
  --brand: #8a2d24;
  --brand-dark: #6e211b;
  --brand-light: #f5e9e6;
  --on-brand: #ffffff;
  --background: #faf9f6;
  --surface: #ffffff;
  --surface-2: #f4f1ec;          /* fundos discretos (hover, cabeçalho de grupo) */
  --border: #e6e0da;
  --border-strong: #d3cbc2;      /* bordas de controles (inputs, botões) */
  --text: #211d1a;
  --muted: #6b625c;              /* texto secundário (contraste ≥ 4,5:1 no fundo) */
  --subtle: #8c827b;             /* só placeholders e itens desabilitados */
  --success: #357a4e;  --success-light: #eaf5ed;
  --warning: #8a5a06;  --warning-light: #fff4d9;   /* tom escurecido do #A36A08 para contraste em texto pequeno */
  --danger: #b33a32;   --danger-light: #fcecea;
  --info: #3d6f9e;     --info-light: #eaf2f8;
  --neutral: #5f5751;  --neutral-light: #f0ece7;
  --overlay: rgb(28 22 18 / .45);
  --focus-ring: 0 0 0 3px var(--brand-light);

  /* Tipografia (fonte do sistema). */
  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --fs-display: 28px;   /* título da página */
  --fs-section: 18px;   /* título de seção */
  --fs-card: 16px;      /* título de cartão */
  --fs-body: 14px;
  --fs-small: 13px;
  --fs-label: 12px;
  --fs-number: 28px;    /* indicadores */
  --lh: 1.5;

  /* Espaço (escala única). */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* Raios. */
  --r-sm: 6px; --r-input: 8px; --r-btn: 8px; --r-card: 12px; --r-modal: 14px; --r-pill: 999px;

  /* Sombras: só para o que flutua (menus, modais, avisos). */
  --shadow-sm: 0 1px 2px rgb(33 29 26 / .04);
  --shadow-pop: 0 10px 30px rgb(33 29 26 / .12), 0 2px 6px rgb(33 29 26 / .06);

  /* Transições curtas. */
  --t-fast: 140ms ease;
  --t-modal: 160ms ease;

  /* Medidas. */
  --sidebar: 256px;
  --content-max: 1240px;
  --control-h: 42px;
  --control-h-sm: 32px;
}

/* Tema escuro (segue o sistema; data-theme força um dos dois). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand: #d98a7e; --brand-dark: #e8a296; --brand-light: #3a2522; --on-brand: #1a0f0d;
    --background: #151412; --surface: #1e1c1a; --surface-2: #272522;
    --border: #35322e; --border-strong: #4a463f;
    --text: #eeebe6; --muted: #b6b0a6; --subtle: #8a847a;
    --success: #86c795; --success-light: #1f3325;
    --warning: #e3b35c; --warning-light: #3a2f1a;
    --danger: #f08b80;  --danger-light: #3d2220;
    --info: #8bb9e7;    --info-light: #1d2c3b;
    --neutral: #b6b0a6; --neutral-light: #2c2a27;
    --overlay: rgb(0 0 0 / .6);
    --shadow-sm: none;
    --shadow-pop: 0 10px 30px rgb(0 0 0 / .45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #d98a7e; --brand-dark: #e8a296; --brand-light: #3a2522; --on-brand: #1a0f0d;
  --background: #151412; --surface: #1e1c1a; --surface-2: #272522;
  --border: #35322e; --border-strong: #4a463f;
  --text: #eeebe6; --muted: #b6b0a6; --subtle: #8a847a;
  --success: #86c795; --success-light: #1f3325;
  --warning: #e3b35c; --warning-light: #3a2f1a;
  --danger: #f08b80;  --danger-light: #3d2220;
  --info: #8bb9e7;    --info-light: #1d2c3b;
  --neutral: #b6b0a6; --neutral-light: #2c2a27;
  --overlay: rgb(0 0 0 / .6);
  --shadow-sm: none;
  --shadow-pop: 0 10px 30px rgb(0 0 0 / .45);
}

/* ---------- 2. Base ---------- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--background); color: var(--text);
  font: var(--fs-body)/var(--lh) var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: 1.25; margin: 0; color: var(--text); }
h1 { font-size: var(--fs-display); font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: var(--fs-section); font-weight: 650; }
h3 { font-size: var(--fs-card); font-weight: 650; }
p { margin: 0 0 var(--s-3); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
small { font-size: var(--fs-small); }
small, .suave { color: var(--muted); }
.muito-suave { color: var(--muted); font-size: var(--fs-small); }
.pre { white-space: pre-line; }
.num { font-variant-numeric: tabular-nums; }
.carregando-inicial { padding: var(--s-7); text-align: center; color: var(--muted); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-4) 0; }
code { font-family: var(--font-mono); font-size: .92em; }
.icone { flex: none; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 3. Layout ---------- */

.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.app > div { min-width: 0; }

/* Sidebar */
.lateral {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: var(--s-4) var(--s-3);
}
.lateral-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-1); }
.lateral .lateral-fechar { display: none; }
.lateral-topo .sino-botao { min-height: var(--control-h-sm); min-width: var(--control-h-sm); padding: 0; }

.marca { display: flex; gap: 10px; align-items: center; padding: var(--s-1) var(--s-1) var(--s-4) var(--s-2); min-width: 0; }
.lateral .marca strong { white-space: nowrap; }
.marca-icone {
  width: 36px; height: 36px; border-radius: 10px; background: var(--brand); color: var(--on-brand);
  display: grid; place-items: center; flex: none;
}
.marca-texto { min-width: 0; }
.marca strong { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--text); }
.marca small { display: block; font-size: var(--fs-small); color: var(--muted); line-height: 1.3; }
.selo-ambiente {
  display: inline-block; margin-top: var(--s-1); padding: 0 6px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em; line-height: 16px;
  background: var(--warning-light); color: var(--warning);
}

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-grupo {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  padding: var(--s-4) var(--s-3) var(--s-1);
}
.nav a {
  position: relative; display: flex; align-items: center; gap: var(--s-3);
  min-height: 38px; padding: var(--s-2) var(--s-3); border-radius: var(--r-btn);
  color: var(--muted); font-weight: 550; transition: background var(--t-fast), color var(--t-fast);
}
.nav a .icone { color: var(--subtle); transition: color var(--t-fast); }
.nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav a:hover .icone { color: var(--text); }
.nav a[aria-current="page"] { background: var(--brand-light); color: var(--brand); font-weight: 600; }
.nav a[aria-current="page"] .icone { color: var(--brand); }
.nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand);
}

/* Conta (rodapé da sidebar) */
.lateral-rodape { margin-top: auto; padding-top: var(--s-4); }
.conta {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-3); align-items: center;
  padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--background);
}
.conta-nome { font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.conta-papel { font-size: var(--fs-label); color: var(--muted); font-weight: 600; }
.conta-email { grid-column: 1 / -1; font-size: var(--fs-label); color: var(--muted); overflow-wrap: anywhere; }
.conta .btn { grid-column: 1 / -1; justify-content: flex-start; margin-top: var(--s-1); }
.lateral-institucional { margin: var(--s-3) var(--s-3) 0; font-size: var(--fs-label); }
.lateral-institucional a { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.lateral-institucional a:hover { color: var(--brand); }

.avatar {
  flex: none; width: 36px; height: 36px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--brand-light); color: var(--brand); font-weight: 700; font-size: var(--fs-small); letter-spacing: .02em;
}
.avatar-sm { width: 32px; height: 32px; font-size: var(--fs-label); }

/* Barra superior do celular */
.topo-movel { display: none; }
.topo-movel-titulo { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.conteudo {
  min-width: 0; width: 100%; max-width: var(--content-max); margin: 0 auto;
  padding: var(--s-6) var(--s-6) var(--s-7);
}

@media (max-width: 1100px) {
  .conteudo { padding: var(--s-5) var(--s-5) var(--s-7); }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral {
    position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 40;
    transform: translateX(-100%); visibility: hidden;
    transition: transform var(--t-modal), visibility 0s linear 160ms; box-shadow: var(--shadow-pop);
  }
  .app.menu-aberto .lateral { transform: none; visibility: visible; transition: transform var(--t-modal); }
  .app.menu-aberto::after { content: ""; position: fixed; inset: 0; background: var(--overlay); z-index: 30; }
  .lateral .lateral-fechar { display: inline-flex; }
  .topo-movel {
    display: flex; align-items: center; gap: var(--s-2); position: sticky; top: 0; z-index: 20;
    background: var(--surface); border-bottom: 1px solid var(--border); padding: var(--s-2) var(--s-4); min-height: 56px;
  }
  .conteudo { padding: var(--s-5) var(--s-4) var(--s-7); }
  .nav a[aria-current="page"]::before { left: -12px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- 4. Cabeçalho de página ---------- */

.pagina-topo {
  display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--s-5);
}
.pagina-topo > div:first-child { min-width: 0; max-width: 72ch; }
.pagina-topo p { margin: var(--s-1) 0 0; color: var(--muted); font-size: 15px; }
.pagina-topo .pagina-nota { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--muted); }
.voltar { display: inline-flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-2); font-size: var(--fs-small); font-weight: 550; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.barra { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-bottom: var(--s-4); }
.barra .espaco { flex: 1; }
@media (max-width: 600px) {
  h1 { font-size: 24px; }
  .pagina-topo { margin-bottom: var(--s-4); }
  .pagina-topo p { font-size: var(--fs-body); }
}

/* ---------- 5. Componentes ---------- */

/* Cartões e grades */
.cartao {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: var(--s-5); margin-bottom: var(--s-5); box-shadow: var(--shadow-sm);
}
.cartao.destaque { border-color: var(--brand-light); box-shadow: inset 3px 0 0 var(--brand), var(--shadow-sm); }
.cartao-topo { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
.cartao-topo h2 { font-size: var(--fs-card); }
.cartao-topo p { margin: var(--s-1) 0 0; font-size: var(--fs-small); color: var(--muted); }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--s-5); }
.grade-2 > .cartao { margin-bottom: 0; }
.pilha > * + * { margin-top: var(--s-5); }
@media (max-width: 600px) { .cartao { padding: var(--s-4); } .grade-2 { gap: var(--s-4); } }

/* Indicadores numéricos: neutros; cor só quando há algo a fazer. */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-5); }
.numero {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: var(--s-4); box-shadow: var(--shadow-sm);
}
.numero strong { display: block; font-size: var(--fs-number); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -.02em; }
.numero span { display: block; margin-top: var(--s-1); font-size: var(--fs-small); color: var(--muted); }
.numero.destaque-perigo { border-color: var(--danger-light); }
.numero.destaque-perigo strong { color: var(--danger); }
.numero.destaque-aviso { border-color: var(--warning-light); }
.numero.destaque-aviso strong { color: var(--warning); }
.numero.destaque-ok strong { color: var(--success); }

/* Resumo compacto (informação rápida que não compete com o conteúdo) */
.resumo { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0 0 var(--s-5); padding: 0; list-style: none; }
.resumo li { display: flex; align-items: baseline; gap: 6px; color: var(--muted); font-size: var(--fs-small); }
.resumo b { color: var(--text); font-size: var(--fs-card); font-weight: 700; font-variant-numeric: tabular-nums; }
.resumo .perigo b { color: var(--danger); }
.resumo .aviso b { color: var(--warning); }

.info-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3) var(--s-5); margin: 0; }
.info-lista dt { font-size: var(--fs-label); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.info-lista dd { margin: 2px 0 0; font-weight: 500; }

/* Botões: primário, secundário (padrão), perigoso e textual. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 38px; padding: 0 var(--s-4); border-radius: var(--r-btn);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; font-size: var(--fs-body); line-height: 1.2; cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.btn-primario { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-primario:hover:not(:disabled) { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-perigo { background: var(--danger); border-color: var(--danger); color: var(--on-brand); }
.btn-perigo:hover:not(:disabled) { background: var(--danger); filter: brightness(.92); }
.btn-ok { background: var(--success); border-color: var(--success); color: var(--on-brand); }
.btn-ok:hover:not(:disabled) { background: var(--success); filter: brightness(.92); }
/* (no tema escuro --on-brand é escuro: texto legível sobre vinho, vermelho e verde claros) */
/* Textual: ações auxiliares (Ver, Editar, Abrir). btn-fantasma é o nome antigo. */
.btn-texto, .btn-fantasma { border-color: transparent; background: transparent; color: var(--muted); }
.btn-texto:hover:not(:disabled), .btn-fantasma:hover:not(:disabled) { background: var(--surface-2); border-color: transparent; color: var(--text); }
.btn-sm { min-height: var(--control-h-sm); padding: 0 var(--s-3); font-size: var(--fs-small); }
.btn-icone { min-width: 38px; padding: 0 var(--s-2); }
.btn-icone.btn-sm { min-width: var(--control-h-sm); }
.btn-link { border: 0; background: none; padding: 0; color: var(--brand); font: inherit; font-weight: 550; cursor: pointer; }
.btn-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.btn.ativo { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }

/* Formulários: rótulo, campo, dica, erro. */
.form { display: grid; gap: var(--s-4); }
.form-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--s-4); }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo-rotulo { font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.campo-dica { font-size: var(--fs-label); color: var(--muted); }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-input);
  padding: 0 var(--s-3); min-height: var(--control-h); width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
textarea { padding: 10px var(--s-3); resize: vertical; min-height: 84px; line-height: var(--lh); }
input::placeholder, textarea::placeholder { color: var(--subtle); }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
input[type="checkbox"], input[type="radio"] {
  width: 18px; height: 18px; min-height: 0; padding: 0; accent-color: var(--brand); margin: 0; flex: none; box-shadow: none;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.marcador { display: flex; gap: var(--s-2); align-items: center; cursor: pointer; font-weight: 500; min-height: 28px; }
.marcadores { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
fieldset { border: 1px solid var(--border); border-radius: var(--r-input); padding: var(--s-3) var(--s-4); margin: 0; }
legend { font-size: var(--fs-small); font-weight: 600; color: var(--text); padding: 0 6px; }
.busca { max-width: 340px; }
.inline { width: auto; }

/* Selos (badges): pílula, texto pequeno, sempre com texto (nunca só cor). */
.selo {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-label); font-weight: 600; line-height: 18px; white-space: nowrap;
  background: var(--neutral-light); color: var(--neutral);
}
.selo-ok { background: var(--success-light); color: var(--success); }
.selo-aviso { background: var(--warning-light); color: var(--warning); }
.selo-perigo { background: var(--danger-light); color: var(--danger); }
.selo-info { background: var(--info-light); color: var(--info); }
.selo-primaria { background: var(--brand-light); color: var(--brand); }
.selos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Comunicações: status da mensagem × status da resposta (linhas separadas). */
.linha-status { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; font-size: var(--fs-small); }
.rotulo-status { color: var(--muted); min-width: 5.5em; }
.passos-mensagem { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.passo { color: var(--muted); }
.passo.feito { color: var(--success); font-weight: 600; }
.ao-vivo { color: var(--success); white-space: nowrap; }
.resposta-membro { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.resumo-destinatarios { margin: 0 0 var(--s-3); }
.nota-provedor { margin: 0 0 var(--s-3); }
.linha-config { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; }
.linha-config > div { flex: 1 1 18rem; display: grid; gap: 4px; }
.filtros-entregas { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: 0 0 var(--s-3); }
.filtros-entregas input[type="search"] { min-width: 12rem; }
.chip {
  display: inline-block; padding: 1px 8px; border: 1px solid var(--border); border-radius: var(--r-pill);
  font-size: var(--fs-label); font-weight: 500; color: var(--muted); background: var(--surface);
}

/* Tabelas */
.tabela-rolagem { overflow-x: auto; margin: 0 calc(-1 * var(--s-5)); padding: 0 var(--s-5); }
table.tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.tabela th {
  text-align: left; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tabela td { padding: var(--s-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel:hover td { background: var(--surface-2); }
.tabela .direita { text-align: right; }
.tabela .centro { text-align: center; }
.tabela tr.apagada td { color: var(--muted); }
.tabela tr.alerta td { background: var(--danger-light); }
@media (max-width: 600px) { .tabela-rolagem { margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4); } }

/* Tabela que vira cartões no celular (cada td com data-rotulo). */
@media (max-width: 700px) {
  .tabela-cartoes thead { display: none; }
  .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td { display: block; width: 100%; }
  .tabela-cartoes tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
  .tabela-cartoes tr:last-child { border-bottom: 0; }
  .tabela-cartoes td { border: 0; padding: 4px 0; text-align: left !important; }
  .tabela-cartoes td[data-rotulo] { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
  .tabela-cartoes td[data-rotulo]::before { content: attr(data-rotulo); font-size: var(--fs-small); color: var(--muted); }
}

/* Listas de itens */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { display: flex; gap: var(--s-3) var(--s-4); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.lista > li:first-child { padding-top: 0; }
.lista > li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista .corpo { flex: 1; min-width: 0; }
.lista .corpo strong { display: block; font-weight: 600; }
.lista .corpo small { display: block; }
.data-bloco {
  flex: none; width: 48px; text-align: center; border-radius: var(--r-input); background: var(--brand-light); color: var(--brand); padding: 6px 0;
}
.data-bloco b { display: block; font-size: 18px; line-height: 1.1; }
.data-bloco span { display: block; font-size: 11px; text-transform: uppercase; font-weight: 600; letter-spacing: .04em; }

/* Abas */
.abas { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--border); margin-bottom: var(--s-5); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.abas button {
  border: 0; background: none; font: inherit; font-weight: 600; color: var(--muted);
  padding: var(--s-3) var(--s-4); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.abas button:hover { color: var(--text); }
.abas button[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.abas button:focus-visible { outline-offset: -2px; border-radius: var(--r-sm) var(--r-sm) 0 0; }

/* Menu suspenso */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-itens {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 25; min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-pop); padding: var(--s-1);
}
.menu-item {
  display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit;
  color: var(--text); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); cursor: pointer;
}
.menu-item:hover { background: var(--surface-2); }
.menu-item.perigo { color: var(--danger); }

/* Seletor de mês */
.seletor-mes { display: inline-flex; align-items: center; gap: var(--s-2); }
.seletor-mes strong { min-width: 160px; text-align: center; font-size: var(--fs-card); font-weight: 650; }

/* Modal */
.modal-fundo {
  position: fixed; inset: 0; z-index: 50; background: var(--overlay);
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh var(--s-4); overflow-y: auto;
  animation: aparecer var(--t-modal);
}
.modal {
  background: var(--surface); border-radius: var(--r-modal); box-shadow: var(--shadow-pop); width: min(560px, 100%);
  display: flex; flex-direction: column; max-height: 88vh; animation: subir var(--t-modal);
}
.modal-largo { width: min(880px, 100%); }
.modal-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
.modal-topo h2 { font-size: var(--fs-section); }
.modal-corpo { padding: var(--s-5); overflow-y: auto; }
.modal-rodape { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); }
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 600px) {
  .modal-fundo { padding: var(--s-4) var(--s-3); }
  .modal-topo, .modal-corpo, .modal-rodape { padding-left: var(--s-4); padding-right: var(--s-4); }
}

/* Avisos (toasts) */
.avisos { position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 60; display: flex; flex-direction: column; gap: var(--s-2); max-width: min(420px, calc(100vw - 32px)); }
.aviso {
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--success);
  border-radius: var(--r-input); box-shadow: var(--shadow-pop); padding: var(--s-3) var(--s-4); white-space: pre-line; cursor: pointer;
  animation: subir var(--t-modal);
}
.aviso-erro { border-left-color: var(--danger); }
.aviso-aviso { border-left-color: var(--warning); }
.aviso-info { border-left-color: var(--info); }

/* Estados: vazio, carregando, notas */
.estado { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-1); padding: var(--s-6) var(--s-4); color: var(--muted); }
.estado strong { display: block; color: var(--text); font-size: var(--fs-card); font-weight: 650; }
.estado p { margin: 0; max-width: 52ch; }
.estado > .btn, .estado .acoes { margin-top: var(--s-3); }
.estado-icone {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--s-2);
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted);
}
.nota {
  background: var(--info-light); color: var(--info); border-radius: var(--r-input); padding: var(--s-3) var(--s-4);
  font-size: var(--fs-small); margin-bottom: var(--s-4);
}
.nota-aviso { background: var(--warning-light); color: var(--warning); }
.nota-ok { background: var(--success-light); color: var(--success); }
.nota-perigo { background: var(--danger-light); color: var(--danger); }
.progresso { height: 8px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.progresso > div { height: 100%; background: var(--brand); transition: width .2s; }

/* ---------- 6. Telas ---------- */

/* Escala: cabeçalho do mês e vagas */
.escala-cabecalho { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: center; justify-content: space-between; }
.escala-cabecalho .escala-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.escala-cabecalho .escala-titulo h2 { font-size: var(--fs-section); }
.escala-cabecalho p { flex-basis: 100%; margin: 0; font-size: var(--fs-small); color: var(--muted); }

.celebracao-bloco { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); margin-bottom: var(--s-4); overflow: hidden; }
.celebracao-bloco > header {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border);
}
.celebracao-bloco > header .titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.celebracao-bloco > header h3 a { color: inherit; }
.celebracao-bloco.cancelada { opacity: .7; }
.grupo-ministerio {
  padding: 6px var(--s-5); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.vaga {
  display: grid; grid-template-columns: minmax(150px, 1fr) minmax(170px, 1.6fr) auto; gap: var(--s-2) var(--s-4);
  align-items: center; padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border);
}
.vaga:last-child { border-bottom: 0; }
.vaga .rotulo strong { display: block; font-weight: 600; }
.vaga .rotulo small { font-size: var(--fs-small); }
.vaga .pessoa { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vaga .pessoa-nome { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-weight: 600; }
.vaga .pessoa-nome .icone { color: var(--muted); }
.vaga .vazia { color: var(--muted); font-weight: 400; }
.vaga .vazia.obrigatoria { color: var(--danger); font-weight: 600; }
.vaga .acoes { justify-content: flex-end; }
@media (max-width: 700px) {
  .vaga { grid-template-columns: 1fr auto; padding: var(--s-3) var(--s-4); }
  .vaga .pessoa { grid-column: 1 / -1; grid-row: 2; }
  .vaga .acoes { grid-column: 2; grid-row: 1; }
  .celebracao-bloco > header, .grupo-ministerio { padding-left: var(--s-4); padding-right: var(--s-4); }
}
.pontos { font-variant-numeric: tabular-nums; }
.botao-pontos {
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--r-pill); padding: 0 8px; font: inherit; font-size: var(--fs-label); font-weight: 600; color: var(--muted); cursor: pointer;
}
.botao-pontos:hover { border-color: var(--brand); color: var(--brand); }

/* Disponibilidade */
.grade-disp { border-collapse: separate; border-spacing: 4px; }
.grade-disp th { font-size: var(--fs-label); color: var(--muted); font-weight: 600; padding: 2px; }
.grade-disp th[scope="row"] { text-align: left; padding-right: var(--s-2); white-space: nowrap; }
.celula-disp {
  width: 100%; min-width: 42px; height: 38px; border-radius: var(--r-input); border: 1px dashed var(--border-strong);
  background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-weight: 700;
}
.celula-disp[aria-pressed="true"] { background: var(--success-light); border: 1px solid var(--success); color: var(--success); }
.celula-disp:disabled { cursor: default; }
.horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--s-2); }
.horario {
  display: flex; align-items: center; gap: var(--s-3); text-align: left; font: inherit; color: var(--text);
  padding: var(--s-3); border-radius: var(--r-input); border: 1px dashed var(--border-strong); background: var(--surface); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.horario small { display: block; color: var(--muted); font-size: var(--fs-label); }
.horario-marca {
  flex: none; width: 22px; height: 22px; border-radius: var(--r-sm); border: 1px solid var(--border-strong);
  display: grid; place-items: center; font-weight: 700; font-size: var(--fs-small);
}
.horario[aria-pressed="true"] { border: 1px solid var(--success); background: var(--success-light); }
.horario[aria-pressed="true"] .horario-marca { background: var(--success); border-color: var(--success); color: var(--surface); }
.horario:disabled { cursor: progress; opacity: .7; }

code.senha {
  font: 600 20px/1.3 var(--font-mono); letter-spacing: .08em;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px var(--s-2);
}

/* Notificações (sino) */
@media (max-width: 900px) { .lateral-topo .sino { display: none; } }   /* no celular o sino fica na barra do topo */
.sino { position: relative; }
.sino-botao { position: relative; }
.sino-contador {
  position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-pill);
  background: var(--danger); color: var(--on-brand); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
/* fixed: escapa do overflow da barra lateral (que recortava o painel). A posição
   (top/left) é calculada pelo botão em js/notificacoes.js; até lá fica invisível. */
.sino-painel {
  position: fixed; top: 0; left: 0; visibility: hidden; z-index: 45;
  width: 360px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px);
  overflow-y: auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-pop);
}
@media (max-width: 900px) { .sino-painel { max-width: calc(100vw - 16px); max-height: calc(100vh - 80px); } }
.sino-painel header { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); }
.sino-painel ul { list-style: none; margin: 0; padding: 0; }
.sino-painel li { border-bottom: 1px solid var(--border); }
.sino-painel li.nao-lida { background: var(--brand-light); }
.sino-item { display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit; color: var(--text);
  padding: var(--s-3) var(--s-4) var(--s-1); cursor: pointer; }
.sino-item strong, .sino-item span, .sino-item small { display: block; }
.sino-item span { font-size: var(--fs-small); color: var(--muted); }
.sino-item small { font-size: var(--fs-label); color: var(--muted); margin-top: 2px; }
.sino-lida { font-size: var(--fs-label); padding: 0 var(--s-4) var(--s-2); }

/* Calendário: células claras; a situação vira um ponto colorido + texto. */
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendario .dia-semana { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; text-align: center; padding: 2px 0; }
.calendario .dia { min-height: 88px; border: 1px solid var(--border); border-radius: var(--r-input); padding: 6px; background: var(--surface); min-width: 0; }
.calendario .dia.fora { background: transparent; border-color: transparent; }
.calendario .dia.hoje { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.calendario .dia.hoje .numero-dia { color: var(--brand); }
.calendario .numero-dia { font-size: var(--fs-label); font-weight: 700; color: var(--muted); }
.cal-evento {
  display: flex; align-items: center; gap: 5px; width: 100%; margin-top: 4px; padding: 2px 4px; border-radius: var(--r-sm); border: 0;
  background: transparent; color: var(--text); font: inherit; font-size: 11.5px; text-align: left; cursor: pointer;
  overflow: hidden; white-space: nowrap;
}
.cal-evento:hover { background: var(--surface-2); }
.cal-evento::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--neutral); }
.cal-evento .cal-texto { overflow: hidden; text-overflow: ellipsis; }
.cal-evento.completa::before   { background: var(--success); }
.cal-evento.incompleta::before { background: var(--warning); }
.cal-evento.conflito::before   { background: var(--danger); }
.cal-evento.realizada::before  { background: var(--info); }
.cal-evento.cancelada { color: var(--muted); text-decoration: line-through; }
.cal-evento.cancelada::before { background: var(--border-strong); }
.cal-evento .pub { color: var(--brand); font-weight: 700; }
.legenda { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--fs-label); color: var(--muted); margin-top: var(--s-3); }
.legenda span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: var(--r-pill); margin-right: 6px; background: var(--neutral); }
.legenda .completa::before   { background: var(--success); }
.legenda .incompleta::before { background: var(--warning); }
.legenda .conflito::before   { background: var(--danger); }
.legenda .realizada::before  { background: var(--info); }
.legenda .cancelada::before  { background: var(--border-strong); }
.legenda .publicada::before  { display: none; }
@media (max-width: 700px) {
  .calendario { gap: 3px; }
  .calendario .dia { min-height: 54px; padding: 4px; }
  .cal-evento { display: inline-flex; width: auto; padding: 1px; margin-top: 2px; }   /* no celular: só o ponto */
  .cal-evento .cal-texto, .cal-evento .pub { display: none; }
}

/* Matriz de incompatibilidades */
.matriz td, .matriz th { text-align: center; }
.matriz th[scope="row"] { text-align: left; white-space: nowrap; }
.matriz .celula { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); font: inherit;
  font-size: var(--fs-label); padding: 4px 6px; cursor: pointer; min-width: 88px; }
.matriz .celula.BLOQUEANTE   { background: var(--danger-light); color: var(--danger); border-color: var(--danger); }
.matriz .celula.PREFERENCIAL { background: var(--warning-light); color: var(--warning); border-color: var(--warning); }
.matriz .diagonal { color: var(--muted); font-size: var(--fs-label); }

/* Membros: lista com avatar de iniciais */
.membro-linha { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.membro-linha .membro-nome { display: block; font-weight: 600; color: var(--text); }
.membro-linha a.membro-nome:hover { color: var(--brand); }
.membro-contato { color: var(--muted); font-size: var(--fs-small); overflow-wrap: anywhere; }
.lista-membros > li, .lista-membros > li:first-child, .lista-membros > li:last-child { padding: 0; }
.lista-membros a {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3) var(--s-4);
  padding: var(--s-3) var(--s-2); margin: 2px calc(-1 * var(--s-2)); border-radius: var(--r-input); color: inherit;
  transition: background var(--t-fast);
}
.lista-membros a:hover { background: var(--surface-2); text-decoration: none; }
.lista-membros .corpo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-1) var(--s-4); align-items: center; }
.lista-membros .membro-nome, .lista-membros .membro-contato { display: block; }
.lista-membros li.apagada .membro-nome { color: var(--muted); }
@media (max-width: 700px) {
  .lista-membros a { flex-wrap: wrap; }
  .lista-membros .corpo { grid-template-columns: 1fr; flex-basis: calc(100% - 52px); }
  .lista-membros a > .selos { margin-left: 52px; }
}

/* WhatsApp */
.previa-whatsapp {
  white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--s-2) 0 0; padding: var(--s-3) var(--s-4);
  font-size: var(--fs-small); line-height: 1.55;
  background: var(--success-light); border: 1px solid var(--border); border-radius: var(--r-card); max-width: 46ch;
}
.modelo .modelo-codigo { font: 600 var(--fs-label)/1.3 var(--font-mono); color: var(--muted); letter-spacing: .02em; }
.modelo h2 { margin-top: 2px; }
.modelo .modelo-rotulo { margin: var(--s-4) 0 var(--s-1); font-size: var(--fs-label); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.modelo details { margin-top: var(--s-3); }
.modelo summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: var(--fs-small); }
.modelo summary:focus-visible { border-radius: var(--r-sm); }

/* Login */
.login-fundo { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: var(--s-5) var(--s-4); }
.login { width: min(420px, 100%); min-width: 0; }
.login fieldset { min-width: 0; }
.login .marca { justify-content: center; padding-bottom: var(--s-5); }
.login .marca strong { font-size: 17px; }
.login .cartao { padding: var(--s-6) var(--s-5); }
.login .cartao h2 { font-size: 22px; font-weight: 700; }
.login .cartao > .btn-primario { min-height: var(--control-h); }
.link-politica { text-align: center; font-size: var(--fs-small); margin-top: var(--s-4); }
.link-politica a { color: var(--muted); }
.link-politica a:hover { color: var(--brand); }

/* Página institucional (privacidade.html) */
.institucional { font-size: 16px; }
.institucional-largura { width: min(760px, 100%); margin: 0 auto; padding: 0 var(--s-4); }
.institucional-topo { background: var(--surface); border-bottom: 1px solid var(--border); }
.institucional-topo .marca { padding: 14px 0; color: var(--text); }
.institucional-topo .marca:hover { text-decoration: none; }
.pular-para-conteudo { position: absolute; left: -9999px; }
.pular-para-conteudo:focus { left: var(--s-4); top: var(--s-2); z-index: 10; background: var(--surface); padding: 6px var(--s-3); border-radius: var(--r-input); }
.politica { padding: var(--s-6) 0 var(--s-7); line-height: 1.65; overflow-wrap: anywhere; }
.politica-cabecalho { margin-bottom: 28px; }
.politica-cabecalho h1 { font-size: 30px; margin-bottom: var(--s-2); }
.politica-subtitulo { color: var(--muted); font-size: 17px; margin-bottom: 6px; }
.politica-data { color: var(--muted); font-size: 14px; }
.politica h2 { font-size: 19px; margin: var(--s-6) 0 10px; scroll-margin-top: var(--s-4); }
.politica ul, .politica ol { padding-left: 21px; margin: 0 0 14px; }
.politica li { margin-bottom: 5px; }
.politica a { text-decoration: underline; text-underline-offset: 2px; }
.politica-sumario { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--s-4) var(--s-5); }
.politica-sumario h2 { margin: 0 0 var(--s-2); font-size: 16px; }
.politica-sumario ol { margin: 0; columns: 2; column-gap: var(--s-6); }
.politica-destaque { background: var(--brand-light); border-radius: var(--r-card); padding: var(--s-1) var(--s-5) var(--s-2); margin-top: var(--s-6); }
.politica-destaque h2 { margin-top: var(--s-4); }
.destaque-politica { border-left: 3px solid var(--brand); padding-left: 13px; }
.contato-politica { font-size: 17px; }
.institucional-rodape { border-top: 1px solid var(--border); padding: 20px 0 var(--s-6); color: var(--muted); font-size: 14px; }
.institucional-rodape p { margin: 0 0 5px; }
@media (max-width: 600px) {
  .politica { padding-top: 20px; }
  .politica-cabecalho h1 { font-size: 25px; }
  .politica-sumario ol { columns: 1; }
  .politica-destaque { padding: var(--s-1) var(--s-4) var(--s-2); }
}

/* Justificativa da sugestão */
.justificativa td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.justificativa .positivo { color: var(--success); }
.justificativa .negativo { color: var(--danger); }
.justificativa tfoot td { font-weight: 700; border-top: 2px solid var(--border); }

/* Diferenças da auditoria */
.diff { font-size: var(--fs-label); font-family: var(--font-mono); display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; }
.diff .antes { color: var(--danger); text-decoration: line-through; }
.diff .depois { color: var(--success); }

/* Relatórios em cartões até 900px (celular e tablet, quando o menu lateral
   recolhe): mesma marcação da tabela, cada célula com o rótulo da coluna;
   título primeiro e números em duas colunas. No desktop continua tabela. */
@media (max-width: 900px) {
  .tabela-relatorio thead { display: none; }
  .tabela-relatorio, .tabela-relatorio tbody { display: block; width: 100%; }
  .tabela-relatorio tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-5); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
  .tabela-relatorio tr:last-child { border-bottom: 0; }
  .tabela-relatorio td { grid-column: 1 / -1; border: 0; padding: 4px 0; text-align: left !important; }
  .tabela-relatorio td.num { grid-column: auto; }
  .tabela-relatorio td[data-rotulo] { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
  .tabela-relatorio td[data-rotulo]::before { content: attr(data-rotulo); font-size: var(--fs-small); color: var(--muted); }
  .tabela-relatorio td.celula-principal { order: -1; font-weight: 650; font-size: var(--fs-card); padding-bottom: var(--s-1); }
  .tabela-relatorio td[data-vazio] { display: none; }
  .tabela-relatorio tr.alerta td { background: none; }
  .tabela-relatorio tr.alerta { box-shadow: inset 3px 0 0 var(--danger); padding-left: var(--s-3); }
  .tabela-relatorio td[data-rotulo] > .telefone-acoes { justify-content: flex-end; }
}
@media (max-width: 700px) {
  .numeros-relatorio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numeros-relatorio .numero strong { font-size: 22px; }
}

/* Telefone com ações (copiar / WhatsApp) */
.telefone-acoes { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-1); }
.telefone-acoes .telefone-numero { white-space: nowrap; margin-right: var(--s-1); }
.telefone-acoes .btn-sm { min-height: 28px; padding: 0 var(--s-2); }
.telefone-sob-campo { margin-top: var(--s-1); }

/* Situação da celebração nos relatórios (selo + motivo discreto) */
.situacao-celebracao { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.motivo-discreto { font-size: var(--fs-small); color: var(--muted); max-width: 32ch; }
.motivo-discreto summary { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.motivo-discreto[open] summary { margin-bottom: 2px; }

/* Filtro de situação (Celebrações) */
.filtro-situacao { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-4); }
.filtro-contagem { font-variant-numeric: tabular-nums; opacity: .8; }

/* Pendências da celebração */
.pendencias { padding-top: var(--s-4); padding-bottom: var(--s-4); }
.pendencias-ok { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; }
.pendencias-lista { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.pendencia {
  display: inline-flex; align-items: baseline; gap: 6px; min-height: var(--control-h-sm); padding: var(--s-1) var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--fs-small); cursor: pointer;
}
.pendencia strong { font-variant-numeric: tabular-nums; }
.pendencia:hover { background: var(--surface-2); }
.pendencia-perigo { border-color: var(--danger-light); } .pendencia-perigo strong { color: var(--danger); }
.pendencia-aviso { border-color: var(--warning-light); } .pendencia-aviso strong { color: var(--warning); }
.pendencia-info { border-color: var(--info-light); } .pendencia-info strong { color: var(--info); }
.pendencia.ativo { border-color: var(--brand); background: var(--brand-light); }
.vaga.vaga-foco { background: var(--warning-light); box-shadow: inset 3px 0 0 var(--warning); }

/* Histórico (linha do tempo) da celebração */
.historico-celebracao > summary { cursor: pointer; display: flex; gap: var(--s-2); align-items: baseline; }
.historico-celebracao[open] > summary { margin-bottom: var(--s-3); }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 var(--s-4); border-left: 2px solid var(--border); }
.linha-tempo li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 0 var(--s-4) var(--s-2); }
.linha-tempo li:last-child { padding-bottom: 0; }
.linha-tempo li::before {
  content: ""; position: absolute; left: calc(-1 * var(--s-4) - 7px); top: 4px; width: 12px; height: 12px;
  border-radius: var(--r-pill); background: var(--surface); border: 2px solid var(--brand);
}
.linha-tempo-quando { font-size: var(--fs-label); color: var(--muted); font-variant-numeric: tabular-nums; }
.linha-tempo-detalhe { font-size: var(--fs-small); overflow-wrap: anywhere; }

/* Minha próxima celebração (início do membro) */
.proxima-celebracao { margin-bottom: var(--s-5); }
.proxima-rotulo { margin: 0 0 var(--s-2); font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); }
.proxima-corpo { display: flex; gap: var(--s-4); align-items: flex-start; }
.proxima-corpo .corpo { flex: 1; min-width: 0; }
.proxima-corpo h2 { font-size: var(--fs-section); overflow-wrap: anywhere; }
.proxima-quando { margin: 2px 0 var(--s-2); font-weight: 600; }
.proxima-dados { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); margin: 0; }
.proxima-dados dt { font-size: var(--fs-label); color: var(--muted); font-weight: 600; }
.proxima-dados dd { margin: 0; overflow-wrap: anywhere; }
.proxima-acoes { margin-top: var(--s-4); }
@media (max-width: 600px) {
  .proxima-acoes .btn { flex: 1 1 auto; justify-content: center; }
}

/* Complete seu cadastro (discreto, recolhido) */
.perfil-incompleto { margin-top: var(--s-5); }
.perfil-incompleto > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: baseline; }
.checklist { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.checklist li { display: flex; gap: var(--s-2); align-items: baseline; }
.checklist-marca { flex: none; width: 1.2em; text-align: center; color: var(--muted); font-weight: 700; }
.checklist li.ok .checklist-marca { color: var(--success); }
.checklist li.ok > span:last-child { color: var(--muted); }

/* Serviço de última hora (046): ação distinta das comuns da escala. */
.btn-ultima-hora { border-style: dashed; border-color: var(--warning); color: var(--warning); background: transparent; }
.btn-ultima-hora:hover { background: var(--warning-light); }
.lista-escolha { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-input); }
.lista-escolha li { padding: 0; }
.lista-escolha label { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: var(--s-2) var(--s-3); cursor: pointer; }
.lista-escolha label > span { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.check { display: flex; align-items: flex-start; gap: var(--s-2); cursor: pointer; }
.check input { margin-top: .2rem; }

/* Busca rápida (menu lateral) */
.busca-rapida { margin: 0 0 var(--s-3); }
.busca-rapida-campo { position: relative; display: block; }
.busca-rapida-campo .icone { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--subtle); pointer-events: none; }
.busca-rapida-campo input { padding-left: 32px; min-height: var(--control-h-sm); font-size: var(--fs-small); }
.busca-rapida-resultados p { margin: var(--s-2) var(--s-1) 0; }
.busca-rapida-lista { margin: var(--s-2) 0 0; padding: var(--s-1); border: 1px solid var(--border); border-radius: var(--r-input); background: var(--background); }
.busca-rapida-resultados ul { list-style: none; margin: 0; padding: 0; }
/* Cabeçalho de grupo (Membros, Futuras, Em andamento, Passadas): alinhado ao texto dos itens. */
.busca-rapida-resultados .busca-grupo {
  margin: var(--s-1) 0 0; padding: var(--s-2) var(--s-2) var(--s-1) calc(var(--s-2) + 14px + var(--s-2));
  font-size: var(--fs-label); font-weight: 600; line-height: 1.2; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.busca-rapida-resultados .busca-grupo:first-child { margin-top: 0; padding-top: var(--s-1); }
.busca-rapida-resultados ul + .busca-grupo { border-top: 1px solid var(--border); margin-top: var(--s-1); }
/* Item: ícone | corpo (título em até 2 linhas / data e hora • selos). */
.busca-item {
  display: flex; align-items: flex-start; gap: var(--s-2); padding: 7px var(--s-2); border-radius: var(--r-sm);
  color: var(--text); font-size: var(--fs-small); min-height: 36px;
}
.busca-item:hover, .busca-item:focus-visible { background: var(--surface-2); text-decoration: none; }
.busca-item > .icone { color: var(--subtle); flex: none; margin-top: 2px; }
.busca-item-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.busca-item-titulo {
  font-weight: 500; line-height: 1.3; overflow-wrap: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.busca-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; min-width: 0; }
.busca-item-quando {
  min-width: 0; max-width: 100%; color: var(--muted); font-size: var(--fs-label); line-height: 1.35;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.busca-item .selo { padding: 0 7px; line-height: 16px; font-size: 11px; letter-spacing: .01em; }

/* Política de Privacidade dentro do sistema */
.politica-interna { max-width: 760px; }
.politica-interna .politica { padding-top: 0; }
.politica-interna .politica h2, .politica-interna .politica section { scroll-margin-top: 72px; }
.politica-publica { margin: 0 0 var(--s-3); font-size: var(--fs-small); }
.lateral-institucional a[aria-current="page"] { color: var(--brand); }

/* ---------- 7. Impressão ---------- */

@media print {
  .lateral, .topo-movel, .avisos, .nao-imprimir, .btn { display: none !important; }
  .so-impressao { display: block !important; margin-bottom: 12px; }
  .app { display: block; }
  .conteudo { padding: 0; max-width: none; }
  body { background: #fff; color: #000; font-size: 12px; }
  .celebracao-bloco, .cartao { break-inside: avoid; border-color: #bbb; box-shadow: none; }
}