
:root{
  --auth-blue:#0f3b82;
  --auth-accent:#0878e8;
  --auth-line:#cddcf0;
  --auth-soft:#eaf4ff;
  --auth-text:#111827;
  --auth-sub:#4b5563;
  --auth-bg:#f7fbff;
  --auth-white:rgba(255,255,255,.74);
}

*{box-sizing:border-box}

body.wmp-auth-page{
  margin:0!important;
  min-height:100vh!important;
  padding:0 0 34px!important;
  color:var(--auth-text)!important;
  background:linear-gradient(135deg,#f5fbff 0%,#edf8f6 54%,#fff9f3 100%)!important;
  font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif!important;
}

.wmp-auth-page .auth-nowbar{
  position:sticky;
  top:0;
  z-index:50;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  border-bottom:1px solid #bfd2e9;
  background:linear-gradient(180deg,#eef6ff,#e4f1ff);
  color:#0d3478;
  font-size:18px;
  font-weight:600;
  letter-spacing:.01em;
  box-shadow:0 1px 0 rgba(255,255,255,.75) inset;
}

.wmp-auth-page .wmp-auth-card,
.wmp-auth-page .signup-card.wmp-auth-card{
  width:min(94vw,760px)!important;
  max-width:760px!important;
  min-height:0!important;
  height:auto!important;
  margin:34px auto 0!important;
  padding:38px 46px 34px!important;
  border:1px solid var(--auth-line)!important;
  border-radius:12px!important;
  background:var(--auth-white)!important;
  box-shadow:0 12px 34px rgba(49,82,120,.10)!important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--auth-text)!important;
  text-align:center!important;
  overflow:visible!important;
}

.wmp-auth-page .wmp-auth-wide{
  width:min(94vw,960px)!important;
  max-width:960px!important;
}

.wmp-auth-page .series{
  margin:0 0 14px!important;
  color:var(--auth-blue)!important;
  font-size:.84rem!important;
  font-weight:700!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
}

.wmp-auth-page .icon{
  width:72px!important;
  height:72px!important;
  margin:0 auto 18px!important;
  padding:10px!important;
  border:1px solid #c4d8ed!important;
  border-radius:10px!important;
  background:linear-gradient(145deg,#eef7ff,#dcecff)!important;
  box-shadow:none!important;
}

.wmp-auth-page .icon img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}

.wmp-auth-page h1{
  margin:8px auto 22px!important;
  max-width:760px!important;
  color:#123d83!important;
  font-size:clamp(1.7rem,3vw,2.35rem)!important;
  line-height:1.16!important;
  font-weight:650!important;
  letter-spacing:.005em!important;
  text-align:center!important;
}

.wmp-auth-page .muted{
  color:var(--auth-sub)!important;
}

.wmp-auth-page .signup-copy{
  max-width:780px!important;
  margin:0 auto!important;
  color:#263445!important;
  line-height:1.68!important;
  text-align:left!important;
}

.wmp-auth-page .signup-copy p,
.wmp-auth-page .signup-copy li,
.wmp-auth-page .signup-box > p,
.wmp-auth-page .privacy-note{
  color:#263445!important;
  text-align:justify!important;
  text-justify:inter-word!important;
  hyphens:auto!important;
}

.wmp-auth-page .signup-copy h2,
.wmp-auth-page .signup-box h2{
  margin:36px 0 18px!important;
  color:#123d83!important;
  font-size:1.38rem!important;
  line-height:1.25!important;
  font-weight:650!important;
  text-align:center!important;
}

.wmp-auth-page .signup-copy h3{
  margin:24px 0 10px!important;
  color:#173f80!important;
  font-size:1.04rem!important;
  font-weight:650!important;
  text-align:left!important;
}

.wmp-auth-page .review-steps{
  display:grid!important;
  gap:9px!important;
  margin:17px 0 24px!important;
  padding-left:27px!important;
  color:#263445!important;
}

.wmp-auth-page .qr-wrap{
  width:min(100%,270px)!important;
  margin:26px auto 28px!important;
}

.wmp-auth-page .qr-wrap img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  border:1px solid #c9d9e9!important;
  border-radius:8px!important;
  background:#fff!important;
  padding:7px!important;
  box-shadow:0 7px 20px rgba(35,69,108,.10)!important;
}

