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

body {
    font-family: 'Arial', sans-serif;
    background-image: url('/IMG/fondo2.webp');
    /* Imagen de fondo */
    background-size: cover;
    /* Hace que la imagen cubra toda la pantalla */
    background-position: center;
    /* Centra la imagen de fondo */
    background-attachment: fixed;
    /* La imagen de fondo no se mueve al hacer scroll */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: #fff;
}

.login-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.login-form {
    background-color: rgba(94, 89, 89, 0.397);
    /* Fondo semi-transparente */
    padding: 100px;
    /* Ajustado el padding para pantallas pequeñas */
    border-radius: 12px;
    width: 100%;
    /* Asegura que ocupe todo el espacio disponible */
    max-width: 600px;
    /* Aumenta el max-width para hacerlo más ancho */
    min-height: 400px;
    /* Altura mínima del formulario */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    text-align: start;
    display: flex;
    /* Usamos flexbox para centrar el contenido */
    flex-direction: column;
    /* Alineamos los elementos en columna */
    justify-content: center;
    /* Centrado vertical */
    align-items: center;
    /* Centrado horizontal */
    margin-right: 30px;
}

.logo img {
    width: 250px;
    margin-bottom: 30px;
}

form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    /* Asegura que el formulario ocupe todo el espacio disponible */
}

/* Estilo para los placeholders */
input::placeholder {
    color: #ffffff;
    /* Cambia el color a gris claro para mejorar la visibilidad */
    opacity: 1;
    /* Asegura que el color no se vea demasiado transparente */
    font-family: Arial, Helvetica, sans-serif;
}

input {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.2);
    /* Fondo transparente para los inputs */
    color: #fff;
    font-size: 16px;
    outline: none;
}

input:focus {
    border-color: #007bff;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
}

button {
    padding: 15px;
    background-color: #007bff;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    /* Asegura que el botón ocupe todo el ancho disponible */
}

button:hover {
    background-color: #0056b3;
}

.forgot-password,
.create-account {
    margin-top: 20px;
}

.forgot-password a,
.create-account a {
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}

.forgot-password a:hover,
.create-account a:hover {
    text-decoration: underline;
}

