/* MYRION — autenticación, recuperación y consentimiento Web Push. */
#loginForm,
#RegisterForm,
#emailChangeForm,
#confirmPageContainer,
.login-frame,
.loginFrame,
.modal-content,
.form-area,
.myrion-public-content .content-box,
.myrion-public-content form {
  color: #f3f3f5 !important;
}

#loginForm fieldset,
#RegisterForm fieldset,
#emailChangeForm fieldset,
.myrion-public-content fieldset {
  border: 0 !important;
  background: transparent !important;
}

#loginForm input,
#RegisterForm input,
#emailChangeForm input,
.myrion-public-content input,
.myrion-public-content select,
.myrion-public-content textarea {
  box-sizing: border-box !important;
  min-height: 46px !important;
  border: 1px solid rgba(175,159,164,.26) !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, rgba(17,15,18,.96), rgba(4,4,5,.985)) !important;
  color: #f3f3f5 !important;
  caret-color: #ff3a48 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.03) !important;
  outline: 0 !important;
}
#loginForm input:focus,
#RegisterForm input:focus,
#emailChangeForm input:focus,
.myrion-public-content input:focus,
.myrion-public-content select:focus,
.myrion-public-content textarea:focus {
  border-color: rgba(255,38,53,.75) !important;
  box-shadow: 0 0 0 2px rgba(255,38,53,.08), inset 0 1px rgba(255,255,255,.04) !important;
}

#btnLogin,
#btnRegister,
#RecoveriPass,
.myrion-public-content button[type="submit"],
.myrion-public-content input[type="submit"] {
  min-height: 44px !important;
  border: 1px solid rgba(255,38,53,.82) !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg,#9e111d,#4f070e) !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .035em !important;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 13px rgba(255,38,53,.12) !important;
}
#btnLogin:hover,
#btnRegister:hover,
#RecoveriPass:hover,
.myrion-public-content button[type="submit"]:hover,
.myrion-public-content input[type="submit"]:hover {
  background: linear-gradient(180deg,#c21524,#680810) !important;
  box-shadow: 0 0 17px rgba(255,38,53,.24) !important;
}

.form-error,
.error-label,
fieldset.error .error-label {
  color: #ff6873 !important;
}
fieldset.error input,
fieldset.error select {
  border-color: #ff2635 !important;
}

/* Modales públicos: metal oscuro, no cyan. */
.modal,
.modal-overlay,
#loginFrame,
.loginFrame {
  --my-auth-red: #ff2635;
}
.modal-content,
.login-frame,
.loginFrame .content,
.loginFrameContent {
  border: 1px solid rgba(255,38,53,.34) !important;
  border-radius: 4px !important;
  background:
    linear-gradient(145deg, rgba(23,19,22,.985), rgba(5,5,6,.995)) !important;
  color: #f1edef !important;
  box-shadow: 0 26px 75px rgba(0,0,0,.72), 0 0 28px rgba(255,38,53,.09), inset 0 1px rgba(255,255,255,.04) !important;
}
.modal-header,
.loginFrameHeader {
  border-bottom: 1px solid rgba(255,38,53,.18) !important;
  color: #f5f1f2 !important;
  background: linear-gradient(180deg,rgba(37,29,32,.75),rgba(12,10,12,.35)) !important;
}

/* Consentimiento Web Push conservando IDs y lógica existente. */
#xerzioNotificationConsent {
  background: rgba(0,0,0,.74) !important;
  backdrop-filter: blur(8px) !important;
}
#xerzioNotificationConsent .notification-consent-card,
#xerzioNotificationConsent .xerzio-notification-card,
#xerzioNotificationConsent > div {
  border: 1px solid rgba(255,38,53,.38) !important;
  border-radius: 5px !important;
  background: linear-gradient(145deg,rgba(25,20,23,.99),rgba(5,5,6,.995)) !important;
  color: #eee9eb !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.72), 0 0 30px rgba(255,38,53,.08) !important;
}
#xerzioNotificationTitle { color: #f4f0f1 !important; }
#xerzioNotificationCopy { color: #aaa1a5 !important; }
#xerzioEnableNotifications {
  border-color: #ff2635 !important;
  background: linear-gradient(180deg,#a40e1b,#51070e) !important;
  color: #fff !important;
}
#xerzioDeclineNotifications {
  border-color: rgba(174,162,166,.24) !important;
  background: rgba(8,7,9,.85) !important;
  color: #c8c0c3 !important;
}

/* Toasts y estados de carga. */
.xerzio-toast {
  border: 1px solid rgba(255,38,53,.24) !important;
  background: rgba(8,7,9,.97) !important;
  color: #eee9eb !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.48) !important;
}
.xerzio-toast.warning { border-color: rgba(255,171,55,.35) !important; }
.xerzio-toast.error { border-color: rgba(255,38,53,.62) !important; }

@media (max-width:640px) {
  .modal-content,
  .login-frame,
  .loginFrame .content,
  .loginFrameContent {
    width: min(94vw,430px) !important;
    max-height: calc(100svh - 28px) !important;
    overflow:auto !important;
  }
}