/* Estilos generales */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-image: url('../Img/login-background.jpg'); /* Cambia esto por la ruta de tu imagen de fondo */
    background-size: cover;
    background-position: center;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.9);
    transform-origin: top left;
}

.container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco con transparencia */
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 15%; /* Distancia del 15% desde el borde izquierdo */
    top: 50%;
    transform: translateY(-50%);
}

/* Estilos del encabezado */
.header {
    text-align: center;
    margin-bottom: 20px;
}

.header h1 {
    margin: 0;
    font-size: 24px;
    color: #333;
}

.header p {
    margin: 5px 0 20px;
    font-size: 14px;
    color: #666;
}

/* Estilos del formulario de inicio de sesión */
.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="text"], input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type="submit"] {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #0056b3;
}

.link-forgot-password {
    display: block;
    margin-top: 10px;
    text-align: center;
    color: #212529;
    text-decoration: none;
    font-size:0.9em;
}

.link-forgot-password:hover {
    text-decoration: underline;
}

.customer-service {
    margin-top: 15px;
    font-size: 14px;
    text-align: center;
}

.customer-service span {
    display: block;
}

.logos {
    display: flex;
    justify-content: center;
    /*gap: 20px;  Espacio entre logos */
    /*margin-top: 20px;*/
    padding: 5%; /* Espacio interno alrededor de las imágenes */
    border-radius: 8px; /* Opcional: para redondear las esquinas del contenedor */
}

.logos img {
    height: 4em; /* Ajusta la altura según sea necesario */
    width: auto; /* Ajusta la anchura automáticamente para mantener la proporción */
    object-fit: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin distorsión */
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .container {
        left: 5%; /* Ajusta la distancia desde el borde izquierdo para pantallas pequeñas */
        right: 5%; /* Añade un margen derecho para mejor ajuste */
    }
}

.hidden {
    visibility: hidden;
    display: table-column-group;
}

.text-center {
    text-align: center
}

.button-link {
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box; /* Ajusta el tamaño del cuadro para incluir padding y borde */
}

.button-link:hover {
    background-color: #0056b3;
}
.btn-warning-basic, .btn-warning, .btn-warning:focus, .btn-warning.disabled:hover, .btn-warning:disabled:hover, .btn-hover-warning:hover, .btn-hover-warning:active, .btn-hover-warning.active, .btn.btn-active-warning:active, .btn.btn-active-warning.active, .dropdown.open > .btn.btn-active-warning, .btn-group.open .dropdown-toggle.btn.btn-active-warning {
    background-color: #ffa31c;
    border-color: #ffa726;
    color: #fff;
} 
.card {
    border: initial !important;
}
.card .card-header {
    background-color: initial !important;
}
.card .card-footer{
    background-color: initial !important;
}