/*
  Piso do tema Infinita (ADR-0004 secao 2). Todo valor de cor e token em :root, logo abaixo das fontes.
*/

/*
 * Fontes AUTO-HOSPEDADAS (OFL-1.1, licencas em ../fontes/). Nenhuma requisicao a servico de fonte
 * de terceiro: independencia (CLAUDE.md secao 4) e CSP com font-src 'self'. Subconjunto latino, que
 * cobre o portugues. font-display: swap mostra o texto na fonte do sistema enquanto a fonte carrega,
 * sem deixar a tela em branco.
 */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fontes/plus-jakarta-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fontes/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fontes/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fontes/fraunces-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fontes/fraunces-latin-700-normal.woff2") format("woff2");
}

/*
  Tokens de cor do piso. O tema do municipio sobrescreve estes tokens por tenant (M0-T52/M0-T55).
  Nenhuma cor literal fora daqui.
*/
:root {
  --cor-tinta-primaria: #1D2540;
  --cor-tinta-secundaria: #4A5372;
  --cor-tinta-terciaria: #7A8199;
  --cor-fundo: #FBF7F0;
  --cor-superficie: #FFFFFF;
  /* Separador decorativo: regua de cabecalho e rodape. 1.21:1 sobre o fundo, aceitavel para
     separar e inaceitavel para delimitar campo. */
  --cor-borda: #E9E2D6;
  /* Borda PERCEBIVEL de campo de formulario: 3.04:1 sobre o fundo. Token proprio, porque sem ele
     o campo deixa de ser percebido como campo por quem tem baixa visao. */
  --cor-borda-de-campo: #9C8D73;
  --cor-acao: #0E7C7B;
  --cor-acao-escura: #0B6362;
  --cor-acao-tint: #DDF0EE;
  /* Cor cheia e PREENCHIMENTO: o que contrasta e o texto marinho sobre ela (4.91:1). Coral sobre
     o fundo da 2.88:1, logo coral e fundo de etiqueta, nunca borda fina nem texto. */
  --cor-destaque: #EF6A4C;
  --cor-destaque-escura: #B9432A;
  --cor-destaque-tint: #FCE5DE;
  --cor-apoio: #7C6CD4;
  --cor-apoio-escura: #5A4BB0;
  --cor-apoio-tint: #ECE8FA;
  --cor-atencao: #F2B33D;
  /* Era #C98A12 na extracao do PDF, que da 2.76:1 sobre o fundo creme e reprova como texto. */
  --cor-atencao-escura: #97690D;
  --cor-atencao-tint: #FCF0D4;

  /* Alvo de toque minimo exigido pelo CLAUDE.md secao 4. */
  --alvo-toque-minimo: 44px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Escalas: espaco, raio e sombra. Nenhuma cor aqui: cor so por token (tema do municipio). */
:root {
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --raio: 0.875rem;
  --raio-pequeno: 0.5rem;
  --sombra: 0 1px 2px rgb(29 37 64 / 6%), 0 6px 20px rgb(29 37 64 / 6%);
  --sombra-forte: 0 2px 4px rgb(29 37 64 / 8%), 0 14px 34px rgb(29 37 64 / 10%);
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cor-fundo);
  color: var(--cor-tinta-primaria);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}
main { flex: 1; }

/* Acessibilidade: foco sempre visivel, nunca removido. */
:focus-visible {
  outline: 3px solid var(--cor-acao);
  outline-offset: 2px;
}

/* Pular para o conteudo: fora da tela ate receber foco pelo teclado. */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  background: var(--cor-acao-escura);
  color: var(--cor-superficie);
  padding: 0.75rem 1rem;
  z-index: 100;
}
.pular-para-conteudo:focus { left: 0; top: 0; }

a { color: var(--cor-acao-escura); text-underline-offset: 0.18em; }
a:hover { color: var(--cor-acao); }

/* Titulos e a marca em Fraunces; o resto do texto em Plus Jakarta Sans. */
h1, h2, h3, .marca-nome { font-family: Fraunces, Georgia, serif; line-height: 1.2; color: var(--cor-tinta-primaria); }
h1 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); margin: 0 0 var(--esp-3); }
h2 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem); margin: var(--esp-5) 0 var(--esp-3); }
h3 { font-size: 1.125rem; margin: var(--esp-4) 0 var(--esp-2); }
p { margin: 0 0 var(--esp-3); }

