/* ==========================================================================
   Recuperacao / alteracao de password - ESTGV/IPV
   Camada por cima de ui/estilo.css (a folha de estilo do SIVAM).
   Sem dependencias de rede. Ficheiro em ASCII puro.
   ==========================================================================*/

/* ---------------------------------------------- ponte com o Bootstrap --- */
/* As mensagens vindas de msgErro() usam classes do Bootstrap. Aqui damos-lhes
   o aspecto dos avisos do SIVAM sem tocar no codigo que as gera.            */

.alert {
  position: relative;
  /* O msgErro() emite o padrao "alert with icon" do Bootstrap 5, com
     d-flex align-items-center. Isso poe cada filho numa coluna, e qualquer
     paragrafo acrescentado ficava ao lado do texto em vez de por baixo.
     Aqui a caixa volta a ser um bloco normal. */
  display: block !important;
  padding: 16px 18px 16px 52px;
  border-radius: var(--raio);
  border: 1px solid var(--linha-forte);
  border-left-width: 4px;
  margin: 0 0 18px;
  font-size: .92rem;
  line-height: 1.55;
}

/* O icone entra por ::before para nao ser preciso mexer no msgErro(), que
   vive no sync_application.php. Fica absoluto para os <b> e <br> da mensagem
   continuarem a comportar-se como texto normal. */
.alert::before {
  content: "";
  position: absolute; left: 17px; top: 16px;
  width: 22px; height: 22px;
  background-repeat: no-repeat; background-position: center;
  background-size: 22px 22px;
}

/* O icone do Bootstrap dentro da caixa deixa de fazer falta: quem o desenha
   agora e' o ::before acima. Os <symbol> a que ele aponta viviam no
   header.php antigo e nao foram mantidos, por isso sem isto ficava um
   quadrado vazio a ocupar espaco. */
.alert > svg { display: none; }

/* Sucesso: visto dentro de um circulo. */
.alert-success::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B7F4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
}

/* Aviso: triangulo de exclamacao. */
.alert-warning::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B26A00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

/* Erro: X dentro de um circulo. */
.alert-danger::before, .alert-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D32330' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
}

.alert-info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231863DC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}
.alert-danger, .alert-error {
  background: var(--erro-fundo); border-color: var(--erro); color: var(--tinta);
}
.alert-success { background: var(--ok-fundo);    border-color: var(--ok);    color: var(--tinta); }
.alert-warning { background: var(--aviso-fundo); border-color: var(--aviso); color: var(--tinta); }
.alert-info    { background: var(--info-fundo);  border-color: var(--info);  color: var(--tinta); }
.alert a { font-weight: 600; }

/* O tema antigo pintava os botoes de preto. Passam a ser azuis, como no SIVAM. */
.btn, .btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px;
  border-radius: var(--raio-p); border: 1px solid transparent;
  background-color: var(--azul) !important; color: #fff !important;
  font-family: inherit; font-size: .925rem; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none;
  transition: background var(--transicao), box-shadow var(--transicao);
}
.btn-primary:hover { background-color: var(--azul-escuro) !important; box-shadow: var(--sombra-m); }

/* --------------------------------------------------- caixa da pagina --- */

.caixa-servico { width: 100%; max-width: 640px; margin: 0 auto; }
.caixa-servico.larga { max-width: 760px; }

.pagina-centrada .pagina {
  display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 20px 56px;
}

/* ------------------------------------------------------- campo passe --- */

.campo-passe .envolve-passe { position: relative; }
.campo-passe input { padding-right: 92px; }

.campo-passe .ver-passe {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 10px;
  background: transparent; border: 0; border-radius: var(--raio-p);
  color: var(--azul); font: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer;
}
.campo-passe .ver-passe:hover { background: var(--azul-claro); }

.campo.tem-erro .ver-passe { color: var(--erro); }
.campo.esta-ok input { border-color: var(--ok); }
.campo.esta-ok input:focus { box-shadow: 0 0 0 3px rgba(27,127,75,.15); }

.aviso-caps {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 8px 12px;
  background: var(--aviso-fundo); border: 1px solid var(--aviso);
  border-radius: var(--raio-p);
  font-size: .84rem; font-weight: 600; color: var(--aviso);
}

