/* VersaPlay v3.8.5 — Aparência: Sistema / Claro / Escuro */

/*
 * O atributo real aplicado ao documento é:
 *   data-vp-theme="light" | "dark"
 *
 * A preferência escolhida fica em:
 *   data-vp-appearance="system" | "light" | "dark"
 *
 * O modo Sistema acompanha prefers-color-scheme em tempo real.
 */

:root {
  color-scheme: dark;
}

:root[data-vp-theme="light"] {
  color-scheme: light;

  /* Variáveis recorrentes no portal e nos módulos administrativos. */
  --bg: #f2f6fa !important;
  --background: #f2f6fa !important;
  --page-bg: #f2f6fa !important;
  --panel: #ffffff !important;
  --panel2: #f7fafc !important;
  --surface: #ffffff !important;
  --surface-2: #f7fafc !important;
  --card: #ffffff !important;
  --input: #ffffff !important;
  --text: #172535 !important;
  --text-color: #172535 !important;
  --muted: #627487 !important;
  --line: rgba(36, 69, 95, .16) !important;
  --border: rgba(36, 69, 95, .16) !important;
  --shadow: 0 10px 28px rgba(24, 53, 76, .10) !important;

  /* Variáveis de páginas adicionadas nas versões recentes. */
  --vp382-bg: #f2f6fa !important;
  --vp382-panel: #ffffff !important;
  --vp382-panel2: #f7fafc !important;
  --vp382-line: rgba(36, 69, 95, .16) !important;
  --vp382-text: #172535 !important;
  --vp382-muted: #627487 !important;
}

:root[data-vp-theme="dark"] {
  color-scheme: dark;
}

/* Fundo e texto do portal. */
:root[data-vp-theme="light"] body {
  background: #f2f6fa !important;
  color: #172535 !important;
}

/*
 * Superfícies recorrentes.
 * A lista é deliberadamente limitada ao shell/portal; não alcança conteúdo
 * dentro dos iframes dos aplicativos.
 */
:root[data-vp-theme="light"] :where(
  .card,
  .panel,
  .box,
  .modal,
  dialog,
  .vp-card,
  .vp-panel,
  .vp-shell-card,
  .vp-itembar,
  .vp-header,
  .vp-topbar,
  .vp382-card,
  .vp382-app,
  .vp382-summary article,
  .vp381-info,
  .vp381-grid .card,
  .vp381-list-card,
  .vp381-user,
  .manual-head,
  .manual-shell .card,
  .manual-shell article,
  .notice,
  .toc a
) {
  background-color: #ffffff !important;
  color: #172535 !important;
  border-color: rgba(36, 69, 95, .16) !important;
}

/* Alguns módulos usam backgrounds com gradiente. */
:root[data-vp-theme="light"] :where(
  .vp-card,
  .vp382-card,
  .vp382-app,
  .vp381-user,
  .manual-shell .card
) {
  background-image: none !important;
  box-shadow: 0 8px 24px rgba(24, 53, 76, .07);
}

/* Cabeçalhos, navegação e rodapés. */
:root[data-vp-theme="light"] :where(
  header,
  .header,
  .topbar,
  .navbar,
  .vp-itembar,
  .vp-shell-header,
  .admin-header,
  footer,
  .footer
) {
  color: #172535;
  border-color: rgba(36, 69, 95, .14) !important;
}

:root[data-vp-theme="light"] :where(
  p,
  .muted,
  .help,
  .subtitle,
  .description,
  .vp-description,
  .vp-card-description,
  .vp382-description,
  .vp382-head p,
  .vp382-card p,
  .vp381-email,
  .manual-shell p,
  .manual-shell li
) {
  color: #5e7285 !important;
}

:root[data-vp-theme="light"] :where(
  h1, h2, h3, h4, h5, h6,
  strong,
  label,
  th
) {
  color: #172535;
}

/* Campos e tabelas. */
:root[data-vp-theme="light"] :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
) {
  background: #ffffff !important;
  color: #172535 !important;
  border-color: rgba(36, 69, 95, .22) !important;
  box-shadow: none !important;
}

:root[data-vp-theme="light"] :where(
  input,
  textarea
)::placeholder {
  color: #8a99a8 !important;
  opacity: 1;
}

:root[data-vp-theme="light"] table {
  color: #172535;
}

:root[data-vp-theme="light"] :where(td, th) {
  border-color: rgba(36, 69, 95, .14) !important;
}

