/* ============================================================
   INSCRIÇÃO — COLÉGIO HPLUS

   Esta folha é a do HPLUS MEDICINA adaptada. A do MED depende de
   tokens que moram no base.css dela (--branco, --texto, --cinza-borda,
   --verde*). Aqui esses tokens não existem: o site do Colégio tem
   paleta própria (--papel, --tinta, --marinho, --acao...).

   Em vez de copiar as cores do MED para cá, o bloco abaixo amarra os
   tokens que a folha usa nas cores que o Colégio JÁ tem. Se o site do
   Colégio mudar de paleta um dia, o formulário acompanha sozinho.

   O tema do MED (verde) foi retirado: aqui só existe uma marca.
   ============================================================ */

.insc{
  /* o que a folha do MED esperava do base.css dela */
  --branco: var(--papel, #FFFFFF);
  --texto: var(--tinta, #0B2352);
  --cinza-borda: var(--papel-3, #E9F0FB);

  /* o tema, agora direto — sem passar pelo verde */
  --i-fundo: #FFF6F1;
  --i-topo: radial-gradient(120% 150% at 88% 18%, rgba(247,53,0,.30) 0%, rgba(0,53,136,0) 58%),
            linear-gradient(112deg, #001a44 0%, #002a6b 38%, #003588 72%, #0a4199 100%);
  --i-acao: var(--e1, #D63900);
  --i-acao-escura: var(--e1-solido, #C33300);
  --i-realce: #FF8A5B;
  --i-realce-texto: #3a1000;
  --i-foco: rgba(214,57,0,.14);
  --i-foco-forte: rgba(214,57,0,.22);
  --i-tenue: rgba(0,53,136,.07);
  --i-tenue-borda: rgba(0,53,136,.26);

  /* os quatro que estavam cravados em verde no corpo da folha do MED.
     Moram AQUI, no bloco de tokens da .insc, e nao no `.insc [hidden]`:
     la dentro so valiam para elemento escondido, entao a bolinha do
     radio e o quadradinho do consentimento ficavam sem contorno. */
  --i-sombra:       rgba(20,10,0,.09);
  --i-sombra-acao:  rgba(172,45,0,.26);
  --i-borda-marca:  #d8c3b9;
  --i-fundo-tenue:  #fffdfb;
}

/* =====================================================================
   FORMULÁRIO DE INSCRIÇÃO — HPLUS MEDICINA
   O que o candidato vê. Três coisas guiaram o desenho:

   * Uma pergunta por vez, não um paredão. A inscrição acontece quase
     toda no celular, e lista longa de campos é onde a pessoa desiste.
   * O candidato tem que ver, o tempo inteiro, PARA QUAL PROVA ele está
     se inscrevendo. No Fillout a unidade e a data vinham no link e
     sumiam da tela; quem errava o link descobria no dia.
   * Entrada de 17px para cima. Abaixo de 16px o Safari do iPhone dá
     zoom sozinho ao focar o campo, e a página "pula".
   ===================================================================== */

/* o atributo hidden sozinho não vence display:flex/grid declarado em
   classe — e aqui esconder de verdade é o ponto: a barra de passos
   continuava na tela depois da inscrição concluída */
.insc [hidden]{ display:none !important; }

/* ---------------------------------------------------------------------
   A MARCA VEM DO FORMULÁRIO, NÃO DO ARQUIVO.
   O mesmo formulário atende HPLUS MEDICINA e Colégio HPLUS — e vai
   atender o HPLUS Online. Duplicar este CSS por marca garante que um
   dia alguém conserta um e esquece o outro, então a cor mora em
   variáveis e a página só diz quem ela é (data-marca, vindo do
   marca_id que a API já devolve).
   --------------------------------------------------------------------- */

/* Colégio HPLUS: marinho e laranja, tirados do próprio site do colégio.
   O laranja cheio (#D63900) é o que passa em contraste com texto
   branco — o #F73500 do logo reprova em texto pequeno. */

.insc{ min-height:100vh; background:var(--i-fundo); padding:0 0 60px; }

/* Formulário é coluna única: esticar o campo até 1700px não deixa nada
   mais fácil de preencher, só obriga o olho a varrer a tela inteira
   entre o rótulo e o fim da caixa. A leitura confortável para de
   crescer bem antes disso. */
.insc .container{ max-width:720px; }

/* ---- topo: a prova, sempre à vista ---- */
.insc__topo{
  background:
    var(--i-topo);
  color:var(--branco); padding:22px 0 26px;
}
.insc__marca{ height:26px; width:auto; display:block; }
/* reserva para quando o logo da marca não existe no site que serve o
   formulário — ver o onerror em inscricao.js */
.insc__marca-txt{ margin:0; font-size:17px; font-weight:800; letter-spacing:.02em;
  color:var(--branco); text-transform:uppercase; }
.insc__titulo{ margin:16px 0 0; font-size:clamp(21px,5.6vw,30px); font-weight:800;
  letter-spacing:-.02em; line-height:1.12; }
.insc__titulo span{ color:var(--i-realce); }

/* o que cai na prova, logo abaixo do titulo. No Colegio o texto muda
   por evento (9o ano / +1o EM / +1o e 2o EM) e e' a unica coisa na tela
   que diz isso. */
.insc__resumo{
  margin:10px 0 0; max-width:62ch;
  font-size:15px; line-height:1.55; color:var(--branco);
  opacity:.92;
}
@media (min-width:720px){ .insc__resumo{ font-size:16px; } }

.insc__prova{
  margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  padding:13px 16px; border-radius:14px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(2px);
}
.insc__prova dl{ display:flex; flex-wrap:wrap; gap:4px 22px; margin:0; }
.insc__prova div{ min-width:0; }
.insc__prova dt{ font-size:10.5px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:rgba(255,255,255,.62); }
.insc__prova dd{ margin:2px 0 0; font-size:15px; font-weight:800; }
.insc__selo{
  margin-left:auto; flex:0 0 auto; padding:5px 11px; border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  background:var(--i-realce); color:var(--i-realce-texto);
}
.insc__selo--online{ background:#7fd4ff; color:#03263a; }

/* ---- passos ---- */
.insc__passos{ display:flex; gap:7px; margin-top:18px; }
.insc__passo{ flex:1 1 0; height:5px; border-radius:99px; background:rgba(255,255,255,.22); }
.insc__passo[data-feito]{ background:var(--i-realce); }
.insc__passo[data-atual]{ background:var(--branco); }
.insc__conta{ margin:9px 0 0; font-size:12px; font-weight:700;
  letter-spacing:.04em; color:rgba(255,255,255,.72); }

/* ---- cartão do formulário ---- */
.insc__cartao{
  background:var(--branco); border:1px solid var(--cinza-borda); border-radius:18px;
  box-shadow:0 10px 34px var(--i-sombra); padding:24px 20px 22px; margin-top:-14px;
  position:relative; z-index:2;
}
@media (min-width:720px){ .insc__cartao{ padding:30px 34px 26px; } }

.insc__etapa-tit{ margin:0; font-size:clamp(19px,4.6vw,23px); font-weight:800; letter-spacing:-.015em; }
.insc__etapa-sub{ margin:7px 0 0; font-size:14.5px; line-height:1.55; color:var(--texto-2); }
.insc__secao{
  margin:26px 0 14px; padding-bottom:8px; border-bottom:1px solid var(--cinza-borda);
  font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--i-acao-escura);
}
.insc__secao:first-of-type{ margin-top:22px; }

/* ---- campos ---- */
.campo-i{ margin:0 0 18px; }
/* :not(.lgpd) nao e' manha de especificidade — e' o escopo certo. O rotulo
   do consentimento NAO e' um rotulo acima de um campo: e' a propria linha
   do checkbox, e precisa do display:flex do .lgpd. Sem isso esta regra
   (0,1,1) vencia o .lgpd (0,1,0), o texto caia para baixo do quadradinho e
   ficava em negrito. Estava assim no ar. */
.campo-i > label:not(.lgpd){ display:block; font-size:15px; font-weight:700; margin-bottom:6px; }
.campo-i .obr{ color:#b42318; font-weight:800; margin-left:3px; }
.campo-i__ajuda{ display:block; font-size:13px; line-height:1.45; color:var(--texto-2); margin:-2px 0 8px; }

/* o que a pessoa anexou. A caixa nativa de arquivo corta o nome no
   celular — e anexar o print errado e' erro que so' aparece dias depois,
   quando a secretaria pede de novo. */
.campo-i__escolhido{
  display:block; margin:8px 0 0; padding:9px 11px;
  font-size:13px; line-height:1.4; color:var(--texto);
  background:var(--i-fundo-tenue); border:1px solid var(--cinza-borda);
  border-radius:9px; word-break:break-all;
}
.campo-i input[type=file]{
  display:block; width:100%; font:inherit; font-size:15px; color:var(--texto);
  padding:11px 12px; border:1.5px solid var(--cinza-borda); border-radius:11px;
  background:var(--branco);
}
.campo-i input[type=file]::file-selector-button{
  font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  margin-right:10px; padding:7px 12px; border:0; border-radius:8px;
  background:var(--i-tenue); color:var(--i-acao-escura);
}
.campo-i input, .campo-i select, .campo-i textarea{
  width:100%; font:inherit; font-size:17px; padding:13px 15px;
  border:1.5px solid var(--cinza-borda); border-radius:12px;
  background:var(--branco); color:var(--texto); -webkit-appearance:none; appearance:none;
}
.campo-i select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23046104' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:19px;
  padding-right:42px;
}
.campo-i input:focus, .campo-i select:focus, .campo-i textarea:focus{
  outline:none; border-color:var(--i-acao); box-shadow:0 0 0 4px var(--i-foco);
}
.campo-i[data-erro] input, .campo-i[data-erro] select{ border-color:#b42318; }
.campo-i__erro{ display:none; margin:6px 0 0; font-size:13px; font-weight:700; color:#b42318; }
.campo-i[data-erro] .campo-i__erro{ display:block; }

/* opções: botão grande em vez de radio minúsculo */
.opcoes{ display:grid; gap:9px; }
.opcoes label{
  display:flex; align-items:center; gap:11px; cursor:pointer;
  padding:13px 15px; border:1.5px solid var(--cinza-borda); border-radius:12px;
  font-size:15.5px; line-height:1.4; background:var(--branco);
}
.opcoes label:hover{ border-color:var(--i-acao); background:var(--i-fundo); }
.opcoes input{ position:absolute; opacity:0; width:0; height:0; }
.opcoes .bolinha{
  width:21px; height:21px; flex:0 0 auto; border-radius:50%;
  border:2px solid var(--i-borda-marca); display:grid; place-items:center;
}
.opcoes .bolinha::after{ content:""; width:11px; height:11px; border-radius:50%; background:transparent; }
.opcoes input:checked ~ .bolinha{ border-color:var(--i-acao); }
.opcoes input:checked ~ .bolinha::after{ background:var(--i-acao); }
.opcoes label:has(input:checked){ border-color:var(--i-acao); background:var(--i-fundo); }
.opcoes input:focus-visible ~ .bolinha{ box-shadow:0 0 0 4px var(--i-foco-forte); }

/* consentimento */
.lgpd{
  display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  padding:15px; border:1.5px solid var(--cinza-borda); border-radius:13px;
  background:var(--i-fundo); font-size:14px; line-height:1.55;
}
.lgpd input{ position:absolute; opacity:0; width:0; height:0; }
.lgpd .caixa{
  width:23px; height:23px; flex:0 0 auto; margin-top:1px; border-radius:7px;
  border:2px solid var(--i-borda-marca); background:var(--branco); display:grid; place-items:center;
}
.lgpd .caixa svg{ width:15px; height:15px; stroke:var(--branco); opacity:0; }
.lgpd input:checked ~ .caixa{ background:var(--i-acao); border-color:var(--i-acao); }
.lgpd input:checked ~ .caixa svg{ opacity:1; }
.lgpd input:focus-visible ~ .caixa{ box-shadow:0 0 0 4px var(--i-foco-forte); }

/* aviso dos +10% */
.insc__aviso{
  display:flex; gap:11px; align-items:flex-start; margin:0 0 20px;
  padding:14px 16px; border-radius:13px;
  background:var(--i-tenue); border:1.5px solid var(--i-tenue-borda);
  font-size:14.5px; line-height:1.5;
}
.insc__aviso svg{ width:21px; height:21px; flex:0 0 auto; color:var(--i-acao-escura); margin-top:1px; }
.insc__aviso strong{ color:var(--i-acao-escura); }

/* responsáveis */
.pessoa{ border:1.5px solid var(--cinza-borda); border-radius:13px; padding:15px; margin-bottom:11px; background:var(--i-fundo-tenue); }
.pessoa__cab{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.pessoa__n{ font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--texto-2); }
.pessoa__x{ border:0; background:none; color:#b42318; font-weight:700; font-size:13px; cursor:pointer; padding:4px; }
.bt-mais{
  width:100%; padding:12px; border:1.5px dashed var(--cinza-borda); border-radius:12px;
  background:var(--branco); color:var(--i-acao-escura); font:inherit; font-weight:800; font-size:14.5px; cursor:pointer;
}
.bt-mais:hover{ border-color:var(--i-acao); background:var(--i-fundo); }

/* ---- rodapé do cartão ---- */
.insc__pe{ display:flex; align-items:center; gap:12px; margin-top:26px; padding-top:20px; border-top:1px solid var(--cinza-borda); }
.insc__voltar{ border:0; background:none; font:inherit; font-size:15px; font-weight:700; color:var(--texto-2); cursor:pointer; padding:10px 4px; }
.insc__voltar:hover{ color:var(--i-acao-escura); }
.insc__seguir{
  margin-left:auto; display:inline-flex; align-items:center; gap:9px;
  padding:14px 26px; border:0; border-radius:12px; background:var(--i-acao); color:var(--branco);
  font:inherit; font-size:16px; font-weight:800; cursor:pointer;
  box-shadow:0 8px 22px var(--i-sombra-acao);
}
.insc__seguir:hover{ background:var(--i-acao-escura); }
.insc__seguir[disabled]{ opacity:.55; cursor:default; box-shadow:none; }
@media (max-width:460px){
  .insc__pe{ flex-direction:column-reverse; align-items:stretch; gap:8px; }
  .insc__seguir{ margin-left:0; justify-content:center; }
}

.insc__rodape{ margin:18px auto 0; max-width:640px; font-size:12.5px; line-height:1.6; color:var(--texto-2); text-align:center; }

/* ---- sem evento ---- */
.insc__sem{ max-width:560px; margin:0 auto; text-align:center; padding:36px 20px; }
.insc__sem h2{ margin:0 0 10px; font-size:22px; font-weight:800; }
.insc__sem p{ margin:0 0 20px; font-size:15.5px; line-height:1.6; color:var(--texto-2); }

/* ---- fim: o comprovante ---- */
.fim{ text-align:center; }
.fim__check{ width:68px; height:68px; margin:0 auto 16px; border-radius:50%;
  background:var(--i-acao); display:grid; place-items:center; }
.fim__check svg{ width:36px; height:36px; stroke:var(--branco); stroke-width:3; }
.fim__tit{ margin:0 0 8px; font-size:clamp(22px,5.4vw,27px); font-weight:800; letter-spacing:-.02em; }
.fim__sub{ margin:0 auto 24px; max-width:44ch; font-size:15.5px; line-height:1.6; color:var(--texto-2); }
.bilhete{
  text-align:left; border:1.5px solid var(--cinza-borda); border-radius:16px; overflow:hidden; margin-bottom:20px;
}
.bilhete__topo{ background:var(--i-fundo); padding:15px 18px; border-bottom:1px dashed var(--cinza-borda); }
.bilhete__nome{ margin:0; font-size:18px; font-weight:800; }
.bilhete__cpf{ margin:3px 0 0; font-size:13px; color:var(--texto-2); }
.bilhete__corpo{ padding:16px 18px; display:grid; gap:13px; }
.bilhete__linha{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; line-height:1.5; }
.bilhete__linha svg{ width:18px; height:18px; flex:0 0 auto; color:var(--i-acao); margin-top:2px; }
.bilhete__linha b{ display:block; font-size:11px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--texto-2); margin-bottom:2px; }
/* SÓ O PRIMEIRO <b> DA LINHA É RÓTULO.

   A regra acima nasceu quando cada linha do bilhete tinha um <b> só: o
   título do item ("QUANDO", "ONDE"), que é rótulo e fica bem em caixa
   alta. O bloco "Como fazer a sua prova" trouxe um segundo e um
   terceiro <b> na mesma linha — o e-mail do candidato e a SENHA dele —
   e esses herdaram o text-transform.

   O e-mail em caixa alta é feio. A senha em caixa alta é outra coisa:
   a senha do TestWe mistura maiúscula e minúscula de propósito, então
   a tela estaria ensinando o candidato a digitar errado e ele levaria
   "credenciais inválidas" sem entender por quê. Quem achou foi a
   equipe da EH, antes de a senha chegar a aparecer aqui.

   Só o primeiro <b> continua rótulo; os seguintes voltam a ser texto. */
.bilhete__linha > span > b ~ b{
  display:inline; font-size:inherit; font-weight:700; letter-spacing:normal;
  text-transform:none; color:inherit; margin:0;
}
.fim__guarde{
  display:flex; gap:11px; align-items:flex-start; text-align:left;
  padding:15px; border-radius:13px; background:var(--i-tenue);
  border:1.5px solid var(--i-tenue-borda); font-size:14px; line-height:1.55; margin-bottom:18px;
}
.fim__guarde svg{ width:20px; height:20px; flex:0 0 auto; color:var(--i-acao-escura); margin-top:1px; }

/* O bloco do link virou o botão de copiar. Ele continua parecendo o
   mesmo recado — o que muda é que agora responde ao dedo. Como é
   <button>, o navegador traz font e background próprios: tem que
   reverter os dois, senão vira um botão cinza de sistema. */
.fim__guarde--copia{
  width:100%; font:inherit; text-align:left; cursor:pointer; color:inherit;
  -webkit-appearance:none; appearance:none;
  transition:border-color .15s, background-color .15s, transform .08s;
}
.fim__guarde--copia:hover{ border-color:var(--i-acao); }
.fim__guarde--copia:active{ transform:scale(.995); }
.fim__guarde--copia:focus-visible{ outline:3px solid var(--i-foco-forte); outline-offset:2px; }
.fim__copiar{
  display:block; margin-top:7px; font-size:13px; font-weight:800;
  color:var(--i-acao-escura); letter-spacing:.01em;
}
.fim__guarde--copiado{ border-color:var(--i-acao); background:var(--i-foco); }
.fim__acoes{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.fim__acoes a, .fim__acoes button{
  display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:11px;
  font:inherit; font-size:14.5px; font-weight:800; cursor:pointer; text-decoration:none;
  border:1.5px solid var(--i-acao); background:var(--branco); color:var(--i-acao-escura);
}
.fim__acoes .principal{ background:var(--i-acao); color:var(--branco); }
.fim__acoes a:hover, .fim__acoes button:hover{ background:var(--i-acao-escura); color:var(--branco); border-color:var(--i-acao-escura); }

/* ---- carregando / erro ---- */
.insc__carregando{ text-align:center; padding:50px 20px; color:var(--texto-2); font-size:15px; }
.insc__falhou{
  margin:16px 0 0; padding:14px 16px; border-radius:12px;
  background:rgba(180,35,24,.08); border:1.5px solid rgba(180,35,24,.3);
  font-size:14.5px; line-height:1.55; color:#7a1710;
}

/* o link de socorro dentro da caixa de erro: tem que ser clicável de
   verdade no celular (44px de alvo), e não competir com o botão de
   confirmar — por isso sublinhado, não botão. */
.insc__ajuda{
  display:inline-block; margin-top:6px; padding:6px 0;
  font-weight:700; color:var(--i-acao-escura);
  text-decoration:underline; text-underline-offset:3px;
}
.insc__ajuda:hover{ color:var(--i-acao); }


/* ---- "você já tem inscrição" ----
   Não é erro e não é confirmação. O verde de confirmado faria a pessoa
   ler só o título e ir embora achando que inscreveu de novo; o vermelho
   de falha faria ela tentar outra vez, que é justamente o que não
   resolve. Âmbar, e fixo: estes valores NÃO usam os tokens --i-* porque
   eles mudam por marca, e o aviso tem que ser o mesmo nas três.

   Fica no primeiro nível do arquivo, não dentro de outro bloco. Foi
   exatamente assim que quatro tokens do Colégio foram parar dentro de
   .insc [hidden] e sumiram da tela inteira. */
.fim__check--ja{ background:#B45309; }
.fim__check--ja svg{ stroke:var(--branco); stroke-width:2.2; }
.fim--ja .fim__guarde{
  background:rgba(180,83,9,.09);
  border-color:rgba(180,83,9,.32);
}
.fim--ja .fim__guarde svg{ color:#B45309; }
.fim--ja .bilhete__linha svg{ color:#B45309; }

/* AS OUTRAS DATAS, na página de quem faltou ou cancelou.

   Veio junto do minha-inscricao.js novo: ele passou a desenhar a lista
   de datas em que ainda dá para fazer a prova, com estas quatro
   classes. Elas existiam só no inscricao.css da MED.

   A geometria é a mesma do original. As cores NÃO são: lá o hover
   cravava rgba(0,131,0,…), que é o verde da MED. Aqui são os tokens
   da marca, como o resto do arquivo. */
.outras{ display:flex; flex-direction:column; gap:8px; }
.outras__item{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px;
  border-radius:10px; border:1px solid var(--cinza-borda);
  text-decoration:none; color:inherit; background:var(--i-fundo-tenue);
}
.outras__item:hover{ border-color:var(--i-acao); background:var(--i-foco); }
.outras__dia{ font-weight:700; font-size:14px; }
.outras__ond{ font-size:12.5px; opacity:.75; }


/* ---------- a tela "você vai fazer agora?" (24/10/2026) ----------
   A prova online deixou de ter dia: o candidato decide quando começa, e
   é esta tela que recebe essa decisão. A lista existe para a pessoa
   desistir ANTES de clicar — o relógio começa no "iniciar" e não volta. */
.agora__lista{
  margin:8px 0 0; padding:0 0 0 18px;
  font-weight:400; line-height:1.6;
}
.agora__lista li{ margin:0 0 4px; }
.agora__lista li:last-child{ margin-bottom:0; }