/* ============================================================
   acessibilidade.css  —  v2
   Copa de Literatura de Futebol Feminino
   Camada compartilhada de acessibilidade — WCAG 2.1 nível AA

   v2: acrescenta a seção 9 (Formulários acessíveis), usada por
   cadastro, login e, futuramente, envio de obra.

   IMPORTANTE: carregar SEMPRE DEPOIS do </style> interno da
   página, para que estas regras vençam por ordem de cascata.
   ============================================================ */

/* ------------------------------------------------------------
   1. CORREÇÕES DE CONTRASTE (modo normal)
   ------------------------------------------------------------ */
:root{
  /* O #9E9890 original tinha razão 2,6:1 sobre o fundo creme —
     reprova no AA (mínimo 4,5:1 para texto pequeno).
     Este tom sobe para ~4,7:1. */
  --accent-muted:#746D65;

  /* Cor do texto sobre o vinho. Antes hardcoded como #F7F5F2 / #fff. */
  --on-accent:#F7F5F2;

  /* Borda de CAMPO de formulário. A --border original (#DDD6CF) dá
     1,4:1 sobre a superfície — reprova a 1.4.11, que exige 3:1 para
     contorno de componente. Esta dá 3,2:1. Usada só em inputs;
     as bordas decorativas de card seguem com a --border. */
  --border-field:#948B80;

  --erro:#B00020;      /* 7,1:1 sobre a superfície */
  --sucesso:#1E6B24;   /* 6,4:1 sobre a superfície */

  --a11y-focus:#7A3E48;
}

/* ------------------------------------------------------------
   2. FOCO VISÍVEL (WCAG 2.4.7)
   ------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--a11y-focus);
  outline-offset:3px;
  border-radius:3px;
}

main:focus,
.erro-resumo:focus{ outline:none; }

/* ------------------------------------------------------------
   3. SKIP LINK (WCAG 2.4.1)
   ------------------------------------------------------------ */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:2000;
  background:var(--accent);
  color:var(--on-accent);
  font-family:'Source Serif 4',Georgia,serif;
  font-size:15px;
  padding:12px 22px;
  text-decoration:none;
  border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }

/* ------------------------------------------------------------
   4. UTILITÁRIO PARA LEITOR DE TELA
   ------------------------------------------------------------ */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ------------------------------------------------------------
   5. BARRA DE ACESSIBILIDADE (trilho fixo à direita)
   ------------------------------------------------------------ */
#a11y-bar{
  position:fixed;
  right:0;
  top:50%;
  transform:translateY(-50%);
  z-index:1500;
  display:flex;
  flex-direction:column;
  gap:2px;
}
#a11y-bar button,
#a11y-bar a{
  width:46px;height:46px;
  display:grid;place-items:center;
  background:var(--accent);
  color:var(--on-accent);
  border:1px solid var(--accent);
  border-right:none;
  cursor:pointer;
  text-decoration:none;
  font-family:'Source Serif 4',Georgia,serif;
  font-size:15px;
  line-height:1;
  transition:opacity .18s;
}
/* :first-child / :last-child em vez de "button:first-child": o
   último item da barra agora é um <a>, não um <button>. */
#a11y-bar > :first-child{ border-radius:6px 0 0 6px; }
#a11y-bar > :last-child{ border-radius:0 0 0 6px; }
#a11y-bar button:hover,
#a11y-bar a:hover{ opacity:.86; }
#a11y-bar button[aria-pressed="true"]{
  background:var(--on-accent);
  color:var(--accent);
}
#a11y-bar a[aria-current="page"]{
  background:var(--on-accent);
  color:var(--accent);
}
#a11y-bar button[disabled]{ opacity:.45; cursor:not-allowed; }
#a11y-bar svg{ width:22px;height:22px;fill:currentColor; }

/* Separa visualmente a declaração dos controles — ela navega,
   os outros agem sobre a página. */
#a11y-bar #a11y-declaracao{ margin-top:8px; border-radius:6px 0 0 6px !important; }

@media(max-width:768px){
  #a11y-bar{ top:auto; bottom:14px; transform:none; }
  #a11y-bar button,
  #a11y-bar a{ width:42px;height:42px; }
}