/* ---------- Cabecalho e menu ---------- */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
  box-shadow: 0 1px 0 rgb(29 37 64 / 3%);
}
.cabecalho-miolo {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0.5rem var(--esp-4);
  display: flex;
  align-items: center;
  gap: var(--esp-4);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--alvo-toque-minimo);
  color: var(--cor-tinta-primaria);
  text-decoration: none;
}
.marca-simbolo { display: block; width: 3rem; height: auto; }
.marca-nome { font-weight: 700; font-size: 1.375rem; letter-spacing: -0.01em; }
/* Assinatura da marca: descritor em letras miudas ao lado (ADR-0004 secao 1). */
.marca-descritor {
  display: none;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cor-tinta-secundaria);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-left: var(--esp-3);
  border-left: 2px solid var(--cor-borda);
}

.menu-largo { display: none; flex: 1; }
.menu-largo ul { display: flex; flex-wrap: wrap; gap: var(--esp-1); margin: 0; padding: 0; list-style: none; }
.menu-largo a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-toque-minimo);
  padding: 0 var(--esp-3);
  border-radius: 999px;
  color: var(--cor-tinta-secundaria);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}
.menu-largo a:hover { background: var(--cor-acao-tint); color: var(--cor-acao-escura); }
.menu-largo a[aria-current="page"] { background: var(--cor-acao-tint); color: var(--cor-acao-escura); }

.sair { margin: 0 0 0 auto; text-decoration: none; }
.botao-discreto {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--alvo-toque-minimo);
  padding: 0 var(--esp-3);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--cor-tinta-secundaria);
  background: transparent;
  border: 1px solid var(--cor-borda-de-campo);
  border-radius: 999px;
  cursor: pointer;
}
.botao-discreto:hover { background: var(--cor-fundo); color: var(--cor-tinta-primaria); }

.menu-movel { border-top: 1px solid var(--cor-borda); }
.menu-movel summary {
  display: flex;
  align-items: center;
  min-height: var(--alvo-toque-minimo);
  padding: 0 var(--esp-4);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.menu-movel summary::-webkit-details-marker { display: none; }
.menu-movel summary::after { content: "▾"; margin-left: var(--esp-2); }
.menu-movel[open] summary::after { content: "▴"; }
.menu-movel ul { margin: 0; padding: 0 var(--esp-3) var(--esp-3); list-style: none; display: grid; gap: var(--esp-1); }
.menu-movel a {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--alvo-toque-minimo);
  padding: 0 var(--esp-3);
  border-radius: var(--raio-pequeno);
  color: var(--cor-tinta-primaria);
  font-weight: 600;
  text-decoration: none;
}
.menu-movel a:hover, .menu-movel a[aria-current="page"] { background: var(--cor-acao-tint); }

@media (min-width: 62rem) {
  .menu-largo { display: block; }
  .menu-movel { display: none; }
  .marca-descritor { display: inline; }
}
@media (min-width: 48rem) and (max-width: 61.99rem) {
  .marca-descritor { display: inline; }
}

.icone { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; }

/* ---------- Conteudo e rodape ---------- */

main {
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding: var(--esp-5) var(--esp-4) var(--esp-7);
}

.rodape { background: var(--cor-superficie); border-top: 1px solid var(--cor-borda); color: var(--cor-tinta-secundaria); }
.rodape-miolo {
  max-width: 76rem;
  margin: 0 auto;
  padding: var(--esp-5) var(--esp-4);
  display: grid;
  gap: var(--esp-2);
}
.rodape-marca { display: flex; align-items: center; gap: var(--esp-3); margin: 0; font-weight: 700; color: var(--cor-tinta-primaria); }
.rodape-marca img { display: block; }
.rodape-nota { margin: 0; font-size: 0.9375rem; }

.aviso-faixa { border-radius: 0; margin: 0; }

/* ---------- Cartoes, formularios e avisos (Infinita.Acesso e telas simples) ---------- */

