.centrado{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 50vh;
}

.centrado_img{
	display: flex;
	justify-content: center;
	align-items: center;
}

#img_top{
	height: 200px;
}

.estilo_cabecera{
	height: 200px;
	margin-left: -20px;
	margin-right: -20px;
	margin-top:-20px;
	border-top-left-radius:30px;
	border-top-right-radius: 30px; 
	background-color: #235B4E;
}

.estilo_borde_inferior{
	height:10px;
	background: linear-gradient(to right, #BC955C 50%, #DDC9A3 50%);
	margin-left: -20px;
	margin-right: -20px;
}

.estilo_borde_titulo{
	height: 5px;
	background: linear-gradient(to right, #BC955C 50%, #235B4E 50%);

}

.centrar{
	text-align: center;
}

.btn-institucional {
  color: #235B4E;
  background-color: transparent;
  border-color: #235B4E;
  border-width: 3px;
  position: relative;    
  cursor: pointer;
  overflow: hidden;
  transition: color 0.4s ease, border-color 0.4s ease; 
}

.btn-institucional::before {
    content: 'Ingresar';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    padding-top: 5px;
    background-color: #235B4E; /* Color de la barra de relleno */
    opacity: .9;
    transform: translateX(-100%); /* Inicialmente oculta a la izquierda */
    transition: transform 0.4s ease; /* Transición para el movimiento de la barra */
}

/* Efecto al hacer hover */
.btn-institucional:hover::before {
    transform: translateX(0); /* Mueve la barra a la posición inicial */
    color: white;
}


.btn-institucional:hover {
  color: #BC955C;  
  border-color: #235B4E;
  

}

.btn-institucional:focus, .btn-institucional.focus {
  color: #fff;
  background-color: #235B4E;
  border-color: #DDC9A3;
}

.btn-institucional.disabled, .btn-institucional:disabled {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}