.wmp-auth-page .review-separator{
  width:100%!important;
  margin:34px 0 26px!important;
  border:0!important;
  border-top:1px solid var(--auth-line)!important;
}

.wmp-auth-page .qr-note{
  margin-top:0!important;
  padding:22px 24px!important;
  border:1px solid #d4e2ef!important;
  border-radius:8px!important;
  background:rgba(237,246,255,.58)!important;
}

.wmp-auth-page .qr-note sup,
.wmp-auth-page .signup-copy sup a{
  color:#0067d8!important;
}

.wmp-auth-page .signup-box{
  max-width:700px!important;
  margin:38px auto 8px!important;
  padding:28px 30px!important;
  border:1px solid #c7d9eb!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,rgba(239,247,255,.86),rgba(255,255,255,.76))!important;
  box-shadow:none!important;
}

.wmp-auth-page .signup-box h2{
  margin-top:0!important;
}

.wmp-auth-page form{
  display:grid!important;
  gap:12px!important;
  max-width:470px!important;
  margin:24px auto 0!important;
}

.wmp-auth-page input{
  width:100%!important;
  min-height:48px!important;
  padding:11px 14px!important;
  border:1px solid #aebfd1!important;
  border-radius:6px!important;
  outline:none!important;
  background:#fff!important;
  color:#16202e!important;
  font:inherit!important;
  text-align:left!important;
  box-shadow:0 1px 1px rgba(0,0,0,.02) inset!important;
}

.wmp-auth-page input:focus{
  border-color:#4a91d8!important;
  box-shadow:0 0 0 3px rgba(8,120,232,.12)!important;
}

