/* CRM33 Comercial (visual moderno) — superfícies de vidro e fundo em gradiente.
 *
 * Só vale no moderno (:root sem data-visual); a skin HubMed não é tocada. Sem escolha do usuário
 * nada aqui se aplica: o padrão continua Opaco sobre a foto da unidade.
 *
 * data-superficie="suave" | "vidro" (Aparência > Superfícies): TUDO fica translúcido, como no CRM antigo do
 * Maringá, cada camada no seu nível (opacidades calculadas em js/core/vidro.js sobre o fundo de verdade, nunca
 * abaixo do contraste AA do texto daquela camada):
 *   --vidro-alfa          casca e painéis grandes (.rail, .topbar, .panel);
 *   --vidro-alfa-interno  véu de cartões, listas, cabeçalhos, chips, barras e botões dentro de um painel/menu/modal;
 *   --vidro-alfa-sobre    menus, popovers, modais e o que fica solto sobre o fundo (um pouco mais opaco);
 *   --vidro-alfa-campo    inputs, selects, áreas de texto e o campo do chat (quase opaco);
 *   --vidro-alfa-fio / --vidro-alfa-bolha   fundo da conversa (bem transparente) e balões (sempre legíveis);
 *   --vidro-alfa-estado   selos e faixas de ok/pendente/falha/informação e a seleção;
 *   --vidro-alfa-aviso    toast escuro.
 * Os tokens de cor (--surface, --surface-soft, …) são redefinidos por camada; as áreas não mudam nada.
 * data-vidro-leve: máquina fraca, sem suporte, "reduzir transparência" ou fundo Gradiente: sem backdrop-filter
 * (sobre foto o JS sobe a opacidade para compensar a falta do desfoque).
 *
 * data-fundo-modo="gradiente": um canvas fixo (js/core/gradiente.js, WebGL num Worker) desenha o estilo
 * escolhido; esta folha só põe o canvas no lugar e mantém a camada de reserva (body::before) com o mesmo estilo,
 * que aparece até o canvas ficar pronto e quando não há WebGL.
 */

:root:not([data-visual])[data-superficie] {
  /* Cores sólidas do tema atual, copiadas antes de as camadas redefinirem os tokens (sem ciclo). */
  --vidro-base: var(--surface);
  --vidro-base-soft: var(--surface-soft);
  --vidro-base-muted: var(--surface-muted);
  --vidro-thread: var(--thread-bg);
  --vidro-bolha-in: var(--bubble-in);
  --vidro-bolha-out: var(--bubble-out);
  --vidro-bolha-nota: var(--bubble-note);
  --vidro-accent-soft: var(--accent-soft);
  --vidro-accent-softer: var(--accent-softer);
  --vidro-ok-soft: var(--ok-soft);
  --vidro-warn-soft: var(--warn-soft);
  --vidro-danger-soft: var(--danger-soft);
  --vidro-draft-soft: var(--draft-soft);
  --vidro-info-soft: var(--info-soft);
  --vidro-blur: 14px;
  --vidro-blur-sobre: 18px;
}

/* Solto sobre o fundo (fora de painel, menu ou modal): nível "sobre". */
:root:not([data-visual])[data-superficie] body {
  --surface: color-mix(in srgb, var(--vidro-base) var(--vidro-alfa-sobre, 100%), transparent);
  --surface-soft: color-mix(in srgb, var(--vidro-base-soft) var(--vidro-alfa-sobre, 100%), transparent);
  --surface-muted: color-mix(in srgb, var(--vidro-base-muted) var(--vidro-alfa-sobre, 100%), transparent);
}

/* Dentro de um contêiner de vidro: véu interno por cima do vidro dele (a soma fica mais opaca, nunca menos
 * legível). Vale para o próprio contêiner também, por isso ele recebe o fundo explícito logo abaixo. */
