/* Tela de senha, no template institucional da Unoeste.
   Mesma aparência no celular e no palco projetado. */

#portaria {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #edf2e6;
}

body.na-portaria { overflow: hidden; }

.portaria-cartao {
  width: 100%;
  max-width: 420px;
  padding: 30px 30px 26px;
  background: #ffffff;
  border: 1px solid #dbe3d2;
  border-top: 5px solid #98be19;
  border-radius: 6px;
  font-family: Arial, Helvetica, 'Liberation Sans', sans-serif;
  color: #1c2b1a;
}

.portaria-faixa {
  margin: 0 0 14px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.5;
  color: #a6b5a2;
}

.portaria-cartao h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  color: #004c00;
}

.portaria-dica {
  margin: 7px 0 22px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #3f793f;
}

.portaria-cartao label {
  display: block;
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #3f793f;
}

.portaria-cartao input {
  width: 100%;
  padding: 13px 14px;
  /* nunca abaixar de 16px: com menos que isso o Safari do iPhone da zoom */
  font: 16px/1.4 Arial, Helvetica, sans-serif;
  border: 1.5px solid #dbe3d2;
  border-radius: 4px;
  background: #fff;
  color: inherit;
}

.portaria-cartao input:focus { outline: none; border-color: #006600; }

.portaria-cartao button {
  width: 100%;
  margin-top: 16px;
  padding: 15px;
  font: 700 16px Arial, Helvetica, sans-serif;
  border: 0;
  border-radius: 4px;
  background: #004c00;
  color: #fff;
  touch-action: manipulation;
}

.portaria-cartao button:disabled { background: #9fab99; }
.portaria-cartao button:active { background: #013301; }

.portaria-erro {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: #fdeceb;
  border-left: 4px solid #b3261e;
  border-radius: 4px;
  font-size: 13.5px;
  color: #8c2b23;
}

.portaria-rodape {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid #eaefe4;
  font-size: 11px;
  line-height: 1.5;
  color: #8d9a89;
}

/* O aviso de coleta. Fica em letra pequena, recolhido, do jeito que um termo
   de uso real aparece. Faz parte da demonstração: está escrito, e ninguém lê. */
.portaria-termo { margin: 18px 0 0; }
.portaria-termo summary {
  font-size: 11.5px;
  line-height: 1.45;
  color: #8d9a89;
  cursor: default;
}
.portaria-termo p {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: #7d8a7a;
}