/* =========================================================
   MODALES DE ACCESO, RECUPERACION Y CAMBIO DE CONTRASENA
   Hoja autocontenida: no depende de la paleta de portada.css.
   ========================================================= */

.fr-authModal{
  --auth-ink:#252821;
  --auth-brown:#3d4b37;
  --auth-brown-dark:#171915;
  --auth-terra:#7a8c6e;
  --auth-terra-dark:#5f7154;
  --auth-muted:#74786f;
  --auth-muted-light:#92978e;
  --auth-line:#e4e7df;
  --auth-cream:#f5f7f3;
  --auth-paper:#ffffff;
}

.fr-authModal,
.fr-authModal *{
  box-sizing:border-box !important;
}


/* OVERLAY
--------------------------------------------------------- */

.fr-authModal.fr-loginOverlay{
  position:fixed !important;
  inset:0 !important;

  display:none !important;
  place-items:center !important;

  padding:20px !important;

  background:rgba(23,25,21,.72) !important;

  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;

  z-index:99999 !important;
}

.fr-authModal.fr-loginOverlay.is-open{
  display:grid !important;
}


/* BOX
--------------------------------------------------------- */

.fr-authModal .fr-loginBox{
  position:relative !important;

  width:100% !important;
  max-width:500px !important;
  max-height:calc(100vh - 40px) !important;

  margin:0 !important;

  padding:32px 38px 30px !important;

  background:var(--auth-paper) !important;

  border:1px solid var(--auth-line) !important;
  border-radius:24px !important;

  box-shadow:0 30px 80px rgba(23,25,21,.32) !important;

  overflow:auto !important;

  font-family:Manrope, Arial, Helvetica, sans-serif !important;
}


/* CLOSE
--------------------------------------------------------- */

