/* ===========================================================================
   RayVault — painel "vidro" (glassmorphism)
   Camada só visual por cima do style.css: um render de arquitetura em tela
   cheia ao fundo, desfocado, e o app inteiro dentro de UMA moldura de vidro.
   Liga com <body class="glass">; sem a classe, o painel volta a ser o de antes.
   Dois temas com o MESMO layout, só a cor muda: NOITE (body.glass — hora azul,
   vidro escuro) e DIA (body.glass.glass-dia — sala clara, vidro leitoso). O
   cliente troca no botão sol/lua do topo (glass.js).
   Fundos: renders conceituais gerados para o painel, não são projeto de cliente.
   =========================================================================== */

/* ---------- cores de cada tema ----------
   O layout lá embaixo só usa estas variáveis; para mexer num tema, mexa aqui. */
body.glass {                                   /* NOITE */
  /* sobre o vidro o cinza antigo apagava: sobe um tom para manter ~5:1 */
  --text-dim:  #a9b2bd;
  --text-mute: #8f99a6;
  --line:      rgba(255, 255, 255, .08);       /* divisórias finas dentro dos painéis */

  /* a moldura: quase sem saturar — o vidro realçava o azul da cena e ele se
     confundia com o ciano dos botões */
  --frame-bg:     linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
  --frame-line:   rgba(255, 255, 255, .1);
  --frame-blur:   blur(36px) saturate(105%);
  --frame-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 80px -32px rgba(0, 0, 0, .8);
  --frame-solid:  rgba(12, 16, 22, .94);       /* sem desfoque disponível */

  /* card = métricas, jobs, detalhe, cápsula dos filtros; placa = botões, pílulas, campos */
  --card:            rgba(255, 255, 255, .045);
  --card-line:       rgba(255, 255, 255, .08);
  --card-hover:      rgba(255, 255, 255, .08);
  --card-hover-line: rgba(255, 255, 255, .18);
  --card-shadow:     0 14px 34px -22px rgba(0, 0, 0, .7);
  --plate:            rgba(255, 255, 255, .07);
  --plate-line:       rgba(255, 255, 255, .11);
  --plate-hover:      rgba(255, 255, 255, .13);
  --plate-hover-line: rgba(255, 255, 255, .22);
  --cnt:              rgba(255, 255, 255, .08);

  /* "tinta": filtro ativo, botão principal, avatar. No escuro é clara */
  --ink:          #eef1f4;
  --on-ink:       #0b0f14;
  --ink-hover:    #fff;
  --ink-shadow:   0 8px 20px -10px rgba(0, 0, 0, .8);
  --ink-cnt:      rgba(11, 15, 20, .09);
  --ink-cnt-text: rgba(11, 15, 20, .6);

  /* destaque: o job aberto e o "Tempo restante" (texto sempre branco por cima) */
  --hi:        rgba(255, 255, 255, .13);
  --hi-line:   rgba(255, 255, 255, .24);
  --hi-shadow: 0 18px 40px -20px rgba(0, 0, 0, .75);

  --track:      rgba(255, 255, 255, .08);      /* trilho das barras de progresso */
  --input-bg:   rgba(0, 0, 0, .25);
  --input-line: rgba(255, 255, 255, .12);
  --actions-bg: rgba(0, 0, 0, .14);            /* faixa de botões no pé do detalhe */

  --veil:         rgba(3, 6, 10, .5);          /* atrás das janelas */
  --modal:        rgba(16, 21, 28, .82);
  --modal-solid:  rgba(14, 18, 24, .95);
  --modal-line:   rgba(255, 255, 255, .14);
  --modal-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
  --toast:        rgba(16, 21, 28, .88);

  /* celular: sem moldura (ver o responsivo) */
  --frame-m:  linear-gradient(180deg, rgba(6, 9, 13, .25), rgba(6, 9, 13, .5));
  --card-m:   rgba(255, 255, 255, .06);
  --detail-m: rgba(11, 15, 20, .94);

  background: #0a1016;
}