.cartao-de-acesso {
  max-width: 32rem;
  margin: var(--esp-4) auto;
  padding: var(--esp-5);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.cartao-de-acesso.largo { max-width: 68rem; }
.cartao-de-acesso h1 { margin-top: 0; }
/* Cartao dentro de cartao (metas, protocolos, itens): ocupa a largura toda e perde a sombra, para nao parecer uma janela solta. */
.cartao-de-acesso .cartao-de-acesso { max-width: none; margin: var(--esp-3) 0; box-shadow: none; background: var(--cor-fundo); }
progress { accent-color: var(--cor-acao-escura); }

.formulario { display: grid; gap: var(--esp-4); margin-block: var(--esp-4); }

.campo { display: grid; gap: 0.375rem; }
.campo label { font-weight: 600; }

.campo input[type="text"],
.campo input[type="password"],
.campo input[type="date"],
.campo input[type="tel"],
.campo input[type="email"],
.campo input[type="number"],
.campo input[type="file"],
.campo select,
.campo textarea {
  width: 100%;
  min-height: var(--alvo-toque-minimo);
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--cor-tinta-primaria);
  background: var(--cor-superficie);
  /* 3:1 contra o fundo: borda de campo precisa ser perceptivel (WCAG 1.4.11). */
  border: 2px solid var(--cor-borda-de-campo);
  border-radius: var(--raio-pequeno);
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 3px solid var(--cor-acao);
  outline-offset: 1px;
  border-color: var(--cor-acao-escura);
}
.campo textarea { resize: vertical; line-height: 1.5; }

.campo-marcar {
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--esp-3);
}
.campo-marcar input[type="checkbox"] {
  width: var(--alvo-toque-minimo);
  height: var(--alvo-toque-minimo);
  accent-color: var(--cor-acao);
}
.campo-marcar .ajuda { grid-column: 2; margin: 0; }

.ajuda { color: var(--cor-tinta-secundaria); font-size: 0.9375rem; }

/* Botoes: primario cheio, secundario com borda, ambos com alvo de 44px. */
.botao-principal, .botao-primario, .botao-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--alvo-toque-minimo);
  padding: 0.5rem 1.5rem;
  font: inherit;
  font-weight: 700;
  border-radius: var(--raio-pequeno);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s;
}
.botao-principal, .botao-primario {
  color: var(--cor-superficie);
  background: var(--cor-acao-escura);
  border: 2px solid var(--cor-acao-escura);
}
.botao-principal:hover, .botao-primario:hover { color: var(--cor-superficie); background: var(--cor-acao); border-color: var(--cor-acao); box-shadow: var(--sombra); }
.botao-secundario {
  color: var(--cor-acao-escura);
  background: var(--cor-superficie);
  border: 2px solid var(--cor-acao-escura);
}
.botao-secundario:hover { background: var(--cor-acao-tint); color: var(--cor-acao-escura); }
.acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-block: var(--esp-4); }

/* Aviso nunca depende so de cor: leva o rotulo "Atencao:" e uma borda lateral grossa. */
.aviso {
  padding: 0.75rem 1rem;
  margin-block: var(--esp-3);
  color: var(--cor-tinta-primaria);
  border-left: 0.375rem solid;
  border-radius: var(--raio-pequeno);
}
.aviso-erro { background: var(--cor-destaque-tint); border-color: var(--cor-destaque-escura); }
.aviso-atencao { background: var(--cor-atencao-tint); border-color: var(--cor-atencao-escura); }
.aviso-info { background: var(--cor-acao-tint); border-color: var(--cor-acao-escura); }
.text-danger { color: var(--cor-destaque-escura); }

/* Erro de campo: borda mais grossa, rotulo "Atencao:" e texto — nunca so cor. */
.erro-de-campo, .erro-de-campo p {
  margin: 0;
  padding: 0.5rem 0.75rem;
  color: var(--cor-tinta-primaria);
  background: var(--cor-destaque-tint);
  border-left: 0.375rem solid var(--cor-destaque-escura);
  border-radius: 0.375rem;
}

