/* ============================================
   MOBILE CSS — PWM 2.0.8 GestionCuenta208
   Estilo Bip&Drive — Embedded Mobile CSS
   Setting: display.css.customMobileStyle
   ============================================ */

/* --- PREVENT HORIZONTAL OVERFLOW --- */
html, body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  width: 100% !important;
  max-width: 100vw !important;
}

/* --- DISABLE FLEX LAYOUT (allow natural scroll) --- */
body {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
}

#wrapper {
  flex: none !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

/* --- HEADER MOBILE --- */
#header {
  width: 100% !important;
  max-width: 100vw !important;
  padding: 8px 12px !important;
  min-height: 60px !important;
  flex-wrap: wrap;
}

.enlace_logo {
  margin-top: 6px !important;
}

.enlace_logo img {
  height: 30px !important;
}

#header-right-logo {
  right: 12px !important;
}

#header-right-logo a {
  font-size: 15px !important;
}

/* --- CENTERBODY MOBILE --- */
#centerbody {
  max-width: 100% !important;
  width: auto !important;
  margin: 12px 10px !important;
  padding: 24px 16px 32px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  border: none !important;
}

/* --- TITLE --- */
#page-content-title {
  font-size: 22px !important;
  margin-bottom: 12px !important;
}

/* --- INPUTS MOBILE --- */
.inputfield,
.changepasswordfield,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea {
  width: 100% !important;
  max-width: 100% !important;
  font-size: 16px !important;
  height: 44px !important;
  padding: 7px 12px !important;
}

.tokenInput {
  width: 100% !important;
  max-width: 100% !important;
}

/* --- BUTTONS MOBILE --- */
.btn {
  width: 100% !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  padding: 10px 24px !important;
  text-align: center;
  margin-bottom: 8px !important;
}

.buttonbar {
  text-align: center !important;
  margin-top: 16px !important;
}

/* --- BUTTON ICONS (ocultar) --- */
.btn .btn-icon {
  display: none !important;
}

/* --- TYPOGRAPHY MOBILE --- */
p {
  font-size: 14px !important;
}

h1 {
  font-size: 22px !important;
}

h2 {
  font-size: 16px !important;
}

/* --- TABLES MOBILE --- */
table {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  overflow-x: auto !important;
}

/* --- CHANGE PASSWORD FORM MOBILE --- */
#changePasswordForm > table {
  width: 100% !important;
}

#changePasswordForm > table td {
  display: block !important;
  width: 100% !important;
  padding: 2px 0 !important;
}

/* Celdas del strength meter y confirmation mark — compactar */
#changePasswordForm > table td[style*="width:15%"] {
  width: 100% !important;
  text-align: center !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
}

/* Strength meter — reducir padding superior */
#strengthLabel {
  padding-top: 4px !important;
  margin-top: 0 !important;
}

#changePasswordForm > table > tbody > tr:nth-child(2) > td:nth-child(2) > div {
  padding-top: 4px !important;
}

/* Campos password con eye icon al lado — alineados al borde derecho */
#password1,
#password2 {
  width: 100% !important;
  max-width: calc(100% - 40px) !important;
  display: inline-block !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

#password1-eye-icon,
#password2-eye-icon {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 6px !important;
  cursor: pointer;
}

/* --- PASSWORD REQUIREMENTS MOBILE --- */
#PasswordRequirements {
  font-size: 13px !important;
}

#PasswordRequirements ul {
  padding-left: 18px !important;
}

/* --- LOCALE SELECTOR MOBILE --- */
#localeSelectionMenu {
  font-size: 13px !important;
}

/* --- MESSAGES MOBILE --- */
.message {
  width: 100% !important;
  max-width: 100% !important;
  font-size: 13px !important;
  padding: 10px 12px !important;
}

/* --- AGREEMENT TEXT (success page) --- */
.agreementText {
  font-size: 15px !important;
  padding: 0 8px !important;
}

/* --- FOOTER MOBILE --- */
#bipdrive-footer {
  padding: 20px 16px 12px !important;
  margin-top: 16px !important;
}

#bipdrive-footer .logo__footer {
  margin: 0 !important;
  padding-top: 0 !important;
}

#bipdrive-footer .logo__footer img {
  height: 38px !important;
  margin-bottom: 14px !important;
}

#bipdrive-footer .social {
  margin: 0 0 10px 0 !important;
}

#bipdrive-footer .social a {
  margin: 0 4px !important;
}

#bipdrive-footer .social a img {
  width: 22px !important;
  height: 22px !important;
}

#bipdrive-footer .enlaces_footer {
  margin: 0 !important;
}

#bipdrive-footer .enlaces_footer li {
  display: block !important;
  margin: 4px 0 !important;
  padding: 0 !important;
}

#bipdrive-footer .enlaces_footer a {
  font-size: 13px !important;
}

#bipdrive-footer .copy {
  margin: 10px 0 4px !important;
  font-size: 10px !important;
  color: var(--bd-white) !important;
}

/* --- WRAPPER (prevent inner overflow + reduce whitespace before footer) --- */
#wrapper {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  min-height: auto !important;
  margin-bottom: 0 !important;
}

.push {
  display: none !important;
}

/* --- HEADER BUTTONS (menu) --- */
.header-button {
  font-size: 12px !important;
  padding: 4px 12px !important;
}

/* --- TILES MOBILE (dashboard) --- */
.tile {
  width: 100% !important;
  margin-bottom: 10px !important;
}

#button-goBack { display: none !important; }
/* #button-sendReset { display: none !important; } */