@font-face {
  font-family: 'Nyght Serif Bold';
  src: url('../fonts/Nyght_Serif/NyghtSerif-Bold.otf') format('otf');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Nyght Serif Regular';
  src: url('../fonts/Nyght_Serif/NyghtSerif-Regular.otf') format('otf');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'DM Sans Medium';
  src: url('../fonts/DM_Sans/static/DMSans-Medium.ttf') format('ttf');
  font-weight: 400;
  font-style: normal;
}


.bgform {
  background-color: #3A3A3A;
}

.titletxt {
  font-family: 'Nyght Serif Regular';
  font-weight: 400;
  font-size: 5rem;
  color: #ffffff;
  margin-bottom: 30px;
}

.txtlabel {
  font-family: 'DM Sans Medium';
  font-weight: 400;
  font-size: 18px;
  color: #fff;
}

.imglogo {
  margin: 0 auto 30px auto;
  max-width: 100%;
}

input#cel::placeholder {
  font-family: 'DM Sans Medium';
  font-weight: 400;
  font-size: 18px;
  color: #fff;
}



/* Teclado Virtual */
#virtual-keyboard {
  display: none;
  margin-top: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

#virtual-keyboard.show {
  display: block;
}

.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.key {
  width: 70px;
  height: 60px;
  font-size: 24px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.key:active {
  background: #e9ecef;
  transform: scale(0.95);
}

.key.action {
  background: #6c757d;
  color: white;
  font-size: 18px;
}

.key.action:active {
  background: #5a6268;
}

.key.clear {
  background: #dc3545;
  color: white;
}

.key.clear:active {
  background: #c82333;
}