/* ==================================================
   ANTI-FLASH HEADER (CRÍTICO)
   ================================================== */

/* Ocultar login nativo SIEMPRE antes del render */
.ms-lms-authorization,
.ms-lms-authorization-title{
  display: none !important;
}

/* Ocultar nuestros botones hasta que estén listos */
.opocamp-auth-buttons{
  opacity: 0;
  visibility: hidden;
}

/* Mostrar solo cuando el header esté preparado */
.navigation.opocamp-auth-ready .opocamp-auth-buttons{
  opacity: 1;
  visibility: visible;
  transition: opacity .15s ease;
}


/* =========================================================
   LOGIN / REGISTRO · OPoCamp (MasterStudy)
   HTML REAL: .opocamp-auth-wrapper > .masterstudy-authorization
   Rutas: /acceso y /alta
   ========================================================= */

/* ==================================================
   1) OCULTAR LOGIN NATIVO / VIEJO DEL HEADER
   SOLO cuando el usuario NO está logueado
================================================== */
body:not(.logged-in) .ms-lms-authorization,
body:not(.logged-in) .ms-lms-authorization-icon,
body:not(.logged-in) .ms-lms-authorization-title{
  display:none !important;
}

/* Ocultar enlace directo a cuenta (evita duplicados) */
body:not(.logged-in) .navigation a[href*="/cuenta-del-usuario/"]{
  display:none !important;
}


/* ==================================================
   2) BOTONES PROPIOS (header)
================================================== */
.opocamp-auth-buttons{
  display:flex !important;
  align-items:center;
  gap:12px;
  margin-left:20px;
  white-space:nowrap;
  flex-shrink:0;
}

.opocamp-auth-buttons .auth-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'Open Sans', sans-serif;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  padding:8px 14px;
  border-radius:4px;
  text-decoration:none;
  transition:all .2s ease;
  background:#fff;
  color:#2A3045;
}

.opocamp-auth-buttons .auth-btn:hover,
.opocamp-auth-buttons .auth-btn.active{
  background:#A83A65;
  color:#fff;
}

.opocamp-auth-buttons .auth-btn.logout{
  background:transparent !important;
  color:#A83A65 !important;
}

.opocamp-auth-buttons .auth-btn.logout:hover{
  background:#A83A65 !important;
  color:#fff !important;
}

@media (max-width:768px){
  .opocamp-auth-buttons{ margin-left:10px; gap:8px; }
  .opocamp-auth-buttons .auth-btn{ font-size:11px; padding:7px 10px; }
}

@media (max-width:480px){
  .opocamp-auth-buttons{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    margin:10px 0 0;
    gap:8px;
  }
  .opocamp-auth-buttons .auth-btn{
    flex:1 1 auto;
    min-width:140px;
    text-align:center;
  }
}

/* ==================================================
   3) FONDO SOLO EN /acceso y /alta
================================================== */
body.page-acceso:not(.logged-in),
body.page-alta:not(.logged-in){
  background:url("https://opocamp.com/wp-content/uploads/2024/04/Opocampbuenassisima-18-18-scaled.webp")
    no-repeat center center fixed;
  background-size:cover;
  min-height:100vh;
	overflow:hidden;
}

/* Quitar fondos heredados del tema */
body.page-acceso:not(.logged-in) #wrapper,
body.page-alta:not(.logged-in) #wrapper,
body.page-acceso:not(.logged-in) main,
body.page-alta:not(.logged-in) main{
  background:transparent !important;
}

/* ==================================================
   4) LAYOUT REAL: centrar usando .opocamp-auth-wrapper
================================================== */
body.page-acceso:not(.logged-in) .opocamp-auth-wrapper,
body.page-alta:not(.logged-in) .opocamp-auth-wrapper{
  width:100%;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:40px 20px;
  box-sizing:border-box;
}


/* ==================================================
   5) CUADRO BLANCO REAL (CARD)
================================================== */
body.page-acceso:not(.logged-in) .opocamp-auth-wrapper > .masterstudy-authorization,
body.page-alta:not(.logged-in) .opocamp-auth-wrapper > .masterstudy-authorization{
  background:#fff !important;
  width:100%;
  max-width:480px;
  padding:32px 28px;
  border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  box-sizing:border-box;
}

/* Neutralizar wrapper interno para evitar dobles fondos/paddings */
body.page-acceso:not(.logged-in) .opocamp-auth-wrapper .masterstudy-authorization__wrapper,
body.page-alta:not(.logged-in) .opocamp-auth-wrapper .masterstudy-authorization__wrapper{
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
}

/* Header centrado */
body.page-acceso:not(.logged-in) .opocamp-auth-wrapper .masterstudy-authorization__header,
body.page-alta:not(.logged-in) .opocamp-auth-wrapper .masterstudy-authorization__header{
  text-align:center;
  margin:0 0 18px 0;
}

/* ==================================================
   6) INPUTS (MasterStudy usa .masterstudy-authorization__form-input)
================================================== */
body.page-acceso:not(.logged-in) .opocamp-auth-wrapper .masterstudy-authorization__form-input,
body.page-alta:not(.logged-in) .opocamp-auth-wrapper .masterstudy-authorization__form-input{
  width:100%;
  height:42px;
  border-radius:10px;
  border:1px solid #dcdfe8;
  padding:0 14px;
  font-size:14px;
  box-sizing:border-box;
  transition:all .2s ease;
}

