/**
 * Painel de Atalhos — componente shortcut-panel.
 *
 * A base visual (botão flutuante, dialog, header, itens) continua vindo de
 * css/components/shortcuts.css (legado, sempre enfileirado — sai na limpeza
 * da Sprint 4/6). Este arquivo cobre:
 *   1. O BUG que deixava o painel invisível: a regra legada
 *      `#uenf-shortcut-panel-container .shortcut-panel { opacity: 0 }`
 *      (especificidade id+classe) vence `dialog#uenf-shortcut-panel` e o
 *      bloco do dialog nunca redefinia opacity — o modal abria transparente,
 *      só o backdrop aparecia. Corrigido aqui de forma determinística.
 *   2. Visibilidade por contexto editorial (desktop/mobile/ambos) por media
 *      query — um único <dialog> serve os dois mundos.
 */

/* 1. Correção do painel invisível: vence a regra legada de opacity/position
   qualquer que seja a ordem de carregamento dos CSS. */
#uenf-shortcut-panel-container dialog#uenf-shortcut-panel[open] {
  opacity: 1 !important;
  visibility: visible !important;
  position: fixed !important;
  transform: none !important;
}

/* 2. Contexto editorial: itens só-desktop somem no mobile e vice-versa.
   Mesmo breakpoint 767.98px do restante do tema (barra inferior mobile). */
@media (max-width: 767.98px) {
  #uenf-shortcut-panel .shortcut-item--desktop-only {
    display: none !important;
  }
}

@media (min-width: 768px) {
  #uenf-shortcut-panel .shortcut-item--mobile-only {
    display: none !important;
  }

  /* Sem nenhum atalho de desktop, o botão flutuante lateral (raio) some no
     desktop — o painel continua acessível pela barra inferior no mobile. */
  #uenf-shortcut-panel-container.shortcut-container--mobile-only .shortcut-icon {
    display: none !important;
  }
}

/* Título do painel: a cor global de h3 do tema (azul escuro) vencia e o
   título ficava ilegível sobre o fundo azul. */
#uenf-shortcut-panel .shortcut-panel-header h3 {
  color: #ffffff !important;
}

/* Muitos atalhos: comportamento seguro — a lista rola dentro do dialog
   (o conteúdo já é flex:1 + overflow-y:auto no CSS base; reforço aqui
   para não depender da ordem de carga). */
#uenf-shortcut-panel .shortcut-panel-content {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Ícone Font Awesome dos itens: largura fixa para alinhar os títulos
   mesmo com ícones de larguras diferentes. */
#uenf-shortcut-panel .shortcut-item i {
  width: 1.5em;
  text-align: center;
  flex: 0 0 auto;
}