/* ===========================
   Variáveis globais
   =========================== */
:root {
  --azul-principal: #203262;
  --azul-escuro: #0056b3;
  --amarelo-contraste: #ff0;
  --cinza-claro: #e0e6ed;
  --cinza-medio: #a0a7af;
  --cinza-secundario: #ccc;
  --preto: #000;
  --branco: #fff;
}


.material-symbols-rounded {
  font-family: 'Material Symbols Rounded' !important;
  font-style: normal;
  font-weight: normal;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  font-size: 30px;   /* tamanho do ícone */
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
}

span.material-symbols-rounded {
  color: var(--branco);
}

/* Painel de acessibilidade */
#accessibility-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--azul-principal);
  color: var(--branco);
  border: none;
  border-radius: 50%;
  width: 3.5rem;   /* relativo ao html */
  height: 3.5rem;  /* relativo ao html */
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  transition: background 0.3s;
}
#accessibility-toggle:hover {
  background: var(--azul-escuro);
}

.accessibility-panel {
  position: fixed;
  bottom: 5rem;
  right: 1.25rem;
  background: #f9fbff;
  border: 0.125rem solid var(--azul-principal);
  border-radius: 0.5rem;
  padding: 1rem;
  width: 15rem;          /* relativo ao html */
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 0.375rem 0.75rem rgba(0,0,0,0.2);
  z-index: 9999;
}

.accessibility-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--azul-principal);
}
.accessibility-header h2 {
  font-size: 1.2rem;   /* escala com html */
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.3em;
}
.accessibility-header button {
  background: none;
  border: none;
  color: var(--azul-principal);
  cursor: pointer;
  font-size: 1.4rem;   /* escala com html */
}

.accessibility-group {
  margin-top: 1rem;
}
.accessibility-group h3 {
  font-size: 16px;     
  color: var(--azul-escuro);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.3em;
}

.accessibility-group button {
  display: block;
  margin: 0.4rem 0;
  width: 100%;
  padding: 0.5rem;
  border: 0.0625rem solid var(--azul-principal);
  border-radius: 0.375rem;
  background: #fff;
  color: var(--azul-principal);
  font-weight: 500;
  font-size: 16px;     
  cursor: pointer;
  transition: all 0.3s;
}
.accessibility-group button:hover {
  background: var(--azul-principal);
  color: #fff;
}
.accessibility-group button.ativo {
  background: var(--azul-escuro);
  color: #fff;
}

.button-row {
  display: flex;
  gap: 0.4rem;
}
.button-small {
  flex: 1;
  font-size: 0.9rem;   
}


/* ===========================
   Barra de acessibilidade (isolada)
   =========================== */
.accessibility-panel {
  background: var(--branco) !important;
  border: 2px solid var(--azul-principal) !important;
  color: var(--preto) !important;
}
.accessibility-panel h2,
.accessibility-panel h3,
.accessibility-panel p,
.accessibility-panel span,
.accessibility-panel button,
.accessibility-panel a {
  color: var(--azul-principal) !important;
  background: var(--branco) !important;
}
.accessibility-panel button:hover {
  background: var(--azul-principal) !important;
  color: var(--branco) !important;
}
.accessibility-panel button.ativo {
  background: var(--azul-escuro) !important;
  color: var(--branco) !important;
}

/* ===========================
   MODO ESCURO (apenas conteúdo principal)
   =========================== */
body.acc-dark main {
  background: var(--preto);
  color: var(--cinza-claro);
}
body.acc-dark main a {
  color: var(--azul-principal);
  text-decoration: underline;
}
body.acc-dark main h1,
body.acc-dark main h2,
body.acc-dark main h3,
body.acc-dark main h4,
body.acc-dark main h5,
body.acc-dark main h6 {
  color: var(--branco) !important;
}
body.acc-dark main p {
  color: var(--branco) !important;
}
body.acc-dark main span {
  color: var(--cinza-medio) !important;
}

/* Imagens que são links no modo escuro */
body.acc-dark .img-link,
body.acc-dark img.item {
  border: 6px solid #66b2ff;
  box-shadow: 0 0 6px rgba(102,178,255,0.6);
  filter: invert(1) brightness(2) !important;
}
body.acc-dark .img-link:hover {
  box-shadow: 0 0 10px rgba(102,178,255,0.9);
}

/* ===========================
   MODO ESCURO 
   =========================== */
body.acc-dark {
  background: var(--preto);
  color: var(--branco);
}
body.acc-dark a {
  color: #66b2ff;
  text-decoration: underline;
}

