/* ============================
   Fuente principal
============================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Poppins:wght@300;400;600&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  font-family: "Manrope", sans-serif;
  background: #f2f2f2;
  color: #333;
}

h1, h2, h3, h4, h5, h6, p, a, label, input, button {
  font-family: inherit;
}

/* ============================
   Links
============================ */
a {
  font-size: 14px;
  line-height: 1.7;
  color: #666;
  transition: all 0.3s;
  text-decoration: none;
}
a:hover { color: #fc4c02; }

/* ============================
   Contenedor principal
============================ */
.limiter { 
  width: 100%; 
  margin: 0 auto; 
}

.container-login100 {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f2f2f2;
}

.wrap-login100 {
  width: 500px;
  background: #fff;
  border-radius: 12px;
  padding: 40px 30px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.12);
  margin: 20px;
}

/* ============================
   Centramos los inputs de código
============================ */
.wrap-input104 {
  display: flex;
  justify-content: center;
  gap: 5px; /* espacio reducido entre inputs */
  margin-top: 15px;
  width: 80%;
  position: relative;
  margin-left: 10%;
}

.wrap-input104 label {
  position: absolute;
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  font-size: 1rem;
  pointer-events: none;
  transition: all 0.2s ease;
  background: transparent;
  padding: 0 4px;
}

/* Cuando el input tiene texto o foco */
.wrap-input104 input:focus + label,
.wrap-input104 input:not(:placeholder-shown) + label {
  top: -8px;
  font-size: 0.75rem;
  color: #fc4c02;
  background: #fff;
  transform: none;
}

/* Ajustamos el estilo de cada input de código */
.input1013, .input1014 {
  width: 45px;
  height: 55px;
  font-size: 1.2rem;
  text-align: center;
  border: 1px solid #999;
  border-radius: 5px;
  margin: 0; /* ✅ eliminado espacio entre inputs */
}

/* ============================
   Títulos y textos
============================ */
.textypn1 {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  color: #33454f;
}

.textypn4 {
  font-size: 15px;
  text-align: center;
  color: #33454f;
  margin: 0 8%;
  line-height: 1.4;
}

.textypn10 {
  font-size: 12px;
  margin-left: 6%;
  margin-top: -6%;
  color: #fc4c02;
  line-height: 1.4;
}

.textypnerr {
  font-size: 11px;
  text-align: center;
  color: #db0000;
  margin-left: 0%;
  line-height: 1.4;
}

.textypnerror {
  font-size: 13px;
  text-align: left;
  color: #db0000;
  margin-left: 10%;
  margin-top: 10%;
  line-height: 1.4;
}

.textypnerror2 {
  font-size: 11px;
  text-align: left;
  color: #db0000;
  margin-left: 10%;
  margin-top: 0%;
  margin-bottom: -1%;
  line-height: 1.4;
}

/* ============================
   Formularios
============================ */
.login100-form {
  width: 100%;
  background: #fff;
  border-radius: 12px;
}

/* ============================
   Inputs generales
============================ */
.input1012, .input1010 {
  font-size: 16px;
  font-family: "Manrope", sans-serif;
  width: 80%;
  height: 55px;
  margin: 4% auto;
  padding: 0 15px;
  border: 1px solid #999;
  border-radius: 5px;
  display: block;
  background: white;
}

.input1012:focus, .input1010:focus {
  border-color: #fc4c02;
  box-shadow: 0 0 0px rgba(252,76,2,0.3);
  outline: none;
}

/* Labels flotantes */
.lbly {
  position: absolute;
  left: 12%;
  top: 50%;
  transform: translateY(-50%);
  color: #8a8a8a;
  font-size: 14px;
  transition: all 0.2s;
}

.input1012:focus + .lbly,
.input1012:valid + .lbly,
.input1010:focus + .lbly,
.input1010:valid + .lbly {
  top: 25%;
  font-size: 12px;
  color: #fc4c02;
}

/* ============================
   Inputs de código (kd1/kd2)
============================ */
#kd-s, #kd-s2, #kd-s3, #kd-s4, #kd-s5, #kd-s6 {
  width: 50px;
  height: 55px;
  margin: 0; /* ✅ sin margen extra */
  text-align: center;
  font-size: 1.2rem;
  border: 1px solid #999;
  border-radius: 5px;
}

/* ============================
   Botones
============================ */
.login100-form-btn, button {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 16px;
  height: 55px;
  width: 80%;
  margin: 20px auto;
  display: block;
  border: none;
  border-radius: 10px;
  background-color: #fc4c02;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

.login100-form-btn:hover, button:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(0,0,0,0.2);
}