.social-login {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.social-login button {
    padding: 12px;
    width: 100%;
    /* Asegura que los botones sociales ocupen el 100% de ancho */
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.google-btn {
    background-color: #db4437;
    color: white;
}

.microsoft-btn {
    background-color: #0078d4;
    color: white;
}

.social-login button:hover {
    opacity: 0.8;
}

/* Media Queries para Responsividad */

/* Para pantallas móviles */
@media (max-width: 767px) {
    body {
        background-size: cover;
        /* La imagen siempre cubre el área */
    }

    .login-form {
        padding: 20px;
        max-width: 90%;
        /* El formulario ocupará un 90% del ancho */
        margin-right: 0;
        /* Elimina el margen derecho */
    }

    .logo img {
        width: 200px;
        /* Reduzco el tamaño del logo */
    }

    button,
    input {
        padding: 12px;
        /* Reducimos el padding de los inputs y botones */
        font-size: 14px;
        /* Ajustamos el tamaño de fuente para pantallas pequeñas */
    }
}

/* Para tabletas (de 768px a 1024px) */
@media (max-width: 1024px) {
    body {
        background-size: cover;
        /* Mantén la imagen adaptada */
    }

    .login-form {
        padding: 40px;
        max-width: 80%;
        /* El formulario ocupará un 80% del ancho */
    }

    .logo img {
        width: 250px;
        /* Tamaño de logo para tabletas */
    }

    button,
    input {
        padding: 14px;
        font-size: 15px;
    }
}

/* Para pantallas grandes */
@media (min-width: 1025px) {
    body {
        background-size: cover;
        /* Mantén la imagen adaptada */
    }

    .login-form {
        padding: 60px;
        max-width: 600px;
        /* El formulario se mantiene en 600px de max-width */
    }

    .logo img {
        width: 300px;
        /* Tamaño de logo para pantallas grandes */
    }
}

/* Alineación del checkbox a la izquierda */
.forgot-password {
    display: block;
    /* Utilizamos block para que se alinee todo a la izquierda */
    text-align: left;
    /* Alineamos el checkbox y el texto a la izquierda */
    width: 100%;
    margin-top: 10px;
    /* Separación superior si lo necesitas */
}

input[type="checkbox"] {
    margin-right: 10px;
    /* Espacio entre el checkbox y el texto */
}

.forgot-password label {
    font-size: 14px;
    color: #fff;
}



    .alerta {
        display: none;
        position: fixed;
        z-index: 10000;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(255, 0, 0, 0.9);
        color: #fff;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5);
        width: 90%;
        max-width: 400px;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .alerta-content {
        width: 100%;
    }

    .close-alert {
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        position: absolute;
        top: 5px;
        right: 10px;
        cursor: pointer;
    }

    .close-alert:hover {
        color: #f1f1f1;
    }

    /************************************************************************* modal-soporte ************************************************************************************
  /* Estilo del modal soporte */
.modal-soporte {
  display: none; /* Ocultamos el modal inicialmente */
  position: fixed; /* Fijo en la pantalla */
  z-index: 9999; /* Asegúrate de que esté por encima de otros elementos */
  left: 0;
  top: 0;
  width: 100%; /* Ancho completo */
  height: 100%; /* Alto completo */
  background-color: rgba(0, 0, 0, 0.2); /* Fondo oscuro semi-transparente */
  text-align: center;
  padding: 20px;
  overflow: auto; /* Permite desplazarse si el contenido es muy grande */
  justify-content: center; /* Centrado horizontalmente */
  align-items: center; /* Centrado verticalmente */
}

/* Contenido del modal */
.modal-content-soporte {
  background-color: rgb(255, 255, 255); /* Fondo blanco */
  color: #000000; /* Color de texto oscuro */
  padding: 40px;
  border-radius: 8px;
  width: 50%; /* Ajusta el tamaño del modal */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* Sombra sutil */
  font-family: 'Roboto', sans-serif; /* Fuente moderna */
  opacity: 1;
  position: relative;
  max-width: 600px; /* Limita el ancho máximo */
  max-height: 80%; /* Limita la altura del modal */
  overflow-y: auto; /* Permite desplazarse si el contenido es muy grande */
  box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
}

/* Estilo para el botón de cerrar */
.close-btn-soporte {
  color: #000000; /* Color gris para el botón de cerrar */
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
}

.close-btn-soporte:hover,
.close-btn-soporte:focus {
  color: #000; /* Al hacer hover, el color se pone negro */
  text-decoration: none;
}

/* Estilo para el texto dentro del modal */
.modal-content-soporte p {
  font-size: 18px; /* Tamaño de fuente más grande para mejor legibilidad */
  line-height: 1.6;
  font-family: 'Open Sans', sans-serif; /* Otra fuente moderna */
  font-weight: 300; /* Peso de fuente más liviano para un estilo más elegante */
  color: #444; /* Color de texto ligeramente más claro */
}

/* Asegura que el modal sea responsive */
@media (max-width: 768px) {
  .modal-content-soporte {
    width: 80%; /* Para pantallas pequeñas, el modal ocupará el 80% del ancho */
    padding: 20px;
    max-width: 90%; /* Asegura que el modal se ajuste en pantallas pequeñas */
  }

  .modal-image {
    width: 70%; /* La imagen ocupará el 70% del ancho en pantallas pequeñas */
    height: auto; /* Mantener la proporción de la imagen */
  }
}

/* Estilo para la imagen dentro del modal */
.modal-image {
  width: 40%; /* Ajusta el tamaño de la imagen en pantallas grandes */
  height: auto; /* Mantiene la proporción de la imagen */
  margin-bottom: 20px; /* Espacio debajo de la imagen */
  border-radius: 4px; /* Bordes redondeados para la imagen */
  object-fit: contain; /* Asegura que la imagen se ajuste sin perder proporción */
  max-height: 200px; /* Limita la altura máxima de la imagen */
}

/************************************************************************* modal-olvido-contraseña *************************************************************************************/
/* Estilo del modal soporte */
.modal-olvido-contrasena {
  display: none; /* Ocultamos el modal inicialmente */
  position: fixed; /* Fijo en la pantalla */
  z-index: 9999; /* Asegúrate de que esté por encima de otros elementos */
  left: 0;
  top: 0;
  width: 100%; /* Ancho completo */
  height: 100%; /* Alto completo */
  background-color: rgba(0, 0, 0, 0.2); /* Fondo oscuro semi-transparente */
  text-align: center;
  padding: 20px;
  overflow: auto; /* Permite desplazarse si el contenido es muy grande */
  justify-content: center; /* Centrado horizontalmente */
  align-items: center; /* Centrado verticalmente */
}

/* Contenido del modal */
.modal-content-olvido-contrasena {
  background-color: rgb(255, 255, 255); /* Fondo blanco */
  color: #000000; /* Color de texto oscuro */
  padding: 40px;
  border-radius: 8px;
  width: 50%; /* Ajusta el tamaño del modal */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* Sombra sutil */
  font-family: 'Roboto', sans-serif; /* Fuente moderna */
  opacity: 1;
  position: relative;
  max-width: 600px; /* Limita el ancho máximo */
  max-height: 80%; /* Limita la altura del modal */
  overflow-y: auto; /* Permite desplazarse si el contenido es muy grande */
  box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
}

/* Estilo para el botón de cerrar */
.close-btn-olvido-contrasena {
  color: #000000; /* Color gris para el botón de cerrar */
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
}

.close-btn-olvido-contrasena:hover,
.close-btn-olvido-contrasena:focus {
  color: #000; /* Al hacer hover, el color se pone negro */
  text-decoration: none;
}

/* Estilo para el texto dentro del modal */
.modal-content-olvido-contrasena p {
  font-size: 18px; /* Tamaño de fuente más grande para mejor legibilidad */
  line-height: 1.6;
  font-family: 'Open Sans', sans-serif; /* Otra fuente moderna */
  font-weight: 300; /* Peso de fuente más liviano para un estilo más elegante */
  color: #444; /* Color de texto ligeramente más claro */
}

/* Asegura que el modal sea responsive */
@media (max-width: 768px) {
  .modal-content-olvido-contrasena {
    width: 80%; /* Para pantallas pequeñas, el modal ocupará el 80% del ancho */
    padding: 20px;
    max-width: 90%; /* Asegura que el modal se ajuste en pantallas pequeñas */
  }

  .modal-image-olvido-contrasena {
    width: 70%; /* La imagen ocupará el 70% del ancho en pantallas pequeñas */
    height: auto; /* Mantener la proporción de la imagen */
  }
}

/* Estilo para la imagen dentro del modal */
.modal-image-olvido-contrasena {
  width: 40%; /* Ajusta el tamaño de la imagen en pantallas grandes */
  height: auto; /* Mantiene la proporción de la imagen */
  margin-bottom: 20px; /* Espacio debajo de la imagen */
  margin-top: 20px;
  border-radius: 4px; /* Bordes redondeados para la imagen */
  object-fit: contain; /* Asegura que la imagen se ajuste sin perder proporción */
  max-height: 200px; /* Limita la altura máxima de la imagen */
}

/********************************************************************************mostrar contraseña **********************************************************************/
.password-field {
    position: relative;
    margin-bottom: 20px;
}

.show-password-label {
    font-size: 16px;
    cursor: pointer;
    margin-top: 5px;
    color: #fff;
}

#show-password {
    margin-right: 5px;
}