.imagendelfondo {
            background-color: var(--light-bg);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background-image: url(../img/5.jpg);
                /* Hace que la imagen cubra todo el contenedor (el body) */
            background-size: cover;

        /* Centra la imagen para que no se corte solo de un lado */
            background-position: center;

            /* Evita que la imagen se duplique si es pequeña */
            background-repeat: no-repeat;

            /* Fija la imagen para que no se mueva al hacer scroll (opcional) */
            background-attachment: fixed;

            /* IMPORTANTE: Asegura que el body mida siempre el 100% de la altura de la pantalla */
            min-height: 100vh;
            margin: 0;
        }
.colordelfondo {
    background-color: #e9ecef70
}
/* maraña arrecha */
/* Estado normal del botón */
.btn-iuptm {
    background-color: #007bff; /* El azul que quieras al inicio */
    color: white;
    border: none;
    transition: all 0.3s ease; /* Para que el cambio de color sea suave */
}

/* Estado cuando pasas el mouse (HOVER) */
.btn-iuptm:hover {
    background-color: #004e92; /* AQUÍ PONES TU AZUL PERSONALIZADO */
    color: #e0f2fe; /* Color de letra un poco más claro al pasar el mouse */
    transform: translateY(-2px); /* Un pequeño salto hacia arriba para que se vea Pro */
    box-shadow: 0 5px 15px rgba(0, 78, 146, 0.3); /* Sombra suave azul */
}

.img-icono {
    width: 40px;   /* Ancho fijo */
    height: 40px;  /* Alto fijo */
    object-fit: cover; /* Corta la imagen para que llene el espacio sin deformarse */
    border-radius: 50%; /* Opcional: la hace circular */
}

input:invalid {
  border: 1px solid red; /* Se pone rojo si no cumple una restricción */
}

/*input:valid {
  border: 1px solid green; /* Se pone verde si todo está correcto */