body.page-acceso:not(.logged-in) .opocamp-auth-wrapper .masterstudy-authorization__form-input:focus,
body.page-alta:not(.logged-in) .opocamp-auth-wrapper .masterstudy-authorization__form-input:focus{
  border-color:#A83A65;
  box-shadow:0 0 0 2px rgba(168,58,101,.15);
  outline:none;
}

/* ==================================================
   7) BOTONES PRINCIPALES
================================================== */
body.page-acceso:not(.logged-in) .opocamp-auth-wrapper a.masterstudy-button.masterstudy-button_style-primary,
body.page-alta:not(.logged-in) .opocamp-auth-wrapper a.masterstudy-button.masterstudy-button_style-primary{
  width:100% !important;
  max-width:100% !important;
  display:inline-flex !important;
  justify-content:center !important;
  align-items:center !important;
  height:46px !important;
  padding:0 18px !important;
  border-radius:999px !important;
  background:#A83A65 !important;
  border:none !important;
  box-sizing:border-box !important;
}

body.page-acceso:not(.logged-in) .opocamp-auth-wrapper a.masterstudy-button.masterstudy-button_style-primary:hover,
body.page-alta:not(.logged-in) .opocamp-auth-wrapper a.masterstudy-button.masterstudy-button_style-primary:hover{
  background:#852A4E !important;
}

/* Evitar inflado por el título interno */
body.page-acceso:not(.logged-in) .opocamp-auth-wrapper .masterstudy-button__title,
body.page-alta:not(.logged-in) .opocamp-auth-wrapper .masterstudy-button__title{
  line-height:1.2 !important;
  padding:0 !important;
  margin:0 !important;
}

/* ==================================================
   8) ACCIONES (Recordarme + botones) en columna
================================================== */
body.page-acceso:not(.logged-in) .opocamp-auth-wrapper .masterstudy-authorization__actions,
body.page-alta:not(.logged-in) .opocamp-auth-wrapper .masterstudy-authorization__actions{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:14px !important;
}

body.page-acceso:not(.logged-in) .opocamp-auth-wrapper .masterstudy-authorization__actions-remember,
body.page-alta:not(.logged-in) .opocamp-auth-wrapper .masterstudy-authorization__actions-remember{
  margin:0 !important;
  width:100%;
  justify-content:flex-start;
}

/* ==================================================
   9) SWITCH inferior limpio
================================================== */
body.page-acceso:not(.logged-in) .opocamp-auth-wrapper .masterstudy-authorization__switch-wrapper,
body.page-alta:not(.logged-in) .opocamp-auth-wrapper .masterstudy-authorization__switch-wrapper{
margin-top:16px;
padding-top:12px;
  border-top:1px solid rgba(0,0,0,.1);
  display:flex;
  flex-direction:column;
  gap:12px;
  text-align:center;
}

body.page-acceso:not(.logged-in) .opocamp-auth-wrapper .masterstudy-authorization__switch-account-link,
body.page-alta:not(.logged-in) .opocamp-auth-wrapper .masterstudy-authorization__switch-account-link{
  font-weight:700;
  color:#A83A65 !important;
  text-decoration:none;
  padding:2px 6px;
  border-radius:4px;
  transition:background-color .15s ease;
}

body.page-acceso:not(.logged-in) .opocamp-auth-wrapper .masterstudy-authorization__switch-account-link:hover,
body.page-alta:not(.logged-in) .opocamp-auth-wrapper .masterstudy-authorization__switch-account-link:hover{
  background:rgba(168,58,101,.08);
}

/* ==================================================
   10) MOSTRAR SOLO LO QUE TOCA (TU HTML TRAE TODO JUNTO)
================================================== */

/* A) EN /acceso: solo login */
body.page-acceso:not(.logged-in) #masterstudy-authorization-form-register,
body.page-acceso:not(.logged-in) #masterstudy-authorization-social-register,
body.page-acceso:not(.logged-in) [data-id="masterstudy-authorization-register-button"],
body.page-acceso:not(.logged-in) .masterstudy-authorization__gdpr,
body.page-acceso:not(.logged-in) .masterstudy-authorization__restore,
body.page-acceso:not(.logged-in) #masterstudy-authorization-restore-pass,
body.page-acceso:not(.logged-in) .masterstudy-authorization__instructor-confirm{
  display:none !important;
}

/* B) EN /alta: solo registro */
body.page-alta:not(.logged-in) #masterstudy-authorization-form-login,
body.page-alta:not(.logged-in) #masterstudy-authorization-social-login,
body.page-alta:not(.logged-in) [data-id="masterstudy-authorization-login-button"],
body.page-alta:not(.logged-in) .masterstudy-authorization__restore,
body.page-alta:not(.logged-in) #masterstudy-authorization-restore-pass,
body.page-alta:not(.logged-in) .masterstudy-authorization__instructor-confirm{
  display:none !important;
}

