/* ===== Wone Conect — vidro (opcional, por cima do tema-hig.css) =====
 *
 * Material translúcido com desfoque, como as barras do iOS e do macOS. Vidro
 * só aparece com algo atrás, por isso o fundo ganha manchas suaves nas cores
 * da Wone. Navegador sem desfoque fica com o tema Apple sólido (o @supports).
 * Texto continua sobre fundo quase opaco: o vidro é leve, para não sacrificar
 * a leitura.
 */
:root {
  --vidro: rgba(255, 255, 255, 0.68);
  --vidro-barra: rgba(255, 255, 255, 0.6);
  --vidro-borda: rgba(255, 255, 255, 0.7);
  --vidro-campo: rgba(118, 118, 128, 0.1);
  --vidro-sombra: 0 8px 32px rgba(28, 28, 30, 0.07);
  --mancha-1: rgba(0, 125, 112, 0.22);
  --mancha-2: rgba(44, 0, 96, 0.16);
  --mancha-3: rgba(34, 255, 213, 0.2);
}
:root[data-theme="dark"] {
  --vidro: rgba(28, 28, 30, 0.6);
  --vidro-barra: rgba(18, 18, 20, 0.58);
  --vidro-borda: rgba(255, 255, 255, 0.08);
  --vidro-campo: rgba(118, 118, 128, 0.24);
  --vidro-sombra: 0 8px 32px rgba(0, 0, 0, 0.35);
  --mancha-1: rgba(64, 224, 200, 0.16);
  --mancha-2: rgba(120, 60, 220, 0.2);
  --mancha-3: rgba(34, 255, 213, 0.1);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body {
    background:
      radial-gradient(1100px 620px at 8% -8%, var(--mancha-1), transparent 62%),
      radial-gradient(900px 600px at 100% 4%, var(--mancha-2), transparent 60%),
      radial-gradient(900px 560px at 45% 112%, var(--mancha-3), transparent 62%),
      var(--ground);
    background-attachment: fixed;
  }

  /* Barras: o conteúdo passa por baixo, desfocado */
  header.topbar {
    position: sticky; top: 0; z-index: 20;
    background: var(--vidro-barra);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
  }
  .rail, .subnav {
    background: var(--vidro-barra);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
  }

  /* Cartões de vidro */
  .card, .dash-cartao:not(.destaque), .dash-tile, .aviso-meta {
    background: var(--vidro);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    border: 0.5px solid var(--vidro-borda);
    box-shadow: var(--vidro-sombra);
  }
  input, select, textarea { background: var(--vidro-campo); }
  input:focus, select:focus, textarea:focus { background: var(--surface); }
  button.ghost { background: var(--vidro-campo); }
}