/* Kit de componentes dos artefatos. Cor so por token do tema.css (claro e escuro); nada literal aqui.
   Componentes em light DOM com prefixo a-, montados pelo kit.js. */
:root {
  --a-alvo: 2.5rem;            /* alvo de toque minimo, 40px */
  --a-miolo: 72rem;
  --a-gutter: max(16px, var(--e-4));
  --a-dur: 180ms;
  --a-curva: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: var(--fs-m); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; }
[hidden] { display: none !important; }
:where(h1, h2, h3, h4) { line-height: 1.2; margin: 0 0 var(--e-2); text-wrap: balance; }
:where(p) { margin: 0 0 var(--e-3); text-wrap: pretty; }
:where(a) { color: var(--acento); text-underline-offset: .18em; }
:where(a):hover { color: var(--acento-forte); }
:where(code, pre, kbd) { font-family: var(--fonte-mono); font-size: .92em; }
:where(:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.a-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.a-suave { color: var(--texto-suave); }
.a-pilha > * + * { margin-top: var(--e-4); }

/* ---------- botoes e campos ---------- */
.a-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--a-alvo); padding: var(--e-2) var(--e-4);
  font: 600 var(--fs-s)/1.2 var(--fonte); text-decoration: none; white-space: nowrap;
  color: var(--sobre-acento); background: var(--acento); border: 1px solid var(--acento);
  border-radius: var(--raio-s); cursor: pointer;
  transition: background var(--a-dur) var(--a-curva), border-color var(--a-dur) var(--a-curva), transform var(--a-dur) var(--a-curva);
}
.a-btn:hover { background: var(--acento-forte); border-color: var(--acento-forte); color: var(--sobre-acento); }
.a-btn:active { transform: translateY(1px); }
.a-btn[disabled] { opacity: .55; cursor: not-allowed; }
.a-btn--sec { color: var(--texto); background: var(--superficie); border-color: var(--borda); }
.a-btn--sec:hover { color: var(--texto); background: var(--superficie-2); border-color: var(--texto-suave); }
.a-btn--fantasma { color: var(--texto-suave); background: transparent; border-color: transparent; }
.a-btn--fantasma:hover { color: var(--texto); background: var(--superficie-2); border-color: transparent; }
.a-btn--perigo { color: var(--erro); background: var(--erro-suave); border-color: transparent; }
.a-btn--perigo:hover { color: var(--erro); background: var(--erro-suave); border-color: var(--erro); }
.a-btn--icone { padding: 0; width: var(--a-alvo); }
.a-btn svg, .a-ico { width: 1.15em; height: 1.15em; flex: none; }

:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) {
  width: 100%; min-height: var(--a-alvo); padding: var(--e-2) var(--e-3);
  font: inherit; font-size: var(--fs-m); font-weight: 400; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-s);
  transition: border-color var(--a-dur) var(--a-curva), box-shadow var(--a-dur) var(--a-curva);
}
:where(textarea) { min-height: 6rem; resize: vertical; }
:where(input, select, textarea):focus-visible { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
:where(input[type="checkbox"], input[type="radio"]) { width: 1.2rem; height: 1.2rem; accent-color: var(--acento); margin: 0; }
:where(label) { font-weight: 600; font-size: var(--fs-s); }
.a-campo { display: grid; gap: var(--e-1); margin-bottom: var(--e-4); }
.a-campo > label { display: block; }
.a-campo .a-dica { font-size: var(--fs-xs); color: var(--texto-suave); font-weight: 400; }
.a-opcao { display: flex; align-items: center; gap: var(--e-2); min-height: var(--a-alvo); font-weight: 400; font-size: var(--fs-m); cursor: pointer; }
.a-linha { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.a-linha--fim { justify-content: flex-end; }
.a-colunas { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

.a-selo {
  display: inline-flex; align-items: center; gap: var(--e-1); padding: .15em .6em;
  font-size: var(--fs-xs); font-weight: 600; border-radius: 999px;
  color: var(--acento-forte); background: var(--acento-suave);
}
.a-selo--ok { color: var(--ok); background: var(--ok-suave); }
.a-selo--alerta { color: var(--alerta); background: var(--alerta-suave); }
.a-selo--erro { color: var(--erro); background: var(--erro-suave); }
.a-selo--neutro { color: var(--texto-suave); background: var(--superficie-2); }

/* ---------- a-pagina ---------- */
a-pagina { display: block; min-height: 100vh; }
.a-miolo { width: 100%; max-width: var(--a-miolo); margin-inline: auto; padding-inline: var(--a-gutter); }
.a-pagina__topo { border-bottom: 1px solid var(--borda); background: var(--superficie); }
.a-pagina__topo .a-miolo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-3); padding-block: var(--e-5) var(--e-4); }
.a-pagina__titulo { font-size: var(--fs-xxl); letter-spacing: -.02em; margin: 0; }
.a-pagina__sub { color: var(--texto-suave); font-size: var(--fs-l); margin: var(--e-2) 0 0; max-width: 60ch; }
.a-pagina__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.a-pagina__corpo { padding-block: var(--e-5) var(--e-6); }
.a-pagina__corpo > * + * { margin-top: var(--e-5); }

/* ---------- a-card ---------- */
a-card {
  display: block; min-width: 0; padding: var(--e-4);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.a-card__titulo { font-size: var(--fs-l); margin: 0 0 var(--e-3); }
a-card > :last-child { margin-bottom: 0; }

/* ---------- a-grade + a-kpi ---------- */
a-grade, .a-grade { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
a-kpi {
  display: block; min-width: 0; container-type: inline-size;
  padding: var(--e-3) var(--e-4); background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
}
.a-kpi__rotulo { display: block; font-size: var(--fs-s); color: var(--texto-suave); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-kpi__valor {
  display: block; margin-top: var(--e-1); font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: clamp(1.15rem, 15cqi, 2.2rem);
}
.a-kpi__afixo { font-size: .6em; font-weight: 600; color: var(--texto-suave); letter-spacing: 0; }
.a-kpi__var { display: inline-flex; align-items: center; gap: .2em; margin-top: var(--e-2); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; padding: .1em .5em; border-radius: 999px; color: var(--texto-suave); background: var(--superficie-2); }
.a-kpi__var svg { width: 1em; height: 1em; }
.a-kpi__var--sobe { color: var(--ok); background: var(--ok-suave); }
.a-kpi__var--desce { color: var(--erro); background: var(--erro-suave); }

/* ---------- a-tabela ---------- */
a-tabela { display: block; min-width: 0; }
.a-tabela__barra { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); align-items: center; justify-content: space-between; margin-bottom: var(--e-3); }
.a-tabela__busca { position: relative; flex: 1 1 14rem; max-width: 24rem; }
.a-tabela__busca svg { position: absolute; left: var(--e-3); top: 50%; translate: 0 -50%; width: 1.05rem; height: 1.05rem; color: var(--texto-suave); pointer-events: none; }
.a-tabela__busca input { padding-left: calc(var(--e-3) * 2 + 1rem); }
.a-tabela__conta { font-size: var(--fs-s); color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.a-tabela__rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); -webkit-overflow-scrolling: touch; }
a-tabela table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
a-tabela th, a-tabela td { padding: var(--e-2) var(--e-3); text-align: left; border-bottom: 1px solid var(--borda); white-space: nowrap; }
a-tabela tbody tr:last-child td { border-bottom: 0; }
a-tabela tbody tr:hover { background: var(--superficie-2); }
a-tabela th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); background: var(--superficie-2); font-weight: 600; }
a-tabela th:has(> .a-tabela__ordem) { padding: 0; }
a-tabela .a-num, a-tabela td.a-num, a-tabela th.a-num { text-align: right; }
.a-tabela__ordem {
  display: flex; align-items: center; gap: var(--e-1); width: 100%; min-height: var(--a-alvo); padding: var(--e-2) var(--e-3);
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; background: none; border: 0; cursor: pointer; text-align: inherit;
}
th.a-num .a-tabela__ordem { justify-content: flex-end; }
.a-tabela__ordem:hover { color: var(--texto); }
.a-tabela__ordem svg { width: .9rem; height: .9rem; opacity: .35; transition: transform var(--a-dur) var(--a-curva), opacity var(--a-dur); }
th[aria-sort] .a-tabela__ordem { color: var(--texto); }
th[aria-sort] .a-tabela__ordem svg { opacity: 1; }
th[aria-sort="descending"] .a-tabela__ordem svg { transform: rotate(180deg); }
.a-tabela__vazio td { text-align: center; color: var(--texto-suave); padding: var(--e-5) var(--e-3); white-space: normal; }

