/* Temas de vidro (Liquid Glass): Pérola, Grafite e Azul-noite.
   Ativados por data-glass no <html>. Pérola e Grafite usam a base clara (data-theme="light");
   Azul-noite usa a base escura (data-theme="dark"), então toda regra do escuro continua valendo.
   Receita: luz difusa atrás (body::before), superfícies translúcidas com desfoque e saturação,
   brilho fino na borda de cima. O vermelho Nextyo fica só em ações, seleção e marca. */

/* ---------- tokens ---------- */
:root[data-glass="perola"]{
  /* tirada da foto do CarPlay: lilás-pérola, malva e taupe */
  --g-base:#E6DCE3;
  --g-orb1:#E9D3DC; --g-orb2:#D8B7BF; --g-orb3:#E4D2CB; --g-orb4:#D3C8DF; --g-orb5:#F4EFF2;
  --g-glass:rgba(250,245,248,.42); --g-glass-2:rgba(246,240,244,.30); --g-solid:rgba(248,243,246,.94);
  --g-edge:rgba(255,255,255,.62); --g-hi:rgba(255,255,255,.92); --g-lo:rgba(255,255,255,.30); --g-drop:rgba(95,75,90,.14);
  --g-rail:rgba(200,187,179,.46);
  --bg:#E6DCE3; --surface:rgba(250,245,248,.48); --surface-2:rgba(214,203,210,.42);
  --line:rgba(120,100,115,.16); --line-strong:rgba(110,90,105,.26);
  --fg:#2F2A2E; --fg-2:#4A4448; --muted:#5E575C;
  --accent-soft:rgba(239,26,45,.10); --accent-strong:#B30E25;
  --rail:transparent; --rail-2:rgba(255,255,255,.40); --rail-fg:#3A3438; --rail-active:#2F2A2E; --rail-line:rgba(255,255,255,.5); --rail-grp:#6E666B;
  --info-soft:rgba(214,203,210,.55);
  --bubble-in:rgba(252,249,251,.78); --bubble-out:rgba(214,203,210,.70); --bubble-note:rgba(255,244,214,.78); --chat-bg:rgba(255,255,255,.10);
  --shadow:0 1px 2px rgba(95,75,90,.06),0 18px 44px -16px rgba(95,75,90,.24);
  --shadow-sm:0 1px 2px rgba(95,75,90,.06),0 4px 14px rgba(95,75,90,.08);
}
:root[data-glass="grafite"]{
  --g-base:#E3E4E7;
  --g-orb1:#B9BEC8; --g-orb2:#C9CCD3; --g-orb3:#D6D8DD; --g-orb4:#9EA4AF; --g-orb5:#FFFFFF;
  --g-glass:rgba(255,255,255,.38); --g-glass-2:rgba(255,255,255,.26); --g-solid:rgba(244,245,247,.94);
  --g-edge:rgba(255,255,255,.62); --g-hi:rgba(255,255,255,.95); --g-lo:rgba(255,255,255,.30); --g-drop:rgba(30,35,48,.16);
  --g-rail:rgba(60,65,78,.12);
  --bg:#E3E4E7; --surface:rgba(255,255,255,.46); --surface-2:rgba(210,213,220,.45);
  --line:rgba(40,45,60,.13); --line-strong:rgba(40,45,60,.22);
  --fg:#1D1F24; --fg-2:#3A3D45; --muted:#4F535C;
  --accent-soft:rgba(239,26,45,.09); --accent-strong:#B30E25;
  --rail:transparent; --rail-2:rgba(255,255,255,.42); --rail-fg:#2D3038; --rail-active:#1D1F24; --rail-line:rgba(255,255,255,.5); --rail-grp:#5F636C;
  --info-soft:rgba(200,204,212,.55);
  --bubble-in:rgba(255,255,255,.78); --bubble-out:rgba(239,26,45,.10); --bubble-note:rgba(255,244,214,.78); --chat-bg:rgba(255,255,255,.10);
  --shadow:0 1px 2px rgba(30,35,48,.06),0 18px 44px -16px rgba(30,35,48,.26);
  --shadow-sm:0 1px 2px rgba(30,35,48,.06),0 4px 14px rgba(30,35,48,.08);
}
:root[data-glass="noite"]{
  /* o azul mais escuro possível; a luz por trás fica só um degrau acima do fundo */
  --g-base:#040914;
  --g-orb1:#0C1A3A; --g-orb2:#160F2A; --g-orb3:#0E1F45; --g-orb4:#0A1530; --g-orb5:#102246;
  --g-glass:rgba(140,165,225,.07); --g-glass-2:rgba(140,165,225,.04); --g-solid:rgba(10,18,38,.96);
  --g-edge:rgba(170,190,240,.15); --g-hi:rgba(200,215,250,.28); --g-lo:rgba(140,165,225,.05); --g-drop:rgba(0,0,0,.55);
  --g-rail:rgba(140,165,225,.05);
  --bg:#040914; --surface:rgba(140,165,225,.07); --surface-2:rgba(160,182,235,.12);
  --line:rgba(170,190,240,.13); --line-strong:rgba(170,190,240,.22);
  --fg:#EEF2FA; --fg-2:#D3DBEB; --muted:#AAB6CF;
  --accent-soft:rgba(239,26,45,.18); --accent-strong:#FF6B78;
  --rail:transparent; --rail-2:rgba(160,182,235,.10); --rail-fg:#DCE3F2; --rail-active:#FFFFFF; --rail-line:rgba(170,190,240,.12); --rail-grp:#8C99B5;
  --info-soft:rgba(160,182,235,.12);
  --bubble-in:rgba(160,182,235,.12); --bubble-out:rgba(239,26,45,.24); --bubble-note:rgba(251,191,36,.14); --chat-bg:rgba(0,0,0,.10);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 18px 44px -16px rgba(0,0,0,.8);
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
}