.passos { padding-left: var(--esp-5); }
.passos li { margin-block: var(--esp-2); }

.qr { margin: var(--esp-4) 0; text-align: center; }
.qr svg { width: min(100%, 16rem); height: auto; }
.qr figcaption { text-align: left; color: var(--cor-tinta-secundaria); }

.chave, .codigos code, .codigo-unico {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.125rem;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}
.chave { display: block; margin-top: var(--esp-2); padding: var(--esp-2); background: var(--cor-fundo); border-radius: 0.375rem; }
.codigo-unico { padding: 0.125rem 0.5rem; background: var(--cor-atencao-tint); border: 1px dashed var(--cor-atencao-escura); border-radius: 0.375rem; }

.codigos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--esp-2);
  padding: 0;
  list-style: none;
}
.codigos li { padding: 0.5rem 0.75rem; background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: 0.375rem; }

/* ---------- Listas, ficha e atalhos ---------- */

.lista-de-pessoas, .blocos-da-ficha { padding: 0; list-style: none; display: grid; gap: var(--esp-3); }
.lista-de-pessoas li, .blocos-da-ficha li {
  padding: var(--esp-4);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.lista-de-pessoas p, .blocos-da-ficha span { margin: 0.25rem 0 0; }
.blocos-da-ficha li { display: grid; gap: 0.25rem; }
.pessoa-nome { font-weight: 700; font-size: 1.125rem; }
.pessoa-idade { margin-left: var(--esp-2); color: var(--cor-tinta-secundaria); }
.pessoa-situacao { margin: var(--esp-2) 0 0; }
.lista-de-pessoas a, .blocos-da-ficha a { display: inline-block; min-height: var(--alvo-toque-minimo); line-height: var(--alvo-toque-minimo); }

/* Atalhos em linha (listas antigas): viram uma grade de cartoes. */
.lista-de-atalhos { padding: 0; list-style: none; display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.lista-de-atalhos li { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); }
.lista-de-atalhos a { display: block; padding: var(--esp-4); font-weight: 600; text-decoration: none; color: var(--cor-tinta-primaria); border-radius: var(--raio); }
.lista-de-atalhos a:hover { background: var(--cor-acao-tint); }

/* Texto do termo de consentimento: legivel, rolavel e alcancavel por teclado (tabindex=0). */
.termo {
  max-height: 22rem;
  overflow-y: auto;
  padding: var(--esp-4);
  background: var(--cor-fundo);
  border: 2px solid var(--cor-borda-de-campo);
  border-radius: var(--raio-pequeno);
}
.termo p { max-width: 70ch; }

/* ---------- Tabelas ---------- */

.tabela-rolavel { overflow-x: auto; margin-block: var(--esp-3); border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie); }
.tabela { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tabela caption { text-align: left; padding: var(--esp-3) var(--esp-4); font-weight: 700; color: var(--cor-tinta-secundaria); }
.tabela th, .tabela td { padding: 0.625rem var(--esp-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--cor-borda); }
.tabela thead th { background: var(--cor-acao-tint); color: var(--cor-acao-escura); font-weight: 700; white-space: nowrap; }
.tabela tbody tr:nth-child(even) { background: var(--cor-fundo); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela td.numero, .tabela th.numero { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Etiquetas e numeros ---------- */

.etiqueta {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: 999px;
  background: var(--cor-acao-tint);
  color: var(--cor-acao-escura);
  border: 1px solid currentColor;
}
.etiqueta-atencao { background: var(--cor-atencao-tint); color: var(--cor-atencao-escura); }
.etiqueta-alerta { background: var(--cor-destaque-tint); color: var(--cor-destaque-escura); }
.etiqueta-apoio { background: var(--cor-apoio-tint); color: var(--cor-apoio-escura); }

.numeral-grande { font-family: Fraunces, Georgia, serif; font-size: 3rem; font-weight: 700; line-height: 1; margin: var(--esp-2) 0; color: var(--cor-acao-escura); }

.so-leitor, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Pagina inicial (Web): saudacao, atalhos por grupo e pessoas da familia ---------- */

.inicio-saudacao {
  position: relative;
  overflow: hidden;
  padding: var(--esp-6) var(--esp-5);
  margin-bottom: var(--esp-5);
  color: var(--cor-tinta-primaria);
  background:
    radial-gradient(circle at 92% 10%, var(--cor-apoio-tint) 0, transparent 38%),
    radial-gradient(circle at 70% 120%, var(--cor-destaque-tint) 0, transparent 40%),
    var(--cor-acao-tint);
  border: 1px solid var(--cor-borda);
  border-radius: calc(var(--raio) + 0.25rem);
}
.inicio-saudacao h1 { margin-bottom: var(--esp-2); }
.inicio-saudacao p { max-width: 46rem; margin-bottom: 0; color: var(--cor-tinta-secundaria); font-size: 1.0625rem; }
.inicio-saudacao img { position: absolute; right: var(--esp-5); bottom: var(--esp-3); width: 9rem; opacity: 0.16; pointer-events: none; }

.grupo-de-atalhos { margin-bottom: var(--esp-6); }
.grupo-de-atalhos > h2 { margin-top: 0; }
.grupo-de-atalhos > p { color: var(--cor-tinta-secundaria); }

.atalhos { display: grid; gap: var(--esp-3); padding: 0; margin: var(--esp-3) 0 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.atalho a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  align-content: start;
  column-gap: var(--esp-3);
  align-items: start;
  height: 100%;
  padding: var(--esp-4);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  color: var(--cor-tinta-primaria);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.atalho a:hover { transform: translateY(-2px); box-shadow: var(--sombra-forte); border-color: var(--cor-acao); color: var(--cor-tinta-primaria); }
.atalho .atalho-icone {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--cor-acao-tint);
  color: var(--cor-acao-escura);
}
.atalho .atalho-icone .icone { width: 1.5rem; height: 1.5rem; }
.atalho strong { display: block; font-size: 1.0625rem; line-height: 1.3; }
.atalho span.atalho-texto { display: block; margin-top: 0.125rem; font-size: 0.9375rem; color: var(--cor-tinta-secundaria); line-height: 1.45; }
.atalho.destaque .atalho-icone { background: var(--cor-destaque-tint); color: var(--cor-destaque-escura); }
.atalho.apoio .atalho-icone { background: var(--cor-apoio-tint); color: var(--cor-apoio-escura); }
.atalho.atencao .atalho-icone { background: var(--cor-atencao-tint); color: var(--cor-atencao-escura); }

/* Pessoas da familia na pagina inicial: um cartao por pessoa, com os acessos de cada uma. */
.pessoas-da-familia { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); padding: 0; margin: var(--esp-3) 0 0; list-style: none; }
.pessoa-cartao { padding: var(--esp-4); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.pessoa-cartao header { display: flex; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-3); }
.pessoa-avatar {
  display: grid; place-items: center; flex: none;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--cor-apoio-tint); color: var(--cor-apoio-escura);
  font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 1.25rem;
}
.pessoa-cartao h3 { margin: 0; font-size: 1.125rem; }
.pessoa-cartao .pessoa-meta { margin: 0; font-size: 0.875rem; color: var(--cor-tinta-secundaria); }
.pessoa-cartao ul { display: flex; flex-wrap: wrap; gap: var(--esp-2); padding: 0; margin: var(--esp-3) 0 0; list-style: none; }
.pessoa-cartao ul a {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  min-height: var(--alvo-toque-minimo); padding: 0 var(--esp-3);
  font-weight: 600; font-size: 0.9375rem; text-decoration: none;
  color: var(--cor-acao-escura); background: var(--cor-acao-tint); border-radius: 999px;
}
.pessoa-cartao ul a:hover { background: var(--cor-acao); color: var(--cor-superficie); }

.links-publicos { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); margin-top: var(--esp-4); }