/* ---- VLibras ----
   O botão do plugin NÃO é escondido: ele é o botão de Libras da
   plataforma. Só garantimos que fique preso à janela e visível.

   As duas regras abaixo são rede de segurança. O VLibras traz o CSS
   dele, mas se esse CSS não chegar (bloqueador, rede, CSP), o botão
   vira uma caixa transparente ancorada ao <body> — presente, com
   40x40 pixels, e a 2.600px do topo. Foi exatamente o que aconteceu
   aqui. Com estas regras, ele aparece de qualquer jeito. */
div[vw]{
  position:fixed !important;
  right:14px !important;
  bottom:16px !important;
  left:auto !important;
  top:auto !important;
  z-index:1600 !important;
}
div[vw-access-button]{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  display:block !important;
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  /* Fundo próprio: se o CSS do VLibras falhar, ainda dá para ver e
     clicar. Se carregar, o ícone dele fica por cima. */
  background-color:#1351B4 !important;   /* azul institucional gov.br */
  border-radius:50% !important;
}
div[vw-plugin-wrapper]{
  z-index:1600 !important;
}

/* Celular: o trilho de acessibilidade já mora embaixo à direita.
   O VLibras sobe, para os dois não se sobreporem. */
@media(max-width:768px){
  div[vw]{
    bottom:auto !important;
    top:74px !important;
  }
}

/* ------------------------------------------------------------
   6. MODO DE ALTO CONTRASTE
   ------------------------------------------------------------ */
html[data-a11y-contraste="alto"]{
  --bg:#000000;
  --surface:#0D0D0D;
  --text:#FFFFFF;
  --soft:#EDEDED;
  --border:#FFFFFF;
  --border-field:#FFFFFF;
  --accent:#FFD400;
  --accent-muted:#EDEDED;
  --on-accent:#000000;
  --erro:#FF8A80;       /* 9,2:1 sobre preto */
  --sucesso:#6EE86E;    /* 13,4:1 sobre preto */
  --a11y-focus:#FFFFFF;

  /* Tabela da biblioteca: sem isto, as linhas pares ficariam
     claras sobre o fundo preto. */
  --row-even:#131313;
  --row-hover:#2A2A2A;

  /* Chaveamento: dourado da campeã, do troféu e dos ✓. */
  --gold:#FFD400;
  --gold-bg:#1A1A1A;
}
html[data-a11y-contraste="alto"] body{ background:#000; color:#fff; }
html[data-a11y-contraste="alto"] header,
html[data-a11y-contraste="alto"] .mobile-menu a{ background:#000; }

/* Rede de segurança contra cores claras hardcoded em style inline */
html[data-a11y-contraste="alto"] .btn,
html[data-a11y-contraste="alto"] .footer-edition,
html[data-a11y-contraste="alto"] [style*="#F7F5F2"]{
  color:var(--on-accent) !important;
}
html[data-a11y-contraste="alto"] .btn-ghost:hover{
  color:var(--on-accent) !important;
}
html[data-a11y-contraste="alto"] .hero-deco{ opacity:.14; }

/* ------------------------------------------------------------
   7. ESCALA DE FONTE (A− / A+)
   Aplicada em header/main/footer — nunca no body — para não
   arrastar a barra fixa junto. Exige <main id="conteudo">.
   ------------------------------------------------------------ */
html[data-a11y-fonte="1"] header,
html[data-a11y-fonte="1"] main,
html[data-a11y-fonte="1"] footer{ zoom:1.12; }

html[data-a11y-fonte="2"] header,
html[data-a11y-fonte="2"] main,
html[data-a11y-fonte="2"] footer{ zoom:1.25; }

/* ------------------------------------------------------------
   8. MOVIMENTO REDUZIDO (WCAG 2.3.3)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   9. FORMULÁRIOS ACESSÍVEIS
   Usado por cadastro, login e (depois) envio de obra.
   ============================================================ */

.campo{ margin-bottom:20px; }

.campo label{
  display:block;
  margin-bottom:6px;
  font-family:'Source Serif 4',Georgia,serif;
  font-size:15px;
  font-weight:400;
  color:var(--text);
}

/* Marcação de obrigatório: nunca depende só de cor (WCAG 1.4.1).
   O asterisco é decorativo — quem lê é o "obrigatório" no .sr-only. */
.obrigatorio{
  color:var(--accent);
  margin-left:2px;
}

/* Dica do campo — lida pelo leitor de tela via aria-describedby */
.campo .dica{
  font-size:13px;
  color:var(--soft);
  margin:0 0 6px;
  line-height:1.5;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"]{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--border-field);
  border-radius:4px;
  background:var(--bg);
  color:var(--text);
  font-family:'Source Serif 4',Georgia,serif;
  font-size:16px;   /* abaixo de 16px o iOS dá zoom automático no foco */
  line-height:1.4;
  margin:0;
}

.campo input[aria-invalid="true"]{
  border-color:var(--erro);
  border-width:2px;
}

/* ---- Autofill do Chrome ----
   O navegador injeta background #E8F0FE nos campos preenchidos
   automaticamente, com prioridade que o CSS comum não vence — e
   isso sobrevive até no alto contraste (azul claro sobre preto).
   O box-shadow inset é o único jeito de cobrir. */
.campo input:-webkit-autofill,
.campo input:-webkit-autofill:hover,
.campo input:-webkit-autofill:focus,
.campo input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--text) !important;
  -webkit-box-shadow:0 0 0 1000px var(--bg) inset !important;
  box-shadow:0 0 0 1000px var(--bg) inset !important;
  caret-color:var(--text);
  /* Adia a animação de fundo do Chrome para nunca acontecer */
  transition:background-color 9999s ease-in-out 0s;
}