/* ------------------------------------------------------ forca da passe -- */

.forca { margin-top: 12px; }
.forca-barra {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  height: 6px; margin-bottom: 6px;
}
.forca-barra span { background: var(--linha); border-radius: 100px; transition: background var(--transicao); }
.forca-texto { font-size: .82rem; font-weight: 600; color: var(--tinta-fraca); }

.forca[data-nivel="1"] .forca-barra span:nth-child(-n+1) { background: var(--erro); }
.forca[data-nivel="2"] .forca-barra span:nth-child(-n+2) { background: var(--aviso); }
.forca[data-nivel="3"] .forca-barra span:nth-child(-n+3) { background: #4A9E6B; }
.forca[data-nivel="4"] .forca-barra span { background: var(--ok); }

.forca[data-nivel="1"] .forca-texto { color: var(--erro); }
.forca[data-nivel="2"] .forca-texto { color: var(--aviso); }
.forca[data-nivel="3"] .forca-texto,
.forca[data-nivel="4"] .forca-texto { color: var(--ok); }

/* ------------------------------------------------------- lista de regras */

.regras {
  list-style: none; margin: 14px 0 0; padding: 14px 16px;
  background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--raio);
}
.regras > li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 5px 0; font-size: .875rem; line-height: 1.45;
  color: var(--tinta-suave);
  transition: color var(--transicao);
}
.regras > li .marca {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%; background: var(--linha);
  display: flex; align-items: center; justify-content: center;
  color: var(--tinta-fraca);
  transition: background var(--transicao), color var(--transicao);
}
.regras > li .marca svg { display: block; }
.regras > li.cumprida { color: var(--ok); font-weight: 600; }
.regras > li.cumprida .marca { background: var(--ok); color: #fff; }
.regras > li.falhada { color: var(--erro); font-weight: 600; }
.regras > li.falhada .marca { background: var(--erro); color: #fff; }

.regras .detalhe {
  display: block; margin-top: 3px;
  font-size: .8rem; font-weight: 400; color: var(--tinta-suave);
}
.regras > li.falhada .detalhe { color: var(--erro); }

/* Sub-lista dos 4 conjuntos de caracteres. */
.conjuntos { list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.conjuntos li {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 100px;
  background: var(--papel); border: 1px solid var(--linha-forte);
  font-size: .78rem; font-weight: 600; color: var(--tinta-fraca);
  transition: all var(--transicao);
}
.conjuntos li.tem { background: var(--ok-fundo); border-color: var(--ok); color: var(--ok); }

/* -------------------------------------------------- simbolos permitidos -- */

.simbolos { display: flex; gap: 5px; flex-wrap: wrap; margin: 10px 0 0; padding: 0; list-style: none; }
.simbolos li {
  width: 30px; height: 30px; border-radius: var(--raio-p);
  display: flex; align-items: center; justify-content: center;
  background: var(--papel); border: 1px solid var(--linha-forte);
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: .95rem; font-weight: 700; color: var(--tinta-suave);
  transition: all var(--transicao);
}
.simbolos li.usado { background: var(--ok-fundo); border-color: var(--ok); color: var(--ok); }
.simbolos.proibidos li { color: var(--tinta-fraca); }
.simbolos.proibidos li.usado { background: var(--erro-fundo); border-color: var(--erro); color: var(--erro); }
.simbolos li.espaco { width: auto; padding: 0 10px; font-size: .72rem; letter-spacing: .04em; }

.legenda-simbolos { font-size: .82rem; color: var(--tinta-suave); margin: 14px 0 0; }
.legenda-simbolos strong { color: var(--tinta); }

/* --------------------------------------------------------- form legado -- */
/* Alguns blocos ainda vem em tabela. Isto impede que rebentem o cartao.     */

.cartao-corpo table { max-width: 100%; }
.cartao-corpo font { font-family: inherit !important; font-size: inherit !important; }

/* ------------------------------------------------------------- telemovel -- */

@media (max-width: 560px) {

  .pagina-centrada .pagina { padding: 16px 12px 40px; }

  .cartao-cabeca { padding: 16px 16px; }
  .cartao-corpo  { padding: 16px; }
  .cartao-cabeca h1 { font-size: 1.3rem; }

  /* No telemovel o botao principal ocupa a largura toda: e' mais facil de
     acertar com o polegar e deixa claro qual e' o passo seguinte. */
  .botoes { display: block; }
  .botoes .btn, .botoes .botao { width: 100%; }

  .regras { padding: 12px 14px; }
  .regras > li { font-size: .9rem; }

  /* Alvos de toque maiores, mas ainda cabem 8 por linha em 320px. */
  .simbolos li { width: 32px; height: 32px; font-size: 1rem; }
  .simbolos li.espaco { font-size: .75rem; }

  .campo-passe input { padding-right: 84px; }
  .campo-passe .ver-passe { font-size: .8rem; padding: 0 8px; }

  /* Os passos 1-2-3 do confirmfp em coluna, senao ficam esmagados. */
  .passos { gap: 4px; font-size: .8rem; }
  .passos li + li::before { width: 10px; margin-right: 4px; }

  .servicos { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .simbolos li { width: 30px; height: 30px; }
  .conjuntos li { font-size: .74rem; padding: 3px 8px; }
}

/* ------------------------------------------------------- painel final --- */
/* Substitui o formulario depois de a password ficar gravada. */

.painel-sucesso {
  text-align: center;
  padding: 26px 20px 22px;
  border: 1px solid var(--ok);
  border-radius: var(--raio);
  background: var(--ok-fundo);
}
.painel-sucesso .marca-grande { color: var(--ok); display: block; margin: 0 auto 10px; }
.painel-sucesso .titulo {
  margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--ok);
}
.painel-sucesso .nota {
  margin: 10px auto 0; max-width: 46ch;
  font-size: .85rem; line-height: 1.55; color: var(--tinta-suave);
}
.painel-sucesso .nota b { color: var(--tinta); }

/* A caixa do msgErro() quando ja' existe um painel de sucesso por cima:
   deixa de ser a mensagem principal e passa a aviso, com o triangulo, a
   informacao do login e a nota de que a password e' a mesma em todo o lado. */
.alert.alert-detalhe {
  margin-top: 14px;
  margin-bottom: 0;
  color: var(--tinta);
}
.alert.alert-detalhe b { color: var(--tinta); }

/* ----------------------------------------------------------- diálogos --- */
/* O jquery-confirm assenta em .container-fluid do Bootstrap 3. Com o
   Bootstrap 5 (que e' o que esta' carregado) essa classe ja' nao existe, por
   isso a caixa espalhava-se de um lado ao outro do ecra. Aqui devolve-se-lhe
   uma largura, e de caminho o aspecto do SIVAM. */

.jconfirm .jconfirm-box-container,
.jconfirm .jconfirm-box {
  max-width: 440px;
  width: calc(100% - 32px);
  margin-left: auto;
  margin-right: auto;
  float: none;
}

.jconfirm .jconfirm-box {
  border-radius: var(--raio);
  box-shadow: var(--sombra-m);
  padding: 22px;
}

.jconfirm .jconfirm-title {
  font-family: var(--fonte);
  font-size: 1.05rem; font-weight: 700; color: var(--tinta);
}
.jconfirm .jconfirm-content {
  font-family: var(--fonte);
  font-size: .92rem; line-height: 1.55; color: var(--tinta-suave);
}
.jconfirm .jconfirm-content b { color: var(--tinta); }

.jconfirm .jconfirm-buttons { padding-top: 8px; }
.jconfirm .jconfirm-buttons button {
  min-height: 40px; padding: 8px 20px;
  border-radius: var(--raio-p);
  font-family: inherit; font-size: .9rem; font-weight: 600;
  text-transform: none;
}
.jconfirm .jconfirm-buttons button.btn-default {
  background: var(--azul); color: #fff; border: 0;
}
.jconfirm .jconfirm-buttons button.btn-default:hover { background: var(--azul-escuro); }

@media (max-width: 560px) {
  .jconfirm .jconfirm-box-container,
  .jconfirm .jconfirm-box { max-width: none; width: calc(100% - 24px); }
}