/*=============== GOOGLE FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400..900;1,100..900&display=swap');

/*=============== VARIABLES CSS ===============*/
:root {
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: 	#ffffff;
  --first-color-alt:	#046193;
  --border-color: hsl(0, 0%, 45%);
  --title-color: 	#0081c0;
  --text-color: hsl(207, 100%, 26%);
  --body-color: hsl(0, 0%, 4%);
  --container-color: hsla(0, 0%, 100%, 0.39);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Roboto Condensed", sans-serif;
  --big-font-size: .90rem;
  --normal-font-size: .938rem;
  --small-font-size: 1rem;
}

/*========== Responsive typography ==========*/
@media screen and (width >= 1150px) {
  :root {
    --big-font-size: 1.75rem;
    --normal-font-size: 1rem;
    --small-font-size: 1.16rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body,
input,
button {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}

body {
  /* background-color: var(--body-color); */
  background-image: url('../img/ventanilla.png');
  background-size: cover;
  color: var(--text-color);
  font-weight: 600;
  overflow: hidden;
}

/* Oculta el login hasta que imágenes y animaciones estén preparadas */
body.is-loading {
  background-color: #00508d;
  background-image: none;
}

body.is-loading .login {
  visibility: hidden;
}



#vanta-body > .vanta-canvas {
   opacity: 0.49;
}

input,
button {
  border: none;
  outline: none;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/*=============== LOGIN ===============*/
.login {
  height: 100vh;
  display: grid;
  align-items: center;
  margin-inline: 1rem;
}

.login__img {
  display: none;
}

/*=============== BRILLO===============*/

@property --angulo-brillo {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.login__glow {
  /* CONTROLES DEL EFECTO */
  --radio-login: 16px;
  --color-brillo: 184, 230, 245;
  --intensidad-brillo: 355;
  --grosor-brillo: 8px;
  --separacion-brillo: 4px;
  --difuminado-brillo: 25px;
  --velocidad-brillo: 9s;
  --retraso-brillo: 3s;

  position: relative;
  border-radius: var(--radio-login);
  overflow: visible;
  /* isolation: isolate; */
}

/* Mantiene el login encima del brillo */
.login__content {
  position: relative;
  z-index: 1;
  border-radius: var(--radio-login);
}

/* Línea luminosa + halo */
.login__glow::before,
.login__glow::after {
  content: "";
  position: absolute;
  inset: calc(var(--separacion-brillo) * -1);
  z-index: 0;
  pointer-events: none;

  padding: var(--grosor-brillo);
  border-radius: calc(
    var(--radio-login) + var(--separacion-brillo)
  );

 background: conic-gradient(
  from var(--angulo-brillo),

  transparent 0deg 280deg,

  rgba(var(--color-brillo), 0) 295deg,
  rgba(var(--color-brillo), 0.18) 305deg,
  rgba(var(--color-brillo), 0.65) 316deg,

  /* núcleo blanco: el punto más brillante */
  rgba(255, 255, 255, 1) 326deg,

  /* vuelve al color azul del brillo */
  rgba(var(--color-brillo), 1) 332deg,
  rgba(var(--color-brillo), 0.65) 340deg,
  rgba(var(--color-brillo), 0.18) 350deg,
  rgba(var(--color-brillo), 0) 358deg,

  transparent 360deg
);

  /* Recorta el centro: queda únicamente el borde */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  animation:  
    aparecer-brillo 0.7s ease-out var(--retraso-brillo) forwards,
    recorrer-brillo var(--velocidad-brillo) linear var(--retraso-brillo) infinite;

}

.login__glow::before {
  opacity: 0;
  filter:
    brightness(3.8)
    saturate(2.2)
    blur(18px);
}

/* Trazo definido y núcleo luminoso */
.login__glow::after {
  opacity: 0;
  filter:
    brightness(3.5)
    saturate(2)
    drop-shadow(0 0 4px rgba(var(--color-brillo), 1))
    drop-shadow(0 0 10px rgba(var(--color-brillo), .95))
    drop-shadow(0 0 22px rgba(var(--color-brillo), .75));
}

@keyframes recorrer-brillo {
  to {
    --angulo-brillo: 360deg;
  }

}

@keyframes aparecer-brillo {
  to {
    opacity: 1;
  }
}


/*==============================*/

.login__content {
  background: rgba(255, 255, 255, 0.70);
  border-radius: var(--radio-login);
  box-shadow: 0 7px 65px rgba(0, 0, 0, 0.438);
  backdrop-filter: blur(6.8px);
  -webkit-backdrop-filter: blur(5px);
  border: 1.7px solid rgba(255, 255, 255, 0.507);
}

.login__title {
  font-size: var(--big-font-size);
  color: var(--title-color);
  text-align: center;
  margin-bottom: 2.4rem;
  line-height: 1.42;
}

.logo{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(1.5rem, 4vh, 3rem);
  margin-bottom: clamp(1rem, 2.5vh, 1.75rem);
}

.logo img{
  max-width: 0;
  opacity: 0;
  overflow: hidden;

  animation: crecer .7s ease-out forwards;
  animation-delay: 2.5s;

  padding-top: 0;
}

@keyframes crecer {
  to {
    max-width: 135px;
    opacity: 1;    
  }
}

.login__group {
  display: grid;
  row-gap: 2.55rem;
  margin-bottom: 1rem;
}

.login__box {
  position: relative;
  height: 66px;
  display: flex;
  align-items: flex-end;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(0, 105, 161, 0.42);
  border-radius: 0;

  transition:
    border-color .25s ease,
    box-shadow .25s ease;
}

.login__box:focus-within {
  border-bottom-color: #008fd1;
  box-shadow: 0 8px 12px -12px rgba(0, 112, 172, .9);
}

.login__icon {
  position: absolute;
  left: .25rem;
  bottom: .75rem;

  font-size: 1.2rem;
  font-weight: initial;
  color: rgba(0, 105, 161, .82);

  transition:
    color .25s ease,
    transform .25s ease;
}

.login__box:focus-within .login__icon {
  color: #0070ac;
  transform: scale(1.08);
}

.login__toggle-password {
  position: absolute;
  right: .1rem;
  bottom: .7rem;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;

  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  background-color: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0;
  cursor: pointer;

  font-size: 1.15rem;
  color: rgba(0, 105, 161, .6);

  transition: color .25s ease;
}

.login__toggle-password:hover,
.login__toggle-password:focus-visible {
  background: transparent;
  color: #0070ac;
}

.login__toggle-password:focus {
  background: transparent;
  outline: none;
}

.login__toggle-password::-moz-focus-inner {
  border: 0;
}

.login__input.login__input--has-toggle {
  padding-right: 2.1rem;
}

/* Ocultar el botón nativo de "mostrar contraseña" de Edge/IE: sin esto
   queda dibujado encima del botón propio, con su fondo blanco por
   defecto, y se ve como si el ojo tuviera un fondo distinto al del
   formulario. */
.login__input--has-toggle::-ms-reveal,
.login__input--has-toggle::-ms-clear {
  display: none;
}

.login__label {
  position: absolute;
  top: .45rem;
  left: 2rem;
  color: rgba(0, 73, 112, .88);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .01em;
  pointer-events: none;
  transition: color .25s ease;
}

.login__box:focus-within .login__label {
  color: #0070ac;
}

.login__input {
  width: 100%;
  height: 39px;
  margin-left: 0;
  padding: .55rem 0 .15rem 2rem;
  font-weight: 600;
  z-index: 2;
  background: transparent;
  color: rgb(4, 47, 96);
  font-size: 1.5rem;
  text-align: center;
}

/* Ya no se oculta el label */
.login__input:focus + .login__label,
.login__input:not(:placeholder-shown) + .login__label {
  opacity: 1;
}

.login__input:autofill {
  transition: background-color 6000s, color 6000s;
}

.login__forgot {
  display: block;
  width: max-content;
  margin: 0.15rem 0 3rem auto;
  color: var(--title-color);
  font-size: var(--small-font-size);
}

.login__button {
  width: 100%;
  height: 64px;
  background-color: var(--title-color);
  color: white;
  border-radius: 4rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .5rem;
  margin-bottom: 1rem;
  cursor: pointer;
  font-size: 1.24rem;

  transition:
    background-color .25s ease,
    color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.login__button i {
  font-weight: initial;
  font-size: 1.2rem;
  transition: transform .25s ease;
}

@media (hover: hover) {
  .login__button:hover {
    background-color: white;
    color: var(--title-color);

    transform: translateY(-2px);

    box-shadow:
      0 8px 18px rgba(0, 73, 112, .22);
  }

  .login__button:hover i {
    transform: translateX(4px);
  }
}

.login__button:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 3px 8px rgba(0, 73, 112, .16);
}

.login__sign {
  text-align: center;
  font-size: var(--small-font-size);
}

.login__sign a {
  color: var(--title-color);
}

/*=============== BREAKPOINTS ===============*/
/*===============             ===============*/
/* For medium devices <> */

@media (height <= 700px) {
  body {
    overflow-y: auto;
  }

  .login {
    height: auto;
    min-height: 100svh;
    padding-block: 1rem;
  }
}

/* -------------------- <> */

@media (width < 540px)  {

body {
  overflow-y: auto;
}
  
.login {
  width: 80%;
  margin: 0 auto;

  /* Altura real visible del navegador móvil */
  height: auto;
  min-height: 100dvh;

  /* Aire superior e inferior, considerando zonas seguras */
  padding-top: max(1.25rem, env(safe-area-inset-top));
  padding-bottom: max(3.5rem, calc(env(safe-area-inset-bottom) + 2rem));

  display: grid;
  align-items: center;
}
  .logo img{
    width: 110px;
    animation-delay: 0s;
    opacity: 1;
  } 
  .login__title{
    font-size: 1.3rem;
    padding: 0 43px;
  }
  .login__form{
    width: 70%;
    margin: 0 auto;
  }
  .login__input {
    font-size: 1.2rem;
  }
  .login__label {
    font-size: 1rem;
  }
  .login__button{
    font-size: 1rem;
    height: 50px;
  }
  .login__forgot {
    font-size: .85rem;
  }
}


@media (width >= 540px) {
  .login {
    grid-template-columns: 400px;
    justify-content: center;
  }
}

/* Tablets en modo vertical */
@media (width >= 768px) and (width <= 834px) and (orientation: portrait) {
 
  .login__title{
    font-size: 1.6rem;
    padding: 0 40px;
  }
  .login__form{
    width: 80%;
    margin: 0 auto;
  }
  .login__button{
  font-size: 1.4rem;
  }
}


/* Tablet horizontal */
@media (width >= 768px) and (width < 1150px) and (orientation: landscape) {
  .login {
    grid-template-columns: 520px;
  }

  .login__content {
    padding: 2rem 3rem;
  }

  .login__glow {
    --radio-login: 2.5rem;
  }
}


/* Escritorio amplio */
@media (width >= 1150px) {
  .login {
    height: 100svh;
    grid-template-columns: initial;
    place-items: center;
    margin-inline: 0;
    padding: clamp(1.5rem, 4vh, 3rem) clamp(1.5rem, 5vw, 5rem);
  }

  .login__glow {
    width: min(100%, 1120px);
    --radio-login: 4rem;
  }

  .login__content {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(360px, 480px);
    justify-content: center;
    column-gap: clamp(3rem, 6vw, 7rem);
    align-items: stretch;

    padding: 1.5rem 1.5rem 1.5rem clamp(3rem, 6vw, 7rem);
    border-radius: var(--radio-login);
    overflow: hidden;
  }

  .login__image {
    width: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: 3rem;
    align-self: stretch;
  }

  .login__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center;
    border-radius: inherit;
  }

  .logo {
  padding-top: 0;
}

.login__button {
  margin-bottom: 0;
}
}



/* Laptop con altura limitada */
@media (width >= 1150px) and (height <= 820px) {
  .login {
    padding: 1rem 1.5rem;
  }

  .login__glow {
    width: min(100%, 920px);
    --radio-login: 2.75rem;
  }

  .login__content {
    grid-template-columns: minmax(0, 1fr) 340px;
    justify-content: center;
    column-gap: 3rem;

    padding: 1.25rem 1.25rem 1.25rem 3rem;
    border-radius: var(--radio-login);
  }

  /* Columna izquierda: evita que el formulario se estire */
  .login__content > div:first-child {
    width: min(100%, 300px);
    justify-self: center;
  }

  .login__image {
    width: 340px;
    min-height: 0;
    border-radius: 2.25rem;
  }

  .logo {
    padding-top: .35rem;
    margin-bottom: .75rem;
  }

  .login__title {
    font-size: 1.25rem;
    line-height: 1.3;
    margin-bottom: 1.35rem;
  }

  .login__group {
    row-gap: 1.25rem;
    margin-bottom: .75rem;
  }

  .login__box {
    height: 54px;
  }

  .login__label {
    top: .35rem;
    font-size: .85rem;
  }

  .login__icon {
    bottom: .6rem;
  }

  .login__toggle-password {
    bottom: .55rem;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1rem;
  }

  .login__input {
    height: 32px;
    font-size: 1.05rem;
  }

  .login__forgot {
    font-size: .85rem;
    margin: .1rem 0 1.35rem auto;
  }

  .login__button {
    height: 54px;
    margin-bottom: 0;
    font-size: 1rem;
  }
}