body.glass.glass-dia {                         /* DIA */
  --text:      #1c1d20;
  --text-dim:  #4a4f57;
  --text-mute: #656b75;   /* ~4,7:1 sobre o vidro claro */
  --line:      rgba(28, 24, 20, .08);
  --border-strong: rgba(28, 24, 20, .16);

  /* o ciano puro some no claro: em TEXTO vira um petróleo legível */
  --accent:      #0a7a98;
  --accent-glow: rgba(0, 170, 205, .18);
  --ok:    #0b8a5c;
  --warn:  #9a6408;
  --err:   #dc2626;
  --info:  #0a7a98;
  --idle:  #64748b;
  --proc:  #6d28d9;
  --water: #0369a1;
  --ring: 0 0 0 1px var(--border-strong), 0 0 0 4px rgba(10, 122, 152, .1);

  --frame-bg:     linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .18));
  --frame-line:   rgba(255, 255, 255, .62);
  --frame-blur:   blur(36px) saturate(130%);
  --frame-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 30px 80px -32px rgba(70, 45, 20, .4);
  --frame-solid:  rgba(250, 247, 242, .92);

  --card:            rgba(255, 255, 255, .45);
  --card-line:       rgba(255, 255, 255, .8);
  --card-hover:      rgba(255, 255, 255, .7);
  --card-hover-line: #fff;
  --card-shadow:     0 1px 1px rgba(60, 40, 20, .04), 0 14px 34px -22px rgba(60, 40, 20, .38);
  --plate:            rgba(255, 255, 255, .56);
  --plate-line:       rgba(255, 255, 255, .86);
  --plate-hover:      rgba(255, 255, 255, .85);
  --plate-hover-line: #fff;
  --cnt:              rgba(28, 24, 20, .06);

  --ink:          #18191c;
  --on-ink:       #fff;
  --ink-hover:    #000;
  --ink-shadow:   0 8px 18px -10px rgba(0, 0, 0, .6);
  --ink-cnt:      rgba(255, 255, 255, .16);
  --ink-cnt-text: rgba(255, 255, 255, .82);

  --hi:        rgba(24, 25, 28, .92);
  --hi-line:   rgba(24, 25, 28, .92);
  --hi-shadow: 0 20px 44px -20px rgba(0, 0, 0, .6);

  --track:      rgba(28, 24, 20, .08);
  --input-bg:   rgba(255, 255, 255, .7);
  --input-line: rgba(28, 24, 20, .12);
  --actions-bg: rgba(255, 255, 255, .3);

  --veil:         rgba(240, 233, 224, .38);
  --modal:        rgba(255, 255, 255, .74);
  --modal-solid:  rgba(252, 250, 247, .95);
  --modal-line:   rgba(255, 255, 255, .95);
  --modal-shadow: 0 30px 70px -30px rgba(70, 45, 20, .45);
  --toast:        rgba(255, 255, 255, .86);

  --frame-m:  linear-gradient(180deg, rgba(255, 252, 247, .30), rgba(255, 252, 247, .5));
  --card-m:   rgba(255, 255, 255, .6);
  --detail-m: rgba(250, 247, 242, .94);

  background: #efe7dc;
  color: var(--text);
}

/* ---------- a cena ---------- */
.glass-bg { display: none; }
/* a cena fica fora de foco, escura e com pouca cor: atrás do vidro sobra só luz,
   e o azul dela não disputa com o ciano da marca. O desfoque é da própria camada
   da foto (ela não é ancestral de nada, então não prende a gaveta do celular) e
   ela sobra 80px para fora da tela, senão a borda desfocada clareia com a cor de fundo */
body.glass .glass-bg {
  display: block;
  position: fixed; inset: -80px; z-index: -2;
  background: #0a1016 url("../bg/painel-hora-azul.webp") 50% 58% / cover no-repeat;
  filter: blur(20px) saturate(55%) brightness(.3);
}
@media (max-width: 900px) {
  body.glass .glass-bg { background-image: url("../bg/painel-hora-azul-1280.webp"); background-position: 56% 50%; }
}
/* o ::before do style.css era o fundo inteiro; aqui vira só o véu sobre a foto */
body.glass::before {
  background:
    radial-gradient(1100px 620px at 50% -10%, rgba(0, 240, 255, .07), transparent 60%),
    linear-gradient(180deg, rgba(5, 8, 12, .24), rgba(5, 8, 12, .40) 55%, rgba(5, 8, 12, .66));
}
/* a sala do dia: fora de foco como a da noite, mas sem escurecer */
body.glass.glass-dia .glass-bg {
  background: #efe7dc url("../bg/painel-dia.webp") 50% 50% / cover no-repeat;
  filter: blur(24px) saturate(106%) brightness(1);
}
@media (max-width: 900px) {
  body.glass.glass-dia .glass-bg { background-image: url("../bg/painel-dia-1280.webp"); background-position: 62% 50%; }
}
body.glass.glass-dia::before { background: linear-gradient(180deg, rgba(255, 251, 245, .06), rgba(255, 251, 245, 0) 45%, rgba(70, 45, 20, .10)); }
body.glass.glass-dia ::selection { background: rgba(0, 200, 225, .22); color: var(--text); }

