/* ==========================================================================
   JNSOFT - Acessibilidade e tema (claro/escuro)
   Não altera o visual padrão: só age quando o visitante escolhe uma opção.
   O tema escuro inverte a página e "desinverte" fotos e vídeos, para funcionar
   com as cores fixas que já existem nos CSS das páginas.
   ========================================================================== */

html { background-color: #fff; }

/* ---------- Tema escuro ---------- */
html[data-jn-tema="escuro"] {
  filter: invert(1) hue-rotate(180deg);
  background-color: #fff; /* vira quase preto com o filtro */
}
html[data-jn-tema="escuro"] img,
html[data-jn-tema="escuro"] video,
html[data-jn-tema="escuro"] iframe,
html[data-jn-tema="escuro"] canvas,
html[data-jn-tema="escuro"] [style*="url("],
html[data-jn-tema="escuro"] #header,
html[data-jn-tema="escuro"] #footer,
html[data-jn-tema="escuro"] .jn-manter-cor {
  filter: invert(1) hue-rotate(180deg);
}
/* Dentro de um bloco já desinvertido, não inverte de novo */
html[data-jn-tema="escuro"] [style*="url("] img,
html[data-jn-tema="escuro"] #header img,
html[data-jn-tema="escuro"] #footer img,
html[data-jn-tema="escuro"] .jn-manter-cor img,
html[data-jn-tema="escuro"] .jn-manter-cor video { filter: none; }
/* O próprio botão de acessibilidade mantém as cores da marca */
html[data-jn-tema="escuro"] .jn-a11y { filter: invert(1) hue-rotate(180deg); }

/* Áreas administrativas: o tema escuro vem das cores do jn-admin.css, sem inverter */
html.jn-admin-html[data-jn-tema="escuro"],
html.jn-admin-html[data-jn-tema="escuro"] img,
html.jn-admin-html[data-jn-tema="escuro"] video,
html.jn-admin-html[data-jn-tema="escuro"] iframe,
html.jn-admin-html[data-jn-tema="escuro"] canvas,
html.jn-admin-html[data-jn-tema="escuro"] [style*="url("],
html.jn-admin-html[data-jn-tema="escuro"] .jn-a11y { filter: none; }
html.jn-admin-html[data-jn-tema="escuro"] { background-color: #0a1626; }

/* ---------- Alto contraste ---------- */
/* no html (e não no body) para não quebrar o menu fixo */
html[data-jn-contraste="alto"] { filter: contrast(1.25) saturate(1.1); }
html[data-jn-tema="escuro"][data-jn-contraste="alto"] { filter: invert(1) hue-rotate(180deg) contrast(1.25); }
html.jn-admin-html[data-jn-tema="escuro"][data-jn-contraste="alto"] { filter: contrast(1.25) saturate(1.1); }
html[data-jn-contraste="alto"] a:not(.btn):not([class*="btn"]) { text-decoration: underline !important; }

/* ---------- Texto maior ---------- */
html[data-jn-fonte="maior"] body { zoom: 1.12; }

/* ---------- Menos movimento ---------- */
html[data-jn-movimento="reduzido"] *,
html[data-jn-movimento="reduzido"] *::before,
html[data-jn-movimento="reduzido"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
html[data-jn-movimento="reduzido"] [data-aos] { opacity: 1 !important; transform: none !important; }

/* ---------- Foco visível para teclado (vale sempre) ---------- */
:focus-visible { outline: 3px solid #007FFF; outline-offset: 2px; }

/* ---------- Acesso discreto; painel abre somente por clique ---------- */
.jn-a11y {
  position: fixed;
  left: 16px;
  right: auto;
  top: auto;
  bottom: 18px;
  z-index: 99990;
  display: block;
  transform: none;
  font-family: var(--font-default, system-ui, sans-serif);
  transition: opacity .18s ease;
}

.jn-a11y__aba {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #007FFF;
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 45, 90, .22), 0 0 0 1px rgba(0, 77, 153, .16);
  opacity: .32;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.jn-a11y__aba:hover, .jn-a11y__aba:focus-visible { background: #005fc2; opacity: 1; transform: translateY(-1px); }
.jn-a11y.aberto .jn-a11y__aba { background: #004d99; }

.jn-a11y__painel {
  position: absolute;
  left: 0;
  right: auto;
  top: auto;
  bottom: 44px;
  width: min(280px, calc(100vw - 32px));
  padding: 14px;
  background: #fff;
  color: #1d2b36;
  border: 1px solid #dbe4ee;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(0, 31, 63, .2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}
.jn-a11y.aberto .jn-a11y__painel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.jn-a11y__titulo {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #364d59;
}
.jn-a11y__opcao {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 6px;
  padding: 7px 9px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #f6f9fc;
  color: #1d2b36;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.jn-a11y__opcao:hover { border-color: #007FFF; }
.jn-a11y__opcao[aria-pressed="true"] { background: #007FFF; border-color: #007FFF; color: #fff; }
.jn-a11y__opcao i { width: 18px; text-align: center; }
.jn-a11y__restaurar {
  width: 100%;
  margin-top: 2px;
  padding: 4px;
  border: 0;
  background: none;
  color: #52565e;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 575px) {
  .jn-a11y { left: 4px; right: auto; bottom: 8px; }
  .jn-a11y__painel { left: 0; right: auto; top: auto; bottom: 36px; }
}

@media (hover: hover) and (pointer: fine) {
  .jn-a11y__aba { transform: translateX(-8px); }
  .jn-a11y__aba:hover, .jn-a11y__aba:focus-visible { transform: translateX(0); }
}

.jn-a11y--media-ativa { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .jn-a11y__aba, .jn-a11y__painel { transition: none; }
}

@media print { .jn-a11y { display: none; } html { filter: none !important; } }