/* Os cartões dos módulos do catálogo (Feito, 23/10/2026): o passo 2 do cadastro (o cartão é um <label> com a caixa
   de marcar) e a tela Módulos da Administração (um <div> com o botão de ligar). Mede em rem, que segue o A− / A+;
   as cores são as variáveis da casca. (F6, 26/10/2026) O cartão e a grade são o widget `escolhas`
   (widgets/escolhas.css, ligado em toda página); aqui fica o que é só do passo 2 do cadastro: a categoria e o cartão
   que é um <label> com a caixa de marcar. */

.md-cat { margin: 0 0 1.2rem; }
.md-cat h3 { margin: 0 0 .5rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
label.md-cartao { padding-left: 2.6rem; cursor: pointer; }
.md-cartao input { position: absolute; left: 1rem; top: 1.05rem; width: 1.05rem; height: 1.05rem; margin: 0;
  accent-color: var(--verde); }
label.md-cartao:hover { border-color: var(--verde); transform: translateY(-1px); }
.md-cartao:has(input:checked) { border-color: var(--verde);
  background: color-mix(in srgb, var(--azul-f) 55%, var(--branco));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--verde) 25%, transparent); }
.md-cartao:has(input:focus-visible) { outline: 2px solid var(--verde); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { label.md-cartao:hover { transform: none; } }