/* Erro do campo, logo abaixo dele */
.erro-campo{
  display:block;
  margin-top:6px;
  font-size:14px;
  color:var(--erro);
  font-weight:400;
  line-height:1.5;
}
.erro-campo[hidden]{ display:none; }

/* ---- Campo de senha com botão mostrar/ocultar ---- */
.campo-senha{ position:relative; display:block; }
.campo-senha input{ padding-right:52px !important; }

.btn-ver-senha{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:48px;
  display:grid;
  place-items:center;
  background:none;
  border:none;
  cursor:pointer;
  color:var(--soft);
  border-radius:0 4px 4px 0;
}
.btn-ver-senha:hover{ color:var(--accent); }
.btn-ver-senha svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; }

/* ---- Resumo de erros no topo do formulário ---- */
.erro-resumo{
  border:2px solid var(--erro);
  border-radius:6px;
  padding:16px 18px;
  margin-bottom:24px;
  background:var(--bg);
}
.erro-resumo[hidden]{ display:none; }
.erro-resumo h3{
  font-family:'Playfair Display',serif;
  font-size:17px;
  color:var(--erro);
  margin:0 0 8px;
}
.erro-resumo ul{ margin:0; padding-left:20px; }
.erro-resumo li{
  font-size:15px;
  color:var(--text);
  line-height:1.6;
  margin-bottom:4px;
}
.erro-resumo a{ color:var(--erro); }

/* ---- Mensagem de sucesso ---- */
.msg-sucesso{
  border:2px solid var(--sucesso);
  border-radius:6px;
  padding:16px 18px;
  margin-top:20px;
  color:var(--text);
  font-size:15px;
  line-height:1.6;
  background:var(--bg);
}
.msg-sucesso[hidden]{ display:none; }
.msg-sucesso strong{ color:var(--sucesso); }

/* ---- Botão de envio em estado ocupado ---- */
button[aria-busy="true"]{
  opacity:.7;
  cursor:progress;
}

/* ---- Textarea e select ---- */
.campo textarea,
.campo select{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--border-field);
  border-radius:4px;
  background:var(--bg);
  color:var(--text);
  font-family:'Source Serif 4',Georgia,serif;
  font-size:16px;
  line-height:1.6;
}
.campo textarea{ min-height:130px; resize:vertical; }
.campo select{ cursor:pointer; }
.campo textarea[aria-invalid="true"],
.campo select[aria-invalid="true"]{
  border-color:var(--erro);
  border-width:2px;
}

/* ---- Campo de arquivo ----
   O input fica visível e nativo de propósito. Esconder o input real
   com display:none — o truque de todo upload "bonito" — é o que tira
   o campo do teclado e o torna inalcançável para quem não usa mouse. */
.campo input[type="file"]{
  width:100%;
  padding:12px 14px;
  border:1px dashed var(--border-field);
  border-radius:4px;
  background:var(--bg);
  color:var(--text);
  font-family:'Source Serif 4',Georgia,serif;
  font-size:15px;
  cursor:pointer;
}
.campo input[type="file"]::file-selector-button{
  font-family:'Source Serif 4',Georgia,serif;
  font-size:14px;
  padding:8px 16px;
  margin-right:14px;
  border:1px solid var(--accent);
  border-radius:3px;
  background:var(--accent);
  color:var(--on-accent);
  cursor:pointer;
}
.campo input[type="file"][aria-invalid="true"]{
  border-color:var(--erro);
  border-style:solid;
  border-width:2px;
}