/* ---------- a-form (e passos) ---------- */
a-form { display: block; }
a-form form { margin: 0; }
.a-campo__erro { display: flex; align-items: center; gap: var(--e-1); color: var(--erro); font-size: var(--fs-xs); font-weight: 600; }
.a-campo__erro:empty { display: none; }
.a-campo__erro svg { width: 1em; height: 1em; flex: none; }
[aria-invalid="true"] { border-color: var(--erro) !important; }
[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px var(--erro-suave) !important; }
a-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
a-form legend { font-size: var(--fs-l); font-weight: 700; padding: 0; margin-bottom: var(--e-3); }
.a-passos { display: flex; gap: var(--e-2); margin: 0 0 var(--e-4); padding: 0; list-style: none; counter-reset: passo; }
.a-passos li { flex: 1; min-width: 0; counter-increment: passo; font-size: var(--fs-xs); color: var(--texto-suave); font-weight: 600; }
.a-passos li::before { content: ""; display: block; height: 4px; border-radius: 4px; background: var(--borda); margin-bottom: var(--e-2); transition: background var(--a-dur); }
.a-passos li span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-passos li[data-estado="feito"]::before, .a-passos li[aria-current="step"]::before { background: var(--acento); }
.a-passos li[aria-current="step"] { color: var(--texto); }
.a-passos__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2); margin-top: var(--e-4); }
.a-passos__nav > :only-child { margin-left: auto; }

/* ---------- a-abas ---------- */
a-abas { display: block; min-width: 0; }
.a-abas__lista { display: flex; gap: var(--e-1); border-bottom: 1px solid var(--borda); margin-bottom: var(--e-4); overflow-x: auto; scrollbar-width: thin; }
.a-abas__aba {
  flex: none; min-height: var(--a-alvo); padding: var(--e-2) var(--e-3); margin-bottom: -1px;
  font: 600 var(--fs-s)/1.2 var(--fonte); color: var(--texto-suave); background: none;
  border: 0; border-bottom: 2px solid transparent; cursor: pointer; border-radius: var(--raio-s) var(--raio-s) 0 0;
}
.a-abas__aba:hover { color: var(--texto); background: var(--superficie-2); }
.a-abas__aba[aria-selected="true"] { color: var(--acento); border-bottom-color: var(--acento); }
.a-abas__aba:focus-visible { outline-offset: -2px; }
a-abas > section[hidden] { display: none; }
a-abas > section:focus-visible { outline-offset: 4px; border-radius: var(--raio-s); }

/* ---------- a-modal ---------- */
a-modal { display: contents; }
.a-modal__caixa {
  width: min(36rem, calc(100vw - 32px)); max-height: min(85vh, 48rem); padding: 0;
  color: var(--texto); background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden;
}
.a-modal__caixa[open] { display: flex; flex-direction: column; animation: a-surge var(--a-dur) var(--a-curva); }
.a-modal__caixa::backdrop { background: var(--veu); }
.a-modal__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4); border-bottom: 1px solid var(--borda); }
.a-modal__topo h2 { font-size: var(--fs-l); margin: 0; }
.a-modal__corpo { padding: var(--e-4); overflow-y: auto; }
.a-modal__corpo > :last-child { margin-bottom: 0; }
@keyframes a-surge { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------- toast ---------- */
.a-toasts {
  position: fixed; z-index: 2147483100; left: 50%; translate: -50% 0;
  bottom: calc(var(--e-5) + env(safe-area-inset-bottom, 0px));
  display: grid; gap: var(--e-2); width: min(26rem, calc(100vw - 32px)); pointer-events: none;
}
.a-toast {
  display: flex; align-items: flex-start; gap: var(--e-2); padding: var(--e-3) var(--e-4);
  font-size: var(--fs-s); font-weight: 500; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borda); border-left: 4px solid var(--ok); border-radius: var(--raio);
  box-shadow: var(--sombra); pointer-events: auto; animation: a-surge var(--a-dur) var(--a-curva);
}
.a-toast svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--ok); }
.a-toast--alerta { border-left-color: var(--alerta); }
.a-toast--alerta svg { color: var(--alerta); }
.a-toast--erro { border-left-color: var(--erro); }
.a-toast--erro svg { color: var(--erro); }
.a-toast.sai { opacity: 0; transform: translateY(6px); transition: opacity var(--a-dur), transform var(--a-dur); }