/* ===========================================================================
   LAYOUT (igual nos dois temas)
   A moldura desfoca a cena; os cards por dentro são placas translúcidas sem
   desfoque próprio (vidro dentro de vidro não enxerga a cena — e pesaria à toa).
   Ativo = pílula de "tinta"; o ciano da marca fica nos detalhes.
   =========================================================================== */

/* ---------- moldura ---------- */
body.glass .glass-frame {
  max-width: 1320px; margin: 22px auto; min-height: calc(100dvh - 44px);
  border-radius: 34px;
  border: 1px solid var(--frame-line);
  background: var(--frame-bg);
  -webkit-backdrop-filter: var(--frame-blur);
  backdrop-filter: var(--frame-blur);
  box-shadow: var(--frame-shadow);
  padding-bottom: 8px;
}

/* ---------- topo: uma fileira de pílulas dentro da moldura (rola com a página) ---------- */
body.glass .topbar {
  position: relative; top: auto; margin: 0;
  padding: 22px 30px 4px;
  background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.glass .brand {
  padding: 8px 16px; border-radius: 999px;
  background: var(--plate); border: 1px solid var(--plate-line);
  box-shadow: var(--card-shadow);
}
body.glass .brand .name b { color: var(--text); }
body.glass .brand .name span { color: var(--accent); }
body.glass .brand .dot { background: var(--cyan, #00dcef); box-shadow: 0 0 10px 1px rgba(0, 220, 239, .55); }
body.glass .topbar .who { color: var(--text-dim); }
body.glass .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: var(--on-ink); border: 0;
}

/* ---------- cabeçalho da página ---------- */
body.glass .container { max-width: none; padding: 20px 30px 34px; }
body.glass .page-head h1 {
  font-size: 38px; font-weight: 400; letter-spacing: -.035em; line-height: 1.15; color: var(--text); text-shadow: none;
}
body.glass .page-head .muted { color: var(--text-dim); text-shadow: none; }

/* botões: leve = placa; principal = pílula de tinta com o ícone num círculo ciano */
body.glass .btn-ghost,
body.glass .lang-sel {
  background: var(--plate); border-color: var(--plate-line); color: var(--text);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.glass .btn-ghost:hover,
body.glass .lang-sel:hover { background: var(--plate-hover); border-color: var(--plate-hover-line); color: var(--text); }
body.glass .head-actions .btn,
body.glass .topbar .btn,
body.glass .lang-sel { border-radius: 999px; }
body.glass .btn-primary {
  background: var(--ink); color: var(--on-ink); border-color: var(--ink);
  box-shadow: var(--ink-shadow);
}
body.glass .btn-primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--on-ink); }
body.glass .head-actions .btn-primary { padding: 5px 16px 5px 5px; }
body.glass .head-actions .btn-primary .ico {
  width: 26px; height: 26px; padding: 6px; border-radius: 50%;
  background: #00dcef; color: #00171a; opacity: 1;
}

/* ---------- métricas: número grande e fino ---------- */
body.glass .stat {
  border-radius: 24px; padding: 17px 20px 16px;
  background: var(--card); border: 1px solid var(--card-line);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--card-shadow);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .2s, background .2s;
}
/* o card sobe um pouco no hover, como um objeto de vidro */
body.glass .stat.report:hover { transform: translateY(-3px); background: var(--card-hover); border-color: var(--card-hover-line); }
/* algarismos de largura fixa: na contagem o número não fica "dançando" */
body.glass .stat .v { font-size: 38px; font-weight: 300; letter-spacing: -.045em; margin-top: 6px; font-variant-numeric: tabular-nums; }
body.glass .stat.spend .v { color: var(--ok); }

