@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');

body, html {
    height: 100%;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    background: linear-gradient(to right, #ff6666 0%, #6666FF 100%);
  }
  
  .container {
    max-width: 400px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .logo img {
    max-width: 100px;
    margin-bottom: 20px;
  }
  
  h2 {
    color: #333;
    margin-bottom: 10px;
  }
  
  form {
    margin-top: 20px;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="password"] {
    width: 93%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  
  button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #ff758c;
    color: white;
    cursor: pointer;
    margin-top: 10px;
  }
  
  button.google-login {
    background-color: #4285F4;
  }
  
  a {
    display: block;
    margin-top: 20px;
    color: #4285F4;
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: underline;
  }
  /* Estilos para el modal */
    .modal {
        display: none; /* El modal está oculto por defecto */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro semitransparente */
        z-index: 1; /* Coloca el modal encima del contenido principal */
        text-align: center;
    }

    .modal-content {
        background-color: #fff;
        border-radius: 5px;
        width: 50%; /* Ancho del modal */
        max-width: 400px; /* Ancho máximo del modal */
        margin: 10% auto; /* Centra vertical y horizontalmente */
        padding: 20px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Sombra */
        position: relative;
    }

    .close {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 20px;
        cursor: pointer;
    }

    /* Estilos para el mensaje dentro del modal */
    #modal-message {
        font-size: 16px;
    }  
/* Añade esto en tu archivo CSS */
.error-input {
  border: 2px solid red;
}
/* Estilos para la sección de bienvenida */
.welcome-section {
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px; /* Añade espacio entre las secciones */
}

.welcome-section h1 {
    color: #333;
    margin-bottom: 0.5em; /* Espaciado debajo del título */
}

/* Estilos para la sección de notificación de estado */
.status-notification {
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.status-notification h2 {
    color: #333;
    margin-bottom: 0.5em;
}

.status-notification p {
    color: #666;
    font-size: 0.9em;
}
 /* Estilo del contenedor del spinner */
.spinner-container {
  display: none; /* Oculto por defecto */
  position: fixed; /* Se queda fijo en la pantalla */
  z-index: 9999; /* Se asegura de que esté por encima de otros elementos */
  left: 50%; /* Central horizontalmente */
  top: 50%; /* Central verticalmente */
  transform: translate(-50%, -50%); /* Ajusta la posición exacta del centro */
  width: 100%; /* Tamaño del spinner */
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* Semi-transparente */
  border-radius: 0%; /* Hacer el spinner circular si deseas */
  /*display: flex; */
  justify-content: center; /* Centra horizontalmente el contenido */
  align-items: center; /* Centra verticalmente el contenido */
}

.spinner-container img {
  width: 10%; /* Tamaño de la imagen dentro del spinner */
  height: 10%; /* Mantener la proporción de la imagen */
}