:root:not([data-visual])[data-superficie] :is(.rail, .topbar, .panel, .menu, .modal, [role="dialog"],
  .at-acoes-pop, .bsc-pop, .at-reagir, .at-novas, .slash-menu, .attach-menu, .quick-reaction-bar, .reaction-emoji-panel,
  .oa-agenda-pop, .oa-opcoes, .oa-res-bloco, .res-rel-menu, .res-cal, .cfg-menu-lista, .sup-corr, .ntf, .rx-painel) {
  --surface: color-mix(in srgb, var(--vidro-base) var(--vidro-alfa-interno, 100%), transparent);
  --surface-soft: color-mix(in srgb, var(--vidro-base-soft) var(--vidro-alfa-interno, 100%), transparent);
  --surface-muted: color-mix(in srgb, var(--vidro-base-muted) calc(var(--vidro-alfa-interno, 100%) + 10%), transparent);
  --thread-bg: color-mix(in srgb, var(--vidro-thread) var(--vidro-alfa-fio, 100%), transparent);
  --bubble-in: color-mix(in srgb, var(--vidro-bolha-in) var(--vidro-alfa-bolha, 100%), transparent);
  --bubble-out: color-mix(in srgb, var(--vidro-bolha-out) var(--vidro-alfa-bolha, 100%), transparent);
  --bubble-note: color-mix(in srgb, var(--vidro-bolha-nota) var(--vidro-alfa-bolha, 100%), transparent);
  --accent-soft: color-mix(in srgb, var(--vidro-accent-soft) var(--vidro-alfa-estado, 100%), transparent);
  --accent-softer: color-mix(in srgb, var(--vidro-accent-softer) var(--vidro-alfa-estado, 100%), transparent);
  --ok-soft: color-mix(in srgb, var(--vidro-ok-soft) var(--vidro-alfa-estado, 100%), transparent);
  --warn-soft: color-mix(in srgb, var(--vidro-warn-soft) var(--vidro-alfa-estado, 100%), transparent);
  --danger-soft: color-mix(in srgb, var(--vidro-danger-soft) var(--vidro-alfa-estado, 100%), transparent);
  --draft-soft: color-mix(in srgb, var(--vidro-draft-soft) var(--vidro-alfa-estado, 100%), transparent);
  --info-soft: color-mix(in srgb, var(--vidro-info-soft) var(--vidro-alfa-estado, 100%), transparent);
  /* Design system 90: tons e textura recalculados sobre o vidro da camada (senão ficariam sólidos, calculados no :root). */
  --tonal: color-mix(in srgb, var(--ink) 5%, var(--surface));
  --tonal-hover: color-mix(in srgb, var(--ink) 9%, var(--surface));
  --tonal-forte: color-mix(in srgb, var(--ink) 13%, var(--surface));
  --textura: linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%);
}
:root[data-theme="dark"]:not([data-visual])[data-superficie] :is(.rail, .topbar, .panel, .menu, .modal, [role="dialog"]) {
  --tonal: color-mix(in srgb, var(--ink) 7%, var(--surface));
  --tonal-hover: color-mix(in srgb, var(--ink) 12%, var(--surface));
  --tonal-forte: color-mix(in srgb, var(--ink) 17%, var(--surface));
}

/* Casca e painéis grandes: o nível escolhido, com desfoque (sem ele em máquina fraca e no Gradiente). */
:root:not([data-visual])[data-superficie] :is(.rail, .topbar, .panel) {
  background: color-mix(in srgb, var(--vidro-base) var(--vidro-alfa, 100%), transparent);
  -webkit-backdrop-filter: blur(var(--vidro-blur)) saturate(1.15);
  backdrop-filter: blur(var(--vidro-blur)) saturate(1.15);
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
}

/* Menus, popovers e modais: um pouco mais opacos que o painel. Ficam por cima de conteúdo (texto), então sem
 * desfoque nunca descem de 92% (o texto de trás não atravessa). */