/* Opcional: ocultar separador en registro si el texto sale mal */
body.page-alta:not(.logged-in) .masterstudy-authorization__separator{
  display:none !important;
}

/* ==================================================
   11) RESPONSIVE
================================================== */
@media (max-width:768px){
  body.page-acceso:not(.logged-in) .opocamp-auth-wrapper,
  body.page-alta:not(.logged-in) .opocamp-auth-wrapper{
    padding:60px 15px;
  }

  body.page-acceso:not(.logged-in) .opocamp-auth-wrapper > .masterstudy-authorization,
  body.page-alta:not(.logged-in) .opocamp-auth-wrapper > .masterstudy-authorization{
    padding:30px 20px;
    border-radius:12px;
  }
}

@media (max-width:480px){
  body.page-acceso:not(.logged-in) .opocamp-auth-wrapper,
  body.page-alta:not(.logged-in) .opocamp-auth-wrapper{
    padding:45px 12px;
  }
}

/* =========================================================
   LOGIN / REGISTRO · OPoCamp (FIX DEFINITIVO)
   Activado por .opocamp-auth-wrapper
   ========================================================= */

/* 1️⃣ Fondo global CUANDO hay login */
html:has(.opocamp-auth-wrapper),
body:has(.opocamp-auth-wrapper){
  background: url("https://opocamp.com/wp-content/uploads/2024/04/Opocampbuenassisima-18-18-scaled.webp")
    no-repeat center center fixed !important;
  background-size: cover !important;
  min-height: 100vh;
}

/* Quitar fondos del tema */
body:has(.opocamp-auth-wrapper) #wrapper,
body:has(.opocamp-auth-wrapper) main{
  background: transparent !important;
}

/* 2️⃣ Layout: centrar el login */
.opocamp-auth-wrapper{
  min-height: 75vh;
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 55px 20px !important;
  box-sizing: border-box;
}

/* 3️⃣ EL CUADRO REAL (FORZADO) */
.opocamp-auth-wrapper > .masterstudy-authorization{
  background: #ffffff !important;
  width: 100% !important;
  max-width: 520px !important;
  padding: 40px 32px !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 60px rgba(0,0,0,.35) !important;
  box-sizing: border-box !important;
}

/* 4️⃣ Neutralizar wrappers internos */
.opocamp-auth-wrapper .masterstudy-authorization__wrapper{
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* 5️⃣ Header centrado */
.opocamp-auth-wrapper .masterstudy-authorization__header{
  text-align: center;
  margin-bottom: 20px;
}

/* 6️⃣ Inputs */
.opocamp-auth-wrapper .masterstudy-authorization__form-input{
  width: 100%;
  height: 46px;
  border-radius: 10px;
  border: 1px solid #dcdfe8;
  padding: 0 14px;
  font-size: 14px;
  transition: .2s ease;
}
.opocamp-auth-wrapper .masterstudy-authorization__form-input:focus{
  border-color: #A83A65;
  box-shadow: 0 0 0 2px rgba(168,58,101,.15);
  outline: none;
}

/* 7️⃣ Botones principales */
.opocamp-auth-wrapper a.masterstudy-button_style-primary{
  width: 100% !important;
  height: 46px !important;
  border-radius: 999px !important;
  background: #A83A65 !important;
  border: none !important;
}
.opocamp-auth-wrapper a.masterstudy-button_style-primary:hover{
  background: #852A4E !important;
}

/* 8️⃣ Acciones en columna */
.opocamp-auth-wrapper .masterstudy-authorization__actions{
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* 9️⃣ Switch inferior */
.opocamp-auth-wrapper .masterstudy-authorization__switch-wrapper{
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.1);
  text-align: center;
}

/* 🔟 Responsive */
@media (max-width: 768px){
  .opocamp-auth-wrapper{
    padding: 60px 15px !important;
  }
  .opocamp-auth-wrapper > .masterstudy-authorization{
    padding: 30px 20px !important;
    border-radius: 12px !important;
  }
}

@media (max-height:700px){
  body.page-acceso:not(.logged-in) .opocamp-auth-wrapper,
  body.page-alta:not(.logged-in) .opocamp-auth-wrapper{
    padding:20px 16px;
  }

  body.page-acceso:not(.logged-in) .opocamp-auth-wrapper > .masterstudy-authorization,
  body.page-alta:not(.logged-in) .opocamp-auth-wrapper > .masterstudy-authorization{
    padding:24px 20px;
  }
}
/* =========================================
   SWITCH LOGIN / REGISTRO – FINAL
   ========================================= */

/* Contenedor del switch */
.masterstudy-authorization__switch-account{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

/* Link principal del switch */
.masterstudy-authorization__switch-account-link{
  font-weight: 700 !important;
  font-size: 14px;
  color: #A83A65 !important;
  text-decoration: none !important;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}

/* Hover */
.masterstudy-authorization__switch-account-link:hover{
  background: rgba(168,58,101,.08);
  color: #852A4E !important;
}

/* Link con ID específico (Sign up) */
#masterstudy-authorization-sign-up{
  color: #A83A65 !important;
  font-weight: 700 !important;
}