/* ---------- luz atrás do vidro ---------- */
:root[data-glass],:root[data-glass] body{background:var(--g-base)}
:root[data-glass] body::before{
  content:"";position:fixed;inset:-10vmax;z-index:0;pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 8% 4%,var(--g-orb1),transparent 70%),
    radial-gradient(34vmax 34vmax at 96% 10%,var(--g-orb4),transparent 70%),
    radial-gradient(30vmax 30vmax at 50% 108%,var(--g-orb3),transparent 70%),
    radial-gradient(22vmax 22vmax at 80% 78%,var(--g-orb2),transparent 70%),
    radial-gradient(26vmax 26vmax at 34% 46%,var(--g-orb5),transparent 70%),
    var(--g-base);
  filter:blur(30px);
}
:root[data-glass] #app{position:relative;z-index:1}

/* ---------- receita do vidro ---------- */
:root[data-glass] .shell{gap:12px;padding:12px;background:transparent}
:root[data-glass] .rail,
:root[data-glass] .topbar,
:root[data-glass] .card,
:root[data-glass] .kpi,
:root[data-glass] .ib-list,
:root[data-glass] .ib-conv,
:root[data-glass] .ib-profile,
:root[data-glass] .modal,
:root[data-glass] .dd-menu,
:root[data-glass] .status-btn{
  background:linear-gradient(155deg,var(--g-glass) 0%,var(--g-glass-2) 60%,var(--g-glass) 100%);
  -webkit-backdrop-filter:blur(30px) saturate(185%);backdrop-filter:blur(30px) saturate(185%);
  border:1px solid var(--g-edge);
  box-shadow:inset 0 1.5px 0 var(--g-hi),inset 0 -1px 0 var(--g-lo),0 18px 44px -18px var(--g-drop),0 2px 8px -2px var(--g-drop);
}
:root[data-glass] .rail{border-radius:26px;background-color:var(--g-rail)}
:root[data-glass] .main{gap:12px}
:root[data-glass] .topbar{border-radius:999px;margin:0;padding:0 14px 0 22px}
:root[data-glass] .page{border-radius:26px}
:root[data-glass] .card,:root[data-glass] .kpi{border-radius:22px}
:root[data-glass] .ib-list,:root[data-glass] .ib-conv,:root[data-glass] .ib-profile{border-radius:24px}
:root[data-glass] .modal{border-radius:26px;background-color:var(--g-solid)}
:root[data-glass] .dd-menu{border-radius:18px;background-color:var(--g-solid)}
:root[data-glass] .overlay{background:rgba(10,12,24,.28)}
:root[data-glass="noite"] .overlay{background:rgba(0,0,0,.5)}