:root:not([data-visual])[data-superficie] :is(.menu, .modal,
  .at-acoes-pop, .bsc-pop, .at-reagir, .at-novas, .slash-menu, .attach-menu, .quick-reaction-bar, .reaction-emoji-panel,
  .oa-agenda-pop, .oa-opcoes, .oa-res-bloco, .res-rel-menu, .res-cal, .cfg-menu-lista, .sup-corr, .ntf, .rx-painel) {
  background: color-mix(in srgb, var(--vidro-base) max(var(--vidro-alfa-sobre, 100%), 94%), transparent);
  -webkit-backdrop-filter: blur(var(--vidro-blur-sobre)) saturate(1.1);
  backdrop-filter: blur(var(--vidro-blur-sobre)) saturate(1.1);
}
:root:not([data-visual])[data-superficie][data-vidro-leve] :is(.menu, .modal,
  .at-acoes-pop, .bsc-pop, .at-reagir, .at-novas, .slash-menu, .attach-menu, .quick-reaction-bar, .reaction-emoji-panel,
  .oa-agenda-pop, .oa-opcoes, .oa-res-bloco, .res-rel-menu, .res-cal, .cfg-menu-lista, .sup-corr, .ntf, .rx-painel) {
  background: color-mix(in srgb, var(--vidro-base) max(var(--vidro-alfa-sobre, 100%), 92%), transparent);
}

/* O que se digita: quase opaco (nível campo). Interruptores, caixas, rádios, faixas e cor ficam de fora
 * (o trilho do interruptor tem cor própria; pintá-lo apagava o ligado/desligado). */
:root:not([data-visual])[data-superficie] :is(select, textarea,
  .input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]),
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"])) {
  --surface: color-mix(in srgb, var(--vidro-base) var(--vidro-alfa-campo, 100%), transparent);
  --surface-soft: color-mix(in srgb, var(--vidro-base-soft) var(--vidro-alfa-campo, 100%), transparent);
  --surface-muted: color-mix(in srgb, var(--vidro-base-muted) var(--vidro-alfa-campo, 100%), transparent);
}

/* Cabeçalhos que grudam no alto enquanto o conteúdo rola por baixo: quase opacos (texto não atravessa). */
:root:not([data-visual])[data-superficie] :is(.table thead th, .cad-table-previa th, .fi-orc-topo, .rp-tabela th) {
  --surface: color-mix(in srgb, var(--vidro-base) 94%, transparent);
}
@media (max-width: 900px) {
  :root:not([data-visual])[data-superficie] .cfg-nav { --surface: color-mix(in srgb, var(--vidro-base) 94%, transparent); }
}

/* Texto pintado com a cor da superfície (sobre fundo cheio): usa a cor sólida, senão vira texto translúcido. */
:root:not([data-visual])[data-superficie] :is(.dica-controle, mark.at-marca.is-atual, .rx-ch-acao.is-ok, .sup-aprovar, .cfg-resp-img-x, .alin-balao),
:root:not([data-visual])[data-superficie] .rede-ponto[data-tip]::after,
:root:not([data-visual])[data-superficie] .sup-aprovar svg { color: var(--vidro-base); }

/* Toast escuro: translúcido, texto claro sempre AA (nível aviso). */
:root:not([data-visual])[data-superficie] .toast { background: color-mix(in srgb, var(--toast-bg) var(--vidro-alfa-aviso, 100%), transparent); }
:root:not([data-visual])[data-superficie] .toast[data-variant="error"] { background: color-mix(in srgb, var(--toast-danger) var(--vidro-alfa-aviso, 100%), transparent); }
:root:not([data-visual])[data-superficie] .toast[data-variant="ok"] { background: color-mix(in srgb, var(--toast-ok) var(--vidro-alfa-aviso, 100%), transparent); }

:root:not([data-visual])[data-superficie][data-vidro-leve] :is(.rail, .topbar, .panel, .menu, .modal,
  .at-acoes-pop, .bsc-pop, .at-reagir, .at-novas, .slash-menu, .attach-menu, .quick-reaction-bar, .reaction-emoji-panel,
  .oa-agenda-pop, .oa-opcoes, .oa-res-bloco, .res-rel-menu, .res-cal, .cfg-menu-lista, .sup-corr, .ntf, .rx-painel) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:not([data-visual])[data-superficie] :is(.rail, .topbar, .panel) { background: var(--vidro-base); }
}