/* ---------- filtros: uma cápsula só, ativo em pílula de tinta ---------- */
body.glass .chips {
  position: relative; isolation: isolate;
  gap: 2px; padding: 4px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--card-line);
  box-shadow: var(--card-shadow);
}
body.glass .chip {
  background: transparent; border-color: transparent; color: var(--text-dim);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: color .3s, background .2s;
}
body.glass .chip:hover { background: var(--card-hover); border-color: transparent; color: var(--text); }
body.glass .chip.active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); box-shadow: var(--ink-shadow); }
body.glass .chip .cnt { background: var(--cnt); color: var(--text-mute); transition: background .3s, color .3s; }
body.glass .chip.active .cnt { background: var(--ink-cnt); color: var(--ink-cnt-text); }
body.glass .chip.zero { opacity: .5; }
/* a pílula que desliza de um filtro para o outro (glass.js põe o .chip-ind e a
   classe has-ind; sem o JS, o filtro ativo continua pintado como acima) */
body.glass .chip-ind {
  position: absolute; left: 0; top: 0; z-index: -1;
  border-radius: 999px; background: var(--ink); box-shadow: var(--ink-shadow);
  pointer-events: none;
  transition: transform .5s cubic-bezier(.3,1.15,.4,1), width .5s cubic-bezier(.3,1.15,.4,1), height .5s, opacity .2s;
}
body.glass .chips.has-ind .chip.active,
body.glass .chips.has-ind .chip.active:hover { background: transparent; border-color: transparent; box-shadow: none; }
/* busca, ordenação e "Limpar arquivados": pílulas avulsas */
body.glass .search,
body.glass .input.sort-sel,
body.glass .toolbar-right .chip {
  background: var(--plate); border: 1px solid var(--plate-line); color: var(--text-dim);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--card-shadow);
}
body.glass .search:focus-within { background: var(--plate-hover); border-color: var(--plate-hover-line); }
body.glass .search input::placeholder { color: var(--text-mute); }