/* menus e cabeçalhos que ficam por cima do conteúdo: quase opacos */
:root[data-glass] table.wl th,
:root[data-glass] .qm-sticky,
:root[data-glass] .qm-actions,
:root[data-glass] .sl-qhead,
:root[data-glass] .kb-drop,
:root[data-glass] .ed-drawer,
:root[data-glass] .dl-pop,
:root[data-glass] .as-call,
:root[data-glass] .mon-side,
:root[data-glass] .inbox.show-profile .ib-profile{background:var(--g-solid)}
:root[data-glass] .ed-bar{background:var(--g-base)}

/* controles em pílula de vidro */
:root[data-glass] .btn{border-color:var(--g-edge);background:var(--g-glass);box-shadow:inset 0 1px 0 var(--g-hi)}
:root[data-glass] .btn:hover{background:var(--surface-2)}
:root[data-glass] .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
:root[data-glass] .btn.ghost:hover{background:var(--rail-2)}
:root[data-glass] .theme-btn{border-radius:999px!important;background:var(--g-glass)!important;border-color:var(--g-edge)!important}
:root[data-glass] .status-btn{border-radius:999px}
:root[data-glass] input,:root[data-glass] select,:root[data-glass] textarea{background:var(--g-glass);border-color:var(--line-strong)}
:root[data-glass] select option{background:var(--g-solid);color:var(--fg)}
:root[data-glass] .ib-tabs{background:var(--g-glass-2);border-color:var(--g-edge);border-radius:999px}
:root[data-glass] .ib-tabs button{border-radius:999px}
:root[data-glass] .ib-tabs button.active{background:var(--g-solid);box-shadow:inset 0 1px 0 var(--g-hi),0 2px 8px var(--g-drop)}

/* vermelho em cápsula: só nas ações */
:root[data-glass] .btn.primary{
  border:0;color:#fff;
  background:linear-gradient(180deg,#F43345 0%,#EF1A2D 55%,#D8162A 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 -2px 4px rgba(120,0,15,.22),0 4px 10px rgba(120,40,60,.18);
}
:root[data-glass] .btn.primary:hover{background:linear-gradient(180deg,#E62A3C 0%,#D8162A 55%,#C8102E 100%)}
:root[data-glass] .nav a{border-radius:14px}
:root[data-glass] .nav a.active{background:var(--g-solid);color:var(--fg);box-shadow:inset 0 1px 0 var(--g-hi),0 2px 10px var(--g-drop)}
:root[data-glass="noite"] .nav a.active{background:rgba(160,182,235,.14);color:#fff;box-shadow:inset 0 1px 0 var(--g-hi)}
:root[data-glass] .nav a.active svg{color:var(--brand)}

/* celular: a casca volta a ocupar a tela toda */
@media (max-width:900px){
  :root[data-glass] .shell{padding:0;gap:0}
  :root[data-glass] .topbar{border-radius:0;border-width:0 0 1px}
  :root[data-glass] .rail{border-radius:0 26px 26px 0;background-color:var(--g-solid)}
}

/* sem suporte a desfoque (navegadores antigos): superfícies quase opacas para manter a leitura */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root[data-glass] .rail,:root[data-glass] .topbar,:root[data-glass] .card,:root[data-glass] .kpi,
  :root[data-glass] .ib-list,:root[data-glass] .ib-conv,:root[data-glass] .ib-profile,:root[data-glass] .status-btn{background:var(--g-solid)}
}

/* bolinhas do seletor de tema */
.th-dot.th-perola{background:linear-gradient(135deg,#F1ECF0,#D6CBD2)}
.th-dot.th-grafite{background:linear-gradient(135deg,#F4F5F7,#9EA4AF)}
.th-dot.th-noite{background:linear-gradient(135deg,#0C1A3A,#040914)}