/*
 * MYRION — superficies públicas globales.
 *
 * Esta capa se carga en todas las páginas HTML del portal cuando el tema activo
 * es xerzio-infernal-universe. No cambia contratos de login, registro, sesión,
 * Web Push ni endpoints; sólo unifica fondo, formularios, modales y contenido.
 */

html,
body {
  min-height: 100%;
  background-color: #030303 !important;
}

body {
  position: relative;
  color: #f4f0f1 !important;
  background-image:
    linear-gradient(180deg, rgba(2, 2, 3, .34), rgba(2, 2, 3, .76)),
    radial-gradient(circle at 50% 16%, rgba(180, 0, 12, .14), transparent 35%),
    url("../images/background-desktop.webp") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 20%, transparent 0 18%, rgba(0, 0, 0, .12) 52%, rgba(0, 0, 0, .72) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .42), transparent 28% 72%, rgba(0, 0, 0, .42));
}

body::after {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 50% 0, rgba(255, 28, 40, .16), transparent 34%);
  mix-blend-mode: screen;
}

#bodyWrapper,
.page-wrapper,
#content,
.footer,
.modal,
.mobileMenu {
  position: relative;
  z-index: 1;
}

/* Contenido interior: una misma lectura visual para legales, cuenta y recovery. */
.page-wrapper,
#content {
  color: #ddd6d8;
}

.page-wrapper .content-wrapper,
#content > div,
.text-page-container,
.content-box,
.page-content,
.panel,
.card {
  border-color: rgba(255, 53, 64, .22) !important;
}

.text-page-container,
.content-box,
.page-content,
.panel,
.card,
.modal-content {
  background:
    linear-gradient(145deg, rgba(24, 17, 19, .94), rgba(7, 6, 8, .97)) !important;
  border: 1px solid rgba(255, 53, 64, .28) !important;
  color: #e8e1e3 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    inset 0 0 46px rgba(255, 22, 34, .025),
    0 24px 70px rgba(0, 0, 0, .62),
    0 0 24px rgba(255, 22, 34, .06) !important;
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.text-page-container {
  width: min(760px, calc(100% - 32px));
  max-width: 760px !important;
  margin: clamp(28px, 6vh, 72px) auto !important;
  overflow: hidden;
  border-radius: 4px;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}

.text-page-container .text-page-content {
  padding: 1px !important;
  border-top: 0 !important;
}

.text-page-container .text-page-content .text-content {
  padding: clamp(24px, 5vw, 48px) !important;
  color: #c9bec1 !important;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 34, 46, .075), transparent 34%),
    rgba(4, 4, 5, .48) !important;
}

.text-page-container h1,
.text-page-container h2,
.text-page-container h3,
.text-page-container .form-title,
.page-wrapper h1,
.page-wrapper h2,
.page-wrapper h3,
.modal-title {
  color: #f5f1f2 !important;
  font-family: "Cinzel", "Trajan Pro", Georgia, serif !important;
  letter-spacing: .055em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .85), 0 0 18px rgba(255, 36, 48, .08);
}

.text-page-container h3,
.text-page-container .form-title {
  border-bottom: 1px solid rgba(255, 50, 62, .18);
  padding-bottom: 14px;
}