/* campos */
body.glass .input { background: var(--input-bg); border-color: var(--input-line); color: var(--text); }
body.glass .input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
body.glass select option { background: #0e141b; }

/* ---------- lista: placas; o job aberto vira o card de destaque ---------- */
body.glass .jobs-col {
  padding: 0; border-radius: 0; background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.glass .job {
  border-radius: 20px;
  background: var(--card); border-color: var(--card-line);
  box-shadow: var(--card-shadow);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background .2s, border-color .2s;
}
body.glass .job:hover { transform: translateY(-2px); background: var(--card-hover); border-color: var(--card-hover-line); }
body.glass .job.active,
body.glass .job.active:hover { background: var(--hi); border-color: var(--hi-line); box-shadow: var(--hi-shadow); }
body.glass .job.active .nm,
body.glass .job.active .meta b { color: #fff; }
body.glass .job.active .meta { color: rgba(255, 255, 255, .7); }
body.glass .job.active .jobcode { color: rgba(255, 255, 255, .5); }
body.glass .job.active .job-grip { color: rgba(255, 255, 255, .6); }
body.glass .job.active .prog .bar { background: rgba(255, 255, 255, .14); }
body.glass .job.active .prog .pct { color: rgba(255, 255, 255, .78); }
body.glass .job.active .prog.indet .pct { color: #c4b5fd; }
body.glass .job.active .pill,
body.glass.glass-dia .job.active .pill { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: #fff; }
body.glass .month-head { border-bottom-color: var(--line); color: var(--text-dim); }
body.glass .month-head:hover { color: var(--text); }
body.glass .group-head { background: var(--card); border-color: var(--card-line); }
body.glass .group-head:hover { background: var(--card-hover); }
body.glass .empty { color: var(--text-dim); }

/* barras de progresso */
body.glass .prog .bar,
body.glass .up-bar { background: var(--track); }

/* ---------- detalhe ---------- */
body.glass .detail {
  top: 24px; height: calc(100dvh - 48px);
  border-radius: 28px;
  background: var(--card); border: 1px solid var(--card-line);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--card-shadow);
}
body.glass .detail-head { border-bottom-color: var(--line); }
body.glass .detail-head h2 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
body.glass .detail-actions { border-top-color: var(--line); background: var(--actions-bg); }
body.glass .detail-close { background: var(--plate); border-color: var(--line); }
body.glass .detail-close:hover { color: var(--text); }
body.glass .tile,
body.glass .task,
body.glass .job-group { background: var(--plate); border-color: var(--plate-line); }
body.glass .tile { border-radius: 16px; }
body.glass .tile.cost { border-color: rgba(16, 185, 129, .32); }
/* tempo restante: o card de destaque, como o job aberto */
body.glass .eta { background: var(--hi); border-color: var(--hi-line); box-shadow: var(--hi-shadow); }
body.glass .eta-k { color: rgba(255, 255, 255, .66); }
body.glass .eta-v { color: #fff; }
body.glass .eta-ic { color: #00dcef; }
body.glass .eta-est { color: #00dcef; border-color: rgba(0, 220, 239, .45); }
body.glass .live-dot { background: #00dcef; box-shadow: 0 0 8px #00dcef; }

/* ---------- janelas (relatório, novidades, grupos, envio, equipe) ---------- */
body.glass .lightbox {
  background: var(--veil);
  -webkit-backdrop-filter: blur(14px) saturate(110%);
  backdrop-filter: blur(14px) saturate(110%);
}
body.glass .lb-inner.report,
body.glass .lb-inner.whatsnew,
body.glass .lb-inner.groups-modal {
  background: var(--modal); border-color: var(--modal-line); border-radius: 24px;
  -webkit-backdrop-filter: blur(30px) saturate(105%);
  backdrop-filter: blur(30px) saturate(105%);
  box-shadow: var(--modal-shadow);
}
/* envio e equipe têm formulário: o vidro fica quase opaco (o motivo está no style.css) */
body.glass .lb-inner.upload-modal,
body.glass .lb-inner.team-modal {
  background: var(--modal-solid); border-color: var(--modal-line); border-radius: 24px;
  -webkit-backdrop-filter: blur(30px) saturate(105%);
  backdrop-filter: blur(30px) saturate(105%);
  box-shadow: var(--modal-shadow);
}
body.glass .lb-head { color: var(--text); }
body.glass .lb-inner .lb-head,
body.glass .report-tbl th,
body.glass .report-tbl td,
body.glass .wn-item { border-bottom-color: var(--line); }
body.glass .report-tbl tr.cur td { background: rgba(16, 185, 129, .08); }
body.glass .lb-head .x { background: var(--plate); border-color: var(--line); color: var(--text-dim); }
body.glass .lb-head .x:hover { color: var(--text); }
body.glass .wn-foot,
body.glass .up-foot { background: var(--actions-bg); border-top-color: var(--line); }
body.glass .toast {
  background: var(--toast); border-color: var(--modal-line); color: var(--text);
  -webkit-backdrop-filter: blur(20px) saturate(105%);
  backdrop-filter: blur(20px) saturate(105%);
  box-shadow: var(--modal-shadow);
}

/* ===========================================================================
   DIA — o que o style.css pinta para fundo escuro e some no vidro claro
   =========================================================================== */
body.glass.glass-dia select { color-scheme: light; }
body.glass.glass-dia select option { background: #fff; color: var(--text); }
body.glass.glass-dia .input:focus { background: #fff; }
body.glass.glass-dia .btn-danger { color: #b91c1c; }
body.glass.glass-dia .btn-danger:hover { color: #991b1b; background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .4); }
body.glass.glass-dia .eye-cost { color: var(--text-dim); }
body.glass.glass-dia .eye-cost:hover { color: var(--ok); background: rgba(16, 185, 129, .12); }
body.glass.glass-dia .group-head .gh-count { background: rgba(255, 255, 255, .6); border-color: var(--line); }
body.glass.glass-dia #jobs.carddrag .group-section.drop-target { background: rgba(0, 200, 225, .08); }
body.glass.glass-dia .report-tbl tfoot td { border-top-color: var(--border-strong); }

body.glass.glass-dia .prog .bar i,
body.glass.glass-dia .up-bar i { background: linear-gradient(90deg, #1652f0, #00c4dc); box-shadow: 0 0 10px rgba(0, 196, 220, .35); }
/* "Processando" (sem %): a faixa roxa que vai e volta, não a barra de progresso */
body.glass.glass-dia .prog.indet .bar i { background: linear-gradient(90deg, transparent, #8b5cf6, transparent); box-shadow: none; }
body.glass.glass-dia .skel { background: linear-gradient(90deg, rgba(28,24,20,.05), rgba(28,24,20,.1), rgba(28,24,20,.05)); background-size: 200% 100%; }
body.glass.glass-dia .detail-scroll::-webkit-scrollbar-thumb { background: rgba(28, 24, 20, .16); background-clip: padding-box; }

/* status: pílula branca, ponto colorido, texto escuro da mesma cor */
body.glass.glass-dia .pill { background: rgba(255, 255, 255, .62); border-color: rgba(255, 255, 255, .9); }
body.glass.glass-dia .pill.rendering,
body.glass.glass-dia .pill.uploading  { color: #0a6f8a; }
body.glass.glass-dia .pill.rendering .led,
body.glass.glass-dia .pill.uploading .led { background: #00dcef; box-shadow: 0 0 8px #00dcef; }
body.glass.glass-dia .pill.queued     { color: #475569; }
body.glass.glass-dia .pill.completed  { color: #0b7a52; }
body.glass.glass-dia .pill.completed .led { background: #10b981; }
body.glass.glass-dia .pill.failed     { color: #b91c1c; }
body.glass.glass-dia .pill.suspended  { color: #8a5a06; }
body.glass.glass-dia .pill.suspended .led { background: #f5a50b; }
body.glass.glass-dia .pill.processing { color: #6d28d9; }
body.glass.glass-dia .pill.processing .led { background: #8b5cf6; box-shadow: 0 0 8px #8b5cf6; }
body.glass.glass-dia .flag { color: #8a5a06; background: rgba(245, 165, 11, .12); border-color: rgba(245, 165, 11, .45); }
body.glass.glass-dia .flag.sec { color: #b91c1c; background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .4); }
body.glass.glass-dia .task-status { color: #0a6f8a; background: rgba(0, 196, 220, .08); border-color: rgba(0, 196, 220, .28); }
body.glass.glass-dia .task-err { color: #b91c1c; }
body.glass.glass-dia .tag { background: rgba(255, 255, 255, .62); border-color: var(--line); color: var(--text-dim); }
body.glass.glass-dia .tag.cyan { color: #0a6f8a; background: rgba(0, 196, 220, .1); border-color: rgba(0, 196, 220, .3); }

/* avisos */
body.glass.glass-dia .detail-alert { background: rgba(245, 165, 11, .12); border-color: rgba(245, 165, 11, .45); border-left-color: #f5a50b; box-shadow: none; }
body.glass.glass-dia .detail-alert .da-title { color: #8a5a06; }
body.glass.glass-dia .detail-alert .da-line { color: #5f4207; }
body.glass.glass-dia .detail-alert.err { background: rgba(239, 68, 68, .09); border-color: rgba(239, 68, 68, .4); border-left-color: #ef4444; }
body.glass.glass-dia .detail-alert.err .da-title { color: #b91c1c; }
body.glass.glass-dia .detail-alert.err .da-line { color: #7f1d1d; }
body.glass.glass-dia .detail-alert.info { background: rgba(139, 92, 246, .1); border-color: rgba(139, 92, 246, .4); border-left-color: #8b5cf6; }
body.glass.glass-dia .detail-alert.info .da-title { color: #6d28d9; }
body.glass.glass-dia .detail-alert.info .da-line { color: #4c1d95; }
body.glass.glass-dia .note.warn { background: rgba(245, 165, 11, .1); border-color: rgba(245, 165, 11, .4); color: #5f4207; }
body.glass.glass-dia .note.err  { background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .35); color: #7f1d1d; }

/* janelas */
body.glass.glass-dia .wn-note { background: rgba(28, 24, 20, .04); }
body.glass.glass-dia .up-box { background: rgba(255, 255, 255, .6); border-color: var(--line); }
body.glass.glass-dia .up-drop { border-color: rgba(28, 24, 20, .2); }
body.glass.glass-dia .up-drop.on,
body.glass.glass-dia .up-drop:hover { border-color: var(--accent); background: rgba(0, 196, 220, .06); }
body.glass.glass-dia .up-chip { background: rgba(255, 255, 255, .75); border-color: var(--line); }
body.glass.glass-dia .up-msg.err { color: #b91c1c; }
body.glass.glass-dia .up-dismiss { border-color: var(--line); }
body.glass.glass-dia .up-dismiss:hover { color: var(--text); border-color: var(--border-strong); }
body.glass.glass-dia .link-btn:hover { color: var(--text); }
body.glass.glass-dia .gm-sw.on { border-color: var(--ink); box-shadow: 0 0 0 2px #fff; }
body.glass.glass-dia .gm-del { border-color: var(--border-strong); }

/* ===========================================================================
   MOVIMENTO
   Entrada (só na abertura — o glass.js tira a classe glass-intro depois,
   senão o poll de 15s repetiria tudo): a cena chega, a
   moldura surge do desfoque, e cada card aparece primeiro como vidro vazio e
   o conteúdo entra logo depois. As barras crescem e os números contam (glass.js).
   =========================================================================== */
@keyframes glass-scene {          /* noite: a cena chega do escuro */
  from { transform: scale(1.07); filter: blur(40px) saturate(55%) brightness(.12); }
  to   { transform: none;        filter: blur(20px) saturate(55%) brightness(.3); }
}
@keyframes glass-scene-dia {      /* dia: chega mais desfocada e clara */
  from { transform: scale(1.07); filter: blur(44px) saturate(106%) brightness(1.08); }
  to   { transform: none;        filter: blur(24px) saturate(106%) brightness(1); }
}
/* (mesma lista de filtros nas duas pontas, senão o navegador não interpola) */
@keyframes glass-in    { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes glass-pop   { from { opacity: 0; transform: translateY(10px) scale(.97); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes glass-swap  { from { opacity: 0; transform: translateY(8px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes glass-fill  { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes glass-grow  { from { transform: scaleX(0); } }

body.glass-intro .glass-bg { animation: glass-scene 1.6s cubic-bezier(.2,.7,.2,1) both; }
body.glass.glass-dia.glass-intro .glass-bg { animation-name: glass-scene-dia; }

/* troca de tema: o tema velho se dissolve no novo (View Transition, glass.js),
   sem desmontar os painéis nem passar pelo escuro. Por baixo, a sala nova
   assenta: chega um pouco mais desfocada e foca devagar, sem mudar o brilho. */
@keyframes glass-assenta {
  from { transform: scale(1.03); filter: blur(32px) saturate(55%) brightness(.3); }
  to   { transform: none;        filter: blur(20px) saturate(55%) brightness(.3); }
}
@keyframes glass-assenta-dia {
  from { transform: scale(1.03); filter: blur(36px) saturate(106%) brightness(1); }
  to   { transform: none;        filter: blur(24px) saturate(106%) brightness(1); }
}
body.glass-tema .glass-bg { animation: glass-assenta 1.3s cubic-bezier(.2,.7,.2,1) both; }
body.glass.glass-dia.glass-tema .glass-bg { animation-name: glass-assenta-dia; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .8s; animation-timing-function: cubic-bezier(.4,0,.2,1); }
/* no celular não há moldura; e a gaveta do detalhe fica fora da tela (transform):
   animar ali a traria para dentro */
@media (min-width: 981px) {
  body.glass-intro .glass-frame { animation: glass-in .8s cubic-bezier(.2,.7,.2,1) both; }
  body.glass-intro .detail { animation: glass-in .7s .44s cubic-bezier(.2,.7,.2,1) both; }
}
body.glass-intro .topbar,
body.glass-intro .page-head,
body.glass-intro .stat,
body.glass-intro .toolbar { animation: glass-in .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0s); }
body.glass-intro .page-head { --d: .06s; }
body.glass-intro .stat:nth-child(1) { --d: .14s; }
body.glass-intro .stat:nth-child(2) { --d: .2s; }
body.glass-intro .stat:nth-child(3) { --d: .26s; }
body.glass-intro .stat:nth-child(4) { --d: .32s; }
body.glass-intro .toolbar { --d: .36s; }
/* o vidro do card primeiro, o conteúdo depois */
body.glass-intro .stat > * { animation: glass-fill .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d, 0s) + .22s); }

/* lista em cascata — na abertura e na troca de filtro, ordem ou arquivados
   (classe swap e --gi postos pelo glass.js) */
body.glass #jobs.swap :is(.month-head, .group-head, .job, .empty) { animation: glass-swap .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--gi, 0) * 45ms); }
body.glass #jobs.swap .job > * { animation: glass-fill .45s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--gi, 0) * 45ms + .16s); }

/* troca de job: o conteúdo novo do detalhe surge do desfoque, bloco a bloco */
body.glass #detail.swap > .detail-head { animation: glass-swap .42s cubic-bezier(.2,.7,.2,1) both; }
body.glass #detail.swap > .detail-actions { animation: glass-swap .42s .12s cubic-bezier(.2,.7,.2,1) both; }
body.glass #detail.swap .detail-scroll > * { animation: glass-swap .45s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.05s + var(--gi, 0) * 50ms); }
body.glass #detail.swap .tile { animation: glass-fill .45s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.12s + var(--gi, 0) * 50ms + var(--ti, 0) * 35ms); }

/* as barras de progresso crescem a partir da esquerda (a "Processando", sem %, não) */
body.glass-intro .prog:not(.indet) .bar i,
body.glass #jobs.swap .prog:not(.indet) .bar i,
body.glass #detail.swap .prog:not(.indet) .bar i {
  transform-origin: left center;
  animation: glass-grow 1s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--gi, 0) * 45ms + .3s);
}

/* janelas abrem do mesmo jeito */
body.glass .lightbox > .lb-inner { animation: glass-pop .34s cubic-bezier(.2,.7,.2,1) both; }

/* ---------- botão sol/lua: só existe no painel de vidro; mostra o tema para onde ele leva ---------- */
.theme-btn { display: none; }
body.glass .theme-btn { display: inline-flex; width: 34px; height: 34px; padding: 0; border-radius: 50%; }
body.glass .theme-btn .ico { width: 16px; height: 16px; }
body.glass .theme-btn .i-lua { display: none; }
body.glass.glass-dia .theme-btn .i-sol { display: none; }
body.glass.glass-dia .theme-btn .i-lua { display: inline-block; }

/* ---------- quem pede menos transparência, ou navegador sem backdrop-filter ---------- */
@media (prefers-reduced-transparency: reduce) {
  body.glass .glass-frame { background: var(--frame-solid); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.glass .glass-frame { background: var(--frame-solid); }
}

/* ---------- responsivo ---------- */
@media (max-width: 980px) {
  /* sem moldura no celular: desfoque, filtro ou transform num ANCESTRAL faz o
     position:fixed da gaveta de detalhe se prender a ele em vez da tela */
  body.glass .glass-frame {
    max-width: none; margin: 0; min-height: 100dvh; padding-bottom: 0;
    border: 0; border-radius: 0; box-shadow: none;
    background: var(--frame-m);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* sem a moldura os cards ficam direto sobre a foto (só com o desfoque dela):
     um pouco mais encorpados que no computador */
  body.glass .stat,
  body.glass .job,
  body.glass .group-head { background: var(--card-m); }
  body.glass .job.active { background: var(--hi); }
  /* o detalhe vira gaveta de tela cheia: vidro bem fechado para ler */
  body.glass .detail {
    top: 0; height: 100dvh; border: 0; border-radius: 0;
    background: var(--detail-m);
    -webkit-backdrop-filter: blur(30px) saturate(120%);
    backdrop-filter: blur(30px) saturate(120%);
  }
}
@media (max-width: 720px) {
  body.glass .topbar { padding: 14px 14px 2px; }
  body.glass .topbar .who { gap: 6px; }
  body.glass .avatar,
  body.glass .theme-btn { width: 28px; height: 28px; }
  body.glass .container { padding: 14px 14px 40px; }
  body.glass .page-head h1 { font-size: 30px; }
  body.glass .stat .v { font-size: 30px; }
  /* a cápsula única quebraria em várias linhas: no celular cada filtro é uma pílula */
  body.glass .chips { background: none; border: 0; box-shadow: none; padding: 0; gap: 6px; }
  body.glass .chip { background: var(--plate); border-color: var(--plate-line); }
}