/* ---------- Fundo em gradiente ---------- */

:root:not([data-visual])[data-fundo-modo="gradiente"] {
  --fundo-img: none;
  /* Reserva até o JS mandar a paleta do tema (--grad-1…4, as mesmas cores do canvas). */
  --grad-1: color-mix(in srgb, var(--accent) 62%, var(--fundo-cor));
  --grad-2: color-mix(in srgb, var(--info) 55%, var(--fundo-cor));
  --grad-3: color-mix(in srgb, var(--accent) 34%, #ffffff);
  --grad-4: color-mix(in srgb, var(--info) 30%, #ffffff);
}
:root:not([data-visual])[data-fundo-modo="gradiente"][data-theme="dark"] {
  --grad-1: color-mix(in srgb, var(--accent) 50%, var(--fundo-cor));
  --grad-2: color-mix(in srgb, var(--info) 42%, var(--fundo-cor));
  --grad-3: color-mix(in srgb, var(--accent) 30%, #000000);
  --grad-4: color-mix(in srgb, var(--info) 30%, #000000);
}

/* Canvas do WebGL: acende por cima da reserva quando o primeiro quadro sai. */
canvas.crm33-gradiente {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1;
  pointer-events: none; opacity: 0; transition: opacity 600ms var(--ease);
}
canvas.crm33-gradiente.is-oculto { display: none; }
:root:not([data-visual])[data-fundo-modo="gradiente"][data-gradiente-gl="on"] canvas.crm33-gradiente { opacity: 1; }
:root[data-visual] canvas.crm33-gradiente, :root:not([data-fundo-modo="gradiente"]) canvas.crm33-gradiente { display: none; }

/* Reserva em CSS (uma camada só, pintada uma vez), no estilo escolhido. */
:root:not([data-visual])[data-fundo-modo="gradiente"] body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 44% at 18% 22%, var(--grad-1), transparent 72%),
    radial-gradient(42% 48% at 82% 30%, var(--grad-2), transparent 72%),
    radial-gradient(46% 50% at 55% 85%, var(--grad-3), transparent 74%),
    radial-gradient(30% 36% at 30% 70%, var(--grad-4), transparent 70%),
    var(--fundo-cor);
  transform: translate3d(0, 0, 0);
}
:root:not([data-visual])[data-fundo-modo="gradiente"][data-gradiente-estilo="aurora"] body::before {
  background:
    linear-gradient(to bottom, transparent 18%, var(--fundo-cor) 92%),
    linear-gradient(100deg, transparent 8%, var(--grad-1) 20%, transparent 32%, var(--grad-2) 46%, transparent 58%, var(--grad-3) 70%, transparent 82%, var(--grad-4) 92%, transparent),
    var(--fundo-cor);
}
:root:not([data-visual])[data-fundo-modo="gradiente"][data-gradiente-estilo="ondas"] body::before {
  background:
    radial-gradient(90% 34% at 70% 100%, var(--grad-4) 55%, transparent 72%),
    radial-gradient(110% 40% at 25% 92%, var(--grad-3) 55%, transparent 72%),
    radial-gradient(120% 44% at 65% 78%, var(--grad-2) 55%, transparent 72%),
    radial-gradient(130% 46% at 30% 62%, var(--grad-1) 55%, transparent 72%),
    var(--fundo-cor);
}
/* Sem WebGL (ou enquanto ele não fica pronto) a reserva anda em passos, só com transform (compositor). */
:root:not([data-visual])[data-fundo-modo="gradiente"][data-fundo-animado][data-gradiente-gl="off"] body::before {
  /* Em passos (10 por segundo, deslocamento de centésimos de %): o compositor só redesenha quando o passo muda. */
  animation: crm33-grad-deriva 48s steps(480) infinite alternate;
  will-change: transform;
}
:root[data-aba-oculta] body::before { animation-play-state: paused !important; }
/* Computador sobrecarregado (js/core/vidro.js, ritmoInteligente): para e retoma do mesmo ponto. */
:root[data-fundo-pesado] body::before { animation-play-state: paused !important; }
:root[data-motion="off"] body::before { animation: none !important; will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  :root body::before { animation: none !important; will-change: auto; }
  canvas.crm33-gradiente { transition: none; }
}
@keyframes crm33-grad-deriva {
  from { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
  to { transform: translate3d(4%, 3%, 0) rotate(6deg) scale(1.06); }
}

/* Miniatura do gradiente na Aparência (o mesmo desenho da reserva, sem movimento). */
.cfg-thumb-gradiente .cfg-grad-prev, .cfg-estilo-prev {
  display: block; width: 120px; height: 68px; border-radius: var(--radius-xs);
  background:
    radial-gradient(60% 70% at 20% 25%, color-mix(in srgb, var(--accent) 50%, var(--fundo-cor)), transparent 72%),
    radial-gradient(60% 70% at 85% 35%, color-mix(in srgb, var(--info) 40%, var(--fundo-cor)), transparent 72%),
    radial-gradient(70% 70% at 55% 90%, color-mix(in srgb, var(--accent) 22%, #ffffff), transparent 74%),
    var(--fundo-cor);
}
.cfg-estilo-prev { width: 88px; height: 50px; }
.cfg-estilo-prev[data-estilo="aurora"] {
  background:
    linear-gradient(to bottom, transparent 15%, var(--fundo-cor) 95%),
    linear-gradient(100deg, transparent 6%, color-mix(in srgb, var(--accent) 55%, var(--fundo-cor)) 22%, transparent 38%,
      color-mix(in srgb, var(--info) 50%, var(--fundo-cor)) 55%, transparent 70%, color-mix(in srgb, var(--accent) 35%, #ffffff) 86%, transparent),
    var(--fundo-cor);
}
.cfg-estilo-prev[data-estilo="ondas"] {
  background:
    radial-gradient(110% 40% at 70% 100%, color-mix(in srgb, var(--info) 35%, #ffffff) 55%, transparent 72%),
    radial-gradient(130% 46% at 25% 85%, color-mix(in srgb, var(--info) 50%, var(--fundo-cor)) 55%, transparent 72%),
    radial-gradient(140% 50% at 60% 62%, color-mix(in srgb, var(--accent) 55%, var(--fundo-cor)) 55%, transparent 72%),
    var(--fundo-cor);
}

/* ---------- Aparência: Superfícies e Fundo (js/areas/configuracoes/aparencia.js) ---------- */
.cfg-aparencia-vidro { display: contents; }
.cfg-grad { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cfg-grad-estilos { display: flex; flex-wrap: wrap; gap: 6px; }
.cfg-grad-estilo {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 3px;
  border: 2px solid transparent; border-radius: var(--radius-sm); background: var(--surface-muted);
  color: var(--ink-soft); font: inherit; font-size: var(--fs-1); cursor: pointer;
}
.cfg-grad-estilo[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
/* Ajustes em grade: cabem lado a lado na largura disponível (2 a 4 por linha), sem rolar. */
.cfg-grad-ajustes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; }
.cfg-grad-ajuste {
  display: grid; grid-template-columns: 78px minmax(0, 1fr) 52px; align-items: center; gap: 6px; min-width: 0;
  font-size: var(--fs-1); color: var(--ink-soft);
}
.cfg-grad-ajuste input[type="range"] { width: 100%; min-width: 0; margin: 0; accent-color: var(--accent); cursor: pointer; }
.cfg-grad-ajuste output { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.cfg-grad-pe { justify-content: space-between; flex-wrap: wrap; gap: 8px; }
@media (max-width: 767px) {
  .cfg-grad-ajustes { grid-template-columns: minmax(0, 1fr); }
}

/* Celular: o grupo sino+avatar é sticky e tinha fundo opaco que recortava a barra de vidro; no vidro/suave ele herda a barra. */
:root:not([data-visual])[data-superficie] .rail-util-grupo { background: transparent; box-shadow: none; }