/* ============================================================
   gwg-glass.css — Fundo "telecom" (camada dedicada) + Liquid Glass
   Escopado em html.dark. Carregado após gwg-cc-v2.css.
   Abordagem à prova de cascade: o fundo é um elemento próprio (#appBg)
   fixo atrás de tudo, e o glass usa especificidade alta + !important.
   ============================================================ */

/* ---- Camada de fundo telecom (só no modo escuro) ---- */
#appBg { display: none; }
html.dark #appBg {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  background-color: #070d1a;
  background-image:
    radial-gradient(1100px circle at 8% -10%, rgba(56,189,248,0.22), transparent 42%),
    radial-gradient(950px circle at 100% 0%, rgba(99,102,241,0.18), transparent 42%),
    radial-gradient(900px circle at 50% 118%, rgba(56,189,248,0.12), transparent 46%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%2338bdf8' stroke-opacity='0.11' stroke-width='1'%3E%3Cpath d='M20 40 L120 90 L210 50'/%3E%3Cpath d='M120 90 L150 180 L60 210'/%3E%3Cpath d='M210 50 L240 150 L150 180'/%3E%3Cpath d='M20 40 L40 150 L60 210'/%3E%3Cpath d='M40 150 L120 90'/%3E%3Cpath d='M240 150 L210 240'/%3E%3C/g%3E%3Cg fill='%2338bdf8' fill-opacity='0.20'%3E%3Ccircle cx='20' cy='40' r='2.4'/%3E%3Ccircle cx='120' cy='90' r='3.2'/%3E%3Ccircle cx='210' cy='50' r='2.4'/%3E%3Ccircle cx='150' cy='180' r='2.8'/%3E%3Ccircle cx='60' cy='210' r='2.4'/%3E%3Ccircle cx='40' cy='150' r='2'/%3E%3Ccircle cx='240' cy='150' r='2.2'/%3E%3Ccircle cx='210' cy='240' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-position: center, center, center, top left;
}

