/* ==========================================================================
   Rede de Cuidado — identidade IAP (azul-marinho do símbolo e a chama)
   Aplicada por cima do Bootstrap da Ironbug: tokens primeiro, depois ajustes
   dos componentes do Bootstrap e das diretivas (datatable, pagination).
   ========================================================================== */

:root {
    --azul-promessa: #004d85;
    --azul-promessa-escuro: #003a66;
    --tinta: #0b2540;
    --chama: #f29422;
    --brasa: #ffc46b;
    --fundo: #eef3f8;
    --superficie: #ffffff;
    --linha: #d6e0ea;
    --texto: #0b2540;
    --texto-suave: #5a7089;
    --alerta: #d6503a;
    --diaconal: #1e8c85;
    --ministerial: #4c9be0;

    --campo: #061a2e;
    --campo-borda: #12304d;
    --campo-texto: #cfe0f2;
    --campo-suave: #7f9bb8;

    --serifa: "Young Serif", Georgia, serif;
    --texto-fonte: "Onest", system-ui, sans-serif;
    --dados: "Martian Mono", ui-monospace, monospace;

    --bs-body-font-family: var(--texto-fonte);
    --bs-body-color: var(--texto);
    --bs-body-bg: var(--fundo);
    --bs-primary: var(--azul-promessa);
    --bs-primary-rgb: 0, 77, 133;
    --bs-border-color: var(--linha);
    --bs-link-color: var(--azul-promessa);
    --bs-link-color-rgb: 0, 77, 133;
    --bs-link-hover-color: var(--azul-promessa-escuro);
    --bs-link-hover-color-rgb: 0, 58, 102;
    --bs-secondary-color: var(--texto-suave);
    --bs-secondary-rgb: 90, 112, 137;
    --bs-focus-ring-color: rgba(0, 77, 133, 0.25);
    /* Checkbox, rádio e barra de progresso nativos (sem a classe do Bootstrap) usam a cor do navegador. */
    accent-color: var(--azul-promessa);

    /* D90: as cores de estado do Bootstrap vêm da paleta da Rede. Alertas (mensagens do sistema),
       text-danger/warning/success e badges leem estas variáveis. */
    --bs-success: #1e8c85;
    --bs-success-rgb: 30, 140, 133;
    --bs-success-text-emphasis: #125a55;
    --bs-success-bg-subtle: #e3f3f1;
    --bs-success-border-subtle: #b3ddd9;
    --bs-danger: #d6503a;
    --bs-danger-rgb: 214, 80, 58;
    --bs-danger-text-emphasis: #8f2f1f;
    --bs-danger-bg-subtle: #fbe9e5;
    --bs-danger-border-subtle: #f1c2b8;
    --bs-warning: #a35a00;
    --bs-warning-rgb: 163, 90, 0;
    --bs-warning-text-emphasis: #7a4400;
    --bs-warning-bg-subtle: #fff3e0;
    --bs-warning-border-subtle: #ffd9a6;
    --bs-info: var(--azul-promessa);
    --bs-info-rgb: 0, 77, 133;
    --bs-info-text-emphasis: var(--azul-promessa-escuro);
    --bs-info-bg-subtle: #e5eef6;
    --bs-info-border-subtle: #bcd1e4;
    --bs-primary-text-emphasis: var(--azul-promessa-escuro);
    --bs-primary-bg-subtle: #e5eef6;
    --bs-primary-border-subtle: #bcd1e4;
}

body {
    background: var(--fundo);
    color: var(--texto);
    font: 15px/1.5 var(--texto-fonte);
    -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--chama); outline-offset: 2px; }

.material-symbols-outlined { font-size: 20px; line-height: 1; vertical-align: middle; }

/* ---------- Barra superior ---------- */

.barra {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 28px;
    height: 60px;
    padding: 0 20px;
    background: var(--superficie);
    border-bottom: 1px solid var(--linha);
}

.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: none; white-space: nowrap; }
.marca svg { width: 32px; height: 32px; flex: none; }
.marca strong { display: block; font-family: var(--serifa); font-weight: 400; font-size: 19px; letter-spacing: -0.01em; line-height: 1.1; }
.marca span { display: block; font-family: var(--dados); font-size: 10px; color: var(--texto-suave); letter-spacing: 0.04em; }

.navegacao { display: flex; gap: 4px; min-width: 0; }
.navegacao a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--texto-suave);
    text-decoration: none;
    font-weight: 500;
}
.navegacao a:hover { color: var(--texto); }
.navegacao a.ativo { color: var(--texto); background: rgba(0, 77, 133, 0.1); }

.usuario-logado { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; flex: none; white-space: nowrap; }
.usuario-logado .nome { font-weight: 600; display: block; line-height: 1.2; }
.usuario-logado .perfil { color: var(--texto-suave); font-family: var(--dados); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; }
.usuario-logado a { color: var(--texto-suave); display: flex; }
.usuario-logado a:first-child { flex-direction: column; align-items: flex-end; color: var(--texto); }
.usuario-logado .icone-do-usuario { display: none; font-size: 26px; }
.usuario-logado a:hover { color: var(--alerta); }

/* ---------- Páginas comuns ---------- */

.pagina { max-width: 1280px; margin: 0 auto; padding: 28px 24px 48px; }

.cabecalho-da-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.cabecalho-da-pagina h1 { margin: 0; font-family: var(--serifa); font-weight: 400; font-size: 32px; letter-spacing: -0.02em; line-height: 1.1; }
.cabecalho-da-pagina p { margin: 6px 0 0; color: var(--texto-suave); }

