/* =====================================================
   LISTAS ANIMADAS - BASE
   Uso:
   .lista-animada.lista-verde
   .lista-animada.lista-azul
===================================================== */

.lista-animada {
	border: 1px solid rgba(1,55,98,.15);
	border-radius: .75rem;
	overflow: hidden;
	box-shadow: 0 .25rem .75rem rgba(0,0,0,.06);
}

.lista-animada .list-group-item {
	margin: 0;
	padding-left: 1.25rem !important;
	padding-right: 1.25rem !important;
	border-left: 0;
	border-right: 0;
	transition:
		background-color .3s ease,
		color .3s ease;
}

.lista-animada .list-group-item:first-child {
	border-top: 0;
}

.lista-animada .list-group-item:last-child {
	border-bottom: 0;
}


/* =====================================================
   ICONO
===================================================== */

.lista-animada .list-group-item > div > i:first-child {
	transition:
		transform .35s ease,
		color .3s ease;
}

.lista-animada .list-group-item:hover > div > i:first-child,
.lista-animada .list-group-item:focus-visible > div > i:first-child {
	transform: scale(1.25);
}


/* =====================================================
   TÍTULO
===================================================== */

.lista-animada .list-group-item span {
	display: inline-block;
	transition:
		transform .35s ease,
		color .3s ease;
}

.lista-animada .list-group-item:hover span,
.lista-animada .list-group-item:focus-visible span {
	transform: translateX(6px);
}


/* =====================================================
   VERDE
===================================================== */

.lista-verde .list-group-item:hover,
.lista-verde .list-group-item:focus-visible {
	background-color: rgba(25,135,84,.08);
}

.lista-verde .list-group-item:hover span,
.lista-verde .list-group-item:focus-visible span {
	color: #198754 !important;
}

.lista-verde .list-group-item:hover > div > i:first-child,
.lista-verde .list-group-item:focus-visible > div > i:first-child {
	color: #198754 !important;
}


/* =====================================================
   AZUL
===================================================== */

.lista-azul .list-group-item:hover,
.lista-azul .list-group-item:focus-visible {
	background-color: rgba(1,55,98,.07);
}

.lista-azul .list-group-item:hover span,
.lista-azul .list-group-item:focus-visible span {
	color: #013762 !important;
}

.lista-azul .list-group-item:hover > div > i:first-child,
.lista-azul .list-group-item:focus-visible > div > i:first-child {
	color: #013762 !important;
}


/* =====================================================
   ACCESIBILIDAD
===================================================== */

@media (prefers-reduced-motion: reduce) {

	.lista-animada .list-group-item,
	.lista-animada .list-group-item i,
	.lista-animada .list-group-item span {
		transition: none;
	}

	.lista-animada .list-group-item:hover span,
	.lista-animada .list-group-item:focus-visible span {
		transform: none;
	}

}