/* Formularios del login, registro, recuperación, cuenta y configuración. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
select,
textarea,
.form-control,
.text-page-container .form-area input {
  box-sizing: border-box;
  min-height: 42px;
  border: 1px solid rgba(170, 143, 148, .28) !important;
  border-radius: 3px !important;
  outline: 0 !important;
  color: #f4edef !important;
  background:
    linear-gradient(180deg, rgba(19, 15, 17, .92), rgba(6, 5, 7, .94)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

input::placeholder,
textarea::placeholder {
  color: #746a6d !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.text-page-container .form-area input:focus {
  border-color: rgba(255, 51, 64, .72) !important;
  color: #fff !important;
  background: rgba(10, 7, 9, .98) !important;
  box-shadow: inset 0 0 18px rgba(255, 30, 43, .05), 0 0 0 2px rgba(255, 36, 48, .08), 0 0 18px rgba(255, 26, 38, .08) !important;
}

input[disabled],
input[readonly],
select[disabled],
textarea[disabled] {
  opacity: .64;
  color: #a49a9d !important;
}

label,
legend,
fieldset {
  color: #c9bec1 !important;
}

/* Botones: metal oscuro + borde de energía roja. */
.btn,
button,
input[type="submit"],
input[type="button"],
.text-page-container .form-area .btnSubmit,
a.btnSubmit {
  border: 1px solid rgba(255, 51, 63, .52) !important;
  border-radius: 3px !important;
  color: #f8f3f4 !important;
  background:
    linear-gradient(180deg, rgba(111, 12, 20, .92), rgba(43, 4, 9, .96)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -9px 22px rgba(0,0,0,.20), 0 0 14px rgba(255, 23, 36, .10) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.text-page-container .form-area .btnSubmit:hover,
a.btnSubmit:hover {
  border-color: rgba(255, 82, 92, .9) !important;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(151, 18, 27, .96), rgba(62, 5, 12, .98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 22px rgba(255, 25, 39, .20) !important;
  transform: translateY(-1px);
}

.btn:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
a.btnSubmit:active {
  transform: translateY(0);
}

/* Mensajes y validación. */
.alert,
.form-error,
.form-success,
.error-label,
.message,
.notice {
  border-radius: 3px !important;
}

.form-error,
.alert-danger,
.alert-error {
  border: 1px solid rgba(255, 55, 66, .52) !important;
  color: #ff9097 !important;
  background: rgba(126, 7, 16, .22) !important;
}

.form-success,
.alert-success {
  border: 1px solid rgba(99, 198, 118, .32) !important;
  color: #a8e8b5 !important;
  background: rgba(25, 91, 42, .20) !important;
}

/* Modales de iniciar sesión, registro y confirmaciones. */
.modal-backdrop,
.blocker {
  background: rgba(0, 0, 0, .82) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.modal-content,
.modal-container,
.modal-window,
.login-form,
.register-form {
  border-color: rgba(255, 50, 63, .38) !important;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 29, 43, .09), transparent 30%),
    linear-gradient(145deg, rgba(25, 17, 20, .98), rgba(5, 5, 7, .99)) !important;
  color: #e7dfe1 !important;
}

.modal-header,
.modal-footer {
  border-color: rgba(255, 49, 61, .16) !important;
}

.modal a,
.page-wrapper a,
#content a {
  color: #ff6f78;
}

.modal a:hover,
.page-wrapper a:hover,
#content a:hover {
  color: #ff9ba2;
}

/* Tablas y bloques de información conservan la funcionalidad legacy. */
table {
  border-color: rgba(255, 55, 67, .18) !important;
  color: #ddd5d7 !important;
  background: rgba(7, 6, 8, .78) !important;
}

thead,
th {
  color: #f7f1f2 !important;
  background: rgba(94, 9, 16, .28) !important;
}

td,
th {
  border-color: rgba(255, 50, 62, .13) !important;
}

tr:hover td {
  background: rgba(255, 33, 46, .035);
}

/* Recuperación/legales muy largos: el fondo nunca debe dejar zonas blancas. */
.row,
.container,
.container-fluid,
.content-wrapper {
  background-color: transparent !important;
}

hr {
  border-color: rgba(255, 55, 67, .18) !important;
}

@media (max-width: 1024px) {
  body {
    background-image:
      linear-gradient(180deg, rgba(2, 2, 3, .38), rgba(2, 2, 3, .78)),
      radial-gradient(circle at 50% 15%, rgba(180, 0, 12, .14), transparent 34%),
      url("../images/background-tablet.webp") !important;
  }
}

@media (max-width: 640px) {
  body {
    background-image:
      linear-gradient(180deg, rgba(2, 2, 3, .42), rgba(2, 2, 3, .82)),
      radial-gradient(circle at 50% 12%, rgba(180, 0, 12, .14), transparent 34%),
      url("../images/background-mobile.webp") !important;
    background-attachment: scroll !important;
  }

  .text-page-container {
    width: calc(100% - 20px);
    margin: 18px auto 28px !important;
    clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
  }

  .text-page-container .text-page-content .text-content {
    padding: 20px 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}