:root[data-vp-theme="light"] tbody tr:hover {
  background: rgba(45, 125, 170, .045);
}

/* Botões secundários e links de navegação. */
:root[data-vp-theme="light"] :where(
  .btn.secondary,
  .secondary,
  .vp382-open,
  .vp382-filters > a,
  .back,
  .vp382-back
) {
  background-color: #ffffff !important;
  color: #265b7a !important;
  border-color: rgba(38, 91, 122, .22) !important;
}

/* Código / blocos técnicos. */
:root[data-vp-theme="light"] :where(
  code,
  pre,
  blockquote
) {
  color: #29485d;
}

:root[data-vp-theme="light"] pre {
  background: #edf3f7 !important;
  border-color: rgba(36, 69, 95, .16) !important;
}

/* Mantém a imagem/capa sem filtros ou inversões. */
:root[data-vp-theme="light"] :where(
  img,
  video,
  canvas,
  svg,
  iframe,
  .vp-cover,
  .vp382-cover
) {
  filter: none !important;
}

/* ------------------------------------------------------------------ */
/* Controle global de aparência                                      */
/* ------------------------------------------------------------------ */

.vp-appearance {
  position: fixed;
  z-index: 2147483000;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.vp-appearance-button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid rgba(105, 177, 216, .28);
  border-radius: 999px;
  background: rgba(7, 24, 39, .94);
  color: #edf8ff;
  box-shadow: 0 9px 28px rgba(0, 0, 0, .28);
  backdrop-filter: blur(12px);
  cursor: pointer;
  font: inherit;
  font-size: .76rem;
  font-weight: 850;
  white-space: nowrap;
}

.vp-appearance-button:hover {
  border-color: rgba(79, 197, 255, .55);
}

.vp-appearance-button:focus-visible,
.vp-appearance-option:focus-visible {
  outline: 2px solid #63e6a1;
  outline-offset: 2px;
}

.vp-appearance-icon {
  width: 1.2em;
  text-align: center;
  font-size: 1.05rem;
}

.vp-appearance-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  width: min(250px, calc(100vw - 24px));
  padding: 7px;
  border: 1px solid rgba(130, 188, 220, .22);
  border-radius: 14px;
  background: rgba(7, 24, 39, .985);
  color: #edf8ff;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .34);
  backdrop-filter: blur(14px);
}

.vp-appearance-menu[hidden] {
  display: none !important;
}

.vp-appearance-title {
  padding: 7px 9px 5px;
  color: #91aabc;
  font-size: .68rem;
  font-weight: 750;
}

