/* Logo de la izquierda */
.bg-login-image-left {
    background-image: url('../../images/ESCUDO-2.webp');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 600px;
    width: 600px;
    animation: pulse 10s infinite;
}

/* Contenedor del logo superior, asegurando que esté centrado */
.logo-container-top {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px; /* Para dar espacio entre el logo y el contenido */
}

/* Logo superior */
.bg-login-image-top {
    background-image: url('../../images/logo.webp');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 60px;
    width: 200px;
    margin: 0 auto; /* Esto refuerza que el logo esté centrado */
    animation: pulse 12s infinite;
}

/* Logo de la derecha */
.bg-login-image-right {
    background-image: url('../../images/escudodef.webp');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 600px;
    width: 600px;
    animation: pulse 10s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }

    25%, 75% {
        transform: scale(1.2); /* Escala al 120% para los latidos rápidos */
    }

    50% {
        transform: scale(1); /* Escala al 100% para la pausa */
    }
}

body {
    background-image: url('../../images/image_9b641f6563.webp');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #999;
}
/* Personalizar el tamaño de la tarjeta con opacidad */
.custom-card {
    border-radius: 15px; /* Bordes redondeados en toda la tarjeta */
    width: 110%; /* Ajusta el ancho según lo necesites */
    height: 75%; /* Altura personalizada */
    margin: 0 auto; /* Centrar la tarjeta */
    background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco con opacidad */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para resaltar la tarjeta */
    backdrop-filter: blur(5px); /* Opcional: Desenfoque de fondo para un efecto más suave */
    padding: 40px; /* Espaciado interno */
}

/* Otros estilos, como botones redondeados */
.custom-button {
    border-radius: 30px; /* Botón redondeado */
    padding: 10px 20px; /* Ajuste del relleno para que se vea más grande */
    font-size: 18px; /* Tamaño de texto mayor */
    background-color: #00509e; /* Color de fondo ajustado para mejor contraste */
    color: white; /* Color del texto */
    border: none;
    transition: background-color 0.3s ease; /* Efecto suave al hacer hover */
}

    .custom-button:hover {
        background-color: #003f7d; /* Color del botón al hacer hover con mejor contraste */
    }


/* Estilo para los campos de input */
.custom-input {
    border-radius: 30px; /* Bordes redondeados en los inputs */
    padding: 10px 20px; /* Relleno para inputs */
    font-size: 16px; /* Ajustar el tamaño del texto */
}

.custom-Error {
    border-radius: 20px; /* Bordes redondeados en los inputs */
    padding: 5px 20px; /* Relleno para inputs */
    font-size: 16px; /* Ajustar el tamaño del texto */
    text-align: center
}