.wmp-auth-page button,
.wmp-auth-page .button-link{
  min-height:46px!important;
  padding:10px 18px!important;
  border:1px solid #0c69c8!important;
  border-radius:6px!important;
  background:linear-gradient(180deg,#1989ee,#0872d7)!important;
  color:#fff!important;
  font:inherit!important;
  font-weight:650!important;
  text-decoration:none!important;
  cursor:pointer!important;
  box-shadow:0 1px 2px rgba(0,77,160,.16)!important;
}

.wmp-auth-page button:hover,
.wmp-auth-page .button-link:hover{
  background:linear-gradient(180deg,#2997f2,#0a78df)!important;
}

.wmp-auth-page form + form{
  margin-top:10px!important;
}

.wmp-auth-page form + form button{
  border-color:#b8c9da!important;
  background:rgba(255,255,255,.86)!important;
  color:#17457d!important;
  box-shadow:none!important;
}

.wmp-auth-page .message{
  max-width:560px!important;
  margin:18px auto!important;
  padding:13px 16px!important;
  border:1px solid #cbdceb!important;
  border-radius:7px!important;
  background:#eef7ff!important;
  color:#204b78!important;
  text-align:center!important;
}

.wmp-auth-page .message.error,
.wmp-auth-page .error{
  border-color:#e3b5b5!important;
  background:#fff1f1!important;
  color:#8d2525!important;
}

.wmp-auth-page .checking-message{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  color:#125a9f!important;
  font-weight:600!important;
}

.wmp-auth-page .checking-message[hidden]{
  display:none!important;
}

.wmp-auth-page .rotating-dots i{
  background:#0878e8!important;
}

.wmp-auth-page .privacy-note,
.wmp-auth-page .small-text{
  max-width:560px!important;
  margin:15px auto 0!important;
  color:#5c6876!important;
  font-size:.84rem!important;
  line-height:1.5!important;
}

.wmp-auth-page .confirmation-card{
  max-width:720px!important;
}

.wmp-auth-page .confirmation-message{
  max-width:610px!important;
  padding:20px 22px!important;
  text-align:left!important;
  line-height:1.65!important;
}

.wmp-auth-page .confirmation-message p{
  color:#263445!important;
  text-align:left!important;
}

.wmp-auth-page footer{
  margin-top:30px!important;
  padding-top:18px!important;
  border-top:1px solid #d5e2ef!important;
  color:#0062c7!important;
  font-size:.82rem!important;
  text-align:center!important;
}

.wmp-auth-page .session-notice-overlay{
  background:rgba(219,234,248,.72)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}

.wmp-auth-page .session-notice-card{
  border:1px solid #bfd2e6!important;
  background:rgba(255,255,255,.96)!important;
  color:#172232!important;
  box-shadow:0 18px 55px rgba(45,74,108,.16)!important;
}

.wmp-auth-page .session-notice-card h2{
  color:#123d83!important;
}

.wmp-auth-page .session-notice-card p{
  color:#425267!important;
}

.wmp-auth-page .session-notice-icon{
  background:linear-gradient(145deg,#eaf5ff,#cfe8ff)!important;
  color:#0878e8!important;
  box-shadow:none!important;
}

@media(max-width:700px){
  .wmp-auth-page .auth-nowbar{
    min-height:52px;
    font-size:16px;
  }

  .wmp-auth-page .wmp-auth-card,
  .wmp-auth-page .signup-card.wmp-auth-card{
    width:calc(100% - 20px)!important;
    margin:18px auto 0!important;
    padding:26px 18px 24px!important;
    border-radius:9px!important;
  }

  .wmp-auth-page h1{
    font-size:1.6rem!important;
  }

  .wmp-auth-page .signup-copy{
    line-height:1.6!important;
  }

  .wmp-auth-page .signup-copy h2,
  .wmp-auth-page .signup-box h2{
    font-size:1.24rem!important;
  }

  .wmp-auth-page .signup-box{
    padding:22px 16px!important;
  }

  .wmp-auth-page .qr-note{
    padding:18px 16px!important;
  }
}


/* Acceso visible a la página de Registro */
.wmp-auth-page .register-entry{
  max-width:470px;
  margin:22px auto 0;
  padding-top:18px;
  border-top:1px solid #d5e2ef;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  color:#516173;
  font-size:.92rem;
}
.wmp-auth-page .register-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:7px 13px;
  border:1px solid #b8c9da;
  border-radius:6px;
  background:rgba(255,255,255,.88);
  color:#17457d;
  font-weight:650;
  text-decoration:none;
}
.wmp-auth-page .register-link:hover{
  background:#eef6ff;
}


/* ÚNICO CAMBIO: nombre del álbum negro, negrita y cursiva en Registro */
.wmp-auth-page .signup-box .signup-album-name,
.wmp-auth-page .signup-box .signup-album-name strong{
  color:#000 !important;
  font-weight:700 !important;
  font-style:italic !important;
}


/* Email ya registrado: aviso y dos opciones dentro del propio Registro */
.wmp-auth-page .existing-subscriber-message{
  max-width:620px!important;
  padding:20px 22px!important;
  border-color:#b9d4ee!important;
  background:#f0f7ff!important;
}
.wmp-auth-page .existing-subscriber-message > strong{
  display:block;
  margin-bottom:4px;
  color:#123d83;
  font-size:1.08rem;
}
.wmp-auth-page .existing-subscriber-message > span{
  display:block;
  margin-bottom:10px;
  color:#25384d;
  font-weight:650;
  word-break:break-word;
}
.wmp-auth-page .existing-subscriber-message p{
  margin:8px 0 16px!important;
  color:#425267!important;
  text-align:center!important;
}
.wmp-auth-page .existing-subscriber-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.wmp-auth-page .existing-access-button,
.wmp-auth-page .existing-other-button{
  width:auto!important;
  min-width:190px!important;
  min-height:44px!important;
  margin:0!important;
}
.wmp-auth-page .existing-other-button{
  border-color:#b8c9da!important;
  background:rgba(255,255,255,.92)!important;
  color:#17457d!important;
  box-shadow:none!important;
}
.wmp-auth-page .existing-other-button:hover{
  background:#eef6ff!important;
}

/* Títulos de los dos primeros párrafos del Registro */
.signup-copy .signup-book-title,
.signup-copy .signup-book-title strong{
  color:#000 !important;
  font-weight:700 !important;
  font-style:italic !important;
}


/* Email ya registrado: acceso directo con el mismo email */
.wmp-auth-page .existing-access-form{
  display:block!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
}
.wmp-auth-page .existing-access-form .existing-access-button{
  width:auto!important;
  min-width:190px!important;
  margin:0!important;
}


/* Restaurar aspecto original del campo email: claro con texto oscuro */
.wmp-auth-page input[type="email"],
.wmp-auth-page input[type="email"]:focus,
.wmp-auth-page input[type="email"]:active{
  background:#fff !important;
  color:#1f2d3d !important;
  -webkit-text-fill-color:#1f2d3d !important;
  caret-color:#1f2d3d !important;
}

.wmp-auth-page input[type="email"]:-webkit-autofill,
.wmp-auth-page input[type="email"]:-webkit-autofill:hover,
.wmp-auth-page input[type="email"]:-webkit-autofill:focus,
.wmp-auth-page input[type="email"]:-webkit-autofill:active{
  -webkit-text-fill-color:#1f2d3d !important;
  caret-color:#1f2d3d !important;
  -webkit-box-shadow:0 0 0 1000px #fff inset !important;
  box-shadow:0 0 0 1000px #fff inset !important;
  transition:background-color 9999s ease-out 0s;
}


/* Cancelación de suscripción */
.wmp-auth-page .register-entry{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.unsubscribe-modal[hidden]{
  display:none!important;
}

.unsubscribe-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(7,31,58,.38);
  backdrop-filter:blur(2px);
}

.unsubscribe-card{
  position:relative;
  width:min(460px,100%);
  box-sizing:border-box;
  padding:28px 26px 24px;
  border:1px solid #c7ddea;
  border-radius:14px;
  background:#fff;
  box-shadow:0 18px 55px rgba(6,55,92,.20);
  text-align:center;
  color:#163c60;
}

.unsubscribe-card h2{
  margin:0 28px 14px;
  color:#005fc9;
  font-size:22px;
}

.unsubscribe-card p{
  margin:0 0 18px;
  line-height:1.5;
}

.unsubscribe-card form{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  max-width:none!important;
  margin:0!important;
}

.unsubscribe-card input[type="email"]{
  width:100%;
  box-sizing:border-box;
  background:#fff!important;
  color:#1f2d3d!important;
  -webkit-text-fill-color:#1f2d3d!important;
}

.unsubscribe-card #unsubscribeSubmit{
  width:100%;
}

.unsubscribe-close{
  position:absolute;
  top:9px;
  right:11px;
  width:32px!important;
  height:32px!important;
  min-height:32px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#476783!important;
  font-size:25px!important;
  line-height:32px!important;
}

#unsubscribeMessage{
  margin-top:14px;
}

