/* Loja 132 — identidade de Loja: marinho #1F3A5F, dourado #C9A227, pavimento mosaico e capitulares romanas (Cinzel).
   Claro ou escuro automático, conforme o aparelho (prefers-color-scheme).
   Sem style="" no HTML e sem imagens em data: (a CSP só aceita arquivos do próprio site); padrões só com gradientes. */

@font-face { font-family: "Cinzel"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fontes/cinzel-600.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fontes/cinzel-700.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: url("/static/fontes/cormorant-500i.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fontes/cormorant-600.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --bg: #f5f3ee;              /* marfim */
  --card: #ffffff;
  --fill: #f0ede5;
  --line: rgba(28, 37, 54, 0.09);
  --line-2: rgba(28, 37, 54, 0.16);
  --fg: #18202d;
  --fg-2: #3a4456;
  --muted: #5d6677;           /* AA (≥4.5) sobre --card, --fill e nas linhas amarelas */
  --navy: #1f3a5f;
  --navy-soft: rgba(31, 58, 95, 0.08);
  --gold: #c9a227;
  --gold-2: #e6c868;
  --gold-ink: #7d6210;        /* AA sobre --gold-soft */
  --gold-soft: rgba(201, 162, 39, 0.15);
  --ok: #1d7a43;
  --ok-soft: rgba(29, 122, 67, 0.11);
  --warn: #9a5b00;
  --warn-soft: rgba(230, 145, 20, 0.15);
  --bad: #b3261e;
  --bad-soft: rgba(179, 38, 30, 0.09);
  --shadow: 0 1px 2px rgba(20, 30, 50, 0.05), 0 8px 24px rgba(20, 30, 50, 0.06);
  --shadow-lg: 0 2px 6px rgba(20, 30, 50, 0.08), 0 18px 44px rgba(20, 30, 50, 0.14);
  --track: #e2ddd0;           /* trilho da barra de progresso: visível mesmo em 0 */
  --scrim: rgba(13, 19, 28, 0.38);
  --radius: 16px;
  --side: linear-gradient(180deg, #15304f 0%, #0f2240 100%);
  --side-fg: rgba(255, 255, 255, 0.84);
  --side-muted: rgba(255, 255, 255, 0.58);
  --brasao: linear-gradient(135deg, #1f3a5f 0%, #142b4c 55%, #0c1b33 100%);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) { :root {
  color-scheme: dark;
  --bg: #0b1220;
  --card: #111a2a;
  --fill: #182235;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.15);
  --fg: #e8ecf2;
  --fg-2: #c3cad6;
  --muted: #8f99aa;
  --navy: #9cbcf0;
  --navy-soft: rgba(156, 188, 240, 0.12);
  --gold: #d9b444;
  --gold-2: #ecd27a;
  --gold-ink: #e3c35e;
  --gold-soft: rgba(217, 180, 68, 0.15);
  --ok: #5cc98a;
  --ok-soft: rgba(92, 201, 138, 0.14);
  --warn: #f0b04a;
  --warn-soft: rgba(240, 176, 74, 0.14);
  --bad: #ff8a80;
  --bad-soft: rgba(255, 138, 128, 0.12);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.45);
  --track: rgba(255, 255, 255, 0.13);
  --scrim: rgba(0, 0, 0, 0.55);
  --side: linear-gradient(180deg, #0c1729 0%, #070e1b 100%);
  --brasao: linear-gradient(135deg, #172d4d 0%, #0f2038 55%, #091426 100%);
} }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--fg); font: 15px/1.5 var(--font);
  background: radial-gradient(1100px 480px at 100% -8%, rgba(201, 162, 39, 0.07), transparent 62%), var(--bg); background-attachment: fixed; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
h1 { font: 700 29px/1.15 var(--display); letter-spacing: 0.015em; color: var(--navy); margin: 4px 0 12px; }
@media (prefers-color-scheme: dark) { h1 { color: var(--fg); } }
h1::after { content: ""; display: block; width: 64px; height: 2px; margin-top: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), transparent); }
h1 small { font: 400 15px var(--font); letter-spacing: 0; color: var(--muted); }
h2 { font: 700 15px/1.3 var(--display); letter-spacing: 0.05em; color: var(--navy); margin: 30px 0 12px; }
@media (prefers-color-scheme: dark) { h2 { color: var(--gold-2); } }
h2 small, h3 small { font-family: var(--font); font-weight: 400; letter-spacing: 0; }
h3 { font-size: 15px; margin: 0; }
small { font-size: 12.5px; }
code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--fill); padding: 1px 5px; border-radius: 5px; }
code.senha { font-size: 15px; padding: 3px 8px; user-select: all; background: var(--gold-soft); }
.muted { color: var(--muted); }
.nw { white-space: nowrap; }
.ok { color: var(--ok); font-weight: 600; }
.sub { color: var(--muted); margin: -2px 0 20px; max-width: 820px; }
.nota { color: var(--muted); font-size: 13px; margin: 10px 0; max-width: 820px; }
.pauta { font: 600 21px/1.35 var(--serif); margin: 0 0 16px; max-width: 820px; }
.voltar { margin: 0 0 6px; font-size: 13.5px; }
::selection { background: var(--gold-soft); }

/* ── estrutura: menu lateral em marinho, como um estandarte ── */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 16px; padding: 20px 14px 16px;
  background: var(--side); color: var(--side-fg); overflow-y: auto; box-shadow: 1px 0 0 rgba(201, 162, 39, 0.25); }
