/* =========================================
   INPUTS – FORZAR FONDO OSCURO SIEMPRE
========================================= */

#ru-pane-login input,
#ru-pane-register input,
#ru-pane-reset input,
input#ru-login-identifier,
input#ru-login-password,
input#ru-login-otp,
input#ru-reg-username,
input#ru-reg-email,
input#ru-reg-pass1,
input#ru-reg-pass2,
input#ru-reg-otp,
input#ru-reset-identifier,
input#ru-reset-otp,
input#ru-reset-pass1,
input#ru-reset-pass2 {
  width: 100% !important;
  box-sizing: border-box !important;

  background-color: rgba(15,23,42,0.85) !important; /* FONDO OSCURO */
  color: #ffffff !important;

  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 12px !important;

  padding: 12px 14px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;

  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;

  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Placeholder */
#ru-pane-login input::placeholder,
#ru-pane-register input::placeholder,
#ru-pane-reset input::placeholder {
  color: rgba(255,255,255,0.45) !important;
}

/* FOCUS: NO CAMBIA A BLANCO */
#ru-pane-login input:focus,
#ru-pane-register input:focus,
#ru-pane-reset input:focus,
input#ru-reg-username:focus,
input#ru-reg-email:focus,
input#ru-reg-pass1:focus,
input#ru-reg-pass2:focus {
  background-color: rgba(15,23,42,0.95) !important;
  border-color: rgba(34,197,94,0.9) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18) !important;
}

/* AUTOFILL CHROME – ESTE ERA EL CULPABLE */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 0 1000px rgba(15,23,42,0.95) inset !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* =========================================
   ESTADO TEXTO "Usuario disponible"
========================================= */

#ru-username-status {
  display: block !important;
  margin-top: 6px !important;
  font-size: 13px !important;
}

#ru-username-status.ok {
  color: #22c55e !important;
}

#ru-username-status.err {
  color: #ef4444 !important;
}

/* =========================================
   BORDE INPUT USUARIO OK / ERROR
========================================= */

input#ru-reg-username.ok {
  border-color: rgba(34,197,94,0.95) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.16) !important;
}

input#ru-reg-username.err {
  border-color: rgba(239,68,68,0.95) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.16) !important;
}

/* =========================================
   LABELS
========================================= */

#ru-pane-login label,
#ru-pane-register label,
#ru-pane-reset label {
  color: rgba(255,255,255,0.78) !important;
  font-size: 14px !important;
  margin-bottom: 6px !important;
}



/* =========================================
   candado contraseña (emoji estable)
========================================= */

.ru-passwrap{
  position: relative !important;
  width: 100% !important;
  overflow: visible !important;
}

/* espacio para el botón */
.ru-passwrap input[type="password"],
.ru-passwrap input[type="text"]{
  padding-right: 64px !important;
}

/* Botón candado */
.ru-eye-btn{
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;

  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;

  border: 1px solid rgba(255,255,255,0.22) !important;
  background: rgba(16, 185, 129, 0.20) !important;
  cursor: pointer !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;

  z-index: 50 !important;
}

/* 🔒 estado normal (contraseña oculta) */
.ru-eye-btn::before{
  content: "🔒" !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

/* 🔓 estado activo (contraseña visible) */
.ru-eye-btn[aria-pressed="true"]::before{
  content: "🔓" !important;
  opacity: 0.72 !important;
}

.ru-eye-btn:hover{
  border-color: rgba(255,255,255,0.35) !important;
  background: rgba(16, 185, 129, 0.28) !important;
}

.ru-eye-btn:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.16) !important;
}

/* por si el JS mete svg viejo */
.ru-eye-btn svg{
  display: none !important;
}


/* Ajuste visual fino SOLO del candado */
.ru-eye-btn{
  background: rgba(16, 185, 129, 0.14) !important; /* antes 0.20 */
  border: 1px solid rgba(255,255,255,0.18) !important;
}

/* Emoji más sutil */
.ru-eye-btn::before{
  opacity: 0.72 !important;
  filter: saturate(0.9) brightness(0.95);
}

/* Hover elegante, no tan fuerte */
.ru-eye-btn:hover{
  background: rgba(16, 185, 129, 0.22) !important;
  border-color: rgba(255,255,255,0.28) !important;
}

/* Focus más discreto */
.ru-eye-btn:focus{
  box-shadow: 0 0 0 2px rgba(34,197,94,0.12) !important;
}