@media(max-width:600px){
  .unsubscribe-modal{
    padding:14px;
  }
  .unsubscribe-card{
    padding:25px 18px 20px;
  }
}




/* V7 — CANCELAR SUSCRIPCIÓN: posición y estados definitivos */
.wmp-auth-page .register-entry{
  gap:0 !important;
}

.wmp-auth-page .unsubscribe-entry-button{
  appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:22px 0 0 !important;
  padding:7px 13px !important;

  /* Estado normal: como estaba, sin recuadro */
  border:1px solid transparent !important;
  border-radius:6px !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#005fc9 !important;
  font:inherit !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  text-decoration:none !important;
  cursor:pointer !important;
}

/* Al pasar, enfocar o pulsar: mismo recuadro que REGISTRARME */
.wmp-auth-page .unsubscribe-entry-button:hover,
.wmp-auth-page .unsubscribe-entry-button:focus-visible,
.wmp-auth-page .unsubscribe-entry-button:active{
  min-height:38px !important;
  padding:7px 13px !important;
  border:1px solid #b8c9da !important;
  border-radius:6px !important;
  background:#eef6ff !important;
  color:#17457d !important;
  box-shadow:none !important;
  outline:none !important;
}


/* V8 — disposición de REGISTRARME */
@media (min-width:721px){
  .wmp-auth-page .register-entry{
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px !important;
  }

  .wmp-auth-page .register-entry > span,
  .wmp-auth-page .register-entry > .register-link{
    margin:0 !important;
  }

  /* CANCELAR SUSCRIPCIÓN permanece debajo, como en la versión anterior */
  .wmp-auth-page .register-entry .unsubscribe-entry-button{
    flex-basis:100% !important;
    margin-top:22px !important;
  }
}

@media (max-width:720px){
  .wmp-auth-page .register-entry{
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
  }

  .wmp-auth-page .register-entry > .register-link{
    margin-top:10px !important;
  }

  .wmp-auth-page .register-entry .unsubscribe-entry-button{
    margin-top:22px !important;
  }
}