/* ---------- Carteira digital ---------- */

.cartao-da-carteira {
  display: grid;
  gap: var(--esp-4);
  justify-items: center;
  padding: var(--esp-5);
  margin-block: var(--esp-4);
  text-align: center;
  color: var(--cor-tinta-primaria);
  background:
    radial-gradient(circle at 100% 0, var(--cor-apoio-tint) 0, transparent 45%),
    radial-gradient(circle at 0 100%, var(--cor-destaque-tint) 0, transparent 45%),
    var(--cor-acao-tint);
  border: 2px solid var(--cor-acao-escura);
  border-radius: calc(var(--raio) + 0.25rem);
  box-shadow: var(--sombra-forte);
}
.cartao-da-carteira img { border-radius: 50%; border: 4px solid var(--cor-superficie); box-shadow: var(--sombra); object-fit: cover; }
.cartao-da-carteira dl { display: grid; grid-template-columns: auto 1fr; gap: var(--esp-1) var(--esp-4); margin: 0; text-align: left; }
.cartao-da-carteira dt { font-weight: 600; color: var(--cor-tinta-secundaria); }
.cartao-da-carteira dd { margin: 0; font-weight: 700; }
.qr-da-carteira { padding: var(--esp-3); background: var(--cor-superficie); border-radius: var(--raio-pequeno); }
.qr-da-carteira svg { display: block; width: min(100%, 14rem); height: auto; }
.qr-tela-cheia { display: grid; place-items: center; padding: var(--esp-5); background: var(--cor-superficie); }
.qr-tela-cheia svg { width: min(100%, 32rem); height: auto; }

