/* 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); }
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); }
.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));
    background: color-mix(in srgb, var(--card) 94%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px);
    border-top: 1px solid var(--line-2); box-shadow: 0 -4px 18px rgba(20, 30, 50, 0.06); }
  .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; right: 18%; 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 { position: fixed; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: calc(64px + env(safe-area-inset-bottom));
    max-height: calc(100vh - 80px - env(safe-area-inset-bottom)); overflow-y: auto; background: var(--card); border: 1px solid var(--line-2);
    border-radius: 14px; padding: 6px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; }
  .folha a { padding: 11px 10px; }
  .folha form { padding: 0; margin-top: 2px; border-top: 1px solid var(--line); }
  .folha button.link { display: block; width: 100%; text-align: left; padding: 12px 10px 10px 39px; font-weight: 500; }
  .folha .badge { position: static; margin-left: auto; }
  .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); }

  /* 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; }
}