/*
 * developer2@otp.com - 2026-10-21 - Pantallas de acceso de la oficina (index.php y forgot.php).
 * Teléfono: el formulario arriba y la bienvenida como franja compacta abajo.
 * Escritorio (992px o más): panel del formulario a la izquierda y la bienvenida a la derecha.
 * Campos de 16px (iOS no hace zoom al tocarlos) y botones de 48px de alto (área táctil cómoda).
 * Antes era la plantilla login-4 de Metronic: el logo SVG de 1044px sin tope desbordaba la página.
 */
body.OTP_Acceso {
  margin: 0;
  background: #ffffff;
  font-family: Poppins, Helvetica, sans-serif;
  overflow-x: hidden;
}

.OTP_AccesoCargador img {
  width: min(240px, 50vw);
  height: auto;
}

.OTP_Acceso_Pagina {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Panel del formulario */
.OTP_Acceso_Panel {
  flex: 1 0 auto; /* en el teléfono llena la pantalla y la bienvenida queda abajo, sin blanco sobrante */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 20px 20px;
  background: #ffffff;
}
.OTP_Acceso_Contenido {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.OTP_Acceso_Logo {
  display: block;
  height: auto;
  max-height: 64px;
  max-width: 80%;
  margin-bottom: 28px;
}
.OTP_Acceso_Formulario {
  width: 100%;
}
.OTP_Acceso_Titulo {
  text-align: center;
  margin-bottom: 24px;
}
.OTP_Acceso_Titulo h1 {
  font-size: 24px;
  font-weight: 600;
  color: #3f4254;
  margin: 0 0 6px;
}
.OTP_Acceso_Titulo p {
  font-size: 14px;
  color: #7e8299;
  margin: 0;
}
body.OTP_Acceso .form-group {
  margin-bottom: 18px;
}
.OTP_Acceso_Etiqueta {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #5e6278;
  margin-bottom: 6px;
}
body.OTP_Acceso .OTP_Acceso_Campo {
  font-size: 16px;
  min-height: 48px;
  height: auto;
  padding: 10px 14px;
  border: 1px solid #e4e6ef;
  border-radius: 8px;
  color: #3f4254;
  background: #ffffff;
}
body.OTP_Acceso .OTP_Acceso_Campo:focus {
  border-color: #3699ff;
  box-shadow: 0 0 0 3px rgba(54, 153, 255, 0.15);
}
.OTP_Acceso_Opciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 4px 0 20px;
}
body.OTP_Acceso .OTP_Acceso_Recordar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  cursor: pointer;
}
/* Metronic pone el cuadro de la casilla en position:absolute arriba: se centra en la etiqueta de 44px */
body.OTP_Acceso .OTP_Acceso_Recordar > span {
  top: 50%;
  transform: translateY(-50%);
}
.OTP_Acceso_Enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  color: #7e8299;
}
.OTP_Acceso_Enlace:hover,
.OTP_Acceso_Enlace:focus {
  color: #3699ff;
  text-decoration: none;
}
body.OTP_Acceso .OTP_Acceso_Boton {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
  border-radius: 8px;
}
.OTP_Acceso_Botones {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.OTP_Acceso_Pie {
  margin-top: 28px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #a1a5b7;
}

/* Bienvenida */
.OTP_Acceso_Bienvenida {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 20px;
  color: #ffffff;
  background-color: #0b0b2b;
  background-image: url(../resources/dist/assets/media/bg/bg-se.jpg);
  background-size: cover;
  background-position: center;
}
.OTP_Acceso_BienvenidaTexto h2 {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 8px;
}
.OTP_Acceso_BienvenidaTexto p {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 560px;
}
.OTP_Acceso_LogoSE {
  display: block;
  width: 140px;
  max-width: 50%;
  height: auto;
  align-self: flex-end;
}

/* Botones de forgot.php lado a lado desde 420px */
@media (min-width: 420px) {
  .OTP_Acceso_Botones {
    flex-direction: row;
  }
  .OTP_Acceso_Botones > * {
    flex: 1 1 0;
  }
}

/* Escritorio */
@media (min-width: 992px) {
  .OTP_Acceso_Pagina {
    flex-direction: row;
  }
  .OTP_Acceso_Panel {
    flex: 0 0 auto;
    width: 40%;
    min-width: 420px;
    max-width: 560px;
    padding: 48px 40px 28px;
  }
  .OTP_Acceso_Contenido {
    flex: 1 1 auto;
    justify-content: center;
  }
  .OTP_Acceso_Logo {
    max-height: 72px;
    margin-bottom: 40px;
  }
  .OTP_Acceso_Bienvenida {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    padding: 56px clamp(40px, 6vw, 120px);
  }
  .OTP_Acceso_BienvenidaTexto h2 {
    font-size: clamp(30px, 3.2vw, 48px);
    margin-bottom: 16px;
  }
  .OTP_Acceso_BienvenidaTexto p {
    font-size: 16px;
  }
  .OTP_Acceso_LogoSE {
    width: clamp(160px, 14vw, 220px);
    margin-top: 32px;
  }
}