body.acc-dark svg * {
  fill: #e0e6ed !important;
  stroke: #e0e6ed !important;
}

/* Imagens que são links */
body.acc-dark .img-link {
  display: inline-block;
  border: 6px solid #66b2ff;   /* azul claro */
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(102,178,255,0.6);
  transition: all 0.3s;
  filter: grayscale(100%) contrast(200%);
}
body.acc-dark .img-link img:not(.no-filter) {
  filter: brightness(0.85) contrast(1.2) saturate(1.1);
}
body.acc-dark .img-link:hover {
  box-shadow: 0 0 10px rgba(102,178,255,0.9);
}

body.acc-dark svg * {
  fill: #e0e6ed !important;
  stroke: #e0e6ed !important;
}

body.acc-dark h1,
body.acc-dark h2,
body.acc-dark h3,
body.acc-dark h4,
body.acc-dark h5,
body.acc-dark h6 {
  color: var(--branco);   
}

body.acc-dark p {
  color: var(--branco);
}

body.acc-dark span {
  color: #a0a7af !important;   /* cinza médio para detalhes/metadados */
}


/* ===========================
   ALTO CONTRASTE (apenas conteúdo principal)
   =========================== */
body.acc-contrast main {
  background: var(--preto) !important;
  color: var(--branco) !important;
}
body.acc-contrast main a {
  color: var(--amarelo-contraste) !important;
  text-decoration: underline;
}
body.acc-contrast main h1,
body.acc-contrast main h2,
body.acc-contrast main h3,
body.acc-contrast main h4,
body.acc-contrast main h5,
body.acc-contrast main h6 {
  color: var(--amarelo-contraste) !important;
}
body.acc-contrast main p {
  color: var(--amarelo-contraste) !important;
}
body.acc-contrast main span {
  color: var(--amarelo-contraste) !important;
}
/* Imagens que são links no alto contraste */
body.acc-contrast .img-link, 
body.acc-contrast .item {
  border: 3px solid var(--amarelo-contraste);
  box-shadow: 0 0 6px rgba(255,255,0,0.8);
}
body.acc-contrast .img-link:hover {
  box-shadow: 0 0 12px rgba(255,255,0,1);
}

/* ===========================
   ALTO CONTRASTE 
   =========================== */
body.acc-contrast {
  background: #000 !important;
  color: #fff !important;
}
body.acc-contrast a {
  color: var(--amarelo-contraste) !important; /* amarelo forte */
  text-decoration: underline;
}
body.acc-contrast img:not(.no-filter) {
  filter: grayscale(100%) contrast(300%) brightness(1.2);
}
body.acc-contrast svg * {
  fill: #fff !important;
  stroke: #fff !important;
}

body.acc-contrast-links a img {
  border: 3px solid var(--amarelo-contraste);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
}

body.acc-contrast-links a {
  background:var(--amarelo-contraste);
  color:black !important;
}

/* Imagens que são links
body.acc-contrast .img-link {
  display: inline-block;
  border: 2px solid #var(var(--amarelo-contraste)); 
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(255,255,0,0.8);
  transition: all 0.3s;
}
   */
body.acc-contrast .img-link img:not(.no-filter) {
  filter: brightness(0) saturate(100%) invert(94%) sepia(13%) saturate(4028%) hue-rotate(355deg) brightness(103%) contrast(108%);
}
body.acc-contrast .img-link:hover {
  box-shadow: 0 0 12px rgba(255,255,0,1);
}

/* ===========================
   Dislexia
   =========================== */
body.acc-dyslexia, 
body.acc-dyslexia * {
  font-family: 'OpenDyslexic', 'Atkinson Hyperlegible', Arial, sans-serif !important;
}
body.acc-dyslexia .material-symbols-rounded {
  font-family: 'Material Symbols Rounded' !important;
}

/* ===========================
   Espaçamento
   =========================== */
body.acc-letter-spacing * {
  line-height:1.9 !important;
}
/* ===========================
   Destacar links
   =========================== */
body.acc-highlight-links a img {
  border: 3px solid var(--amarelo-contraste);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
}

body.acc-highlight-links a {
  background:var(--amarelo-contraste);
  color:black !important;
}

/* Imagens que são links quando destacar links está ativo */
body.acc-highlight-links .img-link {
  border: 2px solid var(--preto);
  background: var(--amarelo-contraste);
}

body.reduzir-animacoes * {
  transition:none !important;
  animation:none !important;
}