/* =============================================================
   ÁREA DA ACESSIBILIDADE - RG Eats
   Arquivo: acessibilidade.css
   Depende das variáveis de cor já usadas em style.css
   (#111E4A navy, #1B2D6B navy claro, #F5C518 dourado)
   ============================================================= */

/* ── Link "Pular para o conteúdo" (navegação por teclado) ───── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #111E4A;
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  z-index: 3000;
}

.skip-link:focus {
  left: 0;
  top: 0;
  outline: 3px solid #F5C518;
  outline-offset: 2px;
}

/* ── Foco visível em QUALQUER elemento focável (WCAG 2.4.7) ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #F5C518 !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* Navegadores sem suporte a :focus-visible ainda recebem um foco decente */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 3px solid #F5C518;
  outline-offset: 2px;
}

/* =============================================================
   BOTÃO FLUTUANTE (mesma posição usada pelo antigo widget do VLibras)
   ============================================================= */
.acessibilidade-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2500;
  font-family: 'Poppins', sans-serif;
}

.acessibilidade-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #111E4A;
  color: #F5C518;
  border: 2px solid #F5C518;
  border-radius: 50px;
  padding: 12px 18px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(17, 30, 74, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.acessibilidade-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(17, 30, 74, 0.45);
  background: #1B2D6B;
}

.acessibilidade-btn svg {
  flex-shrink: 0;
}

/* Em telas pequenas, mostra só o ícone para não brigar com espaço */
@media (max-width: 480px) {
  .acessibilidade-btn-label {
    display: none;
  }
  .acessibilidade-btn {
    padding: 12px;
    border-radius: 50%;
  }
}

/* =============================================================
   PAINEL
   ============================================================= */
.acessibilidade-painel {
  position: fixed;
  right: 20px;
  bottom: 90px;
  width: 320px;
  max-width: calc(100vw - 40px);
  max-height: 75vh;
  overflow-y: auto;
  background: #ffffff;
  color: #222;
  border-radius: 18px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
  border-top: 5px solid #F5C518;
  animation: acessibilidade-abrir 0.2s ease-out;
}

@keyframes acessibilidade-abrir {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.acessibilidade-painel[hidden] {
  display: none;
}

.acessibilidade-painel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: #111E4A;
  color: #fff;
  border-radius: 13px 13px 0 0;
}

.acessibilidade-painel-header h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

.acessibilidade-fechar {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}

.acessibilidade-fechar:hover {
  background: rgba(255, 255, 255, 0.15);
}

.acessibilidade-painel-body {
  padding: 18px 20px 22px;
}

.acessibilidade-grupo {
  margin-bottom: 20px;
}

.acessibilidade-grupo h3 {
  font-size: 13px;
  font-weight: 700;
  color: #1B2D6B;
  margin-bottom: 10px;
  text-transform: none;
}

.acessibilidade-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.acessibilidade-opcao {
  flex: 1 1 auto;
  min-width: 90px;
  background: #f4f8fb;
  border: 2px solid #e1e8ed;
  color: #222;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.acessibilidade-opcao:hover {
  border-color: #2196C4;
}

.acessibilidade-opcao[aria-pressed="true"] {
  background: #111E4A;
  border-color: #F5C518;
  color: #F5C518;
}

.acessibilidade-fonte-controles .acessibilidade-opcao {
  text-align: center;
  min-width: 0;
}

