/* ============================================================
   Tema "Vidro".

   Escolhido por cada usuário em Apoio › Minha conta › Tema do sistema.
   Liga com a classe "vidro" no <body>; sem ela, o sistema fica exatamente
   como sempre foi (tema Clássico). A escolha fica guardada no navegador,
   separada por usuário. Para remover o tema de vez, basta apagar este
   arquivo, a linha dele no index.html e o item do menu.

   O vidro precisa de algo atrás para desfocar: por isso o fundo ganha
   manchas suaves em navy, dourado e azul, que se movem devagar. As
   superfícies de leitura densa (planilha do relatório diário, campos de
   formulário, modais) continuam quase opacas, para não cansar a vista.
   ============================================================ */

body.vidro {
  background: #eef1f6;
  --cartao: rgba(255, 255, 255, .5);
  --linha-suave: rgba(13, 27, 53, .08);
  --fundo-app: rgba(255, 255, 255, .45);
}

/* manchas de cor atrás de tudo (z-index negativo: ficam sob o conteúdo
   sem criar camadas novas, então menus e janelas seguem como estão) */
body.vidro::before,
body.vidro::after {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
body.vidro::before {
  background:
    radial-gradient(30% 36% at 42% 18%, rgba(13, 27, 53, .55), transparent 70%),
    radial-gradient(30% 36% at 86% 26%, rgba(201, 160, 80, .62), transparent 70%);
  animation: vidro-deriva-a 26s ease-in-out infinite alternate;
}
body.vidro::after {
  background:
    radial-gradient(34% 38% at 66% 70%, rgba(76, 116, 190, .48), transparent 70%),
    radial-gradient(24% 30% at 32% 62%, rgba(201, 160, 80, .40), transparent 70%);
  animation: vidro-deriva-b 32s ease-in-out infinite alternate;
}
@keyframes vidro-deriva-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.08); }
}
@keyframes vidro-deriva-b {
  from { transform: translate3d(0, 0, 0) scale(1.04); }
  to   { transform: translate3d(-5%, -3%, 0) scale(1); }
}

/* ---------------- barra superior e menu lateral ---------------- */

body.vidro .barra {
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border-bottom-color: rgba(255, 255, 255, .6);
}
body.vidro .lateral {
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid rgba(255, 255, 255, .6);
}
/* O painel do menu fica dentro da barra, que já desfoca o fundo; o navegador
   não aplica um desfoque dentro do outro, então o painel é opaco: qualquer
   transparência deixa o texto claro da capa aparecer através dele. */
body.vidro .tn-grade {
  background: #fff;
  border-color: rgba(13, 27, 53, .08);
}

/* ---------------- cartões e blocos: vidro fosco ---------------- */

body.vidro .bloco,
body.vidro .cartao,
body.vidro .kpi,
body.vidro .rel-cartao,
body.vidro .cab-clinica,
body.vidro .lead-num,
body.vidro .fd-metrica {
  background: var(--cartao);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 18px;
  box-shadow:
    0 12px 40px -22px rgba(13, 27, 53, .38),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}
body.vidro .cartao:hover,
body.vidro .kpi:hover,
body.vidro .bloco:hover {
  border-color: rgba(255, 255, 255, .95);
  box-shadow:
    0 18px 50px -22px rgba(13, 27, 53, .45),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

/* linhas de tabela dentro do vidro */
body.vidro td { border-bottom-color: rgba(13, 27, 53, .06); }
body.vidro tbody tr:hover { background: rgba(255, 255, 255, .45); }
body.vidro tr.total td { background: rgba(255, 255, 255, .4); }
body.vidro .informativo { border-bottom-color: rgba(13, 27, 53, .08); }

/* botões claros e seletores em pílula */
body.vidro button.leve,
body.vidro a.leve {
  background: rgba(255, 255, 255, .5);
  border-color: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body.vidro button.leve:hover,
body.vidro a.leve:hover { background: rgba(255, 255, 255, .75); }
body.vidro .cl-modos { background: rgba(255, 255, 255, .45); }

/* ---------------- capas navy: vidro escuro ---------------- */

body.vidro .capa,
body.vidro .ct-capa {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(13, 27, 53, .92), rgba(22, 38, 74, .74));
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  box-shadow:
    0 24px 60px -28px rgba(13, 27, 53, .7),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}
body.vidro .capa::after,
body.vidro .ct-capa::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -90px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 160, 80, .38), transparent);
  pointer-events: none;
}
body.vidro .capa > *,
body.vidro .ct-capa > * { position: relative; z-index: 1; }

/* ---------------- janelas ---------------- */

body.vidro .modal {
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .8);
}

/* ---------------- leitura densa: continua sólida ---------------- */

body.vidro .planilha,
body.vidro .planilha td,
body.vidro .planilha th { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* navegador sem suporte a desfoque: superfícies mais opacas */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.vidro { --cartao: rgba(255, 255, 255, .92); }
  body.vidro .capa, body.vidro .ct-capa { background: var(--navy); }
  body.vidro .lateral { background: #fff; }
}

/* menos movimento pedido no sistema operacional: manchas paradas */
@media (prefers-reduced-motion: reduce) {
  body.vidro::before,
  body.vidro::after { animation: none; }
}

/* ---------------- tela de escolha do tema ---------------- */

.temas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  max-width: 760px;
}
.tema-op {
  text-align: left;
  padding: 14px;
  border-radius: 18px;
  border: 2px solid transparent;
  background: #fff;
  box-shadow: 0 1px 2px rgba(13, 27, 53, .06), 0 10px 30px -20px rgba(13, 27, 53, .35);
  cursor: pointer;
  transition: border-color .16s, transform .16s;
}
.tema-op:hover { transform: translateY(-2px); }
.tema-op.ativo { border-color: var(--gold); }
.tema-op .nome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  font-weight: 600;
  color: var(--navy);
}
.tema-op .nome span {
  font-size: 11px;
  font-weight: 500;
  color: var(--gold);
}
.tema-op .desc { font-size: 12.5px; color: var(--rotulo); margin-top: 4px; }

/* miniaturas */
.tema-mini {
  position: relative;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 26% 1fr;
}
.tema-mini .m-lat { background: var(--navy); }
.tema-mini .m-area { padding: 12px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.tema-mini .m-capa { height: 34px; border-radius: 7px; background: var(--navy); position: relative; z-index: 1; }
.tema-mini .m-card { height: 26px; border-radius: 7px; position: relative; z-index: 1; }

.tema-mini.classico .m-area { background: #f4f6f9; }
.tema-mini.classico .m-card { background: #fff; border: 1px solid #e3e8ef; }

.tema-mini.vidro .m-area {
  background:
    radial-gradient(60% 60% at 30% 10%, rgba(13, 27, 53, .45), transparent 70%),
    radial-gradient(50% 60% at 95% 30%, rgba(201, 160, 80, .6), transparent 70%),
    radial-gradient(60% 60% at 70% 100%, rgba(76, 116, 190, .5), transparent 70%),
    #eef1f6;
}
.tema-mini.vidro .m-capa { background: linear-gradient(135deg, rgba(13, 27, 53, .9), rgba(22, 38, 74, .7)); }
.tema-mini.vidro .m-card {
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.tema-mini.vidro .m-lat { background: rgba(13, 27, 53, .9); }

/* celular: o menu abre por cima da página; translúcido, ele mistura com o
   conteúdo atrás e perde leitura. Lá ele é sólido. */
@media (max-width: 900px) {
  body.vidro .lateral {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}