/* Aviso de instalar o app / ativar notificações (templates/notifications/_app_prompts.html).
   Faixa vermelha acima do header (03/10/2026: cor quente, letra branca, sem logo, empurra o header para baixo); modal centralizado. */
.app-modal { position: fixed; inset: 0; z-index: 1300; display: grid; grid-template-columns: minmax(0, 420px); place-content: center; padding: 24px 16px; }
.app-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.app-modal__panel { position: relative; max-height: calc(100vh - 48px); overflow-y: auto; text-align: center; }
.app-modal__close { position: absolute; top: 12px; right: 12px; }
.app-modal__icon { display: flex; justify-content: center; margin: 4px 0 16px; }
.app-modal__icon .brand-icon { width: 64px; height: 64px; border-radius: 14px; font-size: 22px; }
.app-modal__title { margin: 0 0 8px; font: 700 20px/28px var(--font); color: var(--ink); }
.app-modal__text { margin: 0 0 16px; font: 400 16px/24px var(--font); color: var(--gray-text); }
.app-modal__steps { margin: 0 0 16px; padding-left: 20px; text-align: left; font: 400 15px/22px var(--font); color: var(--ink); }
.app-modal__steps li + li { margin-top: 8px; }
.app-modal__steps svg { vertical-align: -3px; }
.app-modal__error { margin: 0 0 12px; font: 500 14px/20px var(--font); color: #a93226; }
.app-modal__actions { display: grid; gap: 8px; }

.app-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1150; display: flex; align-items: center; gap: 8px; height: var(--app-bar-h); padding: 0 4px 0 12px; background: #e5534b; color: #fff; animation: app-bar-in .28s ease-out; }
.app-bar__text { flex: 1; min-width: 0; font: 700 16px/24px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* botão em pílula e faixa mais baixa: a "melhoradinha" pedida em 03/10/2026 */
.app-bar__action { flex: none; height: 32px; padding: 0 14px; border-radius: var(--r-pill); font-size: 14px; line-height: 20px; text-transform: none; white-space: nowrap; background: var(--card); color: var(--ink); border-color: var(--card); }
.app-bar__action:hover { background: var(--surface); }
/* Efeito discreto (05/10/2026): a faixa desce ao aparecer e um brilho cruza o botão uma única vez. Nada em loop. */
.app-bar__action { position: relative; overflow: hidden; }
.app-bar__action::after { content: ""; position: absolute; top: 0; bottom: 0; left: -50%; width: 40%; background: linear-gradient(100deg, transparent, rgba(229, 83, 75, .28), transparent); transform: skewX(-18deg); animation: app-bar-shine .9s ease-out 1s 1 both; pointer-events: none; }
@keyframes app-bar-in { from { transform: translateY(-100%); } }
@keyframes app-bar-shine { to { left: 120%; } }
@media (prefers-reduced-motion: reduce) { .app-bar, .app-bar__action::after { animation: none; } .app-bar__action::after { display: none; } }
.app-bar__close { flex: none; width: 36px; height: 36px; border-radius: 50%; color: #fff; }
.app-bar__close:hover { background: rgba(255,255,255,.15); }
@media (min-width: 768px) { .app-bar { justify-content: center; gap: 12px; } .app-bar__text { flex: none; } }
/* com a faixa aberta, tudo que se apoia no header desce a altura dela */
:root { --app-bar-h: 48px; }
body.has-app-bar .header { top: var(--app-bar-h); }
body.has-app-bar .page { padding-top: calc(var(--header-h) + var(--content-top) + var(--app-bar-h)); }
body.has-app-bar .page--compact { padding-top: calc(var(--header-compact-h) + var(--content-top) + var(--app-bar-h)); }
body.has-app-bar .sidebar--sticky { top: calc(var(--header-h) + var(--content-top) + var(--app-bar-h)); }
body.has-app-bar .admin-side { top: calc(var(--header-h) + 24px + var(--app-bar-h)); }
body.has-app-bar .settings-nav { top: calc(var(--header-h) + 32px + var(--app-bar-h)); }