/* ==========================================================================
   A BARREIRA DE ACESSO RESTRITO

   Vermelha, séria, sem enfeite. Nada de animação, nada de ícone decorativo:
   a tela existe para ser lida, e qualquer coisa que dispute a atenção com o
   texto trabalha contra ela.

   Cobre a janela inteira, acima de tudo. O SAI não abre atrás do aviso —
   quem está lendo a advertência não pode estar vendo dado disciplinar ao
   fundo.
   ========================================================================== */

.sai-barreira {
  position: fixed;
  inset: 0;
  z-index: 99999;              /* acima do menu, dos modais e de tudo mais */
  background: #4a0d0d;
  color: #fff;
  display: flex;
  justify-content: center;
  /* `align-items: flex-start` de propósito: com `center`, um texto mais alto
     que a janela fica com o topo cortado e SEM COMO ROLAR até ele. */
  align-items: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sai-barreira__folha {
  width: 100%;
  max-width: 780px;
  padding: 32px 28px 40px;
  /* Espaço no fim para o texto não terminar colado no rodapé em telas baixas. */
  margin-bottom: env(safe-area-inset-bottom, 0);
}

.sai-barreira__titulo {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-align: center;
  margin: 0 0 6px;
}

.sai-barreira__regua {
  height: 3px;
  background: #ff6b6b;
  margin: 0 auto 22px;
  max-width: 190px;
}

.sai-barreira__abertura {
  font-size: 1.06rem;
  line-height: 1.6;
  margin: 0 0 26px;
  font-weight: 600;
}

.sai-barreira__secao { margin-bottom: 24px; }

.sai-barreira__secao-titulo {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: #ffb4b4;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.22);
}

.sai-barreira__secao p {
  font-size: .95rem;
  line-height: 1.62;
  margin: 0 0 12px;
  /* Sem justificar: em 390px, o texto justificado abre buracos entre as
     palavras e fica pior de ler que alinhado à esquerda. */
  text-align: left;
}

.sai-barreira__fecho {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 700;
  background: rgba(0,0,0,.28);
  border-left: 4px solid #ff6b6b;
  padding: 16px 18px;
  margin: 26px 0 24px;
}

.sai-barreira__acoes {
  display: flex;
  /* `wrap-reverse`, não `wrap`: o rótulo do aceite é longo e, em telas
     médias, os dois botões não cabem lado a lado. Com `wrap` simples, o
     "Não prosseguir" ficaria ACIMA do aceite — invertido em relação ao
     empilhamento do celular. Com `wrap-reverse`, a ordem na tela é a mesma
     nos dois tamanhos: aceite em cima, recusa embaixo. */
  flex-wrap: wrap-reverse;
  gap: 12px;
  justify-content: center;
}

.sai-barreira__botao {
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
  line-height: 1.35;
}

/* O botão diz o que a pessoa está declarando. "Continuar" ou "OK" não
   serviriam: o aceite tem valor de declaração, e o rótulo é a última coisa
   lida antes de clicar. */
/* O `!important` na cor não é preguiça: um estilo global de `button[type=submit]`
   estava vencendo a cascata e deixando o rótulo num tom claro sobre o fundo
   branco — quase ilegível justamente no botão que confirma a entrada. */
.sai-barreira__botao--ciente {
  background: #fff;
  color: #4a0d0d !important;
  max-width: 100%;
}
.sai-barreira__botao--ciente:hover { background: #ffe0e0; }

.sai-barreira__botao--sair {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
}
.sai-barreira__botao--sair:hover { background: rgba(255,255,255,.12); }

/* ── a etapa da senha ────────────────────────────────────────────────────── */
.sai-barreira__senha { max-width: 420px; margin: 0 auto; }

.sai-barreira__senha label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 8px;
  color: #ffd6d6;
}

.sai-barreira__senha input {
  width: 100%;
  font-family: inherit;
  font-size: 1.05rem;
  padding: 13px 14px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.3);
  color: #fff;
  margin-bottom: 14px;
}
.sai-barreira__senha input:focus {
  outline: none;
  border-color: #fff;
}

.sai-barreira__erro {
  background: rgba(0,0,0,.35);
  border-left: 4px solid #ff6b6b;
  padding: 11px 14px;
  font-size: .9rem;
  line-height: 1.5;
  margin-bottom: 16px;
}

.sai-barreira__nota {
  font-size: .82rem;
  line-height: 1.55;
  color: #ffc9c9;
  margin-top: 18px;
  text-align: center;
}

/* ── o relógio dos 15 minutos, já dentro do SAI ──────────────────────────── */
.sai-relogio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #4a0d0d;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 5px 11px;
  border-radius: 4px;
}
.sai-relogio--acabando { background: #b31212; }

/* ==========================================================================
   390px — o texto é longo e precisa caber inteiro, sem corte lateral.
   ========================================================================== */
@media (max-width: 480px) {
  .sai-barreira__folha    { padding: 22px 16px 32px; }
  .sai-barreira__titulo   { font-size: 1.42rem; letter-spacing: .09em; }
  .sai-barreira__abertura { font-size: .98rem; }
  .sai-barreira__secao p  { font-size: .9rem; line-height: 1.6; }
  .sai-barreira__fecho    { font-size: .93rem; padding: 13px 14px; }

  /* Empilhado: dois botões lado a lado em 390px espremeriam o rótulo do
     aceite, que é justamente o que precisa ser lido por inteiro. */
  .sai-barreira__acoes         { flex-direction: column-reverse; }
  .sai-barreira__acoes button  { width: 100%; }
}

/* Telas muito estreitas (320px) — a quebra de palavra evita estouro
   horizontal em termos longos como "intransferível" e nas citações legais. */
@media (max-width: 360px) {
  .sai-barreira__secao p,
  .sai-barreira__abertura { overflow-wrap: break-word; hyphens: auto; }
}