/* ---- Liquid Glass nos cards (especificidade alta p/ vencer o tema) ---- */
html.dark .content-area .card-slide-up-v2,
html.dark .content-area .card-3d,
html.dark .content-area .glass-card,
html.dark .glass-card {
  background-color: rgba(18,27,50,0.48) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
html.dark .content-area .card-slide-up-v2:hover,
html.dark .content-area .card-3d:hover,
html.dark .content-area .glass-card:hover {
  background-color: rgba(26,38,66,0.58) !important;
  border-color: rgba(56,189,248,0.30) !important;
}

/* fallback p/ navegadores sem backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.dark .content-area .card-slide-up-v2,
  html.dark .content-area .card-3d,
  html.dark .content-area .glass-card {
    background-color: rgba(16,24,46,0.92) !important;
  }
}


/* ============================================================
   EXTENSÃO (28/06): liquid glass no SITE TODO — cards Bootstrap
   e variantes. Especificidade alta (.content-area .card...) p/ vencer
   os !important opacos de gwg-cc-v2 (.card #121a2e, header/footer #16213b).
   ============================================================ */
html.dark .content-area .card,
html.dark .content-area .visita-card,
html.dark .content-area .kanban-card {
  background-color: rgba(18,27,50,0.46) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
html.dark .content-area .card:hover,
html.dark .content-area .visita-card:hover,
html.dark .content-area .kanban-card:hover {
  border-color: rgba(56,189,248,0.26) !important;
}
/* header/body/footer: translúcidos, sem blur próprio (o .card já borra) */
html.dark .content-area .card > .card-header {
  background-color: rgba(255,255,255,0.05) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
  color: #e8eef9 !important;
}
html.dark .content-area .card > .card-footer {
  background-color: rgba(255,255,255,0.04) !important;
  border-top-color: rgba(255,255,255,0.08) !important;
}
html.dark .content-area .card > .card-body { background-color: transparent !important; }

/* tabelas dentro de card de vidro: cabeçalho/linhas translúcidos p/ ler o vidro */
html.dark .content-area .card .table,
html.dark .content-area .card .table > :not(caption) > * > * {
  background-color: transparent !important;
  color: #e8eef9;
}
html.dark .content-area .card .table thead th {
  background-color: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark .content-area .card .table td,
html.dark .content-area .card .table th { border-color: rgba(255,255,255,0.07) !important; }

/* fallback sem backdrop-filter: opacos */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.dark .content-area .card,
  html.dark .content-area .visita-card,
  html.dark .content-area .kanban-card { background-color: rgba(16,24,46,0.94) !important; }
}


/* ============================================================
   MODO CLARO (28/06): mesmo conceito, paleta clara — fundo telecom
   claro (malha azul) + cards em vidro BRANCO fosco.
   ============================================================ */
html:not(.dark) #appBg {
  display: block;
  position: fixed; inset: 0; z-index: -10; pointer-events: none;
  background-color: #e6ebf3;
  background-image:
    radial-gradient(1100px circle at 8% -10%, rgba(37,99,235,0.16), transparent 42%),
    radial-gradient(950px circle at 100% 0%, rgba(56,189,248,0.18), transparent 42%),
    radial-gradient(900px circle at 50% 118%, rgba(37,99,235,0.10), transparent 46%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%232563eb' stroke-opacity='0.18' stroke-width='1.3'%3E%3Cpath d='M20 40 L120 90 L210 50'/%3E%3Cpath d='M120 90 L150 180 L60 210'/%3E%3Cpath d='M210 50 L230 150 L150 180'/%3E%3Cpath d='M20 40 L40 150 L60 210'/%3E%3Cpath d='M40 150 L120 90'/%3E%3Cpath d='M230 150 L200 230'/%3E%3C/g%3E%3Cg fill='%232563eb' fill-opacity='0.26'%3E%3Ccircle cx='20' cy='40' r='2.6'/%3E%3Ccircle cx='120' cy='90' r='3.4'/%3E%3Ccircle cx='210' cy='50' r='2.6'/%3E%3Ccircle cx='150' cy='180' r='3'/%3E%3Ccircle cx='60' cy='210' r='2.6'/%3E%3Ccircle cx='40' cy='150' r='2.2'/%3E%3Ccircle cx='230' cy='150' r='2.4'/%3E%3Ccircle cx='200' cy='230' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-position: center, center, center, top left;
}
/* deixa o conteúdo transparente no claro p/ o #appBg aparecer */
html:not(.dark) .content-area,
html:not(.dark) .main-wrapper-v2 { background: transparent !important; }

/* cards em vidro branco fosco (claro) */
html:not(.dark) .content-area .card,
html:not(.dark) .content-area .card-slide-up-v2,
html:not(.dark) .content-area .card-3d,
html:not(.dark) .content-area .glass-card,
html:not(.dark) .content-area .visita-card,
html:not(.dark) .content-area .kanban-card {
  background-color: rgba(255,255,255,0.50) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  backdrop-filter: blur(10px) saturate(125%);
  border: 1px solid rgba(15,23,42,0.12) !important;
  box-shadow: 0 6px 22px rgba(15,23,42,0.10), inset 0 1px 0 rgba(255,255,255,0.55) !important;
}
html:not(.dark) .content-area .card:hover,
html:not(.dark) .content-area .card-slide-up-v2:hover,
html:not(.dark) .content-area .card-3d:hover {
  background-color: rgba(255,255,255,0.62) !important;
  border-color: rgba(37,99,235,0.35) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,0.16) !important;
}
html:not(.dark) .content-area .card > .card-header {
  background-color: rgba(248,250,253,0.55) !important;
  border-bottom-color: rgba(15,23,42,0.10) !important;
}
/* headers que eram bg-primary text-white: forçar texto escuro no claro
   (no div; botões mantêm cor própria) */
html:not(.dark) .content-area .card > .card-header { color: #1f2937 !important; }
html:not(.dark) .content-area .card > .card-footer {
  background-color: rgba(255,255,255,0.30) !important;
  border-top-color: rgba(15,23,42,0.08) !important;
}
html:not(.dark) .content-area .card > .card-body { background-color: transparent !important; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:not(.dark) .content-area .card,
  html:not(.dark) .content-area .card-slide-up-v2,
  html:not(.dark) .content-area .card-3d { background-color: rgba(255,255,255,0.96) !important; }
}