/* Página dos grupos: ajustes sobre o tema minimal (assets/css/style.css). */
body { max-width: 1080px; margin: 0 auto; }
footer { position: static; float: none; width: auto; margin-top: 48px; padding-top: 16px; border-top: 1px solid #e5e5e5; }
[hidden] { display: none !important; }

.grupos-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 20px; }
.grupos-campo { position: relative; flex: 1 1 260px; max-width: 440px; }
.grupos-barra input { box-sizing: border-box; width: 100%; margin: 0; padding: 8px 80px 8px 12px; font: inherit; color: #222; background: #fff; border: 1px solid #d0d0d0; border-radius: 6px; outline: none; }
/* O tema já desenha <kbd> como tecla; o kbd exterior é só o agrupador e perde esse aspeto. */
.grupos-atalho { position: absolute; top: 50%; right: 10px; display: flex; gap: 4px; padding: 0; transform: translateY(-50%); font-family: inherit; font-size: 11px; line-height: normal; color: #999; background: none; border: 0; box-shadow: none; pointer-events: none; }
.grupos-atalho kbd { font-family: inherit; color: #777; }
.grupos-barra input:focus + .grupos-atalho { display: none; }
@media (hover: none) { .grupos-atalho { display: none; } .grupos-barra input { padding-right: 12px; } }
.grupos-barra input:focus { border-color: #66498e; box-shadow: 0 0 0 3px #ece6f4; }
.grupos-barra input:disabled { background: #f8f8f8; }
.grupos-resumo { margin: 0; font-size: 13px; }

.grupos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.grupo { padding: 12px 14px; background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; }
.grupo:target { border-color: #66498e; box-shadow: 0 0 0 3px #ece6f4; }
.grupo h2 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #222; font-variant-numeric: tabular-nums; }
.grupo ul { margin: 0; padding: 0; list-style: none; }
.grupo li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 4px; line-height: 1.4; color: #444; }
.grupo li:last-child { margin: 0; }
.grupo code { flex: none; padding: 0 5px; font-size: 11px; line-height: 18px; color: #727272; background: #f3f3f3; border-radius: 4px; white-space: nowrap; }
.grupo-vago { background: #fafafa; border-style: dashed; }
.grupo-vago h2 { color: #999; }
.grupo-vago p { margin: 0; font-style: italic; color: #999; }

.grupos-aviso { padding: 12px 14px; background: #f8f8f8; border: 1px solid #e5e5e5; border-radius: 8px; }
.grupos-aviso button { margin-left: 8px; padding: 4px 10px; font: inherit; color: #222; background: #fff; border: 1px solid #d0d0d0; border-radius: 6px; cursor: pointer; }
.grupos-aviso button:hover { color: #66498e; border-color: #66498e; }