/* Tela de bloqueio / definição de senha. Ver js/ui/bloqueio.js. */

.tela-bloqueio {
  min-height: 100vh; display: grid; place-items: center; padding: 1rem;
  background:
    radial-gradient(circle at 12% 8%, var(--acento-claro) 0%, transparent 42%),
    radial-gradient(circle at 88% 92%, var(--roxo-claro) 0%, transparent 40%),
    var(--fundo);
}

.cartao-bloqueio {
  position: relative; overflow: hidden;
  width: min(430px, 100%); background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio-grande);
  padding: 2.3rem 2rem 2rem; box-shadow: var(--sombra-alta);
  animation: surgir-cartao .25s cubic-bezier(.2, .9, .3, 1);
}
.cartao-bloqueio::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--acento), var(--azul), var(--roxo));
}
.cartao-bloqueio h1 { margin-bottom: 1.1rem; }

/* ------------------------------------------------------------ Marca */
.marca {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: 1.3rem;
}
.marca-emblema {
  display: grid; place-items: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--acento), var(--acento-forte));
  color: #fff; box-shadow: var(--sombra-suave);
}
.marca-texto {
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--acento-forte); font-weight: 700;
}

/* ------------------------------------------------------------ Formulário */
.cartao-bloqueio label {
  display: block; margin: .9rem 0; font-size: .9rem; color: var(--texto-suave);
  font-weight: 500;
}
.cartao-bloqueio input[type="password"] {
  display: block; width: 100%; margin-top: .35rem;
  padding: .65rem .75rem; border: 1px solid var(--borda-forte); border-radius: var(--raio-peq);
  background: var(--superficie); font-size: .95rem;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.cartao-bloqueio input[type="password"]:focus {
  outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-claro);
}

/* ------------------------------------------------------------ Força da senha */
.forca {
  position: relative; margin: .55rem 0 .95rem; min-height: 1.3em;
  padding-top: .5rem; font-size: .8rem; font-weight: 600; color: var(--texto-suave);
}
.forca::before {
  content: ''; display: block; height: 6px; width: 100%; margin-bottom: .45rem;
  border-radius: 999px; background: var(--borda);
  transition: opacity var(--transicao);
}
.forca::after {
  content: ''; position: absolute; top: .5rem; left: 0; height: 6px;
  border-radius: 999px; width: 0%; background: var(--vermelho);
  transition: width .2s ease, background .2s ease;
}
.forca:not([data-nivel])::before { opacity: 0; }

.forca[data-nivel="0"] { color: var(--vermelho); }
.forca[data-nivel="0"]::after { width: 12%; background: var(--vermelho); }
.forca[data-nivel="1"] { color: var(--vermelho); }
.forca[data-nivel="1"]::after { width: 34%; background: var(--vermelho); }
.forca[data-nivel="2"] { color: var(--ambar); }
.forca[data-nivel="2"]::after { width: 58%; background: var(--ambar); }
.forca[data-nivel="3"] { color: var(--verde); }
.forca[data-nivel="3"]::after { width: 82%; background: var(--verde); }
.forca[data-nivel="4"] { color: var(--verde); }
.forca[data-nivel="4"]::after { width: 100%; background: var(--verde); }

/* ------------------------------------------------------------ Aviso crítico */
.aviso-critico {
  display: flex; align-items: flex-start; gap: .65rem;
  background: var(--vermelho-claro); border: 1px solid rgba(192, 57, 43, .22);
  border-left: 4px solid var(--vermelho);
  padding: .85rem .9rem; font-size: .85rem; border-radius: 0 var(--raio-peq) var(--raio-peq) 0;
  color: #7c2d24; margin: 1rem 0 1.2rem;
}
.aviso-critico-icone { flex-shrink: 0; margin-top: .1rem; color: var(--vermelho); }
.aviso-critico p { margin: 0; line-height: 1.55; }

/* ------------------------------------------------------------ Checkbox de ciência */
.linha-check {
  display: flex; align-items: flex-start; gap: .55rem; font-size: .88rem;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio-peq);
  padding: .65rem .75rem; margin: 1rem 0; color: var(--texto);
}
.linha-check input {
  margin: .18rem 0 0; width: 16px; height: 16px; flex-shrink: 0;
  accent-color: var(--vermelho);
}

@keyframes surgir-cartao {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}