.vp-appearance-option {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 6px 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.vp-appearance-option:hover {
  background: rgba(255, 255, 255, .065);
}

.vp-appearance-option[aria-checked="true"] {
  background: rgba(79, 197, 255, .10);
}

.vp-appearance-option-main {
  display: grid;
  gap: 2px;
}

.vp-appearance-option-main strong {
  color: inherit !important;
  font-size: .79rem;
}

.vp-appearance-option-main small {
  color: #91aabc !important;
  font-size: .64rem;
  line-height: 1.25;
}

.vp-appearance-check {
  color: #63e6a1;
  font-weight: 900;
  text-align: center;
}

/* O próprio seletor fica claro quando a página está clara. */
:root[data-vp-theme="light"] .vp-appearance-button {
  background: rgba(255, 255, 255, .97);
  color: #1e4056;
  border-color: rgba(36, 89, 119, .22);
  box-shadow: 0 9px 28px rgba(31, 70, 96, .16);
}

:root[data-vp-theme="light"] .vp-appearance-menu {
  background: rgba(255, 255, 255, .99);
  color: #172535;
  border-color: rgba(36, 89, 119, .18);
  box-shadow: 0 14px 38px rgba(31, 70, 96, .18);
}

:root[data-vp-theme="light"] .vp-appearance-option:hover {
  background: rgba(36, 105, 145, .06);
}

:root[data-vp-theme="light"] .vp-appearance-option[aria-checked="true"] {
  background: rgba(36, 125, 170, .09);
}

:root[data-vp-theme="light"] .vp-appearance-title,
:root[data-vp-theme="light"] .vp-appearance-option-main small {
  color: #647a8c !important;
}

@media (max-width: 620px) {
  .vp-appearance {
    right: max(9px, env(safe-area-inset-right));
    bottom: max(9px, env(safe-area-inset-bottom));
  }

  .vp-appearance-button {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  .vp-appearance-button-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .vp-appearance-menu {
    width: min(250px, calc(100vw - 18px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .vp-appearance-button,
  .vp-appearance-option {
    transition: none !important;
  }
}


/* v3.8.5 — garantia de visibilidade do controle estático */
#vp-appearance-control-v385 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#vp-appearance-control-v385 .vp-appearance-button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* ============================================================
   v3.8.5 — Correções de contraste e banner
   ============================================================ */
:root[data-vp-theme="light"] :where(
  .hero,.hero-card,.hero-banner,.home-hero,.portal-hero,.destaque,
  .destaque-home,.spotlight,.showcase,.banner,.banner-card,.vp-hero,
  .vp-spotlight,.vp-banner
) {
  color: #eef7ff !important;
}
:root[data-vp-theme="light"] :where(
  .hero,.hero-card,.hero-banner,.home-hero,.portal-hero,.destaque,
  .destaque-home,.spotlight,.showcase,.banner,.banner-card,.vp-hero,
  .vp-spotlight,.vp-banner
) :where(
  h1,h2,h3,h4,strong,b,p,span,small,.muted,.subtitle,.description,
  .title,.headline,.eyebrow,.tagline,.legend,.caption
) {
  color: #eef7ff !important;
}
:root[data-vp-theme="light"] :where(
  .hero h1,.hero h2,.hero-card h1,.hero-card h2,.hero-banner h1,.hero-banner h2,
  .home-hero h1,.home-hero h2,.portal-hero h1,.portal-hero h2,
  .destaque h1,.destaque h2,.destaque-home h1,.destaque-home h2,
  .spotlight h1,.spotlight h2,.showcase h1,.showcase h2,.banner h1,.banner h2,
  .vp-hero h1,.vp-hero h2
) {
  color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}
:root[data-vp-theme="light"] :where(
  .hero .subtitle,.hero .tagline,.hero-card .subtitle,.hero-banner .subtitle,
  .home-hero .subtitle,.portal-hero .subtitle,.destaque .subtitle,
  .spotlight .subtitle,.showcase .subtitle,.banner .subtitle,.vp-hero .subtitle
) {
  color: #d9f6ff !important;
}
:root[data-vp-theme="light"] :where(
  .hero,.hero-card,.hero-banner,.home-hero,.portal-hero,.destaque,
  .destaque-home,.spotlight,.showcase,.banner,.banner-card,.vp-hero,.vp-banner
) :where(
  a.button,button,.btn,.chip,.pill,.cta,.hero-actions a,.hero-actions button,
  .category-button,.category-card
) {
  color: #122231 !important;
}
:root[data-vp-theme="light"] :where(
  .hero,.hero-card,.hero-banner,.home-hero,.portal-hero,.destaque,
  .destaque-home,.spotlight,.showcase,.banner,.banner-card,.vp-hero,.vp-banner
)::before,
:root[data-vp-theme="light"] :where(
  .hero,.hero-card,.hero-banner,.home-hero,.portal-hero,.destaque,
  .destaque-home,.spotlight,.showcase,.banner,.banner-card,.vp-hero,.vp-banner
)::after {
  opacity: .72 !important;
}
:root[data-vp-theme="light"] :where(
  .hero,.hero-card,.hero-banner,.home-hero,.portal-hero,.destaque,
  .destaque-home,.spotlight,.showcase,.banner,.banner-card,.vp-hero,.vp-banner
) {
  box-shadow: 0 10px 30px rgba(14, 45, 67, .10) !important;
}
:root[data-vp-theme="dark"] :where(
  p,.muted,.help,.subtitle,.description,.vp-description,.vp-card-description,
  .vp382-description,.vp382-head p,.vp382-card p,.vp381-email,.manual-shell p,
  .manual-shell li,.legend,.caption,.small,small
) {
  color: #cfe0eb !important;
}
:root[data-vp-theme="dark"] :where(
  input:not([type="checkbox"]):not([type="radio"]),select,textarea
) {
  color: #eef8ff !important;
}
:root[data-vp-theme="dark"] :where(input, textarea)::placeholder {
  color: #a8bccb !important;
  opacity: 1;
}
:root[data-vp-theme="dark"] option {
  color: #172535;
  background: #ffffff;
}
#vp-appearance-control-v385 {
  z-index: 2147483600 !important;
}