.acessibilidade-resetar {
  width: 100%;
  margin-top: 4px;
  background: transparent;
  border: 2px dashed #cbd5e1;
  color: #555;
  border-radius: 10px;
  padding: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.acessibilidade-resetar:hover {
  border-color: #e53e3e;
  color: #e53e3e;
}

.acessibilidade-nota {
  font-size: 11px;
  color: #888;
  margin-top: 14px;
  line-height: 1.5;
}

/* =============================================================
   MODO ESCURO (aplicado em <body>)
   ============================================================= */
body.acess-modo-escuro {
  background: #121212 !important;
  color: #e6e6e6 !important;
}

body.acess-modo-escuro .team-card,
body.acess-modo-escuro .about-card,
body.acess-modo-escuro .mvv-card,
body.acess-modo-escuro .partners-section,
body.acess-modo-escuro .map-section,
body.acess-modo-escuro .contact-card,
body.acess-modo-escuro .login-card,
body.acess-modo-escuro .partners-list li,
body.acess-modo-escuro .acessibilidade-painel {
  background: #1e1e1e !important;
  color: #e6e6e6 !important;
  box-shadow: none !important;
}

body.acess-modo-escuro .team-card h3,
body.acess-modo-escuro .about-card h2,
body.acess-modo-escuro .mvv-card h3,
body.acess-modo-escuro .partners-section h2,
body.acess-modo-escuro .map-section h2,
body.acess-modo-escuro .login-header h2 {
  color: #F5C518 !important;
}

body.acess-modo-escuro .role,
body.acess-modo-escuro .about-card p,
body.acess-modo-escuro .mvv-card p,
body.acess-modo-escuro .partners-list li,
body.acess-modo-escuro .intro-text {
  color: #cccccc !important;
}

body.acess-modo-escuro .form-group input,
body.acess-modo-escuro .form-group textarea,
body.acess-modo-escuro .login-card .form-group input {
  background: #2a2a2a !important;
  color: #f0f0f0 !important;
  border-color: #444 !important;
}

body.acess-modo-escuro .acessibilidade-opcao {
  background: #2a2a2a;
  border-color: #444;
  color: #eee;
}

/* =============================================================
   ALTO CONTRASTE (aplicado em <body>)
   Preto puro / amarelo / branco, sem gradientes, sem sombra
   ============================================================= */
body.acess-alto-contraste,
body.acess-alto-contraste .hero,
body.acess-alto-contraste .contact-section,
body.acess-alto-contraste .map-hero-container,
body.acess-alto-contraste .login-page {
  background: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
}

body.acess-alto-contraste .navbar,
body.acess-alto-contraste footer {
  background: #000000 !important;
  border-bottom: 2px solid #ffff00;
  box-shadow: none !important;
}

body.acess-alto-contraste footer {
  border-top: 2px solid #ffff00;
  border-bottom: none;
}

body.acess-alto-contraste * {
  box-shadow: none !important;
  text-shadow: none !important;
  border-color: #ffff00 !important;
}

body.acess-alto-contraste .team-card,
body.acess-alto-contraste .about-card,
body.acess-alto-contraste .mvv-card,
body.acess-alto-contraste .partners-section,
body.acess-alto-contraste .map-section,
body.acess-alto-contraste .contact-card,
body.acess-alto-contraste .login-card,
body.acess-alto-contraste .partners-list li,
body.acess-alto-contraste .acessibilidade-painel {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffff00 !important;
}

body.acess-alto-contraste h1,
body.acess-alto-contraste h2,
body.acess-alto-contraste h3,
body.acess-alto-contraste h4,
body.acess-alto-contraste p,
body.acess-alto-contraste li,
body.acess-alto-contraste span,
body.acess-alto-contraste strong,
body.acess-alto-contraste label {
  color: #ffffff !important;
}

body.acess-alto-contraste a,
body.acess-alto-contraste a:visited {
  color: #ffff00 !important;
  text-decoration: underline !important;
}

body.acess-alto-contraste .btn-submit,
body.acess-alto-contraste .btn-registrar,
body.acess-alto-contraste .acessibilidade-btn,
body.acess-alto-contraste .acessibilidade-opcao[aria-pressed="true"] {
  background: #ffff00 !important;
  color: #000000 !important;
  border: 2px solid #ffffff !important;
}

body.acess-alto-contraste .btn-entrar {
  background: #000000 !important;
  color: #ffff00 !important;
  border: 2px solid #ffff00 !important;
}

body.acess-alto-contraste .form-group input,
body.acess-alto-contraste .form-group textarea {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffff00 !important;
}

body.acess-alto-contraste img,
body.acess-alto-contraste .avatar img {
  filter: grayscale(100%) contrast(1.2);
}

body.acess-alto-contraste .bubbles {
  display: none !important;
}

/* =============================================================
   SUBLINHAR LINKS (independente do modo de cor)
   ============================================================= */
body.acess-links-sublinhados a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* =============================================================
   FONTE MAIS LEGÍVEL (troca para uma fonte humanista sem serifa,
   com espaçamento maior entre letras/linhas)
   ============================================================= */
body.acess-fonte-legivel,
body.acess-fonte-legivel * {
  font-family: Arial, Verdana, "Segoe UI", sans-serif !important;
  letter-spacing: 0.3px !important;
  line-height: 1.7 !important;
}

/* =============================================================
   PAUSAR ANIMAÇÕES (WCAG 2.2.2 - Pausar, Parar, Ocultar)
   ============================================================= */
body.acess-sem-animacao,
body.acess-sem-animacao * {
  animation: none !important;
  transition: none !important;
}

body.acess-sem-animacao .bubbles {
  display: none !important;
}

/* Respeita também a preferência do sistema operacional */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* =============================================================
   TAMANHO DE FONTE (aplicado via classes no <html>)
   Reescala o zoom de toda a página em passos de 10%.
   O JS decide entre "zoom" (Chrome/Edge/Safari) e "transform"
   (Firefox e demais) — ver acessibilidade.js
   ============================================================= */
html.acess-fonte-p1  { zoom: 1.1; }
html.acess-fonte-p2  { zoom: 1.2; }
html.acess-fonte-p3  { zoom: 1.3; }
html.acess-fonte-m1  { zoom: 0.9; }
html.acess-fonte-m2  { zoom: 0.8; }