/* ═══════════════════════════════════════════════════════════════════════
   TEMA VIDRO (glassmorphism) — o mesmo apelo estético em todo o app
   Mesmo layout; muda só a pele: janelas e painéis de vidro fosco translúcido,
   papel de parede aparecendo desfocado por trás, brilho suave nas bordas,
   cantos generosos e botões em pílula. A cor de destaque de cada empresa (--ac) continua.
   Vale no modo área de trabalho (padrão). Desligar: body.sem-vidro.
   ═══════════════════════════════════════════════════════════════════════ */
body.os-on.os-logado:not(.sem-vidro){
  --vd-bg:rgba(255,255,255,.07);          /* superfície de vidro */
  --vd-bg-2:rgba(255,255,255,.11);
  --vd-bg-3:rgba(255,255,255,.16);
  --vd-borda:rgba(255,255,255,.14);
  --vd-borda-2:rgba(255,255,255,.22);
  --vd-brilho:inset 0 1px 0 rgba(255,255,255,.12);
  --vd-sombra:0 18px 50px rgba(0,0,0,.28);
  --surf-1:var(--vd-bg);--surf-2:var(--vd-bg-2);--surf-3:var(--vd-bg-3);--surface:var(--vd-bg);--surf:var(--vd-bg);--bg-2:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.16);--line-3:rgba(255,255,255,.26);
  --ink:#f4f6f8;--ink-2:rgba(236,240,244,.72);--ink-3:rgba(226,232,238,.5);
  --r-sm:12px;--r:18px;--r-lg:24px;
  --shadow:0 30px 80px rgba(0,0,0,.4);
}
/* ── fundo: janela (PC) e tela (celular) deixam o papel de parede aparecer ── */
body.os-pc.os-logado:not(.sem-vidro) #os-win{background:rgba(24,28,34,.46);backdrop-filter:blur(38px) saturate(170%) brightness(1.04);-webkit-backdrop-filter:blur(38px) saturate(170%) brightness(1.04);border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 120px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14)}
body.os-pc.os-logado:not(.sem-vidro) #os-win.max{background:rgba(22,26,32,.55)}
body.os-mob.os-logado:not(.sem-vidro)::before{filter:blur(30px) brightness(.58) saturate(1.35)}
body.os-mob.os-logado:not(.sem-vidro){background:#1a1f26}

/* ── barra lateral e topo ── */
body.os-on.os-logado:not(.sem-vidro) #sb{background:rgba(255,255,255,.05);border-right:1px solid var(--vd-borda)}
body.os-mob.os-logado:not(.sem-vidro) #sb{background:rgba(30,35,42,.72);backdrop-filter:blur(34px) saturate(170%);-webkit-backdrop-filter:blur(34px) saturate(170%)}
body.os-on.os-logado:not(.sem-vidro) #topbar{background:rgba(255,255,255,.06);border-bottom:1px solid var(--vd-borda);backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%)}
body.os-on.os-logado:not(.sem-vidro) .nav-item.active,body.os-on.os-logado:not(.sem-vidro) .nav-item.on,body.os-on.os-logado:not(.sem-vidro) #sb .on{background:rgba(255,255,255,.13);box-shadow:var(--vd-brilho);border-radius:14px}

/* ── cartões, KPIs, tabelas e painéis: vidro fosco ── */
body.os-on.os-logado:not(.sem-vidro) .card,
body.os-on.os-logado:not(.sem-vidro) .kpi,
body.os-on.os-logado:not(.sem-vidro) .kcard,
body.os-on.os-logado:not(.sem-vidro) .kcol,
body.os-on.os-logado:not(.sem-vidro) .table-wrap,
body.os-on.os-logado:not(.sem-vidro) .detail-field,
body.os-on.os-logado:not(.sem-vidro) .empty{background:var(--vd-bg);border:1px solid var(--vd-borda);border-radius:var(--r);box-shadow:var(--vd-brilho),var(--vd-sombra)}
body.os-on.os-logado:not(.sem-vidro) .card:hover,body.os-on.os-logado:not(.sem-vidro) .kcard:hover{border-color:var(--vd-borda-2);background:var(--vd-bg-2)}
body.os-on.os-logado:not(.sem-vidro) .kpi{border-radius:var(--r-lg)}
body.os-on.os-logado:not(.sem-vidro) table th{background:rgba(255,255,255,.04)}
body.os-on.os-logado:not(.sem-vidro) table tr:hover td{background:rgba(255,255,255,.04)}

/* ── botões em pílula ── */
body.os-on.os-logado:not(.sem-vidro) .btn{border-radius:999px}
body.os-on.os-logado:not(.sem-vidro) .btn-pri,body.os-on.os-logado:not(.sem-vidro) .btn.btn-pri{background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 88%,#fff),var(--ac));border:1px solid color-mix(in srgb,var(--ac) 70%,#fff);box-shadow:0 8px 24px color-mix(in srgb,var(--ac) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
body.os-on.os-logado:not(.sem-vidro) .btn-sec,body.os-on.os-logado:not(.sem-vidro) .btn.btn-sec{background:rgba(255,255,255,.09);border:1px solid var(--vd-borda);box-shadow:var(--vd-brilho)}
body.os-on.os-logado:not(.sem-vidro) .btn-sec:hover{background:rgba(255,255,255,.15)}
body.os-on.os-logado:not(.sem-vidro) .ibtn{border-radius:12px}
body.os-on.os-logado:not(.sem-vidro) .badge{border-radius:999px}

/* ── campos ── */
body.os-on.os-logado:not(.sem-vidro) .fld input,body.os-on.os-logado:not(.sem-vidro) .fld select,body.os-on.os-logado:not(.sem-vidro) .fld textarea,
body.os-on.os-logado:not(.sem-vidro) input.inp,body.os-on.os-logado:not(.sem-vidro) select.inp,body.os-on.os-logado:not(.sem-vidro) .inp{background:rgba(255,255,255,.07)!important;border:1px solid var(--vd-borda)!important;border-radius:14px!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
body.os-on.os-logado:not(.sem-vidro) .fld input:focus,body.os-on.os-logado:not(.sem-vidro) .fld select:focus,body.os-on.os-logado:not(.sem-vidro) .fld textarea:focus{border-color:color-mix(in srgb,var(--ac) 70%,#fff)!important;background:rgba(255,255,255,.1)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent)}

/* ── janelas (modais) ── */
body.os-on.os-logado:not(.sem-vidro) .mask{background:rgba(10,12,16,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.os-on.os-logado:not(.sem-vidro) .modal{background:rgba(34,39,47,.72);border:1px solid var(--vd-borda-2);border-radius:26px;backdrop-filter:blur(40px) saturate(170%);-webkit-backdrop-filter:blur(40px) saturate(170%);box-shadow:0 40px 120px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14)}
body.os-on.os-logado:not(.sem-vidro) .modal-head,body.os-on.os-logado:not(.sem-vidro) .modal-foot{background:transparent;border-color:var(--vd-borda)}

/* ── abas / filtros em pílula ── */
body.os-on.os-logado:not(.sem-vidro) .chip,body.os-on.os-logado:not(.sem-vidro) .filter-chip,body.os-on.os-logado:not(.sem-vidro) .tabs button{border-radius:999px}

/* ── títulos mais leves, como na referência ── */
body.os-on.os-logado:not(.sem-vidro) .page-title{font-weight:700;letter-spacing:-.025em}
body.os-on.os-logado:not(.sem-vidro) .page-eyebrow,body.os-on.os-logado:not(.sem-vidro) .eyebrow{opacity:.85}

/* celular: menos desfoque por elemento (desempenho) */
@media (max-width:860px){
  body.os-on.os-logado:not(.sem-vidro) .card,body.os-on.os-logado:not(.sem-vidro) .kpi,body.os-on.os-logado:not(.sem-vidro) .kcard{box-shadow:var(--vd-brilho)}
  body.os-on.os-logado:not(.sem-vidro) .modal{border-radius:0!important;background:rgba(30,35,42,.86)}
}
/* lista nativa do select não aceita vidro: fundo sólido escuro para o texto ficar legível */
body.os-on.os-logado:not(.sem-vidro) select option,body.os-on.os-logado:not(.sem-vidro) select optgroup{background:#1e232b;color:#f4f6f8}