header {  font-family: "Montserrat", sans-serif;  text-align: center;  margin-bottom: clamp(50px, 5vw, 65px) !important;  margin-top: 0px;}

p, label, a, h4, #status { font-size: clamp(13px, 1vw + 0.35rem, 15px); color: black}
h1{ margin-bottom: 5px;font-size: clamp(25px, 3vw + 0.45rem, 30px);font-weight: 755; color: black}
select{text-align-last: center;}

button { background: linear-gradient(98deg,rgba(255, 132, 0, 1) 0%, rgba(255, 148, 48, 1) 50%, rgba(255, 153, 0, 0.96) 100%); color: white; cursor: pointer; font-weight: 500; }
input { font-weight: 500; text-align: center;}
:where(input, select){font-weight: 500;color: #3c3c3c;width: 100%;box-sizing: border-box;margin-bottom: clamp(20px, 1.5vw, 25px);border: none; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);font-family: "Montserrat";font-variant-numeric: tabular-nums!important; line-height: 1.2;
        padding: clamp(4px, 2vw, 8px); border-radius: clamp(7px, 1vw, 10px); font-size: clamp(13px, 1.5vw, 15px)!important; height: clamp(33px, 3.5vw, 39px);transition: all 0.385s ease-in-out!important;background-color: white}
:where(button){width: 100%;margin-bottom: 25px;border: none; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);font-family: "Montserrat";font-variant-numeric: tabular-nums!important; line-height: 1.2;
        padding: 0px; border-radius: clamp(7px, 1vw, 10px); font-size: clamp(13px, 1.5vw, 15px)!important; height: clamp(33px, 3.5vw, 39px) !important;transition: all 0.385s ease-in-out!important;}

input::placeholder, textarea::placeholder { color: #097cf7a3; opacity: 1;}
input::-webkit-input-placeholder { color:#097cf7a3; opacity:1; }
input::-moz-placeholder { color:#097cf7a3; opacity:1; }
input:-ms-input-placeholder { color:#097cf7a3; opacity:1; }
input:-moz-placeholder { color:#097cf7a3; opacity:1; }
#nombreApi{font-size: clamp(13px, 1vw + 0.35rem, 16px)!important; opacity: 0;font-weight: 600; transition: all 0.908s ease-in-out; margin-top: 0; margin-bottom: 0}

#password, #profesion {max-width: 48%}
#politicas {width: 4%; margin-top: 0px; margin-bottom: 0px;}
.bimestre2 a, .bimestre2 label, .bimestre2 p {; margin-top: 0px; margin-bottom: 0px;}
a { -webkit-user-select: none; user-select: none;font-family: "Montserrat", sans-serif; text-align: center; color:#f90!important; text-decoration: none!important; cursor: pointer!important; font-weight: bold!important; transition: 0.385s ease-in-out!important}
footer p {font-size: clamp(10px, 0.9vw + 0.35rem, 14px)}
footer a {font-size: clamp(10px, 0.9vw + 0.35rem, 14px)}
footer p {margin-top: clamp(17px, 1vw, 27px) !important; margin-bottom: clamp(17px, 1vw, 27px) !important; text-align: center!important}
.container {  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  width:100%;  margin: 18px auto;  margin-bottom: 0px;  margin-top: 10px; max-width: 850px;}
.content {  flex: 1;}

select {
  font-weight: 500; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
  background-position: calc(100% - 13px) calc(1em + 1.5px), calc(100% - 8px) calc(1em + 1.5px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
}

select:focus {
  background-image:linear-gradient(45deg, green 50%, transparent 50%),linear-gradient(135deg, transparent 50%, green 50%);
  background-position: calc(100% - 8px) 1em, calc(100% - 13px) 1em, calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat; outline: 0;cursor: pointer;
}
.modal { display: none;}
#btnRegistro:disabled {cursor: not-allowed;opacity: 0.3;}
#envioTxt{width: 70%; min-width: 375px}
#forgotForm, #loginForm, #registroForm {padding-left: 20px; padding-right: 20px; width: 100%; min-width: 340px; max-width: 416px; display: flex; flex-direction: column;align-items: center}
#politica, #politicaa {font-size: 13px;margin: auto; margin-top: 0px; margin-bottom: 0px;}
input[type="text"], input[type="number"], input[type="date"], input[type="password"], input[type="mail"], select{-webkit-appearance: none; appearance: none;}
:where(input, select, button, a):focus{outline: none!important; box-shadow: 0 1px 10px 1px #ff8519 !important; transform: translateZ(0);font-weight: 575!important}
:where(button):hover{color: white!important;background-color: #f90!important;}
:where(input, select, button):hover{outline: none!important;font-weight: 575!important;box-shadow: 0px 5px 30px rgba(53, 45, 45, 0.25) !important}
:where(select, button, a){cursor: pointer!important}

a:hover {zoom: 101.5%!important; color:#097cf7!important;text-decoration: none!important;}
header p, header a{margin: auto; margin-top: 3px!important;font-size: clamp(11px,  0.7vw + 0.25rem, 13px)!important; text-align: center!important}
.bimestre  {  display: flex;  justify-content: space-between;  align-items: center;  width: 100%}
.bimestre2 {  margin-top: 2.5px; margin-bottom: 2.5px; min-width: 340px;  display: flex; justify-content: space-evenly; align-items: center; width: 100%}
#capturaImg {display: none;}
main{width: 100%;  margin: auto;  justify-content: center;  display: flex;}

#pageLoader {display: none; width: 50%; ; min-width: 250px; color: #fff; font-family: "Montserrat", sans-serif;
  font-size: clamp(15px,  0.7vw + 0.25rem, 17px);font-weight: 600; text-align: center; z-index: 9999; transform: translateY(0); opacity: 1; transition: opacity 0.385s ease-in-out, transform 0.385s ease-in-out;}
#pageLoader.done {  opacity: 0;  transform: translateY(-100%);  pointer-events: none;}
.pageLoader-track {  margin-bottom: 12px; flex: 1;  height: 8px;  border-radius: 999px;  background: rgba(255, 255, 255, 0.25);  overflow: hidden;}
.pageLoader-fill {  height: 100%;  width: 0%;  border-radius: inherit;  background: linear-gradient(90deg, #ff8519, #ffc074);  transition: width 0.385s ease-in-out}
.pageLoader-text {  white-space: nowrap;}

.overlay {position: fixed;inset: 0; /* top:0; right:0; bottom:0; left:0 */background: rgba(0, 0, 0, 0.45);display: flex;align-items: center;justify-content: center;
  z-index: 9999;opacity: 0;pointer-events: none;transition: opacity 0.385s ease-in-out}
.overlay.show {opacity: 1;pointer-events: auto;}
.overlay-content {display: flex;flex-direction: column;align-items: center;}
.overlay-content p{font-family: "Montserrat", sans-serif;font-weight: 600;color: white;margin-bottom: 10px;margin-top: 10px;font-size: clamp(15px,  0.7vw + 0.25rem, 17px);}
.overlay-content img {width: 80px;height: 80px;}
img{-webkit-user-select: none; user-select: none;}

@media screen and (max-width: 550px),
   screen and (max-height: 440px) {
     #logoimg2, #otros, #volverLogin {display: none}
    #capturaImg {display: inline;}
    .g-recaptcha{zoom: 85%}
  }