/* Confirmação do arquivo escolhido — anunciada, não só exibida */
.arquivo-escolhido{
  display:block;
  margin-top:8px;
  font-size:14px;
  color:var(--sucesso);
  line-height:1.5;
}
.arquivo-escolhido[hidden]{ display:none; }

/* ---- Grupos de campos (fieldset) ---- */
.grupo-campos{
  border:1px solid var(--border);
  border-radius:8px;
  padding:22px 24px;
  margin-bottom:24px;
}
.grupo-campos > legend{
  font-family:'Playfair Display',serif;
  font-size:18px;
  font-weight:700;
  color:var(--text);
  padding:0 10px;
}
.grupo-campos .dica-grupo{
  font-size:14px;
  color:var(--soft);
  margin:0 0 16px;
  line-height:1.6;
}

/* ---- Linha de checkbox ---- */
.linha-check{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
.linha-check:last-of-type{ border-bottom:none; }
.linha-check input[type="checkbox"]{
  width:20px;
  height:20px;
  min-width:20px;
  margin-top:4px;
  accent-color:var(--accent);
  cursor:pointer;
}
.linha-check label{
  font-size:15px;
  color:var(--text);
  line-height:1.6;
  cursor:pointer;
  margin:0;
}
.linha-check input[aria-invalid="true"]{
  outline:2px solid var(--erro);
  outline-offset:2px;
}

/* ---- Aviso de regra (o que o regulamento exige) ---- */
.aviso-regra{
  border-left:3px solid var(--accent);
  background:var(--bg);
  padding:16px 20px;
  margin-bottom:26px;
  border-radius:0 6px 6px 0;
}
.aviso-regra h3{
  font-family:'Playfair Display',serif;
  font-size:16px;
  color:var(--text);
  margin:0 0 8px;
}
.aviso-regra ul{ margin:0; padding-left:20px; }
.aviso-regra li{
  font-size:14px;
  color:var(--soft);
  line-height:1.7;
}
.aviso-regra a{ color:var(--accent); }


/* ============================================================
   10. DIÁLOGO (<dialog> nativo)
   Usado em confirmações destrutivas. O <dialog> nativo já traz
   armadilha de foco, fechamento por Esc e inertização do fundo —
   coisas que um "modal" feito de <div> quase nunca acerta.
   ============================================================ */
.dialogo{
  border:1px solid var(--border);
  border-left:4px solid var(--erro);
  border-radius:10px;
  background:var(--surface);
  color:var(--text);
  padding:0;
  max-width:520px;
  width:calc(100% - 40px);
  font-family:'Source Serif 4',Georgia,serif;
}
.dialogo::backdrop{
  background:rgba(20,18,16,.55);
}
.dialogo-corpo{ padding:28px 30px; }
.dialogo h2{
  font-family:'Playfair Display',serif;
  font-size:24px;
  font-weight:700;
  color:var(--text);
  margin:0 0 12px;
}
.dialogo p{
  font-size:15px;
  color:var(--soft);
  line-height:1.7;
  margin:0 0 14px;
}
.dialogo .consequencias{
  border-left:3px solid var(--erro);
  padding-left:14px;
  margin:0 0 18px;
}
.dialogo .consequencias li{
  font-size:14px;
  color:var(--text);
  line-height:1.7;
  margin-left:16px;
}
.dialogo-acoes{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--border);
}

/* Botão destrutivo — precisa ser IMPOSSÍVEL de confundir com o
   botão seguro. Cor sozinha não basta (WCAG 1.4.1). */
.btn-perigo{
  font-family:'Source Serif 4',Georgia,serif;
  font-size:14px;
  letter-spacing:.04em;
  padding:13px 24px;
  border-radius:4px;
  border:1.5px solid var(--erro);
  background:transparent;
  color:var(--erro);
  cursor:pointer;
  transition:background .2s,color .2s;
}
.btn-perigo:hover{
  background:var(--erro);
  color:var(--surface);
}
.btn-neutro{
  font-family:'Source Serif 4',Georgia,serif;
  font-size:14px;
  letter-spacing:.04em;
  padding:13px 24px;
  border-radius:4px;
  border:1.5px solid var(--border-field);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  transition:background .2s;
}
.btn-neutro:hover{ background:var(--bg); }