/* ---------- Diario de evolucao (M2-T63): a orientacao para casa se destaca por borda e rotulo, nunca so por cor ---------- */

.orientacao-para-casa { background: var(--cor-acao-tint); border: 2px solid var(--cor-acao-escura); border-radius: var(--raio-pequeno); padding: 0.75rem 1rem; margin-block: var(--esp-2); }
.diario-botoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--esp-3); margin-block: var(--esp-4); }
.diario-botoes button { min-height: 4rem; font-size: 1.125rem; }
.item-do-diario { border-bottom: 1px solid var(--cor-borda); padding-block: var(--esp-3); }
.item-do-diario[data-corrigido="true"] { opacity: 1; border-left: 4px dashed var(--cor-borda-de-campo); padding-left: var(--esp-3); }

.previa-do-tema { margin-top: var(--esp-5); }
.nao-imprimir { }
.rodape-de-impressao { display: none; }

/* ---------- Mapa por bairro (ADR-0027) ---------- */

.barra-do-mapa { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; margin-block: var(--esp-3); }
.barra-do-mapa[hidden] { display: none; }
svg.mapa-territorial { touch-action: none; cursor: grab; max-width: 100%; height: auto; }
svg.mapa-territorial:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.legenda-do-mapa { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); padding: 0; margin: var(--esp-3) 0; list-style: none; }

@media print {
  .cabecalho, .rodape, .botao-principal, .botao-primario, .botao-secundario, .nao-imprimir { display: none !important; }
  .rodape-de-impressao { display: block; }
  body { background: var(--cor-superficie); }
  .cartao-de-acesso { box-shadow: none; }
}

/* ---------- Preferencia de acessibilidade da conta (M1-T31) ---------- */
html.fonte-grande { font-size: 125%; }
html.fonte-muito-grande { font-size: 150%; }

/* Alto contraste: texto preto sobre branco e bordas firmes, acima de 7:1. */
html.alto-contraste {
  --cor-tinta-primaria: #000000;
  --cor-tinta-secundaria: #1a1a1a;
  --cor-tinta-terciaria: #333333;
  --cor-fundo: #ffffff;
  --cor-superficie: #ffffff;
  --cor-borda: #000000;
  --cor-borda-de-campo: #000000;
  --cor-acao: #00494a;
  --cor-acao-escura: #00494a;
}
html.alto-contraste a { text-decoration: underline; }
html.alto-contraste :focus-visible { outline: 4px solid #000000; outline-offset: 2px; }
html.alto-contraste .atalho a, html.alto-contraste .pessoa-cartao, html.alto-contraste .cartao-de-acesso { border-color: #000000; }

/* Respeita quem pediu menos movimento no sistema operacional e quem ligou a opcao na conta. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .atalho a:hover { transform: none; }
}
html.sem-movimento *, html.sem-movimento *::before, html.sem-movimento *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
html.sem-movimento .atalho a:hover { transform: none; }