/* ---------- a-checklist ---------- */
a-checklist { display: block; }
.a-check__progresso { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-3); font-size: var(--fs-s); color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.a-barra { flex: 1; height: 6px; border-radius: 6px; background: var(--superficie-2); overflow: hidden; }
.a-barra > i { display: block; height: 100%; width: 0; background: var(--ok); border-radius: inherit; transition: width 300ms var(--a-curva); }
a-checklist ul, a-checklist ol { list-style: none; margin: 0; padding: 0; }
a-checklist li { border-bottom: 1px solid var(--borda); }
a-checklist li:last-child { border-bottom: 0; }
a-checklist li label { display: flex; align-items: center; gap: var(--e-3); min-height: var(--a-alvo); padding: var(--e-2) 0; font-weight: 400; font-size: var(--fs-m); cursor: pointer; }
a-checklist li.feito label span { color: var(--texto-suave); text-decoration: line-through; text-decoration-color: var(--texto-suave); }

/* ---------- a-enquete ---------- */
a-enquete { display: block; }
.a-enquete__pergunta { font-weight: 700; margin-bottom: var(--e-3); }
.a-enquete__lista { display: grid; gap: var(--e-2); }
.a-enquete__opcao {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  min-height: calc(var(--a-alvo) + 4px); padding: var(--e-2) var(--e-3); overflow: hidden; isolation: isolate;
  font: 500 var(--fs-m)/1.3 var(--fonte); color: var(--texto); text-align: left;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-s); cursor: pointer;
}
.a-enquete__opcao:hover { border-color: var(--acento); }
.a-enquete__opcao[aria-pressed="true"] { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.a-enquete__opcao .a-enquete__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--acento-suave); z-index: -1; transition: width 400ms var(--a-curva); }
.a-enquete__opcao .a-enquete__pct { font-size: var(--fs-s); color: var(--texto-suave); font-variant-numeric: tabular-nums; font-weight: 600; }
.a-enquete__total { margin-top: var(--e-2); font-size: var(--fs-xs); color: var(--texto-suave); }

/* ---------- a-kanban ---------- */
a-kanban { display: block; min-width: 0; }
.a-kanban__quadro { display: grid; gap: var(--e-3); grid-auto-flow: column; grid-auto-columns: minmax(min(85%, 16rem), 1fr); overflow-x: auto; padding-bottom: var(--e-2); scroll-snap-type: x proximity; }
.a-kanban__coluna { display: flex; flex-direction: column; min-width: 0; background: var(--superficie-2); border-radius: var(--raio); padding: var(--e-3); scroll-snap-align: start; }
.a-kanban__coluna h3 { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-s); text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); margin: 0 0 var(--e-2); }
.a-kanban__coluna h3 span { font-variant-numeric: tabular-nums; background: var(--superficie); border-radius: 999px; padding: 0 .55em; }
.a-kanban__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); min-height: 3rem; align-content: start; flex: 1; border-radius: var(--raio-s); transition: background var(--a-dur); }
.a-kanban__lista.alvo { background: var(--acento-suave); outline: 2px dashed var(--acento); outline-offset: 2px; }
.a-kanban__cartao {
  display: grid; grid-template-columns: 1fr auto; align-items: start; gap: var(--e-1);
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-3); font-size: var(--fs-s);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-s); box-shadow: var(--sombra);
  cursor: grab; overflow-wrap: anywhere;
}
.a-kanban__cartao > span { padding-block: .55rem; }
.a-kanban__cartao.arrastando { opacity: .45; }
.a-kanban__cartao:focus-visible { outline-offset: 1px; }
.a-kanban__acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--e-1); }
.a-kanban__acoes[hidden] { display: none; }
.a-kanban__acoes .a-btn { min-height: var(--a-alvo); }
.a-kanban__novo { margin-top: var(--e-2); }
.a-kanban__novo .a-btn { width: 100%; justify-content: flex-start; }
.a-kanban__novo form { display: grid; gap: var(--e-2); }

