@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Estilos generales del contenedor */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.login-container{
   margin-top: 5px;
}

/* Estilos del scrollbar */
::-webkit-scrollbar {
  width: 5px; /* Ancho del scrollbar */
}

/* Estilos del scrollbar track (el fondo del scrollbar) */
::-webkit-scrollbar-track {
  background: #f1f1f145; /* Color del fondo del scrollbar */
  border-radius: 10px; /* Radio de las esquinas */
}

/* Estilos del scrollbar thumb (la barra de desplazamiento) */
::-webkit-scrollbar-thumb {
  background: #0099ffc6; /* Color de la barra de desplazamiento */
  border-radius: 8px; /* Radio de las esquinas */
}

/* Estilos del scrollbar thumb en hover (al pasar el mouse sobre el scrollbar) */
::-webkit-scrollbar-thumb:hover {
  background: #2980b9; /* Color de la barra de desplazamiento al pasar el mouse */
}


.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
  }

html {
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  overflow: hidden;
}

#stars,
#stars2,
#stars3 {
  position: absolute;
}

#stars,
#stars2,
#stars3,
#stars:after,
#stars2:after,
#stars3:after {
  content: " ";
  position: absolute;
}

#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 
    336px 1675px #FFF, 932px 1909px #FFF, 1456px 276px #FFF, 1982px 1400px #FFF, 2507px 314px #FFF,
    451px 2011px #FFF, 693px 823px #FFF, 1078px 1922px #FFF, 1551px 778px #FFF, 1772px 1451px #FFF; /* Añadí más sombras */
  animation: animStar 25s linear infinite; /* Hice la animación más rápida */
}

#stars:after {
  content: " ";
  top: 2000px;
}

#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 
    1055px 521px #FFF, 395px 1609px #FFF, 1757px 1999px #FFF, 284px 1478px #FFF, 925px 839px #FFF,
    1131px 1971px #FFF, 1628px 1385px #FFF, 750px 1160px #FFF, 2136px 780px #FFF, 1494px 1767px #FFF; /* Añadí más sombras */
  animation: animStar 50s linear infinite; /* Hice la animación más rápida */
}

#stars2:after {
  content: " ";
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 
    1055px 521px #FFF, 395px 1609px #FFF, 1757px 1999px #FFF, 284px 1478px #FFF, 925px 839px #FFF,
    1131px 1971px #FFF, 1628px 1385px #FFF, 750px 1160px #FFF, 2136px 780px #FFF, 1494px 1767px #FFF; /* Añadí más sombras */
}

#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 
    481px 1118px #FFF, 1540px 324px #FFF, 2439px 1554px #FFF, 901px 776px #FFF, 1892px 1827px #FFF,
    1236px 1149px #FFF, 2165px 1431px #FFF, 438px 1269px #FFF, 325px 792px #FFF, 1775px 1525px #FFF; /* Añadí más sombras */
  animation: animStar 75s linear infinite; /* Hice la animación más rápida */
}

#stars3:after {
  content: " ";
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 
    481px 1118px #FFF, 1540px 324px #FFF, 2439px 1554px #FFF, 901px 776px #FFF, 1892px 1827px #FFF,
    1236px 1149px #FFF, 2165px 1431px #FFF, 438px 1269px #FFF, 325px 792px #FFF, 1775px 1525px #FFF; /* Añadí más sombras */
}

#pincipal {
    display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 5%;
  color: #FFF;
  font-family: 'Poppins', sans-serif;
  margin-top: -60px;
  padding-left: 10px;
}

#pincipal span {
  background: -webkit-linear-gradient(white, #38495a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-3000px); /* Aumenté la distancia de la animación */
  }
}


.column-info{
    margin: 2rem 0rem;
    display: flex;
    flex-direction: column;
    width: 35%;
}

.alert {
    display: flex;
    flex-direction: column;
    background: #d1e4fb12;
    backdrop-filter: blur(5px);
    padding: 8px;
    border: #2980b9 1px solid;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    width: 100%;
    height: 50%;
    margin: 20px auto;
    color: #ffffff;
  }

  
  .icon {
    display: flex;
    align-items: center;
    justify-content: start;
    
  }
  
  .icon i {
    font-size: 24px;
  }
  
  .count-alert {
    background-color: #ff5252;
    color: #ffffff;
    border-radius: 50%;
    padding: 5px 8px;
    font-size: 12px;
  }
  
  .list-noti {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    overflow-y: auto;
  }

  
  .item {
    padding: 10px;
    margin-bottom: 8px;
    border:#2980b9 1px;
    backdrop-filter: blur(5px);
    border-radius: 5px;
    font-size: 14px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .list-noti .item:nth-child(1) { animation: fadeInAndUp 0.5s ease 0.5s forwards; }
  .list-noti .item:nth-child(2) { animation: fadeInAndUp 0.5s ease 2s forwards; }
  .list-noti .item:nth-child(3) { animation: fadeInAndUp 0.5s ease 3s forwards; }
  
  @keyframes fadeInAndUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .info-simpplee{
    padding: 0px 8px;
    width: 100%;
    background: #d1e4fb12;
    backdrop-filter: blur(5px);
    border-radius: 10px;
    border: #2980b9 1px solid;  
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    height: 50%;
  }



  .form-login{
    display: flex;
    width: 60%;
    justify-content: center;
    align-items: center;
    justify-content: end;
  }

  .form-title{
    text-align: center;
    width: 100%;
    font-size: 30px;
  }
  
  .phrase-transition {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    
  }
  

  .title-info{
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .text-info{
    text-align: center;
  }



  #text-fs {
    font-size: 20px;
    background-image: linear-gradient(to right, #0099ff, #5500ff);
    -webkit-background-clip: text;
    color: transparent; /* Color azul */
    font-weight: bold;
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    overflow: hidden; /* Oculta el contenido que desborda el contenedor */
    border-right: 2px solid #008cff; /* Simula el cursor de escritura */
    animation: typing 5s steps(20, end), blink-caret 0.5s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: #3498db;
    }
}

  .img-logo {
    width: 120px;
    position: absolute;
    top: 40%;
    left: 45%;
    backdrop-filter: blur(5px);
}
  

 /* Resto del código anterior... */

/* Agregado para hacer el fondo más oscuro en pantallas más pequeñas */
@media screen and (max-width: 768px) {
  html {
    background: radial-gradient(ellipse at bottom, #0e131b 0%, #090A0F 100%);
    
  }
  .column-info, .form-title{
    display: none;
  }

  .form-login{
    justify-content: center;
  }
}

/* Ajustes para pantallas pequeñas */
@media screen and (max-width: 768px) {
  .column-info, .form-title{
    display: none;
  }

  .form-login{
    justify-content: center;
  }
  #pincipal {
    flex-direction: column;
    align-items: center;
  }

  .column-info {
    width: 100%;
  }

  .form-login {
    width: 100%;
    margin-top: 20px;
  }

  .form-title {
    font-size: 24px;
  }
}

/* Agregado para hacer el texto más grande en pantallas más pequeñas */
@media screen and (max-width: 480px) {
  .column-info, .form-title{
    display: none;
  }

  .form-login{
    justify-content: center;
  }
  #text-fs {
    font-size: 18px;
  }

  .title-info {
    font-size: 18px;
  }
}


.alert,
.info-simpplee,
.form-login {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.alert.active,
.info-simpplee.active,
.form-login.active {
    opacity: 1;
    transform: translateY(0);
}