/* ==========================================================================
   Vidro Invista — base visual compartilhada por todos os sistemas da Invista
   (Hub, Finance, TV, Aprova, Ads...). Fonte única: invista-hub-claude/public/vidro/.
   Cada sistema define só a sua cor:  body{--ac:<cor>;--ac2:<cor escura>}
   Aprovado pelo Abner em 25/10/2026 (prévia em docs/previa-vidro/).
   ========================================================================== */
:root{
  --font:"Urbanist","Segoe UI",system-ui,sans-serif;
  --tv:#22894b;--tv2:#145c31;--finance:#c9820a;--finance2:#8a5600;--ads:#e8582a;--ads2:#8f2a0c;--aprova:#8a3fa6;--aprova2:#5d2671;
  --atende:#4c56c8;--atende2:#2c3389;--conteudos:#c94069;--conteudos2:#8a1f42;--equipamentos:#118f8f;--equipamentos2:#0a5c5c;--clinic:#0e7fc0;--clinic2:#07507e;
  --ac:var(--tv);--ac2:var(--atende);
  --bom:#1a8a4a;--ruim:#c0362c;--alerta:#b86a00;--info:#1d5fa8;
  --bg:#e9ece8;--ink:#14161a;--muted:#525a64;
  --glass:rgba(255,255,255,.56);--glass-strong:rgba(255,255,255,.74);--glass-line:rgba(255,255,255,.78);--glass-shade:rgba(20,30,25,.10);--hair:rgba(20,22,26,.09);
  --solid:#ffffff;--floor:#d3d8d2;--blob-n:#cfd8e6;--track:rgba(20,22,26,.08);
  --blur:22px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0c0f12;--ink:#f1f3f2;--muted:#a7aeb6;
  --glass:rgba(22,27,32,.5);--glass-strong:rgba(30,35,42,.7);--glass-line:rgba(255,255,255,.11);--glass-shade:rgba(0,0,0,.35);--hair:rgba(255,255,255,.08);
  --solid:#171b20;--floor:#0d1013;--blob-n:#1b2a3d;--track:rgba(255,255,255,.09);
  --bom:#5fd093;--ruim:#ff8a80;--alerta:#ffc061;--info:#8ab8ff;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c0f12;--ink:#f1f3f2;--muted:#a7aeb6;
  --glass:rgba(22,27,32,.5);--glass-strong:rgba(30,35,42,.7);--glass-line:rgba(255,255,255,.11);--glass-shade:rgba(0,0,0,.35);--hair:rgba(255,255,255,.08);
  --solid:#171b20;--floor:#0d1013;--blob-n:#1b2a3d;--track:rgba(255,255,255,.09);
  --bom:#5fd093;--ruim:#ff8a80;--alerta:#ffc061;--info:#8ab8ff;color-scheme:dark}

/* fundo de ambiente na cor do sistema (um elemento <div class="vd-amb"></div> no começo do body) */
.vd-amb{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:
  radial-gradient(55% 50% at 15% 18%,color-mix(in srgb,var(--ac) 45%,transparent),transparent 70%),
  radial-gradient(50% 45% at 88% 14%,var(--blob-n),transparent 70%),
  radial-gradient(45% 45% at 75% 90%,color-mix(in srgb,var(--ac2) 40%,transparent),transparent 70%),
  radial-gradient(40% 40% at 8% 92%,color-mix(in srgb,var(--ac) 25%,transparent),transparent 70%),
  linear-gradient(180deg,var(--bg),var(--floor))}

/* superfícies */
.vd-glass{background:var(--glass);border:1px solid var(--glass-line);border-radius:22px;
  box-shadow:0 10px 30px var(--glass-shade),inset 0 1px 0 rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);backdrop-filter:blur(var(--blur)) saturate(150%)}
.vd-inner{background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:14px;box-shadow:0 1px 3px var(--glass-shade)}
/* versão leve: sem desfoque (computador ou celular mais fraco; ligada sozinha por vidro.js) */
html.vd-leve .vd-glass,html.vd-leve .vd-blur{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--solid)}
@media (prefers-reduced-transparency:reduce){.vd-glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--solid)}}

/* faixa colorida com o logo do sistema */
.vd-plate{position:relative;height:64px;border-radius:15px;display:flex;align-items:center;padding:0 16px;overflow:hidden;
  background:linear-gradient(120deg,var(--c,var(--ac)),var(--c2,var(--ac2)));box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.vd-plate::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 60%);pointer-events:none}
.vd-plate img{position:relative;z-index:1;max-height:34px;max-width:100%;width:auto}
.vd-plate img.mono{filter:brightness(0) invert(1)}

/* textos e etiquetas (cor do texto misturada com a do tema: lê bem no claro e no escuro) */
.vd-eye{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--ac) 75%,var(--ink))}
.vd-pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap;
  color:color-mix(in srgb,var(--c,var(--ac)) 72%,var(--ink));background:color-mix(in srgb,var(--c,var(--ac)) 18%,transparent)}
.vd-dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--ac));flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--c,var(--ac)) 18%,transparent)}
.vd-num{font-variant-numeric:tabular-nums}

/* botões */
.vd-btn{font:800 13.5px var(--font);border:1px solid var(--glass-line);background:var(--glass-strong);color:var(--ink);padding:9px 14px;border-radius:12px;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;text-decoration:none}
.vd-btn:hover{background:color-mix(in srgb,var(--ac) 10%,var(--glass-strong))}
.vd-btn.pri{background:linear-gradient(120deg,var(--ac),var(--ac2));color:#fff;border-color:transparent;box-shadow:0 8px 20px -10px var(--ac)}
.vd-btn.sm{padding:6px 10px;font-size:12.5px}

/* segmentos (abas pequenas) */
.vd-seg{display:inline-flex;gap:3px;padding:3px;border-radius:12px;background:var(--glass-strong);border:1px solid var(--glass-line);flex-wrap:wrap}
.vd-seg button{font:700 13px var(--font);border:0;background:transparent;color:var(--muted);padding:6px 11px;border-radius:9px;cursor:pointer}
.vd-seg button[aria-pressed="true"],.vd-seg button.on{background:var(--ink);color:var(--bg)}

/* números de destaque */
.vd-kpi{padding:14px 16px;display:grid;gap:3px;align-content:start}
.vd-kpi span{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.vd-kpi strong{font-size:26px;font-weight:900;line-height:1.15;font-variant-numeric:tabular-nums}
.vd-kpi small{font-size:12.5px;color:var(--muted)}

/* tabelas: vidro só na moldura; linhas em fundo firme para ler números */
.vd-table-wrap{overflow-x:auto;background:var(--solid);border-top:1px solid var(--hair)}
.vd-table{width:100%;border-collapse:collapse;font-size:14px}
.vd-table th{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:11px 14px;border-bottom:1px solid var(--hair);background:color-mix(in srgb,var(--ac) 6%,var(--solid))}
.vd-table td{padding:12px 14px;border-bottom:1px solid var(--hair)}

/* entrada: os cartões sobem em sequência (partem visíveis) */
@media (prefers-reduced-motion:no-preference){
  .vd-in{animation:vd-rise .65s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}
  @keyframes vd-rise{from{transform:translateY(12px);opacity:.35}to{transform:none;opacity:1}}
}