/* ══════════════════════════════════════════════════════════════
   PROMETHEUS // COMPATIBILIDADE ENTRE NAVEGADORES
   Carregado por ÚLTIMO. Não muda desenho nenhum — só adiciona o
   que Safari, Firefox e iOS precisam pra renderizar igual ao Chrome.

   MOTIVO: `backdrop-filter` sem `-webkit-` é IGNORADO pelo Safari e
   por todo navegador do iPhone (todos usam WebKit por baixo). Sem
   isto os painéis ficavam com fundo opaco sólido em vez de vidro.
   ══════════════════════════════════════════════════════════════ */

/* ── vidro nos painéis fixos ─────────────────────────────────── */
header {
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.toast {
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.atc-block {
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

@media (max-width: 820px) {
  header {
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
  }
  .back {
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
  }
  #mobileNav {
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
  }
}

/* ── Firefox: barra de rolagem fina sem a sintaxe do WebKit ──── */
@supports (scrollbar-width: thin) {
  .system-strip, .city-chips, .mother-log, .module-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, .35) transparent;
  }
}

/* ── iOS: rolagem com inércia dentro de áreas roláveis ───────── */
.mother-log, .module-body, .cam-grid, .system-strip, .city-chips {
  -webkit-overflow-scrolling: touch;
}

/* ── Safari: input type=password some o botão nativo de revelar,
      e o type=number ganha setas que estragam o alinhamento ──── */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ── Safari/iOS: input herda fonte do sistema se não forçarmos ── */
input, select, textarea, button {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;                 /* iOS arredonda por conta própria */
  font-family: inherit;
}
/* o select precisa da seta de volta, senão fica sem indicação visual */
select {
  background-image: linear-gradient(45deg, transparent 50%, rgba(0,212,255,.6) 50%),
                    linear-gradient(135deg, rgba(0,212,255,.6) 50%, transparent 50%);
  background-position: calc(100% - 15px) center, calc(100% - 10px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

/* ── o <form> do login não pode alterar o espaçamento dos campos ─ */
#loginForm { display: block; }
#loginForm label { display: block; }

/* ── Firefox: botão sem borda interna de foco ─────────────────── */
button::-moz-focus-inner { border: 0; padding: 0; }
/* mas foco por teclado tem que continuar visível (acessibilidade) */
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 1px solid var(--ice2);
  outline-offset: 1px;
}