.rotulo {
    margin: 0 0 4px;
    font-family: var(--dados);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.superficie { background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; }
.superficie + .superficie { margin-top: 16px; }
.superficie > section { padding: 20px 22px; }
.superficie > section + section { border-top: 1px solid var(--linha); }
.superficie h2 { margin: 0 0 12px; font-family: var(--serifa); font-weight: 400; font-size: 21px; }

.btn { border-radius: 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
/* D90: todos os estados dos botões na paleta. O Bootstrap grava o azul padrão (#0d6efd) em cada
   classe; sem isto, o desabilitado, o ativo e o anel de foco voltam para ele. */
.btn-primary {
    --bs-btn-color: #fff; --bs-btn-bg: var(--azul-promessa); --bs-btn-border-color: var(--azul-promessa);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--azul-promessa-escuro); --bs-btn-hover-border-color: var(--azul-promessa-escuro);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--tinta); --bs-btn-active-border-color: var(--tinta);
    --bs-btn-focus-shadow-rgb: 0, 77, 133;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--azul-promessa); --bs-btn-disabled-border-color: var(--azul-promessa); --bs-btn-disabled-opacity: 0.4;
}
.btn-outline-primary,
/* As bibliotecas (upload da Ironbug, smoke) usam info/secondary: ficam iguais ao contorno da Rede. */
.btn-outline-info, .btn-outline-secondary {
    --bs-btn-color: var(--azul-promessa); --bs-btn-border-color: var(--linha);
    --bs-btn-hover-color: var(--azul-promessa); --bs-btn-hover-bg: rgba(0, 77, 133, 0.08); --bs-btn-hover-border-color: var(--azul-promessa);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--azul-promessa); --bs-btn-active-border-color: var(--azul-promessa);
    --bs-btn-focus-shadow-rgb: 0, 77, 133;
    --bs-btn-disabled-color: var(--texto-suave); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--linha);
}
.btn-info, .btn-secondary {
    --bs-btn-color: var(--azul-promessa); --bs-btn-bg: rgba(0, 77, 133, 0.08); --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--azul-promessa-escuro); --bs-btn-hover-bg: rgba(0, 77, 133, 0.14); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--azul-promessa); --bs-btn-active-border-color: var(--azul-promessa);
    --bs-btn-focus-shadow-rgb: 0, 77, 133; --bs-btn-disabled-color: var(--texto-suave); --bs-btn-disabled-bg: var(--fundo); --bs-btn-disabled-border-color: transparent;
}
.btn-link { --bs-btn-color: var(--azul-promessa); --bs-btn-hover-color: var(--azul-promessa-escuro); --bs-btn-active-color: var(--azul-promessa-escuro); --bs-btn-disabled-color: var(--texto-suave); --bs-btn-focus-shadow-rgb: 0, 77, 133; }
.btn-check:checked + .btn-outline-primary, .btn-group .btn-outline-primary.active { color: #fff; background: var(--azul-promessa); border-color: var(--azul-promessa); }
.btn-close { --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(0, 77, 133, 0.25); }
.form-check-input:checked { background-color: var(--azul-promessa); border-color: var(--azul-promessa); }
.form-check-input:focus { border-color: var(--azul-promessa); box-shadow: 0 0 0 3px rgba(0, 77, 133, 0.15); }
/* O autocompletar (uib-typeahead) destaca o item com o azul padrão do dropdown. */
.dropdown-menu { --bs-dropdown-link-active-bg: rgba(0, 77, 133, 0.1); --bs-dropdown-link-active-color: var(--azul-promessa); --bs-dropdown-link-hover-bg: var(--fundo); --bs-dropdown-border-color: var(--linha); }
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { background: rgba(0, 77, 133, 0.1); color: var(--azul-promessa); }
.btn-chama { background: var(--chama); color: #1c1005; border: 0; }
.btn-chama:hover { background: #e3861a; color: #1c1005; }

.form-select { padding-right: 34px; background-position: right 12px center; }
.form-control, .form-select { border-radius: 10px; border-color: var(--linha); padding: 9px 12px; background-color: var(--superficie); }
.form-control:focus, .form-select:focus { border-color: var(--azul-promessa); box-shadow: 0 0 0 3px rgba(0, 77, 133, 0.15); }
.form-label { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.form-text { color: var(--texto-suave); }

/* Filtros de listagem */
.filtros-da-lista { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--linha); }
.filtros-da-lista .busca { flex: 1 1 260px; }
.filtros-da-lista .form-select { flex: 1 1 180px; max-width: 240px; }

/* Datatable da Ironbug */
.datatable { margin: 0; }
.datatable thead th { font-family: var(--dados); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); background: transparent; padding: 12px 18px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.datatable tbody td { padding: 12px 18px; border-bottom: 1px solid var(--linha); background: transparent; }
.datatable tbody tr:last-child td { border-bottom: 0; }
.datatable.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: transparent; }
.datatable tbody tr.clickable { cursor: pointer; }
.datatable tbody tr.clickable:hover td { background: rgba(0, 77, 133, 0.04); }
.hoverPointer { cursor: pointer; }
.sortorder::after { content: "▲"; font-size: 9px; margin-left: 4px; }
.sortorder.reverse::after { content: "▼"; }

.pagination { margin: 0; padding: 14px 18px; justify-content: flex-end; }
.pagination { --bs-pagination-color: var(--azul-promessa); --bs-pagination-border-color: var(--linha); --bs-pagination-hover-color: var(--azul-promessa-escuro); --bs-pagination-hover-bg: var(--fundo); --bs-pagination-hover-border-color: var(--linha); --bs-pagination-focus-color: var(--azul-promessa-escuro); --bs-pagination-focus-bg: var(--fundo); --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(0, 77, 133, 0.2); --bs-pagination-active-bg: var(--azul-promessa); --bs-pagination-active-border-color: var(--azul-promessa); --bs-pagination-disabled-color: var(--texto-suave); --bs-pagination-disabled-border-color: var(--linha); }
.page-link { color: var(--azul-promessa); border-color: var(--linha); }
.active > .page-link { background: var(--azul-promessa); border-color: var(--azul-promessa); }

.vazio-da-lista { padding: 40px 18px; text-align: center; color: var(--texto-suave); }

/* Nome + detalhe numa célula */
.celula-nome { font-weight: 600; color: var(--texto); text-decoration: none; }
.celula-nome:hover { color: var(--azul-promessa); }
.celula-detalhe { display: block; font-size: 12px; color: var(--texto-suave); }
.dado { font-family: var(--dados); font-size: 12px; color: var(--texto-suave); }

/* Temperatura do último contato: a mesma escala da rede */
.temperatura { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.temperatura.acesa { background: var(--brasa); box-shadow: 0 0 6px var(--chama); }
.temperatura.morna { background: var(--chama); }
.temperatura.fria { background: #6f8ba6; }
.temperatura.apagada { background: #34506d; }

/* Selos */
.selo { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid var(--linha); background: var(--superficie); white-space: nowrap; }
.selo.etapa { border-color: transparent; background: rgba(0, 77, 133, 0.1); color: var(--azul-promessa); }
.selo.sem-cuidador { border: 1px dashed var(--alerta); color: var(--alerta); }
.selo.inativo { color: var(--texto-suave); background: var(--fundo); border-color: transparent; }

.tipo { font-family: var(--dados); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; }
.tipo.tipo-1 { background: rgba(0, 77, 133, 0.12); color: var(--azul-promessa); }
.tipo.tipo-2 { background: rgba(76, 155, 224, 0.16); color: #2c6fae; }
.tipo.tipo-3 { background: rgba(30, 140, 133, 0.16); color: var(--diaconal); }

.aviso-vazio { margin: 0; padding: 12px 14px; border: 1px dashed var(--alerta); border-radius: 10px; color: var(--texto-suave); font-size: 13px; }
.aviso-vazio strong { color: var(--alerta); font-weight: 600; }

/* ---------- Jornada ---------- */

.etapa-atual { margin: 2px 0 12px; font-family: var(--serifa); font-size: 22px; }
.etapa-atual span { font-family: var(--dados); font-size: 11px; color: var(--texto-suave); margin-left: 6px; }
.jornada { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); position: relative; }
.jornada::before { content: ""; position: absolute; top: 6px; left: 7%; right: 7%; border-top: 1px solid var(--linha); }
.jornada li { position: relative; display: grid; justify-items: center; }
.jornada li::before { content: ""; width: 13px; height: 13px; border-radius: 50%; background: var(--superficie); border: 1px solid var(--linha); z-index: 1; }
.jornada li.feita::before { background: #6f9cc4; border-color: transparent; }
.jornada li.atual::before { background: var(--chama); border-color: var(--chama); box-shadow: 0 0 0 4px rgba(242, 148, 34, 0.25); }
.proximo-passo { margin: 12px 0 0; font-size: 13px; color: var(--texto-suave); }
.proximo-passo b { color: var(--texto); font-weight: 600; }

/* ---------- Prontuário ---------- */

.formulario-de-contato { padding: 16px; border: 1px solid var(--linha); border-radius: 12px; background: var(--fundo); display: grid; gap: 10px; margin-bottom: 18px; }
.formulario-de-contato textarea { min-height: 110px; resize: vertical; }
.confidencial-opcao { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.confidencial-opcao input { margin-top: 3px; }
.confidencial-opcao small { display: block; color: var(--texto-suave); }
.encaminhamentos-do-registro { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.encaminhamentos-do-registro .selo { font-size: 11px; }
.acao-do-registro { border: 0; background: none; padding: 0; margin-top: 6px; font-size: 12px; color: var(--azul-promessa); font-weight: 600; }
.prontuario { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.registro { display: grid; grid-template-columns: 16px 1fr; gap: 10px; }
.registro::before { content: ""; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--chama); }
.registro .cabeca { font-size: 13px; }
.registro .cabeca b { font-weight: 600; }
.registro .quando { font-family: var(--dados); font-size: 11px; color: var(--texto-suave); }
.registro p { margin: 4px 0 0; font-size: 14px; }
.fechado { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 4px 10px; border-radius: 6px; background: var(--fundo); color: var(--texto-suave); font-size: 13px; }
.registro .marca-confidencial { font-family: var(--dados); font-size: 10px; letter-spacing: 0.05em; color: var(--alerta); text-transform: uppercase; }

.cuidadores { display: grid; gap: 8px; }
.cuidador { display: flex; align-items: center; gap: 10px; }
.cuidador small { color: var(--texto-suave); }
.lista-de-vinculos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-de-vinculos li { padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.lista-de-vinculos li:last-child { padding-bottom: 0; border-bottom: 0; }
.vinculos { display: flex; flex-wrap: wrap; gap: 6px; }
.vinculos span { padding: 4px 10px; border: 1px solid var(--linha); border-radius: 999px; font-size: 13px; }
.vinculos small { color: var(--texto-suave); }

/* ---------- Painel ---------- */

.secao-jornada { display: flex; flex-direction: column; height: 100%; }
.secao-jornada .grafico-jornada { flex: 1; align-content: space-evenly; }
.grafico-jornada { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.grafico-jornada li { position: relative; display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; outline-offset: 4px; }
.grafico-jornada .nome-da-etapa { font-size: 13px; color: var(--texto-suave); text-align: right; }
.grafico-jornada .trilho { display: flex; align-items: center; gap: 8px; height: 22px; }
.grafico-jornada .barra { display: block; height: 18px; min-width: 2px; background: #2c6fae; border-radius: 0 4px 4px 0; transition: width 0.3s; }
.grafico-jornada .barra.vazia { background: var(--linha); }
.grafico-jornada .valor { font-family: var(--dados); font-size: 12px; color: var(--texto); }
.grafico-jornada .dica { position: absolute; left: 122px; top: -30px; z-index: 5; padding: 4px 10px; border-radius: 6px; background: var(--tinta); color: #fff; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.grafico-jornada li:hover .dica, .grafico-jornada li:focus .dica { opacity: 1; }
.grafico-jornada li:hover .barra, .grafico-jornada li:focus .barra { background: var(--azul-promessa); }

.fatos { margin: 0; display: grid; gap: 14px; }
.fatos div { display: grid; gap: 2px; }
.fatos dt { font-weight: 400; color: var(--texto-suave); font-size: 13px; }
.fatos dt b { font-family: var(--serifa); font-weight: 400; font-size: 26px; color: var(--texto); margin-right: 4px; }
.fatos dd { margin: 0; font-size: 14px; }

.lista-rolavel { max-height: 420px; overflow-y: auto; }
.linha-de-pessoa { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; padding: 9px 8px; margin: 0 -8px; border-radius: 8px; color: inherit; text-decoration: none; }
.linha-de-pessoa:hover { background: rgba(0, 77, 133, 0.08); color: inherit; }

.alertas { border-left: 3px solid var(--alerta); }

@media (prefers-reduced-motion: reduce) {
    .grafico-jornada .barra { transition: none; }
}

/* ==========================================================================
   Diálogo de confirmação ($messages.confirm, da smoke): mais respiro e fundo escurecido
   ========================================================================== */

.smk-confirm-back { background: rgba(6, 26, 46, 0.35); backdrop-filter: blur(2px); }
.smk-confirm { background: var(--superficie) !important; max-width: 480px; margin-top: 24px !important; border: 0; border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(6, 26, 46, 0.45) !important; overflow: hidden; }
.smk-confirm .card-body { padding: 26px 28px 18px; font-size: 15px; line-height: 1.55; color: var(--texto); }
.smk-confirm .text-end { display: flex; justify-content: flex-end; gap: 10px; padding: 8px 28px 24px; }
.smk-confirm .btn { padding: 8px 18px; font-size: 14px; border-radius: 10px; }
.smk-confirm .smk-cancel { color: var(--azul-promessa); border-color: var(--linha); background: var(--superficie); }
.smk-confirm .smk-cancel:hover { background: var(--fundo); color: var(--azul-promessa); border-color: var(--texto-suave); }

/* ==========================================================================
   Importação do Promessa Mais
   ========================================================================== */

.zona-de-envio { display: flex; align-items: center; gap: 16px; padding: 22px; border: 1.5px dashed var(--linha); border-radius: 12px; background: var(--fundo); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.zona-de-envio:hover, .zona-de-envio:focus-within { border-color: var(--azul-promessa); background: rgba(0, 77, 133, 0.04); }
.zona-de-envio.escolhida { border-style: solid; border-color: var(--azul-promessa); }
.zona-de-envio > .material-symbols-outlined { font-size: 36px; color: var(--azul-promessa); }
.zona-de-envio b { display: block; font-weight: 600; }
.zona-de-envio small { display: block; color: var(--texto-suave); font-size: 13px; }
.acoes-da-importacao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }

.regras-da-importacao { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; color: var(--texto-suave); }
.regras-da-importacao b { color: var(--texto); font-weight: 600; }

.resumo-da-importacao.simulacao { border-left: 3px solid var(--chama); }
.numeros-da-importacao { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 4px 0 0; }
.numeros-da-importacao div { padding: 12px 14px; border: 1px solid var(--linha); border-radius: 10px; }
.numeros-da-importacao dt { font-weight: 400; font-size: 12px; color: var(--texto-suave); }
.numeros-da-importacao dd { margin: 2px 0 0; font-family: var(--serifa); font-size: 28px; line-height: 1.1; }
.numeros-da-importacao .ignoradas { border-color: var(--alerta); border-style: dashed; }
.numeros-da-importacao .ignoradas dd { color: var(--alerta); }
.numeros-da-importacao .ignoradas.zerado { border-color: var(--linha); border-style: solid; }
.numeros-da-importacao .ignoradas.zerado dd { color: var(--texto); }

.abas-do-resumo { display: flex; flex-wrap: wrap; gap: 6px; }
.abas-do-resumo button { border: 1px solid var(--linha); background: var(--superficie); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--texto-suave); }
.abas-do-resumo button span { font-family: var(--dados); font-size: 11px; margin-left: 4px; }
.abas-do-resumo button.ativo { background: var(--azul-promessa); border-color: var(--azul-promessa); color: #ffffff; }
.lista-rolavel-alta { max-height: 560px; overflow-y: auto; border-top: 1px solid var(--linha); }
.lista-rolavel-alta thead th { position: sticky; top: 0; z-index: 1; background: var(--superficie); }
.detalhe-da-linha { font-size: 13px; color: var(--texto-suave); }

.selo.resultado-criada { border-color: transparent; background: rgba(0, 77, 133, 0.1); color: var(--azul-promessa); }
.selo.resultado-atualizada { border-color: transparent; background: rgba(242, 148, 34, 0.16); color: #8a4b00; }
.selo.resultado-semalteracao { color: var(--texto-suave); background: var(--fundo); border-color: transparent; }
.selo.resultado-ignorada { border: 1px dashed var(--alerta); color: var(--alerta); }
.selo.pelo-nome { border: 1px dotted #8a4b00; color: #8a4b00; }

.familias-do-resumo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.familias-do-resumo li { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 10px; }
.familias-do-resumo li > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ==========================================================================
   Sugestões de família pelos sobrenomes
   ========================================================================== */

.sugestoes-de-familia { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.sugestoes-de-familia > ng-include { display: block; }
.sugestao.fraca { border-style: dashed; }
.cabeca-da-sugestao { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cabeca-da-sugestao .selo { white-space: normal; }
.btn-ocultar { display: inline-flex; flex: none; border: 0; background: none; padding: 2px; color: var(--texto-suave); border-radius: 6px; }
.btn-ocultar:hover { color: var(--texto); background: var(--fundo); }
.nome-da-sugestao { font-family: var(--serifa); font-size: 19px; margin-bottom: 8px; }
.pessoas-da-sugestao { list-style: none; margin: 0; padding: 0; }
.pessoas-da-sugestao li { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--linha); }
.pessoas-da-sugestao label { flex: 1; display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; }
.pessoas-da-sugestao .form-check-input { margin: 0; flex: none; }
.pessoas-da-sugestao .ver-ficha { color: var(--texto-suave); display: inline-flex; }
.pessoas-da-sugestao .ver-ficha .material-symbols-outlined { font-size: 18px; }
.aviso-do-cep:empty { display: none; }
.aviso-do-cep.erro { color: var(--alerta); }
.membros-da-familia { list-style: none; margin: 0 0 16px; padding: 0; }
.membros-da-familia li { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--linha); }
.membros-da-familia li:first-child { border-top: 0; }
.membros-da-familia .celula-detalhe { display: block; }
.btn-link-discreto { border: 0; background: none; padding: 0; color: var(--azul-promessa); text-decoration: underline; font-size: inherit; }
.incluir-na-familia { position: relative; padding-top: 12px; border-top: 1px solid var(--linha); }
.incluir-na-familia .dropdown-menu { width: 100%; max-height: 360px; overflow-y: auto; }
.incluir-na-familia .dropdown-menu a { color: var(--texto); text-decoration: none; white-space: normal; }
.adicionar-na-sugestao { padding: 8px 0 2px; border-top: 1px solid var(--linha); }
.adicionar-na-sugestao .btn-link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; font-weight: 600; }
.adicionar-na-sugestao .btn-link .material-symbols-outlined { font-size: 18px; }
.adicionar-na-sugestao .dropdown-menu { max-height: 320px; overflow-y: auto; }
.adicionar-na-sugestao .dropdown-menu a { color: var(--texto); text-decoration: none; white-space: normal; }
.pessoas-da-sugestao .selo { display: inline-flex; width: fit-content; }
.resultado-da-busca small.em-outra-sugestao { color: #8a4b00; }

/* ==========================================================================
   Tela da rede: o campo noturno com as chamas
   ========================================================================== */

body.tela-rede { overflow: hidden; }

.painel-da-rede { display: grid; grid-template-columns: minmax(0, 1fr) 380px; height: calc(100vh - 60px); }

.campo {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1200px 700px at 30% 40%, #0c2a48 0%, transparent 60%), var(--campo);
    color: var(--campo-texto);
}

.area-do-mapa { position: absolute; inset: 0; }
.painel-da-rede .campo.mapa-ampliado .area-do-mapa::after { opacity: 1; }
/* Com zoom, o mapa passa por baixo do título: um véu escuro no topo mantém o texto legível. */
.painel-da-rede .area-do-mapa::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 340px; opacity: 0; transition: opacity 0.3s; background: linear-gradient(180deg, rgba(6, 26, 46, 0.92) 0%, rgba(6, 26, 46, 0.7) 60%, rgba(6, 26, 46, 0) 100%); pointer-events: none; }
.campo svg[mapa-da-rede] { position: absolute; inset: 0; width: 100%; height: 100%; }

.tese { position: absolute; top: 28px; left: 32px; max-width: 580px; pointer-events: none; }
.tese h1 { margin: 0; font-family: var(--serifa); font-weight: 400; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -0.02em; color: #f4f8fc; }
.tese h1 em { font-style: normal; color: var(--chama); }
.tese p { margin: 10px 0 0; color: var(--campo-suave); font-size: 15px; }

.filtros-do-campo { position: absolute; left: 32px; bottom: 28px; display: flex; flex-wrap: wrap; gap: 6px; }
.filtros-do-campo button { border: 1px solid var(--campo-borda); background: rgba(6, 26, 46, 0.7); backdrop-filter: blur(6px); color: var(--campo-suave); border-radius: 999px; padding: 6px 14px; font-size: 13px; }
.filtros-do-campo button.ativo { color: var(--campo); background: var(--campo-texto); border-color: var(--campo-texto); }

.legenda { position: absolute; right: 24px; top: 24px; display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--campo-borda); border-radius: 12px; background: rgba(6, 26, 46, 0.72); backdrop-filter: blur(6px); font-size: 12px; color: var(--campo-suave); }
.legenda div { display: flex; align-items: center; gap: 8px; }
.legenda i { display: inline-block; flex: none; }
.legenda .ponto { width: 10px; height: 10px; border-radius: 50%; }
.legenda .traco { width: 22px; height: 0; border-top: 2px solid; }
.legenda hr { border: 0; border-top: 1px solid var(--campo-borda); margin: 4px 0; opacity: 1; }

.celula path { fill: rgba(76, 155, 224, 0.06); stroke: rgba(127, 170, 214, 0.35); stroke-width: 1.2; }
.celula.sem-cuidado path { stroke: var(--alerta); stroke-dasharray: 4 5; stroke-opacity: 0.8; fill: rgba(214, 80, 58, 0.05); }
.celula text { font-family: var(--dados); font-size: calc(10px / var(--k, 1)); fill: var(--campo-suave); letter-spacing: 0.06em; text-transform: uppercase; }
.celula .nucleo { fill: rgba(127, 170, 214, 0.35); }

.sinapse { fill: none; stroke-linecap: round; }
.sinapse.tipo-1 { stroke: #5f9fd6; stroke-width: 1.6; }
.sinapse.tipo-2 { stroke: var(--ministerial); stroke-width: 1.2; stroke-dasharray: 1 4; }
.sinapse.tipo-3 { stroke: #3cb5a9; stroke-width: 1.4; }

.impulso { fill: var(--brasa); }

.no-pessoa { cursor: pointer; }
.no-pessoa .anel { fill: none; stroke: var(--alerta); stroke-width: 1.5; stroke-dasharray: 3 3; }
.no-pessoa text { font-size: calc(11px / var(--k, 1)); fill: var(--campo-suave); pointer-events: none; }

/* Zoom: linhas com espessura fixa na tela; nomes só de perto, ou de quem está em destaque. */
.campo svg[mapa-da-rede] { cursor: grab; touch-action: none; }
.campo svg[mapa-da-rede]:active { cursor: grabbing; }
.sinapse, .celula path, .no-pessoa .anel, .no-pessoa .chama { vector-effect: non-scaling-stroke; }
.palco .no-pessoa text, .palco .celula text { display: none; }
.nomes-visiveis .palco .no-pessoa text,
.palco .no-pessoa.com-nome text,
.palco .no-pessoa.foco text,
.familias-visiveis .palco .celula text { display: inline; }
.palco .no-pessoa.esmaecido.com-nome text { display: none; }
.no-pessoa:hover text, .no-pessoa.foco text { fill: #ffffff; }

.esmaecido { opacity: 0.12; transition: opacity 0.25s; }

/* Lente de idade: paleta validada para daltonismo no campo noturno (a idade escrita ao lado do nome é a codificação secundária). */
.painel-da-rede { --faixa-1: #c98500; --faixa-2: #008300; --faixa-3: #9085e9; --faixa-4: #d55181; }
.ponto.faixa-1 { background: var(--faixa-1); }
.ponto.faixa-2 { background: var(--faixa-2); }
.ponto.faixa-3 { background: var(--faixa-3); }
.ponto.faixa-4 { background: var(--faixa-4); }
.ponto.faixa-0 { border: 1.5px dashed var(--campo-suave); }
.lente-idade .no-pessoa .halo { display: none; }
.lente-idade .no-pessoa .chama.faixa-1 { fill: var(--faixa-1); }
.lente-idade .no-pessoa .chama.faixa-2 { fill: var(--faixa-2); }
.lente-idade .no-pessoa .chama.faixa-3 { fill: var(--faixa-3); }
.lente-idade .no-pessoa .chama.faixa-4 { fill: var(--faixa-4); }
.lente-idade .no-pessoa .chama.faixa-0 { fill: transparent; stroke: var(--campo-suave); stroke-width: 1.5; stroke-dasharray: 2 2; }
.no-pessoa .idade { display: none; }
.lente-idade .no-pessoa .idade { display: inline; fill: var(--campo-texto); }

.lente { position: absolute; right: 24px; bottom: 28px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.lente .faixas { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 480px; }
.lente .faixas button { padding: 5px 10px; font-size: 12px; gap: 5px; }
.lente button { border: 1px solid var(--campo-borda); background: rgba(6, 26, 46, 0.7); backdrop-filter: blur(6px); color: var(--campo-suave); border-radius: 999px; padding: 6px 12px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.lente button:hover { color: var(--campo-texto); }
.lente .faixas button span { font-family: var(--dados); font-size: 11px; opacity: 0.8; }
.lente .faixas button.ativo { color: var(--campo-texto); border-color: var(--campo-texto); background: rgba(207, 224, 242, 0.14); }
.lente .ponto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.lente .acoes-da-lente { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.ir-para-o-mapa, .voltar-para-a-rede { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--campo-borda); border-radius: 999px; background: rgba(6, 26, 46, 0.7); backdrop-filter: blur(6px); color: var(--campo-texto); font-size: 13px; text-decoration: none; }
.ir-para-o-mapa .material-symbols-outlined, .voltar-para-a-rede .material-symbols-outlined { font-size: 18px; }
.ir-para-o-mapa:hover, .voltar-para-a-rede:hover { color: #fff; border-color: var(--chama); }
.voltar-para-a-rede { margin-bottom: 14px; }
.lente .alternar { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--campo-borda); border-radius: 999px; background: rgba(6, 26, 46, 0.7); backdrop-filter: blur(6px); }
.lente .alternar > span { font-size: 12px; color: var(--campo-suave); padding: 0 8px 0 10px; }
.lente .alternar button { border: 0; background: none; padding: 5px 12px; }
.lente .alternar button.ativo { color: var(--campo); background: var(--campo-texto); }

.recortes-do-campo { pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.recortes-do-campo > span { font-family: var(--dados); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--campo-suave); margin-right: 4px; }
.recortes-do-campo button { border: 1px solid var(--campo-borda); background: rgba(6, 26, 46, 0.7); backdrop-filter: blur(6px); color: var(--campo-suave); border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.recortes-do-campo button:hover { color: var(--campo-texto); }
.recortes-do-campo button b { font-family: var(--dados); font-weight: 500; font-size: 11px; margin-left: 2px; }
.recortes-do-campo button.ativo { color: var(--campo); background: var(--chama); border-color: var(--chama); }

.controles-de-zoom { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); display: grid; border: 1px solid var(--campo-borda); border-radius: 12px; overflow: hidden; background: rgba(6, 26, 46, 0.8); backdrop-filter: blur(6px); }
.controles-de-zoom button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; background: none; color: var(--campo-texto); }
.controles-de-zoom button + button { border-top: 1px solid var(--campo-borda); }
.controles-de-zoom button:hover { background: rgba(207, 224, 242, 0.12); }

.busca-na-rede { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 14px 24px; background: var(--superficie); border-bottom: 1px solid var(--linha); }
.busca-na-rede > .material-symbols-outlined { color: var(--texto-suave); }
.busca-na-rede .form-control { border-radius: 999px; }
.busca-na-rede .dropdown-menu { width: 100%; max-height: 360px; overflow-y: auto; }
.busca-na-rede .dropdown-menu a { color: var(--texto); text-decoration: none; }
.busca-na-rede .dropdown-menu .active > a, .busca-na-rede .dropdown-menu a:hover { background: rgba(0, 77, 133, 0.08); }
.resultado-da-busca { display: flex !important; align-items: center; gap: 10px; padding: 8px 12px !important; }
.resultado-da-busca b { display: block; font-weight: 600; }
.resultado-da-busca small { display: block; color: var(--texto-suave); }

.selecao-no-campo { pointer-events: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; padding: 8px 8px 8px 16px; border: 1px solid rgba(242, 148, 34, 0.55); border-radius: 999px; background: rgba(6, 26, 46, 0.85); backdrop-filter: blur(6px); color: var(--campo-texto); font-size: 14px; }
.selecao-no-campo b { color: #ffffff; font-weight: 600; }
.selecao-no-campo button { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 6px 12px; background: var(--chama); color: #1c1005; font-weight: 600; font-size: 13px; }
.selecao-no-campo button:hover { background: #e3861a; }
.selecao-no-campo button .material-symbols-outlined { font-size: 18px; }
.selecao-no-campo kbd { padding: 1px 6px; border-radius: 4px; background: rgba(28, 16, 5, 0.18); color: inherit; font: 11px var(--dados); }

.lateral { overflow-y: auto; background: var(--superficie); border-left: 1px solid var(--linha); }
.lateral section { padding: 22px 24px; border-bottom: 1px solid var(--linha); }
.lateral h2 { margin: 0 0 14px; font-family: var(--serifa); font-weight: 400; font-size: 21px; line-height: 1.2; }

.lista-de-pessoas { list-style: none; margin: 0; padding: 0; }
.lista-de-pessoas button {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 10px;
    width: calc(100% + 16px);
    padding: 9px 8px;
    margin: 0 -8px;
    border: 0;
    border-radius: 8px;
    background: none;
    text-align: left;
    color: inherit;
}
.lista-de-pessoas button:hover, .lista-de-pessoas button.foco { background: rgba(0, 77, 133, 0.08); }
.lista-de-pessoas li.com-acao { display: flex; align-items: center; gap: 8px; }
.lista-de-pessoas li.com-acao > button:first-child,
.lista-de-pessoas li.com-acao > .linha-da-rede > button { flex: 1; width: auto; min-width: 0; margin-right: 0; }
/* O ng-include da linha não pode virar uma caixa a mais entre o li e o botão. */
.lista-de-pessoas .linha-da-rede { display: contents; }
.lista-de-pessoas .convidar { flex: none; width: auto; margin: 0; display: inline-flex; padding: 5px 12px; background: var(--chama); color: #1c1005; border-radius: 999px; font-size: 12px; }
.lista-de-pessoas .convidar:hover { background: #e3861a; }
.lista-de-pessoas .nome { font-weight: 500; }
.lista-de-pessoas .detalhe { display: block; font-size: 12px; color: var(--texto-suave); }
.lista-de-pessoas .dias { font-family: var(--dados); font-size: 11px; color: var(--texto-suave); }

.cabeca-da-ficha { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.voltar { border: 0; background: none; padding: 0; color: var(--texto-suave); font-size: 13px; }
.voltar:hover { color: var(--azul-promessa); }
.fechar-ficha { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--linha); border-radius: 50%; background: var(--superficie); color: var(--texto); }
.fechar-ficha:hover { background: var(--fundo); border-color: var(--texto-suave); }
.ficha-nome { margin: 0; font-family: var(--serifa); font-weight: 400; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; }
.ficha-sub { margin: 6px 0 0; color: var(--texto-suave); font-size: 13px; }

/* ==========================================================================
   Mapa da cidade (D62): Leaflet sob os mesmos painéis da rede
   ========================================================================== */

.mapa-da-cidade { position: absolute; inset: 0; background: var(--campo); }
.tela-localizacao .tese, .tela-localizacao .legenda { z-index: 1000; }
.tela-localizacao .tese { padding: 0 0 12px; }
.tela-localizacao .tese p { pointer-events: auto; }
.tela-localizacao .btn-link-discreto { color: var(--campo-texto); }
.tela-localizacao .campo::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 300px; z-index: 999; pointer-events: none; background: linear-gradient(180deg, rgba(6, 26, 46, 0.9) 0%, rgba(6, 26, 46, 0.55) 60%, rgba(6, 26, 46, 0) 100%); }
.tela-localizacao .leaflet-container { font-family: inherit; background: var(--campo); }
/* Só as imagens do mapa escurecem; os pontos das casas ficam com as cores da rede. */
.tela-localizacao .com-leaflet .leaflet-tile-pane { filter: invert(1) hue-rotate(200deg) brightness(0.85) contrast(0.9) saturate(0.35); }
.tela-localizacao .leaflet-control-zoom a { background: rgba(6, 26, 46, 0.85); color: var(--campo-texto); border-color: var(--campo-borda); }
.tela-localizacao .leaflet-control-attribution { background: rgba(6, 26, 46, 0.7); color: var(--campo-suave); }
.tela-localizacao .leaflet-control-attribution a { color: var(--campo-texto); }
.tela-localizacao .leaflet-tooltip { background: var(--campo); color: var(--campo-texto); border: 1px solid var(--campo-borda); box-shadow: none; font-size: 12px; }
.tela-localizacao .leaflet-tooltip-top::before { border-top-color: var(--campo-borda); }
.lista-de-pessoas .linha-de-pessoa { margin: 0 -8px; }

/* ==========================================================================
   Login
   ========================================================================== */

.tela-login { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 480px); min-height: 100vh; }
.tela-login .campo { min-height: 100vh; }
.tela-login .tese { top: auto; bottom: 48px; left: 48px; }
.formulario-login { display: flex; flex-direction: column; justify-content: center; padding: 48px; background: var(--superficie); }
.formulario-login h2 { font-family: var(--serifa); font-weight: 400; font-size: 30px; margin: 18px 0 6px; }
.formulario-login p { color: var(--texto-suave); margin-bottom: 26px; }

/* A pastoral vê até 10 itens no menu: aperta antes de faltar espaço e, abaixo de 1280px, fica só com ícones. */
@media (max-width: 1599px) {
    .barra { gap: 16px; }
    .navegacao { gap: 0; }
    .navegacao a { padding: 8px 9px; }
    .marca span { display: none; }
    /* O administrador vê 11 itens: o nome sai da barra e fica no título do link "Minha senha". */
    .usuario-logado .nome, .usuario-logado .perfil { display: none; }
    .usuario-logado .icone-do-usuario { display: inline-block; }
}

@media (max-width: 1279px) {
    .navegacao a span.texto { display: none; }
}

@media (max-width: 991px) {
    /* O menu rola para o lado; o usuário e o sair ficam sempre à vista. */
    .navegacao { flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
    .navegacao::-webkit-scrollbar { display: none; }
    .navegacao a { flex: none; }
    /* Um dedo rola a página; o zoom por toque fica com dois dedos (filtro do d3.zoom). */
    .campo svg[mapa-da-rede] { touch-action: pan-y; }
    .painel-da-rede { grid-template-columns: 1fr; height: auto; }
    body.tela-rede { overflow: auto; }
    .campo { height: 70vh; }
    .legenda { display: none; }
    .tela-login { grid-template-columns: 1fr; }
    .tela-login .campo { min-height: 36vh; }
}

@media (max-width: 767px) {
    .painel-da-rede .campo { height: auto; display: flex; flex-direction: column; }
    .painel-da-rede .tese { position: static; order: -1; max-width: none; padding: 22px 18px 4px; }
    .painel-da-rede .tese h1 { font-size: 28px; }
    .painel-da-rede .area-do-mapa { position: relative; height: 68vh; min-height: 420px; }
    .painel-da-rede .filtros-do-campo { position: static; flex-wrap: nowrap; overflow-x: auto; padding: 12px 18px 18px; }
    .painel-da-rede .filtros-do-campo button { flex: none; }
    .painel-da-rede .area-do-mapa::after { display: none; }
    .painel-da-rede .lente { position: static; align-items: flex-start; padding: 0 18px 18px; }
    .painel-da-rede .lente .faixas { justify-content: flex-start; }
}

@media (max-width: 575px) {
    .marca strong { display: none; }
    .usuario-logado .nome, .usuario-logado .perfil { display: none; }
    .barra { gap: 12px; }
    .marca span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .esmaecido { transition: none; }
}

/* ---------- Telas de cadastro (D69, D70): só o obrigatório, ao lado de como o cadastro aparece na rede ----------
   Pessoa: a chama acendendo. Família: a célula com os membros. Ministério: o botão do rodapé da Rede. */

.pagina-de-cadastro { max-width: 1040px; }

.cartao-de-cadastro {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    min-height: 520px;
    border: 1px solid var(--linha);
    border-radius: 20px;
    overflow: hidden;
    background: var(--superficie);
    box-shadow: 0 24px 60px -32px rgba(11, 37, 64, 0.35);
}

/* Cadastro de um campo só (família, ministério): o cartão fica mais baixo. */
.cartao-de-cadastro.enxuto { min-height: 400px; }

/* O lado da rede: a constelação do login com o que está sendo cadastrado no meio. */
.vitrine-na-rede {
    position: relative;
    overflow: hidden;
    background: radial-gradient(700px 500px at 45% 55%, #0c2a48 0%, transparent 65%), var(--campo);
}
.vitrine-na-rede svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
.chama-nova, .celula-nova, .ministerio-novo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 80%;
    text-align: center;
    color: #f4f8fc;
    isolation: isolate;
}
/* Um halo da cor do campo atrás do nome, para as linhas da constelação não cruzarem a leitura. */
.chama-nova::before, .celula-nova::before, .ministerio-novo::before {
    content: "";
    position: absolute;
    inset: -50px -30px;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(6, 26, 46, 0.95) 0%, rgba(6, 26, 46, 0.8) 60%, rgba(6, 26, 46, 0) 100%);
}
.chama-nova .ponto {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px dashed var(--campo-suave);
    transition: background-color .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.chama-nova strong, .celula-nova strong {
    font-family: var(--serifa);
    font-weight: 400;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}
.chama-nova small, .celula-nova small, .ministerio-novo small { font-family: var(--dados); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--campo-suave); }
.chama-nova.situacao-3 .ponto { border: 0; background: var(--brasa); box-shadow: 0 0 0 10px rgba(255, 196, 107, 0.12), 0 0 44px 8px rgba(242, 148, 34, 0.55); animation: acender 2.8s ease-in-out infinite; }
.chama-nova.situacao-1 .ponto { border: 0; background: var(--chama); box-shadow: 0 0 0 10px rgba(242, 148, 34, 0.14), 0 0 52px 10px rgba(242, 148, 34, 0.6); animation: acender 2.8s ease-in-out infinite; }
.chama-nova.situacao-2 .ponto { border: 0; background: #6f8ba6; box-shadow: none; }
/* Família: a membrana tracejada da Rede, com um ponto por membro. */
.sobrenome-da-celula { font-family: var(--dados); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--campo-texto); }
.membrana {
    --raio: 62px;
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 46% 54% 52% 48% / 50% 45% 55% 50%;
    border: 1.5px solid rgba(207, 224, 242, 0.35);
    background: rgba(207, 224, 242, 0.05);
}
.membrana.vazia { border-style: dashed; border-color: var(--campo-suave); background: none; }
.membrana .membro {
    position: absolute;
    left: calc(50% - 8px);
    top: calc(50% - 8px);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--brasa);
    box-shadow: 0 0 14px 2px rgba(242, 148, 34, 0.45);
}
.membrana::after { content: ""; position: absolute; left: calc(50% - 3px); top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--campo-suave); }

/* Ministério: o botão como fica no rodapé da Rede, ao lado de "Toda a rede". */
.botoes-da-rede { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.botoes-da-rede span {
    padding: 8px 18px;
    border: 1px solid var(--campo-borda);
    border-radius: 999px;
    color: var(--campo-suave);
    font-size: 15px;
}
.botoes-da-rede .ativo {
    padding: 12px 26px;
    border-color: transparent;
    background: var(--campo-texto);
    color: var(--campo);
    font-family: var(--serifa);
    font-size: clamp(24px, 2.8vw, 34px);
    letter-spacing: -0.01em;
    box-shadow: 0 0 40px 4px rgba(207, 224, 242, 0.18);
    overflow-wrap: anywhere;
}

@keyframes acender {
    50% { box-shadow: 0 0 0 16px rgba(242, 148, 34, 0.06), 0 0 64px 14px rgba(242, 148, 34, 0.45); }
}

/* O lado do cadastro: só os campos obrigatórios. */
.essencial { display: flex; flex-direction: column; padding: 44px 44px 36px; }
.essencial h1 { margin: 0; font-family: var(--serifa); font-weight: 400; font-size: 34px; letter-spacing: -0.02em; line-height: 1.1; }
.essencial .subtitulo { margin: 8px 0 0; color: var(--texto-suave); }
.essencial > .form-label { margin-top: 30px; }
.campo-do-nome { font-size: 20px; padding: 12px 14px; }

.escolha-da-situacao { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
.escolha-da-situacao legend { float: none; width: auto; margin-bottom: 8px; }
.situacoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.situacao {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 14px 13px;
    border: 1.5px solid var(--linha);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.situacao:hover { border-color: #b7c7d8; }
.situacao .material-symbols-outlined { font-size: 22px; color: var(--texto-suave); }
.situacao strong { font-weight: 600; font-size: 15px; }
.situacao small { color: var(--texto-suave); font-size: 12.5px; line-height: 1.35; }
.situacao.escolhida { border-color: var(--azul-promessa); background: rgba(0, 77, 133, 0.05); box-shadow: 0 0 0 3px rgba(0, 77, 133, 0.10); }
.situacao.escolhida .material-symbols-outlined { color: var(--chama); }
.situacao:has(input:focus-visible) { outline: 2px solid var(--chama); outline-offset: 2px; }
.escolha-da-situacao .invalid-tooltip { position: static; display: block; margin-top: 8px; padding: 0; background: none; color: var(--alerta); font-size: 13px; }
.escolha-da-situacao .position-relative { position: static !important; }

.motivo-da-inativacao { margin-top: 16px; }

.acoes-do-cadastro { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 30px; }
.acoes-do-cadastro .btn-primary { padding: 10px 22px; font-size: 15px; }
.acoes-do-cadastro .btn-link { color: var(--texto-suave); text-decoration: none; }

.mais-dados {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    width: 100%;
    margin-top: 16px;
    padding: 16px 20px;
    border: 1.5px dashed #b7c7d8;
    border-radius: 14px;
    background: none;
    color: var(--azul-promessa);
    font-weight: 600;
    text-align: left;
}
.mais-dados:hover { border-color: var(--azul-promessa); background: rgba(0, 77, 133, 0.03); }
.mais-dados .opcional { font-weight: 400; color: var(--texto-suave); }

.dados-opcionais { margin-top: 16px; }
.dados-opcionais h2 { font-size: 19px; margin-bottom: 14px; }

@media (max-width: 860px) {
    .cartao-de-cadastro { grid-template-columns: 1fr; min-height: 0; }
    .vitrine-na-rede { height: 200px; }
    .vitrine-na-rede:has(.celula-nova) { height: 280px; }
    .chama-nova, .celula-nova, .ministerio-novo { gap: 10px; }
    .membrana { --raio: 40px; width: 96px; height: 96px; }
    .membrana .membro { width: 12px; height: 12px; left: calc(50% - 6px); top: calc(50% - 6px); }
    .chama-nova strong, .celula-nova strong { font-size: 30px; }
    .essencial { padding: 28px 22px 24px; }
}

@media (max-width: 575.98px) {
    .situacoes { grid-template-columns: 1fr; }
    .situacao { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; }
    .situacao .material-symbols-outlined { grid-row: span 2; align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
    .chama-nova .ponto { animation: none !important; transition: none; }
    .situacao { transition: none; }
}

/* ---------- Listagens (D71): a faixa da rede no topo e, nas famílias e ministérios, cartões ---------- */

.faixa-da-lista {
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    padding: 28px 32px 24px;
    border-radius: 20px;
    background: radial-gradient(900px 300px at 20% 30%, #0c2a48 0%, transparent 70%), var(--campo);
    color: var(--campo-texto);
}
.faixa-da-lista > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.45;
    pointer-events: none;
    /* A constelação some do lado do texto e aparece à direita, onde não atrapalha a leitura. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 35%, #000 75%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 35%, #000 75%);
}
.conteudo-da-faixa { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.faixa-da-lista .rotulo { color: var(--campo-suave); }
.faixa-da-lista h1 {
    margin: 2px 0 0;
    font-family: var(--serifa);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #f4f8fc;
}
.faixa-da-lista h1 em { font-style: normal; color: var(--chama); }
.faixa-da-lista p:not(.rotulo) { margin: 8px 0 0; max-width: 680px; color: var(--campo-suave); }
.faixa-da-lista .recortes-do-campo { position: relative; margin-top: 18px; }
.acoes-da-faixa { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-na-faixa { border: 1px solid var(--campo-borda); background: rgba(207, 224, 242, 0.06); color: var(--campo-texto); }
.btn-na-faixa:hover { border-color: var(--campo-suave); color: #fff; }

.mais-filtros { background: var(--fundo); }
.quantos-filtros { color: var(--chama); font-weight: 600; }
.vazio-da-lista p { margin: 0 0 8px; }

/* Busca solta, acima dos cartões. */
.barra-de-busca { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 6px 6px 6px 16px; border: 1px solid var(--linha); border-radius: 14px; background: var(--superficie); }
.barra-de-busca > .material-symbols-outlined { color: var(--texto-suave); }
.barra-de-busca .form-control { border: 0; box-shadow: none; padding-left: 0; }

.grade-de-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin: 0 0 16px; padding: 0; list-style: none; }
.cartao-da-lista {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 20px;
    border: 1px solid var(--linha);
    border-radius: 16px;
    background: var(--superficie);
    color: var(--texto);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cartao-da-lista:hover, .cartao-da-lista:focus-within { border-color: #b7c7d8; box-shadow: 0 14px 30px -22px rgba(11, 37, 64, 0.45); transform: translateY(-1px); color: var(--texto); }
.rodape-do-cartao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--linha); font-size: 13px; color: var(--texto-suave); }

/* Família: a célula da Rede em miniatura, um ponto por membro. */
.cartao-de-familia { flex-direction: row; flex-wrap: wrap; align-items: flex-start; column-gap: 16px; }
.celula-em-miniatura {
    position: relative;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 46% 54% 52% 48% / 50% 45% 55% 50%;
    border: 1.5px solid rgba(0, 77, 133, 0.25);
    background: rgba(0, 77, 133, 0.05);
}
.celula-em-miniatura.vazia { border-style: dashed; background: none; }
.celula-em-miniatura i { position: absolute; left: calc(50% - 4px); top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--chama); }
.corpo-do-cartao { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; }
.corpo-do-cartao strong { font-family: var(--serifa); font-weight: 400; font-size: 20px; line-height: 1.2; }
.corpo-do-cartao small { color: var(--texto-suave); }
.cartao-de-familia .rodape-do-cartao { flex-basis: 100%; }

/* Ministério: o nome no botão da Rede. */
.cartao-de-ministerio { align-items: flex-start; }
.cobre-o-cartao { position: absolute; inset: 0; border-radius: inherit; }
.nome-no-botao {
    padding: 8px 18px;
    /* Numa linha (42px de altura) é pílula; em várias, cantos suaves que não cortam o texto. */
    border-radius: 21px;
    background: var(--campo);
    color: #f4f8fc;
    font-family: var(--serifa);
    font-size: 22px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.cartao-de-ministerio .publico { font-family: var(--dados); font-size: 12px; color: var(--texto-suave); }
.cartao-de-ministerio .rodape-do-cartao { align-self: stretch; align-items: baseline; justify-content: space-between; }
.cartao-de-ministerio .numero { font-family: var(--serifa); font-weight: 400; font-size: 22px; color: var(--texto); margin-right: 2px; }
.cabeca-do-cartao { align-self: stretch; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cabeca-do-cartao .nome-no-botao { min-width: 0; }
.editar-cartao { position: relative; z-index: 1; flex: none; margin-top: 4px; }

@media (max-width: 575.98px) {
    .faixa-da-lista { padding: 22px 18px 18px; border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .cartao-da-lista { transition: none; }
    .cartao-da-lista:hover { transform: none; }
}

/* ---------- Ficha: pergunta da etapa, próximo passo e situações de cuidado (D72 a D74) ---------- */

.pergunta-da-etapa { display: flex; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: rgba(0, 77, 133, 0.05); }
.pergunta-da-etapa > .material-symbols-outlined { color: var(--azul-promessa); }
.pergunta-da-etapa p { margin: 0; font-family: var(--serifa); font-size: 16px; line-height: 1.35; color: var(--tinta); }
.pergunta-da-etapa small { display: block; margin-top: 4px; color: var(--texto-suave); }

.proximo-passo-da-pessoa { margin-top: 14px; padding: 14px 16px; border: 1.5px solid var(--brasa); border-radius: 12px; background: rgba(255, 196, 107, 0.08); }
.proximo-passo-da-pessoa.vencido { border-color: var(--alerta); background: rgba(214, 80, 58, 0.05); }
.proximo-passo-da-pessoa .rotulo { margin-bottom: 4px; }
.descricao-do-passo { margin: 0; font-weight: 600; font-size: 15px; }
.detalhe-do-passo { margin: 4px 0 0; font-size: 13px; color: var(--texto-suave); }
.proximo-passo-da-pessoa.vencido .detalhe-do-passo { color: var(--alerta); }
.acoes-do-passo { display: flex; gap: 8px; margin-top: 10px; }

.situacoes-de-cuidado { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.situacoes-de-cuidado li { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 12px; border-left: 3px solid var(--alerta); border-radius: 8px; background: var(--fundo); }
.situacoes-de-cuidado li.tipo-2 { border-left-color: #6f8ba6; }
.situacoes-de-cuidado li.tipo-3 { border-left-color: var(--chama); }
.situacoes-de-cuidado li.tipo-4 { border-left-color: var(--diaconal); }
.situacoes-de-cuidado b { font-weight: 600; }
.situacoes-de-cuidado small { display: block; color: var(--texto-suave); font-size: 12px; }
.situacoes-de-cuidado p { margin: 4px 0 0; font-size: 13px; }
.situacoes-de-cuidado .confidencial { font-size: 15px; color: var(--texto-suave); vertical-align: -2px; }
.tipos-de-situacao { display: flex; flex-wrap: wrap; gap: 6px; }
.tipos-de-situacao label { padding: 5px 12px; border: 1px solid var(--linha); border-radius: 999px; font-size: 13px; cursor: pointer; }
.tipos-de-situacao label.escolhida { border-color: var(--azul-promessa); background: rgba(0, 77, 133, 0.08); color: var(--azul-promessa); font-weight: 600; }
.tipos-de-situacao label:has(input:focus-visible) { outline: 2px solid var(--chama); outline-offset: 2px; }
.em-cuidado { font-size: 16px; color: var(--alerta); vertical-align: -3px; margin-left: 4px; }
.tipo-do-cartao { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--azul-promessa); font-weight: 600; }
.tipo-do-cartao .material-symbols-outlined { font-size: 16px; }

/* ---------- Acessos (D76) ---------- */
.formulario-de-acesso { margin-bottom: 16px; }
.lista-de-acessos { list-style: none; margin: 0; padding: 0; }
.lista-de-acessos li { display: grid; grid-template-columns: 38px minmax(0, 1.4fr) auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--linha); }
.lista-de-acessos li:first-child { border-top: 0; }
.lista-de-acessos .inicial { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--campo); color: var(--brasa); font-family: var(--serifa); font-size: 18px; text-transform: uppercase; }
.lista-de-acessos .quem { display: flex; flex-direction: column; min-width: 0; }
.lista-de-acessos .quem small { color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; }
.lista-de-acessos .acoes { display: flex; gap: 6px; justify-content: flex-end; }
.titulo-da-senha { font-family: var(--serifa); font-weight: 400; font-size: 30px; margin: 0 0 6px; }
@media (max-width: 767px) {
    .lista-de-acessos li { grid-template-columns: 38px minmax(0, 1fr) auto; }
    .lista-de-acessos .quando { grid-column: 2 / -1; }
}

/* ---------- Cultos e chamada (D80) ---------- */
.abrir-chamada { margin-bottom: 16px; }
.tipos-de-culto { display: flex; flex-wrap: wrap; gap: 6px; }
.tipos-de-culto label { padding: 8px 14px; border: 1.5px solid var(--linha); border-radius: 999px; cursor: pointer; font-size: 14px; }
.tipos-de-culto label.escolhida { border-color: var(--azul-promessa); background: rgba(0, 77, 133, 0.06); color: var(--azul-promessa); font-weight: 600; }
.tipos-de-culto label:has(input:focus-visible) { outline: 2px solid var(--chama); outline-offset: 2px; }
.cartao-de-culto strong { font-family: var(--serifa); font-weight: 400; font-size: 22px; }
.data-do-culto { font-family: var(--dados); font-size: 12px; letter-spacing: 0.08em; color: var(--texto-suave); }
.cartao-de-culto .numero { font-family: var(--serifa); font-size: 22px; color: var(--texto); }
.contagem-geral { position: relative; }
.contagem-geral .rotulo { color: var(--campo-suave); display: block; margin-bottom: 4px; }
.busca-da-chamada { position: static; padding: 0; border: 0; background: none; }
.sugeridos-da-chamada { display: flex; flex-wrap: wrap; gap: 6px; }
.sugeridos-da-chamada button { padding: 6px 12px; border: 1px solid var(--linha); border-radius: 999px; background: var(--superficie); font-size: 14px; }
.sugeridos-da-chamada button:hover { border-color: var(--azul-promessa); color: var(--azul-promessa); }
.sugeridos-da-chamada button b { font-family: var(--dados); font-weight: 500; font-size: 11px; color: var(--texto-suave); margin-left: 2px; }
.presentes-da-chamada { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.presentes-da-chamada li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linha); }
.presentes-da-chamada li:first-child { border-top: 0; }
.presentes-da-chamada .presente { color: var(--diaconal); font-size: 20px; }
.presentes-da-chamada small { display: block; color: var(--texto-suave); font-size: 12px; }
.selo-novo { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(242, 148, 34, 0.16); color: #8a4b00; font-size: 11px; font-weight: 600; vertical-align: 2px; }
.fato-de-servico dt b { color: var(--chama); }
.chegaram-no-publico { background: rgba(255, 196, 107, 0.1); }

/* D79: divisão do cuidado. */
.equipe-da-divisao { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.equipe-da-divisao span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 999px; background: rgba(0, 77, 133, 0.08); color: var(--azul-promessa); font-size: 14px; font-weight: 600; }
.equipe-da-divisao button { border: 0; background: none; color: inherit; font-size: 18px; line-height: 1; padding: 0 6px; border-radius: 999px; cursor: pointer; }
.equipe-da-divisao button:hover, .equipe-da-divisao button:focus-visible { background: rgba(0, 77, 133, 0.14); }
.grupo-da-divisao { display: flex; flex-direction: column; gap: 4px; height: 100%; }
.alvos-da-divisao { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--linha); display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.alvos-da-divisao li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.alvos-da-divisao .material-symbols-outlined { font-size: 18px; color: var(--azul-promessa); opacity: .7; }
.alvos-da-divisao b { display: block; font-weight: 600; }
.alvos-da-divisao small { display: block; color: var(--texto-suave); }
.grupo-da-divisao h3 { font-family: var(--serifa); font-weight: 400; font-size: 22px; margin: 0; }

/* D81: contagem pelas fotos (QuemVeio). */
.contagem-por-foto h2 { font-family: var(--serifa); font-weight: 400; font-size: 22px; }
.progresso-das-fotos { height: 8px; border-radius: 999px; background: var(--linha); overflow: hidden; }
.progresso-das-fotos span { display: block; height: 100%; background: var(--azul-promessa); border-radius: 999px; transition: width .6s ease; }
.progresso-das-fotos span.indefinido { animation: fotos-indefinido 1.4s ease-in-out infinite; }
@keyframes fotos-indefinido { 0% { margin-left: 0; } 50% { margin-left: 92%; } 100% { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .progresso-das-fotos span.indefinido { animation: none; } }
.rostos-para-identificar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.rostos-para-identificar li { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie); }
.rostos-para-identificar img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--linha); }
.rostos-para-identificar .quem-e { display: flex; flex-direction: column; gap: 6px; }
.rostos-para-identificar .quem-e small { color: var(--texto-suave); font-family: var(--dados); font-size: 11px; }
.rostos-reconhecidos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rostos-reconhecidos li { display: flex; align-items: center; gap: 10px; }
.rostos-reconhecidos img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--linha); }
.rostos-reconhecidos span { flex: 1; }
.rostos-reconhecidos b { display: block; font-weight: 600; }
.rostos-reconhecidos small { color: var(--texto-suave); }

/* D85: auditoria. */
.filtros-da-auditoria { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 150px)) repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 991px) { .filtros-da-auditoria { grid-template-columns: 1fr 1fr; } .filtros-da-auditoria input[type=search] { grid-column: 1 / -1; } }
.aviso-do-registro { margin: 0; padding: 10px 18px; background: rgba(0, 77, 133, 0.06); border-top: 1px solid var(--linha); font-size: 14px; }
.linha-da-auditoria { list-style: none; margin: 0; padding: 0; }
.linha-da-auditoria > li { display: grid; grid-template-columns: 128px minmax(0, 200px) 130px minmax(0, 1fr) 110px 92px; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--linha); font-size: 14px; }
.linha-da-auditoria .quando, .linha-da-auditoria .onde { font-family: var(--dados); font-size: 12px; color: var(--texto-suave); }
.linha-da-auditoria .quem { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.linha-da-auditoria .oque { min-width: 0; overflow-wrap: anywhere; }
.linha-da-auditoria .oque small { color: var(--texto-suave); font-family: var(--dados); }
.linha-da-auditoria code { font-size: 12px; color: var(--texto); background: none; }
.selo-da-acao { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(0, 77, 133, 0.08); color: var(--azul-promessa); white-space: nowrap; }
.acao-1 .selo-da-acao { background: rgba(31, 122, 76, 0.12); color: #1f7a4c; }
.acao-3 .selo-da-acao, .acao-5 .selo-da-acao, .acao-7 .selo-da-acao { background: rgba(179, 38, 30, 0.1); color: #b3261e; }
.acao-8 .selo-da-acao { background: var(--linha); color: var(--texto-suave); font-weight: 500; }
.detalhes-da-auditoria { grid-column: 1 / -1; padding: 6px 0 4px; }
.detalhes-da-auditoria .rotulo { margin-right: 6px; }
.detalhes-da-auditoria table { font-size: 13px; margin: 8px 0 0; }
.detalhes-da-auditoria th[scope=row] { font-weight: 600; width: 22%; }
.detalhes-da-auditoria .antes { color: var(--texto-suave); text-decoration: line-through; text-decoration-color: rgba(179, 38, 30, 0.4); }
@media (max-width: 991px) {
    .linha-da-auditoria > li { grid-template-columns: 1fr auto; }
    .linha-da-auditoria .quem, .linha-da-auditoria .oque, .linha-da-auditoria .onde { grid-column: 1 / -1; }
}

/* D88: aviso depois de pedir o link de troca de senha. */
.aviso-do-login { padding: 18px; border-radius: 12px; background: rgba(0, 77, 133, 0.06); }
.aviso-do-login > .material-symbols-outlined { font-size: 28px; color: var(--azul-promessa); }
.aviso-do-login p { margin: 8px 0 0; }

/* D89: aviso de privacidade. */
.rodape-do-login { margin: 28px 0 0; text-align: center; font-size: 13px; }
.rodape-do-login a { color: var(--texto-suave); }
.pagina-da-privacidade { max-width: 760px; margin: 0 auto; padding: 40px 20px 64px; background: var(--superficie); min-height: 100vh; }
.pagina-da-privacidade .marca { margin-bottom: 36px; }
.pagina-da-privacidade h1 { font-family: var(--serifa); font-weight: 400; font-size: 38px; line-height: 1.15; margin: 6px 0 14px; }
.pagina-da-privacidade .abertura { font-size: 17px; line-height: 1.6; color: var(--texto); }
.pagina-da-privacidade section { padding: 24px 0 4px; border-top: 1px solid var(--linha); margin-top: 24px; }
.pagina-da-privacidade h2 { font-family: var(--serifa); font-weight: 400; font-size: 24px; margin: 0 0 10px; }
.pagina-da-privacidade p, .pagina-da-privacidade li { font-size: 15.5px; line-height: 1.65; }
.pagina-da-privacidade ul { padding-left: 20px; }
.pagina-da-privacidade li { margin-bottom: 6px; }
.pagina-da-privacidade footer { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--linha); }
@media (max-width: 575px) { .pagina-da-privacidade h1 { font-size: 30px; } }

/* Redes da igreja no rodapé do login e da privacidade. */
.redes-da-igreja { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-size: 13px; }
.redes-da-igreja a { color: var(--texto-suave); }
.pagina-da-privacidade footer .redes-da-igreja { justify-content: flex-start; }