/* ---------- a-timeline ---------- */
a-timeline { display: block; }
a-timeline ol { list-style: none; margin: 0; padding: 0; }
a-timeline li { position: relative; padding: 0 0 var(--e-4) calc(var(--e-4) + 14px); }
a-timeline li::before { content: ""; position: absolute; left: 5px; top: .45rem; bottom: -.45rem; width: 2px; background: var(--borda); }
a-timeline li:last-child::before { display: none; }
a-timeline li::after { content: ""; position: absolute; left: 0; top: .3rem; width: 12px; height: 12px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--acento); }
a-timeline li[data-estado="feito"]::after { background: var(--acento); }
a-timeline li[data-estado="atual"]::after { background: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
.a-timeline__quando { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
a-timeline li > :last-child { margin-bottom: 0; }

/* ---------- a-antes-depois ---------- */
a-antes-depois { --pos: 50%; position: relative; display: grid; overflow: hidden; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); user-select: none; touch-action: pan-y; }
a-antes-depois > .a-ad__lado { grid-area: 1 / 1; min-width: 0; }
a-antes-depois > .a-ad__lado > * { margin: 0; }
a-antes-depois > .a-ad__lado img { display: block; width: 100%; height: 100%; object-fit: cover; }
a-antes-depois > .a-ad__depois { clip-path: inset(0 0 0 var(--pos)); }
.a-ad__rotulo { position: absolute; bottom: var(--e-2); z-index: 2; pointer-events: none; }
.a-ad__rotulo--antes { left: var(--e-2); }
.a-ad__rotulo--depois { right: var(--e-2); }
.a-ad__linha { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; translate: -1px 0; background: var(--acento); z-index: 2; pointer-events: none; }
.a-ad__linha::after { content: ""; position: absolute; top: 50%; left: 50%; width: var(--a-alvo); height: var(--a-alvo); translate: -50% -50%; border-radius: 50%; background: var(--acento); box-shadow: var(--sombra); }
.a-ad__linha svg { max-width: none; position: absolute; top: 50%; left: 50%; width: 1.3rem; height: 1.3rem; translate: -50% -50%; color: var(--sobre-acento); z-index: 1; }
.a-ad__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
a-antes-depois:has(.a-ad__range:focus-visible) .a-ad__linha::after { outline: 3px solid var(--acento-forte); outline-offset: 3px; }

/* ---------- a-celular ---------- */
a-celular { display: block; width: min(100%, 22rem); margin-inline: auto; }
.a-celular__moldura { position: relative; display: flex; min-height: 26rem; max-height: min(44rem, 88vh); padding: 12px; border-radius: 2.6rem; background: var(--superficie-2); border: 1px solid var(--borda); box-shadow: var(--sombra), inset 0 0 0 4px var(--borda); }
.a-celular__moldura::before { content: ""; position: absolute; top: 20px; left: 50%; width: 30%; height: 22px; translate: -50% 0; border-radius: 999px; background: var(--borda); z-index: 2; }
.a-celular__tela { flex: 1; min-width: 0; overflow: auto; border-radius: 2rem; background: var(--fundo); color: var(--texto); padding: calc(22px + var(--e-4)) var(--e-3) var(--e-3); scrollbar-width: none; }
.a-celular__tela > :last-child { margin-bottom: 0; }

/* ---------- a-grafico ---------- */
a-grafico { display: block; min-width: 0; }
a-grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
a-grafico text { fill: var(--texto-suave); font-family: var(--fonte); font-size: 12px; font-variant-numeric: tabular-nums; }
.a-graf__grade { stroke: var(--borda); stroke-width: 1; }
.a-graf__eixo { stroke: var(--texto-suave); stroke-width: 1; }
.a-graf__linha { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.a-graf__ponto { stroke: var(--superficie); stroke-width: 2; }
.a-graf__legenda { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); margin-top: var(--e-2); font-size: var(--fs-s); color: var(--texto-suave); }
.a-graf__legenda span { display: inline-flex; align-items: center; gap: var(--e-1); }
.a-graf__legenda i { width: .8rem; height: .8rem; border-radius: 3px; }
.a-s1 { color: var(--serie-1); } .a-s2 { color: var(--serie-2); } .a-s3 { color: var(--serie-3); } .a-s4 { color: var(--serie-4); } .a-s5 { color: var(--serie-5); }
.a-graf__legenda i, .a-graf__barra, .a-graf__ponto { fill: currentColor; background: currentColor; }
.a-graf__linha { stroke: currentColor; }

/* ---------- a-comentarios ---------- */
a-comentarios { display: block; }
.a-com__form { display: grid; gap: var(--e-2); margin-bottom: var(--e-4); }
.a-com__ancora { display: inline-flex; align-items: center; gap: var(--e-1); max-width: 100%; font-family: var(--fonte-mono); font-size: var(--fs-xs); color: var(--acento-forte); background: var(--acento-suave); border: 0; border-radius: 999px; padding: .2em .7em; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-com__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.a-com__item { padding: var(--e-3); border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.a-com__item.resolvido { opacity: .7; }
.a-com__cab { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); align-items: center; font-size: var(--fs-xs); color: var(--texto-suave); margin-bottom: var(--e-1); }
.a-com__cab strong { color: var(--texto); font-size: var(--fs-s); }
.a-com__texto { margin: 0 0 var(--e-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.a-com__respostas { list-style: none; margin: var(--e-2) 0; padding: 0 0 0 var(--e-3); border-left: 2px solid var(--borda); display: grid; gap: var(--e-2); }
.a-com__acoes { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.a-com__vazio { color: var(--texto-suave); font-size: var(--fs-s); }
html.a-mirando, html.a-mirando * { cursor: crosshair !important; }
.a-mira { outline: 2px dashed var(--acento) !important; outline-offset: 2px !important; }
.a-destaque { animation: a-pisca 1.6s var(--a-curva); }
@keyframes a-pisca { 0%, 60% { outline: 3px solid var(--alerta); outline-offset: 4px; } 100% { outline: 3px solid transparent; outline-offset: 4px; } }
.a-com__aviso { position: fixed; z-index: 2147483100; top: var(--e-3); left: 50%; translate: -50% 0; width: max-content; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4); font-size: var(--fs-s); background: var(--superficie); color: var(--texto); border: 1px solid var(--acento); border-radius: 999px; box-shadow: var(--sombra); }

/* ---------- landing (blocos de apoio dos templates) ---------- */
.a-hero { padding-block: var(--e-6); }
.a-hero h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.6rem); letter-spacing: -.03em; max-width: 18ch; }
.a-hero p { font-size: var(--fs-l); color: var(--texto-suave); max-width: 52ch; }
.a-recursos { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.a-recurso svg { width: 2rem; height: 2rem; color: var(--acento); margin-bottom: var(--e-2); }
.a-recurso h3 { font-size: var(--fs-l); }
.a-faq details { border-bottom: 1px solid var(--borda); }
.a-faq summary { min-height: var(--a-alvo); padding: var(--e-3) 0; font-weight: 600; cursor: pointer; }
.a-faq details p { color: var(--texto-suave); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- a-decisao ---------- */
a-decisao { display: block; }
.a-decisao { display: grid; gap: var(--e-4); }
.a-decisao__campo { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--e-2); }
.a-decisao__campo legend { font-weight: 700; margin-bottom: var(--e-2); padding: 0; }
.a-decisao__opcao { padding: var(--e-2) var(--e-3); border: 1px solid var(--borda); border-radius: var(--raio-s); background: var(--superficie); }
.a-decisao__opcao:has(input:checked) { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.a-decisao__opcao .a-selo { margin-left: auto; }
.a-decisao__mais summary { min-height: var(--a-alvo); display: flex; align-items: center; cursor: pointer; color: var(--texto-suave); font-size: var(--fs-s); }
.a-decisao__mais > * + * { margin-top: var(--e-2); }
.a-decisao__motivo[aria-pressed="true"] { border-color: var(--acento); color: var(--acento-forte); background: var(--acento-suave); }
.a-decisao__detalhe[aria-invalid="true"] { border-color: var(--erro); }
.a-decisao__estado { display: flex; align-items: center; gap: var(--e-2); font-weight: 700; color: var(--ok); margin: 0; }
.a-decisao__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.a-decisao__lista li { display: grid; gap: 2px; }
.a-decisao__q { color: var(--texto-suave); font-size: var(--fs-s); }
.a-decisao__erro { color: var(--erro); }
.a-decisao--vazia .a-decisao__estado { color: var(--alerta); }