/* src/modules/auth/components/lock-screen.css */

/* --- CONTENEDOR PRINCIPAL --- */
.screen-locked {
  display: flex;
  width: 100%;
  height: 100dvh; /* Usamos dvh para móviles reales */
  max-width: 480px;
  margin: 0 auto;
  padding-top: 40px;
  
  flex-direction: column;
  justify-content: space-between; 
  align-items: center;
  position: relative;

  background: var(--Negro-suave);
  overflow-x: hidden; /* ✨ ARREGLO: Evita scroll horizontal si algo se pasa */
}

/* --- 1. HEADER ASCII --- */
.terminal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* ✨ ARREGLO: Al usar box-sizing arriba, este padding ya no romperá el ancho */
  padding: 0 24px; 
  width: 100%;
  margin-top: 20px;
}

.ascii-art {
  color: var(--Verde-acido);
  font-family: "JetBrains Mono";
  font-size: 13px; 
  font-weight: bold;
  line-height: 1.1;
  white-space: pre;
  margin-bottom: 32px;
  text-align: left;
  transform-origin: center; 
}

/* Ajuste defensivo para móviles tamagochi */
@media (max-width: 360px) {
    .ascii-art { transform: scale(0.9); }
}

.log-container {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  gap: 4px; /* Espacio real entre líneas */
  width: 100%;
  margin-bottom: 20px;
}

.log-text {
  font-family: "JetBrains Mono";
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  
  /* ✨ ARREGLO CRÍTICO: Los <p> tienen margen por defecto, hay que quitarlo */
  margin: 0; 
}

.log-text--green { color: var(--Verde-acido); }
.log-text--white { color: var(--Blanco); }


/* --- 2. SECCIÓN PIN (CENTRO) --- */
.pin-section {
  display: flex;
  padding: 0 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex: 1;
  width: 100%;
}

.pin-inputs-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pin-box {
  display: flex;
  width: 50px; 
  height: 64px;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--Blanco);
  font-size: 32px;
  color: var(--Verde-acido);
  position: relative;
}

.cursor-bar {
  width: 20px;
  height: 2px;
  background-color: var(--Verde-acido);
  position: absolute;
  bottom: 12px;
  animation: blink 1s step-end infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.forgot-link {
  color: var(--Blanco);
  font-family: "JetBrains Mono";
  font-size: 14px;
  text-decoration: none;
  opacity: 0.6;
  margin-top: 8px;
}

/* --- 3. TECLADO --- */
.keyboard-container {
  width: 100%;
  background: var(--Negro-suave);
  display: flex;
  flex-direction: column;
}

app-keypad {
    display: block; 
    width: 100%;
}

/* ================= MODAL RECUPERACIÓN ================= */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(5px);
  z-index: 999; display: none; justify-content: center; align-items: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
  width: 85%; max-width: 364px; padding: 24px; display: flex; flex-direction: column;
  gap: 20px; border: 1px solid var(--Verde-acido); background: var(--Negro-suave);
}
.modal-header { border-bottom: 1px solid #333; padding-bottom: 12px; }
.modal-title { color: var(--Blanco); font-family: 'Clash Display', sans-serif; font-size: 24px; margin-bottom: 4px; }
.modal-subtitle { font-family: "JetBrains Mono"; font-size: 12px; color: #888; }
.modal-warning-text { font-size: 14px; color: #ccc; line-height: 1.4; font-family: "JetBrains Mono"; }
.label-text { display: block; color: var(--Verde-acido); font-size: 12px; margin-bottom: 8px; font-family: "JetBrains Mono"; }
.pills-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pill-option { border: 1px solid var(--Blanco); color: var(--Blanco); padding: 8px 12px; font-size: 12px; cursor: pointer; font-family: "JetBrains Mono"; }
.pill-option.selected { background: var(--Verde-acido); color: var(--Negro-suave); border-color: var(--Verde-acido); font-weight: bold; }
.actions-wrapper { display: flex; gap: 12px; margin-top: 10px; }
.btn-modal { flex: 1; padding: 14px; border: none; font-family: "JetBrains Mono"; font-weight: bold; cursor: pointer; }
.btn-cancel { background: #333; color: white; }
.btn-confirm { background: var(--Verde-acido); color: black; }