/* Central de Ajuda do Chamados: mesmo desenho do diálogo de ajuda do Orçamentos, com os tokens da Suíte. */
dialog.help-dialog { margin: auto; padding: 0; width: min(760px, calc(100% - 32px)); max-height: calc(100dvh - 48px); border: 0; border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); overflow: hidden; }
dialog.help-dialog[open] { display: flex; flex-direction: column; }
dialog.help-dialog::backdrop { background: rgba(3, 31, 41, .38); }
.help-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.help-glyph { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--soft); color: var(--primary); display: grid; place-items: center; font-size: calc(20px * var(--fs, 1)); }
.help-titles { flex: 1; min-width: 0; }
.help-titles h2 { margin: 0; font-size: calc(17px * var(--fs, 1)); font-weight: 600; }
.help-titles p { margin: 2px 0 0; color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); }
.help-tabs { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 14px; border-bottom: 1px solid var(--line); }
.help-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font: 600 calc(13px * var(--fs, 1)) var(--font, inherit); cursor: pointer; }
.help-chip:hover { background: var(--soft); color: var(--text); }
.help-chip[aria-pressed="true"] { background: var(--soft); color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary); }
.help-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; font-size: calc(13.5px * var(--fs, 1)); line-height: 1.5; }
.help-section { display: flex; flex-direction: column; gap: 12px; }
.help-section-desc { margin: 0; color: var(--muted); font-size: calc(13px * var(--fs, 1)); }
.help-shortcuts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.help-dialog .shortcut-card, .help-dialog .help-item, .help-dialog .about-row { border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.shortcut-card { display: flex; align-items: center; gap: 12px; padding: 12px; min-width: 0; }
.shortcut-keys { display: flex; align-items: center; gap: 4px; min-width: 88px; color: var(--muted); white-space: nowrap; }
.shortcut-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shortcut-info strong { font-size: calc(13px * var(--fs, 1)); font-weight: 600; }
.shortcut-info span, .help-item p { color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); line-height: 1.5; }
.help-dialog kbd { display: inline-block; padding: 2px 6px; border-radius: 5px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 1px 0 rgba(3, 31, 41, .08); color: var(--text); font: 600 calc(11.5px * var(--fs, 1)) var(--font, inherit); }
.help-item { padding: 12px 14px; }
.help-item h3 { margin: 0 0 4px; font-size: calc(14px * var(--fs, 1)); font-weight: 600; }
.help-item p { margin: 0; }
.help-item b { color: var(--text); font-weight: 600; }
.help-about-details { display: flex; flex-direction: column; gap: 8px; }
.about-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 12px; font-size: calc(13px * var(--fs, 1)); }
.about-row span { color: var(--muted); }
.about-row strong { font-weight: 600; text-align: right; }
.help-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }
.help-foot span { margin-right: auto; color: var(--muted); font-size: calc(12px * var(--fs, 1)); }
@media (max-width: 800px) {
  dialog.help-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .help-head { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
  .help-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .help-foot span { display: none; }
  .help-foot .button { flex: 1; min-height: 48px; }
  .shortcut-card { flex-direction: column; align-items: flex-start; gap: 6px; }
}