/* Estilo general para el formulario */
.box-login {
    max-width: 500px;
    width: 80%; /* Asegura que el contenedor no exceda el ancho disponible */
    margin: 0 auto; /* Centra el contenedor en pantallas grandes */
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background-color: #ffffff; /* Fondo blanco para el formulario */
    border: 1px solid #dcdcdc; /* Borde gris claro */
    overflow: auto; /* Permite el scroll si el contenido excede la altura */
    max-height: 80vh; /* Limita la altura máxima del formulario */
    display: flex;
    flex-direction: column;
}

/* Estilo para el fieldset */
form fieldset {
    border: 1px solid #e6e8e8; /* Borde gris claro */
    border-radius: 5px;
    margin: 20px 0; /* Margen superior e inferior */
    padding: 25px;
    position: relative; /* Para posicionar el legend */
    color: #1aadd4; /* Color general para el texto del fieldset */
    background: #ffffff; /* Fondo blanco para el fieldset */
}

/* Estilo para el legend */
form legend {
    font-family: "Lato", sans-serif;
    color: #007AFF; /* Color del texto del legend */
    font-size: 18px;
    font-weight: 400;
    padding: 0 10px;
    position: absolute;
    top: -12px;
    left: 10px;
    background: #ffffff; /* Fondo blanco para el legend para que se vea claro */
    border: none; /* Eliminar el borde del legend */
    border-radius: 5px; /* Bordes redondeados para el legend */
    width: auto !important; /* Asegura que el width se ajuste automáticamente */
    margin: 0; /* Eliminar margen del legend */
}

/* Estilo para el texto descriptivo específico */
form .login-info {
    color: #8e8e93; /* Color específico para este texto */
    font-size: 14px;
    margin-bottom: 20px;
}

/* Estilo para mensajes de error */
form .message {
    color: red;
    font-size: 14px;
}

/* Estilo para los grupos de formulario */
.form-group {
    margin-bottom: 15px;
    padding: 0 10px; /* Agrega un poco de espaciado horizontal */
}

/* Estilo para los inputs */
.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transición para el color del borde y la sombra */
}

/* Estilo para el borde del input cuando está enfocado */
.form-control:focus {
    border-color: #007AFF; /* Color azul cuando el input está enfocado */
    box-shadow: 0 0 5px rgba(0, 122, 255, 0.5); /* Sombra azul cuando el input está enfocado */
    outline: none; /* Eliminar el borde predeterminado del navegador */
}

/* Estilo para las acciones del formulario */
.form-actions {
    margin-top: 10px;
}

/* Estilo para el botón de envío */
.btn-primary {
    display: inline-block; /* Permite que el botón se ajuste al tamaño del contenido */
    padding: 10px 20px; /* Ajusta el padding para un mejor ajuste */
    background-image: linear-gradient(to right, #002060 , #1596b7);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-sizing: border-box; /* Incluye padding y border en el ancho total */
    text-align: center; /* Centra el texto dentro del botón */
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
}

.btn-primary:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

/* Estilo del logo */
.topframe {
    text-align: center;
    padding: 20px;
    background-color: #f6f9ff;
}

.topframe img {
    max-width: 100%; /* Asegúrate de que el logo no exceda el contenedor */
    height: auto;
}

/* Ajuste del tamaño del logo en dispositivos móviles */
@media (max-width: 600px) {
    .topframe img {
        max-width: 100%; /* Ajusta el tamaño máximo del logo */
        height: auto;
        margin: 0 auto; /* Centra el logo en dispositivos móviles */
    }
}

/* Estilo del pie de página */
.copyright {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    color: #777;
}

/* Asegúrate de que el contenedor sea flexible y se ajuste a pantallas pequeñas */
body {
    font-family: Arial, sans-serif;
    background-color: #f6f9ff;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 90vh; /* Asegura que el contenido ocupe al menos el 100% de la altura de la ventana */
    text-align: center;
}

/* Contenedor principal para el formulario y pie de página */
.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Agregar media queries para pantallas más pequeñas */
@media (max-width: 600px) {
    .box-login {
        padding: 15px;
        width: 80%; /* Ajusta el ancho para dispositivos móviles */
        margin: 10px; /* Ajusta el margen para dispositivos móviles */
    }

    .btn-primary {
        font-size: 14px;
    }
}