.base-card {
	max-width: 100%;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.3s ease-in-out;
}

.base-card:hover {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card-header,
.card-content {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 20px 10px 20px;
	position: relative;
}

.card-header.balancedPadding {
	padding: 20px !important;
}

.card-content {
	padding: 0px;
	justify-content: center;
}

.hidden {
	display: none;
}
.divider {
	width: 80%;
	margin: auto;
	height: 1px;
	background-color: #e0e0e0;
}

.icon-container {
	background-color: #673ab7;
	padding: 16px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon-container:has(.app-logo) {
	padding: 0px;
}
.app-logo {
	width: 56px;
	height: 56px;
	border-radius: 4px;
	object-fit: contain;
	padding: 0px;
}

.card-icon {
	color: white;
	font-size: 24px;
}

.text-container {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.card-title {
	font-size: 1.2rem;
	font-weight: 600;
	color: #333;
}

.card-subtitle {
	font-size: 0.9rem;
	color: #666;
}

.disabled {
	opacity: 0.5; // Visualmente se ve deshabilitado
	pointer-events: none; // Desactiva todos los eventos de interacción
	user-select: none; // Evita que el usuario seleccione el texto o elementos dentro de la tarjeta
	filter: grayscale(80%); // Hace que los colores parezcan apagados (opcional)
}
