/* Ajustes locais da auditoria de UX, responsividade e acessibilidade. */
:root { --muted: #b6bdca; --audit-panel: rgba(20, 20, 28, .96); }

/* Login: cabe no viewport móvel e não cresce indefinidamente no desktop. */
#login-gate,
#first-access-modal { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
#login-gate .modal-card { width: min(100%, 480px); max-width: 480px !important; max-height: calc(100dvh - 24px); overflow-y: auto; margin: auto; }
#first-access-modal .modal-card { width: min(100%, 520px); max-height: calc(100dvh - 24px); overflow-y: auto; margin: auto; }
@media (max-width: 520px) {
  #login-gate, #first-access-modal { align-items: flex-start; }
  #login-gate .modal-card, #first-access-modal .modal-card { padding: 18px 16px; border-radius: 16px; }
  #login-modal-title { font-size: 1.35rem; line-height: 1.2; }
  #login-form input, #login-submit { min-height: 46px; font-size: 16px; }
}

/* Navegação: barra superior no desktop; barra inferior apenas no mobile. */
.desktop-app-header { display: none; }
@media (min-width: 769px) {
  body.has-bottom-nav { padding-bottom: 0 !important; }
  .bottom-nav { display: none !important; }
  .tab-panel, #panel-aovivo, #panel-catalogo, #panel-padroes, #panel-rtp, #panel-curso,
  #panel-minutagem, #panel-gestao, #panel-calc, #panel-alertas { padding-bottom: 20px !important; margin-bottom: 0 !important; }
  #app-shell > header.desktop-app-header { display: flex !important; position: sticky; top: 6px; z-index: 80; align-items: center; justify-content: space-between; gap: 12px; max-width: 1440px; margin: 0 auto 10px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(15,15,20,.94); backdrop-filter: blur(14px); }
  .desktop-app-header .tabs { display: flex; flex-wrap: wrap; gap: 4px; }
  .desktop-app-header .tab-link { min-height: 38px; padding: 8px 12px; border-radius: 10px; color: #cbd2dd; }
  .desktop-app-header .tab-link.active { color: #fff; background: rgba(209,18,31,.22); box-shadow: inset 0 0 0 1px rgba(255,72,84,.35); }
  .desktop-logout { flex: 0 0 auto; min-height: 38px; padding: 8px 13px; border: 1px solid rgba(255,105,105,.34); border-radius: 10px; background: rgba(209,18,31,.1); color: #ffb1b1; font-weight: 800; cursor: pointer; }
  #panel-catalogo { max-height: calc(100vh - 135px); overflow-y: auto; scrollbar-gutter: stable; padding-right: 7px !important; }
  #split-panels-wrapper > #panel-catalogo { max-height: calc(100vh - 135px); overflow-y: auto; }
}
@media (max-width: 768px) {
  .desktop-app-header { display: none !important; }
  .bottom-nav { display: flex; }
}

/* Um único seletor global, compacto e sincronizado. */
.global-aviator-switch { position: sticky; top: 8px; z-index: 75; width: max-content; max-width: 100%; margin: 0 auto 10px; padding: 4px; border-radius: 999px; background: rgba(12,12,18,.92); box-shadow: 0 8px 24px rgba(0,0,0,.3); backdrop-filter: blur(10px); }
@media (min-width: 769px) { .global-aviator-switch { top: 64px; } }

/* Contraste, hierarquia e significado dos dados. */
.stat-line__label, .stat-val__label, .cat-stat__label, .minu-section__desc, .pattern-field-hint { color: #c6ccd7 !important; opacity: 1 !important; }
.stat-line { border-color: rgba(255,255,255,.14); background-color: rgba(255,255,255,.045); }
.stat-line__label { min-width: 92px; font-weight: 800; }
.stat-val__label { font-size: .67rem; }
.stat-line__values [id], .cat-stat__value { font-variant-numeric: tabular-nums; }
.data-legend { margin: -5px 0 10px; text-align: right; color: #aeb6c3; font-size: .7rem; }
:where(.stat-line, .cat-stat) :where(span, div):empty::before { content: "--"; color: #aeb6c3; }
button:focus-visible, a:focus-visible, input:focus-visible, [role="tab"]:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }

/* PWA compacto no desktop, sem competir com o conteúdo principal. */
@media (min-width: 769px) {
  .pwa-banner { left: auto; right: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px)); padding: 8px 10px; border-radius: 12px; }
  .pwa-banner-icon { display: none; }
  .pwa-banner-title { font-size: 12px; }
  .pwa-banner-subtitle { font-size: 10px; }
  .pwa-btn { padding: 7px 9px; font-size: 11px; }
}