.fr-authModal .fr-loginClose{
  position:absolute !important;

  top:18px !important;
  right:18px !important;

  z-index:10 !important;

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

  width:38px !important;
  height:38px !important;

  margin:0 !important;
  padding:0 !important;

  border:1px solid var(--auth-line) !important;
  border-radius:11px !important;

  background:#fff !important;

  color:var(--auth-muted) !important;

  font-family:Arial, sans-serif !important;
  font-size:25px !important;
  font-weight:300 !important;
  line-height:1 !important;

  text-decoration:none !important;

  cursor:pointer !important;

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

.fr-authModal .fr-loginClose:hover{
  border-color:var(--auth-terra) !important;
  background:var(--auth-cream) !important;
  color:var(--auth-terra-dark) !important;
}


/* BRAND
--------------------------------------------------------- */

.fr-authModal .fr-loginBrand{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;

  width:100% !important;

  margin:0 0 24px !important;
  padding:0 45px !important;
}

.fr-authModal .fr-loginBrand img{
  display:block !important;

  width:auto !important;
  height:auto !important;

  max-width:235px !important;
  max-height:100px !important;

  margin:0 auto !important;
  padding:0 !important;

  border:0 !important;
}


/* HEADER
--------------------------------------------------------- */

.fr-authModal .fr-loginHeader{
  margin:0 0 26px !important;
  padding:0 !important;

  text-align:center !important;
}

.fr-authModal .fr-loginHeader h3{
  margin:0 !important;
  padding:0 !important;

  color:var(--auth-brown-dark) !important;

  font-family:Manrope, Arial, sans-serif !important;
  font-size:28px !important;
  font-weight:700 !important;
  line-height:1.15 !important;

  text-align:center !important;
}

.fr-authModal .fr-loginHeader p{
  max-width:390px !important;

  margin:10px auto 0 !important;
  padding:0 !important;

  color:var(--auth-muted) !important;

  font-family:Manrope, Arial, sans-serif !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:1.5 !important;

  text-align:center !important;
}


/* FORM
--------------------------------------------------------- */

.fr-authModal .fr-loginForm{
  display:grid !important;

  width:100% !important;

  gap:12px !important;

  margin:0 !important;
  padding:0 !important;
}


/* FIELD
--------------------------------------------------------- */

.fr-authModal .fr-loginField{
  position:relative !important;

  display:block !important;

  width:100% !important;

  margin:0 !important;
  padding:0 !important;
}

.fr-authModal .fr-loginField input{
  display:block !important;

  width:100% !important;
  height:54px !important;

  margin:0 !important;

  padding:0 16px 0 48px !important;

  border:1px solid var(--auth-line) !important;
  border-radius:10px !important;

  background:#ffffff !important;

  color:var(--auth-ink) !important;

  font-family:Manrope, Arial, sans-serif !important;
  font-size:15px !important;
  font-weight:400 !important;

  line-height:normal !important;

  outline:none !important;

  box-shadow:none !important;

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

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

.fr-authModal .fr-loginField input::placeholder{
  color:var(--auth-muted-light) !important;

  opacity:1 !important;

  font-weight:400 !important;
}

.fr-authModal .fr-loginField input:focus{
  border-color:var(--auth-terra) !important;

  box-shadow:0 0 0 3px rgba(95,113,84,.16) !important;
}

.fr-authModal .fr-loginField--password input{
  padding-right:54px !important;
}

.fr-authModal .fr-passwordToggle{
  position:absolute !important;
  z-index:4 !important;
  top:50% !important;
  right:10px !important;
  left:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:36px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:9px !important;
  background:transparent !important;
  color:var(--auth-muted) !important;
  font-size:16px !important;
  line-height:1 !important;
  transform:translateY(-50%) !important;
  cursor:pointer !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}

.fr-authModal .fr-passwordToggle:hover,
.fr-authModal .fr-passwordToggle:focus-visible{
  background:var(--auth-cream) !important;
  color:var(--auth-terra-dark) !important;
  outline:none !important;
  box-shadow:0 0 0 2px rgba(95,113,84,.18) !important;
}


/* FIELD ICON
--------------------------------------------------------- */

.fr-authModal .fr-loginFieldIcon{
  position:absolute !important;

  left:17px !important;
  top:50% !important;

  z-index:3 !important;

  display:block !important;

  width:19px !important;
  height:19px !important;

  margin:0 !important;
  padding:0 !important;

  transform:translateY(-50%) !important;

  color:var(--auth-muted) !important;

  pointer-events:none !important;
}

.fr-authModal .fr-loginFieldIcon svg{
  display:block !important;

  width:19px !important;
  height:19px !important;

  margin:0 !important;
  padding:0 !important;

  fill:currentColor !important;
}


/* SUBMIT
--------------------------------------------------------- */

.fr-authModal .fr-loginSubmit{
  display:block !important;

  width:100% !important;
  height:52px !important;

  margin:4px 0 0 !important;
  padding:0 20px !important;

  border:0 !important;
  border-radius:13px !important;

  background:var(--auth-terra-dark) !important;

  color:#ffffff !important;

  font-family:Manrope, Arial, sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;

  line-height:52px !important;

  text-align:center !important;
  text-transform:uppercase !important;

  letter-spacing:.4px !important;

  cursor:pointer !important;

  box-shadow:0 10px 24px rgba(95,113,84,.24) !important;

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

  transition:.2s ease !important;
}

.fr-authModal .fr-loginSubmit:hover{
  background:var(--auth-brown-dark) !important;

  transform:translateY(-1px) !important;
}

.fr-authModal .fr-loginSubmit:disabled{
  opacity:.66 !important;
  cursor:wait !important;
  transform:none !important;
}


/* DIVIDER
--------------------------------------------------------- */

.fr-authModal .fr-loginDivider{
  display:flex !important;
  align-items:center !important;

  width:100% !important;

  gap:13px !important;

  margin:9px 0 !important;
  padding:0 !important;
}

.fr-authModal .fr-loginDivider::before,
.fr-authModal .fr-loginDivider::after{
  content:"" !important;

  display:block !important;

  flex:1 1 auto !important;

  height:1px !important;

  background:var(--auth-line) !important;
}

.fr-authModal .fr-loginDivider span{
  display:block !important;

  margin:0 !important;
  padding:0 !important;

  color:var(--auth-muted-light) !important;

  font-family:Arial, sans-serif !important;
  font-size:11px !important;
  font-weight:600 !important;

  line-height:1 !important;
}


/* ACTIONS
--------------------------------------------------------- */

.fr-authModal .fr-loginActions{
  display:grid !important;

  grid-template-columns:1fr 1fr !important;

  gap:10px !important;

  width:100% !important;

  margin:0 !important;
  padding:0 !important;
}


/* ACTION LINK
--------------------------------------------------------- */

.fr-authModal .fr-loginAction,
.fr-authModal .fr-loginAction:link,
.fr-authModal .fr-loginAction:visited,
.fr-authModal .fr-loginAction:active{
  display:flex !important;
  align-items:center !important;

  width:100% !important;
  min-width:0 !important;
  min-height:68px !important;

  gap:11px !important;

  margin:0 !important;
  padding:12px 13px !important;

  border:1px solid var(--auth-line) !important;
  border-radius:13px !important;

  background:#fff !important;

  color:var(--auth-brown-dark) !important;

  font-family:Arial, sans-serif !important;

  text-decoration:none !important;
  text-transform:none !important;

  box-shadow:none !important;

  transition:.2s ease !important;
}

.fr-authModal .fr-loginAction:hover{
  background:var(--auth-cream) !important;

  border-color:var(--auth-terra) !important;

  color:var(--auth-terra-dark) !important;

  text-decoration:none !important;

  transform:translateY(-1px) !important;
}


/* ACTION ICON
--------------------------------------------------------- */

.fr-authModal .fr-loginActionIcon{
  display:flex !important;

  flex:0 0 34px !important;

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

  width:34px !important;
  height:34px !important;

  margin:0 !important;
  padding:0 !important;

  border-radius:50% !important;

  background:#edf1ea !important;

  color:var(--auth-terra-dark) !important;

  font-family:Arial, sans-serif !important;
  font-size:18px !important;
  font-weight:600 !important;

  line-height:1 !important;
}


/* ACTION TEXT
--------------------------------------------------------- */

.fr-authModal .fr-loginActionText{
  display:block !important;

  min-width:0 !important;

  margin:0 !important;
  padding:0 !important;

  text-align:left !important;
}

.fr-authModal .fr-loginActionText strong{
  display:block !important;

  margin:0 !important;
  padding:0 !important;

  color:var(--auth-ink) !important;

  font-family:Arial, sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;

  line-height:1.3 !important;

  text-align:left !important;

  text-decoration:none !important;
}

.fr-authModal .fr-loginActionText small{
  display:block !important;

  margin:4px 0 0 !important;
  padding:0 !important;

  color:var(--auth-muted) !important;

  font-family:Arial, sans-serif !important;
  font-size:10px !important;
  font-weight:400 !important;

  line-height:1.25 !important;

  text-align:left !important;

  text-decoration:none !important;
}


/* LEGAL
--------------------------------------------------------- */

.fr-authModal .fr-loginLegal{
  display:block !important;

  width:100% !important;

  margin:11px 0 0 !important;
  padding:0 !important;

  color:var(--auth-muted) !important;

  font-family:Arial, sans-serif !important;
  font-size:11px !important;
  font-weight:400 !important;

  line-height:1.45 !important;

  text-align:center !important;
}

.fr-authModal .fr-loginLegal a,
.fr-authModal .fr-loginLegal a:link,
.fr-authModal .fr-loginLegal a:visited{
  color:var(--auth-brown-dark) !important;

  font-family:inherit !important;
  font-size:inherit !important;
  font-weight:600 !important;

  text-decoration:none !important;
}

.fr-authModal .fr-loginLegal a:hover{
  color:var(--auth-terra-dark) !important;

  text-decoration:underline !important;
}


/* ERROR
--------------------------------------------------------- */

.fr-authModal .fr-loginError{
  display:none !important;

  width:100% !important;

  margin:0 0 12px !important;
  padding:11px 13px !important;

  border:1px solid #efcccc !important;
  border-radius:10px !important;

  background:#fff5f5 !important;

  color:#a12525 !important;

  font-family:Arial, sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;

  line-height:1.35 !important;
}

.fr-authModal .fr-loginError.is-show{
  display:block !important;
}

.fr-authModal .fr-loginError.is-success{
  border-color:#c8ded1 !important;
  background:#f2faf5 !important;
  color:#315e45 !important;
}

.fr-authModal .fr-loginHelp{
  margin:0 !important;
  color:var(--auth-muted) !important;
  font-family:Arial, sans-serif !important;
  font-size:11px !important;
  line-height:1.45 !important;
  text-align:left !important;
}

.fr-authModal .fr-loginBack{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  margin:8px auto 0 !important;
  padding:7px 10px !important;
  border:0 !important;
  background:transparent !important;
  color:var(--auth-muted) !important;
  font-family:Arial, sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  text-decoration:none !important;
  cursor:pointer !important;
}

.fr-authModal .fr-loginBack:hover{
  color:var(--auth-terra-dark) !important;
  text-decoration:underline !important;
}

.fr-authModal .fr-loginBox--compact{
  max-width:460px !important;
}

.fr-authModal .fr-loginSrOnly{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}


/* MOBILE
--------------------------------------------------------- */

@media(max-width:560px){

  .fr-authModal.fr-loginOverlay{
    padding:14px !important;
  }

  .fr-authModal .fr-loginBox{
    padding:28px 20px 24px !important;

    border-radius:20px !important;
  }

  .fr-authModal .fr-loginBrand{
    padding:0 40px !important;

    margin-bottom:22px !important;
  }

  .fr-authModal .fr-loginBrand img{
    max-width:205px !important;
  }

  .fr-authModal .fr-loginHeader h3{
    font-size:25px !important;
  }

  .fr-authModal .fr-loginActions{
    grid-template-columns:1fr !important;
  }

}