.brand { display: flex; align-items: center; gap: 12px; padding: 2px 4px 16px; color: #fff; border-bottom: 1px solid rgba(201, 162, 39, 0.28); }
.brand:hover { text-decoration: none; }
.brand strong { display: block; font: 700 18px/1.1 var(--display); letter-spacing: 0.04em; color: #fff; }
.brand small { display: block; font: italic 500 15px/1.2 var(--serif); color: var(--gold-2); margin-top: 3px; text-wrap: balance; }
/* logo: no menu, no topo do celular e na faixa do Início fica sempre num medalhão branco com aro dourado */
.logo { display: block; flex: none; height: auto; }
.logo-menu, .logo-topo, .logo-hero { background: #fff; box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.7), 0 6px 16px rgba(0, 0, 0, 0.28); }
.logo-menu { width: 66px; border-radius: 14px; padding: 4px 5px; }
.logo-topo { width: 44px; border-radius: 10px; padding: 2px 3px; }
.logo-login { width: 150px; margin: 0 auto; }
@media (prefers-color-scheme: dark) { .logo-login { background: #fff; border-radius: 22px; padding: 10px 12px; box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.6); } }
.topo-cel { display: none; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--side-fg); font-weight: 500; transition: background 0.15s, color 0.15s; }
.side nav a .ic { color: rgba(230, 200, 104, 0.8); }
.side nav a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; text-decoration: none; }
.side nav a.on { background: linear-gradient(90deg, rgba(201, 162, 39, 0.24), rgba(201, 162, 39, 0.06)); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--gold); }
.side nav a.on .ic { color: var(--gold-2); }
.folha a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--fg-2); font-weight: 500; }
.folha a:hover { background: var(--fill); text-decoration: none; }
.folha a.on { background: var(--gold-soft); color: var(--fg); font-weight: 600; box-shadow: inset 3px 0 0 var(--gold); }
.folha a .ic { color: var(--gold-ink); }
.ic { width: 19px; height: 19px; flex: none; }
.ic.sm { width: 15px; height: 15px; }
.badge { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1b1505; font: 700 11.5px/20px var(--font); text-align: center; font-style: normal; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 7px; padding: 14px 8px 0; font-size: 13px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.side-foot a { display: flex; align-items: center; gap: 8px; color: var(--side-muted); }
.side-foot a:hover, .side-foot a.on { color: #fff; text-decoration: none; }
.side-foot .ic { color: rgba(230, 200, 104, 0.75); }
.quem { padding-bottom: 4px; }
.quem b { display: block; font-size: 13.5px; color: #fff; }
.quem small { color: var(--gold-2); font: italic 500 14px var(--serif); }
button.link { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; cursor: pointer; box-shadow: none; }
button.link:hover { color: var(--bad); text-decoration: underline; filter: none; }
.side-foot button.link { color: var(--side-muted); }
.side-foot button.link:hover { color: #ffb4ab; }
.content { padding: 26px 40px 80px; max-width: 1300px; width: 100%; }
.topline { color: var(--muted); font-size: 12.5px; letter-spacing: 0.02em; margin-bottom: 2px; }
.topline::first-letter { text-transform: uppercase; }
.aviso { margin: 10px 0 18px; padding: 12px 16px; border-radius: 12px; background: var(--gold-soft); border: 1px solid rgba(201, 162, 39, 0.35); border-left: 4px solid var(--gold); max-width: 900px; }
.titulo-acoes { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.titulo-acoes h1 { margin-bottom: 12px; }
a.botao, button { display: inline-block; padding: 9px 16px; border-radius: 10px; border: 0; color: #fff; font: 600 14px/1.3 var(--font); cursor: pointer;
  background: linear-gradient(180deg, #284d78, #1b3557); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 6px rgba(20, 40, 70, 0.22); transition: filter 0.15s, transform 0.15s; }
@media (prefers-color-scheme: dark) { a.botao, button { background: linear-gradient(180deg, #3463a0, #24477a); } }
a.botao:hover, button:hover { filter: brightness(1.1); text-decoration: none; }
a.botao:active, button:active { transform: translateY(1px); }
button.secundario { background: var(--card); color: var(--navy); box-shadow: inset 0 0 0 1px var(--line-2); }
@media (prefers-color-scheme: dark) { button.secundario { background: var(--fill); color: var(--fg); } }

/* ── faixa de abertura do Início: brasão, gestão e o pavimento mosaico ── */
.hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin: 8px 0 20px; padding: 30px 34px 62px; border-radius: 22px; color: #fff; box-shadow: var(--shadow-lg);
  background: radial-gradient(700px 280px at 88% -20%, rgba(230, 200, 104, 0.28), transparent 62%), var(--brasao);
  border: 1px solid rgba(201, 162, 39, 0.35); }
.hero-txt { position: relative; z-index: 1; min-width: 0; }
.hero-loja { margin: 0; font: italic 500 18px/1.3 var(--serif); color: var(--gold-2); }
.hero h1 { color: #fff; font-size: 36px; margin: 6px 0 8px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); }
.hero h1::after { width: 90px; background: linear-gradient(90deg, var(--gold-2), transparent); }
.hero-vm { margin: 0; font-size: 15.5px; color: rgba(255, 255, 255, 0.88); }
.hero-tema { margin: 8px 0 0; font: 600 12.5px/1.4 var(--display); letter-spacing: 0.2em; color: var(--gold-2); }
.logo-hero { position: relative; z-index: 1; width: 156px; border-radius: 26px; padding: 10px 12px; }
.pavimento { position: absolute; left: -15%; right: -15%; bottom: -30px; height: 130px; pointer-events: none;
  background: conic-gradient(rgba(255, 255, 255, 0.16) 25%, transparent 0 50%, rgba(255, 255, 255, 0.16) 0 75%, transparent 0) 0 0 / 36px 36px;
  transform: perspective(260px) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 95%); mask-image: linear-gradient(to top, #000 15%, transparent 95%); }

/* ── cartões e painéis ── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 6px 0 18px; }
.card { position: relative; display: block; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius);
  padding: 16px 18px 15px; box-shadow: var(--shadow); color: var(--fg); transition: transform 0.15s, box-shadow 0.15s; }
.card:hover { text-decoration: none; }
/* realces de "passar o mouse" só onde há mouse: no toque (iPhone) o estado fica preso depois do toque */
@media (hover: hover) {
  .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
  .linha:hover { background: var(--gold-soft); }
  .tabela tbody tr:hover > td { background: rgba(201, 162, 39, 0.05); }
}
.card .card-ic { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; padding: 8px; border-radius: 11px; background: var(--navy-soft); color: var(--navy); }
@media (prefers-color-scheme: dark) { .card .card-ic { background: var(--gold-soft); color: var(--gold-2); } }
.card span { display: block; color: var(--muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; padding-right: 42px; }
.card b { display: block; font: 700 27px/1.2 var(--display); color: var(--navy); margin: 6px 0 3px; }
@media (prefers-color-scheme: dark) { .card b { color: var(--fg); } }
.card small { color: var(--muted); text-wrap: balance; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.painel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; margin: 0 0 16px; box-shadow: var(--shadow); }
.painel.destaque { border-color: var(--gold); }
.painel.foco { box-shadow: 0 0 0 3px var(--gold-soft), var(--shadow); }
.painel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: -2px 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.painel h2 { margin: 0; font-size: 14.5px; }
.painel h2::before { content: "∴"; margin-right: 8px; color: var(--gold); font-family: var(--font); }
.painel-head a { font-size: 13px; }

.lista { display: flex; flex-direction: column; }
.linha { display: grid; grid-template-columns: 104px auto minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 10px 6px; border-top: 1px solid var(--line); color: var(--fg); border-radius: 8px; }
.lista .linha:first-child { border-top: 0; }
.linha:hover { text-decoration: none; }
.linha .quando { font: 600 13.5px/1.3 var(--display); color: var(--navy); white-space: nowrap; }
@media (prefers-color-scheme: dark) { .linha .quando { color: var(--gold-2); } }
.linha .titulo { min-width: 0; }
.apagada { opacity: 0.55; }

ul.alertas, ul.simples, ul.reqs { list-style: none; margin: 0; padding: 0; }
ul.alertas li { padding: 9px 0 9px 18px; border-top: 1px solid var(--line); position: relative; }
ul.alertas li:first-child { border-top: 0; }
ul.alertas li::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 3px var(--fill); }
ul.alertas li.alto::before { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
ul.alertas li.medio::before { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
ul.alertas li.info::before { background: var(--navy); box-shadow: 0 0 0 3px var(--navy-soft); }
/* Atenção na instrução (28/10/2026): só o grau aberto; avisos iguais da turma num só, com os nomes em pílulas */
details.atencao > summary .nivel-aviso { margin-left: 4px; vertical-align: 1px; }
.nivel-aviso { display: inline-block; padding: 1px 9px; border-radius: 999px; font: 700 10.5px/1.7 var(--font); letter-spacing: 0.05em;
  text-transform: uppercase; font-style: normal; white-space: nowrap; }
.nivel-aviso.alto { background: var(--bad-soft); color: var(--bad); }
.nivel-aviso.medio { background: var(--gold-soft); color: var(--gold-ink); }
.nivel-aviso.info { background: var(--navy-soft); color: var(--navy); }
ul.avisos { list-style: none; margin: 0; padding: 2px 16px 8px; }
.aviso-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.aviso-item:first-child { border-top: 0; }
.aviso-item > .nivel-aviso { justify-self: start; margin-top: 1px; }
.aviso-item > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aviso-tit { font-weight: 600; color: var(--fg); line-height: 1.35; }
.aviso-quem { display: flex; flex-wrap: wrap; gap: 6px; }
.aviso-quem a { padding: 2px 10px; border-radius: 999px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; font-weight: 600; }
.aviso-quem a:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--gold); }
.aviso-item small { line-height: 1.4; }
.atencao-ok { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.atencao-ok::before { content: "✓"; margin-right: 8px; color: var(--ok); font-weight: 700; }
.ponto-urgente { display: inline-block; min-width: 18px; margin-left: 2px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: var(--card);
  font: 700 10.5px/18px var(--font); font-style: normal; text-align: center; vertical-align: 1px; }
@media (max-width: 820px) {
  .seg a small { display: none; }   /* no celular a aba fica com o nome e o número vermelho dos urgentes */
  ul.avisos { padding: 0 12px 6px; }
  .aviso-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
ul.simples li { padding: 7px 0; border-top: 1px solid var(--line); }
ul.simples li:first-child { border-top: 0; }

/* ── selos de grau e etiquetas ── */
.grau { display: inline-block; min-width: 52px; padding: 1px 8px; border-radius: 999px; font: 600 11.5px/1.65 var(--font); text-align: center; background: var(--fill); color: var(--muted); white-space: nowrap; }
.g-AM { background: #e6edf7; color: #2d4a73; box-shadow: inset 0 0 0 1px rgba(45, 74, 115, 0.15); }
.g-CM { background: #e3f1e8; color: #1f6b40; box-shadow: inset 0 0 0 1px rgba(31, 107, 64, 0.15); }
.g-MM { background: linear-gradient(180deg, #24466f, #1a3456); color: #f3e3a8; }
.g-MI { background: linear-gradient(180deg, #e6c868, #c9a227); color: #1b1505; }
@media (prefers-color-scheme: dark) { .g-AM { background: #22344d; color: #b9cde9; box-shadow: none; } }
@media (prefers-color-scheme: dark) { .g-CM { background: #1d3a2b; color: #9fdcb7; box-shadow: none; } }
@media (prefers-color-scheme: dark) { .g-MM { background: linear-gradient(180deg, #3463a0, #24477a); color: #f3e6bb; } }
.tag { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--fill); color: var(--fg-2); font: 500 11.5px/1.75 var(--font); font-style: normal; white-space: nowrap; }
.tag.alerta { background: var(--warn-soft); color: var(--warn); }
a.tag:hover { text-decoration: none; filter: brightness(0.97); }

/* ── tabelas ── */
.tabela { overflow-x: auto; margin: 0 0 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
thead th { border-top: 0; border-bottom: 1px solid rgba(201, 162, 39, 0.35); background: var(--fill); color: var(--navy); font: 700 11px/1.4 var(--display); letter-spacing: 0.09em; white-space: nowrap; }
@media (prefers-color-scheme: dark) { thead th { color: var(--gold-2); } }
tbody tr { transition: background 0.12s; }
.painel table th, .painel table td { padding: 8px 6px; }
td.num, th.num { text-align: right; }
td.sel { width: 28px; }
tr.diverge td { background: var(--warn-soft); }
td.prog { white-space: nowrap; }
td.prog small { margin-left: 6px; color: var(--muted); font-variant-numeric: tabular-nums; }
progress { width: 116px; height: 8px; vertical-align: middle; border: 0; border-radius: 4px; background: var(--track); overflow: hidden; -webkit-appearance: none; appearance: none; }
progress::-webkit-progress-bar { background: var(--track); border-radius: 4px; }
progress::-webkit-progress-value { background: linear-gradient(90deg, var(--gold), var(--gold-2)); border-radius: 4px; }
progress::-moz-progress-bar { background: linear-gradient(90deg, var(--gold), var(--gold-2)); border-radius: 4px; }
table.matriz td.ok { color: var(--ok); font-weight: 600; }
table.matriz td.curso { color: var(--gold-ink); font-weight: 600; }
table.matriz td.vazio { color: var(--muted); }
table.matriz td small { display: block; font-weight: 400; }
.sit { display: inline-block; padding: 0 9px; border-radius: 999px; font: 600 12px/1.75 var(--font); }
.sit.apto { background: var(--ok-soft); color: var(--ok); }
.sit.completa { background: var(--gold-soft); color: var(--gold-ink); }
.sit.falta { background: var(--fill); color: var(--muted); }

/* ── abas de grau ── */
.seg { display: inline-flex; gap: 3px; padding: 4px; border-radius: 12px; background: var(--fill); margin: 0 0 16px; flex-wrap: wrap; box-shadow: inset 0 0 0 1px var(--line); }
.seg a { padding: 7px 16px; border-radius: 9px; color: var(--fg-2); font-weight: 500; font-size: 14px; }
.seg a small { color: var(--muted); }
.seg a.on { background: var(--card); color: var(--navy); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 -2px 0 var(--gold); }
@media (prefers-color-scheme: dark) { .seg a.on { color: var(--fg); } }
.seg a:hover { text-decoration: none; }

/* ── formulários ── */
details.registrar, details.programa, details.ano { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 12px; box-shadow: var(--shadow); }
details.registrar { border-left: 3px solid var(--gold); }
details > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; list-style-position: inside; }
details > summary::marker { color: var(--gold); }
details.registrar > summary { color: var(--navy); }
details[open] > summary { border-bottom: 1px solid var(--line); }
details.ano .lista, details.programa ol { padding: 4px 12px 8px; }
form.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 16px; padding: 16px 18px; align-items: end; }
form.grade .largo, form.bloco .largo { grid-column: 1 / -1; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--fg-2); letter-spacing: 0.01em; }
label.check { flex-direction: row; align-items: flex-start; gap: 8px; font-weight: 400; color: var(--fg); font-size: 14px; letter-spacing: 0; }
label.check input { margin: 1px 0 0; }
input, select, textarea { font: 15px/1.35 var(--font); color: var(--fg); background: var(--card); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 11px; width: 100%; min-width: 0;
  transition: border-color 0.15s, box-shadow 0.15s; }
@media (prefers-color-scheme: dark) { input, select, textarea { background: var(--bg); } }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select { min-height: 42px; }
input[type="checkbox"] { width: 18px; height: 18px; flex: none; accent-color: var(--navy); }
textarea { resize: vertical; font-size: 14px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 14px; }
legend { font: 700 11.5px var(--display); letter-spacing: 0.08em; color: var(--navy); padding: 0 6px; }
@media (prefers-color-scheme: dark) { legend { color: var(--gold-2); } }
form.bloco { display: grid; gap: 12px; margin: 0 0 12px; }
form.bloco > button { justify-self: start; }
/* formulário solto na página (editar sessão, novo irmão, usuários, segurança): mesmo cartão dos <details> */
.content > form.grade { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 12px; }
form.inline { display: inline; margin-left: 8px; }
.linha-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.linha-form select { width: auto; min-height: 34px; padding: 5px 8px; font-size: 14px; }
.linha-form button { padding: 6px 12px; font-size: 13px; min-height: 34px; }
form.grade button { min-height: 42px; }

/* ── ficha do irmão: etapas e requisitos ── */
ol.etapas { list-style: none; margin: 0; }
ol.etapas li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); align-items: baseline; color: var(--muted); }
ol.etapas li:first-child { border-top: 0; }
ol.etapas li.feita { color: var(--fg); }
ol.etapas li.proxima { color: var(--fg); font-weight: 600; }
ol.etapas li.proxima .n { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1b1505; }
ol.etapas .n { display: inline-grid; place-items: center; width: 28px; height: 23px; border-radius: 7px; background: var(--fill); font-size: 12px; font-weight: 600; }
ol.etapas li.feita .n { background: var(--navy-soft); color: var(--navy); }
ol.etapas .e small { display: block; font-weight: 400; }
ul.reqs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
ul.reqs li { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--line-2); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); }
ul.reqs li.ok { border-top-color: var(--ok); }
ul.reqs li.curso { border-top-color: var(--gold); }
ul.reqs li b { display: block; font: 700 11px var(--display); letter-spacing: 0.08em; color: var(--muted); }
ul.reqs li span { font: 700 20px/1.3 var(--display); }
ul.reqs li small { display: block; }
ul.reqs li.ok span { color: var(--ok); }
ul.reqs li.curso span { color: var(--gold-ink); }
ul.reqs li.falta span { color: var(--muted); }

/* ── pendências ── */
.pends { display: grid; gap: 12px; }
article.pend { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 14px; padding: 13px 16px; box-shadow: var(--shadow); }
article.pend.aguardando { border-left-color: var(--navy); }
article.pend.concluida { border-left-color: var(--ok); opacity: 0.75; }
article.pend header b { font-weight: 600; }
article.pend p { margin: 6px 0 0; }
article.pend .meta { color: var(--muted); font-size: 12.5px; }
article.pend details { margin-top: 6px; }
article.pend details > summary { padding: 4px 0; font-weight: 500; color: var(--navy); font-size: 13px; }
article.pend form.grade { padding: 10px 0 0; }
:target { scroll-margin-top: 16px; }
article.pend:target { box-shadow: 0 0 0 3px var(--gold-soft), var(--shadow); }

/* ── convocação (ficha da sessão): o texto cresce até caber, onde o navegador suporta ── */
.convocacao textarea { field-sizing: content; max-height: 75vh; }
.convocacao .linha-form { margin: 0 0 12px; }

/* ── login: noite azul, pavimento mosaico ao fundo e o cartão ao centro ── */
body.tela-login { position: relative; overflow-x: hidden; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(900px 520px at 50% -12%, rgba(230, 200, 104, 0.24), transparent 62%), var(--brasao); }
.tela-login .pavimento { position: fixed; bottom: -60px; height: 46vh; left: -25%; right: -25%; background-size: 64px 64px; transform: perspective(420px) rotateX(62deg); }
.login-box { position: relative; z-index: 1; width: 100%; max-width: 380px; text-align: center; background: var(--card); border-radius: 24px; padding: 26px 26px 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(201, 162, 39, 0.4); }
.login-box h1 { margin: 14px 0 0; font-size: 27px; }
.login-box h1::after { display: none; }
.lema { margin: 2px 0 0; font: italic 500 20px/1.25 var(--serif); color: var(--gold-ink); }
.orn { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 0; color: var(--gold); }
.orn::before, .orn::after { content: ""; width: 64px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.orn::after { background: linear-gradient(90deg, var(--gold), transparent); }
.form-login { display: grid; gap: 10px; margin: 18px 0 12px; text-align: left; }
.form-login input { background: var(--fill); min-height: 46px; }
.form-login button { min-height: 46px; font-size: 15px; }
.erro-login { margin-top: 14px; padding: 9px 12px; border-radius: 10px; background: var(--bad-soft); color: var(--bad); }
.ok-login { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); text-align: left; }
.esqueci { margin: 6px 0 10px; font-size: 14px; }
.esqueci a { color: var(--gold-ink); }
.pequeno { font-size: 12px; }
.login-box > p.muted { margin: 6px 0 0; }

/* ── celular: barra de abas embaixo ── */
.tabbar { display: none; }
@media (max-width: 960px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) {
  /* barra do app no celular: marinho, presa no topo e por baixo do relógio (status bar translúcida no atalho do iPhone) */
  .topo-cel { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 9; color: #fff; background: var(--side);
    margin: -14px calc(-1 * max(16px, env(safe-area-inset-right))) 14px calc(-1 * max(16px, env(safe-area-inset-left)));
    padding: calc(10px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 11px max(16px, env(safe-area-inset-left));
    box-shadow: 0 1px 0 rgba(201, 162, 39, 0.45), 0 6px 18px rgba(0, 0, 0, 0.16); }
  .topo-cel:hover { text-decoration: none; }
  .topo-cel strong { display: block; font: 700 17px/1.1 var(--display); letter-spacing: 0.04em; color: #fff; }
  .topo-cel small { display: block; font: italic 500 15px/1.2 var(--serif); color: var(--gold-2); margin-top: 1px; }
  .topline { font-size: 13px; }
  h1 { font-size: 25px; }
  h1::after { margin-top: 8px; }
  .hero { padding: 22px 20px 54px; margin-top: 2px; border-radius: 20px; }
  .hero h1 { font-size: 27px; }
  .hero-loja { font-size: 16px; }
  .hero-vm { font-size: 15px; }
  .hero-tema { font-size: 11.5px; letter-spacing: 0.16em; }
  .logo-hero { width: 104px; border-radius: 20px; padding: 7px 8px; align-self: flex-start; }
  .card .card-ic { width: 30px; height: 30px; padding: 6px; top: 12px; right: 12px; border-radius: 9px; }
  .card span { padding-right: 34px; font-size: 11px; }
  .painel h2 { font-size: 14px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  /* 16px nas laterais (mais, se houver recorte da tela) e espaço para a barra de abas + área segura embaixo */
  .content { padding: 14px max(16px, env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  /* campos com 16px: abaixo disso o iPhone dá zoom ao tocar; 44px de altura para o dedo */
  input, select, textarea { font-size: 16px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, button { min-height: 44px; }
  button.link { min-height: 0; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { padding: 12px 14px; }
  .card b { font-size: 23px; }
  /* agenda: data e grau na mesma linha, título com a largura toda embaixo */
  .linha { grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; padding: 10px 4px; }
  .linha .grau { justify-self: start; }
  .linha .titulo, .linha > small { grid-column: 1 / -1; }
  /* abas de grau numa linha só */
  .seg { display: flex; flex-wrap: nowrap; width: 100%; }
  .seg a { flex: 1 1 auto; min-width: 0; padding: 8px 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; justify-content: space-around; gap: 2px;
    padding: 6px max(4px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    border-top: 1px solid var(--line-2); box-shadow: 0 -4px 18px rgba(20, 30, 50, 0.06); }
  /* o desfoque fica num ::before: backdrop-filter na própria barra prende os position: fixed de dentro (o véu e a folha do
     "Mais") à barra em vez da tela — era o "Mais" estourado, sem escurecer o fundo (Gui, 28/10/2026) */
  .tabbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--card) 94%, transparent);
    -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); }
  .tabbar > a.on::before, .tabbar summary.on::after { content: ""; position: absolute; top: -6px; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
  .tabbar > a, .tabbar summary { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 46px; padding: 0 2px; border-radius: 8px;
    color: var(--muted); font-size: 10.5px; font-weight: 500; list-style: none; cursor: pointer; position: relative; }
  .tabbar summary::-webkit-details-marker { display: none; }
  .tabbar > a.on, .tabbar summary.on, details.mais[open] > summary { color: var(--navy); font-weight: 600; }
  .tabbar .ic { width: 22px; height: 22px; }
  .tabbar > a.on .ic, .tabbar summary.on .ic { stroke-width: 2; }
  .tabbar > a:hover { text-decoration: none; }
  .tabbar .badge { position: absolute; top: 0; left: calc(50% + 5px); right: auto; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
  details.mais { flex: 1; display: flex; }
  details.mais summary { width: 100%; border: 0; }
  /* véu atrás da folha "Mais": escurece a tela e, por ser parte do <summary>, tocar fora fecha a folha (sem JavaScript) */
  details.mais[open] > summary::before { content: ""; position: fixed; left: 0; right: 0; top: 0; bottom: calc(58px + env(safe-area-inset-bottom));
    background: var(--scrim); cursor: default; }
  /* folha do "Mais" (28/10/2026): grade de 3 por linha, por grupo, para caber na tela; a altura é a visível (dvh: sem a barra do
     Safari) e, se ainda faltar espaço (iPhone pequeno), a folha rola por dentro sem rolar a página atrás */
  .folha { position: fixed; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: calc(66px + env(safe-area-inset-bottom));
    max-height: calc(100vh - 84px - env(safe-area-inset-bottom)); max-height: calc(100dvh - 84px - env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 4px;
    padding: 8px; background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--shadow); }
  .folha form { display: contents; }
  .folha a, .folha button.link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
    min-height: 68px; padding: 11px 4px 8px; border-radius: 12px; text-align: center; color: var(--fg-2); font-size: 12.5px; line-height: 1.2; font-weight: 500; }
  .folha a .ic, .folha button.link .ic { width: 22px; height: 22px; color: var(--gold-ink); }
  .folha a.on { background: var(--gold-soft); color: var(--fg); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--gold); }
  .folha button.link { width: 100%; }
  .folha button.link:hover { color: var(--bad); text-decoration: none; background: var(--fill); }
  .folha button.link:hover .ic { color: var(--bad); }
  .folha .badge { position: absolute; top: 5px; left: calc(50% + 6px); margin: 0; min-width: 18px; padding: 0 5px; font-size: 10.5px; line-height: 18px; }
  .painel { padding: 12px 12px; }
  details > summary { padding: 12px 14px; }
  form.grade { padding: 12px 14px; }
  form.bloco > button { justify-self: stretch; }
  .linha-form select { width: 100%; font-size: 16px; }
  .linha-form select, .linha-form button, form.grade button { min-height: 44px; }
  form.grade .largo > small { display: block; margin-top: 8px; }
  ul.reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* tabelas largas rolam dentro do próprio quadro; a 1ª coluna (o nome) fica parada */
  .tabela th:first-child, .tabela td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); box-shadow: 1px 0 0 var(--line); }
  .tabela thead th:first-child { background: var(--fill); }
  .tabela tr.diverge td:first-child { background: linear-gradient(var(--warn-soft), var(--warn-soft)), var(--card); }
}

@media (max-width: 560px) { .logo-hero { display: none; } .hero { padding-bottom: 50px; } }
@media (max-width: 359px) { .seg a { padding: 8px 3px; font-size: 13px; } }

/* ── celular estreito: tabelas viram fichas (uma por linha), sem rolagem lateral ── */
@media (max-width: 640px) {
  .tabela table.quadro, .tabela table.irmaos, .tabela table.grads, .tabela table.nominata, .tabela table.comissoes, .tabela table.matriz, .tabela table.usuarios, .tabela table.cargos, .tabela table.acessos,
  .tabela table.quadro tbody, .tabela table.irmaos tbody, .tabela table.grads tbody, .tabela table.nominata tbody, .tabela table.comissoes tbody,
  .tabela table.matriz tbody, .tabela table.usuarios tbody, .tabela table.cargos tbody, .tabela table.acessos tbody,
  .painel > table, .painel > table tbody { display: block; }
  .tabela table.quadro thead, .tabela table.irmaos thead, .tabela table.grads thead, .tabela table.nominata thead, .tabela table.comissoes thead,
  .tabela table.matriz thead, .tabela table.usuarios thead, .tabela table.cargos thead, .tabela table.acessos thead { display: none; }
  .tabela table.quadro tr, .tabela table.irmaos tr, .tabela table.grads tr, .tabela table.nominata tr, .tabela table.comissoes tr,
  .tabela table.matriz tr, .tabela table.usuarios tr, .tabela table.cargos tr, .tabela table.acessos tr,
  .painel > table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 14px; border-top: 1px solid var(--line); }
  .tabela table.quadro tbody tr:first-child, .tabela table.irmaos tbody tr:first-child, .tabela table.grads tbody tr:first-child, .tabela table.nominata tbody tr:first-child,
  .tabela table.comissoes tbody tr:first-child, .tabela table.matriz tbody tr:first-child, .tabela table.usuarios tbody tr:first-child,
  .tabela table.cargos tbody tr:first-child, .tabela table.acessos tbody tr:first-child { border-top: 0; }
  .tabela table.quadro td, .tabela table.irmaos td, .tabela table.grads td, .tabela table.nominata td, .tabela table.comissoes td,
  .tabela table.matriz td, .tabela table.usuarios td, .tabela table.cargos td, .tabela table.acessos td,
  .painel > table td { display: block; padding: 0; border: 0; min-width: 0; position: static; background: none; }
  .tabela tr.diverge { background: var(--warn-soft); }
  .tabela tr.diverge td { background: none; }

  /* Rótulos no lugar do cabeçalho escondido: dependem da ordem das colunas no .ts indicado. */
  /* Instrução (src/telas/instrucao.ts): Irmão | Progresso | Última | Próxima | Interstício | MVU */
  .tabela table.quadro td:nth-child(1) { grid-column: 1; grid-row: 1; font-size: 16px; }
  .tabela table.quadro td:nth-child(6) { grid-column: 2; grid-row: 1; text-align: right; }
  .tabela table.quadro td:nth-child(n+2):nth-child(-n+5) { grid-column: 1 / -1; }
  .tabela table.quadro td.prog { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; }
  .tabela table.quadro td.prog progress { flex: 1; width: auto; }
  .tabela table.quadro td:nth-child(3), .tabela table.quadro td:nth-child(4), .tabela table.quadro td:nth-child(5) { position: relative; padding-left: 92px; }
  .tabela table.quadro td:nth-child(3)::before, .tabela table.quadro td:nth-child(4)::before, .tabela table.quadro td:nth-child(5)::before {
    position: absolute; left: 0; top: 2px; width: 86px; color: var(--muted); font: 600 11px/1.5 var(--font); text-transform: uppercase; letter-spacing: 0.03em; }
  .tabela table.quadro td:nth-child(3)::before { content: "Última"; }
  .tabela table.quadro td:nth-child(4)::before { content: "Próxima"; }
  .tabela table.quadro td:nth-child(5)::before { content: "Interstício"; }
  .tabela table.quadro td:nth-child(5) br { display: none; }
  .tabela table.quadro td:nth-child(5) small { margin-left: 6px; }
  .tabela table.quadro td:nth-child(5):has(> span.muted:only-child) { display: none; }
  .tabela table.quadro td:nth-child(6) .tag::before { content: "a lançar: "; }

  /* Irmãos (src/telas/irmaos.ts): Irmão | CIM | Grau | Iniciação | Na Ordem há | Cargo | Loja de iniciação.
     Flex com quebra: nome e grau na 1ª linha; CIM · iniciação · tempo na 2ª (quebra sozinha se não couber); cargo; loja. */
  .tabela table.irmaos tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; }
  .tabela table.irmaos tr::before { content: ""; order: 3; flex-basis: 100%; height: 0; }
  .tabela table.irmaos td:nth-child(1) { order: 1; flex: 1 1 0; padding-right: 10px; }
  .tabela table.irmaos td:nth-child(3) { order: 2; flex: none; max-width: 130px; text-align: right; align-self: flex-start; }
  .tabela table.irmaos td:nth-child(3) .tag { margin-top: 4px; }
  .tabela table.irmaos td:nth-child(2), .tabela table.irmaos td:nth-child(4), .tabela table.irmaos td:nth-child(5) { flex: none; color: var(--muted); font-size: 13.5px; white-space: nowrap; }
  .tabela table.irmaos td:nth-child(2) { order: 4; }
  .tabela table.irmaos td:nth-child(2)::before { content: "CIM "; }
  .tabela table.irmaos td:nth-child(4) { order: 5; }
  .tabela table.irmaos td:nth-child(4)::before { content: "\a0· iniciado\a0"; }
  .tabela table.irmaos td:nth-child(5) { order: 6; }
  .tabela table.irmaos td:nth-child(5)::before { content: "\a0· "; }
  .tabela table.irmaos td:nth-child(6), .tabela table.irmaos td:nth-child(7) { flex: 1 0 100%; font-size: 14px; }
  .tabela table.irmaos td:nth-child(6) { order: 7; margin-top: 3px; }
  .tabela table.irmaos td:nth-child(6):has(> span.muted:only-child) { display: none; }
  .tabela table.irmaos td:nth-child(7) { order: 8; color: var(--muted); }
  .tabela table.irmaos td:nth-child(8) { order: 6; flex: none; color: var(--muted); font-size: 13.5px; white-space: nowrap; }
  .tabela table.irmaos td:nth-child(8)::before { content: "\a0· presença\a0"; }
  .tabela table.irmaos td:nth-child(8):has(> span.muted:only-child) { display: none; }

  /* Ficha do irmão, graduações (src/telas/irmaos.ts): Grau | Data | Loja | Potência | MVU */
  .tabela table.grads td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .tabela table.grads td:nth-child(5) { grid-column: 2; grid-row: 1; text-align: right; }
  .tabela table.grads td:nth-child(n+2):nth-child(-n+4) { grid-column: 1 / -1; font-size: 14px; }
  .tabela table.grads td:nth-child(2) { font-weight: 600; }
  .tabela table.grads td:nth-child(4) { color: var(--muted); }

  /* Ficha do irmão, cargos (src/telas/irmaos.ts): Período | Cargo | Loja */
  .tabela table.cargos tr { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tabela table.cargos td:nth-child(2) { grid-row: 1; font-weight: 600; }
  .tabela table.cargos td:nth-child(1) { grid-row: 2; font-size: 14px; }
  .tabela table.cargos td:nth-child(3) { grid-row: 3; color: var(--muted); }

  /* Cargos (src/telas/cargos.ts): Cargo | Titular | Adjunto | Registro no MVU — e Comissão | Membros | Registro */
  .tabela table.nominata td:nth-child(1), .tabela table.comissoes td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 600; }
  .tabela table.nominata td:nth-child(4), .tabela table.comissoes td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }
  .tabela table.nominata td:nth-child(2), .tabela table.nominata td:nth-child(3), .tabela table.comissoes td:nth-child(2) { grid-column: 1 / -1; }
  .tabela table.nominata td:nth-child(3)::before { content: "adjunto: "; color: var(--muted); }
  .tabela table.nominata td:nth-child(3):has(> span.muted:only-child) { display: none; }

  /* Venerabilidade (src/telas/cargos.ts): Irmão | Vigilante | Orador | Secretário | Mestre de Cerimônias | Situação */
  .tabela table.matriz tr { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; }
  .tabela table.matriz td:nth-child(1) { grid-column: 1 / -1; }
  .tabela table.matriz td:nth-child(n+2):nth-child(-n+5)::before { display: block; color: var(--muted); font: 600 10.5px/1.4 var(--font); text-transform: uppercase; letter-spacing: 0.03em; }
  .tabela table.matriz td:nth-child(2)::before { content: "Vigilante"; }
  .tabela table.matriz td:nth-child(3)::before { content: "Orador"; }
  .tabela table.matriz td:nth-child(4)::before { content: "Secretário"; }
  .tabela table.matriz td:nth-child(5)::before { content: "M. Cerim."; }
  .tabela table.matriz td:nth-child(6) { grid-column: 1 / -1; }

  /* Usuários (src/telas/conta.ts): Usuário | Perfil | Último acesso | ações */
  .tabela table.usuarios td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .tabela table.usuarios td:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; }
  .tabela table.usuarios td:nth-child(3), .tabela table.usuarios td:nth-child(4) { grid-column: 1 / -1; font-size: 14px; }
  .tabela table.usuarios td:nth-child(3)::before { content: "último acesso: "; }
  .tabela table.usuarios td:nth-child(4) { margin-top: 6px; }

  /* Segurança (src/telas/conta.ts): Quando | [Usuário, só admin] | Evento | IP | Navegador — contado do fim por causa da coluna opcional */
  .tabela table.acessos tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; }
  .tabela table.acessos tr::before { content: ""; order: 3; flex-basis: 100%; height: 0; }
  .tabela table.acessos td:first-child { order: 1; flex: 1 1 0; font-weight: 600; font-variant-numeric: tabular-nums; }
  .tabela table.acessos td:nth-last-child(3) { order: 2; flex: none; text-align: right; padding-left: 10px; }
  .tabela table.acessos td:nth-child(2):nth-last-child(4) { order: 4; }
  .tabela table.acessos td:nth-child(2):nth-last-child(4)::after { content: "\a0·\a0"; color: var(--muted); }
  .tabela table.acessos td:nth-last-child(2) { order: 5; }
  .tabela table.acessos td:last-child { order: 6; flex: 1 0 100%; line-height: 1.35; margin-top: 2px; }

  /* Lançar no MVU (src/telas/instrucao.ts): [marcar] | Irmão | Etapa | aviso — a caixa ocupa a altura da ficha */
  .painel > table tr { grid-template-columns: auto minmax(0, 1fr); column-gap: 0; padding: 10px 2px; }
  .painel > table tbody tr:first-child { border-top: 0; }
  .painel > table td.sel { grid-column: 1; grid-row: 1 / span 3; width: auto; padding: 1px 12px 0 0; }
  .painel > table td:not(.sel) { grid-column: 2; }
}

/* ── cargos: edição da nominata ── */
td.obs small { display: block; }
table.edita td { vertical-align: middle; }
table.edita select { min-width: 190px; }
table.edita td small { display: block; margin-top: 3px; }
.membros { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.salvar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 18px; }

/* ── nominata: linha do tempo (agente) ── */
/* src/telas/cargos.ts: uma ficha por gestão (rótulo, Ven∴M∴, estado). Quando não cabe, rola de lado dentro de si;
   direction: rtl só no contêiner faz a rolagem começar no fim (vigente e rascunho à vista), mantendo a ordem cronológica. */
.linha-tempo { margin: 0 0 14px; overflow-x: auto; direction: rtl; }
.linha-tempo ol { list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 6px; direction: ltr; width: max-content; min-width: 100%; }
.linha-tempo li { flex: 1 0 auto; min-width: 120px; display: flex; }
.linha-tempo a { flex: 1; display: flex; flex-direction: column; gap: 1px; padding: 8px 11px 9px; border-radius: 10px; border: 1px solid var(--line);
  border-top: 3px solid var(--line-2); background: var(--card); color: var(--fg-2); font-size: 13px; line-height: 1.3; }
.linha-tempo a:hover { text-decoration: none; border-color: var(--line-2); }
.linha-tempo b { font: 700 13px/1.3 var(--display); letter-spacing: 0.03em; color: var(--navy); }
.linha-tempo small { color: var(--muted); font-size: 12px; }
.linha-tempo li.vigente a { border-top-color: var(--gold); }
.linha-tempo li.vigente small:last-child { color: var(--gold-ink); font-weight: 600; }
.linha-tempo li.rascunho a { border-style: dashed; border-top-style: solid; }
.linha-tempo a.on { background: var(--navy-soft); border-color: var(--navy); border-top-color: var(--navy); }
.linha-tempo li.vigente a.on { border-top-color: var(--gold); }
@media (max-width: 640px) {
  /* registro do MVU (gestão anterior): sem a 4ª coluna, a linha da 1ª coluna fixa sobraria solta na ficha */
  .tabela table.registro td:first-child { box-shadow: none; }
}

/* ── presença, Transferência de Venerabilidade e Documentos (20/10/2026) ── */
b.baixa { color: var(--bad); }
.destaque-num { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 2px 0 8px; }
.destaque-num b { font: 700 30px/1.1 var(--display); color: var(--navy); }
@media (prefers-color-scheme: dark) { .destaque-num b { color: var(--fg); } }
ul.nomes { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
ul.nomes li { padding: 3px 10px; border-radius: 999px; background: var(--fill); font-size: 13.5px; }
.painel h3 { margin: 4px 0 2px; font-size: 13px; }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 16px; align-items: end; }
.grade-campos .largo { grid-column: 1 / -1; }
.progresso { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.progresso progress { width: 180px; }
ul.checklist { list-style: none; margin: 0; padding: 0; }
ul.checklist li { padding: 9px 0; border-top: 1px solid var(--line); }
ul.checklist li:first-child { border-top: 0; }
ul.checklist label.check { align-items: flex-start; }
ul.checklist label.check input { margin-top: 2px; }
ul.checklist small { display: block; margin-top: 2px; font-size: 12.5px; }
ul.checklist small.quem { color: var(--ok); font-weight: 500; }
ul.checklist li.feito > label > span { color: var(--fg-2); }
.acoes-form { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin: 0 0 16px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); }
a.botao.secundario { background: var(--card); color: var(--navy); box-shadow: inset 0 0 0 1px var(--line-2); }
@media (prefers-color-scheme: dark) { a.botao.secundario { background: var(--fill); color: var(--fg); } }
ul.docs { list-style: none; margin: 0; padding: 0; }
ul.docs li { padding: 9px 0; border-top: 1px solid var(--line); }
ul.docs li:first-child { border-top: 0; }
ul.docs li small { display: block; margin-top: 2px; }
input[type="file"] { padding: 8px; border: 1px dashed var(--line-2); border-radius: 10px; background: var(--fill); font-size: 14px; }
.so-estreito { display: none; }
@media (max-width: 820px) {
  .so-largo { display: none; }
  .so-estreito { display: block; }
  .acoes-form { bottom: calc(70px + env(safe-area-inset-bottom)); justify-content: flex-end; padding: 8px; margin-left: auto; width: max-content; background: transparent; border: 0; box-shadow: none; }
  .acoes-form button { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
  .progresso progress { width: 120px; }
}

/* ── tela Presença (21/10/2026): livro de presença irmão × sessão ── */
.aviso-inline { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-size: 14px; }
.aviso-inline a { color: inherit; text-decoration: underline; }
.seg.periodos { flex-wrap: wrap; }
.painel .tabela { box-shadow: none; }
table.livro { border-collapse: collapse; font-size: 13px; }
table.livro th, table.livro td { padding: 6px 7px; border-top: 1px solid var(--line); text-align: center; }
table.livro th:first-child, table.livro td:first-child { text-align: left; position: sticky; left: 0; background: var(--card); z-index: 1; }
table.livro th.sess { font: 600 11.5px/1.2 var(--font); white-space: nowrap; }
table.livro th.sess a { color: var(--fg-2); }
table.livro td.m { width: 34px; min-width: 34px; }
table.livro td.sim { color: var(--ok); font-weight: 700; }
table.livro td.nao { color: var(--bad); background: var(--bad-soft); }
table.livro tfoot td { font-weight: 600; color: var(--fg-2); border-top: 2px solid var(--line-2); }
table.livro tfoot small { color: var(--muted); font-weight: 400; }
table.pres-irmaos td, table.pres-irmaos th { padding: 8px 10px; }
@media (max-width: 820px) {
  .seg.periodos { flex-wrap: nowrap; overflow-x: auto; }
  .seg.periodos a { flex: 0 0 auto; overflow: visible; }
}

/* ── Presença: painel com gráficos (21/10/2026). SVG com medidas em atributos; cores aqui (claro e escuro) ── */
:root { --gr-am: #6f9fd8; --gr-cm: #3f9a6b; --gr-mm: #c9a227; --trilho: #e7e2d6; }
@media (prefers-color-scheme: dark) { :root { --gr-am: #8db6ea; --gr-cm: #63c493; --gr-mm: #e0bd4a; --trilho: #233049; } }
.seg.abas-presenca { margin-top: 2px; }
.aneis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.anel-card { display: flex; align-items: center; gap: 14px; padding: 6px 2px; }
.anel-card b { display: block; font: 700 14px/1.3 var(--display); letter-spacing: 0.03em; color: var(--navy); }
@media (prefers-color-scheme: dark) { .anel-card b { color: var(--fg); } }
.anel-card small { display: block; margin-top: 2px; }
svg.anel { width: 92px; height: 92px; flex: none; transform: rotate(0deg); }
svg.anel .trilho { stroke: var(--trilho); }
svg.anel .arco { stroke: var(--gr-mm); }
svg.anel.gr-AM .arco { stroke: var(--gr-am); }
svg.anel.gr-CM .arco { stroke: var(--gr-cm); }
svg.anel.gr-MM .arco { stroke: var(--gr-mm); }
svg.anel .anel-num { font: 700 8.5px var(--display); fill: var(--fg); }
.legenda { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--muted); }
.legenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: -5px; vertical-align: -1px; }
.legenda i.gr-AM { background: var(--gr-am); } .legenda i.gr-CM { background: var(--gr-cm); } .legenda i.gr-MM { background: var(--gr-mm); }
.legenda i.tracejado { width: 16px; height: 0; border-top: 2px dashed var(--fg-2); border-radius: 0; }
.colunas { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; padding: 4px 2px 2px; }
.colunas .col { flex: 1 0 34px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--fg-2); border-radius: 8px; padding: 2px 0; }
.colunas a.col:hover { background: var(--fill); text-decoration: none; }
.colunas svg { width: 100%; height: 150px; overflow: visible; }
.colunas .c-val { font: 600 11.5px/1 var(--font); color: var(--fg); }
.colunas .c-rot { font: 500 11px/1 var(--font); color: var(--muted); white-space: nowrap; }
.c-barra { fill: var(--navy); }
.c-barra.gr-AM { fill: var(--gr-am); } .c-barra.gr-CM { fill: var(--gr-cm); } .c-barra.gr-MM { fill: var(--gr-mm); }
.colunas line.guia { stroke: var(--line); stroke-width: 1; }
.colunas line.media { stroke: var(--fg-2); stroke-width: 1.5; stroke-dasharray: 4 3; }
ul.barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
ul.barras li { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr) 92px; align-items: center; gap: 10px; font-size: 14px; }
ul.barras .b-rot { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.barras .b-val { white-space: nowrap; }
ul.barras .b-val small { color: var(--muted); }
svg.b-trilho { width: 100%; height: 12px; border-radius: 6px; overflow: hidden; display: block; }
.b-fundo { fill: var(--trilho); }
.b-valor { fill: var(--navy); }
li.f-boa .b-valor { fill: var(--ok); } li.f-media .b-valor { fill: var(--gold); } li.f-baixa .b-valor { fill: var(--bad); }
li.f-baixa .b-val b { color: var(--bad); }
.leg-f { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 3px 0 6px; vertical-align: -1px; }
.leg-f.f-boa { background: var(--ok); } .leg-f.f-media { background: var(--gold); } .leg-f.f-baixa { background: var(--bad); }
table.calor td, table.calor th { text-align: center; padding: 7px 10px; }
table.calor td:first-child, table.calor th:first-child { text-align: left; }
table.calor td b { display: block; font-size: 14px; }
table.calor td small { color: var(--muted); font-size: 11.5px; }
table.calor td.q0 { background: color-mix(in srgb, var(--bad) 16%, transparent); } table.calor td.q0 b { color: var(--bad); }
table.calor td.q1 { background: color-mix(in srgb, var(--gold) 20%, transparent); }
table.calor td.q2 { background: color-mix(in srgb, var(--gold) 9%, transparent); }
table.calor td.q3 { background: color-mix(in srgb, var(--ok) 11%, transparent); }
table.calor td.q4 { background: color-mix(in srgb, var(--ok) 22%, transparent); } table.calor td.q4 b { color: var(--ok); }
table.calor td.q-nd { color: var(--muted); }
.leg-q { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 12px; }
.leg-q.q0 { background: color-mix(in srgb, var(--bad) 16%, transparent); } .leg-q.q1 { background: color-mix(in srgb, var(--gold) 20%, transparent); }
.leg-q.q2 { background: color-mix(in srgb, var(--gold) 9%, transparent); } .leg-q.q3 { background: color-mix(in srgb, var(--ok) 11%, transparent); }
.leg-q.q4 { background: color-mix(in srgb, var(--ok) 22%, transparent); }
table.livro th.sess small { display: block; font-weight: 500; color: var(--muted); font-size: 10px; }
@media (max-width: 820px) {
  .seg.abas-presenca { flex-wrap: nowrap; overflow-x: auto; }
  .seg.abas-presenca a { flex: 0 0 auto; overflow: visible; }
  svg.anel { width: 78px; height: 78px; }
  ul.barras li { grid-template-columns: minmax(78px, 32%) minmax(0, 1fr) 64px; font-size: 13.5px; gap: 8px; }
  ul.barras .b-val small { display: block; font-size: 11px; line-height: 1.2; }
  .colunas svg { height: 130px; }
  table.calor td, table.calor th { padding: 6px 7px; }
  table.calor td:first-child .grau { display: none; }
  table.calor td b { font-size: 13px; }
}
table.calor td:first-child, table.calor th:first-child { position: sticky; left: 0; background: var(--card); z-index: 1; }
table.calor thead th:first-child { background: var(--fill); }

/* ── Presença → Eleição e Regimento ── */
table.crivo td small { display: block; margin-top: 2px; font-size: 12px; }
table.crivo .sit { margin-right: 4px; }
table.crivo td .tag { display: inline-block; margin: 1px 0; white-space: normal; }

/* ── Instrução: caminhada dos irmãos (trilha tipo linha de metrô; sem JS e sem style="") ── */
.caminhada .painel-head { align-items: center; }
.legenda-trilha { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.legenda-trilha i.m { position: static; margin-right: -6px; vertical-align: -2px; }
.caminhada-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0 0 12px; }
.resumo-item { padding: 10px 14px; border-radius: 12px; background: var(--fill); }
.resumo-item span { display: block; color: var(--muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
.resumo-item b { display: block; font: 700 16px/1.3 var(--display); color: var(--navy); margin: 4px 0 2px; }
@media (prefers-color-scheme: dark) { .resumo-item b { color: var(--fg); } }
.resumo-item small { color: var(--fg-2); }
.trilhas { display: flex; flex-direction: column; }
.trilha-linha { display: grid; grid-template-columns: 150px minmax(0, 1fr) 210px; gap: 14px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
.trilha-linha.cabecalho { border-top: 0; padding: 0 0 2px; }
.trilha-linha.apagada { opacity: 0.55; }
.trilha-linha .nome { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--fg); }
.trilha-linha .nome small { color: var(--muted); font-size: 12px; }
.trilha-linha .prox-txt b { display: block; font-size: 13.5px; font-weight: 600; }
.trilha-linha .prox-txt small { display: block; font-size: 12px; }
.trilha { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; }
.trilha.cab span { text-align: center; font: 600 11px/1.2 var(--font); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trilha.cab span.s2 { grid-column: span 2; }
/* colchete sob o nome da instrução, do 1º ponto (ministrada) ao 2º (trabalho): o rótulo vale para os dois */
.trilha.cab span { position: relative; padding-bottom: 8px; }
.trilha.cab span.s2::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 0; height: 5px;
  border: 1.5px solid var(--line-2); border-bottom: 0; border-radius: 3px 3px 0 0; }
.trilha.cab span:not(.s2)::after { content: ""; position: absolute; left: 50%; bottom: 0; height: 5px; border-left: 1.5px solid var(--line-2); }
.est { position: relative; height: 24px; display: flex; align-items: center; justify-content: center; }
.est::before, .est::after { content: ""; position: absolute; top: 50%; height: 3px; margin-top: -1.5px; background: var(--trilho); }
.est::before { left: 0; right: 50%; }
.est::after { left: 50%; right: 0; }
.est:first-child::before, .est:last-child::after { display: none; }
.t-AM .est.feito::before, .t-AM .est:has(+ .est.feito)::after, .t-AM .est.feito:has(+ .est.parcial)::after { background: var(--gr-am); }
.t-CM .est.feito::before, .t-CM .est:has(+ .est.feito)::after, .t-CM .est.feito:has(+ .est.parcial)::after { background: var(--gr-cm); }
.t-MM .est.feito::before, .t-MM .est:has(+ .est.feito)::after, .t-MM .est.feito:has(+ .est.parcial)::after { background: var(--gr-mm); }
.t-AM .est.parcial::before { background: var(--gr-am); } .t-CM .est.parcial::before { background: var(--gr-cm); } .t-MM .est.parcial::before { background: var(--gr-mm); }
i.m { position: relative; z-index: 1; display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--line-2); }
i.m.trab { border-radius: 3px; transform: rotate(45deg) scale(0.88); }
i.m.outro { border-radius: 3px; }
.est.feito i.m, i.m.feito { box-shadow: none; background: var(--navy); }
.t-AM .est.feito i.m { background: var(--gr-am); } .t-CM .est.feito i.m { background: var(--gr-cm); } .t-MM .est.feito i.m { background: var(--gr-mm); }
.legenda-trilha i.m.feito { background: var(--fg-2); }
.t-AM .est.parcial i.m { background: linear-gradient(90deg, var(--gr-am) 50%, var(--card) 50%); box-shadow: inset 0 0 0 2px var(--gr-am); }
.t-CM .est.parcial i.m { background: linear-gradient(90deg, var(--gr-cm) 50%, var(--card) 50%); box-shadow: inset 0 0 0 2px var(--gr-cm); }
.t-MM .est.parcial i.m { background: linear-gradient(90deg, var(--gr-mm) 50%, var(--card) 50%); box-shadow: inset 0 0 0 2px var(--gr-mm); }
.est.prox i.m, i.m.prox { width: 17px; height: 17px; background: var(--card); box-shadow: inset 0 0 0 3px var(--gold), 0 0 0 4px var(--gold-soft); }
.est.prox i.m.trab { transform: rotate(45deg) scale(0.85); }
i.m.pend { background: var(--card); box-shadow: inset 0 0 0 2px var(--line-2); }
.tempo-prog { display: flex; flex-direction: column; }
.tp-linha { display: grid; grid-template-columns: 150px minmax(0, 1fr) 260px; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.tp-linha:first-child { border-top: 0; }
.tp-barras { display: grid; grid-template-columns: 70px minmax(0, 1fr) 44px; gap: 4px 8px; align-items: center; font-size: 12px; }
.tp-rot { color: var(--muted); }
.tp-val { text-align: right; font-weight: 600; }
.b-prog { fill: var(--navy); } .b-prog.gr-AM { fill: var(--gr-am); } .b-prog.gr-CM { fill: var(--gr-cm); }
.b-tempo { fill: var(--fg-2); opacity: 0.55; }
.tp-st { font-size: 13px; color: var(--fg-2); }
.tp-st.ok { color: var(--ok); font-weight: 600; } .tp-st.atencao { color: var(--gold-ink); font-weight: 600; } .tp-st.baixa { color: var(--bad); font-weight: 600; }
@media (prefers-color-scheme: dark) { .tp-st.atencao { color: var(--gold-2); } }
.trilhas.ficha { margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.trilhas.ficha .legenda-trilha { margin-top: 8px; }
@media (max-width: 820px) {
  .trilha-linha { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px 0; }
  .trilha-linha.cabecalho > span:first-child, .trilha-linha.cabecalho > span:last-child { display: none; }
  .trilha-linha .nome { justify-content: flex-start; }
  .trilha.cab span { font-size: 10px; }
  i.m { width: 11px; height: 11px; }
  .est.prox i.m { width: 14px; height: 14px; }
  .tp-linha { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* versão 21/10/2026 — documento só administradores */

/* ── Ágape (21/10/2026) ── */
.agape-lista { display: flex; flex-direction: column; }
.linha-agape { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 9px 4px; border-top: 1px solid var(--line); }
.linha-agape:first-child { border-top: 0; }
.linha-agape .quando { font: 600 13.5px/1.3 var(--display); color: var(--navy); white-space: nowrap; }
@media (prefers-color-scheme: dark) { .linha-agape .quando { color: var(--gold-2); } }
.linha-agape .quem small { display: block; font: 400 12.5px/1.4 var(--font); font-style: normal; color: var(--muted); }
.linha-agape.passado { opacity: 0.6; }
.linha-agape.prox { background: var(--gold-soft); border-radius: 10px; }
.linha-agape details.mini { grid-column: 1 / -1; }
details.mini > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); list-style: none; }
details.mini > summary::-webkit-details-marker { display: none; }
details.mini form.grade { padding: 10px 0 4px; }
.tag.destaque-tag { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1b1505; }
.agape-proximo .agape-data { font: 700 18px/1.2 var(--display); color: var(--navy); }
@media (prefers-color-scheme: dark) { .agape-proximo .agape-data { color: var(--fg); } }
ol.regras { margin: 0 0 12px; padding-left: 22px; }
ol.regras li { padding: 4px 0; }
.agape-sessao { margin: -4px 0 14px; color: var(--fg-2); }
.agape-sessao a.muted { font-size: 12.5px; margin-left: 6px; }
@media (max-width: 820px) {
  .linha-agape { grid-template-columns: auto minmax(0, 1fr); }
  .linha-agape .st { grid-column: 1 / -1; }
}

/* ── Agenda com o ágape (21/10/2026): a linha toda abre a sessão (o link do título cobre a linha) e o ágape é um link
   próprio, por cima, para a escala ── */
.linha.clicavel { position: relative; }
.linha .cobre { color: inherit; }
.linha .cobre:hover { text-decoration: none; }
.linha .cobre::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.linha .cobre:focus-visible { outline: none; }
.linha .cobre:focus-visible::after { outline: 2px solid var(--gold); outline-offset: -2px; }
.linha .agape-link { position: relative; z-index: 1; grid-column: 3 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px; padding: 3px 11px 3px 8px; border-radius: 999px; background: var(--gold-soft); border: 1px solid var(--line-2);
  color: var(--gold-ink); font: 600 12.5px/1.4 var(--font); }
.linha .agape-link:hover { text-decoration: none; border-color: var(--gold); }
.linha.com-editar { padding-right: 104px; }
/* "Editar" na linha da agenda (28/10/2026): acima do link que cobre a linha, como o do ágape */
.linha .editar-linha { position: absolute; z-index: 1; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px 4px 9px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--fg-2); font: 600 12.5px/1.4 var(--font); }
.linha .editar-linha:hover { text-decoration: none; border-color: var(--gold); color: var(--fg); }
.linha .editar-linha .ic { color: var(--gold-ink); }
.titulo-acoes a.botao .ic { vertical-align: -3px; margin-right: 2px; }
.form-sessao textarea { min-height: 84px; field-sizing: content; max-height: 40vh; }
.acoes-sessao { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
label .dica { font-weight: 400; color: var(--muted); letter-spacing: 0; }
.linha-agape .pauta-sessao { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px;
  font-size: 12.5px; line-height: 1.45; color: var(--fg-2); }
.linha-agape .pauta-sessao .grau { min-width: 0; padding: 0 6px; font-size: 10.5px; margin-right: 2px; }
.linha-agape { scroll-margin-top: 96px; }
.linha-agape:target { background: var(--gold-soft); border-radius: 10px; box-shadow: inset 0 0 0 2px var(--gold); }
.sem-agape a { white-space: nowrap; }
@media (max-width: 820px) {
  .linha .agape-link { grid-column: 1 / -1; padding: 6px 12px 6px 9px; }
  .linha.com-editar { padding-right: 4px; }
  .linha.com-editar .quando { min-height: 30px; line-height: 30px; }
  .linha .editar-linha { top: 8px; right: 2px; transform: none; padding: 5px 12px 5px 9px; }
  .acoes-sessao > * { flex: 1 1 auto; text-align: center; }
}

/* ── Agenda em arte (21/10/2026): o cartaz em SVG (cores no próprio SVG, que é a arte) e os botões do script da tela ── */
.arte-opcoes > summary small { margin-left: 6px; font-weight: 400; }
.arte-form label.check { align-self: end; padding-bottom: 10px; }
/* só o campo que vale para a duração escolhida (Gui, 28/10/2026): Semestre e "a partir do mês atual" com a duração Semestre;
   "A partir de" com 1 a 4 meses. Sem script (:has); navegador sem :has mostra os dois, como antes. */
.arte-form:has(select[name="dur"] option[value="sem"]:checked) .so-meses,
.arte-form:not(:has(select[name="dur"] option[value="sem"]:checked)) .so-semestre { display: none; }
@media (max-width: 820px) { .arte-form label.check { padding-bottom: 0; } }
.arte-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-height: 44px; margin: 4px 0 14px; }
.arte-acoes button { min-width: 168px; }
.cartaz-quadro { margin: 0 0 14px; max-width: 760px; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg); background: #f4efe3; }
.cartaz-quadro svg { display: block; width: 100%; height: auto; }
@media (max-width: 820px) {
  .arte-acoes button { flex: 1 1 140px; min-width: 0; }
  .cartaz-quadro { border-radius: 8px; }
}

/* ── Menu em grupos (21/10/2026): no computador, grupos que abrem e fecham no menu lateral (<details>, sem script);
   no celular, a barra de baixo leva aos grupos e cada tela mostra no topo as abas do seu grupo ── */
.side nav details.grupo > summary { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; border-bottom: 0;
  color: var(--side-fg); font-weight: 500; list-style: none; cursor: pointer; transition: background 0.15s, color 0.15s; }
.side nav details.grupo > summary::-webkit-details-marker { display: none; }
.side nav details.grupo > summary::marker { content: ""; }
.side nav details.grupo > summary .ic { color: rgba(230, 200, 104, 0.8); }
.side nav details.grupo > summary > span { flex: 1; }
.side nav details.grupo > summary::after { content: ""; flex: none; width: 6px; height: 6px; margin: 0 3px 2px 4px; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); opacity: 0.55; transition: transform 0.15s; }
.side nav details.grupo[open] > summary::after { transform: rotate(45deg); margin-bottom: 4px; }
.side nav details.grupo > summary:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.side nav details.grupo > summary.on { color: #fff; font-weight: 600; }
.side nav details.grupo > summary.on .ic { color: var(--gold-2); }
.side nav details.grupo[open] > summary .badge-grupo { display: none; }
.side nav details.grupo > summary:focus-visible, .side nav a:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -2px; }
.side nav .sub { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 6px 21px; border-left: 1px solid rgba(201, 162, 39, 0.25); }
.side nav .sub a { padding: 7px 12px 7px 19px; border-radius: 0 10px 10px 0; font-size: 14px; }
.side nav .sub a.on { box-shadow: inset 2px 0 0 var(--gold); }
.subabas { display: none; }
.folha-tit, .folha-sep { display: none; }
@media (max-width: 820px) {
  /* abas do grupo da tela, roláveis de lado, logo abaixo da barra do app */
  .subabas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: -4px calc(-1 * max(16px, env(safe-area-inset-right))) 10px calc(-1 * max(16px, env(safe-area-inset-left)));
    padding: 2px max(16px, env(safe-area-inset-right)) 4px max(16px, env(safe-area-inset-left)); }
  .subabas::-webkit-scrollbar { display: none; }
  .subabas a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 999px;
    background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg-2); font-size: 14px; font-weight: 500; white-space: nowrap; }
  .subabas a:hover { text-decoration: none; }
  .subabas a.on { background: var(--side); color: #fff; box-shadow: none; font-weight: 600; }
  .subabas .badge { margin-left: 0; min-width: 18px; padding: 0 5px; font-size: 10.5px; line-height: 18px; }
  .folha-tit { display: block; grid-column: 1 / -1; padding: 6px 8px 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .folha-tit ~ .folha-tit { margin-top: 4px; }
  .folha-sep { display: block; grid-column: 1 / -1; height: 1px; margin: 4px 8px; background: var(--line); }
}

/* ── Fotos dos irmãos (cópia do MVU, 21/10/2026): avatar redondo; sem foto, as iniciais ── */
.avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center; background: var(--fill);
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3px rgba(201, 162, 39, 0.55); }
.avatar.sem-foto { display: inline-flex; align-items: center; justify-content: center; font: 700 13px/1 var(--display); letter-spacing: 0.02em;
  color: var(--navy); background: var(--navy-soft); }
@media (prefers-color-scheme: dark) { .avatar.sem-foto { color: var(--fg); } }
.avatar.xl { width: 104px; height: 104px; font-size: 30px; box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--gold), var(--shadow); }
.irmao-cel { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ficha-topo { display: flex; align-items: center; gap: 20px; margin-bottom: 6px; }
.ficha-topo h1 { margin-top: 0; }
@media (max-width: 820px) {
  .avatar { width: 36px; height: 36px; }
  .avatar.xl { width: 76px; height: 76px; font-size: 24px; }
  .ficha-topo { gap: 14px; align-items: flex-start; }
}

/* ── Profanos: Instagram do candidato (21/10/2026) ── */
.insta { margin: 2px 0 0; }
.link-insta { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--navy-soft); font-weight: 600; font-size: 14px; }
.link-insta:hover { text-decoration: none; background: var(--gold-soft); }
.irmao-cel > span { min-width: 150px; }


/* ── Tabelas ordenáveis (21/10/2026): título da coluna é link; no celular, a faixa "Ordenar por" ── */
table.ordenavel th a.ord { color: inherit; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
table.ordenavel th a.ord:hover { color: var(--navy); text-decoration: none; }
table.ordenavel th a.ord.on { color: var(--navy); }
@media (prefers-color-scheme: dark) { table.ordenavel th a.ord:hover, table.ordenavel th a.ord.on { color: var(--gold-2); } }
table.ordenavel th .seta { font-size: 10px; margin-left: 2px; }
.ordenar { display: none; }
@media (max-width: 640px) {
  .ordenar { display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * max(16px, env(safe-area-inset-right))) 10px calc(-1 * max(16px, env(safe-area-inset-left)));
    padding: 2px max(16px, env(safe-area-inset-right)) 4px max(16px, env(safe-area-inset-left)); }
  .ordenar::-webkit-scrollbar { display: none; }
  .ordenar > span { flex: none; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .ordenar a { flex: none; padding: 5px 11px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--fg-2); font-size: 13px; white-space: nowrap; min-height: 32px; display: inline-flex; align-items: center; }
  .ordenar a:hover { text-decoration: none; }
  .ordenar a.on { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold); color: var(--fg); font-weight: 600; }
  /* a ordem atual vem logo depois do rótulo (a faixa rola de lado e ela podia ficar fora da tela) */
  .ordenar > span { order: -2; }
  .ordenar a.on { order: -1; }
}

/* ── Dados pessoais na ficha do irmão (cópia do MVU, 21/10/2026) ── */
dl.dados { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 14px; margin: 0; }
dl.dados dt { color: var(--muted); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; }
dl.dados dd { margin: 0; }
ul.familia { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 640px) { dl.dados { grid-template-columns: minmax(0, 1fr); gap: 2px; } dl.dados dd { margin-bottom: 8px; } }

/* ══ Início redesenhado (21/10/2026): saudação, parabéns, destaques visuais e entrada animada (só CSS, sem script).
   Quem pede menos movimento no aparelho (prefers-reduced-motion) vê tudo parado. ══ */
:root { --gr-mi: #8a5a2b; }
@media (prefers-color-scheme: dark) { :root { --gr-mi: #d8a066; } }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes varrer { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
/* capa girada para começar às 12h: traço de 100 (o círculo inteiro) que anda 100 e sai do anel, revelando no sentido horário */
@keyframes revelar { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes cair { 0% { transform: translateY(-30px) rotate(0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(150px) rotate(320deg); opacity: 0; } }
@keyframes brilho { 0%, 100% { box-shadow: 0 0 0 3px var(--gold), 0 0 0 0 rgba(230, 200, 104, 0.55); } 50% { box-shadow: 0 0 0 3px var(--gold), 0 0 0 12px rgba(230, 200, 104, 0); } }
@keyframes crescer { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.inicio > * { animation: subir 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.inicio > *:nth-child(2) { animation-delay: 0.08s; } .inicio > *:nth-child(3) { animation-delay: 0.16s; }
.inicio > *:nth-child(4) { animation-delay: 0.24s; } .inicio > *:nth-child(5) { animation-delay: 0.32s; } .inicio > *:nth-child(6) { animation-delay: 0.4s; }
.destaques > * { animation: subir 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.destaques > *:nth-child(2) { animation-delay: 0.22s; } .destaques > *:nth-child(3) { animation-delay: 0.3s; } .destaques > *:nth-child(4) { animation-delay: 0.38s; }

/* faixa de abertura: saudação com a foto e um brilho dourado que passa uma vez */
.hero-v2 { padding-top: 26px; }
.hero-brilho { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-brilho::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 34%; left: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 233, 160, 0.16), transparent); animation: varrer 2.6s ease-out 0.4s both; }
.hero-ola { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 15px; color: rgba(255, 255, 255, 0.9); }
.hero-ola b { color: #fff; }
.avatar.hero-av { width: 38px; height: 38px; box-shadow: 0 0 0 2px var(--gold-2); }

/* parabéns do dia */
.parabens { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; padding: 18px 20px; border-radius: 20px;
  background: radial-gradient(500px 200px at 10% 0%, rgba(255, 233, 160, 0.55), transparent 70%), linear-gradient(135deg, #fff8e2, #f6e7b8);
  border: 1px solid rgba(201, 162, 39, 0.55); box-shadow: var(--shadow-lg); }
@media (prefers-color-scheme: dark) { .parabens { background: radial-gradient(500px 200px at 10% 0%, rgba(201, 162, 39, 0.35), transparent 70%), linear-gradient(135deg, #2a2412, #1d1a10); } }
.parabens-item { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; flex: 1 1 300px; color: var(--fg); }
.parabens-item:hover { text-decoration: none; }
.avatar.parabens-av { width: 74px; height: 74px; animation: brilho 2.4s ease-in-out infinite; }
.parabens-ic { flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; color: var(--gold-ink); background: var(--gold-soft); }
.parabens-item small { display: block; color: var(--gold-ink); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; }
.parabens-item b { display: block; font: 700 24px/1.15 var(--display); color: var(--navy); margin: 2px 0 3px; }
@media (prefers-color-scheme: dark) { .parabens-item b { color: var(--gold-2); } }
.parabens-item em { font: italic 500 17px/1.3 var(--serif); color: var(--fg-2); }
.confete { position: absolute; inset: 0; pointer-events: none; }
.confete i { position: absolute; top: 0; width: 7px; height: 12px; border-radius: 2px; opacity: 0; animation: cair 4.5s linear infinite; }
.confete i:nth-child(odd) { width: 9px; height: 9px; border-radius: 50%; }
.confete i.c0 { background: #c9a227; left: 6%; animation-delay: 0s; } .confete i.c1 { background: #1f3a5f; left: 19%; animation-delay: 1.1s; }
.confete i.c2 { background: #e6c868; left: 33%; animation-delay: 2.3s; } .confete i.c3 { background: #6f9fd8; left: 47%; animation-delay: 0.6s; }
.confete i.c4 { background: #c9a227; left: 61%; animation-delay: 1.8s; } .confete i.c5 { background: #3f9a6b; left: 75%; animation-delay: 3s; }
.confete i.c6 { background: #e6c868; left: 89%; animation-delay: 0.3s; }
.confete i:nth-child(n+8) { animation-duration: 5.6s; margin-left: 4%; }

/* destaques: quatro cartões grandes e visuais */
.destaques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; }
.dq { position: relative; display: flex; align-items: center; gap: 14px; min-height: 132px; padding: 18px; border-radius: 18px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--fg); transition: transform 0.18s, box-shadow 0.18s; }
.dq::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, var(--gold-soft), transparent 70%); pointer-events: none; }
.dq:hover { text-decoration: none; }
@media (hover: hover) { .dq:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } }
.d-txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.d-rot { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.d-grande { font: 700 23px/1.15 var(--display); color: var(--navy); white-space: nowrap; }
@media (prefers-color-scheme: dark) { .d-grande { color: var(--fg); } }
.dq small { color: var(--muted); font-size: 12.5px; }
.d-sessao { background: linear-gradient(160deg, var(--card) 55%, var(--gold-soft)); border-top: 3px solid var(--gold); }
.calend { flex: none; display: flex; flex-direction: column; align-items: center; width: 64px; border-radius: 14px; overflow: hidden; background: var(--card);
  box-shadow: 0 0 0 1px var(--line-2), var(--shadow); }
.calend small:first-child { width: 100%; text-align: center; background: var(--side); color: var(--gold-2); font: 700 11px/1.9 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
.calend b { font: 700 30px/1.1 var(--display); color: var(--navy); padding-top: 4px; }
@media (prefers-color-scheme: dark) { .calend b { color: var(--fg); } }
.calend small:last-child { font-size: 11px; color: var(--muted); padding-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.d-pauta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.d-agape { display: inline-flex; align-items: center; gap: 4px; color: var(--gold-ink) !important; font-weight: 600; }
.d-sessao .grau { align-self: flex-start; }
svg.anel.anel-home { width: 96px; height: 96px; }
svg.anel.anel-home .arco { stroke: var(--gold); }
svg.anel .capa { stroke: var(--card); stroke-dasharray: 100 100; stroke-dashoffset: -100; animation: revelar 1.4s cubic-bezier(0.3, 0.7, 0.2, 1) 0.45s both; }
.d-aniv { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; }
.pilha { flex: none; display: flex; }
.pilha .avatar { width: 46px; height: 46px; margin-left: -14px; box-shadow: 0 0 0 3px var(--card); }
.pilha .avatar:first-child { margin-left: 0; }
.pilha .avatar.sem-foto { font-size: 12px; }
.faixa-graus { display: block; width: 100%; height: 10px; border-radius: 6px; margin: 6px 0 4px; overflow: hidden; }
.faixa-graus rect { transform-origin: left; }
.faixa-graus .gr-AM, .legenda-graus .gr-AM i { fill: var(--gr-am); background: var(--gr-am); }
.faixa-graus .gr-CM, .legenda-graus .gr-CM i { fill: var(--gr-cm); background: var(--gr-cm); }
.faixa-graus .gr-MM, .legenda-graus .gr-MM i { fill: var(--gr-mm); background: var(--gr-mm); }
.faixa-graus .gr-MI, .legenda-graus .gr-MI i { fill: var(--gr-mi); background: var(--gr-mi); }
.legenda-graus { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.legenda-graus .lg { display: inline-flex; align-items: center; gap: 4px; }
.legenda-graus i { width: 8px; height: 8px; border-radius: 2px; }

/* celebrações dos próximos 30 dias */
ul.festas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
ul.festas-lista li { display: grid; grid-template-columns: 44px 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 6px; border-top: 1px solid var(--line); }
ul.festas-lista li:first-child { border-top: 0; }
ul.festas-lista li.hoje { background: var(--gold-soft); border-radius: 12px; border-top-color: transparent; }
.f-data { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.f-data b { font: 700 20px/1 var(--display); color: var(--navy); }
@media (prefers-color-scheme: dark) { .f-data b { color: var(--gold-2); } }
.f-data small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.f-txt { min-width: 0; display: flex; flex-direction: column; }
.f-txt small { color: var(--muted); font-size: 12.5px; }
.f-quando { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.f-maconaria .f-txt small, .f-casamento .f-txt small { color: var(--gold-ink); font-weight: 600; }
.avatar.f-ic { font-size: 16px; color: var(--gold-ink); background: var(--gold-soft); }

/* presença integral (só boas notícias no Início) */
.presenca-home .colunas svg { height: 120px; }
.presenca-home .c-barra { transform-origin: bottom; transform-box: fill-box; animation: crescer 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s both; }
.integral { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.integral-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.integral-lista a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--fg-2); font-size: 11.5px; }
.integral-lista a:hover { text-decoration: none; color: var(--navy); }

@media (max-width: 1100px) { .destaques { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .destaques { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dq { min-height: 0; padding: 14px; }
  .avatar.parabens-av, .parabens-ic { width: 60px; height: 60px; }
  .parabens-item b { font-size: 20px; }
  ul.festas-lista li { grid-template-columns: 40px 36px minmax(0, 1fr); }
  .f-quando { grid-column: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .inicio > *, .destaques > *, .hero-brilho::before, svg.anel .capa, .presenca-home .c-barra, .avatar.parabens-av { animation: none; }
  .confete { display: none; }
  svg.anel .capa { display: none; }
}
/* versão 21/10/2026 — aniversário de casamento */

/* ── Selos (figurinhas) das celebrações no Início (21/10/2026): 🎂 aniversário, esquadro e compasso na Maçonaria,
   💐 cunhada, 🎈 sobrinhos; colados no canto da foto ── */
@keyframes balancar { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) scale(1.06); } }
.av-selo { position: relative; display: inline-flex; flex: none; }
.selo { position: absolute; right: -7px; bottom: -5px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); box-shadow: 0 1px 5px rgba(20, 30, 50, 0.22), 0 0 0 1.5px var(--gold-soft); font: normal 13px/1 system-ui, sans-serif; }
.selo .esq-comp { width: 17px; height: 17px; color: var(--gold-ink); stroke-width: 2.1; }
ul.festas-lista .selo { width: 24px; height: 24px; }
.parabens .selo { width: 34px; height: 34px; right: -6px; bottom: -4px; font-size: 20px; animation: balancar 2.2s ease-in-out infinite; transform-origin: 50% 80%; }
.parabens .selo .esq-comp { width: 22px; height: 22px; }
.parabens-ic { font-size: 34px; font-style: normal; }
.avatar.f-ic { font-size: 18px; font-style: normal; }
.d-agape span, .d-rot span { font-style: normal; }
@media (prefers-reduced-motion: reduce) { .parabens .selo { animation: none; } }

/* ── usuários e matriz de papéis (23/10/2026) ── */
/* Usuários (src/telas/conta.ts): Pessoa | Login | Papéis | Último acesso | ações. Etiquetas dos papéis: Administrador em destaque,
   cargo em dourado, extra em verde, a base (Irmão/Visitante) só contornada. */
table.usuarios .papeis { display: flex; flex-wrap: wrap; gap: 4px; }
.tag.papel-admin { background: var(--navy); color: var(--card); font-weight: 600; }
.tag.papel-cargo { background: var(--gold-soft); color: var(--fg); }
.tag.papel-extra { background: var(--ok-soft); color: var(--ok); }
.tag.papel-base { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }
.acesso-form { gap: 6px 12px; }
.acesso-form label.check { align-items: center; font-size: 13.5px; }
.acesso-form label.check input { margin: 0; }
.acesso-form label.travado, form.grade label.travado { color: var(--muted); }
.acesso-form input:disabled, form.grade label.travado input:disabled { opacity: 0.55; }
.acesso-form details.extras { border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); }
.acesso-form details.extras > summary { padding: 5px 10px; font-size: 13px; font-weight: 500; color: var(--fg-2); }
.acesso-form details.extras[open] { flex-basis: 100%; }
.extras-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; padding: 8px 10px 10px; }
.extras-lista > small { grid-column: 1 / -1; }

/* Matriz papel × área: rola dentro do quadro no celular (a 1ª coluna, o papel, fica parada); célula fora do padrão com realce discreto */
table.papeis-matriz { font-size: 13.5px; }
table.papeis-matriz th, table.papeis-matriz td { padding: 6px 4px; vertical-align: middle; }
table.papeis-matriz th:first-child { padding-left: 12px; }
table.papeis-matriz thead th { white-space: normal; min-width: 62px; vertical-align: bottom; line-height: 1.25; }
table.papeis-matriz thead th[title] { cursor: help; }
table.papeis-matriz tbody th { min-width: 150px; text-align: left; font: 600 13.5px/1.3 var(--font); color: var(--fg); }
table.papeis-matriz tbody th small { display: block; margin-top: 1px; font-weight: 400; font-size: 11.5px; color: var(--muted); }
table.papeis-matriz select { width: auto; min-height: 32px; padding: 3px 2px 3px 6px; font-size: 13px; border-radius: 8px; }
table.papeis-matriz td.nv0 { color: var(--muted); }
table.papeis-matriz td.nv2 { color: var(--ok); font-weight: 600; }
.tabela table.papeis-matriz td.difere { background: var(--gold-soft); box-shadow: inset 3px 0 0 var(--gold); }
.tabela table.papeis-matriz tr.fixo th, .tabela table.papeis-matriz tr.fixo td { background: var(--fill); }
table.papeis-matriz tr.fixo td { font-style: italic; }
dl.legenda-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 18px; margin: 4px 0 14px; font-size: 13px; color: var(--muted); }
dl.legenda-areas dt { display: inline; font-weight: 600; color: var(--fg-2); }
dl.legenda-areas dd { display: inline; margin: 0; }
form.restaurar { margin: 0 0 12px; padding: 10px 14px; border: 1px dashed var(--line-2); border-radius: var(--radius); }
form.restaurar label.check { align-items: center; font-size: 13.5px; }

@media (max-width: 640px) {
  /* a ficha de Usuários: pessoa e login no alto; papéis, último acesso e ações embaixo (substitui a regra antiga de 4 colunas) */
  .tabela table.usuarios td:nth-child(3)::before { content: none; }
  .tabela table.usuarios td:nth-child(3), .tabela table.usuarios td:nth-child(4), .tabela table.usuarios td:nth-child(5) { grid-column: 1 / -1; }
  .tabela table.usuarios td:nth-child(3) { margin-top: 4px; }
  .tabela table.usuarios td:nth-child(4) { margin-top: 0; font-size: 13px; }
  .tabela table.usuarios td:nth-child(4)::before { content: "último acesso: "; }
  .tabela table.usuarios td:nth-child(5) { margin-top: 8px; }
  .acesso-form details.extras, .acesso-form > button { flex: 1 1 100%; }
  .extras-lista { grid-template-columns: minmax(0, 1fr); }
  table.papeis-matriz select { min-height: 40px; font-size: 16px; }   /* 16 px: o iPhone não dá zoom ao tocar */
  table.papeis-matriz tbody th { min-width: 126px; max-width: 150px; }
  dl.legenda-areas { grid-template-columns: minmax(0, 1fr); }
}

/* Financeiro (Tesouraria, 22/10/2026). Servido junto com o app.css (server.ts concatena). Usa os tokens do app.css. */

/* ── comum ── */
.valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.valor.pos { color: var(--ok); }
.valor.neg { color: var(--bad); }
.valor.zero { color: var(--muted); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ── fim comum ── */

/* ── importar (agente A) ── */
/* Importar extrato (src/telas/financeiro/importar.ts): envio, lista das importações, prévia e resumo. Só tokens do app.css. */
.imp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tag.imp-ok { background: var(--ok-soft); color: var(--ok); }
.tag.imp-bloq { background: var(--bad-soft); color: var(--bad); }
details.programa.imp-como ol { margin: 0; padding: 8px 18px 12px 38px; }
details.programa.imp-como li { margin: 0 0 6px; }
label.imp-nome { max-width: 440px; margin: 10px 0 0; }
.imp-contagem { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.imp-acoes, form.imp-descartar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.imp-acoes { margin: 4px 0 14px; }
form.imp-descartar { margin: 0 0 20px; }
table.imp-previa td.imp-desc { min-width: 220px; overflow-wrap: anywhere; }
table.imp-previa td.imp-desc small { margin-left: 4px; }
table.imp-previa tr.imp-fora > td { color: var(--muted); }
table.imp-lista td:first-child a { overflow-wrap: anywhere; }
.imp-saldo { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--ok-soft); border-left: 4px solid var(--ok); color: var(--fg); }
.imp-saldo.dif { background: var(--warn-soft); border-left-color: var(--warn); }

/* celular estreito: as duas tabelas viram fichas (o cabeçalho some; ordem das colunas no .ts) */
@media (max-width: 640px) {
  .tabela table.imp-lista, .tabela table.imp-lista tbody, .tabela table.imp-previa, .tabela table.imp-previa tbody { display: block; }
  .tabela table.imp-lista thead, .tabela table.imp-previa thead { display: none; }
  .tabela table.imp-lista tr, .tabela table.imp-previa tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 14px; border-top: 1px solid var(--line); }
  .tabela table.imp-lista tbody tr:first-child, .tabela table.imp-previa tbody tr:first-child { border-top: 0; }
  .tabela table.imp-lista td, .tabela table.imp-previa td { display: block; padding: 0; border: 0; min-width: 0; position: static; background: none; box-shadow: none; }

  /* lista: Arquivo | Conta | Período | Novos / repetidos | Situação | Por | Quando */
  .tabela table.imp-lista td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 600; }
  .tabela table.imp-lista td:nth-child(5) { grid-column: 2; grid-row: 1; text-align: right; }
  .tabela table.imp-lista td:nth-child(2), .tabela table.imp-lista td:nth-child(3), .tabela table.imp-lista td:nth-child(4) { grid-column: 1 / -1; font-size: 14px; text-align: left; }
  .tabela table.imp-lista td:nth-child(3) { color: var(--muted); }
  .tabela table.imp-lista td:nth-child(4)::before { content: "novos / repetidos: "; color: var(--muted); }
  .tabela table.imp-lista td:nth-child(6), .tabela table.imp-lista td:nth-child(7) { color: var(--muted); font-size: 13.5px; }
  .tabela table.imp-lista td:nth-child(6) { grid-column: 1; }
  .tabela table.imp-lista td:nth-child(6)::before { content: "por "; }
  .tabela table.imp-lista td:nth-child(7) { grid-column: 2; text-align: right; }

  /* prévia: [marcar] | Data | Descrição | Valor | Situação | Sugestão — a caixa ocupa a altura da ficha */
  .tabela table.imp-previa tr { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; }
  .tabela table.imp-previa td.sel { grid-column: 1; grid-row: 1 / span 4; width: auto; padding-top: 1px; }
  .tabela table.imp-previa td:nth-child(2) { grid-column: 2; grid-row: 1; color: var(--muted); font-size: 13.5px; }
  .tabela table.imp-previa td:nth-child(4) { grid-column: 3; grid-row: 1; }
  .tabela table.imp-previa td:nth-child(3) { grid-column: 2 / -1; grid-row: 2; }
  .tabela table.imp-previa td:nth-child(5) { grid-column: 2 / -1; grid-row: 3; }
  .tabela table.imp-previa td:nth-child(6) { grid-column: 2 / -1; grid-row: 4; font-size: 14px; }
  .tabela table.imp-previa td:nth-child(6):has(> span.muted:only-child) { display: none; }
  .imp-acoes button, form.imp-descartar button { width: 100%; min-height: 44px; }
  label.imp-nome { max-width: none; }
}
/* ── fim importar ── */

/* ── extrato e configurar (agente B) ── */
/* src/telas/financeiro/extrato.ts e config.ts. Só tokens do app.css (claro e escuro). */
.fin-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fin-bloco { display: block; }
.fin-pad { padding: 12px 16px; margin: 0; }
.fin-mesnav { display: inline-flex; gap: 12px; margin-left: 8px; white-space: nowrap; }
form.grade.fin-filtros { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 14px; }
form.grade.fin-filtros label.check { min-height: 42px; align-items: center; }
.fin-saldos .card b { font: 700 22px/1.25 var(--font); overflow-wrap: anywhere; }
.fin-saldos .card:hover { transform: none; box-shadow: var(--shadow); }
/* o .card span do app.css (rótulo em maiúsculas) não pode pegar o valor */
.fin-saldos .card .valor { display: inline; padding: 0; font: inherit; text-transform: none; letter-spacing: 0; }
.fin-saldos .card small .valor { font-weight: 600; }
.fin-lote .grade-campos { gap: 12px 14px; }
.fin-paginas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; margin: 4px 0 14px; font-size: 14px; color: var(--muted); }
button.perigo { background: var(--bad); color: var(--card); box-shadow: none; }
fieldset.fin-regra { margin: 0; }
fieldset.fin-regra label.check { grid-column: 1 / -1; }
td.acoes { white-space: nowrap; text-align: right; }

/* extrato: a 1ª coluna é a marca (checkbox); sem categoria e a conferir com um filete à esquerda */
table.extrato th.sel, table.extrato td.sel { width: 34px; padding-right: 0; }
table.extrato td.desc { min-width: 220px; overflow-wrap: anywhere; }
table.extrato td.desc small { display: block; margin-top: 1px; }
table.extrato td.cat .tag { white-space: normal; }
table.extrato tr.semcat td.sel, table.extrato tr.sugerido td.sel { box-shadow: inset 3px 0 0 var(--warn); }

@media (max-width: 820px) {
  /* abas do Configurar: rolam de lado em vez de cortar o nome */
  .seg.fin-abas { overflow-x: auto; scrollbar-width: none; }
  .seg.fin-abas a { flex: 0 0 auto; overflow: visible; }
  /* barra flutuante dos botões do lote: quebra a linha em vez de passar da tela */
  .acoes-form.fin-acoes { width: auto; max-width: 100%; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  /* filtros em duas colunas (a lista começa mais cedo) */
  form.grade.fin-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  form.grade.fin-filtros label:has(input[type="search"]), form.grade.fin-filtros label.check { grid-column: 1 / -1; }
  form.grade.fin-filtros label.check { min-height: 0; }
  /* extrato no celular: uma ficha por lançamento (data e valor no alto, descrição, classificação embaixo) */
  .tabela table.extrato, .tabela table.extrato tbody { display: block; }
  .tabela table.extrato thead { display: none; }
  .tabela table.extrato tr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 11px 14px 12px; border-top: 1px solid var(--line); }
  .tabela table.extrato tbody tr:first-child { border-top: 0; }
  .tabela table.extrato tr.semcat, .tabela table.extrato tr.sugerido { box-shadow: inset 3px 0 0 var(--warn); }
  .tabela table.extrato tr.semcat td.sel, .tabela table.extrato tr.sugerido td.sel { box-shadow: none; }
  .tabela table.extrato td { display: block; padding: 0; border: 0; min-width: 0; position: static; background: none; box-shadow: none; }
  .tabela table.extrato td:empty { display: none; }
  .tabela table.extrato td.sel { grid-column: 1; grid-row: 1 / span 3; align-self: start; width: auto; }
  .tabela table.extrato td.sel input { width: 22px; height: 22px; }
  .tabela table.extrato td.data { grid-column: 2; grid-row: 1; color: var(--muted); font-size: 13px; }
  .tabela table.extrato td.num { grid-column: 3; grid-row: 1; font-weight: 600; }
  .tabela table.extrato td.desc { grid-column: 2 / -1; min-width: 0; font-size: 14.5px; }
  .tabela table.extrato td.cat, .tabela table.extrato td.irm, .tabela table.extrato td.comp, .tabela table.extrato td.cta { grid-column: 2 / -1; font-size: 13px; color: var(--fg-2); }
  .tabela table.extrato td.comp::before { content: "competência "; color: var(--muted); }
  .tabela table.extrato td.cta { color: var(--muted); }
  .fin-saldos .card b { font-size: 18px; }
  .fin-mesnav { display: flex; margin: 6px 0 0; }

  /* tabelas do Configurar: fichas; o rótulo de cada campo vem do data-rotulo da célula */
  .tabela table.fin-fichas, .tabela table.fin-fichas tbody { display: block; }
  .tabela table.fin-fichas thead { display: none; }
  .tabela table.fin-fichas tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 14px; padding: 12px 14px; border-top: 1px solid var(--line); }
  .tabela table.fin-fichas tbody tr:first-child { border-top: 0; }
  .tabela table.fin-fichas td { display: block; padding: 0; border: 0; min-width: 0; position: static; background: none; box-shadow: none; font-size: 14px; text-align: left; }
  .tabela table.fin-fichas td:empty { display: none; }
  .tabela table.fin-fichas td:first-child { flex: 1 0 100%; font-size: 15px; }
  .tabela table.fin-fichas td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--muted); font-size: 12.5px; }
  .tabela table.fin-fichas td small.fin-bloco { display: inline; margin-left: 4px; }
  .tabela table.fin-fichas td.acoes { flex: 1 0 100%; text-align: left; padding-top: 4px; }
  .tabela table.fin-fichas td.acoes form.inline { margin-left: 0; }
}
/* ── fim extrato e configurar ── */

/* ── a pagar e a receber, recibos (agente D) ── */
/* src/telas/financeiro/agenda.ts e recibos.ts. Só tokens do app.css (claro e escuro). O recibo vai sozinho para o papel (@media print). */

/* etiquetas: tipo da conta e situação */
.fin-tipo { display: inline-block; padding: 0 8px; border-radius: 999px; font: 600 11.5px/1.75 var(--font); font-style: normal; white-space: nowrap; }
.fin-tipo.receber { background: var(--ok-soft); color: var(--ok); }
.fin-tipo.pagar { background: var(--bad-soft); color: var(--bad); }
.fin-sit { display: inline-block; padding: 0 9px; border-radius: 999px; font: 600 12px/1.75 var(--font); font-style: normal; white-space: nowrap; background: var(--fill); color: var(--fg-2); }
.fin-sit.vencido { background: var(--bad-soft); color: var(--bad); }
.fin-sit.hoje, .fin-sit.breve { background: var(--warn-soft); color: var(--warn); }
.fin-sit.pago { background: var(--ok-soft); color: var(--ok); }
.fin-sit.cancelado { color: var(--muted); }
h1 .fin-sit { vertical-align: middle; font-size: 13px; letter-spacing: 0; }

/* totais em aberto (o .card span do app.css não pode pegar o valor) */
.fin-ag-cards .card b { font: 700 22px/1.25 var(--font); overflow-wrap: anywhere; }
.fin-ag-cards .card:hover { transform: none; box-shadow: var(--shadow); }
.fin-ag-cards .card .valor { display: inline; padding: 0; font: inherit; text-transform: none; letter-spacing: 0; }
.fin-ag-cards .card small .valor { font-weight: 600; }
.fin-ag-cards .card.fin-ag-card-alerta { border-top-color: var(--bad); }
.fin-ag-cards .card.fin-ag-card-alerta b { color: var(--bad); }

/* filtro e listas */
.linha-form.fin-ag-filtro { margin: 0 0 14px; gap: 8px 14px; }
.fin-ag-filtro label { flex-direction: row; align-items: center; gap: 6px; }
.fin-ag-filtro input[type="month"] { width: auto; min-height: 34px; padding: 5px 8px; font-size: 14px; }
.fin-ag-grupo h2 small { font-size: 13px; }
.fin-ag-grupo h2 small .valor { font-weight: 600; }
.fin-ag-vencidos > h2 { color: var(--bad); }
.fin-ag-vencidos .tabela { border-color: var(--bad); }
table.fin-agenda td.desc { min-width: 200px; overflow-wrap: anywhere; }
table.fin-agenda tr.vencido td.venc { color: var(--bad); font-weight: 600; box-shadow: inset 3px 0 0 var(--bad); }
table.fin-agenda tr.atual td { background: var(--gold-soft); }

/* formulários: conta nova, Normativa, baixa */
.fin-ag-tipo { display: flex; flex-direction: column; gap: 5px; }
.fin-ag-rotulo { font-size: 12.5px; font-weight: 600; color: var(--fg-2); letter-spacing: 0.01em; }
.fin-ag-tipo .seg { margin: 0; align-self: flex-start; }
fieldset.fin-ag-pessoa { margin: 0; }
.fin-ag-dica { margin: -6px 0 0; }
.fin-ag-norm-corpo { padding: 4px 18px 16px; }
.fin-ag-norm-corpo .tabela { margin-top: 6px; }
.fin-ag-norm-corpo h3, .fin-ag-baixa h3 { margin: 18px 0 6px; font: 700 12.5px/1.3 var(--display); letter-spacing: 0.06em; color: var(--navy); }
.fin-ag-baixa h3:first-of-type { margin-top: 4px; }
.fin-ag-baixa h3:not(:first-of-type) { padding-top: 14px; border-top: 1px solid var(--line); }
.fin-ag-norm-corpo form.grade, .fin-ag-baixa form.grade { padding: 8px 0 0; }
table.fin-ag-tab-norm td small { display: block; }
ul.fin-ag-lista-cands { list-style: none; margin: 0 0 8px; padding: 0; }
ul.fin-ag-lista-cands li { padding: 8px 0; border-top: 1px solid var(--line); }
ul.fin-ag-lista-cands li:first-child { border-top: 0; }
ul.fin-ag-lista-cands label.check > span { min-width: 0; overflow-wrap: anywhere; }
ul.fin-ag-lista-cands small { display: block; margin-top: 2px; }
.fin-ag-baixa input[type="radio"] { width: 18px; height: 18px; flex: none; margin: 2px 0 0; padding: 0; accent-color: var(--navy); }
@media (prefers-color-scheme: dark) {
  .fin-ag-norm-corpo h3, .fin-ag-baixa h3 { color: var(--gold-2); }
  .fin-ag-baixa input[type="radio"] { accent-color: var(--gold); }
}

/* lista de recibos */
.fin-rec-topo h2 { margin: 26px 0 12px; }
.fin-rec-topo .seg { margin: 14px 0 12px; }
table.fin-recibos td.ref { min-width: 200px; overflow-wrap: anywhere; }
table.fin-recibos tr.cancelado td { color: var(--muted); }
table.fin-recibos tr.cancelado td.nr a, table.fin-recibos tr.cancelado td.num .valor { color: var(--muted); text-decoration: line-through; }

/* o recibo: folha com filete dourado; cancelado leva a marca d'água */
.fin-recibo { position: relative; overflow: hidden; max-width: 780px; margin: 6px 0 18px; padding: 34px 40px 30px; background: var(--card); color: var(--fg);
  border: 1px solid var(--line-2); border-radius: 6px; box-shadow: inset 0 0 0 6px var(--card), inset 0 0 0 7px var(--gold), var(--shadow); }
.fin-rec-cab { display: flex; align-items: center; gap: 18px; padding-bottom: 16px; border-bottom: 2px solid var(--gold); }
.fin-rec-cab p { margin: 0; }
.fin-rec-logo { width: 78px; }
.fin-rec-loja { font: 700 17px/1.3 var(--display); letter-spacing: 0.03em; color: var(--navy); }
.fin-rec-jur { margin-top: 2px; font: italic 500 16px/1.3 var(--serif); color: var(--fg-2); }
.fin-rec-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 22px 0 18px; }
.fin-rec-titulo p { margin: 0; }
.fin-rec-num { font: 700 19px/1.2 var(--display); letter-spacing: 0.08em; color: var(--navy); }
.fin-rec-valor { padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--fill); font: 700 20px/1.2 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-rec-texto { margin: 0 0 18px; font: 500 19px/1.65 var(--serif); text-align: justify; overflow-wrap: break-word; }
.fin-rec-texto b { font-weight: 600; }
.fin-rec-data { margin: 0 0 48px; text-align: right; font-size: 15px; }
.fin-rec-assina { display: flex; flex-direction: column; align-items: center; gap: 2px; width: min(340px, 100%); margin: 0 auto; text-align: center; }
.fin-rec-linha { display: block; width: 100%; margin-bottom: 6px; border-top: 1px solid var(--fg); }
.fin-rec-assina b { min-height: 1.3em; font-size: 15px; }
.fin-rec-assina small { color: var(--muted); font-size: 13px; letter-spacing: 0.04em; }
.fin-rec-cancelado { margin: 26px 0 0; padding: 10px 14px; border: 1px solid var(--bad); border-radius: 8px; background: var(--bad-soft); color: var(--bad); font-size: 14px; }
.fin-recibo.cancelado::after { content: "CANCELADO"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-20deg); pointer-events: none;
  font: 700 76px/1 var(--display); letter-spacing: 0.12em; white-space: nowrap; color: var(--bad); opacity: 0.16; }
.fin-rec-info, details.fin-rec-cancelar { max-width: 780px; }
@media (prefers-color-scheme: dark) {
  .fin-rec-logo { background: #fff; border-radius: 12px; padding: 4px 5px; box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.6); }
  .fin-rec-loja, .fin-rec-num { color: var(--fg); }
}

@media (max-width: 820px) {
  .linha-form.fin-ag-filtro label { flex: 1 1 100%; flex-direction: column; align-items: stretch; }
  .fin-ag-filtro input[type="month"] { width: 100%; min-height: 44px; font-size: 16px; }
  .linha-form.fin-ag-filtro button { flex: 1 1 auto; }
  .fin-ag-tipo .seg { align-self: stretch; }
  .fin-ag-norm-corpo { padding: 4px 14px 14px; }
}

/* celular estreito: as listas viram fichas (o cabeçalho some; posições pela classe de cada célula) */
@media (max-width: 640px) {
  .tabela table.fin-agenda, .tabela table.fin-agenda tbody, .tabela table.fin-recibos, .tabela table.fin-recibos tbody,
  .tabela table.fin-ag-tab-norm, .tabela table.fin-ag-tab-norm tbody { display: block; }
  .tabela table.fin-agenda thead, .tabela table.fin-recibos thead, .tabela table.fin-ag-tab-norm thead { display: none; }
  .tabela table.fin-agenda tr, .tabela table.fin-recibos tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: baseline;
    padding: 11px 14px 12px; border-top: 1px solid var(--line); }
  .tabela table.fin-agenda tbody tr:first-child, .tabela table.fin-recibos tbody tr:first-child, .tabela table.fin-ag-tab-norm tbody tr:first-child { border-top: 0; }
  .tabela table.fin-agenda td, .tabela table.fin-recibos td, .tabela table.fin-ag-tab-norm td { display: block; padding: 0; border: 0; min-width: 0; position: static;
    background: none; box-shadow: none; text-align: left; }
  /* contas: vencimento | valor · descrição · de/para | tipo · categoria | situação */
  .tabela table.fin-agenda td.venc { grid-column: 1; grid-row: 1; color: var(--muted); font-size: 13px; }
  .tabela table.fin-agenda td.num { grid-column: 2; grid-row: 1; font-weight: 600; text-align: right; }
  .tabela table.fin-agenda td.desc { grid-column: 1 / -1; grid-row: 2; font-size: 14.5px; }
  .tabela table.fin-agenda td.pes { grid-column: 1; grid-row: 3; font-size: 13px; color: var(--fg-2); }
  .tabela table.fin-agenda td.tp { grid-column: 2; grid-row: 3; text-align: right; }
  .tabela table.fin-agenda td.cat { grid-column: 1; grid-row: 4; font-size: 13px; color: var(--fg-2); }
  .tabela table.fin-agenda td.st { grid-column: 2; grid-row: 4; text-align: right; }
  .tabela table.fin-agenda tr.vencido { box-shadow: inset 3px 0 0 var(--bad); }
  .tabela table.fin-agenda tr.vencido td.venc { box-shadow: none; }
  .tabela table.fin-agenda tr.atual { background: var(--gold-soft); }
  .tabela table.fin-agenda tr.atual td { background: none; }
  /* recibos: número | valor · pagador · referente · data | situação */
  .tabela table.fin-recibos td.nr { grid-column: 1; grid-row: 1; font-weight: 600; }
  .tabela table.fin-recibos td.num { grid-column: 2; grid-row: 1; font-weight: 600; text-align: right; }
  .tabela table.fin-recibos td.pag { grid-column: 1 / -1; grid-row: 2; font-size: 14.5px; }
  .tabela table.fin-recibos td.ref { grid-column: 1 / -1; grid-row: 3; font-size: 13px; color: var(--fg-2); min-width: 0; }
  .tabela table.fin-recibos td.data { grid-column: 1; grid-row: 4; color: var(--muted); font-size: 13px; }
  .tabela table.fin-recibos td.st { grid-column: 2; grid-row: 4; text-align: right; }
  /* tabela da Normativa: o caso em cima, as quatro partes embaixo com o rótulo */
  .tabela table.fin-ag-tab-norm tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; padding: 11px 12px; border-top: 1px solid var(--line); }
  .tabela table.fin-ag-tab-norm td:first-child { grid-column: 1 / -1; font-weight: 600; font-size: 14px; }
  .tabela table.fin-ag-tab-norm td.num { font-size: 13.5px; }
  .tabela table.fin-ag-tab-norm td:nth-child(2)::before { content: "Templo"; }
  .tabela table.fin-ag-tab-norm td:nth-child(3)::before { content: "Loja"; }
  .tabela table.fin-ag-tab-norm td:nth-child(4)::before { content: "GLSC"; }
  .tabela table.fin-ag-tab-norm td:nth-child(5)::before { content: "Total"; }
  .tabela table.fin-ag-tab-norm td.num::before { display: block; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
  .fin-ag-cards .card b { font-size: 19px; }
  /* o recibo na tela do celular */
  .fin-recibo { padding: 22px 18px; }
  .fin-rec-cab { gap: 12px; }
  .fin-rec-logo { width: 56px; }
  .fin-rec-loja, .fin-rec-jur { font-size: 14.5px; }
  .fin-rec-num, .fin-rec-valor { font-size: 17px; }
  .fin-rec-texto { font-size: 17px; text-align: left; }
  .fin-rec-data { margin-bottom: 40px; }
  .fin-recibo.cancelado::after { font-size: 44px; }
}

/* impressão do recibo: só a folha (sem menu, barras, abas, título da tela nem controles), em cores claras */
@media print {
  body:has(.fin-recibo) { background: #fff; }
  body:has(.fin-recibo) .side, body:has(.fin-recibo) .tabbar, body:has(.fin-recibo) .subabas, body:has(.fin-recibo) .topo-cel, body:has(.fin-recibo) .topline,
  body:has(.fin-recibo) .aviso, body:has(.fin-recibo) .fin-rec-tela, body:has(.fin-recibo) .fin-rec-info, body:has(.fin-recibo) details.fin-rec-cancelar { display: none; }
  body:has(.fin-recibo) .app { display: block; min-height: 0; }
  body:has(.fin-recibo) .content { padding: 0; max-width: none; }
  .fin-recibo { --card: #fff; --fill: #f3f3f3; --line-2: #8a8a8a; --fg: #000; --fg-2: #222; --muted: #444; --navy: #000; --gold: #9a7a12; --bad: #b3261e; --bad-soft: #fbeceb;
    max-width: none; margin: 0; padding: 30px 36px 28px; color: #000; background: #fff; border: 1px solid #8a8a8a; break-inside: avoid;
    box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 7px #9a7a12; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .fin-rec-logo { width: 78px; background: none; padding: 0; box-shadow: none; }
  .fin-rec-loja, .fin-rec-num { color: #000; }
  .fin-rec-texto { font-size: 18px; text-align: justify; }
  .fin-recibo.cancelado::after { font-size: 76px; opacity: 0.2; }
}
/* ── fim a pagar e a receber, recibos ── */

/* ── painel, mensalidades e relatórios (agente C) ── */
/* cartões (o valor não quebra entre o "R$" e o número) */
.cards.fin-cards .card b { font-size: 24px; white-space: nowrap; }
.card b.fin-neg { color: var(--bad); }
.card b small.fin-de { font: 500 13px var(--font); color: var(--muted); }
.card.fin-card-alerta { border-top-color: var(--warn); }
.painel.fin-alerta { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft), var(--shadow); }

/* painel: contas */
ul.fin-contas { list-style: none; margin: 0; padding: 0; }
ul.fin-contas li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; border-top: 1px solid var(--line); }
ul.fin-contas li:first-child { border-top: 0; }
ul.fin-contas li > a { display: flex; flex-direction: column; min-width: 0; color: var(--fg); }
ul.fin-contas li > a:hover { text-decoration: none; }
ul.fin-contas li > a:hover b { text-decoration: underline; }
ul.fin-contas li > a small { font-size: 12.5px; }
ul.fin-contas .fin-saldo { font-weight: 600; font-size: 15px; }
ul.fin-contas li.fin-contas-total { border-top: 2px solid var(--line-2); }

/* painel: a pagar e a receber */
.fin-prev-tot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 10px; }
.fin-prev-tot > div { padding: 10px 12px; border-radius: 12px; background: var(--fill); }
.fin-prev-tot > div.fin-vencido { background: var(--bad-soft); }
.fin-prev-tot span { display: block; color: var(--muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
.fin-prev-tot b { display: block; font: 700 22px/1.25 var(--display); color: var(--navy); }
.fin-prev-tot .fin-vencido b { color: var(--bad); }
.fin-prev-tot small { display: block; color: var(--fg-2); font-size: 12.5px; }
.linha.fin-prev { grid-template-columns: 52px auto minmax(0, 1fr) auto; }
.linha.fin-prev.vencido .quando { color: var(--bad); }
.linha.fin-prev .valor { font-weight: 600; text-align: right; }
.linha.fin-imp { grid-template-columns: 104px minmax(0, 1fr) auto; }
.linha.fin-imp .titulo small, .linha.fin-prev .titulo small { display: block; }
.tag.fin-pagar { background: var(--bad-soft); color: var(--bad); }
.tag.fin-receber { background: var(--ok-soft); color: var(--ok); }

/* painel: mensalidades */
.fin-mens-resumo p { margin: 0 0 10px; font-size: 14px; }
.fin-mens-resumo .fin-num { font: 700 20px var(--display); color: var(--ok); }
.fin-mens-resumo .fin-num.fin-atraso { color: var(--bad); }
.fin-mens-resumo p.fin-prog-txt { margin: 0 0 6px; font-size: 14px; }
.fin-mens-resumo svg.fin-prog { margin: 0 0 10px; }

/* painel: receitas × despesas por mês (SVG por mês, cores aqui) */
.fin-legenda i.fin-l-rec { background: var(--navy); }
.fin-legenda i.fin-l-desp { background: var(--gold); }
.fin-colunas { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; padding: 4px 2px 2px; }
.fin-col { flex: 1 0 34px; display: flex; flex-direction: column; align-items: center; gap: 4px; border-radius: 8px; padding: 2px 0; color: var(--fg-2); }
.fin-col:hover { background: var(--fill); text-decoration: none; }
.fin-col svg { width: 100%; height: 160px; overflow: visible; }
.fin-b-rec { fill: var(--navy); }
.fin-b-desp { fill: var(--gold); }
.fin-base { stroke: var(--line-2); stroke-width: 1; }
.fin-c-rot { font: 500 11.5px/1 var(--font); color: var(--muted); white-space: nowrap; }
.fin-col.atual .fin-c-rot { color: var(--fg); font-weight: 700; }
.fin-col.atual { box-shadow: inset 0 -2px 0 var(--gold); }
ul.barras.fin-barras li { grid-template-columns: minmax(110px, 36%) minmax(0, 1fr) 128px; }

/* painel vazio: passos para começar */
ol.fin-passos { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; max-width: 760px; }
a.fin-passo { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: var(--radius); box-shadow: var(--shadow); color: var(--fg); }
a.fin-passo:hover { text-decoration: none; box-shadow: 0 0 0 3px var(--gold-soft), var(--shadow); }
a.fin-passo .ic { width: 26px; height: 26px; flex: none; color: var(--navy); }
a.fin-passo b { display: block; color: var(--navy); font-size: 16px; }
a.fin-passo small { display: block; color: var(--muted); }
.fin-passo-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); font: 700 15px var(--display); }

/* mensalidades: grade irmãos × meses */
table.mens { font-size: 13.5px; }
table.mens th, table.mens td { padding: 8px 8px; vertical-align: middle; }
table.mens th.mc-h { text-align: center; font-size: 11px; }
table.mens th.mc-h small { display: block; font: 500 10px var(--font); color: var(--muted); letter-spacing: 0; }
table.mens th.mc-h.atual { box-shadow: inset 0 -2px 0 var(--gold); }
table.mens td.mc { text-align: center; white-space: nowrap; font-size: 12px; min-width: 52px; font-variant-numeric: tabular-nums; }
table.mens td.mc-pago { color: var(--ok); font-weight: 700; font-size: 14px; }
table.mens td.mc-parcial { color: var(--gold-ink); font-weight: 600; background: var(--gold-soft); }
table.mens td.mc-aberto { color: var(--warn); }
table.mens td.mc-atrasado { color: var(--bad); background: var(--bad-soft); font-weight: 600; }
table.mens td.mc-isento { color: var(--muted); font-style: italic; }
table.mens td.mc-nd, table.mens td.mc-futuro { color: var(--muted); }
table.mens td.num { white-space: nowrap; }
table.mens tfoot td { font-weight: 600; color: var(--fg-2); border-top: 2px solid var(--line-2); }
table.mens td.mens-sit { min-width: 128px; }
table.mens td.mens-sit small { display: block; margin-top: 2px; font-size: 11.5px; white-space: nowrap; }
table.mens td.num { font-size: 13px; }
.fin-leg-atraso { color: var(--bad); background: var(--bad-soft); padding: 0 5px; border-radius: 4px; font-weight: 600; }

/* mensalidades: cobrança fraterna, valores e isenções */
ul.fin-cobranca { list-style: none; margin: 0; padding: 0; }
ul.fin-cobranca li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--line); flex-wrap: wrap; }
ul.fin-cobranca li:first-child { border-top: 0; }
ul.fin-cobranca li > span { display: flex; flex-direction: column; min-width: 0; }
a.botao.fin-zap { padding: 7px 14px; font-size: 13px; background: linear-gradient(180deg, #1f8f4e, #17703c); }
table.fin-lista td { vertical-align: middle; }
table.fin-lista small.fin-quem { display: block; font-size: 11.5px; }
table.fin-lista form { margin: 0; }

/* relatórios: período e abas */
.fin-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; }
.fin-atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.fin-atalhos a { padding: 5px 12px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg-2); font-size: 13px; white-space: nowrap; }
.fin-atalhos a:hover { text-decoration: none; background: var(--fill); }
.fin-atalhos a.on { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold); color: var(--fg); font-weight: 600; }
form.fin-de-ate label { flex-direction: row; align-items: center; gap: 6px; }
form.fin-de-ate input { width: auto; min-height: 36px; padding: 5px 8px; font-size: 14px; }
a.botao.fin-csv { padding: 7px 14px; font-size: 13px; }
.painel .cards.fin-cards { margin: 4px 0 14px; }

/* relatórios: tabelas (balancete, mês a mês, prestação) */
table.fin-rel { font-size: 14px; }
table.fin-rel td, table.fin-rel th { padding: 7px 10px; }
table.fin-rel tr.fin-tit th { background: var(--fill); color: var(--navy); font: 700 12px/1.4 var(--display); letter-spacing: 0.08em; text-transform: uppercase; border-top: 1px solid var(--line-2); }
table.fin-rel tr.fin-grupo td { font-weight: 600; color: var(--fg-2); }
table.fin-rel td.fin-cat { padding-left: 22px; }
table.fin-rel .fin-cod { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
table.fin-rel tr.fin-semcat td, table.fin-rel tr.fin-semcat a { color: var(--warn); }
table.fin-rel tr.fin-total td { font-weight: 700; border-top: 2px solid var(--line-2); }
table.fin-rel tr.fin-resultado td { font-weight: 700; font-size: 15px; border-top: 2px solid var(--gold); background: var(--gold-soft); }
table.fin-rel td.fin-zero { color: var(--muted); }
table.fin-rel td.fin-soma { font-weight: 700; }
table.fin-mensal { font-size: 13px; }
table.fin-mensal th.num { white-space: nowrap; }
table.fin-mensal tr > :first-child { min-width: 210px; }
.painel h3 small { font-weight: 400; }

/* prestação de contas (para imprimir) */
.prest { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 28px; max-width: 860px; }
.prest-cab { display: flex; align-items: center; gap: 18px; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 2px solid var(--gold); }
.prest-logo { width: 78px; }
.prest-cab h2 { margin: 2px 0 6px; font-size: 19px; }
.prest-cab p { margin: 0; }
.prest-loja { font: italic 600 18px/1.3 var(--serif); color: var(--gold-ink); }
.prest-sec { margin: 16px 0 0; }
.prest h3 { margin: 0 0 6px; font: 700 13.5px/1.3 var(--display); letter-spacing: 0.05em; color: var(--navy); }
.prest h3 small { font: 400 12.5px var(--font); letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.prest table.fin-rel { border: 1px solid var(--line); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.prest table.fin-rel tr:first-child td, .prest table.fin-rel thead th { border-top: 0; }
.prest table.prest-comp { margin: 0 0 10px; }
.prest-ok { margin: 8px 0 0; color: var(--ok); font-weight: 600; }
.prest-dif { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.prest-emissao { margin: 22px 0 0; color: var(--fg-2); }
.assinaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 34px 28px; margin: 18px 0 0; }
.ass { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ass-linha { display: block; width: 100%; margin-top: 44px; border-top: 1px solid var(--fg); }
.ass b { margin-top: 6px; font-size: 14px; }
.ass small { color: var(--muted); font-size: 12.5px; }

@media (max-width: 820px) {
  .cards.fin-cards .card b { font-size: 18px; }
  .fin-col { flex-basis: 22px; }
  table.mens td.mens-sit { min-width: 112px; }
  table.fin-mensal tr > :first-child { min-width: 150px; }
  .linha.fin-prev { grid-template-columns: auto auto minmax(0, 1fr); }
  .linha.fin-prev .valor { grid-row: 1; grid-column: 3; justify-self: end; }
  .linha.fin-imp .tag { grid-row: 1; grid-column: 3; justify-self: end; }
  ul.barras.fin-barras li { grid-template-columns: minmax(84px, 34%) minmax(0, 1fr) 96px; }
  .fin-col svg { height: 130px; }
  form.fin-de-ate { width: 100%; }
  form.fin-de-ate label { flex: 1 1 140px; }
  form.fin-de-ate input { width: 100%; min-height: 44px; font-size: 16px; }
  .prest { padding: 16px 14px; }
  .prest-logo { width: 56px; }
  .assinaturas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) { .fin-prev-tot { grid-template-columns: minmax(0, 1fr); } }

/* impressão da prestação de contas: só o documento (sem menu, barras, abas e controles), em cores claras */
@media print {
  body:has(.prest) { background: #fff; }
  body:has(.prest) .side, body:has(.prest) .tabbar, body:has(.prest) .subabas, body:has(.prest) .topo-cel, body:has(.prest) .topline,
  body:has(.prest) .aviso, body:has(.prest) .fin-nao-imprime { display: none; }
  body:has(.prest) .app { display: block; min-height: 0; }
  body:has(.prest) .content { padding: 0; max-width: none; }
  .prest { --card: #fff; --fill: #f1f1f1; --line: #c8c8c8; --line-2: #8a8a8a; --fg: #000; --fg-2: #222; --muted: #555; --navy: #000;
    --gold: #9a7a12; --gold-ink: #5c4709; --gold-soft: #f4efe0; --ok: #1d7a43; --bad: #b3261e; --bad-soft: #fbeceb; --warn: #9a5b00;
    color: #000; background: #fff; border: 0; box-shadow: none; padding: 0; max-width: none; }
  .prest h2, .prest h3 { color: #000; }
  .prest-sec, .prest table tr, .ass { break-inside: avoid; }
  .assinaturas { break-inside: avoid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prest a { color: inherit; text-decoration: none; }
}

/* painel redesenhado (23/10/2026): destaque do saldo no brasão marinho, como o Início; linha do saldo e da projeção; roscas */
section.fin-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 22px;
  align-items: end; margin: 0 0 16px; padding: 22px 24px 18px; border-radius: var(--radius); color: #fff; box-shadow: var(--shadow-lg);
  background: radial-gradient(640px 260px at 92% -30%, rgba(230, 200, 104, 0.26), transparent 62%), var(--brasao);
  animation: subir 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.fin-hero-num { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fin-hero-rot { color: var(--gold-2); font: 600 11.5px var(--font); text-transform: uppercase; letter-spacing: 0.12em; }
.fin-hero-num > b { font: 700 40px/1.05 var(--display); letter-spacing: 0.01em; white-space: nowrap; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); }
.fin-hero-num > b.fin-neg { color: #ffb4ab; }
.fin-hero-num > small.muted { color: rgba(255, 255, 255, 0.72); font-size: 12.5px; }
.fin-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; }
em.fin-chip { font: 600 12.5px var(--font); font-style: normal; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #fff; }
em.fin-chip.sobe { background: rgba(92, 201, 138, 0.22); color: #c9f2d9; }
em.fin-chip.desce { background: rgba(255, 140, 120, 0.22); color: #ffd2cb; }
.fin-hero-graf { min-width: 0; }
.fin-hero-eixo { display: flex; justify-content: space-between; margin-top: 2px; }
.fin-hero-eixo small { font-size: 11px; color: var(--muted); }
section.fin-hero .fin-hero-eixo small { color: rgba(255, 255, 255, 0.6); }

svg.linha { display: block; width: 100%; height: 110px; overflow: visible; }
svg.linha .l-area { fill: var(--navy-soft); stroke: none; }
svg.linha .l-traco { stroke: var(--navy); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
svg.linha .l-zero { stroke: var(--bad); stroke-width: 1; stroke-dasharray: 4 3; }
svg.linha .l-ponto { fill: var(--gold); }
svg.linha.fin-l-saldo { height: 96px; }
svg.linha.fin-l-saldo .l-area { fill: rgba(230, 200, 104, 0.16); }
svg.linha.fin-l-saldo .l-traco { stroke: var(--gold-2); stroke-width: 2.6; stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: tracar 1.6s ease-out 0.3s forwards; }
svg.linha.fin-l-proj .l-traco { stroke: var(--ok); }
svg.linha.fin-l-proj .l-area { fill: var(--ok-soft); }
svg.linha.fin-l-proj.negativo .l-traco { stroke: var(--bad); }
svg.linha.fin-l-proj.negativo .l-area { fill: var(--bad-soft); }
@keyframes tracar { to { stroke-dashoffset: 0; } }
p.fin-proj-txt { margin: 8px 0 4px; font-size: 14px; }

/* cartão das mensalidades com o anel */
.card.fin-card-anel .fin-anel-linha { display: flex; align-items: center; gap: 12px; padding-right: 0; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--fg-2); }
.card.fin-card-anel .fin-anel-linha span, .card.fin-card-anel .fin-anel-linha small { text-transform: none; letter-spacing: 0; padding-right: 0; }
.fin-anel-txt { display: flex; flex-direction: column; min-width: 0; }
.card.fin-card-anel .fin-anel-txt .fin-anel-arrec { font: 700 18px/1.2 var(--display); color: var(--navy); white-space: nowrap; }
.card.fin-card-anel .fin-anel-txt small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.card.fin-card-anel .fin-anel-txt .fin-atraso-n { display: inline; color: var(--bad); font-weight: 600; font-size: inherit; }
svg.anel.fin-anel { width: 64px; height: 64px; }
svg.anel.fin-anel .arco { stroke: var(--gold); }

/* roscas: de onde vem e para onde vai */
.rosca { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; }
.rosca svg { width: 150px; height: 150px; transform: rotate(0deg); }
.rosca .trilho { stroke: var(--fill); }
.rosca .r-num { font: 700 5.4px var(--display); fill: var(--fg); }
.rosca .r-sub { font: 500 3.2px var(--font); fill: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.rosca .r-fatia { animation: subir 0.5s ease-out both; }
.rosca .f0 { stroke: var(--navy); } .rosca .f1 { stroke: var(--gold); } .rosca .f2 { stroke: var(--ok); }
.rosca .f3 { stroke: #8a5a2b; } .rosca .f4 { stroke: #7b6fb0; } .rosca .f5 { stroke: var(--muted); }
ul.r-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
ul.r-legenda li > a, ul.r-legenda li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; color: var(--fg); font-size: 13.5px; }
ul.r-legenda li > a { grid-column: 1 / -1; }
ul.r-legenda li > a:hover { text-decoration: none; } ul.r-legenda li > a:hover span { text-decoration: underline; }
ul.r-legenda i { width: 10px; height: 10px; border-radius: 3px; align-self: center; }
ul.r-legenda i.f0 { background: var(--navy); } ul.r-legenda i.f1 { background: var(--gold); } ul.r-legenda i.f2 { background: var(--ok); }
ul.r-legenda i.f3 { background: #8a5a2b; } ul.r-legenda i.f4 { background: #7b6fb0; } ul.r-legenda i.f5 { background: var(--muted); }
ul.r-legenda span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.r-legenda small { grid-column: 2 / -1; color: var(--muted); font-size: 12px; }
@media (prefers-color-scheme: dark) { .rosca .f3 { stroke: #d8a066; } ul.r-legenda i.f3 { background: #d8a066; }
  .rosca .f4 { stroke: #a99ee0; } ul.r-legenda i.f4 { background: #a99ee0; } }

/* indicadores */
dl.fin-ind { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
dl.fin-ind > div { padding: 10px 12px; border-radius: 12px; background: var(--fill); min-width: 0; }
dl.fin-ind dt { color: var(--muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
dl.fin-ind dd { margin: 2px 0 0; font: 700 18px/1.25 var(--display); color: var(--navy); white-space: nowrap; }
dl.fin-ind dd.fin-neg { color: var(--bad); }
dl.fin-ind small { color: var(--muted); font-size: 11.5px; }

@media (max-width: 760px) {
  section.fin-hero { grid-template-columns: minmax(0, 1fr); padding: 18px 16px 14px; }
  .fin-hero-num > b { font-size: 32px; }
  dl.fin-ind { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rosca { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
  .rosca svg { width: 112px; height: 112px; }
  svg.anel.fin-anel { width: 52px; height: 52px; }
  .cards.fin-cards .card.fin-card-anel { grid-column: 1 / -1; order: 1; }
  .cards.fin-cards > .card:nth-child(4) { grid-column: 1 / -1; }
  .card.fin-card-anel .fin-anel-linha { gap: 8px; }
  .card.fin-card-anel .fin-anel-txt .fin-anel-arrec { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  section.fin-hero, .rosca .r-fatia { animation: none; }
  svg.linha.fin-l-saldo .l-traco { animation: none; stroke-dashoffset: 0; }
}
/* ── fim painel, mensalidades e relatórios ── */